:root{--ink:#172832;--paper:#f6f0e3;--gold:#dcae57;--red:#a94b38;--blue:#dbeaec;--green:#dfe9d5;--shadow:0 16px 40px #10202b22}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.55 system-ui,-apple-system,sans-serif}button,input{font:inherit}button{cursor:pointer;border:1px solid #9c8b70;background:#fffaf0;color:var(--ink);padding:.65rem .9rem;border-radius:.55rem;font-weight:700}button:hover,button:focus-visible{outline:3px solid #e8b84e;outline-offset:2px}button:disabled{opacity:.45;cursor:not-allowed}header{height:74px;background:var(--ink);color:white;display:flex;align-items:center;justify-content:space-between;padding:0 max(18px,calc((100% - 1160px)/2));position:sticky;top:0;z-index:10}.brand{display:flex;gap:.7rem;align-items:center;color:white;text-decoration:none;font-family:Georgia,serif;letter-spacing:.08em}.brand b{display:grid;place-items:center;width:42px;height:42px;border:2px solid var(--gold);border-radius:50%;color:var(--gold);font-size:1.5rem}.brand small{display:block;font:11px system-ui;letter-spacing:.02em;color:#b9c7cc}header nav{display:flex;gap:.4rem}header nav button{color:white;background:#ffffff12;border-color:#ffffff40;padding:.45rem .7rem}main{min-height:calc(100vh - 125px)}footer{max-width:1160px;margin:auto;padding:1rem;color:#685f54;display:flex;justify-content:space-between}.hero{min-height:620px;background:linear-gradient(90deg,#132631ed 0 42%,transparent 70%),url(assets/atrium.png) center/cover;display:flex;align-items:center}.heroCopy{width:min(570px,92%);margin-left:max(4%,calc((100% - 1160px)/2));color:white;padding:2rem}.eyebrow{text-transform:uppercase;letter-spacing:.16em;color:var(--gold);font-weight:800;font-size:.78rem}.hero h1{font:clamp(2.7rem,7vw,5.5rem)/.95 Georgia,serif;margin:.3rem 0 1.2rem}.hero p{font-size:1.12rem}.primary{background:var(--gold);border-color:var(--gold);color:#1d2730;padding:.85rem 1.15rem}.layout{max-width:1160px;margin:0 auto;display:grid;grid-template-columns:240px 1fr;gap:2rem;padding:2rem 1rem}.sidebar{position:sticky;top:94px;align-self:start}.sidebar h2{font:1.5rem Georgia,serif}.progress{height:7px;border-radius:9px;background:#ddd4c3;overflow:hidden}.progress span{display:block;height:100%;background:var(--red)}.panel{background:#fffdf8;border:1px solid #dacdb6;border-radius:1rem;box-shadow:var(--shadow);overflow:hidden}.panelHead{padding:2rem 2.4rem 1rem;border-bottom:1px solid #e8ddca}.panelHead h1{font:clamp(2rem,4vw,3.2rem) Georgia,serif;margin:.2rem 0}.panelBody{padding:2rem 2.4rem}.learn{background:var(--blue);border-left:5px solid #477e89;padding:1rem 1.2rem;border-radius:.5rem;margin:1.2rem 0}.instruction{border:2px solid var(--gold);padding:1rem;border-radius:.7rem;background:#fff8df}.actions{display:flex;gap:.7rem;justify-content:flex-end;align-items:center;margin-top:1.5rem;flex-wrap:wrap}.route{display:grid;gap:.7rem}.route button{text-align:left;display:flex;justify-content:space-between}.route button.done{background:var(--green)}.route button.now{border:2px solid var(--red)}.wordGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.7rem}.word{padding:.8rem;border:1px solid #dbcdb5;border-radius:.6rem;background:white}.word b{font:1.25rem Georgia,serif;display:block}.word small{color:#70665a;display:block}.scene{min-height:360px;background:linear-gradient(#ffffff99,#ffffff99),url(assets/atrium.png) center/cover;border:1px solid #baaa90;border-radius:.8rem;padding:1rem;display:grid;grid-template-columns:1fr 1fr;gap:1rem}.zone{min-height:270px;border:3px dashed #8a7759;border-radius:.7rem;background:#fffaf0cc;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:.7rem}.zone img{max-height:185px;max-width:95%;object-fit:contain}.actors{display:flex;gap:.5rem;flex-wrap:wrap;margin:1rem 0}.actor{display:flex;align-items:center;gap:.4rem;padding:.35rem .6rem}.actor img{width:54px;height:58px;object-fit:contain}.verbRow{display:flex;gap:.5rem;flex-wrap:wrap}.chosen{background:#f2d99a!important;border-color:#8d641d!important}.feedback{padding:1rem;margin-top:1rem;border-radius:.6rem}.feedback.good{background:#dcebd7}.feedback.bad{background:#f3d6d0}.clue{border:2px solid var(--red);background:#fff1df;padding:1rem;margin-top:1rem;border-radius:.6rem}.sentence{font:1.65rem Georgia,serif;margin:1rem 0}.tokens{display:flex;gap:.55rem;flex-wrap:wrap}.token{min-width:100px}.roleButtons{display:flex;gap:.5rem;flex-wrap:wrap;margin:1rem 0}.roleButtons .active{background:var(--ink);color:white}.tag-sub{background:#dbead4}.tag-obj{background:#f3d9a6}.tag-pred{background:#d8e4f2}.repairBox{background:#f4e1dc;border-left:5px solid var(--red);padding:.8rem 1rem}.textAnswer{width:100%;padding:.8rem;border:2px solid #9d8d76;border-radius:.5rem}.arrowViz{display:flex;align-items:center;justify-content:center;gap:1rem;min-height:260px}.arrowViz .person img{height:170px;max-width:180px;object-fit:contain}.arrow{font-size:3rem;color:var(--red)}.notebook{background:#fffdf8;box-shadow:inset 0 0 0 1px #d3c5aa;padding:1.3rem;background-image:repeating-linear-gradient(transparent 0 30px,#dce5e6 31px)}table{border-collapse:collapse;width:100%}th,td{text-align:left;border:1px solid #b9aa90;padding:.5rem}.code{letter-spacing:.5em;font-size:2rem;width:min(100%,330px);padding:.7rem;text-align:center}.finish{text-align:center;padding:3rem;background:#e4ecd9;border-radius:.8rem}.mapPage{max-width:900px;margin:auto;padding:3rem 1rem}.mapPage h1{font:3rem Georgia,serif}.modalHead{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ddd;padding-bottom:.8rem}dialog{width:min(760px,92%);border:0;border-radius:1rem;box-shadow:0 20px 80px #0008;padding:1.2rem}dialog::backdrop{background:#0e1b24b8}@media(max-width:740px){header{height:auto;padding:.6rem}.brand small{display:none}.layout{display:block}.sidebar{position:static;margin-bottom:1rem}.panelBody,.panelHead{padding:1.2rem}.hero{background:linear-gradient(#132631dd,#132631cc),url(assets/atrium.png) center/cover}.scene{grid-template-columns:1fr}.zone{min-height:220px}.arrowViz .person img{height:115px}.arrow{font-size:2rem}}@media print{header,footer,.sidebar,.actions,button{display:none!important}.layout{display:block;padding:0}.panel{box-shadow:none;border:0}.panelHead{display:none}.panelBody{padding:0}.notebook{background:white;box-shadow:none}}
@media(max-width:420px){header{gap:.25rem}.brand{gap:.35rem;font-size:.9rem}.brand b{width:34px;height:34px}.brand small{display:none}header nav{gap:.2rem}header nav button{padding:.38rem .45rem;font-size:.82rem}}