.op-tr-layout{grid-template-areas:"hero""map""play"}@container (width>=56rem){.op-tr-layout{grid-template-rows:auto 1fr;grid-template-areas:"hero map""play map"}}.op-tr-frame{height:22rem}@container (width>=56rem){.op-tr-frame{height:min(40rem,100dvh - 8rem)}}.op-tr-pin{cursor:pointer;width:18px;height:18px;position:relative}.op-tr-pin:before{content:"";border-radius:50%;position:absolute;inset:-13px}.op-tr-dot{font:700 10px/1 var(--font-sans,system-ui);color:#1d1b3a;background:#1d1b3a;border:3px solid #fff;border-radius:50%;place-items:center;transition:transform .2s,background-color .2s;display:grid;position:absolute;inset:0;box-shadow:0 2px 8px #00000059}.op-tr-pin[data-state=reached] .op-tr-dot{background:#ffd98a;border-color:#1d1b3a;animation:.42s cubic-bezier(.2,.9,.3,1.3) both op-tr-reach;inset:-5px}.op-tr-pin[data-start] .op-tr-dot{background:#f0b44d}.op-tr-name{font:600 12px/1.4 var(--font-sans,system-ui);white-space:nowrap;color:#1d1b3a;background:#fffffff0;border-radius:999px;padding:2px 9px;position:absolute;top:-2px;left:24px;box-shadow:0 2px 8px #00000040}.op-tr-pin[data-side=left] .op-tr-name{left:auto;right:24px}.op-tr-pin[data-side=below] .op-tr-name{top:24px;left:50%;transform:translate(-50%)}.op-tr-pin[data-side=above] .op-tr-name{top:-30px;left:50%;transform:translate(-50%)}.op-tr-pin[data-state=reached] .op-tr-name{background:#ffd98a}.op-tr-name[data-badge]:not([data-badge=""]):before{content:attr(data-badge) " · ";color:#8a4b00;font-weight:800}.op-tr-pin[data-hint] .op-tr-dot{animation:1.4s ease-in-out infinite op-tr-pulse}.op-tr-pin[data-wrong="0"]{animation:.32s op-tr-shake-a}.op-tr-pin[data-wrong="1"]{animation:.32s op-tr-shake-b}.op-tr-place{color:var(--color-text);background:var(--color-surface-2);border:1px solid var(--color-border);transition:transform .14s,background-color .14s,border-color .14s}.op-tr-place:hover{background:var(--color-surface-3)}.op-tr-place:active{transform:scale(.97)}.op-tr-place:focus-visible{outline:2px solid var(--color-ring);outline-offset:2px}.op-tr-place[data-state=reached]{border-color:color-mix(in oklab, var(--color-accent) 60%, var(--color-border))}.op-tr-place[data-hint]{border:2px solid #e29a2c;box-shadow:0 0 0 4px #e29a2c38}.op-tr-place[data-wrong="0"]{border-color:var(--color-danger);animation:.32s op-tr-shake-a}.op-tr-place[data-wrong="1"]{border-color:var(--color-danger);animation:.32s op-tr-shake-b}.op-tr-next,.op-tr-num{color:#1d1b3a;background:#f6cf86}.op-tr-num-slipped{background:var(--color-surface-3);color:var(--color-text)}.op-tr-result{animation:.36s both op-tr-rise}@keyframes op-tr-reach{0%{transform:scale(.4)}}@keyframes op-tr-pulse{50%{transform:scale(1.35);box-shadow:0 0 0 6px #f0b44d59}}@keyframes op-tr-shake-a{25%{translate:-6px}50%{translate:5px}75%{translate:-3px}}@keyframes op-tr-shake-b{25%{translate:-6px}50%{translate:5px}75%{translate:-3px}}@keyframes op-tr-rise{0%{opacity:0;transform:translateY(8px)}}@media (prefers-reduced-motion:reduce){.op-tr-pin,.op-tr-pin .op-tr-dot,.op-tr-place,.op-tr-result{transition:none;animation:none!important}.op-tr-place:active{transform:none}}