:root{--bg: #f4efe4;--ink: #2f2b25;--ink-soft: #6f675b;--line: rgba(47, 43, 37, .12);--card: rgba(255, 252, 245, .86);--accent: #4c6b52;--accent-soft: rgba(76, 107, 82, .12);--shadow: 0 18px 50px rgba(74, 60, 40, .16), 0 2px 8px rgba(74, 60, 40, .08);--radius: 18px}*{box-sizing:border-box;margin:0;padding:0}html,body,#app{width:100%;height:100%;overflow:hidden}body{background:var(--bg);color:var(--ink);font-family:Segoe UI,system-ui,-apple-system,PingFang SC,Microsoft YaHei,sans-serif;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}#app{position:relative;isolation:isolate}#scene{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block;touch-action:none}.vignette{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:radial-gradient(120% 85% at 50% 42%,#fff0 45%,#7864481a),linear-gradient(to bottom,#fffdf68c,#fffdf600 18%);z-index:1}.brand{position:absolute;top:clamp(16px,3vh,30px);left:clamp(16px,3vw,34px);display:flex;align-items:center;gap:12px;z-index:3;pointer-events:none;-webkit-user-select:none;user-select:none}.logo{width:42px;height:42px;border-radius:13px;background:#fffdf7;color:#e08a9b;box-shadow:0 6px 18px #785a3c24;display:grid;place-items:center}.logo svg{width:30px;height:30px}.brand-text h1{font-size:19px;letter-spacing:.02em;font-weight:650}.brand-text p{font-size:12px;color:var(--ink-soft);margin-top:2px;letter-spacing:.02em}.hint{position:absolute;top:clamp(22px,4vh,40px);right:clamp(16px,3vw,34px);z-index:3;font-size:11.5px;color:var(--ink-soft);background:#fffcf599;border:1px solid var(--line);padding:6px 11px;border-radius:999px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:opacity .35s ease;pointer-events:none}.hint.is-hidden{opacity:0}.panel{position:absolute;left:50%;bottom:clamp(14px,3vh,26px);transform:translate(-50%);width:min(560px,calc(100vw - 28px));padding:14px;border-radius:var(--radius);background:var(--card);border:1px solid rgba(255,255,255,.7);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(16px) saturate(1.05);backdrop-filter:blur(16px) saturate(1.05);z-index:4;display:flex;flex-direction:column;gap:10px;transform-origin:100% 100%;transition:opacity .3s ease,transform .45s cubic-bezier(.33,.02,.2,1);will-change:transform,opacity}#app.panel-collapsed .panel{opacity:0;pointer-events:none}.ghost-icon{flex:0 0 36px;padding:0;display:grid;place-items:center}.ghost-icon svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.panel-fab{position:absolute;right:clamp(16px,3vw,34px);bottom:clamp(16px,3vh,30px);width:48px;height:48px;padding:0;border-radius:16px;display:grid;place-items:center;color:var(--accent);background:var(--card);border:1px solid rgba(255,255,255,.7);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);opacity:0;transform:scale(.55) translateY(10px);pointer-events:none;transition:opacity .3s ease,transform .42s cubic-bezier(.33,.02,.2,1),background .2s;z-index:5}.panel-fab svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}#app.panel-collapsed .panel-fab{opacity:1;transform:none;pointer-events:auto}.panel-fab:hover{background:#fffdf7}.url-row{display:flex;gap:8px}.url-row input{flex:1;min-width:0;height:42px;padding:0 13px;font-size:13.5px;color:var(--ink);background:#ffffffe6;border:1px solid var(--line);border-radius:12px;outline:none;transition:border-color .2s,box-shadow .2s;font-family:inherit}.url-row input::placeholder{color:#a9a094}.url-row input:focus{border-color:#4c6b5280;box-shadow:0 0 0 3px var(--accent-soft)}.url-row input.is-invalid{border-color:#be594f8c;box-shadow:0 0 0 3px #be594f1a}button{font-family:inherit;font-size:13px;cursor:pointer;border:none;border-radius:12px;transition:transform .12s ease,background .2s,color .2s,box-shadow .2s;-webkit-user-select:none;user-select:none}button:active{transform:translateY(1px)}.primary{height:42px;padding:0 20px;color:#fdfbf5;background:linear-gradient(180deg,#56775c,#45624b);box-shadow:0 6px 16px #45624b47;font-weight:600;letter-spacing:.06em}.primary:hover{background:linear-gradient(180deg,#5d8063,#4a6a51)}.error{display:none;font-size:11.5px;color:#a9503f;padding:0 3px;margin-top:-4px}.error.is-visible{display:block}.row{display:flex;align-items:center;gap:10px;min-height:30px}.label{font-size:11.5px;color:var(--ink-soft);width:30px;flex:none;letter-spacing:.08em}.chips{display:flex;gap:6px;flex:1}.chip{flex:1;height:30px;font-size:12px;color:var(--ink-soft);background:#ffffff9e;border:1px solid var(--line)}.chip:hover{background:#fffffff2}.chip[aria-checked=true]{color:#33422f;background:#e7ecdf;border-color:#4c6b5257;box-shadow:inset 0 0 0 1px #4c6b5214;font-weight:600}.swatches{display:flex;align-items:center;gap:9px;flex:1;padding-left:2px}.swatch{width:24px;height:24px;padding:0;border-radius:50%;border:1px solid rgba(0,0,0,.1);box-shadow:inset 0 -3px 6px #00000024;position:relative}.swatch:after{content:"";position:absolute;top:-4px;right:-4px;bottom:-4px;left:-4px;border-radius:50%;border:1.5px solid transparent;transition:border-color .18s}.swatch[aria-checked=true]:after{border-color:#2f2b258c}.swatch:hover{transform:scale(1.06)}.actions{display:flex;gap:7px;margin-top:2px}.ghost{flex:1;height:36px;font-size:12px;color:#3c4a3c;background:#ffffffad;border:1px solid var(--line);letter-spacing:.03em}.ghost:hover{background:#fff}.ghost[aria-pressed=true]{color:#fdfbf5;background:linear-gradient(180deg,#56775c,#45624b);border-color:transparent;box-shadow:0 6px 16px #45624b3d}.tip{font-size:11px;line-height:1.5;color:#8a8174;letter-spacing:.02em;padding:0 2px 1px}.toast{position:absolute;left:50%;transform:translate(-50%,10px);padding:9px 16px;border-radius:999px;background:#2f2b25db;color:#fff8ec;font-size:12px;opacity:0;pointer-events:none;transition:opacity .28s ease,transform .28s ease;z-index:6;white-space:nowrap}.toast.is-visible{opacity:1;transform:translate(-50%)}@media (max-width: 560px){.brand-text p,.hint{display:none}.panel{padding:12px;gap:9px}.label{width:26px}.toast{bottom:calc(clamp(14px,3vh,26px) + 202px)}}@media (max-height: 620px){.tip{display:none}}.tap-hint{position:absolute;left:0;right:0;margin:0 auto;width:max-content;bottom:calc(clamp(14px,3vh,26px) + var(--panel-h, 220px) + 12px);z-index:4;padding:8px 16px;border-radius:999px;font-family:inherit;font-size:12px;letter-spacing:.02em;color:var(--ink-soft);background:#fffcf5c7;border:1px solid var(--line);box-shadow:0 6px 18px #4a3c2814;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;pointer-events:none;min-width:138px;text-align:center;transition:opacity .3s ease,background .2s,bottom .36s cubic-bezier(.22,1,.36,1)}#app.is-ready .tap-hint{opacity:1;pointer-events:auto}.tap-hint:hover{background:#fffdf7}.toast{bottom:calc(clamp(14px,3vh,26px) + var(--panel-h, 220px) + 58px)}