/* Корпус ЭЛТ-монитора: общий для всех страниц в стиле экрана. Источник — лендинг. */
:root{--bg:#050605;--s1:#0c0e0b;--s2:#141712;--line:rgba(220,226,212,.16);--line-2:rgba(220,226,212,.09);
  --fg:#eef0ea;--fg-2:#bfc4b8;--fg-3:#868c80;--acid:#bdfe02;--acid-ink:#0a0f00;
  --sans:"Inter Tight",system-ui,-apple-system,sans-serif;--display:"Onest","Inter Tight",system-ui,sans-serif;
  --bez-t:20px;--bez-x:22px;--bez-b:66px;--nav-h:96px}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#000;overflow:hidden}
body{font-family:var(--sans);color:var(--fg);-webkit-font-smoothing:antialiased}

/* ——— корпус монитора ——— */
.mon{position:fixed;inset:0;padding:var(--bez-t) var(--bez-x) var(--bez-b);border-radius:22px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(90% 60% at 50% 0%,rgba(255,255,255,.06),transparent 70%),
    linear-gradient(180deg,#2a2c28 0%,#1c1d1a 22%,#161714 70%,#111210 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -2px 0 rgba(0,0,0,.6),inset 1px 0 0 rgba(255,255,255,.04),inset -1px 0 0 rgba(0,0,0,.5)}
/* утопленная губа вокруг кинескопа: сверху в тени, снизу ловит свет */
.lip{position:absolute;top:calc(var(--bez-t) - 9px);left:calc(var(--bez-x) - 9px);right:calc(var(--bez-x) - 9px);bottom:calc(var(--bez-b) - 9px);
  border-radius:6.5%/9.5%;pointer-events:none;
  background:linear-gradient(180deg,#060706 0%,#0c0d0b 35%,#1a1c18 100%);
  box-shadow:inset 0 3px 6px rgba(0,0,0,.95),inset 0 -1px 0 rgba(255,255,255,.07),0 1px 0 rgba(255,255,255,.05),0 -1px 0 rgba(0,0,0,.6)}
.screw{position:absolute;width:9px;height:9px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 35% 30%,#4a4d46,#1a1b18 70%);box-shadow:0 1px 0 rgba(255,255,255,.06),inset 0 -1px 1px rgba(0,0,0,.7)}
.screw::after{content:"";position:absolute;left:2px;right:2px;top:4px;height:1px;background:#0b0c0a;transform:rotate(var(--r,35deg))}
.screw--tl{top:5px;left:6px}.screw--tr{top:5px;right:6px;--r:-20deg}
.screw--bl{bottom:8px;left:8px;--r:70deg}.screw--br{bottom:8px;right:8px;--r:10deg}
.mon::before{content:"";position:absolute;inset:6px;border-radius:18px;pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 -1px 0 rgba(0,0,0,.8)}
.scr{position:relative;z-index:1;width:100%;height:100%;border-radius:5.5%/8%;overflow:hidden;overflow:clip;background:var(--bg);
  box-shadow:0 0 0 2px #020202,0 0 0 3px rgba(255,255,255,.05),0 0 60px rgba(189,254,2,.05)}

/* экран: сюда вешается выпуклость, внутри скроллится страница */
.fx{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;background:var(--bg);scrollbar-width:none;overscroll-behavior:contain}
.fx::-webkit-scrollbar{display:none}
.pwr{position:absolute;inset:0;z-index:7;background:#000;pointer-events:none;animation:pwr-bg 1.4s ease forwards}
.pwr::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:#f1ffc9;
  box-shadow:0 0 24px 4px rgba(189,254,2,.8);transform:scaleX(0);animation:pwr-line 1.4s cubic-bezier(.3,.7,.2,1) forwards}
@keyframes pwr-line{0%{transform:scaleX(0)}28%{transform:scaleX(1);opacity:1}58%{transform:scaleY(420);opacity:0}100%{transform:scaleY(420);opacity:0}}
@keyframes pwr-bg{0%,40%{opacity:1}75%{opacity:0}100%{opacity:0;visibility:hidden}}

/* ——— стекло поверх экрана ——— */
.glass{position:absolute;inset:0;pointer-events:none;z-index:5;overflow:hidden;overflow:clip}
.glass > *{position:absolute;inset:0}
.scan{inset:0 0 -30px 0!important;background:repeating-linear-gradient(0deg,rgba(0,0,0,.24) 0 1px,transparent 1px 3px);opacity:.6;animation:scan 1.2s linear infinite;will-change:transform}
@keyframes scan{to{transform:translate3d(0,-30px,0)}}
.blinds{inset:-30% -10%;background:repeating-linear-gradient(174deg,transparent 0,transparent 30px,rgba(0,0,0,.4) 46px,rgba(0,0,0,.4) 76px,transparent 92px);
  animation:blinds 7s linear infinite;will-change:transform}
/* полосы идут снизу вверх бесшовно: сдвиг ровно на два периода узора (92px / cos 6°) */
@keyframes blinds{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-185px,0)}}
.roll{inset:auto 0;top:0;height:26%;background:linear-gradient(180deg,transparent,rgba(189,254,2,.035) 50%,transparent);animation:roll 8s linear infinite}
@keyframes roll{from{transform:translateY(420%)}to{transform:translateY(-100%)}}
.glare{inset:auto!important;left:0;top:0;width:80%;height:100%;background:radial-gradient(closest-side,rgba(255,255,255,.07),transparent);transform:translate3d(calc(var(--gx,30vw) - 50%),calc(var(--gy,20vh) - 50%),0);will-change:transform}
.vig{box-shadow:inset 0 0 90px 20px rgba(0,0,0,.85),inset 0 0 22px 4px rgba(0,0,0,.9);
  background:radial-gradient(120% 110% at 50% 50%,transparent 58%,rgba(0,0,0,.45) 100%);animation:flick 5s steps(1) infinite}
@keyframes flick{0%,100%{opacity:1}47%{opacity:.93}48%{opacity:1}83%{opacity:.96}}
.shine{background:linear-gradient(118deg,rgba(255,255,255,.075) 0%,rgba(255,255,255,.02) 22%,transparent 34%)}

/* ——— низ корпуса ——— */
.base{position:absolute;left:calc(var(--bez-x) + 6px);right:calc(var(--bez-x) + 6px);bottom:0;height:var(--bez-b);display:flex;align-items:center;justify-content:space-between;gap:28px;padding-top:2px;
  font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:#5d6159}
.plate{display:flex;align-items:center;gap:14px}
.plate b{white-space:nowrap;font-family:var(--display);font-size:13px;font-weight:700;letter-spacing:.3em;color:#2d2f2a;
  text-shadow:0 1px 0 rgba(255,255,255,.09),0 -1px 0 rgba(0,0,0,.85)}
.plate span{padding:4px 8px;border:1px solid #2c2e2a;border-radius:3px;color:#6a6e65;background:linear-gradient(180deg,#1d1f1b,#141513);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.ctrls{display:flex;align-items:flex-end;gap:26px}
.knobs{display:flex;gap:20px}
.knob{display:flex;flex-direction:column;align-items:center;gap:5px}
.knob i{position:relative;width:20px;height:20px;border-radius:50%;
  background:radial-gradient(circle at 38% 30%,#44473f 0%,#22241f 55%,#121311 100%);
  box-shadow:0 2px 3px rgba(0,0,0,.8),0 0 0 2px #0d0e0c,inset 0 1px 0 rgba(255,255,255,.1);transform:rotate(var(--a,0deg));transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.knob i::after{content:"";position:absolute;left:9px;top:3px;width:2px;height:6px;border-radius:1px;background:#8d9286}
.knob:hover i{transform:rotate(calc(var(--a,0deg) + 40deg))}
.grille{width:110px;height:22px;border-radius:4px;background:repeating-linear-gradient(90deg,#0b0c0a 0 3px,#1f211d 3px 6px);box-shadow:inset 0 2px 3px rgba(0,0,0,.8),0 1px 0 rgba(255,255,255,.05)}
.power{display:flex;align-items:center;gap:12px}
.led{width:7px;height:7px;border-radius:50%;background:var(--acid);box-shadow:0 0 10px var(--acid),0 0 3px var(--acid);transition:background .3s,box-shadow .3s}
.mon.is-off .led{background:#2a3a08;box-shadow:none}
.pbtn{height:22px;width:46px;border:0;border-radius:4px;cursor:pointer;background:linear-gradient(180deg,#2c2e2a,#1a1b18);box-shadow:0 2px 0 #0a0b09,0 3px 4px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.1);transition:transform .08s,box-shadow .08s}
.pbtn:active,.mon.is-off .pbtn{transform:translateY(2px);box-shadow:0 0 0 #0a0b09,0 1px 2px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.06)}
.pbtn:focus-visible{outline:2px solid var(--acid);outline-offset:3px}
/* выключение: картинка схлопывается в линию, затем в точку */
.off{position:absolute;inset:0;z-index:8;background:#000;opacity:0;pointer-events:none;visibility:hidden}
.off::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:#f1ffc9;box-shadow:0 0 24px 4px rgba(189,254,2,.8);opacity:0}
.mon.is-off .off{visibility:visible;animation:off-bg .6s ease forwards}
.mon.is-off .off::before{animation:off-line .6s cubic-bezier(.5,0,.8,.4) forwards}
@keyframes off-bg{0%{opacity:0}25%{opacity:1}100%{opacity:1}}
@keyframes off-line{0%{opacity:1;transform:scale(1,300)}30%{opacity:1;transform:scale(1,1)}75%{opacity:1;transform:scale(.01,1)}100%{opacity:0;transform:scale(0,1)}}
.mon.is-off .fx{pointer-events:none}
@media(max-width:900px){
  :root{--bez-t:14px;--bez-x:12px;--bez-b:56px}
  .mon::before{border-radius:18px}
  .scr{border-radius:9%/5%}
  .knobs,.grille{display:none}
  .plate span{display:none}
  .plate b{font-size:11px;letter-spacing:.2em;white-space:nowrap}
  .screw{display:none}
}
.fx{scroll-behavior:smooth;background-image:radial-gradient(1200px 600px at 80% -10%,rgba(189,254,2,.06),transparent 60%)}
@media(prefers-reduced-motion:reduce){.pwr{display:none}.blinds,.roll,.vig,.scan{animation:none}.fx{scroll-behavior:auto}}

/* мобильное меню внутри экрана: до нижнего края экрана, дальше — прокрутка */
/* точка отсчёта для меню — шапка (у неё backdrop-filter), поэтому высоту считаем от экрана монитора */
@media(max-width:960px){.fx .nav{inset:72px 0 auto 0;max-height:calc(100dvh - var(--bez-t) - var(--bez-b) - 72px)}}