/* ===== Тема «стимпанк × пин-ап»: латунь, заклёпки, плакатная бумага и чернила ===== */
:root{
  --bg:#EFE2C4; --panel:#FBF3DF; --ink:#1A1410; --ink2:#5C4631; --muted:#9A8468; --line:#1A1410;
  --grid:rgba(26,20,16,.10); --track:#E4D2A8;
  --butter:#F2B53A; --red:#C8332B; --green:#2F7F7A; --caramel:#B5652B;
  --edge:#1A1410; --brass:#C9973A; --brass-l:#F1D07E; --brass-d:#7A5418; --cream:#FFF4DA;
  --plate1:#F7E9C4; --plate2:#EAD29C; --dots:rgba(26,20,16,.07);
  --shadow:4px 4px 0 var(--edge);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#1B1510; --panel:#2A2018; --ink:#F3E6C8; --ink2:#CDB892; --muted:#8C765A; --line:#0A0705;
    --grid:rgba(243,230,200,.09); --track:#3A2C1F; --edge:#0A0705;
    --plate1:#3B2D1F; --plate2:#2C2117; --dots:rgba(241,208,126,.05);
    --shadow:4px 4px 0 var(--edge); color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#1B1510; --panel:#2A2018; --ink:#F3E6C8; --ink2:#CDB892; --muted:#8C765A; --line:#0A0705;
  --grid:rgba(243,230,200,.09); --track:#3A2C1F; --edge:#0A0705;
  --plate1:#3B2D1F; --plate2:#2C2117; --dots:rgba(241,208,126,.05);
  --shadow:4px 4px 0 var(--edge); color-scheme:dark;
}
body{background-color:var(--bg);background-image:radial-gradient(var(--dots) 1.2px,transparent 1.7px);background-size:7px 7px}
.rivets{position:relative}
.rivets::after{content:"";position:absolute;inset:6px;pointer-events:none;
  background:
    radial-gradient(circle,#FFF0C2 0 1.4px,#6B4A17 1.9px 3px,transparent 3.6px) 0 0/10px 10px no-repeat,
    radial-gradient(circle,#FFF0C2 0 1.4px,#6B4A17 1.9px 3px,transparent 3.6px) 100% 0/10px 10px no-repeat,
    radial-gradient(circle,#FFF0C2 0 1.4px,#6B4A17 1.9px 3px,transparent 3.6px) 0 100%/10px 10px no-repeat,
    radial-gradient(circle,#FFF0C2 0 1.4px,#6B4A17 1.9px 3px,transparent 3.6px) 100% 100%/10px 10px no-repeat}

/* шапка */
.brand{display:flex;align-items:center;gap:8px;min-width:0}
.brand img{flex:none;width:44px;height:55px;margin:-6px 0 -6px -2px}
.logo{font:400 31px/1 "Lobster",cursive;letter-spacing:0;color:var(--red);text-shadow:2px 2px 0 var(--edge)}
.logo small{font:600 11px/1.25 "Oswald",sans-serif;text-transform:uppercase;letter-spacing:.07em;color:var(--ink2);text-shadow:none;margin-top:5px}
.rec{background:linear-gradient(180deg,var(--brass-l),var(--brass) 60%,var(--brass-d));color:#2A1C0C;border:2px solid var(--edge);box-shadow:2px 2px 0 var(--edge);font:600 12px/1 "Oswald",sans-serif;text-transform:uppercase;letter-spacing:.08em}
.rec i{background:#5A4020}

/* прибор: латунный корпус */
.door{border-radius:28px;padding:13px 13px 8px;background:radial-gradient(120% 90% at 28% 12%,var(--brass-l),var(--brass) 46%,var(--brass-d));border:3px solid var(--edge);box-shadow:var(--shadow)}
.glass{border:3px solid #3B2A10;box-shadow:inset 0 0 0 2px rgba(255,220,150,.14),inset 0 10px 30px rgba(0,0,0,.55)}
.plate{margin:7px auto 0;text-align:center;font:600 10px/1 "Oswald",sans-serif;letter-spacing:.24em;text-transform:uppercase;color:#3B2A10;opacity:.85}
.chip{font:600 12.5px/1 "Oswald",sans-serif;letter-spacing:.09em;text-transform:uppercase}

.hint{font-weight:500}
.steps div{background:var(--panel);border:2.5px solid var(--edge);border-radius:12px;box-shadow:3px 3px 0 var(--edge);color:var(--ink2)}
.steps b{font:400 30px/1 "Lobster",cursive;color:var(--red);margin-bottom:4px}

/* маскоты в режиме ожидания */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.pal{margin:0;display:flex;align-items:flex-end;gap:6px}
.pal img{flex:none;width:64px;height:80px}
.pal:last-child{flex-direction:row-reverse;text-align:right}
.bubble{position:relative;flex:1;background:var(--cream);color:#2A1C0C;border:2.5px solid var(--edge);border-radius:14px;padding:8px 10px;font:600 12.5px/1.3 "Onest",sans-serif;box-shadow:2px 2px 0 var(--edge);margin-bottom:26px}
.bubble::after{content:"";position:absolute;bottom:-9px;left:12px;width:14px;height:14px;background:var(--cream);border-right:2.5px solid var(--edge);border-bottom:2.5px solid var(--edge);transform:rotate(45deg)}
.pal:last-child .bubble::after{left:auto;right:12px}
body:not([data-mode="idle"]) .duo{display:none}

/* латунные таблички */
.stat{position:relative;padding:17px 9px 15px;background:linear-gradient(180deg,var(--plate1),var(--plate2));border:2.5px solid var(--edge);border-radius:10px;box-shadow:3px 3px 0 var(--edge)}
.stat b{font:600 22px/1.05 "Oswald",sans-serif}
.stat span{font-size:11.5px}

/* карточки-плакаты */
.card{background:var(--panel);border:2.5px solid var(--edge);border-radius:16px;box-shadow:var(--shadow)}
.cardhead h2,.guide h2,.settings summary{font:600 20px/1.2 "Oswald",sans-serif;text-transform:uppercase;letter-spacing:.03em}
.seg{background:var(--track);border:2px solid var(--edge);border-radius:10px}
.seg button{font:600 13px/1 "Oswald",sans-serif;text-transform:uppercase;letter-spacing:.05em}
.seg button.on{background:var(--red);color:var(--cream);box-shadow:none}
input[type=range],.switch input{accent-color:var(--red)}
.ghost{border:2.5px dashed var(--edge);font:600 14px/1 "Oswald",sans-serif;text-transform:uppercase;letter-spacing:.06em}
.msg{border-width:2.5px;box-shadow:3px 3px 0 var(--edge)}

/* главная кнопка — красная эмаль */
.main{background:linear-gradient(180deg,#E0463C,#B8291F);color:var(--cream);border:3px solid var(--edge);border-radius:16px;box-shadow:4px 4px 0 var(--edge),inset 0 2px 0 rgba(255,255,255,.28);font:600 20px/1 "Oswald",sans-serif;text-transform:uppercase;letter-spacing:.06em}
.main .dot{background:var(--brass-l);box-shadow:0 0 0 3px rgba(0,0,0,.25)}
.main:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--edge)}
body[data-mode="listen"] .main,body[data-mode="demo"] .main{background:linear-gradient(180deg,#3F8F89,#2A6B66);color:var(--cream);box-shadow:4px 4px 0 var(--edge)}
body[data-mode="listen"] .main .dot,body[data-mode="demo"] .main .dot{background:var(--cream)}

/* тревога — пин-ап плакат с лучами */
.heat{background:repeating-conic-gradient(from 0deg at 50% 62%,#D6392E 0 9deg,#E86A3A 9deg 18deg)}
.heat::before{background:radial-gradient(60% 45% at 50% 62%,rgba(255,225,130,.55),transparent 70%)}
.ov{font:600 15px/1 "Oswald",sans-serif;letter-spacing:.12em;text-transform:uppercase;background:#1A1410;color:#F2B53A;border:2px solid #F2B53A}
.take{font:400 clamp(46px,14.5vw,104px)/.95 "Lobster",cursive;letter-spacing:0;color:#FFF4DA;
  text-shadow:-2px -2px 0 #1A1410,2px -2px 0 #1A1410,-2px 2px 0 #1A1410,2px 2px 0 #1A1410,6px 7px 0 rgba(26,20,16,.45)}
.hero-pop{width:132px;height:138px;animation:hop .55s ease-in-out infinite alternate}
@keyframes hop{to{transform:translateY(-12px) rotate(-4deg)}}
.why{color:#FFF1DC;font-weight:500}
.meter{border:3px solid #1A1410}
.got{background:#FFF4DA;color:#8A140F;border:3px solid #1A1410;box-shadow:5px 5px 0 #1A1410;font:600 26px/1 "Oswald",sans-serif;text-transform:uppercase;letter-spacing:.06em}
.more{color:#FFF1DC}

/* текст под радаром */
.guide p,.guide li{color:var(--ink2)}
.guide b{color:var(--ink)}
.guide li::marker{color:var(--red)}
.guide a{color:var(--red);font-weight:600}
.times td{font:600 15px/1.2 "Oswald",sans-serif;letter-spacing:.02em}
.times th{font:600 11.5px/1.2 "Oswald",sans-serif;text-transform:uppercase;letter-spacing:.08em}
.guide-hero{display:flex;justify-content:center;gap:4px;margin:-4px 0 6px}
.guide-hero img{width:84px;height:104px}
.faq details{border-top:2px dashed var(--muted)}
.more-reads{display:grid;gap:8px;margin-top:10px}
.more-reads a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border:2.5px solid var(--edge);border-radius:12px;background:var(--cream);color:#2A1C0C;text-decoration:none;font:600 15px/1.25 "Oswald",sans-serif;text-transform:uppercase;letter-spacing:.03em;box-shadow:3px 3px 0 var(--edge)}
.more-reads a::after{content:"→";font-family:"Onest",sans-serif;color:var(--red)}
.foot{margin:18px 4px 0;text-align:center;font-size:12.5px;line-height:1.5;color:var(--muted)}
.foot a{color:var(--ink2)}

@media (prefers-reduced-motion:reduce){.hero-pop{animation:none}}

/* ===== статьи ===== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;color:var(--ink);font:400 16px/1.55 "Onest",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;-webkit-tap-highlight-color:transparent}
a:focus-visible,summary:focus-visible{outline:3px solid var(--butter);outline-offset:2px}
.wrap{max-width:680px;margin:0 auto;padding:12px 16px calc(110px + env(safe-area-inset-bottom,0px))}
.top{display:flex;align-items:center;justify-content:space-between;padding:4px 0 10px}
.brand{text-decoration:none}
.logo{margin:0;display:block}
.logo small{display:block}
.crumbs{margin:6px 0 12px;font:600 12px/1.3 "Oswald",sans-serif;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.crumbs a{color:var(--ink2);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.hero{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px;padding:18px 16px 16px}
.hero h1{margin:0;font:600 clamp(26px,7.2vw,38px)/1.08 "Oswald",sans-serif;text-transform:uppercase;letter-spacing:.01em;color:var(--ink)}
.hero img{width:92px;height:auto}
.lead{margin:12px 0 0;font-size:17px;line-height:1.5;color:var(--ink);grid-column:1/-1}
.lead b{color:var(--red)}
.card{padding:16px;margin-top:14px}
.guide h2{margin:0}
.guide p,.guide li{font-size:16px;line-height:1.6}
.guide h3{margin:14px 0 0;font:600 16px/1.3 "Oswald",sans-serif;text-transform:uppercase;letter-spacing:.03em;color:var(--ink)}
.src{font-size:13px!important;color:var(--muted)!important}
.src a{color:var(--ink2)!important;font-weight:500!important}
.times{width:100%;border-collapse:collapse;margin-top:10px}
.times th,.times td{padding:9px 10px;border-bottom:1.5px solid var(--grid);text-align:left}
.times th{color:var(--ink2)}
.cta{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;background:linear-gradient(180deg,var(--plate1),var(--plate2))}
.cta img{width:74px;height:auto}
.cta p{margin:0;color:var(--ink);font-weight:600}
.cta .btn{grid-column:1/-1}
.btn{display:flex;align-items:center;justify-content:center;gap:10px;height:56px;border-radius:16px;text-decoration:none;background:linear-gradient(180deg,#E0463C,#B8291F);color:var(--cream);border:3px solid var(--edge);box-shadow:4px 4px 0 var(--edge),inset 0 2px 0 rgba(255,255,255,.28);font:600 19px/1 "Oswald",sans-serif;text-transform:uppercase;letter-spacing:.06em}
.btn::before{content:"";width:13px;height:13px;border-radius:50%;background:var(--brass-l);box-shadow:0 0 0 3px rgba(0,0,0,.25)}
.btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--edge)}
.bar{position:fixed;left:0;right:0;bottom:0;z-index:20;padding:10px 16px calc(12px + env(safe-area-inset-bottom,0px));background:linear-gradient(to top,var(--bg) 62%,rgba(0,0,0,0))}
.bar .btn{max-width:648px;margin:0 auto}
.faq details{padding:12px 0 2px;margin-top:10px}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;cursor:pointer;font:700 15.5px/1.35 "Onest",sans-serif;padding-bottom:10px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;font:700 18px/1 "Oswald",sans-serif;color:var(--red)}
.faq details[open] summary::after{content:"−"}
.faq details p{margin:0 0 10px}

/* ===== контраст и светодиод (24.09) ===== */
:root{--link:#A5271F}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--link:#FF7A66}}
:root[data-theme="dark"]{--link:#FF7A66}
.guide a{color:var(--link)}
.guide a.btn,.guide .btn{color:var(--cream)}
.lead b,.st-rank{color:var(--link)}
.foot,.crumbs,.src,.res-fine{color:var(--ink2)!important}
.crumbs a{color:var(--ink)}
.rec{background:linear-gradient(180deg,#F8E2A6,#E3BC62)}
.plate{display:table;margin:8px auto 0;padding:4px 10px;background:#2A1C0C;color:#F1D07E;border-radius:6px;opacity:1}
/* светодиод в плашке состояния: зелёный ждёт, красный слушает, жёлтый — демо, частит — «Доставай!» */
.rec i{width:10px;height:10px;border-radius:50%;--led:#34C76A;--led-d:#0F6B33;--ledglow:rgba(52,199,106,.8)}
.rec i,body[data-mode] .rec i{background:radial-gradient(circle at 35% 30%,#F2FFF6 0 16%,var(--led) 46%,var(--led-d) 100%);box-shadow:0 0 0 1.5px #2A1C0C,0 0 7px 2px var(--ledglow);animation:led 1.8s ease-in-out infinite}
@keyframes led{0%,100%{opacity:1}50%{opacity:.35;box-shadow:0 0 0 1.5px #2A1C0C,0 0 1px 0 var(--ledglow)}}
body[data-mode="listen"] .rec i{--led:#FF4A3D;--led-d:#8A120C;--ledglow:rgba(255,74,61,.85);animation-duration:.9s}
body[data-mode="demo"] .rec i{--led:#FFC53D;--led-d:#9A6A00;--ledglow:rgba(255,197,61,.85);animation-duration:.9s}
body[data-mode="done"] .rec i{--led:#FF4A3D;--led-d:#8A120C;--ledglow:rgba(255,74,61,.9);animation:led .35s steps(2) infinite}
@media (prefers-reduced-motion:reduce){.rec i,body[data-mode] .rec i{animation:none!important}}
.guide .more-reads a{color:#2A1C0C}

/* ===== список фильмов (25.09) ===== */
.films{list-style:none;margin:10px 0 0;padding:0}
.film{padding:12px 0;border-top:2px dashed var(--muted)}
.film:first-child{border-top:0;padding-top:4px}
.film b{font:600 17px/1.25 "Oswald",sans-serif;text-transform:uppercase;letter-spacing:.02em;color:var(--ink)}
.fmeta{display:block;margin-top:3px;font-size:13px;color:var(--ink2)}
.film p{margin:6px 0 0}
.guide .fwho{font-size:13.5px;color:var(--ink);font-weight:600}


.copy{margin:8px 0 0;font-size:12px;line-height:1.5;color:var(--ink2)}