:root{--board:#131316;--surface:#1e1f23;--surface-2:#2a2b30;--ink:#f2f2f3;--ink-soft:#9b9ca3;--rule:#2f3036;--tray:#131316;--tray-raised:#24252a;--tray-ink:#8d8e95;--marker-blue:#5b8cff;--marker-blue-bright:#7ea4ff;--marker-green:#3ecf8e;--marker-red:#ff6b5b;--font-ui:"Instrument Sans", system-ui, sans-serif;--font-hand:"Kalam", "Comic Neue", cursive;--radius-sm:6px;--radius:10px;--radius-lg:16px;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-family:var(--font-ui);color:var(--ink);-webkit-font-smoothing:antialiased;font-size:16px;line-height:1.5}*,:before,:after{box-sizing:border-box}body{background:var(--board);min-height:100vh;margin:0}h1,h2,h3{margin:0;line-height:1.2}h1{font-size:1.75rem;font-weight:600}h2{font-size:1.25rem;font-weight:600}h3{font-size:1rem;font-weight:600}p{margin:0}a{color:var(--marker-blue)}code{background:#ffffff14;border-radius:4px;padding:.1em .35em;font-size:.9em}:focus-visible{outline:2.5px solid var(--marker-blue);outline-offset:2px}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.muted{color:var(--ink-soft)}.btn{font:inherit;cursor:pointer;border:1.5px solid #0000;border-radius:999px;justify-content:center;align-items:center;gap:.5rem;padding:.6rem 1.1rem;font-size:.94rem;font-weight:600;text-decoration:none;transition:background .15s,border-color .15s,color .15s;display:inline-flex}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{color:var(--board);background:#fff}.btn-primary:hover:not(:disabled){background:#e4e4e7}.btn-outline{border-color:var(--rule);color:var(--ink);background:0 0}.btn-outline:hover:not(:disabled){border-color:var(--ink)}.btn-ghost{color:var(--ink);background:0 0}.btn-ghost:hover:not(:disabled){background:#ffffff0f}.btn-sm{padding:.4rem .9rem;font-size:.85rem}.btn-block{width:100%}.danger-text{color:var(--marker-red)}.icon-btn{border-radius:var(--radius-sm);width:34px;height:34px;color:inherit;cursor:pointer;background:0 0;border:0;place-items:center;display:inline-grid}.icon-btn:hover{background:#ffffff14}.icon-btn.danger:hover{color:var(--marker-red)}.icon-btn.is-on{color:var(--marker-green)}.logo{color:inherit;font-family:var(--font-hand);align-items:center;gap:.55rem;font-size:1.35rem;font-weight:700;line-height:1;text-decoration:none;display:inline-flex}.hand-title{font-family:var(--font-hand);letter-spacing:-.01em;font-size:clamp(2.6rem,7vw,5rem);font-weight:700;line-height:1.05}.hand-title.small{font-size:clamp(1.8rem,4vw,2.6rem)}.hand-title .draw-on{display:block}.hand-title .draw-on-2{color:var(--marker-blue)}@media (prefers-reduced-motion:no-preference){.draw-on{clip-path:inset(0 100% 0 0);animation:1.1s cubic-bezier(.45,.05,.4,1) .15s forwards write}.draw-on-2{animation-delay:1.15s}@keyframes write{to{clip-path:inset(0 -2% 0 0)}}}.hero-sub{max-width:34em;color:var(--ink-soft);margin:1.5rem auto 2.25rem;font-size:1.1rem}.access-blocked{border:1px solid var(--rule);border-radius:var(--radius-lg);background:var(--surface);flex-direction:column;align-items:flex-start;gap:1rem;width:min(480px,100%);margin:18vh auto 0;padding:2rem;display:flex}.access-blocked p{color:var(--ink-soft)}.example{margin:0}.example video,.example-preview{aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius);border:1px solid var(--rule);background:#fff;width:100%;display:block}.example-preview{cursor:pointer;padding:0;position:relative;overflow:hidden}.example-preview img{object-fit:cover;width:100%;height:100%}.play-badge{color:#fff;font:inherit;background:#000000bf;border-radius:999px;align-items:center;gap:.4rem;padding:.4rem .8rem;font-size:.82rem;font-weight:600;display:inline-flex;position:absolute;bottom:.75rem;left:.75rem}.example-preview:hover .play-badge{background:var(--marker-blue)}.example figcaption{flex-direction:column;gap:.1rem;padding-top:.75rem;display:flex}.example-prompt{font-family:var(--font-hand);color:var(--marker-blue);font-size:1.05rem}.prompt{flex-direction:column;gap:1rem;display:flex}.prompt-box{background:var(--surface);border:1px solid #ffffff0f;border-radius:28px;padding:1.25rem 1.25rem .9rem 1.5rem;transition:border-color .2s,box-shadow .2s;box-shadow:inset 0 1px #ffffff0a,0 24px 60px -24px #000000b3}.prompt-box:focus-within{border-color:#ffffff29;box-shadow:inset 0 1px #ffffff0a,0 24px 60px -24px #000000b3}.prompt-box textarea{resize:none;width:100%;min-height:3.6rem;font:inherit;color:var(--ink);background:0 0;border:0;outline:none;font-size:1.15rem;line-height:1.5;display:block}.prompt-box textarea::placeholder{color:#6c6d74}.prompt-controls{flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:.75rem;display:flex}.pill{height:40px;color:var(--ink-soft);cursor:pointer;background:0 0;border:1px solid #3a3b41;border-radius:999px;align-items:center;gap:.45rem;padding:0 .85rem;font-size:.9rem;font-weight:500;transition:border-color .15s,background .15s,color .15s;display:inline-flex;position:relative}.pill:hover{background:var(--surface-2);color:var(--ink);border-color:#4a4b52}.pill:focus-within{border-color:var(--marker-blue);color:var(--ink)}.pill select{appearance:none;font:inherit;color:var(--ink);cursor:pointer;background:0 0;border:0;outline:none;padding-right:.1rem}.prompt-submit{width:44px;height:44px;color:var(--board);cursor:pointer;background:#fff;border:0;border-radius:50%;flex:none;place-items:center;margin-left:auto;transition:background .15s,transform .15s,box-shadow .15s;display:grid}.prompt-submit:hover:not(:disabled){background:#e4e4e7;transform:translate(2px)}.prompt-submit:disabled{color:#7b7c83;box-shadow:none;cursor:not-allowed;background:#34353b}.spinner{border:2px solid #0003;border-top-color:var(--board);border-radius:50%;width:18px;height:18px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.tab-hint{font:inherit;color:#6c6d74;white-space:nowrap;cursor:pointer;background:0 0;border:0;border-radius:8px;margin-left:auto;padding:.3rem .5rem;font-size:.8rem}.tab-hint:hover{color:var(--ink-soft)}.hint-touch{display:none}@media (hover:none){.hint-keys{display:none}.hint-touch{display:inline}}.tab-hint kbd{font:inherit;color:var(--ink-soft);border:1px solid #3a3b41;border-bottom-width:2px;border-radius:5px;margin-right:.15rem;padding:.1rem .4rem;font-size:.75rem}.tab-hint+.prompt-submit{margin-left:.25rem}.auth-page{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);min-height:100vh;display:grid}.auth-page.single{grid-template-columns:1fr;place-items:center}.auth-panel{flex-direction:column;gap:1.25rem;width:100%;max-width:420px;margin:auto;padding:3rem 1rem;display:flex}.auth-panel h1{margin-top:1rem}.auth-form{flex-direction:column;gap:.9rem;display:flex}.auth-form label{flex-direction:column;gap:.35rem;font-size:.9rem;font-weight:500;display:flex}input:not([type=checkbox]){font:inherit;border-radius:var(--radius-sm);border:1.5px solid var(--rule);background:var(--surface);color:var(--ink);padding:.65rem .8rem}input:focus{border-color:var(--marker-blue);outline:none}input:disabled{color:var(--ink-soft);background:var(--board)}.form-error,.form-notice{border-radius:var(--radius-sm);border-left:3px solid;padding:.6rem .8rem;font-size:.9rem}.form-error{color:#ffb4ab;border-color:var(--marker-red);background:#ff6b5b1a}.form-notice{color:#9be7c4;border-color:var(--marker-green);background:#3ecf8e1a}.btn-google{padding:.8rem 1.1rem;font-size:1rem}.setup-steps{gap:.5rem;padding-left:1.2rem;display:grid}.empty{text-align:center;color:var(--ink-soft);border:1.5px dashed var(--rule);border-radius:var(--radius);padding:2.5rem 1.5rem}.video-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.75rem 1.5rem;display:grid}.video-card{grid-template-columns:minmax(0,1fr) auto;gap:.6rem .5rem;display:grid}.video-frame{aspect-ratio:16/9;border-radius:var(--radius);border:1px solid var(--rule);background:var(--surface);grid-column:1/-1;overflow:hidden}.video-frame video{object-fit:cover;width:100%;height:100%;display:block}.video-frame.status-failed{border-color:#ff6b5b66}.video-placeholder{text-align:center;height:100%;color:var(--ink-soft);flex-direction:column;justify-content:center;align-items:center;gap:.75rem;padding:1rem;font-size:.9rem;display:flex}.status-failed .video-placeholder{color:#ffb4ab}.scribble{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 24'%3E%3Cpath d='M2 16c6-10 10-12 14-6s6 8 11 1 8-10 13-2 7 8 12 0 9-8 18-3' fill='none' stroke='%232456d3' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") 50%/contain no-repeat;width:72px;height:24px}@media (prefers-reduced-motion:no-preference){.scribble{animation:1.6s ease-in-out infinite scribble}@keyframes scribble{0%{clip-path:inset(0 100% 0 0)}60%,to{clip-path:inset(0)}}}.video-meta{min-width:0}.video-meta h3{text-overflow:ellipsis;white-space:nowrap;font-size:.95rem;overflow:hidden}.video-meta p{color:var(--ink-soft);flex-wrap:wrap;gap:.75rem;font-size:.82rem;display:flex}.status-dot{align-items:center;gap:.35rem;display:inline-flex}.status-dot:before{content:"";background:var(--ink-soft);border-radius:50%;width:7px;height:7px}.status-dot.status-generating:before{background:var(--marker-blue)}.status-dot.status-ready:before{background:var(--marker-green)}.status-dot.status-failed:before{background:var(--marker-red)}.video-actions{color:var(--ink-soft);align-items:flex-start;display:flex}.shell{min-height:100vh;padding-left:76px}.rail{z-index:40;background:var(--tray);border-right:1px solid var(--rule);flex-direction:column;align-items:center;gap:.5rem;width:76px;padding:1.1rem 0;display:flex;position:fixed;inset:0 auto 0 0}.rail .logo{margin-bottom:1.25rem}.rail-item{width:46px;height:46px;color:var(--tray-ink);cursor:pointer;background:0 0;border:0;border-radius:14px;place-items:center;transition:background .15s,color .15s;display:grid;position:relative}.rail-item:hover{background:var(--tray-raised);color:#fff}.rail-item.active{color:#fff}.rail-badge{background:var(--marker-blue-bright);min-width:16px;height:16px;color:var(--tray);border-radius:999px;padding:0 4px;font-size:.68rem;font-weight:700;line-height:16px;position:absolute;top:6px;right:6px}.rail-bottom{margin-top:auto}.rail-avatar{border:2px solid var(--tray-ink);background:var(--marker-blue);color:#fff;width:42px;height:42px;font:inherit;cursor:pointer;border-radius:50%;place-items:center;padding:0;font-weight:600;display:grid;overflow:hidden}.rail-avatar:hover,.rail-avatar[aria-expanded=true]{border-color:#fff}.rail-avatar img{object-fit:cover;width:100%;height:100%}.shell-main{min-width:0;position:relative}.top-right{z-index:5;gap:.6rem;display:flex;position:absolute;top:1.25rem;right:clamp(1rem,3vw,2rem)}.home{padding:0 clamp(1rem,4vw,3rem) 4rem}.home-hero{text-align:center;flex-direction:column;gap:1.25rem;max-width:820px;margin:0 auto;padding:clamp(5rem,14vh,9rem) 0 3rem;display:flex}.home-hero .hero-sub{margin:0 auto 1rem}.home-hero .prompt-box,.home-hero .form-error,.home-hero .form-notice{text-align:left}.home-title{letter-spacing:-.02em;font-size:clamp(2rem,4.5vw,2.9rem);font-weight:600}.home-hero.centered{justify-content:center;min-height:100vh;padding:2rem 0 6rem}.showcase{background:radial-gradient(80% 70% at 12% 0,#5b8cff6b,#0000 62%),radial-gradient(70% 80% at 100% 15%,#7c5cff57,#0000 62%),linear-gradient(#1b1f3a 0%,#16171c 100%);border:1px solid #ffffff14;border-radius:32px;flex-direction:column;align-items:center;gap:1.75rem;max-width:1100px;margin:3rem auto 0;padding:1.5rem clamp(1rem,4vw,3rem) 2.5rem;display:flex;position:relative}.showcase:before{content:"";pointer-events:none;z-index:-1;background:radial-gradient(closest-side,#5b8cff24,#0000);height:220px;position:absolute;inset:-120px 15% auto}.showcase-tabs{flex-wrap:wrap;justify-content:center;gap:.6rem;display:flex}.showcase-tab{color:#ffffffd9;font:inherit;cursor:pointer;background:0 0;border:1px solid #ffffff29;border-radius:999px;padding:.55rem 1.2rem;font-weight:600;transition:background .15s,color .15s}.showcase-tab:hover{color:#fff;background:#ffffff14}.showcase-tab[aria-selected=true]{color:#fff;background:#ffffff24;border-color:#ffffff3d}.showcase-stage{width:min(760px,100%)}.showcase-stage .example video,.showcase-stage .example-preview{border:0;border-radius:18px;box-shadow:0 30px 60px -20px #000000b3}.showcase-stage figcaption{text-align:center;align-items:center}.showcase-stage .example-prompt{color:var(--marker-blue-bright)}.showcase-cta{color:var(--board);font:inherit;cursor:pointer;background:#fff;border:0;border-radius:999px;align-items:center;gap:.6rem;padding:.9rem 1.8rem;font-size:1.1rem;font-weight:600;display:inline-flex}.showcase-cta:hover{background:#e4e4e7}.explore{flex-direction:column;gap:2rem;max-width:1200px;margin:0 auto;padding:2.5rem clamp(1rem,4vw,3rem) 4rem;display:flex}.explore h2{margin-bottom:1rem}.panel-scrim{z-index:30;background:#00000073;position:fixed;inset:0}.profile-panel{z-index:35;background:var(--surface);border:1px solid var(--rule);border-radius:24px;flex-direction:column;gap:1rem;width:min(380px,100vw - 100px);padding:1.25rem;display:flex;position:fixed;top:12px;bottom:12px;left:88px;overflow-y:auto;box-shadow:0 24px 60px -12px #0009}@media (prefers-reduced-motion:no-preference){.profile-panel{animation:.18s ease-out panel-in}@keyframes panel-in{0%{opacity:0;transform:translate(-12px)}}}.profile-head{align-items:center;gap:.9rem;display:flex}.profile-avatar{object-fit:cover;background:var(--marker-blue);color:#fff;border-radius:50%;flex:none;place-items:center;width:60px;height:60px;font-size:1.4rem;font-weight:600;display:grid}.profile-name{flex-direction:column;flex:1;min-width:0;display:flex}.profile-name strong{font-size:1.15rem}.profile-name span{color:var(--ink-soft);text-overflow:ellipsis;white-space:nowrap;font-size:.85rem;overflow:hidden}.text-btn{font:inherit;color:inherit;cursor:pointer;background:0 0;border:0;padding:0;font-weight:600;text-decoration:underline}.panel-heading{margin-top:.25rem;font-size:.95rem}.panel-empty{color:var(--ink-soft);border:1.5px dashed var(--rule);border-radius:var(--radius);padding:1rem;font-size:.9rem}.admin-open{margin-top:.25rem}.admin-users{flex-direction:column;gap:.8rem;display:flex}.admin-back{align-self:flex-start;margin-left:-.5rem}.admin-note{color:var(--ink-soft);font-size:.88rem}.admin-user-list{margin:0 -.5rem;padding:0;list-style:none}.admin-user{border-bottom:1px solid var(--rule);justify-content:space-between;align-items:center;gap:.6rem;padding:.8rem .5rem;display:flex}.admin-user-info{flex-direction:column;min-width:0;display:flex}.admin-user-info strong,.admin-user-info>span:not(.admin-status){text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.admin-user-info>span:not(.admin-status){color:var(--ink-soft);font-size:.82rem}.admin-status{color:var(--marker-green);font-size:.78rem}.admin-status.blocked{color:var(--marker-red)}.video-list{flex-direction:column;gap:.15rem;margin:0 -.5rem;padding:0;list-style:none;display:flex}.video-row{border-radius:14px;align-items:center;gap:.75rem;padding:.5rem;display:flex;position:relative}.video-row:hover,.video-row.menu-open{background:var(--surface-2)}.row-thumb{aspect-ratio:16/9;background:var(--surface-2);width:84px;color:var(--marker-red);cursor:pointer;border:1px solid #3a3b41;border-radius:10px;flex:none;place-items:center;padding:0;display:grid;position:relative;overflow:hidden}.row-thumb:disabled{cursor:default}.row-thumb video{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.row-thumb .scribble{width:48px;height:16px}.row-play{color:#fff;opacity:0;background:#1a2233cc;border-radius:50%;place-items:center;width:28px;height:28px;transition:opacity .15s;display:grid;position:absolute}.row-thumb:hover .row-play,.row-thumb:focus-visible .row-play{opacity:1}.row-text{flex-direction:column;flex:1;min-width:0;display:flex}.row-title,.row-status{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.row-title{font-size:.95rem;font-weight:500}.row-status{color:var(--ink-soft);font-size:.8rem}.row-status.status-generating,.row-status.status-queued{color:var(--marker-blue)}.row-status.status-failed{color:var(--marker-red)}.row-action{color:var(--ink-soft)}.row-menu{color:var(--ink-soft);position:relative}.menu{z-index:2;background:var(--surface);border:1px solid var(--rule);border-radius:12px;min-width:200px;padding:.35rem;position:absolute;top:calc(100% + 4px);right:0;box-shadow:0 12px 32px -8px #00000080}.menu button{width:100%;font:inherit;color:var(--ink);text-align:left;cursor:pointer;background:0 0;border:0;border-radius:8px;align-items:center;gap:.6rem;padding:.55rem .65rem;font-size:.9rem;display:flex}.menu button:hover{background:var(--surface-2)}.menu button.danger-text{color:var(--marker-red)}.sign-out{color:var(--ink-soft);align-self:flex-start;margin-top:auto}.player{background:var(--surface);width:min(960px,100vw - 2rem);color:var(--ink);border:0;border-radius:18px;padding:0;overflow:hidden}.player::backdrop{background:#000000bf}.player-head{justify-content:space-between;align-items:center;gap:1rem;padding:.75rem .75rem .75rem 1.25rem;display:flex}.player-head h2{text-overflow:ellipsis;white-space:nowrap;font-size:1rem;overflow:hidden}.player video{background:#fff;width:100%;display:block}.key-dock{z-index:30;flex-direction:column;align-items:flex-end;gap:10px;display:flex;position:fixed;bottom:20px;right:20px}.key-trigger{border:1.5px solid var(--rule);background:var(--surface);min-width:44px;height:44px;color:var(--ink-soft);font:inherit;cursor:pointer;border-radius:999px;justify-content:center;align-items:center;gap:.5rem;padding:0 .75rem;font-size:.88rem;font-weight:600;transition:border-color .15s,color .15s;display:inline-flex;position:relative;box-shadow:0 10px 28px -10px #000000b3}.key-trigger:hover,.key-trigger[aria-expanded=true]{border-color:var(--ink-soft);color:var(--ink)}.key-trigger.missing{border-color:var(--marker-blue);color:var(--marker-blue-bright);padding:0 1rem 0 .85rem}.key-dot{background:var(--marker-green);width:8px;height:8px;box-shadow:0 0 0 2px var(--surface);border-radius:50%;position:absolute;top:8px;right:8px}.key-popover{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius-lg);flex-direction:column;gap:.6rem;width:min(340px,100vw - 32px);padding:1rem 1.1rem 1.1rem;display:flex;box-shadow:0 24px 60px -12px #000000b3}.key-popover form{flex-direction:column;gap:.6rem;display:flex}.key-popover h2{font-size:.95rem}.key-popover p{color:var(--ink-soft);font-size:.85rem}.key-popover .key-note{font-size:.8rem}.key-field{gap:.5rem;display:flex}.key-field input{flex:1;min-width:0;padding:.45rem .7rem;font-size:.9rem}.key-actions{gap:.5rem;margin-top:.15rem;display:flex}@media (prefers-reduced-motion:no-preference){.key-popover{transform-origin:100% 100%;animation:.14s ease-out key-pop}@keyframes key-pop{0%{opacity:0;transform:translateY(6px)scale(.98)}}}@media (width<=640px){.key-dock{bottom:80px;right:12px}.shell{padding-bottom:68px;padding-left:0}.rail{flex-direction:row;justify-content:space-around;width:auto;height:64px;padding:0 .75rem;inset:auto 0 0}.rail .logo,.rail-bottom{margin:0}.profile-panel{width:auto;max-height:calc(100vh - 96px);inset:auto 8px 72px}.top-right{top:.75rem}.top-right .btn-outline{display:none}.home-hero{padding-top:4.5rem}}
