/* remont.refspec.ru — заглушка. Без внешних ресурсов: шрифты системные. */
:root {
  --bg: #f5f2ec;
  --grid: rgba(34, 38, 44, .055);
  --ink: #22262c;
  --muted: #6b7079;
  --soft: #9aa0a8;
  --accent: #b4532a;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f2236;
    --grid: rgba(160, 200, 255, .07);
    --ink: #e6eef8;
    --muted: #a9bfd8;
    --soft: #6f8cab;
    --accent: #f0a868;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  background-color: var(--bg);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px;
  color: var(--ink);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.stub { width: 100%; max-width: 640px; text-align: center; }
h1 {
  margin: 0 0 8px;
  font-size: clamp(1.6rem, 1.1rem + 2.4vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.15;
}
p { margin: 0; color: var(--muted); font-size: 1.05rem; }
a { color: var(--accent); }

/* Чертёж планировки */
.plan { display: block; width: 100%; height: auto; margin: 0 auto 28px; }
.plan path, .plan rect, .plan circle, .plan ellipse { fill: none; }
.wall { stroke: var(--ink); stroke-width: 6; }
.wall.in { stroke-width: 3.5; }
.door { stroke: var(--accent); stroke-width: 1.2; }
.win rect { fill: var(--bg); stroke: var(--ink); stroke-width: 1; }
.win path { stroke: var(--ink); stroke-width: 1; }
.furn rect, .furn path, .furn circle, .furn ellipse { stroke: var(--soft); stroke-width: 1.2; }
.dim path { stroke: var(--accent); stroke-width: 1; }
.dim text, .lbl text { font-size: 9px; font-family: inherit; letter-spacing: .06em; }
.dim text { fill: var(--accent); }
.lbl text { fill: var(--muted); text-anchor: middle; }

/* Порядок прорисовки: стены, перегородки, окна, двери, мебель, размеры */
.draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.6s cubic-bezier(.45, 0, .2, 1) forwards; }
.fade { opacity: 0; animation: fade .9s ease forwards; }
.d1 { animation-delay: .2s; animation-duration: 1.9s; }
.d2 { animation-delay: 1.5s; animation-duration: 1.1s; }
.d3 { animation-delay: 2.2s; }
.d4 { animation-delay: 2.5s; animation-duration: .9s; }
.d5 { animation-delay: 3.1s; }
.d6 { animation-delay: 3.5s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fade { to { opacity: 1; } }

.stub h1, .stub p { animation: rise .8s ease both; }
.stub p { animation-delay: .15s; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }

@media (prefers-reduced-motion: reduce) {
  .draw, .fade, .stub h1, .stub p { animation: none; stroke-dashoffset: 0; opacity: 1; }
}