@import "https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600&family=Instrument+Serif:ital@0;1&display=swap";:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#080910;--panel:#10111a;--silver:#f1eff7;--muted:#adadbf;--line:#ffffff19;--violet:#c9b8ff;color:var(--silver);background:var(--bg);font-family:Instrument Sans,system-ui,sans-serif}*{box-sizing:border-box}[hidden]{display:none!important}body{min-height:100vh;margin:0;padding-bottom:28px}a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}button,.primary,.chip{border:1px solid var(--line);color:var(--silver);cursor:pointer;background:#1b1c2b;border-radius:9px;justify-content:center;align-items:center;gap:7px;padding:9px 14px;font-size:13px;display:inline-flex}button:hover,.chip:hover{background:#292a3e}button:disabled{opacity:.44;cursor:default}:focus-visible{outline:2px solid var(--violet);outline-offset:3px}.bare{color:#d8d7e4;background:0 0;border-color:#0000}.primary{color:#141421;background:#eae6f6;border-color:#0000;border-radius:999px;font-weight:600}.primary:hover{color:#141421;background:#fff}.top{border-bottom:1px solid var(--line);background:#0b0c14}.top-inner{grid-template-columns:1fr auto 1fr;align-items:center;max-width:1450px;min-height:60px;margin:auto;padding:0 32px;display:grid}.mark{color:#e2ddef;width:max-content;display:flex}.mark svg{width:31px;height:28px}.top nav{gap:6px;display:flex}.top nav a{color:var(--muted);border-radius:999px;padding:8px 15px;font-size:13px}.top nav a:hover{color:var(--silver)}.top nav a[aria-current]{color:var(--silver);background:#1b1c29}.top-note{color:var(--muted);border-radius:999px;justify-self:end;padding:7px 10px;font-size:12px}main{max-width:1450px;margin:auto;padding:0 30px}h1,h2,h3{margin:0;font-family:Instrument Serif,Georgia,serif;font-weight:400}h1{letter-spacing:-.025em;font-size:clamp(55px,7vw,82px);line-height:.98}h2{font-size:36px;line-height:1.1}h3{font-size:28px;line-height:1.1}p{color:var(--muted);margin:0;font-size:14px;line-height:1.5}#studio{margin-top:24px}.instrument{border:1px solid var(--line);background:#0d0e18;border-radius:19px;overflow:hidden}.stage{isolation:isolate;background:#0a0b1c;height:clamp(475px,68svh,790px);position:relative;overflow:hidden}.stage canvas{touch-action:none;cursor:crosshair;width:100%;height:100%;display:block;position:absolute;inset:0}.stage canvas.hand-cutout{pointer-events:none;z-index:0;opacity:.96;filter:saturate(.68)drop-shadow(0 0 5px #b0a2ff6b)}.studio-intro{z-index:1;text-align:center;pointer-events:none;text-shadow:0 4px 35px #08091d,0 2px 8px #08091d;width:86%;transition:opacity .25s,translate .25s;position:absolute;top:8%;left:50%;transform:translate(-50%)}.studio-intro.playing{opacity:0;translate:0 -8px}.studio-intro h1{font-size:clamp(63px,8vw,122px)}.studio-intro p{color:#d6d4e7;margin-top:9px}.stage-top{z-index:2;pointer-events:none;justify-content:space-between;align-items:center;display:flex;position:absolute;top:15px;left:16px;right:16px}.stage-top>span,.stage-caption{color:#c0bfd5;text-shadow:0 1px 8px #080912;align-items:center;gap:6px;font-size:11px;line-height:1.2;display:flex}.stage-top i{background:#c5b7fa;border-radius:50%;flex:none;width:5px;height:5px}.stage-tools{gap:5px;display:flex}.stage-top button{pointer-events:auto;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#0b0c1d68;border-color:#ffffff24;border-radius:999px;padding:7px 11px;font-size:11px}.stage-top button:hover{background:#23243b}.stage-caption{z-index:1;pointer-events:none;position:absolute;bottom:16px;right:17px}.stage-start{z-index:2;white-space:nowrap;align-items:center;gap:7px;display:flex;position:absolute;bottom:13%;left:50%;transform:translate(-50%)}.stage-start .primary{padding:12px 17px;box-shadow:0 6px 30px #08091690}.stage-start .bare{background:#0b0c20b0;border-color:#ffffff24;border-radius:999px}.zones{border-block:1px solid var(--line);grid-template-columns:repeat(4,1fr);display:grid}.zones div{text-align:center;color:#b9b7ce;padding:8px;font-size:12px}.zones div+div{border-left:1px solid var(--line)}.transport{justify-content:space-between;align-items:center;gap:9px;padding:7px 12px 7px 15px;display:flex}.transport p,.studio-foot{font-size:12px}.transport>div{flex-shrink:0;gap:5px;display:flex}.transport button{padding:7px 10px;font-size:12px}.record-dot{background:var(--violet);border-radius:50%;width:7px;height:7px}.studio-foot{text-align:center;margin-top:12px}.studio-foot span{padding:0 5px}#studio.immersive{z-index:4;background:var(--bg);margin:0;padding:8px;position:fixed;inset:0}.immersive .instrument{flex-direction:column;height:100%;display:flex}.immersive .stage{flex:1;height:auto;min-height:0}.immersive .zones,.immersive .transport{flex-shrink:0}.immersive .studio-foot{display:none}#gallery{max-width:680px;margin:26px auto 0}.gallery-hero{background:#101326 50%/cover;border-radius:15px;align-content:center;min-height:155px;margin-bottom:21px;padding:20px 26px;display:grid;overflow:hidden}.gallery-hero h1{font-size:clamp(52px,7vw,70px)}.gallery-hero p{color:#ccc9dd;margin-top:6px}.cards{flex-direction:column;gap:20px;display:flex}.feed-post{border:1px solid var(--line);background:var(--panel);border-radius:16px;overflow:hidden}.feed-author{align-items:center;gap:10px;padding:11px 15px;display:flex}.feed-author strong{overflow-wrap:anywhere;font-size:13px;font-weight:600;display:block}.feed-author p{margin-top:1px;font-size:11px}.feed-avatar{color:#ded6f1;background:#25233a;border-radius:50%;flex:none;place-items:center;width:34px;height:34px;font-size:13px;display:grid}.feed-post video{aspect-ratio:1.35;object-fit:contain;border-block:1px solid var(--line);background:#06070d;width:100%;max-height:65svh;display:block}.feed-body{padding:6px 14px 13px}.feed-body h3{overflow-wrap:anywhere;margin:1px 0 0 4px;font-size:26px}.feed-actions{align-items:center;gap:1px;margin-left:-6px;display:flex}.icon-action{border-radius:10px;place-items:center;min-width:44px;min-height:44px;padding:9px;display:inline-grid}.icon-action svg{width:23px;height:23px;display:block}.icon-action:hover{color:#fff;background:#ffffff09}.feed-like[aria-pressed=true]{color:var(--violet)}.icon-action[aria-pressed=true] svg{fill:currentColor}.download-control{margin-left:auto}.download-options{color:var(--silver);background:#171823;border:1px solid #3b3c50;border-radius:12px;margin:0;padding:5px;position:fixed;left:auto;box-shadow:0 12px 30px #0008}.download-options a{border-radius:7px;padding:9px 12px;font-size:13px;display:block}.download-options a:hover{background:#292a3e}.feed-status:empty{display:none}.intro{text-align:center;padding:43px 0 24px}.intro p{margin:12px 0 0}.upload-box,.detail,.empty{border:1px solid var(--line);background:var(--panel);border-radius:16px}.upload-box,.empty{text-align:center;max-width:680px;margin:auto;padding:35px 20px}.empty{width:100%}.upload-box h2,.empty h3{margin-bottom:9px}.file{margin:20px 0 13px;position:relative}.file input{opacity:0;cursor:pointer;width:100%;position:absolute;inset:0}.file:focus-within{outline:2px solid var(--violet);outline-offset:3px}.detail{max-width:740px;margin:26px auto;padding:20px}.detail h1{overflow-wrap:anywhere;margin:13px 0 8px;font-size:clamp(45px,6vw,60px)}.detail video,dialog video{aspect-ratio:16/9;object-fit:contain;background:#06070d;width:100%;display:block}.detail video{margin-top:15px}.actions,.share{flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px;display:flex}.share{padding-bottom:8px}.share a,.qr-modal>a{overflow-wrap:anywhere;color:var(--violet);text-decoration:underline}.section-break{border-top:1px solid var(--line);margin-top:19px;padding-top:16px;scroll-margin-top:18px}.comment{overflow-wrap:anywhere;background:#191a29;border-radius:9px;margin-top:12px;padding:11px}dialog{width:min(94vw,550px);max-height:90dvh;color:var(--silver);background:#11121c;border:1px solid #434458;border-radius:18px;padding:22px}dialog::backdrop{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#05060bd9}dialog video{margin:12px 0}label.field{gap:5px;margin-top:10px;font-size:13px;display:grid}input,textarea{width:100%;color:var(--silver);background:#0b0c15;border:1px solid #3b3d52;border-radius:8px;padding:8px}textarea{resize:vertical}.status{margin-top:9px}.trap{position:absolute;left:-9999px}.qr-modal{text-align:center;justify-items:center;gap:11px;display:grid}.qr-modal p{font-size:12px}#site-share{width:min(92vw,370px)}#site-constellation canvas{border-radius:10px;width:min(64vw,242px);height:auto;display:block}@media (width<=640px){main{padding:0 12px}.top-inner{grid-template-columns:auto 1fr auto;min-height:55px;padding:0 12px}.top nav{justify-content:center;gap:0}.top nav a{padding:7px 10px;font-size:12px}.top-note{padding:6px;font-size:11px}#studio{margin-top:12px}.instrument{border-radius:14px}.stage{height:clamp(390px,63svh,630px)}.stage-top{top:9px;left:9px;right:8px}.stage-top>span,.stage-top button,.stage-caption{padding:5px;font-size:10px}.stage-caption{bottom:8px;right:8px}.studio-intro{top:13%}.studio-intro h1{font-size:clamp(45px,13vw,70px)}.studio-intro p{font-size:12px}.stage-start{bottom:13%}.stage-start button{padding:9px 11px;font-size:12px}.transport{flex-wrap:wrap;padding:7px 8px}.transport>div{flex-wrap:wrap;flex-shrink:1;margin-left:auto}.transport button,.studio-foot{font-size:11px}#gallery{margin-top:13px}.gallery-hero{min-height:122px;margin-bottom:13px;padding:17px}.feed-post video{aspect-ratio:1.1}.detail{padding:14px}}@media (prefers-reduced-motion:reduce){.studio-intro{transition:none}}
