:root{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;color:#363d35;background:#ebe9e5;font-synthesis:none;--accent:#db5434;--muted:#7a8174}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:transparent}
button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
[hidden]{display:none!important}
svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
#experience{position:relative;width:100%;height:100%;height:100svh;min-height:320px;isolation:isolate}
#scene,canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#scene{cursor:grab;background:radial-gradient(ellipse at 50% 48%,#f0efeb,#ebe9e5 70%)}
#scene:not(.live){pointer-events:none}
canvas{touch-action:none;outline:none;opacity:0;transition:opacity 350ms cubic-bezier(.2,.7,.2,1)}
#scene.live canvas{opacity:1}
.wordmark{position:absolute;top:max(32px,env(safe-area-inset-top));left:max(36px,env(safe-area-inset-left));font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:22px;letter-spacing:-1px;font-weight:700;color:#172b29;text-decoration:none;line-height:1.4;z-index:4}
.simulation{position:absolute;right:max(29px,env(safe-area-inset-right));top:max(28px,env(safe-area-inset-top));min-width:52px;min-height:44px;font-size:11px;letter-spacing:.1px;color:#6f766b;padding:10px;z-index:6;transition:color .2s;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.simulation-info{position:absolute;right:max(88px,calc(env(safe-area-inset-right) + 59px));top:max(28px,env(safe-area-inset-top));width:40px;height:44px;padding:12px;color:#8a9087;z-index:6}
.simulation-info svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round}
.simulation-info:hover{color:#253d33}
.simulation:hover{color:#253d33}
.note{position:absolute;right:34px;top:78px;width:245px;padding:18px 34px 18px 20px;background:#f6f5f0f5;box-shadow:0 12px 42px #262c2112;border:1px solid #ffffffb0;border-radius:14px;z-index:7;font-size:12px;line-height:1.6;color:#676e61}
.note p{margin:0}.note>button{position:absolute;right:3px;top:3px;width:30px;height:30px;font-size:20px;color:#828877}
.reticle{position:absolute;inset:20% 15% 24%;pointer-events:none;opacity:calc(var(--space-amount,0)*.6)}
.reticle i{position:absolute;width:13px;height:13px;border-color:#a9b0a233;border-style:solid}
.reticle i:nth-child(1){left:0;top:0;border-width:1px 0 0 1px}.reticle i:nth-child(2){right:0;top:0;border-width:1px 1px 0 0}.reticle i:nth-child(3){left:0;bottom:0;border-width:0 0 1px 1px}.reticle i:nth-child(4){right:0;bottom:0;border-width:0 1px 1px 0}
.controls{position:absolute;bottom:max(34px,calc(env(safe-area-inset-bottom) + 15px));left:50%;transform:translateX(-50%);width:100px;display:flex;align-items:center;padding:5px;isolation:isolate;opacity:0;visibility:hidden;transition:opacity .6s;--transport-open:1}
.controls::before{content:"";position:absolute;z-index:-1;inset:0 auto 0 0;width:calc(100px + 91px * var(--transport-open));border:1px solid #ffffffb0;border-radius:32px;background:#f7f7f2b8;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:0 5px 25px #33392c08;pointer-events:none}
.scene-ready .controls{opacity:1;visibility:visible}
.view-switch{display:flex;gap:2px}.view-switch button{width:44px;height:44px;padding:10px;border-radius:50%;color:#7d8577;transition:background .35s,color .35s,box-shadow .35s}
.view-switch .active{color:#40523c;background:#fffef9;box-shadow:0 1px 6px #303b2112}
.view-switch button:hover{color:#33482f}.view-switch svg{width:24px;height:24px;stroke-width:1.25}.pupil{fill:currentColor;stroke:none}
.transport{position:absolute;left:100px;top:5px;display:flex;align-items:center;gap:2px;width:91px;overflow:hidden;opacity:var(--transport-open);clip-path:inset(0 calc((1 - var(--transport-open)) * 100%) 0 0);transform:translateX(calc((1 - var(--transport-open)) * -6px));pointer-events:none}
.transport-interactive .transport,.controls:has(:focus-visible) .transport{pointer-events:auto}
.icon-button{flex-shrink:0;width:40px;height:44px;border-radius:50%;display:grid;place-items:center;transition:background .2s}
.icon-button:hover{background:#ffffff99}.icon-button svg{width:17px;height:17px;color:#7d8774}
.divider{flex-shrink:0;width:1px;height:17px;background:#cad0bf80;margin:0 4px}
.direction{position:absolute;left:0;top:0;display:grid;grid-template-columns:auto auto;align-items:center;column-gap:4px;text-align:left;color:#46543b;max-width:176px;transform-origin:center center;will-change:transform;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .22s;z-index:3}
.direction[data-visible="true"]{opacity:1;visibility:visible;pointer-events:auto}
.object-copy{display:flex;flex-direction:column;align-items:flex-start;gap:4px;grid-column:1;white-space:nowrap;text-shadow:0 1px 8px #f6f5ef}
#object-name{font-size:11px;line-height:1.25;font-weight:500;letter-spacing:.15px}
#relative,#placement-age{font-size:9px;line-height:1.3;color:#929787;letter-spacing:.2px}
.direction button{color:#7a8470;border-radius:50%;width:28px;height:28px;font-size:16px;opacity:0;transition:opacity .2s,background .2s}
.direction:hover button,.direction:focus-within button{opacity:1}.direction button:hover{background:#fff9}
.direction #clear-selection{grid-column:2;grid-row:1}.direction #read-book{width:auto;height:25px;grid-column:1;grid-row:2;border-radius:0;margin:3px 0 0;padding:0;font-size:10px;letter-spacing:.15px;justify-self:start;opacity:.65}
.bearing{display:none}
.object-picker{position:absolute;left:36px;bottom:40px;display:flex;gap:3px;z-index:5}
.object-picker button{border-radius:50%;width:44px;height:44px;display:grid;place-items:center;color:#8c9482;transition:color .2s,background .2s}
.object-picker button:hover{background:#ffffff75;color:#435138}.object-picker button.selected{background:#fffaf08a;color:var(--accent)}.object-picker svg{width:17px;height:17px;stroke-width:1.3;pointer-events:none}
.object-picker:not(:focus-within){width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;pointer-events:none}
.object-picker:focus-within{padding:5px;border:1px solid #ffffff95;border-radius:28px;background:#f7f7f2ed;backdrop-filter:blur(20px)}
.object-picker:focus-within button:focus-visible{outline-offset:1px}
#loading{position:absolute;inset:0;pointer-events:none;display:grid;place-items:center;transition:opacity .3s}
#loading svg{width:28px;height:28px;color:#7f8a74;stroke-width:.7;animation:breathe 1.8s ease-in-out infinite}
#loading.ready{opacity:0}
#failure{position:absolute;inset:0;display:grid;place-content:center;text-align:center;background:radial-gradient(ellipse at 50% 48%,#f0efeb,#ebe9e5 70%);color:#747d6c;font-size:12px;z-index:2}
#failure p{margin:0 0 10px}#failure button{justify-self:center;padding:12px;text-decoration:underline;text-underline-offset:4px;color:#52644a}
button:disabled{cursor:progress;opacity:.4}
@keyframes breathe{0%,100%{opacity:.3;transform:scale(.94)}50%{opacity:.75;transform:scale(1)}}
@media(max-width:600px){.wordmark{left:23px;top:27px}.simulation{right:14px;top:21px}.simulation-info{right:73px;top:21px}.controls{bottom:max(24px,calc(env(safe-area-inset-bottom) + 12px))}.object-picker{left:50%;transform:translateX(-50%);bottom:99px;gap:5px}.note{right:23px;top:68px;width:225px}.reticle{inset:25% 5% 28%}.direction{max-width:144px}.direction button{width:24px}.direction #clear-selection{opacity:.55}.object-copy{gap:3px}#object-name{font-size:10px}#relative,#placement-age{font-size:8px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
#book-reader{width:min(760px,calc(100vw - 40px));max-height:calc(100svh - 48px);padding:0;border:1px solid #d7d7ca;border-radius:5px;background:#f1eee2;color:#2b3c34;box-shadow:0 24px 100px #222c2238;overflow:auto}
#book-reader::backdrop{background:#e2e3dcd4;backdrop-filter:blur(7px)}
#close-book-reader{position:absolute;right:12px;top:10px;width:36px;height:36px;font-size:24px;color:#687364;border-radius:50%;z-index:1}
#close-book-reader:hover{background:#dbdfd08a}
.reading-spread{display:grid;grid-template-columns:1fr 1fr}
.reading-spread article{position:relative;min-height:440px;padding:54px 40px 60px;background:linear-gradient(90deg,#f1eee2 92%,#e3e0d2)}
.reading-spread article+article{border-left:1px solid #d0d2c4;background:linear-gradient(90deg,#e3e0d2,#f1eee2 8%)}
.page-heading,.page-number{font-size:9px;letter-spacing:1.2px;text-transform:uppercase;color:#687364}
.reading-spread h2{font:normal 44px Georgia,serif;letter-spacing:-1px;margin:55px 0 8px}
.part-of-speech{font:italic 14px Georgia,serif;color:#687364;margin:0 0 28px;padding-bottom:25px;border-bottom:1px solid #bbc2b1}
.definition-copy{font:18px/1.6 Georgia,serif;margin:0 0 20px}
.reading-spread a{font:10px/1.5 Arial,sans-serif;color:#52664e;text-underline-offset:3px}
.page-number{position:absolute;bottom:24px;left:40px}
@media(max-width:600px){.reading-spread{grid-template-columns:1fr}.reading-spread article{min-height:0;padding:32px 28px 60px}.reading-spread article+article{border-left:0;border-top:1px solid #d0d2c4}.reading-spread h2{margin-top:28px;font-size:40px}.page-number{left:28px}}