:root{color-scheme:light;--paper:#f8f4eb;--sand:#eee7da;--ink:#203d53;--navy:#194d7c;--green:#245f51;--muted:#536a78;--line:#ded6c7;--sky:#d8e9ed}*{box-sizing:border-box}html,body{margin:0;height:100%;height:100dvh;overflow:hidden}body{font-family:system-ui,"Noto Sans JP","Microsoft YaHei",sans-serif;color:var(--ink);background:var(--paper);display:flex;flex-direction:column}button,select,input{font:inherit}button,select{color:inherit;cursor:pointer}button{border:0;background:transparent;touch-action:manipulation;min-height:44px}button:disabled{opacity:.35;cursor:default}button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #b78a36;outline-offset:3px}button:active:not(:disabled){filter:brightness(.94)}svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}svg .solid{fill:currentColor;stroke:none}svg text{fill:currentColor;stroke:none;text-anchor:middle;font-size:16px;font-weight:650}.symbols{position:absolute;width:0;height:0;overflow:hidden}.sky{height:116px;flex-shrink:0;background:var(--sky) url('assets/seaside-header.png') center bottom/cover no-repeat;padding:10px 16px 30px}.topbar{display:flex;gap:12px;align-items:center}.round{background:var(--green);color:var(--paper);border-radius:50%;width:44px;display:grid;place-items:center}.identity{flex:1;min-width:0}.identity strong{display:block;font-size:19px}.identity span{font-size:12px;display:block;margin-top:3px}.icon-button{width:44px;display:grid;place-items:center;border-radius:50%;background:#f8f4ebbd}.views{display:flex;margin:4px 16px 8px;background:var(--sand);border-radius:30px;padding:3px;flex-shrink:0}.views button{flex:1;border-radius:24px;font-size:17px;font-weight:650;min-height:42px}.views [aria-pressed=true]{background:var(--navy);color:var(--paper)}main{display:flex;flex-direction:column;flex:1;min-height:0;padding:0 18px}.question-meta{display:flex;gap:12px;align-items:center;padding:3px 0 10px;flex-shrink:0}.question-meta strong{background:var(--navy);color:var(--paper);font-size:13px;border-radius:20px;padding:7px 13px}.question-meta span{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}#content{overflow:auto;overscroll-behavior:contain;flex:1;min-height:0;padding:8px 1px 16px;scrollbar-width:thin;scrollbar-color:#b9c8c8 var(--paper)}h1{font-size:20px;line-height:1.9;margin:1px 0 16px;font-weight:650}.option-list{display:grid;gap:9px}.choice{text-align:left;border:1px solid var(--line);border-radius:12px;display:flex;align-items:baseline;gap:13px;padding:12px 14px;font-size:17px;line-height:1.85;min-height:56px;background:#fbf8f0}.choice .choice-number{font-size:14px;display:grid;place-items:center;align-self:center;width:24px;height:24px;border:1px solid currentColor;border-radius:50%;flex-shrink:0}.choice[aria-pressed=true]{border:2px solid var(--navy);padding:11px 13px;background:#e2edf0}.figure{width:100%;max-height:225px;object-fit:contain;display:block}.figure-button{display:block;width:100%;padding:0;margin:0 0 14px}.muted,.help{color:var(--muted);font-size:14px;line-height:1.8}.instruction{font-size:18px;line-height:2}.instruction p{margin:0 0 14px}.instruction details{font-size:14px;color:var(--muted)}.transcript-line{display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:10px;padding:0 0 18px;margin:0 0 18px;border-bottom:1px solid var(--line)}.speaker{font-size:12px;line-height:1.5;padding-top:12px;color:var(--muted)}.line-body{min-width:0}.line-body p{font-size:19px;line-height:2.15;margin:0;overflow-wrap:anywhere}.line-body .inline-translation{font-size:15px;line-height:1.8;background:#e4ebe0;color:#264e46;padding:10px 12px;border-radius:10px;margin-top:9px}ruby{ruby-position:over}rt{font-size:.49em;color:#51706d;letter-spacing:.02em}.translation{color:var(--green);border:1px solid #b3c9be;border-radius:7px;background:#f4f8ee;margin-left:7px;min-height:35px;padding:2px 10px;vertical-align:middle;font-size:15px}.translation[aria-expanded=true]{background:var(--green);color:var(--paper)}.note{border-radius:2px;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.23em;cursor:pointer}.note-vocab{text-decoration-color:#277269}.note-grammar{text-decoration-color:#a75e45;text-decoration-style:dashed}.note:focus-visible{background:#f8dfa2;outline:none}.transport{flex-shrink:0;background:var(--sand);padding:6px 18px max(10px,env(safe-area-inset-bottom));border-radius:20px 20px 0 0;box-shadow:0 -4px 16px #253c4010}.status{font-size:12px;line-height:1.5;margin:0 0 4px;color:#79552a;max-height:44px;overflow:auto}.status:empty{display:none}.seek-wrap input{width:100%;margin:0;height:24px;accent-color:var(--green);touch-action:pan-x}.times{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;line-height:1}.controls{display:flex;align-items:center;justify-content:space-between;margin:3px 0 6px;gap:8px}.controls button{display:flex;align-items:center;flex-direction:column;justify-content:center;width:48px;height:48px;border-radius:50%;padding:7px;color:var(--navy)}.controls button svg{width:25px;height:25px}.controls small{font-size:9px;margin-top:3px}.controls .primary{width:58px;height:58px;background:var(--navy);color:var(--paper)}.controls .primary svg{width:29px;height:29px}.secondary{display:flex;gap:6px;align-items:center}.secondary button{min-height:40px;border:1px solid #d3c9b8;border-radius:22px;padding:4px 10px;font-size:12px;display:flex;align-items:center;gap:5px;justify-content:center;background:#f6f0e5;white-space:nowrap}.secondary svg{width:17px;height:17px}.secondary button:first-child{flex:1}#questionsOpen{flex:1}#abOpen[aria-pressed=true]{background:var(--green);color:var(--paper)}.ab-panel{display:flex;gap:5px;align-items:center;padding-top:7px;font-size:11px}.ab-panel button{min-height:36px;padding:4px 8px;border:1px solid #b8c8b8;border-radius:15px}.ab-panel span{flex:1}.sheet{position:fixed;inset:auto 0 0;max-height:min(80dvh,720px);width:min(100%,620px);padding:18px 20px max(22px,env(safe-area-inset-bottom));border:0;border-radius:24px 24px 0 0;background:var(--paper);color:var(--ink);margin:0 auto;overflow:auto;overscroll-behavior:contain}.sheet::backdrop{background:#172f4560}.sheet header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}.sheet h2{font-size:20px;margin:0}.sheet header button{font-size:14px;color:var(--green);min-width:44px}.paper-list{display:grid;grid-template-columns:1fr 1fr;gap:10px}.paper-list button{padding:13px 12px;background:var(--sand);border-radius:12px;text-align:left;font-weight:600}.paper-list button small{display:block;font-size:11px;margin-top:4px;font-weight:400}.paper-list button[aria-current=true]{background:var(--navy);color:var(--paper)}.sheet h3{font-size:15px;margin:20px 0 9px}.question-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.question-grid button{border:1px solid var(--line);border-radius:12px;min-width:0;font-size:13px}.question-grid [aria-current=true]{background:var(--navy);color:var(--paper)}.setting-row{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:65px;border-bottom:1px solid var(--line);font-size:16px}.setting-row select{max-width:65%;min-height:44px;border:1px solid var(--line);border-radius:12px;background:var(--paper);padding:7px 10px}.version{font-size:11px;color:var(--muted);margin-top:24px}.note-sheet p{font-size:17px;line-height:1.9}.picture-sheet img{width:100%;height:auto}::selection{background:#f1d89b}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}[hidden]{display:none!important}input,select{accent-color:var(--green)}@media(min-width:621px){body{max-width:480px;margin:0 auto;box-shadow:0 0 40px #20374820}html{background:#dce8e9}.sheet{max-width:480px}}@media(max-height:720px){.sky{height:92px;padding-top:6px}.views{margin-top:2px;margin-bottom:5px}.transport{padding-top:3px}.controls .primary{width:50px;height:50px}.controls{margin-top:2px;margin-bottom:2px}.question-meta{padding-bottom:5px}.controls small{display:none}}@media(prefers-reduced-motion:no-preference){.sheet[open]{animation:rise .18s ease-out}@keyframes rise{from{transform:translateY(18px);opacity:.7}to{transform:none;opacity:1}}}

body{font-family:"Noto Sans JP","Yu Gothic","Meiryo","Microsoft YaHei",system-ui,sans-serif}@media(max-height:500px) and (orientation:landscape){.sky{height:62px;padding:5px 16px 6px}.identity strong{font-size:17px}.views button{min-height:36px;font-size:15px}.views{margin-bottom:4px}.question-meta{padding-bottom:3px}.controls .primary,.controls button{height:42px;width:42px}.transport{padding-bottom:6px}.controls{margin:1px 0 2px}}

/* The seaside is a page background, never a reserved decorative header. */
body{position:relative;isolation:isolate}
body::before{content:"";position:absolute;z-index:-1;inset:0 0 auto;height:240px;pointer-events:none;background:linear-gradient(180deg,rgba(248,244,235,.38),rgba(248,244,235,.76) 65%,var(--paper)),url('assets/seaside-header.png') center bottom/cover no-repeat}
.sky{height:auto;padding:6px 14px;background:none}
.topbar{min-height:44px;gap:10px}
.identity strong{font-size:18px}
.identity span{font-size:11px;margin-top:1px}
.views{margin:0 14px 6px;padding:2px;background:#eee7dacc}
.views button{min-height:40px;font-size:16px}
.question-meta{padding:0 0 6px}
.question-meta strong{padding:6px 12px}
#content{padding-top:4px}
@media(max-height:500px) and (orientation:landscape){.sky{height:auto;padding:3px 14px}.views{margin-bottom:4px}.views button{min-height:36px}.question-meta{padding-bottom:3px}body::before{height:180px}}

/* Optional study aids stay in the scrolling content, never in the player. */
.question-review{margin-top:18px;display:grid;gap:10px}
.question-review details,.answer-disclosure{border-top:1px solid var(--line);padding:6px 0}
.question-review summary,.answer-disclosure summary{cursor:pointer;color:var(--green);min-height:44px;padding:10px 2px;font-size:15px;font-weight:600}
.option-review{margin-top:24px;padding-top:12px;border-top:1px solid var(--line)}
.option-review h2{font-size:17px;margin:0 0 12px}
.option-review ol{padding-left:27px;margin:0}
.option-review li{padding:0 0 14px 4px;line-height:1.85;font-size:17px;overflow-wrap:anywhere}
.review-option-ja{margin:0 0 5px;line-height:2.1}
.review-option-zh{margin:0;color:var(--green);font-size:15px;line-height:1.8}
.translation-disclosure .option-review{margin-top:0;padding-top:4px;border:0}
.translation-disclosure .option-review h2{display:none}
.answer-result{font-size:17px;font-weight:650;margin:6px 0 12px}

body{padding-top:env(safe-area-inset-top);-webkit-text-size-adjust:100%;text-size-adjust:100%}main{padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right))}.offline-tools{border-top:1px solid var(--line);margin-top:18px;padding-top:6px}.offline-tools button{border:1px solid var(--green);border-radius:12px;padding:8px 12px;font-size:15px;color:var(--green)}