:root{--ink-0:#0a0c12;--ink-1:#101218;--ink-2:#181a20;--ink-3:#232328;--hud:#181818f5;--hud-line:#ffffff24;--glass-fill:linear-gradient(180deg, #24262e9e, #16181ea8);--glass-blur:blur(24px) saturate(1.5);--glass-rim:#ffffff29;--glass-shadow:inset 0 1px 0 #ffffff12, 0 24px 48px -16px #0009;--text:#ececf1;--text-soft:#ececf19e;--text-faint:#ececf159;--line:#ececf11f;--line-soft:#ececf112;--cyan:#56d8f0;--cyan-ink:#0b1417;--cyan-dim:#56d8f024;--magenta:#e84bcb;--magenta-dim:#e84bcb24;--sans:-apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif;--mono:ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;--shadow-hud:0 30px 35px #0000008c;--shadow-soft:0 12px 32px -16px #0009;--snap:.12s ease-out;--glide:.2s ease-out;--r-sm:4px;--r-md:6px;--r-lg:10px;--r-hud:14px;--step--1:clamp(.86rem, .84rem + .1vw, .9rem);--step-0:clamp(1rem, .96rem + .2vw, 1.06rem);--step-1:clamp(1.15rem, 1.05rem + .5vw, 1.35rem);--step-2:clamp(1.5rem, 1.3rem + 1vw, 2.1rem);--step-3:clamp(2rem, 1.6rem + 2vw, 3rem);--step-4:clamp(2.5rem, 1.7rem + 3.8vw, 4.4rem)}*{box-sizing:border-box}html{scroll-behavior:smooth;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}body{font-family:var(--sans);color:var(--text);background:var(--ink-0);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;margin:0;font-size:17px;line-height:1.6}h1,h2,h3{font-family:var(--sans);color:var(--text);letter-spacing:-.02em;text-wrap:balance;font-weight:600;line-height:1.1}h1{font-size:var(--step-4);margin:0 0 .45em}h2{font-size:var(--step-3);margin:0 0 .5em}h3{font-size:var(--step-1);letter-spacing:-.01em;margin:0 0 .4em}p{text-wrap:pretty;margin:0 0 1rem}a{color:var(--cyan);transition:color var(--glide);text-decoration:none}a:hover{color:var(--text)}code,kbd,pre{font-family:var(--mono)}code{font-size:.92em}:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:var(--r-sm)}.wrap{width:100%;max-width:68rem;margin:0 auto;padding:0 1.5rem}.narrow{max-width:44rem}.lede{font-size:var(--step-1);color:var(--text-soft);line-height:1.5}.muted{color:var(--text-soft)}.brand{--bm:26px;align-items:center;gap:calc(var(--bm) * .154);color:var(--text);display:inline-flex}.brand-mark{width:var(--bm);height:var(--bm);flex:none}.brand-name{font-family:var(--sans);letter-spacing:-.01em;font-weight:600;font-size:calc(var(--bm) * 1.0723);top:calc(var(--bm) * -.026);line-height:1;position:relative}.nav{justify-content:space-between;align-items:center;gap:1rem;padding:1.25rem 0;display:flex}.nav-links{align-items:center;gap:1.4rem;display:flex}.nav-links a{color:var(--text-soft);font-size:.95rem}.nav-links a:hover{color:var(--text)}.btn{font-family:var(--sans);border-radius:var(--r-lg);cursor:pointer;transition:background var(--snap), border-color var(--snap), color var(--snap), transform var(--snap);border:1px solid #0000;align-items:center;gap:.5rem;min-height:44px;padding:.7rem 1.2rem;font-size:1rem;font-weight:600;display:inline-flex}.btn:active{transform:translateY(1px)}.btn-primary{background:var(--cyan);color:var(--cyan-ink)}.btn-primary:hover{color:var(--cyan-ink);background:#7ae2f4}.btn-ghost{border-color:var(--line);color:var(--text);background:0 0}.btn-ghost:hover{border-color:var(--cyan);color:var(--cyan)}kbd.key{min-width:1.7em;height:1.75em;font-family:var(--mono);color:var(--text);background:var(--ink-3);border:1px solid var(--line);border-radius:var(--r-md);border-bottom-width:2px;justify-content:center;align-items:center;gap:.35em;padding:0 .45em;font-size:.86em;font-weight:500;line-height:1;display:inline-flex}kbd.key.hypr{color:var(--cyan);background:#56d8f029;border-color:#56d8f080 #56d8f080 #56d8f0b3}kbd.key .glyph{font-size:1.05em}kbd.key .word{letter-spacing:.05em;font-size:.74em}.chord{white-space:nowrap;align-items:center;gap:.35em;display:inline-flex}.chord.big .key{border-radius:var(--r-lg);min-width:2.1em;height:2.1em;padding:0 .55em;font-size:1rem}.chord-set{flex-wrap:wrap;align-items:center;gap:.5rem 1rem;display:inline-flex}.c{font-family:var(--mono);color:var(--text);background:var(--ink-2);border-radius:var(--r-sm);border:1px solid var(--line-soft);white-space:nowrap;padding:.08em .4em;font-size:.92em}.cmd{font-family:var(--mono);color:var(--text);background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r-lg);flex-wrap:wrap;align-items:center;gap:.75rem;margin:0;padding:.8rem 1rem;font-size:.95rem;display:flex}.cmd .prompt{color:var(--cyan);-webkit-user-select:none;user-select:none}.cmd code{white-space:nowrap;flex:auto;overflow-x:auto}.cmd button{font:inherit;color:var(--text-soft);background:var(--ink-3);border:1px solid var(--line);border-radius:var(--r-md);cursor:pointer;min-height:32px;padding:.35rem .6rem;font-size:.85rem}.cmd button:hover{color:var(--text);border-color:var(--cyan)}section{padding:clamp(3.5rem,8vw,6.5rem) 0;position:relative}.band{background:var(--ink-1);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}table.keys{border-collapse:collapse;width:100%;font-size:.98rem}table.keys th{text-align:left;font-family:var(--mono);letter-spacing:.02em;color:var(--cyan);border-bottom:1px solid var(--line);padding:.6rem 0;font-size:.8rem;font-weight:600}table.keys td{border-bottom:1px solid var(--line-soft);vertical-align:middle;height:44px;padding:.5rem 0}table.keys td:last-child{text-align:right;white-space:nowrap}table.keys td:last-child .chord{justify-content:flex-end}table.keys .float{color:var(--magenta);margin-left:.35em}footer{border-top:1px solid var(--line-soft);color:var(--text-soft);padding:2.5rem 0 3rem;font-size:.92rem}footer .row{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;display:flex}footer a{color:var(--text-soft)}footer a:hover{color:var(--text)}@media (width<=760px){body{font-size:16px}.nav-links{gap:1rem}.nav-links a:not(.btn){display:none}.cmd{font-size:.86rem}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,:before,:after{transition:none!important;animation:none!important}}.skip{background:var(--ink-2);color:var(--text);border-radius:var(--r-md);z-index:60;padding:.6rem 1rem;position:absolute;top:-100px;left:-9999px}.skip:focus{position:fixed;top:1rem;left:1rem}main[tabindex="-1"]:focus-visible,section[tabindex="-1"]:focus-visible,footer[tabindex="-1"]:focus-visible{outline:none}.visually-hidden{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}section[id],main{scroll-margin-top:5rem}.sec-body{z-index:1;position:relative}figure{margin:0}figcaption{color:var(--text-soft);margin-top:.75rem;font-size:.9rem}.note{margin-top:1rem;font-size:.95rem}.float{color:var(--magenta);margin-left:.35em}.split{grid-template-columns:1fr 1fr;align-items:center;gap:clamp(2rem,5vw,4rem);display:grid}.split>*{min-width:0}.split h2,.split h3{margin-bottom:.6em}.split .prose p{color:var(--text-soft)}.split .prose p:last-child{margin-bottom:0}.site-head{z-index:40;-webkit-backdrop-filter:saturate(1.4)blur(14px);border-bottom:1px solid var(--line-soft);background:#0a0c12b8;position:sticky;top:0}.nav-links .btn{min-height:36px;padding:.45rem .9rem;font-size:.9rem}.nav-links .gh{white-space:nowrap}.nav-links a.btn-primary,.nav-links a.btn-primary:hover{color:var(--cyan-ink)}.nav-links a:not(.btn){align-items:center;min-height:36px;display:inline-flex}.faint{color:#ececf194}.bg{z-index:0;pointer-events:none;position:absolute;inset:0;overflow:hidden}.bg-grad{background:radial-gradient(90% 70% at 22% 0,#56d8f00f,#0000 62%),radial-gradient(70% 65% at 88% 100%,#e84bcb0f,#0000 58%)}.hero{text-align:center;padding-top:clamp(2.5rem,6vw,4.5rem);padding-bottom:clamp(3rem,7vw,5.5rem);position:relative;overflow:hidden}.hero-scrim{z-index:0;pointer-events:none;background:radial-gradient(74% 56% at 50% 31%, #0a0c12e8, #0a0c12ab 58%, #0a0c120a 86%), linear-gradient(to bottom, #0a0c1224, #0a0c1229 46%, var(--ink-0) 97%);position:absolute;inset:0}.hero-mark{justify-content:center;margin:0 0 .7rem;display:flex}.hero-flap{max-width:100%}.hero-mark-flat{font-family:var(--mono);letter-spacing:.16em;font-size:clamp(3rem,7vw,6rem);font-weight:600;line-height:1.05}.hero-sub{color:var(--text);max-width:24ch;margin:0 auto .9rem;font-size:clamp(1.35rem,1.05rem + 1.1vw,1.95rem);font-weight:500}.hero .lede{max-width:48ch;margin:0 auto 1.2rem}.legend-line{max-width:40rem;color:var(--text-soft);margin:0 auto 1.9rem;font-size:1rem;line-height:2.2}.legend-line .chord{vertical-align:middle;margin-left:.25em}.hero-bg{opacity:1;-webkit-mask-image:linear-gradient(#000 0% 68%,#0000 97%);mask-image:linear-gradient(#000 0% 68%,#0000 97%)}.cta{flex-wrap:wrap;justify-content:center;gap:.75rem;display:flex}.trust{margin:1rem 0 0;font-size:.92rem}.demo-host{margin:1.6rem 0 .9rem}.demo-stub{border:1px dashed var(--line);border-radius:var(--r-lg);min-height:18rem;color:var(--text-faint);background:var(--ink-1);place-items:center;display:grid}.focus-title{text-align:center;margin-bottom:1.6rem}.focus-title .focus-container{justify-content:center;gap:.6em}.focus-title .focus-word{font-size:var(--step-3);letter-spacing:-.02em;color:var(--text);cursor:default;font-weight:600;line-height:1.15}.focus-title .corner{filter:drop-shadow(0 0 3px #56d8f04d);border-width:2px;border-radius:2px;width:.7rem;height:.7rem}.focus-title .top-left,.focus-title .top-right{top:-8px}.focus-title .bottom-left,.focus-title .bottom-right{bottom:-8px}.focus-title .top-left,.focus-title .bottom-left{left:-8px}.focus-title .top-right,.focus-title .bottom-right{right:-8px}.simpler-prose{max-width:40rem;margin:0 auto}.simpler-prose h3{text-align:center}.simpler-prose p{color:var(--text-soft)}.simpler-prose p:last-child{margin-bottom:0}.hud-figure{max-width:1040px;margin:0 auto}.hud-figure .hud{margin-left:auto;margin-right:auto}.keys-ref{margin-top:2.75rem;scroll-margin-top:5rem}.keys-ref[tabindex="-1"]:focus-visible{outline:none}#simpler .legend{text-align:center;margin-top:1.25rem}.more-head{max-width:44rem}.more-head p{margin-bottom:0}.more-grid{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(1.5rem,3.2vw,2.75rem);margin:2.25rem 0 0;padding:0;list-style:none;display:grid}.more-grid li{border-top:1px solid var(--line-soft);align-items:flex-start;gap:.9rem;min-width:0;padding:1.25rem 0 1.4rem;display:flex}.more-grid li>div{min-width:0}.more-grid .fact-icon{width:36px;height:36px;margin-top:0}.more-grid .fact-icon svg{width:19px;height:19px}.more-grid h3{letter-spacing:-.005em;margin:.2rem 0 .35rem;font-size:1.04rem}.more-grid p{color:var(--text-soft);margin:0;font-size:.95rem;line-height:1.55}.more-grid code{color:var(--text);font-size:.86em}.more-grid .chord .key{height:1.75em;font-size:.8em}.more-link{margin:.5rem 0 0;font-size:.92rem}.stats{border-top:1px solid var(--line);border-bottom:1px solid var(--line);grid-template-columns:repeat(5,minmax(0,1fr));margin:2.75rem 0 0;padding:0;list-style:none;display:grid}.stats li{border-left:1px solid var(--line-soft);flex-direction:column;gap:.4rem;min-width:0;padding:1.3rem 1.1rem 1.35rem;display:flex}.stats li:first-child{border-left:0;padding-left:0}.stats strong{font-family:var(--mono);letter-spacing:-.02em;color:var(--text);font-size:clamp(1.6rem,1.2rem + 1.1vw,2.15rem);font-weight:600;line-height:1}.stats span{color:var(--text-soft);font-size:.88rem;line-height:1.35}@media (width<=999px){.more-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=760px){.more-grid{grid-template-columns:1fr;margin-top:1.5rem}.more-grid li{padding:1.1rem 0 1.15rem}.more-grid p{font-size:1rem}.more-grid li p .chord .key{border-radius:var(--r-md);min-width:1.7em;height:1.7em;min-height:0;font-size:.82em}.stats{grid-template-columns:1fr 1fr;margin-top:2rem}.stats li,.stats li:first-child{border-left:0;border-top:1px solid var(--line-soft);padding:1.1rem .75rem 1.15rem 0}.stats li:nth-child(-n+2){border-top:0}.stats li:last-child{grid-column:1/-1}}.table-scroll{overflow-x:auto}.table-scroll table.keys{min-width:30rem}.legend .float{margin-left:0;margin-right:.15em}.legend{color:var(--text-soft);margin-top:1rem;font-size:.9rem}.legend a{color:var(--cyan)}.reel{padding:0 0 clamp(2.5rem,6vw,4.5rem)}.reel-frame{border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-soft);background:var(--ink-0);margin:0;position:relative;overflow:hidden}.reel-video{aspect-ratio:16/9;background:var(--ink-0);width:100%;height:auto;display:block}.reel-sound{min-height:36px;font:inherit;color:var(--text-soft);border:1px solid var(--line);cursor:pointer;transition:color var(--snap), border-color var(--snap);background:#0a0c12a8;border-radius:999px;align-items:center;gap:.4rem;padding:0 .75rem;font-size:.85rem;display:inline-flex;position:absolute;bottom:.75rem;right:.75rem}.reel-sound:hover,.reel-sound[aria-pressed=true]{color:var(--cyan);border-color:#56d8f073}.reel-more{text-align:center;margin:1rem 0 0;font-size:1rem}.demo-real{margin:.4rem 0 0;font-size:.95rem}.install{--border-primary:#ececf11f;position:relative;overflow:hidden}.install-bg{background:url(/rays.webp) top center / cover no-repeat, var(--ink-1);opacity:.45;-webkit-mask-image:linear-gradient(#000,#0006 58%,#0000 92%);mask-image:linear-gradient(#000,#0006 58%,#0000 92%)}.install-grid{align-items:stretch;gap:2.25rem;display:grid}.install-grid>*{min-width:0}@media (width>=940px){.install-grid{grid-template-columns:1fr 1fr;gap:3rem}}.setup-card{height:100%}.setup-card .border-glow-inner{padding:1.5rem;overflow:visible}.step-lead{color:var(--text);align-items:center;gap:.65rem;margin:0 0 1.1rem;font-size:1.15rem;font-weight:600;display:flex}.step-n{width:1.9rem;height:1.9rem;font-family:var(--mono);color:var(--cyan);background:#56d8f01f;border:1px solid #56d8f073;border-radius:50%;flex:none;justify-content:center;align-items:center;font-size:.9rem;display:inline-flex}.setup-copy{color:var(--text-soft);margin:0 0 1.2rem}.cmd{min-width:0}.setup-card .cmd{background:var(--ink-0);border-color:var(--line-soft);flex-wrap:nowrap;align-items:flex-start}.setup-card .cmd code{white-space:normal;overflow-wrap:anywhere;flex:1 1 0;min-width:0;overflow-x:visible}.setup-card .cmd .prompt{line-height:1.6}.spark{display:inline-flex;position:relative}.install-note{color:var(--text-soft);margin:1rem 0 0;font-size:.95rem}.install-note a{color:var(--cyan)}.contribute{position:relative;overflow:hidden}.contribute-bg{opacity:.38;background:url(/grid.webp) 50%/cover no-repeat;-webkit-mask-image:radial-gradient(85% 75% at 50% 45%,#000 12%,#0000 76%);mask-image:radial-gradient(85% 75% at 50% 45%,#000 12%,#0000 76%)}.contribute .split{align-items:start}ul.links{margin:1.4rem 0 0;padding:0;list-style:none}ul.links li{border-top:1px solid var(--line-soft);padding:.7rem 0}ul.links li:first-child{border-top:0}ul.links a{align-items:center;min-height:32px;display:inline-flex}.support-block{border-left:1px solid var(--line-soft);padding-left:clamp(1.5rem,3vw,2.5rem)}.support-btn{margin-top:.4rem}.btn:disabled{opacity:.55;cursor:not-allowed}.btn:disabled:hover{border-color:var(--line);color:var(--text)}.donate-note{font-family:var(--mono);letter-spacing:.06em;margin-top:.8rem}#why a{color:var(--cyan)}.facts{margin:0;padding:0}.facts>div{border-top:1px solid var(--line-soft);padding:1.15rem 0}.facts>div:first-child{border-top:0;padding-top:0}.facts dt{color:var(--text);align-items:flex-start;gap:.95rem;font-size:1.12rem;font-weight:500;line-height:1.4;display:flex}.facts dt>span{min-width:0}.facts dd{color:var(--text-soft);margin:.55rem 0 0;padding-left:calc(40px + .95rem)}.facts dd a{color:var(--cyan)}.facts .chord .key{font-size:.82em}.fact-icon{width:40px;height:40px;color:var(--text-soft);border:1px solid var(--line);border-radius:var(--r-lg);background:#ececf10d;flex:none;place-items:center;margin-top:.1rem;display:grid}.fact-icon svg{width:20px;height:20px}.site-foot{padding:4rem 0 4.5rem;position:relative;overflow:hidden}.site-foot .row{z-index:1;position:relative}.site-foot .row p{margin:0}.foot-bg{opacity:.6;background:url(/waves.webp) bottom/cover no-repeat;-webkit-mask-image:linear-gradient(#0000,#000 60%);mask-image:linear-gradient(#0000,#000 60%)}@media (width<=860px){.split{grid-template-columns:1fr}.support-block{border-left:0;border-top:1px solid var(--line-soft);padding-top:1.75rem;padding-left:0}}@media (width<=760px){body{font-size:17px}section{padding:clamp(3.5rem,11vw,5rem) 0}.nav-links a:not(.btn):not(.gh){display:none}.nav-links a.gh{display:inline-flex}.nav-links{gap:.9rem}.nav-links a:not(.btn),.nav-links .btn{min-height:44px}.chord .key{border-radius:var(--r-lg);min-width:2.4em;min-height:44px;font-size:1rem}.facts .chord .key,p .chord:not(.big) .key{border-radius:var(--r-md);min-width:1.9em;height:1.9em;min-height:1.9em;font-size:.95em}.cta .btn{justify-content:center;width:100%}.cta-try{display:none}.facts dt{gap:.75rem;font-size:1.1rem}.facts dd{padding-left:calc(32px + .75rem)}.fact-icon{width:32px;height:32px}.fact-icon svg{width:17px;height:17px}.setup-card .border-glow-inner{padding:1.25rem}}@media (width<=620px){.table-scroll table.keys{min-width:0}table.keys td:last-child{white-space:normal;padding-left:.75rem}.cmd code{white-space:normal;overflow-wrap:anywhere;overflow-x:visible}}@media (width<=760px){.install-bg,.contribute-bg,.foot-bg{background-image:none}}@media (prefers-reduced-motion:reduce){.spark canvas{display:none}}.guide-layout{grid-template-columns:13rem minmax(0,44rem);gap:clamp(2rem,6vw,5rem);padding-top:clamp(2.5rem,6vw,4.5rem);padding-bottom:clamp(3.5rem,8vw,6rem);display:grid}.guide-layout aside nav{gap:.15rem;display:grid;position:sticky;top:6rem}.guide-layout aside a{border-radius:var(--r-md);color:var(--text-soft);border-left:2px solid #0000;padding:.5rem .75rem;font-size:.95rem;display:block}.guide-layout aside a:hover{color:var(--text);background:var(--ink-1)}.guide-layout aside a[aria-current=page]{color:var(--cyan);background:var(--ink-2);border-left-color:var(--cyan)}.guide-kicker{font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--cyan);margin:0 0 .75rem;font-size:.8rem}.guide-article h1{font-size:var(--step-3)}.guide-article h2{font-size:var(--step-1);margin:2.5rem 0 .75rem}.guide-article p{color:var(--text-soft);line-height:1.75}.guide-article a{text-underline-offset:.2em;text-decoration:underline}.guide-article code{color:var(--text);overflow-wrap:anywhere}.guide-article pre{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r-lg);color:var(--text);padding:1rem;font-size:.9rem;overflow-x:auto}.guide-article kbd{background:var(--ink-3);border:1px solid var(--line);border-radius:var(--r-md);color:var(--text);white-space:nowrap;border-bottom-width:2px;padding:.1em .4em;font-size:.88em}.guide-article .hud-guide{width:100%;margin:1.75rem 0 1rem}.guide-index{gap:1.75rem;margin:2rem 0 0;padding:0;list-style:none;display:grid}.guide-index li a{font-size:var(--step-1);font-weight:600;text-decoration:none}.guide-index li p{color:var(--text-soft);margin:.35rem 0 0}.rec-frame{border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-soft);background:var(--ink-0);margin:1.4rem 0 0;overflow:hidden}.rec-video{aspect-ratio:16/9;background:var(--ink-0);width:100%;height:auto;display:block}.rec-chapters{border-top:1px solid var(--line);margin:.6rem 0 1.6rem;padding:0;list-style:none}.rec-chapters li{border-bottom:1px solid var(--line)}.rec-chapter{width:100%;min-height:48px;font:inherit;color:var(--text);text-align:left;cursor:pointer;background:0 0;border:0;flex-wrap:wrap;align-items:center;gap:.4rem .9rem;padding:.45rem .25rem;display:flex}.rec-chapter:hover .rec-label,.rec-chapter[aria-current=true] .rec-label{color:var(--cyan)}.rec-time{font-family:var(--mono);color:var(--text-soft);flex:0 0 3.2em;font-size:.9rem}.rec-label{transition:color var(--snap);flex:12rem}.guide-links{flex-wrap:wrap;gap:.6rem 1.25rem;width:100%;font-size:.88rem;display:flex}.guide-links a{color:var(--text-soft)}.guide-links a:hover{color:var(--text)}@media (width<=860px){.guide-layout{display:block}.guide-layout aside nav{flex-wrap:wrap;gap:.5rem;margin-bottom:2rem;display:flex;position:static}.guide-layout aside a{border:1px solid var(--line-soft)}}.target-cursor-wrapper{pointer-events:none;z-index:2147483647;mix-blend-mode:difference;width:0;height:0;position:fixed;top:0;left:0;transform:translate(-50%,-50%)}.target-cursor-dot{will-change:transform;background:#fff;border-radius:50%;width:4px;height:4px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.target-cursor-corner{will-change:transform;border:3px solid #fff;width:12px;height:12px;position:absolute;top:50%;left:50%}.corner-tl{border-bottom:none;border-right:none;transform:translate(-150%,-150%)}.corner-tr{border-bottom:none;border-left:none;transform:translate(50%,-150%)}.corner-br{border-top:none;border-left:none;transform:translate(50%,50%)}.corner-bl{border-top:none;border-right:none;transform:translate(-150%,50%)}.split-flap-text{align-items:center;gap:var(--split-flap-gap,6px);color:var(--split-flap-text-color,#f8fafc);font-family:SFMono-Regular,Roboto Mono,Cascadia Code,Liberation Mono,Menlo,monospace;font-size:var(--split-flap-font-size,52px);letter-spacing:.035em;white-space:pre;-webkit-user-select:none;user-select:none;font-variant-numeric:tabular-nums;font-weight:760;line-height:1;display:inline-flex}.split-flap-text__tile{border-radius:var(--split-flap-radius,8px);background:radial-gradient(circle at 50% 0%, #ffffff29, transparent 44%), linear-gradient(180deg, color-mix(in srgb, var(--split-flap-tile-color,#111827) 82%, white), var(--split-flap-tile-color,#111827));perspective:520px;width:.78em;height:1.08em;transform-style:preserve-3d;isolation:isolate;position:relative;overflow:hidden;box-shadow:inset 0 .035em .08em #ffffff14,inset 0 -.05em .1em #00000061,0 .16em .38em #00000047}.split-flap-text__tile:before{content:"";z-index:8;pointer-events:none;background:linear-gradient(90deg,#0000,#ffffff2e 18%,#000000a3 50%,#ffffff24 82%,#0000);width:100%;height:1px;position:absolute;top:calc(50% - .5px);left:0;box-shadow:0 -1px #ffffff14,0 1px #00000080}.split-flap-text__tile:after{content:"";z-index:9;border-radius:inherit;pointer-events:none;border:1px solid #ffffff14;position:absolute;inset:0;box-shadow:inset 0 0 0 1px #0003}.split-flap-text__half,.split-flap-text__flap{background:linear-gradient(180deg, #ffffff12, transparent 34%), var(--split-flap-tile-color,#111827);backface-visibility:hidden;width:100%;height:50%;position:absolute;left:0;overflow:hidden}.split-flap-text__half--top,.split-flap-text__flap--front{top:0}.split-flap-text__half--bottom,.split-flap-text__flap--back{background:linear-gradient(0deg, #ffffff0f, transparent 38%), color-mix(in srgb, var(--split-flap-tile-color,#111827) 92%, black);bottom:0}.split-flap-text__char{width:100%;height:200%;color:var(--split-flap-text-color,#f8fafc);text-shadow:0 .025em #ffffff29,0 .09em .16em #0000006b;justify-content:center;align-items:center;display:flex;position:absolute;left:0}.split-flap-text__half--top .split-flap-text__char,.split-flap-text__flap--front .split-flap-text__char{top:0}.split-flap-text__half--bottom .split-flap-text__char,.split-flap-text__flap--back .split-flap-text__char{bottom:0}.split-flap-text__flap{z-index:6;will-change:transform, filter;transform-style:preserve-3d}.split-flap-text__flap--front{transform-origin:bottom;animation:split-flap-front var(--split-flap-flip-duration,.12s) cubic-bezier(.23, 1, .32, 1) both}.split-flap-text__flap--back{transform-origin:top;animation:split-flap-back var(--split-flap-flip-duration,.12s) cubic-bezier(.23, 1, .32, 1) both;transform:rotateX(90deg)}@keyframes split-flap-front{0%{filter:brightness(1.08);transform:rotateX(0)}to{filter:brightness(.52);transform:rotateX(-90deg)}}@keyframes split-flap-back{0%,45%{filter:brightness(.58);transform:rotateX(90deg)}to{filter:brightness();transform:rotateX(0)}}@media (prefers-reduced-motion:reduce){.split-flap-text__flap{animation:none!important}}@property --pt{syntax:"<length>";inherits:true;initial-value:1px}.demo-screen>*{--pt:calc(100cqw / 1440);--tg:calc(8 * var(--pt));--dock:calc(78 * var(--pt));--mac-text:#ececf1;--mac-2:#ebebf599;--mac-3:#ebebf557;--mac-sep:#ffffff24;--mac-surface:#ffffff0e}@container (width<=640px){.demo-screen>*{--pt:calc(100cqw / 960);--dock:0px}}.mac-wall{z-index:0;pointer-events:none;width:100%;height:100%;display:block;position:absolute;inset:0}.mac-bar{z-index:2;align-items:center;gap:calc(16 * var(--pt));height:calc(24 * var(--pt));padding:0 calc(12 * var(--pt));font-family:var(--sans);font-size:calc(13 * var(--pt));color:#ececf1eb;white-space:nowrap;-webkit-backdrop-filter:blur(18px)saturate(1.6);backdrop-filter:blur(18px)saturate(1.6);background:linear-gradient(#0e142880,#0e14285c);flex:none;line-height:1;display:flex;position:relative;overflow:hidden}.mac-bar-app{font-weight:700}.mac-bar-menus{gap:calc(18 * var(--pt));min-width:0;display:flex;overflow:hidden}.mac-bar-right{align-items:center;gap:calc(14 * var(--pt));flex:none;margin-left:auto;display:flex}.mac-st{height:calc(16 * var(--pt));flex:none;display:block}.mac-ind{align-items:center;gap:calc(5 * var(--pt));display:inline-flex}.mac-ind-ws{font-size:calc(12 * var(--pt));letter-spacing:.02em}.mac-ind-n{font-size:calc(11 * var(--pt));font-weight:500}.mac-clock{font-variant-numeric:tabular-nums}.mac-icon{--s:calc(52 * var(--pt));width:var(--s);height:var(--s);flex:none;display:block}.mac-icon svg{width:100%;height:100%;display:block}.mac-dock{left:0;right:0;bottom:calc(4 * var(--pt));z-index:4;pointer-events:none;justify-content:center;display:flex;position:absolute}.mac-dock-shelf{gap:calc(10 * var(--pt));padding:calc(9 * var(--pt));border-radius:calc(20 * var(--pt));-webkit-backdrop-filter:blur(20px)saturate(1.6);backdrop-filter:blur(20px)saturate(1.6);box-shadow:inset 0 0 0 1px #fff3, 0 0 0 1px #00000040, 0 calc(6 * var(--pt)) 0 calc(2 * var(--pt)) #00000014;background:#2e34466b;display:flex}.mac-dock-app{display:block;position:relative}.mac-dock-app>i{left:50%;bottom:calc(-7 * var(--pt));width:calc(4 * var(--pt));height:calc(4 * var(--pt));margin-left:calc(-2 * var(--pt));opacity:0;transition:opacity var(--glide);background:#fffc;border-radius:50%;position:absolute}.mac-dock-app>i.is-on{opacity:1}@container (width<=640px){.mac-dock{display:none}}.mac-tb{z-index:2;height:calc(28 * var(--pt));padding:0 calc(12 * var(--pt));background:#1d1f26;border-bottom:1px solid #00000073;flex:none;align-items:center;display:flex;position:relative}.mac-lights{gap:calc(8 * var(--pt));flex:none;display:flex}.mac-lights i{width:calc(12 * var(--pt));height:calc(12 * var(--pt));background:#3a3c44;border-radius:50%;display:block}.mac-lights.is-on i:first-child{background:#ff5f57}.mac-lights.is-on i:nth-child(2){background:#febc2e}.mac-lights.is-on i:nth-child(3){background:#28c840}.mac-ttl{left:calc(72 * var(--pt));right:calc(72 * var(--pt));text-align:center;font-family:var(--sans);font-size:calc(12.5 * var(--pt));color:#ececf19e;white-space:nowrap;text-overflow:ellipsis;pointer-events:none;font-weight:600;position:absolute;overflow:hidden}.wb{width:100%;height:100%;font-family:var(--sans);font-size:calc(13 * var(--pt));color:#cfd3dc;overflow:hidden}.wb-editor{font-family:var(--mono);font-size:calc(12.5 * var(--pt));line-height:calc(21 * var(--pt));background:#121419;display:flex}.wb-side{width:calc(170 * var(--pt));padding:calc(10 * var(--pt)) 0;font-family:var(--sans);font-size:calc(12 * var(--pt));line-height:calc(20 * var(--pt));color:#8c93a3;white-space:nowrap;background:#181a21;border-right:1px solid #ffffff0d;flex:none;overflow:hidden}.wb-side div{padding:0 calc(14 * var(--pt))}.wb-side .is-sel{color:#dfe3ea;background:#ffffff12}.wb-gut{width:calc(40 * var(--pt));padding:calc(10 * var(--pt)) calc(10 * var(--pt)) 0 0;text-align:right;color:#4b5060;flex:none}.wb-code{min-width:0;padding:calc(10 * var(--pt)) 0 0 calc(10 * var(--pt));white-space:pre;color:#cfd3dc;flex:1}.wb-code .is-cur{background:#ffffff09}.t-k{color:#c792ea}.t-f{color:#82aaff}.t-n{color:#f78c6c}.t-ty{color:#ffcb6b}.t-c{color:#5d6475;font-style:italic}.wb-browser{background:#0f1116;flex-direction:column;display:flex}.wb-urlbar{align-items:center;gap:calc(10 * var(--pt));height:calc(36 * var(--pt));padding:0 calc(12 * var(--pt));background:#1b1d24;border-bottom:1px solid #00000059;flex:none;display:flex}.wb-nav{color:#6b7180;font-size:calc(15 * var(--pt));letter-spacing:.3em;flex:none}.wb-url{flex:0 1 calc(380 * var(--pt));min-width:0;height:calc(22 * var(--pt));border-radius:calc(7 * var(--pt));color:#c7cbd4;font-size:calc(12 * var(--pt));white-space:nowrap;background:#262831;justify-content:center;align-items:center;margin:0 auto;display:flex;overflow:hidden}.wb-page{flex:1;min-height:0;display:flex}.wb-toc{width:calc(160 * var(--pt));padding:calc(22 * var(--pt)) calc(18 * var(--pt));border-right:1px solid #ffffff0d;flex:none}.wb-toc i{height:calc(8 * var(--pt));border-radius:calc(4 * var(--pt));margin-bottom:calc(14 * var(--pt));background:#2a2d36;display:block}.wb-toc i.is-on{background:#ececf14d;width:70%}.wb-art{min-width:0;padding:calc(24 * var(--pt)) calc(26 * var(--pt));flex:1;overflow:hidden}.wb-art h4{margin:0 0 calc(14 * var(--pt));font-size:calc(28 * var(--pt));letter-spacing:-.01em;color:#ececf1;white-space:nowrap;font-weight:650;line-height:1.1}.wb-ln{height:calc(9 * var(--pt));border-radius:calc(5 * var(--pt));margin-bottom:calc(11 * var(--pt));background:#2a2d36;display:block}.wb-row{align-items:center;gap:calc(8 * var(--pt));margin:calc(14 * var(--pt)) 0;white-space:nowrap;font-size:calc(13.5 * var(--pt));color:#aeb3bf;display:flex}.wb-chip{font-family:var(--mono);font-size:calc(11.5 * var(--pt));padding:calc(3 * var(--pt)) calc(7 * var(--pt));border-radius:calc(6 * var(--pt));color:#ececf1;background:#232630;border:1px solid #ffffff14}.wb-chip.is-hy{color:var(--cyan);background:#56d8f014;border-color:#56d8f073}.wb-terminal{padding:calc(12 * var(--pt)) calc(14 * var(--pt));font-family:var(--mono);font-size:calc(12.5 * var(--pt));line-height:calc(21 * var(--pt));white-space:pre;color:#cfd3dc;background:#0b0c10}.t-p{color:#8b93a6}.t-g{color:#8fe3a0}.wb-terminal b{color:#ececf1;font-weight:700}.wb-caret{width:calc(7.5 * var(--pt));height:calc(15 * var(--pt));vertical-align:calc(-3 * var(--pt));background:#cfd3dc;display:inline-block}.wb-notes{padding:calc(20 * var(--pt)) calc(24 * var(--pt));background:#16181e}.wb-notes h4{margin:0 0 calc(4 * var(--pt));font-size:calc(22 * var(--pt));color:#ececf1;font-weight:700;line-height:1.15}.wb-date{font-size:calc(12 * var(--pt));color:#7d8391;margin-bottom:calc(16 * var(--pt))}.wb-item{align-items:center;gap:calc(11 * var(--pt));margin-bottom:calc(12 * var(--pt));font-size:calc(14 * var(--pt));color:#d6d9e0;white-space:nowrap;display:flex}.wb-item i{width:calc(16 * var(--pt));height:calc(16 * var(--pt));border:calc(1.5 * var(--pt)) solid #5b606c;border-radius:50%;flex:none}.wb-item.is-done i{background:#e6b450;border-color:#e6b450}.wb-item.is-done span{color:#6d7382;text-decoration:line-through}.wb-music{gap:calc(14 * var(--pt));padding:calc(20 * var(--pt)) calc(22 * var(--pt));background:#121319;flex-direction:column;display:flex}.wb-top{align-items:center;gap:calc(16 * var(--pt));display:flex}.wb-music .wb-art{width:calc(112 * var(--pt));height:calc(112 * var(--pt));border-radius:calc(10 * var(--pt));box-shadow:0 calc(10 * var(--pt)) calc(26 * var(--pt)) #00000080, inset 0 0 0 1px #ffffff0f;background:radial-gradient(circle,#23252d,#14161c 70%);flex:none;padding:0}.wb-music .wb-art svg{width:100%;height:100%;display:block}.wb-meta{white-space:nowrap;min-width:0;overflow:hidden}.wb-kind{font-size:calc(10.5 * var(--pt));color:#7d8391;letter-spacing:.08em}.wb-title{margin:calc(3 * var(--pt)) 0 calc(2 * var(--pt));font-size:calc(24 * var(--pt));color:#ececf1;font-weight:700}.wb-by{font-size:calc(12.5 * var(--pt));color:#aeb3bf}.wb-eq{min-height:calc(20 * var(--pt));max-height:calc(90 * var(--pt));align-items:flex-end;gap:calc(4 * var(--pt));flex:auto;display:flex}.wb-eq i{border-radius:calc(3 * var(--pt)) calc(3 * var(--pt)) 1px 1px;background:linear-gradient(#ececf1,#8b92a3);flex:1;display:block}.wb-prog{height:calc(4 * var(--pt));border-radius:calc(2 * var(--pt));background:#2a2d36;flex:none}.wb-prog i{border-radius:inherit;background:#ececf1;width:38%;height:100%;display:block}.wb-times{margin-top:calc(-6 * var(--pt));font-size:calc(10.5 * var(--pt));color:#7d8391;font-variant-numeric:tabular-nums;flex:none;justify-content:space-between;display:flex}.wb-chat{gap:calc(8 * var(--pt));padding:calc(16 * var(--pt));background:#14161b;flex-direction:column;display:flex}.wb-bub{max-width:78%;padding:calc(6 * var(--pt)) calc(11 * var(--pt));border-radius:calc(15 * var(--pt));color:#e6e8ee;font-size:calc(13 * var(--pt));white-space:nowrap;text-overflow:ellipsis;background:#2c2e35;align-self:flex-start;line-height:1.3;overflow:hidden}.wb-bub.is-me{color:#fff;background:#2f6fde;align-self:flex-end}@container (width<=300px){.wb-side,.wb-toc{display:none}}@container (width<=200px){.wb-gut{display:none}.wb-music .wb-art{width:calc(64 * var(--pt));height:calc(64 * var(--pt))}}.mac-mark{width:calc(39 * var(--pt));height:calc(39 * var(--pt));--at:calc(var(--tg) / 2 + 10 * var(--pt));position:absolute;overflow:visible}.mac-mark path{fill:none;stroke-linecap:round;stroke-linejoin:round}.mac-mark-out{stroke:#fff;stroke-width:6.5px}.mac-mark-in{stroke:#000;stroke-width:4.5px}.mac-mark.at-tl{left:var(--at);top:var(--at)}.mac-mark.at-tr{right:var(--at);top:var(--at);transform:scaleX(-1)}.mac-mark.at-bl{left:var(--at);bottom:var(--at);transform:scaleY(-1)}.mac-mark.at-br{right:var(--at);bottom:var(--at);transform:scale(-1)}.mac-hud,.mac-ov,.dhud{background:var(--glass-fill);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:inset 0 0 0 1px var(--glass-rim), 0 calc(8 * var(--pt)) calc(36 * var(--pt)) #00000052;color:var(--mac-text);font-family:var(--sans);text-align:left}.mac-hud{align-items:center;gap:calc(5 * var(--pt));padding:calc(15 * var(--pt)) calc(26 * var(--pt));border-radius:calc(15 * var(--pt));white-space:nowrap;flex-direction:column;display:flex}.mac-hud-cap{font-family:var(--mono);font-size:calc(10 * var(--pt));letter-spacing:calc(2 * var(--pt));color:var(--mac-2);font-weight:600}.mac-hud-val{font-family:ui-rounded, "SF Pro Rounded", var(--sans);font-size:calc(40 * var(--pt));font-weight:700;line-height:1}@container (width<=640px){.mac-hud{--pt:calc(100cqw / 640)}}.mac-ov{width:min(calc(1392 * var(--pt)), calc(100% - 24 * var(--pt)));max-height:calc(100% - 24 * var(--pt));gap:calc(16 * var(--pt));padding:calc(22 * var(--pt));border-radius:calc(18 * var(--pt));flex-direction:column;display:flex;overflow:hidden}.mac-ov-head{justify-content:space-between;align-items:flex-start;gap:calc(16 * var(--pt));display:flex}.mac-ov-title{font-family:var(--mono);font-size:calc(17 * var(--pt));font-weight:600}.mac-ov-sub{margin-top:calc(3 * var(--pt));font-size:calc(12 * var(--pt));color:var(--mac-2)}.mac-ov-search{width:calc(230 * var(--pt));height:calc(22 * var(--pt));padding-left:calc(8 * var(--pt));font-size:calc(12 * var(--pt));color:var(--mac-3);border-radius:calc(6 * var(--pt));box-shadow:inset 0 0 0 1px var(--mac-sep);background:#ffffff0f;flex:none;align-items:center;display:flex}.mac-ov-grid{gap:calc(12 * var(--pt));grid-template-columns:repeat(5,minmax(0,1fr));align-items:start;min-height:0;display:grid}.mac-ov-card{gap:calc(9 * var(--pt));min-width:0;padding:calc(12 * var(--pt));border-radius:calc(12 * var(--pt));background:var(--mac-surface);box-shadow:inset 0 0 0 1px var(--mac-sep);color:inherit;font:inherit;text-align:left;cursor:pointer;border:0;flex-direction:column;display:flex}.mac-ov-card.is-active{background:#ffffff1a}.mac-ov-card:hover{background:#ffffff17}.mac-ov-card-head{align-items:center;gap:calc(8 * var(--pt));height:calc(24 * var(--pt));white-space:nowrap;min-width:0;display:flex}.mac-ov-card-head b{font-family:ui-rounded, "SF Pro Rounded", var(--sans);font-size:calc(20 * var(--pt));font-weight:700}.mac-ov-mon{font-family:var(--mono);font-size:calc(11 * var(--pt));text-overflow:ellipsis;min-width:0;overflow:hidden}.mac-ov-active{font-family:var(--mono);font-size:calc(9 * var(--pt));color:var(--mac-2);margin-left:auto;font-weight:700}.mac-ov-pv{height:calc(112 * var(--pt));border-radius:calc(7 * var(--pt));background:#00000038;display:block;position:relative;overflow:hidden}.mac-ov-w{border:calc(2 * var(--pt)) solid transparent;border-radius:calc(5 * var(--pt));background-color:#ffffff1f;background-clip:padding-box;place-items:center;display:grid;position:absolute}.mac-ov-w.is-float{background-color:#e84bcb4d}.mac-ov-w .mac-icon{--s:calc(20 * var(--pt))}.mac-ov-empty{font-family:var(--mono);font-size:calc(11 * var(--pt));color:var(--mac-2);place-items:center;display:grid;position:absolute;inset:0}.mac-ov-list{gap:calc(4 * var(--pt));flex-direction:column;display:flex}.mac-ov-list>span{align-items:center;gap:calc(6 * var(--pt));height:calc(15 * var(--pt));font-size:calc(10 * var(--pt));white-space:nowrap;display:flex;overflow:hidden}.mac-ov-list .mac-icon{--s:calc(15 * var(--pt))}.mac-ov-list b{color:#dfe3ea;flex:none;font-weight:500}.mac-ov-list span span{color:var(--mac-2);text-overflow:ellipsis;overflow:hidden}.mac-ov-foot{padding:calc(9 * var(--pt)) calc(12 * var(--pt));border-radius:calc(10 * var(--pt));background:var(--mac-surface)}.mac-ov-foot-cap{font-family:var(--mono);font-size:calc(10 * var(--pt));letter-spacing:calc(1.4 * var(--pt));color:var(--mac-2);font-weight:600}.mac-ov-foot-row{gap:calc(7 * var(--pt)) calc(18 * var(--pt));margin-top:calc(7 * var(--pt));font-size:calc(11 * var(--pt));color:#dfe3ea;flex-wrap:wrap;display:flex}.mac-ov-foot-row span{align-items:center;gap:calc(5 * var(--pt));display:inline-flex}.mac-ov-foot-row .mac-icon{--s:calc(16 * var(--pt))}.dhud{gap:calc(12 * var(--pt));width:min(calc(620 * var(--pt)), 100%);max-height:100%;padding:calc(18 * var(--pt)) calc(20 * var(--pt)) calc(16 * var(--pt));border-radius:calc(14 * var(--pt));flex-direction:column;display:flex}.dhud-head{align-items:center;gap:calc(9 * var(--pt));display:flex}.dhud-title{font-size:calc(17 * var(--pt));font-weight:600}.dhud-tut{padding:calc(4 * var(--pt)) calc(8 * var(--pt));border-radius:calc(5 * var(--pt));font-size:calc(13 * var(--pt));color:var(--cyan);background:var(--mac-surface);margin-left:auto;font-weight:500}.dhud-chip{min-width:calc(28 * var(--pt));padding:calc(4 * var(--pt)) calc(8 * var(--pt));border-radius:calc(6 * var(--pt));font-family:var(--mono);font-size:calc(13 * var(--pt));color:var(--mac-text);white-space:nowrap;background:#ffffff12;justify-content:center;align-items:center;font-weight:600;line-height:1.15;display:inline-flex;box-shadow:inset 0 0 0 1px #ffffff1f,inset 0 -1px #ffffff38}.dhud-row .dhud-chip{font-size:calc(11 * var(--pt))}.dhud-chord{gap:calc(3 * var(--pt));flex:none;display:inline-flex}.dhud-search{align-items:center;gap:calc(8 * var(--pt));height:calc(38 * var(--pt));padding:0 calc(12 * var(--pt));font-size:calc(14 * var(--pt));border-radius:calc(8 * var(--pt));background:var(--mac-surface);box-shadow:inset 0 0 0 1px var(--mac-sep);flex:none;display:flex}.dhud-glass{width:calc(13 * var(--pt));height:calc(13 * var(--pt));fill:none;stroke:var(--mac-2);stroke-width:1.6px;stroke-linecap:round;flex:none}.dhud-caret{width:calc(2 * var(--pt));height:calc(18 * var(--pt));background:var(--cyan);flex:none}.dhud-q{white-space:nowrap;min-width:0;overflow:hidden}.dhud-ph{white-space:nowrap;min-width:0;color:var(--mac-3);overflow:hidden}.dhud-hint{font-size:calc(12 * var(--pt));color:var(--mac-2);white-space:nowrap;flex:none;margin-left:auto}.dhud-list{flex:0 1 calc(380 * var(--pt));min-height:calc(120 * var(--pt));overscroll-behavior:contain;scrollbar-width:none;-webkit-mask-image:linear-gradient(180deg, #000 0, #000 calc(100% - 28 * var(--pt)), transparent 100%);-webkit-mask-image:linear-gradient(180deg, #000 0, #000 calc(100% - 28 * var(--pt)), transparent 100%);mask-image:linear-gradient(180deg, #000 0, #000 calc(100% - 28 * var(--pt)), transparent 100%);overflow-y:auto}.dhud-list::-webkit-scrollbar{display:none}.dhud-sec{height:calc(30 * var(--pt));padding:0 calc(12 * var(--pt)) calc(5 * var(--pt));font-size:calc(12 * var(--pt));letter-spacing:calc(.8 * var(--pt));text-transform:uppercase;color:var(--mac-2);align-items:flex-end;font-weight:600;display:flex}.dhud-row{justify-content:space-between;align-items:center;gap:calc(10 * var(--pt));height:calc(34 * var(--pt));padding:0 calc(14 * var(--pt)) 0 calc(12 * var(--pt));font-size:calc(14 * var(--pt));color:#ececf1e0;white-space:nowrap;display:flex}.dhud-label{text-overflow:ellipsis;min-width:0;overflow:hidden}.dhud-hit{color:var(--cyan);font-weight:600}.dhud-fl{margin-left:calc(5 * var(--pt));font-size:calc(11 * var(--pt));color:var(--magenta)}.dhud-none{padding:calc(30 * var(--pt)) 0;text-align:center;font-size:calc(14 * var(--pt));color:var(--mac-2)}.dhud-foot{font-size:calc(12 * var(--pt));color:var(--mac-2);white-space:nowrap;text-overflow:ellipsis;flex:none;overflow:hidden}@container (width<=640px){.dhud{--pt:calc(100cqw / 660)}.dhud-hint,.dhud-arrows{display:none}}.demo{flex-direction:column;gap:1.1rem;display:flex;container-type:inline-size}.demo-tutor{background:var(--ink-1);border:1px solid var(--line);border-radius:var(--r-lg);flex-wrap:wrap;align-items:center;gap:.75rem 1rem;padding:.7rem 1rem;display:flex}.demo-tutor-text{color:var(--text);flex:20rem;margin:0;font-size:1rem;line-height:1.8}.demo-line{display:block}.demo-line b{color:var(--text);font-weight:600}.demo-tutor-text .chord:not(.big) .key{height:1.9em;font-size:.9em}.demo-go{min-height:44px;font:inherit;background:var(--cyan);color:var(--cyan-ink);border-radius:var(--r-lg);cursor:pointer;transition:background var(--snap), border-color var(--snap), color var(--snap);border:1px solid #0000;flex:none;justify-content:center;align-items:center;padding:0 1.1rem;font-size:.95rem;font-weight:600;display:inline-flex}.demo-go:hover{background:#7ae2f4}.demo-go.is-quiet{border-color:var(--line);color:var(--text);background:0 0}.demo-go.is-quiet:hover{border-color:var(--cyan);color:var(--cyan)}.demo-tour-text{flex-wrap:wrap;align-items:center;gap:.35rem .9rem;min-height:44px;display:flex}.demo-tour-line{font-size:1.05rem;font-weight:500}.demo-auto{height:1.75rem;font-family:var(--mono);color:var(--cyan);background:var(--cyan-dim);border:1px solid #56d8f073;border-radius:999px;flex:none;align-items:center;gap:.45rem;padding:0 .7rem;font-size:.78rem;display:inline-flex}.demo-auto i{background:var(--cyan);border-radius:50%;width:6px;height:6px;animation:1.6s ease-in-out infinite demo-auto-pulse}@keyframes demo-auto-pulse{50%{opacity:.25}}.demo-tour-chord .key{transition:none}.demo.is-tour:not(.is-watch) .demo-screen{cursor:pointer}.demo.is-watch .demo-screen{pointer-events:none}.demo-steps{border-left:1px solid var(--line-soft);align-items:center;gap:.5rem;margin-left:auto;padding-left:.9rem;display:flex}.demo-steps-n{font-family:var(--mono);color:#ececf18c;font-size:.72rem}.demo-dotstrip{align-items:center;gap:4px;display:inline-flex}.demo-step{width:5px;height:5px;transition:background var(--glide), width var(--glide);background:#ececf129;border-radius:50%}.demo-step.is-done{background:#56d8f066}.demo-step.is-now{background:var(--cyan);border-radius:3px;width:14px}.demo-screen{aspect-ratio:16/10;border-radius:var(--sr);-webkit-user-select:none;user-select:none;background:#080913;flex-direction:column;display:flex;position:relative;overflow:hidden;container-type:inline-size}.demo-screen:focus-visible{outline:none}.demo-device{--bz:max(5px, .76cqw);--sr:max(6px, 1.39cqw);padding:var(--bz);border-radius:calc(var(--sr) + var(--bz));transition:box-shadow var(--glide);background:linear-gradient(#2c2d32,#131418);position:relative;box-shadow:inset 0 0 0 1.5px #ffffff12,inset 0 2px #ffffff0f,0 40px 90px -24px #000000bf,0 16px 40px #00000073}.demo-device.is-active{box-shadow:inset 0 0 0 1.5px #ffffff2e,inset 0 2px #ffffff1f,0 40px 90px -24px #000000bf,0 16px 40px #00000073}.demo-device:has(.demo-screen:focus-visible){box-shadow:inset 0 0 0 1.5px #ffffff2e, inset 0 2px 0 #ffffff1f, 0 0 0 3px var(--ink-0), 0 0 0 5px #ececf19e, 0 40px 90px -24px #000000bf, 0 16px 40px #00000073}.demo-stage{z-index:1;flex:auto;min-height:0;position:relative;overflow:hidden}.demo-field{inset:calc(var(--tg) / 2) calc(var(--tg) / 2) calc(var(--dock) + var(--tg) / 2);position:absolute}.demo-slot{position:absolute;container-type:size}.demo-win{inset:calc(var(--tg) / 2);border-radius:calc(12 * var(--pt));box-shadow:0 0 0 1px #ffffff17, 0 calc(14 * var(--pt)) calc(34 * var(--pt)) #0000006b;cursor:default;touch-action:none;background:#15171d;flex-direction:column;display:flex;position:absolute;overflow:hidden}.demo-win.is-float{box-shadow:0 0 0 1px #ffffff1c, 0 calc(22 * var(--pt)) calc(56 * var(--pt)) #0000009e;cursor:grab}.demo-win.is-float.is-held,.demo-win.is-held{cursor:grabbing}.demo-win:after{content:"";z-index:6;border-radius:inherit;opacity:0;pointer-events:none;background:#000;transition:opacity .13s ease-in-out;position:absolute;inset:0}.demo-win.is-dim:after{opacity:.135}.demo-body{z-index:0;flex:auto;min-height:0;position:relative;overflow:hidden}.demo-drop{z-index:5;pointer-events:none;position:absolute}.demo-drop:before{content:"";inset:calc(var(--tg) / 2);border:calc(2 * var(--pt)) solid #56d8f0d9;border-radius:calc(12 * var(--pt));background:#56d8f029;position:absolute}.demo-brackets{z-index:5;pointer-events:none;position:absolute}.demo-resize{z-index:7;width:max(16px, calc(18 * var(--pt)));height:max(16px, calc(18 * var(--pt)));touch-action:none;position:absolute}.demo-resize.at-nw{cursor:nwse-resize;top:0;left:0}.demo-resize.at-ne{cursor:nesw-resize;top:0;right:0}.demo-resize.at-sw{cursor:nesw-resize;bottom:0;left:0}.demo-resize.at-se{cursor:nwse-resize;bottom:0;right:0}.demo-empty{justify-content:center;align-items:center;gap:calc(6 * var(--pt));font-family:var(--sans);font-size:max(11px, calc(16 * var(--pt)));color:#ffffffdb;text-shadow:0 1px 2px #0000008c,0 0 18px #080c1e99;pointer-events:none;flex-direction:column;font-weight:500;display:flex;position:absolute;inset:0}.demo-empty-hint{color:#ffffffb3;font-size:.82em;font-weight:400}.mac-scratch{z-index:5;background:#00000073;position:absolute;inset:0}.mac-scratch-area{inset:calc(var(--tg) / 2) calc(var(--tg) / 2) calc(var(--dock) + var(--tg) / 2);justify-content:center;align-items:center;display:flex;position:absolute}.mac-scratch-region{position:absolute;inset:6%}.demo-win.is-stashed{cursor:pointer}.mac-scratch-empty{border-radius:var(--r-lg);max-width:86%;font-size:max(11px, calc(14 * var(--pt)));color:#ececf1cc;text-align:center;background:var(--glass-fill);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:inset 0 0 0 1px var(--glass-rim);flex-wrap:wrap;justify-content:center;align-items:center;gap:.45em;padding:.7em 1em;display:inline-flex}.mac-scratch-empty kbd.key{border-bottom-width:1px;min-width:1.8em;height:1.8em;padding:0 .4em;font-size:.85em}.demo-overlay,.demo-overview{z-index:6;padding:calc(var(--tg) / 2);justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.demo-overview{bottom:var(--dock)}.demo-hud{left:0;right:0;bottom:calc(var(--dock) + 12 * var(--pt));z-index:7;pointer-events:none;justify-content:center;display:flex;position:absolute}.demo-hint{z-index:7;font-family:var(--sans);font-size:max(12px, calc(15 * var(--pt)));color:var(--text);white-space:nowrap;background:var(--glass-fill);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:inset 0 0 0 1px var(--glass-rim), 0 10px 30px #00000059;pointer-events:none;border-radius:999px;padding:.5em .95em;font-weight:500;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.demo-caption{justify-content:center;align-items:center;gap:.9rem;min-height:2.5rem;margin:-.1rem 0 -.45rem;display:flex;position:relative}.demo-flash{animation:.78s ease-out forwards demo-flash;display:inline-flex}.demo-flash-chord{gap:.3em}.demo-flash kbd.key{border-radius:var(--r-lg);min-width:2.1em;height:2.1em;padding:0 .55em;font-size:1rem;font-weight:600}@keyframes demo-flash{0%{opacity:0;transform:translateY(3px)}9%{opacity:1;transform:none}76%{opacity:1}to{opacity:0}}.demo-note{font-family:var(--mono);color:var(--text-soft);white-space:nowrap;text-overflow:ellipsis;font-size:.82rem;animation:.14s ease-out demo-pop;overflow:hidden}.demo-note.is-wide{white-space:normal;text-align:center;max-width:40rem;line-height:1.5}@keyframes demo-pop{0%{opacity:0;transform:translateY(3px)}}.demo-kbd{font-family:var(--mono);color:var(--text-soft);white-space:nowrap;align-items:center;gap:.45rem;font-size:.74rem;display:inline-flex;position:absolute;top:50%;left:0;transform:translateY(-50%)}.demo-kbd i{background:#ececf1cc;border-radius:50%;width:6px;height:6px}@media (width<=999px){.demo-caption{flex-wrap:wrap}.demo-kbd{flex-basis:100%;order:2;justify-content:center;position:static;transform:none}}.demo-keys{grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:6px;display:grid}.demo-key{background:var(--ink-1);border:1px solid var(--line);border-radius:var(--r-md);cursor:pointer;min-height:44px;transition:border-color var(--snap), background var(--snap);flex-direction:column;justify-content:center;align-items:center;gap:.35rem;padding:.5rem .3rem .45rem;display:flex}.demo-key:hover{background:var(--ink-2);border-color:#56d8f080}.demo-keys kbd.key{transition:border-color var(--snap), color var(--snap);font-size:.95rem}.demo-key:hover kbd.key,.demo-keys kbd.key.is-down{border-color:var(--cyan);color:var(--cyan)}.demo-key.is-down{border-color:var(--cyan);background:#56d8f014}.demo-key.is-down kbd.key{border-bottom-width:1px;transform:translateY(1px)}.demo-key-label{font-family:var(--mono);color:#ececf194;white-space:nowrap;font-size:.68rem;line-height:1}.demo-key:hover .demo-key-label{color:#ececf1cc}.demo-live{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media (width<=999px){.demo-tour-text{align-content:center;min-height:4.6rem}.demo.is-watch .demo-tour-text{min-height:7rem}.demo-tutor-text{flex-basis:100%}.demo-steps{border-left:0;margin-left:0;padding-left:0}.demo-keys{grid-template-columns:repeat(auto-fit,minmax(84px,1fr))}}@media (prefers-reduced-motion:reduce){.demo-step{transition:none}.demo-flash,.demo-note,.demo-auto i{animation:none}.demo-win:after,.mac-dock-app>i{transition:none}}.border-glow-card{--edge-proximity:0;--cursor-angle:45deg;--edge-sensitivity:30;--color-sensitivity:calc(var(--edge-sensitivity) + 20);--border-radius:28px;--glow-padding:40px;--cone-spread:25;border-radius:var(--border-radius);isolation:isolate;background:var(--card-bg,#120f17);border:1px solid #ffffff26;display:grid;position:relative;overflow:visible;transform:translateZ(.01px);box-shadow:0 1px 2px #0000001a,0 2px 4px #0000001a,0 4px 8px #0000001a,0 8px 16px #0000001a,0 16px 32px #0000001a,0 32px 64px #0000001a}.border-glow-card--static:hover,.border-glow-card--static:focus-within{--edge-proximity:100}.border-glow-card--light{border-color:#18181b1f;box-shadow:0 1px 2px #18181b0a,0 8px 24px #18181b0d}.border-glow-card--light:after,.border-glow-card--light>.edge-light{mix-blend-mode:normal}.border-glow-card:before,.border-glow-card:after,.border-glow-card>.edge-light{content:"";border-radius:inherit;z-index:-1;transition:opacity .25s ease-out;position:absolute;inset:0}.border-glow-card:not(:hover):not(.sweep-active):before,.border-glow-card:not(:hover):not(.sweep-active):after,.border-glow-card:not(:hover):not(.sweep-active)>.edge-light{opacity:0;transition:opacity .75s ease-in-out}.border-glow-card:before{background:linear-gradient(var(--card-bg,#120f17) 0 100%) padding-box, linear-gradient(#fff0 0% 100%) border-box, var(--gradient-one,radial-gradient(at 80% 55%, #be85ff 0px, transparent 50%)) border-box, var(--gradient-two,radial-gradient(at 69% 34%, #ff7a93 0px, transparent 50%)) border-box, var(--gradient-three,radial-gradient(at 8% 6%, #8fffad 0px, transparent 50%)) border-box, var(--gradient-four,radial-gradient(at 41% 38%, #47daff 0px, transparent 50%)) border-box, var(--gradient-five,radial-gradient(at 86% 85%, #7af2ff 0px, transparent 50%)) border-box, var(--gradient-six,radial-gradient(at 82% 18%, #ffe74c 0px, transparent 50%)) border-box, var(--gradient-seven,radial-gradient(at 51% 4%, #ff8d70 0px, transparent 50%)) border-box, var(--gradient-base,linear-gradient(#c299ff 0 100%)) border-box;opacity:calc((var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));-webkit-mask-image:conic-gradient(from var(--cursor-angle) at center, black calc(var(--cone-spread) * 1%), transparent calc((var(--cone-spread) + 15) * 1%), transparent calc((100 - var(--cone-spread) - 15) * 1%), black calc((100 - var(--cone-spread)) * 1%));mask-image:conic-gradient(from var(--cursor-angle) at center, black calc(var(--cone-spread) * 1%), transparent calc((var(--cone-spread) + 15) * 1%), transparent calc((100 - var(--cone-spread) - 15) * 1%), black calc((100 - var(--cone-spread)) * 1%));border:1px solid #0000}.border-glow-card:after{background:var(--gradient-one,radial-gradient(at 80% 55%, #be85ff 0px, transparent 50%)) padding-box, var(--gradient-two,radial-gradient(at 69% 34%, #ff7a93 0px, transparent 50%)) padding-box, var(--gradient-three,radial-gradient(at 8% 6%, #8fffad 0px, transparent 50%)) padding-box, var(--gradient-four,radial-gradient(at 41% 38%, #47daff 0px, transparent 50%)) padding-box, var(--gradient-five,radial-gradient(at 86% 85%, #7af2ff 0px, transparent 50%)) padding-box, var(--gradient-six,radial-gradient(at 82% 18%, #ffe74c 0px, transparent 50%)) padding-box, var(--gradient-seven,radial-gradient(at 51% 4%, #ff8d70 0px, transparent 50%)) padding-box, var(--gradient-base,linear-gradient(#c299ff 0 100%)) padding-box;-webkit-mask-image:linear-gradient(to bottom, black, black), radial-gradient(ellipse at 50% 50%, black 40%, transparent 65%), radial-gradient(ellipse at 66% 66%, black 5%, transparent 40%), radial-gradient(ellipse at 33% 33%, black 5%, transparent 40%), radial-gradient(ellipse at 66% 33%, black 5%, transparent 40%), radial-gradient(ellipse at 33% 66%, black 5%, transparent 40%), conic-gradient(from var(--cursor-angle) at center, transparent 5%, black 15%, black 85%, transparent 95%);mask-image:linear-gradient(to bottom, black, black), radial-gradient(ellipse at 50% 50%, black 40%, transparent 65%), radial-gradient(ellipse at 66% 66%, black 5%, transparent 40%), radial-gradient(ellipse at 33% 33%, black 5%, transparent 40%), radial-gradient(ellipse at 66% 33%, black 5%, transparent 40%), radial-gradient(ellipse at 33% 66%, black 5%, transparent 40%), conic-gradient(from var(--cursor-angle) at center, transparent 5%, black 15%, black 85%, transparent 95%);opacity:calc(var(--fill-opacity,.5) * (var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));mix-blend-mode:soft-light;border:1px solid #0000;-webkit-mask-composite:source-out,source-over,source-over,source-over,source-over,source-over;mask-composite:subtract,add,add,add,add,add}.border-glow-card>.edge-light{inset:calc(var(--glow-padding) * -1);pointer-events:none;z-index:1;-webkit-mask-image:conic-gradient(from var(--cursor-angle) at center, black 2.5%, transparent 10%, transparent 90%, black 97.5%);mask-image:conic-gradient(from var(--cursor-angle) at center, black 2.5%, transparent 10%, transparent 90%, black 97.5%);opacity:calc((var(--edge-proximity) - var(--edge-sensitivity)) / (100 - var(--edge-sensitivity)));mix-blend-mode:plus-lighter}.border-glow-card>.edge-light:before{content:"";inset:var(--glow-padding);border-radius:inherit;box-shadow:inset 0 0 0 1px var(--glow-color,#f5daa3), inset 0 0 1px 0 var(--glow-color-60,#f5daa399), inset 0 0 3px 0 var(--glow-color-50,#f5daa380), inset 0 0 6px 0 var(--glow-color-40,#f5daa366), inset 0 0 15px 0 var(--glow-color-30,#f5daa34d), inset 0 0 25px 2px var(--glow-color-20,#f5daa333), inset 0 0 50px 2px var(--glow-color-10,#f5daa31a), 0 0 1px 0 var(--glow-color-60,#f5daa399), 0 0 3px 0 var(--glow-color-50,#f5daa380), 0 0 6px 0 var(--glow-color-40,#f5daa366), 0 0 15px 0 var(--glow-color-30,#f5daa34d), 0 0 25px 2px var(--glow-color-20,#f5daa333), 0 0 50px 2px var(--glow-color-10,#f5daa31a);position:absolute}.border-glow-inner{z-index:1;flex-direction:column;display:flex;position:relative;overflow:auto}.focus-container{-webkit-user-select:none;user-select:none;outline:none;flex-wrap:wrap;justify-content:center;align-items:center;gap:1em;display:flex;position:relative}.focus-word{cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;font-size:3rem;font-weight:900;transition:filter .3s,color .3s;position:relative}.focus-word.active{filter:blur()}.focus-frame{pointer-events:none;box-sizing:content-box;border:none;position:absolute;top:0;left:0}.corner{border:3px solid var(--border-color,#fff);width:1rem;height:1rem;filter:drop-shadow(0px 0px 4px var(--border-color,#fff));border-radius:3px;transition:none;position:absolute}.top-left{border-bottom:none;border-right:none;top:-10px;left:-10px}.top-right{border-bottom:none;border-left:none;top:-10px;right:-10px}.bottom-left{border-top:none;border-right:none;bottom:-10px;left:-10px}.bottom-right{border-top:none;border-left:none;bottom:-10px;right:-10px}.card-spotlight{--mouse-x:50%;--mouse-y:50%;--spotlight-color:#ffffff0d;background-color:#111;border:1px solid #222;border-radius:1.5rem;padding:2rem;position:relative;overflow:hidden}.card-spotlight:before{content:"";background:radial-gradient(circle at var(--mouse-x) var(--mouse-y), var(--spotlight-color), transparent 80%);opacity:0;pointer-events:none;transition:opacity .5s;position:absolute;inset:0}.card-spotlight:hover:before,.card-spotlight:focus-within:before{opacity:.6}@media (prefers-reduced-motion:reduce){.card-spotlight:before{transition-duration:0s}}.hud{--f-title:17px;--f-meta:12px;--f-row:14px;--f-chip:12px;--hud-faint:#ececf1a6;width:1000px;max-width:100%;box-shadow:var(--glass-shadow);color:var(--text);font-family:var(--sans);text-align:left}.hud.card-spotlight{background:var(--glass-fill);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border:1px solid var(--glass-rim);border-radius:var(--r-hud);flex-direction:column;gap:12px;padding:18px 20px 16px;display:flex;container-type:inline-size}.hud.card-spotlight:hover:before,.hud.card-spotlight:focus-within:before{opacity:1}.hud:before{z-index:0}.hud>*{z-index:1;position:relative}.hud-head{align-items:center;gap:10px;display:flex}.hud-title{font-size:var(--f-title);align-items:center;gap:9px;margin-right:auto;font-weight:600;display:inline-flex}.hud .hud-tutorial{color:var(--cyan);background:#56d8f01f;border-radius:5px;flex:none;padding:4px 8px;font-size:13px;font-weight:500;line-height:1.2;text-decoration:none}.hud .hud-tutorial:hover{color:var(--cyan);background:#56d8f038}.hud-group{break-inside:avoid}@container (width>=640px){.hud-list{columns:2;column-gap:28px}}.hud .hud-sec{height:30px;font-family:var(--sans);font-size:var(--f-meta);letter-spacing:.8px;text-transform:uppercase;color:#ebebf599;align-items:flex-end;margin:0;padding:0 12px 5px;font-weight:600;line-height:1.2;display:flex}.hud-rows{margin:0;padding:0;list-style:none}.hud-row{justify-content:space-between;align-items:center;gap:10px;min-height:34px;padding:4px 14px 4px 12px;display:flex}.hud-label{min-width:0;font-size:var(--f-row);color:#ececf1e0;line-height:1.3}.hud-fl{color:var(--magenta);margin-left:5px;font-size:11px}.hud .chord{flex:none;gap:3px}.hud .chord .key{min-width:21px;height:21px;min-height:0;font-size:var(--f-chip);border-radius:var(--r-sm);border-bottom-width:2px;padding:0 5px}.hud .hud-title .chord .key{min-width:24px;height:24px;font-size:13px}.hud .hud-foot{font-size:var(--f-meta);color:var(--hud-faint);margin:0;line-height:1.6}.hud .hud-foot .chord .key{vertical-align:middle;height:18px;min-height:0;font-size:10px}.hud-note{white-space:nowrap}.hud-mid{padding:0 .5em}@media (width<=760px){.hud{--f-title:16px;--f-row:15px}.hud.card-spotlight{padding:14px 15px}.hud-row{min-height:40px;padding:5px 4px 5px 8px}.hud .hud-sec{padding-left:8px}.hud .chord .key{border-radius:var(--r-md);min-width:24px;height:24px}.hud .hud-tutorial{display:none}}