*{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}

[hidden]{display:none!important}textarea{width:100%;min-width:0;box-sizing:border-box;font:inherit;padding:8px;border:1px solid #555;resize:vertical}label:has(textarea){display:block}label:has(textarea) textarea{display:block;margin-top:8px}label:has(select[name=board_system]){display:block}select[name=board_system]{margin-top:8px}

.viewer-legend{position:absolute;bottom:8px;left:8px;z-index:2;max-width:calc(100% - 16px);display:flex;flex-wrap:wrap;gap:6px 14px;padding:7px 9px;border:1px solid #273c40;background:rgba(255,255,255,.94);font-size:.8rem;line-height:1.4;pointer-events:none}.viewer-legend>span{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.legend-swatch{display:inline-block;width:15px;height:15px;border:1px solid #273c40;flex:none}.legend-body{background:#5da3ad}.legend-helper{background:rgba(255,214,0,.5)}

.bed-controls{margin:12px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:0 16px}.bed-controls label{grid-template-columns:1fr;gap:6px}.bed-controls .hint{grid-column:1/-1;margin:4px 0}.bed-status{font-size:.875rem;margin:8px 0}.bed-status[data-overflow=true]{color:#8a240e;font-weight:600}.legend-bed{background:#dfe3e2;background-image:linear-gradient(#798986 1px,transparent 1px),linear-gradient(90deg,#798986 1px,transparent 1px);background-size:7px 7px}

@media(max-width:760px){.bed-controls{grid-template-columns:repeat(2,minmax(0,1fr))}.bed-controls>label:first-of-type{grid-column:1/-1}}

.spacing-panel{margin:16px 0}.spacing-panel h3{font-size:1rem}.spacing-panel details{border:1px solid #777;margin:6px 0}.spacing-panel summary{padding:10px;cursor:pointer;font-weight:600;min-height:44px}.spacing-scroll{overflow-x:auto}.spacing-panel table{border-collapse:collapse;width:100%;font-size:.85rem;font-family:'IBM Plex Mono',monospace}.spacing-panel caption{text-align:left;padding:8px;font-family:'IBM Plex Sans',sans-serif}.spacing-panel th,.spacing-panel td{padding:8px;text-align:right;border:1px solid #ccc}.spacing-panel th{background:#eee;white-space:normal}.spacing-panel .spacing-current{background:#e4edff}

#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}

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

.base-type-control{grid-template-columns:1fr}

.base-options{display:grid;gap:10px}.base-buttons{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}.base-buttons button{min-height:36px;padding:7px 12px}.base-buttons button[aria-pressed="true"]{background:#0000b5;color:#fff;border-color:#0000b5}.base-buttons button:focus-visible{outline:3px solid #e76f00;outline-offset:2px}
.compact-fields>.base-options,.compact-fields>#base-note{grid-column:1/-1}

.compact-fields>#magnet-fit-controls{grid-column:1/-1}