.families button{min-width:0;overflow-wrap:normal;line-height:1.25}.families button:nth-child(n+4){grid-column:span 1}
:root{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#29342e;background:#fafbf9;font-synthesis:none;--ink:#29342e;--muted:#5f6b63;--line:#dbe0da;--accent:#354f40}*{box-sizing:border-box}body{margin:0}button,input,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:disabled{opacity:.5;cursor:not-allowed}button:focus-visible,a:focus-visible,input:focus-visible,#viewport:focus-visible{outline:3px solid #55765d;outline-offset:5px}::selection{background:#b9cebc;color:#1e3225}header{height:84px;display:flex;justify-content:space-between;align-items:center;padding:0 4%;border-bottom:1px solid var(--line)}.wordmark{display:flex;align-items:center;gap:11px;font-size:20px;font-weight:600;text-decoration:none;color:inherit;letter-spacing:-.6px}.wordmark svg{width:27px;height:31px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round}.header-note{font-size:13px;color:var(--muted)}main{display:grid;grid-template-columns:minmax(0,1fr) 380px;min-height:calc(100svh - 84px);max-width:1800px;margin:auto}.stage{position:relative;background:#e9ede9;min-height:760px;overflow:hidden}.stage-title{position:absolute;top:36px;left:5.5%;z-index:1;pointer-events:none}h1{font-size:clamp(28px,3vw,44px);font-weight:450;letter-spacing:-1.4px;line-height:1.1;margin:0 0 12px}p{margin:0}.stage-title p{font-size:14px;color:var(--muted)}#viewport{position:absolute;inset:100px 0 66px;touch-action:none}canvas{display:block;width:100%;height:100%;touch-action:none}#loading{position:absolute;top:45%;width:100%;text-align:center;padding:24px;color:var(--muted);line-height:1.6}.stage-footer{position:absolute;bottom:27px;left:5.5%;right:5.5%;display:flex;align-items:center;justify-content:space-between;font-size:12px;color:#56625a;gap:8px}#light{display:flex;gap:6px;align-items:center;border:1px solid #bdc8be;background:transparent;padding:10px 13px;min-height:44px;border-radius:24px;font-size:13px}#light[aria-pressed=true]{background:#fafbf6}svg{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}#light svg,.primary svg{width:19px;height:19px}aside{padding:35px 30px 24px;display:flex;flex-direction:column;gap:29px;background:#fafbf9}.panel-heading{display:flex;justify-content:space-between;align-items:center}h2{font-size:23px;font-weight:500;letter-spacing:-.7px;margin:0}.quiet{background:none;border:0;padding:10px 0 10px 12px;color:var(--muted);font-size:13px;text-decoration:underline;text-underline-offset:4px;min-height:44px}fieldset{border:0;padding:0;margin:0;min-width:0}legend{font-size:14px;font-weight:550;margin-bottom:15px;width:100%;display:flex;justify-content:space-between}legend span{font-weight:400;color:var(--muted);font-size:13px}.families{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.families button{border:1px solid var(--line);border-radius:7px;background:transparent;padding:10px 4px 12px;display:grid;justify-items:center;gap:5px;font-size:12px;min-height:92px}.families svg{width:58px;height:45px;stroke-width:1.2}.families button[aria-pressed=true]{background:#e8eee7;border-color:#647d68;box-shadow:inset 0 0 0 1px #647d68}.families button:hover{background:#eef2ec}.proportions label{display:flex;justify-content:space-between;font-size:14px;margin:8px 0 2px}.proportions output{font-size:13px;font-variant-numeric:tabular-nums;color:var(--muted)}input[type=range]{display:block;width:100%;height:30px;margin:0 0 11px;accent-color:var(--accent);cursor:pointer;background:transparent}input[type=range]::-webkit-slider-runnable-track{height:3px;background:#cbd4ca;border-radius:3px}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;margin-top:-6px}input[type=range]{-webkit-appearance:none}input[type=range]::-webkit-slider-thumb{width:16px;height:16px;border-radius:50%;background:var(--accent);border:3px solid #fafbf9;box-shadow:0 0 0 1px var(--accent)}.range-ends{display:flex;justify-content:space-between;color:var(--muted);font-size:11px;margin-top:-9px}.colours{display:flex;gap:15px}.colours button{width:44px;height:44px;border-radius:50%;background:var(--swatch);border:5px solid #fafbf9;box-shadow:0 0 0 1px #d9dfd8}.colours button[aria-pressed=true]{box-shadow:0 0 0 2px var(--accent)}.colours button:hover{outline:1px solid #829785;outline-offset:3px}.save-area{margin-top:auto}.primary{width:100%;display:flex;align-items:center;justify-content:space-between;min-height:51px;border:1px solid var(--accent);border-radius:6px;background:var(--accent);color:white;font-size:14px;padding:0 17px}.primary:hover{background:#243c2d}.save-area p{text-align:center;font-size:11px;color:var(--muted);padding-top:12px}.disclaimer{font-size:11px;color:var(--muted);line-height:1.6;border-top:1px solid var(--line);padding-top:18px}body{scrollbar-color:#98aa9b #edf1eb}button{transition:background .16s ease-out} @media(min-width:1500px){aside{padding:40px}.stage-title{top:45px}main{grid-template-columns:minmax(0,1fr) 420px}}@media(max-width:760px){header{height:66px;padding:0 22px}.wordmark{font-size:18px}.header-note{display:none}main{display:flex;flex-direction:column}.stage{min-height:490px;height:57svh;max-height:600px}.stage-title{top:24px;left:24px}h1{font-size:30px;letter-spacing:-1px;margin-bottom:7px}.stage-title p{font-size:12px}#viewport{inset:78px 0 53px}.stage-footer{bottom:15px;left:24px;right:24px;font-size:11px}.desktop-hint{display:none}#light{padding:8px 11px;font-size:12px}aside{padding:25px 24px 24px;gap:26px}.panel-heading{margin-bottom:-7px}h2{font-size:24px}.families button{min-height:93px}.colours{gap:19px}.proportions label{margin-top:10px}input[type=range]{height:36px}.save-area{margin-top:4px}.disclaimer{font-size:11px}.primary{min-height:54px}}@media(prefers-reduced-motion:reduce){button{transition:none}}

.stage-footer{flex-wrap:wrap;row-gap:12px}.setting-controls{width:100%}@media(min-width:761px){.stage[data-environment=desk] #viewport{top:124px}}.setting-controls #scale-note{margin-left:auto;margin-right:0;font-size:11px}.stage #viewport{bottom:168px}@media(max-width:760px){.stage{min-height:590px!important}.stage #viewport{bottom:180px}}#viewport{bottom:112px}.room-controls{display:flex;align-items:center;gap:4px}.room-controls>span{margin-right:6px}.room-controls button{min-height:44px;padding:8px 13px;border:1px solid #bdc8be;background:transparent;border-radius:6px;font-size:13px}.room-controls button[aria-pressed=true]{background:#fafbf6;border-color:#647d68}.room-controls button[aria-pressed=false]:hover{background:#d8e2d8}.room-controls button{transition:none}.room-controls button[aria-pressed=true]{font-weight:600}.preview-notes{width:100%;display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:11px}.stage[data-room=night]{background:#202d27;color:#e9ede9}.stage[data-room=night] .stage-title p,.stage[data-room=night] .stage-footer,.stage[data-room=night] #loading{color:#c2cfc5}.stage[data-room=night] button{border-color:#708779}.stage[data-room=night] button[aria-pressed=true]{background:#dbe5d9;color:#243b2c}.stage[data-room=night] button[aria-pressed=false]:hover{background:#405448;color:#fff}.stage[data-room=night] :focus-visible{outline-color:#c0d4bd}@media(max-width:760px){.stage{min-height:530px}#viewport{bottom:120px}.preview-notes{flex-direction:column;gap:5px}.room-controls button{padding:8px 10px}}

.stage[data-room=night] #light[aria-pressed=true]{background:#dbe5d9;color:#243b2c}.stage[data-room=night] #light:hover{background:#405448;color:#fff}
header{gap:12px}.brand-copy{display:flex;flex-direction:column;gap:3px}.brand-byline{font-size:12px;font-weight:400;letter-spacing:0;line-height:1.3;color:var(--muted)}.header-note{text-align:right;line-height:1.4}@media(max-width:760px){header .header-note{display:block;font-size:11px;max-width:100px}.wordmark svg{flex-shrink:0}.brand-byline{white-space:nowrap}}