:root{font-family:Inter,Segoe UI,system-ui,sans-serif;color:#e7ece6;background:#0b1110;font-synthesis:none;--bg: #0b1110;--panel: #111a18;--panel-2: #17221f;--line: #26332f;--muted: #80918a;--soft: #c0cdc6;--accent: #c9f36b;--accent-2: #8ed7a4;--orange: #f0a56f}*{box-sizing:border-box}body{margin:0;min-width:320px;background:radial-gradient(circle at 72% -15%,#23362e 0,transparent 36%),var(--bg)}button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}.app-shell{min-height:100vh;background:linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px);background-size:24px 24px}.topbar{min-height:74px;padding:12px clamp(16px,4vw,42px);display:flex;align-items:center;gap:28px;border-bottom:1px solid var(--line);background:#0b1110eb}.brand{display:flex;align-items:center;gap:11px;flex:0 0 auto}.brand-mark{width:33px;height:33px;display:grid;place-items:center;color:#11200f;background:var(--accent);border-radius:8px}.eyebrow,.section-kicker{color:var(--muted);font:10px DM Mono,monospace;letter-spacing:.08em}.brand-name{margin-top:3px;font-size:14px;font-weight:650;letter-spacing:-.02em}.topbar-actions{margin-left:auto;display:flex;align-items:center;gap:12px}.privacy{color:var(--muted);font:11px DM Mono,monospace}.privacy-dot,.status-dot{display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:50%;background:var(--accent-2)}.step-nav{flex:1;min-width:0;display:flex;justify-content:center;align-items:center;gap:5px}.step-nav button{min-width:134px;padding:8px 12px;display:flex;align-items:center;gap:9px;border:1px solid transparent;border-radius:7px;color:var(--muted);background:transparent;text-align:left}.step-nav button:hover,.step-nav button.active{color:var(--soft);border-color:var(--line);background:#ffffff09}.step-nav button.active span{color:#0f1711;background:var(--accent)}.step-nav button>span{width:23px;height:23px;display:grid;place-items:center;border:1px solid currentColor;border-radius:50%;font:10px DM Mono,monospace}.step-nav small,.step-nav strong{display:block}.step-nav small{font:9px DM Mono,monospace;text-transform:uppercase}.step-nav strong{margin-top:2px;font-size:11px;font-weight:600}.step-nav button>svg{margin-left:auto;color:var(--line)}.icon-button,.tool-button{width:34px;height:34px;display:inline-grid;place-items:center;border:1px solid var(--line);border-radius:6px;color:var(--soft);background:#101815}.icon-button:hover,.tool-button:hover{border-color:var(--accent-2);color:var(--accent)}.page{width:min(1440px,calc(100% - 48px));min-width:0;margin:0 auto;padding:30px 0 40px;display:grid;gap:18px}.import-page{grid-template-columns:300px minmax(0,1fr)}.edit-page,.export-page{grid-template-columns:minmax(0,1fr) 300px}.control-panel,.work-panel,.rail-panel{min-width:0;border:1px solid var(--line);background:#0e1614d1}.control-panel{padding:24px}.work-panel{min-width:0;padding:25px}.rail-panel{grid-column:1 / -1;padding:18px 22px 20px}.panel-heading,.workspace-heading,.rail-heading,.popover-heading,.confidence-summary>div:first-child{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}h1,h2,h3,p{margin:0}.panel-heading h1,.panel-heading h2,.workspace-heading h1,.workspace-heading h2{margin-top:7px;font-size:19px;letter-spacing:-.03em}.panel-heading>svg,.workspace-heading>svg{color:var(--muted)}.workspace-heading{align-items:flex-end;margin-bottom:19px}.workspace-heading h1{font-size:24px}.subheading{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:16px}.subheading h2{margin-top:6px;font-size:14px}.dropzone{min-height:168px;margin-top:22px;padding:24px 15px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border:1px dashed #46564e;border-radius:8px;color:var(--muted);background:#ffffff05;text-align:center}.dropzone:hover{border-color:var(--accent-2);background:#8ed7a40b}.dropzone strong{max-width:100%;overflow:hidden;color:var(--soft);font-size:12px;text-overflow:ellipsis;white-space:nowrap}.dropzone span,.preserve-note,.editor-hint{color:var(--muted);font-size:11px;line-height:1.55}.drop-icon,.empty-orbit{color:var(--accent)}.secondary-button,.primary-button,.text-button,.play-button{min-height:34px;padding:0 12px;display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--line);border-radius:6px;color:var(--soft);background:#121c19;font-size:11px}.primary-button{border-color:var(--accent);color:#10170e;background:var(--accent);font-weight:700}.secondary-button:hover,.text-button:hover{border-color:var(--accent-2);color:var(--accent)}.primary-button:hover{background:#d7fc83}.wide{width:100%}.panel-divider{height:1px;margin:23px 0;background:var(--line)}.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 10px}label{color:var(--muted);font:11px DM Mono,monospace}input[type=number],select{width:100%;height:33px;margin-top:7px;padding:0 8px;border:1px solid var(--line);border-radius:5px;outline:none;color:var(--soft);background:#0d1513;font:12px DM Mono,monospace}input[type=number]:focus,select:focus{border-color:var(--accent-2)}.range-label{display:block;margin-top:17px}.range-label output{float:right;color:var(--soft)}input[type=range]{width:100%;margin-top:10px;display:block;accent-color:var(--accent)}.advanced-grid{margin:17px 0;color:var(--muted);font:11px DM Mono,monospace}.advanced-grid summary{cursor:pointer}.advanced-grid .field-grid{margin-top:14px}.preserve-note{margin-top:14px;display:flex;gap:6px}.empty-canvas{min-height:500px;display:grid;place-items:center;align-content:center;color:var(--muted);text-align:center}.empty-canvas h3{margin-top:14px;color:var(--soft);font-size:16px}.empty-canvas p{max-width:430px;margin:9px auto 18px;font-size:12px;line-height:1.6}.empty-orbit{width:55px;height:55px;display:grid;place-items:center;margin:0 auto;border:1px solid #46564e;border-radius:50%}.canvas-viewport{min-height:500px;display:grid;place-items:center;overflow:auto;padding:22px;border:1px solid var(--line);border-radius:8px;background:#0d1513}.sheet-surface{position:relative;flex:0 0 auto;line-height:0;background-color:#1a2722;background-image:linear-gradient(45deg,#25332d 25%,transparent 25%),linear-gradient(-45deg,#25332d 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#25332d 75%),linear-gradient(-45deg,transparent 75%,#25332d 75%);background-size:18px 18px;background-position:0 0,0 9px,9px -9px,-9px 0}.sheet-surface>img{width:100%;height:100%;display:block;object-fit:fill}.frame-overlay{position:absolute;inset:0}.frame-box{position:absolute;padding:0;border:1px solid rgba(255,255,255,.4);background:#c9f36b09;outline:none}.frame-box:hover,.frame-box.selected{z-index:2;border:2px solid var(--accent);background:#c9f36b21}.frame-box.disabled{opacity:.4}.frame-number{position:absolute;top:4px;left:4px;min-width:22px;padding:2px 4px;color:#0d1512;background:var(--accent);border-radius:3px;font:9px DM Mono,monospace;line-height:1.2}.frame-number{opacity:0;pointer-events:none;transition:opacity .12s ease}.frame-box:hover .frame-number,.frame-box.selected .frame-number{opacity:1}.resize-handle{position:absolute;width:18px;height:18px;border:0;border-radius:50%;background:transparent;transform:translate(-50%,-50%)}.resize-handle:after{content:"";position:absolute;inset:4px;border:1px solid #0c130e;border-radius:2px;background:var(--accent)}.handle-n{top:0;left:50%;cursor:ns-resize}.handle-e{top:50%;left:100%;cursor:ew-resize}.handle-s{top:100%;left:50%;cursor:ns-resize}.handle-w{top:50%;left:0;cursor:ew-resize}.handle-ne{top:0;left:100%;cursor:nesw-resize}.handle-se{top:100%;left:100%;cursor:nwse-resize}.handle-sw{top:100%;left:0;cursor:nesw-resize}.handle-nw{top:0;left:0;cursor:nwse-resize}.candidate-area{margin-top:18px}.confidence-summary{padding:13px 14px;border:1px solid var(--line);border-radius:7px;background:#ffffff05}.confidence-summary span,.confidence-summary strong{font-size:11px}.confidence-summary strong{color:var(--accent);font:700 18px DM Mono,monospace}.confidence-summary strong.warn{color:var(--orange)}.confidence-track{height:5px;margin-top:10px;overflow:hidden;border-radius:3px;background:#26332f}.confidence-track span{height:100%;display:block;background:var(--accent)}.candidate-list{margin-top:12px;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:9px}.candidate-card{min-width:0;padding:12px;display:flex;gap:10px;border:1px solid var(--line);border-radius:7px;color:var(--muted);background:#121c19;text-align:left}.candidate-card:hover,.candidate-card.selected{border-color:var(--accent-2);background:#8ed7a412}.candidate-card.selected{color:var(--soft)}.candidate-icon{color:var(--accent)}.candidate-card strong,.candidate-card small,.candidate-card p{display:block}.candidate-card strong{color:var(--soft);font-size:11px}.candidate-card small{margin-top:4px;font:10px DM Mono,monospace}.candidate-card p{margin-top:6px;font-size:10px;line-height:1.4}.warning-list{margin-top:10px}.warning-list p{display:flex;gap:6px;margin-top:5px;color:#d5b18d;font-size:11px}.editor-hint{margin-top:12px;display:flex;align-items:center;gap:7px}.canvas-tools{display:flex;align-items:center;gap:7px;color:var(--muted);font:11px DM Mono,monospace}.canvas-tools .icon-button{width:30px;height:30px}.frame-inspector{align-self:start}.frame-count{color:var(--accent);font:12px DM Mono,monospace}.frame-detail-preview{height:175px;margin:21px 0 18px;display:grid;place-items:center;overflow:hidden;border:1px solid var(--line);border-radius:7px;background-color:#17211e;background-image:linear-gradient(45deg,#25332d 25%,transparent 25%),linear-gradient(-45deg,#25332d 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#25332d 75%),linear-gradient(-45deg,transparent 75%,#25332d 75%);background-size:14px 14px;background-position:0 0,0 7px,7px -7px,-7px 0}.frame-crop{width:100%;height:100%;display:block;image-rendering:auto}.frame-detail-preview .frame-crop{max-width:100%;max-height:100%}.rect-stats{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:9px}.rect-stats div{padding:9px;border:1px solid var(--line);border-radius:5px}.rect-stats dt{color:var(--muted);font:9px DM Mono,monospace}.rect-stats dd{margin:5px 0 0;color:var(--soft);font:11px DM Mono,monospace}.toggle-row{min-height:45px;margin-top:15px;display:flex;align-items:center;justify-content:space-between;color:var(--soft);font-size:12px}.toggle-row input{width:35px;height:18px;accent-color:var(--accent)}.button-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.danger-button:hover{border-color:#875143;color:#f19a7f}.next-button{margin-top:20px}.rail-heading{min-width:0;align-items:center}.rail-heading strong{display:block;margin-top:5px;font-size:12px}.text-button{min-height:29px;padding:0 8px;border:0;background:transparent}.frame-rail{min-width:0;min-height:106px;margin-top:15px;display:flex;gap:9px;overflow-x:auto;padding-bottom:3px}.rail-frame{position:relative;width:105px;height:95px;flex:0 0 auto;padding:6px;overflow:hidden;border:1px solid var(--line);border-radius:6px;background:#121c19}.rail-frame:hover,.rail-frame.selected{border-color:var(--accent)}.rail-frame>span{position:absolute;z-index:1;top:4px;left:4px;padding:2px 3px;color:#0d1512;background:var(--accent);border-radius:2px;font:9px DM Mono,monospace}.rail-frame.disabled{opacity:.4}.rail-empty{min-height:90px;display:flex;align-items:center;justify-content:center;gap:8px;color:var(--muted);border:1px dashed var(--line);border-radius:6px;font-size:11px}.playback-panel{min-height:625px}.playback-actions{display:flex;align-items:center;gap:10px}.play-button{min-height:37px;border-color:var(--accent);color:#10170e;background:var(--accent);font-weight:700}.smooth-toggle{min-height:37px;display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:11px;cursor:pointer}.smooth-toggle input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.toggle-control{width:32px;height:18px;flex:0 0 auto;padding:2px;border:1px solid #46564e;border-radius:9px;background:#111a17;transition:border-color .12s ease,background-color .12s ease}.toggle-control span{width:12px;height:12px;display:block;border-radius:50%;background:#809087;transition:transform .12s ease,background-color .12s ease}.smooth-toggle input:checked+.toggle-control{border-color:var(--accent);background:#c7f36b1f}.smooth-toggle input:checked+.toggle-control span{transform:translate(14px);background:var(--accent)}.smooth-toggle input:focus-visible+.toggle-control{outline:2px solid var(--accent-2);outline-offset:2px}.playback-stage{min-height:490px;display:grid;place-items:center;overflow:hidden;border:1px solid var(--line);border-radius:8px;background-color:#17211e;background-image:linear-gradient(45deg,#25332d 25%,transparent 25%),linear-gradient(-45deg,#25332d 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#25332d 75%),linear-gradient(-45deg,transparent 75%,#25332d 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0}.playback-canvas{width:min(82%,530px);height:min(82%,430px);display:block;object-fit:contain}.playback-meta{margin-top:10px;display:flex;justify-content:space-between;color:var(--muted);font:11px DM Mono,monospace}.export-controls{align-self:start}.export-summary{margin:23px 0;display:grid;gap:1px;border:1px solid var(--line)}.export-summary div{padding:11px;display:flex;justify-content:space-between;background:#ffffff05}.export-summary span{color:var(--muted);font-size:11px}.export-summary strong{color:var(--soft);font:11px DM Mono,monospace}.export-controls label+label{display:block;margin-top:16px}.export-controls .secondary-button{margin-top:16px}.settings-popover{position:fixed;z-index:10;top:65px;right:24px;width:min(300px,calc(100% - 32px));padding:16px;border:1px solid #3a4b43;border-radius:8px;background:#14201c;box-shadow:0 20px 50px #00000059}.settings-popover p{margin-top:12px;color:var(--muted);font-size:11px;line-height:1.6}.toast{position:fixed;z-index:20;right:24px;bottom:24px;max-width:360px;padding:12px 13px;display:flex;align-items:center;gap:9px;border:1px solid #885243;border-radius:7px;color:#ffd6c7;background:#331f1b;box-shadow:0 10px 30px #0000004d;font-size:12px}.toast button{margin-left:auto;border:0;color:inherit;background:none}.success-toast{border-color:#526942;color:#e8ffc0;background:#1c2b1a}.language-button{width:auto;padding:0 8px;gap:4px}.frame-crop{object-fit:contain}.language-button span{font:10px DM Mono,monospace}.fit-button{min-width:48px;height:30px;border:1px solid var(--line);border-radius:5px;color:var(--muted);background:#121c19;font:10px DM Mono,monospace}.fit-button:hover{border-color:var(--accent-2);color:var(--accent)}.help-button{position:fixed;z-index:9;right:24px;bottom:24px;width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;color:var(--accent);background:#14201c;box-shadow:0 8px 22px #00000040}.guide-backdrop{position:fixed;z-index:30;inset:0;display:grid;place-items:center;padding:20px;background:#040907b8}.guide-dialog{width:min(520px,100%);padding:24px;border:1px solid #43574a;border-radius:9px;color:var(--soft);background:#14201c;box-shadow:0 24px 70px #0006}.guide-dialog h2{margin-top:7px;font-size:19px}.guide-item{margin-top:17px;padding-top:15px;border-top:1px solid var(--line)}.guide-item strong{color:var(--accent);font-size:13px}.guide-item p,.guide-note{margin-top:7px;color:var(--muted);font-size:12px;line-height:1.65}.guide-note{display:flex;gap:7px;align-items:flex-start;margin-bottom:19px}.guide-link{margin-top:12px;padding-left:0}.detection-example,.prompt-tutorial{margin-top:14px;border:1px solid var(--line);border-radius:6px;background:#ffffff05}.detection-example summary,.prompt-tutorial summary{display:flex;align-items:center;gap:9px;padding:11px;cursor:pointer;list-style:none}.detection-example summary::-webkit-details-marker,.prompt-tutorial summary::-webkit-details-marker{display:none}.detection-example summary>span,.prompt-tutorial summary>span{display:inline-flex;align-items:center;gap:7px;color:var(--soft);font-size:11px}.detection-example summary small,.prompt-tutorial summary small{margin-left:auto;max-width:55%;color:var(--muted);font-size:10px;line-height:1.4;text-align:right}.detection-example-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:0 9px}.detection-example figure{margin:0;min-width:0}.detection-example canvas{width:100%;display:block;border:1px solid var(--line);border-radius:4px;image-rendering:auto}.detection-example figcaption{margin-top:5px;color:var(--muted);font-size:9px;line-height:1.3}.detection-example-meter{display:flex;justify-content:space-between;gap:7px;padding:11px 9px 0;color:var(--accent);font:9px DM Mono,monospace}.detection-example-note,.prompt-tutorial-body p{display:flex;gap:6px;align-items:flex-start;margin:9px;color:var(--muted);font-size:10px;line-height:1.5}.prompt-tutorial-body{padding:0 9px 10px}.prompt-tutorial textarea{width:100%;min-height:140px;resize:vertical;padding:10px;border:1px solid var(--line);border-radius:4px;color:var(--soft);background:#0d1613;font:10px/1.55 DM Mono,monospace}.prompt-tutorial-body .secondary-button{margin-top:8px}@media (max-width: 980px){.topbar{align-items:flex-start;flex-wrap:wrap}.step-nav{order:3;flex-basis:100%;justify-content:stretch}.step-nav button{flex:1}.privacy{display:none}.page{width:min(100% - 28px,720px);padding-top:20px}.import-page,.edit-page,.export-page{grid-template-columns:1fr}.rail-panel{grid-column:auto}.control-panel{order:2}.work-panel{order:1}.rail-panel{order:3}.canvas-viewport,.empty-canvas{min-height:390px}.playback-panel{min-height:auto}.playback-stage{min-height:390px}.frame-inspector,.export-controls{order:2}}@media (max-width: 560px){.topbar{padding:12px 14px;gap:14px}.brand-name{font-size:13px}.topbar-actions{gap:4px}.privacy{display:none}.step-nav button{min-width:0;padding:7px 5px}.step-nav button>svg{display:none}.step-nav strong{font-size:10px}.page{width:calc(100% - 20px);padding-bottom:24px}.work-panel,.control-panel{padding:17px}.workspace-heading{align-items:flex-start;flex-direction:column}.workspace-heading h1{font-size:21px}.playback-actions{width:100%;justify-content:space-between}.canvas-viewport{min-height:310px;padding:10px}.candidate-list{grid-template-columns:1fr}.rail-panel{padding:15px}.frame-rail{margin-left:-3px;margin-right:-3px}.playback-stage{min-height:300px}.toast{right:10px;bottom:10px;left:10px;max-width:none}.help-button{right:12px;bottom:12px}.step-nav small{display:none}}
