.reading .tool-cards{gap:var(--gutter);grid-template-columns:repeat(4,minmax(0,1fr));margin:0;padding:0;list-style:none;display:grid}.reading .tool-cards li{margin:0}.reading .tool-cards a{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);flex-direction:column;height:100%;padding:24px;text-decoration:none;transition:border-color .14s,background .14s;display:flex}.reading .tool-cards a:hover{border-color:var(--line-strong);background:var(--surface-hover)}.reading .tool-cards :is(h2,h3){margin:0;font-size:17px}.tool-cards h3 svg{vertical-align:-2px;margin-left:4px}.reading .tool-cards p{color:var(--muted);flex:1;margin-top:8px;font-size:14px;line-height:1.65}.tool{max-width:800px}.bench{--view-height:360px;border:1px solid var(--line);background:var(--surface);border-radius:14px;grid-template-columns:264px minmax(0,1fr);min-height:440px;transition:border-color .16s,box-shadow .16s;display:grid;overflow:hidden}.bench.is-over{border-color:var(--text);box-shadow:0 0 0 4px color-mix(in srgb, var(--text) 10%, transparent)}.bench-side{border:0;border-right:1px solid var(--line);flex-direction:column;gap:28px;min-width:0;margin:0;padding:22px 20px 18px;display:flex}.bench-side:disabled :is(.bench-fields,.bench-actions){opacity:.4}.bench-fields{flex-direction:column;gap:22px;display:flex}.bench-actions{flex-direction:column;gap:8px;display:flex}.bench-actions .button{width:100%}.reading .bench-note{color:var(--faint);align-items:center;gap:7px;margin:auto 0 0;font-size:12px;line-height:1.5;display:flex}.bench-note svg{flex:none}.bench-stage{background:var(--media);min-width:0;display:flex}.bench.has-image .bench-stage{background:repeating-conic-gradient(var(--media) 0 25%, var(--surface-hover) 0 50%) 0 0 / 16px 16px}.bench-empty{text-align:center;flex-direction:column;align-items:center;gap:14px;margin:auto;padding:40px 24px;display:flex}.bench-icon{border:1px solid var(--line);background:var(--surface);width:44px;height:44px;color:var(--muted);border-radius:12px;place-items:center;display:grid}.reading .bench-empty p{color:var(--muted);margin:0;font-size:14px;line-height:1.6}.bench-pick{flex-wrap:wrap;justify-content:center;gap:8px;margin-top:6px;display:flex}.bench-pick .button:focus-within,.bench-replace:focus-within{outline:2px solid var(--blue);outline-offset:3px}.reading .bench-empty .bench-error{color:var(--text)}.bench-work{flex-direction:column;flex:1;min-width:0;display:flex}.bench:not(.has-image) .bench-work,.bench.has-image .bench-empty{display:none}.bench-view{flex:1;place-items:center;min-width:0;padding:24px;display:grid}.bench-bar{border-top:1px solid var(--line);background:var(--surface);min-height:44px;color:var(--faint);font:12px var(--mono);justify-content:space-between;align-items:center;gap:12px;padding:0 16px;display:flex}.bench-replace{color:var(--muted);white-space:nowrap;cursor:pointer;align-items:center;gap:6px;font-family:inherit;font-size:13px;transition:color .14s;display:inline-flex}.bench-replace:hover{color:var(--text)}.field{color:var(--muted);flex-direction:column;gap:8px;font-size:13px;line-height:1.4;display:flex}.field>span{justify-content:space-between;gap:8px;display:flex}.field b{color:var(--text);font-family:var(--mono);font-weight:400}.field input[type=number]{border:1px solid var(--line-strong);border-radius:var(--radius-control);background:var(--surface);width:100%;height:36px;color:var(--text);font:13px var(--mono);padding:0 10px}.field input[type=number]:focus-visible{outline:2px solid var(--blue);outline-offset:2px}.field-range input{width:100%;accent-color:var(--text);margin:0}.field-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px;display:grid}.check{color:var(--text);cursor:pointer;align-items:center;gap:8px;font-size:14px;display:inline-flex}.check input{width:16px;height:16px;accent-color:var(--text);margin:0}.bench-view canvas{max-width:100%;display:block}.pixels{image-rendering:pixelated}#result{width:100%;height:var(--view-height);object-fit:contain}.slicer-view{grid-template-columns:minmax(0,1fr) 144px;align-items:center;gap:24px;width:100%;display:grid}#sheet{width:100%;height:var(--view-height);object-fit:contain}.slicer-view figure{margin:0}#preview{border:1px solid var(--line);background:var(--surface);object-fit:contain;border-radius:10px;width:144px;height:144px}.reading .slicer-view figcaption{color:var(--faint);font:12px var(--mono);text-align:center;margin-top:8px}.palette-view{grid-template-columns:minmax(0,2fr) minmax(0,3fr);align-self:start;align-items:start;gap:24px;width:100%;display:grid}#source{width:100%;height:auto;max-height:var(--view-height);object-fit:contain;border-radius:10px}.swatches{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px;display:grid}.swatch{border-radius:var(--radius-control);background:var(--swatch);color:#fff;min-height:76px;font:12px var(--mono);text-shadow:0 1px 3px #000000d9;cursor:pointer;border:0;align-items:flex-end;padding:8px;display:flex;box-shadow:inset 0 0 0 1px #7f7f7f33}.tool-about{margin-top:88px}.tool-about>section{column-gap:var(--gutter);border-top:1px solid var(--line);grid-template-columns:repeat(4,minmax(0,1fr));padding:40px 0;display:grid}.reading .tool-about>section>h2{color:var(--text);font-family:var(--mono);letter-spacing:0;grid-column:1;margin:0;font-size:13px;font-weight:400;line-height:1.75rem}.tool-about>section>:not(h2){grid-column:2/-1}.reading .tool-about>section>h2+*{margin-top:0}.tool-faq{gap:var(--gutter);grid-template-columns:repeat(3,minmax(0,1fr));margin:0;display:grid}.tool-faq dt{font-size:15px;font-weight:500;line-height:1.75rem}.tool-faq dd{color:var(--muted);margin:8px 0 0;font-size:14px;line-height:1.7}.reading .tool-more{grid-template-columns:repeat(3,minmax(0,1fr))}.reading .tool-more .tool-cta a{border-color:var(--accent);background:var(--accent);color:var(--ink)}.reading .tool-more .tool-cta a:hover{background:color-mix(in srgb, var(--accent) 86%, var(--ink))}.reading .tool-more .tool-cta p{color:color-mix(in srgb, var(--ink) 62%, var(--accent))}@media (width<=1279px){.reading .tool-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.bench{grid-template-columns:236px minmax(0,1fr)}.slicer-view{grid-template-columns:minmax(0,1fr);justify-items:center}#sheet{height:auto;max-height:320px}.tool-about>section{display:block}.reading .tool-about>section>h2{margin-bottom:16px}.tool-faq,.reading .tool-more{grid-template-columns:minmax(0,1fr)}}@media (width<=720px){.bench{--view-height:300px;grid-template-columns:minmax(0,1fr);min-height:0}.bench-stage{min-height:300px}.bench-side{border-top:1px solid var(--line);border-right:0;order:2;gap:22px}.bench:not(.has-image) .bench-side{display:none}.reading .bench-note{margin-top:0}.bench-view{padding:16px}.palette-view{grid-template-columns:minmax(0,1fr)}.swatches{grid-template-columns:repeat(auto-fill,minmax(76px,1fr))}}@media (width<=560px){.reading .tool-cards{grid-template-columns:minmax(0,1fr)}}
