:root{--desk: #e9e4d9;--ink: #2a2823;--mute: #6f6a5d;--body1: #d97a4f;--body2: #c36e47;--texture: linear-gradient(transparent, transparent);--texture-size: auto;--highlight: rgba(244, 215, 202, .4);--shadow: rgba(98, 55, 36, .32);--bumper: transparent;--bumper-w: 0;--face: transparent;--grille-plate: transparent;--grille-hole: #6d3d28;--slot-in: #412518;--screen-lip: rgba(98, 55, 36, .45);--logo-ink: #fbf8f3;--logo-relief: none;--btn-face: #fbf8f3;--btn-rim: #efe9df;--btn-mark: #d97a4f;--btn-shadow: rgba(98, 55, 36, .45);--scale: 1.5}*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:var(--desk);color:var(--ink);font:15px/1.5 -apple-system,system-ui,sans-serif}.desk{height:100%;display:grid;grid-template-columns:auto auto minmax(0,560px);gap:56px;justify-content:center;padding:0 24px}.desk>.device-wrap{align-self:center;position:relative;top:calc(var(--u) * -50)}.desk{overflow:clip}.cards{height:100%;overflow-y:auto;padding:32px 28px 40px 10px;scrollbar-width:thin}html,body{overflow:hidden}.device{width:max-content;padding:calc(var(--u) * 20) calc(var(--u) * 18) calc(var(--u) * 18);border-radius:calc(var(--u) * 26);background:var(--texture),linear-gradient(160deg,var(--body1),var(--body2));background-size:var(--texture-size),auto;box-shadow:inset 0 0 0 calc(var(--u) * var(--bumper-w)) var(--bumper),0 2px 0 var(--highlight) inset,0 calc(var(--top-face) * -1 + var(--u) * .8) 0 color-mix(in srgb,var(--body1) 92%,#fff),0 calc(var(--top-face) * -1) 0 color-mix(in srgb,var(--body1) 80%,#fff),var(--side-x) 0 0 color-mix(in srgb,var(--body1) 86%,#000),var(--side-x) calc(var(--top-face) * -1) 0 color-mix(in srgb,var(--body1) 80%,#fff),0 18px 40px var(--shadow);display:grid;gap:calc(var(--u) * 10);justify-items:center}.grille{position:relative;width:calc(var(--u) * 150);height:calc(var(--u) * 34);border-radius:calc(var(--u) * 17);box-shadow:var(--grille-ring, inset 0 calc(var(--u) * 1) calc(var(--u) * 2) rgba(0, 0, 0, .35));background:var(--grille-holes) center / 100% 100% no-repeat,var(--grille-plate)}.screen{position:relative;border-radius:calc(var(--u) * 8);overflow:hidden}.screen:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 calc(var(--u) * 1.5) calc(var(--u) * 2) var(--screen-lip),inset 0 0 0 calc(var(--u) * .5) var(--screen-lip)}.screen canvas{display:block;width:calc(var(--u) * 240);height:calc(var(--u) * 416);image-rendering:pixelated}.device-wrap{--u: calc(var(--scale) * 1px);--card-w: calc(var(--u) * 200);--card-pad: calc(var(--u) * 4);--card-h: calc(var(--card-pad) * 2 + (var(--card-w) - var(--card-pad) * 2) * 416 / 240);--card-out: calc(var(--card-h) * .34);position:relative;padding-top:calc(var(--card-out) + var(--top-face) * .7 + var(--u) * 1)}.device{position:relative;z-index:1}.device-wrap{--top-face: calc(var(--u) * 13);--side-x: calc(var(--u) * 7);--slot-dx: calc(var(--u) * 5)}.top-face{position:absolute;left:0;right:0;top:calc(var(--top-face) * -1);height:var(--top-face);pointer-events:none}.slot{position:absolute;left:calc(50% + var(--slot-dx));top:calc(var(--top-face) * .3);transform:translate(-50%);width:calc(var(--card-w) + var(--u) * 8);height:calc(var(--u) * 3);border-radius:calc(var(--u) * 1.5);background:linear-gradient(var(--slot-in),color-mix(in srgb,var(--slot-in) 85%,transparent));box-shadow:0 calc(var(--u) * .8) 0 #ffffff59,inset 0 calc(var(--u) * 1) calc(var(--u) * 1) #0009}.slot-window{position:absolute;z-index:2;left:0;right:0;top:0;height:var(--slit-line, 0px);overflow:hidden;pointer-events:none}.slot-window>.slot-card{pointer-events:auto}.slot-window:after{content:"";position:absolute;left:calc(50% - var(--card-w) / 2 + var(--slot-dx));width:var(--card-w);bottom:0;height:calc(var(--u) * 10);background:linear-gradient(transparent,#1e120573);opacity:0;pointer-events:none}.slot-window.in-slit:after{opacity:1}.slot-card{position:absolute;z-index:2;left:calc(50% - var(--card-w) / 2 + var(--slot-dx));top:calc(var(--u) * 6);width:var(--card-w);height:var(--card-h);padding:var(--card-pad);border:0;border-radius:calc(var(--u) * 8);background:#fbf8f1;box-shadow:0 0 0 calc(var(--u) * .5) #0000001f;cursor:pointer;transform-origin:0 0}.slot-card.moving{will-change:transform}.slot-card canvas{display:block;width:100%;height:100%;image-rendering:pixelated;border-radius:calc(var(--u) * 5)}.cards{width:min(100%,560px);display:grid;gap:14px;align-content:start}.cards .hint,.links{margin:0;color:var(--mute)}.links a{color:var(--ink)}#cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.card{border:0;padding:0;border-radius:10px;overflow:hidden;background:#2a2823;box-shadow:0 2px 6px #00000026;cursor:pointer;display:grid;gap:0;text-align:left;transition:transform .15s}.card:hover{transform:translateY(-2px)}#cards .card{transform:translate(var(--x, 0px),var(--y, 0px)) rotate(var(--r, 0deg));transition:transform .18s,box-shadow .18s;box-shadow:0 6px 14px #3c280f33,0 1px 3px #0000002e}#cards .card:hover{z-index:3;transform:translate(var(--x, 0px),calc(var(--y, 0px) - 5px)) rotate(calc(var(--r, 0deg) * .5));box-shadow:0 14px 26px #3c280f42,0 2px 5px #0000002e}.card .wip{position:absolute;top:8px;left:8px;padding:3px 8px;border-radius:999px;background:#1d1d1b;color:#fff;font:700 11px/1.3 -apple-system,system-ui,sans-serif;letter-spacing:.02em}.card canvas{display:block;width:100%;height:auto;image-rendering:pixelated}.card.loading canvas{animation:card-loading 1.4s ease-in-out infinite}@keyframes card-loading{50%{opacity:.7}}@media (prefers-reduced-motion: reduce){.card.loading canvas{animation:none}}.card .lv{display:flex;align-items:center;gap:7px;padding:6px 9px;background:var(--lv);color:#fff;container-type:inline-size}.lv-n{font:800 22px/1 -apple-system,system-ui,sans-serif}.lv-text{display:grid;line-height:1.15;min-width:0}.lv-text b{font-size:min(12px,6.3cqi);font-weight:800;white-space:nowrap}.lv-text small{font-size:min(11px,5.8cqi);opacity:.9;white-space:nowrap}.lv[data-level="1"],.lv[data-level="2"]{--lv: #3f9b6e}.lv[data-level="3"]{--lv: #2f8f9d}.lv[data-level="4"],.lv[data-level="5"]{--lv: #d8642f}.lv[data-level="6"],.lv[data-level="7"],.lv[data-level="8"]{--lv: #6a4fa3}body:not(.debug) .debug-only{display:none}.card{position:relative}.card.inserted{background:transparent;box-shadow:none;outline:none;cursor:default}.card.inserted>*{visibility:hidden}#cards .card.inserted{transform:translate(var(--x, 0px),var(--y, 0px)) rotate(var(--r, 0deg));box-shadow:none}.chin{display:flex;justify-content:center;align-items:center;margin-top:calc(var(--u) * -10);padding:calc(var(--u) * 19) 0}.device{padding-bottom:0}.logo{display:inline-flex;align-items:center;gap:.16em;font:800 calc(var(--u) * 29) / 1 "Baloo 2",ui-rounded,system-ui,sans-serif;letter-spacing:calc(var(--u) * -.3);white-space:nowrap;color:var(--logo-ink);text-shadow:var(--logo-relief)}.logo-mark{width:1.05em;height:1.05em;margin-top:.2em;flex:none;filter:drop-shadow(0 1px 0 rgba(255,255,255,.35)) drop-shadow(0 -1px 0 rgba(0,0,0,.18))}.controls{display:none}.with-button .controls{display:flex;align-items:center;gap:calc(var(--u) * 1)}.with-button .chin{flex-direction:column;gap:calc(var(--u) * 6);padding-top:calc(var(--u) * 12);padding-bottom:calc(var(--u) * 15)}.with-button .logo-mark{display:none}.side-button{display:block;width:calc(var(--u) * 29);height:calc(var(--u) * 25);padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}.side-button svg{display:block;width:100%;height:100%;transition:transform .08s;filter:drop-shadow(0 calc(var(--u) * 1) calc(var(--u) * 1) var(--shadow))}.side-button.pressed svg,.side-button:active svg{transform:translateY(calc(var(--u) * 1.2)) scale(.97)}.side-button:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:40%}.with-button .makea-button{display:block;width:calc(var(--u) * 60);height:calc(var(--u) * 47);padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}.makea-button svg{display:block;width:100%;height:100%;overflow:visible;transition:transform .08s;filter:drop-shadow(0 calc(var(--u) * 1.5) calc(var(--u) * 1.5) var(--shadow))}.makea-button.pressed svg,.makea-button:active svg{transform:translateY(calc(var(--u) * 1.5)) scale(.985);filter:drop-shadow(0 calc(var(--u) * .4) calc(var(--u) * .5) var(--shadow))}.makea-button:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:30%}.device-wrap{padding-inline:calc(var(--u) * 100)}.hands{position:relative;height:0;z-index:2}.hold{position:absolute;inset:auto 0 auto 0;top:0;pointer-events:none}.hands{--s: calc(var(--u) * 276 / (var(--hold-x2) - var(--hold-x1)));--top: calc(var(--hold-y2) * var(--s) * -1)}.hold img{position:absolute;width:calc(var(--hold-w) * var(--s));left:calc(var(--hold-x1) * var(--s) * -1);top:var(--top);filter:drop-shadow(0 calc(var(--u) * 2) calc(var(--u) * 4) rgba(60,40,15,.25))}.hold.left img{clip-path:inset(0 calc((var(--hold-w) - (var(--hold-x1) + var(--hold-x2)) / 2) * var(--s)) 0 0)}.hold.right img{clip-path:inset(0 0 0 calc((var(--hold-x1) + var(--hold-x2)) / 2 * var(--s)))}.carry{position:absolute;z-index:3;left:calc(50% - var(--card-w) / 2 + var(--slot-dx));top:calc(var(--u) * 6);width:var(--card-w);height:var(--card-h);transform-origin:0 0;pointer-events:none}.carry img{position:absolute;--s: calc(var(--card-w) / (var(--carry-x2) - var(--carry-x1)));width:calc(var(--carry-w) * var(--s));left:calc(var(--carry-x1) * var(--s) * -1);top:calc(var(--carry-y1) * var(--s) * -1);filter:drop-shadow(0 calc(var(--u) * 2) calc(var(--u) * 4) rgba(60,40,15,.3))}.hold img,.carry img{max-width:none}.controls .b-shadow{fill:var(--btn-shadow);stroke:var(--btn-shadow)}.controls .b-rim{fill:var(--btn-rim);stroke:var(--btn-rim)}.side-button .b-rim{stroke:none}.controls .b-face{fill:var(--btn-face)}.controls .b-mark{stroke:var(--btn-mark)}.device:before{content:"";position:absolute;inset:calc(var(--u) * 58) calc(var(--u) * 9) calc(var(--u) * 9);border-radius:calc(var(--u) * 18);background:var(--face);pointer-events:none}.device>:not(.top-face){position:relative}.finishes{align-self:center;display:grid;justify-items:center;gap:10px;margin:0}.finish-note{margin:0;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);opacity:.7}.finishes button{width:18px;height:18px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer}.finishes .dot{display:block;width:100%;height:100%;border-radius:50%;box-shadow:0 0 0 1px #00000026;background:linear-gradient(135deg,var(--a) 0 55%,var(--b) 55%)}.finishes button[aria-pressed=true] .dot{box-shadow:0 0 0 2px var(--desk),0 0 0 3.5px var(--ink)}.finishes button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}.brand{position:fixed;top:16px;left:20px;z-index:5;display:flex;align-items:center;gap:8px}.brand img{display:block;height:22px;width:auto}.brand span{font-size:11px;line-height:1;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);opacity:.75;position:relative;top:-1px}.tagline{position:fixed;bottom:22px;left:var(--device-cx, 50%);transform:translate(-50%);z-index:1;margin:0;white-space:nowrap;font:700 calc(var(--u) * 13)/1 "Baloo 2",ui-rounded,system-ui,sans-serif;color:var(--mute);opacity:.85}.insert-hint{position:absolute;left:0;right:0;top:calc(var(--card-out) / 2);transform:translateY(-50%);margin:0;text-align:center;color:var(--mute);font:700 calc(var(--u) * 16)/1.2 "Baloo 2",ui-rounded,system-ui,sans-serif;transition:opacity .2s}.insert-hint[hidden]{display:block!important;opacity:0;pointer-events:none}.insert-hint span{position:relative}.hint-arrow{position:absolute;left:calc(100% - var(--u) * 30);top:50%;width:calc(var(--u) * 58);height:auto;color:#d8642f;transform:translateY(-70%) rotate(8deg);animation:hint-bob 1.6s ease-in-out infinite}@keyframes hint-bob{50%{transform:translate(calc(var(--u) * 5),-70%) rotate(8deg)}}@media (prefers-reduced-motion: reduce){.hint-arrow{animation:none}}body.loading main,body.loading .brand{opacity:0}main,.brand{transition:opacity .35s ease-out}.body3d{position:absolute;z-index:0;pointer-events:none}body.body-3d .device,body.body-3d .slot{background:none;box-shadow:none}.insert-hint .hint-arrow{display:none}.insert-hint.to-cards .hint-arrow{display:block}.device>.vol{position:absolute;z-index:3;left:calc(100% - var(--u) * 4);width:calc(var(--side-x) + var(--u) * 14);padding:0;border:0;background:none;cursor:pointer}.device>.vol.up{top:calc(var(--u) * 114);height:calc(var(--u) * 46)}.device>.vol.down{top:calc(var(--u) * 160);height:calc(var(--u) * 46)}.device>.vol:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:6px}.feedback{position:absolute;z-index:6;left:calc(100% - var(--u) * 60);top:calc(var(--card-out) + var(--u) * 40);width:240px;display:grid;gap:8px;padding:12px;border-radius:12px;background:#fbf8f1;box-shadow:0 6px 20px #0000002e;font:13px/1.4 -apple-system,system-ui,sans-serif;color:var(--ink)}.fb-mic{justify-self:start;width:44px;height:44px;border-radius:50%;border:0;background:#2a2823;color:#fff;cursor:pointer;display:grid;place-items:center}.fb-mic svg{width:22px;height:22px;fill:currentColor}.fb-mic.on{background:#d8642f;animation:fb-pulse 1s ease-in-out infinite}@keyframes fb-pulse{50%{box-shadow:0 0 0 8px #d8642f40}}.fb-row{display:flex;align-items:center;gap:8px}.fb-save{font:inherit;font-weight:600;border:0;border-radius:8px;padding:6px 12px;background:#2a2823;color:#fff;cursor:pointer}.fb-save:disabled,.fb-drop:disabled{opacity:.35;cursor:default}.fb-drop{font:inherit;border:0;background:none;color:var(--mute);cursor:pointer;text-decoration:underline}.fb-status{color:var(--mute);font-size:12px;font-variant-numeric:tabular-nums}.cards-pill,.desktop-note{display:none}.cards-title{margin:0 0 6px;font:800 22px/1.2 "Baloo 2",ui-rounded,system-ui,sans-serif;scroll-margin-top:12px}.levels{list-style:none;margin:0 0 22px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 14px;font-size:13px;line-height:1.35;color:var(--mute)}.levels li{display:flex;align-items:baseline;gap:6px}.levels b{flex:none;min-width:30px;padding:1px 6px;border-radius:6px;background:var(--lv);color:#fff;font-size:12px;text-align:center}@media (max-width: 860px){html,body{height:auto;overflow-x:hidden;overflow-y:auto}html{scroll-behavior:smooth}.desk{display:block;height:auto;padding:0;overflow:visible}.brand{position:absolute;top:14px;left:16px}.finishes{position:absolute;z-index:5;top:14px;right:16px;grid-auto-flow:column;gap:8px}.finishes .finish-note{display:none}.desk>.device-wrap{top:0;height:100svh;overflow:clip;display:flex;flex-direction:column;align-items:center;padding-inline:0;padding-top:calc(var(--top-bar) + var(--card-out) + var(--top-face) * .7 + var(--u) * 1)}.device-wrap{--top-bar: 44px}.hands{width:calc(var(--u) * 276);flex:none}.slot-card,.carry{top:calc(var(--top-bar) + var(--u) * 6)}.insert-hint,.tagline{display:none}.cards-pill{display:inline-flex;align-items:center;gap:6px;position:absolute;z-index:4;bottom:max(14px,env(safe-area-inset-bottom));left:50%;transform:translate(-50%);padding:10px 18px;border-radius:999px;background:#fbf8f1;color:var(--ink);text-decoration:none;white-space:nowrap;font:700 17px/1 "Baloo 2",ui-rounded,system-ui,sans-serif;box-shadow:0 4px 14px #3c280f4d;transition:opacity .2s}.desktop-note{display:flex;align-items:center;gap:10px;position:absolute;z-index:1;left:50%;transform:translate(-50%);top:calc(var(--top-bar) + var(--card-out) / 2);translate:0 -50%;width:min(calc(100% - 40px),330px);margin:0;font-size:13px;line-height:1.35;color:var(--mute);transition:opacity .2s}.desktop-note svg{flex:none;width:26px;height:26px;color:var(--ink);opacity:.55}.desktop-note b{color:var(--ink);font-weight:600}.desktop-note[hidden]{display:flex;opacity:0;pointer-events:none}.cards-pill svg{width:18px;height:18px;animation:cards-pill 1.6s ease-in-out infinite}.cards-pill[hidden]{display:inline-flex;opacity:0;pointer-events:none}.cards{width:auto;height:auto;overflow:visible;padding:20px 18px calc(32px + env(safe-area-inset-bottom))}.cards-title{text-align:center}.levels{grid-template-columns:1fr;justify-content:center;width:max-content;max-width:100%;margin-inline:auto}#cards{grid-template-columns:repeat(2,1fr);gap:22px 18px}#cards .card,#cards .card.inserted{transform:translate(calc(var(--x, 0px) * .3),calc(var(--y, 0px) * .3)) rotate(calc(var(--r, 0deg) * .4))}}@keyframes cards-pill{50%{transform:translateY(3px)}}@media (prefers-reduced-motion: reduce){.cards-pill svg{animation:none}}.smooth-screen .screen canvas{image-rendering:auto}@media (pointer: fine){.desktop-note,.desktop-note[hidden]{display:none}}