/* Hallmark · macrostructure: paired icon proof sheets · tone: warm and playful · anchor hue: forest
 * system: EtudeSpark · nav: compact masthead · footer: recommendation note
 * pre-emit critique: P5 H4 E4 S5 R4 V4 */
*{box-sizing:border-box}
html,body{margin:0;overflow-x:clip}
html{scroll-behavior:smooth;scroll-padding-top:105px}
body{background:var(--color-paper);color:var(--color-ink);font:15px/1.5 var(--font-body);--tiny-size:22px;--ring-size:calc(var(--tiny-size) + 14px)}
.wrap{max-width:1240px;margin:auto;padding-inline:40px}
a{color:inherit;text-underline-offset:4px}
button,select{font:inherit;color:inherit;min-height:44px;cursor:pointer}
button,a,select{-webkit-tap-highlight-color:transparent}
button{border:1px solid var(--color-rule);background:transparent;border-radius:8px;padding:9px 14px;white-space:nowrap;transition:background var(--dur-fast) var(--ease-out)}
button:hover{background:var(--color-tint)}
button:active{transform:translateY(1px)}
:focus-visible{outline:3px solid var(--color-focus);outline-offset:4px}
button:disabled{opacity:.5;cursor:not-allowed}
select{border:1px solid var(--color-rule);border-radius:8px;background:var(--color-panel);padding:8px 30px 8px 12px}
.masthead{display:flex;align-items:center;justify-content:space-between;min-height:88px;font-size:12px;border-bottom:1px solid var(--color-rule)}
.masthead a{font-weight:700;text-decoration:none;letter-spacing:.025em}
.masthead span{color:var(--color-muted);font-weight:400}
.masthead a span{margin-left:12px}
.intro{display:flex;align-items:center;justify-content:space-between;gap:32px;padding-block:52px 40px}
.eyebrow{text-transform:uppercase;font-weight:600;letter-spacing:.14em;font-size:10px;color:var(--color-accent);margin:0 0 12px}
h1,h2,h3{font-family:var(--font-display);font-style:normal;font-weight:500;overflow-wrap:anywhere;min-width:0}
h1{font-size:clamp(48px,6vw,76px);letter-spacing:-.05em;line-height:1;margin:0 0 22px}
.lede{font-size:18px;line-height:1.6;color:var(--color-muted);margin:0}
.reference{display:flex;align-items:center;gap:20px;max-width:330px}
.reference-art{display:flex;align-items:end;flex-shrink:0}
.reference img{width:78px;height:108px;object-fit:contain}
.reference img+img{width:94px;margin-left:-15px}
.reference p{font:18px/1.3 var(--font-display)}
.reference p span{display:block;font:12px/1.6 var(--font-body);color:var(--color-muted);margin-top:8px}
.toolbar{display:flex;align-items:center;gap:28px;position:sticky;top:0;z-index:5;padding-block:14px;background:var(--color-paper);border-block:1px solid var(--color-rule);font-size:12px}
.size-control{display:flex;align-items:center;gap:12px}
.toggles{display:flex;align-items:center;gap:8px}
.toggles button{display:flex;align-items:center;gap:8px;border-color:transparent;padding-inline:8px}
.toggle-track{width:28px;height:17px;border-radius:20px;background:var(--color-muted);padding:3px;display:block}
.toggle-track:before{content:"";display:block;width:11px;height:11px;background:var(--color-panel);border-radius:50%;transition:transform var(--dur-fast) var(--ease-out)}
[aria-pressed=true] .toggle-track{background:var(--color-accent)}
[aria-pressed=true] .toggle-track:before{transform:translateX(11px)}
.toolbar>a{margin-left:auto;text-decoration:none;white-space:nowrap;min-height:44px;display:flex;align-items:center;gap:10px}
.scale-note{color:var(--color-muted);font-size:12px;margin:18px 0 30px}
.scale-note strong{font-weight:500;color:var(--color-ink)}
.study{padding:28px 0 32px;border-bottom:1px solid var(--color-rule)}
.study-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px}
.study-heading>div{display:flex;gap:16px;align-items:baseline}
.number{font:14px var(--font-display);color:var(--color-muted)}
h2{font-size:32px;line-height:1.15;letter-spacing:-.025em;margin:0}
.study-heading h2{font-size:29px}
.study-heading p{font-size:12px;color:var(--color-muted);margin:6px 0 0}
.choose{font-size:12px;min-width:136px}
.choose[aria-pressed=true]{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-panel)}
.proof-pair,.calendar-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.proof{background:var(--color-panel);border:1px solid var(--color-rule);border-radius:var(--radius-panel);padding:20px 20px 12px;min-width:0}
.dark{--color-panel:var(--color-dark);--color-ink:var(--color-dark-ink);--color-muted:var(--color-dark-muted);--color-rule:var(--color-dark-rule);--color-tint:oklch(34% .035 145);--color-focus:oklch(77% .13 70);color:var(--color-ink)}
.proof-label{display:flex;align-items:center;justify-content:space-between;color:var(--color-muted);font-size:10px;letter-spacing:.025em}
.proof-label span:first-child{display:flex;align-items:center;gap:6px}
.swatch{width:7px;height:7px;border-radius:50%;background:var(--color-muted)}
.characters{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:end;gap:5px;margin:20px 0 22px}
.character{text-align:center;min-width:0}
.character .icon{width:72px;height:72px;max-width:100%;margin:0 auto 10px}
.character .character-label{display:block;font-size:11px;line-height:1.3;min-height:28px}
.character small{display:block;color:var(--color-muted);font-size:9px;margin-top:4px}
.tiny-line{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--color-rule);padding-top:12px;min-height:47px;gap:12px}
.tiny-line>span{font-size:10px;color:var(--color-muted);white-space:nowrap}
.tiny-icons{display:flex;align-items:center;justify-content:space-around;gap:14px;flex:1;max-width:300px}
.tiny-icons .icon,.day .icon{width:var(--tiny-size);height:var(--tiny-size);flex-shrink:0}
.study-note{display:flex;gap:24px;color:var(--color-muted);font-size:11px;margin:12px 2px 0}
.study-note span{flex:1}
.study-note strong{font-weight:600;color:var(--color-ink)}
.icon{display:block;overflow:visible;flex-shrink:0}
.grayscale .icon{filter:grayscale(1)}
.icon .character-body{transform-origin:32px 51px}
.icon .accent-motion{transform-origin:32px 28px}
.animate .icon .character-body{animation:wiggle 3.2s var(--ease-in-out) infinite;animation-delay:calc(var(--level)*-.43s)}
.animate .family-sprouts .character-body{animation-name:sway}
.animate .family-clouds .character-body{animation-name:float}
.animate .family-embers .character-body{animation-name:flicker}
.animate .icon .accent-motion{animation:puff 2.4s var(--ease-in-out) infinite;animation-delay:calc(var(--level)*-.31s)}
@keyframes wiggle{0%,65%,100%{transform:rotate(0)}75%{transform:rotate(-5deg) translateY(-1px)}88%{transform:rotate(4deg)}}
@keyframes sway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes float{0%,100%{transform:translateY(1px)}50%{transform:translateY(-2px)}}
@keyframes flicker{0%,100%{transform:scale(1,.98)}50%{transform:scale(.97,1.04)}}
@keyframes puff{0%,100%{transform:translateY(0);opacity:1}50%{transform:translateY(-2px);opacity:.65}}
.calendar-section{padding-top:52px;scroll-margin-top:20px}
.section-top{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:24px}
.section-top p:not(.eyebrow){font-size:13px;color:var(--color-muted);margin-bottom:0}
.family-control{font-size:11px;display:flex;flex-direction:column;gap:6px;min-width:180px}
.calendar{padding:24px;background:var(--color-panel);border:1px solid var(--color-rule);border-radius:var(--radius-panel)}
.calendar-title{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:20px}
.calendar h3{font-size:24px;margin:0}
.calendar-title span{font-size:10px;color:var(--color-muted)}
.weekdays,.days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}
.weekdays span{text-align:center;font-size:10px;color:var(--color-muted);padding-block:8px}
.day{display:flex;flex-direction:column;align-items:center;justify-content:start;gap:6px;min-height:69px;border:1px solid transparent;border-radius:8px;padding:6px 0;font-size:10px;min-width:0;position:relative;font-variant-numeric:tabular-nums}
.day.empty{color:var(--color-muted)}
.day[aria-pressed=true]{border-color:var(--color-muted);background:var(--color-tint)}
.calendar-legend{display:flex;flex-wrap:wrap;gap:8px 14px;border-top:1px solid var(--color-rule);padding-top:16px;margin-top:12px;font-size:10px}
.calendar-legend span{display:flex;align-items:center;gap:4px}
.calendar-legend .icon{width:16px;height:16px}
.calendar-detail{font-size:12px;color:var(--color-muted);min-height:24px;margin-top:18px}
footer{border-top:1px solid var(--color-rule);margin-top:36px;padding:24px 0 40px;display:flex;justify-content:space-between;gap:30px;font-size:12px}
footer p{max-width:460px;margin:0}footer p+p{font-size:10px;color:var(--color-muted);max-width:280px}
@media(min-width:1400px){.character .icon{width:80px;height:80px}}
@media(max-width:900px){.wrap{padding-inline:24px}.reference{max-width:230px;gap:8px}.reference img{width:60px}.reference img+img{width:72px}.reference p{font-size:16px}.proof{padding:16px 12px 10px}.character .icon{width:60px;height:60px}.tiny-icons{gap:10px}.character .character-label{font-size:10px}.calendar{padding:18px}}
@media(max-width:680px){.wrap{padding-inline:20px}.masthead{min-height:68px}.masthead>span{display:none}.intro{padding-block:36px 28px;gap:16px}.lede{font-size:15px}.reference{display:none}.toolbar{flex-wrap:wrap;gap:6px 16px;padding-block:8px}.toolbar>a{font-size:11px}.size-control{gap:8px}.toggles{gap:0}.toggles button{padding-inline:6px;font-size:11px}.proof-pair,.calendar-pair{grid-template-columns:minmax(0,1fr)}.character .icon{width:68px;height:68px}.character .character-label{font-size:11px}.study-heading{align-items:start}.study-heading>div{gap:10px}.study-heading h2{font-size:25px}.study-heading p{max-width:210px}.choose{min-width:0;font-size:10px;padding-inline:10px}.study-note{gap:16px;font-size:10px}.section-top{align-items:start;flex-direction:column;gap:20px}.family-control{width:100%}.calendar-section{padding-top:36px}h2{font-size:30px}footer{flex-direction:column;gap:14px}}
@media(max-width:374px){.wrap{padding-inline:12px}.toolbar>a{margin-left:0}.study-heading{flex-wrap:wrap;gap:12px}.study-heading>div{flex:1}.character .icon{width:48px;height:48px}.proof{padding-inline:10px}.character .character-label{font-size:10px}.character small{font-size:8px}.tiny-icons{gap:8px}.calendar{padding:12px}.day{min-height:66px}.study-note{flex-direction:column;gap:6px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before{transition:none!important}body:not(.animate) .icon *{animation:none!important}}

/* Ring-aware comparison: rings never move with character artwork. */
.toolbar{flex-wrap:wrap;gap:8px 20px}
.motion-note{font-size:11px;color:var(--color-muted);margin:12px 0 0;min-height:18px}
.study-intro{padding-top:20px}
.study-intro h2{font-size:23px}
.study-intro p{font-size:12px;color:var(--color-muted);margin-top:8px}
.previous-studies{margin-top:28px;border-block:1px solid var(--color-rule);padding-block:8px}
.previous-studies summary{cursor:pointer;padding:14px 0;font-size:14px;min-height:44px}
.effort-ring{position:relative;display:block;flex-shrink:0;width:var(--ring-size);height:var(--ring-size);isolation:isolate}
.goal-ring{display:block;position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;stroke-width:6.2}
.ring-track{stroke:var(--color-ring-track)}
.ring-arc{stroke:var(--color-ring);stroke-linecap:round}
.effort-ring>.icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:var(--tiny-size);height:var(--tiny-size);margin:0}
.character>.effort-ring{width:min(84px,100%);height:auto;aspect-ratio:1;margin:0 auto 12px}
.character .effort-ring>.icon{width:72%;height:72%;margin:0}
.character .goal-ring{stroke-width:4}
.raster-sprite{display:block;width:100%;height:100%;background-image:url('assets/painted-effort-atlas.png');background-size:500% 200%;background-repeat:no-repeat;transform-origin:50% 60%}
.animate .raster-sprite{animation:wiggle 3.2s var(--ease-in-out) infinite;animation-delay:calc(var(--level)*-.43s)}
.animate .family-mochi .character-body{animation-name:flicker}
.animate .family-frogs .character-body{animation-name:float}
.animate .family-puffers .character-body{animation-name:flicker}
.animate .family-petals .character-body{animation-name:sway}
.grayscale .effort-ring{filter:grayscale(1)}
.tiny-icons{gap:4px;max-width:330px}
.tiny-line{padding-bottom:6px}
.day{min-height:80px}
.day .effort-ring{width:min(var(--ring-size),100%);height:auto;aspect-ratio:1}
.day .effort-ring>.icon{width:min(var(--tiny-size),68%);height:auto;aspect-ratio:1}
.goal-key{display:flex;justify-content:space-between;gap:8px;padding-top:18px;border-top:1px solid var(--color-rule);margin-top:12px}
.goal-key>span{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:10px;color:var(--color-muted)}
.goal-key .effort-ring{width:36px;height:36px}
.goal-key .effort-ring>.icon{width:22px;height:22px}
.goal-key-note{font-size:10px;color:var(--color-muted);margin:12px 0 0}
@media(max-width:1050px){.tiny-line{flex-wrap:wrap}.tiny-line>span{display:flex;gap:4px;align-items:center}.tiny-line>span br{display:none}.tiny-icons{flex-basis:100%;max-width:none}.character>.effort-ring{width:min(70px,100%)}}
@media(max-width:680px){.toolbar{gap:4px 16px}.toolbar>a{margin-left:auto}.study-intro{padding-top:8px}.tiny-icons{justify-content:space-between}.character>.effort-ring{width:min(72px,100%)}}

.strip-art{transform-origin:32px 36px}
.animate .strip-art{animation:wiggle 3.2s var(--ease-in-out) infinite;animation-delay:calc(var(--level)*-.43s)}
.animate .family-painted-weather .strip-art{animation-name:float}
.animate .family-painted-lifting .strip-art{animation-name:lift}
@keyframes lift{0%,65%,100%{transform:translateY(1px)}35%{transform:translateY(-2px)}}