:root{--bg: #fff8ef;--surface: #ffffff;--soft: #ffeedd;--tile: #fff1e4;--line: #efe3d2;--line-strong: #e3d3be;--track: #f3e7d7;--ink: #2b2622;--sub: #5a5048;--primary: #c2410c;--primary-ink: #ffffff;--primary-dark: #9a3412;--accent: #1d5fa8;--accent-soft: #e3eefa;--good: #3e9a5b;--good-ink: #2d7044;--good-soft: #e2f2e7;--shadow: 0 4px 16px rgba(120, 80, 40, .08);--shadow-lift: 0 8px 24px rgba(120, 80, 40, .14);--radius: 24px;--pill: 999px;--tap: 56px;--board-bg: #fff8ef;--board-empty: #ffffff;--board-highlight: #ece4d8;--board-hatch: #cfc3b2;--board-grid: rgba(43, 38, 34, .16);--board-ink: #2b2622;--board-ink-soft: #8a7e72;--thumb-empty: #f6eee3;--font-ui: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;--font-digit: "Atkinson Hyperlegible", "Nunito", system-ui, sans-serif;--font-mono: "Atkinson Hyperlegible", "Nunito", system-ui, sans-serif;color-scheme:light}*{box-sizing:border-box}html,body{height:100%}body{margin:0;font:500 18px/1.55 var(--font-ui);color:var(--ink);background:var(--bg);-webkit-tap-highlight-color:transparent}img,canvas{max-width:100%}[hidden]{display:none!important}a{color:var(--accent)}h1,h2,.h2{font-family:var(--font-ui);font-weight:900;line-height:1.2;text-wrap:balance;margin:0;letter-spacing:-.01em}h1{font-size:clamp(30px,4vw,40px)}h2,.h2{font-size:28px}p{margin:0}:focus,:focus-visible{outline:none}.muted{color:var(--sub)}.small{font-size:16px}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.wrap{max-width:1200px;margin-inline:auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--tap);padding:0 26px;border-radius:var(--pill);font:800 20px/1 var(--font-ui);text-decoration:none;cursor:pointer;white-space:nowrap;border:2px solid transparent;transition:transform .08s,background .15s,box-shadow .15s}.btn svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;flex:none}.btn:active{transform:translateY(1px)}.btn-primary{background:var(--primary);color:var(--primary-ink)}.btn-primary:hover{background:var(--primary-dark)}.btn-secondary{background:var(--accent);color:#fff}.btn-secondary:hover{background:#174c86}.btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--line-strong)}.btn-ghost:hover{border-color:var(--sub)}.btn-small{min-height:var(--tap);padding:0 20px;font-size:18px}.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}.site-header{background:var(--surface);border-bottom:2px solid var(--line)}.header-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px}.logo{display:inline-flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none}.logo-mark{flex:none}.logo-word{font:900 26px/1 var(--font-ui);letter-spacing:-.01em}.main-nav{display:flex;align-items:center;gap:8px}.nav-link{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 22px;border-radius:var(--pill);color:var(--ink);font:700 20px/1 var(--font-ui);text-decoration:none;white-space:nowrap}.nav-link:hover{background:var(--bg)}.nav-link[aria-current]{background:var(--soft);font-weight:800}.intro{padding-block:36px 8px;display:grid;gap:8px}.lede{font-size:20px;color:var(--sub);max-width:60ch}.gallery{display:grid;gap:20px;padding-block:20px 40px}.tabs{display:flex;gap:8px;flex-wrap:wrap}.tabs button{min-height:var(--tap);padding:0 22px;border-radius:var(--pill);border:0;background:none;cursor:pointer;font:700 20px/1 var(--font-ui);color:var(--sub)}.tabs button:hover{color:var(--ink)}.tabs button[aria-selected=true]{background:var(--soft);color:var(--ink);font-weight:800}.chips{display:flex;gap:12px;flex-wrap:wrap}.chip{min-height:var(--tap);padding:0 24px;border-radius:var(--pill);cursor:pointer;border:2px solid var(--line-strong);background:var(--surface);color:var(--ink);font:700 20px/1 var(--font-ui)}.chip:hover{border-color:var(--sub)}.chip[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:800}.note{font-size:18px;color:var(--sub)}.note:empty{display:none}.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}.card{display:flex;flex-direction:column;min-width:0;overflow:hidden;background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);color:var(--ink);text-decoration:none;transition:transform .15s,box-shadow .15s}@media (hover: hover){a.card:hover,.card-saved:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}}.thumb-wrap{position:relative;display:block;aspect-ratio:5 / 4;background:#fffdf9;border-bottom:2px solid var(--line)}.card-open{all:unset;cursor:pointer}.card-open.thumb-wrap{position:relative;display:block;width:100%;aspect-ratio:5 / 4}.thumb{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;padding:10px;background:transparent}.card-body{display:flex;flex-direction:column;gap:8px;padding:14px 18px 18px}.card-title-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.card-title{font:800 20px/1.25 var(--font-ui)}.card-meta{font:700 16px/1.35 var(--font-ui);color:var(--sub)}.badge{font:800 15px/1 var(--font-ui);border-radius:12px;padding:5px 10px;white-space:nowrap}.badge-easy{color:var(--accent);background:var(--accent-soft)}.badge-done{color:var(--good-ink);background:var(--good-soft)}.bar{display:block;height:10px;border-radius:5px;background:var(--track);overflow:hidden}.bar span{display:block;height:100%;border-radius:5px;background:var(--good)}.card-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}.photo-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:260px;padding:24px;text-align:center;cursor:pointer;background:var(--tile);border:3px dashed #e8a57f;border-radius:var(--radius);color:var(--ink)}.photo-tile svg{width:56px;height:56px;fill:none;stroke:var(--primary);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}.photo-tile-title{font:900 22px/1.2 var(--font-ui)}.photo-tile-note{font:700 17px/1.4 var(--font-ui);color:var(--sub)}.photo-tile:hover,.photo-tile.over{background:#ffe7d3;border-color:var(--primary)}.section{padding-block:32px;display:grid;gap:20px}.steps{margin:0;padding:0;list-style:none;counter-reset:s;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.steps li{counter-increment:s;background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;font-size:18px;color:var(--sub)}.steps li:before{content:counter(s);display:grid;place-items:center;width:44px;height:44px;margin-bottom:12px;border-radius:50%;background:var(--soft);color:var(--primary);font:700 24px/1 var(--font-digit)}.steps strong{display:block;color:var(--ink);font-size:20px;font-weight:800}.about{grid-template-columns:1fr 1fr;gap:40px;align-items:start}.about h2{margin-bottom:12px;font-size:26px}.about p{color:var(--sub)}.cat-list{margin:0;display:grid;grid-template-columns:max-content 1fr;gap:8px 16px}.cat-list dt{font-weight:800}.cat-list dd{margin:0;color:var(--sub)}.site-footer{margin-top:24px;background:var(--surface);border-top:2px solid var(--line);padding-block:24px 40px;font-size:16px;color:var(--sub)}.loading{padding-block:48px;display:grid;gap:16px;justify-items:start}.create{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:start;padding-block:28px 48px}.preview-pane{display:grid;gap:10px;position:sticky;top:16px;min-width:0}.preview-frame{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:14px;display:grid;place-items:center}#preview{width:100%;height:auto;max-height:70vh;object-fit:contain;image-rendering:pixelated}.controls{display:grid;gap:20px;min-width:0}.field{display:grid;gap:8px;border:0;padding:0;margin:0}.field>span,.field legend{font-weight:800;font-size:20px;display:flex;justify-content:space-between;gap:8px;padding:0}.field output{font:700 17px var(--font-ui);color:var(--sub)}input[type=text]{min-height:var(--tap);padding:0 16px;border:2px solid var(--line-strong);border-radius:16px;background:var(--surface);color:var(--ink);font:600 20px var(--font-ui)}input[type=text]:focus{border-color:var(--sub)}input[type=range]{width:100%;height:36px;accent-color:var(--primary)}.segmented{display:inline-flex;gap:6px;padding:5px;background:var(--surface);border:2px solid var(--line-strong);border-radius:var(--pill);width:max-content}.segmented input{position:absolute;opacity:0;pointer-events:none}.segmented label{display:inline-flex;align-items:center;min-height:46px;padding:0 22px;border-radius:var(--pill);cursor:pointer;font-weight:800;font-size:19px}.segmented input:checked+label{background:var(--ink);color:#fff}body.is-playing #app{min-height:100%}.play-header{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:12px max(20px,env(safe-area-inset-right,0px)) 12px max(20px,env(safe-area-inset-left,0px));background:var(--surface);border-bottom:2px solid var(--line)}.back-pill{justify-self:start;display:inline-flex;align-items:center;gap:8px;min-height:var(--tap);padding:0 22px 0 14px;border-radius:var(--pill);background:var(--soft);color:var(--ink);font:800 20px/1 var(--font-ui);text-decoration:none}.back-pill:hover{background:#ffe3c8}.back-pill svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}.play-title{display:flex;align-items:center;gap:18px;min-width:0}.play-name{font:900 26px/1.2 var(--font-ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.play-progress{display:inline-flex;align-items:center;gap:10px;flex:none}.progress-track{width:200px;height:14px;border-radius:7px;background:var(--track);overflow:hidden}.progress-track span{display:block;height:100%;width:0;border-radius:7px;background:var(--good);transition:width .25s}#pct{font:900 20px/1 var(--font-ui);min-width:3.2ch;font-variant-numeric:tabular-nums}.play{height:calc(100vh - 82px);height:calc(100dvh - 82px);min-height:460px;display:flex;flex-direction:column}.board-wrap{position:relative;flex:1;min-height:0;background:var(--board-bg)}#board{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:grab;display:block}.fabs{position:absolute;right:max(24px,env(safe-area-inset-right,0px));top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:14px}.fab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:88px;min-height:80px;padding:10px 0;border:0;border-radius:22px;cursor:pointer;background:var(--surface);color:var(--ink);box-shadow:0 4px 14px #7850281f;font:800 16px/1.1 var(--font-ui);transition:transform .1s,box-shadow .15s}.fab svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}.fab .ic-hint{stroke:var(--primary)}.fab:hover{box-shadow:0 6px 20px #78502833}.fab:active{transform:scale(.96)}.fab:disabled{color:#a99d90;cursor:default;box-shadow:0 2px 8px #78502814}.palette-dock{display:flex;justify-content:center;padding:6px 16px max(18px,env(safe-area-inset-bottom,0px));background:var(--board-bg)}.palette{display:flex;align-items:center;gap:16px;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;padding:16px 26px;background:var(--surface);border-radius:56px;box-shadow:0 4px 20px #7850281a;scrollbar-width:thin;scroll-snap-type:x proximity}.swatch{position:relative;flex:0 0 auto;width:72px;height:72px;margin:6px;border-radius:50%;padding:0;cursor:pointer;display:grid;place-items:center;background:var(--sw);border:2px solid rgba(0,0,0,.12);scroll-snap-align:center;transition:transform .12s}.swatch:hover:not(.is-selected){transform:scale(1.05)}.sw-num{font:700 26px/1 var(--font-digit)}.swatch[data-tone=dark]{color:#fff}.swatch[data-tone=light]{color:var(--ink)}.swatch.is-selected{width:84px;height:84px;margin:0;border:0;box-shadow:0 0 0 5px #fff,0 0 0 9px var(--ink);margin-inline:4px}.swatch.is-selected .sw-num{font-size:30px}.sw-check{display:none;width:32px;height:32px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.swatch.is-done .sw-num{display:none}.swatch.is-done .sw-check{display:block}.more{padding-block:32px 48px}.pic-info{display:grid;gap:12px;max-width:760px}.pic-info h1{font-size:30px}.pic-info h1 .muted{font-size:22px;font-weight:700}.pic-info p{color:var(--sub)}.pic-info .card-meta{font-size:17px}.done-layer{position:fixed;inset:0;background:#2b262273;display:grid;place-items:center;padding:16px;z-index:20}.done-card{background:var(--surface);border-radius:28px;padding:28px;display:grid;gap:16px;width:min(560px,100%);max-height:100%;overflow:auto;box-shadow:var(--shadow-lift)}#done-img{width:100%;border-radius:16px;border:2px solid var(--line)}@media (max-width: 1000px){.cards{grid-template-columns:repeat(3,minmax(0,1fr))}.progress-track{width:140px}}@media (max-width: 820px){.about,.create{grid-template-columns:1fr;gap:28px}.steps{grid-template-columns:1fr}.cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.preview-pane{position:static}.main-nav .nav-link:not([aria-current]){display:none}.play-header{grid-template-columns:auto 1fr}.play-spacer{display:none}.play-title{justify-content:flex-end}}@media (max-width: 600px){.header-row{padding-block:10px}.logo-word{font-size:22px}.logo-mark{width:38px;height:38px}.main-nav .nav-link{display:none}.main-nav .btn{padding:0 18px;font-size:18px}.main-nav .btn span{display:none}.main-nav .btn svg{width:28px;height:28px}.cards{gap:12px}.card-body{padding:12px 14px 14px}.card-title{font-size:18px}.card-meta{font-size:15px}.photo-tile{min-height:220px;padding:16px}.photo-tile-note{font-size:15px}.play-header{gap:10px;padding-inline:12px}.play-title{flex-direction:column;align-items:flex-end;gap:6px}.play-name{font-size:20px;max-width:100%}.progress-track{width:110px;height:12px}#pct{font-size:18px}.play{height:calc(100vh - 92px);height:calc(100dvh - 92px)}.fabs{right:10px;gap:10px}.fab{width:68px;min-height:64px;padding:8px 0;font-size:15px;border-radius:18px}.fab svg{width:26px;height:26px}.palette-dock{padding-inline:8px}.palette{gap:8px;padding:12px 14px}}@media (prefers-reduced-motion: reduce){*{transition:none!important;scroll-behavior:auto!important}}.play-header{padding-top:6px;padding-bottom:6px}.back-pill{min-height:44px;padding:0 18px 0 10px;font-size:18px}.back-pill svg{width:22px;height:22px}.play-name{font-size:22px}.progress-track{height:12px}#pct{font-size:18px}.play{height:calc(100vh - 58px);height:calc(100dvh - 58px)}.palette-dock{padding:4px 16px max(10px,env(safe-area-inset-bottom,0px))}.palette{gap:10px;padding:8px 18px}.swatch{width:52px;height:52px;margin:5px}.sw-num{font-size:21px}.swatch.is-selected{width:60px;height:60px;margin:1px 4px;box-shadow:0 0 0 3px #fff,0 0 0 6px var(--ink)}.swatch.is-selected .sw-num{font-size:24px}.sw-check{width:26px;height:26px}@media (max-width: 600px){.play-header{padding-top:6px;padding-bottom:6px}.play-title{flex-direction:row;align-items:center;gap:8px}.play-name{font-size:18px}.progress-track{width:70px;height:10px}#pct{font-size:16px}.play{height:calc(100vh - 58px);height:calc(100dvh - 58px)}.palette{gap:6px;padding:6px 10px}}.swatch{width:56px;height:56px;margin:4px}.sw-num{font-size:22px}.swatch.is-selected{width:64px;height:64px;margin:0 4px}.swatch.is-selected .sw-num{font-size:25px}.play-name{font-size:20px}.header-row{padding-block:8px}.logo-mark{width:38px;height:38px}.logo-word{font-size:24px}.main-nav .nav-link,.main-nav .btn{min-height:48px}:root{--board-highlight: #f2f2f2;--board-hatch: #d4d4d4}.palette-dock{padding:6px 16px max(12px,env(safe-area-inset-bottom,0px));background:linear-gradient(transparent,var(--surface))}.palette{gap:22px;padding:10px 14px;background:none;box-shadow:none;border-radius:0}.swatch{width:52px;height:52px;margin:0;border:1.5px solid color-mix(in srgb,var(--sw) 82%,#000);transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .2s}.sw-num{font:600 26px/1 var(--font-ui)}.swatch[data-tone=light]{color:#111}.swatch.is-selected{width:52px;height:52px;margin:0;border:1.5px solid color-mix(in srgb,var(--sw) 82%,#000);transform:scale(1.12);box-shadow:0 0 0 7px color-mix(in srgb,color-mix(in srgb,var(--sw) 55%,#000) 60%,transparent)}.swatch.is-selected .sw-num{font-size:28px}@media (max-width: 600px){.palette{gap:16px;padding:10px 12px}}:root{--board-hatch: #cfcfcf;--board-ink: #111111}.palette-dock{background:var(--surface);border-top:1px solid var(--line);padding-top:8px}.swatch,.swatch.is-selected{border:2px solid color-mix(in srgb,var(--sw) 85%,#000)}.swatch[data-tone=light]{color:#1a1a1a}.swatch.is-selected{transform:scale(1.15);box-shadow:0 0 0 8px color-mix(in srgb,color-mix(in srgb,var(--sw) 60%,#000) 55%,transparent)}.palette{padding-block:14px}.palette-dock{padding-top:2px;padding-bottom:max(8px,env(safe-area-inset-bottom,0px))}.palette{padding-inline:18px}.progress-track span{width:var(--p, 0%)}@media (min-width: 601px){body.is-playing #app{display:grid;grid-template-columns:80px minmax(0,1fr)}body.is-playing .play-header{grid-column:1;grid-row:1;align-self:start;position:sticky;top:0;height:100vh;height:100dvh;display:flex;flex-direction:column;align-items:center;gap:18px;padding:12px 6px 16px;border-bottom:0;border-right:2px solid var(--line)}body.is-playing .back-pill{flex-direction:column;gap:2px;width:64px;min-height:64px;padding:6px 0;border-radius:20px;font-size:15px;justify-content:center}body.is-playing .back-pill svg{width:26px;height:26px}body.is-playing .play-title{flex:1;min-height:0;flex-direction:column;align-items:center;gap:14px}body.is-playing .play-name{writing-mode:vertical-rl;transform:rotate(180deg);font-size:18px;line-height:1.2;max-height:40%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}body.is-playing .play-progress{flex:1;min-height:0;flex-direction:column;align-items:center;gap:8px}body.is-playing .progress-track{width:12px;height:auto;flex:1;max-height:260px;display:flex;flex-direction:column;justify-content:flex-end}body.is-playing .progress-track span{width:100%;height:var(--p, 0%)}body.is-playing #pct{font-size:16px;min-width:0}body.is-playing .play-spacer{display:none}body.is-playing .play{grid-column:2;grid-row:1;height:100vh;height:100dvh}body.is-playing .more{grid-column:1 / -1;grid-row:2;width:100%}}.fabs{gap:16px}.fab{width:60px;height:60px;min-height:0;padding:0;border-radius:50%;gap:0;box-shadow:0 2px 5px #0000004d,inset -1px -1px 1px #00000014}.fab:hover{box-shadow:0 4px 10px #00000047,inset -1px -1px 1px #00000014}.fab:active{transform:translateY(1px) scale(.96)}.fab svg{width:28px;height:28px}#hint{margin-bottom:18px}@media (max-width: 600px){.fab{width:52px;height:52px;min-height:0;padding:0;border-radius:50%}.fab svg{width:24px;height:24px}#hint{margin-bottom:10px}}.fab{width:56px;height:56px}.palette-dock{padding:0;border-top:0;background:linear-gradient(#fff9,#fff)}.palette{justify-content:safe center;gap:0;min-height:80px;padding:0 8px;border-radius:0;background:none;box-shadow:none;scrollbar-width:none;scroll-snap-type:none}.palette::-webkit-scrollbar{display:none}.swatch,.swatch.is-selected{width:auto;height:76px;margin:0;padding:0 8px 0 0;border:0;border-radius:0;background:transparent;box-shadow:none;transform:none;color:inherit;display:block}.swatch:hover:not(.is-selected){transform:none}.sw-slot{position:relative;display:flex;align-items:center;justify-content:center;width:58px;max-width:58px;height:70px;opacity:1;overflow:visible;transition:max-width .32s cubic-bezier(.4,0,.2,1),margin-right .32s cubic-bezier(.4,0,.2,1),opacity .24s cubic-bezier(.4,0,.2,1)}.sw-shell{--size: 58px;position:relative;display:block;width:var(--size);height:var(--size);transform:scale(1);transform-origin:center bottom;transition:transform .38s cubic-bezier(.22,1,.36,1)}.swatch.is-selected .sw-shell{transform:scale(1.2)}.swatch:hover:not(.is-selected) .sw-shell{transform:scale(1.06)}.sw-fill{position:absolute;inset:4px;border-radius:50%;background:var(--sw);box-shadow:inset 0 0 0 1px #00000014}.sw-ring{position:absolute;inset:0;width:100%;height:100%;opacity:0;transform:scale(.85);transition:opacity .32s cubic-bezier(.33,1,.68,1),transform .32s cubic-bezier(.33,1,.68,1);pointer-events:none}.sw-ring circle{fill:none;stroke:color-mix(in srgb,var(--sw) 60%,#fff);stroke-width:4;stroke-dasharray:100;stroke-dashoffset:0;transform:scaleX(-1) rotate(-90deg);transform-origin:50% 50%;transition:stroke-dashoffset .22s linear}.swatch.is-selected .sw-ring{opacity:1;transform:scale(1)}.sw-num,.swatch.is-selected .sw-num{position:absolute;inset:4px;display:flex;align-items:center;justify-content:center;font:600 21px/1 Nunito,sans-serif;pointer-events:none}.swatch[data-tone=dark] .sw-num{color:#fff}.swatch[data-tone=light] .sw-num{color:#111}.swatch.is-done{opacity:1;pointer-events:none}.swatch.is-done .sw-slot{max-width:0;margin-right:-8px;opacity:0;overflow:hidden}.swatch.is-done .sw-num{display:flex}.sw-check{display:none!important}@media (max-width: 767px){.palette-dock{background:#f4f4f4}.palette{min-height:70px;height:70px;padding:0 8px}.swatch,.swatch.is-selected{padding-right:0;height:70px}.sw-shell{--size: 54px}}#board{cursor:pointer}#board.is-panning{cursor:grabbing}@media (min-width: 601px){body.is-playing .progress-track{display:none}body.is-playing .play-progress{flex:none}}.play-progress{display:none!important}:root{--board-bg: #ffffff;--board-ink: #111111;--font-mono: "Nunito", system-ui, sans-serif}.play{position:relative}.board-wrap{background:#fff}#board{--board-pad-bottom: 84px}.palette-dock{position:absolute;left:0;right:0;bottom:0;z-index:2;border-top:0;pointer-events:none;background:linear-gradient(#fff0,#ffffffd9 30%,#fff)}.palette{pointer-events:auto}.fabs{top:calc(50% - 42px)}@media (max-width: 767px){#board{--board-pad-bottom: 74px}.palette-dock{background:linear-gradient(#fff0,#ffffffe6 30%,#fff)}}.play.is-replaying .palette-dock,.play.is-replaying .fabs,.play.is-finished .palette-dock,.play.is-finished .fabs{display:none}.play.is-replaying #board{cursor:default}.finish-bar{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap;padding:18px 16px max(18px,env(safe-area-inset-bottom,0px));background:linear-gradient(#fff0,#ffffffe6 35%,#fff);animation:finish-in .35s ease-out}.finish-bar[hidden]{display:none}.finish-bar .btn{min-height:56px}@keyframes finish-in{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@media (max-width: 600px){.finish-bar{gap:8px;padding-inline:8px}.finish-bar .btn{padding:0 16px;font-size:17px;gap:6px}.finish-bar .btn svg{width:20px;height:20px}}.thumb.thumb-gray{filter:grayscale(1) contrast(.92) brightness(1.06)}.thumb.thumb-gray{filter:grayscale(1) brightness(1.15) contrast(.9)}.thumb.thumb-lines{mix-blend-mode:multiply}.thumb.thumb-lines{opacity:.45}.gallery{padding-top:20px}.intro.intro-below{padding-block:32px 0;border-top:2px solid var(--line);margin-top:8px}@media (max-width: 600px){.tabs,.chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-20px;padding-inline:20px}.tabs::-webkit-scrollbar,.chips::-webkit-scrollbar{display:none}.tabs button,.chip{flex:none}.gallery{gap:14px;padding-top:14px}}.filter-row{display:flex;align-items:center;gap:10px;overflow-x:auto;scrollbar-width:none}.filter-row::-webkit-scrollbar{display:none}.filter-row .tabs,.filter-row .chips{flex-wrap:nowrap;flex:none;margin:0;padding:0;overflow:visible;gap:6px}.filter-row .tabs button,.filter-row .chip{flex:none;min-height:48px;padding:0 18px;font-size:18px}.filter-sep{flex:none;width:2px;height:32px;background:var(--line-strong);border-radius:1px}@media (max-width: 600px){.filter-row{margin-inline:-20px;padding-inline:20px}.filter-row .tabs button,.filter-row .chip{padding:0 14px;font-size:17px}}.card-title-row{flex-wrap:nowrap;min-width:0}.card-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.card-title-row .badge{flex:none}.card-meta{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.filter-row{overflow:visible;flex-wrap:wrap;gap:6px}.filter-row .tabs{gap:6px}.cat-wrap{position:relative;flex:none}.cat-btn{display:inline-flex;align-items:center;gap:6px;min-height:48px;padding:0 14px 0 20px;border-radius:var(--pill);border:0;background:none;cursor:pointer;font:700 18px/1 var(--font-ui);color:var(--sub)}.cat-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}.cat-btn:hover{color:var(--ink)}.cat-btn.is-on{background:var(--surface);color:var(--ink);font-weight:800;box-shadow:0 1px 4px #7850281f}.cat-menu{position:absolute;left:0;top:calc(100% + 6px);z-index:20;min-width:220px;padding:8px;display:grid;gap:2px;background:var(--surface);border:2px solid var(--line);border-radius:18px;box-shadow:var(--shadow-lift)}.cat-item{text-align:left;min-height:48px;padding:0 16px;border:0;border-radius:12px;background:none;cursor:pointer;font:700 18px/1 var(--font-ui);color:var(--ink)}.cat-item:hover{background:var(--bg)}.cat-item[aria-pressed=true]{background:var(--soft);font-weight:800}.filter-row .tabs button{min-height:48px;padding:0 18px;font-size:18px}.thumb-bar{position:absolute;left:10px;right:10px;bottom:8px;height:6px;border-radius:3px;background:#f3e7d7e6;overflow:hidden}.thumb-bar span{display:block;height:100%;min-width:6px;border-radius:3px;background:var(--good)}@media (max-width: 600px){.filter-row{margin-inline:0;padding-inline:0}.cat-btn{padding:0 10px 0 14px;font-size:17px}.filter-row .tabs button{padding:0 12px;font-size:17px}}@media (max-width: 600px){.filter-row{flex-wrap:nowrap;gap:2px}.filter-row .tabs{margin:0;padding:0;overflow:visible;gap:2px}.filter-row .tabs button{padding:0 10px}.card-title{font-size:17px}}.side-nav{display:none}@media (min-width: 761px){body.has-side #app{display:grid;grid-template-columns:240px minmax(0,1fr);align-items:start}body.has-side .site-header{display:none}body.has-side .side-nav{grid-column:1;grid-row:1 / span 20;position:sticky;top:0;height:100vh;height:100dvh;display:flex;flex-direction:column;gap:28px;padding:22px 16px;background:var(--surface);border-right:2px solid var(--line);overflow-y:auto}body.has-side #app>:not(.side-nav):not(.site-header){grid-column:2;min-width:0}.side-logo{padding:4px 8px}.side-links{display:grid;gap:6px}.side-link{display:flex;align-items:center;gap:14px;min-height:56px;padding:0 14px;border-radius:16px;color:var(--ink);font:700 19px/1.2 var(--font-ui);text-decoration:none}.side-link svg,.side-photo svg{width:26px;height:26px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}.side-link:hover{background:var(--bg)}.side-link[aria-current]{background:var(--soft);font-weight:800}.side-photo{width:100%;justify-content:flex-start;padding:0 16px;font-size:18px}body.has-side .wrap{max-width:1240px;padding-left:32px;padding-right:32px}}@media (min-width: 761px) and (max-width: 1100px){body.has-side #app{grid-template-columns:84px minmax(0,1fr)}body.has-side .side-nav{padding:18px 10px;align-items:center;gap:20px}.side-nav .logo-word,.side-link span,.side-photo span{display:none}.side-link{width:60px;justify-content:center;padding:0}.side-photo{width:60px;height:60px;padding:0;justify-content:center;border-radius:18px}.side-logo{padding:0}body.has-side .wrap{padding-left:20px;padding-right:20px}}.side-logo .logo-word{font-size:22px;white-space:nowrap}.side-logo .logo-mark{width:36px;height:36px}body.is-playing .site-header{display:none}@media (min-width: 761px){body.is-playing.has-side #app{grid-template-columns:240px minmax(0,1fr)}body.is-playing.has-side .play-header{display:none}body.is-playing.has-side .play{grid-column:2;grid-row:1;height:100vh;height:100dvh}body.is-playing.has-side .more{grid-column:2;grid-row:2}.side-picture{margin-top:auto;padding:14px;border-radius:16px;background:var(--bg);display:grid;gap:2px}.side-picture-label{font:700 15px/1.3 var(--font-ui);color:var(--sub)}.side-picture strong{font:800 19px/1.3 var(--font-ui);overflow-wrap:anywhere}}@media (min-width: 761px) and (max-width: 1100px){body.is-playing.has-side #app{grid-template-columns:84px minmax(0,1fr)}.side-picture{display:none}}.side-toggle{margin-top:auto;display:flex;align-items:center;gap:10px;min-height:48px;padding:0 14px;border:0;border-radius:14px;background:none;color:var(--sub);font:700 16px/1 var(--font-ui);cursor:pointer}.side-toggle:hover{background:var(--bg);color:var(--ink)}.side-toggle svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;flex:none;transition:transform .2s}.side-picture+.side-toggle{margin-top:0}@media (min-width: 761px) and (max-width: 1100px){.side-toggle{display:none}}@media (min-width: 1101px){body.side-collapsed.has-side #app,body.side-collapsed.is-playing.has-side #app{grid-template-columns:84px minmax(0,1fr)}body.side-collapsed .side-nav{padding:18px 10px;align-items:center;gap:20px}body.side-collapsed .side-nav .logo-word,body.side-collapsed .side-link span,body.side-collapsed .side-photo span,body.side-collapsed .side-toggle span,body.side-collapsed .side-picture{display:none}body.side-collapsed .side-link{width:60px;justify-content:center;padding:0}body.side-collapsed .side-photo{width:60px;height:60px;padding:0;justify-content:center;border-radius:18px}body.side-collapsed .side-logo{padding:0}body.side-collapsed .side-toggle{width:60px;justify-content:center;padding:0}body.side-collapsed .side-toggle svg{transform:rotate(180deg)}}.palette{position:relative}.palette-dock{pointer-events:auto}.side-toggle span{display:none}.side-toggle{width:48px;height:48px;padding:0;justify-content:center;border-radius:50%}body.is-playing .more{max-width:none;margin:0;padding-right:32px}.logo-mark{transition:transform .5s cubic-bezier(.16,1,.3,1)}.logo:hover .logo-mark{transform:rotate(90deg)}@media (prefers-reduced-motion: reduce){.logo:hover .logo-mark{transform:none}}:root{--font-title: "Newsreader", Georgia, serif;--font-ui2: "Plus Jakarta Sans", "Nunito", system-ui, sans-serif;--font-count: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;--linen: #F2ECE1;--terracotta: #B84A27;--ease-atelier: cubic-bezier(.16, 1, .3, 1)}.card .mat,.card-open.mat{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:5 / 4;padding:18px;background:var(--linen);border-bottom:0;overflow:hidden}.card-open.mat{all:unset;cursor:pointer;position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:5 / 4;padding:18px;background:var(--linen);box-sizing:border-box;width:100%}.art-frame{position:relative;display:block;max-width:100%;max-height:100%;line-height:0;box-shadow:0 2px 8px #1c191714,inset 0 0 0 1px #1c19171f;transition:transform .7s var(--ease-atelier)}.art-frame .art{display:block;max-width:100%;max-height:80cqw;width:auto;height:auto}.art-frame:after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px #1c19171f;pointer-events:none}.art-lines{position:absolute;inset:0;width:100%;height:100%;mix-blend-mode:multiply;opacity:.45;transition:opacity .7s var(--ease-atelier)}@media (hover: hover){a.card:hover .art-frame,.card-saved:hover .art-frame{transform:scale(1.02)}}.art.art-fresh{filter:grayscale(1) sepia(.28) brightness(1.32) contrast(.68);transition:filter .9s var(--ease-atelier)}@media (hover: hover){a.card:hover .art.art-fresh,.card-saved:hover .art.art-fresh{filter:grayscale(.15) sepia(.1) brightness(1.08) contrast(.85) saturate(.85)}}@media (hover: hover){a.card:hover .art-lines{opacity:.2}}.palette-strip{display:flex;height:4px;background:var(--linen)}.palette-strip span{flex:1}.card-body{gap:10px;padding:16px 18px 18px}.card-title-row{flex-wrap:wrap;align-items:baseline;gap:6px 10px}.card-title{font:500 1.15rem/1.25 var(--font-title);letter-spacing:-.01em;white-space:normal;overflow:visible;text-overflow:clip;color:#1c1917}.card-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;white-space:normal;overflow:visible}.card-artist{font:500 15px/1.3 var(--font-ui2);color:#6b635b;min-width:0}.shape-count{flex:none;white-space:nowrap;font:500 .72rem/1 var(--font-count);text-transform:uppercase;letter-spacing:.04em;color:#6b635b;padding:5px 8px;border:1px solid rgba(45,38,30,.14);border-radius:999px;background:#faf7f2}.badge{font:500 10px/1 var(--font-count);text-transform:uppercase;letter-spacing:.08em;padding:5px 8px;border-radius:999px}.badge-easy{background:#e8ece4;color:#3a4d39}.badge-done{background:#f4e4dc;color:#8a3519}.mat-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:#2d261e14}.mat-bar span{display:block;height:100%;background:var(--terracotta)}.thumb-bar{display:none}body.has-side .side-nav{border-right:1px solid rgba(45,38,30,.08)}.cat-btn,.filter-row .tabs button{position:relative;background:none;box-shadow:none;border-radius:0;color:#6b635b;font:600 16px/1 var(--font-ui2);min-height:48px;padding:0 14px}.cat-btn.is-on,.filter-row .tabs button[aria-selected=true]{background:none;box-shadow:none;color:#1c1917}.cat-btn.is-on:after,.filter-row .tabs button[aria-selected=true]:after{content:"";position:absolute;left:14px;right:14px;bottom:4px;height:2px;background:var(--terracotta);border-radius:1px}.count{margin-left:8px;font:500 11px/1 var(--font-count);color:#6b635b;padding:3px 6px;border-radius:999px;background:#2d261e0f}.count:empty{display:none}.cat-item{font-family:var(--font-ui2);font-weight:600;font-size:16px}.card .mat,.card-open.mat{container-type:size}.art-frame .art{max-width:100cqw;max-height:100cqh}.art.art-fresh{filter:grayscale(1) sepia(.35) brightness(1.5) contrast(.55)}@media (max-width: 600px){.cat-btn,.filter-row .tabs button{padding:0 7px;font-size:15px}.cat-btn.is-on:after,.filter-row .tabs button[aria-selected=true]:after{left:7px;right:7px}.count{margin-left:5px;padding:3px 5px}.cat-btn svg{width:16px;height:16px}.card-meta{flex-wrap:wrap;justify-content:flex-start;gap:6px}.card .mat{padding:12px}.card-body{padding:12px 12px 14px}.card-title{font-size:1.05rem}}.footer-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px}.footer-links{display:flex;gap:6px}.footer-links a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:12px;color:var(--ink);font-weight:700;text-decoration:none}.footer-links a:hover{background:var(--bg)}.prose{max-width:760px;padding-block:40px 56px;display:grid;gap:14px}.prose h1{font:500 clamp(32px,4vw,42px)/1.15 var(--font-title, Georgia, serif);letter-spacing:-.01em;margin-bottom:8px}.prose h2{font-size:22px;margin-top:18px}.prose p{color:var(--sub);font-size:18px;line-height:1.65}body.has-side .prose{margin-left:0}a.cat-item{display:flex;align-items:center;text-decoration:none;color:var(--ink)}a.cat-item[aria-current]{background:var(--soft);font-weight:800}.photo-page{max-width:980px;padding-block:36px 56px;display:grid;gap:40px}.photo-hero{display:grid;gap:16px}.photo-hero h1{font:500 clamp(32px,4vw,44px)/1.15 var(--font-title, Georgia, serif);letter-spacing:-.01em}.photo-drop{display:flex;flex-wrap:wrap;align-items:center;gap:18px;padding:28px;margin-top:6px;background:var(--tile);border:3px dashed #e8a57f;border-radius:var(--radius)}.photo-drop.over{background:#ffe7d3;border-color:var(--primary)}.btn-big{min-height:64px;padding:0 30px;font-size:22px}.photo-drop-note,.photo-private{color:var(--sub);font-size:17px}.photo-private strong{color:var(--ink)}.photo-section{display:grid;gap:16px}.photo-section h2{font-size:26px}.tips{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.tips li{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 20px;color:var(--sub);font-size:17px}.tips strong{display:block;color:var(--ink);font-size:19px;margin-bottom:4px}a.photo-tile{text-decoration:none}.side-photo[aria-current]{box-shadow:0 0 0 3px var(--soft)}@media (max-width: 760px){.tips{grid-template-columns:1fr}.photo-drop{padding:20px}.btn-big{width:100%}}.cat-row{display:flex;align-items:center;gap:4px;overflow-x:auto;scrollbar-width:none;max-width:100%}.cat-row::-webkit-scrollbar{display:none}.cat-chip{position:relative;flex:none;display:inline-flex;align-items:center;min-height:48px;padding:0 12px;color:#6b635b;font:600 16px/1 var(--font-ui2, var(--font-ui));text-decoration:none;white-space:nowrap}.cat-chip:hover,.cat-chip[aria-current]{color:#1c1917}.cat-chip[aria-current]:after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:2px;border-radius:1px;background:var(--terracotta, #B84A27)}.filter-row{flex-wrap:nowrap;min-width:0}@media (max-width: 600px){.cat-row{margin-inline:-20px;padding-inline:14px;width:calc(100% + 40px);max-width:none}.cat-chip{padding:0 9px;font-size:15px}}.home-text{max-width:820px;display:grid;gap:14px;padding-block:8px 48px;margin-left:0}.home-text p{color:var(--sub);font-size:18px;line-height:1.7;margin:0}body.has-side .home-text{margin-inline:0}.home-text{max-width:70ch;padding-top:0}.home-text a{color:var(--primary);font-weight:700}#intro:has(+.home-text){padding-bottom:14px}.card.card-picture{border-radius:20px;overflow:hidden}.card.card-picture .mat{border-radius:20px}.corner-badge{position:absolute;top:10px;right:10px;z-index:2;display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:30px;padding:0 9px;border-radius:999px;box-shadow:0 1px 4px #1c19172e;font:600 13px/1 var(--font-ui2, var(--font-ui));letter-spacing:.02em}.corner-done{background:#3a4d39;color:#fff;padding:0;width:30px}.corner-done svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.corner-progress{background:#fff;color:var(--terracotta, #B84A27)}.corner-easy{background:#e8ece4;color:#3a4d39}.cards{row-gap:20px}.color-pill{position:absolute;left:16px;bottom:16px;z-index:3;display:inline-flex;align-items:center;min-height:48px;padding:0 26px;border-radius:999px;background:#ffc86b;color:#4a3a2a;font:800 20px/1 var(--font-ui);box-shadow:0 4px 12px #1c19172e;opacity:0;transform:translateY(6px);transition:opacity .25s var(--ease-atelier, ease),transform .25s var(--ease-atelier, ease);pointer-events:none}@media (hover: hover){a.card:hover .color-pill,a.card:focus-visible .color-pill{opacity:1;transform:none}}@media (hover: hover){a.card:hover .color-pill{background:#ffbe55}}@media (hover: none){.color-pill{display:none}}@media (max-width: 600px){.color-pill{left:10px;bottom:10px;min-height:40px;padding:0 18px;font-size:17px}}.color-pill{left:50%;transform:translate(-50%,6px)}@media (hover: hover){a.card:hover .color-pill,a.card:focus-visible .color-pill{transform:translate(-50%)}}@media (max-width: 600px){.color-pill{left:50%}}.note a{color:var(--primary);font-weight:700}body.is-printing{background:#eee9e0}.print-bar{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;padding:18px 16px}.print-bar .btn svg,.print-link svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}.sheet{width:min(820px,calc(100% - 32px));margin:0 auto 48px;padding:36px 40px 30px;background:#fff;box-shadow:0 6px 24px #1c19171f;display:grid;gap:16px}.sheet-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;border-bottom:2px solid #1b1815;padding-bottom:8px}.sheet-head h1{font:500 26px/1.2 var(--font-title, Georgia, serif)}.sheet-head span{font-size:14px;color:#555}.sheet-art{width:100%;height:auto;display:block}.sheet-key{display:flex;flex-wrap:wrap;gap:8px 14px}.key-item{display:inline-flex;align-items:center;gap:6px}.key-swatch{width:22px;height:22px;border-radius:50%;border:1.5px solid #1b1815;-webkit-print-color-adjust:exact;print-color-adjust:exact}.key-num{font:700 15px/1 Nunito,Arial,sans-serif;color:#1b1815}@page{margin:0}@media print{body,body.is-printing{background:#fff!important}.print-bar,.side-nav,.site-header,.site-footer{display:none!important}#app{display:block!important}.sheet{width:100%;margin:0;padding:12mm 12mm 10mm;box-shadow:none;break-inside:avoid;box-sizing:border-box}.sheet-art{max-height:220mm;width:auto;max-width:100%;margin:0 auto}}@media (max-width: 600px){.sheet{padding:18px 16px}.sheet-head h1{font-size:21px}}.seg{display:inline-flex;width:fit-content;align-self:center;align-items:center;gap:4px;padding:4px;border-radius:999px;background:#fff;box-shadow:0 1px 3px #1c19171a;flex-wrap:wrap}.seg a,.seg button{font:700 15px/1 Nunito,Arial,sans-serif;color:#57534e;padding:10px 16px;border-radius:999px;border:0;background:none;cursor:pointer;text-decoration:none}.seg a:hover,.seg button:hover{color:#1c1917}.seg [aria-current],.seg [aria-pressed=true]{background:var(--terracotta, #B84A27);color:#fff}.seg-math{margin:4px 0 18px}.sheet-note{font:600 14px/1.4 Nunito,Arial,sans-serif;color:#1b1815;margin:-6px 0 0}@media print{.sheet-note+.sheet-art{max-height:212mm}}.sheet-math{display:grid;gap:2px;margin-top:-6px}.sheet-math .sheet-note{margin:0}.sheet-name{display:flex;align-items:flex-end;gap:10px;margin:0;font:700 16px/1 Nunito,Arial,sans-serif;color:#1b1815}.name-line{width:3in;max-width:60%;height:11mm;border-bottom:1.5px solid #1b1815}@media print{.sheet-math+.sheet-art{max-height:196mm}}@media (min-width: 761px){body.has-side .side-nav{gap:0;padding:26px 14px 18px}.side-logo{gap:10px;padding:0 10px;margin-bottom:34px}.side-logo .logo-mark{width:30px;height:30px;border-radius:7px}.side-logo .logo-word{font:800 20px/1 var(--font-ui);letter-spacing:-.02em}.side-links{gap:2px}.side-link{position:relative;gap:12px;min-height:44px;padding:0 12px;border-radius:10px;color:#57534e;font:600 15.5px/1.2 var(--font-ui2, var(--font-ui));transition:background-color .15s,color .15s}.side-link svg,.side-photo svg{width:20px;height:20px;stroke-width:1.8}.side-link svg{color:#8a817a;transition:color .15s}.side-link:hover{background:#2d261e0b;color:var(--ink)}.side-link:hover svg{color:var(--ink)}.side-link[aria-current]{background:var(--tile);color:var(--ink);font-weight:700}.side-link[aria-current] svg{color:var(--terracotta, #B84A27)}.side-photo{margin-top:22px;min-height:44px;padding:0 12px;gap:12px;border-radius:12px;font:700 15px/1 var(--font-ui2, var(--font-ui));letter-spacing:0;background:linear-gradient(180deg,#cc5530,#b5441f);border:0;box-shadow:inset 0 1px #ffffff2e,0 1px 2px #78321433,0 6px 16px -6px #b5441f73}.side-photo:hover{background:linear-gradient(180deg,#c24c27,#a63c1a)}.side-photo[aria-current]{box-shadow:inset 0 1px #ffffff2e,0 0 0 3px var(--soft)}.side-picture{padding:12px 14px;border-radius:12px}.side-picture-label{font:700 11px/1.3 var(--font-ui2, var(--font-ui));letter-spacing:.08em;text-transform:uppercase}.side-picture strong{font:700 15px/1.35 var(--font-ui2, var(--font-ui))}.side-toggle{width:36px;height:36px;margin-left:4px;color:#8a817a}.side-toggle svg{width:18px;height:18px;stroke-width:2}}@media (min-width: 761px) and (max-width: 1100px){.side-logo{padding:0;margin-bottom:26px}.side-link{width:48px;min-height:48px;padding:0;border-radius:12px}.side-photo{width:48px;height:48px;min-height:48px;margin-top:16px;padding:0;border-radius:12px}}@media (min-width: 1101px){body.side-collapsed .side-logo{padding:0;margin-bottom:26px}body.side-collapsed .side-link{width:48px;min-height:48px;padding:0;border-radius:12px}body.side-collapsed .side-photo{width:48px;height:48px;min-height:48px;margin-top:16px;padding:0;border-radius:12px}body.side-collapsed .side-toggle{margin-left:0}}:root{--sun: #FFC86B;--sun-hover: #FFB847;--sun-ink: #3B2A1A;--sun-soft: #FFF2D9;--amber: #E39A2D;--amber-ink: #8A5208;--primary: var(--sun);--primary-ink: var(--sun-ink);--primary-dark: var(--sun-hover);--terracotta: var(--amber);--soft: var(--sun-soft);--tile: var(--sun-soft)}.btn-primary{color:var(--sun-ink);box-shadow:inset 0 1px #ffffff59,0 1px 2px #7850142e}.btn-primary:hover{background:var(--sun-hover)}.home-text a,.note a{color:var(--amber-ink)}.seg [aria-current],.seg [aria-pressed=true]{background:var(--sun);color:var(--sun-ink)}.badge-done{background:var(--sun-soft);color:var(--amber-ink)}.photo-tile:hover,.photo-tile.over,.photo-drop.over{background:var(--sun-soft);border-color:var(--amber)}.photo-tile svg{stroke:var(--amber)}.color-pill{background:var(--sun);color:var(--sun-ink)}@media (hover: hover){a.card:hover .color-pill{background:var(--sun-hover)}}@media (min-width: 761px){.side-photo{background:linear-gradient(180deg,#ffd285,#ffbf57);color:var(--sun-ink);box-shadow:inset 0 1px #ffffff73,0 1px 2px #8c5a1433,0 6px 16px -6px #e39a2d8c}.side-photo:hover{background:linear-gradient(180deg,#ffc96e,#ffb23f)}.side-photo[aria-current]{box-shadow:inset 0 1px #ffffff73,0 0 0 3px var(--sun-soft)}}.steps li:before{color:var(--amber-ink)}.photo-tile,.photo-drop{border-color:#ebc27a}.back-pill:hover{background:var(--sun-soft)}:root{--bg: #fffcf5;--ink: #33291f;--sub: #6b5d4f;--line: #f1e6cf;--line-strong: #e6d6b4;--sun-soft: #fff3d1;--soft: #fff3d1;--tile: #fff3d1;--amber: #d18a00;--board-bg: #fffcf5;--thumb-empty: #f8f1e3}body{background:var(--bg);color:var(--ink)}.side-link{color:var(--sub)}.side-link:hover,.side-link[aria-current]{color:var(--ink)}.cat-chip{color:var(--sub);border-radius:999px;transition:background-color .15s,color .15s}.cat-chip:hover{color:var(--ink);background:#33291f0d}.cat-chip[aria-current],.cat-chip[aria-current]:hover{background:var(--ink);color:#fff}.cat-chip[aria-current]:after{display:none}.cat-chip{min-height:36px;margin:6px 0;padding:0 15px}.cat-row{gap:2px}@media (max-width: 600px){.cat-chip{min-height:34px;padding:0 12px}}.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;font:600 14px/1.4 var(--font-ui2, var(--font-ui));color:var(--sub)}.crumbs a{color:var(--sub);text-decoration:none}.crumbs a:hover{color:var(--ink);text-decoration:underline}.crumbs [aria-current]{color:var(--ink)}.crumbs span[aria-hidden]{color:#b9ab98}.related{margin-top:28px;display:grid;gap:14px}.related h2{font:800 22px/1.2 var(--font-ui);color:var(--ink)}.related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px}.related-card{display:grid;gap:8px;text-decoration:none;color:var(--ink)}.related-art{display:grid;place-items:center;aspect-ratio:1;padding:12px;border-radius:14px;background:#f3ece0;transition:transform .2s,box-shadow .2s}.related-art img{max-width:100%;max-height:100%;box-shadow:0 1px 3px #33291f1f}@media (hover: hover){.related-card:hover .related-art{transform:translateY(-2px);box-shadow:0 6px 16px #33291f1a}}.related-name{font:600 14px/1.3 var(--font-ui2, var(--font-ui))}.related-art{position:relative;display:block}.related-art img{position:absolute;inset:12px;width:calc(100% - 24px);height:calc(100% - 24px);object-fit:contain;box-shadow:none}.related,.pic-info{max-width:1000px}.pic-info>p{max-width:760px}.btn-secondary{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line-strong)}.btn-secondary:hover{background:var(--sun-soft)}.related-grid{align-items:start}.related-card{align-content:start}@media (min-width: 761px){.palette{padding-inline:32px}}.prose a,.photo-private a,.intro a,.lede a{color:var(--amber-ink);text-decoration-thickness:1px;text-underline-offset:2px}.landing ol,.landing ul{max-width:760px}.tab-bar{display:none}@media (max-width: 760px){.site-header .main-nav{display:none}.site-header .header-row{padding-block:10px;justify-content:flex-start}.site-header .logo-mark{width:30px;height:30px;border-radius:7px}.site-header .logo-word{font-size:20px;letter-spacing:-.02em}.tab-bar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:grid;grid-template-columns:repeat(3,1fr);padding:6px max(8px,env(safe-area-inset-left,0px)) max(8px,env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-right,0px));background:#fff;border-top:1px solid var(--line)}.tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:54px;color:var(--sub);text-decoration:none;font:700 12.5px/1.1 var(--font-ui2, var(--font-ui));-webkit-tap-highlight-color:transparent}.tab svg{width:52px;height:30px;padding:4px 15px;border-radius:999px;box-sizing:border-box;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transition:background-color .15s}.tab[aria-current]{color:var(--ink)}.tab[aria-current] svg{background:var(--sun);color:var(--sun-ink)}body:not(.is-playing):not(.is-printing) #app{padding-bottom:calc(70px + env(safe-area-inset-bottom,0px))}body.is-playing .tab-bar,body.is-printing .tab-bar{display:none}body.is-playing #app{display:block}body.is-playing .play-header{position:static;height:auto;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:10px;padding:6px 12px;border-right:0;border-bottom:1px solid var(--line);background:var(--surface)}body.is-playing .back-pill{flex-direction:row;width:auto;min-height:44px;padding:0 14px 0 8px;border-radius:999px;font-size:16px;gap:4px}body.is-playing .back-pill svg{width:20px;height:20px}body.is-playing .play-title{flex-direction:row;align-items:center;justify-content:flex-end;gap:10px;min-width:0}body.is-playing .play-name{writing-mode:horizontal-tb;transform:none;font-size:17px;max-height:none;min-width:0}body.is-playing .play-progress{flex-direction:row;flex:none;align-items:center;gap:6px}body.is-playing .progress-track{width:56px;height:8px;flex:none;display:block}body.is-playing .progress-track span{width:var(--p, 0%);height:100%}body.is-playing #pct{font-size:14px}body.is-playing .play-spacer{display:none}body.is-playing .play{height:calc(100vh - 57px);height:calc(100dvh - 57px);min-height:380px;display:flex;flex-direction:column}.board-wrap{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}#board{position:relative;inset:auto;flex:1 1 0;min-height:0;height:auto;--board-pad-bottom: 0px}.fabs{position:static;transform:none;top:auto;right:auto;flex:none;flex-direction:row;justify-content:center;gap:14px;padding:6px 12px 4px;background:var(--board-bg)}.fab{width:48px;height:48px;min-height:48px;padding:0;border-radius:50%;box-shadow:0 1px 4px #33291f24}.fab svg{width:22px;height:22px}.palette-dock{position:static;flex:none;pointer-events:auto;border-top:1px solid var(--line);background:var(--surface);padding:2px 0 max(6px,env(safe-area-inset-bottom,0px))}.palette{justify-content:safe center;padding-inline:12px;min-height:64px;height:auto;touch-action:pan-x pan-y}.finish-bar{position:absolute}}.presets{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}@media (min-width: 1000px){.presets{grid-template-columns:repeat(4,1fr)}}.preset{display:grid;gap:2px;justify-items:start;min-height:64px;padding:10px 14px;text-align:left;cursor:pointer;border:0;border-radius:16px;background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line-strong);font:600 14px/1.25 var(--font-ui2, var(--font-ui))}.preset strong{font:800 18px/1.2 var(--font-ui)}.preset span{color:var(--sub)}.preset:hover{background:var(--sun-soft)}.preset[aria-pressed=true]{background:var(--sun-soft);box-shadow:inset 0 0 0 2.5px var(--amber)}.preview-frame{position:relative}.preview-original{position:absolute;display:block}.preview-original[hidden]{display:none}.preview-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:10px}.preview-meta .muted{margin:0}#compare{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:manipulation}#compare[aria-pressed=true]{background:var(--sun-soft);box-shadow:inset 0 0 0 2px var(--amber)}#compare{min-width:11em;justify-content:center}.card-photo{position:relative}.card-photo .card-link{display:block;color:inherit;text-decoration:none;border-radius:inherit}@media (hover: hover){.card-photo:hover .color-pill,.card-photo .card-link:focus-visible .color-pill{opacity:1;transform:translate(-50%)}}.card-del{position:absolute;top:10px;right:10px;z-index:4;display:inline-flex;align-items:center;gap:6px;min-width:44px;height:44px;padding:0 11px;border:0;border-radius:999px;cursor:pointer;background:#fffffff0;color:var(--sub);box-shadow:0 2px 8px #33291f29;font:700 15px/1 var(--font-ui2, var(--font-ui));opacity:0;transition:opacity .2s,background-color .15s,color .15s}.card-del svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.card-del-text{display:none}@media (hover: hover){.card-photo:hover .card-del,.card-del:focus-visible,.card-del[data-confirm]{opacity:1}}@media (hover: hover){.card-del:hover{color:#9b2c1c}}.card-del[data-confirm]{background:#9b2c1c;color:#fff}.card-del[data-confirm] .card-del-text{display:inline}@media (hover: none){.card-del{opacity:1}}.error.is-busy{color:var(--sub);font-weight:600}.lede-small{font-size:18px;color:var(--sub);margin:0 0 18px}.controls .row{gap:12px;flex-wrap:wrap}.making{display:grid;gap:8px;margin:0 0 18px}.making[hidden]{display:none}.making-bar{height:12px;border-radius:999px;background:var(--track);overflow:hidden}.making-bar span{display:block;height:100%;width:3%;border-radius:inherit;background:var(--sun);transition:width .3s}.making .muted{margin:0;font-size:16px}.making .btn{justify-self:start}#preview.is-waiting{opacity:.35;filter:grayscale(.6);transition:opacity .4s}#compare[hidden]{display:none}.preview-pane .making{margin:14px 0 0}.cards-head{grid-column:1 / -1;display:flex;align-items:center;gap:8px;margin:8px 0 -4px;font:800 20px/1.2 var(--font-ui);color:var(--ink)}.cards-head:not(:first-child){margin-top:28px}.finish-toast{position:absolute;left:50%;bottom:calc(100% + 6px);transform:translate(-50%);margin:0;padding:8px 14px;border-radius:999px;background:var(--ink);color:#fff;font:600 14px/1.2 var(--font-ui2, var(--font-ui));white-space:nowrap}.finish-toast[hidden]{display:none}.site-footer{margin-top:16px;padding-block:10px;border-top-width:1px;font-size:14px}.footer-row{gap:4px 16px}.footer-links{gap:2px;flex-wrap:wrap}.footer-links a{min-height:36px;padding:0 10px;font-weight:600;font-size:14px;color:var(--sub)}@media (max-width: 760px){.footer-row{flex-wrap:nowrap;gap:8px}.footer-row>.muted{font-size:12px;white-space:nowrap}.footer-links{flex-wrap:nowrap;gap:0}.footer-links a{padding:0 6px;font-size:12.5px;min-height:34px}}@media (max-width: 380px){.footer-brand{display:none}}.cat-chip[aria-current],.cat-chip[aria-current]:hover{background:#ffe8b8;color:var(--ink);font-weight:700;box-shadow:inset 0 0 0 1.5px #f2c46a}.my-edit{display:none}@media (hover: none){.my-edit{display:inline-flex;grid-column:1 / -1;justify-self:end;margin-bottom:-8px;font-size:17px}.my-edit[aria-pressed=true]{background:var(--sun);color:var(--sun-ink)}.card-photo{display:flex;flex-direction:column}.card-photo .card-del{display:none}body.is-editing .card-photo .card-del{display:inline-flex;position:static;align-self:stretch;justify-content:center;opacity:1;margin-top:8px;height:44px;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line-strong);color:#9b2c1c;font-size:16px}body.is-editing .card-photo .card-del svg{width:18px;height:18px}body.is-editing .card-photo .card-del:after{content:"Delete"}}.card .art-frame{transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.footer-links a{font-weight:700;font-size:16px;color:var(--ink)}@media (max-width: 760px){.footer-row{flex-wrap:wrap;row-gap:0}.footer-links a{font-size:15px;padding:0 8px}}.site-footer,.site-footer .muted,.footer-links a{color:var(--sub)}.footer-links a:hover{color:var(--ink)}.footer-row>.muted{font-size:16px}@media (max-width: 760px){.footer-row>.muted{font-size:15px}}@media (max-width: 380px){.footer-brand{display:inline}}.footer-row>.muted{font-weight:700}@media (hover: none){.site-header .my-edit{margin:0 0 0 auto;grid-column:auto;justify-self:auto;min-height:40px;padding:0 16px;font-size:16px}}body.has-side .home-text,.home-text{max-width:1240px;margin-inline:auto}.home-text>p{max-width:70ch}