/* The same data, dressed for each of the four art directions. */
:root{--ease-out:cubic-bezier(.23,1,.32,1);--ease-in-out:cubic-bezier(.77,0,.175,1)}
.progress-banner{display:flex;gap:20px;align-items:center;padding:14px 18px;background:#edf2ff;border:1px solid var(--line);border-radius:10px;font-size:11px}.progress-banner>span{font-weight:800;letter-spacing:1px;color:var(--blue);flex-shrink:0}.progress-banner p{font-size:11px;flex:1}.progress-banner a{font-weight:700;color:var(--blue);white-space:nowrap}.progress-intro{display:flex;align-items:center;justify-content:space-between;min-height:290px;gap:28px;padding:26px 0 14px}.progress-intro h1{font-family:var(--display);font-size:clamp(40px,4.4vw,65px);letter-spacing:-2px;line-height:1.04}.progress-intro h1 em{color:var(--blue);font-style:normal}.progress-intro p{margin-top:14px}.progress-intro-meta{display:flex;gap:22px;font-size:9px;letter-spacing:1px;font-weight:700;color:var(--muted);margin-top:26px}.progress-mascot{position:relative;align-self:stretch;width:240px;flex-shrink:0;overflow:visible;background:radial-gradient(ellipse at center,#dfeaff 0,transparent 67%)}.progress-mascot img{position:absolute;height:100%;width:100%;object-fit:contain;top:0;left:0;transform:rotate(3deg);filter:drop-shadow(0 12px 8px #153bec12)}.progress-mascot span{position:absolute;bottom:28px;right:0;padding:9px 12px;background:var(--blue);color:#fff;font-size:10px;font-weight:700;letter-spacing:1px;transform:rotate(-7deg)}.progress-toolbar{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:8px 0 22px}.progress-ranges{display:flex;gap:3px;padding:4px;border:1px solid var(--line);border-radius:10px;background:#fff}.progress-ranges button{padding:9px 18px;color:var(--muted);background:transparent;border-radius:7px;font-size:12px;font-weight:600}.progress-ranges button[aria-pressed=true]{background:var(--blue);color:#fff}.progress-period{display:flex;align-items:center;gap:10px;font-size:11px;color:var(--muted)}.progress-period select{max-width:260px;padding:11px;font-size:11px}.progress-metrics{display:grid;grid-template-columns:repeat(4,1fr);margin-bottom:24px;border:1px solid var(--line);border-radius:14px;background:white}.progress-metrics article{padding:22px 24px;border-right:1px solid var(--line)}.progress-metrics article:last-child{border:0}.progress-metrics article>span{font-size:11px;font-weight:600;color:var(--muted)}.progress-metrics strong{display:block;font:600 38px/1.25 var(--display);letter-spacing:-1px;color:var(--deep);margin:8px 0}.progress-metrics p{font-size:10px}.progress-top-grid{display:grid;grid-template-columns:minmax(0,2.5fr) minmax(245px,1fr);gap:22px;margin-bottom:22px}.progress-card{padding:24px 24px 15px;background:white;border:1px solid var(--line);border-radius:14px;min-width:0;overflow:hidden}.progress-card-heading{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}.progress-card-heading .eyebrow{font-size:9px;display:block;letter-spacing:1.2px;margin-bottom:12px}.progress-card-heading h2,.progress-inspector h2{font:600 27px/1.15 var(--display);letter-spacing:-.5px}.progress-card-heading p{font-size:11px;margin-top:8px;max-width:440px}.chart-source{font-size:8px;letter-spacing:1.2px;font-weight:700;color:var(--muted);border:1px solid var(--line);border-radius:20px;padding:5px 8px}.progress-chart{height:235px;width:100%;margin-top:18px}.chart-elo{height:300px;margin-top:26px}.chart-key{display:flex;gap:18px;font-size:10px;color:var(--muted);flex-wrap:wrap;padding:10px 0 4px}.chart-key span{display:flex;align-items:center;gap:7px}.chart-key i{display:inline-block;width:15px;height:3px;background:var(--blue)}.chart-key .key-dashed{background:transparent;border-top:2px dashed #8295ba;height:0}.chart-key .key-loss{height:7px;background:repeating-linear-gradient(45deg,#b7c8ee,#b7c8ee 3px,#dbe5fa 3px,#dbe5fa 5px)}.progress-inspector{position:relative;overflow:hidden;padding:24px 22px;background:#eaf0ff;border:1px solid var(--line);border-radius:14px}.progress-inspector>label{display:block;font-size:10px;color:var(--muted);margin:22px 0 8px}.progress-inspector select{width:100%;font-size:11px;position:relative;z-index:1}.observation-rating{font:600 42px var(--display);margin-top:18px;color:var(--blue)}.observation-rating span{font:700 10px 'DM Sans',sans-serif;letter-spacing:1px}.observation-change{font-size:14px;font-weight:700;margin-top:3px;color:var(--deep)}.observation-change span{font-size:10px;font-weight:400;color:var(--muted)}.progress-inspector dl{font-size:11px;margin:18px 0}.progress-inspector dl>div{display:flex;justify-content:space-between;border-top:1px solid #cedaf1;padding:9px 0}.progress-inspector dd{margin:0;font-weight:700}.progress-inspector .small{font-size:9px;line-height:1.7}.inspector-art{display:flex;align-items:center;justify-content:space-between;min-height:140px;margin:18px 0 0;padding:8px 0}.inspector-art img{flex-shrink:0;width:105px;height:105px;object-fit:contain;transform:rotate(-8deg)}.inspector-art span{font:600 19px/1 var(--display);color:var(--blue);transform:rotate(4deg);margin-right:10px}.progress-two{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-bottom:22px}.progress-method{display:flex;gap:18px;padding:24px 0;max-width:930px}.progress-method>span{font:500 34px var(--display);color:var(--blue)}.progress-method h3{font-size:13px;margin-bottom:6px}.progress-method p{font-size:11px}.progress-table{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0}.progress-table summary{font-size:12px;cursor:pointer;font-weight:700}.progress-table summary span{float:right;font-weight:400;color:var(--muted)}.progress-table table{margin-top:16px;min-width:670px;background:#fff}.progress-table caption{text-align:left;font-size:11px;padding:10px 0;color:var(--muted)}.progress-first{padding:28px;border:1px dashed var(--blue);border-radius:12px;margin-bottom:22px;background:#f3f7ff}.progress-first>span{color:var(--blue);font-size:24px}.progress-first h2{font-family:var(--display);margin:10px 0}.progress-first p{max-width:620px;font-size:12px;margin-bottom:16px}.progress-cta{margin-top:16px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}.progress-cta a{color:var(--blue);font-weight:700;font-size:12px}.progress-cta a:last-child{font-size:11px;color:var(--muted)}
body[data-design=brutal] :is(.progress-card,.progress-inspector,.progress-metrics,.progress-banner,.progress-ranges,.progress-ranges button,.progress-first){border-radius:0;border-color:var(--deep)}body[data-design=brutal] .progress-card{box-shadow:4px 4px 0 #163bec12}body[data-design=brutal] .progress-intro h1{text-transform:uppercase;font-size:78px;line-height:.9}body[data-design=brutal] .chart-source{border-radius:0}body[data-design=brutal] .progress-inspector{background:var(--blue);color:#fff}body[data-design=brutal] .progress-inspector :is(h2,.eyebrow,.small,dt,dd,.observation-rating,.observation-change,.observation-change span,.inspector-art span,label){color:white}body[data-design=cinema] .progress-intro h1 em{font-style:italic}body[data-design=cinema] .progress-card,body[data-design=cinema] .progress-metrics{border-radius:3px}body[data-design=cinema] .progress-mascot img{transform:none}body[data-design=toy] .progress-card,body[data-design=toy] .progress-inspector,body[data-design=toy] .progress-metrics{border-radius:24px}body[data-design=toy] .progress-card{box-shadow:0 5px 0 #dae6fa}body[data-design=toy] .progress-ranges{border-radius:30px}body[data-design=toy] .progress-ranges button{border-radius:25px}
@media(max-width:1000px){.progress-top-grid{grid-template-columns:minmax(0,1.8fr) minmax(230px,1fr)}.progress-card{padding:20px 16px 14px}.progress-metrics article{padding:18px}.progress-metrics strong{font-size:32px}.progress-banner{gap:10px}.progress-banner p{display:none}.progress-banner a{margin-left:auto}}
@media(max-width:760px){.progress-top-grid,.progress-two{grid-template-columns:1fr}.progress-inspector{display:grid;grid-template-columns:1fr 1fr;column-gap:24px;align-items:start}.progress-inspector>.eyebrow,.progress-inspector>h2{grid-column:1/-1}.progress-inspector #progress-detail{grid-column:2;grid-row:3/6}.progress-inspector .inspector-art{height:140px}.progress-inspector .inspector-art span{display:none}.progress-mascot{width:160px}.progress-mascot img{left:0;width:100%;height:100%;top:0}.progress-intro h1{font-size:46px}.progress-intro-meta{flex-direction:column;gap:8px;margin-top:18px}.progress-toolbar{align-items:flex-start;flex-wrap:wrap}.progress-period{margin-left:auto}.progress-metrics{grid-template-columns:1fr 1fr}.progress-metrics article:nth-child(2){border-right:0}.progress-metrics article:nth-child(-n+2){border-bottom:1px solid var(--line)}.progress-metrics strong{font-size:35px}.progress-intro{gap:0}.progress-banner{font-size:9px}.progress-banner>span{letter-spacing:.3px}}
@media(max-width:480px){.progress-banner{align-items:flex-start;flex-direction:column;gap:7px}.progress-banner a{margin-left:0}.progress-intro{position:relative;padding:30px 0 20px;min-height:260px}.progress-intro>div:first-child{position:relative;z-index:1;max-width:100%}.progress-intro h1{font-size:36px;letter-spacing:-1.5px}.progress-intro p{font-size:12px;max-width:230px}.progress-intro .eyebrow{font-size:8px;max-width:205px}.progress-mascot{position:absolute;right:-8px;bottom:0;height:100px;width:82px}.progress-mascot img{width:82px;height:100px;left:0;top:0}.progress-mascot span{display:none}.progress-intro-meta{font-size:8px;max-width:220px}.progress-ranges{width:100%}.progress-ranges button{flex:1;padding:10px 8px;font-size:11px}.progress-period{width:100%;justify-content:space-between}.progress-period select{max-width:calc(100% - 50px);flex:1}.progress-metrics article{padding:16px 12px}.progress-metrics p{font-size:9px}.progress-metrics article>span{font-size:10px}.progress-card{padding:20px 12px 12px}.progress-card-heading h2{font-size:26px}.chart-source{font-size:7px;padding:5px}.chart-elo{height:260px}.progress-inspector{display:block}.progress-inspector .inspector-art{display:none}.progress-table summary{font-size:11px}.progress-table summary span{float:none;display:block;margin:8px 0 0 15px}body[data-design=brutal] .progress-intro h1{font-size:52px}}
/* Small responses keep the dashboard alive without moving the data under your cursor. */
.progress-ranges{position:relative;isolation:isolate}.range-indicator{position:absolute;left:4px;top:4px;bottom:4px;width:100px;z-index:-1;transform-origin:left center;border-radius:7px;background:var(--blue);transition:transform 250ms var(--ease-out);pointer-events:none}.progress-ranges button{transition:color 160ms ease,transform 160ms var(--ease-out);background:transparent!important}.progress-ranges button[aria-pressed=true]{color:white}.progress-ranges button:active{transform:scale(.95)}
.progress-metrics article{position:relative;transition:background-color 200ms ease}.progress-metrics article:after{content:'↗';position:absolute;right:18px;top:18px;color:var(--blue);opacity:0;transform:translate(-5px,5px);transition:opacity 200ms ease,transform 200ms var(--ease-out)}.progress-metrics strong,.observation-rating,.observation-change{font-variant-numeric:tabular-nums}.progress-card{transition:border-color 200ms ease,box-shadow 200ms ease}.progress-card-heading .eyebrow{transition:letter-spacing 200ms ease}.progress-card-heading h2{transition:color 200ms ease}.progress-inspector{transition:border-color 200ms ease}.progress-inspector:focus-within{border-color:var(--blue)}.progress-inspector select,.progress-period select{transition:border-color 160ms ease,box-shadow 160ms ease}.progress-inspector select:focus,.progress-period select:focus{box-shadow:0 0 0 4px #1d54ef12}
.progress-gap-toggle{display:flex;align-items:center;gap:9px;font-size:11px;color:var(--deep);margin:-6px 0 22px;width:fit-content;cursor:pointer}.progress-gap-toggle input{position:absolute;opacity:0;width:1px;height:1px}.gap-switch{position:relative;display:inline-block;width:30px;height:18px;border-radius:20px;background:#d8e2f4;transition:background-color 160ms ease;flex-shrink:0}.gap-switch:after{content:'';position:absolute;left:3px;top:3px;height:12px;width:12px;border-radius:50%;background:white;box-shadow:0 1px 3px #13356b25;transition:transform 200ms var(--ease-out)}.progress-gap-toggle input:checked+.gap-switch{background:var(--blue)}.progress-gap-toggle input:checked+.gap-switch:after{transform:translateX(12px)}.progress-gap-toggle input:focus-visible+.gap-switch{outline:3px solid var(--blue);outline-offset:3px}.progress-gap-toggle .small{font-size:10px;color:var(--muted);margin-left:3px}.chart-key .key-bridge{background:none;border-top:2px dashed var(--blue);height:0;opacity:.65}.chart-key .key-unknown{height:10px;background:repeating-linear-gradient(-45deg,#e9eef9,#e9eef9 3px,#a9bbdf 3px,#a9bbdf 4px);border:1px solid #d9e2f2}.progress-table summary{transition:color 160ms ease}.progress-table summary span{transition:transform 200ms var(--ease-out)}.progress-table[open] summary span{transform:translateY(2px)}
button.progress-mascot{padding:0;border:0;color:var(--blue);appearance:none;cursor:pointer;transition:transform 200ms var(--ease-out)}.progress-mascot img{animation:float-character 5s ease-in-out infinite}.progress-mascot>span{transition:transform 200ms var(--ease-out)}.progress-mascot .mascot-spark{position:absolute;font-style:normal;font-size:30px;color:var(--blue);opacity:.65;pointer-events:none;animation:progress-spark 4s ease-in-out infinite}.progress-mascot .spark-one{left:14px;top:24px}.progress-mascot .spark-two{right:3px;top:90px;font-size:20px;animation-delay:-2s}.progress-banner>span:before{content:'';display:inline-block;width:5px;height:5px;background:var(--blue);border-radius:50%;margin-right:7px;animation:progress-status 3s ease-in-out infinite}
[data-design=brutal] .progress-mascot img{animation:brutal-idle 7s steps(2,end) infinite}[data-design=brutal] .range-indicator{border-radius:0}[data-design=cinema] .progress-mascot img{animation:cinema-idle 8s ease-in-out infinite}[data-design=cinema] .progress-mascot .mascot-spark{font-size:18px;opacity:.3}[data-design=toy] .progress-mascot img{animation:toy-idle 5s ease-in-out infinite}[data-design=toy] .range-indicator{border-radius:25px}
@keyframes progress-spark{0%,100%{transform:rotate(-12deg) scale(.8);opacity:.3}50%{transform:rotate(12deg) scale(1);opacity:.7}}@keyframes progress-status{0%,100%{opacity:.35}50%{opacity:1}}
@media(hover:hover) and (pointer:fine){.progress-ranges button:not([aria-pressed=true]):hover{color:var(--blue)}.progress-metrics article:hover{background:#edf3ff70}.progress-metrics article:hover:after{opacity:1;transform:translate(0,0)}.progress-card:hover{border-color:#92ade5;box-shadow:0 7px 22px #183f8110}.progress-card:hover h2{color:var(--blue)}.progress-table summary:hover{color:var(--blue)}.progress-mascot:hover>span{transform:rotate(-3deg) translateY(-3px)}.progress-mascot:hover{transform:translateY(-3px)}.progress-banner a:hover,.progress-cta a:hover{color:var(--deep)}}
.progress-mascot:active{transform:scale(.97)}body.motion-off .progress-mascot,body.motion-off .progress-mascot img,body.motion-off .progress-ranges button:active{transform:none!important}body.motion-off .mascot-spark{opacity:.35}body.motion-off .progress-metrics article:after{transform:none}
@media(max-width:760px){.progress-gap-toggle{flex-wrap:wrap}.progress-gap-toggle .small{display:none}}
@media(max-width:480px){button.progress-mascot{z-index:2}.progress-mascot .mascot-spark{font-size:17px}.progress-mascot .spark-one{left:0;top:12px}.progress-mascot .spark-two{right:0;top:48px;font-size:13px}}
@media(prefers-reduced-motion:reduce){.progress-mascot,.progress-mascot img,.progress-ranges button:active,.progress-metrics article:after{transform:none!important}}
/* Observation calendar: the date is the control, Elo is the context. */
.progress-date-picker{margin-top:22px;min-width:0}.calendar-control-label{display:block;font-size:9px;letter-spacing:1.1px;font-weight:700;color:var(--muted);margin-bottom:9px}.calendar-trigger{display:flex;align-items:center;gap:11px;width:100%;padding:12px;background:#fff;border:1px solid #cbd9f3;border-radius:12px;text-align:left;color:var(--deep);transition:border-color 180ms ease,box-shadow 180ms ease,transform 160ms var(--ease-out)}.calendar-trigger-icon{display:grid;place-items:center;width:37px;height:39px;flex-shrink:0;background:#edf3ff;border-radius:9px;color:var(--blue)}.calendar-trigger-icon svg{width:21px;height:21px}.calendar-trigger-copy{flex:1;min-width:0}.calendar-trigger-copy strong{display:block;font-size:12px;font-weight:700;white-space:nowrap}.calendar-trigger-copy>span{display:block;margin-top:5px;font-size:10px;color:var(--muted);white-space:nowrap}.calendar-trigger-copy i{font-style:normal;margin:0 3px}.calendar-chevron{font-size:20px;line-height:1;color:var(--blue);transition:transform 180ms var(--ease-out)}.calendar-trigger[aria-expanded=true]{border-color:var(--blue);box-shadow:0 0 0 3px #164fee10}.calendar-trigger[aria-expanded=true] .calendar-chevron{transform:rotate(180deg)}.calendar-trigger:disabled{cursor:default;opacity:.65}.calendar-trigger:active:not(:focus-visible){transform:none;background:#f5f8ff}
.observation-calendar{position:fixed;inset:auto;margin:0;padding:20px 16px 12px;width:352px;max-width:calc(100vw - 24px);overflow:auto;border:1px solid var(--line);border-radius:18px;background:#fff;color:var(--ink);box-shadow:0 18px 60px #14336e24,0 3px 12px #14336e0d;font:12px 'DM Sans',sans-serif;transform-origin:top center}.observation-calendar::backdrop{background:transparent}.calendar-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 5px 16px}.calendar-eyebrow{display:block;font-size:8px;letter-spacing:1.5px;font-weight:700;color:var(--blue);margin-bottom:6px}.calendar-heading h3{font:600 22px/1.1 var(--display);letter-spacing:-.5px;color:var(--deep)}.calendar-month-controls{display:flex;gap:5px}.calendar-month-controls button{display:grid;place-items:center;width:30px;height:30px;border:1px solid var(--line);border-radius:9px;background:white;color:var(--blue);font:24px/1 'DM Sans',sans-serif;transition:background-color 160ms ease,transform 160ms var(--ease-out)}.calendar-month-controls button:disabled{cursor:default;opacity:.25}.calendar-grid{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:3px 4px;font-size:12px}.calendar-grid th{padding:0 0 5px;background:none;text-align:center;text-transform:none;letter-spacing:0;font-size:9px;font-weight:600;color:var(--muted)}.calendar-grid td{padding:0;border:0;height:42px;text-align:center}.calendar-grid .calendar-blank{height:42px}.calendar-day{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:42px;width:100%;padding:3px 0;background:transparent;color:#a9b3c3;border:1px solid transparent;border-radius:9px;font-size:12px;font-weight:500;transition:background-color 160ms ease,color 160ms ease,transform 160ms var(--ease-out),border-color 160ms ease}.calendar-day small{font-size:8px;font-weight:500;font-variant-numeric:tabular-nums;color:inherit;opacity:.75;line-height:1}.calendar-day.recorded{background:#edf3ff;color:var(--deep)}.calendar-day.selected{background:var(--blue);color:#fff;border-color:var(--blue);box-shadow:0 3px 7px #154be822}.calendar-day.selected small{opacity:.9}.calendar-day[aria-disabled=true]{cursor:default}.calendar-day[aria-current=date]:not(.selected):after{content:'';position:absolute;right:4px;top:4px;width:3px;height:3px;background:var(--blue);border-radius:50%}.calendar-legend{display:flex;justify-content:space-between;align-items:center;gap:6px;margin:13px 6px 0;font-size:9px;color:var(--muted)}.calendar-legend span:first-child{display:flex;align-items:center;gap:6px}.calendar-legend i{width:7px;height:7px;border-radius:2px;background:#edf3ff;border:1px solid #b9cbee}.calendar-bottom{display:flex;justify-content:space-between;align-items:center;gap:6px;border-top:1px solid var(--line);margin:14px 5px 0;padding-top:10px;font-size:9px;color:var(--muted)}.calendar-bottom button{padding:6px 0 6px 8px;background:none;color:var(--blue);font-size:10px;font-weight:700}.calendar-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
body[data-design=brutal] :is(.calendar-trigger,.calendar-trigger-icon,.observation-calendar,.calendar-month-controls button,.calendar-day){border-radius:0}body[data-design=brutal] .observation-calendar{border:2px solid var(--blue);box-shadow:5px 5px 0 #163bec20}body[data-design=brutal] .calendar-control-label{color:#dce5ff}body[data-design=cinema] .observation-calendar{border-radius:6px}body[data-design=cinema] .calendar-day.recorded{background:#eff3f8}body[data-design=cinema] .calendar-day.selected{background:var(--blue)}body[data-design=toy] .observation-calendar{border-radius:24px;box-shadow:0 18px 50px #20437720,0 5px 0 #d8e6fb}body[data-design=toy] .calendar-trigger{border-radius:16px}body[data-design=toy] .calendar-day{border-radius:12px}
@media(hover:hover) and (pointer:fine){.calendar-trigger:not(:disabled):hover{border-color:var(--blue);box-shadow:0 3px 10px #173d7910}.calendar-month-controls button:not(:disabled):hover{background:#edf3ff}.calendar-day.recorded:not(.selected):hover{background:#dce8ff;border-color:#a3baf0;transform:translateY(-1px)}.calendar-bottom button:hover{color:var(--deep)}}
.calendar-day.recorded:active:not(:focus-visible),.calendar-month-controls button:active:not(:focus-visible){transform:scale(.94)}
@media(max-width:760px){.progress-date-picker{grid-column:1;grid-row:3/5}.calendar-trigger{gap:8px;padding:10px}.calendar-trigger-icon{width:30px;height:36px}.calendar-trigger-copy strong{font-size:11px}.calendar-trigger-copy>span{font-size:9px}}
@media(max-width:480px){.calendar-trigger{padding:13px;gap:12px}.calendar-trigger-icon{width:38px;height:40px}.calendar-trigger-copy strong{font-size:13px}.calendar-trigger-copy>span{font-size:10px}.observation-calendar{padding:18px 12px 12px}.calendar-grid{border-spacing:2px 4px}}
body.motion-off .calendar-day,body.motion-off .calendar-trigger,body.motion-off .calendar-month-controls button{transform:none!important}@media(prefers-reduced-motion:reduce){.calendar-day,.calendar-trigger,.calendar-month-controls button{transform:none!important}}