/* Pixel Art Grid Maker: builds on bead-letter-generator.css tokens and base components. */
body[data-page-route="pixel-art-grid"][data-page-family="generator"] .hero{padding-block:.3rem}
body[data-page-route="pixel-art-grid"][data-page-family="generator"] .hero h1{font-size:clamp(2rem,3.4vw,2.9rem);margin:0;flex:none}
.grid-hero .kicker{margin:0 0 .2rem}
.grid-hero-row{display:flex;align-items:center;gap:.4rem 2rem;flex-wrap:wrap}
.grid-hero .lede{margin:0;flex:1 1 32rem;max-width:68ch;font-size:.95rem}
.letter-content-nav{gap:.3rem 1.2rem;margin:1rem auto 1.5rem;font-size:.85rem}
.grid-tool{scroll-margin-top:80px}
.grid-tool.wrap{width:min(1440px,calc(100% - 2rem));padding:14px;border:1px solid var(--hair);border-radius:12px;box-shadow:0 1px 2px oklch(30% .02 45/.06),0 10px 30px oklch(30% .02 45/.07)}
/* Quiet editor chrome: one control height, hairline borders, one accent (yellow) for the active state. */
.grid-tool{--hair:color-mix(in oklch,var(--line) 22%,transparent);--hover:color-mix(in oklch,var(--ink) 6%,var(--card));--active:color-mix(in oklch,var(--yellow) 70%,var(--card));--active-line:color-mix(in oklch,var(--yellow) 60%,var(--line));--ctl:34px;--radius:6px}
.grid-visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#gridStatus{flex:1 1 180px;margin:0;font-size:.72rem;line-height:1.4;color:var(--muted);overflow-wrap:anywhere}
#gridStatus[data-state=error]{color:var(--letter-accent-ink);font-weight:700}
.grid-studio{--canvas-height:max(224px,calc(100dvh - 250px));display:grid;grid-template-columns:240px minmax(0,1fr);gap:20px;align-items:start}
body.pixel-grid-full-view{overflow:hidden}
/* Remove the header's stacking context only in full view: its cookie notice stays above the workspace. */
body.pixel-grid-full-view header.site{position:static;z-index:auto}
.grid-studio.is-expanded{position:fixed;inset:0;z-index:100;overflow:auto;overscroll-behavior:contain;padding:8px;background:var(--paper)}
.grid-studio.is-expanded .grid-panel{max-height:calc(100dvh - 16px);overflow-y:auto;padding:3px 0}
.grid-panel{display:grid;align-content:start;gap:12px;min-width:0}
.grid-panel>section+section,.grid-downloads,.grid-used{border-top:1px solid var(--hair);padding-top:12px}
.grid-tool h3{font:700 .7rem/1.3 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.grid-tool button,.grid-custom-options summary{min-width:var(--ctl);min-height:var(--ctl);border:1px solid var(--hair);border-radius:var(--radius);background:var(--card);padding:.25rem .6rem;font-weight:600;font-size:.8rem;box-shadow:none;transition:background-color .12s,border-color .12s}
.grid-tool select{min-height:var(--ctl);height:var(--ctl);border:1px solid var(--hair);border-radius:var(--radius);background-color:var(--card);font-weight:600}
.grid-tool input:not([type=checkbox]){border:1px solid var(--hair);border-radius:var(--radius)}
.grid-tool button:hover:not(:disabled){background-color:var(--hover);color:var(--ink)}
.grid-tool button[aria-pressed=true],.grid-tool .grid-tools button[aria-pressed=true]{background:var(--active);border-color:var(--active-line)}
.grid-tool button:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}
.grid-tool button:focus:not(:focus-visible){outline:none}
.grid-tool :is(button,summary):focus-visible{outline:3px solid var(--focus);outline-offset:2px;z-index:3}
.grid-tool svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.grid-tools{display:grid;grid-template-columns:1fr;gap:2px}
.grid-tool .grid-tools button{display:flex;align-items:center;gap:10px;min-height:32px;text-align:left;padding:4px 10px;border-color:transparent;background:transparent;font-weight:600}
.grid-tool-description{margin:8px 0 0;padding:0 2px;font-size:.74rem;line-height:1.45;color:var(--muted);min-height:3em}
.grid-tool-options{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;margin-top:8px;padding-top:8px;border-top:1px solid var(--hair)}
.grid-tool-options[hidden]{display:none}
.grid-tool-options-label{font-size:.72rem;font-weight:700}
.grid-brush-sizes{display:flex;gap:2px;padding:2px;border:1px solid var(--hair);border-radius:var(--radius)}
.grid-tool .grid-brush-sizes button{display:grid;place-items:center;width:30px;min-width:0;height:28px;min-height:0;padding:0;border:0;border-radius:4px;background:transparent;box-shadow:none}
.grid-brush-sizes button i{display:block;width:var(--dot);height:var(--dot);background:var(--ink);border-radius:1px}
.grid-tool .grid-brush-sizes button:hover{background:var(--hover)}
.grid-tool .grid-brush-sizes button[aria-pressed=true]{background:var(--active)}
.grid-tool #gridPixelPerfect{height:32px;min-height:0;padding:0 10px;font-size:.72rem}
.grid-tool #gridPixelPerfect[aria-pressed=true]{background:var(--active);border-color:var(--active-line)}
.grid-tool #gridPixelPerfect:disabled{opacity:.45}
.grid-cursor-color{display:inline-flex;align-items:center;gap:5px;color:var(--ink)}
.grid-cursor-color[hidden]{display:none}
.grid-cursor-color i{width:12px;height:12px;border-radius:2px;background:var(--swatch);box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.grid-cursor-color[data-empty=true] i{background:repeating-conic-gradient(#d9d6d0 0 25%,#fff 0 50%) 0 0/6px 6px}
.grid-cursor-color[data-empty=true]{color:var(--muted)}
.grid-palette-picker{min-width:0;margin-bottom:8px}
.grid-palette-label{display:block;margin:0 0 4px;font-size:.8rem;font-weight:700}
#gridPaletteButton{display:flex;align-items:center;gap:6px;width:100%;min-height:var(--ctl);height:auto;padding:5px 8px;text-align:left;font-size:.78rem;justify-content:space-between}
#gridPaletteButton svg{flex:none;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2}
.grid-palette-button-text{display:grid;gap:4px;min-width:0;flex:1}
#gridPaletteButtonName{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grid-palette-strip{display:grid;gap:1px;width:100%}
.grid-palette-strip>span{display:block;height:8px;border-radius:2px}
#gridPaletteButtonStrip{max-height:17px;overflow:hidden}
.grid-palette-menu{position:fixed;z-index:120;display:flex;flex-direction:column;gap:6px;padding:8px;background:var(--card);border:1px solid var(--hair);border-radius:10px;box-shadow:0 18px 48px -12px rgba(0,0,0,.35)}
.grid-palette-menu[hidden]{display:none}
#gridPaletteSearch{width:100%;min-height:34px;padding:4px 8px;font-size:.8rem;border:1px solid var(--hair);border-radius:var(--radius)}
.grid-palette-list{overflow-y:auto;overscroll-behavior:contain;min-height:0}
.grid-palette-group{position:sticky;top:0;z-index:1;padding:6px 8px 3px;background:var(--card);font-size:.62rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.grid-palette-option{display:grid;gap:4px;padding:6px 8px;border-radius:6px;cursor:pointer;font-size:.78rem}
.grid-palette-option-head{display:flex;justify-content:space-between;gap:8px}
.grid-palette-option-head span:last-child{color:var(--muted);font-variant-numeric:tabular-nums}
.grid-palette-option .grid-palette-strip>span{height:10px}
.grid-palette-option.is-active,.grid-palette-option:hover{background:var(--hover)}
.grid-palette-option[aria-selected="true"]{background:var(--active)}
.grid-palette-empty{margin:4px 8px;font-size:.75rem;color:var(--muted)}
.grid-palette-info{margin:4px 0 0;font-size:.68rem;line-height:1.4;color:var(--muted);overflow-wrap:anywhere}
.grid-palette-info a{color:var(--letter-accent-ink);font-weight:700}
.grid-current{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:.8rem}
.grid-current>span:last-child{display:flex;flex-wrap:wrap;gap:2px 5px}
.grid-color-block{width:34px;height:34px;border:1px solid var(--hair);border-radius:var(--radius);background:var(--swatch,#000);flex:none}
.grid-tool output{color:var(--ink)}
#gridCurrentHex{font:700 .8rem/1.5 ui-monospace,monospace}
.grid-swatches{display:grid;grid-template-columns:repeat(6,32px);gap:3px;padding:4px}
.grid-swatches[data-large=true]{max-height:234px;overflow-y:auto;overscroll-behavior-y:contain;scrollbar-width:thin}
.grid-palette-retained{grid-column:1/-1;border-top:1px solid color-mix(in oklch,var(--line) 40%,transparent);padding-top:6px;font-size:.65rem;line-height:1.4;color:var(--muted)}
.grid-tool .swatch{width:32px;height:32px;min-width:0;min-height:0;position:relative;padding:0;border:0;border-radius:4px;background:var(--swatch);box-shadow:inset 0 0 0 1px oklch(30% .02 45/.14)}
.grid-tool .swatch:hover:not(:disabled){background-color:var(--swatch);box-shadow:inset 0 0 0 1px oklch(30% .02 45/.14),0 0 0 2px var(--hair)}
.grid-tool .swatch[aria-pressed=true]{background:var(--swatch);box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--ink);z-index:1}
.grid-tool .swatch:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.grid-tool #gridAddColor{width:32px;height:32px;min-width:0;min-height:0;padding:0;border:1px dashed color-mix(in oklch,var(--line) 45%,transparent);border-radius:4px;background:transparent;color:var(--muted);font-size:.62rem;line-height:1.1}
.grid-presets{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.grid-custom-options{margin-top:8px}
.grid-custom-options summary{cursor:pointer;width:fit-content;padding:.3rem .6rem}
.grid-custom{display:grid;grid-template-columns:1fr 1fr;gap:6px;align-items:end}
.grid-custom button{grid-column:1/-1}
.grid-custom input{width:100%;min-width:0}
.grid-custom label{margin-top:8px}
.grid-tool .toggle{min-height:44px;margin:.2rem 0}.grid-tool .toggle input{accent-color:var(--letter-accent-ink);flex:none}
.grid-work{display:grid;min-width:0;gap:8px;align-content:start}
.grid-view-bar{min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.grid-view-bar>strong{font:700 .85rem/1 var(--sans);font-variant-numeric:tabular-nums;white-space:nowrap;padding-right:6px;border-right:1px solid var(--hair);margin-right:2px}
.grid-display-options,.grid-zoom-controls,.grid-top-actions{display:flex;align-items:center;gap:5px}
.grid-display-options{flex-wrap:wrap;min-width:0}
.grid-display-options label{display:flex;align-items:center;gap:6px;margin:0 4px 0 0;font-size:.74rem;font-weight:600;color:var(--muted)}
.grid-display-options select{width:auto;min-width:0;margin:0;padding:0 6px;font-size:.75rem;color:var(--ink)}
.grid-display-options button{padding:.25rem .6rem;font-size:.75rem}
.grid-view-label{display:none}
.grid-top-actions{margin-left:auto;flex-wrap:wrap;gap:8px}
.grid-zoom-controls output{min-width:4ch;text-align:center;font:600 .75rem/1 var(--sans);color:var(--muted)}
.grid-zoom-controls button{padding:.25rem .5rem}
.grid-tool .grid-zoom-controls button[aria-pressed=true]{background:var(--hover);border-color:var(--hair)}
.grid-zoom-controls #gridExpand{display:flex;align-items:center;justify-content:center;gap:4px;padding-inline:5px;white-space:nowrap}
.grid-zoom-controls #gridExpand svg{width:16px;height:16px}
.grid-tool .grid-download-primary{background:var(--letter-accent-ink);border-color:var(--letter-accent-ink);color:var(--card);white-space:nowrap;padding:.35rem .8rem}
.grid-tool .grid-download-primary:hover:not(:disabled){background:color-mix(in oklch,var(--letter-accent-ink) 88%,black);color:var(--card)}
.grid-canvas-stage{position:relative;min-width:0}
.grid-canvas-wrap{min-width:0;min-height:0;height:var(--canvas-height);max-height:var(--canvas-height);overflow:auto;border-radius:8px;background:oklch(88% .012 80);box-shadow:inset 0 0 0 1px var(--hair);overscroll-behavior:contain;scrollbar-width:none}
.grid-canvas-wrap::-webkit-scrollbar{display:none}
#gridCanvasSurface{position:relative;margin:auto}
#gridCanvas{display:block;position:sticky;top:0;left:0;max-width:none;touch-action:none;cursor:crosshair;background:#fff;box-shadow:0 1px 3px oklch(30% .02 45/.18),0 8px 24px oklch(30% .02 45/.12)}
#gridCanvas:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}
.grid-empty-hint{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;padding:12px;text-align:center}
.grid-empty-hint[hidden],.grid-touch-hint{display:none}
.grid-empty-hint>span{max-width:100%;padding:8px 14px;border-radius:999px;background:oklch(25% .02 45/.72);color:#fff;font-size:.8rem}
.grid-canvas-footer{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;min-height:40px;font-size:.72rem;color:var(--muted);font-variant-numeric:tabular-nums}
.grid-history{display:flex;gap:5px}
.grid-history button{display:flex;align-items:center;justify-content:center;gap:4px;font-size:.72rem}
.grid-history svg{width:16px;height:16px}
#gridSaveState{margin-left:auto}
#gridSaveState[data-dirty=true]{color:var(--letter-accent-ink);font-weight:700}
.grid-used{min-width:0;font-size:.75rem}
#gridUsedColors{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-height:36px;padding:3px;color:var(--muted)}
.grid-tool .grid-used-color{display:flex;align-items:center;gap:6px;padding:3px 8px;font-size:.72rem;color:var(--ink)}
.grid-used-dot{width:16px;height:16px;border-radius:3px;box-shadow:inset 0 0 0 1px oklch(30% .02 45/.18);background:var(--swatch);flex:none}
.grid-download-fields{display:flex;flex-wrap:wrap;gap:8px 14px;margin-bottom:10px}
.grid-download-fields label{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0;font-size:.8rem;max-width:100%}
.grid-download-fields input{width:240px;max-width:100%;min-width:0}
.grid-download-buttons{display:flex;flex-wrap:wrap;gap:8px}
.grid-download-buttons button{min-height:40px}
.grid-canvas-help,.grid-size-info{margin:0}
.grid-size-info{color:var(--muted);font-size:.75rem}
.pixel-image{image-rendering:pixelated}
.grid-section{padding-bottom:2.5rem}
.grid-section h2{font-size:clamp(1.7rem,4vw,2.6rem);margin:0 0 .7rem}
.grid-section>p,.grid-section li{max-width:72ch;color:var(--muted)}
.grid-section li{margin-bottom:.45rem}
.grid-section a{color:var(--letter-accent-ink);font-weight:700}
.grid-examples{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:1rem}
.grid-examples figure{margin:0;border:2px solid var(--line);background:var(--card);box-shadow:3px 3px 0 var(--line)}
.grid-examples img{display:block;width:100%;height:auto}
.grid-examples figcaption{padding:.4rem .6rem;border-top:1px solid var(--line);font-weight:700;font-size:.82rem}
.grid-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.8rem;margin:1rem 0 0;padding:0;list-style:none}
.grid-section .grid-gallery li{display:flex;flex-direction:column;gap:.25rem;margin:0;max-width:none;padding:.5rem;border:2px solid var(--line);background:var(--card);box-shadow:3px 3px 0 var(--line);color:var(--ink)}
.grid-gallery img{display:block;width:100%;height:auto;aspect-ratio:1;background:#fff}
.grid-gallery h3{margin:.2rem 0 0;font-size:.95rem}
.grid-gallery p{margin:0;font-size:.78rem;color:var(--muted)}
.grid-gallery button{margin-top:auto;min-height:44px;border:2px solid var(--line);background:var(--yellow);color:var(--ink);font:700 .82rem var(--sans);cursor:pointer}
.grid-gallery button:hover{background:var(--card)}
.grid-gallery button:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.table-scroll{overflow-x:auto;border:2px solid var(--line);background:var(--card)}
.table-scroll table{width:100%;border-collapse:collapse;font-size:.88rem}
.table-scroll caption{padding:.5rem .7rem;text-align:left;font-weight:700}
.table-scroll th,.table-scroll td{padding:.5rem .7rem;border-top:1px solid color-mix(in oklch,var(--line) 30%,transparent);text-align:left;vertical-align:top}
.table-scroll thead th{background:var(--paper)}
.grid-faq details{border:1.5px solid var(--line);background:var(--card);margin-bottom:.5rem;padding:.2rem .8rem}
.grid-faq summary{cursor:pointer;padding:.55rem 0;font-weight:700}
.grid-faq details p{margin:.2rem 0 .7rem;color:var(--muted);max-width:72ch}
@media(max-width:1099px){
  .grid-studio{--canvas-height:max(224px,calc(100dvh - 260px));grid-template-columns:240px minmax(0,1fr);gap:14px}
}
@media(max-width:760px){
  .grid-tool.wrap{width:calc(100% - 16px);padding:8px}
  .grid-studio{--canvas-height:max(324px,calc(100dvh - 470px));grid-template-columns:auto minmax(0,1fr);grid-template-areas:"dims top" "canvas canvas" "foot foot" "tools tools" "description description" "opts opts" "colors colors" "display display" "size size" "downloads downloads" "used used" "help help" "info info";gap:6px 4px}
  .grid-panel,.grid-work,.grid-view-bar,.grid-tools-section,.grid-color-section{display:contents}
  #gridToolsTitle,#gridColorTitle{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .grid-view-bar>strong{grid-area:dims;align-self:center;font-size:1rem}
  .grid-top-actions{grid-area:top;justify-self:end;gap:6px}
  .grid-zoom-controls{gap:3px}
  .grid-zoom-controls #gridExpand{gap:2px;min-width:0;padding-inline:3px;font-size:.68rem}
  .grid-zoom-controls #gridExpand svg{width:14px;height:14px}
  #gridZoomValue{display:none}
  .grid-canvas-stage{grid-area:canvas}
  .grid-canvas-footer{grid-area:foot;gap:2px 6px;font-size:.68rem}
  #gridStatus{font-size:.65rem;flex-basis:120px}
  .grid-history button{padding:0 4px}
  #gridSaveState{font-size:.65rem}
  .grid-tools{grid-area:tools;display:flex;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding:4px;gap:4px}
  .grid-tool .grid-tools button{flex:0 0 52px;width:52px;min-height:48px;flex-direction:column;justify-content:center;gap:2px;padding:3px 0;font-size:.6rem;line-height:1.15;text-align:center}
  .grid-tool-description{grid-area:description;min-height:0;margin:0;font-size:.72rem}
  .grid-tool-options{grid-area:opts;margin:0;padding:0;border:0}
  .grid-tool .grid-brush-sizes button{width:44px;height:40px}
  .grid-tool #gridPixelPerfect{height:44px}
  .grid-color-strip{grid-area:colors;display:flex;align-items:center;gap:10px;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding:5px 4px;border-block:1px solid color-mix(in oklch,var(--line) 30%,transparent)}
  .grid-palette-picker{flex:0 0 142px;margin:0}
  .grid-palette-label{font-size:.65rem;margin-bottom:2px}
  #gridPaletteButton{font-size:.7rem;min-height:44px}
  .grid-palette-info{font-size:.6rem}
  .grid-current{margin:0;flex:none;gap:6px;font-size:.65rem}
  .grid-current>span:last-child{display:block;width:68px;line-height:1.3}
  #gridCurrentHex{font-size:.65rem}
  .grid-color-block{width:44px;height:44px;box-shadow:none}
  .grid-swatches{display:flex;flex:none;gap:6px;padding:0}
  .grid-swatches[data-large=true]{max-height:none;overflow-y:visible}
  .grid-palette-retained{flex:0 0 90px;border-top:0;border-left:1px solid var(--line);padding:0 0 0 6px}
  .grid-tool button,.grid-tool select,.grid-custom-options summary{min-width:44px;min-height:44px}
  .grid-tool .grid-tools button{min-height:48px}
  .grid-tool .swatch,.grid-tool #gridAddColor{width:44px;height:44px;flex:none}
  .grid-tool #gridAddColor{font-size:.7rem}
  .grid-tool .grid-download-primary{padding:.3rem .5rem;font-size:.75rem}
  .grid-top-actions .grid-download-primary{font-size:.65rem;padding-inline:4px}
  .grid-display-options{grid-area:display;gap:6px;padding-block:6px}
  .grid-view-label{display:block;width:100%;font-size:.8rem}
  .grid-display-options label{flex:1 1 auto;font-size:.75rem}
  .grid-display-options select{height:44px;flex:1;font-size:.75rem}
  .grid-size-section{grid-area:size;border-top:1px solid color-mix(in oklch,var(--line) 30%,transparent);padding-top:10px}
  .grid-downloads{grid-area:downloads}
  .grid-used{grid-area:used}
  .grid-canvas-help{grid-area:help}
  .grid-size-info{grid-area:info}
  .grid-download-fields label:first-child{width:100%}
  .grid-download-fields input{flex:1}
  .grid-download-buttons button{flex:1 1 auto}
  .grid-examples{grid-template-columns:1fr}
  .grid-hero .kicker{display:none}.grid-hero .lede{font-size:.85rem;flex-basis:100%}
  .grid-studio.is-expanded .grid-panel{max-height:none;overflow:visible;padding:0}
}
@media(pointer:coarse){
  .grid-tool button,.grid-tool select,.grid-custom-options summary{min-width:44px;min-height:44px}
  .grid-swatches{grid-template-columns:repeat(6,44px)}
  .grid-swatches[data-large=true]{max-height:306px}
  .grid-tool .swatch,.grid-tool #gridAddColor{width:44px;height:44px}
  .grid-mouse-hint{display:none}.grid-touch-hint{display:inline}
}
@media(pointer:coarse) and (min-width:761px){.grid-studio{grid-template-columns:312px minmax(0,1fr)}}
@media(pointer:coarse) and (max-width:760px){.grid-swatches[data-large=true]{max-height:none}}
@media(max-width:760px){
  .grid-top-actions{flex-wrap:nowrap;gap:4px}
  #gridExpandLabel{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .grid-zoom-controls #gridExpand{padding-inline:0;justify-content:center}
  .grid-zoom-controls #gridExpand svg{width:18px;height:18px}
  .grid-top-actions .grid-download-primary{white-space:nowrap;font-size:.7rem;padding-inline:6px}
  .grid-view-bar>strong{font-size:.85rem}
  #gridSaveState{display:none}
  #gridStatus{order:9;flex:1 1 100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .grid-color-strip{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"pal pal" "cur sw";gap:6px 8px;overflow:visible}
  .grid-palette-picker{grid-area:pal;flex:none;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .grid-palette-label{margin:0;font-size:.8rem}
  #gridPaletteButton{flex:1;min-width:0;width:auto;min-height:44px;font-size:.8rem}
  .grid-palette-info{flex-basis:100%;margin:0}
  .grid-current{grid-area:cur}
  .grid-current>span:last-child{display:none}
  .grid-swatches{grid-area:sw;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding:5px}
}
@media(max-width:760px){.grid-dl-word{display:none}.grid-zoom-controls #gridExpand{width:44px;flex:0 0 44px}.grid-top-actions .grid-download-primary{min-width:56px}}