:root { --plugin-purple: #88a97a; --plugin-blue: #789f8b; }
[data-theme="light"] { --plugin-purple: #39742f; --plugin-blue: #25705c; }
body { background: radial-gradient(ellipse 70% 700px at 100% 0,#88a97a0e,transparent),var(--bg); }
.topbar { position: sticky; top: 12px; width: min(1320px,calc(100% - 48px)); padding: 14px 20px; margin-top: 12px; border: 1px solid var(--line); border-radius: 22px; background: color-mix(in srgb,var(--bg) 94%,transparent); backdrop-filter: blur(20px); z-index: 50; }
.brand-accent { color: var(--plugin-purple); }.topbar .brand { letter-spacing: .05em; }.topbar .brand img { width: 32px; height: 32px; }
.topbar nav { border: 0; background: transparent; }.topbar nav > a,.plugin-nav-menu > summary { padding: 9px 16px; border-radius: 999px; color: var(--muted); cursor: pointer; font-size: .8rem; list-style: none; }.plugin-nav-menu > summary::-webkit-details-marker { display: none; }
.plugin-nav-menu { position: relative; }.plugin-nav-menu > div { position: absolute; top: calc(100% + 12px); left: 0; width: 240px; padding: 10px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: 0 20px 50px #0004; }.plugin-nav-menu::after { content: ''; position: absolute; top: 100%; width: 100%; height: 18px; }.plugin-nav-menu a { display: block; padding: 12px; border-radius: 8px; color: var(--text); }.plugin-nav-menu a:hover { background: var(--surface-raised); }
main,footer { width: min(1240px,calc(100% - 64px)); margin-inline: auto; }section[id] { scroll-margin-top: 125px; }
.plugin-hero { display: grid; grid-template-columns: 1.04fr 1fr; gap: 50px; align-items: center; padding: 110px 0 115px; }
.plugin-hero h1 { font-size: clamp(44px,5.2vw,74px); line-height: 1.04; letter-spacing: -.065em; }.plugin-hero em,.setup-section em { font-style: normal; color: var(--plugin-purple); }.plugin-hero .lead { font-size: 1rem; max-width: 480px; line-height: 1.8; }.hero-credentials { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 34px; color: var(--muted); font: 9px ui-monospace,monospace; letter-spacing: .08em; }
.hud-scene { min-width: 0; perspective: 1400px; padding-block: 40px; }.hud-scene__canvas { position: relative; height: 355px; border: 1px solid var(--line); border-radius: 20px; background: radial-gradient(ellipse at 100% 0,#88a97a1c,transparent 65%),var(--surface); transform: rotateY(-10deg) rotateX(8deg); transform-style: preserve-3d; box-shadow: 12px 12px 0 -3px var(--bg),12px 12px 0 -2px var(--line),0 40px 80px -35px #0009; }
.hud-scene__bar { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; padding: 20px; border-bottom: 1px solid var(--line); font: 9px ui-monospace,monospace; color: var(--muted); }.hud-scene__bar i { color: var(--plugin-purple); margin-right: 7px; }
.hud-scene__grid { position: absolute; inset: 60px 0 0; border-radius: inherit; opacity: .5; background-image: linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size: 30px 30px; mask-image: radial-gradient(ellipse,#000,transparent); }.hud-scene__crosshair { position: absolute; top: 51%; left: 51%; color: var(--muted); font: 30px ui-monospace; }
.hud-module { position: absolute; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: inset 0 1px 0 #ffffff14,0 24px 38px -24px #0009; }.hud-module > span { color: var(--muted); font: 9px ui-monospace,monospace; }.hud-module--keys { top: 95px; left: -16px; transform: translateZ(40px); }.key-grid { display: grid; grid-template-columns: repeat(3,32px); gap: 4px; margin-top: 12px; text-align: center; }.key-grid kbd:first-child { grid-column: 2; }.key-grid kbd:nth-child(2) { grid-column: 1; }.key-grid kbd:last-child { grid-column: 1 / -1; font-size: 8px; }.key-grid kbd { background: color-mix(in srgb,var(--plugin-blue) 15%,var(--surface)); font-size: 12px; }
.hud-module--performance { right: -12px; top: 85px; width: 195px; display: grid; gap: 13px; transform: translateZ(60px); background: radial-gradient(at 100% 0,#88a97a18,transparent),var(--surface); }.hud-module--performance strong { font-size: .85rem; }.hud-module--performance i { color: var(--plugin-purple); }.hud-bars { height: 35px; display: flex; align-items: end; gap: 5px; }.hud-bars b { flex: 1; height: 40%; border-radius: 4px 4px 0 0; background: var(--plugin-purple); opacity: .6; }.hud-bars b:nth-child(2n) { height: 68%; }.hud-bars b:nth-child(3n) { height: 90%; }
.hud-module--layout { display: flex; align-items: center; gap: 14px; bottom: 18px; left: 15%; width: 80%; transform: translateZ(80px); }.hud-module--layout i { color: var(--green); }.hud-module--layout strong { font-size: .85rem; }.hud-module--layout span { display: block; font-size: .7rem; color: var(--muted); }.hud-scene__caption { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 40px 4px 0; color: var(--muted); font: 8px ui-monospace,monospace; }
.companion-section { display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; gap: 70px; padding: 70px 0; border-top: 1px solid var(--line); }.companion-card { padding: 36px; background: radial-gradient(ellipse at 100% 0,#90bd7630,transparent 65%),var(--surface); border: 1px solid var(--line); border-radius: 26px; box-shadow: var(--panel-shadow); }.companion-card__identity { display: flex; align-items: center; gap: 20px; }.companion-card__identity img { width: 66px; height: 66px; }.companion-card h3 { font-size: 2.2rem; margin-top: 5px; }.companion-card p { color: var(--muted); }.companion-card__identity p { margin: 5px 0; font-size: .8rem; }.companion-card .compatibility-note { border-top: 1px solid var(--line); padding-top: 20px; font-size: .74rem; }
.capability-section { padding: 65px 0; }.capability-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; }.capability-card { --tint: var(--plugin-blue); position: relative; display: flex; flex-direction: column; padding: 28px; border: 1px solid var(--line); border-radius: 24px; background: radial-gradient(ellipse at 100% 10%,color-mix(in srgb,var(--tint) 19%,transparent),transparent 70%),var(--surface); box-shadow: 0 6px 0 -3px var(--surface-raised),0 7px 0 -3px var(--line),0 24px 45px -30px #0008; transition: transform .3s; }.capability-card:hover { transform: perspective(1000px) rotateX(2deg) translateY(-5px); }.capability-card--violet { --tint: var(--plugin-purple); }.capability-card--green { --tint: var(--green); }.feature-number { font: 9px ui-monospace,monospace; letter-spacing: .12em; color: var(--tint); }.feature-art { height: 185px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; margin-block: 15px; }.feature-art--keys kbd { display: inline-grid; place-items: center; width: 44px; height: 44px; color: var(--tint); background: var(--surface); box-shadow: 0 7px 20px #0002; }.feature-art--keys > kbd { background: color-mix(in srgb,var(--tint) 18%,var(--surface)); }.feature-art--layout div { width: 80%; padding: 12px 16px; border: 1px solid var(--line); border-radius: 9px; font: 9px ui-monospace,monospace; background: var(--surface); transform: rotate(-6deg); box-shadow: 0 10px 25px #0002; }.feature-art--layout div:nth-child(2) { transform: rotate(4deg) translateX(12px); }.feature-art--shield i { font-size: 60px; color: var(--tint); }.feature-art--shield span { font: 8px ui-monospace,monospace; letter-spacing: .12em; margin-top: 15px; color: var(--muted); }.capability-card h3 { font-size: 1.7rem; }.capability-card p { color: var(--muted); font-size: .85rem; flex: 1; }.capability-card a { color: var(--tint); }
.setup-section { display: grid; grid-template-columns: 1fr 1.1fr; gap: 80px; padding: 90px 0; }.setup-section h2,.plugin-outro h2 { font-size: clamp(36px,4vw,56px); }.setup-section > div > p:not(.eyebrow) { color: var(--muted); max-width: 360px; }.setup-section .button { margin-top: 18px; }.setup-steps { list-style: none; margin: 0; padding: 0; }.setup-steps li { display: flex; gap: 24px; border-bottom: 1px solid var(--line); padding: 24px 0; }.setup-steps li > span { display: grid; place-items: center; flex: 0 0 44px; height: 44px; border: 1px solid var(--line); border-radius: 14px; font: 12px ui-monospace; color: var(--plugin-purple); }.setup-steps h3 { font-size: 1rem; }.setup-steps p { color: var(--muted); font-size: .85rem; margin-bottom: 0; }
.plugin-faq { max-width: 900px; margin: 20px auto 90px; }.plugin-faq details { border-bottom: 1px solid var(--line); padding: 22px 0; }.plugin-faq summary { cursor: pointer; font-weight: 600; }.plugin-faq details p { color: var(--muted); max-width: 750px; font-size: .9rem; }.plugin-faq a { text-decoration: underline; text-underline-offset: 4px; color: var(--text); }.plugin-outro { text-align: center; padding: 70px 24px; border: 1px solid var(--line); border-radius: 28px; background: radial-gradient(ellipse at 50% 100%,#88a97a14,transparent 65%),var(--surface); margin-bottom: 70px; }.plugin-outro p:not(.eyebrow) { color: var(--muted); }.plugin-outro .button { margin-top: 16px; }footer { flex-wrap: wrap; align-items: center; }footer > div { display: flex; flex-wrap: wrap; gap: 22px; }footer > span { width: 100%; font-size: .7rem; }
@media (min-width: 1000px) and (prefers-reduced-motion: no-preference) { @supports (animation-timeline: view()) { .capability-card { animation: plugin-card-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 90%; }@keyframes plugin-card-rise { from { transform: perspective(1000px) rotateX(9deg) translateY(40px); }to { transform: none; } } } }
@media (max-width: 1050px) { .plugin-hero { gap: 30px; }.hud-module--performance { width: 170px; }.hud-module--keys { left: -8px; }.companion-section { gap: 35px; }.capability-grid { gap: 14px; }.capability-card { padding: 22px; } }
@media (max-width: 850px) { .plugin-hero { grid-template-columns: 1fr; padding: 70px 0; }.plugin-hero__copy { text-align: center; }.plugin-hero .lead { margin-inline: auto; }.hero-actions,.hero-credentials { justify-content: center; }.hud-scene { width: min(510px,90%); margin-inline: auto; }.companion-section,.setup-section { grid-template-columns: 1fr; gap: 25px; }.capability-grid { grid-template-columns: 1fr; }.capability-card { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 25px; padding: 30px; }.feature-number { grid-column: 1 / -1; }.feature-art { grid-column: 2; grid-row: 2 / 5; }.capability-card h3,.capability-card p,.capability-card > a { grid-column: 1; }.topbar nav { order: 0; width: auto; }.topbar-actions .button { display: none; } }
@media (max-width: 580px) { main,footer { width: calc(100% - 36px); }.topbar { width: calc(100% - 24px); padding: 10px 12px; gap: 8px; }.topbar nav > a { display: none; }.topbar-actions { margin-left: auto; }.plugin-nav-menu > summary { padding-inline: 10px; }.plugin-nav-menu > div { left: auto; right: -45px; }.plugin-hero h1 { font-size: 45px; }.hud-scene { width: 94%; }.hud-scene__canvas { transform: rotateX(4deg); height: 350px; }.hud-module--performance { right: -4px; width: 150px; padding: 14px; }.hud-module--keys { left: -4px; padding: 14px; }.hud-module--layout { left: 4%; width: 96%; padding: 14px; }.hud-module--layout strong { font-size: .72rem; }.hud-scene__caption { font-size: 6px; }.companion-card { padding: 24px; }.capability-card { display: flex; }.feature-art { height: 145px; }.setup-section { padding: 55px 0; }.plugin-faq { margin-bottom: 55px; }.plugin-outro { padding: 50px 20px; } }
@media (prefers-reduced-motion: reduce) { .hud-scene__canvas,.hud-module,.capability-card,.feature-art--layout div { transform: none !important; animation: none !important; }.hud-module--layout { left: 6%; } }
.kv-depth-card { --kv-plugin-tone: var(--green); opacity: 0; transform: perspective(1200px) rotateX(8deg) translateY(34px) scale(.975); transform-style: preserve-3d; transition: opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1),box-shadow .25s ease; box-shadow: inset 0 1px 0 #fff1,0 7px 0 -3px var(--surface-raised),0 8px 0 -3px var(--line),0 32px 65px -40px #000c !important; }
.kv-depth-card--violet { --kv-plugin-tone: var(--plugin-purple); }.kv-depth-card--blue { --kv-plugin-tone: var(--plugin-blue); }.kv-depth-card--amber { --kv-plugin-tone: #d5aa73; }.kv-depth-card--visible { opacity: 1; transform: perspective(1200px) rotateX(var(--kv-tilt-x,0deg)) rotateY(var(--kv-tilt-y,0deg)); background-image: radial-gradient(ellipse at 100% 0,color-mix(in srgb,var(--kv-plugin-tone) 17%,transparent),transparent 68%) !important; }.kv-depth-card--visible:hover { box-shadow: inset 0 1px 0 #fff2,0 9px 0 -3px var(--surface-raised),0 10px 0 -3px var(--line),0 40px 75px -42px color-mix(in srgb,var(--kv-plugin-tone) 45%,transparent) !important; }
@media (max-width: 640px), (prefers-reduced-motion: reduce) { .kv-depth-card { opacity: 1; transform: none; transition: none; } }
/* Identity mark and accessible fold animations */
.plugin-hero__mark { display: inline-flex; align-items: center; gap: .6rem; margin-bottom: 1.1rem; color: var(--plugin-purple); font: 700 .72rem/1 var(--plugin-mono); letter-spacing: .13em; }
.plugin-hero__mark img { width: 2.35rem; height: 2.35rem; object-fit: contain; filter: drop-shadow(0 10px 18px rgba(116, 208, 91, .24)); }
.hud-scene__bar img { width: 1.35rem; height: 1.35rem; margin-right: .35rem; object-fit: contain; vertical-align: middle; }
.plugin-faq { display: grid; gap: 12px; max-width: 900px; }
.plugin-faq details { overflow: clip; border: 1px solid var(--line); border-radius: 16px; padding: 0; background: color-mix(in srgb, var(--surface) 92%, var(--plugin-purple) 8%); box-shadow: none; transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease; }
.plugin-faq details:hover { border-color: color-mix(in srgb, var(--plugin-purple) 45%, var(--line)); }
.plugin-faq details[open] { border-color: color-mix(in srgb, var(--plugin-purple) 58%, var(--line)); background: color-mix(in srgb, var(--surface-raised) 90%, var(--plugin-purple) 10%); box-shadow: 0 14px 32px rgba(0, 0, 0, .16); }
.plugin-faq summary { align-items: center; display: flex; gap: 1rem; min-height: 72px; list-style: none; padding: 0 22px; font-size: 1rem; }
.plugin-faq summary::-webkit-details-marker { display: none; }
.plugin-faq__toggle { align-items: center; border: 1px solid color-mix(in srgb, var(--plugin-purple) 62%, var(--line)); border-radius: 999px; color: var(--plugin-purple); display: inline-flex; flex: 0 0 auto; font: 600 1.15rem/1 var(--plugin-sans); height: 1.75rem; justify-content: center; margin-left: auto; transition: transform .24s ease, background-color .2s ease, color .2s ease; width: 1.75rem; }
.plugin-faq details[open] .plugin-faq__toggle { background: var(--plugin-purple); color: var(--bg); transform: rotate(180deg); }
.plugin-faq details p { margin: 0; max-width: none; padding: 0 66px 24px 22px; line-height: 1.65; }
@media (max-width: 580px) { .plugin-faq { gap: 9px; }.plugin-faq summary { min-height: 64px; padding-inline: 17px; font-size: .92rem; }.plugin-faq details p { padding: 0 17px 20px; font-size: .84rem; }.plugin-faq__toggle { height: 1.6rem; width: 1.6rem; } }
@media (prefers-reduced-motion: reduce) { .plugin-faq details, .plugin-faq__toggle { transition: none; } }

.plugin-screenshot { display: grid; grid-template-columns: minmax(0, .74fr) minmax(0, 1.26fr); gap: 52px; align-items: center; padding: 80px 0; border-top: 1px solid var(--line); }
.plugin-screenshot__copy h2 { margin: 12px 0 18px; font-size: clamp(2.3rem, 4vw, 4.15rem); line-height: 1.02; letter-spacing: -.06em; }
.plugin-screenshot__copy > p:not(.eyebrow) { max-width: 430px; color: var(--muted); line-height: 1.75; }
.plugin-screenshot__copy .text-link { display: inline-flex; margin-top: 13px; color: var(--plugin-purple); }
.plugin-screenshot__frame { position: relative; min-width: 0; margin: 0; overflow: hidden; border: 1px solid color-mix(in srgb, var(--plugin-purple) 34%, var(--line)); border-radius: 22px; background: #09100b; box-shadow: 0 36px 70px -50px #000; }
.plugin-screenshot__frame::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(135deg, rgba(189, 226, 165, .13), transparent 32%); }
.plugin-screenshot__frame img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.plugin-screenshot__frame figcaption { position: absolute; z-index: 2; right: 16px; bottom: 14px; padding: 6px 8px; border: 1px solid rgba(199, 229, 175, .2); border-radius: 5px; background: rgba(7, 14, 9, .76); color: #c3d8bf; font: .45rem ui-monospace, monospace; letter-spacing: .1em; }
@media (max-width: 850px) { .plugin-screenshot { grid-template-columns: 1fr; gap: 30px; padding: 64px 0; }.plugin-screenshot__copy { max-width: 600px; }.plugin-screenshot__frame { width: min(100%, 720px); }.plugin-screenshot__copy h2 { font-size: 3rem; } }
@media (max-width: 580px) { .plugin-screenshot { padding: 50px 0; }.plugin-screenshot__copy h2 { font-size: 2.3rem; }.plugin-screenshot__frame { border-radius: 14px; }.plugin-screenshot__frame figcaption { right: 9px; bottom: 9px; font-size: .36rem; } }

.plugin-hud-demo { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 52px; align-items: center; padding: 80px 0; border-top: 1px solid var(--line); }.plugin-hud-demo__copy h2 { margin: 12px 0 18px; font-size: clamp(2.3rem, 4vw, 4.15rem); line-height: 1.02; letter-spacing: -.06em; }.plugin-hud-demo__copy > p:not(.eyebrow) { max-width: 420px; color: var(--muted); line-height: 1.75; }.plugin-hud-demo__hint { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; color: var(--plugin-purple); font: 700 .62rem ui-monospace, monospace; letter-spacing: .07em; }
.plugin-hud-demo__shell { --hud-accent: #c5e89e; --hud-crosshair-size: 26px; overflow: hidden; min-width: 0; border: 1px solid color-mix(in srgb, var(--plugin-purple) 35%, var(--line)); border-radius: 20px; background: #09100b; box-shadow: inset 0 1px #fff1,0 36px 70px -48px #000; }.plugin-hud-demo__toolbar { display: flex; align-items: center; justify-content: space-between; min-height: 42px; padding: 0 14px; border-bottom: 1px solid #ffffff13; color: #a1b6a1; font: 700 .47rem ui-monospace, monospace; letter-spacing: .09em; }.plugin-hud-demo__toolbar span { display: inline-flex; align-items: center; gap: 7px; }.plugin-hud-demo__toolbar img { width: 18px; height: 18px; object-fit: contain; }.plugin-hud-demo__toolbar button { border: 1px solid #ffffff1e; border-radius: 6px; padding: 5px 7px; background: #111a12; color: #c5d9c6; font: inherit; cursor: pointer; }.plugin-hud-demo__canvas { position: relative; min-height: 462px; overflow: hidden; outline: none; touch-action: none; background: radial-gradient(ellipse at 48% 45%,#52704462,transparent 55%),linear-gradient(#a1cf8c12 1px,transparent 1px),linear-gradient(90deg,#a1cf8c12 1px,transparent 1px),#0b120d; background-size: auto,32px 32px,32px 32px,auto; }.plugin-hud-demo__canvas:focus-visible { box-shadow: inset 0 0 0 2px var(--hud-accent); }.plugin-hud-demo__grid { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center,transparent 35%,#08100c99); }.plugin-hud-demo__crosshair { position: absolute; z-index: 2; top: 50%; left: 47%; color: var(--hud-accent); font: 300 var(--hud-crosshair-size)/1 ui-monospace, monospace; text-shadow: 0 0 14px color-mix(in srgb,var(--hud-accent) 72%,transparent); transform: translate(-50%,-50%); }.hud-demo-widget { position: absolute; z-index: 3; display: grid; gap: 9px; min-width: 110px; padding: 11px; border: 1px solid color-mix(in srgb,var(--hud-accent) 34%,#768b79); border-radius: 8px; background: #0c150ee8; color: #d8e6d6; box-shadow: 0 10px 24px #0007; cursor: grab; touch-action: none; user-select: none; }.hud-demo-widget:hover,.hud-demo-widget.is-selected { border-color: var(--hud-accent); box-shadow: 0 0 0 2px color-mix(in srgb,var(--hud-accent) 18%,transparent),0 12px 28px #0008; }.hud-demo-widget.is-dragging { cursor: grabbing; opacity: .92; }.hud-demo-widget strong { color: #a7bba7; font: 700 .43rem ui-monospace,monospace; letter-spacing: .1em; }.hud-demo-widget--keys span { display: grid; grid-template-columns: repeat(3,24px); justify-content: center; gap: 3px; }.hud-demo-widget--keys b { display: grid; width: 24px; height: 22px; place-items: center; border: 1px solid #a3bd9d55; border-radius: 3px; background: #203225; color: var(--hud-accent); font: 700 .53rem ui-monospace,monospace; }.hud-demo-widget--keys b:first-child { grid-column: 2; }.hud-demo-widget--fps { min-width: 134px; }.hud-demo-widget--fps strong i { color: var(--hud-accent); }.hud-demo-widget--fps svg { width: 120px; height: 36px; }.hud-demo-widget--fps polyline { fill: color-mix(in srgb,var(--hud-accent) 14%,transparent); stroke: var(--hud-accent); stroke-width: 2; }.hud-demo-widget--coords { min-width: 148px; }.hud-demo-widget--coords span { color: #bdcfbd; font: .48rem ui-monospace,monospace; }.hud-demo-widget--hotbar { padding: 6px; }.hud-demo-widget--hotbar span { display: flex; gap: 2px; }.hud-demo-widget--hotbar b { width: 25px; height: 25px; border: 1px solid #8ba18c77; background: #152117; }.hud-demo-widget--hotbar b.is-selected { outline: 2px solid var(--hud-accent); outline-offset: -3px; }.plugin-hud-demo__controls { position: absolute; z-index: 4; top: 12px; right: 12px; width: 126px; padding: 12px; border: 1px solid #ffffff18; border-radius: 9px; background: #0b130ce8; color: #c9d8c7; }.plugin-hud-demo__controls > strong { display: block; color: var(--hud-accent); font: 700 .48rem ui-monospace,monospace; letter-spacing: .1em; }.plugin-hud-demo__colors { display: flex; gap: 5px; margin: 11px 0; }.plugin-hud-demo__colors button { width: 20px; height: 20px; border: 1px solid #fff4; border-radius: 5px; background: var(--swatch); cursor: pointer; }.plugin-hud-demo__colors button.is-active { outline: 2px solid #edf7e8; outline-offset: 2px; }.plugin-hud-demo__controls label { display: grid; gap: 6px; color: #9caf9c; font: .45rem ui-monospace,monospace; }.plugin-hud-demo__controls input { width: 100%; accent-color: var(--hud-accent); }.plugin-hud-demo__controls p { margin: 11px 0 0; padding-top: 9px; border-top: 1px solid #ffffff13; color: #9caf9c; font: .42rem/1.45 ui-monospace,monospace; }.plugin-hud-demo__toast { position: absolute; z-index: 5; bottom: 12px; left: 12px; padding: 7px 9px; border: 1px solid #ffffff18; border-radius: 6px; background: #09100bd9; color: #b4c6b4; font: .43rem ui-monospace,monospace; }
@media (max-width: 850px) { .plugin-hud-demo { grid-template-columns: 1fr; gap: 30px; padding: 64px 0; }.plugin-hud-demo__copy { max-width: 600px; }.plugin-hud-demo__shell { width: min(100%, 760px); }.plugin-hud-demo__copy h2 { font-size: 3rem; } }
@media (max-width: 580px) { .plugin-hud-demo { padding: 50px 0; }.plugin-hud-demo__copy h2 { font-size: 2.3rem; }.plugin-hud-demo__canvas { min-height: 410px; }.plugin-hud-demo__controls { top: auto; right: 8px; bottom: 8px; width: 116px; }.hud-demo-widget { transform: scale(.82); transform-origin: top left; }.hud-demo-widget--fps { left: 47% !important; }.hud-demo-widget--hotbar { left: 19% !important; }.plugin-hud-demo__toast { max-width: 120px; bottom: 8px; left: 8px; } }

/* Version-aware KeyClient download menu */
.download-menu { position: relative; }
.download-menu__panel { max-height: calc(100dvh - 130px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--green) var(--surface); }
.download-menu > summary { list-style: none; cursor: pointer; user-select: none; }
.download-menu > summary::-webkit-details-marker { display: none; }
.download-menu[open] > summary { transform: translateY(-2px); box-shadow: 0 12px 30px color-mix(in srgb,var(--green) 22%,transparent); }
.download-menu__panel { position: absolute; top: calc(100% + 14px); right: 0; width: min(390px,calc(100vw - 32px)); padding: 10px; border: 1px solid color-mix(in srgb,var(--green) 38%,var(--line)); border-radius: 20px; background: radial-gradient(ellipse at 100% 0,color-mix(in srgb,var(--green) 15%,transparent),transparent 56%),color-mix(in srgb,var(--surface) 96%,transparent); box-shadow: inset 0 1px 0 #fff1,0 28px 70px -24px #000d; backdrop-filter: blur(24px); transform-origin: top right; animation: keyclient-menu-in .26s cubic-bezier(.16,1,.3,1); }
.download-menu__panel::before { content: ''; position: absolute; right: 28px; top: -7px; width: 12px; height: 12px; border-left: 1px solid color-mix(in srgb,var(--green) 38%,var(--line)); border-top: 1px solid color-mix(in srgb,var(--green) 38%,var(--line)); background: var(--surface); transform: rotate(45deg); }
.download-menu__heading { display: grid; gap: 3px; padding: 12px 13px 14px; border-bottom: 1px solid var(--line); }
.download-menu__heading span { color: var(--green); font: 700 .52rem ui-monospace,monospace; letter-spacing: .14em; }
.download-menu__heading strong { font-size: .95rem; letter-spacing: -.02em; }
.download-menu__panel > a { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 58px; margin-top: 5px; padding: 9px 11px 9px 13px; border: 1px solid transparent; border-radius: 12px; transition: border-color .18s,background .18s,transform .18s; }
.download-menu__panel > a:hover,.download-menu__panel > a:focus-visible { border-color: color-mix(in srgb,var(--green) 35%,var(--line)); background: color-mix(in srgb,var(--green) 9%,var(--surface-raised)); transform: translateX(-3px); outline: none; }
.download-menu__panel > a span { display: grid; gap: 1px; }
.download-menu__panel > a strong { font-size: .79rem; }
.download-menu__panel > a small { color: var(--muted); font-size: .62rem; }
.download-menu__panel > a b { min-width: 62px; padding: 6px 8px; border: 1px solid color-mix(in srgb,var(--green) 35%,var(--line)); border-radius: 8px; background: color-mix(in srgb,var(--green) 9%,var(--surface)); color: var(--green); font: 700 .55rem ui-monospace,monospace; text-align: center; }
.download-menu__panel > p { display: flex; align-items: center; gap: 8px; margin: 8px 3px 2px; padding: 11px; border-top: 1px solid var(--line); color: var(--muted); font-size: .63rem; }
.download-menu__panel > p i { color: var(--green); }
@keyframes keyclient-menu-in { from { opacity: 0; transform: translateY(-10px) scale(.97); } to { opacity: 1; transform: none; } }
@media (max-width: 850px) { .topbar-actions .download-menu .button { display: inline-flex; }.download-menu__panel { right: 0; } }
@media (max-width: 580px) { .theme-toggle span:last-child { display: none; }.download-menu > summary { min-height: 38px; padding: 8px 11px; font-size: .72rem; }.download-menu__panel { position: fixed; top: 78px; right: 12px; } }
@media (prefers-reduced-motion: reduce) { .download-menu__panel { animation: none; }.download-menu__panel > a { transition: none; } }