/* Sokosoko design system — component stylesheet (tokens + sk-* classes), copied from the
   design-system artifact's tokens.json and components/bundle.css. Its Google Fonts
   @import is dropped: Nunito is self-hosted in style.css. Do not edit by hand. */
:root{--paper:#ffffff;--paper-soft:#faf7f0;--paper-sunk:#f3efe6;--line:#e6e0d4;--line-strong:#8a909c;--ink:#2f3542;--ink-muted:#666b7a;--art-line:#2f3542;--well:#f3efe6;--scrim:rgba(28,31,38,0.48);--brand:#f7c948;--brand-deep:#e0a91b;--brand-soft:#fdf1cc;--on-brand:#2f3542;--highlight:#f7c948;--link:#2f6fb0;--focus:#2f6fb0;--fav:#d94b5c;--fill-skin:#f8d5b8;--fill-sky:#bcdcf2;--fill-mint:#bfe3cf;--fill-pink:#f6c6cf;--fill-lilac:#d9d1f2;--fill-yellow:#fdf1cc;--success:#276b43;--success-soft:#e3f4ea;--warning:#9a5800;--warning-soft:#fff1d6;--danger:#b23344;--danger-soft:#fde6e8;--info:#2f6fb0;--info-soft:#e5f0fb;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:80px;--radius-xs:4px;--radius-sm:6px;--radius-md:12px;--radius-lg:20px;--radius-pill:999px;--container-max:1080px;--header-h:72px;--header-h-sm:56px;--bottomnav-h:56px;--tap-min:44px;--control-h:44px;--control-h-sm:36px;--icon-md:20px;--z-sticky:100;--z-dropdown:200;--z-overlay:900;--z-modal:1000;--z-toast:1100;--duration-fast:120ms;--duration-base:180ms;--duration-slow:280ms;--ease-standard:cubic-bezier(0.2, 0, 0, 1);--ease-out:cubic-bezier(0, 0, 0.2, 1);--shadow-hover:0 6px 16px rgba(47,53,66,0.10);--shadow-pop:0 12px 32px rgba(47,53,66,0.16);--shadow-sheet:0 -8px 24px rgba(47,53,66,0.12);--font-display:"Nunito", "Noto Sans SC", "PingFang SC", system-ui, sans-serif;--font-sans:"Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;}
/* Sokosoko component styles — every value is a token. Mobile first. Responsive rules are CONTAINER queries at 768px (bp-tablet) and 1024px (bp-desktop): body is the default container, so they behave like media queries; any element with .sk-cq (or a .sk-device frame) becomes its own breakpoint context. */
.sk-cq{container-type:inline-size}
*,*::before,*::after{box-sizing:border-box}
body{container-type:inline-size;margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-sans);-webkit-font-smoothing:antialiased}
.sk-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sk-ico{width:var(--icon-md);height:var(--icon-md);flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
:where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:2px solid var(--focus);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Layout */
.sk-container{max-width:var(--container-max);margin:0 auto;padding:0 var(--space-4)}
.sk-section{padding:var(--space-7) 0}
.sk-section--soft{background:var(--paper-soft)}
.sk-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}
@container (min-width:768px){.sk-container{padding:0 var(--space-5)}.sk-section{padding:var(--space-8) 0}.sk-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-5)}}
@container (min-width:1024px){.sk-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}

/* Button */
.sk-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--control-h);font:700 14px/20px var(--font-sans);letter-spacing:.04em;padding:var(--space-3) var(--space-5);border-radius:var(--radius-pill);border:2px solid transparent;cursor:pointer;text-decoration:none;transition:background var(--duration-fast) var(--ease-standard),transform var(--duration-fast) var(--ease-standard)}
.sk-btn--primary{background:var(--brand);color:var(--on-brand)}
.sk-btn--primary:hover{background:var(--brand-deep)}
.sk-btn--primary:active{transform:translateY(1px)}
.sk-btn--secondary{background:var(--paper);color:var(--ink);border-color:var(--line-strong)}
.sk-btn--secondary:hover{background:var(--paper-sunk)}
.sk-btn--ghost{background:transparent;color:var(--link);padding-left:var(--space-2);padding-right:var(--space-2)}
.sk-btn--sm{min-height:var(--control-h-sm);padding:var(--space-2) var(--space-4);font-size:13px}
.sk-btn--block{display:flex;width:100%}
.sk-btn[disabled]{background:var(--paper-sunk);color:var(--ink-muted);border-color:transparent;cursor:not-allowed}
.sk-iconbtn{display:inline-grid;place-items:center;width:var(--tap-min);height:var(--tap-min);border-radius:var(--radius-pill);border:0;background:transparent;color:var(--ink);cursor:pointer}
.sk-iconbtn:hover{background:var(--paper-sunk)}

/* Tag & Badge */
.sk-tag{display:inline-flex;align-items:center;font:500 12px/18px var(--font-sans);padding:var(--space-1) var(--space-3);border-radius:var(--radius-pill);background:var(--paper-sunk);color:var(--ink);text-decoration:none;border:1px solid transparent;cursor:pointer}
.sk-tag:hover{border-color:var(--line-strong)}
.sk-tag[aria-pressed="true"]{background:var(--brand-soft);border-color:var(--brand-deep)}
.sk-tags{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.sk-tags--scroll{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:var(--space-1)}
.sk-tags--scroll .sk-tag{flex:none;padding:var(--space-2) var(--space-4)}
.sk-badge{display:inline-flex;align-items:center;font:700 11px/16px var(--font-display);letter-spacing:.06em;padding:2px var(--space-2);border-radius:var(--radius-pill);background:var(--brand);color:var(--on-brand)}
.sk-badge--new{background:var(--brand)}
.sk-badge--hot{background:var(--danger-soft);color:var(--danger)}
.sk-badge--neutral{background:var(--paper-sunk);color:var(--ink-muted)}
.sk-badge--success{background:var(--success-soft);color:var(--success)}

/* Inputs */
.sk-field{display:flex;flex-direction:column;gap:var(--space-1);max-width:420px}
.sk-field__label{font:700 14px/20px var(--font-sans);color:var(--ink)}
.sk-field__hint{font:400 12px/18px var(--font-sans);color:var(--ink-muted)}
.sk-field__error{font:500 12px/18px var(--font-sans);color:var(--danger);display:flex;gap:var(--space-1);align-items:center}
.sk-input,.sk-select,.sk-textarea{width:100%;min-height:var(--control-h);font:400 15px/22px var(--font-sans);color:var(--ink);background:var(--paper);border:1.5px solid var(--line-strong);border-radius:var(--radius-md);padding:var(--space-2) var(--space-4);transition:border-color var(--duration-fast)}
.sk-input::placeholder,.sk-textarea::placeholder{color:var(--ink-muted)}
.sk-input:focus,.sk-select:focus,.sk-textarea:focus{outline:none;border-color:var(--focus);box-shadow:0 0 0 3px var(--info-soft)}
.sk-input[aria-invalid="true"],.sk-textarea[aria-invalid="true"]{border-color:var(--danger)}
.sk-input:disabled{background:var(--paper-sunk);color:var(--ink-muted)}
.sk-textarea{min-height:112px;resize:vertical}
.sk-select{appearance:none;padding-right:var(--space-7);background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 22px) 50%,calc(100% - 16px) 50%;background-size:6px 6px;background-repeat:no-repeat}
.sk-search{display:flex;align-items:center;gap:var(--space-2);background:var(--paper-sunk);border:2px solid transparent;border-radius:var(--radius-pill);padding:var(--space-1) var(--space-1) var(--space-1) var(--space-4);max-width:560px;width:100%;color:var(--ink-muted)}
.sk-search:focus-within{border-color:var(--focus);background:var(--paper)}
.sk-search input{flex:1;border:0;background:transparent;font:400 15px/26px var(--font-sans);color:var(--ink);outline:none;min-width:0;min-height:36px}
.sk-search input::placeholder{color:var(--ink-muted)}
.sk-search--lg{padding:var(--space-2) var(--space-2) var(--space-2) var(--space-5);box-shadow:0 0 0 1px var(--line)}

/* Choice: checkbox, radio, switch */
.sk-choice{display:inline-flex;align-items:center;gap:var(--space-2);min-height:var(--tap-min);font:400 15px/22px var(--font-sans);color:var(--ink);cursor:pointer}
.sk-choice input{appearance:none;margin:0;width:20px;height:20px;border:2px solid var(--line-strong);background:var(--paper);display:grid;place-items:center;cursor:pointer;flex:none}
.sk-choice input[type=checkbox]{border-radius:var(--radius-xs)}
.sk-choice input[type=radio]{border-radius:var(--radius-pill)}
.sk-choice input:checked{background:var(--brand);border-color:var(--brand-deep)}
.sk-choice input[type=checkbox]:checked::after{content:"";width:5px;height:10px;border:solid var(--on-brand);border-width:0 2.5px 2.5px 0;transform:translateY(-1px) rotate(45deg)}
.sk-choice input[type=radio]:checked::after{content:"";width:8px;height:8px;border-radius:var(--radius-pill);background:var(--on-brand)}
.sk-switch{appearance:none;margin:0;width:44px;height:26px;border-radius:var(--radius-pill);background:var(--line-strong);position:relative;cursor:pointer;transition:background var(--duration-base) var(--ease-standard);flex:none}
.sk-switch::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:var(--radius-pill);background:var(--paper);transition:transform var(--duration-base) var(--ease-standard)}
.sk-switch:checked{background:var(--brand-deep)}
.sk-switch:checked::after{transform:translateX(18px);background:var(--on-brand)}

/* Tabs & segmented */
.sk-tabs{display:flex;gap:var(--space-5);border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.sk-tab{flex:none;min-height:var(--tap-min);padding:var(--space-2) 0;font:700 14px/20px var(--font-sans);color:var(--ink-muted);background:none;border:0;border-bottom:3px solid transparent;margin-bottom:-1px;cursor:pointer}
.sk-tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--brand)}
.sk-tab:hover{color:var(--ink)}
.sk-seg{display:inline-flex;background:var(--paper-sunk);border-radius:var(--radius-pill);padding:var(--space-1)}
.sk-seg button{min-height:36px;padding:0 var(--space-4);border:0;border-radius:var(--radius-pill);background:transparent;font:700 13px/20px var(--font-sans);color:var(--ink-muted);cursor:pointer}
.sk-seg button[aria-pressed="true"]{background:var(--paper);color:var(--ink);box-shadow:0 1px 2px rgba(47,53,66,.12)}

/* Pagination / Breadcrumb */
.sk-pager{display:flex;align-items:center;gap:var(--space-1);list-style:none;margin:0;padding:0}
.sk-pager a,.sk-pager span{display:grid;place-items:center;min-width:40px;height:40px;padding:0 var(--space-2);border-radius:var(--radius-pill);font:700 14px/1 var(--font-display);color:var(--ink);text-decoration:none}
.sk-pager a:hover{background:var(--paper-sunk)}
.sk-pager [aria-current="page"]{background:var(--brand);color:var(--on-brand)}
.sk-pager .is-gap{color:var(--ink-muted)}
.sk-crumbs{display:flex;flex-wrap:wrap;gap:var(--space-2);list-style:none;margin:0;padding:0;font:400 13px/20px var(--font-sans);color:var(--ink-muted)}
.sk-crumbs li+li::before{content:"/";margin-right:var(--space-2);color:var(--line-strong)}
.sk-crumbs a{color:var(--ink-muted);text-decoration:none}
.sk-crumbs a:hover{color:var(--link);text-decoration:underline}
.sk-crumbs [aria-current="page"]{color:var(--ink)}

/* Card */
.sk-card{display:block;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-md);padding:var(--space-2);text-decoration:none;color:var(--ink);transition:box-shadow var(--duration-base) var(--ease-standard),transform var(--duration-base) var(--ease-standard)}
@media (hover:hover){.sk-card:hover{box-shadow:var(--shadow-hover);transform:translateY(-2px)}}
.sk-card__well{aspect-ratio:1/1;background:var(--well);border-radius:var(--radius-sm);display:grid;place-items:center;position:relative;overflow:hidden}
.sk-card__well>svg,.sk-card__well>img{width:62%;height:auto}
.sk-card__fav{position:absolute;top:var(--space-1);right:var(--space-1);width:32px;height:32px;border-radius:var(--radius-pill);background:var(--paper);color:var(--fav);display:grid;place-items:center;border:0;cursor:pointer}
.sk-card__badge{position:absolute;top:var(--space-2);left:var(--space-2)}
.sk-card__title{font:400 13px/20px var(--font-sans);margin:var(--space-2) var(--space-1) var(--space-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@container (min-width:768px){.sk-card{padding:var(--space-3)}}
.sk-skel{background:var(--paper-sunk);border-radius:var(--radius-xs);animation:sk-pulse 1.4s var(--ease-standard) infinite}
@keyframes sk-pulse{50%{opacity:.55}}

/* Category */
.sk-cats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4) var(--space-2)}
@container (min-width:768px){.sk-cats{display:flex;justify-content:center;gap:var(--space-6)}}
.sk-cat{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);text-decoration:none;color:var(--ink);font:700 12px/18px var(--font-sans);text-align:center}
.sk-cat__disc{width:60px;height:60px;border-radius:var(--radius-pill);display:grid;place-items:center;transition:transform var(--duration-base) var(--ease-standard)}
.sk-cat__disc svg{width:60%;height:60%}
@container (min-width:768px){.sk-cat{font-size:14px;line-height:20px}.sk-cat__disc{width:88px;height:88px}}
@media (hover:hover){.sk-cat:hover .sk-cat__disc{transform:scale(1.05)}}

/* Header (desktop) / Topbar (mobile) / Bottom nav */
.sk-header{position:sticky;top:0;z-index:var(--z-sticky);display:flex;align-items:center;gap:var(--space-5);height:var(--header-h);padding:0 var(--space-5);background:var(--paper);border-bottom:1px solid var(--line)}
.sk-header .sk-search{max-width:320px;margin-left:auto}
.sk-logo{font:800 22px/1 var(--font-display);color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:var(--space-2);flex:none}
.sk-logo svg{width:28px;height:28px}
.sk-nav{display:flex;gap:var(--space-5);list-style:none;margin:0;padding:0}
.sk-nav a{font:700 14px/20px var(--font-sans);color:var(--ink);text-decoration:none;padding:var(--space-1) 0;border-bottom:3px solid transparent;white-space:nowrap}
.sk-nav a:hover,.sk-nav a[aria-current="page"]{border-bottom-color:var(--brand)}
.sk-topbar{position:sticky;top:0;z-index:var(--z-sticky);display:flex;align-items:center;gap:var(--space-1);height:var(--header-h-sm);padding:0 var(--space-1) 0 var(--space-4);background:var(--paper);border-bottom:1px solid var(--line)}
.sk-topbar .sk-logo{font-size:19px;margin-right:auto}
.sk-topbar .sk-logo svg{width:24px;height:24px}
.sk-bottomnav{position:sticky;bottom:0;z-index:var(--z-sticky);display:grid;grid-template-columns:repeat(4,1fr);height:var(--bottomnav-h);background:var(--paper);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom)}
.sk-bottomnav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font:500 11px/14px var(--font-sans);color:var(--ink-muted);text-decoration:none}
.sk-bottomnav a[aria-current="page"]{color:var(--ink)}
.sk-bottomnav a[aria-current="page"] .sk-bottomnav__pip{background:var(--brand)}
.sk-bottomnav__pip{display:grid;place-items:center;width:48px;height:26px;border-radius:var(--radius-pill)}
.sk-bottomnav .sk-ico{width:20px;height:20px}

/* Section heading */
.sk-h2-wrap{text-align:center;margin-bottom:var(--space-5)}
.sk-h2{font:700 18px/28px var(--font-display);letter-spacing:.04em;margin:0;position:relative;display:inline-block;padding:0 var(--space-3);z-index:0;color:var(--ink)}
.sk-h2::before{content:"";position:absolute;left:0;right:0;bottom:2px;height:10px;background:var(--highlight);border-radius:var(--radius-pill);z-index:-1}
.sk-h2-sub{display:block;font:500 12px/18px var(--font-sans);color:var(--ink-muted);letter-spacing:.12em;margin-top:var(--space-1)}
@container (min-width:768px){.sk-h2{font-size:22px;line-height:32px}.sk-h2::before{height:12px}.sk-h2-wrap{margin-bottom:var(--space-6)}}
.sk-h2-row{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:var(--space-4)}
.sk-h2-row .sk-h2-wrap{text-align:left;margin:0}

/* Hero */
.sk-hero{position:relative;overflow:hidden;background:var(--paper-soft);padding:var(--space-7) var(--space-4) var(--space-6);text-align:center}
.sk-hero__title{font:700 28px/38px var(--font-display);letter-spacing:.02em;margin:0 0 var(--space-2);color:var(--ink)}
.sk-hero__title mark{background:linear-gradient(transparent 62%,var(--highlight) 62%);color:inherit;padding:0 2px}
.sk-hero__sub{font:400 14px/22px var(--font-sans);color:var(--ink-muted);margin:0 0 var(--space-5)}
.sk-hero .sk-search{margin:0 auto var(--space-4)}
.sk-hero__blob{position:absolute;border-radius:var(--radius-pill);z-index:0}
.sk-hero>*:not(.sk-hero__blob){position:relative;z-index:1}
@container (min-width:768px){.sk-hero{padding:var(--space-8) var(--space-5)}.sk-hero__title{font-size:40px;line-height:52px}.sk-hero__sub{font-size:15px;line-height:26px}}

/* Notice / Toast */
.sk-notice{display:flex;gap:var(--space-3);align-items:flex-start;padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);background:var(--info-soft);color:var(--ink);font:400 14px/22px var(--font-sans)}
.sk-notice .sk-ico{margin-top:1px;color:var(--info)}
.sk-notice b{display:block;font-weight:700}
.sk-notice--success{background:var(--success-soft)}.sk-notice--success .sk-ico{color:var(--success)}
.sk-notice--warning{background:var(--warning-soft)}.sk-notice--warning .sk-ico{color:var(--warning)}
.sk-notice--danger{background:var(--danger-soft)}.sk-notice--danger .sk-ico{color:var(--danger)}
.sk-notice--brand{background:var(--brand-soft)}.sk-notice--brand .sk-ico{color:var(--ink)}
.sk-toast{display:inline-flex;align-items:center;gap:var(--space-2);min-height:var(--control-h);padding:var(--space-2) var(--space-5) var(--space-2) var(--space-4);border-radius:var(--radius-pill);background:var(--ink);color:var(--paper);font:500 14px/20px var(--font-sans);box-shadow:var(--shadow-pop)}
.sk-toast .sk-ico{color:var(--brand)}
.sk-toast a{color:var(--brand);font-weight:700;margin-left:var(--space-2)}

/* Overlay: modal & bottom sheet & drawer */
.sk-scrim{position:absolute;inset:0;background:var(--scrim);z-index:var(--z-overlay)}
.sk-modal{position:relative;z-index:var(--z-modal);width:min(560px,100%);background:var(--paper);border-radius:var(--radius-lg);box-shadow:var(--shadow-pop);padding:var(--space-6)}
.sk-modal__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-4)}
.sk-modal__title{font:700 20px/28px var(--font-display);margin:0}
.sk-modal__foot{display:flex;justify-content:flex-end;gap:var(--space-3);margin-top:var(--space-5)}
.sk-sheet{position:absolute;left:0;right:0;bottom:0;z-index:var(--z-modal);background:var(--paper);border-radius:var(--radius-lg) var(--radius-lg) 0 0;box-shadow:var(--shadow-sheet);padding:var(--space-2) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom))}
.sk-sheet__grip{width:40px;height:4px;border-radius:var(--radius-pill);background:var(--line-strong);margin:0 auto var(--space-3)}
.sk-sheet__title{font:700 17px/26px var(--font-sans);margin:0 0 var(--space-3)}
.sk-drawer{position:absolute;top:0;bottom:0;left:0;width:min(300px,84%);z-index:var(--z-modal);background:var(--paper);padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-1)}
.sk-drawer a{display:flex;align-items:center;gap:var(--space-3);min-height:var(--tap-min);padding:0 var(--space-3);border-radius:var(--radius-md);color:var(--ink);text-decoration:none;font:700 15px/22px var(--font-sans)}
.sk-drawer a[aria-current="page"]{background:var(--brand-soft)}

/* Download panel & recolor */
.sk-formats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2)}
.sk-format{display:flex;flex-direction:column;align-items:center;gap:2px;padding:var(--space-3) var(--space-2);border:1.5px solid var(--line-strong);border-radius:var(--radius-md);background:var(--paper);color:var(--ink);cursor:pointer;font:800 15px/20px var(--font-display)}
.sk-format small{font:400 11px/16px var(--font-sans);color:var(--ink-muted)}
.sk-format[aria-pressed="true"]{border-color:var(--brand-deep);background:var(--brand-soft);box-shadow:inset 0 0 0 1px var(--brand-deep)}
.sk-swatches{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.sk-swatch{width:36px;height:36px;border-radius:var(--radius-pill);border:2px solid var(--paper);box-shadow:0 0 0 1px var(--line-strong);cursor:pointer;padding:0}
.sk-swatch[aria-pressed="true"]{box-shadow:0 0 0 2px var(--ink)}
.sk-meta{display:grid;grid-template-columns:auto 1fr;gap:var(--space-1) var(--space-4);font:400 13px/20px var(--font-sans);margin:0}
.sk-meta dt{color:var(--ink-muted)}.sk-meta dd{margin:0;color:var(--ink)}

/* Empty state */
.sk-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-2);padding:var(--space-7) var(--space-4)}
.sk-empty__art{width:120px;height:120px;border-radius:var(--radius-pill);background:var(--well);display:grid;place-items:center;margin-bottom:var(--space-2)}
.sk-empty__title{font:700 17px/26px var(--font-sans);margin:0}
.sk-empty__text{font:400 14px/22px var(--font-sans);color:var(--ink-muted);margin:0 0 var(--space-3);max-width:320px}

/* Footer */
.sk-footer{background:var(--paper-soft);border-top:1px solid var(--line);padding:var(--space-7) var(--space-4) var(--space-5);font:400 13px/20px var(--font-sans);color:var(--ink-muted)}
.sk-footer__cols{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-5);max-width:var(--container-max);margin:0 auto}
.sk-footer h4{font:700 14px/20px var(--font-sans);color:var(--ink);margin:0 0 var(--space-2)}
.sk-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-1)}
.sk-footer a{color:var(--ink-muted);text-decoration:none}
.sk-footer a:hover{color:var(--link);text-decoration:underline}
.sk-footer__base{max-width:var(--container-max);margin:var(--space-6) auto 0;padding-top:var(--space-4);border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:var(--space-2);justify-content:space-between}
@container (min-width:768px){.sk-footer{padding:var(--space-8) var(--space-5) var(--space-5)}.sk-footer__cols{grid-template-columns:2fr 1fr 1fr 1fr}}

/* Preview helpers (device frames used in the showcase pages) */
.sk-device{container-type:inline-size;width:375px;border:1px solid var(--line);border-radius:28px;overflow:hidden;background:var(--paper);position:relative}
.sk-device__status{height:28px;display:flex;align-items:center;justify-content:space-between;padding:0 var(--space-5);font:700 12px/1 var(--font-display);color:var(--ink)}
.sk-label{font:500 12px/18px var(--font-sans);letter-spacing:.12em;color:var(--ink-muted);text-transform:uppercase;margin:0 0 var(--space-2)}
.sk-bottomnav a[aria-current="page"] .sk-bottomnav__pip{color:var(--on-brand)}
.sk-footer .sk-logo{color:var(--ink)}