:root {
  --ink: #07123f;
  --blue: #103de6;
  --electric: #345cff;
  --paper: #f7f3e7;
  --yellow: #ffe139;
  --red: #ff4b39;
  --cyan: #9df0ee;
  --line: 2px solid var(--ink);
}

* { box-sizing: border-box; }
html { background: #07174c; scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; color: var(--ink); background-color: #07174c; background-image: radial-gradient(#2146a0 1px, transparent 1px); background-size: 12px 12px; font-family: Arial, Helvetica, sans-serif; }
a { color: inherit; }
.skip-link { position: fixed; top: -80px; left: 12px; z-index: 50; padding: 10px 14px; background: var(--yellow); border: var(--line); font-weight: 900; }
.skip-link:focus { top: 12px; }
.page-shell { width: min(1060px, calc(100% - 28px)); margin: 24px auto; background: var(--paper); border: 3px solid #fff; box-shadow: 12px 12px 0 #020923, 0 0 0 4px var(--ink); }
.utility-row { min-height: 28px; padding: 6px 14px; display: flex; justify-content: space-between; gap: 16px; color: white; background: var(--ink); font: 700 10px/1.3 "Courier New", monospace; letter-spacing: .08em; }
.connection i { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: #4dff4d; box-shadow: 0 0 7px #4dff4d; }
.brand { min-height: 155px; display: flex; align-items: center; gap: 20px; padding: 17px 42px 16px; overflow: hidden; color: white; text-decoration: none; background: var(--blue); border-bottom: var(--line); position: relative; }
.brand::after { content: "WWW"; position: absolute; right: 8px; bottom: -40px; color: rgba(255,255,255,.08); font: 900 140px/.8 Arial; letter-spacing: -18px; }
.brand-star { width: 96px; height: 96px; display: grid; place-items: center; flex: 0 0 auto; color: var(--yellow); border: 4px solid var(--yellow); border-radius: 50%; font-size: 54px; transform: rotate(-8deg); box-shadow: 7px 7px 0 var(--ink); }
.brand-copy { z-index: 1; }
.brand-copy small { display: block; margin-bottom: 4px; color: var(--yellow); font: 900 12px/1 "Courier New", monospace; letter-spacing: .22em; }
.brand-copy b { display: block; font: 1000 42px/.78 Arial Black, Arial, sans-serif; letter-spacing: -.06em; transform: skew(-6deg); text-shadow: 4px 4px 0 var(--ink); }
.brand-copy em { color: var(--yellow); font-style: normal; }
.brand-year { margin-left: auto; z-index: 1; font: 900 42px/.72 Arial Black, Arial; letter-spacing: -.08em; color: var(--cyan); text-align: center; transform: rotate(4deg); }
.brand-year strong { color: white; font-size: 56px; }
.main-nav { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: var(--line); background: var(--paper); }
.main-nav a { padding: 13px 8px 11px; text-align: center; text-decoration: none; font: 900 13px/1 Arial; border-right: var(--line); transition: background .15s, color .15s; }
.main-nav a:last-child { border-right: 0; }
.main-nav a:hover, .main-nav a:focus-visible, .main-nav a.active { color: white; background: var(--red); outline: none; }
.ticker { height: 31px; display: flex; border-bottom: var(--line); overflow: hidden; background: white; }
.ticker-label { padding: 7px 12px; flex: 0 0 auto; color: white; background: var(--ink); font: 900 11px/1.4 "Courier New", monospace; }
.ticker-window { flex: 1; overflow: hidden; white-space: nowrap; }
.ticker-window span { display: inline-block; padding: 7px 0 0 100%; font: 700 11px/1.4 "Courier New", monospace; animation: ticker 22s linear infinite; }
@keyframes ticker { to { transform: translateX(-100%); } }
.hero-panel { min-height: 430px; display: grid; grid-template-columns: 1.18fr .82fr; background: #fff; border-bottom: var(--line); }
.hero-copy { padding: 52px 34px 42px 52px; position: relative; z-index: 2; }
.issue-tag, .eyebrow { font: 900 11px/1.3 "Courier New", monospace; letter-spacing: .08em; }
.issue-tag { display: inline-block; padding: 5px 8px; color: white; background: var(--red); transform: rotate(-2deg); }
.hero-copy h1 { max-width: 590px; margin: 17px 0 14px; font: 1000 52px/.88 Arial Black, Arial, sans-serif; letter-spacing: -.065em; }
.hero-copy h1 span { color: var(--blue); text-shadow: 3px 3px 0 var(--yellow); }
.hero-copy > p { max-width: 530px; font: 700 16px/1.45 Arial; }
.hero-actions { margin-top: 28px; display: flex; align-items: center; flex-wrap: wrap; gap: 20px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 41px; padding: 11px 14px 9px; border: var(--line); color: inherit; background: white; box-shadow: 4px 4px 0 var(--ink); font: 900 12px/1 Arial; text-decoration: none; cursor: pointer; }
.button:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.button-primary { color: white; background: var(--blue); }
.button-primary span { margin-left: 20px; color: var(--yellow); font-size: 18px; }
.button-dark { margin-top: 8px; color: white; background: var(--ink); }
.button-yellow { width: 100%; background: var(--yellow); }
.text-link { font: 900 11px/1.2 "Courier New", monospace; text-underline-offset: 4px; }
.hero-visual { min-height: 430px; overflow: hidden; position: relative; background: var(--yellow); border-left: var(--line); }
.sunburst { position: absolute; inset: -45%; background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.56) 0deg 12deg, transparent 12deg 25deg); animation: rotate 40s linear infinite; }
@keyframes rotate { to { transform: rotate(360deg); } }
.computer { position: absolute; width: 290px; left: 50%; top: 52%; transform: translate(-50%, -50%) rotate(2deg); filter: drop-shadow(12px 14px 0 rgba(7,18,63,.25)); }
.monitor { width: 236px; height: 215px; margin: auto; padding: 22px 18px 35px; background: #e8e1ce; border: 4px solid var(--ink); border-radius: 18px 18px 8px 8px; position: relative; }
.screen { height: 140px; display: flex; flex-direction: column; justify-content: center; padding: 18px; color: #aaffce; background: #052d2b; border: 5px solid #8d887b; border-radius: 18px; box-shadow: inset 0 0 30px #031714; font: 700 12px/1.5 "Courier New", monospace; }
.screen strong { color: #4dffa1; font-size: 19px; }
.monitor-dot { position: absolute; right: 18px; bottom: 14px; width: 8px; height: 8px; border-radius: 50%; background: #ff4b39; }
.keyboard { width: 290px; height: 62px; margin-top: -2px; background: repeating-linear-gradient(90deg, transparent 0 10px, rgba(7,18,63,.16) 10px 12px), #ded6c0; border: 4px solid var(--ink); clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%); }
.sticker { position: absolute; right: 18px; top: 24px; width: 78px; height: 78px; display: grid; place-content: center; text-align: center; color: white; background: var(--red); border: 3px solid var(--ink); border-radius: 50%; box-shadow: 4px 4px 0 var(--ink); font: 900 12px/1 Arial; transform: rotate(11deg); }
.sticker b { font-size: 15px; }
.intro-strip { min-height: 50px; padding: 10px 16px; display: flex; justify-content: space-between; align-items: center; gap: 20px; background: var(--cyan); border-bottom: var(--line); }
.intro-strip p { margin: 0; font: 700 12px/1.35 "Courier New", monospace; }
.intro-strip p strong { color: var(--blue); }
.intro-strip span { flex: 0 0 auto; font: 700 10px/1 "Courier New", monospace; }
.content-grid { display: grid; grid-template-columns: 1fr 330px; }
.featured { padding: 34px; border-right: var(--line); }
.section-heading { display: flex; justify-content: space-between; margin-bottom: 24px; }
.section-heading span:first-child { color: var(--red); font: 900 11px/1 "Courier New", monospace; letter-spacing: .12em; }
.section-heading h2 { margin: 7px 0 0; font: 1000 32px/.88 Arial Black, Arial; letter-spacing: -.05em; }
.section-heading .number { color: transparent; -webkit-text-stroke: 2px var(--ink); font: 900 74px/.8 Arial Black, Arial; }
.feature-card { display: grid; grid-template-columns: .78fr 1.22fr; border: var(--line); box-shadow: 7px 7px 0 var(--ink); }
.portrait { min-height: 310px; display: grid; place-content: center; text-align: center; border-right: var(--line); position: relative; overflow: hidden; }
.portrait-violet { background: repeating-linear-gradient(-45deg, #826aff 0 10px, #7057ee 10px 20px); }
.portrait span { color: var(--yellow); font: 1000 120px/.7 Arial Black; transform: rotate(-15deg); text-shadow: 7px 7px 0 var(--ink); }
.portrait small { position: absolute; left: 12px; bottom: 12px; padding: 5px 7px; color: white; background: var(--ink); font: 700 9px/1.2 "Courier New", monospace; }
.feature-copy { padding: 27px 24px; background: white; }
.feature-copy .eyebrow { color: var(--blue); }
.feature-copy h3 { margin: 10px 0; font: 1000 34px/.86 Arial Black, Arial; letter-spacing: -.055em; }
blockquote { margin: 14px 0; padding-left: 13px; border-left: 5px solid var(--yellow); font: 900 14px/1.3 Arial; }
.feature-copy > p:last-of-type { font-size: 12px; line-height: 1.45; }
.sidebar { background: #e9e5d9; }
.sidebar > section { padding: 25px; border-bottom: var(--line); }
.vote-box { background: var(--blue); color: white; }
.vote-box .eyebrow { color: var(--yellow); }
.vote-box h2 { margin: 8px 0 18px; font: 1000 23px/.92 Arial Black, Arial; }
.vote-box label { display: flex; align-items: center; gap: 9px; margin: 8px 0; font: 700 12px/1.3 "Courier New", monospace; cursor: pointer; }
.vote-box input { accent-color: var(--yellow); }
.vote-box .button { margin-top: 14px; }
.poll-result { min-height: 16px; margin: 10px 0 0; color: var(--yellow); font: 700 10px/1.3 "Courier New", monospace; }
.counter-box { text-align: center; background: white; }
.counter-box span, .counter-box small { display: block; font: 700 9px/1.3 "Courier New", monospace; }
.counter-box strong { display: inline-block; margin: 9px 0; padding: 7px; color: #63ff87; background: #07120a; border: 3px inset #999; font: 700 21px/1 "Courier New", monospace; letter-spacing: .08em; }
.mail-box { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; background: var(--yellow); }
.mail-icon { width: 43px; height: 43px; display: grid; place-items: center; color: white; background: var(--red); border: var(--line); border-radius: 50%; font: 900 24px/1 Arial; }
.mail-box strong { font: 900 12px/1 Arial; }
.mail-box p { margin: 4px 0 0; font: 700 10px/1.3 "Courier New", monospace; }
.mail-box > a { font-size: 24px; text-decoration: none; }
.site-footer { min-height: 90px; padding: 22px 26px; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; gap: 20px; color: white; background: var(--ink); }
.site-footer p { text-align: center; font: 700 9px/1.4 "Courier New", monospace; color: #bac4ff; }
.footer-brand { font: 700 12px/1 Arial; }
.footer-brand strong { color: var(--yellow); }
.footer-links { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 12px; font: 700 9px/1.3 "Courier New", monospace; }
.footer-links a { color: white; }

/* Inner pages */
.inner-hero { min-height: 235px; padding: 42px 48px 35px; color: white; background-color: var(--blue); background-image: linear-gradient(135deg, transparent 72%, rgba(255,225,57,.2) 72%), radial-gradient(rgba(255,255,255,.18) 1px, transparent 1px); background-size: auto, 10px 10px; border-bottom: var(--line); position: relative; overflow: hidden; }
.inner-hero::after { content: attr(data-code); position: absolute; right: 20px; bottom: -30px; color: rgba(255,255,255,.1); font: 1000 130px/.8 Arial Black, Arial; letter-spacing: -.08em; }
.inner-hero .eyebrow { color: var(--yellow); }
.inner-hero h1 { margin: 12px 0 10px; font: 1000 54px/.84 Arial Black, Arial; letter-spacing: -.065em; text-shadow: 4px 4px 0 var(--ink); }
.inner-hero p { max-width: 600px; margin: 0; font: 700 15px/1.45 Arial; }
.status-row { display: flex; justify-content: space-between; gap: 16px; padding: 10px 18px; background: var(--yellow); border-bottom: var(--line); font: 700 10px/1.3 "Courier New", monospace; }
.status-row span:last-child { text-align: right; }
.inner-content { padding: 36px; }
.inner-title { margin: 0 0 24px; font: 1000 34px/.92 Arial Black, Arial; letter-spacing: -.05em; }
.inner-title span { color: var(--red); }
.heroes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.hero-card { display: flex; flex-direction: column; background: white; border: var(--line); box-shadow: 5px 5px 0 var(--ink); }
.hero-card:target { outline: 5px solid var(--yellow); outline-offset: 3px; }
.mini-portrait { height: 190px; display: grid; place-items: center; overflow: hidden; border-bottom: var(--line); position: relative; }
.mini-portrait::before { content: attr(data-symbol); color: var(--yellow); font: 1000 105px/.8 Arial Black, Arial; text-shadow: 6px 6px 0 var(--ink); transform: rotate(-9deg); }
.mini-portrait::after { content: "★ АРХИВ"; position: absolute; left: 10px; bottom: 10px; padding: 4px 6px; color: white; background: var(--ink); font: 700 9px/1 "Courier New", monospace; }
.portrait-orange { background: repeating-linear-gradient(45deg, #ff653e 0 12px, #f6aa2f 12px 24px); }
.portrait-blue { background: repeating-radial-gradient(circle at 50% 50%, #3e6aff 0 12px, #2446c8 13px 24px); }
.portrait-green { background: repeating-linear-gradient(-45deg, #49c99a 0 12px, #13a675 12px 24px); }
.hero-card-copy { padding: 19px; flex: 1; display: flex; flex-direction: column; }
.hero-card .eyebrow { color: var(--blue); }
.hero-card h2 { margin: 8px 0 10px; font: 1000 26px/.9 Arial Black, Arial; letter-spacing: -.045em; }
.hero-card p:not(.eyebrow) { min-height: 69px; margin: 0 0 15px; font-size: 12px; line-height: 1.45; }
.hero-card .text-link { margin-top: auto; color: var(--blue); }
.nominate { margin-top: 35px; padding: 26px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px; color: white; background: var(--red); border: var(--line); box-shadow: 6px 6px 0 var(--ink); }
.nominate h2 { margin: 0 0 7px; font: 1000 27px/.9 Arial Black, Arial; }
.nominate p { margin: 0; font: 700 11px/1.4 "Courier New", monospace; }
.archive-layout { display: grid; grid-template-columns: 1fr 270px; gap: 28px; }
.timeline { border-left: 5px solid var(--blue); margin-left: 12px; }
.year-block { padding: 0 0 30px 28px; position: relative; }
.year-block:last-child { padding-bottom: 0; }
.year-block::before { content: ""; position: absolute; left: -12px; top: 5px; width: 15px; height: 15px; background: var(--yellow); border: var(--line); border-radius: 50%; }
.year-block h2 { margin: 0 0 12px; color: var(--blue); font: 1000 35px/.9 Arial Black, Arial; }
.archive-items { display: grid; gap: 8px; }
.archive-item { padding: 13px 14px; display: grid; grid-template-columns: 74px 1fr; gap: 12px; background: white; border: var(--line); }
.archive-item time { color: var(--red); font: 900 10px/1.35 "Courier New", monospace; }
.archive-item strong { font: 900 13px/1.25 Arial; }
.archive-item p { margin: 4px 0 0; font-size: 11px; line-height: 1.4; }
.archive-aside > section { margin-bottom: 16px; padding: 20px; border: var(--line); box-shadow: 4px 4px 0 var(--ink); }
.archive-aside h2 { margin: 0 0 10px; font: 1000 20px/.95 Arial Black, Arial; }
.archive-aside p { font: 700 11px/1.45 "Courier New", monospace; }
.disk-box { color: white; background: var(--blue); }
.disk { width: 90px; height: 90px; margin: 8px auto 19px; display: grid; place-items: end center; padding-bottom: 10px; color: var(--ink); background: #b5bad0; border: 4px solid var(--ink); border-radius: 4px; box-shadow: inset 0 28px 0 #343c61; font: 900 10px/1 Arial; transform: rotate(-5deg); }
.browser-box { background: var(--cyan); }
.browser-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.browser-chips span { padding: 5px 7px; background: white; border: 1px solid var(--ink); font: 700 9px/1 "Courier New", monospace; }
.guest-layout { display: grid; grid-template-columns: .95fr 1.05fr; gap: 28px; }
.guest-form, .guest-wall { padding: 26px; border: var(--line); box-shadow: 6px 6px 0 var(--ink); }
.guest-form { background: var(--yellow); }
.guest-form h2, .guest-wall h2 { margin: 0 0 8px; font: 1000 26px/.95 Arial Black, Arial; }
.guest-form > p, .guest-wall > p { margin: 0 0 20px; font: 700 11px/1.4 "Courier New", monospace; }
.field { display: block; margin-bottom: 14px; }
.field span { display: block; margin-bottom: 5px; font: 900 10px/1.2 "Courier New", monospace; }
.field input, .field textarea { width: 100%; padding: 10px; color: var(--ink); background: white; border: var(--line); border-radius: 0; font: 700 13px/1.4 "Courier New", monospace; box-shadow: inset 2px 2px 0 #b8b1a0; }
.field textarea { min-height: 125px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: 4px solid rgba(16,61,230,.32); }
.form-note { min-height: 18px; margin: 12px 0 0; color: var(--blue); font: 900 10px/1.3 "Courier New", monospace; }
.guest-wall { background: white; }
.guest-list { display: grid; gap: 13px; }
.guest-entry { padding: 15px; background: var(--paper); border: 1px dashed var(--ink); position: relative; }
.guest-entry:nth-child(even) { background: var(--cyan); }
.guest-entry header { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.guest-entry strong { font: 900 13px/1.2 Arial; }
.guest-entry time { font: 700 9px/1.3 "Courier New", monospace; }
.guest-entry p { margin: 0; font: 700 11px/1.45 "Courier New", monospace; }
.guest-entry .badge { margin-left: 6px; padding: 2px 4px; color: white; background: var(--red); font-size: 8px; }

@media (max-width: 760px) {
  .page-shell { width: min(100% - 16px, 620px); margin: 8px auto; box-shadow: 5px 5px 0 #020923; }
  .brand { min-height: 118px; padding: 16px; gap: 13px; }
  .brand-star { width: 66px; height: 66px; font-size: 38px; box-shadow: 4px 4px 0 var(--ink); }
  .brand-copy b { font-size: 31px; }
  .brand-copy small { font-size: 8px; }
  .brand-year { font-size: 28px; }
  .brand-year strong { font-size: 38px; }
  .hero-panel { grid-template-columns: 1fr; }
  .hero-copy { padding: 35px 25px; }
  .hero-copy h1 { font-size: clamp(38px, 12vw, 52px); }
  .hero-visual { min-height: 360px; border-left: 0; border-top: var(--line); }
  .content-grid { grid-template-columns: 1fr; }
  .featured { padding: 25px 18px 32px; border-right: 0; border-bottom: var(--line); }
  .feature-card { grid-template-columns: 1fr; }
  .portrait { min-height: 210px; border-right: 0; border-bottom: var(--line); }
  .site-footer { grid-template-columns: 1fr; text-align: center; }
  .footer-links { justify-content: center; }
  .site-footer p { margin: 0; }
  .inner-hero { padding: 34px 24px; }
  .inner-hero h1 { font-size: 44px; }
  .inner-content { padding: 27px 18px; }
  .heroes-grid { grid-template-columns: 1fr; }
  .mini-portrait { height: 230px; }
  .hero-card p:not(.eyebrow) { min-height: 0; }
  .archive-layout, .guest-layout { grid-template-columns: 1fr; }
  .archive-aside { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .archive-aside > section { margin: 0; }
}

@media (max-width: 480px) {
  .utility-row span:first-child { display: none; }
  .utility-row { justify-content: center; }
  .brand-year { display: none; }
  .main-nav { grid-template-columns: repeat(2, 1fr); }
  .main-nav a:nth-child(2) { border-right: 0; }
  .main-nav a:nth-child(-n+2) { border-bottom: var(--line); }
  .hero-copy h1 { font-size: 38px; }
  .hero-actions { align-items: flex-start; flex-direction: column; }
  .intro-strip span { display: none; }
  .section-heading .number { font-size: 52px; }
  .status-row span:last-child { display: none; }
  .inner-hero h1 { font-size: 36px; }
  .nominate { grid-template-columns: 1fr; }
  .archive-aside { grid-template-columns: 1fr; }
  .archive-item { grid-template-columns: 1fr; gap: 4px; }
  .guest-form, .guest-wall { padding: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}