:root{color-scheme:dark;--bg:#07131f;--panel:#0b1d2b;--text:#eaf2fb;--muted:#94abba;--cyan:#4ddcea;--line:#20394a;--orange:#ff9b50;--ease:cubic-bezier(.23,1,.32,1)}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:'Yu Gothic UI','Meiryo',system-ui,sans-serif;font-size:14px;height:100dvh;min-height:640px;display:flex;flex-direction:column}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{color:var(--text);border:1px solid var(--line);background:#112737;border-radius:8px;min-height:40px;padding:8px 14px;cursor:pointer;transition:background 140ms var(--ease),transform 120ms var(--ease)}button:hover{background:#1c3a4d;border-color:#45819b}button:active{transform:scale(.98)}button:disabled{opacity:.4;cursor:wait}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}header{height:76px;flex:none;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 28px;gap:24px;background:linear-gradient(110deg,#0b1926,#091826)}.brand{font-size:24px;letter-spacing:3px;white-space:nowrap;color:white;text-decoration:none}.brand b{color:var(--cyan);font-size:30px;margin:0 5px}.brand span{font-weight:300;color:#b0c3d0}.tagline{font-size:12px;color:#aebfcf;letter-spacing:.05em}nav{display:flex;margin-left:auto;align-self:stretch;gap:8px}button.nav{border:0;border-radius:0;background:none;padding:0 20px;font-weight:600;position:relative}.nav.active{color:var(--cyan);background:linear-gradient(0deg,#16425266,transparent)}.nav.active:after{content:'';position:absolute;height:2px;background:var(--cyan);bottom:0;left:15px;right:15px}.nav span{color:var(--muted);margin-left:10px}main{display:flex;flex:1;min-height:0;padding:18px 18px 0 0;gap:16px}.stage{position:relative;flex:1;min-width:0;overflow:hidden;background:radial-gradient(ellipse at 48% 60%,#123043 0%,#091724 63%,#07131f 100%)}#viewport{position:absolute;inset:0;touch-action:none;outline-offset:-3px}canvas{display:block;width:100%;height:100%}.stage-heading{position:absolute;top:12px;left:30px;pointer-events:none}.eyebrow{color:var(--cyan);font-size:11px;letter-spacing:2px;font-weight:600}.eyebrow span{color:#57798d;margin:0 10px}h1{font-size:25px;font-weight:600;margin:12px 0;display:flex;align-items:center;gap:17px;letter-spacing:.03em}#chapterNumber{font-size:46px;color:var(--cyan);line-height:1;letter-spacing:0;font-weight:300}.status{font-size:11px;color:#b5c7d4;display:flex;align-items:center;gap:9px}.status-dot{width:6px;height:6px;border-radius:50%;background:var(--orange);box-shadow:0 0 10px #ff98454d}.separator{color:#385368}.viewbar{position:absolute;top:18px;right:14px;display:flex;gap:10px}.segmented{display:flex;background:#0b1e2bd9;border:1px solid #294858;border-radius:10px;padding:3px;gap:2px;backdrop-filter:blur(12px)}.segmented button{background:none;border:0;min-height:34px;padding:7px 14px;border-radius:7px;font-size:12px}.segmented button.active{background:#16465a;color:#7af1f4;box-shadow:inset 0 0 0 1px #287185}.glass{background:#102635dc;font-size:12px;border-color:#294858}.view-note{position:absolute;right:18px;top:78px;color:#9ab8ca;font-size:11px}.canvas-bottom{position:absolute;bottom:20px;left:30px}.toolbox{display:flex;gap:10px}.zoom button{font-size:20px;padding:0 13px}#gestureHint{color:#8eabba;font-size:11px;margin:12px 0 0}.orientation{position:absolute;right:20px;bottom:26px;display:flex;flex-direction:column;color:#80a6ba;text-align:right;font-size:12px;gap:7px}.orientation small{font-size:10px;color:#6e899a}aside{width:300px;flex:none;border:1px solid #284555;background:linear-gradient(150deg,#102838,#0a1926 70%);border-radius:15px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 8px 35px #0002}.aside-head{padding:21px 20px 17px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:8px}.tiny{font-size:11px;color:var(--muted)}.part-info{padding:20px 20px 16px}.muted{color:var(--muted)}.small{font-size:11px}h2{font-size:22px;letter-spacing:.02em;line-height:1.5;margin:9px 0 10px}.part-info p{font-size:12px;line-height:1.9;color:#b3c7d6;margin:0;min-height:46px}.part-meta{font-size:10px;color:#718ea3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:12px 0 18px}.primary{background:linear-gradient(115deg,#147f97,#135168);border:1px solid #35bfd3;color:white;box-shadow:0 3px 16px #069aba12;font-weight:600}.primary:hover{background:linear-gradient(115deg,#189caf,#1a6b84);border-color:#72e6ef}.wide{width:100%}.wide span{float:right}.display-settings{padding:0 20px 18px;border-bottom:1px solid var(--line)}label{display:block;font-size:12px;font-weight:600;color:#bfd0db;margin-bottom:9px}.full button{flex:1;padding:6px 8px}.two-buttons{display:flex;gap:8px;margin-top:9px}.two-buttons button{flex:1;font-size:11px;padding:6px}.subtle{border:0;background:none;font-size:11px;color:#95b1c4;min-height:32px;margin:3px 0 8px}.toggle{display:flex;align-items:center;gap:8px;position:relative;font-size:11px;margin:3px 0 6px;cursor:pointer}.toggle input{position:absolute;opacity:0;width:100%;height:100%;cursor:pointer;margin:0}.switch{width:28px;height:16px;background:#29404f;border-radius:20px;margin-left:auto;flex:none;pointer-events:none}.switch:after{content:'';display:block;width:12px;height:12px;border-radius:50%;background:#a1b6c3;margin:2px;transition:transform 120ms var(--ease)}input:checked~.switch{background:#267c8c}input:checked~.switch:after{background:#a2ffff;transform:translateX(12px)}input:focus-visible~.switch{outline:2px solid white}.display-settings small{font-size:9px}.part-browser{padding:16px 12px 4px;display:flex;flex-direction:column;flex:1;min-height:90px}.part-browser>label{margin-left:8px}input[type=search]{width:100%;padding:10px;border:1px solid #2a4455;border-radius:7px;color:white;background:#071725;margin-bottom:8px;font-size:12px}input::placeholder{color:#7791a3}#partList{overflow:auto;min-height:50px;scrollbar-width:thin;scrollbar-color:#2d4b60 transparent}#partList button{display:flex;align-items:center;gap:9px;text-align:left;min-height:34px;font-size:11px;width:100%;background:none;border:1px solid transparent;border-radius:6px;padding:7px 9px}#partList button:before{content:'';width:5px;height:5px;background:#647f95;border-radius:50%;flex:none}#partList button:after{content:'›';margin-left:auto;color:#7991a4}#partList button.active{background:#5433204f;color:#ffb172;border-color:#755032}#partList button.active:before{background:var(--orange)}#partList button:hover{background:#1c3747}#partList .empty{padding:12px;color:var(--muted);font-size:12px}.aside-footer{padding:9px 15px;font-size:9px;color:#768fa2;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line)}.aside-footer button{border:0;background:none;font-size:9px;color:#91afbf;min-height:25px;padding:3px}.playback{display:flex;gap:28px;align-items:center;padding:22px 28px 18px;min-height:124px;background:linear-gradient(110deg,#102735,#0b1a28);border-top:1px solid #305064;flex:none;margin-top:18px;box-shadow:0 -10px 40px #0002}.transport{display:flex;gap:8px;align-items:center}.transport button{min-height:48px}.transport #play{min-width:120px;font-size:16px;margin-right:6px}.transport #previous,.transport #next{font-size:21px;padding:6px 13px}select{background:#122a39;border:1px solid #2a4a5c;border-radius:8px;padding:12px 8px;color:white;min-height:48px}.speed-label{margin:0}.timeline{flex:1;min-width:0}.timeline-top{display:flex;justify-content:space-between;font-size:10px;color:#97b3c5;margin-bottom:5px}#timeText{font-variant-numeric:tabular-nums}input[type=range]{accent-color:var(--cyan);cursor:pointer;width:100%;margin:4px 0;height:20px}#chapters{display:flex;gap:4px}#chapters button{flex:1;min-width:0;background:none;border:0;padding:3px;font-size:11px;min-height:29px;color:#a0bacb;border-radius:5px}#chapters button.active{color:var(--orange);background:#ab6a2521}#chapters button:hover{background:#214352}.sr-only{position:absolute;width:1px;height:1px;clip:rect(0,0,0,0);overflow:hidden}#loading{position:absolute;inset:0;display:flex;flex-direction:column;gap:16px;align-items:center;justify-content:center;background:#07131fed;z-index:5;color:#ccdeeb}#loading[hidden]{display:none}#loading small{color:#829db1}.loader{width:30px;height:30px;border:2px solid #214956;border-top-color:var(--cyan);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}#selectionTag{position:absolute;pointer-events:none;border:1px solid #a56a3d;background:#442d1ddd;border-radius:6px;padding:7px 12px;color:#ffb67d;font-size:11px;max-width:230px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}dialog{background:#0d2332;color:var(--text);border:1px solid #396074;border-radius:18px;padding:34px;max-width:550px;width:calc(100% - 32px);box-shadow:0 30px 100px #0008}dialog::backdrop{background:#030b14bb;backdrop-filter:blur(5px)}dialog h2{font-size:29px;margin:18px 0}dialog p,dialog dd{font-size:13px;color:#b2c8d8;line-height:1.9}dialog dt{font-size:13px;color:var(--cyan);margin-top:12px}dialog dd{margin:4px 0}dialog>.dialog-close:first-child{position:absolute;right:14px;top:12px;background:none;border:0;font-size:24px}#toast{position:fixed;left:50%;bottom:145px;transform:translateX(-50%);background:#17394b;border:1px solid #417e93;padding:12px 20px;border-radius:9px;font-size:12px;box-shadow:0 6px 30px #0005;z-index:8;max-width:90vw}#toast[hidden]{display:none}
@media(max-width:1300px){.tagline{display:none}.viewbar{top:108px;left:30px;right:auto}.view-note{top:157px;left:30px;right:auto}h1{font-size:23px}aside{width:280px}.part-info{padding-top:14px}.aside-head{padding:14px 20px}.part-info h2{font-size:19px}.part-meta{margin:6px 0 11px}.playback{gap:18px}}
@media(max-height:800px) and (min-width:851px){.aside-head{display:none}.part-info{padding-top:14px;padding-bottom:12px}.part-meta{margin:5px 0 10px}.display-settings{padding-bottom:10px}.part-info h2{font-size:19px}.part-info p{min-height:0}.playback{min-height:104px;padding:14px 22px;margin-top:12px}.part-browser{padding-top:10px}header{height:64px}}
@media(max-width:850px){body{height:auto;min-height:100dvh}header{height:64px;padding:0 16px;gap:8px}.brand{font-size:16px;letter-spacing:2px}.brand b{font-size:22px;margin:0}button.nav{font-size:11px;padding:0 10px}main{flex-direction:column;padding:0;gap:0}.stage{height:65dvh;min-height:420px;flex:none}.stage-heading{left:18px;top:20px}h1{font-size:21px}#chapterNumber{font-size:36px}.viewbar{left:18px;top:118px}.view-note{left:18px;top:163px}.canvas-bottom{left:18px;bottom:15px}.orientation{display:none}aside{width:auto;margin:0 14px;max-height:none;display:grid;grid-template-columns:1fr 1fr;border-radius:12px}.aside-head{display:none}.part-info{padding:16px}.display-settings{padding:16px;border:0}.part-browser{grid-column:1/-1;max-height:230px;padding:12px}.aside-footer{grid-column:1/-1}.playback{flex-direction:column;align-items:stretch;gap:12px;padding:16px;margin-top:12px;position:sticky;bottom:0;z-index:3}.transport{justify-content:center}.transport button,.transport select{min-height:40px}.timeline{width:100%}.timeline-top{margin-bottom:0}#chapters button{font-size:10px}#gestureHint{font-size:10px}.part-info p{font-size:11px}#toast{bottom:185px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}.loader{animation:none}}
/* Keep the part list usable even when an individual component has a long name. */
@media(min-width:851px){.aside-head{padding:13px 20px}.aside-head .tiny{display:none}.part-info{padding:15px 20px 12px}.part-info h2{font-size:19px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-height:57px}.part-info p{font-size:12px;line-height:1.65;min-height:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.part-meta{margin:7px 0 12px}.display-settings{padding-bottom:12px}.display-settings label{margin-bottom:6px}.two-buttons{margin-top:6px}.subtle{margin:1px 0 4px;min-height:28px}.part-browser{min-height:160px;padding-top:12px}.aside-footer{padding:5px 15px;min-height:34px;flex:none}}
@media(min-width:851px) and (max-height:800px){aside{overflow-y:auto;scrollbar-width:thin;scrollbar-color:#2d4b60 transparent}.part-info,.display-settings{flex:none}.part-info p{-webkit-line-clamp:2}.part-info .part-meta{display:none}.part-info .primary{margin-top:10px}.part-browser{flex:none;height:210px}.aside-footer{flex:none}}