:root{--navy:#243b53;--sky:#3b82c4;--sky-text:#2a6cab;--pale:#e8f0f7;--ink:#1d2b3a;--line:#c7d2de;--ok:#22c55e;--warn:#f2c200;--rail-bg:#243b53;--rail-fg:#d6e2ee;--rail-accent:#fff}
*{box-sizing:border-box}
body{margin:0;background:var(--pale);color:var(--ink);font-family:-apple-system,"Segoe UI",Inter,Roboto,system-ui,sans-serif;line-height:1.5}
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:16px clamp(16px,4vw,48px);background:#fff;border-bottom:1px solid var(--line)}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:22px;color:var(--navy);text-decoration:none;letter-spacing:-.01em;padding:8px 0}
.brand .dot{width:14px;height:14px;border-radius:50%;background:var(--sky);box-shadow:0 0 0 4px rgba(59,130,196,.2)}
.eco-home{margin:0;font-size:13px;color:#5b6b7c}.eco-home a{color:var(--navy);font-weight:600;text-decoration:none;display:inline-block;padding:12px 2px;margin:-12px -2px;border-bottom:2px solid var(--sky)}.eco-home a:hover{color:var(--sky)}.eco-home span{margin:0 6px;color:#9fb0c1}
main{max-width:1040px;margin:0 auto;padding:36px clamp(16px,4vw,48px) 60px}
.hero{display:grid;gap:14px;max-width:60ch}
.eyebrow{margin:0;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--sky-text);font-weight:700}.eyebrow span{color:#9fb0c1;margin:0 6px}
h1{margin:0;font-size:clamp(32px,5.4vw,56px);line-height:1.05;letter-spacing:-.025em;color:var(--navy)}
.lead{margin:0;font-size:18px;color:#3b4a5a}
.row{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.btn{display:inline-block;padding:12px 20px;border-radius:10px;border:2px solid var(--navy);color:var(--navy);text-decoration:none;font-weight:700;background:#fff;min-height:44px}
.btn.solid{background:var(--navy);color:#fff}.btn:hover{border-color:var(--sky);color:var(--sky)}.btn.solid:hover{background:var(--sky);border-color:var(--sky);color:#fff}
.note{font-size:13px;color:#5b6b7c;margin:4px 0 0}
.dash{margin:40px 0 0;background:#fff;border:2px solid var(--navy);border-radius:16px;box-shadow:0 20px 40px -24px rgba(36,59,83,.45);overflow:hidden}
.dash .bar{display:flex;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid var(--line);font-size:13px;color:#5b6b7c}.dash .bar b{color:var(--navy);font-size:14px}
.pill{margin-left:auto;background:var(--pale);color:var(--navy);padding:4px 10px;border-radius:999px;font-weight:700;font-size:12px}
.dash .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:18px}
.tile{background:var(--pale);border:1px solid var(--line);border-radius:12px;padding:14px 16px;min-height:150px}
.tile.wide{grid-column:span 2;grid-row:span 2;background:#fff}
.tile h3{margin:0 0 8px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--sky-text)}
.tile p{margin:0;font-size:14px;color:#3b4a5a}
.tile svg{width:100%;height:auto;display:block;margin:4px 0 10px}
.state{list-style:none;margin:0;padding:0}.state li{display:flex;align-items:center;gap:10px;padding:7px 0;border-top:1px solid var(--line);font-size:14px}.state li:first-child{border-top:0}.state b{margin-left:auto;color:#5b6b7c;font-weight:600}
.state i{width:10px;height:10px;border-radius:50%;background:#c7d2de;display:block}.state i.on{background:var(--ok)}.state i.warn{background:var(--warn)}
.layers,.matter,.facts{margin-top:44px}
h2{margin:0 0 6px;font-size:24px;color:var(--navy);letter-spacing:-.01em}
.sub{margin:0 0 16px;color:#5b6b7c;font-size:14px}
.layers ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;counter-reset:l}
.layers li{background:#fff;border:1px solid var(--line);border-top:4px solid var(--sky);border-radius:10px;padding:14px 16px}
.layers li:before{counter-increment:l;content:"0" counter(l);display:block;font-size:12px;letter-spacing:.14em;color:var(--sky-text);margin-bottom:6px;font-weight:700}
.layers b{display:block;color:var(--navy);margin-bottom:4px}.layers span{font-size:14px;color:#3b4a5a}
.matter p{max-width:62ch;margin:0 0 12px;color:#3b4a5a}
.chips{display:flex;flex-wrap:wrap;gap:8px}.chips span{border:1px solid var(--navy);border-radius:999px;padding:8px 14px;background:#fff;font-size:14px;font-weight:600;color:var(--navy)}
.facts ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;max-width:70ch}.facts li{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 14px;font-size:14px}.facts b{color:var(--navy);display:inline-block;min-width:96px}
footer{padding:22px clamp(16px,4vw,48px);font-size:14px;background:var(--navy);color:#d6e2ee}
@media(max-width:760px){.dash .grid{grid-template-columns:1fr 1fr}.tile.wide{grid-column:span 2;grid-row:auto}.layers ol{grid-template-columns:1fr}.lead{font-size:16px}}
@media(max-width:480px){.dash .grid{grid-template-columns:1fr}.tile.wide{grid-column:auto}.tile{min-height:0}}

/* ---- the house anchor: a CSS-3D stand-in model, half the screen on phones ---- */
.anchor{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:30px;align-items:center;margin:0 0 10px}
.stage{position:relative;aspect-ratio:5/4;min-height:320px;border:1px solid var(--line);border-radius:18px;background:radial-gradient(ellipse at 50% 60%,#fff 0,var(--pale) 70%);overflow:hidden;perspective:900px;perspective-origin:50% 42%;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.stage.dragging{cursor:grabbing}.stage:focus-visible{outline:2px solid var(--sky);outline-offset:3px}
.stage .hint{position:absolute;left:14px;bottom:10px;margin:0;font:600 11px/1 ui-monospace,Menlo,monospace;letter-spacing:.14em;text-transform:uppercase;color:#5b6b7c;z-index:2}
.h-world{position:absolute;left:50%;top:60%;width:0;height:0;transform-style:preserve-3d;transform:rotateX(-28deg) rotateY(-32deg)}
.h-box{position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d}
.h-face{position:absolute;left:0;top:0;display:block;backface-visibility:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.h-gable{box-shadow:none;backface-visibility:visible}
.h-panel{box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.12);border-radius:2px}.h-door{background-image:repeating-linear-gradient(0deg,rgba(0,0,0,.08) 0 1px,transparent 1px 9px)!important}.h-arch{border-radius:11px 11px 2px 2px}.h-win{box-shadow:inset 0 0 0 2px #efe6d8,inset 0 0 0 3px rgba(0,0,0,.15)}.h-path{box-shadow:none;transform-origin:center;opacity:.9}
.h-bush .h-face{border-radius:40%}
@media(max-width:760px){.anchor{grid-template-columns:1fr;gap:18px}.stage{aspect-ratio:auto;height:50vh;min-height:300px;border-radius:14px}.h-world{top:62%;transform:scale(.62) rotateX(-28deg) rotateY(-32deg)}}
@media(prefers-reduced-motion:reduce){.stage{cursor:default}}
.h-roof{backface-visibility:visible}
.h-win{box-shadow:inset 0 0 0 2.5px #efe6d8,inset 0 0 0 3.5px rgba(0,0,0,.18)!important;background-image:linear-gradient(90deg,transparent 0 47%,#efe6d8 47% 53%,transparent 53%),linear-gradient(0deg,transparent 0 47%,#efe6d8 47% 53%,transparent 53%)}
.h-arch{border-radius:11px 11px 2px 2px;box-shadow:inset 0 0 0 2px #efe6d8}
.h-path{opacity:1}

/* rooms: tap to select */
.stagewrap{display:grid;gap:10px}
.h-room .h-face{transition:filter .15s,box-shadow .15s}
.h-room.sel .h-face{filter:brightness(1.1) saturate(1.15);box-shadow:inset 0 0 0 2px var(--sky)}
.stage .hint span{margin:0 6px;color:#9fb0c1}
.sel{position:absolute;left:14px;top:12px;z-index:3;display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:10px;padding:8px 10px 8px 14px;font-size:13px;box-shadow:0 10px 24px -14px rgba(36,59,83,.5);max-width:calc(100% - 28px)}
.sel b{color:var(--navy);white-space:nowrap}.sel span{color:#5b6b7c;font:400 11px/1.3 ui-monospace,Menlo,monospace}.sel i{margin:0 4px}
.sel button{border:0;background:var(--pale);color:var(--navy);width:28px;height:28px;border-radius:50%;cursor:pointer;font-size:16px;line-height:1;flex:none}
.rooms{display:flex;flex-wrap:wrap;gap:8px}
.rooms button{border:1px solid var(--line);background:#fff;color:var(--navy);border-radius:999px;padding:10px 14px;min-height:40px;font:600 13px -apple-system,"Segoe UI",Inter,system-ui,sans-serif;cursor:pointer}
.rooms button[aria-pressed=true]{background:var(--navy);color:#fff;border-color:var(--navy)}.rooms button:hover{border-color:var(--sky)}
@media(max-width:760px){.stagewrap{gap:8px}.rooms button{padding:9px 12px;font-size:12px}}
.sel[hidden]{display:none}

/* 3D canvas + make-yours */
.h-canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block;touch-action:none;outline:none}
.stage{perspective:none}
.mk{margin:34px 0 0}.mkhead h2{margin:0;font-size:clamp(26px,4vw,40px);letter-spacing:-.02em;color:var(--navy);line-height:1.1}.mkhead .lead{margin-top:12px;font-size:17px;max-width:62ch}
.mkgrid{display:grid;grid-template-columns:1.1fr 1fr;gap:18px;margin-top:22px}
.drop{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;display:grid;gap:14px}
.dz{display:grid;gap:6px;text-align:center;padding:34px 18px;border:2px dashed var(--line);border-radius:12px;cursor:pointer;color:#5b6b7c;font-size:14px}.dz .big{font-weight:800;font-size:20px;color:var(--navy)}.dz.over,.dz:hover{border-color:var(--sky);background:var(--pale)}
.previews{display:grid;grid-template-columns:1fr 1fr;gap:12px}.previews figure{margin:0}.previews img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;display:block;border:1px solid var(--line)}.previews figcaption{font:400 11px/1.6 ui-monospace,Menlo,monospace;color:#5b6b7c;text-transform:uppercase;letter-spacing:.1em}
.drop .btn{justify-self:start}.drop .btn[disabled]{opacity:.45;cursor:default}
.pipe{background:var(--pale);border:1px solid var(--line);border-radius:16px;padding:18px}
.pipe ol{list-style:none;margin:0;padding:0;counter-reset:p}.pipe li{display:grid;grid-template-columns:28px 1fr;gap:10px;padding:10px 0;border-top:1px solid var(--line);color:#5b6b7c}.pipe li:first-child{border-top:0}
.pipe li:before{counter-increment:p;content:counter(p);width:24px;height:24px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font:700 12px ui-monospace,Menlo,monospace;background:#fff;color:#5b6b7c}
.pipe li b{display:block;color:var(--ink)}.pipe li span{font-size:13px}
.pipe li.on:before{background:var(--sky);border-color:var(--sky);color:#fff;animation:pulse 1s infinite}.pipe li.on b{color:var(--sky)}.pipe li.done:before{background:var(--navy);border-color:var(--navy);color:#fff;content:"\2713"}
@keyframes pulse{50%{box-shadow:0 0 0 6px rgba(59,130,196,.25)}}
.result{margin-top:14px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px}.result b{color:var(--navy)}.result p{margin:6px 0 12px;font-size:14px}.result[hidden]{display:none}
@media(max-width:760px){.mkgrid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.pipe li.on:before{animation:none}}
.pipe li span{grid-column:2}.dz{align-content:center}

/* ===== dark theme (Casey, 2026-10-04): tonally with the Entropia and Fissio shots. Deep navy ground, light type, sky accent; the clay house lit like a model in a dark studio. ===== */
:root{--navy:#dbe6f2;--sky:#5aa6e8;--sky-text:#8cc4f5;--pale:#0e1720;--ink:#e3ebf3;--line:#263645;--rail-bg:#0b121a;--rail-fg:#a7b6c6;--rail-accent:#fff}
body{background:#0e1720}
.top{background:#0b121a;border-color:#1c2a38}
.brand .dot{box-shadow:0 0 0 4px rgba(90,166,232,.25)}
.btn{background:transparent;color:#dbe6f2;border-color:#dbe6f2}.btn.solid{background:#dbe6f2;color:#0e1720}.btn:hover{border-color:#5aa6e8;color:#5aa6e8}.btn.solid:hover{background:#5aa6e8;border-color:#5aa6e8;color:#0e1720}
.dash{background:#121d29;border-color:#2a3b4d;box-shadow:0 24px 48px -24px rgba(0,0,0,.8)}
.pill{background:#1b2a3a;color:#dbe6f2}
.tile{background:#0f1a25;border-color:#263645}.tile.wide{background:#121d29}
.state i{background:#2a3b4d}
.layers li{background:#121d29;border-color:#263645}
.chips span{background:#121d29;color:#dbe6f2;border-color:#3a4d61}
.facts li{background:#121d29;border-color:#263645}.facts b{color:#dbe6f2}
footer{background:#0b121a;color:#a7b6c6}
.stage{border-color:#263645;background:radial-gradient(ellipse at 50% 60%,#1c2b3b 0,#0e1720 72%)}
.sel{background:rgba(18,29,41,.96);border-color:#263645;box-shadow:0 10px 24px -14px rgba(0,0,0,.8)}
.sel button{background:#1b2a3a;color:#dbe6f2}
.rooms button{background:#121d29;color:#dbe6f2;border-color:#3a4d61}.rooms button[aria-pressed=true]{background:#dbe6f2;color:#0e1720;border-color:#dbe6f2}
.drop{background:#121d29;border-color:#263645}
.dz{color:#9fb0c2;border-color:#3a4d61}.dz .big{color:#dbe6f2}.dz.over,.dz:hover{background:#0f1a25;border-color:#5aa6e8}
.pipe{background:#0f1a25;border-color:#263645}.pipe li:before{background:#121d29;border-color:#3a4d61;color:#9fb0c2}.pipe li.done:before{background:#dbe6f2;border-color:#dbe6f2;color:#0e1720}
.result{background:#121d29;border-color:#263645}.result b{color:#dbe6f2}
.tile.wide svg rect{fill:#1b2a3a;stroke:#3a4d61}.tile.wide svg text{fill:#dbe6f2}
.btn[disabled],button[disabled]{background:#1b2a3a;color:#9fb0c2;border-color:#2a3b4d}