@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{font-family:'DM Sans',sans-serif;color:#e7e9dd;background:#171c19;font-synthesis:none;--muted:#929d92;--line:#354037;--accent:#c8dc9c}*{box-sizing:border-box}body{margin:0}button,select,input{font:inherit}button,select{color:inherit;background:#263028;border:1px solid var(--line);border-radius:7px;cursor:pointer}button{padding:9px 12px;transition:background .16s,transform .16s}button:hover{background:#39483b}button:active{transform:translateY(1px)}button:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}button:disabled{opacity:.35;cursor:default}header{height:78px;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 30px;gap:30px}.brand{display:flex;align-items:center;gap:5px;font-family:Manrope,sans-serif;font-size:25px;font-weight:800;text-decoration:none;color:#e7e9dd;letter-spacing:-1.2px}.brand>span:last-child{font-weight:400;color:#aab7a5}.mark{font-size:39px;color:var(--accent);margin-right:10px}.tag,.eyebrow,.section-title,.canvas-note{font-size:10px;letter-spacing:1.8px;font-weight:600}.tag{color:var(--muted)}.header-actions{margin-left:auto;display:flex;gap:8px}.header-actions button{background:transparent;font-size:12px}main{display:grid;grid-template-columns:285px 1fr;min-height:calc(100vh - 78px)}aside{padding:28px 24px;border-right:1px solid var(--line);background:#1d251f}.section-title{color:#a5b29c;display:flex;justify-content:space-between;margin:26px 0 15px}.section-title:first-child{margin-top:0}h1{font-family:Manrope,sans-serif;font-size:24px;line-height:1.35;letter-spacing:-.9px;font-weight:500;margin:20px 0 24px}label{font-size:12px;color:#bac3b5}aside>label{display:block;margin-bottom:8px}select{width:100%;padding:11px 8px;font-size:12px}#palette{display:flex;flex-wrap:wrap;gap:10px}.swatch{width:31px;height:31px;border-radius:50%;padding:0;border:3px solid transparent;box-shadow:0 0 0 1px #ffffff10}.swatch.selected{outline:2px solid #dbe6c9;outline-offset:3px}.color-add{display:flex;align-items:center;gap:9px;margin-top:16px}.color-add button{font-size:11px;border:0;background:none;padding:5px;color:var(--muted)}input[type=color]{width:27px;height:27px;padding:0;border:0;background:transparent;cursor:pointer}.tile-editor{position:relative;background:#172019;border:1px solid var(--line);border-radius:10px;height:153px;overflow:hidden}#editor{height:100%;width:100%}#editor polygon{cursor:pointer;transition:filter .12s}#editor polygon:hover{filter:brightness(1.25)}#rotateDraft{position:absolute;right:9px;bottom:9px;font-size:18px;background:transparent;padding:3px 8px}.hint{font-size:10px;color:var(--muted);line-height:1.8}.primary{width:100%;background:var(--accent);color:#26311f;font-size:12px;font-weight:700;border:0;margin-top:3px}.primary:hover{background:#dfecbf}#tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.tile{padding:4px;background:#172019;border-radius:7px;position:relative;aspect-ratio:1}.tile.selected{border-color:#d2e2b5;background:#354133}.tile svg{width:100%;height:100%;display:block}.tile small{position:absolute;bottom:2px;right:4px;font-size:8px;background:#172019bb;padding:1px 3px;border-radius:3px}.subtle{padding:0;border:0;background:transparent;font-size:10px;color:#a9b29f}.workspace{padding:32px 36px 20px;min-width:0}.workspace-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:27px}.eyebrow{color:#a5b29c}h2{font-family:Manrope,sans-serif;font-size:30px;letter-spacing:-1px;font-weight:500;margin:9px 0 0}.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);margin:0 0 5px 12px}.stats{display:flex;gap:10px;align-items:center}.stats strong{font-size:28px;font-weight:400}.stats span{font-size:10px;color:var(--muted);width:45px;line-height:1.6}.toolbar{display:flex;align-items:center;gap:14px;margin-bottom:15px;flex-wrap:wrap}.tools{display:flex;flex-wrap:wrap;max-width:100%;gap:3px;padding:3px;background:#202922;border:1px solid var(--line);border-radius:8px}.tools button{font-size:11px;border:0;background:none;padding:8px 12px}.tools button.active{background:#c8dc9c;color:#26311f}.toggle{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:11px}.toggle input{accent-color:var(--accent)}.stage{height:clamp(420px,64vh,820px);position:relative;background:#111b16;border:1px solid #3d4a3d;border-radius:12px;overflow:hidden;box-shadow:0 20px 55px #0002}canvas{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair}.canvas-note{position:absolute;left:23px;top:21px;pointer-events:none;color:#879780;font-size:9px}.zoom{position:absolute;right:18px;bottom:18px;display:flex;align-items:center;gap:10px;background:#1c2821;border:1px solid #40513e;border-radius:8px;padding:3px}.zoom button{border:0;background:none;padding:5px 8px}.zoom span{font-size:10px;min-width:34px;text-align:center}.bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 0;border-bottom:1px solid var(--line);font-size:11px;color:#b5c2aa}.bottom button{font-size:10px;background:none;border:0;color:var(--muted);white-space:nowrap}.footnote{display:flex;justify-content:space-between;gap:12px;font-size:9px;color:#84917f;padding-top:14px;line-height:1.8}.footnote i{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--accent);margin-right:6px}#exitClean{display:none;position:absolute;top:18px;right:18px;opacity:.25}#exitClean:hover{opacity:1}body.clean header,body.clean aside,body.clean .workspace-top,body.clean .toolbar,body.clean .bottom,body.clean .footnote,body.clean .canvas-note,body.clean .zoom{display:none}body.clean main{display:block}body.clean .workspace{padding:0}body.clean .stage{height:100vh;border:0;border-radius:0}body.clean #exitClean{display:block}@media(max-width:1050px){.tag{display:none}.workspace{padding:24px 20px}.footnote{flex-direction:column}.toggle{margin-left:0}}@media(max-width:720px){header{padding:0 16px;height:auto;min-height:70px;flex-wrap:wrap;gap:10px;padding-block:12px}.header-actions{gap:4px}.header-actions button{padding:6px;font-size:10px}main{grid-template-columns:210px 1fr}aside{padding:20px 14px}h1{font-size:20px}.workspace{padding:20px 12px}h2{font-size:22px}.stats{display:none}.toolbar{gap:6px}.tools button{padding:8px}.stage{height:65vh;min-height:380px}.bottom{align-items:flex-start;flex-direction:column;gap:7px}#tiles{grid-template-columns:repeat(3,1fr)}}@media(max-width:500px){main{display:flex;flex-direction:column}.workspace{order:-1}.stage{height:55vh}aside{border-right:0;border-top:1px solid var(--line);display:block}#tiles{grid-template-columns:repeat(6,1fr)}.tile-editor{max-width:260px}.footnote{display:none}.workspace-top{margin-bottom:16px}h1{display:none}}

.solution-count{color:#dbe9b9;white-space:nowrap;border:1px solid #43523b;border-radius:6px;padding:7px 10px}.bottom{flex-wrap:wrap;justify-content:flex-start}
#solverEngine{width:auto;min-width:145px;margin:0;padding:7px 10px;font-size:12px}

.transition-panel{margin-top:14px;padding:12px;border:1px solid var(--line);border-radius:8px}
.transition-panel summary{cursor:pointer;color:var(--accent);font-size:12px}
.transition-panel label{display:block;margin-top:14px}
.transition-panel button{width:100%}
#transitionPreview{width:100%;height:auto;min-height:100px;background:#111b16;border-radius:6px;margin-top:10px}
.transition-panel button+button{margin-top:6px}

.transition-panel input[type=number]{width:100%;padding:11px 8px;color:inherit;background:#263028;border:1px solid var(--line);border-radius:7px;font-size:12px}
.transition-panel input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* Generalized catalog: separate view, immutable associated atoms. */
[hidden]{display:none!important}
.tileset-tabs{display:flex;gap:6px;margin:24px 0 12px}
.tileset-tabs button{flex:1;min-width:0;padding:9px 6px;font-size:12px}
.tileset-tabs #generalizedTab{flex:1.4}
.tileset-tabs [aria-pressed="true"]{background:#c8dc9c;color:#172019}
#generalizedTilesPanel h2{font-size:20px}
#generalizedTilesPanel input[type="text"]{width:100%;box-sizing:border-box;margin:6px 0 12px;padding:9px;color:inherit;background:#172019;border:1px solid var(--line);border-radius:7px}
#generalizedColor{display:block;margin:8px 0 14px}
#createGeneralized{width:100%;white-space:normal}
.generalized-card{border-top:1px solid #ffffff24;padding:16px 0}
.generalized-card h3{margin:0 0 12px;overflow-wrap:anywhere}
.generalized-card .check-row{display:flex;align-items:center;gap:8px}
.generalized-card .check-row input{margin:0;accent-color:var(--accent)}
.generalized-card>svg{display:block;width:100%;height:140px;background:#111b16;border-radius:8px;margin-bottom:12px}
.generalized-card summary{font-size:12px;cursor:pointer;margin:12px 0}
.generalized-atoms{display:grid;gap:6px;max-height:240px;overflow:auto;margin:12px 0}
.generalized-atoms span{display:inline-block;min-width:24px;padding:3px;text-align:center;color:#fff;text-shadow:0 1px 2px #000,0 -1px 2px #000;border:1px solid #172019}
#solverTilesetLabel{display:block;font-weight:normal;font-size:11px;margin-top:5px}
/* Editor hierarchy: materials, drawing tools, solver, then region transitions. */
main{grid-template-columns:280px minmax(0,1fr)}
aside{padding:24px 20px}
aside h1{font-size:19px;margin:12px 0 20px}
.workspace{padding:26px 30px 22px}
.workspace-top{margin-bottom:20px}
.toolbar{gap:8px;margin-bottom:12px}
.tools button{padding:8px 10px}
.hint{font-size:12px;line-height:1.65}
.section-title{letter-spacing:1.2px}
input[type=checkbox]{accent-color:var(--accent);width:15px;height:15px;flex-shrink:0}
input:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.solver-bar{display:flex;align-items:center;flex-wrap:wrap;gap:10px;padding:12px 0 16px;border-top:1px solid var(--line)}
.bar-label{font-size:12px;color:#bac3b5;margin-right:4px}
.solver-tools{background:transparent;border:0;padding:0;gap:5px}
.solver-tools button{background:#263028;border:1px solid var(--line)}
.solver-tools #solveRegion{color:var(--accent)}
#solverEngine{font-size:11px;min-width:130px}
.stage{height:clamp(380px,58vh,760px)}
.transition-panel{margin-top:20px;padding:0;background:#1d251f;border-radius:12px}
.transition-panel>summary{padding:18px 20px;font-size:14px;font-weight:600}
.transition-panel>summary span{font-weight:400;color:var(--muted);font-size:12px;margin-left:8px}
.transition-panel[open]>summary{border-bottom:1px solid var(--line)}
.transition-layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:24px;padding:20px}
.transition-settings>.hint{margin:0 0 18px}
.transition-panel fieldset{min-width:0;margin:0 0 18px;padding:16px;border:1px solid var(--line);border-radius:8px}
.transition-panel legend{padding:0 6px;font-size:12px;font-weight:600;color:#dbe6c9}
.field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.transition-panel label{margin:0 0 7px;font-size:12px}
.transition-panel .check-row{display:flex;align-items:flex-start;gap:9px;line-height:1.5}
.check-row input{margin:2px 0 0}
.transition-panel .hint{margin:10px 0 0}
.transition-panel select,.transition-panel input[type=number]{min-width:0;padding:10px;font-size:12px}
.advanced-settings{border:1px solid var(--line);border-radius:8px;margin-bottom:18px}
.advanced-settings>summary{padding:13px;font-size:12px;color:#bac3b5}
.advanced-content{padding:0 14px 14px}
.advanced-content .check-row{margin-bottom:12px}
.advanced-content .field-grid{margin-top:16px}
.advanced-content #resetBoundaryInterfaces{margin-top:16px;font-size:12px;background:transparent}
.transition-actions{display:flex;gap:8px}
.transition-actions #transitionRegion{flex:1;margin:0}
.transition-actions #stopTransition{width:auto;margin:0;font-size:12px}
.transition-results{min-width:0;padding-left:24px;border-left:1px solid var(--line)}
.transition-results h3{font-family:Manrope,sans-serif;font-size:14px;margin:0 0 10px;font-weight:600}
.transition-results #transitionStatus{margin:0 0 18px;overflow-wrap:anywhere}
#transitionPreview{display:block;min-height:160px;max-height:280px;margin:14px 0 0;border:1px solid var(--line)}
#transitionPreview:empty{background:repeating-linear-gradient(0deg,transparent,transparent 23px,#ffffff04 24px),repeating-linear-gradient(90deg,#111b16,#111b16 23px,#ffffff04 24px)}
.transition-results .preview-key{font-size:11px}
.transition-results #applyTransition{margin-top:18px;padding:12px}
.transition-results #transitionMetrics:empty{display:none}
body.clean .solver-bar,body.clean .transition-panel{display:none}
@media(min-width:1100px){aside{position:sticky;top:0;align-self:start;max-height:100vh;overflow-y:auto;scrollbar-width:thin}}
@media(max-width:1100px){.workspace{padding:24px 18px}.transition-layout{grid-template-columns:1fr;gap:20px}.transition-results{padding:20px 0 0;border-left:0;border-top:1px solid var(--line)}}
@media(max-width:760px){main{grid-template-columns:220px minmax(0,1fr)}aside{padding:20px 14px}.workspace{padding:20px 12px}.field-grid{grid-template-columns:1fr}.transition-layout{padding:14px}.transition-panel>summary span{display:block;margin:5px 0 0}.solver-tools{width:100%}.solver-tools select{width:100%!important}.stage{height:55vh}.toggle{margin-left:0}}
@media(max-width:580px){main{display:flex;flex-direction:column}.workspace{order:-1}.workspace-top{margin-bottom:16px}.stats{display:none}aside{position:static;border-right:0;border-top:1px solid var(--line)}aside h1{display:none}.header-actions{flex-wrap:wrap}.field-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.transition-actions{flex-wrap:wrap}.transition-panel>summary{padding:16px}.stage{min-height:340px}#tiles{grid-template-columns:repeat(6,1fr)}.tile-editor{max-width:260px}}
@media(max-width:360px){.field-grid{grid-template-columns:1fr}.brand{font-size:22px}.tools button{padding:8px}}