/* ===== Шрифты ===== */
@font-face { font-family: "Yeseva One"; src: url(fonts/yeseva-one-cyrillic-400-normal.woff2) format("woff2"); unicode-range: U+0400-04FF; font-display: swap; }
@font-face { font-family: "Yeseva One"; src: url(fonts/yeseva-one-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F; font-display: swap; }
@font-face { font-family: "Manrope"; font-weight: 400; src: url(fonts/manrope-cyrillic-400-normal.woff2) format("woff2"); unicode-range: U+0400-04FF; font-display: swap; }
@font-face { font-family: "Manrope"; font-weight: 400; src: url(fonts/manrope-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F; font-display: swap; }
@font-face { font-family: "Manrope"; font-weight: 600; src: url(fonts/manrope-cyrillic-600-normal.woff2) format("woff2"); unicode-range: U+0400-04FF; font-display: swap; }
@font-face { font-family: "Manrope"; font-weight: 600; src: url(fonts/manrope-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url(fonts/ibm-plex-mono-cyrillic-500-normal.woff2) format("woff2"); unicode-range: U+0400-04FF; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url(fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F; font-display: swap; }
@font-face { font-family: "Alt"; font-weight: 700; src: url(fonts/montserrat-alternates-cyrillic-700-normal.woff2) format("woff2"); unicode-range: U+0400-04FF; font-display: swap; }
@font-face { font-family: "Alt"; font-weight: 700; src: url(fonts/montserrat-alternates-latin-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F; font-display: swap; }

:root {
  --cream: #f7ecdc;
  --milk: #fff7ec;
  --choco: #2c1b13;
  --choco-2: #43291c;
  --tan: #c99a6b;
  --orange: #ec7630;
  --blue: #6f9cf0;
  --ink: #241a16;
  --glass: rgba(38, 24, 17, .46);
  --serif: "Yeseva One", Georgia, serif;
  --sans: "Manrope", system-ui, sans-serif;
  --mono: "Plex Mono", ui-monospace, monospace;
  --lit: 1;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #2a1a12; color: var(--cream); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; }
img { user-select: none; -webkit-user-drag: none; }
[hidden] { display: none !important; }

/* ===== Сцены ===== */
.scene { position: fixed; inset: 0; overflow: hidden; opacity: 0; transition: opacity .55s ease; touch-action: pan-y; }
.scene.is-active { opacity: 1; }
#desk, #board { background: linear-gradient(#e2b893 0 62%, #5a2f19 62% 100%); }
.world { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.world.is-zoom { transition: transform .75s cubic-bezier(.6, 0, .3, 1); }
.layer { position: absolute; inset: 0; will-change: transform; }
.paint { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.light { position: absolute; display: block; mix-blend-mode: plus-lighter; opacity: 0; transition: opacity .7s ease; pointer-events: none; }
.light.is-on { opacity: 1; }
@supports not (mix-blend-mode: plus-lighter) { .light { mix-blend-mode: screen; } }
.sprite { position: absolute; display: block; pointer-events: none; }
.dual { inset: 0; width: 100%; height: 100%; transition: opacity .7s ease; }
.dual--on { opacity: var(--lit); }
.cat, .orn, .fg { position: absolute; }
.cat { transform-origin: 50% 92%; animation: breathe 3.8s ease-in-out infinite; }
.cat.is-pet { animation: breathe 1.3s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.012, 1.03); } }
.orn { transform-origin: 50% 0; transition: transform 1.2s cubic-bezier(.2, 1.6, .4, 1); }
.orn.is-swing { animation: swing 2.6s ease-in-out; }
@keyframes swing { 15% { transform: rotate(2.4deg); } 40% { transform: rotate(-1.8deg); } 65% { transform: rotate(1deg); } 85% { transform: rotate(-.4deg); } }
.envelope { transform: rotate(-9deg); filter: drop-shadow(2px 3px 2px rgba(60, 30, 10, .35)); }

/* мерцание экрана и пластинка */
.screen-pulse { position: absolute; border-radius: 4px; pointer-events: none; box-shadow: 0 0 40px 10px rgba(110, 160, 255, .25); animation: glow 4s ease-in-out infinite; }
@keyframes glow { 50% { box-shadow: 0 0 60px 18px rgba(110, 160, 255, .38); } }
.sheen { position: absolute; border-radius: 50%; pointer-events: none; opacity: 0; transition: opacity .5s; transform: scaleY(.177); transform-origin: 50% 0; overflow: hidden; }
.sheen i { position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 10%, rgba(255, 240, 220, .45) 15%, transparent 21% 60%, rgba(255, 240, 220, .35) 65%, transparent 71%);
  -webkit-mask: radial-gradient(circle, transparent 0 17%, #000 19% 98%, transparent 100%); mask: radial-gradient(circle, transparent 0 17%, #000 19% 98%, transparent 100%); }
.sheen.is-on { opacity: 1; }
.sheen.is-on i { animation: spin 1.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* пар над кофе */
.steam { position: absolute; width: 60px; height: 80px; pointer-events: none; }
.steam i { position: absolute; bottom: 0; width: 14px; height: 60px; border-radius: 50%; border-left: 4px solid rgba(255, 246, 232, .55); filter: blur(2.5px); animation: steam 3.4s ease-in-out infinite; opacity: 0; }
.steam i:nth-child(1) { left: 6px; }
.steam i:nth-child(2) { left: 24px; animation-delay: 1.1s; }
.steam i:nth-child(3) { left: 40px; animation-delay: 2.2s; }
.steam.is-big i { border-left-width: 6px; animation-duration: 1.8s; }
@keyframes steam { 0% { transform: translateY(14px) scaleY(.6); opacity: 0; } 40% { opacity: 1; } 100% { transform: translateY(-34px) translateX(6px) scaleY(1.1) skewX(-12deg); opacity: 0; } }

/* частицы: сердечки, ноты */
.fx { position: absolute; inset: 0; pointer-events: none; }
.particle { position: absolute; width: 36px; pointer-events: none; animation: float 1.8s ease-out forwards; }
.particle--note { width: 30px; animation-duration: 3.4s; }
.particle--text { width: auto; font-family: var(--serif); color: var(--milk); font-size: 30px; text-shadow: 0 2px 10px rgba(60, 20, 0, .5); white-space: nowrap; }
@keyframes float { 0% { transform: translate(0, 0) scale(.4) rotate(var(--r, 0deg)); opacity: 0; } 15% { opacity: 1; transform: translate(0, -10px) scale(1) rotate(var(--r, 0deg)); } 100% { transform: translate(var(--dx, 0px), -120px) scale(.9) rotate(calc(var(--r, 0deg) * -1)); opacity: 0; } }

/* ===== Интерактивные зоны ===== */
.hot { position: absolute; padding: 0; border: 0; background: transparent; cursor: pointer; border-radius: 22px; -webkit-tap-highlight-color: transparent; }
.hot::before { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0; transition: opacity .25s;
  background: radial-gradient(closest-side, rgba(255, 236, 205, .26), rgba(255, 236, 205, 0)); }
.hot:hover::before, .hot:focus-visible::before { opacity: 1; }
.hot--big::before { background: radial-gradient(closest-side, rgba(255, 236, 205, .14), rgba(255, 236, 205, 0)); }
.hot:focus-visible { outline: calc(2px / var(--s, 1)) dashed rgba(255, 244, 228, .8); outline-offset: 4px; }
.hot::after { content: ""; position: absolute; left: 50%; top: 50%; width: calc(12px / var(--s, 1)); height: calc(12px / var(--s, 1)); margin: calc(-6px / var(--s, 1)); border-radius: 50%;
  background: var(--milk); box-shadow: 0 0 0 0 rgba(255, 247, 236, .7); animation: ping 2.4s ease-out infinite; opacity: .85; transition: opacity .3s; }
.hot--big::after { top: 12%; }
.hot:hover::after { opacity: 0; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(255, 247, 236, .65); } 70%, 100% { box-shadow: 0 0 0 calc(14px / var(--s, 1)) rgba(255, 247, 236, 0); } }
.hot__tag { position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, 6px) scale(calc(1 / var(--s, 1))); transform-origin: 50% 100%;
  white-space: nowrap; padding: 7px 13px; border-radius: 999px; background: var(--milk); color: var(--choco); font: 600 14px/1 var(--sans);
  box-shadow: 0 6px 20px rgba(40, 20, 5, .3); opacity: 0; transition: opacity .22s, transform .22s; pointer-events: none; }
.hot:hover .hot__tag, .hot:focus-visible .hot__tag, .hot.is-tag .hot__tag { opacity: 1; transform: translate(-50%, -6px) scale(calc(1 / var(--s, 1))); }
body.is-intro .hot::after { animation-duration: 1.2s; }

/* ===== Верхнее меню ===== */
.topbar { position: fixed; z-index: 55; left: 0; right: 0; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: max(14px, env(safe-area-inset-top)) clamp(14px, 3vw, 34px) 14px; pointer-events: none; }
.topbar > * { pointer-events: auto; }
.brand { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 16px; border: 0; border-radius: 18px; background: var(--glass);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); cursor: pointer; text-align: left; }
.brand__name { font-family: var(--serif); font-size: clamp(17px, 2vw, 22px); line-height: 1; color: var(--milk); }
.brand__role { font: 12px/1 var(--mono); color: #f5c79d; letter-spacing: .04em; }
.topbar__tools { display: flex; gap: 8px; }
.tool { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--glass);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); cursor: pointer; transition: background .2s, transform .15s; }
.tool:hover { background: rgba(60, 36, 24, .66); }
.tool:active { transform: scale(.95); }
.tool svg { width: 22px; height: 22px; fill: none; stroke: var(--milk); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tool svg path:first-child { fill: rgba(255, 247, 236, .14); }
.tool .off { display: none; }
.tool[aria-pressed="false"] .on { display: none; }
.tool[aria-pressed="false"] .off { display: inline; }
#lightBtn[aria-pressed="true"] svg path:last-child { fill: rgba(255, 190, 110, .55); stroke: #ffd59e; }
#lightBtn[aria-pressed="true"] { box-shadow: 0 0 24px rgba(255, 160, 70, .45); }
.tool__label { font: 13px/1 var(--mono); color: var(--milk); }
.burger { display: grid; gap: 4px; width: 20px; }
.burger i { height: 2px; border-radius: 2px; background: var(--milk); transition: transform .3s, opacity .3s; }
.tool--menu[aria-expanded="true"] .burger i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.tool--menu[aria-expanded="true"] .burger i:nth-child(2) { opacity: 0; }
.tool--menu[aria-expanded="true"] .burger i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 640px) {
  .tool__label { display: none; }
  .tool { width: 44px; height: 44px; padding: 0; justify-content: center; }
  .brand { padding: 9px 13px; }
}

/* подсказка и кнопка назад */
.hint { position: fixed; z-index: 30; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); transform: translateX(-50%); margin: 0; max-width: calc(100% - 32px);
  padding: 10px 16px; border-radius: 999px; background: var(--glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  font-size: 14px; text-align: center; transition: opacity .8s; }
.hint.is-gone { opacity: 0; pointer-events: none; }
.back { position: fixed; z-index: 30; left: clamp(14px, 3vw, 34px); bottom: max(18px, env(safe-area-inset-bottom)); height: 46px; padding: 0 18px; border: 0; border-radius: 999px;
  background: var(--milk); color: var(--choco); font-weight: 600; cursor: pointer; box-shadow: 0 8px 24px rgba(30, 15, 5, .35); }
.back:hover { background: #fff; }

/* ===== Экран монитора ===== */
.os { position: absolute; overflow: hidden; border-radius: 3px; color: var(--milk);
  background: radial-gradient(120% 90% at 85% 110%, rgba(236, 118, 48, .55), transparent 60%),
              radial-gradient(90% 80% at 10% -10%, rgba(120, 170, 255, .55), transparent 60%),
              linear-gradient(160deg, #1b2c74, #0f1a4a 60%, #2b1b4a); }
.os::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(255, 255, 255, .1), transparent 40%); }
.os__bar { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; height: 34px; padding: 0 14px; background: rgba(8, 12, 40, .35); font: 13px/1 var(--mono); }
.os__dots { display: flex; gap: 6px; }
.os__dots i { width: 10px; height: 10px; border-radius: 50%; background: #ff8a5c; }
.os__dots i:nth-child(2) { background: #ffd07a; }
.os__dots i:nth-child(3) { background: #9fd89a; }
.os__tabs { display: flex; gap: 4px; }
.os__tabs button { border: 0; background: transparent; padding: 6px 12px; border-radius: 999px; cursor: pointer; font: 600 13px/1 var(--sans); color: rgba(255, 247, 236, .7); }
.os__tabs button.is-on { background: rgba(255, 247, 236, .92); color: #1b2350; }
.os__page { position: absolute; inset: 34px 0 0; padding: 24px 34px; opacity: 0; transform: translateY(10px); transition: opacity .35s, transform .35s; pointer-events: none; }
.os__page.is-on { opacity: 1; transform: none; pointer-events: auto; }
.kicker { margin: 0 0 8px; font: 13px/1.2 var(--mono); letter-spacing: .06em; text-transform: lowercase; color: #ffc58f; }
.os__name { margin: 0; font: 58px/0.98 var(--serif); }
.os__lead { margin: 14px 0 18px; max-width: 420px; font-size: 18px; line-height: 1.4; color: rgba(255, 247, 236, .86); }
.os__row { display: flex; gap: 10px; flex-wrap: wrap; }
.chip { border: 1.5px solid rgba(255, 247, 236, .7); background: transparent; color: inherit; padding: 10px 16px; border-radius: 999px; cursor: pointer; font: 600 14px/1 var(--sans); transition: background .2s, color .2s; }
.chip:hover { background: rgba(255, 247, 236, .15); }
.chip--fill { background: var(--milk); color: #1b2350; border-color: var(--milk); }
.chip--fill:hover { background: #fff; }
.works { position: relative; height: 218px; }
.work { position: absolute; inset: 0; display: grid; grid-template-columns: 250px 1fr; gap: 22px; align-items: center; opacity: 0; transform: translateX(30px); transition: opacity .4s, transform .4s; pointer-events: none; }
.work.is-on { opacity: 1; transform: none; pointer-events: auto; }
.work__thumb { height: 180px; border-radius: 12px; border: 0; cursor: pointer; background: linear-gradient(135deg, var(--g1), var(--g2)); position: relative; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 20, .35); }
.work__thumb::after { content: "скоро"; position: absolute; left: 14px; bottom: 12px; font: 12px var(--mono); color: rgba(255, 255, 255, .9); }
.work h3 { margin: 0 0 8px; font: 28px/1.05 var(--serif); }
.work p { margin: 0 0 14px; font-size: 15px; line-height: 1.4; color: rgba(255, 247, 236, .82); }
.os__nav { position: absolute; left: 34px; right: 34px; bottom: 14px; display: flex; align-items: center; gap: 12px; }
.arrow { width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid rgba(255, 247, 236, .7); background: transparent; cursor: pointer; font-size: 16px; }
.arrow:hover { background: rgba(255, 247, 236, .15); }
.os__count { font: 13px var(--mono); }

/* ===== Доска ===== */
.draw { position: absolute; cursor: crosshair; touch-action: none; }
.board__title { position: absolute; margin: 0; font: 66px/1 var(--serif); color: #23324a; pointer-events: none; }
.board__sub { position: absolute; margin: 0; max-width: 620px; font-size: 20px; line-height: 1.35; color: #4a4038; pointer-events: none; }
#notes { pointer-events: none; }
.note { position: absolute; width: 236px; height: 238px; padding: 46px 26px 20px 28px; color: var(--ink); cursor: grab; pointer-events: auto; touch-action: none;
  background: center / 100% 100% no-repeat; transform: rotate(var(--r, 0deg)); transition: transform .25s, filter .25s; filter: drop-shadow(0 6px 6px rgba(60, 40, 20, .18)); }
.note:hover { transform: rotate(var(--r, 0deg)) scale(1.03); }
.note.is-drag { cursor: grabbing; transition: none; transform: rotate(0deg) scale(1.06); filter: drop-shadow(0 18px 18px rgba(60, 40, 20, .28)); z-index: 5; }
.note__magnet { position: absolute; left: 50%; top: 4px; width: 44px; margin-left: -22px; pointer-events: none; filter: drop-shadow(0 3px 2px rgba(40, 20, 10, .3)); }
.note b { display: block; font: 13px var(--mono); color: rgba(36, 26, 22, .55); }
.note h3 { margin: 4px 0 8px; font: 27px/1.05 var(--serif); }
.note p { margin: 0; font-size: 16px; line-height: 1.38; }
.marker::after { top: 50%; }

/* ===== Окна ===== */
.sheet { position: fixed; z-index: 60; inset: 0; display: grid; place-items: center; padding: 70px 16px 24px; background: rgba(26, 15, 9, .5);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; transition: opacity .35s; overflow-y: auto; }
.sheet.is-open { opacity: 1; }
.sheet.is-front { z-index: 61; }
/* смена листов: фон берётся от старого листа, у нового он появляется только в конце, когда старый скрыт */
.sheet.is-swap { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
.sheet.is-leaving > * { opacity: 0 !important; transition: opacity .3s !important; }
#project { background: rgba(70, 40, 22, .32); backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1); }
.sheet > :first-child { transform: translateY(30px) scale(.96); transition: transform .45s cubic-bezier(.2, 1.3, .4, 1); }
.sheet.is-open > :first-child { transform: none; }
.sheet__close { position: fixed; top: max(16px, env(safe-area-inset-top)); right: 16px; width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--milk); color: var(--choco); font-size: 28px; line-height: 1; cursor: pointer; }

/* телефон */
.phone { height: min(660px, calc(100dvh - 100px)); max-width: 90vw; aspect-ratio: 9 / 19.2; padding: 11px; border-radius: 52px; background: #111; box-shadow: inset 0 0 0 2px #3a3a3c, 0 30px 80px rgba(0, 0, 0, .5); }
.phone__screen { position: relative; height: 100%; border-radius: 42px; overflow: hidden; display: flex; flex-direction: column; align-items: center; padding: 14px 20px 30px; text-align: center;
  background: radial-gradient(120% 70% at 100% 100%, rgba(236, 118, 48, .9), transparent 60%), radial-gradient(100% 60% at 0% 0%, rgba(111, 156, 240, .9), transparent 60%), #1c1d4a; }
.phone__status { display: flex; width: 100%; align-items: center; justify-content: space-between; font: 600 13px var(--sans); }
.phone__island { width: 92px; height: 26px; border-radius: 20px; background: #000; }
.phone__avatar { display: grid; place-items: center; width: 92px; height: 92px; margin-top: 30px; border-radius: 50%; background: var(--milk); color: var(--choco); font: 34px var(--serif); box-shadow: 0 10px 30px rgba(0, 0, 0, .3); }
.phone__name { margin: 14px 0 4px; font: 26px/1.1 var(--serif); }
.phone__role { margin: 0 0 22px; font-size: 13px; color: rgba(255, 247, 236, .8); }
.phone__links { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: 8px; }
.phone__links a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: rgba(255, 255, 255, .16); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--milk); text-decoration: none; font-weight: 600; font-size: 15px; transition: background .2s; }
.phone__links a:hover { background: rgba(255, 255, 255, .28); }
.phone__links b { margin-left: auto; font-size: 20px; opacity: .7; }
.ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; font-size: 16px; }
.ico--tg { background: #2aa3e0; }
.ico--ig { background: linear-gradient(135deg, #f8b64c, #e1306c 60%, #8a3ab9); }
.ico--mail { background: #ec7630; }
.phone__note { margin: auto 0 0; font: 20px/1.2 var(--serif); }
.phone__home { position: absolute; bottom: 9px; left: 50%; width: 120px; height: 5px; margin-left: -60px; border-radius: 3px; background: rgba(255, 255, 255, .8); }

/* блокнот */
.notebook { display: grid; grid-template-columns: 1fr 1fr; width: min(820px, 100%); border-radius: 10px; color: var(--ink); overflow: hidden;
  background: #c9955f; padding: 14px; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
.notebook__page { padding: 30px 30px 34px; background: #fbf3e4 repeating-linear-gradient(transparent 0 31px, rgba(140, 110, 80, .18) 31px 32px); min-height: 440px; }
.notebook__page:first-child { border-radius: 6px 0 0 6px; box-shadow: inset -18px 0 24px -18px rgba(90, 60, 30, .35); }
.notebook__page:last-child { border-radius: 0 6px 6px 0; box-shadow: inset 18px 0 24px -18px rgba(90, 60, 30, .35); }
.notebook h2 { margin: 18px 0 10px; font: 34px/1.05 var(--serif); }
.notebook p { margin: 0 0 18px; line-height: 1.5; }
.notebook .kicker { color: #b4541d; margin-top: 4px; }
.photo-ph { display: grid; place-items: center; height: 180px; border-radius: 8px; background: repeating-linear-gradient(45deg, #ead8bd 0 12px, #e4ceb0 12px 24px); font: 14px/1.3 var(--mono); text-align: center; color: #8a6a4a; }
.facts { margin: 0 0 18px; padding-left: 18px; line-height: 1.7; }
@media (max-width: 640px) { .notebook { grid-template-columns: 1fr; } .notebook__page { min-height: 0; border-radius: 6px !important; } .notebook__page + .notebook__page { margin-top: 8px; } }

/* проект */
.project { width: min(860px, 100%); border-radius: 22px; padding: 22px 22px 30px; background: var(--milk); color: var(--ink); box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
.project__hero { height: 300px; border-radius: 14px; background: linear-gradient(135deg, var(--g1, #e2551d), var(--g2, #a9dce3)); position: relative; }
.project__hero span { position: absolute; left: 18px; bottom: 16px; font: 13px var(--mono); color: #fff; }
.project h2 { margin: 22px 8px 8px; font: 40px/1.05 var(--serif); }
.project__lead { margin: 0 8px 22px; font-size: 18px; line-height: 1.45; }
.project__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 0 8px; }
.project__cols p { margin: 0; line-height: 1.5; }
.project .kicker { color: #b4541d; margin-bottom: 6px; }
.project__tags { display: flex; gap: 8px; flex-wrap: wrap; margin: 22px 8px 0; }
.project__tags span { padding: 7px 12px; border-radius: 999px; background: #f0dfc6; font-size: 13px; font-weight: 600; }
@media (max-width: 640px) { .project__cols { grid-template-columns: 1fr; } .project__hero { height: 180px; } .project h2 { font-size: 30px; } }

/* ===== Игровое меню ===== */
.gmenu { position: fixed; z-index: 50; inset: 0; background: rgba(26, 15, 9, .35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; transition: opacity .4s; }
.gmenu.is-open { opacity: 1; }
.gmenu__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(600px, 100%); padding: max(96px, calc(env(safe-area-inset-top) + 86px)) clamp(22px, 5vw, 56px) 34px; overflow-y: auto;
  background: radial-gradient(120% 60% at 100% 100%, rgba(236, 118, 48, .28), transparent 60%), linear-gradient(170deg, #3b2418, #24150e);
  box-shadow: -30px 0 80px rgba(0, 0, 0, .4); transform: translateX(100%); transition: transform .55s cubic-bezier(.7, 0, .2, 1); display: flex; flex-direction: column; }
.gmenu.is-open .gmenu__panel { transform: none; }
.gmenu__kicker { margin: 0 0 18px; font: 13px var(--mono); color: #f5b37d; letter-spacing: .08em; }
.gmenu__list { list-style: none; margin: 0; padding: 0; }
.gmenu__list li { opacity: 0; transform: translateX(40px); transition: opacity .4s, transform .5s cubic-bezier(.2, 1, .3, 1); }
.gmenu.is-open .gmenu__list li { opacity: 1; transform: none; }
.gmenu.is-open .gmenu__list li:nth-child(2) { transition-delay: .05s; }
.gmenu.is-open .gmenu__list li:nth-child(3) { transition-delay: .1s; }
.gmenu.is-open .gmenu__list li:nth-child(4) { transition-delay: .15s; }
.gmenu.is-open .gmenu__list li:nth-child(5) { transition-delay: .2s; }
.gmenu__list button { display: flex; width: 100%; align-items: center; gap: 18px; padding: 18px 6px; border: 0; border-bottom: 1px solid rgba(255, 236, 210, .14); background: transparent; cursor: pointer; text-align: left; transition: padding .3s, color .3s; }
.gmenu__list .n { font: 14px var(--mono); color: #f5b37d; width: 28px; }
.gmenu__list .t { font: clamp(30px, 5vw, 46px)/1 var(--serif); color: var(--milk); display: flex; flex-direction: column; gap: 8px; }
.gmenu__list small { font: 14px/1 var(--sans); color: rgba(255, 236, 210, .6); }
.gmenu__list .a { margin-left: auto; font-size: 26px; color: var(--orange); opacity: 0; transform: translateX(-10px); transition: opacity .3s, transform .3s; }
.gmenu__list button:hover, .gmenu__list button:focus-visible, .gmenu__list button.is-here { padding-left: 18px; }
.gmenu__list button:hover .t, .gmenu__list button:focus-visible .t { color: #ffd2a6; }
.gmenu__list button:hover .a, .gmenu__list button:focus-visible .a, .gmenu__list button.is-here .a { opacity: 1; transform: none; }
.gmenu__list button { outline: none; }
.gmenu__settings { display: flex; gap: 10px; flex-wrap: wrap; margin-top: auto; padding-top: 30px; }
.gmenu__settings .chip { color: var(--milk); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* ===================== v15 ===================== */
.particle--heart { width: 28px; filter: drop-shadow(0 1px 2px rgba(60,20,0,.35)); animation-duration: 1.6s; }
.os--mini { pointer-events: none; border-radius: 2px; }
.os--mini .os__bar { height: 13px; padding: 0 6px; font-size: 6px; }
.os--mini .os__dots { gap: 2px; }
.os--mini .os__dots i { width: 4px; height: 4px; }
.os--mini .os__name { position: absolute; left: 12px; top: 26px; font-size: 25px; line-height: .98; }
.screenwrap { position: absolute; overflow: hidden; border-radius: 2px; }
.phone-glow { position: absolute; border-radius: 10px; pointer-events: none; transform: rotate(6deg); background: radial-gradient(closest-side, rgba(150, 190, 255, .55), rgba(150, 190, 255, 0)); mix-blend-mode: screen; animation: glow2 2.2s ease-in-out infinite; }
@keyframes glow2 { 50% { opacity: .45; } }

/* уведомление-«пуш» */
.notif { position: absolute; padding: 0; border: 0; background: none; cursor: pointer; transform: translate(-50%, -100%) scale(calc(1 / var(--s, 1))); transform-origin: 50% 100%; -webkit-tap-highlight-color: transparent; }
.notif__pill { display: flex; align-items: center; gap: 9px; padding: 8px 12px 8px 8px; border-radius: 16px; background: rgba(255, 250, 244, .9); color: var(--choco);
  box-shadow: 0 8px 24px rgba(40, 20, 5, .3); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: notif 3.2s cubic-bezier(.3, 1.6, .5, 1) infinite; position: relative; }
.notif__ico { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: linear-gradient(135deg, #6fd27b, #2fb24c); color: #fff; font-size: 14px; }
.notif__txt { display: flex; flex-direction: column; text-align: left; font: 12px/1.2 var(--sans); white-space: nowrap; }
.notif__txt b { font-size: 13px; }
.notif__badge { position: absolute; top: -6px; right: -6px; display: grid; place-items: center; min-width: 20px; height: 20px; border-radius: 10px; background: #ff3b30; color: #fff; font: 600 11px/1 var(--sans); box-shadow: 0 0 0 2px #fff; }
.notif:hover .notif__pill { background: #fff; }
.notif::after { content: ""; position: absolute; left: 50%; bottom: -9px; width: 10px; height: 10px; margin-left: -5px; background: rgba(255, 250, 244, .9); transform: rotate(45deg); border-radius: 2px; animation: notif 3.2s cubic-bezier(.3, 1.6, .5, 1) infinite; }
@keyframes notif { 0%, 100% { transform: translateY(0); } 8% { transform: translateY(-8px); } 16% { transform: translateY(0); } 22% { transform: translateY(-3px); } 28% { transform: translateY(0); } }
.notif::after { animation-name: notifArrow; }
@keyframes notifArrow { 0%, 100% { transform: rotate(45deg) translate(0, 0); } 8% { transform: rotate(45deg) translate(-6px, -6px); } 16% { transform: rotate(45deg); } }

/* меловая доска */
.chalk { position: absolute; padding: 34px 44px 26px; color: #f2eee6; pointer-events: none; filter: url(#chalkf); }
.chalk__title { margin: 0 0 22px; font: 46px/1 var(--serif); letter-spacing: .01em; }
.chalk__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px 30px; }
.chalk__steps li { position: relative; padding-left: 46px; }
.chalk__steps b { position: absolute; left: 0; top: -2px; display: grid; place-items: center; width: 34px; height: 34px; border: 2.5px solid currentColor; border-radius: 50%; font: 18px/1 var(--serif); }
.chalk__steps h3 { margin: 0 0 6px; font: 24px/1.05 var(--serif); }
.chalk__steps p { margin: 0; font-size: 15.5px; line-height: 1.4; color: #f2eee6; }
.chalk__steps li:nth-child(2) b { color: #f3b6b0; }
.chalk__steps li:nth-child(4) b { color: #a9c9f0; }
.chalk__foot { position: absolute; left: 44px; bottom: 24px; margin: 0; font: 600 17px/1 var(--sans); color: #f6d9a8; }
.hot--chalkgo::after { display: none; }
.chalkstick { border-radius: 4px; background: linear-gradient(#fbf8f2, #dcd6cb); box-shadow: 0 2px 2px rgba(0, 0, 0, .35); transform: rotate(-3deg); }
.chalkstick--pink { background: linear-gradient(#f8c9c4, #dd9a93); transform: rotate(2deg); }
.chalkstick--blue { background: linear-gradient(#c6dcf6, #8fb0d9); transform: rotate(-1deg); }
.chalkstick::after, .sponge::after { display: none; }
.chalkstick.is-tag { outline: 2px solid rgba(255, 244, 228, .9); outline-offset: 3px; }
.sponge { border-radius: 6px; background: linear-gradient(#cfbfa6 0 45%, #4a4038 45%); box-shadow: 0 3px 4px rgba(0, 0, 0, .35); }
.ledge { position: absolute; border-radius: 3px; background: linear-gradient(#d9ab73, #b98650 70%, #8a5e34); box-shadow: 0 4px 6px rgba(40, 20, 5, .35); pointer-events: none; }
.draw { cursor: crosshair; }

/* стикеры-заметки и полароиды */
.note--s { width: 150px; height: 152px; padding: 30px 16px 12px 18px; }
.note--s h3 { font-size: 19px; }
.note--s p { font-size: 13.5px; }
.note__pin { position: absolute; left: 50%; top: -6px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff6, transparent 40%), var(--pin, #c7562a); box-shadow: 0 3px 3px rgba(0, 0, 0, .35); }
.polaroid { position: absolute; margin: 0; padding: 9px 9px 30px; background: #fbf6ee; box-shadow: 0 8px 14px rgba(40, 20, 5, .28); transform: rotate(var(--r, 0deg)); cursor: pointer; pointer-events: auto; transition: transform .25s; }
.polaroid:hover { transform: rotate(var(--r, 0deg)) scale(1.04); }
.polaroid img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.polaroid figcaption { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; font: 600 12px/1 var(--sans); color: #6b5040; }
.polaroid .tape { position: absolute; left: 50%; top: -10px; width: 58px; height: 20px; margin-left: -29px; background: rgba(240, 225, 195, .75); transform: rotate(-4deg); }
.polaroid--big { position: relative; width: min(440px, 86vw); padding: 14px 14px 52px; transform: rotate(-1.5deg); cursor: default; }
.polaroid--big figcaption { font-size: 16px; bottom: 18px; }

/* мягкие окна */
.sheet--soft { background: rgba(70, 40, 22, .32); backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1); }
.sheet--soft > :first-child { transform: translateY(40px) scale(.82) rotate(-3deg); opacity: 0; transition: transform .7s cubic-bezier(.2, 1.1, .3, 1), opacity .45s; }
.sheet--soft.is-open > :first-child { transform: none; opacity: 1; }

/* настоящий блокнот */
.nb { position: relative; width: min(1040px, 94vw); aspect-ratio: 1413 / 990; container-type: inline-size; color: #3a2a20; filter: drop-shadow(0 30px 40px rgba(40, 20, 5, .4)); }
.nb__img { position: absolute; inset: 0; width: 100%; height: 100%; }
.nb__page { position: absolute; top: 6%; bottom: 7%; padding: 3.2cqw 3cqw; opacity: 0; transition: opacity .5s .45s; }
.sheet.is-open .nb__page { opacity: 1; }
.nb__page--l { left: 5%; width: 43%; }
.nb__page--r { left: 52%; width: 38%; }
.nb h2 { margin: 1.2cqw 0 .8cqw; font: 3.3cqw/1.05 var(--serif); }
.nb p, .nb li { font-size: 1.55cqw; line-height: 1.5; margin: 0 0 1.2cqw; }
.nb ul { margin: 0 0 1.4cqw; padding-left: 1.6cqw; }
.nb li { margin: 0; }
.nb__k { font: 1.3cqw/1 var(--mono) !important; color: #b4541d; letter-spacing: .05em; margin-top: .6cqw !important; }
.nb__photo { position: relative; margin: 0; width: 46%; padding: .7cqw .7cqw 2.4cqw; background: #fffaf2; transform: rotate(-3deg); box-shadow: 0 .6cqw 1.2cqw rgba(60, 35, 15, .25); }
.nb__photo img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 20%; }
.nb__photo .tape { position: absolute; left: 50%; top: -1cqw; width: 7cqw; height: 2cqw; margin-left: -3.5cqw; background: rgba(240, 225, 195, .8); transform: rotate(4deg); }
.nb__link { margin-top: .6cqw; border: 0; padding: 1cqw 1.8cqw; border-radius: 999px; background: #3a2a20; color: #fbf3e4; font: 600 1.4cqw/1 var(--sans); cursor: pointer; }
.nb__flip { position: absolute; top: 3%; bottom: 4%; left: 50%; width: 44%; transform-origin: 0 50%; background: linear-gradient(90deg, #e9dcc4, #fbf3e4 30%); border-radius: 0 6px 6px 0; pointer-events: none; opacity: 0; }
.sheet.is-open .nb__flip { animation: flip .9s .15s cubic-bezier(.5, 0, .3, 1) both; }
@keyframes flip { 0% { opacity: 1; transform: perspective(1400px) rotateY(0); } 85% { opacity: 1; } 100% { opacity: 0; transform: perspective(1400px) rotateY(-178deg); } }
@media (max-width: 700px), (max-height: 500px) {
  .nb { aspect-ratio: auto; width: min(460px, 94vw); padding: 14px; border-radius: 12px; background: #b98a58; filter: none; box-shadow: 0 20px 50px rgba(0, 0, 0, .4); container-type: normal; }
  .nb__img, .nb__flip { display: none; }
  .nb__page { position: static; width: auto !important; padding: 22px; background: #fbf3e4 radial-gradient(rgba(120, 90, 60, .25) 1px, transparent 1.2px) 0 0 / 16px 16px; border-radius: 6px; }
  .nb__page + .nb__page { margin-top: 8px; }
  .nb h2 { font-size: 28px; margin: 14px 0 8px; }
  .nb p, .nb li { font-size: 15px; margin-bottom: 12px; }
  .nb ul { padding-left: 18px; }
  .nb__k { font-size: 12px !important; }
  .nb__photo { width: 56%; padding: 6px 6px 22px; }
  .nb__photo .tape { width: 60px; height: 18px; margin-left: -30px; top: -8px; }
  .nb__link { padding: 10px 16px; font-size: 14px; }
}

/* письмо-отзыв */
.letter { width: min(520px, 100%); padding: 34px 34px 28px; border-radius: 6px; color: #3a2a20; position: relative;
  background: #fbf3e4 repeating-linear-gradient(transparent 0 33px, rgba(150, 110, 70, .16) 33px 34px); box-shadow: 0 30px 70px rgba(40, 20, 5, .45); }
.letter__k { margin: 0 0 6px; font: 12px var(--mono); color: #b4541d; letter-spacing: .05em; }
.letter h2 { margin: 0 0 8px; font: 34px/1.05 var(--serif); }
.letter__lead { margin: 0 0 18px; line-height: 1.5; }
.letter label { display: block; margin-bottom: 14px; font-size: 13px; font-weight: 600; color: #6b5040; }
.letter input, .letter textarea { display: block; width: 100%; margin-top: 6px; padding: 10px 12px; border: 1.5px solid #d9c4a5; border-radius: 10px; background: rgba(255, 252, 246, .85); font: 16px/1.4 var(--sans); color: #3a2a20; resize: vertical; }
.letter input:focus, .letter textarea:focus { outline: 2px solid #c7562a; outline-offset: 1px; border-color: transparent; }
.letter__send { display: inline-flex; align-items: center; gap: 10px; border: 0; padding: 12px 20px 12px 12px; border-radius: 999px; background: #3a2a20; color: #fbf3e4; font-weight: 600; cursor: pointer; }
.letter__send::before { content: ""; width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #e27a52, #a3361b 70%); box-shadow: inset 0 0 0 3px rgba(0, 0, 0, .12); }
.letter__note { margin: 12px 0 0; font-size: 13px; color: #8a6a50; }
.phone__msg { margin: 18px 0 0; padding: 12px 14px; border-radius: 18px 18px 18px 4px; background: rgba(255, 255, 255, .9); color: #222; font-size: 14px; line-height: 1.4; text-align: left; align-self: stretch; }

/* тост и лапки */
.toast { position: fixed; z-index: 70; left: 50%; top: max(84px, calc(env(safe-area-inset-top) + 74px)); margin: 0; padding: 11px 18px; border-radius: 999px; background: var(--milk); color: var(--choco);
  font-weight: 600; font-size: 14px; box-shadow: 0 10px 30px rgba(40, 20, 5, .35); transform: translate(-50%, -20px); opacity: 0; pointer-events: none; transition: opacity .4s, transform .5s cubic-bezier(.2, 1.4, .4, 1); }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.paw { position: absolute; width: 26px; height: 26px; pointer-events: none; opacity: 0; animation: paw 2.6s ease forwards;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26' fill='%2365463a'%3E%3Cellipse cx='13' cy='17' rx='6' ry='5'/%3E%3Ccircle cx='6' cy='10' r='2.6'/%3E%3Ccircle cx='11' cy='6' r='2.6'/%3E%3Ccircle cx='16' cy='6' r='2.6'/%3E%3Ccircle cx='21' cy='10' r='2.6'/%3E%3C/svg%3E") center / contain no-repeat; }
@keyframes paw { 10% { opacity: .75; } 70% { opacity: .75; } 100% { opacity: 0; } }
.peek { position: absolute; width: 210px; transform: translateY(160%) rotate(-6deg); transition: transform .8s cubic-bezier(.2, 1.3, .4, 1); pointer-events: none; }
.peek.is-on { transform: translateY(0) rotate(-6deg); }

/* ===== v16: метки, уведомление, заставка, блокнот, доска ===== */
.cat { animation: breathe 4.2s ease-in-out infinite; }
.cat.is-pet { animation: breathe 2.4s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.004, 1.014); } }
.envelope { position: absolute; transform: rotate(-8deg); transform-origin: 50% 100%; filter: drop-shadow(1px 2px 1.5px rgba(60, 30, 10, .35)) brightness(calc(.82 + .18 * var(--lit))); pointer-events: none; }

/* метки в стиле комнаты: бумажный ярлычок с полоской васи */
.hot__tag { padding: 9px 15px 8px; border-radius: 3px 5px 4px 6px; color: #4a2f1f; font: 17px/1 var(--serif); letter-spacing: .01em;
  background: #f7ecd8 radial-gradient(rgba(150, 110, 70, .12) 1px, transparent 1.3px) 0 0 / 7px 7px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 7px 16px rgba(50, 25, 8, .32), 0 1px 2px rgba(50, 25, 8, .25);
  transform: translate(-50%, 6px) rotate(-2deg) scale(calc(1 / var(--s, 1))); }
.hot__tag::before { content: ""; position: absolute; left: 50%; top: -7px; width: 34px; height: 12px; margin-left: -17px; background: rgba(214, 160, 120, .78); transform: rotate(-4deg); border-radius: 1px;
  -webkit-mask: linear-gradient(90deg, transparent 0 2px, #000 2px calc(100% - 2px), transparent 0); mask: linear-gradient(90deg, transparent 0 2px, #000 2px calc(100% - 2px), transparent 0); }
.hot:hover .hot__tag, .hot:focus-visible .hot__tag, .hot.is-tag .hot__tag { transform: translate(-50%, -8px) rotate(-2deg) scale(calc(1 / var(--s, 1))); }

/* уведомление — бумажная записка с конвертом */
.notif__pill { gap: 10px; padding: 9px 14px 9px 9px; border-radius: 4px 6px 5px 7px; color: #4a2f1f; backdrop-filter: none; -webkit-backdrop-filter: none;
  background: #f7ecd8 radial-gradient(rgba(150, 110, 70, .12) 1px, transparent 1.3px) 0 0 / 7px 7px; box-shadow: 0 8px 20px rgba(50, 25, 8, .35), 0 1px 2px rgba(50, 25, 8, .25); rotate: -3deg; }
.notif:hover .notif__pill { background-color: #fff6e6; }
.notif__ico { width: 34px; height: 26px; border-radius: 2px; background: url(images/room/envelope.webp) center / contain no-repeat; position: relative; }
.notif__ico::after { content: ""; position: absolute; right: -5px; top: -5px; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #e0715a, #a3361b 70%); box-shadow: 0 1px 2px rgba(60, 20, 5, .4); animation: seal 1.6s ease-in-out infinite; }
@keyframes seal { 50% { transform: scale(1.25); } }
.notif__txt { font: 12px/1.25 var(--sans); color: #7a5a44; }
.notif__txt b { font: 16px/1.1 var(--serif); color: #4a2f1f; }
.notif::after { background: #f7ecd8; }

/* уютная заставка вместо имени */
.os { background: linear-gradient(rgba(14, 14, 40, .55), rgba(20, 12, 30, .62)), url(images/room/wallpaper.webp) center / cover; }
.os--mini { background: url(images/room/wallpaper.webp) center / cover; }
.os--mini::after { background: linear-gradient(115deg, rgba(255, 255, 255, .12), transparent 45%); }

/* блокнот: просто раскрывается на две стороны */
.nb { perspective: 2400px; }
.nb__img--l { clip-path: inset(0 50% 0 0); transform-origin: 50% 50%; }
.nb__img--r { clip-path: inset(0 0 0 50%); transform-origin: 50% 50%; }
.sheet.is-open .nb__img--l { animation: nbL .8s .08s cubic-bezier(.3, .7, .3, 1) both; }
.sheet.is-open .nb__img--r { animation: nbR .8s .08s cubic-bezier(.3, .7, .3, 1) both; }
@keyframes nbL { from { transform: rotateY(-80deg); } to { transform: none; } }
@keyframes nbR { from { transform: rotateY(80deg); } to { transform: none; } }
.nb__page { transition: opacity .45s .55s; }

/* доска без рамки: мелки и губка — рисованный спрайт полки */
.ledge { height: auto; border-radius: 0; background: none; box-shadow: none; filter: drop-shadow(0 6px 6px rgba(40, 20, 5, .28)); }
.chalkstick, .chalkstick--pink, .chalkstick--blue, .sponge { background: none; box-shadow: none; transform: none; border-radius: 8px; }
.chalkstick.is-tag { outline: 2px dashed rgba(255, 244, 228, .85); outline-offset: 2px; }

/* ===== v17: уведомление как в айфоне ===== */
.notif__pill, .notif::after { animation: none; }
.notif::after { display: none; }
.notif__pill { width: 270px; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 18px; rotate: none; color: #1c1c1e; text-align: left;
  background: rgba(246, 244, 241, .82); backdrop-filter: blur(18px) saturate(1.6); -webkit-backdrop-filter: blur(18px) saturate(1.6);
  box-shadow: 0 10px 30px rgba(30, 15, 5, .28), 0 0 0 .5px rgba(0, 0, 0, .08); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", var(--sans);
  opacity: 0; transform: translateY(-14px) scale(.96); transition: opacity .45s, transform .6s cubic-bezier(.2, 1.4, .4, 1); }
body.has-notif .notif__pill { opacity: 1; transform: none; }
.notif:hover .notif__pill { background: rgba(255, 255, 255, .92); }
.notif__app { flex: none; width: 34px; height: 34px; border-radius: 8px; background: linear-gradient(#67e377, #2fc145);
  background-image: radial-gradient(ellipse 11px 9px at 50% 46%, #fff 98%, transparent 100%), linear-gradient(#67e377, #2fc145); position: relative; }
.notif__app::after { content: ""; position: absolute; left: 10px; top: 20px; border: 4px solid transparent; border-top-color: #fff; border-left-color: #fff; transform: rotate(10deg); }
.notif__body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.notif__head { display: flex; justify-content: space-between; font-size: 10.5px; letter-spacing: .02em; color: rgba(60, 60, 67, .6); margin-bottom: 2px; }
.notif__body b { font-size: 14px; font-weight: 600; line-height: 1.25; }
.notif__msg { font-size: 13px; line-height: 1.3; color: #1c1c1e; white-space: normal; }
.notif.is-nudge .notif__pill { animation: nudge .7s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes nudge { 0%, 100% { transform: none; } 30% { transform: translateY(-6px); } 60% { transform: translateY(1px); } }

/* письмо у лампы-гриба */
.envelope { transform: rotate(7deg); }
/* в комнате уведомление компактнее */
.notif:not(.notif--desk) .notif__pill { width: 200px; padding: 7px 9px; gap: 8px; border-radius: 14px; }
.notif:not(.notif--desk) .notif__app { width: 26px; height: 26px; border-radius: 6px; background-size: auto; background-image: radial-gradient(ellipse 8px 7px at 50% 46%, #fff 98%, transparent 100%), linear-gradient(#67e377, #2fc145); }
.notif:not(.notif--desk) .notif__app::after { left: 7px; top: 15px; border-width: 3px; }
.notif:not(.notif--desk) .notif__head { font-size: 9px; }
.notif:not(.notif--desk) .notif__body b { font-size: 12px; }
.notif:not(.notif--desk) .notif__msg { font-size: 11px; }
@media (orientation: portrait) { .notif:not(.notif--desk) { transform: translate(-90%, -100%) scale(calc(1 / var(--s, 1))); } }

/* v18: пасхалки */
#catBtn { touch-action: none; }
.peek { width: 190px; cursor: zoom-in; }
.peek.is-on { pointer-events: auto; }
.peek img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; }
.peek__hint { position: absolute; left: 50%; bottom: -30px; transform: translateX(-50%); white-space: nowrap; padding: 5px 10px; border-radius: 999px; background: rgba(40, 22, 10, .7); color: #fbf3e4; font: 12px/1 var(--sans); }
.polaroid--big img { height: auto; max-height: 66vh; aspect-ratio: auto; object-fit: cover; }
.envelope { transform: rotate(-3deg); filter: drop-shadow(0 2px 1.5px rgba(60, 30, 10, .4)) brightness(calc(.8 + .2 * var(--lit))); }
body.peek-on .notif { opacity: 0; pointer-events: none; transition: opacity .3s; }

/* v19: полароиды-пасхалки остаются на месте */
.pin { padding: 6px 6px 22px; z-index: 3; }
.pin figcaption { bottom: 6px; font: 600 10px/1 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 4px; }
.pin--tiny { padding: 2px 2px 7px; box-shadow: 0 2px 3px rgba(40, 20, 5, .3); }
.pin--tape .tape { width: 40%; height: 14px; top: -7px; margin-left: -20%; }
.pin.is-new { animation: pinIn .9s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes pinIn { from { opacity: 0; transform: translateY(-40px) rotate(calc(var(--r) - 20deg)) scale(1.6); } to { opacity: 1; transform: rotate(var(--r)); } }
.os { background: linear-gradient(90deg, rgba(24, 16, 30, .72), rgba(24, 16, 30, .35) 55%, rgba(24, 16, 30, .05)), url(images/room/wallpaper.webp) center / cover; }
#room .layer[data-depth="0.9"], #room .layer[data-depth="1.35"], #room .layer--orn { pointer-events: none; }

/* v20: коллекция пасхалок наверху */
.topbar__left { display: flex; align-items: center; gap: 12px; }
.eggbar { display: flex; gap: 6px; padding: 7px 9px; border-radius: 16px; background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.eggbar.is-bump { animation: eggbump .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes eggbump { 40% { transform: scale(1.08); } }
.eggslot { position: relative; width: 30px; height: 38px; padding: 3px 3px 8px; border: 0; border-radius: 2px; cursor: pointer; background: rgba(251, 246, 238, .22); outline: 1.5px dashed rgba(255, 244, 228, .55); outline-offset: -1.5px; transition: transform .2s; }
.eggslot:nth-child(odd) { transform: rotate(-4deg); } .eggslot:nth-child(even) { transform: rotate(3deg); }
.eggslot:hover { transform: rotate(0) scale(1.15); }
.eggslot__q { display: grid; place-items: center; height: 100%; color: rgba(255, 244, 228, .75); font: 14px/1 var(--serif); }
.eggslot.is-found { background: #fbf6ee; outline: 0; box-shadow: 0 3px 6px rgba(30, 15, 5, .35); }
.eggslot img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 1px; }
@media (max-width: 640px) { .topbar__left { gap: 6px; flex-direction: column; align-items: flex-start; } .eggslot { width: 22px; height: 28px; padding: 2px 2px 6px; } .eggbar { padding: 5px 7px; gap: 5px; } }

/* мини-полароид (вытянутый, как instax mini) */
.polaroid.mini { padding: 5px 5px 16px; }
.polaroid.mini img { aspect-ratio: 46 / 62; }
.mini--tiny { padding: 1.5px 1.5px 5px; box-shadow: 0 1px 2px rgba(40, 20, 5, .3); pointer-events: none; }
.pin { z-index: 3; }
.pin .tape { width: 70%; height: 10px; top: -5px; margin-left: -35%; }
.fly { position: fixed; z-index: 80; width: 140px; padding: 9px 9px 30px; transform: scale(.3) rotate(-30deg); opacity: 0; pointer-events: none; transition: transform .7s cubic-bezier(.2, 1.4, .4, 1), opacity .3s; }
.fly.is-in { transform: scale(1.6) rotate(-4deg); opacity: 1; }
.fly figcaption { font-size: 11px; }

/* свечение экрана */
.screen-glow { position: absolute; pointer-events: none; border-radius: 30px; transform: scale(1.35, 1.6); background: radial-gradient(closest-side, rgba(255, 222, 90, .55), rgba(255, 200, 70, .22) 60%, transparent);
  mix-blend-mode: screen; filter: blur(18px); animation: sglow 5s ease-in-out infinite; }
.screen-glow--mini { filter: blur(10px); transform: scale(1.5, 1.9); }
@keyframes sglow { 50% { opacity: .78; } 52% { opacity: .9; } }
.os::before { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; box-shadow: inset 0 0 40px rgba(255, 236, 160, .35); }

/* v22: подписи только в открытом фото; фото открывается целиком */
.polaroid.mini figcaption { display: none; }
.polaroid.mini { padding-bottom: 13px; }
.polaroid--big { width: auto; max-width: 90vw; }
.polaroid--big img { width: auto; max-width: min(460px, 80vw); max-height: 68vh; object-fit: contain; }
.polaroid.mini img { object-position: 50% 15%; }
/* v23: экран светится сам по себе, без тёмной вуали; при выключенном свете свечение ярче */
.os { background: linear-gradient(90deg, rgba(50, 25, 10, .38), rgba(50, 25, 10, .08) 55%, transparent), url(images/room/wallpaper.webp) center / cover; }
.os__page { text-shadow: 0 1px 10px rgba(60, 30, 5, .45), 0 1px 2px rgba(60, 30, 5, .35); }
.os--mini { filter: brightness(calc(1.12 - .1 * var(--lit))) saturate(1.05); }
.screen-glow { opacity: calc(1.3 - .5 * var(--lit)); animation-name: sglow2; }
@keyframes sglow2 { 50% { filter: blur(18px) brightness(.88); } }
/* пропорции как у настоящего instax mini: кадр 54×86, снимок 46×62 */
.polaroid--big { --w: min(400px, 82vw, 54vh); box-sizing: border-box; width: var(--w); max-width: none; padding: calc(var(--w) * .074) calc(var(--w) * .074) calc(var(--w) * .25); }
.polaroid--big img { width: 100%; max-width: none; max-height: none; height: auto; aspect-ratio: 46 / 62; object-fit: cover; object-position: 50% 18%; }
.polaroid--big figcaption { bottom: calc(var(--w) * .09); font: 600 17px/1 var(--sans); }
.polaroid.mini { padding: 6px 6px 17px; }

/* v24: стопка найденных фото */
.stack { position: relative; display: grid; place-items: center; }
.stack > .polaroid { grid-area: 1 / 1; }
.stack__back { pointer-events: none; transition: transform .35s, opacity .35s; }
.stack__back[hidden] { display: block; opacity: 0; }
.stack__back--1 { transform: translate(14px, 8px) rotate(4deg); filter: brightness(.94); }
.stack__back--2 { transform: translate(-12px, 14px) rotate(-5deg); filter: brightness(.88); }
.stack__top { z-index: 2; touch-action: pan-y; user-select: none; transition: transform .26s cubic-bezier(.4, 0, .6, 1), opacity .26s; }
.stack.is-many .stack__top { cursor: pointer; }
.stack__top.is-out { transform: translateX(calc(var(--out, -1) * 60%)) rotate(calc(var(--out, -1) * 12deg)); opacity: 0; }
.stack__nav { position: absolute; top: 50%; z-index: 3; width: 46px; height: 46px; margin-top: -23px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(251, 243, 228, .92); color: #4a2f1f; font: 20px/1 var(--sans); box-shadow: 0 6px 16px rgba(40, 20, 5, .3); display: none; }
.stack__nav:hover { background: #fff; }
.stack__nav--prev { left: -70px; }
.stack__nav--next { right: -70px; }
.stack.is-many .stack__nav { display: block; }
.stack__count { position: absolute; left: 50%; bottom: -38px; transform: translateX(-50%); margin: 0; white-space: nowrap; color: #fbf3e4; font: 14px/1 var(--sans); text-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
@media (max-width: 640px) {
  .stack__nav { top: auto; bottom: -62px; margin: 0; }
  .stack__nav--prev { left: calc(50% - 104px); }
  .stack__nav--next { right: calc(50% - 104px); }
  .stack__count { bottom: -46px; }
}

/* v25: листание без двойного прыжка */
.stack__top { transition: transform .3s cubic-bezier(.4, 0, .2, 1), opacity .3s; }
.stack__back { transition: transform .3s cubic-bezier(.4, 0, .2, 1), opacity .3s, filter .3s; }
.stack__back--1.is-promote { transform: rotate(-1.5deg); filter: none; }
.stack__back.is-fresh { opacity: 0; }
.stack.is-snap .stack__top, .stack.is-snap .stack__back { transition: none !important; }

/* v26: проектор отзывов, WeChat и красная книга */
.projector { position: absolute; height: auto; pointer-events: none; filter: drop-shadow(0 4px 4px rgba(40, 20, 5, .45)) brightness(calc(.7 + .3 * var(--lit))); }
.beam { position: absolute; pointer-events: none; mix-blend-mode: screen; opacity: .9;
  background: linear-gradient(to top, rgba(255, 220, 160, .8), rgba(255, 214, 150, .25) 75%, rgba(255, 214, 150, .1));
  clip-path: polygon(44% 100%, 56% 100%, 100% 0, 0 0); filter: blur(2px); animation: beam 4s ease-in-out infinite; }
@keyframes beam { 50% { opacity: .55; } }
.holo { position: absolute; pointer-events: none; display: grid; align-content: center; gap: 5px; padding: 6px 9px; box-sizing: border-box;
  border-radius: 6px; background: rgba(255, 226, 180, .22); box-shadow: 0 0 14px rgba(255, 210, 140, .7), inset 0 0 0 1px rgba(255, 236, 200, .55);
  mix-blend-mode: screen; animation: holo 3.2s ease-in-out infinite; }
.holo i { display: block; height: 3px; border-radius: 2px; background: rgba(255, 240, 215, .85); }
.holo i:nth-child(2) { width: 80%; } .holo i:nth-child(3) { width: 55%; }
.holo b { color: #ffe3a6; font: 9px/1 var(--sans); letter-spacing: 1px; text-shadow: 0 0 4px #ffcf7a; }
@keyframes holo { 50% { transform: translateY(-4px); opacity: .85; } }
.ico--red { background: #ff2442; font-weight: 700; }
.ico--wx { background: #07c160; font-weight: 700; }
.reviews { position: relative; box-sizing: border-box; width: min(520px, 90vw); max-height: 82vh; overflow: auto; padding: 34px 32px 28px; border-radius: 6px;
  background: #f7ecd8 radial-gradient(rgba(150, 110, 70, .12) 1px, transparent 1.3px) 0 0 / 7px 7px; color: #4a2f1f; box-shadow: 0 20px 50px rgba(30, 15, 5, .45); }
.reviews h2 { margin: 4px 0 18px; font: 30px/1.1 var(--serif); }
.reviews__list { display: grid; gap: 14px; margin-bottom: 22px; }
.reviews__empty { margin: 0; padding: 22px 18px; border: 1.5px dashed rgba(122, 90, 68, .4); border-radius: 6px; text-align: center; color: #7a5a44; font: 15px/1.4 var(--sans); }
.review { margin: 0; padding: 16px 18px; background: #fffaf0; border-radius: 4px; box-shadow: 0 3px 10px rgba(60, 30, 10, .12); }
.review blockquote { margin: 0 0 8px; font: 16px/1.45 var(--sans); }
.review figcaption { color: #9a7a60; font: 600 13px/1 var(--sans); }
/* v26: пять контактов помещаются в телефон */
.phone__screen { overflow-y: auto; scrollbar-width: none; }
.phone__screen::-webkit-scrollbar { display: none; }
.phone__avatar { margin-top: 18px; width: 76px; height: 76px; flex: none; }
.phone__role { margin-bottom: 14px; }
.phone__links { gap: 6px; }
.phone__links a { padding: 8px 12px; font-size: 14px; text-align: left; }
.phone__links .ico { width: 28px; height: 28px; flex: none; }
.phone__msg { margin-top: 12px; flex: none; }

/* v27: ретро-проектор на полке, тёплый свет на стене */
.envelope { transform: rotate(-4deg); }
.projector { filter: drop-shadow(1px 3px 2px rgba(50, 25, 8, .4)); }
.pglow { position: absolute; pointer-events: none; mix-blend-mode: screen; border-radius: 50%;
  background: radial-gradient(closest-side at 46% 52%, rgba(255, 190, 110, .55), rgba(255, 170, 90, .18) 55%, transparent);
  animation: pglow 4s ease-in-out infinite; }
@keyframes pglow { 50% { opacity: .75; } }
.beam { mix-blend-mode: screen; opacity: .85; filter: blur(3px); clip-path: polygon(98% 97%, 74% 4%, 4% 4%, 4% 43%);
  background: radial-gradient(circle at 98% 97%, rgba(255, 205, 140, .75), rgba(255, 195, 120, .25) 70%, rgba(255, 190, 110, .1)); }
.holo { border-radius: 4px; padding: 5px 7px; gap: 4px; background: rgba(255, 205, 140, .35);
  box-shadow: 0 0 16px rgba(255, 190, 110, .75), inset 0 0 8px rgba(255, 220, 170, .5); animation: holo 3.2s ease-in-out infinite; }
.holo i { height: 2.5px; background: rgba(255, 238, 205, .9); }
.holo b { font-size: 7px; color: #ffe2a8; }
@keyframes holo { 50% { opacity: .8; } }
.projector { filter: drop-shadow(1px 3px 2px rgba(50, 25, 8, .4)) brightness(calc(.68 + .32 * var(--lit))); }
.holo { background: rgba(255, 180, 100, .38); box-shadow: 0 0 18px rgba(255, 170, 80, .8), inset 0 0 8px rgba(255, 200, 140, .5); }
.holo i { background: rgba(255, 228, 185, .9); }

/* v28: соцсети по языку */
.phone__links li[hidden] { display: none; }
.langs { display: inline-flex; gap: 6px; }
.langs .chip.is-on { background: #fbf3e4; color: #3a2a20; }

/* v29: анкета и китайский шрифт */
:lang(zh) body { font-family: var(--sans), "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", sans-serif; }
.hint[hidden] { display: none; }
.brief { width: min(560px, 92vw); max-height: 86vh; overflow-y: auto; box-sizing: border-box; }
.brief__q { margin: 0 0 14px; }
.brief__label { display: block; margin: 0 0 6px; font: 600 14px/1.35 var(--sans); color: #4a2f1f; }
.brief__label b { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 8px; border-radius: 50%; background: #3a2a20; color: #fbf3e4; font-size: 11px; vertical-align: 1px; }
.brief__label input, .brief__label textarea { display: block; width: 100%; margin-top: 6px; box-sizing: border-box; }
.brief__opts { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.pick { position: relative; cursor: pointer; }
.pick input { position: absolute; opacity: 0; pointer-events: none; }
.pick span { display: inline-block; padding: 6px 12px; border-radius: 999px; border: 1.5px solid rgba(74, 47, 31, .3); font: 13px/1 var(--sans); color: #4a2f1f; transition: background .2s, color .2s; }
.pick input:checked + span { background: #3a2a20; border-color: #3a2a20; color: #fbf3e4; }
.pick input:focus-visible + span { outline: 2px solid #c7562a; outline-offset: 2px; }
.brief__other { width: 100%; box-sizing: border-box; }

/* v31: телефон — сначала выбор, потом все соцсети; Луна снимается с доски */
.phone__choice { width: 100%; display: grid; gap: 10px; }
.phone__btn { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; border: 0; border-radius: 18px; cursor: pointer;
  background: rgba(255, 255, 255, .16); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--milk); font: 600 15px var(--sans); text-align: left; transition: background .2s, transform .2s; }
.phone__btn:hover { background: rgba(255, 255, 255, .28); transform: translateY(-1px); }
.phone__btn--main { background: var(--milk); color: var(--choco); }
.phone__btn--main:hover { background: #fff; }
.phone__btn .ico { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 10px; background: rgba(0, 0, 0, .12); font-size: 15px; }
.phone__btn b { margin-left: auto; font-size: 20px; opacity: .7; }
.phone__back { display: none; align-self: flex-start; margin: 0 0 8px; padding: 4px 2px; border: 0; background: none; color: rgba(255, 247, 236, .85); font: 600 13px var(--sans); cursor: pointer; }
.phone__screen .phone__links { display: none; }
.phone__screen.is-links .phone__links { display: grid; animation: phoneIn .35s ease both; }
.phone__screen.is-links .phone__back { display: block; }
.phone__screen.is-links .phone__choice { display: none; }
.phone__screen:not(.is-links) .phone__choice { animation: phoneIn .35s ease both; }
@keyframes phoneIn { from { opacity: 0; transform: translateY(8px); } }
.fly.fly--from { transform: rotate(2deg); opacity: 1; padding: 5px 5px 13px; }
.fly.fly--from.is-in { transform: scale(1.15) rotate(-4deg); }
.phone__screen.is-links .phone__msg { display: none; }

/* v32: стикер всегда раньше фото под ним; отзывы и письмо в одном листе */
.note--s { background-color: #f4b8ae; }
#notes .polaroid.is-waiting { visibility: hidden; }
.reviews__form { display: none; margin-top: 8px; padding-top: 22px; border-top: 1.5px dashed rgba(122, 90, 68, .35); scroll-margin-top: 20px; }
.reviews.is-writing .reviews__form { display: block; animation: phoneIn .4s ease both; }
.reviews.is-writing .reviews__write { display: none; }
.reviews__form h3 { margin: 0 0 6px; font: 24px/1.1 var(--serif); }
.reviews__form label { display: block; margin-bottom: 14px; font-size: 13px; font-weight: 600; color: #6b5040; }
.reviews__form input, .reviews__form textarea { display: block; width: 100%; margin-top: 6px; padding: 10px 12px; border: 1.5px solid #d9c4a5; border-radius: 10px; background: rgba(255, 252, 246, .85); font: 16px/1.4 var(--sans); color: #3a2a20; resize: vertical; }
.reviews__form input:focus, .reviews__form textarea:focus { outline: 2px solid #c7562a; outline-offset: 1px; border-color: transparent; }

/* v33: отзывы — лента плывёт справа налево, клик — прочитать, кнопка — окно с формой */
.hot--pinned .hot__tag { opacity: 1; transform: translate(-50%, -8px) rotate(-3deg) scale(calc(1 / var(--s, 1))); }
.sheet--wall { padding: 0; }
.rwall { position: relative; width: 100vw; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4vh; padding: 70px 0 6vh; }
.rwall__head { text-align: center; color: #fff7ec; text-shadow: 0 2px 14px rgba(40, 20, 8, .5); }
.rwall__head .letter__k { color: #ffd9a8; }
.rwall__head h2 { margin: 6px 0 0; font: clamp(30px, 4.4vw, 52px)/1.05 var(--serif); }
.rwall__lane { width: 100%; overflow: hidden; padding: 30px 0 40px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.rwall__track { display: flex; gap: 34px; width: max-content; padding-left: 34px; animation: rdrift var(--dur, 40s) linear infinite; }
.rwall__lane:hover .rwall__track, .rwall__lane:focus-within .rwall__track { animation-play-state: paused; }
@keyframes rdrift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.rcard { position: relative; flex: none; width: 270px; min-height: 210px; margin: 0; padding: 22px 22px 40px; border-radius: 3px; cursor: pointer;
  background: #fbf3e4 radial-gradient(rgba(150, 110, 70, .1) 1px, transparent 1.3px) 0 0 / 7px 7px; color: #4a2f1f;
  box-shadow: 0 14px 30px rgba(40, 18, 6, .32); transform: translateY(var(--y, 0)) rotate(var(--r, 0deg)); transition: transform .35s cubic-bezier(.2, 1.2, .3, 1), box-shadow .35s; }
.rcard::before { content: ""; position: absolute; left: 50%; top: -9px; width: 64px; height: 18px; margin-left: -32px; background: rgba(214, 160, 120, .75); transform: rotate(-3deg); }
.rcard:hover, .rcard:focus-visible { transform: translateY(calc(var(--y, 0px) - 8px)) rotate(0deg) scale(1.04); box-shadow: 0 22px 40px rgba(40, 18, 6, .38); outline: none; }
.rcard__stars { display: block; margin-bottom: 8px; color: #d98a3a; font-size: 14px; letter-spacing: 2px; }
.rcard blockquote { margin: 0 0 12px; font: 15.5px/1.45 var(--sans); display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.rcard figcaption { color: #9a7a60; font: 600 13px/1.2 var(--sans); }
.rcard__more { position: absolute; left: 22px; bottom: 14px; color: #c7562a; font: 600 12px/1 var(--sans); }
.rcard__demo { position: absolute; right: 12px; top: 12px; padding: 3px 7px; border-radius: 99px; background: rgba(122, 90, 68, .14); color: #7a5a44; font: 600 10px/1 var(--sans); font-style: normal; text-transform: uppercase; letter-spacing: .06em; }
.rcard--slot { display: grid; place-items: center; padding: 22px; background: rgba(251, 243, 228, .5); border: 2px dashed rgba(255, 247, 236, .75); box-shadow: none; }
.rcard--slot::before { display: none; }
.rcard__slot { color: #fff7ec; font: 20px/1.25 var(--serif); text-align: center; text-shadow: 0 1px 8px rgba(40, 20, 8, .4); }
.rwall__write { font-size: 16px; padding: 14px 24px 14px 14px; box-shadow: 0 12px 30px rgba(30, 15, 5, .35); }
.rlayer { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 20px; background: rgba(40, 22, 10, .45); opacity: 0; transition: opacity .25s; }
.rlayer.is-open { opacity: 1; }
.rlayer:not([data-show="read"]) .rbox--read, .rlayer:not([data-show="form"]) .rbox--form { display: none; }
.rbox { position: relative; box-sizing: border-box; width: min(520px, 100%); max-height: calc(100dvh - 40px); overflow: auto; margin: 0; padding: 34px 32px 28px; border-radius: 4px;
  background: #f7ecd8 radial-gradient(rgba(150, 110, 70, .12) 1px, transparent 1.3px) 0 0 / 7px 7px; color: #4a2f1f; box-shadow: 0 24px 60px rgba(30, 15, 5, .5);
  transform: translateY(20px) scale(.96); transition: transform .35s cubic-bezier(.2, 1.2, .3, 1); }
.rlayer.is-open .rbox { transform: none; }
.rbox__x { position: absolute; right: 12px; top: 10px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(122, 90, 68, .12); color: #4a2f1f; font-size: 20px; cursor: pointer; }
.rbox h3 { margin: 0 0 6px; font: 28px/1.1 var(--serif); }
.rbox--read blockquote { margin: 0 0 16px; font: 18px/1.55 var(--sans); white-space: pre-wrap; }
.rbox--read figcaption { color: #9a7a60; font: 600 14px/1.2 var(--sans); }
.rbox label { display: block; margin-bottom: 14px; font-size: 13px; font-weight: 600; color: #6b5040; }
.rbox input, .rbox textarea { display: block; width: 100%; margin-top: 6px; padding: 10px 12px; border: 1.5px solid #d9c4a5; border-radius: 10px; background: rgba(255, 252, 246, .85); font: 16px/1.4 var(--sans); color: #3a2a20; resize: vertical; }
.rbox input:focus, .rbox textarea:focus { outline: 2px solid #c7562a; outline-offset: 1px; border-color: transparent; }
@media (max-width: 700px) { .rcard { width: 220px; min-height: 190px; } .rwall__track { gap: 22px; } }
@media (prefers-reduced-motion: reduce) { .rwall__lane { overflow-x: auto; } .rwall__track { animation: none; } }

/* v34: версия для телефона */
.sheet { place-items: safe center; }
.mchalk { display: none; }
@media (orientation: portrait) and (max-width: 820px) {
  #board .world { visibility: hidden; }
  #board { background: #6b4a33; overflow: hidden; }
  /* на телефоне нарисованная доска за панелью не видна: только мягко размытый фон, как у других окон */
  #board::before { content: ''; position: absolute; z-index: 0; inset: -40px; background: url(images/room/board.webp) 30% center / cover; filter: blur(18px) saturate(1.1); }
  #board::after { content: ''; position: absolute; z-index: 1; inset: 0; background: rgba(70, 40, 22, .32); }
  .mchalk { position: absolute; z-index: 2; left: 12px; right: 12px; top: calc(max(16px, env(safe-area-inset-top)) + 112px); bottom: calc(max(18px, env(safe-area-inset-bottom)) + 62px);
    display: block; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; padding: 24px 20px 28px; border: 10px solid #a7774c; border-radius: 10px;
    background: #2f302d radial-gradient(120% 80% at 30% 20%, rgba(255, 255, 255, .06), transparent 60%); box-shadow: inset 0 0 40px rgba(0, 0, 0, .45), 0 18px 40px rgba(20, 10, 4, .45);
    color: #f2eee6; }
  .mchalk__title { margin: 0 0 18px; font: 32px/1.05 var(--serif); }
  .mchalk__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
  .mchalk__steps li { position: relative; padding-left: 44px; }
  .mchalk__steps b { position: absolute; left: 0; top: -2px; display: grid; place-items: center; width: 30px; height: 30px; border: 2px solid currentColor; border-radius: 50%; font: 16px/1 var(--serif); }
  .mchalk__steps li:nth-child(2) b { color: #f3b6b0; } .mchalk__steps li:nth-child(4) b { color: #a9c9f0; }
  .mchalk__steps h3 { margin: 0 0 4px; font: 21px/1.1 var(--serif); }
  .mchalk__steps p { margin: 0; font-size: 15px; line-height: 1.45; color: rgba(242, 238, 230, .88); }
  .mchalk__foot { display: block; margin: 22px 0 0; padding: 0; border: 0; background: none; color: #f6d9a8; font: 600 16px/1.35 var(--sans); text-align: left; cursor: pointer; }
  .mchalk__egg { position: relative; height: 170px; margin-top: 18px; }
  .mchalk__hat { position: absolute; right: 22px; top: 10px; width: 96px; --r: 3deg; }
  .mchalk__note { position: absolute; right: 8px; top: 0; width: 150px; height: 152px; margin: 0; border: 0; text-align: left; color: var(--ink); cursor: pointer; --r: -3deg;
    transform: rotate(var(--r)); transition: transform .5s cubic-bezier(.5, -0.3, .3, 1.2); }
  .mchalk__note.is-off { transform: translate(-150px, 30px) rotate(-14deg); }
  .mchalk__hat.is-gone { opacity: 0; }
  .gmenu__panel { padding-top: calc(max(16px, env(safe-area-inset-top)) + 128px); }
}
@media (max-width: 640px) { .gmenu__panel { padding-top: calc(max(16px, env(safe-area-inset-top)) + 128px); } }
/* телефон горизонтально: невысокий экран */
@media (max-height: 500px) {
  .sheet { padding: 14px 70px 14px 16px; }
  .phone { height: calc(100dvh - 28px); aspect-ratio: auto; width: min(420px, 80vw); border-radius: 34px; padding: 8px; }
  .phone__screen { border-radius: 28px; padding: 10px 18px 20px; }
  .phone__status, .phone__home { display: none; }
  .phone__avatar { width: 56px; height: 56px; margin-top: 4px; font-size: 22px; }
  .phone__name { font-size: 20px; margin: 8px 0 2px; }
  .phone__note { display: none; }
  .rwall { gap: 2vh; padding: 14px 0 12px; }
  .rwall__head h2 { font-size: 26px; }
  .rwall__lane { padding: 18px 0 22px; }
  .rcard { min-height: 160px; padding: 16px 16px 34px; }
  .rcard blockquote { -webkit-line-clamp: 3; }
}

/* v35: волна 1 */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.brief__set { border: 0; margin: 0; padding: 0; min-width: 0; }
.brief__set legend { padding: 0; }
.work__thumb.has-img { background-size: cover; background-position: center; }
.work__thumb.has-img::after { content: none; }
.project__hero { background-size: cover; background-position: center; }
.mos { display: none; }
@media (orientation: portrait) and (max-width: 820px) {
  #desk .world { visibility: hidden; }
  #desk { background: #3b2a20 url(images/room/desk-off.webp) center / cover; }
  .mos { position: absolute; z-index: 2; left: 12px; right: 12px; top: calc(max(16px, env(safe-area-inset-top)) + 112px);
    display: block; padding: 24px 20px; border: 8px solid #1d1a18; border-radius: 14px; background: linear-gradient(160deg, #2a2730, #17151b);
    box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 0 40px rgba(240, 140, 60, .35), 0 18px 40px rgba(10, 5, 2, .5); color: #f2eee6; }
  .mos .kicker { color: #f6b27a; }
  .mos__name { margin: 6px 0 10px; font: 34px/1.05 var(--serif); }
  .mos__lead { margin: 0 0 18px; font-size: 15px; line-height: 1.45; color: rgba(242, 238, 230, .85); }
  .mos__row { display: flex; flex-wrap: wrap; gap: 10px; }
  .mos .chip { min-height: 44px; }
}

/* v36: услуги и цены, сроки, lunaroo */
.brand__name { text-transform: none; letter-spacing: .01em; }
.letter.svc { width: min(900px, 94vw); max-height: 88vh; overflow-y: auto; box-sizing: border-box; overscroll-behavior: contain; }
.svc h3 { margin: 0 0 10px; font: 22px/1.15 var(--serif); }
.svc__sub { margin-top: 26px !important; }
.svc__pain { margin: 18px 0 4px; padding: 16px 20px; border-radius: 12px; background: rgba(199, 86, 42, .08); border: 1.5px dashed rgba(199, 86, 42, .35); }
.svc__pain ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 22px; }
.svc__pain li { position: relative; padding-left: 22px; font-size: 15px; line-height: 1.4; }
.svc__pain li::before { content: "✕"; position: absolute; left: 0; top: 0; color: #c7562a; font-weight: 700; }
.svc__pkgs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.pkg { position: relative; display: flex; flex-direction: column; padding: 18px 16px 16px; border-radius: 14px; background: rgba(255, 252, 246, .9); border: 1.5px solid #e3d2b8; }
.pkg--pop { border-color: #c7562a; box-shadow: 0 10px 24px rgba(199, 86, 42, .18); }
.pkg__pop { position: absolute; top: -11px; left: 14px; padding: 3px 10px; border-radius: 999px; background: #c7562a; color: #fff; font: 600 11px/1.4 var(--mono); }
.pkg h4 { margin: 0 0 4px; font: 22px/1.1 var(--serif); }
.pkg__d { margin: 0 0 10px; font-size: 14px; line-height: 1.4; color: #6b5040; }
.pkg ul { margin: 0 0 12px; padding-left: 18px; font-size: 14px; line-height: 1.45; flex: 1; }
.pkg__t { margin: 0; font: 12px/1.4 var(--mono); color: #8a6a52; }
.pkg__p { margin: 4px 0 0; font: 700 20px/1.2 var(--sans); color: #b4541d; }
.svc__all { margin: 14px 0 0; font-size: 14px; line-height: 1.5; }
.svc__extra { margin: 0; padding: 0; list-style: none; }
.svc__extra li { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px dashed #dcc8aa; font-size: 15px; line-height: 1.4; }
.svc__extra b { white-space: nowrap; color: #b4541d; }
.svc__p { margin: 0; font-size: 15px; line-height: 1.5; }
.svc__note { margin: 10px 0 0; font-size: 13px; color: #8a6a52; }
.svc__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 22px; }
.svc__cta .letter__send { margin: 0; }
.svc__chip { border-color: #c9b08e; color: #3a2a20; }
@media (max-width: 720px) {
  .letter.svc { padding: 26px 18px 22px; }
  .svc__pain ul, .svc__pkgs { grid-template-columns: 1fr; }
}
.chalk__time { margin: -14px 0 18px; font: 15px/1.3 var(--mono); color: #f6d9a8; letter-spacing: .02em; }
.mchalk .chalk__time { margin: -10px 0 16px; font-size: 13px; }
.step__t { display: block; margin: -2px 0 4px; font: 12px/1.3 var(--mono); color: #f6d9a8; opacity: .9; }
.hot--svc .hot__tag { top: auto; bottom: -6px; white-space: nowrap; }
.chalk__steps h3 { display: inline; }
.chalk__steps .step__t { display: inline; margin: 0 0 0 8px; font-size: 13px; }
.chalk__steps h3 + .step__t + p { margin-top: 6px; }
.chalk__time { margin: -12px 0 16px; }
.mchalk .chalk__steps h3 { display: block; }
.mchalk .step__t { display: block; margin: -2px 0 4px; }
.chalk__steps p { font-size: 14.5px; line-height: 1.36; }
.step__t { white-space: nowrap; }

/* v37: форма отзыва раскрывается под лентой и не закрывает отзывы */
.rwall .rbox--form { display: none; width: min(560px, calc(100vw - 32px)); max-height: none; overflow: visible; transform: none; flex-shrink: 0; }
.rwall.is-writing { justify-content: flex-start; overflow-y: auto; overscroll-behavior: contain; gap: 2.5vh; padding-bottom: 40px; }
.rwall.is-writing .rbox--form { display: block; animation: rform .4s cubic-bezier(.2, 1.1, .3, 1); }
.rwall.is-writing .rwall__write { display: none; }
.rwall.is-writing .rwall__lane { padding: 16px 0 20px; flex-shrink: 0; }
@keyframes rform { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.rwall.is-writing .rwall__track { zoom: .72; }
.rwall.is-writing .rwall__head h2 { font-size: clamp(24px, 3vw, 36px); }
.rwall .rbox--form { scroll-margin: 76px 0 24px; }
@media (max-width: 700px) {
  .rwall.is-writing .rwall__track { zoom: .62; }
  .rwall .rbox--form { padding: 26px 20px 20px; }
  .rwall .rbox--form textarea { min-height: 84px; }
}
@media (max-width: 700px) { .rwall .rbox--form { scroll-margin-top: 150px; } .rwall .rbox--form .rbox__x { display: none; } }

/* v38: экран-вход в работы, лента работ, окно проекта */
.os { cursor: pointer; }
.os__title { font: 600 13px/1 var(--mono); opacity: .85; }
.os__page--go { padding: 34px 40px; }
.os__page--go .kicker { font-size: 15px; }
.os__page--go .os__name { font-size: 70px; }
.os__page--go .os__lead { font-size: 21px; max-width: 470px; }
.os__page--go .chip { font-size: 17px; padding: 13px 20px; }
.wwall { position: relative; width: 100vw; height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 3vh; padding: 70px 0 5vh; box-sizing: border-box; }
.wfilter { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.wfilter .chip { color: #fff7ec; border-color: rgba(255, 247, 236, .6); }
.wfilter .chip.is-on { background: #fff7ec; color: #3a2a20; }
.wlane { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; cursor: grab; padding: 10px 0 24px; overscroll-behavior-x: contain; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.wlane::-webkit-scrollbar { display: none; }
.wlane.is-drag { cursor: grabbing; }
.wlane.is-drag .wcard { pointer-events: none; }
.wtrack { display: flex; gap: 28px; width: max-content; padding: 0 max(6vw, calc(50vw - 300px)); }
.wcard { all: unset; box-sizing: border-box; position: relative; display: flex; flex-direction: column; width: min(560px, 78vw); padding: 14px 14px 20px; border-radius: 16px; background: #fbf3e6; color: #3a2a20; cursor: pointer;
  box-shadow: 0 24px 50px rgba(30, 15, 5, .38); transition: transform .35s cubic-bezier(.2, 1.2, .3, 1), box-shadow .3s; }
.wcard:hover, .wcard:focus-visible { transform: translateY(-6px) rotate(-.4deg); box-shadow: 0 32px 60px rgba(30, 15, 5, .45); }
.wcard:focus-visible { outline: 3px solid #f6b27a; outline-offset: 3px; }
.wcard__img { display: block; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #e9d8bd; }
.wcard__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s; }
.wcard:hover .wcard__img img { transform: scale(1.04); }
.wcard__cat { margin: 14px 4px 4px; font: 12px/1.2 var(--mono); color: #b4541d; text-transform: lowercase; }
.wcard__h { margin: 0 4px; font: 28px/1.1 var(--serif); }
.wcard__p { margin: 6px 4px 0; font-size: 15px; line-height: 1.45; color: #6b5040; }
.wcard__more { margin: 12px 4px 0; font: 600 15px/1 var(--sans); color: #b4541d; }
.wcard--next { cursor: default; justify-content: center; align-items: flex-start; gap: 6px; padding: 34px; width: min(420px, 78vw); background: rgba(251, 243, 230, .16); color: #fff7ec; border: 2px dashed rgba(255, 247, 236, .55); box-shadow: none; }
.wcard--next:hover { transform: none; box-shadow: none; }
.wcard--next .wcard__p { color: rgba(255, 247, 236, .85); margin-bottom: 16px; }
.wnav { display: flex; align-items: center; justify-content: center; gap: 18px; color: rgba(255, 247, 236, .8); }
.wnav__b { width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid rgba(255, 247, 236, .7); background: rgba(40, 20, 8, .25); color: #fff7ec; font-size: 22px; cursor: pointer; }
.wnav__b:hover { background: #fff7ec; color: #3a2a20; }
.wnav__hint { font: 13px/1.3 var(--mono); text-align: center; }
@media (max-width: 700px) { .wnav__hint { display: none; } .wcard__h { font-size: 23px; } .wwall { gap: 2vh; } }
/* окно проекта */
.case { box-sizing: border-box; width: min(980px, 96vw); max-height: 92vh; overflow-y: auto; overscroll-behavior: contain; padding: 22px 22px 34px; border-radius: 22px; background: var(--milk); color: var(--ink); box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
.case .kicker { color: #b4541d; margin: 0 8px 6px; }
.case h2 { margin: 18px 8px 8px; font: 44px/1.05 var(--serif); }
.case__hero { margin: 0; border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 9; background: #e9d8bd; }
.case__hero img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }
.case__hero + .kicker { margin-top: 20px; }
.case__lead { margin: 0 8px 18px; font-size: 19px; line-height: 1.45; }
.case__facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 0 8px 22px; }
.case__facts div { padding: 12px 14px; border-radius: 12px; background: #f3e6d1; }
.case__facts dt { font: 11px/1.2 var(--mono); color: #8a6a52; text-transform: lowercase; }
.case__facts dd { margin: 4px 0 0; font-weight: 600; font-size: 15px; }
.case__two { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin: 0 0 10px; }
.case__two p { margin: 0 8px; line-height: 1.5; }
.case__two .kicker { margin-bottom: 6px; }
.case__k { margin-top: 30px !important; }
.case__feats { display: grid; gap: 18px; margin: 8px 8px 0; }
.feat { display: grid; grid-template-columns: 1.15fr 1fr; gap: 24px; align-items: center; }
.feat--r { grid-template-columns: 1fr 1.15fr; }
.feat--r .feat__img { order: 2; }
.feat__img { all: unset; display: block; border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 9; cursor: zoom-in; box-shadow: 0 12px 30px rgba(60, 30, 10, .18); }
.feat__img:focus-visible { outline: 3px solid #c7562a; outline-offset: 3px; }
.feat__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.feat__img:hover img { transform: scale(1.04); }
.feat h3 { margin: 0 0 6px; font: 24px/1.15 var(--serif); }
.feat p { margin: 0; line-height: 1.5; }
.case__sell { margin: 8px 8px 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.case__sell li { padding: 12px 14px 12px 40px; border-radius: 12px; background: #f3e6d1; position: relative; line-height: 1.4; }
.case__sell li::before { content: "✓"; position: absolute; left: 15px; top: 11px; color: #b4541d; font-weight: 700; }
.case__cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 26px 8px 0; }
.case__cta .letter__send { margin: 0; }
.case__next { border-color: #c9b08e; color: #3a2a20; }
.clight { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 3vw; background: rgba(20, 10, 4, .82); cursor: zoom-out; }
.clight img { max-width: 100%; max-height: 100%; border-radius: 10px; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
@media (max-width: 720px) {
  .case { padding: 12px 12px 26px; border-radius: 16px; }
  .case h2 { font-size: 32px; }
  .case__lead { font-size: 17px; }
  .case__facts { grid-template-columns: 1fr 1fr; }
  .case__two, .case__sell, .feat, .feat--r { grid-template-columns: 1fr; }
  .feat--r .feat__img { order: 0; }
  .feat { gap: 10px; }
}

/* стрелки листания проектов в открытом окне */
#project .case { transition: opacity .2s, transform .2s; }
#project .case.is-out-l { opacity: 0; transform: translateX(-40px); }
#project .case.is-out-r { opacity: 0; transform: translateX(40px); }
#project .case.is-in-r { opacity: 0; transform: translateX(40px); transition: none; }
#project .case.is-in-l { opacity: 0; transform: translateX(-40px); transition: none; }
.cnav { position: fixed; top: 50%; z-index: 3; width: 56px; height: 56px; margin-top: -28px; border-radius: 50%; border: 1.5px solid rgba(255, 247, 236, .75); background: rgba(40, 20, 8, .38); color: #fff7ec; font-size: 24px; line-height: 1; cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background .2s, color .2s, transform .2s; }
.cnav:hover { background: #fff7ec; color: #3a2a20; transform: scale(1.06); }
.cnav--prev { left: max(12px, calc(50% - 566px)); }
.cnav--next { right: max(12px, calc(50% - 566px)); }
@media (max-width: 700px) {
  .cnav { top: auto; bottom: max(14px, env(safe-area-inset-bottom)); margin-top: 0; width: 48px; height: 48px; font-size: 20px; background: rgba(40, 20, 8, .6); }
  .cnav--prev { left: 14px; } .cnav--next { right: 14px; }
}

/* два полароида в «Обо мне» */
.nb__photos { display: flex; align-items: flex-start; }
.nb__photo--2 { width: 38%; margin: 2.6cqw 0 0 -3%; transform: rotate(4deg); }
.nb__photo--2 .tape { transform: rotate(-6deg); }
@media (max-width: 700px), (max-height: 500px) {
  .nb__photos .nb__photo { width: 52%; }
  .nb__photos .nb__photo--2 { width: 44%; margin: 22px 0 0 -4%; }
}

/* «Обо мне»: точки на бумаге не мешают читать */
.nb__page { isolation: isolate; }
.nb__page::before { content: ''; position: absolute; z-index: -1; inset: 0; pointer-events: none; backdrop-filter: blur(2.5px); -webkit-backdrop-filter: blur(2.5px); -webkit-mask: radial-gradient(closest-side, #000 75%, transparent); mask: radial-gradient(closest-side, #000 75%, transparent); }
.nb p, .nb li { color: #2e2119; }
@media (max-width: 700px), (max-height: 500px) {
  .nb__page { position: relative; background: #fbf3e4 radial-gradient(rgba(120, 90, 60, .1) 1px, transparent 1.2px) 0 0 / 16px 16px; }
  .nb__page::before { display: none; }
}

.svc__extra .svc__tag { display: inline-block; margin-right: 6px; padding: 1px 7px; border-radius: 6px; background: #f1dfc4; color: #8a3f14; font: 600 12px/1.6 var(--mono, monospace); vertical-align: 1px; }
.svc__extra li > b { color: #b4541d; }

/* подписи, которые всегда видны в комнате */
.hot--boardtag .hot__tag { top: auto; bottom: 100%; }
/* приветствие при входе */
.hint--welcome { width: min(560px, calc(100% - 32px)); max-width: none; padding: 14px 22px; border-radius: 18px; background: rgba(255, 247, 236, .92); color: #3a2a20; font-size: 15px; line-height: 1.45; box-shadow: 0 14px 40px rgba(40, 20, 5, .3); animation: hintIn .8s .6s both cubic-bezier(.2, 1.2, .4, 1); }
@keyframes hintIn { from { opacity: 0; transform: translate(-50%, 20px); } to { opacity: 1; transform: translate(-50%, 0); } }
.hint--welcome.is-gone { opacity: 0; }
/* скидка за все пасхалки */
.promo { position: fixed; z-index: 75; left: 50%; top: 50%; width: min(400px, calc(100% - 32px)); box-sizing: border-box; padding: 26px 26px 24px; border-radius: 22px; background: var(--milk); color: #3a2a20; text-align: center;
  box-shadow: 0 30px 80px rgba(40, 20, 5, .5); transform: translate(-50%, -46%) scale(.9) rotate(-2deg); opacity: 0; transition: opacity .35s, transform .55s cubic-bezier(.2, 1.4, .4, 1); }
.promo.is-on { opacity: 1; transform: translate(-50%, -50%) rotate(-1deg); }
.promo__k { margin: 0; font: 600 12px/1 var(--mono, monospace); letter-spacing: .08em; text-transform: uppercase; color: #b4541d; }
.promo__big { margin: 8px 0 0; font: 64px/1 var(--serif); color: #c7562a; }
.promo h3 { margin: 6px 0 8px; font: 24px/1.15 var(--serif); }
.promo p { margin: 0 0 16px; font-size: 15px; line-height: 1.5; }
.promo__x { position: absolute; top: 10px; right: 12px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: #6b5040; font-size: 24px; cursor: pointer; }
.promo__x:hover { background: #f1dfc4; }
.promo .promo__big { margin: 8px 0 0; font: 64px/1 var(--serif); color: #c7562a; }
.promo .promo__k { margin: 0; font: 600 12px/1 var(--mono, monospace); letter-spacing: .08em; text-transform: uppercase; color: #b4541d; }
/* «Услуги и цены»: чистая бумага без линеек */
.letter.svc { background: #fbf3e4; }

/* приветствие: тихая подпись, а не плашка */
.hint--welcome { width: max-content; max-width: min(680px, calc(100% - 32px)); padding: 8px 16px; border-radius: 999px; background: rgba(40, 20, 8, .28); color: rgba(255, 247, 236, .92); font-size: 13px; line-height: 1.4; box-shadow: none; text-shadow: 0 1px 6px rgba(40, 20, 8, .4); }
@media (max-width: 700px) { .hint--welcome { border-radius: 16px; font-size: 12.5px; } }
/* стол под монитором: без второй точки и без старой подписи, вход в работы — через подписанный монитор */
#room .hot[data-go="desk"]::after, #room .hot[data-go="desk"] .hot__tag { display: none; }
/* закреплённые подписи стоят неподвижно: без прыжка при наведении и без светлого пятна под картиной */
.hot--pinned .hot__tag, .hot--pinned:hover .hot__tag, .hot--pinned:focus-visible .hot__tag, .hot--pinned.is-tag .hot__tag { opacity: 1; transform: translate(-50%, -8px) rotate(-3deg) scale(calc(1 / var(--s, 1))); transition: none; }
/* подпись «Услуги и цены» наверху картины, подальше от лампы-фонаря */
.hot--svc .hot__tag, .hot--svc:hover .hot__tag, .hot--svc:focus-visible .hot__tag, .hot--svc.is-tag .hot__tag { top: 132px; bottom: auto; }
.hot--svc::after { display: none; }
.hot--svc::before { display: none; }

/* постоянная кнопка «Обсудить проект» */
.tool--cta { background: rgba(199, 86, 42, .82); }
.tool--cta:hover { background: rgba(176, 74, 34, .9); }
.tool--cta svg path:first-child { fill: rgba(255, 247, 236, .22); }

/* надпись на мониторе в комнате */
.os__minitext { position: absolute; left: 7px; right: 7px; bottom: 7px; display: flex; flex-direction: column; gap: 3px; padding: 6px 8px 7px; border-radius: 6px; text-align: left; pointer-events: none;
  background: rgba(38, 20, 10, .62); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.os__minik { margin: 0; font: 600 6.5px/1 var(--mono, monospace); letter-spacing: .1em; text-transform: uppercase; color: #f5c79d; }
.os__minip { margin: 0; font: 13px/1.12 var(--serif); color: #fff3e2; text-wrap: balance; }
/* отзывы: абзацы в полном тексте */
#reviewReadText { white-space: pre-line; }

/* картинкам прописаны размеры: место под них занято ещё до загрузки */
:where(img[width]) { height: auto; }
/* подпись под названием: светлее и крупнее */
.brand__role { font: 500 13px/1.1 var(--mono); color: #ffe9d2; letter-spacing: .02em; text-shadow: 0 1px 2px rgba(40, 20, 5, .45); }
.brand { background: rgba(60, 34, 22, .62); }
/* телефон: крупные кнопки, «звук» и «свет» в меню */
.gmenu__tools { display: flex; gap: 8px; width: 100%; margin-bottom: 4px; }
.gmenu__tools .tool { width: auto; height: 46px; padding: 0 16px; }
.gmenu__tools .tool__label { display: inline; }
@media (max-width: 640px) {
  .topbar { gap: 8px; }
  .topbar__tools { gap: 8px; }
  .topbar__tools .tool { width: 46px; height: 46px; }
  .topbar__tools .tool--cta { width: auto; padding: 0 14px; }
  .topbar__tools .tool--cta .tool__label { display: inline; }
  .brand__name, .brand__role { white-space: nowrap; }
  .brand__role { font-size: 12px; letter-spacing: 0; }
  .brand { padding: 9px 12px; }
  .eggslot { width: 30px; height: 38px; }
}
@media (max-width: 370px) {
  .topbar { padding-left: 10px; padding-right: 10px; }
  .topbar__tools .tool--cta { width: 46px; padding: 0; }
  .topbar__tools .tool--cta .tool__label { display: none; }
}
/* телефон: сообщение у телефона не закрывает надпись на мониторе */
@media (max-width: 640px) {
  #room .notif:not(.notif--desk) { transform: translate(-14%, -100%) scale(calc(1 / var(--s, 1))); transform-origin: 14% 100%; }
  #room .notif:not(.notif--desk)::after { left: 14%; }
}
@media (max-width: 640px) { .topbar { align-items: flex-start; } }