@font-face{font-family:"New People";src:url("fonts/NewPeople-Light.woff2") format("woff2"),url("fonts/NewPeople-Light.ttf") format("truetype");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"New People";src:url("fonts/NewPeople-Regular.woff2") format("woff2"),url("fonts/NewPeople-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"New People";src:url("fonts/NewPeople-Medium.woff2") format("woff2"),url("fonts/NewPeople-Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"New People";src:url("fonts/NewPeople-SemiBold.woff2") format("woff2"),url("fonts/NewPeople-SemiBold.ttf") format("truetype");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"New People";src:url("fonts/NewPeople-Bold.woff2") format("woff2"),url("fonts/NewPeople-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"New People";src:url("fonts/NewPeople-Black.woff2") format("woff2"),url("fonts/NewPeople-Black.ttf") format("truetype");font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:"New People";src:url("fonts/NewPeople-Italic.woff2") format("woff2"),url("fonts/NewPeople-Italic.ttf") format("truetype");font-weight:400;font-style:italic;font-display:swap}
:root { --cyan:#43e5ed; --yellow:#d2a72a; --paper:#e9e1d1; --legal-footer-space:30px; color-scheme:dark; }
* { box-sizing:border-box; }
html { height:100%; overflow:hidden; background:#090b0c; }
body { height:100%; margin:0; overflow:hidden; color:#e9e4d9; background:#090b0c; font-family:"New People"; }
button { color:inherit; font:inherit; -webkit-tap-highlight-color:transparent; }
button:focus-visible { outline:2px solid var(--cyan); outline-offset:4px; }
[hidden] { display:none!important; }
.comic-shell { height:100svh; overflow:hidden; background:radial-gradient(circle at 78% 8%,rgba(210,167,42,.08),transparent 24rem),radial-gradient(circle at 12% 32%,rgba(67,229,237,.055),transparent 28rem),#090b0c; }
.comic-shell:before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.23; background-image:repeating-linear-gradient(97deg,transparent 0 7px,rgba(255,255,255,.025) 8px,transparent 9px 17px); }
.reader-layout { --reader-gap:clamp(18px,2.6vw,42px); position:relative; z-index:1; display:grid; grid-template-columns:190px minmax(0,min(calc(66.666svh - 42px),calc(100vw - 442px - var(--reader-gap) - var(--reader-gap)))) 220px; justify-content:center; align-items:center; gap:var(--reader-gap); width:100%; height:calc(100svh - var(--legal-footer-space)); padding:16px; }
.comic-header { display:none; }
.kicker { margin:0 0 10px; color:#a49b89; font-size:10px; font-weight:900; letter-spacing:.18em; text-transform:uppercase; }
.comic-header h1 { margin:0; font-family:"New People"; font-size:clamp(32px,5vw,62px); font-weight:700; line-height:.95; letter-spacing:-.045em; }
.page-meta { align-self:stretch; display:flex; flex-direction:column; justify-content:center; min-width:0; padding-left:clamp(0px,1vw,16px); border-left:2px solid rgba(67,229,237,.7); }
.page-meta h1 { margin:0; font-size:clamp(22px,2.2vw,34px); font-weight:900; line-height:.88; letter-spacing:-.05em; text-transform:uppercase; }
.page-meta-current { margin-top:clamp(28px,8vh,80px); padding-top:14px; border-top:1px solid rgba(233,225,209,.18); }
.page-meta-current span { display:block; margin-bottom:7px; color:var(--yellow); font-size:9px; font-weight:900; letter-spacing:.2em; text-transform:uppercase; }
.page-meta-current strong { display:block; font-size:clamp(13px,1.45vw,19px); font-weight:700; line-height:1.05; text-transform:uppercase; }
.candidate-card { display:none; width:100%; margin:clamp(24px,5vh,48px) 0 0; overflow:hidden; background:#101313; border:1px solid rgba(233,225,209,.2); box-shadow:0 20px 45px rgba(0,0,0,.34); }
.candidate-portrait { position:relative; display:block; overflow:hidden; }
.candidate-card img { display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; object-position:center top; background:#e4e8ee; }
.candidate-card figcaption { padding:11px 12px 12px; }
.candidate-card strong { display:block; font-size:10px; font-weight:700; line-height:1.12; }
.candidate-card small { display:block; margin-top:5px; color:#a8aaa4; font-size:8px; font-weight:500; line-height:1.22; }
.candidate-card-main { display:block; border-color:rgba(67,229,237,.32); box-shadow:0 20px 48px rgba(0,0,0,.52),0 0 28px rgba(67,229,237,.08); }
.candidate-card-main figcaption { visibility:hidden; }
.candidate-card-main .candidate-portrait { background:radial-gradient(circle at 49% 30%,rgba(67,229,237,.055),transparent 22%),#080b0c; }
.candidate-card-main .candidate-portrait img { opacity:0; }
.candidate-card-main .candidate-portrait:before,.candidate-card-main .candidate-portrait:after { content:""; position:absolute; z-index:2; top:30.15%; width:2.5%; aspect-ratio:1; border-radius:50%; background:#baffff; box-shadow:0 0 2px 1px #43e5ed,0 0 7px 3px rgba(67,229,237,.78),0 0 14px 5px rgba(67,229,237,.3); mix-blend-mode:screen; transform:translate(-50%,-50%); animation:turquoise-eyes 3.6s linear infinite; }
.candidate-card-main .candidate-portrait:before { left:42.3%; }
.candidate-card-main .candidate-portrait:after { left:55.4%; }
@keyframes turquoise-eyes { 0%,42%,47%,100% { opacity:.9; filter:brightness(1); } 44% { opacity:.08; filter:brightness(.55); } 45% { opacity:1; filter:brightness(1.4); } }
.reader-navigation { align-self:center; display:flex; flex-direction:column; gap:18px; min-width:0; padding:18px; background:rgba(12,15,15,.84); border:1px solid rgba(233,225,209,.16); border-right:3px solid var(--cyan); box-shadow:0 22px 60px rgba(0,0,0,.42); backdrop-filter:blur(18px); }
.theme-toggle { display:flex; align-items:center; justify-content:flex-start; gap:9px; width:100%; min-height:44px; padding:5px 10px 5px 6px; color:#e9e4d9; background:rgba(255,255,255,.025); border:1px solid rgba(233,225,209,.18); border-radius:999px; font-size:9px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; cursor:pointer; }
.theme-toggle i { position:relative; width:38px; height:22px; flex:none; overflow:hidden; border:1px solid rgba(233,225,209,.28); border-radius:999px; background:#202526; box-shadow:inset 0 1px 3px rgba(0,0,0,.45); transition:background-color .2s ease,border-color .2s ease; }
.theme-toggle i:after { content:""; position:absolute; top:3px; left:3px; width:14px; height:14px; border-radius:50%; background:#f1c94f; box-shadow:0 2px 6px rgba(0,0,0,.45),0 0 0 2px rgba(241,201,79,.14); transition:transform .22s cubic-bezier(.2,.75,.2,1),background-color .2s ease; }
.theme-toggle[aria-pressed="true"] i:after { transform:translateX(16px); }
.theme-toggle:focus-visible { outline:2px solid var(--cyan); outline-offset:3px; background:rgba(67,229,237,.06); box-shadow:none; }
.progress { width:100%; flex:none; }
.progress span { display:block; margin-bottom:9px; color:#a7aca8; text-align:left; font-size:10px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; }
.progress i { display:block; height:2px; background:linear-gradient(90deg,var(--cyan) var(--progress),#2b2e2e var(--progress)); }
.mouse-guide { display:grid; gap:7px; }
.mouse-guide p { display:grid; grid-template-columns:36px 1fr auto; align-items:center; gap:9px; margin:0; padding:9px 0; border-top:1px solid rgba(233,225,209,.12); }
.mouse-guide b { color:#071011; background:var(--paper); padding:5px 4px; font-size:8px; text-align:center; letter-spacing:.08em; }
.mouse-guide b:after { content:attr(data-desktop); }
.mouse-guide span { color:#d9d3c7; font-size:10px; font-weight:700; text-transform:uppercase; }
.mouse-guide i { color:var(--cyan); font-size:20px; font-style:normal; }
.cover { width:100%; margin:0; }
.cover-button { position:relative; display:block; width:100%; aspect-ratio:2/3; container-type:inline-size; padding:0; overflow:hidden; color:#f1ecdf; background:radial-gradient(rgba(238,232,220,.08) .7px,transparent .8px) 0 0/7px 7px,#080a0b; border:8px solid #eee7d8; outline:4px solid #030404; cursor:pointer; box-shadow:0 42px 90px rgba(0,0,0,.68); }
.cover-button img,.cover-button video { position:absolute; inset:38% 0 7%; width:100%; height:55%; display:block; object-fit:cover; object-position:48% 50%; }
.cover-button video { z-index:1; opacity:0; transition:opacity .36s ease; }
.cover-button video.is-playing { opacity:1; }
.cover-button.video-needs-play:before,.image-button.video-needs-play:before { content:"Тап — запустить видео"; position:absolute; z-index:8; left:50%; bottom:10%; transform:translateX(-50%); min-width:max-content; padding:8px 11px; color:#071011; background:var(--cyan); border:2px solid #071011; box-shadow:3px 3px 0 #071011; font-size:clamp(8px,1.8cqw,11px); font-weight:900; letter-spacing:.04em; text-transform:uppercase; pointer-events:none; }
.cover-button.video-needs-play:before { bottom:17%; }
.cover-shade { position:absolute; z-index:2; inset:38% 0 7%; background:linear-gradient(180deg,rgba(3,5,7,.08),transparent 52%,rgba(3,4,5,.5)); }
.cover-copy { position:absolute; z-index:3; inset:6% 7%; display:flex; flex-direction:column; align-items:flex-start; text-align:left; text-shadow:0 3px 12px #000; }
.cover-copy small { color:var(--cyan); font-size:clamp(8px,1.6vw,13px); font-style:normal; font-weight:700; letter-spacing:.18em; text-transform:uppercase; }
.cover-copy strong { margin-top:4%; font-family:"New People"; font-size:clamp(44px,8vw,82px); font-weight:900; line-height:.82; letter-spacing:-.055em; text-transform:uppercase; }
.cover-copy strong:after { content:""; display:block; width:38%; height:6px; margin-top:8%; background:var(--cyan); box-shadow:54px 0 0 var(--yellow); }
.cover-copy em { margin-top:auto; align-self:stretch; display:flex; justify-content:space-between; padding:11px 14px; color:#071011; background:#eee8dc; border-left:7px solid var(--cyan); font-size:clamp(9px,1.5vw,12px); font-style:normal; font-weight:900; letter-spacing:.08em; text-shadow:none; text-transform:uppercase; }
.comic-page { width:100%; margin:0; padding:0; transform-origin:left center; perspective:1800px; }
.page-heading { display:flex; align-items:end; justify-content:space-between; gap:28px; margin:0 8px 20px; }
.page-heading span { color:var(--yellow); font-size:9px; font-weight:900; letter-spacing:.2em; text-transform:uppercase; }
.page-heading h2 { margin:0; font-family:"New People"; font-size:clamp(16px,2.2vw,22px); font-weight:900; line-height:1; letter-spacing:-.025em; text-align:right; text-transform:uppercase; white-space:nowrap; }
.page-sheet { position:relative; width:100%; aspect-ratio:2/3; overflow:hidden; container-type:inline-size; background-color:#ece3d2; background-image:radial-gradient(ellipse at 18% 8%,rgba(255,255,255,.72),transparent 38%),radial-gradient(ellipse at 88% 92%,rgba(119,88,46,.12),transparent 46%),linear-gradient(104deg,rgba(255,255,255,.28),transparent 38%,rgba(117,88,49,.055) 77%,transparent); border:clamp(6px,.8cqw,9px) solid #eee8db; outline:clamp(3px,.45cqw,5px) solid #050606; box-shadow:0 42px 90px rgba(0,0,0,.62),inset 0 0 70px rgba(73,52,27,.2),inset 0 0 0 1px rgba(101,73,39,.18); }
.page-sheet:after { content:""; position:absolute; z-index:20; inset:0; pointer-events:none; opacity:.11; mix-blend-mode:multiply; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='paper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.035 .38' numOctaves='3' seed='17' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23paper)' opacity='.72'/%3E%3C/svg%3E"); background-size:180px 180px; }
.panel { position:absolute; overflow:hidden; background-color:#c9c3b6; background-image:radial-gradient(rgba(35,38,37,.22) .75px,transparent .85px); background-size:6px 6px; box-shadow:0 0 0 clamp(3px,.55cqw,6px) #020303,0 0 0 clamp(5px,.82cqw,9px) #f3ede1,0 0 0 clamp(7px,1.08cqw,12px) #050606,0 10px 24px rgba(0,0,0,.58); transition:opacity .45s ease,transform .52s cubic-bezier(.18,.72,.12,1); }
.panel:before { content:""; position:absolute; inset:clamp(2px,.4cqw,4px); z-index:4; border:clamp(1px,.28cqw,3px) solid #050606; pointer-events:none; }
.panel.is-visible { opacity:1; transform:none; filter:none; pointer-events:auto; }
.panel.is-hidden { opacity:.09; transform:scale(.985); filter:none; pointer-events:none; }
.panel.is-hidden .copy,.panel.is-hidden .image-button img,.panel.is-hidden .image-button video,.panel.is-hidden .frame-number { opacity:0; }
.copy { position:absolute; z-index:5; inset:5% 4% auto; display:flex; align-items:flex-start; justify-content:space-between; gap:3%; pointer-events:none; }
.caption { margin:0; max-width:78%; padding:1.8% 2.4%; color:#1d1f1e; background:var(--paper); border-left:clamp(2px,.45cqw,4px) solid var(--yellow); border-top:clamp(1px,.22cqw,2px) solid #161818; border-right:clamp(1px,.22cqw,2px) solid #161818; border-bottom:clamp(1px,.22cqw,2px) solid #161818; box-shadow:0 8px 20px rgba(0,0,0,.32); font-family:"New People"; font-size:clamp(10px,2.55cqw,17px); font-weight:700; line-height:1.18; }
.bubble { position:relative; max-width:62%; margin:0 1% 0 auto; padding:2.2% 4%; color:#111313; background:#f6f2e9; border:clamp(1px,.35cqw,3px) solid #191d1d; border-radius:48% 52% 47% 53%/55% 48% 52% 45%; text-align:center; box-shadow:0 8px 18px rgba(0,0,0,.34); font-family:"New People"; font-size:clamp(10px,2.55cqw,17px); font-weight:700; line-height:1.08; }
.bubble:after { content:""; position:absolute; right:14%; bottom:-18%; width:16%; aspect-ratio:1; background:#f6f2e9; border-right:inherit; border-bottom:inherit; transform:rotate(34deg) skew(-12deg); }
.bubble span { position:relative; z-index:1; }
.image-button { position:absolute; inset:0; display:block; width:100%; height:100%; padding:0; overflow:hidden; border:0; background:transparent; cursor:pointer; }
.image-button:after { content:""; position:absolute; inset:0; z-index:3; pointer-events:none; box-shadow:inset 0 0 0 clamp(2px,.38cqw,4px) #080909,inset 0 0 0 clamp(3px,.55cqw,6px) rgba(241,235,222,.58),inset 0 -40px 60px rgba(0,0,0,.12); }
.image-button img,.image-button video { display:block; width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.7,.15,1),opacity .36s ease; }
.image-button video { position:absolute; z-index:1; inset:0; opacity:0; pointer-events:none; }
.image-button video.is-playing { opacity:1; }
.frame-number { position:absolute; z-index:6; right:3%; bottom:5%; min-width:5%; padding:1.2% 1.7%; color:#e9e4d9; background:rgba(8,10,10,.74); border:1px solid rgba(255,255,255,.18); font-size:clamp(5px,1cqw,9px); font-weight:900; letter-spacing:.14em; }
.turn-forward { animation:turn-forward .46s cubic-bezier(.45,.02,.72,.32) both; }
.turn-backward { animation:turn-backward .46s cubic-bezier(.45,.02,.72,.32) both; }
@keyframes turn-forward { to { opacity:0; transform:perspective(1800px) rotateY(-63deg) translateX(-7%); filter:brightness(.35); } }
@keyframes turn-backward { to { opacity:0; transform:perspective(1800px) rotateY(63deg) translateX(7%); filter:brightness(.35); } }
.ending { position:fixed; z-index:60; inset:0 0 var(--legal-footer-space); display:grid; place-content:center; justify-items:center; overflow:auto; padding:32px 24px; background:rgba(2,3,3,.97); animation:end-in .42s ease both; }
.ending span { color:#6f736f; font-size:9px; letter-spacing:.24em; text-transform:uppercase; }
.ending-candidate { width:clamp(90px,9vw,126px); aspect-ratio:4/5; margin:16px 0 0; overflow:hidden; background:#e4e8ee; border:2px solid var(--cyan); border-radius:24px 24px 10px 10px; box-shadow:0 18px 42px rgba(0,0,0,.5),0 0 30px rgba(67,229,237,.13); }
.ending-candidate img { display:block; width:100%; height:100%; object-fit:cover; object-position:center top; }
.ending p { max-width:1050px; margin:16px 0 0; text-align:center; font-family:"New People"; font-size:clamp(24px,4.2vw,52px); font-weight:500; line-height:1.08; letter-spacing:-.035em; }
.ending-name { color:#ef4056; font-weight:700; }
.ending-vote { display:block; margin-top:.24em; font-weight:900; }
.ending-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:9px; margin-top:26px; }
.ending-actions button { min-height:46px; padding:0 20px; color:#e9e4d9; background:#101414; border:1px solid rgba(233,225,209,.25); font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; cursor:pointer; }
.ending-actions button:nth-child(2) { color:#071011; background:var(--cyan); border-color:var(--cyan); }
.ending-actions button:hover { border-color:var(--cyan); }
@keyframes end-in { from { opacity:0; } }
.controls { position:relative; z-index:30; display:grid; grid-template-columns:44px 1fr; align-items:stretch; gap:7px; width:100%; margin:0; padding:0; }
.controls button { min-height:44px; border:1px solid rgba(255,255,255,.12); background:transparent; cursor:pointer; }
.controls button:disabled { opacity:.28; cursor:default; }
.controls .next { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 11px; color:#071011; background:var(--cyan); border-color:var(--cyan); font-size:9px; font-weight:900; letter-spacing:.04em; }
.next b { font-size:22px; font-weight:400; }
.hint { color:#747a77; font-size:8px; line-height:1.35; letter-spacing:.06em; }
.legal-footer { position:absolute; z-index:70; right:0; bottom:0; left:0; height:var(--legal-footer-space); display:flex; align-items:center; justify-content:center; padding:5px clamp(12px,2vw,32px); color:rgba(233,228,217,.58); background:rgba(5,7,8,.96); border-top:1px solid rgba(67,229,237,.18); }
.legal-footer p { max-width:1600px; margin:0; font-size:clamp(6px,.5vw,7px); font-weight:400; line-height:1.25; text-align:center; }
noscript { position:fixed; inset:auto 20px 20px; z-index:99; padding:15px; color:#111; background:#fff; }

/* «Бирюза и три тени района»: production layout overrides. */
.cover-button img,.cover-button video{inset:40% 0 7%;height:53%;object-position:49% 42%}
.cover-shade{inset:40% 0 7%}
.cover-copy strong{max-width:none;font-size:clamp(30px,9cqw,58px);line-height:.88;white-space:nowrap}
.cover-copy strong:after{margin-top:6%}
.copy{inset:6% 5% auto}
.caption,.bubble{font-size:clamp(8px,2.05cqw,14px)}
#frame-1 .caption{max-width:58%}
#frame-2 .copy{inset:auto 5% 7%;justify-content:flex-start}
#frame-2 .caption{max-width:78%}
#frame-3 .copy{justify-content:flex-end}
#frame-3 .caption{max-width:62%}
#frame-4 .caption{max-width:59%}
#frame-5 .copy{justify-content:flex-start}
#frame-5 .caption{max-width:56%}
#frame-6 .caption{max-width:66%}
#frame-7 .copy{inset:auto 5% 7%;justify-content:flex-start}
#frame-7 .caption{max-width:72%}
#frame-8 .copy{inset:6% 5% auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.75fr);align-items:start}
#frame-8 .caption{max-width:none}
#frame-8 .bubble{max-width:none;margin:0}
#frame-9 .caption{max-width:55%}
#frame-10 .copy{justify-content:flex-end}
#frame-10 .bubble{max-width:48%}
#frame-11 .copy{inset:6% 5%;display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-start;gap:8%}
#frame-11 .bubble{max-width:72%;margin:0}
#frame-12 .copy{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start}
#frame-12 .caption{max-width:none}
#frame-12 .bubble{max-width:none;margin:0}
.panel-link{position:relative;z-index:8;display:inline-flex;align-items:center;justify-content:space-between;gap:18px;min-height:38px;margin-top:auto;padding:9px 12px;color:#061011;background:var(--cyan);border:2px solid #071011;box-shadow:5px 5px 0 #071011;font-size:clamp(7px,1.85cqw,12px);font-weight:900;letter-spacing:.05em;text-decoration:none;text-transform:uppercase;pointer-events:auto;transition:transform .16s ease,box-shadow .16s ease}
.panel-link:hover,.panel-link:focus-visible{transform:translate(-2px,-2px);box-shadow:7px 7px 0 #071011;outline:0}
.ending-actions .ending-link{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 20px;color:#071011;background:var(--cyan);border:1px solid var(--cyan);font-size:10px;font-weight:900;letter-spacing:.05em;text-decoration:none;text-transform:uppercase}
html[data-theme="light"] .ending-actions .ending-link{color:#04413f;background:#0ad1c9;border-color:#0ad1c9;border-radius:999px;box-shadow:0 12px 30px rgba(10,209,201,.22)}
@media(max-width:900px){.cover-copy strong{font-size:clamp(29px,8.4vw,49px)}.panel-link{min-height:32px;padding:7px 9px;box-shadow:3px 3px 0 #071011}.ending-actions .ending-link{min-height:44px}}
@media(max-width:520px){.cover-copy strong{font-size:clamp(26px,9vw,42px)}.ending-actions{display:grid}.ending-actions .ending-link{width:100%}}
html[data-theme="light"] { --cyan:#0ad1c9; --yellow:#ef4056; --paper:#fff; color-scheme:light; background:#f6fdfc; }
html[data-theme="light"] body { color:#000; background:#f6fdfc; }
html[data-theme="light"] .comic-shell { background:radial-gradient(circle at 78% 8%,rgba(10,209,201,.22),transparent 26rem),radial-gradient(circle at 10% 76%,rgba(214,238,236,.9),transparent 32rem),#f6fdfc; }
html[data-theme="light"] .comic-shell:before { opacity:.18; background-image:repeating-linear-gradient(97deg,transparent 0 8px,rgba(4,65,63,.06) 9px,transparent 10px 18px); }
html[data-theme="light"] .page-meta { border-left-color:#0ad1c9; }
html[data-theme="light"] .kicker { color:#0ba8a2; }
html[data-theme="light"] .page-meta-current { border-top-color:rgba(0,0,0,.16); }
html[data-theme="light"] .candidate-card-main { display:block; background:rgba(255,255,255,.78); border-color:rgba(255,255,255,.9); border-radius:28px; box-shadow:0 22px 60px rgba(4,92,88,.14),0 2px 6px rgba(4,92,88,.05); }
html[data-theme="light"] .candidate-card-main figcaption { visibility:visible; }
html[data-theme="light"] .candidate-card-main .candidate-portrait { background:#e4e8ee; }
html[data-theme="light"] .candidate-card-main .candidate-portrait img { opacity:1; }
html[data-theme="light"] .candidate-card-main .candidate-portrait:before,html[data-theme="light"] .candidate-card-main .candidate-portrait:after { display:none; }
html[data-theme="light"] .candidate-card figcaption { color:#04413f; }
html[data-theme="light"] .candidate-card small { color:rgba(4,65,63,.7); }
html[data-theme="light"] .reader-navigation { color:#000; background:rgba(255,255,255,.68); border-color:rgba(255,255,255,.86); border-right-color:#0ad1c9; border-radius:28px; box-shadow:0 22px 60px rgba(4,92,88,.12),0 2px 6px rgba(4,92,88,.05); }
html[data-theme="light"] .theme-toggle { color:#04413f; background:rgba(255,255,255,.72); border-color:rgba(4,65,63,.2); box-shadow:0 5px 16px rgba(4,92,88,.08); }
html[data-theme="light"] .theme-toggle i { background:#d7f6f3; border-color:rgba(4,65,63,.2); box-shadow:inset 0 1px 3px rgba(4,65,63,.12); }
html[data-theme="light"] .theme-toggle i:after { background:#04413f; box-shadow:0 2px 6px rgba(4,65,63,.25),0 0 0 2px rgba(11,168,162,.12); }
html[data-theme="light"] .progress span,html[data-theme="light"] .hint { color:rgba(0,0,0,.62); }
html[data-theme="light"] .progress i { background:linear-gradient(90deg,#0ad1c9 var(--progress),rgba(4,65,63,.16) var(--progress)); }
html[data-theme="light"] .mouse-guide p { border-top-color:rgba(0,0,0,.12); }
html[data-theme="light"] .mouse-guide b { color:#fff; background:#000; }
html[data-theme="light"] .mouse-guide span { color:#000; }
html[data-theme="light"] .mouse-guide i { color:#0ba8a2; }
html[data-theme="light"] .controls button { color:#04413f; border-color:rgba(4,65,63,.18); background:rgba(255,255,255,.54); border-radius:999px; }
html[data-theme="light"] .controls .next { color:#04413f; background:#0ad1c9; border-color:#0ad1c9; box-shadow:0 12px 30px rgba(10,209,201,.28); }
html[data-theme="light"] .page-sheet { box-shadow:0 34px 90px rgba(4,92,88,.2),inset 0 0 70px rgba(0,0,0,.12); }
html[data-theme="light"] .ending { color:#000; background:rgba(246,253,252,.98); }
html[data-theme="light"] .legal-footer { color:rgba(4,65,63,.68); background:rgba(246,253,252,.97); border-top-color:rgba(4,65,63,.14); }
html[data-theme="light"] .ending span { color:#0ba8a2; }
html[data-theme="light"] .ending-actions button { color:#04413f; background:#fff; border-color:rgba(4,65,63,.2); border-radius:999px; }
html[data-theme="light"] .ending-actions button:nth-child(2) { color:#04413f; background:#0ad1c9; border-color:#0ad1c9; }
@media(max-width:900px) {
  :root { --legal-footer-space:48px; }
  .reader-layout { grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr) auto; gap:8px; height:calc(100svh - var(--legal-footer-space)); padding:8px; }
  .page-meta { align-self:auto; display:grid; grid-template-columns:1fr auto 44px; align-items:end; gap:12px; padding:5px 8px 5px 10px; border-left-width:2px; }
  html[data-theme="light"] .page-meta { grid-template-columns:1fr auto 44px; }
  .page-meta .kicker { display:none; }
  .page-meta h1 { font-size:14px; line-height:.95; }
  .page-meta-current { margin:0; padding:0; border:0; text-align:right; }
  .page-meta-current span { margin-bottom:3px; font-size:7px; }
  .page-meta-current strong { font-size:10px; }
  .candidate-card { grid-column:3; grid-row:1; width:44px; height:44px; margin:0; border-radius:50%; }
  .candidate-card img { width:44px; height:44px; aspect-ratio:1; object-position:center 20%; }
  .candidate-card figcaption { display:none; }
  .comic-page { align-self:center; justify-self:center; width:min(calc(100vw - 16px),calc(66.666svh - 92px)); }
  .reader-navigation { align-self:auto; display:grid; grid-template-columns:100px 82px minmax(150px,1fr); grid-template-areas:"theme progress controls" "guide guide guide"; align-items:center; gap:7px 9px; width:100%; padding:7px 9px; border-right-width:2px; }
  .theme-toggle { grid-area:theme; gap:6px; min-height:38px; padding:4px 7px 4px 4px; font-size:7px; }
  .theme-toggle i { width:30px; height:18px; }
  .theme-toggle i:after { top:2px; left:2px; width:12px; height:12px; }
  .theme-toggle[aria-pressed="true"] i:after { transform:translateX(12px); }
  .progress { grid-area:progress; }
  .mouse-guide { grid-area:guide; }
  .controls { grid-area:controls; }
  .progress span { margin-bottom:5px; font-size:8px; }
  .mouse-guide { display:flex; gap:10px; }
  .mouse-guide p { grid-template-columns:30px 1fr; flex:1; gap:6px; padding:5px 0; }
  .mouse-guide b { font-size:7px; }
  .mouse-guide span { font-size:8px; }
  .mouse-guide i { display:none; }
  .hint { display:none; }
  .controls { grid-template-columns:38px 1fr; }
  .controls button { min-height:38px; }
  .controls .next { font-size:8px; }
  .cover-button { border-width:5px; outline-width:2px; }
  .cover-copy strong { font-size:clamp(36px,13vw,58px); }
  .legal-footer { align-items:flex-start; padding:5px 8px; }
  .legal-footer p { font-size:5px; line-height:1.22; text-align:left; }
}
@media(max-width:520px) {
  .reader-navigation { grid-template-columns:84px 64px minmax(150px,1fr); }
  .mouse-guide { gap:5px; }
  .mouse-guide p { grid-template-columns:30px 1fr; gap:4px; }
  .mouse-guide b:after { content:attr(data-mobile); }
  .mouse-guide span { display:block; font-size:7px; }
  .controls { grid-template-columns:38px 1fr; }
  .controls .next { display:flex; padding-inline:8px; }
  .ending { display:flex; flex-direction:column; align-items:center; justify-content:flex-start; overflow-y:auto; padding:16px; }
  .ending:before,.ending:after { content:""; flex:1 1 12px; min-height:0; }
  .ending>span,.ending-candidate,.ending>p,.ending-actions { flex:none; }
  .ending-candidate { width:80px; margin-top:10px; }
  .ending p { margin-top:12px; font-size:clamp(22px,7vw,29px); line-height:1.04; }
  .ending-actions { display:grid; width:min(100%,310px); margin-top:18px; }
}
/* Production polish: protected artwork, compact chrome and stable viewport fit. */
.reader-layout,.comic-page,.cover { min-width:0; min-height:0; }
.panel { contain:layout paint style; }
.comic-page.turn-forward,.comic-page.turn-backward { will-change:transform,opacity,filter; }
.caption,.bubble { text-wrap:pretty; hyphens:auto; }
.caption { max-width:74%; padding:1.55% 2.15%; background:rgba(246,241,231,.94); font-size:clamp(8px,2.15cqw,14px); line-height:1.16; }
.bubble { font-size:clamp(9px,2.2cqw,14px); }
.image-button,.cover-button,.controls button,.theme-toggle { touch-action:manipulation; }
.comic-page,.cover { user-select:none; }
.controls button,.theme-toggle { transition:transform .18s ease,border-color .18s ease,background-color .18s ease; }
.controls .next span { min-width:0; text-wrap:balance; }
#frame-2 .copy,#frame-5 .copy,#frame-6 .copy,#frame-7 .copy { justify-content:flex-end; }
#frame-2 .caption,#frame-5 .caption { max-width:70%; }
#frame-6 .copy { inset:4% 4% auto 35%; }
#frame-6 .caption,#frame-7 .caption { max-width:100%; }
#frame-7 .copy { inset:4% 4% auto 38%; }
#frame-9 .copy { inset:auto 4% 5% 34%; }
#frame-9 .caption { max-width:100%; }
#frame-11 .copy { inset:6% 42% auto 4%; }
#frame-11 .caption { max-width:100%; padding:1.2% 1.8%; }
#frame-12 .copy { inset:5% 35% auto; justify-content:center; }
#frame-12 .bubble { max-width:100%; margin:0; padding:2% 7%; }
#frame-15 .copy { inset:0; display:block; }
#frame-15 .caption { position:absolute; right:4%; bottom:5%; max-width:66%; }
#frame-15 .bubble { position:absolute; top:6%; right:4%; max-width:58%; margin:0; padding:3% 6%; }
@media(hover:hover) and (pointer:fine) {
  .controls button:not(:disabled):hover { transform:translateY(-1px); border-color:var(--cyan); }
  .theme-toggle:hover { color:var(--cyan); background:rgba(67,229,237,.06); }
}
@media(max-width:900px) {
  .comic-page { width:min(calc(100vw - 16px),calc(66.666svh - 152px)); }
  .reader-layout { align-content:stretch; }
  .reader-navigation { overflow:hidden; }
}
@supports(height:100dvh) {
  .comic-shell { height:100dvh; }
  .reader-layout { height:calc(100dvh - var(--legal-footer-space)); }
  @media(max-width:900px) { .comic-page { width:min(calc(100vw - 16px),calc(66.666dvh - 152px)); } }
}
@media(max-height:720px) and (max-width:900px) {
  .reader-navigation { gap:5px 8px; padding-block:5px; }
  .mouse-guide p { padding-block:3px; }
}
@media(prefers-reduced-motion:reduce) { html{scroll-behavior:auto}.panel,.comic-page,.image-button img,.image-button video,.ending,.controls button,.theme-toggle{animation-duration:.01ms!important;transition-duration:.01ms!important}.candidate-card-main .candidate-portrait:before,.candidate-card-main .candidate-portrait:after{animation:none} }

/* Final frame-specific placement takes precedence over the inherited reader rules. */
#frame-1 .copy{inset:6% 5% auto;justify-content:flex-end}#frame-1 .caption{max-width:54%}
#frame-2 .copy{inset:auto 5% 6% 34%;justify-content:flex-end}#frame-2 .caption{max-width:100%}
#frame-3 .image-button img,#frame-3 .image-button video{object-position:right center}
#frame-3 .copy{inset:auto 5% 7%;justify-content:flex-start}#frame-3 .caption{max-width:72%}
#frame-4 .copy{inset:6% 5% auto;justify-content:flex-start}#frame-4 .caption{max-width:54%}
#frame-5 .image-button img,#frame-5 .image-button video{object-position:center top}
#frame-5 .copy{inset:auto 5% 6%;justify-content:flex-start}#frame-5 .caption{max-width:58%}
#frame-6 .copy{inset:6% 5% auto;justify-content:flex-start}#frame-6 .caption{max-width:66%}
#frame-7 .copy{inset:6% 5% auto;justify-content:flex-start}#frame-7 .caption{max-width:66%}
#frame-8 .image-button img,#frame-8 .image-button video{object-position:center top}
#frame-8 .copy{inset:0;display:block}#frame-8 .caption{position:absolute;top:6%;left:5%;max-width:55%;margin:0}
#frame-9 .image-button img,#frame-9 .image-button video{object-position:center top}
#frame-9 .copy{inset:0;display:block}#frame-9 .caption{position:absolute;left:5%;bottom:7%;max-width:62%;margin:0}
#frame-10 .image-button img,#frame-10 .image-button video{object-position:center top}
#frame-10 .copy{inset:0;display:block}#frame-10 .bubble{position:absolute;left:34%;bottom:6%;max-width:60%;margin:0}#frame-10 .bubble:after{top:-30%;right:52%;bottom:auto;border-right:0;border-bottom:0;border-top:inherit;border-left:inherit;transform:rotate(34deg) skew(-12deg)}
#frame-11 .copy{inset:0;display:block}#frame-11 .bubble{position:absolute;top:5%;right:4%;max-width:54%;margin:0;padding:2% 4%}#frame-11 .panel-link{position:absolute;right:5%;bottom:7%;width:62%;margin:0}
#frame-12 .copy{inset:0;display:block}#frame-12 .caption{position:absolute;left:5%;bottom:7%;max-width:88%;margin:0}
@media(max-width:900px){.cover-copy strong{font-size:clamp(29px,8.4vw,49px)}}
@media(max-width:520px){.cover-copy strong{font-size:clamp(26px,9vw,42px)}}