/* Layout: calm white page; centred headline; one wide rounded window holding a living site; the brief box floats on it. */
:root{
  --bg:#fffdf8; --fg:#1a1040; --fg2:#625a80; --fg3:#928ac0; --line:#ece7f6; --soft:#f5f1fc; --accent:#7c5cbf; --accent-2:#5a3a9e;
  --btn:#1a1040; --btn-fg:#fffdf8; --btn-hover:#5a3a9e; --head:rgba(255,253,248,.82); --glass:rgba(255,253,248,.84); --stage:#f1edf9; --shadow:rgba(58,36,120,.22);
  --sans:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif; --mono:"Geist Mono",ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
}

@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0a0a0b;--fg:#f5f5f7;--fg2:#a1a1a8;--fg3:#6e6e76;--line:#1f1f22;--soft:#141416;--accent:#b8a2e3;--accent-2:#9b7fd4;--btn:#f5f5f7;--btn-fg:#0a0a0b;--btn-hover:#ffffff;--head:rgba(10,10,11,.72);--glass:rgba(22,22,24,.78);--stage:#0e0e10;--shadow:rgba(0,0,0,.6);color-scheme:dark}}
:root[data-theme="dark"]{--bg:#0a0a0b;--fg:#f5f5f7;--fg2:#a1a1a8;--fg3:#6e6e76;--line:#1f1f22;--soft:#141416;--accent:#b8a2e3;--accent-2:#9b7fd4;--btn:#f5f5f7;--btn-fg:#0a0a0b;--btn-hover:#ffffff;--head:rgba(10,10,11,.72);--glass:rgba(22,22,24,.78);--stage:#0e0e10;--shadow:rgba(0,0,0,.6);color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
::selection{background:color-mix(in srgb,var(--accent) 22%,transparent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
a{color:inherit}
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;display:flex;align-items:center;gap:30px;height:64px;padding:0 max(24px,env(safe-area-inset-right,0px)) 0 max(24px,env(safe-area-inset-left,0px));background:var(--head);backdrop-filter:saturate(1.6) blur(14px)}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;font:600 16.5px var(--sans);letter-spacing:-.02em}
.brand img{width:24px;height:24px}
nav{display:flex;gap:26px;margin:0 auto;font:450 14px var(--sans);color:var(--fg2)}
nav a{text-decoration:none;transition:color .15s} nav a:hover{color:var(--fg)}
.hright{display:flex;gap:6px;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:36px;padding:0 15px;border-radius:999px;border:0;font:500 14px var(--sans);text-decoration:none;cursor:pointer;transition:transform .16s var(--ease),background .15s,box-shadow .15s}
.btn:active{transform:scale(.97)}
.btn.dark{background:var(--btn);color:var(--btn-fg);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 1px 2px rgba(0,0,0,.2)}
.btn.dark:hover{background:var(--btn-hover)}
.btn.plain{background:transparent;color:var(--fg2)} .btn.plain:hover{color:var(--fg)}
main{padding:0 max(20px,env(safe-area-inset-right,0px)) 80px max(20px,env(safe-area-inset-left,0px))}
.intro{text-align:center;padding-top:clamp(28px,5vh,64px)}
.pill{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px 0 6px;border-radius:999px;background:var(--soft);font:500 13px var(--sans);color:var(--fg2);text-decoration:none;box-shadow:inset 0 0 0 1px var(--line)}
.pill b{font:600 11px var(--mono);color:#fff;background:var(--accent);border-radius:999px;padding:3px 8px;letter-spacing:.02em}
h1{margin:0 auto;font:700 clamp(44px,6.2vw,92px)/.96 var(--sans);letter-spacing:-.055em;text-wrap:balance;max-width:13ch}
h1 span{color:var(--fg3)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) h1 span{color:#6e6e76}:root:not([data-theme="light"]) h1{font-weight:600}}
:root[data-theme="dark"] h1 span{color:#6e6e76} :root[data-theme="dark"] h1{font-weight:600}
.sub{margin:18px auto 0;max-width:52ch;font-size:clamp(17px,1.4vw,19px);color:var(--fg2);line-height:1.5}
.stage{position:relative;margin:clamp(30px,5vh,52px) auto 0;width:min(1280px,100%);height:clamp(480px,calc(100svh - 300px),820px);border-radius:28px;overflow:hidden;background:var(--stage);box-shadow:inset 0 0 0 1px var(--line),0 30px 80px -30px var(--shadow)}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:crosshair}
.stage::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 70px 10px color-mix(in srgb,var(--stage) 60%,transparent)}
.brief{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);width:min(640px,calc(100% - 32px));z-index:3}
.box{display:flex;flex-direction:column;gap:10px;padding:14px 14px 12px 18px;border-radius:20px;background:var(--glass);backdrop-filter:blur(18px) saturate(1.4);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fg) 8%,transparent),0 20px 50px -10px var(--shadow)}
.box textarea{border:0;outline:0;resize:none;background:transparent;font:450 17px/1.45 var(--sans);color:var(--fg);height:50px;padding:0}
.box textarea::placeholder{color:var(--fg3)}
.boxrow{display:flex;align-items:center;gap:8px}
.chip{border:0;height:28px;padding:0 10px;border-radius:999px;background:color-mix(in srgb,var(--fg) 6%,transparent);color:var(--fg2);font:500 12.5px var(--sans);cursor:pointer;transition:background .15s,color .15s;white-space:nowrap}
.chip:hover{background:color-mix(in srgb,var(--fg) 11%,transparent);color:var(--fg)}
.go{margin-left:auto;width:36px;height:36px;border-radius:50%;border:0;background:var(--btn);color:var(--btn-fg);display:grid;place-items:center;cursor:pointer;transition:transform .16s var(--ease),background .2s}
.go:hover{background:var(--btn-hover)} .go:active{transform:scale(.92)}
.go svg{width:16px;height:16px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.status-old{position:absolute;left:22px;top:20px;z-index:3;display:flex;align-items:center;gap:8px;font:500 12px var(--mono);color:var(--fg2);background:rgba(255,255,255,.75);backdrop-filter:blur(10px);padding:6px 10px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.8)}
.status i{width:7px;height:7px;border-radius:50%;background:#2fb26b;box-shadow:0 0 0 3px rgba(47,178,107,.18)}
.status.busy i{background:var(--accent);box-shadow:0 0 0 3px rgba(110,86,207,.2);animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.4}}
.callout{position:absolute;z-index:2;font:500 13px var(--sans);color:var(--fg);pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity .5s var(--ease),transform .5s var(--ease);white-space:nowrap}
.callout.on{opacity:1;transform:none}
.callout span{display:inline-block;padding-left:44px;position:relative;font:500 13px var(--sans);color:var(--fg);text-shadow:0 0 12px #fff,0 0 4px #fff}
.callout span::before{content:"";position:absolute;left:4px;top:50%;width:34px;height:1px;background:var(--fg)}
.callout::before{content:"";position:absolute;left:0;top:50%;margin-top:-3px;width:6px;height:6px;border-radius:50%;background:var(--fg)}
.mascot{position:absolute;right:24px;top:18px;z-index:3;width:58px;height:58px;border-radius:16px;border:1px dashed rgba(0,0,0,.18);display:grid;place-items:center;text-align:center;font:10px/1.2 var(--sans);color:var(--fg3);background:rgba(255,255,255,.5)}
.under{display:flex;justify-content:space-between;align-items:center;gap:20px;width:min(1240px,100%);margin:18px auto 0;font:500 13px var(--sans);color:var(--fg3);flex-wrap:wrap}
.under .works{display:flex;gap:22px;flex-wrap:wrap;align-items:center}
.under .works b{font-weight:600;color:var(--fg2)}
.hint{font:450 13px var(--sans);color:var(--fg3)}
@media (max-width:820px){
  nav{display:none}
  .stage{height:76svh;min-height:540px;border-radius:22px}
  .pill .long{display:none}
  .brief{bottom:14px}
  .chip.wide{display:none}
}
@media (prefers-reduced-motion:reduce){.callout{transition:none}}
/* section 2: from bubbles to a plan */
.intro.two{padding-top:clamp(90px,14vh,150px)}
h2.big{margin:0 auto;font:700 clamp(40px,5.4vw,80px)/.98 var(--sans);letter-spacing:-.055em;text-wrap:balance;max-width:14ch}
h2.big span{color:var(--fg3)}
.stage.two{height:clamp(440px,calc(100svh - 200px),740px);background:#eef3f6}
.stage.two canvas{cursor:grab;touch-action:pan-y}
.stage.two canvas.grab{cursor:grabbing}
.scrub{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3;width:min(360px,calc(100% - 48px));height:44px;border-radius:999px;background:rgba(255,255,255,.82);backdrop-filter:blur(18px) saturate(1.4);box-shadow:inset 0 0 0 1px rgba(255,255,255,.9),0 1px 0 rgba(0,0,0,.04),0 16px 40px -10px rgba(30,30,60,.25);touch-action:none;cursor:pointer}
.scrub .fill{position:absolute;left:6px;top:50%;height:4px;margin-top:-2px;border-radius:4px;background:var(--accent);width:0}
.scrub .rail{position:absolute;left:6px;right:6px;top:50%;height:4px;margin-top:-2px;border-radius:4px;background:rgba(0,0,0,.07)}
.scrub .knob{position:absolute;top:6px;left:6px;width:32px;height:32px;margin-left:-0px;border-radius:50%;background:var(--fg);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 2px 6px rgba(0,0,0,.28);cursor:grab;transition:transform .16s var(--ease),background .2s;outline:0}
.scrub .knob:hover{background:#25252c}
.scrub .knob:active,.scrub.drag .knob{transform:scale(.94);cursor:grabbing}
.scrub .knob:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media (max-width:820px){.stage.two{height:78svh;min-height:520px}.intro.two{padding-top:80px}}

/* ---- crafted details (2026-10-30): logo, toggle, buttons, chips, cursor, page grain ---- */
:root{--lit:url(#lgW);--litglow:none;--lg1:#544082;--lg2:#6c5791;--lg3:#8888b7;--lw1:#5a487d;--lw2:#a3a5d6;--dot:#ddd3f1;--spring:cubic-bezier(.22,1.32,.36,1);--quint:cubic-bezier(.23,1,.32,1);
  --sf-top:#2c2063;--sf-bot:#1a1040;--sf-ring:#0f0830;--sf-shade:rgba(0,0,0,.4);--sf-drop:rgba(26,16,64,.32);
  --cur:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M3 2.5 L3 19 L7.6 14.8 L10.6 21.3 L13.6 20 L10.7 13.6 L17 13.4 Z' fill='%231A1040' stroke='%23FFFDF8' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E") 3 2,auto;
  --curp:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M3 2.5 L3 19 L7.6 14.8 L10.6 21.3 L13.6 20 L10.7 13.6 L17 13.4 Z' fill='%237C5CBF' stroke='%23FFFDF8' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E") 3 2,pointer}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--lg1:#ffffff;--lg2:#ffffff;--lg3:#ffffff;--lw1:#ffffff;--lw2:#ffffff;--lit:#ffd47e;--litglow:drop-shadow(0 0 26px rgba(255,190,90,.95));--dot:#26262b;
  --sf-top:#ffffff;--sf-bot:#e4e1ec;--sf-ring:rgba(255,255,255,.5);--sf-shade:rgba(80,60,140,.22);--sf-drop:rgba(0,0,0,.6);
  --cur:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M3 2.5 L3 19 L7.6 14.8 L10.6 21.3 L13.6 20 L10.7 13.6 L17 13.4 Z' fill='%23F5F5F7' stroke='%230A0A0B' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E") 3 2,auto;
  --curp:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M3 2.5 L3 19 L7.6 14.8 L10.6 21.3 L13.6 20 L10.7 13.6 L17 13.4 Z' fill='%23B8A2E3' stroke='%230A0A0B' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E") 3 2,pointer}}
:root[data-theme="dark"]{--lg1:#ffffff;--lg2:#ffffff;--lg3:#ffffff;--lw1:#ffffff;--lw2:#ffffff;--lit:#ffd47e;--litglow:drop-shadow(0 0 26px rgba(255,190,90,.95));--dot:#26262b;
  --sf-top:#ffffff;--sf-bot:#e4e1ec;--sf-ring:rgba(255,255,255,.5);--sf-shade:rgba(80,60,140,.22);--sf-drop:rgba(0,0,0,.6);
  --cur:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M3 2.5 L3 19 L7.6 14.8 L10.6 21.3 L13.6 20 L10.7 13.6 L17 13.4 Z' fill='%23F5F5F7' stroke='%230A0A0B' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E") 3 2,auto;
  --curp:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M3 2.5 L3 19 L7.6 14.8 L10.6 21.3 L13.6 20 L10.7 13.6 L17 13.4 Z' fill='%23B8A2E3' stroke='%230A0A0B' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E") 3 2,pointer}
@media (hover:hover) and (pointer:fine){html{cursor:var(--cur)} a,button,.chip,[data-poke]{cursor:var(--curp)!important}}
html{transition:background-color .5s var(--quint)}
body,header,.stage,.box{transition:background-color .5s var(--quint),color .5s var(--quint)}
/* a drafting dot grid that only shows around the cursor */
/* (its pointer position is not inherited: moving the pointer restyles the root, the body and this layer, not the page) */
@property --dmx{syntax:'<length>';inherits:false;initial-value:-999px}@property --dmy{syntax:'<length>';inherits:false;initial-value:-999px}
body,body::before{--dmx:inherit;--dmy:inherit}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(circle at 1px 1px,var(--dot) 1.1px,transparent 1.4px);background-size:24px 24px;
  -webkit-mask-image:radial-gradient(240px circle at var(--dmx,-999px) var(--dmy,-999px),#000 0%,rgba(0,0,0,.35) 45%,transparent 100%);mask-image:radial-gradient(240px circle at var(--dmx,-999px) var(--dmy,-999px),#000 0%,rgba(0,0,0,.35) 45%,transparent 100%)}
/* header: clear at the top, frosted once you scroll */
header{background:transparent;backdrop-filter:none;transition:background-color .35s var(--quint),box-shadow .35s var(--quint)}
header.scrolled{background:var(--head);backdrop-filter:saturate(1.6) blur(14px);box-shadow:0 1px 0 var(--line)}
/* logo: the C sweeps in, the windows stamp, the mark lands */
.brand{gap:10px}
.mark{width:26px;height:26px;overflow:visible;transform-origin:50% 90%}
.mark .c1{stop-color:var(--lg1)} .mark .c2{stop-color:var(--lg2)} .mark .c3{stop-color:var(--lg3)} .mark .w1{stop-color:var(--lw1)} .mark .w2{stop-color:var(--lw2)}
.mark .wins rect{transform-box:fill-box;transform-origin:center}
.brand.draw .sweep{animation:lgSweep .95s cubic-bezier(.65,0,.35,1) both}
.brand.draw .wins rect{animation:lgStamp .46s cubic-bezier(.34,1.56,.64,1) both}
.brand.draw .wins rect:nth-child(1){animation-delay:.8s}.brand.draw .wins rect:nth-child(2){animation-delay:.87s}.brand.draw .wins rect:nth-child(3){animation-delay:.94s}.brand.draw .wins rect:nth-child(4){animation-delay:1.01s}
.brand.draw .mark{animation:lgThud .55s 1.12s cubic-bezier(.34,1.56,.64,1) both}
@keyframes lgSweep{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes lgStamp{0%{transform:scale(2.1) rotate(-8deg);opacity:0}55%{opacity:1}100%{transform:none;opacity:1}}
@keyframes lgThud{0%{transform:none}30%{transform:scale(1.14,.84)}62%{transform:scale(.95,1.06) translateY(-2px)}100%{transform:none}}
/* dark mode: the windows switch on like lights, flicker once, then go back to white */
.brand.lit .wins rect{animation:winOn .42s steps(1,end) both;filter:var(--litglow)}
.brand.lit .wins rect:nth-child(1){animation-delay:0s}.brand.lit .wins rect:nth-child(2){animation-delay:.16s}.brand.lit .wins rect:nth-child(3){animation-delay:.08s}.brand.lit .wins rect:nth-child(4){animation-delay:.24s}
@keyframes winOn{0%{fill:var(--lit)}18%{fill:url(#lgW)}34%{fill:var(--lit)}100%{fill:var(--lit)}}

/* ---- section: the drawing set ---- */
:root{--ink:#1a1040;--paper:#fffdf8;--c-struct:#7c5cbf;--c-plumb:#2f7fc1;--c-elec:#c98a12;--c-fire:#d1493f}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--ink:#ebe8f4;--paper:#121214;--c-struct:#b8a2e3;--c-plumb:#6fb0e8;--c-elec:#e8b74a;--c-fire:#f07a6f}}
:root[data-theme="dark"]{--ink:#ebe8f4;--paper:#121214;--c-struct:#b8a2e3;--c-plumb:#6fb0e8;--c-elec:#e8b74a;--c-fire:#f07a6f}
.intro.two{padding-top:clamp(110px,16vh,180px)}
.paper{position:relative;margin:clamp(30px,5vh,52px) auto 0;width:min(1280px,100%);border-radius:28px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line),0 30px 80px -30px var(--shadow);overflow:hidden;transition:background-color .5s var(--quint)}
.paper-scroll{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.paper-scroll::-webkit-scrollbar{display:none}
/* drawing: the plan inks itself in, then each discipline is laid over it */
.apt{position:relative;padding:clamp(18px,3vw,36px) clamp(14px,3vw,36px) 78px}
.aptsvg{display:block;width:100%;height:auto;max-height:min(76svh,760px);margin:0 auto;color:var(--ink);overflow:visible}
.aptsvg path,.aptsvg line,.aptsvg circle{fill:none;stroke:currentColor;vector-effect:none}
.aptsvg .a-wall{fill:currentColor;stroke:none;transition:opacity .5s}
.aptsvg .a-door{stroke-width:.04} .aptsvg .a-win{stroke-width:.035} .aptsvg .a-stair{stroke-width:.03;opacity:.75} .aptsvg .a-lift{stroke-width:.035;opacity:.8}
.aptsvg .a-furn{stroke-width:.026;opacity:.5} .aptsvg .a-rug{stroke-width:.02;opacity:.22;stroke-dasharray:.25 .15} .aptsvg .a-plant{stroke-width:.02;opacity:.4} .aptsvg .a-deck{stroke-width:.018;opacity:.3}
.aptsvg text{fill:currentColor;stroke:none;font-family:var(--sans);text-anchor:middle}
.aptsvg .lab text{font-size:.8px;font-weight:600;letter-spacing:.01em} .aptsvg .lab .sz{font-size:.56px;font-weight:450;font-family:var(--mono);opacity:.6} .aptsvg .lab.s text{font-size:.56px;font-weight:550;opacity:.85}
.aptsvg .dim line{stroke-width:.04;opacity:.6} .aptsvg .dim .tk{stroke-width:.08} .aptsvg .dim text{font-size:.62px;font-family:var(--mono);opacity:.7}
.aptsvg .na circle{stroke-width:.07} .aptsvg .na path{fill:currentColor;stroke:none} .aptsvg .na text{font-size:.85px;font-weight:700;text-anchor:start}
.aptsvg .grid line{stroke-width:.025;stroke-dasharray:.9 .25 .15 .25;opacity:0;transition:opacity .5s} .aptsvg .grid circle{stroke-width:.05;opacity:0;transition:opacity .5s} .aptsvg .grid text{font-size:.72px;font-weight:600;opacity:0;transition:opacity .5s}
.apt[data-on="struct"] .grid *,.apt[data-on="found"] .grid *{opacity:.6}
.aptsvg .base{transition:opacity .5s} .apt:not([data-on="plan"]) .aptsvg .base{opacity:.42} .apt:not([data-on="plan"]) .aptsvg .labels{opacity:.55}
.aptsvg .labels{transition:opacity .5s}
.aptsvg .eng{opacity:0;transition:opacity .45s} .aptsvg .eng path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.2s cubic-bezier(.65,0,.35,1)}
.apt[data-on="struct"] .e-struct,.apt[data-on="mech"] .e-mech,.apt[data-on="elec"] .e-elec,.apt[data-on="plumb"] .e-plumb,.apt[data-on="found"] .e-found{opacity:1}
.apt[data-on="struct"] .e-struct path,.apt[data-on="mech"] .e-mech path,.apt[data-on="elec"] .e-elec path,.apt[data-on="plumb"] .e-plumb path,.apt[data-on="found"] .e-found path{stroke-dashoffset:0}
.e-struct{color:var(--c-struct)} .e-mech{color:#1f9bb0} .e-elec{color:var(--c-elec)} .e-plumb{color:var(--c-plumb)} .e-found{color:#9a6b3f}
.aptsvg .s-col{fill:currentColor;stroke:none} .aptsvg .s-beam{fill:currentColor!important;stroke:none;opacity:.32}
.aptsvg .m-ac,.aptsvg .m-odu{stroke-width:.05;fill:color-mix(in srgb,currentColor 18%,transparent)!important} .aptsvg .m-ref{stroke-width:.05;stroke-dasharray:.25 .15!important} .aptsvg .m-fan,.aptsvg .m-shaft,.aptsvg .m-hood{stroke-width:.04} .aptsvg .m-duct{stroke-width:.2;opacity:.6} .aptsvg .m-ledge{stroke-width:.03;opacity:.6}
.aptsvg .l-light,.aptsvg .l-fan{stroke-width:.035} .aptsvg .l-wire{stroke-width:.028;opacity:.75} .aptsvg .l-home{stroke-width:.045;opacity:.9} .aptsvg .l-sb,.aptsvg .l-db{fill:currentColor!important;stroke:none} .aptsvg .l-sock{stroke-width:.04}
.aptsvg .p-drain{stroke-width:.09;stroke-linejoin:round} .aptsvg .p-supply{stroke-width:.035;opacity:.8} .aptsvg .p-stack,.aptsvg .p-riser{stroke-width:.05;fill:color-mix(in srgb,currentColor 25%,transparent)!important} .aptsvg .p-fix{fill:currentColor!important;stroke:none}
.aptsvg .f-pad{stroke-width:.06;stroke-dasharray:.4 .2;fill:color-mix(in srgb,currentColor 10%,transparent)!important} .aptsvg .f-ped{fill:currentColor!important;stroke:none;opacity:.7} .aptsvg .f-strap{stroke-width:.25;opacity:.35}
.lkey[data-k="mech"] i::after{background:#1f9bb0} .lkey[data-k="found"] i::after{background:#9a6b3f}
/* the plan inks in once, as it comes into view */
.apt:not(.drawn) .aptsvg .base,.apt:not(.drawn) .aptsvg .labels{opacity:0}
@media (max-width:760px){.apt{padding:16px 10px 112px}.aptsvg{max-height:none}}
.hang .art .apt.mini{position:absolute;inset:0;padding:0;display:grid;place-items:center;overflow:hidden}
.hang .art .apt.mini svg{width:132%;max-width:none;max-height:none;transform:rotate(90deg)}
.hang .art .apt.mini .labels,.hang .art .apt.mini .dim,.hang .art .apt.mini .na,.hang .art .apt.mini .grid{display:none}
.hang .art .apt.mini .eng path{stroke-dashoffset:0}
/* layer keys: a CAD layer palette, the swatch draws its own line when the layer is on */
.lkeys{position:absolute;left:clamp(16px,2.6vw,34px);bottom:18px;display:flex;gap:4px;flex-wrap:wrap}
.lkey{display:inline-flex;align-items:center;gap:9px;height:34px;padding:0 12px 0 10px;border:0;border-radius:10px;background:transparent;color:var(--fg3);font:500 13.5px var(--sans);transition:color .2s,background-color .2s,transform .19s var(--spring)}
.lkey:hover{color:var(--fg);background:color-mix(in srgb,var(--fg) 5%,transparent)} .lkey:active{transform:scale(.96)}
.lkey i{position:relative;width:18px;height:2px;border-radius:2px;background:color-mix(in srgb,currentColor 30%,transparent);overflow:hidden}
.lkey i::after{content:"";position:absolute;inset:0;transform:scaleX(0);transform-origin:left;transition:transform .5s var(--quint)}
.lkey[data-k="struct"] i::after{background:var(--c-struct)} .lkey[data-k="mech"] i::after{background:#1f9bb0} .lkey[data-k="plumb"] i::after{background:var(--c-plumb)} .lkey[data-k="elec"] i::after{background:var(--c-elec)} .lkey[data-k="fire"] i::after{background:var(--c-fire)}
.lkey[aria-pressed="true"]{color:var(--fg)} .lkey[aria-pressed="true"] i::after{transform:none}
.lkey:focus-visible{outline:0;box-shadow:0 0 0 2px var(--paper),0 0 0 4px color-mix(in srgb,var(--accent) 70%,transparent)}
@media (max-width:640px){.paper{border-radius:22px}#sheet{max-height:none;padding:18px 14px 104px}.lkeys{right:10px;left:10px;bottom:12px;display:grid;grid-template-columns:1fr 1fr}}
@media (prefers-reduced-motion:reduce){#sheet *{transition:none!important;stroke-dashoffset:0!important}}

/* ---- section: the files on a line ---- */
.rope{position:relative;margin:clamp(30px,5vh,52px) auto 0;width:min(1280px,100%);border-radius:28px;background:var(--stage);box-shadow:inset 0 0 0 1px var(--line),0 30px 80px -30px var(--shadow);overflow:hidden}
.rope .track{position:relative;display:flex;justify-content:center;gap:clamp(14px,2vw,30px);padding:76px clamp(24px,4vw,56px) 64px;min-width:max-content;margin:0 auto}
.rope .line{position:absolute;left:0;top:40px;width:100%;height:44px;overflow:visible;pointer-events:none}
.rope .line path{fill:none;stroke:var(--fg3);stroke-width:1.4px;vector-effect:non-scaling-stroke}
.hang{position:relative;flex:0 0 clamp(132px,11.4vw,166px);margin-top:var(--dy);padding:0;border:0;background:none;color:inherit;font:inherit;transform-origin:50% -10px;transform:rotate(var(--a,0deg));perspective:900px;cursor:pointer}
.hang .clip{position:absolute;left:50%;top:-16px;width:18px;height:22px;margin-left:-9px;border-radius:3px;background:var(--fg);z-index:2;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.hang .clip::after{content:"";position:absolute;left:5px;right:5px;top:4px;height:2px;border-radius:2px;background:var(--bg);opacity:.5}
.hang .card{display:block;position:relative;aspect-ratio:3/4.15;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.34,1.3,.5,1)}
.hang.flip .card{transform:rotateY(180deg)}
.hang .face{position:absolute;inset:0;border-radius:5px;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line),0 18px 34px -16px var(--shadow),0 2px 4px -2px var(--shadow)}
.hang .art{position:absolute;inset:16px 12px 34px;display:grid;place-items:center;color:var(--ink)}
.hang .art svg{width:100%;height:100%;overflow:visible} .hang .art img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;border-radius:2px}
.hang .cap{position:absolute;left:12px;bottom:10px;font:600 12.5px var(--sans);letter-spacing:-.01em;color:var(--fg)}
.hang .back{transform:rotateY(180deg);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:16px;text-align:center;background:var(--fg);color:var(--bg)}
.hang .back b{font:700 clamp(30px,2.8vw,40px)/1 var(--sans);letter-spacing:-.05em}
.hang .back span{font:500 13px/1.35 var(--sans);opacity:.75;text-wrap:balance}
.hang:hover .face.front{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 35%,var(--line)),0 22px 40px -16px var(--shadow),0 2px 4px -2px var(--shadow)}
.hang:focus-visible{outline:0} .hang:focus-visible .face{box-shadow:0 0 0 2px var(--bg),0 0 0 4px color-mix(in srgb,var(--accent) 70%,transparent)}
.iso polygon{stroke:var(--ink);stroke-width:.12;stroke-linejoin:round;fill:var(--paper)} .iso .sd{fill:color-mix(in srgb,var(--ink) 9%,var(--paper))} .iso .fr{fill:color-mix(in srgb,var(--ink) 4%,var(--paper))}
.iso .gl{fill:color-mix(in srgb,var(--c-plumb) 30%,var(--paper));stroke-width:.08}
.iso.wf polygon{fill:none;stroke:var(--accent);stroke-width:.1}
.tbl line,.tbl rect{stroke:var(--ink);stroke-width:.18;fill:none} .tbl rect{fill:color-mix(in srgb,var(--ink) 10%,transparent)}
@media (max-width:760px){.rope{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:22px}.rope::-webkit-scrollbar{display:none}.rope .track{justify-content:flex-start;padding:70px 28px 54px;gap:22px}.hang{flex-basis:58vw;scroll-snap-align:center}}
@media (prefers-reduced-motion:reduce){.hang .card{transition:none}}
/* ---- pricing ---- */
.plans{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,22px);width:min(980px,100%);margin:clamp(30px,5vh,52px) auto 0}
.plan{position:relative;display:flex;flex-direction:column;gap:18px;padding:clamp(26px,3vw,40px);border-radius:28px;background:var(--soft);box-shadow:inset 0 0 0 1px var(--line)}
.plan.pro{background:var(--stage);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 22%,var(--line)),0 30px 80px -40px var(--shadow)}
.plan h3{margin:0;font:700 clamp(28px,2.6vw,36px)/1 var(--sans);letter-spacing:-.04em}
.plan ul{list-style:none;margin:0;padding:0;display:grid;gap:12px;font:450 16px/1.4 var(--sans);color:var(--fg2)}
.plan li{position:relative;padding-left:26px}
.plan li::before{content:"";position:absolute;left:0;top:.42em;width:14px;height:9px;border-left:1.8px solid var(--accent);border-bottom:1.8px solid var(--accent);transform:rotate(-45deg) scale(.8);transform-origin:left bottom}
.plan .btn.big{height:46px;padding:0 22px;font-size:15.5px;align-self:flex-start;margin-top:auto}
.plan .btn.plain.big{box-shadow:inset 0 0 0 1px var(--line);color:var(--fg)}
.plan .never{margin:0;font:450 14px/1.45 var(--sans);color:var(--fg3)}
@media (max-width:700px){.plans{grid-template-columns:1fr}}
/* ---- footer ---- */
.foot{margin-top:clamp(110px,16vh,180px);border-top:1px solid var(--line);padding:56px max(24px,env(safe-area-inset-left,0px)) calc(28px + env(safe-area-inset-bottom,0px))}
.foot-in{display:grid;grid-template-columns:1.2fr 2fr;gap:40px;width:min(1240px,100%);margin:0 auto}
.fbrand{position:relative;min-height:180px} .fbrand p{margin:14px 0 0;font:450 14.5px/1.5 var(--sans);color:var(--fg2);max-width:30ch}
.fbrand .rev-foot{position:absolute;left:0;bottom:-6px;top:auto;right:auto;width:96px;pointer-events:none}
.fcols{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin:0;font:450 14.5px var(--sans)}
.fcols h4{margin:0 0 12px;font:600 13px var(--sans);color:var(--fg)} .fcols div{display:flex;flex-direction:column;gap:9px}
.fcols a{padding:0;border-radius:0;color:var(--fg2);text-decoration:none;width:fit-content;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:color .2s,background-size .35s var(--quint)}
.fcols a:hover{color:var(--fg);background-size:100% 1px}
.backers{display:flex;flex-wrap:wrap;gap:10px 28px;width:min(1240px,100%);margin:46px auto 0;padding-top:24px;border-top:1px solid var(--line);font:500 13px var(--sans);color:var(--fg3)}
.fbase{width:min(1240px,100%);margin:18px auto 0;font:450 12.5px var(--sans);color:var(--fg3)}
@media (max-width:820px){.foot-in{grid-template-columns:1fr}.fcols{grid-template-columns:1fr 1fr}.fbrand{min-height:150px}}
/* letters that roll on hover */
[data-roll]{display:inline-flex;overflow:hidden;height:1.25em;line-height:1.25em;vertical-align:middle}
[data-roll] .rl{display:flex;flex-direction:column;height:2.5em;transition:transform .5s cubic-bezier(.65,0,.35,1);transition-delay:calc(var(--i) * 16ms);white-space:pre}
[data-roll] .rl>span{display:block;height:1.25em;line-height:1.25em}
a:hover>[data-roll] .rl,button:hover>[data-roll] .rl{transform:translateY(-50%)}
/* nav: one highlight that slides between links */
nav{position:relative;gap:2px}
nav a{position:relative;z-index:1;padding:6px 12px;border-radius:999px}
nav .hl{position:absolute;left:0;top:50%;height:32px;margin-top:-16px;width:0;border-radius:999px;background:color-mix(in srgb,var(--fg) 6.5%,transparent);opacity:0;pointer-events:none;transition:transform .42s var(--spring),width .42s var(--spring),opacity .22s}
nav.on .hl{opacity:1}
/* theme toggle: the sun's rays fold away and a bite turns it into a moon */
.tt{width:36px;height:36px;border:0;border-radius:50%;background:transparent;color:var(--fg2);display:grid;place-items:center;transition:background-color .2s,color .2s,transform .19s var(--spring)}
.tt:hover{background:color-mix(in srgb,var(--fg) 6.5%,transparent);color:var(--fg)} .tt:active{transform:scale(.9)}
.tt svg{width:20px;height:20px;overflow:visible}
.tt .core{transform-origin:12px 12px;transition:transform .55s var(--spring)}
.tt .bite{transition:transform .55s var(--spring)}
.tt .rays{transform-origin:12px 12px;transition:transform .55s var(--spring),opacity .3s}
:root[data-theme="dark"] .tt .core{transform:scale(1.55)} :root[data-theme="dark"] .tt .bite{transform:translate(-10px,8px)} :root[data-theme="dark"] .tt .rays{transform:rotate(90deg) scale(.4);opacity:0}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tt .core{transform:scale(1.55)} :root:not([data-theme="light"]) .tt .bite{transform:translate(-10px,8px)} :root:not([data-theme="light"]) .tt .rays{transform:rotate(90deg) scale(.4);opacity:0}}
/* primary: flat ink, no gloss; an arrow grows its shaft and steps forward on hover */
.btn.dark{background:var(--fg);color:var(--bg);box-shadow:none;gap:5px;height:34px;padding:0 11px 0 15px;border-radius:10px;letter-spacing:-.01em;transition:background-color .2s,transform .18s var(--spring)}
.btn.dark:hover{background:color-mix(in srgb,var(--fg) 84%,var(--accent))}
.btn.dark:active{transform:scale(.97);transition-duration:.08s}
.btn .ar2{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.btn .ar2 .hd{transition:transform .3s var(--spring)} .btn .ar2 .sh{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .25s var(--ease)}
.btn:hover .ar2 .hd{transform:translateX(2px)} .btn:hover .ar2 .sh{stroke-dashoffset:0}
.btn.plain{border-radius:10px;transition:background-color .2s,color .2s} .btn.plain:hover{background:color-mix(in srgb,var(--fg) 6.5%,transparent)}
.btn:focus-visible,.tt:focus-visible,.chip:focus-visible,.go:focus-visible{outline:0;box-shadow:0 0 0 3px var(--bg),0 0 0 5px color-mix(in srgb,var(--accent) 70%,transparent)}
/* chips: each sample draws its own building as you hover */
.chip{display:inline-flex;align-items:center;gap:6px;padding:0 11px 0 8px;transition:background-color .15s,color .15s,transform .19s var(--spring)}
.chip:active{transform:scale(.96)}
.chip .cg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.chip .cg>*{stroke-dasharray:60;stroke-dashoffset:0}
.chip:hover .cg>*{animation:cgDraw .8s cubic-bezier(.25,.46,.45,.94) both}
.chip:hover .cg>*:nth-child(2){animation-delay:.22s}
@keyframes cgDraw{from{stroke-dashoffset:60}to{stroke-dashoffset:0}}
.box textarea{caret-color:var(--accent)}
.box{transition:box-shadow .3s var(--quint),background-color .5s var(--quint)}
.box:focus-within{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 45%,transparent),0 0 0 4px color-mix(in srgb,var(--accent) 12%,transparent),0 24px 60px -12px var(--shadow)}
/* go: the arrow lifts off, the canonical house draws while it builds, then a tick */
.go{position:relative;overflow:hidden;transition:transform .19s var(--spring),background-color .2s}
.go:hover{transform:translateY(-1px)} .go:active{transform:scale(.9);transition-duration:.1s}
.go svg{position:absolute;inset:0;margin:auto;transition:transform .45s var(--quint),opacity .3s}
.go .ld{width:22px;height:22px;opacity:0;transform:translateY(120%);fill:none;stroke:currentColor;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:120}
.go .ck{width:16px;height:16px;opacity:0;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.go.building .ar{transform:translateY(-140%);opacity:0} .go.building .ld{opacity:1;transform:none;animation:drawHouse 1.8s cubic-bezier(.25,.46,.45,.94) infinite}
.go.done .ar{transform:translateY(-140%);opacity:0} .go.done .ck{opacity:1;stroke-dashoffset:0;transition:stroke-dashoffset .45s .05s var(--quint),opacity .1s}
.go:hover .ar{animation:arNudge .5s var(--spring)}
@keyframes arNudge{40%{transform:translateY(-3px)}}
/* Rev can be poked */
.rev-hero{pointer-events:none} .rev-hero *{pointer-events:visiblePainted}
@media (prefers-reduced-motion:reduce){.brand.draw .sweep,.brand.draw .wins rect,.brand.draw .mark,.chip:hover .cg>*,.go:hover .ar{animation:none}[data-roll] .rl{transition:none}a:hover>[data-roll] .rl,button:hover>[data-roll] .rl{transform:none}}
/* ---- header on small screens: the right group stays at the right edge and never overflows ---- */
.hright{margin-left:auto}
@media (max-width:960px){header{gap:14px}}
@media (max-width:460px){header{padding:0 max(14px,env(safe-area-inset-right,0px)) 0 max(14px,env(safe-area-inset-left,0px))}.hright .btn.plain{display:none}}
/* ---- section: sun and heat ---- */
:root{--glow:rgba(255,196,110,.34);--sun1:#ffe08a;--sun2:#ff9a3c}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--glow:rgba(255,170,80,.2)}}
:root[data-theme="dark"]{--glow:rgba(255,170,80,.2)}
.sunw{position:relative;margin:clamp(30px,5vh,52px) auto 0;width:min(1280px,100%);height:clamp(560px,84svh,780px);border-radius:28px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line),0 30px 80px -30px var(--shadow);overflow:hidden;transition:background-color .5s var(--quint)}
.sunw::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(560px circle at var(--sx,10%) var(--sy,50%),var(--glow),transparent 72%)}
.sunw canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y;cursor:var(--cur)}
.clock{position:absolute;right:clamp(20px,3vw,40px);top:clamp(22px,4vw,56px);text-align:right;pointer-events:none;max-width:min(300px,52%)}
.clock .tm{display:block;font:700 clamp(54px,7.4vw,98px)/.9 var(--sans);letter-spacing:-.06em;font-variant-numeric:tabular-nums}
.clock .ap{font-size:.34em;letter-spacing:-.02em;color:var(--fg3);margin-left:.18em;font-weight:600}
.clock p{margin:14px 0 0;font:500 clamp(15px,1.5vw,18px)/1.35 var(--sans);color:var(--fg2);text-wrap:balance}
.sunk{position:absolute;left:0;top:0;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;touch-action:none;cursor:var(--curp);outline:0}
.sunk:focus-visible{box-shadow:0 0 0 2px var(--paper),0 0 0 4px color-mix(in srgb,var(--accent) 70%,transparent)}
@media (max-width:640px){.sunw{height:min(86svh,760px);min-height:600px;border-radius:22px}.clock{left:18px;right:auto;top:18px;text-align:left;max-width:calc(100% - 36px)}.clock p{margin-top:8px}}
/* ---- section: where the drawing starts (the race) ---- */
.race{position:relative;display:grid;gap:0;width:min(1280px,100%);margin:clamp(30px,5vh,52px) auto 0;padding:clamp(22px,3.4vw,48px) clamp(22px,3.4vw,52px);border-radius:28px;background:var(--stage);box-shadow:inset 0 0 0 1px var(--line),0 30px 80px -30px var(--shadow);cursor:var(--curp)}
.lane{position:relative;display:grid;grid-template-columns:clamp(96px,11vw,150px) minmax(0,1fr);align-items:center;min-height:clamp(112px,13vw,150px)}
.lane+.lane{border-top:1px solid var(--line)}
.lane h3{margin:0;font:600 clamp(17px,1.7vw,22px)/1 var(--sans);letter-spacing:-.03em;color:var(--fg2)}
.lane.us h3{color:var(--fg)}
.track{position:relative;height:56px;margin:0 clamp(60px,6vw,90px) 0 0}
.track::before{content:"";position:absolute;left:0;right:0;top:12px;height:2px;border-radius:2px;background:color-mix(in srgb,var(--fg) 12%,transparent)}
.track .fill{position:absolute;left:0;top:12px;height:2px;width:100%;border-radius:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform calc(var(--to) * 5.5s) linear}
.race.run .track .fill{transform:scaleX(var(--to))}
.track li{position:absolute;left:var(--p);top:0;width:0;list-style:none}
.track ol{margin:0;padding:0}
.track li::before{content:"";position:absolute;left:-6px;top:7px;width:12px;height:12px;border-radius:50%;background:var(--stage);box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--fg) 22%,transparent);transition:background-color .25s,box-shadow .25s,transform .4s var(--spring);transition-delay:0s}
.race.run .track li::before{background:var(--accent);box-shadow:inset 0 0 0 2px var(--accent);transform:scale(1.15);transition-delay:calc(var(--p-n) * 5.5s)}
.track li span{position:absolute;left:0;top:30px;transform:translateX(-50%);white-space:nowrap;font:500 clamp(12px,1.15vw,14px) var(--sans);color:var(--fg3);transition:color .3s;transition-delay:calc(var(--p-n) * 5.5s)}
.race.run .track li span{color:var(--fg2)}
.track li.end span{font-weight:600}
.lane.us .track li.end span{color:var(--fg)}
.track li.end::before{left:-9px;top:4px;width:18px;height:18px}
.lane.us .track li.end::before{box-shadow:inset 0 0 0 2px var(--accent)}
.track .rest{position:absolute;left:var(--rest);right:0;top:12px;height:2px;background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--fg) 16%,transparent) 0 4px,transparent 4px 9px)}
@media (max-width:760px){
  .race{grid-template-columns:repeat(3,1fr);padding:22px 8px 22px 14px;gap:6px}
  .lane{display:block;min-height:0;padding:0 4px}
  .lane+.lane{border-top:0}
  .lane h3{margin-bottom:14px;font-size:16px}
  .track{height:min(500px,62svh);margin:0}
  .track::before,.track .fill,.track .rest{left:5px;right:auto;top:0;width:2px;height:100%}
  .track .fill{transform:scaleY(0);transform-origin:top;transition:transform calc(var(--to) * 5.5s) linear}
  .race.run .track .fill{transform:scaleY(var(--to))}
  .track .rest{top:var(--rest);height:auto;bottom:0;background:repeating-linear-gradient(180deg,color-mix(in srgb,var(--fg) 16%,transparent) 0 4px,transparent 4px 9px)}
  .track li{left:0;top:var(--p)}
  .track li::before{left:0;top:-6px}
  .track li.end::before{left:-3px;top:-9px}
  .track li span{left:20px;top:-9px;transform:none;white-space:normal;width:78px;font-size:12px;line-height:1.2}
}
/* ---- section: about ---- */
.crew{width:min(1100px,100%);margin:clamp(30px,5vh,52px) auto 0;border-top:1px solid var(--line)}
.crew .row{position:relative;display:flex;align-items:center;justify-content:center;gap:20px;padding:clamp(18px,2.6vw,34px) clamp(4px,1.4vw,18px);border-bottom:1px solid var(--line);font:700 clamp(46px,9.6vw,148px)/1 var(--sans);letter-spacing:-.06em;cursor:var(--curp);outline:0;isolation:isolate}
.crew .row::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--soft);transform:scaleY(0);transform-origin:bottom;transition:transform .5s var(--quint)}
.crew .row:hover::before,.crew .row:focus-visible::before{transform:none}
.crew .row [data-roll]{height:1.12em;line-height:1.12em}
.crew .row [data-roll] .rl{height:2.24em}
.crew .row [data-roll] .rl>span{height:1.12em;line-height:1.12em}
.crew .row:hover [data-roll] .rl,.crew .row:focus-visible [data-roll] .rl{transform:translateY(-50%)}
.crew .row .hs{position:absolute;right:clamp(8px,3vw,40px);top:50%;margin-top:-.17em;width:.34em;height:.34em;flex:none;fill:none;stroke:var(--accent);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .8s var(--quint)}
.crew .row:hover .hs,.crew .row:focus-visible .hs{stroke-dashoffset:0}
.crew-line{text-align:center;width:min(1100px,100%);margin:22px auto 0;padding:0 clamp(4px,1.4vw,18px);font:450 clamp(16px,1.6vw,19px)/1.5 var(--sans);color:var(--fg2)}
.never-line{width:min(980px,100%);margin:18px auto 0;text-align:center;font:450 14px/1.45 var(--sans);color:var(--fg3)}
@media (prefers-reduced-motion:reduce){.track .fill,.track li::before,.track li span,.crew .row::before,.crew .row .hs{transition:none}}
.lane.us .track::before{right:auto;width:var(--rest)}
@media (max-width:760px){.lane.us .track::before{width:2px;height:var(--rest)}}
/* Rev, the mascot: sits on the hero's window, lower left of the brief box */
.rev{position:absolute;right:clamp(14px,2.4vw,30px);top:clamp(12px,2vw,24px);width:clamp(74px,8vw,108px);height:auto;aspect-ratio:400/320;z-index:3;pointer-events:none;overflow:visible}
.rev-hero{top:auto;right:auto;left:max(18px,calc(50% - 470px));bottom:26px;width:clamp(96px,9vw,132px)}
@media (max-width:820px){.rev{width:68px}.rev-hero{left:auto;right:22px;bottom:150px;width:84px}}
/* a section's Rev perches on its window's top edge, outside the drawing */
.sech{position:relative;width:min(1280px,100%);margin-inline:auto}
#yours.sech{width:min(1280px,100%,calc(76svh*1.452))}
#sheet,#talkw,#insidew,#impw{margin-top:clamp(30px,5vh,52px)}
.sech .rev{top:auto;right:clamp(26px,4vw,56px);bottom:calc(-1*clamp(30px,5vh,52px) - clamp(74px,8vw,96px)*.06);width:clamp(74px,8vw,96px);pointer-events:auto;cursor:pointer;touch-action:manipulation}
@media (max-width:820px){.sech{padding-bottom:30px}.sech .rev{width:62px;right:22px;bottom:calc(-1*clamp(30px,5vh,52px) - 4px)}}
@media (max-width:860px){.talk .rev{bottom:auto;top:14px}}
.boxrow .go{flex:0 0 36px;width:36px;height:36px;min-width:36px}.boxrow .chip{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}@media (max-width:440px){.boxrow .chip:nth-of-type(n+2){display:none}}
/* ---------- the drawing set: one real floor, every trade over it, and a lens that reads any element ---------- */
.set{--k-col:#7c5cbf;--k-beam:#7c5cbf;--k-grid:#7c5cbf;--k-cool:#1f8db5;--k-vent:#5f86a6;--k-light:#c98a12;--k-power:#d2602c;--k-supply:#8b5e14;
  --k-cold:#2f7fc1;--k-hot:#e2553f;--k-soil:#7a4f2e;--k-waste:#6c7f9c;--k-fire:#d6342c}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .set{--k-col:#b8a2e3;--k-beam:#b8a2e3;--k-grid:#b8a2e3;--k-cool:#4fc0e6;--k-vent:#8fb2cc;--k-light:#f2b544;--k-power:#ff8a5c;--k-supply:#d9a35a;
  --k-cold:#6cb2ef;--k-hot:#ff7a6b;--k-soil:#c4a27f;--k-waste:#a3b4cf;--k-fire:#ff6a5e}}
:root[data-theme="dark"] .set{--k-col:#b8a2e3;--k-beam:#b8a2e3;--k-grid:#b8a2e3;--k-cool:#4fc0e6;--k-vent:#8fb2cc;--k-light:#f2b544;--k-power:#ff8a5c;--k-supply:#d9a35a;
  --k-cold:#6cb2ef;--k-hot:#ff7a6b;--k-soil:#c4a27f;--k-waste:#a3b4cf;--k-fire:#ff6a5e}
.sheet{position:relative;margin:clamp(30px,5vh,52px) auto 0;width:min(1280px,100%);border-radius:28px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line),0 30px 80px -30px var(--shadow);overflow:hidden;
  padding:clamp(18px,2.6vw,36px) clamp(14px,2.4vw,36px) 0;touch-action:pan-y}
.sheet .flr{display:block;width:100%;height:auto;color:var(--ink);overflow:visible;cursor:none}
.sheet svg path,.sheet svg line,.sheet svg circle{fill:none;stroke:currentColor}
.sheet svg text{fill:currentColor;stroke:none;font-family:var(--sans);text-anchor:middle}
/* architecture */
.a-wall{fill:currentColor!important;stroke:none!important}
.a-door{stroke-width:.04} .a-win{stroke-width:.035} .a-stair{stroke-width:.03;opacity:.7} .a-lift{stroke-width:.035;opacity:.8}
.a-furn{stroke-width:.026;opacity:.42} .a-rug{stroke-width:.02;opacity:.2;stroke-dasharray:.25 .15} .a-plant{stroke-width:.02;opacity:.35} .a-deck{stroke-width:.018;opacity:.28}
.lab text{font-size:.78px;font-weight:600;letter-spacing:.01em} .lab .sz{font-size:.54px;font-weight:450;font-family:var(--mono);opacity:.55} .lab.s text{font-size:.54px;font-weight:550;opacity:.8}
.dim line{stroke-width:.04;opacity:.55} .dim .tk{stroke-width:.08} .dim text{font-size:.78px;font-family:var(--mono);opacity:.65}
.na circle{stroke-width:.07} .na path{fill:currentColor!important;stroke:none!important} .na text{font-size:.85px;font-weight:700;text-anchor:start}
.base,.labels{transition:opacity .6s var(--quint)}
.sheet:not([data-on="plan"]) .base{opacity:.3} .sheet:not([data-on="plan"]) .labels{opacity:.45}
.sheet:not(.drawn) .base,.sheet:not(.drawn) .labels,.sheet:not(.drawn) .dim,.sheet:not(.drawn) .na{opacity:0}
.base .a-wall{transition:clip-path 1.6s var(--quint)} .sheet:not(.drawn) .a-wall{clip-path:inset(0 100% 0 0)}
/* grid */
.grid{color:var(--k-grid);opacity:0;transition:opacity .5s} .grid line{stroke-width:.025;stroke-dasharray:.9 .25 .15 .25} .grid circle{stroke-width:.05} .grid text{font-size:.7px;font-weight:600}
.sheet[data-on="struct"] .grid{opacity:.7}
/* each system in its own colour; a trade shows its systems, lines drawn on */
.sys{opacity:0;transition:opacity .5s var(--quint)} .sys path{stroke-width:.04}
.sys .line,.sys .duct{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s cubic-bezier(.65,0,.35,1)}
.sys .duct{stroke-width:.22;opacity:.45;stroke-linecap:butt}
.sys .solid{fill:currentColor!important;stroke:none!important}
.sys .band{fill:currentColor!important;stroke:none!important;opacity:.26}
.sys .box{fill:color-mix(in srgb,currentColor 16%,transparent)!important;stroke-width:.045}
.sys .mark{stroke-width:.035}
.y-light .line{stroke-width:.026;opacity:.8} .y-power .line{stroke-width:.026;opacity:.8;stroke-dasharray:1} .y-supply .line{stroke-width:.06}
.y-soil .line{stroke-width:.1;stroke-linejoin:round} .y-waste .line{stroke-width:.075;stroke-linejoin:round} .y-cold .line,.y-hot .line{stroke-width:.04}
.y-cool .line{stroke-width:.045}
.sheet[data-on="struct"] :is(.y-col,.y-beam),.sheet[data-on="mech"] :is(.y-cool,.y-vent),.sheet[data-on="elec"] :is(.y-light,.y-power,.y-supply),.sheet[data-on="plumb"] :is(.y-cold,.y-hot,.y-soil,.y-waste,.y-fire){opacity:1}
.sheet[data-on="struct"] :is(.y-col,.y-beam) :is(.line,.duct),.sheet[data-on="mech"] :is(.y-cool,.y-vent) :is(.line,.duct),.sheet[data-on="elec"] :is(.y-light,.y-power,.y-supply) .line,.sheet[data-on="plumb"] :is(.y-cold,.y-hot,.y-soil,.y-waste) .line{stroke-dashoffset:0}
.sheet[data-solo] .sys{opacity:0!important}
.sheet[data-solo] .grid{opacity:0}
.sheet[data-solo="col"] .y-col,.sheet[data-solo="beam"] .y-beam,.sheet[data-solo="cool"] .y-cool,.sheet[data-solo="vent"] .y-vent,.sheet[data-solo="light"] .y-light,.sheet[data-solo="power"] .y-power,.sheet[data-solo="supply"] .y-supply,
.sheet[data-solo="cold"] .y-cold,.sheet[data-solo="hot"] .y-hot,.sheet[data-solo="soil"] .y-soil,.sheet[data-solo="waste"] .y-waste,.sheet[data-solo="fire"] .y-fire{opacity:1!important}
.y-col,.y-beam{color:var(--k-col)} .y-cool{color:var(--k-cool)} .y-vent{color:var(--k-vent)} .y-light{color:var(--k-light)} .y-power{color:var(--k-power)} .y-supply{color:var(--k-supply)}
.y-cold{color:var(--k-cold)} .y-hot{color:var(--k-hot)} .y-soil{color:var(--k-soil)} .y-waste{color:var(--k-waste)} .y-fire{color:var(--k-fire)}
.notes{display:none}
/* the lens: the same drawing, closer, with every note the engine wrote */
.lens{position:absolute;left:0;top:0;width:min(var(--lr,232px),var(--lw,999px));height:min(var(--lr,232px),var(--lw,999px));border-radius:50%;overflow:hidden;pointer-events:none;background:var(--paper);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 16%,transparent),0 0 0 6px color-mix(in srgb,var(--paper) 70%,transparent),0 24px 60px -18px var(--shadow);
  opacity:0;scale:.6;transition:opacity .35s var(--quint),scale .5s var(--quint);will-change:transform}
.lens.on{opacity:1;scale:1}
.lens svg{position:absolute;inset:0;width:100%;height:100%;color:var(--ink)}
.lens .notes{display:block} .lens .notes text{font-size:.3px;font-family:var(--mono);font-weight:500;paint-order:stroke;stroke:var(--paper)!important;stroke-width:.12px;stroke-linejoin:round}
.lens .base{opacity:.55!important} .lens .labels{opacity:.8!important}
.lens .hit{fill:none;stroke:currentColor;stroke-width:.06;stroke-dasharray:.14 .1}
.lens::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 8%,transparent),inset 0 10px 24px -14px color-mix(in srgb,var(--ink) 30%,transparent);pointer-events:none}
/* what the lens is on */
.read{position:absolute;left:0;top:0;pointer-events:none;max-width:260px;padding:10px 14px 11px;border-radius:14px;background:var(--glass);backdrop-filter:blur(12px) saturate(1.4);
  box-shadow:inset 0 0 0 1px var(--line),0 14px 34px -16px var(--shadow);opacity:0;translate:0 6px;transition:opacity .25s,translate .35s var(--quint)}
.read.on{opacity:1;translate:0 0}
.read b{font-style:normal;display:flex;align-items:center;gap:8px;font:600 15px/1.25 var(--sans);letter-spacing:-.02em}
.read b i{flex:none;width:9px;height:9px;border-radius:50%;background:var(--c,currentColor)}
.read span{display:block;margin-top:3px;font:450 12.5px/1.4 var(--sans);color:var(--fg2)}
/* the trades, and the systems of the one that is on */
.ctl{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:8px 30px;padding:clamp(14px,2vw,22px) clamp(6px,1vw,8px) clamp(18px,2.4vw,28px)}
.trades{display:flex;gap:clamp(16px,2.2vw,30px);flex-wrap:wrap}
.trades button{position:relative;border:0;background:none;padding:6px 0 10px;font:600 clamp(15px,1.4vw,17px) var(--sans);letter-spacing:-.02em;color:var(--fg2);cursor:pointer;transition:color .25s}
.trades button:hover{color:var(--fg)} .trades button[aria-pressed="true"]{color:var(--fg)}
.trades button svg{position:absolute;left:-2px;bottom:0;width:calc(100% + 4px);height:8px;overflow:visible}
.trades button path{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:0;transition:stroke-dashoffset .6s var(--quint),opacity .2s}
.trades button[aria-pressed="true"] path{opacity:1;stroke-dashoffset:0}
.systems{display:flex;flex-wrap:wrap;gap:4px 18px;min-height:30px;align-items:center}
.systems button{display:flex;align-items:center;gap:8px;border:0;background:none;padding:4px 0;font:500 13.5px var(--sans);color:var(--fg2);cursor:pointer;opacity:0;translate:0 6px;transition:opacity .4s var(--quint),translate .5s var(--quint),color .2s}
.systems.on button{opacity:1;translate:0 0}
.systems button:nth-child(2){transition-delay:.05s,.05s,0s} .systems button:nth-child(3){transition-delay:.1s,.1s,0s} .systems button:nth-child(4){transition-delay:.15s,.15s,0s} .systems button:nth-child(5){transition-delay:.2s,.2s,0s}
.systems button:hover,.systems button[aria-pressed="true"]{color:var(--fg)}
.systems i{width:18px;height:3px;border-radius:2px;background:var(--c)}
.sheet[data-solo] .systems button[aria-pressed="false"]{color:var(--fg3)}
.trades button:focus-visible,.systems button:focus-visible{outline:0;box-shadow:0 0 0 3px var(--paper),0 0 0 5px color-mix(in srgb,var(--accent) 70%,transparent);border-radius:6px}
@media (hover:none){.sheet .flr{cursor:default}}
@media (max-width:640px){.sheet{border-radius:22px;padding-left:12px;padding-right:12px}.trades{gap:13px}.trades button{font-size:14.5px}.ctl{flex-direction:column;align-items:flex-start;gap:6px}.lens{--lr:176px}.read{max-width:220px}}
@media (prefers-reduced-motion:reduce){.sys .line,.sys .duct{transition:none}.base .a-wall{transition:none}}
.sheet[data-on="plan"] .lens .sys{opacity:1} .sheet[data-on="plan"] .lens .sys :is(.line,.duct){stroke-dashoffset:0;transition:none}
.sheet[data-on="plan"] .lens .base{opacity:.4!important}
.read em{font-style:normal}
.floors{position:absolute;left:clamp(18px,2.6vw,40px);top:clamp(14px,2vw,24px);z-index:3;display:flex;gap:clamp(14px,1.8vw,24px)}
.floors button{position:relative;border:0;background:none;padding:4px 0 9px;font:600 14px var(--sans);letter-spacing:-.01em;color:var(--fg2);cursor:pointer;transition:color .25s}
.floors button:hover{color:var(--fg)} .floors button[aria-pressed="true"]{color:var(--fg)}
.floors button svg{position:absolute;left:-2px;bottom:0;width:calc(100% + 4px);height:7px;overflow:visible}
.floors button path{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:0;transition:stroke-dashoffset .6s var(--quint),opacity .2s}
.floors button[aria-pressed="true"] path{opacity:1;stroke-dashoffset:0}
.sheet{padding-top:clamp(46px,5vw,64px)}
.pw{position:relative;transition:opacity .42s var(--quint),transform .6s var(--quint)} .sheet.swap .pw{opacity:0;transform:translateY(6px)}
.a-road,.a-street{fill:currentColor!important;stroke:none!important;opacity:.05} .a-lawn{fill:currentColor!important;stroke:none!important;opacity:.025}
.a-pathw{fill:currentColor!important;stroke:none!important;opacity:.06} .a-arrow{fill:currentColor!important;stroke:none!important;opacity:.1}
.a-plot{stroke-width:.06;stroke-dasharray:.8 .3 .15 .3;opacity:.55} .a-setb{stroke-width:.03;stroke-dasharray:.3 .25;opacity:.35}
/* trade layers: whole-layer crossfade, composited, so the change is smooth */
.tr{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;opacity:0;transform:translateY(10px);transition:opacity .75s cubic-bezier(.4,0,.2,1),transform 1.1s var(--quint);will-change:opacity,transform}
.tr .sys{opacity:1} .tr .sys :is(.line,.duct){stroke-dashoffset:0;transition:none}
.sheet[data-on="struct"] .tr-struct,.sheet[data-on="mech"] .tr-mech,.sheet[data-on="elec"] .tr-elec,.sheet[data-on="plumb"] .tr-plumb{opacity:1;transform:none;transition-delay:.12s}
.sheet[data-solo] .tr .sys{opacity:.08!important;transition:opacity .35s}
.sheet[data-solo="col"] .tr .y-col,.sheet[data-solo="beam"] .tr .y-beam,.sheet[data-solo="cool"] .tr .y-cool,.sheet[data-solo="vent"] .tr .y-vent,.sheet[data-solo="light"] .tr .y-light,.sheet[data-solo="power"] .tr .y-power,.sheet[data-solo="supply"] .tr .y-supply,
.sheet[data-solo="cold"] .tr .y-cold,.sheet[data-solo="hot"] .tr .y-hot,.sheet[data-solo="soil"] .tr .y-soil,.sheet[data-solo="waste"] .tr .y-waste,.sheet[data-solo="fire"] .tr .y-fire{opacity:1!important}
.base,.labels,.grid{transition:opacity .8s cubic-bezier(.4,0,.2,1)}
@media (prefers-reduced-motion:reduce){.tr,.pw{transition:none}}
.intro.sech{padding-top:clamp(110px,16vh,180px)}
/* ---------- talk to your plan: one flat, Kozo's cursor making each change, every change a version ---------- */
.talk{position:relative;margin:clamp(30px,5vh,52px) auto 0;width:min(1280px,100%);border-radius:28px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line),0 30px 80px -30px var(--shadow);overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1fr) 250px;grid-template-areas:"plan vers" "ask vers"}
.talk .tp{grid-area:plan;display:block;width:100%;height:auto;max-height:68svh;padding:clamp(18px,2.6vw,34px) clamp(14px,2vw,30px) 6px;color:var(--ink);overflow:visible}
.tp path,.tp circle,.tp line{fill:none;stroke:currentColor}
.tp text{fill:currentColor;stroke:none;font-family:var(--sans);text-anchor:middle}
.tp .a-wall{fill:currentColor!important;stroke:none!important}
.tp .a-door{stroke-width:.04} .tp .a-win{stroke-width:.035} .tp .a-stair{stroke-width:.03;opacity:.6} .tp .a-lift{stroke-width:.035;opacity:.7}
.tp .a-furn{stroke-width:.03;opacity:.5} .tp .a-rug{stroke-width:.02;opacity:.22;stroke-dasharray:.25 .15} .tp .a-plant{stroke-width:.02;opacity:.4} .tp .a-deck{stroke-width:.018;opacity:.3}
.tp .lab text{font-size:.8px;font-weight:600} .tp .lab .sz{font-size:.55px;font-weight:450;font-family:var(--mono);opacity:.55} .tp .lab.s text{font-size:.56px;opacity:.8}
/* the pieces that change */
.tp .mv{stroke-width:.045;opacity:.95;transition:transform .9s cubic-bezier(.65,0,.35,1)}
.tp .mv.hot{color:var(--accent)}
.tp .swap path{stroke-dasharray:1;transition:stroke-dashoffset .7s cubic-bezier(.65,0,.35,1),opacity .4s}
.tp .swap.out path{stroke-dashoffset:1;opacity:0} .tp .swap.in path{stroke-dashoffset:0;opacity:1}
.tp .dimk{color:var(--accent);opacity:0;transition:opacity .3s} .tp .dimk.on{opacity:1}
.tp .dimk line{stroke-width:.05} .tp .dimk text{font:600 .62px var(--mono);fill:currentColor}
.tp .roll{transition:opacity .25s,transform .35s var(--quint)} .tp .roll.go{opacity:0;transform:translateY(-.5px)}
.tp .fade{position:absolute}
/* Kozo's cursor */
.kz{position:absolute;left:0;top:0;z-index:4;pointer-events:none;opacity:0;transition:opacity .3s;will-change:transform}
.kz.on{opacity:1}
.kz svg{display:block;width:22px;height:22px;transform-origin:3px 3px;transition:transform .14s var(--spring);filter:drop-shadow(0 2px 3px rgba(0,0,0,.18))}
.kz.press svg{transform:scale(.82)}
.kz b{position:absolute;left:17px;top:19px;padding:3px 8px 4px;border-radius:7px 7px 7px 2px;background:var(--accent);color:#fff;font:600 12px var(--sans);letter-spacing:-.01em;white-space:nowrap;box-shadow:0 4px 12px -4px var(--shadow)}
.kz path{fill:var(--accent);stroke:#fff;stroke-width:1.4;stroke-linejoin:round}
/* versions */
.vers{grid-area:vers;list-style:none;margin:0;padding:clamp(26px,3vw,40px) 24px 24px 8px;display:flex;flex-direction:column;gap:2px;border-left:1px solid var(--line);overflow:auto}
.vers li{display:block}
.vers .v{display:grid;grid-template-columns:22px 1fr;align-items:baseline;width:100%;border:0;background:none;padding:9px 10px 9px 12px;border-radius:10px;text-align:left;font:500 14px/1.35 var(--sans);color:var(--fg3);transition:color .3s}
.vers .v[aria-current="true"]{color:var(--fg)}
.vers i{font-style:normal;font:500 12px var(--mono);color:var(--fg3)}
.vers .v[aria-current="true"] i{color:var(--accent)}
.vers li.new{animation:vIn .55s var(--quint) both}
@keyframes vIn{from{opacity:0;transform:translateY(-8px)}}
/* the instruction box: the hero's brief box, once more */
.talk .tbox{grid-area:ask;position:relative;left:auto;bottom:auto;transform:none;width:min(720px,calc(100% - 32px));margin:6px auto clamp(18px,2.4vw,28px)}
.talk .box textarea{height:28px}
.talk .chips{display:flex;gap:6px;min-width:0;overflow-x:auto;scrollbar-width:none;mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent)}.talk .chips::-webkit-scrollbar{display:none}
.talk .chips .chip{flex:none}
.talk .box.shake{animation:shake .4s}
@keyframes shake{20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
@media (max-width:860px){.talk{grid-template-columns:minmax(0,1fr);grid-template-areas:"plan" "ask" "vers"}
  .vers{border-left:0;border-top:1px solid var(--line);padding:14px 14px 18px;flex-direction:column-reverse;max-height:none}
  .vers li:nth-last-child(n+4){display:none}
  .talk .tp{max-height:none}}
@media (max-width:520px){.talk{border-radius:22px}}
@media (prefers-reduced-motion:reduce){.tp .mv,.tp .swap path,.kz{transition:none}}
.talk .box textarea{cursor:default;pointer-events:none;caret-color:transparent}
.talk .box:focus-within{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--fg) 8%,transparent),0 20px 50px -10px var(--shadow)}
.vers .v{grid-template-columns:22px 1fr auto}
.vers .rs{border:0;background:none;padding:2px 8px;margin:-2px -6px -2px 8px;border-radius:7px;font:500 12.5px var(--sans);color:var(--accent);cursor:pointer;opacity:0;transition:opacity .2s,background-color .2s}
.vers li:hover .rs,.vers .rs:focus-visible{opacity:1} .vers .rs:hover{background:color-mix(in srgb,var(--accent) 12%,transparent)}
@media (hover:none){.vers .rs{opacity:1}}
/* ---------- step inside: the sample block in 3D from its own drawings; drag the sun, pull the floors apart ---------- */
.inside{position:relative;margin:clamp(30px,5vh,52px) auto 0;width:min(1280px,100%);height:clamp(520px,calc(100svh - 240px),820px);border-radius:28px;overflow:hidden;background:var(--paper);
  box-shadow:inset 0 0 0 1px var(--line),0 30px 80px -30px var(--shadow)}
.inside canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y;cursor:grab}
.inside canvas.sun{cursor:ew-resize} .inside canvas.lift{cursor:ns-resize} .inside canvas.dragging{cursor:grabbing}
.inside .clock{position:absolute;left:clamp(20px,3vw,40px);right:auto;width:auto;max-width:none;text-align:left;top:clamp(18px,2.6vw,34px);margin:0;font:600 clamp(26px,2.6vw,34px)/1 var(--sans);letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:var(--fg);pointer-events:none}
.inside .clock small{font-size:.5em;font-weight:500;letter-spacing:-.01em;color:var(--fg2);margin-left:.25em}
@media (max-width:640px){.inside{height:min(130vw,640px);border-radius:22px}}

/* the walk: a quiet line of type, bottom left, over the scene */
.inside .walkb{position:absolute;left:clamp(20px,3vw,40px);bottom:clamp(18px,2.6vw,32px);z-index:3;display:inline-flex;align-items:center;gap:10px;border:0;padding:6px 0;background:none;
  font:600 clamp(17px,1.5vw,20px)/1 var(--sans);letter-spacing:-.02em;color:var(--fg);cursor:pointer;-webkit-tap-highlight-color:transparent}
.inside .walkb svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;transition:transform .35s var(--spring)}
.inside .walkb span{background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;padding-bottom:3px;transition:background-size .35s var(--quint)}
@media (hover:hover){.inside .walkb:hover span{background-size:100% 1.5px}.inside .walkb:hover svg{transform:translateX(3px)}}
.inside .walkb:active{opacity:.7}
.inside .walkb:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px}
.inside .walkb[aria-pressed="true"] svg{transform:rotate(180deg)}
.inside.walking .clock{opacity:0} .inside .clock{transition:opacity .4s}
.inside.walking canvas{cursor:grab}
/* ---------- your drawings too: a photo of a plan, traced under a sheet of tracing paper, then straightened ---------- */
.imp{position:relative;margin:clamp(30px,5vh,52px) auto 0;width:min(1280px,100%,calc(76svh*1.452));aspect-ratio:1.452;transition:background-color .4s;border-radius:28px;overflow:hidden;background:#2b2118;box-shadow:inset 0 0 0 1px var(--line),0 30px 80px -30px var(--shadow);cursor:ew-resize;touch-action:pan-y;user-select:none}
.imp > svg.iv{display:block;width:100%;height:100%;transition:opacity .28s} .imp.swap > svg.iv{opacity:0}
.imp .ph{transition:opacity .9s var(--quint)}
.imp .sheetbg{fill:var(--paper)}
.imp .ink{color:var(--ink)}
.imp .ink .w{fill:currentColor;stroke:none}
.imp .ink .dr{fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round}
.imp .ink .wn{fill:none;stroke:currentColor;stroke-width:1}
.imp .ink .fu{fill:none;stroke:currentColor;stroke-width:.8;opacity:.55}
.imp .lab text{fill:var(--ink);font:600 15px var(--sans);text-anchor:middle;letter-spacing:-.01em}
.imp .lab .sz{font:500 12.5px var(--mono);opacity:.7;fill:var(--ink);text-anchor:middle}
.imp .dims line{stroke:var(--ink);stroke-width:1;opacity:.55} .imp .dims text{fill:var(--ink);font:500 11.5px var(--mono);opacity:.75;text-anchor:middle}
.imp .edge{stroke:rgba(255,255,255,.9);stroke-width:2} 
@media (max-width:640px){.imp{border-radius:22px}.imp .lab text{font-size:22px}.imp .lab .sz{font-size:16px}.imp .dims text{font-size:16px}}
.imp .cad path{fill:none;stroke-width:1.4;stroke-linecap:round}
.impnext{display:flex;gap:4px;padding:5px;border-radius:14px;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px var(--line),0 10px 30px -12px var(--shadow);opacity:0;pointer-events:none;transition:opacity .35s,transform .5s var(--quint);cursor:default}
.imp .impnext{position:absolute;left:50%;bottom:clamp(14px,2.2vw,26px);transform:translate(-50%,14px)}
.imp.done .impnext{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.impnext button{border:0;background:none;padding:8px 14px;border-radius:10px;font:600 14px var(--sans);letter-spacing:-.01em;color:var(--fg2);white-space:nowrap;cursor:pointer;transition:background-color .2s,color .2s}
.impnext button:hover,.impnext button:focus-visible{color:var(--fg);background:color-mix(in srgb,var(--fg) 6%,transparent)}
.impnext button[aria-pressed="true"]{color:#fff;background:var(--accent)}
@media (max-width:520px){.impnext button{padding:7px 12px;font-size:13px}}
/* the plan's own structure and services, from Clairvyn's tools */
.imp .eng path,.imp .eng circle{fill:none}   /* widths in the view's own units (--u): a non-scaling stroke breaks the draw-on dash */
.imp .eng .ln{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s cubic-bezier(.65,0,.35,1)}
.imp .eng.on .ln{stroke-dashoffset:0}
.imp .eng .pt{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.3);transition:opacity .35s,transform .45s var(--spring)}
.imp .eng.on .pt{opacity:1;transform:none}
.imp .eng .col{fill:var(--accent);stroke:none}
.imp .eng .beam{stroke:var(--accent);stroke-width:calc(2.2px*var(--u,1));opacity:.75}
.imp .eng .foot{stroke:var(--accent);stroke-width:calc(1px*var(--u,1));opacity:.5}
.imp .eng .w{stroke:#2f80ed;stroke-width:calc(2.2px*var(--u,1))} .imp .eng path.e{stroke:#d99a00;stroke-width:calc(.9px*var(--u,1));opacity:.5} .imp .eng .m{stroke:#12a594;stroke-width:calc(2px*var(--u,1))} .imp .eng circle.e{stroke:#d99a00} .imp .eng circle.sm{opacity:.7}
.imp .eng circle.w,.imp .eng circle.e,.imp .eng circle.m{fill:var(--paper);stroke-width:calc(1.6px*var(--u,1))}
.imp .eng .bx{stroke-width:calc(1.4px*var(--u,1));fill:color-mix(in srgb,var(--paper) 70%,transparent)}
.imp.eng-on .ink .fu{opacity:.12} .imp.eng-on .ink{color:color-mix(in srgb,var(--ink) 55%,var(--paper))} .imp .ink{transition:color .4s} .imp .ink .fu{transition:opacity .4s}
/* a phone's window is too small to hold it: it sits under the window instead */
.impnext.under{width:max-content;margin:12px auto 0;transform:translateY(8px)} .impnext.under.on{opacity:1;transform:none;pointer-events:auto}
.impfmt{display:flex;justify-content:center;flex-wrap:wrap;gap:clamp(16px,2.4vw,34px);margin:18px auto 0}
.impfmt button{position:relative;border:0;background:none;padding:6px 0 10px;font:600 clamp(15px,1.4vw,17px) var(--sans);letter-spacing:-.02em;color:var(--fg3);cursor:pointer;transition:color .25s}
.impfmt button:hover{color:var(--fg2)} .impfmt button[aria-pressed="true"]{color:var(--fg)}
.impfmt button svg{position:absolute;left:-2px;bottom:0;width:calc(100% + 4px);height:8px;overflow:visible}
.impfmt button path{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:0;transition:stroke-dashoffset .6s var(--quint),opacity .2s}
.impfmt button[aria-pressed="true"] path{stroke-dashoffset:0;opacity:1}
.imp .ink .w{fill:currentColor} .imp .ink .dr{stroke-width:calc(1.3px*var(--u,1))} .imp .ink .wn{stroke-width:calc(1px*var(--u,1))} .imp .ink .fu{stroke-width:calc(.8px*var(--u,1))}
/* control anatomy, as the walk button and the site's buttons */
.impnext button{--ease:cubic-bezier(.215,.61,.355,1);transition:background-color .15s var(--ease),color .15s var(--ease),transform .15s var(--ease),box-shadow .15s var(--ease)}
.impnext button:hover{background:none} @media (hover:hover){.impnext button:not([aria-pressed="true"]):hover{color:var(--fg);background:color-mix(in srgb,var(--fg) 6%,transparent)}}
.impnext button:active{transform:scale(.98)}
.impnext button[aria-pressed="true"]{background:var(--accent);background-image:linear-gradient(rgba(255,255,255,.14),transparent 55%);box-shadow:inset 0 0 0 1px color-mix(in srgb,#000 12%,transparent),inset 0 -2px 0 rgba(0,0,0,.12)}
.impnext button:focus-visible,.impfmt button:focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 50%,transparent);outline-offset:3px;border-radius:10px}
.impfmt button{transition:color .15s cubic-bezier(.215,.61,.355,1),transform .15s cubic-bezier(.215,.61,.355,1)} .impfmt button:active{transform:scale(.98)}
.impfmt button:hover{color:var(--fg3)} @media (hover:hover){.impfmt button:hover{color:var(--fg2)}} .impfmt button[aria-pressed="true"]{color:var(--fg)}