.x-arena{--f-white:#fff;--f-key-edge:color-mix(in srgb, var(--x-primary) 70%, var(--f-black));--f-pane:none;--f-tube:none;--f-black:#000;--f-spring:linear(0, .36 9%, .83 22%, 1.06 34%, 1.1 41%, 1.04 58%, .99 72%, 1);--f-hi:color-mix(in srgb, var(--f-white) 14%, transparent);--f-lo:#0000006b;--f-shade:#0000009e;--f-shade-soft:#0006;--f-rivet:color-mix(in srgb, var(--x-on-surface) 46%, transparent);--f-grain:repeating-linear-gradient(94deg, color-mix(in srgb, var(--x-on-surface) 4%, transparent) 0 1px, transparent 1px 4px);--f-floor:repeating-linear-gradient(100deg, color-mix(in srgb, var(--x-on-surface) 2.5%, transparent) 0 1px, transparent 1px 5px);--f-rivets:radial-gradient(circle at 14px 14px, var(--f-rivet) 0 1px, var(--f-lo) 2px 3.5px, transparent 4.5px), radial-gradient(circle at calc(100% - 14px) 14px, var(--f-rivet) 0 1px, var(--f-lo) 2px 3.5px, transparent 4.5px), radial-gradient(circle at 14px calc(100% - 14px), var(--f-rivet) 0 1px, var(--f-lo) 2px 3.5px, transparent 4.5px), radial-gradient(circle at calc(100% - 14px) calc(100% - 14px), var(--f-rivet) 0 1px, var(--f-lo) 2px 3.5px, transparent 4.5px);--f-fill:var(--f-grain), linear-gradient(176deg, color-mix(in srgb, var(--x-raised) 90%, var(--x-on-surface)) 0%, var(--x-surface) 34%, var(--x-surface) 64%, color-mix(in srgb, var(--x-surface) 84%, var(--x-background)) 100%);--f-quiet:color-mix(in srgb, var(--x-surface) 58%, transparent);--f-edge:color-mix(in srgb, var(--x-on-surface) 15%, transparent);--f-lift:inset 0 1px 0 var(--f-hi), inset 0 -2px 0 var(--f-lo), 0 2px 0 var(--f-lo), 0 16px 24px -14px var(--f-shade), 0 40px 80px -36px var(--f-shade);--f-lift-low:inset 0 1px 0 var(--f-hi), inset 0 -1px 0 var(--f-lo), 0 1px 0 var(--f-lo), 0 10px 16px -12px var(--f-shade-soft);--f-key-face:linear-gradient(180deg, color-mix(in srgb, var(--x-primary) 90%, var(--f-white)) 0%, var(--x-primary) 46%, color-mix(in srgb, var(--x-primary) 86%, var(--f-black)) 100%);--f-key:inset 0 1px 0 color-mix(in srgb, var(--f-white) 36%, transparent), inset 0 -4px 0 #0000003d, 0 2px 0 var(--f-key-edge), 0 14px 22px -12px color-mix(in srgb, var(--x-primary) 70%, var(--f-black));--f-key-down:inset 0 3px 8px #0000005c, 0 0 0 var(--f-key-edge);--f-ink:linear-gradient(180deg, var(--x-on-surface) 0%, color-mix(in srgb, var(--x-on-surface) 64%, var(--x-background)) 47%, var(--x-on-surface) 53%, color-mix(in srgb, var(--x-on-surface) 80%, var(--x-background)) 100%);--f-light:color-mix(in srgb, var(--x-accent) 26%, transparent);--f-spot:color-mix(in srgb, var(--x-accent) 20%, transparent)}.x-arena[data-x-appearance=light]{--f-hi:color-mix(in srgb, var(--f-white) 90%, transparent);--f-lo:color-mix(in srgb, var(--x-on-surface) 20%, transparent);--f-shade:color-mix(in srgb, var(--x-on-surface) 34%, transparent);--f-shade-soft:color-mix(in srgb, var(--x-on-surface) 20%, transparent)}@media (prefers-color-scheme:light){.x-arena[data-x-appearance=system]{--f-hi:color-mix(in srgb, var(--f-white) 90%, transparent);--f-lo:color-mix(in srgb, var(--x-on-surface) 20%, transparent);--f-shade:color-mix(in srgb, var(--x-on-surface) 34%, transparent);--f-shade-soft:color-mix(in srgb, var(--x-on-surface) 20%, transparent)}}.x-arena[data-f-material=chalk]{--f-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");--f-floor:var(--f-grain);--f-rivets:none;--f-fill:var(--f-grain), linear-gradient(var(--x-surface), var(--x-surface));--f-quiet:color-mix(in srgb, var(--x-surface) 50%, transparent);--f-edge:color-mix(in srgb, var(--x-on-surface) 9%, transparent);--f-lift:0 2px 6px -2px var(--f-shade-soft), 0 28px 56px -30px var(--f-shade-soft);--f-lift-low:0 1px 3px -1px var(--f-shade-soft), 0 12px 24px -18px var(--f-shade-soft);--f-key-face:linear-gradient(var(--x-primary), var(--x-primary));--f-key:inset 0 -2px 0 #0000001f, 0 12px 22px -12px color-mix(in srgb, var(--x-primary) 60%, transparent);--f-key-down:inset 0 2px 5px #00000038;--f-ink:linear-gradient(var(--x-on-surface), var(--x-on-surface));--f-light:color-mix(in srgb, var(--x-accent) 16%, transparent);--f-spot:color-mix(in srgb, var(--x-accent) 10%, transparent)}.x-arena[data-f-material=glass]{--f-grain:linear-gradient(transparent, transparent);--f-floor:linear-gradient(transparent, transparent);--f-rivets:none;--f-fill:linear-gradient(140deg, color-mix(in srgb, var(--x-surface) 74%, transparent), color-mix(in srgb, var(--x-surface) 54%, transparent));--f-quiet:color-mix(in srgb, var(--x-surface) 44%, transparent);--f-edge:color-mix(in srgb, var(--x-on-surface) 22%, transparent);--f-lift:inset 0 1px 0 color-mix(in srgb, var(--f-white) 34%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--f-white) 6%, transparent), 0 26px 60px -30px var(--f-shade);--f-lift-low:inset 0 1px 0 color-mix(in srgb, var(--f-white) 26%, transparent), 0 14px 30px -20px var(--f-shade-soft);--f-key-face:linear-gradient(160deg, color-mix(in srgb, var(--x-primary) 88%, var(--f-white)), var(--x-primary) 60%);--f-key:inset 0 1px 0 color-mix(in srgb, var(--f-white) 50%, transparent), 0 16px 30px -14px color-mix(in srgb, var(--x-primary) 80%, transparent);--f-key-down:inset 0 2px 8px #00000042;--f-ink:linear-gradient(120deg, var(--x-on-surface) 30%, color-mix(in oklab, var(--x-on-surface) 62%, var(--x-accent)));--f-light:color-mix(in srgb, var(--x-accent) 44%, transparent);--f-spot:color-mix(in srgb, var(--f-white) 14%, transparent);--f-pane:blur(22px) saturate(1.6)}.x-arena[data-f-material=neon]{--f-grain:linear-gradient(transparent, transparent);--f-floor:repeating-linear-gradient(0deg, color-mix(in srgb, var(--x-on-surface) 4%, transparent) 0 1px, transparent 1px 34px), repeating-linear-gradient(90deg, color-mix(in srgb, var(--x-on-surface) 3%, transparent) 0 1px, transparent 1px 68px);--f-rivets:none;--f-fill:linear-gradient(180deg, color-mix(in srgb, var(--x-surface) 78%, transparent), color-mix(in srgb, var(--x-background) 78%, transparent));--f-quiet:color-mix(in srgb, var(--x-surface) 40%, transparent);--f-edge:color-mix(in srgb, var(--x-accent) 62%, transparent);--f-lift:0 0 0 1px color-mix(in srgb, var(--x-accent) 26%, transparent), 0 0 26px -4px color-mix(in srgb, var(--x-accent) 58%, transparent), inset 0 0 26px -14px color-mix(in srgb, var(--x-accent) 70%, transparent);--f-lift-low:0 0 16px -6px color-mix(in srgb, var(--x-accent) 55%, transparent);--f-key-face:linear-gradient(var(--x-primary), var(--x-primary));--f-key:inset 0 0 12px color-mix(in srgb, var(--f-white) 26%, transparent), 0 0 0 1px color-mix(in srgb, var(--x-primary) 60%, var(--f-white)), 0 0 28px -2px var(--x-primary);--f-key-down:inset 0 0 18px #0006, 0 0 10px -2px var(--x-primary);--f-ink:linear-gradient(var(--x-on-surface), var(--x-on-surface));--f-light:color-mix(in srgb, var(--x-accent) 30%, transparent);--f-spot:color-mix(in srgb, var(--x-accent) 24%, transparent);--f-tube:0 0 6px color-mix(in srgb, var(--x-accent) 90%, transparent), 0 0 26px color-mix(in srgb, var(--x-accent) 70%, transparent), 0 0 60px color-mix(in srgb, var(--x-accent) 45%, transparent)}.x-arena .f-slab{border:1px solid var(--f-edge);border-radius:var(--x-radius-panel);background:var(--f-rivets), var(--f-fill);box-shadow:var(--f-lift);-webkit-backdrop-filter:var(--f-pane);backdrop-filter:var(--f-pane)}.x-arena .f-quiet{border:1px solid color-mix(in srgb, var(--x-on-surface) 9%, transparent);border-radius:var(--x-radius-panel);background:var(--f-quiet);box-shadow:var(--f-lift-low);-webkit-backdrop-filter:var(--f-pane);backdrop-filter:var(--f-pane)}.x-arena .f-key{border:1px solid var(--f-key-edge);border-radius:var(--x-radius-control);background:var(--f-key-face);color:var(--x-on-primary);box-shadow:var(--f-key);transition:transform .22s var(--f-spring), box-shadow .16s}.x-arena .f-key:active{box-shadow:var(--f-key-down);transform:translateY(2px)scale(.985)}.x-arena .f-well{border-radius:var(--x-radius-control);background:color-mix(in srgb, var(--x-background) 70%, transparent);box-shadow:inset 0 2px 6px var(--f-shade-soft)}.x-arena .f-display{background:var(--f-ink);-webkit-text-fill-color:transparent;font-family:var(--x-font-display);text-transform:uppercase;-webkit-background-clip:text;background-clip:text}.x-arena .f-display em{-webkit-text-fill-color:var(--x-accent);text-shadow:var(--f-tube);font-style:normal}@media (prefers-reduced-motion:reduce){.x-arena .f-key{transition:none}}