*{box-sizing:border-box}body{margin:0;background:var(--background);color:var(--ink);font-family:var(--studio-heading);min-height:100vh}body:before{content:'';position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 12% 30%,#f7cbd955 0 4px,transparent 5px),radial-gradient(circle at 89% 70%,#f7cbd955 0 7px,transparent 8px);background-size:210px 230px;z-index:-1}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;border:1.5px solid var(--line);border-radius:14px;background:var(--paper);padding:10px 16px;box-shadow:0 3px 0 #e7b9ca40;touch-action:manipulation}button:hover{background:#ffe1ed}button:active{transform:translateY(2px);box-shadow:none}button:focus-visible,a:focus-visible{outline:3px solid #a95680;outline-offset:4px}button:disabled{opacity:.4;cursor:default}header{height:78px;display:flex;align-items:center;justify-content:space-between;max-width:1380px;margin:auto;padding:0 38px}header a{text-decoration:none;color:#925c76;font-size:14px}header>span{font-size:11px;letter-spacing:2px;color:#b28094}header button{font-size:12px;padding:8px 13px}.heading{text-align:center;margin:10px 0 28px}.eyebrow{font-size:10px;letter-spacing:2.3px;color:#b78095}.heading h1{font-size:52px;line-height:1.1;font-weight:450;margin:12px 0}.heading h1 span{color:#e76f9d;font-size:43px}.heading>p:last-child{font-size:14px;color:var(--muted);letter-spacing:1px}.layout{display:grid;grid-template-columns:190px minmax(280px,560px) 190px;gap:24px;max-width:1012px;margin:auto;padding:0 12px}.left,.right{padding-top:44px}.panel{border:1px solid #f0ccda;background:var(--paper);border-radius:23px;padding:22px;margin-bottom:18px;box-shadow:0 7px 15px #8b3b6210}.label{display:block;font-size:12px;color:#aa728b;letter-spacing:1px}.panel strong{display:block;font-size:42px;font-weight:400;margin-top:6px}.panel p{font-size:11px;line-height:1.9;color:#af7a92;margin:8px 0 0}.score-panel{border-top:4px solid #e88aae}.instructions{background:transparent;box-shadow:none}.instructions p{font-size:12px}.keys{font-size:20px;line-height:1.25;margin:16px 0;color:#ad718d;letter-spacing:8px}.board-top,.board-bottom{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:12px;height:44px}.board-top button{padding:6px 12px;font-size:12px}.board-top i{display:inline-block;background:#a4bf8d;width:7px;height:7px;border-radius:100%;margin-right:7px}.board{position:relative;border:5px solid #ad668a;border-radius:23px;overflow:hidden;box-shadow:0 6px 0 #dba2bc,0 16px 40px #9f547b18;background:#f8e1e8;aspect-ratio:1}canvas{display:block;width:100%;height:100%;touch-action:none}.overlay{position:absolute;inset:0;display:grid;place-items:center;padding:20px;background:#f8e1e8a8;backdrop-filter:blur(3px)}.overlay[hidden]{display:none}.welcome{text-align:center;border:2px solid #f0bad0;background:var(--paper);border-radius:26px;width:100%;padding:26px 15px;box-shadow:0 10px 20px #80385315}.mascot{width:64px;height:66px;margin:0 auto 18px;background-image:url('assets/animals.png');background-repeat:no-repeat}.welcome h2{font-size:24px;font-weight:500;margin:12px 0}.welcome>p:not(.eyebrow){font-size:12px;color:#a7738a;line-height:1.7}.primary{display:block;width:85%;margin:25px auto 14px;background:var(--rose);color:white;border-color:#db588c;box-shadow:0 4px 0 #c9588840;font-size:18px;padding:14px}.primary:hover{background:#dd6596}.primary span{padding-left:24px}.welcome small{font-size:10px;color:#b68a9b}.animals{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:18px}.animals button{padding:8px 2px 6px;border-color:transparent;background:transparent;box-shadow:none;font-size:10px}.animals button[aria-pressed=true]{border-color:#e77ca6;background:#ffe7ef}.animal-icon{display:block;width:40px;height:42px;margin:0 auto 6px;background-image:url('assets/animals.png');background-repeat:no-repeat}.tip{padding:20px 14px}.tip>span{color:#e5bb72;font-size:32px}.tip h3{font-weight:400;font-size:24px;line-height:1.6}.tip p{font-size:11px;color:#b18196;line-height:2}.touch-controls{text-align:center;margin:7px auto}.touch-controls button{width:48px;height:38px;padding:2px;font-size:20px;margin:3px}.touch-controls>button{margin-bottom:1px}footer{text-align:center;margin:24px 0;font-size:9px;letter-spacing:2px;color:#ba8ca0}footer span{color:#e589ae;margin-left:8px}@media(max-width:900px){.layout{grid-template-columns:150px minmax(280px,520px);max-width:740px;gap:18px}.right{grid-column:1/-1;padding:0}.right .panel{display:flex;align-items:center;justify-content:center;gap:18px}.animals{display:flex;margin:0;gap:4px}.animals button{width:52px}.right .panel>p,.tip{display:none}.panel{padding:18px}.heading h1{font-size:44px}}@media(max-width:600px){header{height:55px;padding:0 16px}header>span{display:none}.heading{margin:12px 0 15px}.heading h1{font-size:37px;margin:8px}.heading h1 span{font-size:30px}.heading>p:last-child{font-size:11px}.eyebrow{font-size:8px}.layout{display:flex;flex-direction:column;gap:0;padding:0 16px;max-width:480px}.left{display:flex;gap:10px;padding:0}.left .panel{width:50%;padding:11px 16px;margin:0 0 8px;border-radius:16px;border-top-width:1px;display:flex;align-items:center;justify-content:space-between}.panel strong{font-size:26px;margin:0}.left .panel p,.instructions{display:none}.label{font-size:10px;letter-spacing:0}.board{border-width:4px;border-radius:20px}.welcome{padding:20px 10px}.mascot{margin-bottom:10px}.welcome h2{font-size:21px}.primary{margin-top:20px}.board-top{height:38px}.board-bottom{height:35px;font-size:11px}.right .panel{display:block;text-align:center;padding:12px;margin:10px 0 0}.animals{justify-content:center;margin-top:8px;gap:0}.animals button{width:43px}.animal-icon{transform:scale(.85);margin-bottom:0}.touch-controls{margin:0}footer{font-size:7px;margin:16px 0}.right{padding:0}}

.header-actions{display:flex;align-items:center;gap:10px}.heading h1,.welcome h2{font-family:var(--studio-heading)}.welcome h2{font-size:25px}.welcome>p:not(.eyebrow){max-width:310px;margin:12px auto}.panel p,.tip p{color:var(--muted)}.animals button{font-size:11px}.color-palette p{letter-spacing:0}.color-picker .color-option{width:auto;height:auto}.color-picker .color-toggle{padding:6px}.left .panel .label{line-height:1.5}
@media(max-width:600px){.left .panel{gap:8px}.left .panel .label{max-width:70px;font-size:9px}.heading>p:last-child{letter-spacing:0}.welcome h2{font-size:21px}.header-actions{gap:6px}}