.nest{--gap:12px;position:relative;width:145px;aspect-ratio:1;padding:var(--gap);border-radius:16px;background:var(--color-surface);box-shadow:var(--shadow)}.nest>div{width:100%;height:100%;border-radius:16px;background:#dce5d4;box-shadow:inset 0 0 0 1px rgb(40 48 34/.07)}.nest.paired{border-radius:calc(16px + var(--gap))}.measure{position:absolute;top:-12px;right:4px;padding:3px 8px;border:1px solid var(--color-edge);border-radius:12px;background:var(--color-surface);font:11px ui-monospace,monospace;color:var(--color-accent)}#radius-demo:not(.hide-guides) .nest::after{content:'';position:absolute;inset:0;border-top:1px dashed var(--color-accent);border-left:1px dashed var(--color-accent);border-radius:inherit;pointer-events:none}.hide-guides .measure{display:none}.play-disc{position:relative;width:100px;height:100px;border-radius:50%;padding:0;color:var(--color-accent)}.play-disc.corrected svg{translate:3px 0}.show-guides .play-disc::after{content:'';position:absolute;inset:-15px;background:linear-gradient(90deg,transparent calc(50% - .5px),#86917d calc(50% - .5px),#86917d calc(50% + .5px),transparent calc(50% + .5px)),linear-gradient(transparent calc(50% - .5px),#86917d calc(50% - .5px),#86917d calc(50% + .5px),transparent calc(50% + .5px));pointer-events:none}.depth-card{width:240px;text-align:center;padding:30px 22px;border-radius:22px;background:var(--color-surface);border:1px solid transparent}.depth-card[data-depth=border]{border-color:#7b8672}.depth-card[data-depth=shadow]{box-shadow:0 1px 2px rgb(34 49 22/.12),0 6px 12px -6px rgb(34 49 22/.23),0 22px 38px -16px rgb(34 49 22/.19)}.depth-card p{font-size:13px;color:var(--color-text-secondary)}.paper-symbol{display:block;font-size:40px;line-height:1.4;color:var(--color-accent);margin-bottom:12px}.group-demo{display:grid;gap:24px;width:260px}.settings-group{display:grid;gap:8px;font-size:14px}.settings-group strong{font-size:12px;color:var(--color-text-secondary);margin-bottom:3px}.settings-group span{padding:6px 10px;background:var(--color-surface-soft);border-radius:6px}.counter{font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',sans-serif;font-size:clamp(25px,4vw,46px);letter-spacing:-.06em;line-height:1.3;padding-bottom:8px;border-bottom:2px solid var(--color-accent);min-width:0}.counter.proportional{font-variant-numeric:proportional-nums}.counter.tabular{font-variant-numeric:tabular-nums}.measure-stage{display:block}.measure-stage h3{font-family:Georgia,serif;font-size:28px;font-weight:400;text-wrap:balance;letter-spacing:-.04em}.measure-stage p{font-size:15px;line-height:1.85;text-wrap:wrap}.measure-stage #reading-sample{max-width:65ch;margin:auto}.truncated{display:block;max-width:260px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;color:var(--color-text-secondary);font-size:13px}.full-label{order:1}.menu-stage{display:block;min-height:370px;overflow:visible}.menu-anchor{width:100%;height:300px;position:relative;display:flex;align-items:flex-start;justify-content:flex-start}.menu-anchor[data-origin=center]{justify-content:center}.menu-anchor[data-origin=right]{justify-content:flex-end}.sample-menu{position:absolute;top:70px;left:0;max-width:280px;width:100%;transform-origin:top left;opacity:0;transform:translateY(-3px) scale(.98);filter:blur(4px);visibility:hidden}.sample-menu p{font-size:13px;margin-top:10px}.menu-anchor[data-origin=center] .sample-menu{left:50%;translate:-50% 0;transform-origin:top center}.menu-anchor[data-origin=right] .sample-menu{left:auto;right:0;transform-origin:top right}.sample-menu.open{opacity:1;transform:none;filter:none;visibility:visible}.sample-menu.open.instant{transition:none!important}.save-toggle{padding:20px 26px;width:260px;min-width:0;font-size:16px;border-radius:18px}.icon-stack{display:block;width:24px;height:24px;position:relative}.icon-stack svg{position:absolute;inset:0}.icon-on{opacity:0;scale:.25;filter:blur(4px)}.save-toggle[aria-pressed=true] .icon-on{opacity:1;scale:1;filter:none}.save-toggle[aria-pressed=true] .icon-off{opacity:0;scale:.25;filter:blur(4px)}.contrast-surface{display:grid;justify-items:center;gap:16px;background:#fff;padding:24px 18px;border-radius:16px;box-shadow:var(--shadow);text-align:center;width:100%}.contrast-surface p{margin:0;color:rgb(88 88 88);font-size:17px}.contrast-surface output{font-size:36px;line-height:1.3;letter-spacing:-.06em}.contrast-surface #contrast-verdict{font-size:12px;color:var(--color-text-secondary)}.form-demo{width:100%;max-width:340px}.form-demo h3{font-size:22px;margin-bottom:24px}.form-demo button{margin-top:20px}.keyboard-demo{position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:12px;text-align:center}.keyboard-demo p,.keyboard-demo a{width:100%;font-size:13px;margin:12px 0 0}.keyboard-demo a{min-height:44px;padding:10px}.decorative-glow{position:absolute;inset:0;background:radial-gradient(ellipse,#bcd7a3a0,transparent 70%);z-index:-1;pointer-events:none}.empty-demo{max-width:300px;text-align:center}.empty-demo p{font-size:14px}.empty-demo h3{font-size:24px}body:has(dialog[open]){overflow:hidden}
@media(prefers-reduced-motion:no-preference){.sample-menu{transition:opacity 130ms ease-out,transform 130ms ease-out,filter 130ms ease-out,visibility 130ms}.sample-menu.open{transition-duration:260ms;transition-timing-function:var(--ease)}.icon-stack svg{transition:opacity 220ms ease-out,scale 220ms var(--ease),filter 220ms ease-out}}
@media(max-width:1000px){.nest{width:120px}.counter{font-size:34px}}
@media(max-width:380px){.nest{width:104px}.play-disc{width:90px;height:90px}.counter{font-size:29px}.save-toggle{min-width:200px}.form-demo{padding:20px}}