body.story-page{background:#f5f1eb}.story-header{max-width:1480px;margin:auto;padding:25px 30px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:12px}.story-header a,.preview-note a{color:var(--teal);text-decoration:none;font-size:13px}.story-header>span:not(.preview-badge){font-size:11px;letter-spacing:.18em;color:#8a7c6c}.preview-badge{font-size:11px;padding:7px 12px;border:1px solid #cabb9e;border-radius:20px;color:#806a4f}.story-layout{max-width:1480px;margin:auto;padding:32px 30px 48px;display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:24px}.story-intro{grid-column:1/-1}.story-intro h1{font-family:Georgia,"Noto Serif TC",serif;font-size:34px;letter-spacing:.1em;margin:10px 0}.story-intro h1 span{font-family:inherit;font-size:15px;color:#9a8269;display:inline-block;margin-left:22px;font-weight:400}.story-intro p{font-size:13px;line-height:1.8;color:#7b7c7b;margin:0}.story-theater{min-width:0}.film-screen{position:relative;aspect-ratio:16/9;border-radius:7px;overflow:hidden;background:#292b2d;border:1px solid #d5cabc}.film-screen #canvas-container{inset:0}.film-screen #canvas-container canvas{width:100%;height:100%}.film-label{position:absolute;inset:17px 19px auto;display:flex;justify-content:space-between;pointer-events:none;color:#fff;text-shadow:0 1px 4px #000;font-size:11px;letter-spacing:.12em;z-index:2}.film-label span{padding:6px 9px;background:#18252266;border-radius:3px}#fade{position:absolute;inset:0;background:#121820;pointer-events:none;z-index:1}#dissolve{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}#dissolve[hidden]{display:none}.transport{display:flex;align-items:center;gap:10px;padding:16px 0}.transport button,.shot-navigation button,.chapters button{background:#fff;border:1px solid #dcd5cb;color:#365a58;border-radius:4px;padding:10px 12px;font-size:12px}.transport #play{background:#385f5e;color:#fff;min-width:80px}.transport input{min-width:40px;flex:1;accent-color:#487b72}.transport output{font-size:12px;color:#6a706f;min-width:108px;text-align:right;font-variant-numeric:tabular-nums}.shot-navigation{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:0 0 17px;border-bottom:1px solid var(--line)}.shot-navigation output{font-size:13px;text-align:center;line-height:1.6}.shot-navigation button{white-space:nowrap}.chapters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;padding:17px 0}.chapters button{text-align:left;line-height:1.6;min-height:54px}.chapters button[aria-current=step]{background:#e6f0e9;border-color:#779d8c}.preview-note{border:1px solid #ddd3c4;border-radius:6px;padding:17px 19px;background:#fffaf1;font-size:12px;line-height:1.8}.preview-note strong{color:#7e6547}.preview-note p{margin:6px 0;color:#7d766c}.preview-note #shot-note{color:#4e5957;min-height:22px}.shot-sidebar{align-self:start;background:#fff;border:1px solid var(--line);border-radius:7px;overflow:hidden}.shot-heading{padding:18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.shot-heading h2{font-size:16px;margin:0}.shot-heading span{font-size:10px;letter-spacing:.1em;color:#a08b73}#shot-list{list-style:none;margin:0;padding:8px;max-height:760px;overflow:auto}#shot-list button{width:100%;text-align:left;border:1px solid transparent;background:transparent;border-radius:4px;padding:12px 10px;color:#465250}#shot-list strong{display:block;font-weight:500;font-size:12px;line-height:1.5}#shot-list small{display:block;font-size:10px;margin-top:4px;color:#8a9291}#shot-list button:hover{background:#f5f4ef}#shot-list button[aria-current=step]{background:#ecf4ef;border-color:#a0b9ac}.story-page button:disabled{opacity:.4;cursor:default}@media(max-width:1000px){.story-layout{grid-template-columns:minmax(0,1fr) 235px;padding:24px 18px;gap:16px}.chapters{grid-template-columns:repeat(2,minmax(0,1fr))}.story-header{padding:20px}}@media(max-width:760px){.story-header{padding:17px 14px}.story-header>span:not(.preview-badge){display:none}.story-layout{display:block;padding:25px 12px}.story-intro{margin-bottom:20px}.story-intro h1{font-size:29px}.story-intro h1 span{display:block;margin:10px 0}.story-sidebar{margin-top:20px}#shot-list{max-height:400px}.transport{gap:6px;flex-wrap:wrap}.transport output{width:100%;text-align:right}.transport input{min-width:80px}.shot-navigation output{font-size:11px}.shot-navigation button{padding:9px 8px;font-size:11px}.film-label{inset:10px 10px auto;font-size:10px}.story-page .error{top:20%;font-size:11px;left:8px;right:8px;padding:10px}}

.story-capture{background:transparent;color:#385f5e;border:1px solid #bcc9c0;border-radius:4px;font-size:12px;padding:10px 14px;margin-top:14px}.shot-sidebar{min-width:0}@media(max-width:760px){.shot-sidebar{margin-top:20px}}
.story-version-controls{grid-column:1/-1;display:flex;align-items:center;flex-wrap:wrap;gap:12px;font-size:13px}.story-version-controls select{min-height:44px;padding:9px 14px;border:1px solid #bcc9c0;border-radius:5px;background:#fff;color:#385f5e;font:inherit}.story-version-controls span{font-size:12px;color:#716d62}@media(max-width:760px){.story-version-controls{margin-bottom:16px}.story-version-controls span{flex-basis:100%}}
.film-screen #loading{inset:0;transform:none;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:24px;background:#eef2e9f5;color:#385e52;text-align:center;font-size:clamp(12px,1.4vw,16px);letter-spacing:.05em;line-height:1.8}.film-screen #loading[hidden]{display:none}.film-screen #loading::before{content:'';width:34px;height:34px;border:3px solid #cad8cb;border-top-color:#587d67;border-radius:50%;animation:story-loading-spin 1s linear infinite}.film-screen #loading::after{content:'準備完成後即可播放';font-size:11px;color:#7b8b7e}@keyframes story-loading-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.film-screen #loading::before{animation:none}}