/* V&M Studio — shared visual language. Pixel artwork lives inside calm, precise UI. */
:root {
  --vm-bg:#0b1727; --vm-panel:#122438; --vm-raised:#1a3048; --vm-border:#35516b;
  --vm-text:#eef8ff; --vm-muted:#afc3d7; --vm-cyan:#a5e8e2; --vm-blue:#286ce4;
  --vm-radius:20px; --vm-out:cubic-bezier(.23,1,.32,1);
}
body {background:radial-gradient(ellipse at 90% 0,#16437566,transparent 45rem),var(--vm-bg);color:var(--vm-text)}
.shell{width:min(1120px,calc(100% - 40px));padding:24px 0 40px;min-height:100dvh}
.topbar{position:relative;gap:16px;margin:0 0 28px;padding:0 0 18px;border-bottom:1px solid var(--vm-border)}
.topbar .brand{gap:12px;font-size:16px;letter-spacing:-.04em;margin:0}.brand b{color:var(--vm-cyan)}
.topbar .brand-mark{position:relative;width:64px;height:64px;border-radius:16px;background:var(--vm-bg);border:1px solid var(--vm-border);overflow:hidden;flex:none;box-shadow:none}
.brand-mark img{position:static;width:100%;height:100%;object-fit:contain;transform:scale(1.18);image-rendering:pixelated}
.topbar .stage{margin-left:auto;background:var(--vm-panel);border-color:var(--vm-border);color:var(--vm-muted);font-size:10px}
.topbar .nav-toggle{order:3;position:relative;inset:auto;margin-left:0;display:grid;place-items:center;width:48px;height:48px;border:1px solid var(--vm-border);border-radius:14px;background:var(--vm-raised);box-shadow:none;color:var(--vm-cyan);cursor:pointer;flex:none;transition:background 160ms,transform 160ms var(--vm-out)}
.nav-toggle[aria-expanded=true]{background:var(--vm-blue);color:white}.nav-toggle svg{transition:transform 200ms var(--vm-out)}.nav-toggle[aria-expanded=true] svg{transform:rotate(90deg)}
.intro{position:relative;isolation:isolate;overflow:hidden;border:1px solid var(--vm-border);border-radius:var(--vm-radius);background:var(--vm-bg);padding:32px;margin:0 0 20px;min-height:250px}
.intro-mascot{position:absolute;right:0;top:50%;width:340px;height:340px;object-fit:contain;transform:translateY(-50%);z-index:-1;image-rendering:pixelated;mask-image:linear-gradient(90deg,transparent,#000 20%)}
.intro>*:not(img){position:relative;max-width:63%}.intro .eyebrow,.screen-hero .eyebrow{font:700 11px/1.5 Manrope,Arial,sans-serif;letter-spacing:.12em;color:var(--vm-cyan)}
h1,.screen-hero h1{font:800 clamp(30px,5vw,48px)/1.12 Manrope,Arial,sans-serif;letter-spacing:-.045em;text-wrap:balance}
h1 em{color:var(--vm-cyan);background:none;-webkit-text-fill-color:currentColor}.intro .subtitle{margin:18px 0 0;color:var(--vm-muted);line-height:1.6}
.screen-hero{padding:8px 0 24px;margin-bottom:24px;border-bottom:1px solid var(--vm-border)}.screen-hero>p:last-child{max-width:620px;color:var(--vm-muted);font-size:14px;line-height:1.7;margin-bottom:0}
.balance-card{border:1px solid #498aca;border-radius:var(--vm-radius);background:linear-gradient(120deg,#174674,#205b97);padding:24px;min-height:200px;animation:none;box-shadow:inset 0 1px #ffffff16,0 12px 30px #0002}
.balance-card::after{display:block;content:'V&M';font:120px/1 Tiny5,monospace;right:-8px;top:auto;bottom:-12px;transform:rotate(-12deg);color:#ffffff09;letter-spacing:0}.balance-number{font-size:clamp(34px,6vw,50px);font-variant-numeric:tabular-nums;margin:16px 0 24px}.balance-foot{flex-wrap:wrap;gap:8px;font-size:12px}.balance-unit{color:#dceeff}
.editor,.progress-card,.stage-card,.profile-stat{border:1px solid var(--vm-border);border-radius:var(--vm-radius);background:var(--vm-panel);box-shadow:inset 0 1px #ffffff05;animation:none}
.stage-card{padding:24px}.section-description,.section-message,.editor-hint,.progress-foot,.history-row small{color:var(--vm-muted);font-size:12px;line-height:1.6}.section-heading,.progress-head{color:var(--vm-muted);font-size:11px;letter-spacing:.06em}.stage-card h2{font-size:23px;letter-spacing:-.035em}.section-message:empty{min-height:0;margin:0}
.editor-bar{background:var(--vm-raised);border-bottom:1px solid var(--vm-border);height:48px}.editor-state{color:var(--vm-cyan)}.code-view{background:#0b1a2c;min-height:185px}.code-empty{color:var(--vm-muted)}.editor-hint{margin:12px 16px 16px}.click-button{min-height:54px}.button-plus{color:var(--vm-cyan);background:#07172955}
.primary-action,.click-button,.shop-body .primary-action,.carousel-arrow,.dialog-actions button[value=confirm]{background:linear-gradient(110deg,#2367db,#317de7);border:1px solid #609af0;border-radius:12px;color:#fff;box-shadow:inset 0 1px #ffffff20,0 4px 12px #0002;text-shadow:none;min-height:48px;transition:transform 120ms var(--vm-out),background 160ms,border-color 160ms,box-shadow 160ms;animation:none}
.primary-action:disabled,.shop-body .primary-action:disabled{background:#23384e;border-color:#466079;color:#bdcbd8;box-shadow:none;opacity:.65;text-shadow:none}
.program-option{min-height:100px;background:#0c1c2e;border:1px solid var(--vm-border);border-radius:12px;transition:border-color 160ms,background 160ms}.program-option.is-selected{border-color:var(--vm-cyan);background:#173e50;box-shadow:inset 0 0 0 1px #a5e8e229}.program-option strong{font-size:15px}.program-option span{color:var(--vm-cyan);font-size:13px}.program-option small{font-size:11px;color:var(--vm-muted)}
.progress-fill,.chart-bar,.referral-column-fill,.referral-share span{background:linear-gradient(0deg,#286ce4,#a5e8e2)}.progress-fill{background:linear-gradient(90deg,#286ce4,#a5e8e2)}.progress-foot{flex-wrap:wrap;row-gap:6px}.progress-card{padding:20px}
.catalog-carousel{--pixel-border:var(--vm-border);--pixel-surface:var(--vm-panel);margin:24px 0}.carousel-toolbar{margin-bottom:16px}.carousel-toolbar h2{font-size:18px}.carousel-counter{font:600 12px Manrope,sans-serif;color:var(--vm-muted);text-shadow:none;letter-spacing:0}.carousel-arrow{width:44px;height:44px;min-height:44px;background:var(--vm-raised);border-color:var(--vm-border);box-shadow:none}.carousel-track{gap:16px;padding-top:4px;scrollbar-color:#47749c transparent;scrollbar-width:thin}
.shop-card{padding:1px;transition:background 180ms}.shop-body{padding:20px;gap:14px;border-top:1px solid var(--vm-border);box-shadow:none;background:var(--vm-panel)}.shop-body h3,.shop-check-card h2{font:700 22px/1.25 Manrope,Arial,sans-serif;letter-spacing:-.03em;text-shadow:none}.shop-price{font:400 32px/1.1 Tiny5,monospace;color:var(--vm-cyan);text-shadow:none}.shop-badge{font:700 10px/1.4 Manrope,sans-serif;letter-spacing:.08em;color:var(--vm-cyan)}.shop-badge::before{color:var(--vm-cyan);content:'▪ '}.shop-description,.shop-body .section-description,.shop-body .neural-rate{color:var(--vm-muted);font-size:13px}
.pixel-art-caption{background:#0b1c30f5;border-top:1px solid var(--vm-border);color:var(--vm-cyan)}.pixel-art-caption strong{font-size:28px}.pixel-hardware span{color:#c5d8ea}.shop-card.is-owned,.shop-card.is-you,.shop-card:focus-within{background:var(--vm-cyan)}
.neural-summary,.top-summary,.pc-current{background:linear-gradient(110deg,#17364d,var(--vm-panel));border-color:var(--vm-border)}.ranking-portrait{background-color:#10253c}.ranking-portrait .public-avatar{border-radius:18px;border:2px solid var(--vm-cyan);box-shadow:0 8px 24px #0004}.rank-medal{border:1px solid var(--vm-border);border-radius:8px;background:var(--vm-panel);color:var(--vm-cyan);text-shadow:none}.ranking-stats>div{border-top:1px solid var(--vm-border)}.ranking-stats dd{font-family:Manrope,Arial,sans-serif}.ranking-stats dt{color:var(--vm-muted)}
.profile-hero{background:linear-gradient(110deg,#17364d,var(--vm-panel));padding:28px}.avatar{background:var(--vm-raised);border-color:var(--vm-cyan)}.profile-stat{padding:18px}.profile-stat small{color:var(--vm-muted)}.profile-stat strong{font-variant-numeric:tabular-nums}.chart-bars{padding-top:24px}.chart-bar{border-radius:5px 5px 0 0}
.expand-button,.history-more{min-height:48px;border:1px solid var(--vm-border);background:var(--vm-panel);color:var(--vm-text);border-radius:12px}.expand-button span{transition:transform 200ms var(--vm-out)}.expand-button[aria-expanded=true] span{transform:rotate(180deg)}.expand-panel{transition:grid-template-rows 240ms var(--vm-out),opacity 180ms}
#screen-wallet .wallet-balance{background:linear-gradient(135deg,#194b75,var(--vm-panel));padding:32px;border-color:#498aca;position:relative;overflow:hidden}#wallet-rubles{font-size:52px;font-variant-numeric:tabular-nums}.wallet-balance::after{content:'V&M';position:absolute;right:20px;top:24px;font:40px Tiny5,monospace;color:var(--vm-cyan);opacity:.3;pointer-events:none}
#referral-link,.chip-duration{min-height:48px;background:#0b1c30;color:var(--vm-text);border:1px solid var(--vm-border);border-radius:12px;font-family:inherit}.chip-duration-label{color:var(--vm-muted)}.referral-column-value{color:var(--vm-cyan)}.chip-timer{color:var(--vm-cyan)}
.confirm-dialog{padding:28px;border-radius:20px;background:var(--vm-panel);border:1px solid var(--vm-border)}.confirm-dialog::backdrop{background:#020c1dd9;backdrop-filter:blur(5px)}.confirm-dialog[open]{animation:vm-dialog 220ms var(--vm-out)}.dialog-actions button{min-height:48px;border-radius:12px;background:var(--vm-raised);border:1px solid var(--vm-border);color:var(--vm-text)}
.news-banner{border:1px solid var(--vm-border);border-radius:var(--vm-radius);background:var(--vm-panel)}.check-banner,.check-card{border:1px solid #bc8b59;background:#3c3030}.check-banner{border-radius:16px}
.menu-scrim{position:fixed;inset:0;background:#020b18a8;z-index:49;opacity:0;visibility:hidden;transition:opacity 150ms,visibility 150ms;backdrop-filter:blur(3px)}.menu-scrim.is-open{opacity:1;visibility:visible}
.bottom-nav,.bottom-nav.is-open{position:fixed;z-index:50;left:auto;right:max(20px,calc((100vw - 1120px)/2));top:max(110px,calc(env(safe-area-inset-top) + 90px));bottom:auto;width:min(370px,calc(100vw - 40px));max-height:calc(100dvh - 130px);display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:16px;border:1px solid var(--vm-border);border-radius:20px;background:#122438f7;box-shadow:0 24px 80px #0008;backdrop-filter:blur(20px);transform:translateY(-8px) scale(.97);transform-origin:top right;opacity:0;visibility:hidden;pointer-events:none;transition:transform 180ms var(--vm-out),opacity 130ms,visibility 180ms}
.bottom-nav.is-open{transform:translateY(0) scale(1);opacity:1;visibility:visible;pointer-events:auto}.bottom-nav button{min-height:52px;font-size:13px;border:1px solid transparent;border-radius:12px;background:#ffffff04;color:var(--vm-muted);padding:12px;gap:10px;transition:background 150ms,color 150ms}.bottom-nav button.is-active{background:#204d6b;color:var(--vm-cyan);border-color:#477f91;box-shadow:none}.bottom-nav svg{width:22px;height:22px;flex:none}
.topbar:has(.nav-toggle[aria-expanded=true]){z-index:51}.nav-heading{grid-column:1/-1;font:700 11px Manrope,sans-serif;letter-spacing:.12em;color:var(--vm-muted);padding:4px 4px 12px}
.launch-screen{background:var(--vm-bg)}.launch-content{width:min(380px,90vw)}.launch-runway{height:260px;border:0;overflow:visible}.launch-runway::after{display:none}.launch-logo{position:relative;inset:auto;width:260px;height:260px;margin:auto;transform:none;animation:vm-mascot 1.6s ease-in-out infinite alternate}.launch-logo img{position:static;width:100%;height:100%;transform:none;object-fit:contain}.launch-kicker{font:400 22px Tiny5,monospace;letter-spacing:.08em;color:var(--vm-cyan)}.launch-progress{height:4px;border-radius:4px;max-width:240px;margin:24px auto}.launch-progress span{background:var(--vm-cyan)}.launch-title{font-size:14px;color:var(--vm-muted)}
.screen.is-active{animation:vm-enter 240ms var(--vm-out) both}footer{margin-top:40px;padding:24px 0 0;border-top:1px solid var(--vm-border);color:var(--vm-muted);font-size:10px;gap:8px;justify-content:center;flex-wrap:wrap}
button{touch-action:manipulation}button:not(:disabled):active{transform:scale(.98)}:where(button,input,select,textarea):focus-visible,.carousel-track:focus-visible{outline:2px solid var(--vm-cyan);outline-offset:4px}body.keyboard-mode .screen,body.keyboard-mode .bottom-nav,body.keyboard-mode dialog{animation:none;transition:none}
@keyframes vm-enter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes vm-dialog{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}@keyframes vm-mascot{from{transform:translateY(0)}to{transform:translateY(-6px)}}
@media(hover:hover) and (pointer:fine){.primary-action:not(:disabled):hover,.click-button:not(:disabled):hover,.shop-body .primary-action:not(:disabled):hover{background:#347fe9;border-color:#9ac5ff;box-shadow:0 6px 20px #2165c936}.carousel-arrow:not(:disabled):hover,.bottom-nav button:hover{background:#244760;color:var(--vm-text);box-shadow:none}.shop-card:hover{background:#6a97b1}.program-option:not(:disabled):hover{border-color:var(--vm-cyan)}}
@media(min-width:800px){#screen-play{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-areas:'intro intro' 'check check' 'balance editor' 'progress editor' 'program program';gap:20px}#screen-play .intro{padding:36px;min-height:250px;display:block;margin:0}#screen-play .balance-card{min-height:200px;align-self:stretch}#screen-play .code-view{min-height:180px}.program-options{grid-template-columns:repeat(5,minmax(0,1fr))}.intro-mascot{width:380px;height:380px;right:30px}}
@media(max-width:799px){.shell{width:calc(100% - 32px);padding-top:max(16px,env(safe-area-inset-top))}.intro{padding:24px;min-height:215px}.intro-mascot{width:240px;height:240px;right:-38px;mask-image:linear-gradient(90deg,transparent,#000 34%)}.intro h1{font-size:34px}.intro>*:not(img){max-width:70%}.intro .subtitle{font-size:12px;max-width:66%}.intro .eyebrow{font-size:9px}.topbar .brand{font-size:14px}.topbar .brand-mark{width:52px;height:52px}.topbar .nav-toggle{margin-left:auto}.stage-card{padding:20px}.topbar{margin-bottom:20px}.screen-hero h1{font-size:34px}.balance-card{min-height:180px;padding:22px}.balance-number{font-size:40px}.editor{margin-top:16px}.bottom-nav,.bottom-nav.is-open{right:16px;top:max(94px,calc(env(safe-area-inset-top) + 78px));width:calc(100vw - 32px);max-width:370px}.shop-body{padding:18px}.screen-hero{padding-top:4px}}
@media(max-width:360px){.intro{padding:20px}.intro h1{font-size:29px}.intro-mascot{right:-56px;width:225px;height:225px}.topbar .brand{font-size:12px;gap:8px}.topbar .brand-mark{width:48px;height:48px}.topbar{gap:8px}.screen-hero h1{font-size:30px}.progress-head{font-size:9px}.click-button{padding:14px 12px;font-size:12px}.button-symbol{font-size:15px}.balance-number{font-size:34px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.launch-logo{transform:none}}
/* Narrow screens keep both the collection title and controls readable. */
.carousel-toolbar h2{min-width:0;overflow-wrap:anywhere}
@media(max-width:480px){.carousel-toolbar{flex-wrap:wrap;align-items:flex-start}.carousel-toolbar h2{flex:1 1 140px}.carousel-controls{margin-left:auto}.intro{min-height:230px;padding:22px}.intro-mascot{width:180px;height:180px;right:-9px;top:100px;mask-image:linear-gradient(90deg,transparent,#000 22%)}.intro h1{max-width:68%;font-size:32px}.intro .eyebrow{max-width:100%}.intro .subtitle{max-width:100%;margin-top:34px;padding-right:0}.intro>*:not(img){z-index:1}.intro .subtitle{background:linear-gradient(90deg,#0b1727,#0b1727dd);border-radius:6px}.intro h1{font-size:clamp(28px,8vw,34px)}}
.bottom-nav{grid-auto-rows:auto}.bottom-nav button,.bottom-nav button:nth-child(n+5){grid-column:auto}
@media(max-width:799px){.code-view{height:190px;min-height:190px;max-height:190px}}