.canvas-stack{aspect-ratio:1;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);width:100%;max-width:640px;position:relative;overflow:hidden}.drawing-canvas{aspect-ratio:1;cursor:crosshair;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;width:100%;display:block}.drawing-canvas.is-readonly{cursor:default}.drawing-canvas path{fill:var(--ink)}.drawing-canvas.is-erasing{cursor:none}.eraser-cursor{fill:#3b6cff1f;stroke:var(--accent);stroke-width:2px;stroke-dasharray:5 4;pointer-events:none}.ghost-layer{pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.ghost-line{fill:none;stroke:var(--accent);stroke-opacity:var(--ghost-opacity);stroke-width:6px;stroke-linecap:round;stroke-linejoin:round}.ghost-construction{stroke-dasharray:14 12}.ghost-keypoints circle{fill:var(--accent);fill-opacity:.7;stroke:var(--surface);stroke-width:3px}.canvas-stack{background-color:var(--surface);background-image:radial-gradient(#1c1b190a 1px,#0000 1px),radial-gradient(#1c1b1908 1px,#0000 1px);background-position:0 0,3px 5px;background-size:7px 7px,13px 13px}.ghost-stroke{stroke-dasharray:1;stroke-dashoffset:0;animation:.4s ease-out ghost-draw-on}.ghost-construction,.ghost-keypoints{animation:.4s ease-out ghost-fade-in}.ghost-layer .is-leaving{opacity:0;transition:opacity .2s ease-out;animation:.2s ease-out ghost-fade-out}@keyframes ghost-draw-on{0%{stroke-dashoffset:1px}to{stroke-dashoffset:0}}@keyframes ghost-fade-in{0%{opacity:0}to{opacity:1}}@keyframes ghost-fade-out{0%{opacity:1}to{opacity:0}}@media (prefers-reduced-motion:reduce){.ghost-stroke,.ghost-construction,.ghost-keypoints,.ghost-layer .is-leaving{animation:none}}.canvas-toolbar{justify-content:space-between;align-items:center;gap:var(--space-3);flex-wrap:wrap;width:100%;max-width:640px;display:flex}.pen-sizes,.canvas-actions{gap:var(--space-2);display:flex}.tool-btn{justify-content:center;align-items:center;gap:var(--space-1);min-width:44px;min-height:44px;padding:0 var(--space-3);border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--ink);font:inherit;cursor:pointer;transition:border-color var(--transition), background-color var(--transition);font-weight:600;display:inline-flex}.tool-btn:hover{border-color:var(--ink-muted)}.tool-btn:focus-visible{box-shadow:var(--focus-ring);outline:none}.tool-btn:disabled{opacity:.45;cursor:not-allowed}.tool-btn.is-active{border:2px solid var(--accent);background:#3b6cff14}.tool-icon{flex:none;width:20px;height:20px}.pen-dot{background:var(--ink);border-radius:50%;display:block}@media (width<=480px){.tool-text{display:none}}.replay-player{gap:var(--space-3);flex-direction:column;margin:0;display:flex}.replay-controls{align-items:center;gap:var(--space-3);flex-wrap:wrap;display:flex}.replay-controls progress{min-width:120px;accent-color:var(--accent);flex:1}.replay-speed,.replay-empty{color:var(--ink-muted);font-size:var(--text-sm)}.demo-layout{gap:var(--space-6);grid-template-columns:repeat(auto-fit,minmax(300px,1fr));display:grid}.canvas-column{gap:var(--space-3);flex-direction:column;display:flex}.dev-only{align-self:flex-start}.btn.dev-only{border:1px dashed var(--ink-muted)}.ghost-traced{fill:none;stroke:var(--accent);stroke-opacity:.6;stroke-width:6px;stroke-linecap:round;stroke-linejoin:round}.ghost-start circle{fill:var(--accent);fill-opacity:.75;stroke:var(--surface);stroke-width:2.5px}.ghost-start polyline{fill:none;stroke:var(--accent);stroke-opacity:.85;stroke-width:4px;stroke-linecap:round;stroke-linejoin:round}.ghost-start{animation:.4s ease-out ghost-fade-in}@media (prefers-reduced-motion:reduce){.ghost-start{animation:none}}.zoom-layer{aspect-ratio:1;transform-origin:0 0;width:100%;position:relative}.zoom-reset{bottom:var(--space-3);left:var(--space-3);align-items:center;gap:var(--space-2);min-height:44px;padding:0 var(--space-4);border:1px solid var(--line);background:var(--surface);color:var(--ink);font:inherit;font-size:var(--text-sm);cursor:pointer;border-radius:999px;display:inline-flex;position:absolute;box-shadow:0 2px 8px #1c1b191a}.zoom-reset:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.zoom-level{color:var(--ink-muted);font-variant-numeric:tabular-nums}.inspector-page{gap:var(--space-5);padding:var(--space-5);flex-direction:column;display:flex}.inspector-page h1{font-size:var(--text-xl)}.inspector{gap:var(--space-6);grid-template-columns:minmax(0,768px) minmax(260px,1fr);align-items:start;display:grid}@media (width<=1000px){.inspector{grid-template-columns:1fr}}.inspector-canvas{aspect-ratio:1;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);width:100%;position:relative;overflow:hidden}.inspector-canvas img,.inspector-canvas svg{width:100%;height:100%;position:absolute;inset:0}.inspector-canvas img{opacity:.35}.part rect{fill:none;stroke:var(--ink-muted);stroke-width:1.5px;stroke-dasharray:6 5}.part text{fill:var(--ink-muted);font:600 16px var(--font-ui)}.plan-stroke polyline{fill:none;stroke-width:3px;stroke-linecap:round;stroke-linejoin:round}.plan-stroke.tier-construction polyline{stroke-dasharray:10 8}.badge circle{fill:var(--surface);stroke-width:2.5px}.badge text{fill:var(--ink);font:700 14px var(--font-ui);text-anchor:middle}.tier-construction{--tier:var(--tier-construction)}.tier-outline{--tier:var(--tier-outline)}.tier-structure{--tier:var(--tier-structure)}.tier-detail{--tier:var(--tier-detail)}.plan-stroke polyline,.badge circle{stroke:var(--tier)}.plan-stroke circle{fill:var(--tier)}.inspector-side{gap:var(--space-5);flex-direction:column;display:flex}.inspector-side h2{font-size:var(--text-lg)}.inspector-side h3{margin-bottom:var(--space-2);font-size:var(--text-md)}.inspector-muted{color:var(--ink-muted);font-size:var(--text-sm)}.inspector-counts{margin-top:var(--space-2);font-weight:600}.inspector-legend,.inspector-parts{margin:0;padding:0;list-style:none}.inspector-legend li{align-items:center;gap:var(--space-2);display:flex}.swatch{border-top:4px solid var(--tier);width:24px;display:inline-block}.swatch.tier-construction{border-top-style:dashed}.inspector-steps{gap:var(--space-3);padding-left:var(--space-5);flex-direction:column;margin:0;display:flex}.inspector-error{padding:var(--space-4);border-left:4px solid var(--warning);background:var(--surface);white-space:pre-wrap}.home{--home-width:1200px;--home-ghost:#3b6cff4d;--home-tint:#3b6cff14;--ease-out:cubic-bezier(.22, 1, .36, 1);overflow-x:clip}.home .btn-large{min-height:52px;padding:var(--space-3) var(--space-6);font-size:1.0625rem}.home .btn-large .home-icon{width:20px;height:20px;transition:transform var(--transition)}.home .btn-large:hover .home-icon{transform:translate(3px)}.home .btn-primary{box-shadow:0 1px 2px #1c1b191a,0 8px 24px #3b6cff38}.home .btn-primary:hover{border-color:var(--accent);background:#2f5ae6}.home .btn-primary:focus-visible{box-shadow:var(--focus-ring)}.home-icon{flex:none}.home-eyebrow{color:var(--accent);font-size:var(--text-sm);letter-spacing:.08em;text-transform:uppercase;font-weight:600}.home-hero{max-width:var(--home-width);padding:clamp(24px, 5vw, 64px) var(--space-5) clamp(56px, 8vw, 112px);grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center;gap:clamp(32px,5vw,72px);margin:0 auto;display:grid}@media (width>=961px) and (height>=640px){.home-hero{min-height:calc(100svh - 76px);padding-block:var(--space-6) var(--space-7)}}.home-hero-text{gap:var(--space-5);flex-direction:column;display:flex}.home-hero-text>*{animation:home-rise .7s var(--ease-out) both}.home-hero-text>:nth-child(2){animation-delay:80ms}.home-hero-text>:nth-child(3){animation-delay:.16s}.home-hero-text>:nth-child(4){animation-delay:.24s}.home-hero-text>:nth-child(5){animation-delay:.32s}.home-title{letter-spacing:-.02em;text-wrap:balance;font-size:clamp(2.5rem,5.2vw,4.25rem);font-weight:600;line-height:1.04}.home-title-line{display:block}.home-title-accent{color:var(--accent);font-style:italic;font-weight:500}.home-underlined{display:inline-block;position:relative}.home-underline{width:100%;height:.28em;position:absolute;bottom:-.12em;left:0;overflow:visible}.home-underline path{fill:none;stroke:var(--accent);stroke-width:3px;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1px;opacity:.55;vector-effect:non-scaling-stroke;animation:home-draw .9s var(--ease-out) .7s forwards}.home-lede{max-width:34rem;color:var(--ink-muted);font-size:clamp(1.0625rem,1.4vw,1.25rem);line-height:1.6}.home-actions{gap:var(--space-3);flex-wrap:wrap;display:flex}.home-note{color:var(--ink-muted);font-size:var(--text-sm)}.hero-sketch{animation:home-rise .9s var(--ease-out) .12s both;margin:0;position:relative}.hero-sketch:before{content:"";z-index:-1;pointer-events:none;background:radial-gradient(closest-side,#3b6cff24,#0000);position:absolute;inset:-12% -16%}.hero-paper{aspect-ratio:1;border:1px solid var(--line);border-radius:calc(var(--radius) * 2);background-color:var(--surface);background-image:radial-gradient(#1c1b1912 1px,#0000 1px);background-size:22px 22px;position:relative;transform:rotate(1.2deg);box-shadow:0 2px 4px #1c1b190a,0 24px 64px -16px #1c1b192e}.sketch-svg{width:100%;height:100%;display:block}.sketch-svg path{fill:none;stroke-linecap:round;stroke-linejoin:round}.sketch-ghosts path{stroke:var(--home-ghost);stroke-width:4px;stroke-dasharray:10 12;animation:4.8s ease-out .2s both hero-ghosts}.sketch-ink path{stroke:var(--ink);stroke-width:4.5px;stroke-dasharray:1}.hero-paper .sketch-ink path,.is-visible .own-result .sketch-ink path{animation:sketch-ink var(--draw-time,.4s) var(--ease-out) var(--draw-delay,0s) both}.own-result .sketch-ink path{opacity:0}.sketch-loading{background:linear-gradient(100deg,#0000 30%,#1c1b190a 50%,#0000 70%) 0 0/200% 100%;animation:1.4s linear infinite home-shimmer}.hero-chip{align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow);font-size:var(--text-sm);white-space:nowrap;border-radius:999px;font-weight:600;display:inline-flex;position:absolute}.hero-chip .home-icon{width:18px;height:18px}.hero-chip-ghost{color:var(--accent);animation:home-pop .5s var(--ease-out) .6s both;top:6%;left:-6%}.hero-chip-done{color:var(--success);animation:home-pop .5s var(--ease-out) var(--chip-delay,5s) both;bottom:7%;right:-4%}.hero-replay{right:var(--space-3);top:var(--space-3);align-items:center;gap:var(--space-1);min-height:44px;padding:0 var(--space-3);border-radius:var(--radius);color:var(--ink-muted);font:inherit;font-size:var(--text-sm);cursor:pointer;transition:color var(--transition), background-color var(--transition);background:0 0;border:0;font-weight:600;display:inline-flex;position:absolute;transform:rotate(1.2deg)}.hero-replay .home-icon{width:16px;height:16px}.hero-replay:hover{background:var(--home-tint);color:var(--accent)}.hero-replay:focus-visible{box-shadow:var(--focus-ring);outline:none}.home-section{max-width:var(--home-width);padding:clamp(56px, 8vw, 112px) var(--space-5);margin:0 auto}.home-section-head{align-items:center;gap:var(--space-3);text-align:center;flex-direction:column;max-width:44rem;margin:0 auto clamp(32px,5vw,56px);display:flex}.home-section h2{letter-spacing:-.015em;text-wrap:balance;font-size:clamp(1.875rem,3.4vw,2.75rem)}.home-section-lede{color:var(--ink-muted);font-size:var(--text-lg);line-height:1.6}.reveal{opacity:0;transition:opacity .7s var(--ease-out), transform .7s var(--ease-out);transition-delay:var(--reveal-delay,0s);transform:translateY(24px)}.reveal.is-visible{opacity:1;transform:none}.home-steps{gap:var(--space-5);grid-template-columns:repeat(3,minmax(0,1fr));margin:0;padding:0;list-style:none;display:grid;position:relative}.home-steps:before{content:"";border-top:2px dashed var(--home-ghost);position:absolute;top:52px;left:16%;right:16%}.home-steps>li{display:flex}.home-step{gap:var(--space-3);padding:var(--space-6);border:1px solid var(--line);border-radius:calc(var(--radius) * 1.5);background:var(--surface);transition:opacity .7s var(--ease-out), transform .7s var(--ease-out), box-shadow var(--transition), border-color var(--transition);transition-delay:var(--reveal-delay,0s), var(--reveal-delay,0s), 0s, 0s;flex-direction:column;flex:1;display:flex;position:relative}.home-step:hover{border-color:#3b6cff59;box-shadow:0 12px 32px -12px #1c1b1929}.home-step-icon{border-radius:var(--radius);background:var(--home-tint);width:44px;height:44px;color:var(--accent);place-items:center;display:grid}.home-step-number{top:var(--space-5);right:var(--space-6);color:var(--line);font-family:var(--font-heading);font-size:2.5rem;font-weight:600;line-height:1;position:absolute}.home-step h3{margin-top:var(--space-2);font-size:1.5rem}.home-step p{color:var(--ink-muted);line-height:1.6}.home-ai{border-block:1px solid var(--line);background:linear-gradient(180deg, var(--surface), var(--paper));max-width:none}.home-pipeline{gap:var(--space-6);max-width:var(--home-width);grid-template-columns:repeat(4,minmax(0,1fr));margin:0 auto;padding:0;list-style:none;display:grid}.home-pipeline>li{display:flex;position:relative}.home-pipeline>li+li:before{content:"";top:calc(50% - 64px);left:calc(-1 * var(--space-6) / 2 - 5px);border-top:2px solid var(--home-ghost);border-right:2px solid var(--home-ghost);width:10px;height:10px;position:absolute;transform:rotate(45deg)}.pipe-card{gap:var(--space-2);flex-direction:column;flex:1;display:flex}.pipe-art{aspect-ratio:1;margin-bottom:var(--space-3);border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow);display:grid;position:relative;overflow:hidden}.pipe-art img{object-fit:cover;width:100%;height:100%}.pipe-prompt{align-content:center;gap:var(--space-3);padding:var(--space-5)}.pipe-prompt-label{color:var(--ink-muted);font-size:var(--text-sm);letter-spacing:.08em;text-transform:uppercase;font-weight:600}.pipe-prompt-text{padding:var(--space-2) var(--space-4);border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--paper);font-family:var(--font-heading);font-size:1.5rem}.pipe-prompt-style{color:var(--ink-muted);font-size:.8125rem;line-height:1.5}.pipe-prompt-style strong{color:var(--accent)}.pipe-drafts{background:var(--line);grid-template-columns:1fr 1fr;gap:2px}.pipe-draft{background:var(--surface);min-width:0;position:relative}.pipe-draft img{opacity:.5}.pipe-draft.is-chosen img{opacity:1}.pipe-draft.is-chosen:after{content:"";border:3px solid var(--accent);position:absolute;inset:0}.pipe-draft-tag{padding:1px var(--space-2);background:var(--accent);color:var(--accent-ink);letter-spacing:.04em;text-transform:uppercase;border-radius:999px;font-size:.6875rem;font-weight:700;position:absolute;bottom:6px;left:6px}.pipe-card h3{font-size:1.1875rem}.pipe-card p{color:var(--ink-muted);font-size:.9375rem;line-height:1.55}.home-own{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(32px,6vw,88px);display:grid}.home-own-text{align-items:flex-start;gap:var(--space-4);flex-direction:column;display:flex}.home-own-text .btn{margin-top:var(--space-3)}.home-own-demo{align-items:center;gap:var(--space-4);grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);display:grid}.own-input{min-height:56px;padding:0 var(--space-4);border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow);align-items:center;font-size:1.125rem;display:flex}.own-typed{white-space:nowrap}.own-typed>span{opacity:0}.is-visible .own-typed>span{animation:own-type 1ms linear var(--type-delay,0s) forwards}.own-caret{background:var(--accent);width:2px;height:1.3em;margin-left:2px;animation:1s step-end infinite own-blink}.own-arrow{background:var(--home-tint);width:44px;height:44px;color:var(--accent);border-radius:50%;place-items:center;display:grid}.own-result{aspect-ratio:1;border:1px solid var(--line);border-radius:var(--radius);background-color:var(--surface);width:100%;box-shadow:var(--shadow);background-image:radial-gradient(#1c1b1912 1px,#0000 1px);background-size:16px 16px;margin:0}.home-final{padding:0 var(--space-5) clamp(56px, 8vw, 112px)}.home-final-inner{align-items:center;gap:var(--space-4);max-width:var(--home-width);padding:clamp(48px, 7vw, 88px) var(--space-5);border-radius:calc(var(--radius) * 2);background-color:var(--ink);color:var(--paper);text-align:center;background-image:radial-gradient(#faf7f212 1px,#0000 1px);background-size:22px 22px;flex-direction:column;margin:0 auto;display:flex}.home-final h2{letter-spacing:-.015em;font-size:clamp(1.875rem,3.4vw,2.75rem)}.home-final p{color:#faf7f2bf;max-width:34rem;font-size:var(--text-lg)}.home-final .btn{margin-top:var(--space-3)}.home-final .btn-primary:focus-visible{box-shadow:0 0 0 3px var(--ink), 0 0 0 5px var(--paper)}.home-footer{justify-content:space-between;gap:var(--space-3);max-width:var(--home-width);padding:var(--space-5) var(--space-5) var(--space-7);border-top:1px solid var(--line);color:var(--ink-muted);font-size:var(--text-sm);flex-wrap:wrap;margin:0 auto;display:flex}.home-footer-links{gap:var(--space-5);display:flex}.home-footer a{color:inherit;text-underline-offset:3px}.home-footer a:hover{color:var(--ink)}.home-footer a:focus-visible{box-shadow:var(--focus-ring);border-radius:4px;outline:none}@keyframes home-rise{0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}@keyframes home-draw{to{stroke-dashoffset:0}}@keyframes home-pop{0%{opacity:0;transform:translateY(8px)scale(.92)}to{opacity:1;transform:none}}@keyframes home-shimmer{to{background-position:-200% 0}}@keyframes hero-ghosts{0%{opacity:0}15%{opacity:1}80%{opacity:1}to{opacity:.35}}@keyframes sketch-ink{0%{opacity:0;stroke-dashoffset:1px}1%{opacity:1}to{opacity:1;stroke-dashoffset:0}}@keyframes own-type{to{opacity:1}}@keyframes own-blink{50%{opacity:0}}@media (width<=960px){.home-hero{grid-template-columns:1fr}.home-hero-text{text-align:center;align-items:center}.home-actions{justify-content:center}.hero-sketch{width:min(100%,520px);margin:0 auto}.home-pipeline{grid-template-columns:repeat(2,minmax(0,1fr))}.home-pipeline>li+li:before{display:none}.home-own{grid-template-columns:1fr}.home-own-demo{width:min(100%,560px);margin:0 auto}}@media (width<=860px){.home-steps{grid-template-columns:1fr;max-width:560px;margin:0 auto}.home-steps:before{display:none}}@media (width<=720px){.home-own-demo{grid-template-columns:1fr;justify-items:center}.own-input{width:min(100%,280px)}.own-arrow{transform:rotate(90deg)}.own-result{width:min(100%,320px)}.home-footer{flex-direction:column}}@media (width<=480px){.home-pipeline{grid-template-columns:1fr}.home-actions,.home-actions .btn{width:100%}.hero-chip-ghost{top:-14px;left:2%}.hero-chip-done{bottom:-14px;right:2%}}@media (prefers-reduced-motion:reduce){.home *,.home :before,.home :after{transition:none!important;animation:none!important}.reveal{opacity:1;transform:none}.sketch-ink path,.own-result .sketch-ink path,.home-underline path{opacity:1;stroke-dashoffset:0}.own-typed>span{opacity:1}}@media (prefers-reduced-motion:no-preference){html:has(.home){scroll-behavior:smooth}}#how{scroll-margin-top:var(--space-5)}.progress{gap:var(--space-4);padding:var(--space-5);border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow);flex-direction:column;display:flex}.progress-head{justify-content:space-between;align-items:center;gap:var(--space-3);flex-wrap:wrap;display:flex}.progress-head h2{font-size:var(--text-lg)}.progress-layout{gap:var(--space-5) var(--space-6);grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:start;display:grid}.progress-overview,.progress-recent-block{gap:var(--space-3);flex-direction:column;display:flex}.progress-stats{gap:var(--space-3);grid-template-columns:repeat(2,minmax(0,1fr));margin:0;display:grid}.progress-stats.is-row{grid-template-columns:repeat(3,minmax(0,1fr))}.progress-stat{gap:var(--space-1);padding:var(--space-3) var(--space-4);border-radius:var(--radius-sm);background:var(--paper);flex-direction:column;display:flex}.progress-stat dt{color:var(--ink-muted);font-size:var(--text-sm);font-weight:600}.progress-stat dd{gap:var(--space-1);flex-direction:column;margin:0;display:flex}.progress-stat-value{font-family:var(--font-heading);font-size:var(--text-xl);font-variant-numeric:tabular-nums;font-weight:700;line-height:1}.progress-stat-note{color:var(--ink-muted);font-size:var(--text-sm)}.progress-spark{gap:var(--space-2);flex-direction:column;margin:0;display:flex}.progress-spark svg{width:100%;height:auto;overflow:visible}.spark-grid{stroke:var(--line);stroke-width:1px}.spark-test,.spark-retest{fill:none;stroke-linecap:round;stroke-linejoin:round}.spark-test{stroke:var(--accent);stroke-opacity:var(--ghost-opacity);stroke-width:2px;stroke-dasharray:4 4}.spark-retest{stroke:var(--accent);stroke-width:2.5px}.spark-dot{fill:var(--accent);stroke:var(--surface);stroke-width:2px}.progress-spark figcaption{align-items:center;gap:var(--space-1) var(--space-3);color:var(--ink-muted);flex-wrap:wrap;font-size:.75rem;font-weight:600;display:flex}.spark-key{align-items:center;gap:6px;display:inline-flex}.spark-key:before{content:"";border-top:2.5px solid var(--accent);width:16px}.spark-key.is-test:before{border-top:2px dashed #3b6cff73}.spark-range{margin-left:auto}.progress-subhead{color:var(--ink-muted);font-family:var(--font-ui);font-size:var(--text-sm);font-weight:600}.progress-recent{gap:var(--space-2);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.recent-item{align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3) var(--space-2) var(--space-2);border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);grid-template-columns:auto minmax(0,1fr) auto;display:grid}.recent-thumb{border-radius:var(--radius-sm);background:var(--paper);place-items:center;width:48px;height:48px;display:grid;overflow:hidden}.recent-thumb img{object-fit:contain;width:100%;height:100%;padding:4px}.recent-initial{color:var(--ink-muted);font-family:var(--font-heading);font-size:var(--text-lg);font-weight:600}.recent-text{flex-direction:column;min-width:0;display:flex}.recent-title,.recent-meta{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.recent-title{font-weight:600}.recent-meta{color:var(--ink-muted);font-size:var(--text-sm)}.recent-result{flex-direction:column;align-items:flex-end;gap:2px;display:flex}.recent-scores{align-items:baseline;gap:var(--space-1);color:var(--ink-muted);font-variant-numeric:tabular-nums;display:inline-flex}.recent-scores strong{color:var(--ink);font-size:var(--text-lg)}.recent-arrow{font-size:var(--text-sm)}.gain-chip{padding:2px var(--space-2);border:1px solid var(--line);background:var(--paper);color:var(--ink);font-size:var(--text-sm);font-variant-numeric:tabular-nums;white-space:nowrap;border-radius:999px;align-items:baseline;gap:4px;font-weight:700;display:inline-flex}.gain-chip.is-up{border-color:var(--success);background:#2e9e6a24}.gain-chip.is-down{border-color:var(--warning);background:var(--warning-tint);color:var(--warning-ink)}.gain-word{font-weight:500}.text-btn{min-height:36px;padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);color:var(--ink-muted);font:inherit;font-size:var(--text-sm);text-underline-offset:3px;cursor:pointer;transition:color var(--transition);background:0 0;border:none;font-weight:600;text-decoration:underline}.text-btn:hover{color:var(--ink)}.text-btn:focus-visible{box-shadow:var(--focus-ring);outline:none}.text-btn.is-danger{color:var(--warning-ink)}.progress-confirm{align-items:center;gap:var(--space-1) var(--space-2);font-size:var(--text-sm);flex-wrap:wrap;display:flex}.progress-cleared{color:var(--ink-muted);font-size:var(--text-sm)}.report-highlights{gap:var(--space-2);flex-wrap:wrap;margin:0;padding:0;list-style:none;display:flex}.report-highlights li{padding:2px var(--space-3);border:1px solid var(--line);background:var(--surface);font-size:var(--text-sm);border-radius:999px;font-weight:600}.report-highlights li.is-best{border-color:var(--accent);background:var(--accent);color:var(--accent-ink)}.report-highlights li.is-streak{border-color:var(--accent);color:var(--accent)}@media (width<=720px){.progress{padding:var(--space-4)}.progress-layout{grid-template-columns:minmax(0,1fr)}}@media (prefers-reduced-motion:no-preference){.progress{animation:.32s ease-out both progress-in}.recent-item{animation:.28s ease-out both progress-in}.report-highlights li{animation:.28s ease-out .9s both progress-in}.spark-retest{stroke-dasharray:1;stroke-dashoffset:1px;animation:.7s ease-out .2s forwards spark-draw}}@keyframes progress-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}@keyframes spark-draw{to{stroke-dashoffset:0}}.solo-layout,.teach-layout{--canvas-max:min(640px, max(320px, calc(100svh - 350px)))}.solo-layout .canvas-stack,.solo-layout .canvas-toolbar,.teach-layout .canvas-stack,.teach-layout .canvas-toolbar{max-width:var(--canvas-max)}.teach-layout{--canvas-max:min(640px, max(320px, calc(100svh - 426px)))}.screen.is-compact{gap:var(--space-4);padding-bottom:var(--space-5)}.screen.is-compact h1{font-size:var(--text-xl)}.screen.is-compact .screen-lead{font-size:var(--text-md)}.muted{color:var(--ink-muted)}.chip,.card-tag{align-items:center;gap:var(--space-1);padding:2px var(--space-2);border:1px solid var(--line);background:var(--paper);color:var(--ink);font-size:var(--text-sm);border-radius:999px;font-weight:600;display:inline-flex}.segmented{border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);padding:3px;display:inline-flex}.segmented button{min-height:36px;padding:0 var(--space-3);border-radius:var(--radius-sm);color:var(--ink-muted);font:inherit;font-size:var(--text-sm);cursor:pointer;transition:background-color var(--transition), color var(--transition);background:0 0;border:none}.segmented button.is-active{background:var(--ink);color:var(--paper);font-weight:700}.segmented button:focus-visible{box-shadow:var(--focus-ring);outline:none}.segmented button:disabled{cursor:not-allowed;opacity:.5}.subject-grid{gap:var(--space-4);grid-template-columns:repeat(auto-fill,minmax(210px,1fr));margin:0;padding:0;list-style:none;display:grid}.subject-card{gap:var(--space-3);padding:var(--space-3);border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);transition:border-color var(--transition), box-shadow var(--transition), transform var(--transition);flex-direction:column;display:flex}.subject-card:hover,.subject-card:focus-within{border-color:var(--accent);box-shadow:var(--shadow);transform:translateY(-2px)}.subject-open{gap:var(--space-2);border-radius:var(--radius-sm);color:inherit;font:inherit;text-align:left;cursor:pointer;background:0 0;border:none;flex-direction:column;padding:0;display:flex}.subject-open:focus-visible{box-shadow:var(--focus-ring);outline:none}.subject-open:disabled{cursor:progress}.subject-thumb{display:block;position:relative}.subject-thumb img{aspect-ratio:1;object-fit:contain;box-sizing:border-box;border-radius:var(--radius-sm);background:var(--paper);width:100%;height:auto;padding:30px 8px 8px}.ai-badge{top:var(--space-2);left:var(--space-2);padding:2px var(--space-2);color:var(--paper);background:#1c1b19bf;border-radius:999px;font-size:.75rem;font-weight:600;position:absolute}.subject-title{font-family:var(--font-heading);font-size:var(--text-lg);font-weight:600}.subject-status,.subject-level{color:var(--ink-muted);font-size:var(--text-sm)}.make-own-jump{align-self:flex-start;align-items:center;gap:var(--space-2);width:fit-content;margin:0 0 var(--space-4);padding:var(--space-2) var(--space-3);border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:var(--text-sm);border-radius:999px;text-decoration:none;transition:border-color .2s ease-out,color .2s ease-out;display:inline-flex}.make-own-jump strong{color:var(--accent)}.make-own-jump:hover,.make-own-jump:focus-visible{border-color:var(--accent)}.make-own-jump svg{color:var(--accent)}.make-own{gap:var(--space-3);margin-top:var(--space-5);padding:var(--space-5);border:1px dashed var(--ink-muted);border-radius:var(--radius);flex-direction:column;display:flex}.make-own-header{align-items:center;gap:var(--space-3);flex-wrap:wrap;display:flex}.make-own-header h2{font-size:var(--text-lg)}.live-badge{align-items:center;gap:var(--space-2);padding:2px var(--space-3);border:1px solid var(--success);color:var(--ink);font-size:var(--text-sm);border-radius:999px;font-weight:600;display:inline-flex}.live-dot{background:var(--success);border-radius:50%;width:8px;height:8px}.make-own-form{align-items:flex-end;gap:var(--space-4);flex-wrap:wrap;display:flex}.field{gap:var(--space-1);font-size:var(--text-sm);flex-direction:column;font-weight:600;display:flex}.field input[type=text]{min-width:240px;min-height:44px;padding:0 var(--space-3);border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--ink);font:inherit;font-weight:400}.field input:focus-visible{box-shadow:var(--focus-ring);outline:none}.field input:disabled{opacity:.55}.sketch-loader{align-items:center;gap:var(--space-4);display:flex}.sketch-loader svg{fill:none;width:120px;height:80px;stroke:var(--accent);stroke-width:3px;stroke-linecap:round}.sketch-loader path,.sketch-loader circle{stroke-dasharray:1;animation:1.8s ease-in-out infinite sketch}.sketch-loader path:nth-child(2){animation-delay:.3s}.sketch-loader circle{animation-delay:.6s}@keyframes sketch{0%{stroke-dashoffset:1px}60%,to{stroke-dashoffset:0}}@media (prefers-reduced-motion:reduce){.sketch-loader path,.sketch-loader circle{animation:none}}.reference-layout{gap:var(--space-6);grid-template-columns:minmax(0,560px) minmax(240px,1fr);align-items:start;display:grid}.reference-figure{gap:var(--space-3);flex-direction:column;margin:0;display:flex}.reference-figure figcaption{align-items:center;gap:var(--space-3);color:var(--ink-muted);font-size:var(--text-sm);display:flex}.reference-image{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);width:100%;height:auto}.flow-steps{gap:var(--space-4);padding-left:var(--space-5);flex-direction:column;margin:0;display:flex}.flow-steps li::marker{font-family:var(--font-heading);font-weight:600}@media (width<=800px){.reference-layout{grid-template-columns:1fr}}.solo-layout{grid-template-columns:minmax(180px, 280px) minmax(0, var(--canvas-max));gap:var(--space-6);justify-content:center;align-items:start;display:grid}.solo-side{align-items:flex-start;gap:var(--space-4);flex-direction:column;display:flex}.solo-reference{width:100%;margin:0}.solo-reference img{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);width:100%;height:auto}.solo-reference figcaption{margin-top:var(--space-2);color:var(--ink-muted);font-size:var(--text-sm)}.scale-hint{margin:var(--space-2) 0 0;padding:var(--space-2) var(--space-3);border-left:3px solid var(--accent);border-radius:var(--radius-sm,6px);background:var(--surface);color:var(--ink);font-size:var(--text-sm);line-height:1.4}@media (width<=760px){.solo-layout{grid-template-columns:1fr}.solo-side{flex-direction:row;align-items:center}.solo-reference{max-width:160px}}.timer{align-self:flex-start;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-5) var(--space-2) var(--space-2);border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow);transition:border-color var(--transition), background-color var(--transition);border-radius:999px;display:inline-flex}.timer-ring{flex:none;place-items:center;width:64px;height:64px;display:grid;position:relative}.timer-ring svg{position:absolute;inset:0;transform:rotate(-90deg)}.timer-ring circle{fill:none;stroke-width:5px}.timer-track{stroke:var(--line)}.timer-fill{stroke:var(--accent);stroke-linecap:round;transition:stroke-dashoffset 1s linear, stroke var(--transition)}.timer-time{font-family:var(--font-heading);font-variant-numeric:tabular-nums;letter-spacing:-.01em;font-size:1.0625rem;font-weight:700}.timer-text{flex-direction:column;line-height:1.3;display:flex}.timer-label{white-space:nowrap;font-weight:600}.timer-sub{color:var(--ink-muted);font-size:var(--text-sm);font-variant-numeric:tabular-nums}.timer.is-low{border-color:var(--warning);background:var(--warning-tint)}.timer.is-low .timer-fill{stroke:var(--warning)}.timer.is-low .timer-time,.timer.is-low .timer-label{color:var(--warning-ink)}@media (prefers-reduced-motion:no-preference){.timer.is-low .timer-ring{animation:1s ease-in-out infinite timer-pulse}}@keyframes timer-pulse{50%{transform:scale(1.06)}}.teach-panel .timer{box-shadow:none;background:0 0;border:0;border-radius:0;align-self:stretch;padding:0}.teach-panel .timer.is-low{background:0 0}.weak-grid{gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(230px,1fr));display:grid}.weak-card{align-items:flex-start;gap:var(--space-3);padding:var(--space-4);border:1px solid var(--line);border-left:4px solid var(--warning);border-radius:var(--radius);background:var(--surface);flex-direction:column;animation:.3s ease-out both card-in;display:flex}.weak-card:nth-child(2){animation-delay:80ms}.weak-card:nth-child(3){animation-delay:.16s}.weak-card:nth-child(4){animation-delay:.24s}.weak-card.is-good{border-left-color:var(--success)}.weak-card h2{font-size:var(--text-lg)}.weak-message{font-weight:600}@keyframes card-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}.part-compare-figure{gap:var(--space-2);flex-direction:column;width:100%;max-width:240px;margin:0;display:flex}.part-compare{aspect-ratio:1;border-radius:var(--radius-sm);background:var(--paper);width:100%}.compare-context,.compare-part,.compare-yours{fill:none;stroke-linecap:round;stroke-linejoin:round}.compare-context{stroke:var(--line);stroke-width:2px}.compare-part{stroke:var(--accent);stroke-width:4px;opacity:.8}.compare-part-box{fill:#3b6cff14;stroke:var(--accent);stroke-width:2px;stroke-dasharray:6 5}.compare-yours{stroke:var(--ink);stroke-width:2px}.compare-legend{gap:var(--space-1) var(--space-3);color:var(--ink-muted);flex-wrap:wrap;font-size:.8rem;display:flex}.compare-legend span{align-items:center;gap:var(--space-1);display:inline-flex}.compare-legend i{border-radius:2px;width:18px;display:inline-block}.legend-part{background:var(--accent);height:4px}.legend-yours{background:var(--ink);height:2px}.compare-user-line,.compare-target-line{fill:none;stroke-width:3px;stroke-linecap:round;stroke-linejoin:round}.compare-user-line{stroke:var(--warning)}.compare-target-line{stroke:var(--ink)}.teach-layout{grid-template-columns:minmax(0, var(--canvas-max)) minmax(220px, 280px);gap:var(--space-6);justify-content:center;align-items:start;display:grid}.teach-step{align-items:baseline;column-gap:var(--space-3);grid-template-rows:1.5rem 3.9375rem;grid-template-columns:auto minmax(0,1fr);height:5.4375rem;display:grid;overflow:hidden}.teach-step h2{font-size:var(--text-lg);text-overflow:ellipsis;white-space:nowrap;line-height:1.5rem;overflow:hidden}.teach-step p{font-size:var(--text-sm);-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;grid-column:1/-1;align-self:start;display:-webkit-box;overflow:hidden}@media (width<=560px),(height<=860px){.teach-step{min-height:5.75rem}.teach-layout{--canvas-max:min(640px, max(320px, calc(100svh - 430px)))}.teach-layout .tool-text{display:none}}.step-count{white-space:nowrap;color:var(--accent);font-size:var(--text-sm);letter-spacing:.04em;text-transform:uppercase;font-weight:700}.teach-toast{right:var(--space-3);bottom:var(--space-3);left:var(--space-3);padding:var(--space-3) var(--space-4);border-left:4px solid var(--warning);border-radius:var(--radius-sm);background:var(--ink);color:var(--paper);font-size:var(--text-sm);pointer-events:none;animation:.2s ease-out card-in;position:absolute}.teach-panel{gap:var(--space-4);padding:var(--space-4);border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);flex-direction:column;display:flex}.panel-block{gap:var(--space-2);border:none;flex-direction:column;margin:0;padding:0;display:flex}.panel-label{color:var(--ink-muted);font-size:var(--text-sm);padding:0;font-weight:600}.help-pill{padding:var(--space-1) var(--space-4);border:2px solid var(--accent);transition:background-color var(--transition), color var(--transition);border-radius:999px;align-self:flex-start;font-weight:700}.help-guided{background:var(--accent);color:var(--accent-ink)}.help-hints{color:var(--ink);background:#3b6cff26}.help-checkin{color:var(--ink);background:0 0;border-style:dashed}.meter{background:var(--line);border-radius:999px;height:12px;overflow:hidden}.meter-fill{border-radius:inherit;background:var(--success);height:100%;transition:width .4s ease-out}.meter-text{color:var(--ink-muted);font-size:var(--text-sm)}.mode-switch{grid-template-columns:1fr 1fr;gap:2px;display:grid}.step-progress{height:6px;margin-bottom:var(--space-3);background:var(--line);border-radius:999px;overflow:hidden}.step-progress-fill{border-radius:inherit;background:var(--accent);height:100%;transition:width .4s ease-out}.teach-step.is-done .step-count{color:var(--success)}.teach-step.is-done~.step-progress .step-progress-fill{background:var(--success)}.teach-cheer{top:var(--space-3);padding:var(--space-1) var(--space-4);background:var(--success);color:var(--ink);font-size:var(--text-sm);pointer-events:none;border-radius:999px;font-weight:700;animation:.2s ease-out cheer-in;position:absolute;left:50%;transform:translate(-50%)}@keyframes cheer-in{0%{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%)}}.mode-hint{color:var(--ink-muted);font-size:var(--text-sm)}@media (width<=900px){.teach-layout{grid-template-columns:1fr}.teach-panel{flex-flow:wrap;align-items:flex-start}}.report{gap:var(--space-5);flex-direction:column;display:flex}.report-card{gap:var(--space-5);padding:var(--space-5);border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);flex-direction:column;display:flex}.report-card-head{justify-content:space-between;align-items:baseline;gap:var(--space-3);flex-wrap:wrap;display:flex}.report-brand{color:var(--accent);font-family:var(--font-heading);order:2;font-weight:700}.report-drawings{gap:var(--space-4);grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.report-drawing{gap:var(--space-2);flex-direction:column;margin:0;display:flex}.report-drawing figcaption{font-weight:700}.report-frame{aspect-ratio:1;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);position:relative;overflow:hidden}.report-frame img,.report-frame .drawing-canvas{width:100%;height:100%}.box-overlay{pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.scale-note,.small{color:var(--ink-muted);font-size:var(--text-sm)}.overlay-toggle{align-items:center;gap:var(--space-2);cursor:pointer;font-weight:600;display:inline-flex}.overlay-toggle input{width:20px;height:20px;accent-color:var(--accent)}.scores{gap:var(--space-6);grid-template-columns:auto minmax(0,1fr);align-items:center;display:grid}.score-totals{align-items:center;gap:var(--space-4);flex-wrap:wrap;display:flex}.score-box{flex-direction:column;align-items:center;display:flex}.score-label{color:var(--ink-muted);font-size:var(--text-sm);font-weight:600}.score-number{font-family:var(--font-heading);font-variant-numeric:tabular-nums;font-size:3.5rem;font-weight:700;line-height:1}.score-number.is-retest{color:var(--accent)}.score-breakdown{gap:var(--space-3);flex-direction:column;display:flex}.score-note{color:var(--ink-muted);margin:0;font-size:.75rem;line-height:1.4}.bar-hint{color:var(--ink-muted);font-size:.7rem;font-weight:500;display:block}.score-arrow{color:var(--ink-muted);font-size:var(--text-xl)}.change-badge{padding:var(--space-2) var(--space-4);border:2px solid var(--ink-muted);border-radius:var(--radius);font-family:var(--font-heading);font-size:var(--text-xl);flex-direction:column;align-items:center;font-weight:700;line-height:1.1;display:flex}.change-badge.is-up{border-color:var(--success);background:var(--success);color:var(--ink)}.change-word{font-family:var(--font-ui);font-size:.75rem;font-weight:600}.score-bars{gap:var(--space-3);flex-direction:column;margin:0;display:flex}.score-bar{gap:var(--space-3);grid-template-columns:130px 1fr;align-items:center;display:grid}.score-bar dt{font-weight:700}.score-bar dd{flex-direction:column;gap:4px;margin:0;display:flex}.bar-row{gap:var(--space-2);grid-template-columns:52px 1fr 44px;align-items:center;font-size:.75rem;display:grid}.bar-tag{color:var(--ink-muted)}.bar-value{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}.bar{background:var(--line);border-radius:999px;height:8px;overflow:hidden}.bar-fill{border-radius:inherit;background:var(--success);height:100%;transition:width .6s ease-out;display:block}.bar-fill.is-before{background:var(--ink-muted)}.report-columns{gap:var(--space-5);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.report-section{gap:var(--space-3);flex-direction:column;display:flex}.report-section h2{font-size:var(--text-lg)}.coach-list{gap:var(--space-2);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.coach-item{padding:var(--space-3) var(--space-4);border:1px solid var(--line);border-left:4px solid var(--ink-muted);border-radius:var(--radius-sm);background:var(--surface);flex-direction:column;gap:2px;display:flex}.coach-item.is-improved,.coach-item.is-good{border-left-color:var(--success)}.coach-item.is-not-yet{border-left-color:var(--warning)}.coach-status{font-size:var(--text-sm);font-weight:700}.report-replay{max-width:480px}.report-actions{gap:var(--space-3);flex-wrap:wrap;display:flex}.btn.level-up{border:2px solid var(--success)}@media (width<=760px){.report-drawings,.report-columns,.scores{grid-template-columns:1fr}}dialog.pipeline-panel{width:min(1180px, calc(100vw - 2 * var(--space-4)));max-height:calc(100vh - 2 * var(--space-4));padding:var(--space-5) 0;overflow-y:auto}.pipeline-header{justify-content:space-between;align-items:flex-start;gap:var(--space-4);padding:0 var(--space-5);display:flex}.pipeline-intro{max-width:62ch;margin-top:var(--space-2);color:var(--ink-muted)}.pipeline-strip{gap:var(--space-4);margin:var(--space-5) 0 0;padding:var(--space-2) var(--space-5) var(--space-4);scroll-snap-type:x mandatory;scroll-padding:0 var(--space-5);list-style:none;display:flex;overflow-x:auto}.pipeline-stage{gap:var(--space-3);padding:var(--space-4);border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);cursor:pointer;opacity:.7;scroll-snap-align:center;transition:opacity var(--transition), border-color var(--transition), box-shadow var(--transition);flex-direction:column;flex:0 0 min(400px,82vw);display:flex}.pipeline-stage.is-active{border:2px solid var(--accent);box-shadow:var(--shadow);cursor:default;opacity:1}.pipeline-stage h3{font-size:var(--text-lg)}.stage-number{color:var(--accent);font-size:var(--text-sm);letter-spacing:.03em;text-transform:uppercase;font-weight:700}.stage-prompt{padding:var(--space-4);border-left:4px solid var(--accent);border-radius:var(--radius-sm);background:var(--paper);font-family:var(--font-heading);font-size:var(--text-xl);margin:0}.stage-text{color:var(--ink-muted);font-size:var(--text-sm)}.stage-text code{word-break:break-word;font-size:.8rem}.stage-text-label{font-weight:600}.stage-visual{border-radius:var(--radius-sm);background:var(--paper)}.stage-grid{gap:var(--space-2);padding:var(--space-2);grid-template-columns:repeat(2,1fr);display:grid}.stage-image{margin:0;position:relative}.stage-image img{aspect-ratio:1;object-fit:contain;border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;width:100%}.stage-image.is-chosen img{border:3px solid var(--accent)}.chosen-badge{top:var(--space-2);left:var(--space-2);padding:2px var(--space-2);background:var(--accent);color:var(--accent-ink);border-radius:999px;font-size:.75rem;font-weight:700;position:absolute}.lesson-animation{aspect-ratio:1;border-radius:var(--radius-sm);background:#fff;width:100%;display:block}.lesson-animation-target{opacity:.12}.lesson-stroke{fill:none;stroke-width:5px;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1px;animation:.32s ease-out forwards lesson-draw;animation-delay:var(--delay)}.lesson-badge{opacity:0;animation:.2s ease-out forwards lesson-fade;animation-delay:var(--delay)}.lesson-badge circle{stroke:#fff;stroke-width:2px}.lesson-badge text{fill:#fff;font-family:var(--font-ui);text-anchor:middle;dominant-baseline:central;font-size:15px;font-weight:700}.lesson-stroke.tier-construction{stroke:var(--tier-construction);stroke-width:4px}.lesson-stroke.tier-outline{stroke:var(--tier-outline)}.lesson-stroke.tier-structure{stroke:var(--tier-structure)}.lesson-stroke.tier-detail{stroke:var(--tier-detail);stroke-width:4px}.lesson-badge.tier-construction circle{fill:var(--tier-construction)}.lesson-badge.tier-outline circle{fill:var(--tier-outline)}.lesson-badge.tier-structure circle{fill:var(--tier-structure)}.lesson-badge.tier-detail circle{fill:var(--tier-detail)}@keyframes lesson-draw{to{stroke-dashoffset:0}}@keyframes lesson-fade{to{opacity:1}}@media (prefers-reduced-motion:reduce){.lesson-stroke{stroke-dashoffset:0;animation:none}.lesson-badge{opacity:1;animation:none}}.tier-legend{gap:var(--space-2) var(--space-4);font-size:var(--text-sm);flex-wrap:wrap;margin:0;padding:0;list-style:none;display:flex}.tier-legend li{align-items:center;gap:var(--space-2);display:inline-flex}.tier-swatch{border-radius:3px;width:18px;height:6px}.tier-swatch.tier-construction{background:var(--tier-construction)}.tier-swatch.tier-outline{background:var(--tier-outline)}.tier-swatch.tier-structure{background:var(--tier-structure)}.tier-swatch.tier-detail{background:var(--tier-detail)}.pipeline-nav{justify-content:center;align-items:center;gap:var(--space-4);padding:0 var(--space-5);display:flex}.pipeline-dots{gap:var(--space-2);display:flex}.pipeline-dots .dot{border:2px solid var(--ink-muted);cursor:pointer;background:0 0;border-radius:50%;width:12px;height:12px;padding:0}.pipeline-dots .dot.is-active{border-color:var(--accent);background:var(--accent);border-radius:999px;width:28px}.pipeline-dots .dot:focus-visible{box-shadow:var(--focus-ring);outline:none}.redraw-card{align-items:flex-start;gap:var(--space-3);padding:var(--space-4);border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);flex-direction:column;display:flex}.redraw-card p{margin:0}.redraw-note{color:var(--ink-muted);font-size:var(--text-sm)}.reference-redrawing{aspect-ratio:1;place-items:center;display:grid}.reference-side{gap:var(--space-5);flex-direction:column;display:flex}.time-picker{gap:var(--space-3);padding:var(--space-4);border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);flex-direction:column;margin:0;display:flex}.time-picker legend{float:left;width:100%;padding:0;font-weight:700}.time-options{border-radius:var(--radius);background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;padding:4px;display:grid}.time-option{min-height:44px;padding:0 var(--space-2);border-radius:var(--radius-sm);color:var(--ink-muted);font-size:var(--text-sm);white-space:nowrap;cursor:pointer;transition:background-color var(--transition), color var(--transition), box-shadow var(--transition);justify-content:center;align-items:center;font-weight:500;display:inline-flex;position:relative}@media (hover:hover){.time-option:hover{background:var(--surface);color:var(--ink)}}.time-option input{opacity:0;pointer-events:none;width:1px;height:1px;margin:0;position:absolute}.time-option.is-active{background:var(--ink);color:var(--paper);font-weight:700;box-shadow:0 1px 2px #1c1b1933,0 4px 10px #1c1b191f}.time-option:focus-within{box-shadow:var(--focus-ring)}.time-picker:disabled .time-option{cursor:not-allowed;opacity:.6}.time-custom{align-items:center;gap:var(--space-3);flex-wrap:wrap;display:flex}.time-custom-field{align-items:center;gap:var(--space-2);min-height:44px;padding:0 var(--space-3);border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink-muted);font-size:var(--text-sm);transition:border-color var(--transition), box-shadow var(--transition);display:inline-flex}.time-custom-field:focus-within{border-color:var(--accent);box-shadow:var(--focus-ring)}.time-custom-field.is-problem{border-color:var(--warning)}.time-custom-field input{width:3.25rem;color:var(--ink);font:inherit;font-size:var(--text-md);font-variant-numeric:tabular-nums;background:0 0;border:0;outline:none;padding:0;font-weight:700}.time-hint{color:var(--ink-muted);font-size:var(--text-sm);margin:0;font-weight:400}.time-hint.is-problem{color:var(--warning-ink);font-weight:600}.time-hint.is-problem:before{content:"⚠ "}.time-summary{color:var(--ink-muted);font-size:var(--text-sm);margin:0}.report-timing{margin-right:auto}.ghost-swap{pointer-events:none;position:absolute;inset:0}.ghost-swap.is-out{animation:.4s ease-out forwards ghost-swap-out}.ghost-swap.is-in{animation:.4s ease-out ghost-swap-in}@keyframes ghost-swap-out{to{opacity:0}}@keyframes ghost-swap-in{0%{opacity:0}}.teach-toast.is-happy{border-left-color:var(--success)}.teach-redrawing{top:var(--space-3);right:var(--space-3);padding:var(--space-1) var(--space-3);border:1px solid var(--line);background:var(--paper);color:var(--ink-muted);font-size:var(--text-sm);pointer-events:none;border-radius:999px;margin:0;position:absolute}@media (width<=560px){.time-options{grid-template-columns:repeat(3,minmax(0,1fr))}}.trace-layer,.assist-layer{pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.trace-layer polyline{fill:none;stroke:var(--ink);stroke-width:2.5px;stroke-linecap:round;stroke-linejoin:round}.trace-move{transform-origin:0 0;transition:transform .3s cubic-bezier(.33,1,.68,1)}.trace-layer{transition:opacity .4s ease-out}.assist-layer path{fill:var(--ink);opacity:.35}.teach-actions{gap:var(--space-2);grid-template-columns:1fr 1fr;display:grid}.teach-actions .btn{padding-inline:var(--space-2);white-space:nowrap}@media (width<=520px){.subject-grid{gap:var(--space-3);grid-template-columns:repeat(2,minmax(0,1fr))}.subject-card{padding:var(--space-2)}.subject-title{font-size:var(--text-base)}.ai-badge{font-size:.65rem}}.panel-sublabel{font-weight:400}.photo-pick{cursor:pointer;align-self:flex-start}.photo-pick:focus-within{box-shadow:var(--focus-ring)}.photo-pick.is-disabled{cursor:not-allowed;opacity:.5}.photo-row{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.photo-preview{border-radius:var(--radius-sm);object-fit:cover;border:1px solid var(--line);width:48px;height:48px}.photo-name{max-width:14rem;color:var(--ink-muted);font-size:var(--text-sm);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}:root{--paper:#faf7f2;--ink:#1c1b19;--ink-muted:#5f5b54;--line:#e4ded3;--surface:#fff;--accent:#3b6cff;--accent-ink:#fff;--success:#2e9e6a;--warning:#f27a5e;--warning-ink:#a63b22;--warning-tint:#fef2ee;--ghost-opacity:.3;--tier-construction:var(--accent);--tier-outline:var(--ink);--tier-structure:var(--success);--tier-detail:var(--warning);--font-heading:"Fraunces", Georgia, "Times New Roman", serif;--font-ui:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--text-sm:.875rem;--text-md:1rem;--text-lg:1.25rem;--text-xl:2rem;--text-2xl:2.75rem;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--radius:12px;--radius-sm:8px;--shadow:0 1px 2px #1c1b190f, 0 4px 16px #1c1b190f;--focus-ring:0 0 0 3px var(--paper), 0 0 0 5px var(--accent);--transition:.2s ease-out}@media (prefers-reduced-motion:reduce){:root{--transition:0s}}*,:before,:after{box-sizing:border-box}html,body{margin:0}html{scrollbar-gutter:stable}body{background:var(--paper);min-height:100vh;color:var(--ink);font-family:var(--font-ui);font-size:var(--text-md);-webkit-font-smoothing:antialiased;line-height:1.5}h1,h2,h3{font-family:var(--font-heading);margin:0;font-weight:600;line-height:1.15}h1{font-size:var(--text-2xl)}h2{font-size:var(--text-xl)}h3{font-size:var(--text-lg)}p{margin:0}img{max-width:100%;display:block}[tabindex="-1"]:focus{outline:none}.btn{justify-content:center;align-items:center;gap:var(--space-2);min-height:44px;padding:var(--space-2) var(--space-5);border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--ink);font:inherit;cursor:pointer;transition:background-color var(--transition), border-color var(--transition), transform var(--transition);font-weight:600;display:inline-flex}.btn:hover{border-color:var(--ink-muted)}.btn:active{transform:translateY(1px)}.btn:focus-visible{box-shadow:var(--focus-ring);outline:none}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{border-color:var(--accent);background:var(--accent);color:var(--accent-ink)}.btn-primary:hover{border-color:var(--ink)}.btn-quiet{background:0 0;border-color:#0000}.screen{gap:var(--space-5);max-width:1200px;padding:var(--space-5) var(--space-5) var(--space-7);flex-direction:column;margin:0 auto;display:flex}.screen-intro{gap:var(--space-2);flex-direction:column;display:flex}.screen-lead{max-width:60ch;color:var(--ink-muted);font-size:var(--text-lg)}.screen-body{gap:var(--space-4);flex-direction:column;display:flex}.screen-nav{justify-content:space-between;gap:var(--space-3);flex-wrap:wrap;display:flex}.screen-nav-end{gap:var(--space-3);flex-wrap:wrap;margin-left:auto;display:flex}.notice{padding:var(--space-4);border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}dialog{width:min(720px, calc(100vw - 2 * var(--space-5)));max-height:calc(100vh - 2 * var(--space-6));padding:var(--space-6);border-radius:var(--radius);background:var(--paper);color:var(--ink);box-shadow:var(--shadow);border:none}dialog::backdrop{background:#1c1b1973}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.app-header{justify-content:space-between;align-items:center;gap:var(--space-4);max-width:1200px;padding:var(--space-4) var(--space-5) 0;flex-wrap:wrap;margin:0 auto;display:flex}.brand{align-items:center;gap:var(--space-2);min-height:44px;padding:0 var(--space-2);margin-left:calc(-1 * var(--space-2));border-radius:var(--radius-sm);color:var(--ink);font-family:var(--font-heading);font-size:var(--text-lg);cursor:pointer;background:0 0;border:none;font-weight:700;display:inline-flex}.brand:focus-visible{box-shadow:var(--focus-ring);outline:none}.stage-track{gap:var(--space-2);margin:0;padding:0;list-style:none;display:flex}.stage-track li{align-items:center;gap:var(--space-2);padding:var(--space-1) var(--space-3) var(--space-1) var(--space-1);color:var(--ink-muted);font-size:var(--text-sm);border-radius:999px;display:inline-flex}.stage-dot{border:1px solid var(--line);background:var(--surface);border-radius:50%;place-items:center;width:24px;height:24px;font-size:.75rem;font-weight:700;display:grid}.stage-track li.is-done .stage-dot{border-color:var(--success);background:var(--success);color:#fff}.stage-track li.is-current{background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 2px var(--accent);font-weight:700}.stage-track li.is-current .stage-dot{border-color:var(--accent);background:var(--accent);color:var(--accent-ink)}@media (width<=560px){.stage-track li:not(.is-current) .stage-label{display:none}}.screen-enter{animation:.2s ease-out screen-in}@keyframes screen-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}.crash-screen{align-items:flex-start}