:root{--bg: #07080a;--ink: #f4f5f7;--muted: rgba(244, 245, 247, .62);--dim: rgba(244, 245, 247, .38);--line: rgba(255, 255, 255, .14);--panel: rgba(8, 10, 12, .62);--font: "Barlow", system-ui, sans-serif;--cond: "Barlow Condensed", "Barlow", system-ui, sans-serif;--power: #b07cff;--handling: #5ad0ff;--range: #7dffb3;--capability: #ffd36a}html[data-studio=white]{--bg: #e8eaee;--ink: #14161a;--muted: rgba(20, 22, 26, .62);--dim: rgba(20, 22, 26, .4);--line: rgba(20, 22, 26, .14);--panel: rgba(255, 255, 255, .72)}*{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%}html,body,#app{width:100%;height:100%;height:100dvh;overflow:hidden;background:var(--bg);color:var(--ink);font-family:var(--font)}#stage{position:absolute;inset:0;display:block;width:100%;height:100%}#loader{position:absolute;inset:0;z-index:40;display:grid;place-items:center;background:#050607;transition:opacity .8s ease,visibility .8s ease}#loader.is-done{opacity:0;visibility:hidden;pointer-events:none}.loader-frame{position:relative;width:min(520px,88vw);aspect-ratio:16 / 9;overflow:hidden}.loader-still{width:100%;height:100%;object-fit:cover}.loader-veil{position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,#050607 100%)}.loader-copy{position:absolute;left:0;right:0;bottom:22px;text-align:center;padding:0 20px}.eyebrow{font-family:var(--cond);letter-spacing:.28em;text-transform:uppercase;font-size:11px;color:var(--muted)}.loader-copy h1,.brand-name{font-family:var(--cond);font-weight:500;letter-spacing:.42em;font-size:clamp(26px,5vw,40px);margin:6px 0}.loader-sub,.loader-status{font-weight:300;font-size:13px;color:var(--muted)}.loader-bar{width:140px;height:1px;margin:14px auto 8px;background:#ffffff24}.loader-bar span{display:block;height:100%;width:0;background:#fff;transition:width .25s linear}#topbar,#spec,#panel-wrap{position:absolute;z-index:8;pointer-events:none}#topbar button,#spec,#spec *,#panel-toggle,#panel{pointer-events:auto}#topbar{top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:flex-start;padding:22px 28px;pointer-events:none}#topbar .top-actions{pointer-events:auto}.brand{display:flex;flex-direction:column;gap:2px;pointer-events:none;min-width:0}.brand-kicker{font-family:var(--cond);letter-spacing:.22em;text-transform:uppercase;font-size:11px;color:var(--muted)}.brand-name{font-size:22px;letter-spacing:.36em;line-height:1;text-transform:uppercase}.top-actions{display:flex;gap:8px;align-items:center}.studio-pair{display:flex;gap:4px}.ghost,.choice,.play-btn{font-family:var(--cond);letter-spacing:.16em;text-transform:uppercase;border:1px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer;backdrop-filter:blur(12px)}.ghost{padding:8px 14px;font-size:12px}.info-btn{width:36px;padding:8px 0;font-family:Times New Roman,Times,serif;font-style:italic;font-size:16px;letter-spacing:0;text-transform:none}.ghost.is-on,.choice.is-on{background:var(--ink);color:var(--bg);border-color:var(--ink)}#spec{left:28px;top:110px;display:flex;align-items:flex-end;gap:12px}#panel-wrap{right:0;top:88px;bottom:24px;display:flex;flex-direction:row;align-items:flex-start}#panel-toggle{flex:0 0 auto;margin:12px 8px 0 0;min-width:52px}#panel{width:min(320px,34vw);height:100%;overflow:auto;padding:8px 20px 8px 8px;display:flex;flex-direction:column;gap:16px;transition:width .28s ease,opacity .2s ease,padding .28s ease}#app.is-panel-collapsed #panel{width:0;padding:0;opacity:0;overflow:hidden;pointer-events:none}#panel section{padding:14px;background:var(--panel);border:1px solid var(--line);backdrop-filter:blur(16px)}#panel h3{font-family:var(--cond);font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;margin-bottom:10px}.swatch-row,.choice-row{display:flex;flex-wrap:wrap;gap:8px}.choice-row.stack{flex-direction:column}.swatch{width:28px;height:28px;border-radius:50%;border:1px solid var(--line);background:var(--swatch);cursor:pointer}.swatch.is-on{outline:2px solid var(--ink);outline-offset:2px}.choice{padding:8px 10px;font-size:11px;text-align:left}.choice.wide{width:100%}.hex-field{display:flex;flex-direction:column;gap:6px;margin-top:12px}.hex-row{display:flex;align-items:center;gap:8px}#paint-color{width:36px;height:36px;padding:0;border:1px solid var(--line);background:transparent;cursor:pointer}#paint-hex{flex:1;min-width:0;font-family:var(--cond);font-size:16px;letter-spacing:.12em;text-transform:uppercase;background:transparent;color:var(--ink);border:1px solid var(--line);padding:8px 10px}.hex-field.is-on #paint-hex{outline:2px solid var(--ink);outline-offset:2px}.tag-field{display:flex;flex-direction:column;gap:4px}#tag-input{width:196px;font-family:var(--cond);font-size:22px;letter-spacing:.12em;text-transform:uppercase;background:var(--panel);color:var(--ink);border:1px solid var(--line);padding:6px 10px;backdrop-filter:blur(12px)}.play-btn{padding:14px 22px;font-size:13px}#toast{position:absolute;bottom:28px;left:50%;transform:translate(-50%);z-index:20;background:var(--ink);color:var(--bg);padding:8px 14px;font-family:var(--cond);letter-spacing:.14em;text-transform:uppercase;font-size:12px}#about,#info{position:absolute;inset:0;z-index:30;background:#0000008c;display:grid;place-items:center;padding:24px}#about[hidden],#info[hidden]{display:none}.about-sheet{width:min(480px,100%);max-height:min(86vh,640px);overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;background:var(--panel);border:1px solid var(--line);backdrop-filter:blur(20px);padding:28px}.about-sheet h2{font-family:var(--cond);letter-spacing:.1em;text-transform:uppercase;font-size:clamp(22px,5.4vw,28px);line-height:1.15;margin:8px 0 14px}.about-sheet p{font-weight:300;line-height:1.5;color:var(--muted);margin-bottom:12px}.about-links{display:flex;flex-direction:column;gap:6px}.about-links a{color:var(--ink);overflow-wrap:anywhere}#about-close,#info-close{margin-top:8px}#share-card{position:absolute;left:-9999px}@media(max-height:520px){#topbar{padding:10px 18px}.brand-kicker{display:none}#spec{top:58px;left:18px}#panel-wrap{top:64px}.about-sheet{padding:16px 20px;max-height:90vh}}@media(max-width:720px){#topbar{align-items:center;padding:calc(10px + env(safe-area-inset-top,0px)) 12px 10px;gap:8px}.brand-kicker,.brand-rest{display:none}.brand-name{font-size:18px;letter-spacing:.28em;white-space:nowrap}.top-actions{flex-shrink:0;gap:6px}.ghost{padding:8px 10px;font-size:11px;letter-spacing:.12em;min-height:40px}.info-btn{width:40px;padding:8px 0}#spec{left:12px;right:12px;top:calc(68px + env(safe-area-inset-top,0px));gap:8px}#tag-input{width:min(168px,44vw);font-size:18px}.play-btn{padding:10px 14px;font-size:12px;min-height:44px}#toast{bottom:calc(68px + env(safe-area-inset-bottom,0px));max-width:calc(100% - 24px);text-align:center}#panel-wrap{inset:auto 0 0;flex-direction:column;align-items:stretch;height:auto;padding-bottom:env(safe-area-inset-bottom,0px)}#panel-toggle{margin:0 12px calc(12px + env(safe-area-inset-bottom,0px)) auto;min-width:88px;min-height:44px}#app:not(.is-panel-collapsed) #panel-wrap{background:var(--panel);backdrop-filter:blur(20px);border-radius:16px 16px 0 0;border-top:1px solid var(--line);overflow:hidden}#app:not(.is-panel-collapsed) #panel-toggle{width:100%;margin:0;border:none;border-radius:0;padding-top:16px;background:transparent}#app:not(.is-panel-collapsed) #panel-toggle:before{content:"";display:block;width:36px;height:3px;margin:0 auto 8px;border-radius:2px;background:var(--line)}#panel{width:100%;height:min(52dvh,420px);padding:4px 12px 16px;flex-direction:column;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;background:transparent;transition:height .28s ease,opacity .2s ease,padding .28s ease}#panel section{min-width:0;width:100%}.swatch{width:36px;height:36px}.choice{min-height:40px;font-size:12px}#app.is-panel-collapsed #panel{width:100%;height:0;padding:0;border:0;opacity:0}#about,#info{display:flex;align-items:flex-end;justify-content:center;padding:0;background:#0000009e}#about[hidden],#info[hidden]{display:none}.about-sheet{width:100%;max-height:min(88dvh,680px);border-radius:16px 16px 0 0;border-bottom:none;padding:12px 20px calc(20px + env(safe-area-inset-bottom,0px))}.about-sheet:before{content:"";display:block;width:36px;height:3px;margin:4px auto 14px;border-radius:2px;background:var(--line)}}@media(max-width:380px){.brand-name{font-size:16px;letter-spacing:.2em}.ghost{padding:8px;letter-spacing:.08em}}