:root{font-family:system-ui,sans-serif;color:#522445;background:#fff9f3}*{box-sizing:border-box}body{margin:0;overflow:hidden;overscroll-behavior:none}.studio{position:fixed;inset:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:12px;padding:12px max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));background:radial-gradient(ellipse at top,#fbe6ec,transparent 60%),#fff9f3}header{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px}.left,.right,.tools{display:flex;gap:8px;align-items:center}.right{justify-content:flex-end}button,.button,select{font:inherit;color:inherit;background:#fff7f5;border:1px solid #e5bdcc;border-radius:16px;padding:10px 14px;min-height:46px;cursor:pointer;touch-action:manipulation}.button{text-decoration:none}header button,.button{display:flex;flex-direction:column;text-align:center;font-size:23px;min-width:58px}small{font-size:12px}.title{text-align:center}h1{font:400 clamp(24px,3.6vw,42px) Georgia,serif;margin:0 0 5px}.title span{font-size:12px;display:flex;align-items:center;justify-content:center;gap:6px}.title img{width:30px;height:30px;border-radius:50%}.paper{border:1px solid #e5cfda;border-radius:20px;background:#fff;min-height:0;display:flex;flex-direction:column;overflow:hidden}.instructions{text-align:center;padding:12px 10px 0}h2{font:400 clamp(22px,3vw,32px) Georgia,serif;margin:0}p{margin:6px 0;font-size:14px}.drawing{min-height:0;flex:1;display:flex;align-items:center;justify-content:center;position:relative;padding:10px}canvas{display:block;max-width:100%;max-height:100%;width:auto;height:auto;touch-action:none;aspect-ratio:5/3}footer{background:#fff0f2;border:1px solid #efccd3;border-radius:22px;padding:10px;text-align:center}.tools{justify-content:center;flex-wrap:wrap}.tools label{font-size:12px}#done{background:#a45370;color:white}#status{min-height:20px;margin-bottom:0}#picker,#games-picker{position:absolute;z-index:5;top:100px;left:12px;width:min(460px,calc(100% - 24px));max-height:65dvh;overflow:auto;background:#fff9f3;padding:15px;border:1px solid #dab3c0;border-radius:20px;box-shadow:0 8px 25px #52244525}#picker button{display:block;width:100%;text-align:left;margin:7px 0}#matches{width:100%;text-align:center}#matches .target{font-size:clamp(60px,16vh,120px);color:#a45370;padding:10px}#matches .choices{display:flex;justify-content:center;gap:15px}#matches button{font-size:clamp(38px,9vh,65px);min-width:75px}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid #522445;outline-offset:2px}button:disabled{opacity:.4} [hidden]{display:none!important}@media(max-width:550px){header{grid-template-columns:1fr 1fr}.title{grid-column:1/-1;grid-row:1}.left,.right{grid-row:2}header button,.button{font-size:20px;padding:5px 10px;min-height:48px}.studio{gap:8px;padding-top:8px}.title img{width:24px;height:24px}.instructions{padding-top:8px}.instructions p{font-size:12px}.tools{gap:5px}.tools button,select{padding:7px 10px;font-size:13px}.tools label{display:flex;align-items:center;gap:4px}#picker{top:135px}}@media(max-height:500px){header{grid-template-columns:1fr auto 1fr}.title{grid-column:2;grid-row:1}.left,.right{grid-row:1}.title span{display:none}h1{font-size:24px}.instructions{padding-top:4px}.instructions p{margin:2px}footer{padding:5px}#status{font-size:12px}}

.tic-game-link{display:block;padding:14px;border:1px solid #c8b6d7;border-radius:15px;color:#73558d;background:#faf1f8;text-decoration:none;text-align:center;font:inherit}.tic-shortcut{white-space:nowrap}@media(max-width:480px){header .right{gap:3px}header .right button,header .right .button{min-width:38px;padding:5px}header .right small{font-size:9px}}

header button[aria-expanded="true"]{background:#f3dce8;border-color:#b57c9b}header #games,header #choose{align-items:center;justify-content:center;min-width:82px}header .left{flex-shrink:0}@media(max-width:550px){#games-picker{top:135px}header{grid-template-columns:minmax(0,1fr) auto}.left{gap:5px}header #games,header #choose{min-width:58px;padding:5px 7px}.right{gap:4px}header .right button{min-width:40px;padding:5px 6px}header .right small{font-size:10px}}@media(max-height:500px) and (max-width:650px){header{grid-template-columns:1fr auto}.title{grid-row:1;grid-column:1/-1}.left,.right{grid-row:2}#picker,#games-picker{top:120px}}

#games-picker a{display:block;width:100%;text-align:left;margin:7px 0;font:inherit;color:inherit;background:#fff7f5;border:1px solid #e5bdcc;border-radius:16px;padding:10px 14px;min-height:46px;text-decoration:none;touch-action:manipulation}
/* Storybook activity surfaces */
.paper{background:#fffaf0;box-shadow:inset 0 0 65px #dec8a51c}.instructions{padding:clamp(8px,1.5vh,18px) 12px 0}.instructions p{color:#806276}.drawing{padding:8px;overflow:hidden;background:radial-gradient(ellipse at center,#fffaf000 30%,#e7d4ae16)}canvas{border-radius:16px;flex:none}.title img{object-fit:contain;border-radius:0}.instructions h2{font-size:clamp(21px,3vw,32px)}
#matches{max-width:850px;max-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(8px,2vh,25px);padding:8px}.puzzle-scene{width:100%;display:flex;justify-content:center;align-items:center;gap:12px}.puzzle-pip{width:24%;max-height:230px;object-fit:contain;mix-blend-mode:multiply}.wood-board{width:70%;padding:clamp(12px,3vw,30px);display:flex;gap:15px;border:2px solid #c6a57b;border-radius:25px;background:repeating-linear-gradient(2deg,#e6c99d20 0px,#b78d561c 2px,#f2d9b115 5px,#f2d9b100 9px),linear-gradient(100deg,#f0debd,#e7cba0 45%,#f7e7c9);box-shadow:0 7px 0 #cbb08b,0 12px 20px #8d654c17,inset 0 3px 8px #fff8e4}.recess{flex:1;min-width:0;position:relative}.recess svg{width:100%;display:block;fill:#bba17e;filter:drop-shadow(0 -2px 1px #7b5b3f66)}.recess.wanted svg{fill:#9d8361;stroke:#f7e7bc;stroke-width:2;stroke-dasharray:3 4}.recess.filled svg{fill:#a2b590;stroke:none}#matches .choices{gap:clamp(12px,3vw,30px);width:70%;margin-left:24%}#matches button.wood-piece{width:29%;min-width:44px;min-height:44px;aspect-ratio:1;padding:5px;background:transparent;border:0;box-shadow:none;transition:transform .2s}#matches button.wood-piece svg{width:100%;height:100%;filter:drop-shadow(0 4px 1px #76594144);stroke:#af8b6877;stroke-width:1}.wood-piece.circle svg{fill:#dcafbb}.wood-piece.triangle svg{fill:#abbfa0}.wood-piece.square svg{fill:#b5b7d4}.wood-piece.correct{transform:translateY(-8px)}.wood-piece.correct svg{filter:drop-shadow(0 0 7px #9bba88)}
@media(max-width:550px){.instructions p{max-width:340px;margin:5px auto;font-size:12px}.wood-board{border-radius:16px;gap:5px;padding:10px}.puzzle-scene{gap:2px}#matches{padding:0}.puzzle-pip{width:23%}#matches .choices{gap:8px}.tools label{font-size:0}.tools select{max-width:175px;font-size:12px}#status{font-size:12px}.paper{border-radius:17px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Keep all new artwork within the original white worksheet. */
.paper{background:#fff;box-shadow:none}.drawing{background:#fff;padding:10px}.instructions{padding:12px 10px 0}.instructions h2{font-size:clamp(22px,3vw,32px)}.instructions p{color:inherit}canvas{border:0;box-shadow:none;border-radius:12px}#matches{background:#fff;max-width:950px;padding:10px}.title img{border-radius:50%}

/* Watercolor objects are painted directly onto the existing white activity area. */
#matches{position:relative;isolation:isolate;height:100%;max-width:1000px;padding:6% 2% 17%;gap:5%;justify-content:center;background:#fff url('/assets/trace/border.webp') center bottom/100% auto no-repeat;border:0;box-shadow:none;border-radius:0;overflow:hidden}
.puzzle-scene{position:static;display:block;width:100%;flex:none}.puzzle-pip{position:absolute;left:0;bottom:6%;width:27%;height:36%;max-height:none;object-fit:contain;mix-blend-mode:normal;pointer-events:none}.wood-board{position:relative;width:87%;margin:0 auto;padding:4% 7%;aspect-ratio:3.15/1;display:flex;gap:9%;align-items:center;border:0;border-radius:0;background:transparent url('/assets/trace/board.webp') center/100% 100% no-repeat;box-shadow:none}.recess{aspect-ratio:1;width:25%;flex:1}.recess svg{fill:none;filter:drop-shadow(0 -2px 2px #79563155)}.recess.wanted{outline:3px solid #be8293;border-radius:45%;outline-offset:-6px}.recess.wanted[data-shape="square"]{border-radius:8px}.recess.wanted[data-shape="triangle"]{outline:none}.recess.wanted[data-shape="triangle"] svg{filter:drop-shadow(0 0 3px #b55f7b)}.recess.filled{outline-color:#aac290}.recess.filled svg{filter:drop-shadow(0 2px 1px #6b513c33)}#matches .choices{position:relative;width:64%;margin-left:25%;gap:6%;margin-top:0;z-index:2}#matches button.wood-piece{width:29%;padding:0;touch-action:none;user-select:none;min-width:44px;min-height:44px}#matches button.wood-piece svg{fill:none;filter:drop-shadow(0 3px 2px #80674444)}.wood-piece.correct{opacity:.25;transform:none}.wood-piece.dragging{z-index:5;transition:none;opacity:.9}.wood-piece.dragging svg{filter:drop-shadow(0 6px 5px #80674466)}
@media(max-width:550px){#matches{padding:8% 0 22%;gap:7%}.wood-board{width:96%;padding:4% 7%;gap:6%}.puzzle-pip{width:29%;height:30%;bottom:9%}#matches .choices{width:65%;margin-left:28%;gap:4%}.recess.wanted{outline-width:2px;outline-offset:-3px}}
