.sm{grid-template-columns:minmax(0,1fr);display:grid}.sm-grid{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:start;gap:18px;display:grid}.sm-make,.sm-panel{grid-template-columns:minmax(0,1fr);gap:14px;min-width:0;display:grid}.sm-panel[hidden],.sm-only-draw[hidden],.sm-empty[hidden],.sm-photo-opts[hidden],.sm-bold[hidden]{display:none}.sm-card{border-radius:var(--radius);background:var(--card);border:1px solid var(--line);min-width:0;box-shadow:var(--edge);grid-template-columns:minmax(0,1fr);gap:14px;padding:16px;display:grid}.sm-tabs{border-radius:var(--radius-pill);border:1px solid var(--line);background:var(--bg-soft);gap:4px;padding:4px;display:flex}.sm-tabs [role=tab]{border-radius:var(--radius-pill);min-width:0;min-height:44px;color:var(--ink-2);white-space:nowrap;cursor:pointer;background:0 0;border:0;flex:1 1 0;justify-content:center;align-items:center;gap:8px;padding:0 12px;font-size:.95rem;font-weight:600;display:inline-flex}.sm-tabs [role=tab] svg{flex:none;width:18px;height:18px}.sm-tabs [role=tab]:hover{color:var(--ink)}.sm-tabs [role=tab][aria-selected=true]{background:var(--surface-2);color:var(--ink);box-shadow:0 0 0 1px var(--line-strong), 0 0 24px -8px #7cc4ff80}.sm-tabs [role=tab]:focus-visible{outline:3px solid var(--focus);outline-offset:2px}.sm-pad-wrap{position:relative}.sm-pad{border-radius:var(--radius-sm);border:1px solid var(--line-strong);touch-action:none;cursor:crosshair;background:#fff;width:100%;height:230px;display:block}.sm-pad-line{color:#14161f61;pointer-events:none;border-bottom:1.5px solid #14161f38;align-items:flex-end;gap:8px;font-size:1.1rem;line-height:1.6;display:flex;position:absolute;bottom:26%;left:7%;right:7%}.sm-pad-hint{color:#14161f59;pointer-events:none;transition:opacity .2s var(--ease);place-items:center;padding-bottom:12%;font-size:.95rem;display:grid;position:absolute;inset:0}.sm-pad-wrap.sm-drawn .sm-pad-hint{opacity:0}.sm-row{flex-wrap:wrap;align-items:center;gap:10px 14px;display:flex}.sm-field{gap:6px;min-width:0;font-size:.92rem;font-weight:650;display:grid}.sm-field>span{justify-content:space-between;gap:8px;display:flex}.sm-field output{font-family:var(--font-mono);color:var(--muted);font-size:.82rem;font-weight:500}.sm-grow{flex:160px}.sm-field input[type=range]{width:100%;height:32px;accent-color:var(--electric)}.sm-field input[type=text]{border-radius:var(--radius-sm);border:1px solid var(--line-strong);background:var(--surface-2);width:100%;min-width:0;height:48px;color:var(--ink);padding:0 14px;font-size:1.05rem;font-weight:400}.sm-field input[type=text]:focus-visible{border-color:var(--sky);outline:none;box-shadow:0 0 0 4px #7cc4ff2e}.sm-btn{justify-content:center;align-items:center;gap:6px;min-height:44px;display:inline-flex}.sm-btn svg{width:16px;height:16px}.sm-check{cursor:pointer;align-items:center;gap:8px;min-height:44px;font-size:.92rem;display:inline-flex}.sm-check input{width:18px;height:18px;accent-color:var(--electric)}.sm-legend{margin:0 0 8px;padding:0;font-size:.92rem;font-weight:650}.sm-hint{color:var(--muted);margin:0;font-size:.85rem}.sm-fonts{border:0;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;min-width:0;margin:0;padding:0;display:grid}.sm-font{border-radius:var(--radius-sm);border:1px solid var(--line);color:#14161f;cursor:pointer;background:#fff;place-items:center;gap:2px;min-height:78px;padding:8px 10px;display:grid;position:relative;overflow:hidden}.sm-font input{opacity:0;pointer-events:none;position:absolute}.sm-font:has(input:checked){box-shadow:0 0 0 3px var(--sky)}.sm-font:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:3px}.sm-sample{white-space:nowrap;text-overflow:ellipsis;max-width:100%;font-size:1.7rem;line-height:1.25;overflow:hidden}.sm-font small{color:#5b6178;font-size:.72rem}.sm-inks{border:0;flex-wrap:wrap;align-items:center;gap:10px;margin:0;padding:0;display:flex}.sm-inks legend{float:left;margin:0 6px 0 0;padding:0;font-size:.92rem;font-weight:650}.sm-ink{cursor:pointer;border-radius:50%;place-items:center;width:44px;height:44px;display:grid;position:relative}.sm-ink:before{content:"";background:var(--sm-ink,#14161f);width:32px;height:32px;box-shadow:0 0 0 2px var(--surface), 0 0 0 3px var(--line-strong);border-radius:50%}.sm-ink input{opacity:0;pointer-events:none;position:absolute}.sm-ink:has(input:checked):before{box-shadow:0 0 0 2px var(--surface), 0 0 0 4px var(--sky)}.sm-ink:has(input:focus-visible){outline:3px solid var(--focus)}.sm-ink-black{--sm-ink:#14161f}.sm-ink-blue{--sm-ink:#1f3fbf}.sm-ink-navy{--sm-ink:#0f1f66}.sm-ink-custom:before{background:conic-gradient(#ff5a5a,#ffd23f,#4cd964,#34aadc,#5856d6,#ff2d92,#ff5a5a)}.sm-colour{border:1px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--surface-2);cursor:pointer;width:44px;height:44px;padding:2px}@media (width<=900px){.sm-grid{grid-template-columns:minmax(0,1fr)}}@media (width<=640px){.sm-card{padding:12px}.sm-pad{height:200px}.sm-fonts{grid-template-columns:1fr 1fr}.sm-sample{font-size:1.35rem}.sm-tabs [role=tab]{padding:0 8px;font-size:.9rem}}@media (width<=360px){.sm-tabs [role=tab] svg{display:none}}.sm-inks.sm-dim .sm-ink,.sm-inks.sm-dim .sm-colour{opacity:.4}.sm-out{position:sticky;top:96px}.sm-out-h{justify-content:space-between;align-items:center;gap:8px;display:flex}.sm-out-h h2{margin:0}.sm-stage{border-radius:var(--radius-sm);border:1px solid var(--line);place-items:center;min-height:190px;padding:18px;display:grid;position:relative;overflow:hidden}.sm-stage[data-bg=checks]{background:repeating-conic-gradient(#e6e9f2 0 25%, #fff 0 50%) 0 0 / 18px 18px}.sm-stage[data-bg=white]{background:#fff}.sm-stage[data-bg=dark]{background:#161a2c}.sm-stage img{object-fit:contain;max-width:100%;max-height:220px;display:block}.sm-stage img[hidden]{display:none}.sm-empty{color:#5b6178;text-align:center;max-width:26ch;margin:0;font-size:.92rem}.sm-stage[data-bg=dark] .sm-empty{color:#aab2d0}.sm-bgs{gap:6px;display:flex}.sm-bg{border:1px solid var(--line-strong);cursor:pointer;border-radius:50%;width:30px;height:30px;padding:0;position:relative}.sm-bg:after{content:"";position:absolute;inset:-7px}.sm-bg[aria-pressed=true]{box-shadow:0 0 0 2px var(--sky)}.sm-bg-checks{background:repeating-conic-gradient(#d5d9e6 0 25%, #fff 0 50%) 0 0 / 10px 10px}.sm-bg-white{background:#fff}.sm-bg-dark{background:#161a2c}.sm-meta{font-family:var(--font-mono);color:var(--muted);text-align:center;margin:0;font-size:.8rem}.sm-out .seg{width:100%}.sm-out .seg label{flex:auto;justify-content:center}.sm-actions{grid-template-columns:1fr 1fr;gap:8px;display:grid}.sm-actions .btn,.sm-actions .chip-btn{justify-content:center;align-items:center;gap:8px;min-height:46px;display:inline-flex}.sm-actions svg{width:17px;height:17px}.sm-actions .sm-wide{grid-column:1/-1}.sm-actions button:disabled{opacity:.5;cursor:not-allowed}@media (width<=900px){.sm-out{position:static}}.sm-actions:has(.sm-only-draw[hidden]) [data-copy]{grid-column:1/-1}@media (width<=700px),(pointer:coarse){.sm-bgs{gap:0}.sm-bg{width:44px;height:44px;box-shadow:inset 0 0 0 1px var(--line-strong);background-clip:padding-box;border:7px solid #0000}.sm-bg:after{content:none}.sm-bg[aria-pressed=true]{box-shadow:inset 0 0 0 3px var(--sky)}}