/* HOMESTAT — the demo room and the demo villa beside "Try the screen" (16 Oct 2026), drawn in flat lines.
   The figure only: the page's template places it (beside a room controller's screen, under a whole home controller's
   screen, above the screen on a phone). On a phone the drawing stays in view under the page's own menu while the
   visitor uses the screen. Light is a flat fill (assets/ui/demo-room.js sets it); the lines are thin and even. */

.dr{--dr-ln:rgb(228,213,191);--dr-bg:#0B0B0C;margin:0;min-width:0;color:#EDEDED}
.dr-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 10px;min-height:30px}
.dr-eye{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 10px;margin:0;font-size:12px;line-height:1.4;max-width:none;color:#A3A3A3;min-width:0}
.dr-eye-k{letter-spacing:.08em;text-transform:uppercase;font-size:11px;color:#BDBDBD}
.dr-eye-v::before{content:"·";margin-inline-end:10px;color:#5C5C5C}
/* the panel is a layer of its own: what moves behind it (the page's dot panel) never paints the drawing again */
.dr-panel{position:relative;width:100%;aspect-ratio:var(--dr-ar,1.5);background:var(--dr-bg);border:1px solid #2C2C2C;border-radius:18px;overflow:hidden;isolation:isolate;touch-action:manipulation;will-change:transform}
.dr-villa .dr-panel{aspect-ratio:var(--dr-ar,3.1)}
/* under a wide screen the villa takes the screen's width (at most 1040 px), so that the two line up and fit together */
.dr-villa{max-width:1040px;margin-left:auto;margin-right:auto}
.dr-villa.dr-narrow .dr-panel{aspect-ratio:var(--dr-ar-narrow,2.5)}
.dr-panel{--sw:1.4px;--sw2:2.2px}
.dr-svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:hidden}
/* what moves (air, music) has its own layer: its motion never repaints the drawing under it */
.dr-fx-svg{pointer-events:none;will-change:transform}

/* ---- the lines and the lit surfaces ---- */
/* the lines of the walls and what moves in the air: light on ink, dark on a lit fill (as the reference's panel joints) */
.dr-svg .dr-g-room{mix-blend-mode:difference}
.dr-svg .dr-g-room .l,.dr-svg .dr-g-room .l2{stroke:rgb(239,222,199)}
.dr-svg .l,.dr-svg .lf,.dr-svg .sl,.dr-svg .l2,.dr-svg .l3{stroke:var(--dr-ln);stroke-width:var(--sw);stroke-linejoin:round;stroke-linecap:round}
.dr-svg .l,.dr-svg .l2,.dr-svg .l3{fill:none}
.dr-svg .lf{fill:var(--dr-bg)}
.dr-svg .l2{stroke-opacity:.5}
.dr-svg .l3{stroke-opacity:.28}
.dr-svg .s{stroke:none}
.dr-svg .lw{stroke-width:var(--sw2)}
/* the air out of the air conditioning flows down; it sways when the swing is on */
.dr-svg .dr-air .l{stroke-opacity:.72;stroke-dasharray:16 9}
.dr-moving .dr-svg .dr-flow{animation:dr-flow calc(1.6s / var(--dr-sp,1)) linear infinite}
@keyframes dr-flow{to{stroke-dashoffset:-50}}
.dr-svg .dr-air{transform-box:fill-box;transform-origin:50% 0}
.dr-moving .dr-svg .dr-swing{animation:dr-swing 3.2s ease-in-out infinite alternate}
@keyframes dr-swing{from{transform:skewX(-9deg)}to{transform:skewX(9deg)}}
/* music: arcs that travel down from the speakers; more arcs when it is louder */
.dr-svg .dr-snd .l{stroke-opacity:.75}
.dr-svg .dr-snd[data-lv="1"] .dr-a2,.dr-svg .dr-snd[data-lv="1"] .dr-a3,.dr-svg .dr-snd[data-lv="2"] .dr-a3{display:none}
.dr-moving .dr-svg .dr-snd .l{animation:dr-snd 1.6s ease-in-out infinite}
.dr-moving .dr-svg .dr-snd .dr-a2{animation-delay:.27s}
.dr-moving .dr-svg .dr-snd .dr-a3{animation-delay:.54s}
@keyframes dr-snd{0%,100%{stroke-opacity:.12}35%{stroke-opacity:.8}}
/* the alarm: rings at the watched doors and windows, the motion sensor's cone */
.dr-svg .dr-zone{display:none}
.dr-svg .dr-zone.on{display:inline}
.dr-svg .dr-zone .l{stroke:#F4F4F4}
.dr-svg .dr-zone .dot{fill:#F4F4F4;stroke:none}
.dr-svg .dr-zone .dash{stroke-dasharray:3 3}

/* ---- the labels: small mono capitals, as in the reference ---- */
.dr-lab{position:absolute;inset:0;pointer-events:none;z-index:2}
.dr-lab span{position:absolute;font-family:var(--mono,monospace);font-size:9.5px;line-height:1;letter-spacing:.09em;text-transform:uppercase;color:#BDBDBD;white-space:nowrap;padding:2px 3px;border-radius:3px;background:rgba(11,11,12,.78)}
.dr-lab .dr-l-val{color:#E4E4E4}
.dr-lab .dr-l-ac{background:transparent;padding:0}
.dr-lab .dr-l-dev{color:#9C9C9C}
.dr-lab .dr-l-room{color:#B4B4B4;background:transparent;padding:0;font-size:9px}
.dr-lab .dr-l-room.dr-l-onlit{color:#1E1B18}
.dr[data-cam="compact"] .dr-lab .dr-l-room{font-size:8px;letter-spacing:.06em}
.dr-lab .dr-l-alarm{color:#F4F4F4;letter-spacing:.1em;font-size:10px;background:rgba(11,11,12,.86)}
.dr-lab [hidden],.dr-lab .dr-off{display:none}
/* the one orange mark: the screen on the wall that the visitor is using */
.dr-live{position:absolute;z-index:3;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--acc-ink,#FF5705);box-shadow:0 0 6px rgba(255,87,5,.45);pointer-events:none}
/* the live mark's glow breathes (an opacity change only, so the drawing is not painted again) */
.dr-live::after{content:"";position:absolute;inset:-3px;border-radius:50%;box-shadow:0 0 9px 2px rgba(255,87,5,.45);opacity:.3;will-change:opacity}
.dr-moving .dr-live::after{animation:dr-breathe 3.2s ease-in-out infinite}
@keyframes dr-breathe{0%,100%{opacity:.35}50%{opacity:1}}

/* ---- the things the visitor can tap in the drawing: no box at rest, a hairline on hover, the focus ring ---- */
.dr-hot{position:absolute;inset:0;z-index:4}
.dr-hot button{position:absolute;display:block;padding:0;margin:0;border:1px solid transparent;border-radius:10px;background:transparent;color:#EDEDED;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:border-color .15s;font:inherit}
.dr-hot button:hover{border-color:rgba(244,244,244,.3)}
.dr-hot button:focus-visible{outline:2px solid var(--acc-ink,#FF5705);outline-offset:1px}
.dr-hot button[hidden]{display:none}
/* − and + beside the air conditioning: drawn small, touched big */
.dr-hot .dr-pm{display:flex;align-items:center;justify-content:center;font-family:var(--mono,monospace);font-size:14px;line-height:1;color:#E4E4E4}
.dr-hot .dr-pm span{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;border:1px solid rgba(222,215,203,.5);background:rgba(11,11,12,.86)}
.dr-hot .dr-pm:hover{border-color:transparent}
.dr-hot .dr-pm:hover span{border-color:#F4F4F4}
.dr-hot .dr-pm[hidden]{display:none}
.dr-pause{position:relative;flex:none;min-height:30px;padding:4px 12px;border:1px solid #2C2C2C;border-radius:14px;background:transparent;color:#A3A3A3;font-family:var(--mono,monospace);font-size:11px;line-height:1.2;cursor:pointer}
.dr-pause::after{content:"";position:absolute;inset:-8px -4px}
.dr-pause:hover{color:var(--acc-ink,#FF5705);border-color:var(--acc-ink,#FF5705)}
.dr-pause:focus-visible{outline:2px solid var(--acc-ink,#FF5705);outline-offset:2px}
.dr-pause[hidden]{display:none}

/* ---- under the drawing: what it shows, in words (the same values as the screen; also the text for screen readers) ---- */
.dr-legend{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 18px;max-width:none}
.dr-legend li{margin:0;padding:8px 0 7px;border-top:1px solid #2C2C2C;transition:border-color .35s;min-width:0}
.dr-legend b{display:block;font-size:12px;line-height:1.35;font-weight:600;color:#EDEDED}
.dr-legend span{display:flex;align-items:center;gap:6px;font-size:11.5px;line-height:1.45;color:#A3A3A3}
.dr-legend em{font-style:normal;overflow-wrap:anywhere}
.dr-legend .dr-sw{display:inline-block;width:9px;height:9px;border-radius:50%;flex:none}
.dr-legend .dr-sw[hidden]{display:none}
.dr-legend li.chg{border-top-color:#F4F4F4}
.dr-cap{font-size:11.5px;line-height:1.6;color:#8C8C8C;margin:12px 0 0;max-width:62ch}
.dr-say{min-height:1.6em;margin:2px 0 0;font-size:11.5px;line-height:1.6;color:#D6D6D6;max-width:none;opacity:0;transition:opacity .25s}
.dr-say.on{opacity:1}
@media (max-width:719px){.dr-legend{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.dr-villa .dr-legend{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---- phones and narrow windows: the drawing sits above the screen and stays in view while the screen is used ---- */
/* (the page places it above the screen; it sticks under the page's own menu; when the page wraps it in a box of its
   own, that box sticks, as a sticky box sticks only inside its parent) */
@media (max-width:999px){
  .dr{position:-webkit-sticky;position:sticky;top:var(--dr-top,49px);z-index:8;background:var(--ink,#0A0A0A);padding:10px 0 12px;margin:-10px 0 0}
  .dr-host{position:-webkit-sticky;position:sticky;top:var(--dr-top,49px);z-index:8}
  .dr-host > .dr{position:relative;top:auto}
  .dr-panel{aspect-ratio:var(--dr-ar-strip,2);border-radius:14px}
  .dr-villa .dr-panel,.dr-villa.dr-narrow .dr-panel{aspect-ratio:var(--dr-ar-strip,2.7)}
  .dr-top{margin-bottom:8px}
  /* the values stay for screen readers; the drawing says it to the eye */
  .dr .dr-legend{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .dr .dr-cap{display:none}
  .dr .dr-say{position:absolute;left:12px;right:12px;bottom:18px;z-index:5;margin:0;min-height:0;padding:6px 10px;border-radius:10px;background:rgba(11,11,12,.92);font-size:11px;pointer-events:none}
  .dr-pause{min-height:28px;padding:3px 10px;font-size:10.5px}
}
/* reduced motion (or ?still=1): the drawing changes in one step, nothing moves */
@media (prefers-reduced-motion:reduce){
  .dr-moving .dr-svg *,.dr-moving .dr-live::after{animation:none!important}
  .dr-legend li,.dr-say,.dr-hot button{transition:none}
}
.dr-still .dr-svg,.dr-still .dr-svg *,.dr-still .dr-live::after{animation:none!important}