:root{--bg:#150f2b;--bg-2:#241a44;--fg:#fff;--fg-dim:#ffffffa8;--accent:#ffd400;--danger:#ff4d6d;--radius:20px;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}.visually-hidden{clip:rect(0, 0, 0, 0)!important;white-space:nowrap!important;border:0!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;position:absolute!important;overflow:hidden!important}html,body,#root{height:100%;margin:0}body{background:radial-gradient(120% 90% at 50% 0%, #2c1f52 0%, var(--bg) 60%);color:var(--fg);overscroll-behavior:none;touch-action:manipulation;-webkit-user-select:none;user-select:none;font-family:Pretendard,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,Apple SD Gothic Neo,sans-serif}button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:0}.screen{max-width:520px;padding:16px 16px calc(24px + env(safe-area-inset-bottom));flex-direction:column;gap:16px;min-height:100%;margin:0 auto;display:flex}.app-shell{min-height:100%}.with-bottom-nav .screen{padding-bottom:calc(112px + env(safe-area-inset-bottom))}.bar{align-items:center;gap:12px;display:flex}.bar h1{margin:0;font-size:20px}.bar-back{color:var(--fg-dim);padding:8px 4px;font-size:17px}.row-label{color:var(--fg-dim);margin:4px 0;font-size:15px}.note{color:var(--fg-dim);margin:0;font-size:14px;line-height:1.5}.warn{color:var(--danger);font-size:15px;font-weight:700}.guide{color:var(--fg-dim);text-align:center;margin:0;font-size:15px}.chip{background:#ffffff17;border-radius:999px;min-height:52px;padding:10px 16px;font-size:16px;font-weight:600;transition:transform .12s,background .12s}.chip:active{transform:scale(.95)}.chip.on{background:var(--accent);color:#241a44}.chip.primary{color:#10352a;background:#3dd6a0}.chip.big{flex:1;min-height:64px;font-size:18px}.chip.wide{width:100%}.chip:disabled{opacity:.4}.chip-grid{flex-wrap:wrap;gap:8px;display:flex}.big-cta{border-radius:var(--radius);color:#2b1a00;background:linear-gradient(#ffd400,#ff9f1c);justify-content:center;align-items:center;gap:10px;width:100%;min-height:76px;font-size:22px;font-weight:800;transition:transform 90ms,box-shadow 90ms;display:flex;box-shadow:0 8px #b96f00}.big-cta:active{transform:translateY(6px);box-shadow:0 2px #b96f00}.big-cta:disabled{opacity:.6}.big-cta-plus{font-size:30px}.big-cta.bottom{margin-top:auto}.progress{background:#ffffff1f;border-radius:999px;height:10px;overflow:hidden}.progress-fill{background:var(--accent);height:100%;transition:width 80ms linear}.home-head{justify-content:space-between;align-items:center;display:flex}.logo{letter-spacing:-.04em;margin:0;font-size:23px}.nick{color:var(--fg-dim);margin:0;font-size:14px}.profile-menu{z-index:20;position:relative}.profile-trigger{border-radius:50%;place-items:center;width:48px;height:48px;padding:2px;display:grid}.profile-trigger[aria-expanded=true]{background:#ffd4001f}.profile-trigger:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.profile-menu-item:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.profile-dropdown{-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);transform-origin:100% 0;background:#1e1539fa;border:1px solid #ffffff24;border-radius:18px;width:min(250px,100vw - 32px);padding:10px;animation:.13s ease-out profile-menu-in;position:absolute;top:calc(100% + 8px);right:0;box-shadow:0 18px 48px #0000006b}@keyframes profile-menu-in{0%{opacity:0;transform:translateY(-5px)scale(.98)}}.profile-dropdown-user{border-bottom:1px solid #ffffff17;align-items:center;gap:10px;min-width:0;padding:5px 6px 11px;display:flex}.profile-dropdown-user .profile-avatar{width:38px;height:38px;font-size:15px}.profile-dropdown-user>span{flex-direction:column;gap:2px;min-width:0;display:flex}.profile-dropdown-user strong{text-overflow:ellipsis;white-space:nowrap;font-size:14px;overflow:hidden}.profile-dropdown-user small{color:var(--fg-dim);font-size:11px}.profile-menu-item{text-align:left;border-radius:12px;align-items:center;gap:10px;width:100%;min-height:48px;margin-top:7px;padding:0 10px;font-size:14px;font-weight:750;display:flex}.profile-menu-item:active{background:#ffffff1a}.profile-menu-icon{width:28px;height:28px;color:var(--accent);background:#ffd40024;border-radius:9px;place-items:center;font-size:17px;display:grid}.profile-menu-icon.guide{color:#72e7bf;background:#41d3a424;font-size:15px;font-weight:900}.guide-screen{gap:18px}.guide-bar{min-height:36px}.guide-hero{background:radial-gradient(circle at 88% 20%,#ffd40033,#0000 30%),linear-gradient(145deg,#493572f2,#241a44f2);border:1px solid #ffd4002e;border-radius:24px;padding:22px 20px;overflow:hidden;box-shadow:0 18px 42px #0000002e}.guide-hero h1{letter-spacing:-.05em;margin:2px 0 6px;font-size:30px}.guide-hero>p:last-child{color:var(--fg-dim);margin:0;font-size:15px;line-height:1.6}.guide-steps{flex-direction:column;gap:12px;margin:0;padding:0;list-style:none;display:flex}.guide-step{content-visibility:auto;contain-intrinsic-size:180px;background:#ffffff0f;border:1px solid #ffffff17;border-radius:20px;grid-template-columns:54px minmax(0,1fr);gap:12px;padding:16px;display:grid}.guide-step-number{width:54px;height:62px;color:var(--accent);background:linear-gradient(155deg,#ffd40033,#ff9f1c1a);border-radius:16px;flex-direction:column;justify-content:center;align-items:center;gap:1px;display:flex}.guide-step-number span{font-size:10px;font-weight:900}.guide-step-number b{font-size:22px;line-height:1}.guide-step-copy h2{margin:1px 0 6px;font-size:17px}.guide-step-copy p{color:#ffffffd1;margin:0;font-size:14px;line-height:1.6}.guide-step-copy small{color:#ffe36c;border-top:1px solid #ffffff14;margin-top:9px;padding-top:8px;font-size:12px;line-height:1.5;display:block}.guide-account{background:#41d3a41c;border-radius:20px;align-items:flex-start;gap:12px;padding:16px;display:flex}.guide-account>span{color:#72e7bf;background:#41d3a42e;border-radius:13px;flex:none;place-items:center;width:38px;height:38px;font-size:20px;display:grid}.guide-account h2{margin:1px 0 5px;font-size:16px}.guide-account p{color:var(--fg-dim);margin:0;font-size:13px;line-height:1.55}.guide-create{min-height:72px}.profile-avatar{width:44px;height:44px;color:var(--accent);object-fit:cover;background:linear-gradient(145deg,#493572,#241a44);border:2px solid #ffd40073;border-radius:50%;flex:none;place-items:center;font-size:18px;font-weight:900;display:grid}.profile-screen{gap:18px}.app-version{color:#ffffff61;font-variant-numeric:tabular-nums;letter-spacing:.04em;text-align:center;-webkit-user-select:text;user-select:text;margin-top:auto;font-size:11px;font-weight:700}.profile-card,.account-card{background:#ffffff12;border:1px solid #ffffff1a;border-radius:24px;flex-direction:column;gap:16px;padding:18px;display:flex;box-shadow:0 16px 42px #00000029}.profile-avatar-button{min-width:116px;min-height:116px;color:var(--fg-dim);background:#ffffff0e;border-radius:24px;flex-direction:column;justify-content:center;align-self:center;align-items:center;gap:8px;font-size:13px;font-weight:700;display:flex}.profile-avatar-button .profile-avatar{width:70px;height:70px;font-size:28px}.stage-avatar-setting{background:#ffffff0b;border:1px solid #ffffff1a;border-radius:18px;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px 14px;padding:14px;display:grid}.stage-avatar-copy{min-width:0}.stage-avatar-copy strong{margin-bottom:5px;font-size:14px;display:block}.stage-avatar-copy p,.stage-avatar-help{color:var(--fg-dim);margin:0;font-size:12px;line-height:1.55}.stage-avatar-help{color:#ffd96a;grid-column:1/-1}.privacy-switch{background:#ffffff2e;border-radius:999px;flex:none;width:54px;height:32px;transition:background .16s;position:relative}.privacy-switch>span{background:#fff;border-radius:50%;width:24px;height:24px;transition:transform .16s;position:absolute;top:4px;left:4px;box-shadow:0 2px 8px #0000004d}.privacy-switch.active{background:#41d3a4}.privacy-switch.active>span{transform:translate(22px)}.privacy-switch:disabled{cursor:not-allowed;opacity:.42}.profile-save{min-height:62px;margin-top:2px}.account-card h2{margin:-10px 0 0;font-size:21px}.account-card .note{color:var(--fg-dim);overflow-wrap:anywhere;margin:0;font-size:14px;line-height:1.65}.account-connected{color:#62e6b6;margin:0;font-size:16px;font-weight:800}.google-connect{color:#241a44;background:#fff;border-radius:18px;justify-content:center;align-items:center;gap:10px;min-height:58px;font-weight:800;display:flex}.google-connect>span{color:#4285f4;border:2px solid #4285f4;border-radius:50%;place-items:center;width:26px;height:26px;font-size:14px;display:grid}.google-connect:disabled,.profile-save:disabled{cursor:wait;opacity:.65}.profile-message{color:#85f0cc;background:#3edaa724;border-radius:16px;margin:0;padding:12px 14px;font-size:14px;line-height:1.5}.mission{border-radius:var(--radius);background:#ffffff14;margin:0;padding:14px 16px;font-size:16px;line-height:1.5}.mission-tag{background:var(--accent);color:#241a44;border-radius:999px;margin-right:8px;padding:3px 10px;font-size:12px;font-weight:800;display:inline-block}.my-works h2{margin:0 0 10px;font-size:17px}.empty{color:var(--fg-dim);font-size:15px}.work-list{grid-template-columns:repeat(2,1fr);gap:12px;margin:0;padding:0;list-style:none;display:grid}.work-list li{position:relative}.work-card{border-radius:var(--radius);text-align:left;background:#ffffff12;flex-direction:column;gap:6px;width:100%;padding:10px;display:flex}.work-thumb{aspect-ratio:16/10;background:var(--bg-2);object-fit:cover;border-radius:14px;width:100%}.work-title{font-size:15px;font-weight:700}.work-state{color:var(--fg-dim);font-size:12px}.work-delete{background:#00000080;border-radius:999px;width:32px;height:32px;font-size:14px;position:absolute;top:4px;right:4px}.feed{gap:20px}.feed-head{justify-content:space-between;align-items:flex-start;gap:16px;padding-top:4px;display:flex}.feed-kicker{color:var(--accent);letter-spacing:.18em;margin:0 0 4px;font-size:11px;font-weight:900}.feed-head h1{margin:0;font-size:28px;line-height:1.2}.feed-head div>p:last-child{color:var(--fg-dim);margin:6px 0 0;font-size:14px}.feed-count{min-width:40px;height:40px;color:var(--accent);background:#ffd40024;border-radius:14px;place-items:center;font-weight:900;display:grid}.feed-list{flex-direction:column;gap:16px;display:flex}.feed-card{content-visibility:auto;contain-intrinsic-size:330px;background:#ffffff12;border:1px solid #ffffff1a;border-radius:24px;overflow:hidden;box-shadow:0 16px 36px #0000002e}.feed-card.featured{background:linear-gradient(160deg,#ffd4001c,#ffffff0f 46%);border-color:#ffd40052}.feed-cover{padding:10px 10px 0;position:relative}.feed-thumb{aspect-ratio:16/9;background:radial-gradient(circle at 25% 30%,#ffd40040,#0000 28%),linear-gradient(135deg,#352867,#1d163b);border-radius:17px;width:100%;display:block;overflow:hidden}.feed-thumb img{object-fit:cover;width:100%;height:100%;display:block}.feed-badge,.feed-duration{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#140d28c7;border-radius:999px;padding:6px 9px;font-size:11px;font-weight:800;position:absolute;top:20px}.feed-badge{color:#79efc2;left:20px}.feed-duration{right:20px}.feed-card-body{align-items:flex-end;gap:12px;padding:15px;display:flex}.feed-card-copy{flex:1;min-width:0}.feed-author{color:var(--fg-dim);margin:0;font-size:12px}.feed-author-row{align-items:center;gap:8px;min-width:0;margin-bottom:7px;display:flex}.feed-author-row .profile-avatar{border-width:1px;width:30px;height:30px;font-size:12px}.feed-card h2{text-overflow:ellipsis;white-space:nowrap;margin:0;font-size:19px;line-height:1.3;overflow:hidden}.feed-hint{color:var(--fg-dim);text-overflow:ellipsis;white-space:nowrap;margin:5px 0 0;font-size:13px;overflow:hidden}.feed-replay{background:var(--accent);color:#261a00;border-radius:17px;justify-content:center;align-items:center;gap:6px;min-width:102px;min-height:52px;font-size:14px;font-weight:900;transition:transform 90ms,box-shadow 90ms;display:flex;box-shadow:0 5px #a76700}.feed-replay:active{transform:translateY(4px);box-shadow:0 1px #a76700}.feed-empty{text-align:center;background:#ffffff0a;border:1px dashed #ffffff2e;border-radius:28px;flex-direction:column;justify-content:center;align-items:center;gap:10px;min-height:360px;padding:32px 24px;display:flex}.feed-empty-icon{width:68px;height:68px;color:var(--accent);background:#ffd4001f;border-radius:22px;place-items:center;font-size:34px;display:grid;transform:rotate(-6deg)}.feed-empty h2{margin:8px 0 0;font-size:20px}.feed-empty p{max-width:290px;color:var(--fg-dim);margin:0 0 10px;font-size:14px;line-height:1.6}.bottom-nav{z-index:15;width:min(100%,520px);min-height:74px;padding:7px 12px calc(7px + env(safe-area-inset-bottom));-webkit-backdrop-filter:blur(20px)saturate(1.3);backdrop-filter:blur(20px)saturate(1.3);background:#181030eb;border:1px solid #ffffff1a;border-bottom:0;border-radius:24px 24px 0 0;grid-template-columns:repeat(3,1fr);align-items:end;display:grid;position:fixed;bottom:0;left:50%;transform:translate(-50%);box-shadow:0 -12px 36px #00000047}.bottom-nav-item{min-height:56px;color:var(--fg-dim);border-radius:16px;flex-direction:column;justify-content:center;align-items:center;gap:3px;font-size:11px;font-weight:800;display:flex}.bottom-nav-item>svg{fill:currentColor;width:23px;height:23px}.bottom-nav-item.active{color:var(--accent)}.bottom-nav-item.create{color:var(--fg)}.bottom-nav-create-icon{color:#2b1a00;background:linear-gradient(#ffd400,#ff9f1c);border:4px solid #241a44;border-radius:18px;place-items:center;width:50px;height:50px;margin-top:-25px;display:grid;transform:rotate(5deg);box-shadow:0 7px 18px #ff9f1c4d}.bottom-nav-create-icon svg{fill:currentColor;width:25px;height:25px;transform:rotate(-5deg)}.keyboard-plate{background:linear-gradient(#372a63 0%,#221a42 100%);border-radius:24px;margin-block-start:auto;margin-block-end:auto;padding:13px 11px 11px;box-shadow:inset 0 1.5px #ffffff29,inset 0 -2px 6px #0006,0 12px 34px #00000080}.keycap-grid{grid-template-columns:repeat(4,1fr);align-items:start;gap:9px;display:grid}.keycap-column{flex-direction:column;gap:8px;display:flex}.loop-toggle{color:#ffffff73;background:#00000047;border-radius:14px;place-items:center;min-height:44px;font-size:19px;transition:background .14s,color .14s;display:grid;box-shadow:inset 0 0 0 1.5px #ffffff24}.loop-toggle.is-on{color:#0d3b2c;background:#3dd6a0;box-shadow:inset 0 0 0 1.5px #ffffff80,0 0 12px #3dd6a099}.loop-toggle.is-pending{color:#eafff6;background:#3dd6a059;animation:.38s ease-in-out infinite alternate loop-wait}.loop-toggle .loop-icon{line-height:1}@keyframes loop-wait{0%{opacity:.45}to{opacity:1}}.bars{justify-content:center;gap:6px;display:flex}.bar-dot{background:#ffffff24;border-radius:999px;width:100%;max-width:34px;height:6px;transition:background .12s}.bar-dot.on{background:var(--accent)}.beat-pulse{justify-content:center;gap:14px;display:flex}.pulse-dot{background:#ffffff2e;border-radius:999px;width:10px;height:10px}.pulse-dot.on{background:#fff;transform:scale(1.5)}.keycap-slot{aspect-ratio:.8;padding:0}.keycap-unit{width:100%;height:100%;display:block;position:relative}.keycap{background: linear-gradient(90deg, #00000042 0%, #0000000a 12%, #ffffff0f 50%, #0000000f 88%, #0000004d 100%),  linear-gradient(180deg, #ffffff52 0%, #ffffff0a 30%, #0000000d 62%, #00000042 100%), var(--cap-color,#999);height:68%;transition:transform var(--rebound,.14s) var(--rebound-ease,ease-out), box-shadow var(--rebound,.14s) ease;border-radius:13% 13% 8% 8%/17% 17% 11% 11%;position:absolute;top:0;left:2%;right:2%;transform:translateY(0)scale(1);box-shadow:inset 0 1.5px #fff9,inset 0 -2px 3px #00000038,0 5px 0 -1px #00000052,0 9px 13px #00000073}.keycap.is-pressed{transform:translateY(var(--press-depth,8px)) scale(var(--press-scale,.96));transition-duration:45ms;box-shadow:inset 0 1.5px #ffffff80,inset 0 -2px 3px #0000003d,0 1px 0 -1px #00000052,0 3px 6px #00000073}.keycap-top{background:radial-gradient(130% 120% at 50% 130%,#00000024,#0000 62%),linear-gradient(#ffffff4d 0%,#ffffff0d 52%,#fff0 100%);border-radius:16%/24%;place-items:center;display:grid;position:absolute;top:8%;bottom:24%;left:13%;right:13%;overflow:hidden;box-shadow:inset 0 -1px 2px #00000029}.keycap-gloss{pointer-events:none;background:linear-gradient(#fffffff2 0%,#ffffff80 45%,#fff0 100%);border-radius:999px;width:9%;height:62%;position:absolute;top:9%;left:9%;transform:rotate(5deg)}.keycap-art{object-fit:contain;pointer-events:none;filter:drop-shadow(0 1px 1px #00000038);width:100%;height:100%}.cute-face{width:100%;height:100%;position:relative}.cf-eye{background:#261830d1;border-radius:50%;width:13%;height:22%;position:absolute;top:33%}.cf-eye.cf-left{left:25%}.cf-eye.cf-right{right:25%}.cf-blush{filter:blur(1px);background:#ff6e916b;border-radius:50%;width:15%;height:10%;position:absolute;top:53%}.cf-blush.cf-left{left:13%}.cf-blush.cf-right{right:13%}.cf-mouth{border-bottom:2px solid #261830d1;border-radius:0 0 60% 60%;width:16%;height:11%;position:absolute;top:50%;left:50%;transform:translate(-50%)}.keycap-housing{background:linear-gradient(#ffffff6b 0%,#ffffff24 38%,#ffffff4d 78%,#ffffff80 100%);border-radius:8% 8% 11% 11%;height:40%;position:absolute;bottom:0;left:6%;right:6%;box-shadow:inset 0 0 0 1.5px #ffffffb8,inset 0 -3px 6px #fff6,0 4px 9px #0000006b}.housing-slot{background:#ffffff38;border-radius:3px;height:42%;position:absolute;top:14%;left:22%;right:22%;box-shadow:inset 0 0 0 1px #ffffff73}.switch-stem{background:linear-gradient(#ffffffe6 0 0) 50%/100% 26% no-repeat,linear-gradient(#ffffffe6 0 0) 50%/26% 100% no-repeat;position:absolute;top:18%;bottom:18%;left:18%;right:18%}.switch-contact{opacity:.85;background:linear-gradient(#f5d98a,#c9a03c);border-radius:1px;width:14%;height:26%;position:absolute;top:34%}.switch-contact.left{left:-12%}.switch-contact.right{right:-12%}.housing-base{background:linear-gradient(#fff3 0%,#ffffff75 100%);border-radius:0 0 12% 12%;height:34%;position:absolute;bottom:0;left:-5%;right:-5%;box-shadow:inset 0 0 0 1.5px #fff9}.keycap-badge{filter:drop-shadow(0 1px 1px #0006);font-size:12px;position:absolute;top:3px;right:4px}.keycap-led{border-radius:inherit;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 45%,#fffffff2,#0000 68%);position:absolute;top:0;bottom:0;left:0;right:0}.keycap.is-firing.motion-squish{animation:.38s cubic-bezier(.2,.9,.3,1) m-squish}.keycap.is-firing.motion-jump{animation:.42s cubic-bezier(.3,1.4,.4,1) m-jump}.keycap.is-firing.motion-shake{animation:.36s linear m-shake}.keycap.is-firing.motion-spin{animation:.52s cubic-bezier(.3,.9,.3,1) m-spin}.keycap.is-firing.motion-pop{animation:.38s cubic-bezier(.2,1.6,.4,1) m-pop}.keycap.is-firing.motion-melt{animation:.56s ease-in-out m-melt}@keyframes m-squish{0%{transform:scale(1)}35%{transform:scale(1.16,.78)translateY(6%)}70%{transform:scale(.94,1.08)}to{transform:scale(1)}}@keyframes m-jump{0%{transform:translateY(0)}40%{transform:translateY(-22%)scale(1.03)}70%{transform:translateY(4%)scale(.98,1.02)}to{transform:translateY(0)}}@keyframes m-shake{0%,to{transform:translate(0)rotate(0)}20%{transform:translate(-7%)rotate(-4deg)}45%{transform:translate(6%)rotate(4deg)}70%{transform:translate(-4%)rotate(-2deg)}}@keyframes m-spin{0%{transform:rotate(0)scale(1)}60%{transform:rotate(340deg)scale(.92)}to{transform:rotate(360deg)scale(1)}}@keyframes m-pop{0%{transform:scale(1)}30%{transform:scale(1.28)}60%{transform:scale(.92)}to{transform:scale(1)}}@keyframes m-melt{0%{border-radius:22px;transform:scaleY(1)}45%{border-radius:22px 22px 44% 44%;transform:scaleY(.62)translateY(18%)}to{border-radius:22px;transform:scaleY(1)}}.keycap.led-breath .keycap-led{animation:2.6s ease-in-out infinite led-breath}.keycap.led-rainbow .keycap-led{opacity:.55;mix-blend-mode:overlay;background:conic-gradient(#ff4d6d,#ffd400,#3dd6a0,#4cc9f0,#7b61ff,#ff4d6d);animation:3.4s linear infinite led-rainbow}.keycap.led-flash.is-firing .keycap-led{animation:.38s ease-out led-flash}.keycap.led-breath.is-firing .keycap-led,.keycap.led-rainbow.is-firing .keycap-led{animation:.32s ease-out led-flash,2.6s ease-in-out .32s infinite led-breath}@keyframes led-flash{0%{opacity:.95}to{opacity:0}}@keyframes led-breath{0%,to{opacity:.08}50%{opacity:.42}}@keyframes led-rainbow{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){.keycap.is-firing{animation-duration:1ms!important}.keycap-led{animation:none!important}}.sheet-backdrop{z-index:20;background:#0000008c;align-items:flex-end;display:flex;position:fixed;top:0;bottom:0;left:0;right:0}.sheet{background:var(--bg-2);width:100%;max-width:520px;padding:12px 16px calc(16px + env(safe-area-inset-bottom));border-radius:24px 24px 0 0;flex-direction:column;gap:12px;max-height:88vh;margin:0 auto;display:flex}.sheet-head{justify-content:space-between;align-items:center;display:flex}.sheet-title{font-size:18px;font-weight:800}.sheet-close{background:#ffffff1a;border-radius:999px;width:40px;height:40px}.sheet-tabs{grid-template-columns:repeat(5,1fr);gap:6px;display:grid}.sheet-tab{background:#ffffff0f;border-radius:14px;flex-direction:column;align-items:center;gap:2px;padding:10px 2px;font-size:13px;display:flex}.sheet-tab.on{background:var(--accent);color:#241a44;font-weight:800}.sheet-body{-webkit-overflow-scrolling:touch;flex-direction:column;gap:12px;padding-bottom:4px;display:flex;overflow-y:auto}.sheet-done{border-radius:var(--radius);color:#10352a;background:#3dd6a0;min-height:60px;font-size:18px;font-weight:800}.draw{flex-direction:column;gap:10px;display:flex}.draw-canvas{aspect-ratio:1;touch-action:none;background:linear-gradient(45deg,#ffffff12 25%,#0000 25%) 0 0/20px 20px,linear-gradient(-45deg,#ffffff12 25%,#0000 25%) 0 10px/20px 20px,#ffffff14;border-radius:18px;align-self:center;width:100%;max-width:min(100%,40vh)}.draw-tools{flex-direction:column;gap:8px;display:flex}.draw-row{flex-wrap:wrap;gap:8px;display:flex}.palette,.color-row{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.swatch{border:3px solid #0000;border-radius:999px;width:40px;height:40px}.swatch.on{border-color:var(--accent);transform:scale(1.1)}.recorder{border-radius:var(--radius);background:#ffffff0f;flex-direction:column;align-items:center;gap:10px;padding:12px;display:flex}.rec-button{border-radius:var(--radius);background:var(--danger);justify-content:center;align-items:center;gap:12px;width:100%;min-height:68px;font-size:19px;font-weight:800;display:flex}.rec-dot{background:#fff;border-radius:999px;width:20px;height:20px}.rec-count{font-size:72px;font-weight:900}.rec-live{place-items:center;gap:8px;display:grid}.rec-ring{background:var(--danger);border-radius:999px;width:90px;height:90px;transition:transform 60ms linear}.rec-review{flex-direction:column;align-items:center;gap:8px;display:flex}.rec-size,.rec-hint{color:var(--fg-dim);margin:0;font-size:14px}.demo-stage{place-items:center;padding:12px;display:grid}.demo-unit{width:104px;height:133px}.demo-slot{background:0 0;padding:0}.toggle{border-radius:var(--radius);background:#ffffff14;align-items:center;gap:12px;width:100%;min-height:64px;padding:0 16px;font-size:17px;font-weight:700;display:flex}.toggle .toggle-knob{background:#fff3;border-radius:999px;flex:none;width:52px;height:30px;position:relative}.toggle .toggle-knob:after{content:"";background:#fff;border-radius:999px;width:24px;height:24px;transition:transform .16s;position:absolute;top:3px;left:3px}.toggle.on .toggle-knob{background:#3dd6a0}.toggle.on .toggle-knob:after{transform:translate(22px)}.record-cta{border-radius:var(--radius);background:var(--danger);justify-content:center;align-items:center;gap:12px;min-height:84px;font-size:22px;font-weight:800;display:flex;box-shadow:0 8px #a52a44}.record-cta:active{transform:translateY(6px);box-shadow:0 2px #a52a44}.record-dot{background:#fff;border-radius:999px;width:24px;height:24px}.countdown{text-align:center;font-size:96px;font-weight:900;animation:.4s ease-out m-pop}.live-hint{text-align:center;flex-direction:column;gap:4px;font-size:17px;font-weight:700;display:flex}.press-count{color:var(--fg-dim);font-size:14px;font-weight:500}.performance-controls{grid-template-columns:1fr 1fr;gap:10px;display:grid}.performance-controls .chip{min-width:0;padding-inline-start:12px;padding-inline-end:12px}.performance-pause{color:#ffe45e;background:#ffd4002e}.performance-stop{color:#ff8da2;background:#ff4d6d29}.done-row{flex-direction:column;gap:10px;display:flex}.done-msg{text-align:center;margin:0;font-size:20px;font-weight:800}.field{flex-direction:column;gap:6px;font-size:15px;display:flex}.field input{border-radius:var(--radius);min-height:60px;color:var(--fg);background:#ffffff0f;border:2px solid #ffffff24;padding:0 16px;font-size:18px}.field em{color:var(--fg-dim);align-self:flex-end;font-size:12px;font-style:normal}.share-done{border-radius:var(--radius);background:#ffffff12;flex-direction:column;gap:10px;padding:14px;display:flex}.share-link{word-break:break-all;color:var(--accent);font-size:14px}.sheet.gate{max-height:92vh}.gate-block{border-bottom:1px solid #ffffff14;flex-direction:column;gap:8px;padding-bottom:6px;display:flex}.gate-list{margin:0;padding-left:20px;font-size:15px;line-height:1.7}.gate-options{flex-direction:column;gap:8px;display:flex}.gate-option{text-align:left;background:#ffffff12;border-radius:14px;flex-direction:column;align-items:flex-start;gap:2px;min-height:60px;padding:10px 14px;display:flex;box-shadow:inset 0 0 0 2px #0000}.gate-option.on{background:#3dd6a02e;box-shadow:inset 0 0 0 2px #3dd6a0}.gate-option strong{font-size:16px}.gate-option span{color:var(--fg-dim);font-size:13px}.gate-check{align-items:flex-start;gap:12px;padding:4px 0;font-size:14px;line-height:1.6;display:flex}.gate-check input{accent-color:#3dd6a0;flex:none;width:26px;height:26px;margin-top:2px}.gate-actions{gap:10px;display:flex}.gate-actions .sheet-done{flex:1}.gate-actions .sheet-done:disabled{opacity:.4}.view-head{text-align:center}.view-head h1{margin:0 0 6px;font-size:24px}.view-head .hint{color:var(--fg-dim);margin:0 0 4px;font-size:16px}