:root { color-scheme: light; --paper:#f7f5ef; --panel:#fffdf8; --ink:#14232a; --dim:#4e5c5f; --line:#b8b2a0; --water:#17606f; --error:#9c2f22; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font:17px/1.6 Arial,"Liberation Sans",system-ui,sans-serif; }
main { max-width:43rem; margin:0 auto; padding:2.5rem 1.25rem 2rem; }
header { margin-bottom:2rem; }
.brand { display:inline-flex; gap:.7rem; align-items:center; color:var(--ink); text-decoration:none; font:600 1.35rem Georgia,serif; }
.mark { width:1.6rem; height:1.6rem; background:var(--water); mask:url('/static/triskelion-bold.svg') center/contain no-repeat; }
h1,h2 { font-family:Georgia,"Times New Roman",serif; font-weight:500; line-height:1.2; text-wrap:balance; }
#reading { margin:1.5rem 0 .5rem; padding:1rem 0 0; border-top:1px solid var(--line); }
#reading h3,.alt-reading h3 { font-family:Georgia,"Times New Roman",serif; font-weight:500; font-size:1.05rem; margin:0 0 .5rem; }
#reading ul { list-style:none; padding:0; margin:0; }
#reading li + li,.alt-reading li + li,.timing-details li + li { margin-top:1rem; padding-top:1rem; border-top:1px solid var(--line); }
#reading p,.alt-reading p { margin:.3rem 0; }
.mindset { font-weight:600; }
.contact { font-size:.8rem; color:var(--dim); }
.timeline-controls { margin:.75rem 0 1.25rem; padding:.75rem; background:var(--panel); border:1px solid var(--line); border-radius:4px; }
.timeline-heading { font-weight:600; }
.timeline-controls label { margin:.5rem 0 0; }
.timeline-controls output { float:right; font-weight:400; }
.timeline-controls input[type=range] { padding:0; border:0; background:transparent; accent-color:var(--water); cursor:pointer; }
.timeline-axis { display:flex; justify-content:space-between; gap:1rem; font-size:.75rem; color:var(--dim); }
.timeline-curve { display:block; width:100%; height:92px; margin:.5rem 0 0; }
.timeline-path { fill:none; stroke:var(--water); stroke-width:2.5; vector-effect:non-scaling-stroke; }
.timeline-baseline { stroke:var(--line); stroke-width:1; }
.timeline-cursor { stroke:var(--dim); stroke-dasharray:3 3; }
.timeline-dot { fill:var(--water); }
.alt-reading ul,.timing-details ul { list-style:none; padding:0; }
h1 { font-size:clamp(2rem,6vw,3rem); margin:1.5rem 0 .8rem; }
h2 { font-size:clamp(1.6rem,5vw,2.25rem); margin:.5rem 0 1.2rem; }
p { margin:.75rem 0; }
.intro { color:var(--dim); }
a { color:var(--water); text-underline-offset:.18em; }
button,input,select { font:inherit; }
button,input,select,summary { touch-action:manipulation; }
button { cursor:pointer; padding:.7rem 1.1rem; background:var(--water); color:white; border:1px solid var(--water); border-radius:4px; min-height:46px; font-weight:600; }
button:disabled { cursor:wait; opacity:.65; }
.secondary { background:transparent; color:var(--water); }
.text-button { background:transparent; border:0; color:var(--water); text-decoration:underline; text-underline-offset:.2em; padding:.35rem 0; font-weight:400; }
summary { cursor:pointer; padding:.75rem 0; font-weight:600; }
summary::marker { color:var(--water); }
#setup { border-top:3px double var(--line); border-bottom:1px solid var(--line); padding:.5rem 0; }
#setup > summary { font-size:1rem; }
form { padding:.5rem 0 1.2rem; }
.group { border-bottom:1px solid var(--line); padding:.5rem 0; }
fieldset { border:0; padding:0 0 .8rem; margin:0; min-width:0; }
label { display:block; margin:.8rem 0; font-size:.94rem; font-weight:550; }
input:not([type=radio]):not([type=checkbox]),select { display:block; margin-top:.35rem; width:100%; max-width:100%; min-width:0; padding:.6rem .65rem; min-height:46px; border:1px solid #89928c; background:var(--panel); color:var(--ink); border-radius:4px; }
input[type=checkbox],input[type=radio] { width:1.1rem; height:1.1rem; accent-color:var(--water); flex-shrink:0; }
.choice label,.check { display:flex; align-items:center; gap:.55rem; font-weight:400; }
.choice { margin:1rem 0; }
.pair { display:grid; grid-template-columns:1fr 1fr; gap:1rem; align-items:end; }
.pair .check { min-height:46px; }
.remember { margin-top:1.5rem; }
.hint { color:var(--dim); font-size:.875rem; line-height:1.55; }
.error { color:var(--error); font-size:.94rem; }
[aria-invalid=true] { border-color:var(--error)!important; }
.message { padding:.8rem 1rem; background:var(--panel); border-left:3px solid var(--water); }
#status:empty,#date-range-status:empty { display:none; }
#status { color:var(--dim); }
#result { padding:2rem 0 1.5rem; }
.has-result header { margin-bottom:1rem; }
.has-result header h1,.has-result header .intro { display:none; }
#result h2 { margin-bottom:.25rem; }
.session-time { font-size:clamp(1.5rem,5vw,2rem); line-height:1.3; margin:.25rem 0; }
#result-duration { margin-top:.4rem; }
#result-updated { margin-top:1.25rem; }
#place-suggestions { list-style:none; padding:0; margin:.25rem 0; border:1px solid #89928c; border-radius:4px; background:var(--panel); max-height:17rem; overflow-y:auto; }
#place-suggestions li { padding:.6rem .75rem; cursor:pointer; line-height:1.4; }
#place-suggestions li + li { border-top:1px solid var(--line); }
#place-suggestions li[aria-selected=true],#place-suggestions li:hover { background:#e5eeeb; }
#place-suggestions small { display:block; color:var(--dim); }
.eyebrow { color:var(--water); font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; }
.reason { font-size:1.12rem; }
.disclosures { margin-top:1.5rem; border-top:1px solid var(--line); }
.disclosures details { border-bottom:1px solid var(--line); padding:.25rem 0 .5rem; }
.alternative { padding:.5rem 0; }
.alternative + .alternative { border-top:1px solid var(--line); }
.alternative p { margin:.4rem 0; }
.personal-comparison { font-weight:600; color:var(--water); }footer { margin-top:1.5rem; padding-top:1rem; border-top:1px solid var(--line); font-size:.875rem; color:var(--dim); }
footer summary { font-weight:400; color:var(--water); }
pre { white-space:pre-wrap; overflow-wrap:anywhere; font:inherit; font-size:.8rem; }
ul { padding-left:1.4rem; }
:focus-visible { outline:3px solid var(--water); outline-offset:4px; }
[hidden] { display:none!important; }
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
@media(max-width:420px) { main { padding:1.5rem 1rem; } .pair { grid-template-columns:1fr; gap:0; } }
@media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; } }