*{box-sizing:border-box}body{margin:0;background:#c5c5c5;color:#171717;font-family:'IBM Plex Sans',system-ui,sans-serif}header,footer{padding:16px 3vw;background:#fff;border-bottom:2px solid #111;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}a{color:#0000a8;text-decoration:underline}main{max-width:1600px;margin:auto;padding:24px clamp(12px,3vw,48px)}h1{font-size:clamp(1.6rem,3vw,2.8rem);line-height:1.1}p{line-height:1.55}.layout{display:grid;grid-template-columns:minmax(260px,340px) minmax(0,1fr);gap:20px}.pane{background:#fff;border:2px solid #111;margin:20px 0;padding:18px;min-width:0}.layout .pane{margin:10px 0}h2{font-size:1.05rem;background:#0000a8;color:white;margin:-18px -18px 18px;padding:12px 16px}fieldset{border:1px solid #777;margin:0 0 18px;padding:12px}legend{padding:0 4px;font-weight:600}label{display:grid;grid-template-columns:1fr 90px;gap:10px;align-items:center;margin:12px 0}input{min-width:0;width:100%;padding:9px;font-size:1rem;border:1px solid #555;border-radius:0}button{padding:12px;border:2px outset #aaa;background:#ddd;color:#111;font:inherit;cursor:pointer;border-radius:0;min-height:44px}button:hover{background:#eee}button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid #005fff;outline-offset:3px}button:disabled{opacity:.5;cursor:default}button[aria-pressed=true],#generate{background:#0000a8;color:white}#generate{width:100%;font-weight:700}.toolbar,.downloads,.presets{display:flex;gap:8px;flex-wrap:wrap}.presets{margin-top:12px}.hint,figcaption{font-size:.875rem;color:#444}.notice{padding:12px;background:#fff1c7;border-left:5px solid #9b6300}.notice:empty{display:none}#viewer{height:clamp(300px,43vw,650px);background:#eee9dc;position:relative;overflow:hidden}#viewer canvas{display:block;width:100%;height:100%;touch-action:none}#viewer-note{position:absolute;padding:15px;z-index:1}#dimensions{display:grid;grid-template-columns:1fr 1fr;font-family:'IBM Plex Mono',monospace;gap:8px}dt,dd{margin:0;padding:6px;border-bottom:1px solid #ccc}dd{text-align:right}.details{display:grid;grid-template-columns:1fr 1fr;gap:24px}.details>div{min-width:0}figure{margin:0}img{width:100%;height:auto}code{overflow-wrap:anywhere}#status{font-weight:600}footer{font-family:monospace}@media(max-width:760px){.layout,.details{grid-template-columns:1fr}main{padding:12px}.pane{padding:14px}h2{margin:-14px -14px 14px}.controls{order:1}.layout>.pane:not(.controls){order:0}#viewer{height:330px}#dimensions{font-size:.85rem}button{flex-grow:1}}

select{min-width:0;width:100%;padding:9px;font:inherit;border:1px solid #555;background:white}input[type=checkbox]{width:24px;height:24px;justify-self:end}select:focus-visible{outline:3px solid #005fff;outline-offset:3px}
.layout{grid-template-columns:minmax(280px,360px) minmax(0,1fr)}.buttons{display:flex;flex-wrap:wrap;gap:.5rem;margin:.6rem 0}.buttons button{flex:1 1 130px}.file{display:block;padding:.5rem;border:1px solid #222}.file input{max-width:100%;font-size:.8rem}#plan{background:#fff;padding:.5rem;max-height:410px}#plan svg{width:100%;height:360px}.mono{font-family:var(--font-mono,'IBM Plex Mono',monospace);font-size:.85rem}#dimensions{font-size:.9rem}.joint{display:block;width:100%;max-width:780px;height:auto;background:#fff;font:14px 'IBM Plex Sans',sans-serif}.joint text{fill:#111}label input[type=range]{width:100%}input[type=text]{min-width:0}select{max-width:100%}@media(max-width:760px){.layout{grid-template-columns:1fr}#plan svg{height:260px}.joint{min-height:130px}}

/* Allow long cut lists and generated tile labels to shrink inside the layout. */
.layout>div{min-width:0}dt,dd{min-width:0;overflow-wrap:anywhere}
fieldset,.file{min-width:0}.file{max-width:100%}#viewer canvas{max-width:100%}@media(max-width:760px){.layout{grid-template-columns:minmax(0,1fr)}}

#viewer-note{top:8px;left:8px;right:8px;margin:0;padding:10px 12px;background:rgba(255,255,255,.95);border:1px solid #9b6300;border-left:5px solid #9b6300;pointer-events:none}[hidden]{display:none!important}.viewer-legend{position:absolute;bottom:8px;left:8px;right:8px;display:flex;flex-wrap:wrap;gap:6px 14px;background:rgba(255,255,255,.94);border:1px solid #273c40;padding:7px 9px;font-size:.8rem;pointer-events:none}.viewer-legend span{display:flex;align-items:center;gap:6px}.legend-swatch{display:inline-block;width:15px;height:15px;background:#f21009;border:1px solid #273c40}

.tile-labels{position:absolute;inset:0;z-index:1;pointer-events:none}.tile-labels button{position:absolute;transform:translate(-50%,-50%);padding:3px 5px;min-height:25px;border:1px solid #273c40;background:rgba(255,255,255,.94);font:11px 'IBM Plex Mono',monospace;white-space:nowrap;pointer-events:auto}.tile-labels button[aria-pressed=true]{background:#0000a8;color:white}#viewer-note{z-index:3}

#share-status,#width-result{overflow-wrap:anywhere}

#base-options,#magnet-fit-controls,#base-note{grid-column:1/-1}.base-buttons{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0}.base-buttons button{min-height:36px}.base-buttons button[aria-pressed=true]{background:#0000a8;color:white}