:root{color-scheme:light;font-family:'Arial Rounded MT Bold','Trebuchet MS',system-ui,sans-serif;color:#765453;background:#faf4ee;font-synthesis:none}
*{box-sizing:border-box}
body{margin:0;min-width:320px;background:radial-gradient(circle at 12% 8%,#f5dfdf88,transparent 35%),radial-gradient(circle at 88% 92%,#dae9df99,transparent 38%),#faf4ee}
body::before{content:'';position:fixed;inset:0;background-image:radial-gradient(#ccaea72b 1px,transparent 1px);background-size:22px 22px;pointer-events:none}
.app{position:relative;height:100svh;min-height:500px;max-width:1600px;margin:auto;padding:20px clamp(14px,4.2vw,64px) 12px;display:grid;grid-template-rows:62px minmax(0,1fr) 26px;gap:14px}
.masthead{display:flex;align-items:center;justify-content:space-between;padding:0 5px}.wordmark{display:flex;align-items:center;gap:12px}.emblem{display:grid;place-items:center;width:46px;height:46px;background:#f6d6d5;border:3px solid #fff9f5;border-radius:17px;box-shadow:0 3px 0 #e9c4c5;transform:rotate(-9deg);font-size:34px;line-height:1;color:#b67678}h1{font-size:30px;font-weight:800;letter-spacing:-1.2px;margin:0;color:#805c5d}.wordmark-dot{color:#d99c85}
.actions{display:flex;align-items:center;gap:15px;padding:6px 7px 6px 19px;border:2px solid #fff;background:#fffbf6;border-radius:99px;box-shadow:0 3px 0 #e9dbd2}.direction{font-size:26px;color:#8daba1;line-height:1}.direction span{font:700 10px system-ui;letter-spacing:1.5px;vertical-align:middle;margin-right:5px}
button{width:42px;height:42px;padding:11px;display:grid;place-items:center;background:#d9e9df;border:0;border-radius:50%;color:#608677;cursor:pointer;box-shadow:inset 0 -3px 0 #bfd9cb;transition:transform .2s,background .2s}button:hover{background:#cce3d6;transform:translateY(-1px)}button:active{transform:translateY(1px)}button:focus-visible{outline:3px solid #b48398;outline-offset:5px}button svg{width:20px;height:20px;grid-area:1/1;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}.play-icon{display:none}button[aria-pressed=true] .play-icon{display:block}button[aria-pressed=true] .pause-icon{display:none}
.theatre{position:relative;min-height:0;border:5px solid #fffcf7;border-radius:36px;overflow:hidden;box-shadow:0 7px 0 #e5cebf,0 18px 36px #96745b16;background:#f9e9d4}canvas{display:block;width:100%;height:100%}#load-error{position:absolute;inset:40% 20px auto;text-align:center;font:16px/1.6 system-ui;color:#805453;background:#fffaf2;padding:24px;border-radius:20px}
footer{display:flex;align-items:center;justify-content:center;gap:12px}.signature{font-size:12px;font-weight:700;letter-spacing:.5px;color:#a58b83}.footer-line{height:4px;width:4px;border-radius:50%;background:#d9b5ad}
@media(max-width:650px){.app{padding:max(10px,env(safe-area-inset-top)) 10px max(8px,env(safe-area-inset-bottom));grid-template-rows:53px minmax(0,1fr) 22px;gap:12px}h1{font-size:25px}.wordmark{gap:9px}.emblem{width:38px;height:38px;font-size:29px;border-radius:14px}.actions{gap:9px;padding:5px 5px 5px 12px}.direction span{display:none}button{width:37px;height:37px;padding:9px}.theatre{border-radius:28px;border-width:4px}.signature{font-size:11px}}
@media(max-height:500px){.app{height:auto;min-height:500px}}
@media(prefers-reduced-motion:reduce){button{transition:none}}
.view-label{font:12px system-ui;color:#9a877c}#elapsed{font:12px ui-monospace,monospace;color:#8f8075;font-variant-numeric:tabular-nums}.actions{gap:12px}.embedded .app{padding:10px;min-height:360px;grid-template-rows:46px minmax(0,1fr) 18px;gap:10px}.embedded h1{font-size:21px}.embedded .emblem{width:32px;height:32px;font-size:25px;border-radius:12px}.embedded .view-label{display:none}.embedded .theatre{border-radius:24px}.embedded button{width:34px;height:34px;padding:8px}.embedded .actions{padding:3px 4px 3px 12px;gap:10px}.embedded .direction span{display:none}
@media(max-width:650px){.view-label{display:none}.actions{gap:8px}.direction{font-size:22px}#elapsed{font-size:11px}h1{font-size:22px}.wordmark{gap:7px}}
@media(max-width:420px){.wordmark .emblem{display:none}}