:root{color:#e8edf4;font-synthesis:none;background:#080a0e;font-family:Inter,ui-sans-serif,system-ui,sans-serif}*{box-sizing:border-box}body{background:#080a0e;min-width:320px;margin:0}button,input{font:inherit}.landing{color:#e9eef5;background:#080a0e;min-height:100vh;padding:28px 48px 22px}.landing-nav,.landing-footer{justify-content:space-between;align-items:center;display:flex}.wordmark{letter-spacing:.08em;color:#f4f7fb;font-size:15px;font-weight:800}.wordmark span{color:var(--accent,#55b8ff)}.wordmark em{letter-spacing:.18em;color:#718094;margin-left:8px;font:10px DM Mono}.nav-note,.landing-footer{letter-spacing:.14em;color:#657184;font:10px DM Mono}.landing-grid{grid-template-columns:minmax(280px,.74fr) minmax(540px,1.6fr);align-items:center;gap:7vw;max-width:1400px;margin:9vh auto 8vh;display:grid}.landing-copy{padding-left:2vw}.eyebrow,.stage-kicker{letter-spacing:.18em;color:#6c7a8f;font:10px DM Mono}.landing h1{letter-spacing:-.07em;margin:25px 0 28px;font-size:clamp(46px,6.2vw,92px);font-weight:700;line-height:.98}.landing h1 span{color:#7d8898}.lead{color:#8e9aaa;max-width:400px;margin-bottom:32px;font-size:15px;line-height:1.7}.cta{color:#0a1119;cursor:pointer;background:#e8f1f9;border:0;border-radius:4px;padding:14px 19px;font-weight:700;transition:transform .18s,background .18s}.cta span{margin-left:28px;font-size:18px}.cta:hover{background:#fff;transform:translateY(-2px)}.microcopy{color:#566274;margin-top:15px;font:10px DM Mono}.hero-frame{background:#10151c;border:1px solid #27313d;padding:12px;position:relative;box-shadow:0 24px 80px #0009}.hero-frame canvas{aspect-ratio:1.64;object-fit:cover;width:100%;display:block}.hero-meta{color:#657184;letter-spacing:.12em;justify-content:space-between;padding:12px 2px 2px;font:10px DM Mono;display:flex}.landing-footer{border-top:1px solid #1c232c;max-width:1400px;margin:auto;padding-top:15px}.app{color:#e5ebf2;--accent:#5bb8ff;background:#0b0d11;min-height:100vh}.theme-pink{--accent:#ff74ad}.app-header{background:#0c0f14;border-bottom:1px solid #20262e;justify-content:space-between;align-items:center;height:74px;padding:0 30px;display:flex}.header-center{letter-spacing:.14em;color:#6e7a8b;font:10px DM Mono}.online-dot{background:#64d39b;border-radius:50%;width:6px;height:6px;margin-right:8px;display:inline-block}.header-actions{gap:24px;display:flex}.header-link,.inspector-head button,.sidebar-foot button{color:#718094;cursor:pointer;background:0 0;border:0;font-size:11px}.header-link:hover,.inspector-head button:hover,.sidebar-foot button:hover{color:var(--accent)}.workspace{grid-template-columns:260px minmax(500px,1fr) 276px;min-height:calc(100vh - 74px);display:grid}.sidebar,.inspector{background:#0d1015;border-right:1px solid #20262e;padding:28px 20px}.inspector{border-left:1px solid #20262e;border-right:0}.panel-label,.palette-label{letter-spacing:.16em;color:#667286;font:10px DM Mono}.import-button{color:#0b1118;background:var(--accent);text-align:left;cursor:pointer;border:0;border-radius:4px;align-items:center;gap:12px;width:100%;margin:14px 0 9px;padding:14px 12px;transition:transform .18s,filter .18s;display:flex}.import-button:hover{filter:brightness(1.08);transform:translateY(-2px)}.import-button .plus{font-size:25px;font-weight:300;line-height:1}.import-button strong,.import-button small{display:block}.import-button strong{font-size:12px}.import-button small{opacity:.67;margin-top:3px;font:9px DM Mono}.drop-zone{color:#8290a2;text-align:center;border:1px dashed #303b49;border-radius:4px;padding:17px 12px;font-size:11px}.drop-zone small{color:#536071;margin-top:6px;font:9px DM Mono;display:block}.effect-label{margin-top:38px}.effect-list{margin-top:12px}.effect-card{color:#8b97a8;text-align:left;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:4px;align-items:center;gap:11px;width:100%;padding:12px 10px;display:flex}.effect-card:hover{color:#e7edf4;border-color:#2c3745}.effect-card.selected{color:#f0f4f8;background:#171c23;border-color:#303d4b}.effect-card strong,.effect-card small{display:block}.effect-card strong{font-size:13px;font-weight:600}.effect-card small{color:#667286;margin-top:3px;font:9px DM Mono}.effect-card b{color:#667286;margin-left:auto;font-weight:400}.effect-mark{background:#68baff;border-radius:50%;width:8px;height:8px}.effect-card.ascii .effect-mark{background:#d2c2ff}.effect-card.gameboy .effect-mark{background:#b6d24b}.sidebar-foot{color:#556274;border-top:1px solid #20262e;justify-content:space-between;align-items:center;margin-top:35px;padding-top:16px;font:9px DM Mono;display:flex}.stage{background:#0a0d12;flex-direction:column;min-width:0;display:flex}.stage-top,.stage-bottom{border-bottom:1px solid #20262e;justify-content:space-between;align-items:center;padding:18px 24px;display:flex}.stage-top h2{color:#dbe3ec;margin:7px 0 0;font-size:14px;font-weight:600}.view-switch{border:1px solid #2a3440;border-radius:4px;display:flex;overflow:hidden}.view-switch button{color:#778496;cursor:pointer;background:0 0;border:0;padding:8px 11px;font-size:10px}.view-switch button.active{color:#eaf4fb;background:#1e2a37}.canvas-wrap{background-color:#10141a;background-image:linear-gradient(#171d25 1px,#0000 1px),linear-gradient(90deg,#171d25 1px,#0000 1px);background-position:0 0;background-repeat:repeat;background-size:36px 36px;background-attachment:scroll;background-origin:padding-box;background-clip:border-box;flex:1;justify-content:center;align-items:center;min-height:500px;padding:38px;display:flex}.canvas-wrap canvas{max-width:100%;max-height:68vh;display:block;box-shadow:0 18px 60px #000b}.empty-state{text-align:center;max-width:310px}.empty-line{background:var(--accent);width:42px;height:1px;margin:0 auto 25px}.empty-state h3{margin:0 0 10px;font-size:18px}.empty-state p{color:#778496;margin:0 0 21px;font-size:12px;line-height:1.6}.outline-button{color:#cbd8e6;cursor:pointer;background:0 0;border:1px solid #3e4d5d;border-radius:4px;padding:11px 15px;font-size:12px}.outline-button:hover{border-color:var(--accent);color:var(--accent)}.video-bar{color:#637083;background:#0c1015;border-top:1px solid #20262e;align-items:center;gap:13px;padding:10px 24px;font:10px DM Mono;display:flex}.play{color:#dce6ef;cursor:pointer;background:#151c25;border:1px solid #354251;border-radius:3px;padding:7px 11px}.range{width:100%;height:3px;accent-color:var(--accent);cursor:pointer}.stage-bottom{color:#617084;border-top:1px solid #20262e;border-bottom:0;font:10px DM Mono}.export-button{background:var(--accent);color:#071018;cursor:pointer;border:0;border-radius:4px;padding:11px 14px;font-size:11px;font-weight:700}.export-button:disabled{opacity:.35;cursor:not-allowed}.export-button span{margin-left:12px;font-size:15px}.inspector-head{justify-content:space-between;align-items:flex-start;margin-bottom:32px;display:flex}.inspector-head h3{margin:8px 0 0;font-size:16px}.inspector-head button{padding-top:2px}.control{margin-bottom:25px}.control-top{justify-content:space-between;align-items:center;margin-bottom:10px;display:flex}.control label,.color-control label,.toggle-row span{color:#b5c1ce;font-size:12px}.control output{color:var(--accent);font:10px DM Mono}.control .range{width:100%}.color-control{justify-content:space-between;align-items:center;margin-bottom:22px;display:flex}.color-control input{background:0 0;border:1px solid #384453;width:28px;height:20px;padding:0}.toggle-row{cursor:pointer;justify-content:space-between;align-items:center;margin:2px 0 24px;display:flex}.toggle-row input{display:none}.toggle-row i{background:#2a3440;border-radius:20px;width:34px;height:19px;transition:all .2s;position:relative}.toggle-row i:before{content:"";background:#748195;border-radius:50%;width:13px;height:13px;transition:all .2s;position:absolute;top:3px;left:3px}.toggle-row input:checked+i{background:color-mix(in srgb,var(--accent) 45%,#18202a)}.toggle-row input:checked+i:before{background:var(--accent);left:18px}.palette-label{margin:28px 0 12px}.palette{grid-template-columns:repeat(4,1fr);gap:4px;display:grid}.palette span{height:23px}.palette span:first-child{background:#0f380f}.palette span:nth-child(2){background:#306230}.palette span:nth-child(3){background:#8bac0f}.palette span:nth-child(4){background:#9bbc0f}.palette-switch{gap:6px;margin-top:10px;display:flex}.palette-switch button{color:#91a0b2;cursor:pointer;background:0 0;border:1px solid #2e3b4a;border-radius:3px;flex:1;padding:8px 0;font-size:10px}.palette-switch button:hover{border-color:var(--accent);color:var(--accent)}.error-toast{color:#f1bbc9;background:#20171b;border:1px solid #673749;border-radius:4px;align-items:center;gap:10px;padding:13px 15px;font-size:11px;display:flex;position:fixed;bottom:20px;right:20px;box-shadow:0 12px 35px #0008}.error-toast strong{font-size:11px}.error-toast span{color:#b88d9d}.error-toast button{color:#df9eb1;cursor:pointer;background:0 0;border:0;font-size:10px}@media (width<=1050px){.workspace{grid-template-columns:220px minmax(400px,1fr)}.inspector{display:none}.landing-grid{gap:4vw}}@media (width<=720px){.landing{padding:20px}.landing-grid{flex-direction:column;gap:34px;margin:9vh auto 7vh;display:flex}.landing-copy{padding:0}.landing h1{font-size:52px}.hero-frame{width:100%}.landing-footer{font-size:8px}.nav-note{display:none}.workspace{display:block}.sidebar{border-bottom:1px solid #20262e;border-right:0;padding:18px}.effect-label{margin-top:20px}.effect-list{gap:6px;display:flex}.effect-card{padding:10px 8px}.effect-card b,.effect-card small{display:none}.effect-card strong{font-size:11px}.sidebar-foot{display:none}.stage{min-height:68vh}.stage-top,.stage-bottom{padding:14px}.canvas-wrap{min-height:360px;padding:18px}.header-center{display:none}.app-header{padding:0 16px}.header-actions{gap:10px}.header-link{font-size:9px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}.stage-controls{align-items:center;gap:8px;display:flex}.zoom-switch,.mode-switch{border:1px solid #2a3440;border-radius:4px;display:flex;overflow:hidden}.zoom-switch button,.mode-switch button{color:#778496;cursor:pointer;background:0 0;border:0;padding:8px 9px;font-size:10px}.zoom-switch button.active,.mode-switch button.active{color:#eaf4fb;background:#1e2a37}.mode-switch{width:100%;margin:-8px 0 22px}.mode-switch button{flex:1;padding:9px 5px}.canvas-wrap{overflow:auto}.preview-canvas.zoom-100{width:auto;max-width:none;height:auto;max-height:none}.preview-canvas.zoom-200{transform-origin:50%;width:auto;max-width:none;height:auto;max-height:none;margin:180px;transform:scale(2)}.preview-canvas.zoom-fit{transform:none}.language-switch{color:#7c899a;letter-spacing:.05em;align-items:center;gap:6px;font:10px DM Mono;display:flex}.language-switch span{color:var(--accent,#5bb8ff);font-size:13px}.language-switch select{appearance:none;color:#c9d5e0;cursor:pointer;background:#11161d;border:1px solid #2b3541;border-radius:3px;padding:6px 20px 6px 8px;font:10px DM Mono}.language-switch select:focus{outline:1px solid var(--accent)}.color-editor{border-top:1px solid #1e2731;margin:0 0 22px;padding:10px 0}.color-editor-top{align-items:center;gap:7px;margin-bottom:9px;display:flex}.color-editor-top label{color:#b5c1ce;margin-right:auto;font-size:12px}.color-swatch{border:1px solid #536172;border-radius:3px;width:19px;height:19px}.hex-input{color:#cad5e0;text-transform:uppercase;background:#121820;border:1px solid #2e3a48;border-radius:3px;width:72px;padding:4px 5px;font:10px DM Mono}.color-slider-label{color:#718094;align-items:center;gap:7px;margin-top:7px;font:9px DM Mono;display:flex}.color-slider-label .range{flex:1}.hue-range{background:linear-gradient(90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red);border-radius:4px}.video-controls{flex-wrap:wrap}.timecode{color:#9ba9b9;white-space:nowrap;font:10px DM Mono}.timeline-range{min-width:120px}.volume-control{color:#718094;white-space:nowrap;align-items:center;gap:6px;font:9px DM Mono;display:flex}.volume-control .range{width:70px}.quality-select,.video-export{color:#dce6ef;cursor:pointer;background:#151c25;border:1px solid #354251;border-radius:3px;padding:7px 8px;font-size:10px}.quality-select:focus,.video-export:focus{outline:1px solid var(--accent)}.video-export{background:var(--accent);color:#071018;border-color:var(--accent);font-weight:700}.video-export:disabled{opacity:.5;cursor:wait}.export-progress{background:#19212b;height:3px}.export-progress span{background:var(--accent);height:100%;transition:width .1s linear;display:block}@media (width<=720px){.video-controls{gap:8px;padding:9px 14px}.timecode{order:2}.timeline-range{flex-basis:100%;order:3}.volume-control{order:4}.quality-select{order:5}.video-export{order:6}.volume-control .range{width:55px}}.landing{padding:28px 48px}.landing-grid{flex-direction:column;gap:30px;max-width:1080px;margin:13vh auto 0;display:flex}.landing-copy{text-align:center;padding:0}.landing h1{letter-spacing:-.045em;margin:0 0 24px;font-size:clamp(34px,4vw,52px)}.landing .hero-frame{width:100%;max-width:1080px;margin:0 auto}.landing .hero-frame canvas{aspect-ratio:1.9}.landing-footer,.app-header .header-center{display:none}.stage-top{padding:14px 24px}.stage-top h2{margin:0;font-size:13px}.sidebar{padding-top:22px}.sidebar-foot{justify-content:flex-end;margin-top:20px}.sidebar-foot button{border:1px solid #2e3946;border-radius:3px;padding:2px 7px;font-size:20px;line-height:1}.empty-state{max-width:none}.empty-state h3,.empty-state p{display:none}@media (width<=720px){.landing{padding:20px}.landing-grid{gap:24px;margin-top:12vh}.landing h1{font-size:36px}.landing .hero-frame canvas{aspect-ratio:1.45}.sidebar{padding-top:16px}}.mobile-header-actions,.mobile-toolbar,.sheet-backdrop{display:none}@media (width<=720px){html,body,#root{min-width:320px;max-width:100%;overflow-x:hidden}.app{min-height:100svh;padding-bottom:calc(62px + env(safe-area-inset-bottom))}.app-header{z-index:20;gap:8px;height:58px;min-height:58px;padding:0 12px;position:sticky;top:0}.app-header .wordmark{font-size:13px}.app-header .wordmark em{display:none}.app-header .language-switch{margin-left:auto}.app-header .header-actions{display:none}.mobile-header-actions{order:2;gap:5px;display:flex}.mobile-header-actions+.language-switch{order:3;margin-left:0}.mobile-icon{color:#cbd8e4;cursor:pointer;background:#141a22;border:1px solid #2d3947;border-radius:8px;width:38px;height:38px;font-size:21px;line-height:1}.language-switch select{max-width:94px;height:36px;padding:5px 20px 5px 7px;font-size:9px}.workspace{min-height:calc(100svh - 58px);display:block}.sidebar,.inspector{display:none}.stage{height:calc(100svh - 122px);min-height:calc(100svh - 122px)}.stage-top{border-bottom:1px solid #20262e;height:48px;min-height:48px;padding:8px 14px}.stage-top h2{white-space:nowrap;text-overflow:ellipsis;max-width:43vw;font-size:12px;overflow:hidden}.stage-controls{gap:5px}.view-switch button,.zoom-switch button{min-height:32px;padding:6px 8px;font-size:9px}.zoom-switch button:nth-child(2),.zoom-switch button:nth-child(3){display:none}.canvas-wrap{background-size:24px 24px;height:calc(100% - 48px);min-height:0;padding:12px 10px 18px;overflow:auto}.canvas-wrap canvas{width:auto;max-width:100%;height:auto;max-height:100%}.preview-canvas.zoom-100{max-width:none;max-height:none}.preview-canvas.zoom-200{max-width:none;max-height:none;margin:100px}.stage-bottom{display:none}.video-controls{z-index:10;background:#0c1015;border-top:1px solid #20262e;gap:8px;padding:8px 12px;position:absolute;bottom:64px;left:0;right:0}.video-controls .play{min-width:58px;min-height:38px;padding:7px 8px}.timecode{font-size:9px}.timeline-range{flex-basis:100%;order:3;height:18px}.volume-control{order:4;font-size:9px}.volume-control .range{width:52px;height:18px}.quality-select{order:5;max-width:84px;min-height:34px;font-size:9px}.video-export{order:6;min-height:34px;padding:6px 8px;font-size:9px}.export-progress{z-index:11;position:absolute;bottom:64px;left:0;right:0}.mobile-toolbar{z-index:30;min-height:64px;padding:5px 6px calc(5px + env(safe-area-inset-bottom));background:#0c1015;border-top:1px solid #26313d;grid-template-columns:repeat(5,1fr);display:grid;position:fixed;bottom:0;left:0;right:0;box-shadow:0 -10px 30px #0008}.mobile-toolbar button{color:#7d8b9b;cursor:pointer;background:0 0;border:0;flex-direction:column;justify-content:center;align-items:center;gap:3px;min-height:52px;font-size:9px;display:flex}.mobile-toolbar button span{color:#9eacba;font-size:18px;line-height:1}.mobile-toolbar button.active,.mobile-toolbar button:focus-visible,.mobile-toolbar button.active span{color:var(--accent)}.mobile-toolbar button:disabled{opacity:.4}.sheet-backdrop{z-index:39;background:#0008;border:0;position:fixed;inset:0}.mobile-panel-effects .sheet-backdrop,.mobile-panel-settings .sheet-backdrop,.mobile-panel-colors .sheet-backdrop,.mobile-panel-menu .sheet-backdrop{display:block}.mobile-panel-effects .sidebar,.mobile-panel-settings .inspector,.mobile-panel-colors .inspector{z-index:40;max-height:72svh;padding:20px 16px calc(20px + env(safe-area-inset-bottom));background:#0d1015;border:1px solid #2a3542;border-radius:16px 16px 0 0;display:block;position:fixed;bottom:64px;left:0;right:0;overflow-y:auto;box-shadow:0 -18px 50px #000b}.mobile-panel-effects .drop-zone{height:42px;margin:8px 0 14px;padding:8px}.mobile-panel-effects .drop-zone span{font-size:20px}.mobile-panel-effects .effect-list{grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px;display:grid}.mobile-panel-effects .effect-card{border:1px solid #293542;justify-content:center;min-height:56px;padding:9px}.mobile-panel-effects .effect-card .effect-mark{display:none}.mobile-panel-effects .effect-card strong{text-align:center;font-size:11px}.mobile-panel-effects .sidebar-foot{margin-top:16px;padding-top:10px}.mobile-panel-effects .sidebar-foot button{min-width:44px;min-height:40px}.mobile-panel-settings .inspector-head,.mobile-panel-colors .inspector-head{margin-bottom:18px}.mobile-panel-colors .inspector .control,.mobile-panel-colors .inspector .toggle-row,.mobile-panel-colors .inspector .mode-switch{display:none}.mobile-panel-colors .inspector .color-editor{display:block}.mobile-panel-menu .header-actions{z-index:42;background:#141a22;border:1px solid #2c3947;border-radius:9px;flex-direction:column;gap:0;min-width:170px;padding:7px;display:flex;position:fixed;top:60px;right:10px;box-shadow:0 15px 40px #000b}.mobile-panel-menu .header-link{text-align:left;color:#c8d4df;padding:12px;font-size:12px}.mobile-panel-menu .sheet-backdrop{z-index:41;background:0 0;display:block}.error-toast{z-index:50;flex-wrap:wrap;padding:12px;bottom:76px;left:12px;right:12px}.empty-state{justify-content:center;align-items:center;height:100%;display:flex}.outline-button{min-height:46px;padding:11px 18px;font-size:13px}.mobile-toolbar{z-index:45}}