:root{--paper: #ffffff;--page: #f3f0ea;--ink: #1f2933;--muted: #5c6670;--line: #d6d1c7;--accent: #3350d6;--accent-soft: #e5e9fb;--warning-bg: #fdf0d5;--warning-line: #c08a1e;--tap: 48px;--radius: 12px}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--page);color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:16px;line-height:1.45}.shell{height:100%;padding:12px}.shell:has(>.pad){overflow:hidden}.shell--centered{display:grid;place-content:center;text-align:center;gap:12px}.lesson-picker{max-width:1100px;margin:0 auto;padding:clamp(20px,5vw,64px)}.lesson-picker h1{margin:0;font-size:clamp(2rem,4vw,3rem)}.lesson-picker>p{font-size:1.125rem}.lesson-picker__choices{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:20px;margin-top:32px}.lesson-picker__choice{display:flex;flex-direction:column;align-items:center;gap:8px;min-height:300px;padding:20px;border:2px solid var(--line);border-radius:20px;background:var(--paper);color:var(--ink);font:inherit;cursor:pointer}.lesson-picker__choice:focus-visible{outline:3px solid var(--accent);outline-offset:3px}.lesson-picker__picture{width:100%;max-height:190px;flex:1;color:var(--accent)}.lesson-picker__name{font-size:1.5rem;font-weight:700}.lesson-picker__subtitle{color:var(--muted)}.pad{display:flex;flex-direction:column;gap:8px;height:100%;min-height:0}.pad__header{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}.pad__header>div{display:flex;align-items:baseline;gap:8px;min-width:0}.pad__title{font-size:1.25rem;margin:0}.pad__subtitle,.pad__status{color:var(--muted);font-size:.875rem;margin:0}.pad__body{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:12px;min-height:0;flex:1}.pad__stage{display:grid;place-items:center;min-height:0;min-width:0;background:var(--page)}.stage__frame{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.stage__canvas{display:block;touch-action:none}.guide-overlay{position:absolute;inset:0;pointer-events:none}.pad__side{display:flex;flex-direction:column;gap:6px;min-height:0;min-width:0;position:relative;overflow-y:auto;overscroll-behavior:contain}.pad__tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px}.pad__control-panel[data-active=false]{display:none}.pad__control-panel{flex:none;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:4px 6px;display:flex;flex-direction:column;gap:4px}.step-panel{display:grid;grid-template-columns:minmax(0,1fr) 132px;align-items:center;gap:16px;min-height:0;padding:8px 12px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius)}.toolbar,.step-controls{display:flex;flex-direction:column;gap:4px}.step-panel__counter{margin:0;color:var(--muted);font-size:.8125rem;text-transform:uppercase;letter-spacing:.04em}.step-panel__instruction{margin:2px 0 0;font-size:1.25rem;line-height:1.25}.step-panel__hint{margin:2px 0 0;color:var(--muted);font-size:.875rem}.step-panel__nav{display:flex;gap:8px}.step-panel__nav .button{flex:1}.step-panel__group,.toolbar__group{border:0;border-top:1px solid var(--line);padding:2px 0 0;margin:0;display:flex;flex-wrap:wrap;gap:4px}.step-panel__group{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.step-panel__group>.field{grid-column:1 / -1}.step-panel__group legend,.toolbar__group legend{font-size:.8125rem;font-weight:600;color:var(--muted);padding:0 4px}.step-controls .step-panel__group{border-top:0;padding-top:0}.step-controls legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.target-preview{width:100%;height:auto;background:var(--paper)}.radio{display:flex;align-items:flex-start;gap:8px;width:100%;min-height:var(--tap);cursor:pointer}.radio input{width:22px;height:22px;margin-top:4px;flex:none}.radio small{display:block;color:var(--muted);font-size:.75rem;line-height:1.2}.toolbar__group .chip{flex:1;padding-inline:4px}.toolbar__group .swatches{display:grid;grid-template-columns:repeat(5,var(--tap));justify-content:space-between;gap:4px}.toolbar__row{display:grid;grid-template-columns:3fr 2fr;gap:6px}.toolbar__row .toolbar__group{flex-wrap:nowrap;min-width:0}.toolbar__row .chip{min-width:0}.toolbar:not(.toolbar--settings) legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.toolbar:not(.toolbar--settings) .toolbar__group{border-top:0;padding-top:0}.chip--icon{position:relative;display:flex;align-items:center;justify-content:center;font-size:1.5rem;line-height:1}.chip--icon[aria-pressed=true]:after{position:absolute;top:1px;right:3px;font-size:.75rem;line-height:1}.width-icon{display:block;width:26px;border-radius:999px;background:currentColor}.field{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;font-size:.875rem;color:var(--muted)}.field select{min-height:var(--tap);font-size:1rem;border-radius:8px;border:1px solid var(--line);padding:0 8px;background:var(--paper);color:var(--ink)}.button,.chip{min-height:var(--tap);padding:0 14px;border-radius:10px;border:1px solid var(--line);background:var(--paper);color:var(--ink);font:inherit;cursor:pointer}.button--primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}.button:disabled,.chip:disabled{opacity:.45;cursor:not-allowed}.chip[aria-pressed=true]{background:var(--accent-soft);border-color:var(--accent);border-width:2px;font-weight:600}.chip[aria-pressed=true]:after{content:" ✓"}.swatches{display:flex;flex-wrap:wrap;gap:6px;width:100%}.swatch{width:var(--tap);height:var(--tap);border-radius:50%;border:2px solid var(--line);cursor:pointer}.swatch[aria-pressed=true]{border-color:var(--ink);border-width:4px;outline:2px solid var(--accent);outline-offset:2px}.toolbar__readout{width:100%;margin:0;font-size:.875rem}.toolbar__readout--muted{color:var(--muted);font-size:.75rem;line-height:1.25}.dot{display:inline-block;width:14px;height:14px;border-radius:50%;border:1px solid var(--line);vertical-align:-2px}:is(.button,.chip,.swatch,input,select):focus-visible{outline:3px solid var(--accent);outline-offset:2px}.banner{margin:0;padding:8px 12px;border-radius:10px;border:1px solid var(--line);background:var(--accent-soft);font-size:.9375rem}.banner--warning{background:var(--warning-bg);border-color:var(--warning-line)}.finish{display:flex;flex-direction:column;gap:12px;align-items:center;height:100%;overflow-y:auto;text-align:center}.finish__title{margin:0}.finish__lead{margin:0;color:var(--muted)}.finish__preview{width:100%;display:flex;align-items:center;justify-content:center;min-height:0;flex:1}.finish__canvas{max-width:100%;max-height:100%;width:auto;height:auto;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius)}.finish__actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.finish__choice{display:grid;gap:12px}.finish__choice h2{margin:0}.finish__choice .button{min-height:64px;padding:12px 20px;font-weight:600}@media(orientation:portrait){.pad__body{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto}.pad__side{max-height:50vh}}@media(orientation:landscape)and (max-height:619px){.pad__body{grid-template-columns:minmax(0,1fr) 548px}}@media(orientation:portrait),(max-height:619px){.pad__side{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;align-items:start}.pad__control-panel{grid-column:1 / -1;flex-direction:row;align-items:start}.pad__control-panel>*{flex:1;min-width:0}.toolbar:not(.toolbar--settings){display:grid;grid-template-columns:minmax(0,1fr) calc(var(--tap) * 5 + 16px);grid-template-areas:"tool color" "row color";align-items:start}.toolbar:not(.toolbar--settings)>:nth-child(1){grid-area:tool}.toolbar__group--color{grid-area:color}.toolbar__row{grid-area:row}}