@charset "UTF-8";
@font-face { font-family: Vazirmatn; src: url("vendor-local/fonts/webfonts/Vazirmatn-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: Vazirmatn; src: url("vendor-local/fonts/webfonts/Vazirmatn-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: Vazirmatn; src: url("vendor-local/fonts/webfonts/Vazirmatn-ExtraBold.woff2") format("woff2"); font-weight: 800; font-display: swap; }
:root { color-scheme: dark; font-family: Vazirmatn, Tahoma, sans-serif; background: #1b1423; color: #f9f7fc; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 0%, #30243c 0%, #231a2e 43%, #19121f 100%); overflow-x: hidden; }
.stage { width: min(100% - 48px, 490px); padding: 44px 0 26px; text-align: center; position: relative; }
.wordmark { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 19px; color: #b9afc4; font-size: 12px; font-weight: 600; letter-spacing: 0; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #ff786e; box-shadow: 0 0 0 4px #ff776c1a, 0 0 13px #ff776c65; }
h1 { font-size: clamp(48px, 12vw, 76px); font-weight: 800; letter-spacing: 0; line-height: 1.6; margin: 0; }
.subtitle { margin: 15px 0 0; color: #aaa0b5; font-size: 14px; line-height: 1.6; }
.toolbar { --bead-x: 322px; height: 140px; position: relative; margin-top: 20px; user-select: none; -webkit-user-select: none; touch-action: pan-y; -webkit-tap-highlight-color: transparent; isolation: isolate; }
.bar-surface { position: absolute; top: 0; left: 0; width: 100%; height: 140px; overflow: visible; filter: drop-shadow(0 12px 12px #0003); pointer-events: none; }
.ambient { position: absolute; width: 200px; height: 130px; left: clamp(100px, var(--bead-x), calc(100% - 100px)); top: 65px; transform: translateX(-50%); background: radial-gradient(ellipse, #ff68512b, #eb605014 40%, transparent 70%); filter: blur(20px); pointer-events: none; z-index: -1; }
.bead { position: absolute; left: 0; top: 10px; width: 58px; height: 58px; border: 1.6px solid #ffc0a5aa; border-radius: 50%; background: linear-gradient(140deg, #ff9d80 0%, #ff7c6b 38%, #f66a5b 80%, #df554d 100%); box-shadow: inset 0 2px 3px #ffd3b755, inset 0 -3px 5px #b33e3a38, 0 0 0 5px #f4786810, 0 0 30px #ff735b2b, 0 7px 16px #0003; will-change: transform; pointer-events: none; }
.bead-sheen { position: absolute; inset: 4px; border-radius: inherit; background: linear-gradient(145deg, #fff2, transparent 50%); }
.tabs { position: absolute; inset: 0 49px; display: grid; grid-template-columns: repeat(5, 1fr); }
.tab { appearance: none; border: 0; background: transparent; padding: 0; margin: 0; min-width: 0; height: 126px; font-family: inherit; color: #9e92ac; position: relative; cursor: pointer; touch-action: pan-y; }
.tab svg { position: absolute; width: 23px; height: 23px; top: 73px; left: calc(50% - 11.5px); stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; fill: none; transition: color .25s; will-change: transform; }
.tab:hover { color: #ded3e8; }
.tab:focus-visible { outline: none; }
.toolbar:has(.tab:focus-visible) .bead::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid #f5d8ceaa; pointer-events: none; }
.tab-label { position: absolute; top: 105px; left: 50%; transform: translate(-50%, 4px); font-size: 11px; font-weight: 600; letter-spacing: 0; opacity: 0; color: #ffa18e; transition: opacity .2s, transform .3s; white-space: nowrap; pointer-events: none; }
.tab[aria-selected="true"] .tab-label { opacity: 1; transform: translate(-50%, 0); }
.toolbar.is-dragging, .toolbar.is-dragging .tab { cursor: grabbing; }
.instructions { margin-top: 36px; color: #aaa0b3; font-size: 13px; line-height: 1.6; }
.instructions p { margin: 0; }
.instructions span { border-bottom: 1px dotted #8e7c96; padding-bottom: 2px; }
.keyboard-hint { font-size: 10px; opacity: .44; padding-top: 19px; letter-spacing: 0; }
kbd { font-family: inherit; margin-right: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 420px) { .stage { width: calc(100% - 32px); } h1 { letter-spacing: 0; } .tabs { inset-inline: 22px; } .bead { width: 52px; height: 52px; top: 13px; } .tab-label { font-size: 10px; } .instructions { font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }

.intro h1 { min-height: 1.6em; }
.subtitle { min-height: 1.6em; }
kbd { display: inline-block; direction: ltr; }