:root { --paper:#f5f3ec; --ink:#101e35; --muted:#516176; --line:#c9d1d6; --blue:#17637e; --cyan:#26e0ff; --acid:#d9ff65; --navy:#081123; --mono:'SFMono-Regular',Consolas,'Liberation Mono',monospace; --display:Georgia,'Times New Roman',serif; --sans:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font:16px/1.5 var(--sans); }
a { color:inherit; }
.topbar,footer { display:flex; align-items:center; justify-content:space-between; padding:1rem max(1.4rem,calc((100vw - 1120px)/2)); background:var(--navy); color:#eaf4f6; }
.brand { display:inline-flex; align-items:center; gap:.65rem; color:inherit; text-decoration:none; font-weight:650; }
.brand-mark { display:grid; place-items:center; width:32px; height:32px; border:1px solid var(--cyan); color:var(--cyan); font:600 .72rem var(--mono); }
.back { color:#c4d8dc; text-decoration:none; font:500 .74rem var(--mono); text-transform:uppercase; letter-spacing:.06em; }
main { max-width:1050px; margin:auto; padding:4rem 2rem 3rem; }
.page-head { max-width:770px; margin:0 0 2rem; }
.eyebrow { margin:0 0 .7rem; font:500 .72rem var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--blue); }
h1,h2 { font-family:var(--display); font-weight:400; line-height:1.05; text-wrap:balance; }
h1 { margin:0 0 1rem; font-size:clamp(3rem,8vw,6rem); letter-spacing:-.045em; }
h1 em { color:#16708b; font-weight:400; }
.intro { max-width:66ch; margin:0; color:#405168; font-size:1.05rem; }
.notice { padding:1rem 1.2rem; border-left:4px solid #16708b; background:#e2ecec; color:#263b4f; font-size:.88rem; }
.notice strong { display:block; margin-bottom:.2rem; color:var(--ink); }
.workspace { display:grid; grid-template-columns:minmax(190px,250px) minmax(0,1fr); gap:2.5rem; align-items:start; padding:2.5rem 0; }
section { min-width:0; }
h2 { margin:0 0 1rem; font-size:1.65rem; }
label { display:block; font-size:.9rem; margin:0 0 4px; }
input,button,select { font:inherit; color:var(--ink); border:1px solid var(--line); border-radius:3px; background:#fffefa; min-height:44px; }
select { width:100%; padding:8px 10px; cursor:pointer; }
button { cursor:pointer; padding:7px 12px; }
button:hover { border-color:var(--blue); background:#e9eef3; }
button:focus-visible,select:focus-visible { outline:3px solid var(--blue); outline-offset:3px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.help,#status,.method-note,.risk-heading>p { color:var(--muted); font-size:.86rem; }
.help { margin:.5rem 0 0; }
.section-top { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; }
.section-top h2 { margin-bottom:.5rem; }
#clear { border:0; text-decoration:underline; text-underline-offset:4px; font-size:.82rem; background:transparent; }
.calendar { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:7px; }
.day { min-height:49px; padding:6px 0; font:500 .86rem var(--mono); font-variant-numeric:tabular-nums; }
.day[aria-pressed="true"] { background:var(--blue); color:#fff; border-color:var(--blue); }
.day[aria-pressed="true"]:hover { background:#104d64; }
#attendance-summary { margin-top:.7rem; }
.prediction { border-top:1px solid var(--line); padding-top:2rem; }
.risk-heading { display:flex; align-items:end; justify-content:space-between; gap:2rem; margin-bottom:1.1rem; }
.risk-heading h2 { margin:0; }
.risk-heading>p { max-width:42ch; margin:0 0 .15rem; }
#model-results { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.model-row { min-width:0; min-height:105px; padding:1rem; background:#e7ecea; border-top:2px solid #16708b; }
h3 { margin:0 0 .65rem; font-size:.87rem; font-weight:550; }
h3 span { color:var(--muted); margin-left:.25rem; font:500 .68rem var(--mono); }
output { font:400 2rem/1 var(--display); font-variant-numeric:tabular-nums; }
.model-details { margin-top:1rem; border-top:1px solid #c5cfcd; padding-top:.7rem; }
.model-details summary { cursor:pointer; color:#175e78; font:600 .68rem var(--mono); letter-spacing:.03em; }
.model-details summary:focus-visible { outline:3px solid var(--blue); outline-offset:3px; }
.model-details p { margin:.65rem 0; color:#46566a; font-size:.7rem; line-height:1.4; }
.model-details canvas { display:block; width:100%; height:190px; background:#f8f8f3; border:1px solid #d0d8d5; touch-action:none; cursor:grab; }
.model-details canvas:active { cursor:grabbing; }
.model-details p.settings { padding-top:.55rem; border-top:1px solid #c5cfcd; font-family:var(--mono); font-size:.64rem; }
#status { min-height:1.5em; margin:.9rem 0 0; }
#status.error { color:#923c23; }
.method-note { max-width:100ch; margin:1.5rem 0 0; }
footer { margin-top:1rem; font-size:.78rem; color:#c4d8dc; }
@media(max-width:680px) { main { padding:2.4rem 1.15rem; } .topbar,footer { padding:.9rem 1.15rem; } .workspace { grid-template-columns:1fr; gap:1.8rem; padding:1.8rem 0; } .calendar { gap:5px; } .day { min-height:44px; } .risk-heading { display:block; } .risk-heading>p { margin:.5rem 0 0; } #model-results { grid-template-columns:1fr; gap:.7rem; } .model-row { padding:.85rem; min-height:auto; } h3 { font-size:.85rem; min-height:0; } h3 span { display:inline; margin:.15rem; } output { font-size:1.7rem; } .model-details canvas { height:220px; } footer { align-items:flex-start; flex-wrap:wrap; gap:.7rem; } }
@media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto !important; } }