:root{font-family:Inter,system-ui,sans-serif;color:#f1f5f9;background:#0d1118}*{box-sizing:border-box}body{margin:0}header{display:flex;justify-content:space-between;align-items:center;padding:20px clamp(16px,5vw,72px);border-bottom:1px solid #29313d;color:#fff;font-weight:800}header a{color:#cbd5e1;text-decoration:none;font-size:.85rem}header b{color:#ef4444;font-size:.7rem}main{max-width:1500px;margin:auto;padding:36px clamp(16px,5vw,72px) 60px}.intro{max-width:850px;margin-bottom:28px}.eyebrow{color:#ef4444;font-weight:800;font-size:.72rem;letter-spacing:.15em}h1{font-size:clamp(2rem,4vw,3.6rem);line-height:1.05;margin:10px 0}h1 span{color:#94a3b8}.intro>p:not(.eyebrow){color:#aebaca}.notice{border-left:3px solid #ef4444;padding:10px 14px;background:#221b20;font-size:.85rem}.layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(280px,1fr);gap:20px}.viewer-card,aside{background:#171d27;border:1px solid #303a48;border-radius:16px;overflow:hidden}.toolbar,.controls,.side-top,.time-row{display:flex;align-items:center;justify-content:space-between;gap:10px}.toolbar,.controls,.timeline{padding:16px}.seg{display:flex;background:#0d121a;border-radius:9px;padding:4px;gap:2px}button{border:1px solid #3c4858;background:#202a37;color:#e2e8f0;border-radius:8px;padding:10px 14px;min-height:44px;font:inherit;cursor:pointer}button:hover{border-color:#ef4444}button:focus-visible,input:focus-visible{outline:3px solid #fbbf24;outline-offset:2px}.seg button{border:0;background:transparent;font-size:.82rem}.seg button[aria-pressed=true]{background:#b91c1c;color:white}.primary{background:#b91c1c;border-color:#b91c1c;font-weight:700}#viewport{height:clamp(330px,48vw,580px);position:relative;background:#111722}#canvas,#canvas canvas{width:100%;height:100%;display:block}#canvas canvas{touch-action:none}.hint{position:absolute;bottom:12px;left:15px;color:#9aa9b9;font-size:.72rem;pointer-events:none}#fallback,#videoPanel{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:25px;color:#cbd5e1}#fallback[hidden],#videoPanel[hidden]{display:none}#videoPanel{background:#0a0e14}video{max-width:100%;max-height:85%}video:not([src]){display:none}.controls{justify-content:flex-start;flex-wrap:wrap;border-bottom:1px solid #303a48}.voice{font-size:.8rem;color:#cbd5e1;display:flex;align-items:center;gap:4px}.voice input{width:18px;height:18px;accent-color:#b91c1c}.timeline label{display:block;font-size:.75rem;color:#aab8c9;margin-top:12px}.time-row{font-size:.8rem;color:#aab8c9}input[type=range]{width:100%;accent-color:#dc2626}.chapters{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:8px}.chapters button{padding:5px 2px;font-size:.7rem;min-height:38px}.chapters button.active,.chapter-list button.active{border-color:#ef4444;color:#fff;background:#3b2027}aside{padding:24px}.chapter-number{font-size:3.5rem;color:#ef4444;font-weight:800;margin-top:24px}h2{font-size:1.8rem;margin:0 0 12px}aside p{color:#b8c4d3;line-height:1.6}.toolbox{border:1px solid #3c4858;border-radius:10px;padding:14px;margin:24px 0}.toolbox strong{font-size:.7rem;letter-spacing:.12em;color:#fca5a5}.toolbox p{margin:6px 0 0;font-size:.85rem}.small{font-size:.78rem}.chapter-list{display:grid;gap:6px;margin-top:20px}.chapter-list button{text-align:left;font-size:.83rem}.chapter-list button span{color:#f87171;margin-right:12px}@media(max-width:850px){.layout{grid-template-columns:1fr}aside{padding:20px}main{padding-top:24px}.chapter-list{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:420px){header{font-size:.8rem}.chapters button{font-size:.6rem;overflow-wrap:anywhere}.toolbar{flex-wrap:wrap}.controls button{flex:1}.chapter-list{grid-template-columns:1fr}}