.board-dimensions{display:flex;align-items:end;gap:12px}.board-dimensions label{flex:1;min-width:0;font-size:10px;color:var(--muted)}.board-dimensions input{display:block;width:100%;height:34px;margin-top:7px;border:1px solid var(--line);border-radius:5px;padding:7px 10px;background:white;font:inherit;color:var(--ink)}.board-dimensions>span{padding-bottom:10px;font-size:11px}.print-mode{margin-top:15px;font-size:10px}.bead-example-layout{display:grid;grid-template-columns:1.2fr 1fr;gap:32px;align-items:center}.bead-example{border:1px solid var(--line);border-radius:6px;overflow:hidden;background:#f7f8f3}.bead-before-after{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}.bead-before-after>div{padding:15px 10px;background:#f7f8f3;text-align:center}.bead-before-after img{width:100%;height:auto;aspect-ratio:1;object-fit:contain}.bead-before-after>div:last-child img{image-rendering:pixelated}.bead-before-after span{display:block;font-size:8px;color:var(--muted);letter-spacing:.08em;margin-top:12px}.bead-example figcaption{border-top:1px solid var(--line);padding:13px;font-size:10px;color:var(--muted);background:white;line-height:1.8}.board-guide-layout{display:grid;grid-template-columns:1.5fr 1fr;gap:40px;align-items:center}.board-guide-layout p,.bead-copy,.print-guide-layout p,.print-guide-layout li{font-size:12px;line-height:1.85}.board-guide-layout p{margin-top:12px}.live-board-panel{padding:22px;border:1px solid #d9e1d2;border-radius:6px;background:#f4f6ef}.board-map{display:grid;gap:4px;max-width:250px;margin:0 auto 17px}.board-map>div{aspect-ratio:1;display:grid;place-items:center;border:1px solid #bac9ac;background:radial-gradient(#d1dbc5 1px,transparent 1px) 0 0/9px 9px,#fff;font-size:13px;color:var(--green);min-width:0;max-height:160px}.live-board-panel .field-note{font-size:10px;margin-top:6px}.bead-table-wrap{margin-top:19px;overflow-x:auto;border:1px solid var(--line);border-radius:6px}.bead-table{width:100%;border-collapse:collapse;text-align:left;font-size:11px}.bead-table thead{background:#f4f6ef;font-size:10px}.bead-table td,.bead-table th{padding:11px 16px;border-bottom:1px solid var(--line)}.bead-table tbody tr:last-child>*{border-bottom:0}.bead-table tbody th{font-weight:500}.bead-table small{display:block;font-size:9px;margin-top:4px;color:var(--muted)}.bead-table td:first-child{white-space:nowrap;font-weight:600}.bead-swatch{display:inline-block;width:17px;height:17px;border:1px solid #0002;border-radius:50%;vertical-align:middle;margin-right:10px;box-shadow:inset 0 0 0 4px #ffffff33}.bead-table select{width:100%;max-width:180px;font-size:10px;border:1px solid var(--line);border-radius:4px;padding:7px;background:white;color:var(--ink)}.legend-footer{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:14px}.palette-disclosure{border-top:1px solid var(--line);margin-top:20px;padding-top:17px;font-size:11px}.palette-disclosure summary{cursor:pointer;font-weight:500}.palette-disclosure p{line-height:1.85;margin-top:12px;max-width:850px}.palette-disclosure a{text-decoration:underline}.print-guide-layout{display:grid;grid-template-columns:210px 1fr;gap:37px;align-items:center}.pdf-example{display:block;max-width:210px;border:1px solid var(--line);padding:7px;background:#f4f5ef;box-shadow:0 4px 14px #263c3210}.pdf-example img{display:block;width:100%;height:auto}.print-guide-layout ol{padding-left:17px;margin:12px 0}.print-guide-layout li{margin-bottom:9px;padding-left:3px}.print-guide-layout .field-note{font-size:10px}.print-guide-layout .field-note a{text-decoration:underline}.print-guide-layout .text-link{margin-top:15px}
@media(max-width:760px){.bead-example-layout{gap:22px}.board-guide-layout{gap:23px;grid-template-columns:1.2fr 1fr}.print-guide-layout{gap:23px;grid-template-columns:170px 1fr}.bead-table td,.bead-table th{padding:10px}.bead-swatch{margin-right:6px}}
@media(max-width:500px){.bead-example-layout,.board-guide-layout,.print-guide-layout{grid-template-columns:1fr}.print-guide-layout .pdf-example{justify-self:center;width:190px}.bead-table{font-size:10px}.bead-table thead{font-size:9px}.bead-table td,.bead-table th{padding:9px 6px}.bead-table select{font-size:9px;padding:7px 3px;max-width:112px}.bead-table small{font-size:8px}.bead-swatch{width:12px;height:12px;margin-right:4px}.bead-copy{font-size:11px}.legend-footer{gap:8px}.live-board-panel{padding:17px}.board-map{max-width:190px}.board-guide-layout p{font-size:12px}}