@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Russo+One&display=swap');
:root{color-scheme:dark;--lime:#d3ff3e;--ink:#111310;--muted:#a7aaa2;--border:#3d4038;--font:'IBM Plex Mono',monospace}
*{box-sizing:border-box}body{margin:0;background:#121310;color:#f0f0e9;font-family:var(--font);font-size:16px}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:3px solid var(--lime);outline-offset:5px}button{color:inherit}button:hover,a:hover{color:var(--lime)}.shell{max-width:1680px;margin:auto;padding:0 40px}.toolbar{min-height:94px;display:flex;align-items:center;gap:36px;border-bottom:1px solid var(--border)}.wordmark{font-family:'Russo One',sans-serif;font-size:42px;font-style:italic;letter-spacing:-3px}.wordmark span{font-family:var(--font);font-size:14px;vertical-align:top;margin-left:8px;letter-spacing:0;font-style:normal}.system-title{font-size:14px;letter-spacing:1px}.version{color:#7c8075}.controls{margin-left:auto;display:flex;align-items:center;gap:20px}.controls button{border:0;background:none;font-size:14px;padding:12px 0}.controls button[aria-pressed=true]{color:var(--lime)}.divider{color:#585b52}.scene-header{display:flex;justify-content:space-between;padding:18px 0;font-size:12px;letter-spacing:1.5px;color:#b5b8ad}.viewport{position:relative;border:1px solid #65685b;background:#171a15;overflow:hidden;box-shadow:0 0 0 5px #20231c,0 0 0 6px #373b31}.scene{position:relative;aspect-ratio:1.8;overflow:hidden;background:#171a15}.scene-art{width:100%;height:100%;display:block;object-fit:cover;object-position:center 55%}.scene-shade{position:absolute;inset:0;background:linear-gradient(180deg,#0008,transparent 35%,transparent 80%,#0009);pointer-events:none}.scene-title{position:absolute;left:3%;top:5%;pointer-events:none}.eyebrow{font-size:12px;letter-spacing:2px;color:var(--lime)}h1{font-family:'Russo One',sans-serif;font-size:clamp(28px,4.5vw,68px);font-weight:400;line-height:.99;margin:12px 0;letter-spacing:-2px;text-shadow:0 2px 20px #000a}h1 span{color:var(--lime);padding-left:10px}.scanlines{pointer-events:none;position:absolute;inset:0;opacity:.13;background:repeating-linear-gradient(0deg,transparent 0 2px,#000 3px 4px)}.hotspot{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:0 8px 8px;border:0;background:transparent;min-width:120px;min-height:70px;transform:translate(-50%,-50%);z-index:2}.hot-label{display:flex;align-items:center;gap:9px;white-space:nowrap;padding:9px 11px;background:#13170feb;border:1px solid #b5b8a4;font-size:14px;box-shadow:3px 3px 0 #000a;transition:background .16s,transform .16s,color .16s}.hot-label i{font-size:12px;color:#a2a594;font-style:normal}.hot-label b{font-weight:400;color:var(--lime)}.target{font-size:26px;line-height:34px;width:34px;color:var(--lime);text-shadow:0 1px 4px #000;transition:transform .2s}.hotspot:hover .hot-label,.hotspot:focus-visible .hot-label{background:var(--lime);color:#12140d;transform:translateY(-4px);border-color:var(--lime)}.hotspot:hover i,.hotspot:hover b{color:#12140d}.hotspot:hover .target{transform:rotate(90deg)}.works{left:50%;top:59%;min-width:200px;min-height:150px}.works .hot-label{border-color:var(--lime);color:var(--lime)}.district{left:17%;top:54%}.workshops{left:21%;top:81%}.fight{left:82%;top:51%}.about{left:49%;top:91%}.contact{left:79%;top:83%}.coordinate{position:absolute;bottom:15px;left:20px;font-size:12px;color:#a6ab98;writing-mode:vertical-rl;transform:rotate(180deg)}.statusbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:21px 0 18px;font-size:12px;color:#a8ada0;letter-spacing:.5px}.instruction{display:flex;align-items:center;gap:12px;color:#e4e8da}.key{color:var(--lime);font-size:18px}.quick-nav{display:grid;grid-template-columns:repeat(6,1fr);border:1px solid var(--border)}.quick-nav button{border:0;border-right:1px solid var(--border);background:#1a1c17;padding:18px 12px;text-align:left;display:flex;gap:12px;align-items:center;font-size:14px}.quick-nav button:last-child{border-right:0}.quick-nav button:hover{background:#2b3021}.quick-nav small{color:#828a75;font-size:12px}footer{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:26px 0;font-size:12px;color:#92988a}footer div{display:flex;gap:24px}.footer-note{letter-spacing:2px;color:#b5bf9f}dialog{padding:0;border:1px solid #cad0b9;background:#171a13;color:#f0f1e9;width:min(1000px,calc(100% - 40px));max-height:88dvh;box-shadow:8px 8px 0 #0009;overflow:hidden}dialog[open]{display:flex;flex-direction:column;animation:roll-up .35s ease-out}dialog::backdrop{background:#050805bd;backdrop-filter:blur(7px)}.window-bar{display:flex;justify-content:space-between;align-items:center;background:#cbd0c0;color:#141810;padding:8px 10px 8px 18px;font-size:14px;letter-spacing:1px}.window-bar button{width:36px;height:34px;border:1px solid #454c39;background:#e2e5d9;color:#111;font-size:20px}.window-bar button:hover{background:var(--lime)}.window-body{padding:30px;overflow:auto}.window-body h2{font-family:'Russo One',sans-serif;font-size:clamp(30px,5vw,54px);font-weight:400;line-height:1.1;margin:4px 0 24px;letter-spacing:-1px}.window-body p{font-family:Arial,sans-serif;font-size:18px;line-height:1.65;color:#d1d5c8;max-width:700px}.window-body .kicker{font-family:var(--font);color:var(--lime);font-size:12px;letter-spacing:2px;margin:0 0 12px}.window-footer{border-top:1px solid #414736;display:flex;justify-content:space-between;padding:12px 18px;font-size:12px;color:#9ba68c}.gallery-main{background:#090b08;position:relative}.gallery-main img{display:block;width:100%;max-height:49vh;object-fit:contain}.gallery-controls{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:12px}.gallery-controls button,.action{display:inline-flex;justify-content:center;align-items:center;background:var(--lime);color:#151b0c;border:1px solid var(--lime);padding:12px 18px;font-size:14px;font-weight:600}.gallery-controls button:hover,.action:hover{background:#e7ffa4;color:#111}.gallery-controls span{font-size:14px;color:#bec5b0}.thumbnails{display:flex;gap:10px;margin:8px 0 16px}.thumbnails button{padding:0;background:none;border:2px solid transparent;width:100px;height:66px;opacity:.55}.thumbnails button[aria-pressed=true]{border-color:var(--lime);opacity:1}.thumbnails img{width:100%;height:100%;object-fit:cover}.split{display:grid;grid-template-columns:1.05fr 1fr;gap:28px;align-items:start}.feature-image{width:100%;height:auto;max-height:460px;object-fit:cover}.split p:first-child{margin-top:0}.action{margin-top:16px}.tags{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0}.tags span{border:1px solid #555e44;padding:8px 12px;font-size:14px}.rounds{display:grid;grid-template-columns:repeat(4,1fr);margin:28px 0;border:1px solid #515b42}.round{padding:22px 16px;border-right:1px solid #515b42}.round:last-child{border:0;background:var(--lime);color:#151b0c}.round small{display:block;font-size:12px}.round strong{font-family:'Russo One',sans-serif;font-size:30px;display:block;margin:18px 0}.round span{font-size:14px;line-height:1.5}.contact-links{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:30px}.contact-links a{border:1px solid #636e51;padding:20px;display:flex;justify-content:space-between;font-size:16px}.contact-links a:hover{background:var(--lime);color:#111}.about-sign{font-family:'Russo One',sans-serif;font-style:italic;font-size:clamp(70px,14vw,150px);color:var(--lime);letter-spacing:-8px;line-height:1.2}.image-error{font-size:16px;color:#eee;padding:20px}.scene.entering{animation:entry .4s ease-out}@keyframes roll-up{from{clip-path:inset(100% 0 0)}to{clip-path:inset(0)}}@keyframes entry{50%{filter:brightness(1.6)}}@media(min-width:1700px){.scene{max-height:820px}}@media(max-width:1000px){.shell{padding:0 22px}.toolbar{gap:20px}.scene{aspect-ratio:1.5}.quick-nav{grid-template-columns:repeat(3,1fr)}.quick-nav button:nth-child(3){border-right:0}.quick-nav button:nth-child(-n+3){border-bottom:1px solid var(--border)}.hot-label{font-size:12px;gap:6px;padding:8px}.hotspot{min-width:100px}.footer-note{display:none}.keyboard{display:none}}@media(max-width:600px){.shell{padding:0 14px}.toolbar{min-height:76px;gap:14px}.wordmark{font-size:33px}.wordmark span{font-size:12px;margin-left:5px}.system-title{font-size:12px;max-width:90px;line-height:1.5;letter-spacing:0}.version{display:none}.controls{gap:10px}.controls button{font-size:12px}.scene-header{font-size:12px;letter-spacing:0;padding:15px 0}.scene-location{display:none}.scene{aspect-ratio:1/1.12}.scene-art{object-fit:cover;object-position:50% 50%;opacity:.9}.scene-title{top:6%;left:6%}.scene-title h1{font-size:39px}.eyebrow{font-size:12px;letter-spacing:0}.hotspots{position:absolute;inset:38% 4% 6%;display:grid;grid-template-columns:1fr 1fr;gap:15px 4px;align-items:end}.hotspot{position:static;transform:none;min-width:0;min-height:0;width:100%;padding:0}.hot-label{font-size:12px;width:100%;justify-content:center;white-space:normal;text-align:center;background:#11180bf2;padding:11px 4px;gap:5px}.hot-label b{display:none}.hot-label i{font-size:12px}.target{font-size:24px}.works{grid-column:1/3}.works .hot-label{width:auto;min-width:175px}.about{order:5}.contact{order:6}.coordinate{display:none}.statusbar{font-size:12px;letter-spacing:0;padding:17px 0}.quick-nav{grid-template-columns:repeat(2,1fr)}.quick-nav button{font-size:14px;padding:16px 10px;gap:8px;border-bottom:1px solid var(--border)}.quick-nav button:nth-child(3){border-right:1px solid var(--border)}.quick-nav button:nth-child(even){border-right:0}.quick-nav button:nth-last-child(-n+2){border-bottom:0}footer{font-size:12px;align-items:flex-start;gap:15px;padding:22px 0}footer div{gap:12px;flex-wrap:wrap;justify-content:flex-end}.split{grid-template-columns:1fr}.window-body{padding:22px 18px}.window-body p{font-size:17px}dialog{width:calc(100% - 24px);max-height:92dvh}.rounds{grid-template-columns:1fr 1fr}.round:nth-child(2){border-right:0}.round:nth-child(-n+2){border-bottom:1px solid #515b42}.contact-links{grid-template-columns:1fr}.gallery-controls button{padding:12px}.gallery-controls span{font-size:12px}.window-body h2{font-size:34px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(max-width:600px){.hotspots{grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,1fr);inset:39% 4% 5%;gap:10px 6px}.works{grid-column:auto}.works .hot-label{width:100%;min-width:0}.target{line-height:25px;font-size:22px}.hot-label{min-height:40px}}

/* Форма обратной связи в модалке */
.contact-form{display:grid;gap:12px;margin-top:26px;max-width:700px}
.contact-form input,.contact-form textarea{font:inherit;font-size:16px;color:#f0f1e9;background:#0f120c;border:1px solid #636e51;padding:14px 15px;width:100%}
.contact-form input::placeholder,.contact-form textarea::placeholder{color:#8b9280}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:var(--lime)}
.contact-form textarea{resize:vertical;min-height:120px}
.contact-form button{justify-self:start;background:var(--lime);color:#151b0c;border:1px solid var(--lime);padding:13px 26px;font-size:14px;font-weight:600;letter-spacing:1px}
.contact-form button:hover{background:#e7ffa4;color:#111}
.contact-form button:disabled{opacity:.55;cursor:default}
.form-status{font-family:var(--font);font-size:14px;color:var(--lime);margin:0;min-height:20px}
.form-status.error{color:#ff8b6b}
.contact-links{margin-top:26px}
@media(max-width:600px){.contact-form button{justify-self:stretch;text-align:center}}

/* Мобильная сцена: плитки не должны закрывать арт, а быстрая навигация под сценой
   дублировала те же шесть пунктов — на узком экране остаются только плитки. */
@media(max-width:600px){
  .scene{aspect-ratio:1/1.25}
  .scene-art{object-position:50% 42%}
  .scene-shade{background:linear-gradient(180deg,#0006,transparent 28%,#000a 62%,#000d)}
  .hotspots{inset:auto 10px 12px;grid-template-rows:repeat(3,auto);gap:8px;align-content:end}
  .hotspot .target{display:none}
  .hot-label{background:#0f140ab8;border-color:#93a07f;backdrop-filter:blur(2px);min-height:44px;padding:10px 6px;letter-spacing:.5px}
  .works .hot-label{background:#141b0ccc}
  .quick-nav{display:none}
  .statusbar{padding:14px 0 16px}
}

/* Длинная подпись в подвале окна не должна ломать строку на узких экранах */
.window-footer{flex-wrap:wrap;gap:8px 16px}

/* «Обо мне»: текст ведёт, фото сопровождает */
.about-lead{display:grid;grid-template-columns:260px 1fr;gap:24px;align-items:start;margin:8px 0 26px}
.about-photo{width:100%;height:260px;object-fit:cover;border:1px solid #515b42}
.about-lead p{margin:0;font-size:19px;line-height:1.6}
.window-body h3{font-family:'Russo One',sans-serif;font-weight:400;font-size:clamp(18px,2.2vw,24px);letter-spacing:-.5px;margin:26px 0 10px;color:#f0f1e9}
.window-body h3+p{margin-top:0}
.about-closing{color:var(--lime);font-family:var(--font);font-size:15px;letter-spacing:.5px;margin-top:26px}
.about-sign{margin-top:22px}
@media(max-width:600px){
  .about-lead{grid-template-columns:1fr;gap:16px}
  .about-photo{height:220px}
  .about-lead p{font-size:17px}
}

/* Кнопки PLAY / ПРАВИЛА в окне SprayFight */
.action-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.action-row .action{margin-top:0}
.action-row .action:first-child{padding:14px 28px;font-size:16px;letter-spacing:1px;box-shadow:3px 3px 0 #000a}
.action-row .action:not(:first-child){background:transparent;color:var(--lime)}
.action-row .action:not(:first-child):hover{background:var(--lime);color:#151b0c}
@media(max-width:600px){.action-row{flex-direction:column}.action-row .action{width:100%;text-align:center;justify-content:center}}