﻿.gpa{--ink:#203b37;--gold:#cfb775;--cream:#f3eddc;color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",sans-serif;container-type:inline-size}
.gpa *{box-sizing:border-box}.gpa button{font:inherit}.gpa-scene{border:1px solid #d7d4c4;background:#f4f0e5;border-radius:24px;overflow:hidden;box-shadow:0 20px 70px #172d2512}
.gpa-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 30px;border-bottom:1px solid #dad9ca}
.gpa-eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:#687971}.gpa-heading h2{font:500 30px Georgia,serif;margin:7px 0 0}.gpa-badge{font-size:11px;background:#e7debe;padding:8px 12px;border-radius:20px;white-space:nowrap}
.gpa-stage{position:relative;display:grid;grid-template-columns:29% 1fr;min-height:570px;padding:30px 36px 30px 12px;background:radial-gradient(ellipse at 12% 4%,#fffaf0 0%,transparent 55%),linear-gradient(180deg,#e9e5d9 0%,#e9e5d9 87%,#d6d3c7 87%)}
.gpa-character{align-self:end;position:relative;z-index:2}.gpa-character svg{display:block;width:100%;max-height:500px;overflow:visible}.gpa-character-caption{display:block;font-size:10px;text-align:center;color:#647268;letter-spacing:.05em}
.gpa-board{position:relative;min-width:0;min-height:440px;align-self:center;background:radial-gradient(ellipse at 30% 10%,#30554e,#173a35);border:9px solid #877350;border-radius:5px;box-shadow:inset 0 0 32px #092c2766,0 14px 20px #213d321c;color:#f9f1d8;padding:27px 32px 42px}
.gpa-board-top{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.18em;color:#b7c4ae}.gpa-board-marker{color:#dfc686}.gpa-board-title{font:normal 30px/1.2 Georgia,serif;padding-bottom:20px;border-bottom:1px solid #e7dfb62b;margin:22px 0 20px}
.gpa-board-items{display:flex;flex-direction:column;gap:12px;max-height:350px;overflow:auto;scrollbar-color:#799d8f #244941}
.gpa-board-line{font:25px/1.45 Georgia,serif;margin:0;white-space:pre-wrap;overflow-wrap:anywhere;animation:gpa-appear .3s ease-out both;padding:7px 12px;border-left:2px solid #d6c38166}
.gpa-board-line[data-zone=center]{text-align:center;align-self:center}.gpa-board-line[data-zone=right]{text-align:right;align-self:flex-end}.gpa-board-line[data-zone=left]{align-self:flex-start}.gpa-restored{animation:none}
.gpa-board-empty{font:italic 23px/1.5 Georgia,serif;color:#dce1c385;text-align:center;margin:52px 0 35px}.gpa-board-empty[hidden]{display:none}
.gpa-chalk-rail{position:absolute;bottom:-13px;left:-16px;right:-16px;height:12px;background:#756041;border-radius:2px}.gpa-chalk-rail span{display:block;width:46px;height:6px;background:#e8e4d0;border-radius:3px;margin-left:35px;transform:translateY(-6px)}
.gpa-footer{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:16px 26px;background:#faf7ef}.gpa-status{font-size:13px;margin:0}.gpa-status:before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#839b88;margin-right:10px}.gpa[data-playback=playing] .gpa-status:before{background:#ba8a2d}
.gpa-interrupt{background:var(--ink);border:0;color:white;border-radius:8px;padding:10px 15px;cursor:pointer}.gpa-interrupt:disabled{opacity:.45;cursor:default}.gpa button:focus-visible{outline:3px solid #bc7b25;outline-offset:3px}
.gpa-body{transform-origin:140px 550px;animation:gpa-breathe 5s ease-in-out infinite}.gpa-head{transform-origin:140px 165px;transition:transform .5s ease}.gpa-eyes{transform-origin:140px 110px;animation:gpa-blink 6.7s infinite}.gpa-arm{transform-origin:180px 200px;transition:transform .48s cubic-bezier(.22,.7,.36,1)}.gpa-mouth{transition:none}
.gpa[data-pose=point] .gpa-arm{transform:rotate(-94deg)}.gpa[data-pose=point][data-zone=center] .gpa-arm{transform:rotate(-101deg)}.gpa[data-pose=point][data-zone=right] .gpa-arm{transform:rotate(-108deg)}.gpa[data-pose=point] .gpa-head{transform:rotate(5deg)}.gpa-wand-light{opacity:0;transition:opacity .15s}.gpa[data-pose=point] .gpa-wand-light{opacity:1}
.gpa-spark{position:absolute;left:50%;top:43%;color:#f9e7a4;font-size:44px;text-shadow:0 0 20px #fff4ab;pointer-events:none;opacity:0;z-index:3}.gpa[data-zone=left] .gpa-spark{left:36%}.gpa[data-zone=right] .gpa-spark{left:84%}.gpa-spark-active{animation:gpa-magic .75s ease-out}
.gpa-reduced-motion .gpa-body,.gpa-reduced-motion .gpa-eyes,.gpa-reduced-motion .gpa-board-line,.gpa-reduced-motion .gpa-spark{animation:none!important}.gpa-reduced-motion .gpa-arm,.gpa-reduced-motion .gpa-head{transition:none!important}.gpa-reduced-motion .gpa-spark{display:none}
@keyframes gpa-breathe{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.006)}}@keyframes gpa-blink{0%,44%,47%,100%{transform:scaleY(1)}45%,46%{transform:scaleY(.1)}}@keyframes gpa-appear{from{opacity:.1;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}@keyframes gpa-magic{0%{opacity:0;transform:scale(.4)}25%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.6)}}
@container(max-width:680px){.gpa-heading{padding:18px;align-items:flex-start}.gpa-heading h2{font-size:23px}.gpa-badge{font-size:9px;white-space:normal;max-width:110px;text-align:center}.gpa-stage{padding:20px 20px 28px 0;grid-template-columns:25% 1fr;min-height:420px}.gpa-board{min-height:345px;padding:20px 18px 30px;border-width:6px}.gpa-board-title{font-size:24px;margin:15px 0}.gpa-board-line{font-size:19px}.gpa-board-empty{font-size:19px}.gpa-character-caption{font-size:8px}.gpa-footer{padding:12px 16px}.gpa-status{font-size:11px}.gpa-interrupt{font-size:12px}}
@container(max-width:440px){.gpa-stage{grid-template-columns:22% 1fr;padding-right:12px;min-height:360px}.gpa-board{padding:16px 12px 26px;min-height:300px}.gpa-board-title{font-size:20px}.gpa-board-line{font-size:17px}.gpa-board-empty{font-size:17px}.gpa-footer{align-items:flex-start}.gpa-heading{gap:9px}.gpa-eyebrow{font-size:9px}.gpa-character-caption{display:none}}


/* Optional silent clip renderer. Never paints board content into media. */
.gpa-character [hidden]{display:none!important}
.gpa-clip-layer{position:relative;width:100%;aspect-ratio:2/3;max-height:500px;overflow:hidden;border-radius:8px}
.gpa-clip-video,.gpa-clip-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.gpa-mode-clips[data-media-fallback=true] .gpa-clip-layer{display:none}
.gpa-mode-clips .gpa-body,.gpa-mode-clips .gpa-eyes{animation:none!important}
.gpa-mode-clips .gpa-arm,.gpa-mode-clips .gpa-head{transform:none!important;transition:none!important}
.gpa-mode-clips .gpa-mouth{display:none}
.gpa-mode-clips .gpa-character-caption{line-height:1.5;margin-top:8px}
