:root{--paper:#fcfbf8;--surface:#f5f4ef;--canvas:#e9e8e3;--line:#dfddd5;--ink:#292d2b;--muted:#777c75;--accent:#b84f2e;--accent-soft:#f9eae2;--sidebar:174px;--inspector:228px;--shadow:0 12px 34px #32382e12;color-scheme:light}
*{box-sizing:border-box}body{margin:0;color:var(--ink);background:var(--surface);font:13px/1.55 'Noto Sans SC','PingFang SC',sans-serif}button,input,textarea,select{font:inherit;color:inherit}button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}button{border:0;background:none;cursor:pointer}button:disabled{cursor:not-allowed;opacity:.42}button:hover:not(:disabled){color:var(--accent)}button:active:not(:disabled){transform:translateY(1px)}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:3px}a{color:inherit;text-decoration:none}h1,h2,h3,p{margin:0}svg{display:block}img{display:block}small,.subtle{color:var(--muted)}.mono{font:11px/1.5 ui-monospace,monospace;font-variant-numeric:tabular-nums}.skip{position:absolute;left:8px;top:-50px;z-index:8;background:white;padding:10px}.skip:focus{top:8px}.app{display:grid;grid-template-columns:var(--sidebar) minmax(0,1fr);height:100dvh;min-height:620px;overflow:hidden}.sidebar{border-right:1px solid var(--line);background:var(--paper);display:flex;flex-direction:column;padding:24px 14px 14px;overflow:auto}.brand{display:flex;align-items:center;gap:9px;margin:0 8px 26px;font-weight:700;letter-spacing:-.2px}.brand-mark{width:27px;height:27px;border:1px solid var(--accent);border-radius:8px;display:grid;place-items:center;color:var(--accent);font-family:Georgia,serif;font-size:19px}.brand small{display:block;font-size:9px;font-weight:500;letter-spacing:2.3px;line-height:1.6}.nav-item{display:flex;align-items:center;gap:11px;padding:10px 12px;width:100%;text-align:left;border-radius:6px;margin:2px 0;color:#63685f}.nav-item.active{color:var(--accent);background:var(--accent-soft);font-weight:600}.nav-item svg{flex:none}.nav-label{font-size:10px;color:var(--muted);margin:26px 12px 8px;letter-spacing:1px}.project-name{margin:0 12px 11px;font-weight:600;font-size:12px;display:flex;align-items:center;gap:8px}.project-dot{width:6px;height:6px;background:var(--accent);border-radius:50%}.sidebar-bottom{margin-top:auto;padding:25px 11px 0;font-size:10px;color:var(--muted)}.sidebar-bottom a{display:block;margin-top:7px}.profile{display:flex;align-items:center;gap:8px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:12px;color:var(--ink)}.avatar{width:28px;height:28px;border:1px solid var(--line);border-radius:7px;display:grid;place-items:center;font-family:serif;background:#edece5}.main{display:flex;flex-direction:column;min-width:0;overflow:hidden}.topbar{height:62px;flex:none;background:var(--paper);display:flex;align-items:center;justify-content:space-between;padding:0 26px;border-bottom:1px solid var(--line);gap:16px}.breadcrumbs{display:flex;align-items:center;gap:12px;font-size:12px;min-width:0}.breadcrumbs .slash{color:#c3c4bd}.breadcrumbs strong{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.top-actions{display:flex;gap:13px;align-items:center}.saved{font-size:10px;color:var(--muted);white-space:nowrap}.saved:before{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;background:#6d8d77;margin-right:6px}.btn{padding:7px 13px;border:1px solid var(--line);border-radius:5px;background:var(--paper);display:inline-flex;align-items:center;justify-content:center;gap:7px;font-size:11px;white-space:nowrap}.btn.primary{background:var(--ink);border-color:var(--ink);color:#fff}.btn.primary:hover{background:#424940;color:#fff}.btn.accent{background:var(--accent);color:white;border-color:var(--accent)}.btn.accent:hover{background:#9c452a;color:white}.icon-btn{padding:6px;display:inline-grid;place-items:center;border-radius:4px}.icon-btn:hover{background:var(--surface)}.tabs{height:44px;display:flex;align-items:stretch;padding:0 26px;gap:28px;border-bottom:1px solid var(--line);background:var(--paper);flex:none}.tabs button{position:relative;font-size:12px;padding:0 2px;color:var(--muted)}.tabs button.active{color:var(--ink);font-weight:600}.tabs button.active:after{content:'';position:absolute;bottom:-1px;height:2px;left:0;right:0;background:var(--accent)}.tabs .tab-end{margin-left:auto;font-size:10px;display:flex;align-items:center;color:var(--muted);gap:7px}.brief{flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 26px;border-bottom:1px solid var(--line);background:var(--paper)}.brief-title{font-size:14px;font-weight:600;display:flex;align-items:center;gap:10px}.brief-number{font:11px ui-monospace,monospace;color:var(--accent)}.brief p{font-size:11px;margin-top:3px;color:var(--muted)}.brief .text-button{font-size:11px;white-space:nowrap;display:flex;align-items:center;gap:6px}.guide{padding:12px 26px;background:#f8eee7;border-bottom:1px solid #ebdace;display:flex;gap:28px;font-size:11px;flex:none}.guide span{max-width:350px}.guide strong{display:block;font-size:12px;margin-bottom:3px}.toolbar{height:44px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 20px;border-bottom:1px solid var(--line);gap:10px;background:var(--surface)}.tool-group{display:flex;gap:6px;align-items:center}.divider{height:16px;width:1px;background:var(--line);margin:0 5px}.segmented{display:flex;gap:2px}.segmented button{padding:5px 10px;border-radius:4px;color:var(--muted);font-size:11px}.segmented button.active{background:var(--paper);box-shadow:0 1px 3px #292d2b0c;color:var(--ink)}.editor{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) var(--inspector);position:relative}.stage{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;background:var(--canvas)}.paper-zone{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:20px 28px;overflow:auto;background-image:radial-gradient(#aaa99f5c .6px,transparent .6px);background-size:14px 14px}.comic-board{width:100%;max-width:960px;max-height:100%;filter:drop-shadow(0 7px 9px #3c443317);overflow:visible;touch-action:none}.comic-board .panel{cursor:pointer}.comic-board .panel:hover .selection{opacity:1}.comic-board .bubble{cursor:grab}.comic-board .bubble:active{cursor:grabbing}.comic-board .selection{opacity:0}.comic-board .selected .selection{opacity:1}.comic-board .drag-image{cursor:move}.board-caption{position:absolute;bottom:6px;left:28px;right:28px;display:flex;justify-content:space-between;gap:10px;font:10px/1.4 ui-monospace,monospace;color:var(--muted)}.asset-tray{height:96px;flex:none;background:var(--surface);border-top:1px solid var(--line);display:flex;align-items:center;gap:9px;padding:10px 18px;overflow:auto}.tray-label{font-size:10px;color:var(--muted);flex:none;width:36px;line-height:1.6}.asset-thumb{flex:0 0 95px;position:relative;text-align:left;border-radius:4px;overflow:hidden;padding:0;background:var(--paper)}.asset-thumb .scene{height:56px;width:95px}.asset-thumb span{font-size:9px;display:block;padding:3px 5px;color:var(--muted)}.asset-thumb:hover{outline:2px solid var(--accent)}.scene{position:relative;background:#ccd0c8;overflow:hidden;aspect-ratio:1.5;display:block}.scene svg{width:100%;height:100%}.scene-fallback{display:grid;place-items:center;color:var(--muted);height:100%;padding:15px}.inspector{border-left:1px solid var(--line);background:var(--paper);overflow:auto;min-height:0;padding:19px 18px}.inspector-title{display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:600;margin-bottom:3px}.inspector p{color:var(--muted);font-size:10px}.section-label{margin:22px 0 9px;color:var(--muted);font-size:10px;display:flex;justify-content:space-between}.field{display:block;font-size:10px;margin:12px 0}.field>span{display:flex;justify-content:space-between;color:var(--muted);margin-bottom:5px}.field input:not([type=range]),.field select,.field textarea,.story-row textarea,.story-row input{width:100%;border:1px solid var(--line);background:#fffefd;border-radius:4px;padding:8px 9px;line-height:1.6;font-size:11px}.field textarea{resize:vertical;min-height:70px}.field input[type=range]{width:100%;accent-color:var(--accent);height:16px;margin:3px 0}.inline-fields{display:grid;grid-template-columns:1fr 1fr;gap:8px}.inspector .btn{width:100%;margin-top:8px}.swatches{display:flex;gap:6px}.swatch{width:33px;height:27px;border:1px solid var(--line);border-radius:3px;font-size:10px}.swatch.active{outline:2px solid var(--accent);outline-offset:2px}.inspector-tip{font-size:10px;padding-top:15px;margin-top:20px;border-top:1px solid var(--line);color:var(--muted);line-height:1.8}.footer{height:28px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 22px;border-top:1px solid var(--line);background:var(--paper);color:var(--muted);font-size:9px}.property-toggle{display:none}.home{flex:1;overflow:auto;padding:40px clamp(24px,5vw,78px);background:var(--paper)}.home-eyebrow{font:10px ui-monospace,monospace;letter-spacing:2px;color:var(--accent);margin-bottom:12px}.home h1{font:600 clamp(28px,3.5vw,44px)/1.3 'Noto Serif SC',serif;letter-spacing:-1px}.home-intro{max-width:520px;margin-top:14px;color:var(--muted);font-size:12px;line-height:1.8}.feature{display:grid;grid-template-columns:minmax(220px,1.6fr) minmax(170px,1fr);margin:32px 0 36px;gap:28px;align-items:center;max-width:1060px}.feature .scene{aspect-ratio:1.7;border-radius:8px}.feature h2{font:600 26px/1.35 'Noto Serif SC',serif;margin:10px 0 12px}.feature p{color:var(--muted);font-size:12px;margin-bottom:20px}.feature small{font-size:10px}.activities{display:grid;grid-template-columns:1fr 1fr;gap:30px;max-width:1060px}.activity{padding:20px 0;border-top:1px solid var(--line)}.activity h3{font-size:15px;font-weight:600;margin:8px 0}.activity p{color:var(--muted);font-size:11px;margin:10px 0 16px;max-width:360px}.activity .mono{color:var(--accent)}.activity-bottom{display:flex;gap:12px;align-items:center;font-size:10px;color:var(--muted)}.home-note{margin:28px 0 0;font-size:10px;color:var(--muted)}.story-sheet{flex:1;overflow:auto;padding:20px 26px;min-width:0;background:var(--surface)}.story-row{display:grid;grid-template-columns:28px 158px 1fr;gap:16px;align-items:start;border-bottom:1px solid var(--line);padding:18px 0}.story-row:first-child{padding-top:0}.story-row .scene{border-radius:4px}.story-number{color:var(--accent);font:12px ui-monospace,monospace;padding-top:8px}.story-row input{font-weight:600;background:none;border:0;padding:0;margin:0 0 6px;font-size:13px}.story-row textarea{min-height:65px}.story-meta{display:flex;align-items:center;gap:9px;margin-top:8px;font-size:10px;color:var(--muted)}.film-stage{padding:18px 24px;overflow:auto;background:var(--canvas);min-width:0;min-height:0;display:flex;flex-direction:column;gap:15px}.viewer{position:relative;min-height:130px;flex:1;display:grid;place-items:center;overflow:hidden}.viewer .scene{width:100%;max-width:850px;max-height:100%;aspect-ratio:16/9;box-shadow:var(--shadow);border-radius:3px;background:#323733}.viewer video{width:100%;height:100%;max-height:330px;background:#252a27;object-fit:contain}.viewer-label{position:absolute;bottom:12px;left:16px;background:#212922c4;color:white;font-size:10px;padding:4px 8px;pointer-events:none}.film-caption{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:var(--muted);gap:10px}.film-caption strong{color:var(--ink);font-size:12px;font-weight:500}.takes{background:var(--surface);border:1px solid var(--line);border-radius:5px;padding:12px;display:flex;gap:10px;align-items:center;flex:none}.take{width:95px;position:relative;padding:0;border-radius:3px;overflow:hidden;border:2px solid transparent;text-align:left}.take.active{border-color:var(--accent)}.take .scene{height:54px}.take span{display:block;font-size:9px;padding:4px;background:var(--paper)}.takes-note{margin-left:4px;font-size:10px;color:var(--muted);max-width:240px;line-height:1.7}.timeline{height:165px;flex:none;padding:13px 16px;background:var(--paper);border-top:1px solid var(--line);overflow:auto}.timeline-header{display:flex;justify-content:space-between;align-items:center;font-size:10px;margin-bottom:10px}.timeline-header .mono{color:var(--muted)}.ruler{position:relative;height:18px;margin-left:36px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;font:9px ui-monospace,monospace;color:var(--muted)}.timeline-track{display:flex;gap:6px;align-items:stretch;margin-top:8px;min-width:550px}.track-label{width:30px;flex:none;display:grid;place-items:center;font-size:9px;color:var(--muted)}.clip{padding:0;text-align:left;border:2px solid transparent;border-radius:4px;min-width:58px;position:relative;background:#e8ece5;flex-grow:var(--duration)}.clip.active{border-color:var(--accent)}.clip .scene{height:45px;aspect-ratio:auto;width:100%}.clip small{font-size:8px;display:flex;justify-content:space-between;gap:3px;padding:3px 4px;white-space:nowrap;overflow:hidden}.clip.has-video{background:#dce7de}.clip-missing{width:4px;height:4px;border-radius:50%;display:inline-block;background:#a4a79e;margin-right:3px}.preview-area{flex:1;overflow:auto;background:var(--canvas);padding:25px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;min-height:0}.reading-paper{height:calc(100% - 55px);max-height:630px;max-width:100%;aspect-ratio:800/1040;filter:drop-shadow(0 9px 13px #32382e1a)}.reader-controls{display:flex;align-items:center;gap:24px;font-size:11px;flex:none}.preview-note{color:var(--muted);font-size:11px;text-align:center;max-width:490px}.library,.version-page{padding:26px;flex:1;overflow:auto;background:var(--paper)}.page-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.page-title h2{font:600 24px 'Noto Serif SC',serif}.library-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:20px}.library-item .scene{border-radius:4px;aspect-ratio:1.5}.library-item strong{font-size:12px;display:block;margin:9px 0 3px;font-weight:500}.library-item p{font-size:10px;color:var(--muted)}.library-item .btn{margin-top:8px}.version-row{display:grid;grid-template-columns:95px 1fr auto;gap:20px;align-items:center;padding:20px 0;border-top:1px solid var(--line)}.version-row h3{font-size:13px}.version-row p{font-size:10px;color:var(--muted);margin-top:4px}.version-row .scene{border-radius:4px}.comparison{background:var(--canvas);padding:20px;margin:15px 0;display:grid;grid-template-columns:1fr 1fr;gap:16px}.comparison h3{font-size:11px;margin-bottom:12px}.comparison svg{width:100%}.compare-list{font-size:11px;background:var(--paper);padding:14px}.source-link{font-size:10px;color:var(--muted);margin-top:16px;display:block;text-decoration:underline;text-underline-offset:3px}#message{position:fixed;bottom:45px;left:50%;transform:translateX(-50%);z-index:6;padding:9px 16px;background:var(--ink);color:white;border-radius:5px;box-shadow:var(--shadow);font-size:11px;max-width:calc(100vw - 40px);opacity:0;pointer-events:none;transition:opacity .15s}#message.visible{opacity:1}.hidden-input{display:none}.save-error{color:#ad4429}.upload-note{font-size:10px;color:var(--muted);margin-top:12px}.empty{padding:32px 0;max-width:560px;color:var(--muted);font-size:12px}.close-inspector{display:none}.page-count{font-size:10px;color:var(--muted)}
.film-stage{display:grid;grid-template-columns:minmax(0,1fr) 112px;grid-template-rows:minmax(0,1fr) auto;gap:13px}
.film-stage .viewer{grid-column:1;grid-row:1;min-height:170px;align-self:stretch}
.film-stage .viewer .scene{height:100%;width:100%;max-height:100%;aspect-ratio:auto}
.film-stage .film-caption{grid-column:1/-1;grid-row:2}
.film-stage .takes{grid-column:2;grid-row:1;flex-direction:column;padding:7px;gap:9px;overflow:auto;align-items:stretch}
.film-stage .takes-note{display:none}
.film-stage .take{width:100%;flex:none}
.reading-paper .bubble{cursor:default}
@media(min-width:1500px){:root{--sidebar:194px;--inspector:252px}.paper-zone{padding:30px 45px}.inspector{padding:24px}}
@media(max-width:1150px){:root{--sidebar:156px}.sidebar{padding-left:9px;padding-right:9px}.brand{gap:7px;margin-left:7px;font-size:12px}.brand-mark{width:24px;height:24px}.editor{grid-template-columns:1fr}.inspector{display:none}.editor.show-inspector .inspector{display:block;position:absolute;right:0;top:0;bottom:0;width:228px;box-shadow:-8px 0 28px #32382e17;z-index:3}.property-toggle{display:inline-flex}.close-inspector{display:inline-grid}.paper-zone{padding:18px 28px 26px}.asset-thumb{flex-basis:92px}.asset-thumb .scene{width:92px}.brief{padding-left:22px;padding-right:22px}.topbar{padding:0 22px}.tabs{padding:0 22px}}
@media(max-width:760px){:root{--sidebar:64px}.sidebar{padding:20px 8px 10px}.brand{margin:0 auto 25px}.brand-text,.nav-item span,.nav-label,.project-name,.sidebar-bottom>small,.sidebar-bottom>a,.profile>span{display:none}.nav-item{justify-content:center;padding:12px 6px}.sidebar nav{margin-top:10px}.profile{justify-content:center}.sidebar-bottom{padding:0}.topbar{padding:0 14px;height:54px}.saved{display:none}.breadcrumbs{gap:7px;font-size:11px}.tabs{padding:0 16px;gap:24px;height:40px}.tabs .tab-end{display:none}.brief{padding:10px 16px}.brief-title{font-size:12px}.brief p{font-size:10px;max-width:280px}.brief .text-button{font-size:10px}.toolbar{padding:0 12px}.toolbar .tool-label{display:none}.paper-zone{padding:18px 14px 24px}.asset-tray{padding:8px 12px;height:88px}.asset-thumb .scene{height:48px}.asset-thumb{flex-basis:82px}.asset-thumb .scene{width:82px}.board-caption{left:14px;right:14px;font-size:8px}.home{padding:25px 20px}.feature{gap:17px;margin:25px 0;grid-template-columns:1fr}.feature h2{font-size:22px}.activities{grid-template-columns:1fr;gap:0}.home h1{font-size:27px}.feature .scene{aspect-ratio:2}.story-row{grid-template-columns:22px 112px 1fr;gap:10px}.story-sheet{padding:15px}.film-stage{padding:16px}.takes-note{display:none}.viewer{min-height:170px}.footer{padding:0 13px;font-size:8px}.footer span:last-child{display:none}.guide{padding:12px 16px;gap:16px}.guide span{max-width:50%}.version-row{grid-template-columns:75px 1fr}.version-row>.btn{grid-column:2;justify-self:start}.library,.version-page{padding:20px}.preview-area{padding:20px 12px}.reader-controls{gap:16px}.preview-note{font-size:10px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}