@layer components{.sh-blue{--k:var(--blue);--k-ink:var(--blue-ink);--k-paper:var(--blue-paper);--k-paper-2:var(--blue-paper-2)}.sh-amber{--k:var(--amber);--k-ink:var(--amber-ink);--k-paper:var(--amber-paper);--k-paper-2:var(--amber-paper-2)}.sh-teal{--k:var(--teal);--k-ink:var(--teal-ink);--k-paper:var(--teal-paper);--k-paper-2:var(--teal-paper-2)}.sh-red{--k:var(--red);--k-ink:var(--red-ink);--k-paper:var(--red-paper);--k-paper-2:var(--red-paper-2)}.sh-card{border:2px solid var(--k-paper-2);box-shadow:0 4px 0 var(--k-paper-2);-webkit-tap-highlight-color:transparent;text-align:start;background:#fff;border-radius:18px;transition:transform 80ms ease-out,box-shadow 80ms ease-out,background .12s;position:relative}a.sh-card,button.sh-card{cursor:pointer}a.sh-card:active,button.sh-card:active{box-shadow:0 0 0 var(--k-paper-2);transform:translateY(4px)}@media (hover:hover){a.sh-card:hover,button.sh-card:hover{box-shadow:0 6px 0 var(--k-paper-2);transform:translateY(-2px)}a.sh-card:hover:active,button.sh-card:hover:active{box-shadow:0 0 0 var(--k-paper-2);transform:translateY(4px)}}.sh-cover{background:radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--k-paper-2) 45%, transparent) 0 30%, transparent 31%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--k-paper-2) 45%, transparent) 0 36%, transparent 37%), var(--k-paper)}.sh-pic{box-shadow:0 3px 0 var(--k-paper-2);background:#fff;border-radius:14px;flex:none;place-items:center;display:grid}.sh-feature{background:radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--k-paper-2) 50%, transparent) 0 22%, transparent 23%), radial-gradient(circle at 100% 110%, color-mix(in srgb, var(--k-paper-2) 50%, transparent) 0 30%, transparent 31%), var(--k-paper);box-shadow:0 5px 0 var(--k-paper-2);border-radius:22px}.sh-new{background:var(--amber);color:#3d2a05;font-family:var(--font-display);border-radius:999px;flex:none;align-items:center;padding:0 .55rem;font-size:.875rem;font-weight:700;line-height:1.45;display:inline-flex}.sh-tabs{scrollbar-width:none;align-items:center;gap:.5rem;margin-inline:-1rem;padding:.2rem 1rem .5rem;scroll-padding-inline:1rem;display:flex;overflow-x:auto}.sh-tabs::-webkit-scrollbar{display:none}.sh-tab,.sh-select>select{border:2px solid var(--line);min-height:2.75rem;box-shadow:0 3px 0 var(--line);font-family:var(--font-display);color:var(--ink-2);white-space:nowrap;cursor:pointer;background:#fff;border-radius:14px;flex:none;align-items:center;gap:.4rem;padding:.25rem .9rem;font-size:.95rem;font-weight:700;line-height:1.2;transition:background .12s,border-color .12s,box-shadow .12s;display:inline-flex}.sh-tab:hover{background:var(--surface-2)}.sh-tab[aria-selected=true]{background:var(--k-paper,var(--blue-paper));border-color:var(--k-paper-2,var(--blue-paper-2));box-shadow:0 3px 0 var(--k-paper-2,var(--blue-paper-2));color:var(--k-ink,var(--blue-ink))}.sh-tab .n{opacity:.8;font-weight:600}.sh-select{flex:none;position:relative}.sh-select>select{appearance:none;padding-inline:.9rem 2.1rem}.sh-select>select:focus-visible{outline:3px solid var(--blue);outline-offset:3px}.sh-select>svg{inset-inline-end:.75rem;pointer-events:none;color:var(--ink-2);position:absolute;top:50%;translate:0 -50%}.sh-strip{overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;gap:.75rem;margin-inline:-1rem;padding:.25rem 1rem .6rem;scroll-padding-inline:1rem;display:flex;overflow-x:auto}.sh-strip::-webkit-scrollbar{display:none}.sh-strip>*{scroll-snap-align:start;flex:none}.sh-drop{text-align:center;border:2px dashed var(--blue-paper-2);background:var(--blue-paper);color:var(--blue-ink);cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:18px;flex-direction:column;justify-content:center;align-items:center;gap:.2rem;transition:background .12s,border-color .12s,transform .12s;display:flex}.sh-drop:hover{border-color:var(--blue);background:color-mix(in srgb, var(--blue-paper) 70%, #fff)}.sh-drop:active{transform:scale(.98)}.sh-drop[data-over=true]{border-color:var(--blue);background:var(--blue-paper-2);border-style:solid;transform:scale(1.02)}.sh-in{animation:sh-rise .32s var(--ease-out) both;animation-delay:calc(min(var(--i,0), 9) * 36ms)}@keyframes sh-rise{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}}
