:root{color-scheme:dark;--bg:#101114;--panel:#191b20;--edge:#31343b;--ink:#f6f6f3;--muted:#a1a5af;--lime:#dfff72;font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink)}button,input,select,textarea{font:inherit}button,.button{border:1px solid var(--edge);border-radius:10px;background:#23262c;color:var(--ink);padding:10px 14px;cursor:pointer;min-height:44px;text-align:center;text-decoration:none;font-size:.875rem;font-weight:600;transition:background .16s}button:hover,.button:hover{background:#34383f}button:disabled{opacity:.4;cursor:not-allowed}.primary{background:var(--lime);color:#171b0b;border-color:var(--lime)}.primary:hover{background:#edffb1}.subtle{background:transparent;border-color:transparent;color:var(--ink)}.danger{color:#ff9f9f}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--lime);outline-offset:3px}[hidden]{display:none!important}header{max-width:1320px;margin:auto;padding:22px 32px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--edge)}.brand{display:flex;gap:10px;align-items:center;color:var(--ink);text-decoration:none;font-size:1.65rem;font-weight:800;letter-spacing:-1px}.mark{background:var(--lime);color:#101114;border-radius:10px;width:34px;height:34px;line-height:32px;text-align:center;letter-spacing:-4px;padding-right:4px}.version{color:var(--muted);font-size:.625rem;letter-spacing:2px;margin:4px 0 0 5px}main{max-width:1200px;margin:26px auto;display:grid;grid-template-columns:minmax(0,1fr) 370px;gap:36px;padding:0 28px}.viewer{min-width:0}.viewer-top{display:flex;justify-content:space-between;align-items:center;font-size:.875rem;margin-bottom:14px;gap:16px}.viewer-top #projectName{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.local{color:var(--muted);white-space:nowrap;font-size:.75rem}.stage{background:#08090b;border:1px solid #25272d;min-height:350px;height:440px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;border-radius:14px}canvas{display:block;max-width:100%;max-height:100%;width:auto;height:auto;background:#000}.stage:has(.empty:not([hidden])) canvas{display:none}.empty{text-align:center;padding:25px}.empty-icon{width:54px;height:54px;border:1px dashed #62694e;color:var(--lime);background:#252a1a;border-radius:16px;font-size:2rem;margin:auto}h1{font-size:2rem;line-height:1.17;letter-spacing:-1.2px;margin:20px 0 12px}.empty p{color:var(--muted);font-size:.875rem;margin-bottom:22px}.empty button{display:block;margin:8px auto;min-width:200px}.empty>span{display:block;font-size:.75rem;color:#777d88;margin-top:18px}.stage-tag{position:absolute;top:12px;left:12px;background:#111b;padding:4px 8px;border-radius:5px;font-size:.625rem;letter-spacing:1.5px}.transport{display:flex;align-items:center;gap:12px;padding:14px 0 6px}.play{font-size:1rem;border-radius:50%;width:44px;padding:8px}.transport>span{font-size:.75rem;font-variant-numeric:tabular-nums;color:var(--muted)}.format-label{margin:0 0 0 auto!important;display:flex!important;align-items:center;gap:8px;font-size:.75rem!important;color:var(--muted)}.format-label select{width:auto;font-size:.75rem;padding:8px;min-height:40px}input[type=range]{accent-color:var(--lime);padding:0;min-height:28px;width:100%;cursor:pointer}h2{font-size:1rem;font-weight:650;margin:0}.timeline-heading{display:flex;align-items:center;justify-content:space-between;margin:15px 0 8px}.timeline-heading h2{font-size:.875rem}.timeline-heading h2 span{margin-left:6px;font-size:.75rem;background:#292c32;padding:2px 7px;border-radius:5px;color:var(--muted)}.timeline{display:flex;gap:8px;overflow-x:auto;min-height:85px;padding:3px 1px 9px}.timeline>p{border:1px dashed var(--edge);margin:0;width:100%;border-radius:10px;display:grid;place-items:center;padding:14px;text-align:center}.clip{min-width:130px;max-width:170px;flex-shrink:0;text-align:left;background:linear-gradient(125deg,#354239,#263340);position:relative;border:2px solid transparent;padding:10px}.clip.selected{border-color:var(--lime)}.clip strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.75rem;max-width:140px}.clip small{font-size:.75rem;color:#cbd0c6}.clip .clip-index{float:right;color:var(--lime);margin-left:8px}.project-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px}.project-actions button{font-size:.75rem;background:transparent;min-height:38px;padding:7px 10px}.project-actions span{font-size:.75rem;color:#818792}.editor{border:1px solid var(--edge);border-radius:16px;overflow:hidden;background:var(--panel);align-self:start}.tabs{display:grid;grid-template-columns:repeat(4,1fr);padding:8px;border-bottom:1px solid var(--edge);gap:3px}.tabs button{border:0;background:transparent;color:var(--muted);font-size:1.3rem;padding:10px 3px;border-radius:9px}.tabs button span{display:block;font-size:.75rem;font-weight:500;margin-top:2px}.tabs button.active{background:#2b3221;color:var(--lime)}.panel{padding:22px}.panel-title{display:flex;justify-content:space-between;align-items:center;gap:12px}.panel-title>span{font-size:.75rem;color:#69705e}.muted{color:var(--muted);font-size:.875rem;line-height:1.6}.panel>.muted{margin:9px 0 23px}.two{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}.two label{margin:0}label{display:block;font-size:.875rem;margin:16px 0 12px;color:#c7cbd2}input:not([type=range]),select,textarea{display:block;width:100%;background:#111317;border:1px solid var(--edge);border-radius:8px;padding:11px;color:var(--ink);margin-top:6px;min-height:44px;font-size:1rem}textarea{resize:vertical}fieldset{border:0;padding:0;margin:0;min-width:0}fieldset:disabled{opacity:.5}.text-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}.text-list button{max-width:100%;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.text-list .chosen{border-color:var(--lime);color:var(--lime)}.looks{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.looks button{padding:6px;font-size:.75rem;border-color:transparent;background:transparent}.looks .chosen{border-color:var(--lime);color:var(--lime)}.swatch{display:block;height:65px;border-radius:7px;margin-bottom:6px;background:linear-gradient(140deg,#849baf 0 44%,#e7b085 44% 59%,#273846 59%)}.swatch.vivid{filter:saturate(1.65) contrast(1.15)}.swatch.warm{filter:sepia(.3) saturate(1.3)}.swatch.mono{filter:grayscale(1)}.swatch.vintage{filter:sepia(.6) contrast(.85)}footer{text-align:center;color:#747a84;font-size:.75rem;padding:10px 20px 28px}.media-source{position:fixed;left:-2px;bottom:-2px;width:1px;height:1px;pointer-events:none;opacity:.01}dialog{background:#191b20;color:var(--ink);border:1px solid var(--edge);border-radius:18px;padding:24px;width:min(440px,calc(100% - 28px));max-height:90dvh;overflow:auto}dialog::backdrop{background:#000b;backdrop-filter:blur(6px)}dialog .panel-title button{border:0;background:transparent}dialog .primary{width:100%}progress{width:100%;accent-color:var(--lime);margin-top:15px}#downloadArea{display:grid;gap:10px}#toast{position:fixed;bottom:max(20px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);background:#e9eccf;color:#171c12;border:1px solid #fff5;padding:14px 20px;border-radius:12px;width:max-content;max-width:calc(100% - 28px);z-index:20;box-shadow:0 10px 50px #0008;font-size:.875rem}#exportStatus{font-size:.875rem}#cancelExport{width:100%;margin-top:10px}
@media(max-width:780px){header{padding:14px 18px}.brand{font-size:1.5rem}.version{display:none}main{display:flex;flex-direction:column;padding:0 14px;margin:16px auto;gap:20px;max-width:540px}.stage{height:360px;min-height:280px}.editor{width:100%;border-radius:14px}.panel{padding:18px}.tabs{position:sticky;top:0}.viewer-top{margin-bottom:10px}.local{font-size:.75rem}.empty h1{font-size:1.8rem}.empty-icon{width:44px;height:44px;line-height:40px}.empty p{margin:12px 0 16px}.project-actions span{width:100%}.format-label{font-size:0!important}.format-label select{max-width:142px}footer{padding-bottom:max(24px,env(safe-area-inset-bottom))}}
@media(max-width:780px){.stage{height:min(35svh,300px);min-height:260px}.stage:has(.empty:not([hidden])){min-height:350px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}