:root{--red:#b3222c;--line:#e3e4e7;--soft:#62656b;font-family:Inter,"Segoe UI",Arial,sans-serif;color:#202226;background:#e8e9eb}body{background:#e8e9eb}button,select{border-radius:10px;min-height:44px;font-size:.875rem}button{transition:background .18s,box-shadow .18s,transform .18s}button:hover:not(:disabled){background:#f7f7f8;box-shadow:0 3px 12px #1920330d}button:active:not(:disabled){transform:translateY(1px)}button[aria-pressed=true]{background:#23262b;color:#fff;border-color:#23262b}header{height:84px;min-height:84px;padding:18px 32px;background:#fff;border:none;position:relative;z-index:10}.brand{font-size:1.55rem;letter-spacing:-.7px}.brand small{font-size:.625rem;letter-spacing:1.65px}.head-title{font-size:.875rem;font-weight:600}.head-title span{display:inline-block;padding-left:14px;margin-left:14px;border-left:1px solid #ddd;font-weight:400}.head-actions button{padding:10px 18px}.head-actions #save{background:#23262b;color:#fff;border-color:#23262b}main{display:grid;grid-template-columns:minmax(0,1fr) 326px;gap:0;min-height:calc(100dvh - 117px);padding-right:16px}.workspace{background:transparent;position:relative;top:auto;height:calc(100dvh - 117px);min-height:630px;display:flex;flex-direction:column;overflow:hidden}.stage-head{position:absolute;left:0;top:0;right:0;z-index:2;padding:30px 34px;pointer-events:none;align-items:flex-start}.stage-head button{pointer-events:auto;background:#ffffffa8;backdrop-filter:blur(16px);border-color:#fff9}.eyebrow{font-size:.75rem;letter-spacing:1.55px;color:#656970}.stage-head h1{font-size:clamp(1.5rem,2.2vw,2.15rem);font-weight:450;letter-spacing:-1.2px;margin:10px 0}.stage-instruction{font-size:.875rem;color:#5d6269;margin:9px 0}.stage-head #help{font-size:.8125rem;border-radius:50px}#viewport{height:auto;min-height:0;flex:1;overflow:hidden;background:#e8e9eb}.view-corner{left:32px;bottom:24px;gap:5px;font-size:.75rem}#render-info{display:none}.views{bottom:20px;right:28px;gap:2px;background:#ffffffb8;border:1px solid #ffffffd9;padding:4px;border-radius:13px;backdrop-filter:blur(14px);box-shadow:0 8px 28px #222a3610}.views button{border:0;background:transparent;font-size:.8125rem;min-height:36px;padding:7px 12px}.views button:hover{background:white}.tools{padding:12px 30px 4px;justify-content:space-between;gap:9px}.tool-group{gap:4px}.tools button{background:#ffffffc9;border-color:transparent;font-size:.8125rem;padding:10px 13px}.tools button[aria-pressed=true]{background:#25282d;color:white;box-shadow:0 4px 14px #1d253323}.tools #undo,.tools #redo{background:transparent}.tools #shot{background:#ffffff80}#message{min-height:36px;padding:8px 32px;font-size:.8125rem;line-height:1.45}.measurements{padding:15px 32px 20px;border-top:1px solid #d9dcdf;gap:35px}.measurements span{font-size:.75rem;letter-spacing:.2px}.measurements strong{font-size:1.2rem;font-weight:500}.measurements p{font-size:.75rem}.measurements div{gap:5px}aside{background:#ffffffed;border:1px solid white;border-radius:20px;margin:20px 0;max-height:calc(100dvh - 157px);min-height:590px;padding:22px;overflow:auto;box-shadow:0 12px 45px #26314c0b;scrollbar-width:thin;scrollbar-color:#d6d8dc transparent}.aside-title{display:flex;align-items:center;justify-content:space-between;padding-bottom:14px}.aside-title h2{font-size:1.3rem;font-weight:550;letter-spacing:-.5px;margin-top:8px;line-height:1.3}.aside-title .eyebrow{font-size:.75rem}#deselect{border:0;background:#f0f1f3;border-radius:50%;font-size:1.3rem;width:34px;min-height:34px;padding:0;flex-shrink:0}#selection-empty{padding:8px 0 20px}#selection-empty h3{font-size:1rem;font-weight:550;margin:18px 0 8px}#selection-empty p{font-size:.875rem;color:#60656c;line-height:1.65;margin:0 0 15px}.selection-symbol{display:grid;place-content:center;width:50px;height:50px;border:1px solid #e3e5e9;border-radius:15px;background:linear-gradient(145deg,#f8f9fa,#eceef1);font-size:1.9rem;color:#b3222c}#selection-location{background:#f4f5f6;color:#686e76;font-size:.8125rem;padding:9px 12px;border-radius:8px;margin-bottom:4px}label{font-size:.875rem;color:#4d535b;margin:16px 0 7px}.row{gap:9px}select{background:#fafbfc;border-color:#e4e6e9;padding:10px 8px;letter-spacing:-.2px}.section-label{margin-top:14px}.check{font-size:.8125rem;gap:4px}.section-label .subtle{font-size:.75rem}#palette{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:5px}.swatch{border-radius:9px;width:100%;height:37px;min-height:37px;border:3px solid white;outline:1px solid #e4e5e7;box-shadow:inset 0 0 0 1px #0000000b}.swatch[aria-pressed=true]{outline:2px solid #23262b;box-shadow:0 3px 9px #2222}#color-name{font-size:.8125rem;margin-top:11px}.subtle,.local-note{font-size:.8125rem;line-height:1.6}.add-grid button{padding:9px 5px}#remove{font-size:.8125rem;border:none;background:transparent}.wide{margin-top:10px}#open-door{background:#24272c;color:white;border-color:#24272c}.local-note{border-top:1px solid var(--line);padding-top:16px;margin-bottom:0;color:#737982}details{margin-top:16px;padding-top:15px}summary{font-size:.875rem;font-weight:500;min-height:28px}footer{background:#e8e9eb;border-top:1px solid #dce0e3;padding:9px 30px;font-size:.75rem;min-height:33px}#context-actions{position:absolute;z-index:4;transform:translateX(-50%);display:flex;align-items:center;gap:5px;background:#fffefcf0;border:1px solid #fff;padding:5px;border-radius:11px;box-shadow:0 8px 35px #17233525;backdrop-filter:blur(18px);white-space:nowrap}#context-title{font-size:.8125rem;padding:0 9px;font-weight:600}#context-actions button{min-height:33px;padding:6px 11px;border:0;background:#f0f1f3;font-size:.8125rem}#context-actions #context-add{background:#b3222c;color:white}#hover-label{position:absolute;z-index:3;background:#272b30eb;color:white;padding:9px 12px;font-size:.75rem;border-radius:8px;pointer-events:none;box-shadow:0 6px 20px #1112}#context-actions[hidden],#hover-label[hidden],[hidden]{display:none!important}dialog{border:0;box-shadow:0 25px 100px #1113;border-radius:20px}dialog p{font-size:1rem}canvas:focus-visible{outline:2px solid #b3222c;outline-offset:-4px}#loading{font-size:.875rem;background:#e8e9eb;z-index:8}
@media(min-width:1700px){main{grid-template-columns:minmax(0,1fr) 355px;padding-right:22px}aside{padding:25px}#viewport{height:auto}.stage-head{padding:40px 48px}.tools{padding-left:46px}.measurements,#message{padding-left:48px}}
@media(max-width:1100px){main{display:block;padding:0}.workspace{min-height:590px;height:calc(100dvh - 84px);max-height:900px}.stage-head{padding:25px 28px}.stage-head h1{font-size:1.8rem}aside{border-radius:20px;margin:0 20px 20px;max-height:none;min-height:0;display:block;padding:24px}#selection-empty{padding:0 0 16px}.selection-symbol{float:left;margin-right:18px}#selection-empty h3{margin-top:0}#selection-empty .subtle{display:none}#cell-controls{display:grid;grid-template-columns:1fr 1fr;column-gap:24px}#cell-controls>*{min-width:0}#selection-location,.section-label,#palette,#color-name{grid-column:1 / -1}#palette{display:flex;gap:12px}.swatch{width:45px;height:40px}.aside-title{padding-bottom:12px}#remove{align-self:end}aside details{display:block}.head-title{display:none}.measurements p{display:block}.tools{padding:10px 26px 3px}footer{padding:12px 26px}}
@media(max-width:600px){header{height:auto;min-height:76px;padding:18px;gap:12px;flex-wrap:wrap}.brand{font-size:1.3rem}.brand small{font-size:.6rem;letter-spacing:1.1px}.head-actions{gap:6px;width:auto}.head-actions button{font-size:.75rem;padding:9px 11px;min-height:38px}.head-actions #load{display:block}.workspace{height:650px;min-height:590px;max-height:calc(100dvh + 80px)}.stage-head{padding:24px 20px}.stage-head h1{font-size:1.5rem;letter-spacing:-.7px}.stage-instruction{font-size:.8125rem}.stage-head .eyebrow{font-size:.75rem;letter-spacing:1px}#viewport{height:auto;min-height:325px}.views{right:14px;bottom:12px}.view-corner{left:18px;bottom:22px;font-size:.7rem;max-width:140px}.tools{padding:10px 16px 2px;gap:8px}.tools button{padding:9px 11px;font-size:.75rem;min-height:38px}#message{font-size:.75rem;padding:7px 18px;min-height:38px}.measurements{padding:13px 19px 17px;gap:15px;justify-content:space-between}.measurements p{display:none}.measurements strong{font-size:1.05rem}.measurements span{font-size:.75rem}aside{margin:0 12px 16px;padding:20px;border-radius:18px}#cell-controls{display:block}#palette{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.swatch{width:100%;height:40px}#hover-label{display:none}footer{padding:12px 20px;line-height:1.5}.row{gap:12px}#context-actions{max-width:calc(100% - 24px)}#context-actions button{font-size:.75rem}#context-title{font-size:.75rem;padding:0 6px}}
@media(prefers-reduced-motion:reduce){button{transition:none}}

#context-edit{display:none}@media(max-width:1100px){#context-edit{display:block}}@media(max-width:600px){.head-actions{width:100%}.head-actions button{flex:1;white-space:nowrap}#context-actions{gap:3px}#context-actions button{padding:6px 8px}}