/* WHY2MAKE · ch2.css · v0.46 (20.09, отдельная страница night.html) · Глава 2 «А внизу есть продолжение» — комната — сгенерированная картинка (assets/room/room.webp), поверх — свет, ночник, Hush, Чесс (canvas, движок плашки главы 1), моноблок с кодом, календарь.
   Токены и шрифты — из :root главной. Второй слой главы — .ch2.reveal (сетка, подписи, карточка «наблюдение → правило → результат»).
   Правила для главы 1 (длинный лендинг, тишина при прокрутке) — в конце файла. */

.ch2{ position:relative; z-index:2; isolation:isolate; color:var(--light); font-family:var(--text); cursor:auto; --power:0; --warmc:255,179,71;
  padding:clamp(48px,7vh,84px) clamp(16px,5vw,72px) 44px;
  background:linear-gradient(180deg,#0d1120 0%, var(--deep) 30%, #090b12 100%); border-top:1px solid rgba(3,217,255,.3) }
.ch2 *{ cursor:auto } .ch2 button, .ch2 a, .ch2 label{ cursor:pointer } .ch2 input[type=text]{ cursor:text }
.ch2::before{ content:""; position:absolute; left:0; right:0; top:-1px; height:1px; pointer-events:none; opacity:.5;
  background:linear-gradient(90deg, transparent, rgba(3,217,255,.8) 45%, rgba(255,179,71,.9) 55%, transparent) }

.c2-head{ width:min(100%,1180px); margin:0 auto 26px; display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:12px clamp(24px,4vw,64px); align-items:end }
.c2-eyebrow{ grid-column:1; margin:0 0 .6rem; font:500 .7rem var(--mono); letter-spacing:.28em; text-transform:uppercase; color:var(--amber) }
.c2-title{ grid-column:1; margin:0; font:600 clamp(2.1rem,4.2vw,3.7rem)/1.05 var(--display); letter-spacing:-.015em; color:var(--light) }
.c2-lead{ grid-column:2; margin:0 0 .5rem; max-width:none; font:clamp(1rem,1.25vw,1.15rem)/1.55 var(--text); color:rgba(245,247,255,.82) }


/* ---------- комната ----------
   Фон — сгенерированная картинка assets/room/room.webp (1536×1024, 3:2): окно с луной слева, полка с книгами, две картины, стол во всю ширину.
   Поверх — только живое: свет лампы, светлячки, ночник, Hush, Чесс на полке (canvas), моноблок с кодом, календарь «1 ноября», пузыри, подписи второго слоя.
   Координаты — проценты картинки: плашка полки y 30,6 %, столешница y 72–88 %, картины x 47–68 %, календарь картинки x 76–88 % (закрыт моноблоком). */
.c2-scene{ position:relative; width:min(100%,1180px); margin:0 auto }
.c2-room{ position:relative; width:100%; aspect-ratio:3/2; border-radius:22px; overflow:hidden; isolation:isolate; background:#0d1329;
  box-shadow:0 30px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(245,247,255,.08); border:1px solid rgba(245,247,255,.08) }
.c2-wall{ position:absolute; inset:0; background:radial-gradient(80% 60% at 18% 8%, rgba(139,92,246,.12), transparent 60%), linear-gradient(180deg,#141b31 0%,#101830 55%,#0d1327 100%) } /* подложка, пока картинка грузится */
.c2-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 50%; display:block }
.c2-moonlight{ position:absolute; inset:0; pointer-events:none; opacity:calc(.3 + .7 * (1 - var(--power))); transition:opacity .7s; z-index:1;
  background:radial-gradient(28% 40% at 16% 30%, rgba(150,180,255,.12), transparent 72%) }
.c2-wallglow{ position:absolute; left:var(--glx,11%); top:var(--gly,70%); width:80%; aspect-ratio:1; transform:translate(-50%,-50%); pointer-events:none; border-radius:50%; transition:background .6s; z-index:1; mix-blend-mode:screen;
  background:radial-gradient(closest-side, rgba(var(--warmc),calc(.42 * var(--power))), rgba(var(--warmc),calc(.14 * var(--power))) 40%, transparent 70%); filter:blur(10px) }
.c2-pool{ position:absolute; left:-4%; top:64%; width:46%; height:40%; border-radius:50%; pointer-events:none; filter:blur(14px); transition:background .6s; z-index:1; mix-blend-mode:screen;
  background:radial-gradient(closest-side, rgba(var(--warmc),calc(.5 * var(--power))), transparent 72%) } /* тёплое пятно на столешнице */
.c2-motes{ position:absolute; inset:0; bottom:30%; pointer-events:none; overflow:hidden; z-index:1 }
.c2-mote{ position:absolute; width:3px; height:3px; border-radius:50%; background:#FFE0A8; opacity:0; box-shadow:0 0 6px rgba(255,224,168,.9); animation:c2-mote var(--dur,7s) ease-in-out infinite; animation-delay:var(--delay,0s) }
@keyframes c2-mote{ 0%{opacity:0; transform:translateY(0)} 30%{opacity:calc(.25 + .5 * var(--power))} 70%{opacity:calc(.15 + .3 * var(--power))} 100%{opacity:0; transform:translateY(-22px)} }

/* календарь «1 ноября · открытие» — крафт-бумага на гвоздике, на свободной стене левее картин (генеративный «October» закрыт моноблоком) */
.c2-calendar{ position:absolute; left:75%; top:41%; width:13.4%; aspect-ratio:5/6.4; z-index:2; border-radius:2px; background:linear-gradient(180deg,#b9a07a,#a58a66); box-shadow:0 10px 18px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,240,210,.35), 0 0 0 1px rgba(60,40,20,.35); color:#3a2a1c; text-align:center; font-family:var(--mono); transform:none }
.c2-calendar .pin{ position:absolute; left:50%; top:-7px; width:9px; height:9px; margin-left:-4.5px; border-radius:50%; background:radial-gradient(circle at 35% 35%, #d9c4a0, #6b4c2a 70%); box-shadow:0 2px 4px rgba(0,0,0,.6) }
.c2-calendar .mo{ display:block; padding:12% 0 4%; font:500 clamp(6px,.62vw,8px) var(--display); letter-spacing:.16em; text-transform:uppercase; color:#4a3524; border-bottom:1px solid rgba(60,40,20,.25); margin:0 8% }
.c2-calendar b{ display:block; padding-top:6%; font:600 clamp(16px,2.3vw,32px)/1.05 var(--display); color:#2e2116 }
.c2-calendar .wd{ display:block; padding:4% 0 10%; font-size:clamp(5px,.5vw,6.5px); letter-spacing:.14em; text-transform:uppercase; color:#6a5038 }

/* картина над котом — сгенерирована отдельно (assets/room/picture-boat.webp, 3:2, рама в кадре целиком) */
.c2-picture{ position:absolute; left:70.5%; top:4%; width:15%; aspect-ratio:3/2; object-fit:cover; z-index:2; border-radius:2px; box-shadow:0 14px 26px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.4) }

/* Чесс на правом краю полки — вне комнаты (лапы могут висеть над рамкой моноблока) */
.c2-cat{ position:absolute; left:74%; top:18.6%; width:13%; aspect-ratio:492/480; padding:0; background:none; border:0; border-radius:50%; z-index:6 }
.c2-cat canvas{ display:block; width:100%; height:100%; filter:drop-shadow(0 12px 14px rgba(0,0,0,.55)) brightness(calc(.86 + .18 * var(--power))); transition:filter .6s }

/* ночник — на столе перед окном */
.c2-lamp-wrap{ position:absolute; left:4%; bottom:14.5%; width:14%; z-index:5; text-align:center }
.c2-lamp{ position:relative; display:block; width:100%; padding:0; background:none; border:0; border-radius:50%; outline-offset:8px }
.c2-lamp img{ position:relative; z-index:1; display:block; width:100%; height:auto; filter:brightness(calc(.62 + .45 * var(--power))) saturate(calc(.8 + .3 * var(--power))) drop-shadow(0 18px 20px rgba(0,0,0,.5)); transition:filter .55s }
.c2-lamp::after{ content:""; position:absolute; left:16%; right:16%; bottom:-1.5%; height:6%; border-radius:50%; background:radial-gradient(closest-side, rgba(0,0,0,.65), transparent 75%); pointer-events:none } /* контактная тень */
.c2-halo{ position:absolute; left:50%; top:42%; width:150%; aspect-ratio:1; transform:translate(-50%,-50%); border-radius:50%; pointer-events:none; filter:blur(12px); transition:background .55s;
  background:radial-gradient(closest-side, rgba(255,226,170,calc(.62 * var(--power))), rgba(var(--warmc),calc(.28 * var(--power))) 45%, transparent 72%) }
.c2-lamp.run img{ animation:c2-flicker .5s ease }
@keyframes c2-flicker{ 0%{filter:brightness(.6)} 40%{filter:brightness(1.35)} 70%{filter:brightness(.95)} 100%{filter:brightness(calc(.62 + .45 * var(--power)))} }
.c2-plaque{ position:absolute; left:50%; top:calc(100% + 10px); transform:translateX(-50%); display:inline-flex; align-items:center; gap:.5rem; padding:.3rem .75rem; border-radius:999px; background:rgba(11,13,20,.62); border:1px solid var(--glass-line); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); font:.7rem var(--mono); letter-spacing:.04em; color:rgba(245,247,255,.82); white-space:nowrap; max-width:200%; overflow:hidden; text-overflow:ellipsis }
.c2-plaque b{ font-weight:500; color:var(--amber) }

/* Hush — на столе между ночником и моноблоком */
.c2-hush{ position:absolute; left:20%; bottom:14.5%; width:18%; z-index:5 }
.c2-hush::after{ content:""; position:absolute; left:18%; right:18%; bottom:-1%; height:5%; border-radius:50%; background:radial-gradient(closest-side, rgba(0,0,0,.6), transparent 75%); pointer-events:none }
#c2-hush-btn{ position:relative; z-index:1; display:block; width:100%; padding:0; background:none; border:0; border-radius:50% }
#c2-hush-btn img{ display:block; width:100%; height:auto; filter:drop-shadow(0 18px 22px rgba(0,0,0,.5)) brightness(calc(.84 + .24 * var(--power))); transition:filter .55s, transform .3s }
.c2-hush.shield #c2-hush-btn img{ transform:rotate(-6deg) translateX(-4%) }
.c2-hush.arriving #c2-hush-btn img, .c2-hush.replay #c2-hush-btn img{ animation:c2-land .9s cubic-bezier(.2,.9,.3,1.2) }
@keyframes c2-land{ 0%{transform:translateY(-120%) scale(.2) rotate(-25deg); opacity:0} 55%{transform:translateY(4%) scale(1.04) rotate(4deg); opacity:1} 100%{transform:none} }
.c2-portal{ position:absolute; left:50%; top:-8%; width:80%; aspect-ratio:1; transform:translate(-50%,0) scaleY(.35); border-radius:50%; pointer-events:none; opacity:0;
  border:2px solid rgba(3,217,255,.8); box-shadow:0 0 24px rgba(3,217,255,.55), inset 0 0 30px rgba(139,92,246,.45); background:radial-gradient(closest-side, rgba(139,92,246,.35), transparent 70%) }
.c2-hush.arriving .c2-portal, .c2-hush.replay .c2-portal{ animation:c2-portal 1.1s ease-out }
@keyframes c2-portal{ 0%{opacity:0; transform:translate(-50%,0) scaleY(.35) scale(.4)} 30%{opacity:1; transform:translate(-50%,0) scaleY(.35) scale(1.05)} 100%{opacity:0; transform:translate(-50%,0) scaleY(.35) scale(1.25)} }
.c2-replay{ position:absolute; left:50%; top:calc(100% + 8px); transform:translateX(-50%); white-space:nowrap; font:.7rem var(--mono); letter-spacing:.04em; color:rgba(245,247,255,.55); background:none; border:0; padding:.2rem .5rem }
.c2-replay:hover{ color:var(--cyan) }

/* пузыри — как .bubble на главной */
.c2-bubble{ position:absolute; z-index:9; max-width:min(300px,26%); padding:.55rem .85rem .6rem; border-radius:14px; text-align:left;
  background:rgba(245,247,255,.12); border:1px solid rgba(245,247,255,.28); backdrop-filter:blur(16px) saturate(160%); -webkit-backdrop-filter:blur(16px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(245,247,255,.22), 0 12px 30px rgba(0,0,0,.35); font:.86rem/1.4 var(--text); color:var(--light);
  opacity:0; transform:translateY(6px) scale(.96); transition:opacity .35s, transform .35s; pointer-events:none }
.c2-bubble.on{ opacity:1; transform:none } .c2-bubble p{ margin:0 }
.c2-bubble .c2-who{ display:block; margin-bottom:.15rem; font:500 .6rem var(--mono); letter-spacing:.24em; color:rgba(245,247,255,.5) }
.c2-bubble::after{ content:""; position:absolute; width:14px; height:9px; background:rgba(245,247,255,.22); clip-path:polygon(0 0,100% 0,30% 100%) }
.c2-bubble-hush{ left:15%; top:44%; max-width:min(300px,24%) } .c2-bubble-hush::after{ left:10px; bottom:-8px }
.c2-bubble-cat{ left:50%; top:6%; max-width:min(300px,19%) } .c2-bubble-cat::after{ right:10px; bottom:-8px; transform:scaleX(-1) }
.c2-bubble.quiet{ font-size:.78rem; color:rgba(245,247,255,.8) }

/* макбук — копия ноутбука с главной: те же графит, стекло, крышка с камерой, тонкая база с вырезом; размеры в cqw, чтобы масштабироваться как картинка */
.c2-laptop{ position:absolute; left:57%; bottom:15.2%; width:36%; z-index:5; container-type:inline-size; padding:0 3%; perspective:1400px } /* база на столешнице (~86 %) */
.c2-laptop::after{ content:""; position:absolute; left:6%; right:6%; bottom:-1.6%; height:4%; border-radius:50%; background:radial-gradient(closest-side, rgba(0,0,0,.65), transparent 78%); z-index:-1 } /* тень на столе */
.c2-lid{ position:relative; transform:rotateX(3deg); transform-origin:50% 100%; border-radius:2.4cqw 2.4cqw .8cqw .8cqw; padding:1.4cqw 1.4cqw 1.8cqw; background:linear-gradient(180deg,#2a2f3d,#171b26 60%,#0f1219);
  box-shadow:inset 0 1px 0 rgba(245,247,255,.22), inset 0 -1px 0 rgba(0,0,0,.6), 0 30px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.5) }
.c2-lid::before{ content:""; position:absolute; left:50%; top:.45cqw; width:1cqw; height:1cqw; margin-left:-.5cqw; border-radius:50%; background:#0a0c12; box-shadow:inset 0 0 0 1px rgba(245,247,255,.12); z-index:2 }
.c2-lid::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:linear-gradient(100deg, transparent 60%, rgba(255,209,150,calc(.04 + .10 * var(--power))) 100%); transition:background .6s } /* отсвет лампы на крышке */
.c2-screen{ position:relative; aspect-ratio:16/10; border-radius:1cqw; overflow:hidden; background:#0b0d14 }
.c2-screen::after{ content:""; position:absolute; inset:0; pointer-events:none; z-index:6; background:linear-gradient(115deg, rgba(245,247,255,.09) 0%, rgba(245,247,255,.02) 35%, transparent 55%) }
.c2-base{ position:relative; height:2.2cqw; margin:0 -3%; border-radius:0 0 2cqw 2cqw; background:linear-gradient(180deg,#3a4152,#232838 55%,#151824);
  box-shadow:inset 0 1px 0 rgba(245,247,255,.28), 0 12px 24px rgba(0,0,0,.5) }
.c2-base::before{ content:""; position:absolute; left:50%; top:0; width:14%; height:.8cqw; margin-left:-7%; border-radius:0 0 1.2cqw 1.2cqw; background:#0f1219; box-shadow:inset 0 -1px 0 rgba(245,247,255,.12) }
/* IDE внутри — как на ноутбуке, только читаемый; размеры в cqw, чтобы масштабироваться вместе с iMac */
.c2-ide{ position:absolute; inset:0; display:grid; grid-template-columns:4.4cqw 27cqw 1fr; grid-template-rows:1fr 4.2cqw; font-size:clamp(8px,2.75cqw,13px); line-height:1.6; font-family:var(--mono); color:rgba(245,247,255,.72); background:#12151f }
.c2-ide .act{ grid-row:1 / span 2; background:#0d1017; display:flex; flex-direction:column; gap:1.6cqw; align-items:center; padding-top:1.6cqw; border-right:1px solid rgba(245,247,255,.06) }
.c2-ide .act i{ width:1.9cqw; height:1.9cqw; border-radius:2px; background:rgba(245,247,255,.22) } .c2-ide .act i:first-child{ background:var(--cyan); opacity:.9 }
.c2-ide .side{ grid-row:1 / span 2; background:#0f121b; padding:1.4cqw 1cqw; border-right:1px solid rgba(245,247,255,.06); font-size:.84em; overflow:hidden; min-width:0 }
.c2-ide .side b{ display:block; margin:1.2cqw 0 .4cqw; font-weight:500; letter-spacing:.12em; font-size:.76em; color:rgba(245,247,255,.38) } .c2-ide .side b:first-child{ margin-top:0 }
.c2-ide .side span{ display:block; padding:.15em .6cqw; border-radius:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis } .c2-ide .side span.on{ color:var(--light); background:rgba(3,217,255,.10) }
.c2-ide .side button{ display:block; width:100%; text-align:left; padding:.25em .6cqw; margin:0 0 .1em; border:0; border-radius:3px; background:none; font:inherit; line-height:1.3; color:var(--cyan); white-space:normal; cursor:pointer }
.c2-ide .side button.dim{ color:rgba(245,247,255,.72) } .c2-ide .side button:hover{ background:rgba(3,217,255,.10); color:var(--cyan) } .c2-ide .side button:focus-visible{ outline:1px solid var(--cyan); outline-offset:-1px }
.c2-ide .ed{ position:relative; background:#12151f; overflow:hidden; display:flex; flex-direction:column; min-width:0 }
.c2-ide .tabs{ display:flex; height:2em; background:#0d1017; border-bottom:1px solid rgba(245,247,255,.06); font-size:.9em; flex:none }
.c2-ide .tabs span{ padding:0 1.8cqw; line-height:2.2em; color:rgba(245,247,255,.42); border-right:1px solid rgba(245,247,255,.06) } .c2-ide .tabs span.on{ color:var(--light); background:#12151f; box-shadow:inset 0 2px 0 var(--cyan) }
.c2-ide .mini{ position:absolute; right:0; top:2em; bottom:0; width:2.2cqw; background:repeating-linear-gradient(180deg, rgba(3,217,255,.18) 0 1px, transparent 1px 3px); opacity:.45; pointer-events:none }
.c2-code{ padding:.6em 3cqw .4em .6cqw; counter-reset:ln; color:rgba(245,247,255,.9) } .c2-code[hidden]{ display:none }
.c2-code .ln{ display:block; position:relative; padding-left:2.4em; margin:0; white-space:nowrap } .c2-code .ln::before{ counter-increment:ln; content:counter(ln); position:absolute; left:0; width:1.7em; text-align:right; color:rgba(245,247,255,.28) }
.c2-code .ln.cur::after{ content:""; display:inline-block; width:1px; height:1em; background:var(--light); vertical-align:-.15em; margin-left:2px; animation:c2-blink 1s steps(2) infinite }
@keyframes c2-blink{ 50%{opacity:0} }
.c2-comment, .c2-code .c2-comment.ln{ color:rgba(245,247,255,.42); white-space:normal } .c2-line .k{ color:var(--amber) } .c2-line .s{ color:var(--cyan) } .c2-line label{ cursor:text }
.c2-code input[type=text]{ font:inherit; color:var(--amber); background:rgba(255,179,71,.1); border:1px solid rgba(255,179,71,.6); border-radius:5px; padding:0 .35em; width:4ch; text-align:center; outline:none; transition:box-shadow .2s; line-height:1.3; margin:.1em 0 }
#c2-word{ width:6ch; text-align:left; color:var(--cyan); background:rgba(3,217,255,.08); border-color:rgba(3,217,255,.6) }
.c2-code input[type=text]:focus{ box-shadow:0 0 0 3px rgba(255,179,71,.22) } #c2-word:focus{ box-shadow:0 0 0 3px rgba(3,217,255,.2) }
.c2-code input[aria-invalid="true"]{ border-color:#ff7a6b; box-shadow:0 0 0 3px rgba(255,122,107,.2) }
.c2-range{ display:flex; align-items:center; gap:.6em; margin:.55em 0 0 2.4em; font-size:.78em; color:rgba(245,247,255,.45) } .c2-range input{ flex:1; accent-color:var(--amber); height:2px; min-width:0; margin:0 }
.c2-status{ margin:.5em 0 0 2.4em; min-height:1.3em; font:.82em/1.35 var(--text); color:rgba(245,247,255,.62); white-space:normal } .c2-status.ok{ color:#3dd68c } .c2-status.err{ color:#ff9c91 }
.c2-words{ display:flex; gap:.5em; margin:.4em 0 0 2.4em }
.c2-words button{ font:inherit; font-size:.9em; color:var(--light); background:rgba(245,247,255,.08); border:1px solid var(--glass-line); border-radius:999px; padding:.12em .7em; cursor:pointer } .c2-words button small{ font:.82em var(--text); color:rgba(245,247,255,.55); margin-left:.3em } .c2-words button:hover{ background:rgba(3,217,255,.12); border-color:rgba(3,217,255,.5) }
.c2-ide .stat{ grid-column:3; display:flex; align-items:center; gap:1em; padding:0 1.6cqw; background:#0a0c12; border-top:1px solid rgba(245,247,255,.06); font-size:.82em; color:rgba(245,247,255,.5); white-space:nowrap; min-width:0 }
.c2-ide .stat .c2-now{ margin-left:auto; font:inherit; color:rgba(245,247,255,.6); overflow:hidden; text-overflow:ellipsis; min-width:0 }
@container (max-width:520px){ .c2-ide .stat span:nth-child(2){ display:none } }
@container (max-width:400px){ .c2-ide .stat span:nth-child(1){ display:none } } .c2-ide .stat .c2-now b{ font-weight:500; color:var(--amber) }
.c2-ide .stat .go{ font:inherit; font-weight:600; letter-spacing:.06em; color:var(--deep); background:var(--cyan); border:0; border-radius:999px; padding:.15em .9em; line-height:1.5; box-shadow:0 4px 12px rgba(3,217,255,.3); transition:transform .15s; cursor:pointer } .c2-ide .stat .go:hover{ transform:translateY(-1px) } .c2-ide .stat .go:active{ transform:translateY(1px) }
.c2-runbtn{ font:600 .76rem var(--mono); letter-spacing:.08em; color:var(--deep); background:var(--cyan); border:0; border-radius:999px; padding:.5rem 1rem; box-shadow:0 8px 20px rgba(3,217,255,.28); transition:transform .15s; cursor:pointer }
.c2-runbtn:hover{ transform:translateY(-1px) } .c2-runbtn:active{ transform:translateY(1px) }

/* ---------- второй слой главы 2 ---------- */
.c2-grid{ position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .5s;
  background-image:linear-gradient(rgba(3,217,255,.10) 1px, transparent 1px), linear-gradient(90deg, rgba(3,217,255,.10) 1px, transparent 1px); background-size:40px 40px }
.ch2.reveal .c2-grid{ opacity:1 }
.ch2.reveal .c2-wall{ filter:saturate(.4) brightness(.8) } .ch2.reveal .c2-obj img, .ch2.reveal .c2-obj canvas, .ch2.reveal .c2-bg, .ch2.reveal .c2-calendar, .ch2.reveal .c2-picture, .ch2.reveal .c2-lid, .ch2.reveal .c2-base{ filter:saturate(.25) brightness(.75) }
.ch2.reveal .c2-wallglow, .ch2.reveal .c2-pool, .ch2.reveal .c2-halo{ opacity:.35 }
.c2-notes{ position:absolute; inset:0; pointer-events:none; z-index:8 }
.c2-note{ position:absolute; font:.66rem var(--mono); letter-spacing:.06em; color:rgba(3,217,255,.9); background:rgba(11,13,20,.6); border:1px dashed rgba(3,217,255,.55); border-radius:6px; padding:.2rem .5rem; opacity:0; transform:translateY(4px); transition:opacity .4s, transform .4s; white-space:nowrap }
.c2-window .c2-note text{ opacity:0; transition:opacity .4s } .ch2.reveal .c2-window .c2-note text{ opacity:1 }
.ch2.reveal .c2-note{ opacity:1; transform:none }
.c2-note-lamp{ left:4%; top:57% } .c2-note-hush{ left:21%; top:53% } .c2-note-cat{ left:73%; top:12% } .c2-note-win{ right:3%; top:52% } .c2-note-window{ left:4%; top:5% }
.c2-trace{ position:relative; width:min(100%,1180px); margin:12px auto 0; display:grid; grid-template-columns:repeat(3,1fr); gap:.4rem 1rem; padding:.8rem 1rem .7rem; border-radius:14px; border:1px dashed rgba(3,217,255,.5); background:rgba(11,13,20,.72); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); font:.7rem var(--mono); color:rgba(245,247,255,.7) }
.c2-trace[hidden]{ display:none }
.c2-tr{ display:flex; flex-direction:column; gap:.1rem; min-width:0 } .c2-tr small{ font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(3,217,255,.75) } .c2-tr b{ font-weight:500; font-size:.9rem; color:var(--amber); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.c2-trace p{ grid-column:1 / -1; margin:.2rem 0 0; font:.76rem/1.4 var(--text); color:rgba(245,247,255,.82) }
.c2-reveal{ position:absolute; right:clamp(16px,5vw,72px); bottom:18px; z-index:7; padding:.55rem 1rem; border-radius:999px; font:.84rem var(--text); color:var(--light); display:flex; align-items:center; gap:.5rem;
  background:var(--glass); border:1px solid var(--glass-line); backdrop-filter:blur(16px) saturate(160%); -webkit-backdrop-filter:blur(16px) saturate(160%); box-shadow:inset 0 1px 0 rgba(245,247,255,.16), 0 12px 30px rgba(0,0,0,.35) }
.c2-reveal::before{ content:""; width:10px; height:10px; border-radius:50%; border:1px solid rgba(245,247,255,.5) } .ch2.reveal .c2-reveal::before{ background:var(--cyan); border-color:var(--cyan) }

/* подвал главы, возврат, тост, диалоги */
.c2-foot{ width:min(100%,1180px); margin:clamp(22px,4vh,40px) auto 0 }
.c2-quiet{ margin:0 0 .6rem; font:.78rem var(--text); color:rgba(245,247,255,.5) }
.c2-links{ display:flex; flex-wrap:wrap; gap:.5rem 2rem; align-items:baseline; margin:0; font:.88rem var(--text); padding-right:220px }
.c2-links a{ color:var(--cyan); text-decoration:none } .c2-links a:hover{ text-decoration:underline }
.c2-mono{ margin-left:auto; font:.62rem var(--mono); letter-spacing:.24em; color:rgba(245,247,255,.35); text-transform:uppercase }
.c2-return{ position:fixed; left:50%; bottom:calc(env(safe-area-inset-bottom,0px) + 18px); transform:translateX(-50%); z-index:40; display:flex; align-items:center; gap:.8rem; max-width:calc(100% - 32px); padding:.5rem .55rem .5rem 1rem; border-radius:999px;
  background:var(--glass); border:1px solid var(--glass-line); backdrop-filter:blur(16px) saturate(160%); -webkit-backdrop-filter:blur(16px) saturate(160%); box-shadow:inset 0 1px 0 rgba(245,247,255,.16), 0 12px 30px rgba(0,0,0,.35); font:.84rem var(--text) }
.c2-return[hidden]{ display:none } /* иначе display:flex перебивал атрибут hidden — плашка висела у всех, даже без сохранённого ночника */
.c2-return button{ font:.8rem var(--text); border:0; border-radius:999px; padding:.38rem .8rem; color:var(--deep); background:var(--cyan) } .c2-return button.x{ background:none; color:rgba(245,247,255,.6); padding:.2rem .4rem; font-size:1.1rem }
.c2-dialog{ width:min(440px,calc(100vw - 32px)); padding:1.4rem 1.5rem 1.3rem; border:1px solid var(--glass-line); border-radius:18px; background:rgba(16,21,38,.96); color:var(--light); box-shadow:0 30px 80px rgba(0,0,0,.6) }
.c2-dialog::backdrop{ background:rgba(11,13,20,.6); backdrop-filter:blur(6px) }
.c2-dialog h3{ margin:0 0 .6rem; font:500 1.25rem/1.25 var(--display) } .c2-dialog p{ margin:0 0 .8rem; font:.9rem/1.5 var(--text); color:rgba(245,247,255,.86) }
.c2-dialog label{ display:block; margin:.2rem 0 .35rem; font:.8rem var(--text); color:rgba(245,247,255,.6) }
.c2-dialog input[type=text]{ width:100%; font:1rem var(--text); color:var(--light); background:rgba(245,247,255,.06); border:1px solid var(--glass-line); border-radius:10px; padding:.55rem .75rem; outline:none } .c2-dialog input[type=text]:focus{ border-color:rgba(3,217,255,.6) }
.c2-dlg-actions{ display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; margin-top:.9rem } .c2-dialog .c2-runbtn{ font:500 .84rem var(--text); letter-spacing:0 }
.c2-dialog .text{ font:.84rem var(--text); color:var(--cyan); background:none; border:0; padding:.4rem .2rem }
.c2-dialog .x{ position:absolute; right:10px; top:8px; width:34px; height:34px; border-radius:50%; border:0; background:rgba(245,247,255,.08); color:var(--light); font-size:1.1rem }
.c2-dialog [role=status]{ min-height:1.2em; margin-top:.6rem; font:.82rem/1.4 var(--text); color:rgba(245,247,255,.7) } .c2-privacy{ font-size:.78rem; color:rgba(245,247,255,.5) }

/* ---------- отдельная страница night.html: базовые токены как на главной, верхняя полоска ---------- */
body.night{ margin:0; min-height:100vh; background:var(--deep,#0B0D14); color:var(--light,#F5F7FF); font-family:var(--text,Inter,system-ui,sans-serif); -webkit-font-smoothing:antialiased;
  --deep:#0B0D14; --night:#1A2440; --cyan:#03D9FF; --violet:#8B5CF6; --amber:#FFB347; --light:#F5F7FF;
  --display:"Space Grotesk", -apple-system, "SF Pro Display", "Helvetica Neue", Inter, system-ui, sans-serif; --text:Inter, -apple-system, "SF Pro Text", system-ui, "Segoe UI", sans-serif; --mono:"SF Mono", ui-monospace, "JetBrains Mono", Menlo, monospace;
  --glass:rgba(26,36,64,.42); --glass-line:rgba(245,247,255,.14) }
body.night .ch2{ padding-top:calc(72px + env(safe-area-inset-top,0px)) }
.n-skip{ position:absolute; left:-999px; top:8px; padding:.4rem .8rem; background:var(--cyan); color:var(--deep); border-radius:999px; z-index:50 } .n-skip:focus{ left:12px }
.n-top{ position:fixed; z-index:40; left:0; right:0; top:0; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:calc(12px + env(safe-area-inset-top,0px)) clamp(16px,3vw,32px) 12px;
  background:linear-gradient(180deg, rgba(11,13,20,.85), rgba(11,13,20,0)); pointer-events:none }
.n-top > *{ pointer-events:auto } .n-right{ display:flex; gap:8px }
.n-top a, .n-top button{ font:500 .78rem var(--mono); letter-spacing:.06em; color:rgba(245,247,255,.8); background:rgba(26,36,64,.42); border:1px solid var(--glass-line); border-radius:999px; padding:.42rem .85rem; text-decoration:none; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); cursor:pointer; transition:color .2s, border-color .2s }
.n-top a:hover, .n-top button:hover{ color:var(--light); border-color:rgba(3,217,255,.5) } .n-top button[aria-pressed="true"]{ color:var(--cyan); border-color:rgba(3,217,255,.6) }
.n-top .lang{ font-weight:600 }

/* ---------- телефон: та же картинка, кадр 3:4 из её середины (видны полка с книгами, картины, стол); моноблок ниже комнаты во всю ширину ---------- */
@media (max-width:720px){
  .ch2{ padding:40px 14px 32px } body.night .ch2{ padding-top:calc(64px + env(safe-area-inset-top,0px)) }
  .c2-room{ aspect-ratio:3/4; border-radius:16px } .c2-bg{ object-position:40% 50% } /* видимая полоса картинки: x 20–70 % */
  .c2-moonlight{ background:radial-gradient(40% 40% at 0% 30%, rgba(150,180,255,.12), transparent 72%) }
  .c2-calendar{ left:8%; top:37%; width:19% }
  .c2-cat{ left:auto; right:6%; top:0; margin-top:26%; width:24% } /* полка на картинке — y 30,6 %; margin-top в % от ширины */
  .c2-pool{ left:-10%; width:70%; top:62% }
  .c2-lamp-wrap{ left:4%; bottom:13.5%; width:33% } .c2-hush{ left:54%; bottom:14%; width:38% }
  .c2-plaque{ font-size:.62rem; max-width:260%; left:0; transform:none }
  .c2-bubble{ max-width:56%; font-size:.78rem } .c2-bubble-hush{ left:8%; top:44% } .c2-bubble-cat{ left:4%; top:6%; max-width:50% } .c2-bubble-cat::after{ right:auto; left:10px; transform:none }
  .c2-head{ grid-template-columns:1fr; gap:8px } .c2-lead{ grid-column:1 }
  .c2-laptop{ position:relative; left:auto; bottom:auto; width:100%; margin:14px 0 0; z-index:auto; padding:0 } .c2-laptop::after{ display:none } .c2-lid{ transform:none; padding:6px 6px 8px; border-radius:14px 14px 4px 4px } .c2-base{ margin:0; height:10px; border-radius:0 0 10px 10px }
  .c2-screen{ aspect-ratio:auto; min-height:270px; border-radius:8px }
  .c2-picture{ display:none } .c2-calendar{ left:8%; top:37%; width:19% }
  .c2-ide{ position:relative; grid-template-columns:18px 88px 1fr; grid-template-rows:1fr 26px; font-size:11px; min-height:260px }
  .c2-ide .side{ padding:8px 5px; font-size:10px } .c2-ide .side button{ padding:.3em 3px; white-space:normal; line-height:1.3 } .c2-ide .side b{ margin-top:8px }
  .c2-code .ln{ white-space:normal } .c2-code{ padding-right:16px }
  .c2-code input[type=text]{ font-size:16px; line-height:1.2 } /* iOS не приближает поле при фокусе */
  .c2-ide .stat{ padding:0 8px; gap:.6em } .c2-ide .stat span:nth-child(2){ display:none }
  .c2-trace{ margin-top:10px }
  .c2-note-lamp{ left:6%; top:52% } .c2-note-hush{ left:52%; top:56% } .c2-note-cat{ left:auto; right:4%; top:14% } .c2-note-win, .c2-note-window{ display:none }
  .c2-reveal{ position:relative; right:auto; bottom:auto; margin:14px auto 0; width:max-content }
  .c2-links{ padding-right:0; gap:.5rem 1.2rem } .c2-mono{ margin-left:0; flex-basis:100% }
}
@media (prefers-reduced-motion:reduce){
  .c2-lamp.run img, .c2-hush.arriving #c2-hush-btn img, .c2-hush.replay #c2-hush-btn img, .c2-portal, .c2-mote, .c2-code .ln.cur::after{ animation:none !important }

  .c2-bubble, .c2-lamp img, .c2-halo, .c2-pool, .c2-wallglow, .c2-moonlight{ transition:none }
}

/* A living painting: the original lantern, sail and water share one frame. */
.c2-picture > img { display:block; width:100%; height:100%; object-fit:cover; border-radius:inherit }
.c2-picture { --picture-motion:paused; pointer-events:none; overflow:hidden }
.c2-picture.alive { --picture-motion:running }
.c2-picture .boat-fire { position:absolute; left:54.6%; top:65%; width:1.65%; height:5.4%; border-radius:65% 40% 55% 45%; transform-origin:50% 100%; background:linear-gradient(0deg,#fff5bb 12%,#ffda61 58%,rgba(255,156,32,.25)); box-shadow:0 0 3px 1px rgba(255,187,75,.5); mix-blend-mode:screen; animation:boat-flame 2.7s ease-in-out infinite alternate; animation-play-state:var(--picture-motion) }
.c2-picture .boat-warmth { position:absolute; left:48%; top:57%; width:19%; height:20%; border-radius:50%; background:radial-gradient(ellipse at 40% 60%,rgba(255,187,83,.56),rgba(255,163,67,.15) 42%,transparent 72%); mix-blend-mode:screen; animation:boat-warmth 3.7s ease-in-out infinite; animation-play-state:var(--picture-motion) }
.c2-picture .boat-reflection { position:absolute; left:48%; top:78.5%; width:17%; height:9%; background:repeating-linear-gradient(174deg,transparent 0 13%,rgba(255,197,96,.54) 16% 20%,transparent 23% 36%); mask-image:radial-gradient(ellipse at 48% 20%,#000,transparent 72%); -webkit-mask-image:radial-gradient(ellipse at 48% 20%,#000,transparent 72%); mix-blend-mode:screen; animation:boat-reflection 4.9s ease-in-out infinite alternate; animation-play-state:var(--picture-motion) }
@keyframes boat-flame { 0%,100% { opacity:.55; transform:scale(.85,.94) rotate(-3deg) } 24% { opacity:.9; transform:scale(1,1.07) rotate(3deg) } 48% { opacity:.65; transform:scale(.93,.97) rotate(-2deg) } 73% { opacity:.82; transform:scale(.89,1.03) rotate(1deg) } }
@keyframes boat-warmth { 0%,100% { opacity:.36 } 29% { opacity:.7 } 54% { opacity:.43 } 77% { opacity:.6 } }
@keyframes boat-reflection { from { opacity:.28; transform:translateX(-1%) scaleX(.95) } to { opacity:.56; transform:translateX(2%) scaleX(1.04) } }
@media (prefers-reduced-motion:reduce) { .c2-picture .boat-fire,.c2-picture .boat-warmth,.c2-picture .boat-reflection { animation:none; opacity:.25 } }
/* Scale about physical support points: Chess's belly stays on the shelf; Hush's feet stay on the desk. */
.c2-cat { transform:scale(1.10); transform-origin:50% 65% }
.c2-hush { transform:scale(1.08); transform-origin:50% 100% }