.sif{--sif-c:#0078d4;--sif-line:rgba(128,128,128,.35);--sif-soft:rgba(128,128,128,.12);--sif-focus:#0078d4;margin:1.5rem 0;font-size:16px;line-height:1.4}
.sif *{box-sizing:border-box}
.sif button,.sif input,.sif select,.sif textarea{font:inherit;color:inherit}
.sif :focus-visible{outline:2px solid var(--sif-focus);outline-offset:2px}
.sif-bar{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;margin-bottom:1rem}
.sif-q{flex:1 1 220px;min-width:0;padding:.55rem .75rem;border:1px solid var(--sif-line);border-radius:6px;background:transparent}
.sif-seg{display:flex;border:1px solid var(--sif-line);border-radius:6px;overflow:hidden}
.sif-seg button{padding:.5rem .9rem;border:0;background:transparent;cursor:pointer}
.sif-seg button[aria-pressed="true"]{background:var(--sif-soft);font-weight:600}
.sif-count{opacity:.7;font-size:.9em}
.sif-body{display:flex;gap:1.5rem;align-items:flex-start}
.sif-main{flex:1 1 auto;min-width:0}
.sif-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:.4rem}
.sif-tile{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:6px;background:transparent;cursor:pointer;padding:0}
.sif-tile:hover{background:var(--sif-soft)}
.sif-tile[aria-pressed="true"]{border-color:var(--sif-line);background:var(--sif-soft)}
.sif-tile svg{width:28px;height:28px;fill:var(--sif-c)}
.sif-more{display:block;margin:1rem auto 0;padding:.55rem 1.2rem;border:1px solid var(--sif-line);border-radius:6px;background:transparent;cursor:pointer}
.sif-empty{padding:2rem 0;opacity:.8}
.sif-panel{flex:0 0 320px;position:sticky;top:5rem;display:flex;flex-direction:column;gap:.9rem}
.sif-preview{display:flex;align-items:center;justify-content:center;height:140px;border-radius:8px;background:var(--sif-soft)}
.sif-preview svg{width:96px;height:96px;fill:var(--sif-c)}
.sif-name{font-weight:600;word-break:break-word}
.sif-row{display:flex;flex-direction:column;gap:.35rem}
.sif-row>label,.sif-label{font-size:.9em;opacity:.8}
.sif-colors{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.sif-sw{width:26px;height:26px;border-radius:50%;border:1px solid var(--sif-line);cursor:pointer;padding:0}
.sif-sw[aria-pressed="true"]{outline:2px solid currentColor;outline-offset:2px}
.sif-hex{width:6.5rem;padding:.35rem .5rem;border:1px solid var(--sif-line);border-radius:6px;background:transparent;font-family:ui-monospace,Menlo,Consolas,monospace}
.sif-pick{width:34px;height:30px;padding:0;border:1px solid var(--sif-line);border-radius:6px;background:transparent;cursor:pointer}
.sif-two{display:flex;gap:.75rem}
.sif-two .sif-row{flex:1}
.sif-rot{padding:.4rem .5rem;border:1px solid var(--sif-line);border-radius:6px;background:transparent}
.sif-out{display:flex;flex-direction:column;gap:.35rem}
.sif-out textarea{width:100%;height:4.5rem;padding:.5rem;border:1px solid var(--sif-line);border-radius:6px;background:transparent;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.8em;resize:vertical}
.sif-btns{display:flex;gap:.5rem;flex-wrap:wrap}
.sif-btn{padding:.45rem .9rem;border:1px solid var(--sif-line);border-radius:6px;background:transparent;cursor:pointer}
.sif-btn:hover{background:var(--sif-soft)}
.sif-status{min-height:1.3em;font-size:.9em}
@media (max-width:800px){
	.sif-body{flex-direction:column}
	.sif-panel{flex:none;width:100%;position:static;order:-1}
}
@media (prefers-reduced-motion:no-preference){.sif-tile{transition:background .12s}}