:root { --ink:#142b2d; --muted:#708083; --line:#dfe6e4; --paper:#f7f8f5; --mint:#c9e8d8; --mint-deep:#5f9f87; --blue:#a9d9df; --door:#f0b758; --coral:#e9755b; }
* { box-sizing:border-box; } body { margin:0; color:var(--ink); background:var(--paper); font-family:Manrope,Arial,sans-serif; } .app-shell { max-width:1240px; padding:0 28px 60px; margin:auto; } .site-header { height:88px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); } .brand { color:var(--ink); text-decoration:none; font-size:20px; font-weight:800; letter-spacing:-1px; display:flex; align-items:center; gap:8px; }.brand-mark { display:grid; place-items:center; width:27px; height:27px; background:var(--ink); color:#fff; font-family:Georgia,serif; font-size:16px; border-radius:8px 8px 8px 1px; }.header-note { color:var(--muted); font:11px 'DM Mono',monospace; letter-spacing:.03em; display:flex; align-items:center; gap:7px; }.header-note span { width:7px; height:7px; border-radius:50%; background:#6dc996; }.hero { padding:65px 0 55px; display:flex; justify-content:space-between; align-items:end; gap:30px; }.eyebrow { font:500 11px 'DM Mono',monospace; color:var(--mint-deep); letter-spacing:.12em; margin:0 0 13px; }.hero h1 { font-size:clamp(42px,6vw,72px); line-height:1.04; letter-spacing:-.065em; margin:0; }.hero h1 em { font-family:Georgia,serif; font-weight:400; color:var(--mint-deep); }.hero-copy { max-width:320px; color:var(--muted); line-height:1.7; font-size:14px; margin:0 10px 8px 0; }.planner { display:grid; grid-template-columns:1.13fr .87fr; align-items:stretch; border:1px solid var(--line); border-radius:16px; background:#fff; overflow:hidden; box-shadow:0 12px 45px #1835360a; }.measurement-form { padding:32px; }.form-heading,.result-header { display:flex; align-items:center; gap:13px; }.step-number { display:grid; place-items:center; border-radius:50%; width:31px; height:31px; background:var(--mint); font:500 11px 'DM Mono',monospace; }.form-heading h2 { margin:0; letter-spacing:-.04em; font-size:20px; }.form-heading p { margin:3px 0 0; font-size:12px; color:var(--muted); } fieldset { border:0; padding:0; margin:28px 0 0; } legend { font:500 10px 'DM Mono',monospace; color:var(--mint-deep); letter-spacing:.11em; margin-bottom:12px; }.field-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }.two-columns { max-width:calc(50% - 6px); } label { font-size:11px; font-weight:700; color:#536467; }.input-wrap { margin-top:6px; height:43px; border:1px solid var(--line); border-radius:7px; display:flex; align-items:center; background:#fbfcfb; transition:.2s; }.input-wrap:focus-within { border-color:var(--mint-deep); box-shadow:0 0 0 3px #c9e8d852; } input { width:100%; border:0; outline:0; padding:0 8px 0 12px; background:transparent; color:var(--ink); font:500 14px 'DM Mono',monospace; min-width:0; } .input-wrap small { padding-right:10px; color:#a0acab; font:10px 'DM Mono',monospace; }.waste-row { display:flex; justify-content:space-between; align-items:center; margin:25px 0 22px; padding:14px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }.waste-row strong,.waste-row span { display:block; }.waste-row strong { font-size:12px; }.waste-row span { margin-top:3px; color:var(--muted); font-size:10px; }.waste-control { height:31px; display:flex; align-items:center; border-radius:6px; background:#eef5f0; width:74px; }.waste-control input { text-align:right; padding-right:4px; }.waste-control b { padding-right:10px; font:500 11px 'DM Mono',monospace; color:var(--mint-deep); }.measurement-form button { border:0; background:var(--ink); color:#fff; width:100%; padding:15px; border-radius:7px; cursor:pointer; font:700 13px Manrope,sans-serif; transition:transform .2s,background .2s; }.measurement-form button:hover { transform:translateY(-2px); background:#24494b; }.measurement-form button span { margin-left:10px; font-size:18px; vertical-align:-1px; }.results { padding:32px; background:#143437; color:#fff; }.result-header { font:500 10px 'DM Mono',monospace; letter-spacing:.1em; }.results .step-number { color:var(--ink); }.result-header p { margin:0; color:#b7d4ca; }.status { margin-left:auto; padding:5px 7px; background:#4d92787a; border-radius:3px; color:#c9e8d8; font-size:9px; }.result-cards { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:30px; }.result-card { min-height:178px; padding:15px; border-radius:9px; color:var(--ink); }.floor-card { background:var(--mint); }.wall-card { background:var(--blue); }.card-icon { font-size:21px; height:31px; }.result-card p { font-size:11px; font-weight:700; margin:0; }.result-card strong { display:block; margin:7px 0 0; font:500 42px/1 'DM Mono',monospace; letter-spacing:-.08em; }.result-card > span { font-size:10px; }.result-card small { display:block; margin-top:14px; color:#446158; font-size:9px; line-height:1.35; }.wall-card small { color:#416b70; }.summary-line { display:flex; justify-content:space-between; align-items:baseline; padding:21px 0 14px; border-bottom:1px solid #ffffff2c; margin-top:8px; font-size:11px; color:#bdd0cd; }.summary-line strong { font:500 17px 'DM Mono',monospace; color:#fff; }.result-footnote { margin:15px 0 0; font-size:10px; line-height:1.55; color:#91aaa8; }.visual-section { margin-top:80px; }.section-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:24px; }.section-heading h2 { margin:0; font-size:31px; letter-spacing:-.05em; }.legend { display:flex; gap:17px; color:var(--muted); font-size:10px; }.legend span { display:flex; align-items:center; gap:5px; }.legend i { width:9px; height:9px; display:inline-block; border-radius:2px; }.floor-dot { background:var(--mint); }.wall-dot { background:var(--blue); }.door-dot { background:var(--door); }.blueprint { display:grid; grid-template-columns:1fr 1.13fr; gap:16px; }.plan-panel { min-width:0; background:#fff; border:1px solid var(--line); border-radius:12px; padding:20px; }.panel-label { display:flex; justify-content:space-between; font:500 10px 'DM Mono',monospace; letter-spacing:.08em; color:var(--muted); }.panel-label b { color:var(--mint-deep); font-weight:500; }.floor-layout { position:relative; width:70%; max-width:280px; aspect-ratio: .8; margin:40px auto 22px; }.tile-grid { display:grid; overflow:hidden; background:#fff; border:2px solid var(--ink); }.floor-grid { width:100%; height:100%; }.tile { display:block; border-right:1px solid #46766d42; border-bottom:1px solid #46766d42; min-height:1px; }.floor-tile { background:var(--mint); }.dimension { position:absolute; font:9px 'DM Mono',monospace; color:var(--muted); white-space:nowrap; }.top-dim { top:-22px; left:50%; transform:translateX(-50%); }.side-dim { right:-45px; top:50%; transform:translateY(-50%) rotate(90deg); }.walls-plan { display:flex; flex-direction:column; }.wall-layout { display:grid; grid-template-columns:1fr 1fr; gap:22px 16px; padding-top:29px; flex:1; }.wall-elevation { min-width:0; }.wall-elevation p { margin:0 0 6px; display:flex; justify-content:space-between; font:9px 'DM Mono',monospace; color:var(--muted); }.wall-elevation p b { color:var(--mint-deep); font-weight:500; }.wall-grid { position:relative; height:105px; }.wall-tile { background:var(--blue); border-color:#39737a46; }.door-cutout { background:var(--door); }.door-label { position:absolute; bottom:4px; left:50%; translate:-50%; font:8px 'DM Mono',monospace; letter-spacing:.05em; color:#75531e; } footer { padding:23px; text-align:center; border-top:1px solid var(--line); color:var(--muted); font:10px 'DM Mono',monospace; } footer span { color:var(--mint-deep); padding:0 7px; }
@media (max-width:780px) { .app-shell { padding:0 16px 40px; }.site-header { height:70px; }.header-note { display:none; }.hero { padding:42px 0; display:block; }.hero-copy { margin:20px 0 0; }.planner,.blueprint { grid-template-columns:1fr; }.results { min-height:400px; }.visual-section { margin-top:55px; }.section-heading { align-items:flex-start; gap:17px; flex-direction:column; }.two-columns { max-width:none; }.floor-layout { width:55%; } }
@media (max-width:410px) { .measurement-form,.results { padding:23px; }.field-grid { gap:9px; }.result-cards { gap:8px; }.result-card { padding:12px; }.result-card strong { font-size:35px; }.legend { gap:10px; flex-wrap:wrap; }.wall-layout { gap:18px 10px; }.wall-grid { height:85px; } }