#top { display: flex; flex-direction: column; }
#top > .hero { order: 1; }
#top > .workflow { order: 2; }
#top > .about { order: 3; }
#top > .release-spotlight { order: 4; }
#top > .product-suite { order: 5; }
#top > .platform-showcase { order: 6; }
#top > .faq { order: 7; }
#top > .downloads { order: 8; }
.release-spotlight { display: grid; grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr); align-items: center; gap: clamp(32px, 7vw, 92px); }
.release-spotlight__intro h2 { max-width: 520px; }
.release-spotlight__intro > p:last-of-type { max-width: 520px; margin: 20px 0 0; color: var(--muted); line-height: 1.75; }
.release-spotlight__intro .button { margin-top: 28px; }
.release-spotlight__panel { position: relative; overflow: hidden; padding: 18px; border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line)); border-radius: 24px; background: radial-gradient(circle at 91% 3%, color-mix(in srgb, var(--accent) 27%, transparent), transparent 34%), linear-gradient(135deg, color-mix(in srgb, var(--surface-raised) 92%, #111), var(--surface)); box-shadow: inset 0 1px 0 #fff1, 0 26px 68px -42px #000; }
.release-spotlight__panel::before { position: absolute; inset: 0; content: ''; pointer-events: none; opacity: .35; background-image: radial-gradient(color-mix(in srgb, var(--accent) 42%, transparent) .75px, transparent .75px); background-size: 6px 6px; mask-image: linear-gradient(115deg, transparent 18%, #000 76%); }
.release-spotlight__top { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 1px 2px 16px; color: var(--muted); font: 700 .61rem ui-monospace, monospace; letter-spacing: .12em; }
.release-spotlight__top > span { display: inline-flex; align-items: center; gap: 9px; color: var(--text); }
.release-spotlight__top img { object-fit: contain; filter: drop-shadow(0 6px 8px #0009); }
.release-spotlight__top strong { padding: 5px 8px; border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent); border-radius: 999px; color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, transparent); }
.release-spotlight__window { position: relative; z-index: 1; min-height: 190px; padding: 28px; overflow: hidden; border: 1px solid #b1c5b026; border-radius: 17px; background: linear-gradient(135deg, #152018, #0d1310); box-shadow: inset 0 1px 0 #fff1; }
.release-spotlight__window::after { position: absolute; right: -32px; bottom: -76px; width: 250px; height: 250px; content: ''; border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); border-radius: 50%; box-shadow: 0 0 0 35px color-mix(in srgb, var(--accent) 5%, transparent), 0 0 0 70px color-mix(in srgb, var(--accent) 3%, transparent); }
.release-spotlight__label { position: relative; z-index: 1; display: block; color: var(--accent); font: 700 .56rem ui-monospace, monospace; letter-spacing: .16em; }
.release-spotlight__window > strong { position: relative; z-index: 1; display: block; margin-top: 17px; color: #f1f5ef; font-size: clamp(1.75rem, 3vw, 2.55rem); line-height: 1.02; letter-spacing: -.055em; }
.release-spotlight__meter { position: absolute; z-index: 1; right: 29px; bottom: 28px; display: flex; align-items: end; gap: 6px; height: 52px; }
.release-spotlight__meter i { width: 12px; height: var(--meter-height); border: 1px solid color-mix(in srgb, var(--accent) 60%, #fff); border-radius: 4px 4px 1px 1px; background: color-mix(in srgb, var(--accent) 62%, #18331b); box-shadow: 0 7px 15px color-mix(in srgb, var(--accent) 20%, transparent); }
.release-spotlight__meter i:nth-child(1) { --meter-height: 18px; }.release-spotlight__meter i:nth-child(2) { --meter-height: 29px; }.release-spotlight__meter i:nth-child(3) { --meter-height: 45px; }.release-spotlight__meter i:nth-child(4) { --meter-height: 35px; }.release-spotlight__meter i:nth-child(5) { --meter-height: 48px; }
.release-spotlight__list { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }
.release-spotlight__list li { display: flex; gap: 10px; min-width: 0; padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--surface) 72%, transparent); }
.release-spotlight__list i { display: grid; flex: 0 0 25px; height: 25px; place-items: center; border-radius: 8px; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); font-size: .68rem; }
.release-spotlight__list strong, .release-spotlight__list small { display: block; }.release-spotlight__list strong { font-size: .73rem; line-height: 1.35; }.release-spotlight__list small { margin-top: 3px; color: var(--muted); font-size: .62rem; line-height: 1.45; }
.product-suite__heading { max-width: 750px; }.product-suite__heading > p:last-child { max-width: 600px; }
.product-suite__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 42px; }
.product-card { --product-color: #a6d68c; --product-rgb: 166, 214, 140; position: relative; display: flex; min-height: 360px; flex-direction: column; overflow: hidden; padding: 21px; border: 1px solid color-mix(in srgb, var(--product-color) 26%, var(--line)); border-radius: 20px; background: radial-gradient(circle at 96% 4%, rgba(var(--product-rgb), .16), transparent 35%), linear-gradient(145deg, color-mix(in srgb, var(--surface-raised) 90%, #111), var(--surface)); box-shadow: inset 0 1px 0 #fff1, 0 14px 0 -9px color-mix(in srgb, var(--product-color) 15%, var(--surface)), 0 22px 48px -36px #000; transition: transform .28s cubic-bezier(.22, 1, .36, 1), border-color .28s ease, box-shadow .28s ease; }
.product-card::before { position: absolute; inset: 0; z-index: 0; content: ''; pointer-events: none; background-image: radial-gradient(rgba(var(--product-rgb), .35) .65px, transparent .65px); background-size: 5px 5px; mask-image: linear-gradient(135deg, transparent 35%, #000); opacity: .28; }
.product-card:hover { border-color: color-mix(in srgb, var(--product-color) 58%, var(--line)); transform: translateY(-7px); box-shadow: inset 0 1px 0 #fff2, 0 17px 0 -10px color-mix(in srgb, var(--product-color) 29%, var(--surface)), 0 34px 62px -42px #000; }
.product-card > * { position: relative; z-index: 1; }.product-card--versions { --product-color: #9dc9e7; --product-rgb: 157, 201, 231; }.product-card--modpacks { --product-color: #c3d482; --product-rgb: 195, 212, 130; }.product-card--content { --product-color: #d4a6e4; --product-rgb: 212, 166, 228; }.product-card--performance { --product-color: #9ed8c2; --product-rgb: 158, 216, 194; }.product-card--console { --product-color: #8db9d7; --product-rgb: 141, 185, 215; }.product-card--guard { --product-color: #e3c484; --product-rgb: 227, 196, 132; }.product-card--studio { --product-color: #d6a6e1; --product-rgb: 214, 166, 225; }.product-card--social { --product-color: #e99cab; --product-rgb: 233, 156, 171; }.product-card--personal { --product-color: #9ecf91; --product-rgb: 158, 207, 145; }
.product-card__top { display: flex; align-items: center; justify-content: space-between; color: var(--product-color); font: 700 .57rem ui-monospace, monospace; letter-spacing: .1em; }.product-card__top > i { display: grid; width: 33px; height: 33px; place-items: center; border: 1px solid rgba(var(--product-rgb), .3); border-radius: 10px; background: rgba(var(--product-rgb), .1); font-size: .82rem; }
.product-card__visual { display: flex; position: relative; align-items: center; justify-content: center; gap: 8px; height: 135px; margin: 18px 0 2px; overflow: hidden; border: 1px solid rgba(var(--product-rgb), .22); border-radius: 13px; background: linear-gradient(145deg, rgba(var(--product-rgb), .13), rgba(7, 12, 9, .42)); box-shadow: inset 0 1px 0 #fff1; }
.product-card h3 { margin: 21px 0 8px; font-size: 1.27rem; letter-spacing: -.035em; }.product-card p { margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.62; }.product-card a { display: inline-flex; gap: 10px; align-items: center; width: fit-content; margin-top: auto; padding-top: 16px; color: var(--product-color); font-size: .72rem; font-weight: 750; text-decoration: none; }.product-card a span { font-size: 1rem; transition: transform .2s ease; }.product-card a:hover span { transform: translate(3px, -3px); }
.product-card--instances .product-card__visual { align-items: end; padding: 18px; }.product-card--instances .product-card__visual b { width: 28%; height: var(--tile-height); border: 1px solid rgba(var(--product-rgb), .4); border-radius: 7px 7px 2px 2px; background: linear-gradient(#a6d68c55, #172719); }.product-card--instances .product-card__visual b:nth-child(1) { --tile-height: 47%; }.product-card--instances .product-card__visual b:nth-child(2) { --tile-height: 74%; }.product-card--instances .product-card__visual b:nth-child(3) { --tile-height: 58%; }
.product-card--versions .product-card__visual { flex-direction: column; align-items: stretch; padding: 18px; }.product-card--versions .product-card__visual span { padding: 6px 9px; border: 1px solid rgba(var(--product-rgb), .28); border-radius: 6px; color: #dbeaf3; background: #1a2e37; font: 700 .52rem ui-monospace, monospace; letter-spacing: .08em; }.product-card--versions .product-card__visual span:nth-child(2) { margin-left: 22px; }.product-card--versions .product-card__visual span:nth-child(3) { margin-left: 44px; }
.product-card--modpacks .product-card__visual img { position: relative; z-index: 2; object-fit: contain; filter: drop-shadow(0 18px 12px #000a); animation: product-float 4.5s ease-in-out infinite; }.product-card--modpacks .product-card__visual b { position: absolute; width: 175px; height: 175px; border: 1px solid rgba(var(--product-rgb), .32); border-radius: 50%; box-shadow: 0 0 0 26px rgba(var(--product-rgb), .05), 0 0 0 52px rgba(var(--product-rgb), .025); }
.product-card--content .product-card__visual { padding: 18px; flex-wrap: wrap; align-content: center; }.product-card--content .product-card__visual span { width: 38px; height: 38px; border: 1px solid rgba(var(--product-rgb), .35); border-radius: 8px; background: linear-gradient(135deg, rgba(var(--product-rgb), .44), #172019); transform: rotate(9deg); }.product-card--content .product-card__visual span:nth-child(even) { transform: translateY(16px) rotate(-8deg); }
.product-card--performance .product-card__visual { align-items: end; padding: 18px; }.product-card--performance .product-card__visual i { width: 11%; height: var(--bar-height); border-radius: 5px 5px 1px 1px; background: linear-gradient(var(--product-color), #26543c); box-shadow: 0 0 16px rgba(var(--product-rgb), .22); }.product-card--performance .product-card__visual i:nth-child(1) { --bar-height: 27%; }.product-card--performance .product-card__visual i:nth-child(2) { --bar-height: 40%; }.product-card--performance .product-card__visual i:nth-child(3) { --bar-height: 70%; }.product-card--performance .product-card__visual i:nth-child(4) { --bar-height: 49%; }.product-card--performance .product-card__visual i:nth-child(5) { --bar-height: 82%; }.product-card--performance .product-card__visual i:nth-child(6) { --bar-height: 62%; }
.product-card--console .product-card__visual { display: grid; align-content: center; justify-content: stretch; gap: 8px; padding: 16px; }.product-card--console .product-card__visual code { color: #b8d9cb; font: .61rem ui-monospace, monospace; }.product-card--console .product-card__visual code::first-letter { color: var(--product-color); }
.product-card--guard .product-card__visual { flex-direction: column; gap: 6px; }.product-card--guard .product-card__visual > i { color: var(--product-color); font-size: 3.2rem; filter: drop-shadow(0 10px 8px #0009); }.product-card--guard .product-card__visual span { color: var(--product-color); font: 700 .5rem ui-monospace, monospace; letter-spacing: .15em; }
.product-card--studio .product-card__visual { align-items: end; padding: 18px; }.product-card--studio .product-card__visual > i { position: absolute; top: 22px; left: 24px; color: var(--product-color); font-size: 1.4rem; }.product-card--studio .product-card__visual span { width: 29px; height: 29px; border: 1px solid #fff3; border-radius: 6px; background: var(--swatch); }.product-card--studio .product-card__visual span:nth-child(2) { --swatch: #7ab75a; }.product-card--studio .product-card__visual span:nth-child(3) { --swatch: #b9875d; }.product-card--studio .product-card__visual span:nth-child(4) { --swatch: #7d68bb; }.product-card--studio .product-card__visual span:nth-child(5) { --swatch: #e8e7dd; }
.product-card--social .product-card__visual b { display: grid; width: 49px; height: 49px; place-items: center; border: 1px solid rgba(var(--product-rgb), .4); border-radius: 50%; color: #fde5e9; background: #3c2630; font: 700 .72rem ui-monospace, monospace; }.product-card--social .product-card__visual b:nth-child(2) { transform: translateY(-20px); }.product-card--social .product-card__visual b:nth-child(3) { transform: translateY(13px); }
.product-card--personal .product-card__visual { gap: 13px; }.product-card--personal .product-card__visual span { width: 39px; height: 39px; border: 1px solid rgba(var(--product-rgb), .45); border-radius: 50%; background: var(--personal-color); box-shadow: 0 9px 20px #0006; }.product-card--personal .product-card__visual span:nth-child(1) { --personal-color: #9bce86; }.product-card--personal .product-card__visual span:nth-child(2) { --personal-color: #7caecb; }.product-card--personal .product-card__visual span:nth-child(3) { --personal-color: #b18bd4; }
@keyframes product-float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-7px) rotate(2deg); } }
.faq { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: clamp(32px, 7vw, 90px); align-items: start; }.faq__grid { display: grid; gap: 10px; }.faq details { overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: var(--surface); transition: border-color .2s ease, background .2s ease; }.faq details[open] { border-color: color-mix(in srgb, var(--accent) 44%, var(--line)); background: color-mix(in srgb, var(--surface) 92%, var(--accent)); }.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 19px; cursor: pointer; font-size: .85rem; font-weight: 750; list-style: none; }.faq summary::-webkit-details-marker { display: none; }.faq summary span { display: grid; flex: 0 0 24px; height: 24px; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--accent); font-size: 1rem; transition: transform .24s ease, background .24s ease; }.faq details[open] summary span { transform: rotate(45deg); background: var(--soft); }.faq details p { margin: 0; padding: 0 19px 18px; color: var(--muted); font-size: .8rem; line-height: 1.7; }
@media (max-width: 999px) { .release-spotlight, .faq { grid-template-columns: 1fr; }.release-spotlight { gap: 34px; }.product-suite__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .release-spotlight__panel { padding: 13px; border-radius: 18px; }.release-spotlight__window { min-height: 165px; padding: 22px; }.release-spotlight__list, .product-suite__grid { grid-template-columns: 1fr; }.product-card { min-height: 330px; }.faq summary { padding: 15px; font-size: .8rem; }.faq details p { padding: 0 15px 16px; }.release-spotlight__meter { right: 20px; bottom: 19px; transform: scale(.82); transform-origin: bottom right; } }
.platform-showcase { padding-top: 92px; }
.platform-heading { max-width: 760px; }
.platform-heading h2 { font-size: clamp(2.5rem, 5vw, 4.1rem); line-height: 1.05; letter-spacing: -.055em; }
.platform-heading > p:last-child { max-width: 590px; margin-top: 24px; font-size: 1.05rem; }
.feature-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 32px 0 64px; }
.feature-jump a { padding: 9px 14px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font: 600 .66rem ui-monospace, monospace; text-decoration: none; transition: color .2s, background .2s, border-color .2s; }
.feature-jump a:hover { border-color: var(--accent); color: var(--text); background: var(--soft); }
.feature-stack { position: relative; isolation: isolate; padding-bottom: 8px; scroll-margin-top: 100px; }
.feature-stack__origin { display: block; height: 0; }
.showcase-card {
  --card-index: 0;
  --stack-progress: 0;
  --card-tint: 113, 169, 83;
  --card-accent: #b9e494;
  --card-bg: #171d1a;
  --card-text: #f0f3ec;
  --card-muted: #b3beb6;
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: 36px;
  align-items: center;
  min-height: 600px;
  margin-bottom: 60px;
  padding: 42px;
  overflow: clip;
  border: 1px solid rgba(220, 239, 224, .18);
  border-radius: 24px;
  color: var(--card-text);
  background: radial-gradient(ellipse at 85% 4%, rgba(var(--card-tint), .2), transparent 55%), radial-gradient(ellipse at 5% 110%, rgba(var(--card-tint), .16), transparent 65%), var(--card-bg);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 30px 64px -30px rgba(0,0,0,.65);
  scroll-margin-top: calc(var(--stack-top, 90px) + var(--card-index) * 10px);
}
.showcase-card::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(rgba(var(--card-tint), .3) .7px, transparent .7px); background-size: 5px 5px; mask-image: linear-gradient(115deg, transparent 20%, #000); opacity: .32; }
.showcase-card--console { --card-tint: 101, 169, 187; --card-accent: #a4d6e1; }
.showcase-card--social { --card-tint: 102, 180, 145; --card-accent: #9de2be; }
.showcase-card--studio { --card-tint: 174, 144, 197; --card-accent: #d2b9e8; }
.showcase-card--guard { --card-tint: 174, 173, 111; --card-accent: #d4d79c; }
.showcase-card--desktop { --card-tint: 125, 157, 190; --card-accent: #abc7e5; }
.feature-stack--active .showcase-card { position: sticky; top: var(--card-top); margin-bottom: 150px; transform: perspective(1600px) rotateX(calc(var(--stack-progress) * -2deg)) scale(calc(1 - var(--stack-progress) * .055)); transform-origin: 50% 0; }
.feature-stack .showcase-card:last-child { margin-bottom: 0; }
.showcase-copy { position: relative; z-index: 3; min-width: 0; }
.showcase-kicker { display: flex; align-items: center; gap: 12px; font: 600 .57rem ui-monospace, monospace; letter-spacing: .1em; color: var(--card-accent); }
.showcase-icon { display: grid; flex: 0 0 44px; height: 44px; place-items: center; border: 1px solid rgba(var(--card-tint), .35); border-radius: 14px; background: linear-gradient(140deg, rgba(var(--card-tint), .2), rgba(var(--card-tint), .04)); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); font-size: 1rem; }
.showcase-number { margin-left: auto; white-space: nowrap; color: var(--card-muted); opacity: .8; }
.showcase-copy h3 { margin: 26px 0 18px; font-size: clamp(2rem, 3.4vw, 2.9rem); line-height: 1.08; font-weight: 650; letter-spacing: -.045em; text-wrap: balance; }
.showcase-copy > p { margin: 0; max-width: 460px; color: var(--card-muted); font-size: .91rem; line-height: 1.75; }
.showcase-points { display: grid; gap: 11px; list-style: none; padding: 0; margin: 26px 0 0; }
.showcase-points li { position: relative; padding-left: 27px; font-size: .76rem; line-height: 1.55; color: var(--card-text); }
.showcase-points li::before { content: '✓'; display: grid; position: absolute; top: 1px; left: 0; place-items: center; width: 17px; height: 17px; border-radius: 50%; border: 1px solid rgba(var(--card-tint), .3); background: rgba(var(--card-tint), .08); color: var(--card-accent); font-size: .63rem; }
.showcase-link { display: inline-flex; align-items: center; gap: 26px; min-height: 42px; margin-top: 25px; color: var(--card-text); font-size: .8rem; font-weight: 650; text-decoration: none; border-bottom: 1px solid rgba(var(--card-tint), .6); }
.showcase-link span { color: var(--card-accent); font-size: 1.2rem; transition: transform .2s; }
.showcase-link:hover span { transform: translate(3px, -3px); }
.showcase-note { display: block; max-width: 390px; margin-top: 12px; color: var(--card-muted); font-size: .64rem; line-height: 1.5; }
.showcase-visual { position: relative; min-width: 0; height: 436px; margin: 0; perspective: 1400px; color: #edf2ee; font-size: 13px; }
.showcase-visual > div { position: relative; height: 100%; }
.showcase-visual figcaption { position: absolute; bottom: -27px; left: 20px; color: var(--card-muted); font: 500 .52rem ui-monospace, monospace; letter-spacing: .16em; }
.preview-window { position: absolute; top: 18px; left: 18px; width: calc(100% + 45px); border: 1px solid rgba(215,235,222,.22); border-radius: 15px; background: #0e1412; overflow: hidden; box-shadow: 0 30px 70px -20px rgba(0,0,0,.7), 0 0 0 6px rgba(215,235,222,.035), inset 0 1px 0 rgba(255,255,255,.1); transform: perspective(1200px) rotateY(-6deg) rotateX(3deg); transform-origin: left center; }
.preview-titlebar { display: flex; align-items: center; gap: 15px; height: 48px; padding: 0 18px; background: linear-gradient(#202824, #1a211d); border-bottom: 1px solid #303a33; color: #8a9a90; font: 500 .49rem ui-monospace, monospace; letter-spacing: .09em; white-space: nowrap; }
.preview-brand { display: inline-flex; align-items: center; gap: 8px; color: #dde7de; font-weight: 700; }
.preview-brand i { color: var(--card-accent); }
.preview-dots { margin-left: auto; font-size: 1rem; letter-spacing: .15em; }
.preview-sidebar { display: flex; flex-direction: column; gap: 18px; align-items: center; padding: 22px 0; border-right: 1px solid #28322b; color: #788b7b; }
.preview-sidebar > i, .studio-toolrail > i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 7px; }
.preview-sidebar .is-selected, .studio-toolrail .is-selected { background: rgba(138,189,105,.15); color: #b5df98; }
.preview-float, .guard-check { position: absolute; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 15px 18px; border: 1px solid rgba(200,227,211,.25); border-radius: 12px; background: linear-gradient(120deg,#293830,#19231e); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 20px 38px -14px rgba(0,0,0,.65); }
.preview-float { bottom: 6px; left: -5px; width: min(92%, 390px); transform: rotate(-2deg); }
.preview-float strong, .guard-check strong { display: block; font-size: .77rem; font-weight: 600; }
.preview-float small, .guard-check small { display: block; margin-top: 5px; color: #a9bdb0; font-size: .59rem; line-height: 1.5; }
.preview-float > i { margin-left: auto; color: var(--card-accent); font-size: .9rem; }
.float-icon { display: grid; flex: 0 0 36px; height: 36px; place-items: center; border-radius: 9px; background: rgba(var(--card-tint),.12); color: var(--card-accent); font-size: 1rem; }
.instance-preview { display: grid; grid-template-columns: 52px 1fr; min-height: 342px; }
.instance-preview__content { padding: 22px; }
.preview-section-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.preview-section-title strong { font-size: 1.05rem; letter-spacing: -.025em; }
.preview-section-title > span { color: #92a297; font: .44rem ui-monospace, monospace; }
.world-preview { position: relative; height: 137px; overflow: hidden; border: 1px solid #42523a; border-radius: 9px; background: linear-gradient(160deg,#445a3d,#192a24 65%); }
.world-landscape { position: absolute; inset: 0; overflow: hidden; }
.world-landscape::before { content: ''; position: absolute; width: 35px; height: 35px; right: 21%; top: 20px; background: #bed890; box-shadow: 0 0 65px rgba(196,233,154,.2); }
.world-landscape span { position: absolute; bottom: -12px; right: -5%; width: 84%; height: 85%; background: #5b764b; clip-path: polygon(0 65%,15% 65%,15% 40%,30% 40%,30% 0,50% 0,50% 25%,65% 25%,65% 45%,80% 45%,80% 20%,100% 20%,100% 100%,0 100%); }
.world-landscape span:nth-child(2) { transform: translate(12%,35%); background: #3d5b35; }
.world-landscape span:nth-child(3) { transform: translate(30%,63%); background: #1e3827; }
.world-preview::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg,rgba(13,25,17,.9),transparent 85%); }
.world-preview__label { position: absolute; z-index: 1; left: 18px; bottom: 23px; display: grid; gap: 7px; }
.world-preview__label strong { font-size: 1.05rem; letter-spacing: -.03em; }
.world-preview__label span { color: #c5d6bd; font: .48rem ui-monospace, monospace; letter-spacing: .08em; }
.world-preview__badge { position: absolute; z-index: 1; right: 10px; top: 10px; padding: 4px 7px; background: #152418b8; border: 1px solid #739068; border-radius: 4px; font: .45rem ui-monospace, monospace; color: #d2e8c0; }
.instance-tiles { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; margin-top: 12px; }
.instance-tiles > div { display: grid; grid-template-columns: 27px 1fr; column-gap: 7px; padding: 12px 9px; border: 1px solid #303c33; border-radius: 7px; background: #19211b; }
.instance-tile-icon { grid-row: span 2; align-self: center; color: #94bd7b; font-size: 1.15rem; }
.instance-tiles strong { font-size: .66rem; font-weight: 600; }
.instance-tiles small { color: #91a58f; font-size: .55rem; }
.console-preview { padding: 0 23px 20px; }
.console-tabs { display: flex; gap: 25px; height: 48px; align-items: center; border-bottom: 1px solid #28332d; color: #82968c; font-size: .59rem; }
.console-tabs .is-selected { align-self: stretch; display: grid; align-items: center; border-bottom: 2px solid var(--card-accent); color: #e2f0e9; }
.console-stage { display: flex; align-items: center; gap: 15px; padding: 15px 0; border-bottom: 1px solid #24332b; }
.console-stage > span { align-self: flex-start; padding-top: 2px; color: #91b6bc; font: .58rem ui-monospace, monospace; }
.console-stage strong { display: block; font: 500 .69rem ui-monospace, monospace; }
.console-stage small { display: block; margin-top: 6px; color: #849c8f; font: .55rem ui-monospace, monospace; }
.console-stage > i { margin-left: auto; color: #5f8076; }
.console-tools { display: flex; gap: 8px; margin-top: 18px; color: #bfd4c8; font-size: .56rem; }
.console-tools span { display: inline-flex; gap: 6px; padding: 5px 8px; border: 1px solid #34473b; border-radius: 4px; }
.visual-console .preview-window { top: -2px; }
.log-float { bottom: -4px; left: 9px; }
.social-preview { display: grid; grid-template-columns: 160px 1fr; min-height: 334px; }
.community-rail { display: flex; flex-direction: column; padding: 20px 12px; background: #151f19; border-right: 1px solid #2f3c33; }
.community-emblem { display: grid; width: 38px; height: 38px; place-items: center; margin-bottom: 12px; border: 1px solid #4c7653; border-radius: 11px; background: #213c2b; color: #a9d899; font-size: 1.1rem; }
.community-rail > strong { font-size: .78rem; }
.community-rail > small { margin: 6px 0 24px; color: #809887; font: .4rem ui-monospace, monospace; }
.community-channel { padding: 8px 9px; border-radius: 5px; color: #8d9f92; font-size: .6rem; }
.community-channel.is-selected { color: #c0ddc1; background: #26372a; }
.community-role { margin-top: auto; padding-top: 22px; color: #8daa98; font-size: .47rem; }
.community-preview { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; text-align: center; background: radial-gradient(ellipse at center, #223d2d, #101814 74%); }
.preview-label { color: #89a694; font: .4rem ui-monospace, monospace; letter-spacing: .1em; }
.community-orbit { display: flex; padding: 30px 0 20px; }
.community-orbit > span { display: grid; width: 45px; height: 45px; margin-left: -6px; place-items: center; border: 1px solid #526e59; border-radius: 50%; background: linear-gradient(130deg,#364d3e,#1a2821); color: #b2d6bc; transform: rotate(-12deg); }
.community-orbit > span:nth-child(2) { transform: translateY(-8px); color: #d7dcb2; }
.community-orbit > span:last-child { transform: rotate(12deg); color: #ddb5c4; }
.community-preview > strong { font-size: 1.5rem; line-height: 1.18; letter-spacing: -.04em; font-weight: 550; }
.community-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; margin-top: 20px; }
.community-tags span { padding: 4px 7px; border: 1px solid #375640; border-radius: 20px; color: #a2bfae; font-size: .44rem; }
.profile-float { bottom: 10px; left: -14px; }
.profile-float img { flex: 0 0 46px; width: 46px; height: 46px; object-fit: cover; border-radius: 9px; background: #101a14; }
.presence-dot { display: inline-block; height: 5px; width: 5px; margin-right: 3px; border-radius: 50%; background: #97d99c; }
.profile-mini-badge { margin-left: auto; padding: 4px; border: 1px solid #477250; border-radius: 5px; color: #9ad58e; font: .6rem ui-monospace, monospace; }
.studio-preview { display: grid; grid-template-columns: 47px 1fr 55px; min-height: 343px; }
.studio-toolrail { display: flex; flex-direction: column; gap: 12px; padding: 16px 8px; border-right: 1px solid #34333b; color: #91a095; }
.studio-canvas { position: relative; display: grid; place-items: center; overflow: hidden; background: radial-gradient(ellipse at 50% 50%,#33373d,transparent 72%), #1a2020; }
.studio-canvas::before { position: absolute; content: ''; bottom: -60px; left: -50%; height: 240px; width: 200%; background-image: linear-gradient(#58615930 1px,transparent 1px),linear-gradient(90deg,#58615930 1px,transparent 1px); background-size: 25px 25px; transform: perspective(200px) rotateX(62deg); }
.studio-grid-label { position: absolute; top: 15px; left: 14px; color: #a5afa6; font: .44rem ui-monospace, monospace; letter-spacing: .15em; }
.skin-model { --skin-unit: 8px; position: relative; width: calc(16 * var(--skin-unit)); height: calc(32 * var(--skin-unit)); margin-top: 20px; transform-style: preserve-3d; transform: rotateX(-8deg) rotateY(-28deg); }
.skin-part { position: absolute; left: calc(var(--part-x) * var(--skin-unit)); top: calc(var(--part-y) * var(--skin-unit)); width: calc(var(--part-width) * var(--skin-unit)); height: calc(var(--part-height) * var(--skin-unit)); transform-style: preserve-3d; }
.skin-face { position: absolute; left: 50%; top: 50%; width: calc(var(--part-width) * var(--skin-unit)); height: calc(var(--part-height) * var(--skin-unit)); background-image: url('./assets/steve.png'); background-repeat: no-repeat; background-size: calc(64 * var(--skin-unit)) calc(64 * var(--skin-unit)); background-position: calc(-1 * var(--uv-x) * var(--skin-unit)) calc(-1 * var(--uv-y) * var(--skin-unit)); image-rendering: pixelated; backface-visibility: hidden; }
.skin-face--front { transform: translate(-50%, -50%) translateZ(calc(var(--part-depth) * var(--skin-unit) / 2)); }
.skin-face--back { transform: translate(-50%, -50%) rotateY(180deg) translateZ(calc(var(--part-depth) * var(--skin-unit) / 2)); filter: brightness(.7); }
.skin-face--right, .skin-face--left { width: calc(var(--part-depth) * var(--skin-unit)); filter: brightness(.78); }
.skin-face--right { transform: translate(-50%, -50%) rotateY(90deg) translateZ(calc(var(--part-width) * var(--skin-unit) / 2)); }
.skin-face--left { transform: translate(-50%, -50%) rotateY(-90deg) translateZ(calc(var(--part-width) * var(--skin-unit) / 2)); }
.skin-face--top, .skin-face--bottom { height: calc(var(--part-depth) * var(--skin-unit)); }
.skin-face--top { transform: translate(-50%, -50%) rotateX(90deg) translateZ(calc(var(--part-height) * var(--skin-unit) / 2)); filter: brightness(1.08); }
.skin-face--bottom { transform: translate(-50%, -50%) rotateX(-90deg) translateZ(calc(var(--part-height) * var(--skin-unit) / 2)); filter: brightness(.6); }
.skin-cape { position: absolute; left: calc(3 * var(--skin-unit)); top: calc(8 * var(--skin-unit)); width: calc(10 * var(--skin-unit)); height: calc(16 * var(--skin-unit)); background: url('./assets/keyverse-cape.png') calc(-1 * var(--skin-unit)) calc(-1 * var(--skin-unit)) / calc(64 * var(--skin-unit)) calc(32 * var(--skin-unit)) no-repeat; image-rendering: pixelated; transform: translateZ(calc(-3 * var(--skin-unit))) rotateX(16deg); transform-origin: top; }
.studio-axis { display: flex; gap: 8px; position: absolute; right: 12px; bottom: 13px; font: .6rem ui-monospace, monospace; }
.studio-axis span:first-child { color: #d98f8a; }.studio-axis span:nth-child(2) { color: #a7cc94; }.studio-axis span:last-child { color: #8faedd; }
.studio-palette { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 20px 0; border-left: 1px solid #343b35; background: #161d18; }
.studio-palette > span { color: #91a18f; font: .4rem ui-monospace, monospace; }
.studio-palette > i { width: 21px; height: 21px; background: var(--swatch); border: 1px solid #ffffff26; border-radius: 5px; }
.skin-float { bottom: 4px; left: -10px; background: linear-gradient(120deg,#35323e,#202329); }
.uv-swatch { flex: 0 0 36px; height: 36px; border-radius: 4px; background: #26322a url('./assets/steve.png') center / contain no-repeat; image-rendering: pixelated; border: 1px solid #71856a; }
.guard-orbit { position: absolute; display: grid; place-items: center; width: 390px; height: 390px; left: 18%; top: -5px; }
.guard-orbit > span { position: absolute; inset: 0; border: 1px solid rgba(196,201,155,.11); border-radius: 50%; }
.guard-orbit > span:nth-child(2) { inset: 37px; border-style: dashed; }
.guard-orbit > span:nth-child(3) { inset: 74px; background: radial-gradient(#abb17e24,transparent 70%); }
.guard-core { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-bottom: 30px; color: #d9ddb7; }
.guard-core > i { font-size: 5rem; color: #c0c89b; filter: drop-shadow(0 10px 15px #050a06); }
.guard-core > strong { font: 600 .65rem ui-monospace, monospace; letter-spacing: .2em; }
.guard-core > small { color: #7c8c70; font: .5rem ui-monospace, monospace; letter-spacing: .2em; }
.guard-check { width: 310px; background: linear-gradient(120deg,#2c3328,#1b231c); }
.guard-check--archives { top: 13px; left: 1%; transform: rotate(-5deg); }
.guard-check--hash { top: 251px; left: 2%; transform: rotate(3deg); }
.guard-check--client { top: 338px; right: -20px; transform: rotate(-2deg); }
.guard-check__number { margin-left: auto; color: #8e9b7e; font: .57rem ui-monospace, monospace; }
.hud-preview { position: relative; min-height: 344px; overflow: hidden; background: radial-gradient(ellipse at 60% 20%,#394846,transparent 75%),#162520; }
.hud-horizon { position: absolute; inset: 0; background: linear-gradient(180deg,transparent,#0b1f15a0),repeating-linear-gradient(0deg,transparent 0 40px,#6b976624 40px 41px),repeating-linear-gradient(90deg,transparent 0 40px,#6b976624 40px 41px); transform: perspective(300px) rotateX(55deg) scale(1.8); transform-origin: center 80%; }
.hud-label { position: absolute; left: 20px; top: 18px; color: #8caba0; font: .45rem ui-monospace, monospace; letter-spacing: .09em; }
.hud-module { position: absolute; padding: 14px; border: 1px solid #7da09470; border-radius: 7px; background: #112019d9; box-shadow: 0 10px 20px #040b0750; }
.hud-module strong { display: block; font-size: .7rem; font-weight: 550; }
.hud-module > span, .hud-module > small { display: block; margin-top: 7px; color: #93afa0; font: .46rem ui-monospace, monospace; }
.hud-module > i { display: block; margin-bottom: 9px; color: #b0d3c0; }
.hud-module--performance { top: 55px; left: 22px; width: 130px; }
.hud-module--position { bottom: 35px; left: 22px; width: 190px; }
.hud-module--keys { top: 75px; right: 24px; text-align: center; }
.key-row { display: flex; justify-content: center; gap: 4px; margin-bottom: 4px; }
.key-row span { display: grid; place-items: center; width: 29px; height: 29px; border: 1px solid #668b70; border-radius: 4px; background: #294c343d; font: .67rem ui-monospace, monospace; }
.key-row:first-child span { background: #74996b; border-color: #a5c995; color: #0c1a0f; }
.hud-crosshair { position: absolute; top: 47%; left: 51%; color: #dbebc3; font: 300 24px monospace; }
.hud-corner { position: absolute; width: 10px; height: 10px; border: 1px solid #c7e6b0; }
.hud-corner--one { top: 50px; left: 17px; border-right: 0; border-bottom: 0; }.hud-corner--two { bottom: 30px; left: 207px; border-top: 0; border-left: 0; }
.desktop-float { bottom: 0; left: 8px; }
.platform-footnote { display: flex; gap: 12px; max-width: 870px; margin: 35px auto 0; color: var(--muted); font-size: .73rem; line-height: 1.7; }
.platform-footnote > i { padding-top: 4px; color: var(--accent); }.platform-footnote p { margin: 0; }.platform-footnote a { text-underline-offset: 3px; }
[data-theme="light"] .showcase-card { --card-bg: #f9faf6; --card-text: #213529; --card-muted: #566759; --card-accent: #466f32; border-color: #9caf9c66; background: radial-gradient(ellipse at 85% 4%,rgba(var(--card-tint),.2),transparent 55%),radial-gradient(ellipse at 5% 110%,rgba(var(--card-tint),.11),transparent 65%),var(--card-bg); box-shadow: inset 0 1px 0 #fff,0 25px 55px -35px #1c36274d; }
[data-theme="light"] .showcase-visual { --card-accent: #bad7ac; }
@media (max-width: 1100px) {
  .showcase-card { padding: 32px; gap: 24px; }
  .showcase-kicker { gap: 8px; font-size: .49rem; }
  .showcase-icon { flex-basis: 36px; height: 36px; border-radius: 11px; }
  .showcase-copy h3 { font-size: 2.35rem; }
  .showcase-copy > p { font-size: .85rem; }
  .showcase-points li { font-size: .7rem; }
  .showcase-visual { height: 412px; }
  .preview-titlebar > span:nth-child(2) { display: none; }
  .preview-section-title > span { display: none; }
  .community-rail { padding-inline: 10px; }
  .social-preview { grid-template-columns: 135px 1fr; }
  .guard-orbit { left: 0; }
  .guard-check { width: 280px; }
  .guard-check--hash { top: 235px; }.guard-check--client { top: 325px; right: -8px; }
  .preview-float { padding: 13px; gap: 8px; }
  .preview-float strong { font-size: .7rem; }.preview-float small { font-size: .55rem; }
}
@media (max-width: 999px) {
  .showcase-card { grid-template-columns: 1fr; min-height: 0; padding: 40px; margin-bottom: 28px; gap: 40px; }
  .showcase-copy { max-width: 650px; }
  .showcase-copy h3 { font-size: clamp(2.2rem,5vw,3rem); }
  .showcase-copy > p { max-width: 550px; font-size: .95rem; }
  .showcase-points { grid-template-columns: 1fr 1fr; gap: 15px 25px; }.showcase-points li { font-size: .77rem; }
  .showcase-kicker { font-size: .6rem; }
  .showcase-visual { width: 100%; max-width: 600px; height: 436px; margin-inline: auto; margin-bottom: 27px; }
  .preview-window { width: calc(100% - 30px); transform: perspective(1200px) rotateY(-3deg) rotateX(2deg); }
  .preview-float { left: 0; }
  .guard-orbit { left: 15%; }.guard-check--client { right: 15px; }
  .preview-titlebar > span:nth-child(2) { display: inline; }
  .preview-section-title > span { display: inline; }
  .social-preview { grid-template-columns: 160px 1fr; }
}
@media (max-width: 620px) {
  .platform-showcase { padding-top: 54px; }
  .platform-heading > p:last-child { font-size: .93rem; }
  .feature-jump { gap: 6px; margin-bottom: 34px; }.feature-jump a { padding: 8px 11px; font-size: .58rem; }
  .showcase-card { padding: 25px 22px; border-radius: 18px; gap: 26px; }
  .showcase-copy h3 { font-size: 2.25rem; margin-top: 24px; }
  .showcase-copy > p { font-size: .87rem; }
  .showcase-kicker { gap: 9px; font-size: .46rem; letter-spacing: .07em; }
  .showcase-number { font-size: .48rem; }
  .showcase-points { grid-template-columns: 1fr; gap: 12px; margin-top: 24px; }
  .showcase-points li { font-size: .76rem; }
  .showcase-link { margin-top: 20px; }
  .showcase-visual { height: 363px; margin-bottom: 28px; }
  .showcase-visual figcaption { left: 0; bottom: -24px; font-size: .43rem; letter-spacing: .08em; }
  .preview-window { width: 100%; left: 0; top: 0; transform: none; border-radius: 10px; }
  .preview-titlebar { height: 39px; padding: 0 12px; font-size: .43rem; }
  .preview-titlebar > span:nth-child(2) { display: none; }
  .preview-brand img { width: 15px; height: 15px; }
  .preview-section-title > span { display: none; }
  .instance-preview { grid-template-columns: 35px 1fr; min-height: 280px; }
  .preview-sidebar { gap: 13px; padding-top: 12px; font-size: .6rem; }
  .preview-sidebar > i { width: 25px; height: 25px; }
  .instance-preview__content { padding: 13px 10px; }
  .preview-section-title strong { font-size: .8rem; }
  .world-preview { height: 131px; }
  .world-preview__label { left: 10px; bottom: 16px; }
  .world-preview__label strong { font-size: .8rem; }.world-preview__label span { font-size: .37rem; }
  .instance-tiles { gap: 4px; }.instance-tiles > div { grid-template-columns: 1fr; gap: 5px; padding: 8px 5px; }.instance-tiles strong { font-size: .49rem; }.instance-tiles small { font-size: .42rem; }.instance-tile-icon { grid-row: auto; font-size: .8rem; }
  .preview-float { width: 100%; bottom: 0; padding: 12px 10px; gap: 9px; border-radius: 9px; transform: rotate(-1deg); }
  .preview-float strong { font-size: .64rem; }.preview-float small { font-size: .5rem; }
  .float-icon { flex-basis: 30px; height: 30px; font-size: .8rem; }
  .console-preview { padding: 0 12px 12px; }.console-tabs { height: 39px; gap: 15px; font-size: .49rem; }
  .console-stage { padding: 12px 0; gap: 9px; }.console-stage strong { font-size: .54rem; }.console-stage small { font-size: .42rem; margin-top: 4px; }.console-stage > i { font-size: .65rem; }
  .console-tools { margin-top: 12px; font-size: .44rem; }.console-tools span { padding: 4px 6px; }
  .social-preview { grid-template-columns: 94px 1fr; min-height: 287px; }
  .community-rail { padding: 14px 7px; }.community-rail > strong { font-size: .65rem; }.community-rail > small { font-size: .34rem; line-height: 1.7; margin-bottom: 13px; }
  .community-channel { font-size: .44rem; padding: 7px 4px; }.community-role { font-size: .35rem; }
  .community-preview { padding: 14px 10px; }.preview-label { font-size: .34rem; line-height: 1.6; }
  .community-preview > strong { font-size: 1.14rem; }.community-orbit { padding: 22px 0 17px; }.community-orbit > span { width: 34px; height: 34px; font-size: .66rem; }
  .community-tags { margin-top: 12px; }.community-tags span { font-size: .36rem; padding: 3px 5px; }
  .profile-float img { flex-basis: 36px; width: 36px; height: 36px; }.profile-mini-badge { display: none; }
  .studio-preview { min-height: 288px; grid-template-columns: 33px 1fr 37px; }.studio-toolrail { padding: 12px 4px; gap: 10px; font-size: .68rem; }.studio-toolrail > i { width: 24px; height: 24px; }
  .studio-palette { gap: 12px; }.studio-palette > span { font-size: .3rem; }.studio-palette > i { width: 17px; height: 17px; }.studio-grid-label { font-size: .36rem; }
  .skin-model { --skin-unit: 6.5px; }
  .skin-float { bottom: -3px; }.uv-swatch { flex-basis: 30px; height: 30px; }
  .guard-orbit { width: 280px; height: 280px; left: calc(50% - 140px); top: 16px; }.guard-core { padding-bottom: 0; }.guard-core > i { font-size: 3.6rem; }
  .guard-check { width: 88%; gap: 8px; padding: 11px; }.guard-check strong { font-size: .65rem; }.guard-check small { font-size: .48rem; }.guard-check--archives { top: 0; left: 0; }.guard-check--hash { top: 227px; left: 0; }.guard-check--client { top: 300px; right: 0; }.guard-check__number { font-size: .5rem; }
  .visual-guard { height: 384px; }
  .hud-preview { min-height: 287px; }.hud-label { left: 12px; font-size: .36rem; }
  .hud-module { padding: 10px; }.hud-module strong { font-size: .58rem; }.hud-module > span, .hud-module > small { font-size: .35rem; }
  .hud-module--performance { left: 12px; width: 103px; top: 43px; }.hud-module--position { left: 12px; bottom: 29px; width: 165px; }.hud-module--keys { top: 62px; right: 9px; }
  .key-row span { width: 20px; height: 23px; font-size: .55rem; }.hud-corner--one { top: 38px; left: 7px; }.hud-corner--two { bottom: 24px; left: 172px; }
  .platform-footnote { margin-top: 25px; font-size: .68rem; }
}
@media (prefers-reduced-motion: reduce) {
  .feature-stack--active .showcase-card { position: relative; top: auto; transform: none; margin-bottom: 28px; }
  .preview-window, .preview-float, .guard-check { transform: none; }
}

.launcher-screenshot { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: 50px; align-items: center; margin: 30px auto 90px; padding: 42px; border: 1px solid var(--line); border-radius: 28px; background: radial-gradient(ellipse at 95% 5%, rgba(122, 168, 107, .15), transparent 53%), var(--surface); box-shadow: 0 30px 70px -52px #000; }
.launcher-screenshot__copy h2 { max-width: 500px; margin: 12px 0 18px; font-size: clamp(2rem, 3.5vw, 3.45rem); line-height: 1.02; letter-spacing: -.055em; }
.launcher-screenshot__copy > p:not(.eyebrow) { max-width: 460px; color: var(--muted); line-height: 1.75; }
.launcher-screenshot__copy .text-link { display: inline-flex; margin-top: 12px; }
.launcher-screenshot__frame { position: relative; margin: 0; min-width: 0; border: 1px solid rgba(174, 208, 164, .28); border-radius: 18px; overflow: hidden; background: #090d0b; box-shadow: 0 24px 50px -35px #000; }
.launcher-screenshot__frame::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(135deg, rgba(231, 255, 222, .12), transparent 28%); }
.launcher-screenshot__frame img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.launcher-screenshot__frame figcaption { position: absolute; right: 16px; bottom: 14px; z-index: 1; padding: 6px 8px; border: 1px solid rgba(225, 248, 218, .18); border-radius: 5px; background: rgba(6, 12, 8, .72); color: #bed0bb; font: .45rem ui-monospace, monospace; letter-spacing: .1em; }
@media (max-width: 999px) { .launcher-screenshot { grid-template-columns: 1fr; gap: 30px; padding: 34px; }.launcher-screenshot__copy { max-width: 650px; }.launcher-screenshot__frame { max-width: 760px; width: 100%; margin-inline: auto; } }
@media (max-width: 620px) { .launcher-screenshot { margin-bottom: 58px; padding: 25px 20px; border-radius: 20px; }.launcher-screenshot__copy h2 { font-size: 2.2rem; }.launcher-screenshot__frame { border-radius: 12px; }.launcher-screenshot__frame figcaption { right: 9px; bottom: 9px; font-size: .36rem; } }

.launcher-demo { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); gap: 48px; align-items: center; margin: 88px auto; }
.launcher-demo__intro h2 { max-width: 440px; margin: 12px 0 18px; font-size: clamp(2.3rem, 4vw, 3.8rem); line-height: 1.02; letter-spacing: -.06em; }.launcher-demo__intro > p:not(.eyebrow) { max-width: 425px; color: var(--muted); line-height: 1.75; }.launcher-demo__hint { display: inline-flex; align-items: center; gap: 8px; margin-top: 19px; color: var(--accent); font: 700 .62rem ui-monospace, monospace; letter-spacing: .07em; }
.launcher-demo__shell { overflow: hidden; border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line)); border-radius: 20px; background: #0b120d; box-shadow: inset 0 1px #fff1, 0 32px 70px -48px #000; color: #e4eadf; font-family: Inter, system-ui, sans-serif; }.launcher-demo__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 42px; padding: 0 14px; border-bottom: 1px solid #ffffff13; color: #9db09f; font: 700 .48rem ui-monospace, monospace; letter-spacing: .1em; }.launcher-demo__bar span:first-child { display: inline-flex; align-items: center; gap: 7px; color: #e7efe1; }.launcher-demo__bar img { object-fit: contain; }.launcher-demo__body { display: grid; grid-template-columns: 48px minmax(0, 1fr) 170px; min-height: 408px; }.launcher-demo__rail { display: grid; align-content: start; gap: 8px; padding: 13px 8px; border-right: 1px solid #ffffff10; background: #0a100b; }.launcher-demo__rail button { display: grid; width: 31px; height: 31px; place-items: center; border: 1px solid transparent; border-radius: 8px; background: transparent; color: #90a692; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }.launcher-demo__rail button:hover,.launcher-demo__rail button.is-active { border-color: #a6d88a55; background: #a6d88a18; color: #b9e89e; }.launcher-demo__workspace { min-width: 0; padding: 20px; }.launcher-demo__headline { display: flex; align-items: start; justify-content: space-between; gap: 12px; }.launcher-demo__headline small,.launcher-demo__hero small { display: block; color: #8da58e; font: 700 .42rem ui-monospace, monospace; letter-spacing: .11em; }.launcher-demo__headline strong { display: block; margin-top: 6px; font-size: 1.05rem; letter-spacing: -.04em; }.launcher-demo__headline > div > span { display: block; margin-top: 4px; color: #8ea18f; font-size: .56rem; }.launcher-demo__state { padding: 5px 7px; border: 1px solid #a6d88a55; border-radius: 999px; color: #b9e89e; background: #a6d88a12; font: 700 .42rem ui-monospace, monospace; letter-spacing: .08em; }.launcher-demo__state.is-running { color: #d8f1cc; border-color: #b9e89e; background: #7cb7682e; }.launcher-demo__hero { display: grid; grid-template-columns: 112px 1fr; gap: 18px; align-items: center; min-height: 170px; margin-top: 18px; padding: 17px; border: 1px solid #ffffff12; border-radius: 13px; background: radial-gradient(circle at 19% 50%,#9ac87725,transparent 28%),#0e170f; }.launcher-demo__cube { position: relative; width: 68px; height: 68px; margin: auto; transform: rotateX(58deg) rotateZ(45deg); filter: drop-shadow(0 15px 11px #0009); }.launcher-demo__cube span { position: absolute; inset: 0; border: 1px solid #d4f2b677; background: linear-gradient(135deg,#b7dd8e,#517a3d); }.launcher-demo__cube span:nth-child(2) { background: linear-gradient(135deg,#5e8646,#263b27); transform: translateY(34px) rotateX(-90deg); transform-origin: top; }.launcher-demo__cube span:nth-child(3) { background: linear-gradient(135deg,#42642f,#1e3023); transform: translateX(34px) rotateY(90deg); transform-origin: left; }.launcher-demo__hero h3 { margin: 6px 0; font-size: 1rem; letter-spacing: -.035em; }.launcher-demo__hero p { margin: 0; color: #9fb0a0; font-size: .61rem; line-height: 1.55; }.launcher-demo__versions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }.launcher-demo__versions button { padding: 4px 6px; border: 1px solid #ffffff1c; border-radius: 5px; background: #101a11; color: #9db09e; font: 700 .43rem ui-monospace, monospace; cursor: pointer; }.launcher-demo__versions button.is-selected { border-color: #b9e89e9a; color: #d9f4cc; background: #a6d88a26; }.launcher-demo__play { display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: 100%; margin-top: 11px; padding: 9px; border: 1px solid #c8efa8; border-radius: 7px; background: #a7d88c; color: #102011; cursor: pointer; font-size: .64rem; font-weight: 800; transition: filter .2s, transform .2s; }.launcher-demo__play:hover { filter: brightness(1.06); transform: translateY(-1px); }.launcher-demo__play.is-running { background: #b8e99c; }.launcher-demo__instances { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 7px; margin-top: 14px; }.launcher-demo__instances button { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 9px 7px; border: 1px solid #ffffff16; border-radius: 8px; background: #0c140d; color: #b6c4b7; text-align: left; cursor: pointer; }.launcher-demo__instances button:hover,.launcher-demo__instances button.is-selected { border-color: #b9e89e75; background: #a6d88a14; }.launcher-demo__instances i { color: #a8d98b; }.launcher-demo__instances span { overflow: hidden; font-size: .5rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }.launcher-demo__instances small { display: block; margin-top: 3px; color: #8ea18f; font-size: .42rem; font-weight: 500; }.launcher-demo__console { display: flex; flex-direction: column; min-width: 0; padding: 13px 11px; border-left: 1px solid #ffffff10; background: #090e0a; }.launcher-demo__console > div { display: flex; align-items: center; justify-content: space-between; color: #9fb4a0; font: 700 .43rem ui-monospace, monospace; letter-spacing: .1em; }.launcher-demo__console button { border: 0; background: transparent; color: #9fb4a0; cursor: pointer; }.launcher-demo__console ol { display: grid; align-content: start; gap: 8px; flex: 1; margin: 13px 0; padding: 0; list-style: none; overflow: hidden; }.launcher-demo__console li { color: #a8b9aa; font: .48rem/1.35 ui-monospace, monospace; }.launcher-demo__console li i { display: inline-block; width: 4px; height: 4px; margin: 0 5px 1px 0; border-radius: 50%; background: #a9df8e; }.launcher-demo__console p { margin: 0; padding-top: 9px; border-top: 1px solid #ffffff12; color: #769477; font: .46rem/1.45 ui-monospace, monospace; }
@media (max-width: 999px) { .launcher-demo { grid-template-columns: 1fr; gap: 30px; }.launcher-demo__intro { max-width: 620px; }.launcher-demo__shell { max-width: 800px; width: 100%; } }
@media (max-width: 620px) { .launcher-demo { margin: 58px auto; }.launcher-demo__body { grid-template-columns: 38px minmax(0,1fr); }.launcher-demo__console { display: none; }.launcher-demo__rail { padding-inline: 4px; }.launcher-demo__workspace { padding: 13px; }.launcher-demo__hero { grid-template-columns: 74px 1fr; gap: 10px; padding: 11px; }.launcher-demo__cube { transform: scale(.72) rotateX(58deg) rotateZ(45deg); }.launcher-demo__instances { grid-template-columns: 1fr; }.launcher-demo__bar > span:nth-child(2) { display: none; } }