:root { color-scheme: light; --paper:#faf4e7; --ink:#252d27; --muted:#536252; --green:#334b32; --line:#cdd1bd; --card:#fffcf5; --on-green:#fffdf3; }
:root[data-dark="true"] { color-scheme:dark; --paper:#191e1a; --ink:#f6f1e6; --muted:#c0cbbd; --green:#c4d5a9; --line:#57634f; --card:#252e27; --on-green:#192617; }
:root[data-embedded="true"] #theme { display:none; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:1rem; }
body { margin:0; background:var(--paper); color:var(--ink); font:17px/1.65 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
a { color:var(--green); text-underline-offset:4px; }
a:hover { text-decoration-thickness:2px; }
button,.button { border:1px solid var(--line); border-radius:12px; padding:.7rem 1rem; background:var(--card); color:var(--ink); font:600 .92rem/1.4 system-ui,sans-serif; cursor:pointer; min-height:46px; }
button:hover,.button:hover { background:color-mix(in srgb,var(--green) 12%,var(--card)); }
.primary { background:var(--green); color:var(--on-green); border-color:var(--green); }
.primary:hover { background:var(--green); filter:brightness(.93); }
.button { display:inline-flex; align-items:center; text-decoration:none; }
:focus-visible { outline:3px solid var(--green); outline-offset:4px; }
[hidden] { display:none !important; }
.skip { position:fixed; top:-5rem; left:1rem; z-index:5; background:var(--card); padding:1rem; }
.skip:focus { top:1rem; }
.masthead { max-width:1200px; margin:auto; padding:1.5rem 2rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; border-bottom:1px solid var(--line); }
.brand { color:var(--ink); font:700 1.4rem/1.2 Georgia,serif; letter-spacing:.025em; text-decoration:none; }
.brand span { display:block; margin-top:.4rem; font:600 .6rem/1.3 system-ui,sans-serif; letter-spacing:.2em; }
.badge { font-size:.65rem; font-weight:700; letter-spacing:.1em; color:var(--muted); border:1px solid var(--line); border-radius:24px; padding:.5rem .8rem; }
main { max-width:1160px; margin:auto; padding:0 2rem; }
section { padding:3.5rem 0; border-bottom:1px solid var(--line); }
.intro { padding:3.5rem 0 3rem; }
.eyebrow { font-size:.72rem; font-weight:750; letter-spacing:.17em; color:var(--green); margin:0 0 1rem; }
h1,h2,h3 { font-family:Georgia,"Times New Roman",serif; font-weight:400; line-height:1.1; }
h1 { font-size:clamp(2.6rem,5.7vw,4.8rem); margin:.25rem 0 1.5rem; max-width:1000px; letter-spacing:-.03em; }
h1 em { color:var(--green); font-weight:400; }
h2 { font-size:clamp(2rem,4vw,3rem); margin:0 0 1.4rem; letter-spacing:-.025em; }
h3 { font-size:1.6rem; margin:.3rem 0; }
.lead { color:var(--muted); font-size:1.14rem; }
.jump { display:flex; align-items:center; gap:1rem 1.4rem; flex-wrap:wrap; margin-top:1.7rem; }
.jump>a:not(.button) { padding:.55rem 0; }
.section-heading { display:flex; justify-content:space-between; gap:1rem; align-items:flex-end; margin-bottom:1.2rem; }
.section-heading h2 { margin-bottom:0; }
.section-heading>span { font-size:.8rem; color:var(--muted); padding-bottom:.25rem; }
.frame { aspect-ratio:16/9; overflow:hidden; border-radius:18px 18px 0 0; position:relative; background:#232b20; isolation:isolate; }
#art { width:100%; height:100%; display:block; object-fit:cover; transform-origin:center; will-change:transform; }
#film-video { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#232b20; }
.frame::after { content:""; position:absolute; inset:55% 0 0; background:linear-gradient(transparent,rgba(10,18,12,.72)); pointer-events:none; }
.frame-note { position:absolute; top:1rem; left:1rem; right:1rem; width:fit-content; max-width:calc(100% - 2rem); background:#17251dda; color:#fffbee; padding:.35rem .6rem; border-radius:5px; font-size:.6rem; font-weight:700; letter-spacing:.07em; }
.scene-tag { position:absolute; left:1.4rem; bottom:1.2rem; right:1rem; z-index:1; color:#fff9e9; }
.scene-tag span { font-size:.7rem; letter-spacing:.14em; }
.scene-tag h3 { font-size:clamp(1.4rem,3vw,2.3rem); }
.captions { background:#243128; color:#fffbed; padding:1.2rem 1.5rem; border-radius:0 0 18px 18px; min-height:124px; display:flex; flex-direction:column; justify-content:center; text-align:center; }
#caption { margin:0 auto .3rem; font-size:clamp(1.07rem,2.5vw,1.43rem); line-height:1.5; max-width:800px; min-height:1.5em; }
#reference { color:#d1d7c6; font-size:.72rem; }
.transport { display:flex; gap:.65rem; flex-wrap:wrap; align-items:center; margin:1.25rem 0; }
.volume { display:flex; align-items:center; gap:.6rem; font-size:.8rem; }
.volume input { width:100px; }
input[type=range] { accent-color:var(--green); min-height:44px; cursor:pointer; }
.seek-heading { display:flex; justify-content:space-between; font-size:.85rem; color:var(--muted); }
#seek { width:100%; margin:0; }
#status { font-size:.86rem; color:var(--muted); }
.note { font-size:.84rem; color:var(--muted); line-height:1.6; }
.storyboard { margin:1.5rem 0; }
.motion-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.2rem; }
.motion-grid .storyboard { margin:0; }
@media (max-width:700px) { .motion-grid { grid-template-columns:1fr; } }
.storyboard img { display:block; width:100%; height:auto; border-radius:14px; }
.storyboard figcaption { color:var(--muted); font-size:.8rem; margin-top:.65rem; }
.chapters { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:.6rem; margin:1.5rem 0; }
.chapters button { text-align:left; font-size:.78rem; padding:.65rem; }
.chapters span { display:block; font-size:.6rem; letter-spacing:.15em; margin-bottom:.2rem; }
.chapters [aria-current="step"] { background:var(--green); color:var(--on-green); border-color:var(--green); }
.card { padding:1.5rem; border:1px solid var(--line); border-radius:15px; background:var(--card); margin:1rem 0; }
summary { font-weight:650; cursor:pointer; min-height:30px; }
.transcript article { border-top:1px solid var(--line); padding:1.2rem 0 .3rem; }
.transcript h3 { font-size:1.3rem; }
fieldset { border:0; padding:0; margin:0 0 1.1rem; min-width:0; }
legend { font:400 1.55rem/1.3 Georgia,serif; margin-bottom:1.2rem; }
#options { display:grid; gap:.65rem; }
#options label { display:flex; align-items:flex-start; gap:.65rem; border:1px solid var(--line); border-radius:10px; padding:.7rem .9rem; cursor:pointer; }
#options label:has(input:checked) { background:color-mix(in srgb,var(--green) 12%,var(--card)); border-color:var(--green); }
#options input { margin-top:.4rem; accent-color:var(--green); min-width:18px; min-height:18px; }
#feedback { min-height:1.5em; }
.reflection-choices { display:flex; flex-wrap:wrap; gap:1rem; }
#reflection-answer { padding:.8rem 0; min-height:3rem; font-family:Georgia,serif; font-size:1.3rem; }
ol { padding-left:1.4rem; } li { padding:.45rem 0; }
footer { padding:2.2rem 0; font-size:.88rem; color:var(--muted); }
@media(max-width:640px) { .masthead { padding:1rem; align-items:flex-start; }.badge{max-width:130px;font-size:.52rem;}.brand{font-size:1.1rem;}main{padding:0 1rem;}section{padding:2.4rem 0;}.intro{padding:2.5rem 0;}h1{font-size:2.55rem;}.section-heading{display:block;}.section-heading>span{display:block;margin-top:1rem;}.chapters{grid-template-columns:repeat(2,minmax(0,1fr));}.card{padding:1rem;}.frame-note{top:.5rem;left:.5rem;font-size:.48rem;}.scene-tag{left:.85rem;bottom:.6rem;}.scene-tag h3{font-size:1.3rem;}.scene-tag span{font-size:.55rem;}.captions{padding:1rem;min-height:143px;}.transport{gap:.5rem;}.transport button{flex:1 1 42%;font-size:.82rem;padding:.6rem;}.volume{width:100%;}.volume input{flex:1;}.lead{font-size:1rem;}.jump{gap:.7rem 1rem;} }
@media(prefers-reduced-motion:reduce) { html{scroll-behavior:auto;}#art{transform:none!important;will-change:auto;} }
@media print { .masthead,.intro,#story,#motion-plan,#quiz,#reflection,#sources,.jump,.skip,footer{display:none;}main{max-width:none;padding:0;}body{background:white;color:black;}section{border:0;} }