:root{--ground:#f4f1ea;--ink:#1f1c18;--muted:#5b544a;--surface:#e7e0d2;--acc:#f2c230;--m:#0b4d8c;--e:#a85f00;--wood:#5b3a24}
*{box-sizing:border-box}html,body{overflow-x:clip}
body{margin:0;background:var(--ground);color:var(--ink);font:17px/1.6 'IBM Plex Sans',sans-serif}
::selection{background:var(--acc)}a{color:inherit;text-underline-offset:3px}
:focus-visible{outline:3px solid var(--m);outline-offset:2px}
h1,h2,h3{font-family:'Bricolage Grotesque',sans-serif;letter-spacing:-.03em;line-height:1.02;text-wrap:balance;margin:0 0 .4em}
h1{font-size:clamp(2.8rem,7vw,5.6rem);font-weight:800}h2{font-size:clamp(2rem,4vw,3.2rem);font-weight:800}h3{font-size:1.3rem}
.num,.facts b,.l3,table td.num{font-family:'IBM Plex Mono',monospace;font-variant-numeric:tabular-nums}
.bar{position:sticky;top:0;z-index:20;display:flex;gap:16px;align-items:center;padding:10px clamp(16px,4vw,48px);background:var(--ink);color:var(--ground)}
.mark{font-weight:600;text-decoration:none;margin-right:auto}
.bar nav{display:flex;gap:18px}.bar nav a{text-decoration:none;opacity:.8}.bar nav a:hover{opacity:1}
.navikea{color:var(--acc);font-weight:600}
.btn{background:var(--acc);color:var(--ink);border:0;font:600 15px 'IBM Plex Sans';padding:12px 18px;min-height:44px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center}
.btn.big{font-size:18px;padding:16px 22px}.btn:hover{filter:brightness(.95)}
.hero{display:grid;grid-template-columns:1.3fr 1fr;min-height:calc(100vh - 64px);position:relative}
.hero-img{overflow:hidden}.hero-img img{width:100%;height:100%;object-fit:cover;display:block}
.hero-text{padding:clamp(24px,5vw,72px);align-self:center}
.ln{display:block;overflow:hidden}.ln>span{display:block}
.m-ink{color:var(--m)}.e-ink{color:var(--e)}
.ikea{margin:24px 0}.printurl{display:none}
.facts{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,auto);gap:8px 24px;margin:0}
.facts b{display:block;font-size:2rem;color:var(--m)}.facts li:last-child b{color:var(--e)}
.tape{position:absolute;left:0;right:0;bottom:0;height:14px;background:repeating-linear-gradient(90deg,var(--ink) 0 1px,transparent 1px 10px) bottom/100% 7px no-repeat,var(--acc)}
.sec{padding:clamp(64px,10vw,128px) clamp(16px,5vw,72px)}
.band{background:var(--surface)}
.head{max-width:70ch;margin-bottom:32px}.head p{color:var(--muted)}
.viewer{position:relative}
#three{position:relative;height:min(78vh,720px);background:#eeeae2;touch-action:none}
#three canvas{display:block}.labels{position:absolute;inset:0}.labels.off{display:none}
.l3{font-size:12px;padding:2px 6px;background:#fff;border:1.5px solid var(--m);color:var(--m);white-space:nowrap;pointer-events:none}
.l3.e{border-style:dashed;border-color:var(--e);color:var(--e)}
.ctrl{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;align-items:center}
.ctrl button{min-height:44px;padding:0 16px;border:1.5px solid var(--ink);background:transparent;font:inherit;cursor:pointer}
.ctrl button:hover{background:var(--ink);color:var(--ground)}.ctrl label{display:flex;gap:6px;align-items:center;min-height:44px;margin-left:8px}
figure{margin:0 0 48px}figcaption{font-weight:600;margin-bottom:8px}
.draw{width:100%;height:auto;background:#fff;display:block}
.draw .wall{fill:#fbfaf7;stroke:var(--ink);stroke-width:1}.draw .floor{fill:#efe3cf}.draw .wallline{fill:none;stroke:var(--ink);stroke-width:3}
.draw .tile{fill:#e6dcc6}.draw .cab{fill:#f1e6c8;stroke:#8a7457;stroke-width:.6;stroke-dasharray:3 2}.draw .cab.open{fill:#fff}
.draw .app{stroke:#555;stroke-width:.6;stroke-dasharray:3 2;fill:#2a2a2a}.draw .white{fill:#fff}.draw .steel{fill:#b9bdc0}
.draw .top{fill:var(--wood)}.draw .plinth{fill:#3d3027}.draw .sink{fill:#9aa1a6}
.draw .box{fill:#d8d2c4;stroke:var(--m);stroke-width:.8}.draw .box.ghost{fill:rgba(11,77,140,.12)}.draw .box.e{stroke:var(--e);stroke-dasharray:3 2}
.draw .door{fill:#8a3b3b}.draw .axis{stroke:var(--m);stroke-dasharray:2 2;stroke-width:.5}
.draw .lbl{font:7px 'IBM Plex Sans';fill:var(--muted)}.draw .lbl.big{font-size:10px}
.dim line{stroke-width:.7}.dim text{font:600 7.5px 'IBM Plex Mono'}
.dim.m line{stroke:var(--m)}.dim.m text{fill:var(--m)}.dim.e line{stroke:var(--e);stroke-dasharray:2 1.5}.dim.e text{fill:var(--e)}
.run{list-style:none;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:2px;counter-reset:r;margin:0 0 48px}
.run li{background:var(--surface);padding:20px 16px;border-top:6px solid var(--wood)}.run b{display:block;margin-bottom:6px}.run span{color:var(--muted);font-size:15px}
.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}.cols p{color:var(--muted)}
.tablewrap{overflow-x:auto}table{border-collapse:collapse;width:100%;background:#fff;font-size:15px}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid #e3ddd0;vertical-align:top}th{background:var(--ink);color:var(--ground)}
td.num{white-space:nowrap;font-weight:600}tr.is-m td.num{color:var(--m)}tr.is-e td.num{color:var(--e)}
.tag{font-size:13px;font-weight:600;padding:2px 8px;white-space:nowrap}.tag.m{background:var(--m);color:#fff}.tag.e{border:1.5px dashed var(--e);color:var(--e)}
.checks{margin-top:32px;max-width:70ch}
.todo{background:var(--acc)}.todo .head p{color:var(--ink)}
#todo{columns:2 360px;gap:32px;padding-left:1.4em;margin:0}#todo li{break-inside:avoid;margin-bottom:14px}
#todo label{display:flex;gap:10px;cursor:pointer;min-height:44px}#todo input{width:22px;height:22px;flex:none;margin-top:3px;accent-color:var(--ink)}
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:8px}.gallery img{width:100%;height:auto;display:block}
.qs ul{max-width:70ch}.foot{padding:32px clamp(16px,5vw,72px);background:var(--ink);color:var(--ground);font-size:14px}
@media (max-width:900px){.hero{grid-template-columns:1fr;min-height:0}.hero-img{aspect-ratio:16/10}.bar nav{display:none}
 .run{grid-template-columns:1fr 1fr}.cols{grid-template-columns:1fr}.facts{grid-template-columns:1fr 1fr}#three{height:62vh}.gallery{grid-template-columns:1fr}}
@media (max-width:420px){.navikea{display:none}}
@media print{
 @page{size:A4;margin:12mm}body{font-size:10.5pt;background:#fff}
 .bar,.viewer,.ctrl,.tape,.gallery a:nth-child(n+2),.foot{display:none!important}
 .sec{padding:10mm 0;break-inside:auto}.band,.todo{background:#fff}.hero{display:block;min-height:0}.hero-img{max-height:70mm}
 .hero-text{padding:6mm 0}h1{font-size:24pt}h2{font-size:16pt}.printurl{display:block;font-size:8pt;word-break:break-all}.ikea .btn{display:none}
 #model .head{display:none}#model{padding:0}figure,table,tr,.run li{break-inside:avoid}.run{grid-template-columns:repeat(3,1fr)}
 #todo{columns:1}#todo input{-webkit-print-color-adjust:exact}*{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
/* v2 3D viewer */
.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:10px;scrollbar-width:none}
.chips button,.views button{flex:none;min-height:44px;padding:0 16px;border:1.5px solid var(--ink);background:#fff;font:600 15px 'IBM Plex Sans';cursor:pointer;border-radius:22px}
.chips button[aria-pressed=true]{background:var(--ink);color:var(--ground)}
#three{height:min(72vh,680px);border-radius:6px;overflow:hidden}
.ctrl{justify-content:space-between}.views{display:flex;gap:8px}.views button{border-radius:6px;background:transparent}
.sw{font-weight:600}.sw input{width:20px;height:20px;accent-color:var(--ink)}
.l3{font:600 13px 'IBM Plex Mono';background:rgba(255,255,255,.9);border:0;border-radius:4px;color:#2c5f8f;padding:3px 8px;box-shadow:0 0 0 1px rgba(44,95,143,.25)}
.card{background:#fff;border-radius:6px;padding:16px 18px;margin-top:10px;box-shadow:0 0 0 1px #e0d9cb}
.card .ch{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.card .x{width:44px;height:44px;border:0;background:none;font-size:24px;cursor:pointer}
.card .it{padding:10px 0;border-top:1px solid #eee7da}.card h4{margin:0 0 6px;font-size:16px}
.card dl{margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:4px 24px}
.card dl div{display:flex;justify-content:space-between;gap:12px;font-size:15px}.card dt{color:var(--muted)}
.card dd{margin:0;font:600 15px 'IBM Plex Mono';color:#2c5f8f}.card .e dd{color:#9a6a1f}.card .r dd{color:#a3302a}
.run li.rm{border-top-color:#a3302a}.run li.rm b{color:#a3302a;text-decoration:line-through;text-decoration-thickness:1px}
.hint{display:none;color:var(--muted)}
@media (max-width:900px){#three{height:68vh;min-height:420px}.ctrl{flex-direction:column;align-items:stretch}.views button{flex:1}
 .hint{display:block}.scrollx{overflow-x:auto}.scrollx .draw{min-width:760px}.draw .dim.e,.draw .lbl{display:none}}
@media print{.chips,.card{display:none!important}.scrollx .draw{min-width:0}}
.mode{display:inline-flex;border:1.5px solid var(--ink);border-radius:8px;overflow:hidden;margin-bottom:12px}
.mode button{min-height:44px;padding:0 18px;border:0;background:#fff;font:600 15px 'IBM Plex Sans';cursor:pointer}
.mode button[aria-pressed=true]{background:var(--ink);color:var(--ground)}
.ikonly{display:none}.viewer.ik .ikonly{display:inline-block}.viewer.ik .chips button:not(.ikonly):not([data-cat=walls]):not([data-cat=ceiling]){display:none}
.viewer.ik label.sw:last-child{display:none}
.card .i dd{color:#2d6a3e}
.fit{background:#fbe9e7}.issues{max-width:80ch;padding-left:1.3em}.issues li{margin-bottom:12px}.issues b{color:#a3302a}
.shell{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:2px;margin:0}
.shell div{background:var(--surface);padding:16px 18px}.shell dt{color:var(--muted);font-size:15px}.shell dd{margin:4px 0 0;font:600 1.8rem 'IBM Plex Mono';color:var(--m)}
.issues b{color:var(--ink)}.style{columns:2 300px;padding-left:1.2em}.style li{margin-bottom:8px}
details{margin-top:16px}summary{cursor:pointer;min-height:44px;font-weight:600}.small{font-size:14px;color:var(--muted)}
@media print{#brief,#constraints{break-inside:avoid}details{display:block}details>*{display:block}}
.gallery img.tall{max-height:80vh;width:auto;margin:auto}
/* v5 mobile-first measurements */
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.mcard{background:#fff;border-radius:10px;padding:14px 16px;box-shadow:0 0 0 1px #ddd5c6}
.mcard header{display:flex;align-items:center;gap:12px;margin-bottom:8px}.mcard h3{margin:0;font-size:1.25rem}
.mini{width:64px;height:40px;flex:none}.mini .o{fill:none;stroke:#8d857a;stroke-width:2}.mini .h{stroke:var(--m);stroke-width:4}
.mini .f{fill:var(--m);opacity:.85}.mini .h2{fill:#0a2e55}.mini .d{fill:#8a3b3b}.mini .pt{fill:var(--m)}
.mvs{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mv{border-radius:8px;padding:10px 12px;background:#edf3f9;min-height:76px}
.mv b{font:700 30px/1.1 'IBM Plex Mono';color:#0a3d70}.mv i{font:600 15px 'IBM Plex Mono';font-style:normal;color:#0a3d70;margin-left:4px}
.mv span{display:block;font-size:16px;line-height:1.3;color:#2b2722;margin-top:4px}
.mv.q{background:#fff;border:2px dashed #a85f00}.mv.q b{color:#a85f00}
.legend{margin-top:12px;font-size:16px}.lm{border-bottom:3px solid var(--m);margin-right:16px}.lq{border-bottom:3px dashed #a85f00}
.tabs{display:none}
.zoom{position:fixed;inset:0;z-index:50;background:#fff;overflow:auto}.zoom .zin{width:1000px;padding:16px}.zoom svg{width:100%;height:auto}
.zx{position:fixed;top:10px;right:10px;z-index:51;min-height:48px;padding:0 18px;font:700 17px 'IBM Plex Sans';background:var(--ink);color:#fff;border:0;border-radius:24px}
.zoom .dim text{font-size:7.5px}.zoom .lbl{display:inline!important}.zoom .dim{display:inline!important}
@media (max-width:900px){
 body{font-size:17px;padding-bottom:64px}.bar{position:static}.bar .btn{display:none}
 .tabs{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--ink);padding-bottom:env(safe-area-inset-bottom)}
 .tabs a{flex:1;text-align:center;color:#fff;text-decoration:none;font:600 15px 'IBM Plex Sans';padding:16px 2px;min-height:56px}
 .tabs a:active{background:#3a342d}
 .hero-img{aspect-ratio:16/8}.hero-text{padding:20px 16px}.hero h1{font-size:2.3rem}.facts{display:none}
 .sec{padding:48px 16px}.mgrid{grid-template-columns:1fr}
 .scrollx .draw{min-width:0}.draw .dim:not(.key){display:none}.draw .dim text{font-size:13px}.draw .lbl{display:none}
 .draw{cursor:zoom-in}
 .l3{font-size:16px;padding:4px 10px}
 .card dl{grid-template-columns:1fr}.card dl div{align-items:baseline;padding:6px 0;border-bottom:1px solid #f0ebe1}
 .card dd{font-size:24px}.card dt{font-size:16px;color:#2b2722}.card h4{font-size:18px}
 .chips button{font-size:16px}
 .head p,.cols p,.run span,td,.issues li{font-size:16px}.draw .lbl{display:none}
 html{scroll-padding-top:8px}
}
@media print{.tabs,.zoom{display:none!important}.mv{min-height:0}.mv b{font-size:16pt}}
/* v6 3D */
#three{background:#f1eee8}
.l3.tiny{font:600 11px 'IBM Plex Sans';background:none;box-shadow:none;color:#5b544a;letter-spacing:.08em;padding:0}
.l3.mk{font:600 12px 'IBM Plex Sans';background:#1f5f9f;color:#fff;box-shadow:none}
.l3.rm{font:700 12px 'IBM Plex Sans';background:#a3302a;color:#fff;box-shadow:none}
.views{flex-wrap:wrap}
@media (max-width:900px){.views{display:grid;grid-template-columns:1fr 1fr;gap:8px}.l3.mk,.l3.rm{font-size:13px}}
/* v7 interaction fix + edit mode */
.labels{pointer-events:none}
#three,#three canvas{touch-action:none;-webkit-user-select:none;user-select:none}
.stage{position:relative}
.hint3d{position:absolute;left:12px;bottom:8px;margin:0;font-size:13px;color:#4a4238;background:rgba(255,255,255,.85);padding:4px 10px;border-radius:14px;pointer-events:none}
.fsbtn{position:absolute;right:10px;top:10px;min-height:44px;padding:0 14px;border:0;border-radius:22px;background:rgba(31,28,24,.85);color:#fff;font:600 14px 'IBM Plex Sans';cursor:pointer}
.viewer:fullscreen,.viewer.pseudo-fs{background:var(--ground);padding:10px;overflow:auto}
.viewer.pseudo-fs{position:fixed;inset:0;z-index:60}
.viewer:fullscreen #three,.viewer.pseudo-fs #three{height:72vh}
#three.editing{outline:3px solid var(--acc);outline-offset:-3px}
.editbar{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;margin-top:10px}
.editbar button,.adds button{min-height:44px;padding:0 14px;border:1.5px solid var(--ink);background:#fff;font:600 15px 'IBM Plex Sans';border-radius:6px;cursor:pointer}
.sw.big{background:var(--acc);padding:0 14px;border-radius:6px}
.editpanel{background:#fff;border-radius:8px;padding:14px 16px;margin-top:10px;box-shadow:0 0 0 2px var(--acc)}
.editpanel h4{margin:0 0 6px;font-size:17px}.editpanel dl{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:4px 20px;margin:0}
.editpanel dl div{display:flex;justify-content:space-between;gap:10px}.editpanel dt{color:var(--muted)}.editpanel dd{margin:0;font:700 20px 'IBM Plex Mono';color:#0a3d70}
.warn{color:#a3302a;font-weight:700;margin:8px 0 0}.del{margin-top:10px;min-height:44px;border:1.5px solid #a3302a;color:#a3302a;background:#fff;border-radius:6px;padding:0 14px;font-weight:600}
.adds{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px;padding-top:12px;border-top:1px solid #eee}
@media (max-width:900px){.editpanel dd{font-size:22px}.adds button{flex:1 0 30%}}