.th-demo{margin:0 0 28px;max-width:600px}.th-stage{position:relative;aspect-ratio:4 / 3;overflow:hidden;border-radius:14px;border:1px solid rgb(53 168 255 / .35);background:#060911}.th-stage[data-playing=true]{touch-action:none;cursor:ew-resize}.th-still,.th-stage .th-canvas{position:absolute!important;top:0;right:0;bottom:0;left:0;width:100%!important;height:100%!important;display:block}.th-hud{position:absolute;inset:10px 12px auto;display:flex;justify-content:space-between;margin:0;color:#fff;font-size:calc(14px * var(--text-scale, 1));pointer-events:none;text-shadow:0 1px 4px #000}.th-hud span{color:#ffd08a;font-weight:700}.th-hud[aria-hidden=true]{visibility:hidden}.th-mark{color:#ffd08a;font-size:calc(12px * var(--text-scale, 1))}.th-mark{position:absolute;left:10px;bottom:10px;padding:3px 8px;border-radius:6px;border:1px solid #ffd08a;background:#0000008c;pointer-events:none}.th-start{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;padding:16px;background:#04060c59}.th-play{min-height:48px;padding-inline:22px}.th-nogl{margin:0;max-width:28ch;text-align:center;color:#e9eef8}.th-demo figcaption{margin-top:8px}.th-demo .lr-step{margin:0}.th-tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}.th-tab{flex:none;min-height:44px;padding:0 14px;border-radius:10px;border:1px solid rgb(255 255 255 / .18);background:#0f1524;color:#c9cfe0;font:600 calc(13px * var(--text-scale, 1)) / 1.2 ui-monospace,"SF Mono",Menlo,monospace;white-space:nowrap}.th-tab[aria-selected=true]{border-color:#35a8ff;color:#fff;background:#10203a}.th-code pre{max-height:460px;overflow:auto}.th-next{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-bottom:24px}.th-next .bd-card h3{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.rn-stage{aspect-ratio:4 / 3}@media (min-width: 640px){.rn-demo{max-width:760px}.rn-stage{aspect-ratio:16 / 9}}.rn-stage[data-playing=true]{touch-action:none;cursor:pointer}.rn-pips{display:inline-flex;gap:3px}.rn-pips i{width:15px;height:15px;border-radius:50%;border:2px solid rgb(32 156 233 / .7);background:#06091180}.rn-pips i[data-on=true]{border-color:#8fd2ff;background:#209ce9;box-shadow:0 0 6px #209ce9cc}@media (prefers-reduced-motion: no-preference){.rn-pips i{transition:background-color .16s ease-out,box-shadow .16s ease-out}}.rn-count{justify-content:flex-end}.rn-hint{position:absolute;left:50%;top:22%;transform:translate(-50%);margin:0;padding:6px 14px;border-radius:999px;background:#060911b8;color:#fff;font-weight:700;font-size:calc(18px * var(--text-scale, 1));white-space:nowrap;pointer-events:none}.rn-end{position:absolute;top:0;right:0;bottom:0;left:36%;display:grid;align-content:center;justify-items:center;gap:10px;background:linear-gradient(to right,#06091100,#060911bd 24%)}.rn-score{margin:0;color:#fff;font-weight:800;font-size:calc(36px * var(--text-scale, 1));line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}@media (min-width: 640px){.rn-score{font-size:calc(44px * var(--text-scale, 1))}}.rn-end[data-all=true] .rn-score{color:#7dff9a}.rn-end .th-play{min-height:48px;min-width:150px}.rn-demo .rn-checked{min-height:44px;padding:0 14px;border:0;border-radius:999px;background:none;color:#7dff9a;font-weight:700;font-size:calc(14px * var(--text-scale, 1));cursor:pointer;text-decoration:underline dotted;text-underline-offset:4px}.rn-demo .rn-checked[data-ok=false]{color:#ffd23f}.rn-demo .rn-checked--wait{margin:0;display:grid;align-items:center;color:#b9c6dc;text-decoration:none;cursor:default}.rn-why{margin:10px 0 0;font-size:calc(14px * var(--text-scale, 1));color:#b9c6dc}.rn-hero{padding-bottom:8px}.rn-hero h1{margin-bottom:4px}.rn-demo .rn-gift{margin:0 0 10px;padding:5px 12px;border-radius:999px;background:#060911b8;color:#fff;font-weight:700;font-size:calc(14px * var(--text-scale, 1));text-align:center}.rn-claim{display:grid;gap:10px;margin:12px 0 0;max-width:420px}.rn-to{display:grid;gap:4px;font-weight:700;font-size:calc(14px * var(--text-scale, 1))}.rn-to input{min-height:48px;width:100%;padding:0 12px;border-radius:10px;border:1px solid rgb(255 255 255 / .25);background:#06091199;color:#fff;font:inherit;font-weight:500;font-size:calc(16px * var(--text-scale, 1))}.rn-purse{min-height:44px;justify-self:start;padding:0 14px;border-radius:999px;border:1px solid rgb(143 210 255 / .6);background:none;color:#8fd2ff;font-weight:700;font-size:calc(14px * var(--text-scale, 1));cursor:pointer}.rn-send{min-height:48px;min-width:190px}.rn-keys{display:flex;flex-wrap:wrap;align-items:center;gap:10px}.rn-demo .th-start{align-content:center}
