/* Shared portrait tracing activity tokens and layout. */
.trace-player{--tr-cream:#fffaf1;--tr-ink:#302b55;--tr-purple:#7653c7;--tr-muted:#77748b;--tr-rail:#ded7ee;--tr-fill:#36aa99;--tr-yellow:#ffcf54;--tr-radius:32px;--tr-touch:72px;--tr-gap:16px;--tr-title:Fredoka,ui-rounded,sans-serif;--tr-copy:Andika,sans-serif;position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:var(--tr-cream);color:var(--tr-ink);font-family:var(--tr-title);overscroll-behavior:contain}.trace-player *{box-sizing:border-box}.trace-player::backdrop{background:var(--tr-cream)}body:has(.trace-player[open]){overflow:hidden}.trace-shell{width:100%;max-width:480px;min-height:100svh;margin:auto;padding:max(12px,env(safe-area-inset-top)) 24px max(24px,env(safe-area-inset-bottom));display:flex;flex-direction:column}.trace-player button{cursor:pointer;font-family:var(--tr-title);touch-action:manipulation;transition:transform 160ms;min-height:var(--tr-touch);border:0}.trace-player button:active:not(:disabled){transform:scale(.96)}.trace-player button:focus-visible{outline:3px solid var(--tr-purple);outline-offset:4px}.trace-top{display:flex;align-items:center;justify-content:space-between;gap:var(--tr-gap);font-size:22px}.trace-icon{width:72px;min-width:72px;border-radius:24px;display:grid;place-items:center;background:white;color:var(--tr-purple)}.trace-icon svg{width:28px;height:28px}.trace-lesson-progress{display:flex;gap:8px;margin-top:18px}.trace-lesson-progress span{height:9px;border-radius:999px;flex:1;background:var(--tr-rail)}.trace-lesson-progress .done{background:var(--tr-fill)}.trace-lesson-progress .current{background:var(--tr-yellow)}.trace-main{flex:1;display:flex;flex-direction:column;justify-content:center;padding:24px 0 16px}.trace-eyebrow{font:11px var(--tr-copy);letter-spacing:1.2px;color:var(--tr-muted);text-align:center;margin:0 0 10px}.trace-main h1{font:600 30px/1.2 var(--tr-title);text-align:center;margin:0}.trace-instruction{font:15px/1.5 var(--tr-copy);color:var(--tr-muted);text-align:center;margin:12px 0 20px}.trace-board-wrap{position:relative;background:white;border:2px solid #eee8f4;border-radius:var(--tr-radius);width:100%;aspect-ratio:1;max-height:360px;align-self:center;display:grid;place-items:center;overflow:hidden}.trace-canvas{display:block;width:100%;height:100%;max-height:360px;touch-action:none;user-select:none;-webkit-user-select:none}.trace-canvas path{fill:none;stroke-linecap:round;stroke-linejoin:round}.trace-rail{stroke:var(--tr-rail);stroke-width:37}.trace-dots{stroke:white;stroke-width:5;stroke-dasharray:1 13}.trace-ink path,.trace-live{stroke:var(--tr-fill);stroke-width:37;pointer-events:none}.trace-cursor circle{fill:var(--tr-yellow);stroke:white;stroke-width:4}.trace-cursor text{font:600 14px var(--tr-copy);fill:var(--tr-ink);pointer-events:none}.trace-demo-dot{fill:var(--tr-purple);stroke:white;stroke-width:5;pointer-events:none}.trace-complete-mark{position:absolute;bottom:12px;right:12px;width:48px;height:48px;border-radius:50%;background:#e1f2e8;color:#237c6d;display:grid;place-items:center}.trace-complete-mark[hidden]{display:none}.trace-complete-mark svg{width:30px;height:30px}.trace-coach{display:flex;align-items:center;gap:12px;margin-top:16px;min-height:60px}.trace-coach img{width:58px;height:64px;object-fit:contain}.trace-feedback{font:14px/1.5 var(--tr-copy);margin:0}.trace-bottom{display:flex;flex-direction:column;gap:14px}.trace-tools{display:flex;gap:12px}.trace-tools button{display:flex;align-items:center;justify-content:center;gap:8px;flex:1;min-width:0;background:#f0eafb;border-radius:22px;color:var(--tr-purple);font-size:16px;padding:12px 8px}.trace-tools svg{width:24px;height:24px;flex-shrink:0}.trace-next{display:flex;align-items:center;justify-content:center;gap:16px;width:100%;background:var(--tr-purple);color:white;box-shadow:0 5px 0 #6041a5;border-radius:24px;padding:16px 24px;font:600 22px var(--tr-title)}.trace-next svg{width:26px;height:26px}.trace-next:disabled{background:#e6e0ec;color:#81768e;box-shadow:none;cursor:default}.trace-summary{justify-content:center;align-items:center;gap:24px;text-align:center}.trace-summary>img{width:200px;height:220px;object-fit:contain}.trace-summary h1{font:600 34px/1.15 var(--tr-title);margin:0}.trace-summary p{font:16px/1.5 var(--tr-copy);margin:0}.trace-stars{display:flex;gap:16px;color:#d49313}.trace-stars svg{width:52px;height:52px}.trace-again{background:none;color:var(--tr-purple);font-size:18px}.trace-player h1:focus{outline:none}
@media(max-height:760px) and (orientation:portrait){.trace-shell{padding-top:8px;padding-bottom:20px}.trace-main{padding:18px 0 12px}.trace-instruction{margin:8px 0 12px}.trace-board-wrap,.trace-canvas{max-height:290px}.trace-main h1{font-size:27px}.trace-coach{margin-top:10px}.trace-lesson-progress{margin-top:12px}.trace-tools button{min-height:72px}.trace-bottom{gap:12px}}
@media(min-width:700px) and (max-height:650px){.trace-shell{max-width:900px;display:grid;grid-template-columns:1fr 1fr;column-gap:32px;align-items:center}.trace-top{grid-column:1/-1}.trace-lesson-progress{grid-column:1/-1;margin:8px 0}.trace-main{display:contents}.trace-eyebrow,.trace-main h1,.trace-instruction,.trace-coach{grid-column:1}.trace-eyebrow{margin:8px 0}.trace-board-wrap{grid-column:2;grid-row:3/8;width:100%;max-height:280px;max-width:280px;justify-self:center}.trace-canvas{max-height:280px}.trace-coach{grid-row:6}.trace-bottom{grid-column:1;grid-row:7}.trace-tools button,.trace-next{min-height:72px}.trace-summary{display:flex}}
@media(prefers-reduced-motion:reduce){.trace-player *{transition:none!important;animation:none!important}}

@media(min-height:761px) and (orientation:portrait){.trace-main{padding:18px 0 10px}.trace-board-wrap,.trace-canvas{max-height:310px}}

.trace-direction{pointer-events:none}.trace-canvas .trace-arrow path{stroke:var(--tr-purple);stroke-width:4;fill:none;stroke-linecap:round;stroke-linejoin:round}

.trace-canvas .trace-cursor-arrow{stroke:var(--tr-ink);stroke-width:3.5;fill:none;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}

@media(max-width:350px) and (max-height:760px){.trace-shell{padding-left:16px;padding-right:16px}.trace-top{font-size:18px;gap:8px}.trace-main h1{font-size:24px}.trace-board-wrap,.trace-canvas{max-height:230px}.trace-feedback{font-size:13px}}