:root {
  color-scheme: dark;
  --ink: #e8f4fa;
  --muted: #9bb7c6;
  --faint: #5e7d8e;
  --page: #06131f;
  --panel: #0a1c2b;
  --line: #1c4559;
  --cyan: #4bd4e8;
  --cyan-soft: #9aeefa;
  --amber: #f6b45c;
  --blue: #75a7ff;
  --green: #8de4af;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background: radial-gradient(circle at 50% -15%, #12324a 0, var(--page) 46rem);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.shell { width: 100%; min-height: 100vh; }
.masthead { position: fixed; z-index: 11; top: clamp(.8rem, 2vw, 2rem); left: clamp(.8rem, 2vw, 2rem); display: flex; justify-content: space-between; align-items: end; gap: 2rem; padding: .8rem 1rem; border: 1px solid rgb(61 119 139 / .64); border-radius: .7rem; background: rgb(7 23 35 / .88); box-shadow: 0 9px 28px rgb(0 0 0 / .23); backdrop-filter: blur(12px); }
.masthead h1 { font-size: clamp(1.45rem, 2.2vw, 2.15rem); }
.eyebrow { display: flex; align-items: center; gap: .55rem; margin: 0 0 .45rem; color: var(--cyan); font-size: .72rem; font-weight: 750; letter-spacing: .14em; }
.eyebrow span { width: .55rem; height: .55rem; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 16px var(--cyan); }
h1 { margin: 0; font-size: clamp(2rem, 4.1vw, 3.8rem); letter-spacing: -.06em; line-height: .94; }
.header-note { margin: .45rem 0 0; color: var(--muted); font: 600 .8rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .06em; text-transform: uppercase; }

.workspace { position: fixed; inset: 0; overflow: hidden; background-color: #081a28; background-image: linear-gradient(rgb(23 64 86 / .88) 1px, transparent 1px), linear-gradient(90deg, rgb(23 64 86 / .88) 1px, transparent 1px); background-size: 32px 32px; }
.toolbar { position: fixed; z-index: 11; top: clamp(.8rem, 2vw, 2rem); right: clamp(.8rem, 2vw, 2rem); min-height: auto; padding: .7rem .85rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; border: 1px solid rgb(61 119 139 / .64); border-radius: .7rem; background: rgb(7 23 35 / .88); box-shadow: 0 9px 28px rgb(0 0 0 / .23); backdrop-filter: blur(12px); }
.legend { display: flex; flex-wrap: wrap; gap: .9rem 1.25rem; color: var(--muted); font-size: .76rem; }
.legend span { display: flex; align-items: center; gap: .38rem; }
.legend i { width: 1.15rem; height: .22rem; display: inline-block; border-radius: 5px; background: var(--cyan); }
.legend .wifi { background: repeating-linear-gradient(90deg, var(--cyan) 0 4px, transparent 4px 7px); }
.legend .ethernet { background: var(--amber); }
.legend .hdmi { background: var(--blue); }
.legend .data { background: repeating-linear-gradient(90deg, var(--green) 0 3px, transparent 3px 6px); }
.toolbar-actions { display: flex; align-items: center; gap: 1rem; }
.zoom-controls { display: flex; align-items: center; overflow: hidden; border: 1px solid #39718a; border-radius: .45rem; background: #102a3a; }
.zoom-controls button { width: 2rem; height: 1.8rem; border: 0; border-right: 1px solid #39718a; background: transparent; color: var(--cyan-soft); cursor: pointer; font: 700 1.05rem/1 ui-monospace, monospace; }
.zoom-controls button:last-child { border-right: 0; }
.zoom-controls #zoom-reset { width: 3.55rem; color: var(--muted); font: 700 .68rem/1 ui-monospace, monospace; }
.zoom-controls button:hover, .zoom-controls button:focus-visible { background: #1a4356; color: white; outline: none; }
.zoom-controls button:disabled { cursor: not-allowed; color: #507282; background: transparent; }
.toggle { display: flex; align-items: center; gap: .55rem; cursor: pointer; color: var(--ink); font-size: .82rem; font-weight: 700; white-space: nowrap; }
.toggle input { position: absolute; opacity: 0; }
.toggle-track { width: 2.35rem; height: 1.3rem; padding: .16rem; display: flex; align-items: center; border: 1px solid #39718a; border-radius: 2rem; background: #102a3a; transition: .2s ease; }
.toggle-track span { width: .78rem; height: .78rem; border-radius: 50%; background: var(--muted); transition: transform .2s ease, background .2s ease; }
.toggle input:checked + .toggle-track { border-color: var(--cyan); background: #0b5868; }
.toggle input:checked + .toggle-track span { transform: translateX(1.04rem); background: #d8fbff; }
.toggle input:focus-visible + .toggle-track { outline: 2px solid white; outline-offset: 3px; }

.canvas-frame { position: absolute; inset: 0; overflow: hidden; }
#blueprint { display: block; width: 100%; height: 100%; touch-action: none; }
#blueprint.is-pannable { cursor: grab; }
#blueprint.is-panning { cursor: grabbing; }
.detail-card { position: fixed; z-index: 10; left: clamp(.8rem, 2vw, 2rem); bottom: clamp(.8rem, 2vw, 2rem); width: min(23rem, calc(100% - 1.6rem)); padding: 1.1rem 1.15rem; border: 1px solid rgb(112 182 203 / .5); border-radius: .8rem; background: rgb(7 23 35 / .96); box-shadow: 0 12px 35px rgb(0 0 0 / .42); backdrop-filter: blur(12px); }
.detail-kicker { margin: 0 0 .36rem; color: var(--cyan); font: 700 .64rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .13em; }
.detail-card h2 { margin: 0 0 .42rem; font-size: 1.12rem; letter-spacing: -.025em; }
.detail-card p { margin: 0; color: var(--muted); font-size: .83rem; line-height: 1.45; }
.detail-card .detail-hint { margin-top: .75rem; color: var(--cyan-soft); font-size: .7rem; }
.detail-card dl { display: grid; grid-template-columns: 5.5rem 1fr; gap: .32rem .7rem; margin: .85rem 0 0; font-size: .77rem; line-height: 1.35; }
.detail-card dt { color: var(--faint); }
.detail-card dd { margin: 0; color: var(--ink); }

footer { display: none; }

/* SVG foundations */
.grid { fill: url(#grid); }
.room { fill: rgb(14 47 63 / .44); stroke: #4b8ca4; stroke-width: 2; }
.room.cabinet { fill: rgb(24 51 67 / .58); stroke: #708e9c; }
.room-label { fill: #b7e5f0; font: 700 18px ui-monospace, monospace; letter-spacing: 3px; }
.room-note { fill: #719baa; font: 14px ui-monospace, monospace; letter-spacing: 1px; }
.measure { stroke: #477a8d; stroke-width: 1.25; fill: none; }
.measure-text { fill: #6d9aa9; font: 12px ui-monospace, monospace; letter-spacing: 1px; }
.court-line { stroke: #477f92; stroke-width: 1.5; fill: none; }
.court-line.strong { stroke: #77b7c8; stroke-width: 2; }
.court-midline { stroke: #66a1b2; stroke-width: 2; stroke-dasharray: 10 9; }
.sliding-door { stroke: #84bfd0; stroke-width: 2; fill: rgb(16 59 75 / .45); }
.sliding-door-guide { stroke: #6d9aaa; stroke-width: 2; fill: none; stroke-dasharray: 6 5; }
.sliding-door-arrow { fill: #9aeefa; }
.projector-throw { fill: rgb(117 167 255 / .055); stroke: rgb(117 167 255 / .22); stroke-width: 1.5; transition: fill .18s ease, stroke .18s ease, filter .18s ease; pointer-events: none; }
.projector-throw.is-active { fill: rgb(117 167 255 / .2); stroke: #9abaff; stroke-width: 3; filter: drop-shadow(0 0 6px rgb(117 167 255 / .55)); }
.camera-sight { fill: rgb(141 228 175 / .035); stroke: rgb(141 228 175 / .2); stroke-width: 1.5; stroke-dasharray: 5 7; transition: fill .18s ease, stroke .18s ease, filter .18s ease; pointer-events: none; }
.camera-sight.is-active { fill: rgb(141 228 175 / .14); stroke: var(--green); stroke-width: 3; stroke-dasharray: none; filter: drop-shadow(0 0 6px rgb(141 228 175 / .45)); }
.connection { fill: none; stroke-width: 3; stroke-linecap: round; opacity: .4; transition: opacity .18s ease, stroke-width .18s ease; pointer-events: none; }
.connection.wifi { stroke: var(--cyan); stroke-dasharray: 7 9; }
.connection.ethernet { stroke: var(--amber); }
.connection.hdmi { stroke: var(--blue); }
.connection.data { stroke: var(--green); stroke-dasharray: 3 7; }
.connections-off .connection { opacity: 0; }
.connection.is-related { opacity: 1; stroke-width: 5; filter: drop-shadow(0 0 4px currentColor); }
.connections-off .connection.is-related { opacity: 0; }
.connection.is-related.wifi,
.connection.is-related.data { animation: data-flow 1.05s linear infinite; }

@keyframes data-flow {
  to { stroke-dashoffset: -32; }
}
.component { cursor: pointer; outline: none; }
.component .device-halo { fill: transparent; stroke: transparent; stroke-width: 2; transition: .18s ease; }
.component:hover .device-halo, .component:focus .device-halo, .component.is-selected .device-halo { fill: rgb(75 212 232 / .08); stroke: var(--cyan); }
.component .device-shape { fill: #0b2637; stroke: #87c6d6; stroke-width: 2; }
.component .device-detail { fill: #183f53; stroke: #75c9da; stroke-width: 1.5; }
.component .device-accent { fill: var(--cyan); }
.component .device-label { fill: #e6f8fc; font: 700 14px Inter, sans-serif; letter-spacing: .4px; pointer-events: none; }
.component .device-sub { fill: #83acb9; font: 11px ui-monospace, monospace; letter-spacing: .8px; pointer-events: none; }
.component:hover .device-shape, .component:focus .device-shape, .component.is-selected .device-shape { stroke: #e4fcff; filter: drop-shadow(0 0 6px rgb(75 212 232 / .55)); }
.player .device-shape { fill: #1b5265; stroke: #9aeefa; }
.cloud .device-shape { fill: #123d57; }
.component:focus-visible .device-halo { stroke: white; stroke-width: 4; }

@media (prefers-reduced-motion: reduce) {
  .connection.is-related.wifi,
  .connection.is-related.data { animation: none; }
}

@media (max-width: 720px) {
  .masthead { align-items: start; flex-direction: column; gap: .35rem; max-width: 12.5rem; }
  .header-note { margin: 0; font-size: .62rem; }
  .toolbar { align-items: end; flex-direction: column; }
  .toolbar-actions { width: 100%; justify-content: space-between; }
  .canvas-frame { min-height: 0; overflow: hidden; }
  #blueprint { width: 100%; height: 100%; }
  .detail-card { bottom: .8rem; }
  footer { flex-direction: column; gap: .35rem; }
}