@font-face{font-family:Rays;src:url(assets/RaysDisplay-VF.woff2?v=43f7c0dcbae6) format('woff2');font-style:normal;font-weight:300 700;font-display:swap}
:root{--ink:#202124;--paper:#fff;--orange:#ff5c35;--line:#d9dadd;--muted:#62666a;--icon-size:32px;font:400 0.9375rem/1.5 Rays,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none;color-scheme:light}
*{box-sizing:border-box}body{margin:0;min-height:100vh;color:var(--ink);background:var(--paper)}button,input,select{font:inherit;color:inherit}button,a,input,select{touch-action:manipulation}a{color:inherit;text-underline-offset:5px}button{cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--orange);outline-offset:4px}button{background:none;border:0}button:hover,a:hover{color:var(--orange)}
.site-header{padding:24px 40px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{font:700 1.875rem/1.1 Rays,sans-serif;text-decoration:none;letter-spacing:0}.brand span{display:block;font:400 0.75rem/1.5 Rays,sans-serif;color:var(--muted);margin-top:8px}.site-header nav{display:flex;align-items:center;gap:32px;font-size:0.875rem}.bundle-link{display:inline-flex;align-items:center;gap:12px;padding:13px 17px;border:1px solid currentColor;text-decoration:none}.bundle-link svg{width:24px;height:24px;flex:none}
main{max-width:1600px;margin:0 auto;padding:0 40px 48px}.intro{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin:45px 0 38px}.intro h1{font:500 clamp(42px,5.2vw,74px)/1.05 Rays,sans-serif;margin:0;letter-spacing:0}.intro p{color:var(--muted);margin:0 0 4px;font-size:1rem}
.controls{display:flex;align-items:flex-end;gap:26px;padding:25px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.controls label,.controls legend{font-size:0.75rem}.controls fieldset{border:0;margin:0;padding:0;min-width:0}.controls legend{padding:0;margin-bottom:9px}.search{display:flex;flex-direction:column;gap:9px;flex:1;min-width:180px}.search input{width:100%;height:43px;padding:9px 12px;border:1px solid var(--line);border-radius:0;background:var(--paper);font-size:0.875rem}.segments{display:flex;height:43px;border:1px solid var(--line)}.segments button{padding:8px 12px;font-size:0.8125rem}.segments button[aria-pressed=true]{background:var(--ink);color:var(--paper)}.size-control{display:flex;flex-direction:column;gap:9px}.size-control select{height:43px;padding:8px;background:var(--paper);border:1px solid var(--line);border-radius:0}
.categories{display:flex;flex-wrap:wrap;gap:5px 22px;padding:20px 0}.categories button{padding:6px 0;font-size:0.75rem;border-bottom:2px solid transparent}.categories button[aria-pressed=true]{border-color:var(--orange);color:var(--ink)}.categories span{color:var(--muted);margin-left:5px;font-size:0.625rem}
.workbench{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:30px;align-items:start}.collection-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:2px 0 17px;color:var(--muted);font-size:0.75rem}.collection-heading p{margin:0}.icon-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(105px,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}.icon-card{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:19px;min-width:0;height:120px;padding:18px 8px 12px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);color:var(--ink);position:relative}.icon-card svg{width:var(--icon-size);height:var(--icon-size);flex:none}.icon-card span{font-size:0.625rem;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;max-width:100%}.icon-card[aria-pressed=true]{box-shadow:inset 0 0 0 2px var(--orange);color:var(--orange)}.icon-card:hover{color:var(--orange);background:color-mix(in srgb,var(--orange) 5%,var(--paper))}.icon-card:focus-visible{outline-offset:-4px;z-index:1}#empty{padding:35px 0;color:var(--muted)}
.inspector{position:sticky;top:22px;background:var(--orange);color:#202124;padding:20px}.stage-heading{display:flex;justify-content:space-between;font-size:0.6875rem;margin-bottom:14px}.stage-heading input{accent-color:#202124;vertical-align:middle}.stage{aspect-ratio:1;width:100%;background-image:linear-gradient(to right,#20212418 1px,transparent 1px),linear-gradient(to bottom,#20212418 1px,transparent 1px);background-size:calc(100% / 24) calc(100% / 24);border:1px solid #20212435}.stage[data-grid=false]{background-image:none;border-color:transparent}.stage svg{display:block;width:100%;height:100%}.selected-category{font-size:0.6875rem;margin:20px 0 6px}.selected-details h2{font:600 1.75rem/1.2 Rays,sans-serif;margin:0;overflow-wrap:anywhere}.filename{font:400 0.6875rem/1.5 Rays,sans-serif;margin:8px 0 22px;overflow-wrap:anywhere}.weight-comparison{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #20212440;border-bottom:1px solid #20212440;padding:17px 0;margin-bottom:22px}.weight-comparison button{display:flex;flex-direction:column;gap:9px;align-items:center;font-size:0.625rem;padding:2px 0}.weight-comparison svg{width:28px;height:28px}.inspector a:hover,.inspector button:hover{color:#fff}.weight-comparison button[aria-pressed=true]{text-decoration:underline;text-underline-offset:4px}.selected-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.selected-actions a,.selected-actions button{padding:11px 10px;border:1px solid #202124;text-align:center;text-decoration:none;font-size:0.75rem}.copy-status{min-height:18px;font-size:0.6875rem;margin:10px 0 0}
footer{padding:22px 40px;border-top:1px solid var(--line);display:flex;gap:28px;justify-content:flex-end;font-size:0.6875rem;color:var(--muted)}footer span{margin-right:auto}noscript p{padding:20px 40px}
:root[data-theme=dark]{--paper:#202124;--ink:#fff;--line:#44474b;--muted:#b6b9bd;color-scheme:dark}
@media(prefers-color-scheme:dark){:root[data-theme=system]{--paper:#202124;--ink:#fff;--line:#44474b;--muted:#b6b9bd;color-scheme:dark}}
.inspector{color-scheme:light}.inspector :focus-visible{outline-color:#202124}
@media(max-width:1050px){.controls{gap:15px;flex-wrap:wrap}.search{flex-basis:100%;min-width:0}.intro p{font-size:0.875rem}.workbench{grid-template-columns:minmax(0,1fr) 250px;gap:22px}.icon-grid{grid-template-columns:repeat(auto-fill,minmax(92px,1fr))}}
@media(max-width:650px){.site-header{padding:21px 20px;align-items:flex-start;flex-direction:column;gap:20px}.brand{font-size:1.75rem}.site-header nav{width:100%;justify-content:space-between;gap:16px;font-size:0.75rem}.bundle-link{padding:9px 10px;gap:8px}.bundle-link svg{width:18px;height:18px}main{padding:0 20px 30px}.intro{margin:30px 0 28px;display:block}.intro h1{font-size:clamp(28px,calc((100vw - 40px)/8.2),49px)}.intro p{font-size:0.8125rem;margin-top:18px}.controls{gap:18px 12px}.controls legend,.controls label{font-size:0.6875rem}.segments button{padding:8px 9px;font-size:0.75rem}.size-control select{font-size:0.75rem}.controls fieldset:last-child{margin-left:0}.categories{gap:3px 18px;padding:15px 0}.categories button{font-size:0.6875rem}.workbench{grid-template-columns:1fr}.inspector{order:-1;position:static;padding:16px;display:grid;grid-template-columns:100px minmax(0,1fr);column-gap:18px;row-gap:12px}.stage-heading{grid-column:1/-1;margin:0}.stage{grid-column:1;grid-row:2/4;align-self:start}.selected-details{grid-column:2;grid-row:2}.selected-category{margin:0 0 4px;font-size:0.625rem}.selected-details h2{font-size:1.5rem}.filename{margin:5px 0 0;font-size:0.625rem}.weight-comparison{grid-column:2;grid-row:3;border:0;padding:0;margin:0;gap:8px}.weight-comparison svg{width:23px;height:23px}.weight-comparison button{gap:4px}.selected-actions{grid-column:1/-1;flex-direction:row;gap:9px}.selected-actions>*{flex:1}.selected-actions a,.selected-actions button{font-size:0.6875rem;padding:10px 6px}.copy-status{grid-column:1/-1;margin:-4px 0 0;min-height:0}.copy-status:empty{display:none}.collection-heading{margin-top:3px}.icon-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.icon-card{height:113px}.icon-card span{font-size:0.5625rem}footer{padding:20px;flex-wrap:wrap;justify-content:flex-start;gap:12px 24px}footer span{flex-basis:100%}}
.category-bar{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:20px 0;font-size:0.75rem}.catalog-field{display:flex;align-items:center;gap:12px;min-width:0}.category-bar select{background:var(--paper);color:var(--ink);border:1px solid var(--line);padding:10px 12px;min-width:0;max-width:100%;border-radius:0}.category-filter select{width:260px}.sort-filter select{width:150px}.category-bar>span{color:var(--muted);margin-left:auto}.collection-summary{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:20px;font-size:0.75rem;color:var(--muted)}#recommended-size{font-size:0.625rem;margin:-12px 0 20px}#recommended-size:empty{display:none}@media(max-width:650px){.category-bar{gap:12px}.catalog-field{width:100%}.catalog-field label{width:65px;flex:none}.category-bar select{flex:1;width:auto;font-size:0.75rem}.category-bar>span{width:100%;text-align:right;font-size:0.625rem}#recommended-size{margin:7px 0 0}.collection-summary{font-size:0.6875rem}}

.png-options{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:0.75rem}.png-options select{min-width:110px;background:transparent;border:1px solid #202124;padding:8px;border-radius:0}.png-options option{background:#ff5c35;color:#202124}.png-hint{font-size:0.625rem;margin:7px 0 14px}.selected-actions #copy-icon{grid-column:1/-1;border:0;padding:4px;text-decoration:underline;text-underline-offset:4px;font-size:0.6875rem}.selected-actions button:disabled{cursor:progress;opacity:.6}@media(max-width:650px){.png-options,.png-hint{grid-column:1/-1}.png-hint{margin:-7px 0 0}.selected-actions{gap:9px}.png-options select{min-height:40px}}

.catalog-tools{display:flex;align-items:flex-end;gap:26px;padding:25px 0;border-bottom:1px solid var(--line)}.catalog-tools .search{font-size:0.75rem;min-width:0}.appearance-control{border:0;padding:0;margin:0;min-width:0;flex:none}.appearance-control legend{font-size:0.75rem;padding:0;margin-bottom:9px}
.icon-card{scroll-margin-top:calc(var(--catalog-settings-height,0px) + 16px)}
.catalog-settings{position:sticky;top:0;z-index:20;background:var(--paper)}.customizer{background:var(--paper);max-height:45vh;max-height:45dvh;overflow:auto;scrollbar-width:thin;border-bottom:1px solid var(--line);padding:20px 0 24px}.customizer-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:22px}.customizer-heading h2{font-size:1.25rem;font-weight:500;line-height:1.3;margin:0}.customizer-heading button{padding:5px 0;text-decoration:underline;text-underline-offset:5px;font-size:0.75rem}
.controls{display:grid;grid-template-columns:minmax(180px,1fr) minmax(220px,1.15fr) minmax(140px,.8fr) minmax(180px,1fr);gap:28px;align-items:start;border:0;padding:0}.controls legend{display:flex;justify-content:space-between;width:100%}.controls output{font-size:0.8125rem;font-variant-numeric:tabular-nums}.controls input[type=range]{appearance:none;display:block;width:100%;height:4px;margin:16px 0 21px;border:0;border-radius:0;background:linear-gradient(to right,var(--orange) 0 var(--range-fill,0%),var(--line) var(--range-fill,0%) 100%);cursor:pointer}.controls input[type=range]::-webkit-slider-thumb{appearance:none;width:16px;height:16px;border:0;border-radius:50%;background:var(--orange)}.controls input[type=range]::-moz-range-thumb{width:16px;height:16px;border:0;border-radius:50%;background:var(--orange)}.controls input[type=range]::-moz-range-track{background:transparent}.size-control>span{display:flex;justify-content:space-between}.color-inputs{display:flex;min-width:0;height:43px;border:1px solid var(--line)}.color-inputs input[type=color]{appearance:none;width:43px;height:41px;border:0;padding:5px;background:transparent;flex:none;cursor:pointer}.color-inputs input[type=text]{min-width:0;width:100%;border:0;border-left:1px solid var(--line);border-radius:0;padding:8px;background:var(--paper);font-size:0.75rem}.color-inputs input[aria-invalid=true]{outline:2px solid var(--orange);outline-offset:-2px}.control-note{font-size:0.6875rem!important;line-height:1.5;color:var(--muted);margin:8px 0 0}.fixed-control{padding-top:1px}.fixed-control label{display:flex;gap:8px;align-items:center;line-height:1.5}.fixed-control input{margin:0;width:17px;height:17px;accent-color:var(--orange);flex:none}.stroke-control .segments{height:32px}.stroke-control .segments button{font-size:0.6875rem;padding:5px 10px;flex:1}
.icon-grid{background:var(--preview-paper,var(--paper));border-color:var(--preview-line,var(--line))}.icon-card{border-color:var(--preview-line,var(--line));color:var(--preview-ink,var(--ink))}.icon-card[aria-pressed=true],.icon-card:hover{color:var(--orange)}.icon-card:hover{background:color-mix(in srgb,var(--orange) 5%,var(--preview-paper,var(--paper)))}
.stage{background-color:var(--preview-paper,var(--paper));color:var(--preview-ink,var(--ink));background-image:linear-gradient(to right,color-mix(in srgb,var(--preview-ink,var(--ink)) 10%,transparent) 1px,transparent 1px),linear-gradient(to bottom,color-mix(in srgb,var(--preview-ink,var(--ink)) 10%,transparent) 1px,transparent 1px)}.weight-comparison svg{background:var(--preview-paper,var(--paper));width:32px;height:32px}
@media(max-width:1100px){.controls{grid-template-columns:repeat(2,minmax(0,1fr));gap:25px 35px}}
@media(min-width:651px){.inspector{top:calc(var(--catalog-settings-height,0px) + 22px);max-height:calc(100vh - var(--catalog-settings-height,0px) - 44px);max-height:calc(100dvh - var(--catalog-settings-height,0px) - 44px);overflow:auto;scrollbar-width:thin}}
@media(max-width:650px){.catalog-tools{flex-wrap:wrap;gap:20px;padding:20px 0}.catalog-tools .search{flex-basis:100%}.appearance-control .segments{height:38px}.customizer{padding:20px 0}.customizer-heading{margin-bottom:20px}.customizer-heading h2{font-size:1.1875rem}.controls{grid-template-columns:1fr;gap:22px}.controls label,.controls legend{font-size:0.75rem}.control-note{margin-top:7px}.color-inputs{max-width:100%}.stroke-control .segments{max-width:300px}.fixed-control{padding:0}}

/* Explicit language links also work without JavaScript. */
.language-switch{display:inline-flex;align-items:center;gap:2px;flex:none;font-size:0.75rem;line-height:1.25}
.language-switch a{padding:10px 8px;text-decoration:none;border-bottom:2px solid transparent;white-space:nowrap}
.language-switch a[aria-current="true"]{border-bottom-color:var(--orange)}
.language-switch a:hover{border-bottom-color:currentColor}
.site-header nav{margin-left:auto}
@media(max-width:650px){.site-header{flex-direction:row;flex-wrap:wrap}.site-header .brand{order:0}.site-header .language-switch{order:1;margin-left:auto}.site-header nav{order:2}}

/* Group dividers sit between complete grids, so each category starts a new row. */
.collection-heading{flex-wrap:wrap;gap:4px 15px}
.collection{--catalog-columns:repeat(auto-fill,minmax(105px,1fr));min-width:0}
.icon-grid,.icon-group-grid{grid-template-columns:var(--catalog-columns)}
.icon-grid[data-grouped=true]{display:flex;flex-direction:column;gap:28px;border:0;background:none}
.icon-group{min-width:0}
.icon-group-heading{display:flex;align-items:center;gap:12px;margin:0 0 12px;font-size:0.875rem;line-height:1.4;font-weight:500;color:var(--ink);scroll-margin-top:calc(var(--catalog-settings-height,0px) + 16px)}
.icon-group-heading::before{content:"";width:24px;height:1px;flex:none;background:var(--orange)}
.icon-group-count{margin-left:auto;font-size:0.6875rem;font-weight:400;color:var(--muted);white-space:nowrap}
.icon-group-grid{display:grid;border-top:1px solid var(--preview-line,var(--line));border-left:1px solid var(--preview-line,var(--line));background:var(--preview-paper,var(--paper))}
@media(max-width:1050px){.collection{--catalog-columns:repeat(auto-fill,minmax(92px,1fr))}}
@media(max-width:650px){.collection{--catalog-columns:repeat(3,minmax(0,1fr))}.icon-group-heading{font-size:0.8125rem;gap:10px}.icon-group-heading::before{width:18px}.icon-group-count{font-size:0.625rem}.icon-grid[data-grouped=true]{gap:24px}}

/* Apple-design review: direct feedback and accessible control sizing. */
.site-header nav{flex-wrap:wrap;row-gap:4px}.brand{max-width:100%;white-space:normal}
.site-header nav a,.language-switch a,footer a{display:inline-flex;align-items:center;min-height:44px}
.language-switch a{min-width:44px;justify-content:center}
.customizer{max-height:none;overflow:visible}
.customizer-heading button,.segments,.segments button,.catalog-field select,.search input,.color-inputs{min-height:44px}
.color-inputs input[type=color]{width:44px;height:42px}
.stroke-control .segments{height:44px}.stroke-control .segments button{min-width:0;padding:4px}
.controls input[type=range]{height:44px;margin:0;background-size:100% 4px;background-position:center;background-repeat:no-repeat}
.controls input[type=range]:active::-webkit-slider-thumb{box-shadow:0 0 0 4px color-mix(in srgb,var(--orange) 25%,transparent)}
.controls input[type=range]:active::-moz-range-thumb{box-shadow:0 0 0 4px color-mix(in srgb,var(--orange) 25%,transparent)}
.fixed-control label,.stage-heading label{min-height:44px;display:flex;align-items:center}
.inspector :focus-visible{outline-color:#202124}
button:not(:disabled):active,.download-button:active{box-shadow:inset 0 0 0 1px currentColor}
.site-header nav a:active,footer a:active{text-decoration:underline}
#color-hint{min-height:1.5em}.color-control:has([aria-invalid=true]) #color-hint{color:var(--ink);font-weight:600}
.catalog-settings[data-flow=true]{position:static}
.catalog-settings[data-flow=true]~.workbench .inspector{position:static;max-height:none;overflow:visible}
@media(max-width:650px){.customizer{padding:12px 0}.customizer-heading{margin-bottom:4px;flex-wrap:wrap}.controls{grid-template-columns:repeat(auto-fit,minmax(min(100%,8rem),1fr));gap:12px}.color-control,.fixed-control{grid-column:1/-1}.fixed-control .control-note{margin-top:0}}
@media(prefers-contrast:more){:root{--muted:var(--ink);--line:currentColor}:focus-visible{outline-width:3px}}

.icon-group-heading{flex-wrap:wrap}.icon-group-heading>span:first-of-type{min-width:0;overflow-wrap:anywhere}
@media(max-width:650px){.collection{--catalog-columns:repeat(auto-fit,minmax(min(100%,6rem),1fr))}}

.site-header .brand{font-size:30px}@media(max-width:650px){.site-header .brand{font-size:25px}}

.color-inputs{height:46px;min-height:46px}.color-inputs input[type=color]{height:44px}
.segments,.stroke-control .segments{height:46px;min-height:46px}
.catalog-settings[data-flow=true]~.workbench .inspector{display:block}
.catalog-settings[data-flow=true]~.workbench .stage{width:100%;height:auto;aspect-ratio:1}

/* Linked mobile selections stay below the sticky catalog controls. */
#selected-name{scroll-margin-top:calc(var(--catalog-settings-height,0px) + 16px)}