/* Generated by bin/build-files-skills from shared/ui/index.css. Do not edit. */
@font-face { font-family: "Aime"; src: url("./fonts/aime-300.woff2") format("woff2"); font-weight: 300; font-style: normal; }
@font-face { font-family: "Aime"; src: url("./fonts/aime-800.woff2") format("woff2"); font-weight: 800; font-style: normal; }
@font-face { font-family: "KMR Melange Grotesk"; src: url("./fonts/melange-grotesk-350.ttf") format("truetype"); font-weight: 350; font-style: normal; }
@font-face { font-family: "KMR Melange Grotesk"; src: url("./fonts/melange-grotesk-400.woff2") format("woff2"); font-weight: 400; font-style: normal; }
@font-face { font-family: "KMR Melange Grotesk"; src: url("./fonts/melange-grotesk-500.woff2") format("woff2"); font-weight: 500; font-style: normal; }
@font-face { font-family: "KMR Melange Grotesk"; src: url("./fonts/melange-grotesk-600.otf") format("opentype"); font-weight: 600; font-style: normal; }
@font-face { font-family: "Aime"; src: url("./fonts/aime-400.woff2") format("woff2"); font-weight: 400; font-style: normal; }
:root {
    --ds-page: #fbfaf9;
    --ds-raised: #f4efec;
    --ds-white: #ffffff;
    --ds-ink: #251f21;
    --ds-ink-2: #585254;
    --ds-ink-3: #969394;
    --ds-ink-4: #c0bebf;
    --ds-hairline: #eae9ea;
    --ds-teal: #73a89a;
    --ds-red: #ed313e;
    --ds-red-border: rgb(245 170 174);
    --ds-hover: color-mix(in srgb, #251f21 5%, transparent);
    --ds-hover-strong: color-mix(in srgb, #251f21 10%, transparent);
    --ds-hover-red: color-mix(in srgb, #ed313e 5%, transparent);
    --ds-scrim: rgb(46 39 41 / 0.45);
    --ds-shadow-control: 0 1px 2px color-mix(in srgb, #251f21 5%, transparent);
    --ds-shadow-modal: 0 30px 70px rgb(46 39 41 / 0.28);
    --ds-elevation-0: 0 0 1px color-mix(in srgb, #251f21 10%, transparent), 0 1px 2px color-mix(in srgb, #251f21 8%, transparent);
    --ds-elevation-1: 0 1px 2px color-mix(in srgb, #251f21 12%, transparent), 0 4px 12px color-mix(in srgb, #251f21 14%, transparent);
    --ds-elevation-2: 0 1px 3px color-mix(in srgb, #251f21 8%, transparent), 0 8px 24px color-mix(in srgb, #251f21 16%, transparent);
    --ds-font-display: "Aime", Georgia, serif;
    --ds-font-text: "KMR Melange Grotesk", -apple-system, "Helvetica Neue", Arial, sans-serif;
}

/* Generated by bin/build-files-skills from shared/ui/index.css. Do not edit. */
@font-face { font-family: "Aime"; src: url("../assets/fonts/aime-300.woff2") format("woff2"); font-weight: 300; font-style: normal; }
@font-face { font-family: "Aime"; src: url("../assets/fonts/aime-800.woff2") format("woff2"); font-weight: 800; font-style: normal; }
@font-face { font-family: "KMR Melange Grotesk"; src: url("../assets/fonts/melange-grotesk-350.ttf") format("truetype"); font-weight: 350; font-style: normal; }
@font-face { font-family: "KMR Melange Grotesk"; src: url("../assets/fonts/melange-grotesk-400.woff2") format("woff2"); font-weight: 400; font-style: normal; }
@font-face { font-family: "KMR Melange Grotesk"; src: url("../assets/fonts/melange-grotesk-500.woff2") format("woff2"); font-weight: 500; font-style: normal; }
@font-face { font-family: "KMR Melange Grotesk"; src: url("../assets/fonts/melange-grotesk-600.otf") format("opentype"); font-weight: 600; font-style: normal; }
@font-face { font-family: "Aime"; src: url("../assets/fonts/aime-400.woff2") format("woff2"); font-weight: 400; font-style: normal; }
:root {
    --ds-page: #fbfaf9;
    --ds-raised: #f4efec;
    --ds-white: #ffffff;
    --ds-ink: #251f21;
    --ds-ink-2: #585254;
    --ds-ink-3: #969394;
    --ds-ink-4: #c0bebf;
    --ds-hairline: #eae9ea;
    --ds-teal: #73a89a;
    --ds-red: #ed313e;
    --ds-red-border: rgb(245 170 174);
    --ds-hover: color-mix(in srgb, #251f21 5%, transparent);
    --ds-hover-strong: color-mix(in srgb, #251f21 10%, transparent);
    --ds-hover-red: color-mix(in srgb, #ed313e 5%, transparent);
    --ds-scrim: rgb(46 39 41 / 0.45);
    --ds-shadow-control: 0 1px 2px color-mix(in srgb, #251f21 5%, transparent);
    --ds-shadow-modal: 0 30px 70px rgb(46 39 41 / 0.28);
    --ds-elevation-0: 0 0 1px color-mix(in srgb, #251f21 10%, transparent), 0 1px 2px color-mix(in srgb, #251f21 8%, transparent);
    --ds-elevation-1: 0 1px 2px color-mix(in srgb, #251f21 12%, transparent), 0 4px 12px color-mix(in srgb, #251f21 14%, transparent);
    --ds-elevation-2: 0 1px 3px color-mix(in srgb, #251f21 8%, transparent), 0 8px 24px color-mix(in srgb, #251f21 16%, transparent);
    --ds-font-display: "Aime", Georgia, serif;
    --ds-font-text: "KMR Melange Grotesk", -apple-system, "Helvetica Neue", Arial, sans-serif;
}
.box-border{box-sizing:border-box}.flex{display:flex}.inline-flex{display:inline-flex}.h-10{height:2.5rem}.h-11{height:2.75rem}.h-8{height:2rem}.h-9{height:2.25rem}.h-\[52px\]{height:52px}.w-8{width:2rem}.w-9{width:2.25rem}.w-full{width:100%}.flex-none{flex:none}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:.5rem}.whitespace-nowrap{white-space:nowrap}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:var(--radius)}.border{border-width:1px}.border-0{border-width:0}.border-border{border-color:hsl(var(--border))}.border-destructive\/40{border-color:hsl(var(--destructive)/.4)}.border-ds-hairline{border-color:var(--ds-hairline)}.border-ds-ink{border-color:var(--ds-ink)}.border-ds-redBorder{border-color:var(--ds-red-border)}.border-ds-teal{border-color:var(--ds-teal)}.border-transparent{border-color:transparent}.bg-card{background-color:hsl(var(--card))}.bg-destructive\/10{background-color:hsl(var(--destructive)/.1)}.bg-ds-ink{background-color:var(--ds-ink)}.bg-ds-white{background-color:var(--ds-white)}.bg-foreground{background-color:hsl(var(--foreground))}.bg-red-600{--tw-bg-opacity:1;background-color:rgb(220 38 38/var(--tw-bg-opacity,1))}.bg-secondary{background-color:hsl(var(--secondary))}.bg-transparent{background-color:transparent}.p-2{padding:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.font-text{font-family:KMR Melange Grotesk,-apple-system,Helvetica Neue,Arial,sans-serif}.text-\[13px\]{font-size:13px}.text-\[15px\]{font-size:15px}.text-sm{font-size:.8125rem}.text-sm,.text-xs{line-height:1.5}.text-xs{font-size:.75rem}.font-medium{font-weight:500}.font-normal{font-weight:400}.leading-none{line-height:1}.tracking-\[-0\.01em\]{letter-spacing:-.01em}.text-background{color:hsl(var(--background))}.text-card-foreground{color:hsl(var(--card-foreground))}.text-destructive{color:hsl(var(--destructive))}.text-ds-ink{color:var(--ds-ink)}.text-ds-page{color:var(--ds-page)}.text-ds-red{color:var(--ds-red)}.text-ds-teal{color:var(--ds-teal)}.text-textPrimary{color:var(--text-primary)}.text-textSecondary{color:var(--text-secondary)}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.underline-offset-4{text-underline-offset:4px}.shadow-ds-control{--tw-shadow:var(--ds-shadow-control);--tw-shadow-colored:var(--ds-shadow-control)}.shadow-ds-control,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.outline{outline-style:solid}.transition-\[background-color\2c border-color\2c color\2c transform\]{transition-property:background-color,border-color,color,transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}@keyframes enter{0%{opacity:var(--tw-enter-opacity,1);transform:translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0) scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1)) rotate(var(--tw-enter-rotate,0))}}@keyframes exit{to{opacity:var(--tw-exit-opacity,1);transform:translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0) scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1)) rotate(var(--tw-exit-rotate,0))}}.\[transition-duration\:120ms\]{transition-duration:.12s}.hover\:scale-105:hover{--tw-scale-x:1.05;--tw-scale-y:1.05}.hover\:scale-105:hover,.hover\:scale-\[1\.02\]:hover{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:scale-\[1\.02\]:hover{--tw-scale-x:1.02;--tw-scale-y:1.02}.hover\:bg-destructive\/20:hover{background-color:hsl(var(--destructive)/.2)}.hover\:bg-destructive\/5:hover{background-color:hsl(var(--destructive)/.05)}.hover\:bg-ds-hover:hover{background-color:var(--ds-hover)}.hover\:bg-foreground\/90:hover{background-color:hsl(var(--foreground)/.9)}.hover\:bg-muted:hover{background-color:hsl(var(--muted))}.hover\:bg-red-700:hover{--tw-bg-opacity:1;background-color:rgb(185 28 28/var(--tw-bg-opacity,1))}.hover\:bg-secondary\/80:hover{background-color:hsl(var(--secondary)/.8)}.hover\:text-textPrimary:hover{color:var(--text-primary)}.hover\:underline:hover{text-decoration-line:underline}.focus-visible\:outline-none:focus-visible{outline:2px solid transparent;outline-offset:2px}.focus-visible\:ring-2:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus-visible\:ring-ds-ink4:focus-visible{--tw-ring-color:var(--ds-ink-4)}.focus-visible\:ring-ring\/40:focus-visible{--tw-ring-color:hsl(var(--ring)/0.4)}.focus-visible\:ring-offset-2:focus-visible{--tw-ring-offset-width:2px}.active\:scale-100:active{--tw-scale-x:1;--tw-scale-y:1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.active\:bg-ds-hoverStrong:active{background-color:var(--ds-hover-strong)}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:scale-100:disabled{--tw-scale-x:1;--tw-scale-y:1;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.disabled\:cursor-default:disabled{cursor:default}.disabled\:border-ds-hairline:disabled{border-color:var(--ds-hairline)}.disabled\:bg-transparent:disabled{background-color:transparent}.disabled\:text-ds-ink4:disabled{color:var(--ds-ink-4)}.disabled\:opacity-50:disabled{opacity:.5}.disabled\:shadow-none:disabled{--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}@media not all and (min-width:768px){.max-md\:flex{display:flex}.max-md\:h-\[52px\]{height:52px}.max-md\:w-full{width:100%}.max-md\:rounded-lg{border-radius:var(--radius)}.max-md\:text-\[15px\]{font-size:15px}.max-md\:hover\:scale-\[1\.02\]:hover{--tw-scale-x:1.02;--tw-scale-y:1.02;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}}@media (min-width:768px){.md\:px-4{padding-left:1rem;padding-right:1rem}}.\[\&_svg\]\:pointer-events-none svg{pointer-events:none}.\[\&_svg\]\:size-4 svg{width:1rem;height:1rem}.\[\&_svg\]\:h-4 svg{height:1rem}.\[\&_svg\]\:w-4 svg{width:1rem}.\[\&_svg\]\:shrink-0 svg{flex-shrink:0}
/* Files component library. Consumes the --ds-* tokens and brand @font-face
   rules from shared/ui/index.css. */
:root {
    --file-shadow: 0 1px 2px rgb(37 31 33 / 6%), 0 6px 18px rgb(37 31 33 / 5%);
    --file-pad-x: 24px;
    /* One column width for every label-and-value grid: comparison tables and Facts. */
    --file-col: 200px;
    /* A comparison column needs room for a photo; a narrower table stretches to fill instead. */
    --file-product-col: 300px;
    /* Two steps of the text scale: body, and the smaller size for captions and secondary lines. */
    --file-text: 14px;
    --file-small: 12px;
    /* How long a stateful button takes to roll to its next state; ROLL_MS in controls.tsx matches it. */
    --file-button-roll: 320ms;
    /* Running low is the one warning the design tokens have no colour for. */
    --file-low-stock: #d59b53;
}

.file-ground {
    box-sizing: border-box;
    min-height: 100%;
    padding: 24px 16px;
    background: var(--ds-raised);
    color: var(--ds-ink);
    font-family: var(--ds-font-text);
    font-size: var(--file-text);
    font-weight: 350;
    line-height: 24px;
    letter-spacing: -0.01em;
    -webkit-font-smoothing: antialiased;
}

.file-card {
    box-sizing: border-box;
    width: 100%;
    max-width: 1040px;
    margin: 0 auto;
    padding: 24px var(--file-pad-x);
    background: var(--ds-page);
    color: var(--ds-ink);
    display: flex;
    flex-direction: column;
    gap: 48px;
    font-family: var(--ds-font-text);
    font-size: var(--file-text);
    font-weight: 350;
    line-height: 24px;
    letter-spacing: -0.01em;
}

.file-card[data-width="phone"] { max-width: 390px; }
.file-ground .file-card { border-radius: 24px; box-shadow: var(--file-shadow); }
.file-card > * { min-width: 0; }
.file-card a { color: var(--ds-ink); }
.file-card :focus-visible { outline: 2px solid var(--ds-ink); outline-offset: 2px; }

.file-strong { font-weight: 600; }
.file-secondary { color: var(--ds-ink-2); }
.file-known { color: var(--ds-teal); font-weight: 600; }
.file-unavailable { color: var(--ds-ink-4); text-decoration: line-through; }
.file-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Header */
.file-header { display: flex; flex-direction: column; gap: 24px; }
.file-title {
    margin: 0;
    font-family: var(--ds-font-display);
    font-weight: 400;
    font-size: 28px;
    line-height: 1.1;
    letter-spacing: -0.025em;
    text-wrap: balance;
}
.file-fact { margin: 0; color: var(--ds-ink-2); font-weight: 400; }
.file-fact.is-known { color: var(--ds-teal); font-weight: 600; }
.file-intro { margin: 12px 0 0; line-height: 24px; text-wrap: pretty; }

/* Group */
.file-group { display: flex; flex-direction: column; gap: 24px; }
.file-group-label { margin: 0; font: inherit; color: var(--ds-ink-2); }
.file-group-heading {
    margin: 0;
    font-family: var(--ds-font-display);
    font-weight: 400;
    font-size: 21px;
    line-height: 1.1;
    letter-spacing: -0.025em;
}

/* Rows */
.file-rows { display: flex; flex-direction: column; }
.file-row { display: flex; align-items: flex-start; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--ds-hairline); }
.file-row:last-child { border-bottom: 0; }
.file-row-slot { flex: none; width: 40px; height: 40px; border-radius: 3px; background: var(--ds-raised); overflow: hidden; }
.file-row-slot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.file-row-slot.is-number { width: 24px; height: auto; background: none; color: var(--ds-ink-2); }
.file-row-slot.is-number::after, .file-step-n::after { content: "."; }
.file-row-main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.file-row-detail { color: var(--ds-ink-2); }
.file-row-value { flex: none; font-weight: 600; text-align: right; }

/* Facts */
.file-facts { display: flex; flex-direction: column; margin: 0; }
.file-facts > div { display: grid; grid-template-columns: min(var(--file-col), 38%) minmax(0, 1fr); padding: 12px 0; border-bottom: 1px solid var(--ds-hairline); }
.file-facts > div:last-child { border-bottom: 0; }
.file-facts dt { color: var(--ds-ink-2); padding-right: 16px; }
.file-facts dd { margin: 0; }

/* Text */
.file-text { display: flex; flex-direction: column; gap: 32px; }
.file-heading { display: flex; flex-direction: column; }
.file-p { margin: 0; line-height: 24px; text-wrap: pretty; }
.file-bullets { margin: 0; padding: 0 0 0 20px; list-style: disc; display: flex; flex-direction: column; gap: 8px; line-height: 24px; }
.file-bullets li { display: list-item; padding-left: 2px; }
.file-bar { position: relative; padding-left: 16px; }
.file-bar::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; border-radius: 1px; background: var(--ds-hairline); }
.file-key { margin: 0; font-weight: 600; line-height: 24px; }
.file-figure { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.file-figure img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 4px; background: var(--ds-raised); }
.file-caption, .file-figure figcaption { margin: 0; color: var(--ds-ink-2); font-size: var(--file-small); line-height: 20px; text-wrap: pretty; }
/* A caption right after a strip, chart or table sits 12px below it, like a figure's caption, instead of a full group gap away. */
.file-photos + .file-caption, .file-strip + .file-caption { margin-top: 12px; }
.file-card > :is(.file-photos, .file-strip) + .file-caption { margin-top: -36px; }
.file-text > :is(.file-photos, .file-strip) + .file-caption { margin-top: -20px; }
.file-group > :is(.file-photos, .file-strip) + .file-caption, .file-chart + .file-caption, .file-table-scroll + .file-caption { margin-top: -12px; }
.file-rule { margin: 8px 0; border: 0; height: 1px; background: var(--ds-hairline); }
.file-link { color: var(--ds-ink); overflow-wrap: anywhere; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ds-ink-4); }
.file-link:hover { text-decoration-color: currentColor; }

/* Callout */
.file-callout { display: flex; flex-direction: column; gap: 4px; text-wrap: pretty; }
.file-callout[data-tone="warning"] { padding: 16px; border-radius: 8px; background: var(--ds-raised); color: var(--ds-ink); }
.file-callout[data-tone="warning"]::before { display: none; }
.file-callout[data-tone="danger"] { color: var(--ds-red); }
.file-callout[data-tone="danger"]::before { background: var(--ds-red); }

/* Numbered list */
.file-steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.file-steps li { display: flex; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--ds-hairline); text-wrap: pretty; }
.file-steps li:last-child { border-bottom: 0; }
.file-steps li > span:last-child { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.file-step-n { flex: none; width: 24px; color: var(--ds-ink-2); }

/* Table */
.file-table-scroll { position: relative; overflow-x: auto; margin-inline: calc(-1 * var(--file-pad-x)); padding-inline: var(--file-pad-x) 0; scroll-padding-inline: var(--file-pad-x) 0; }
.file-table { table-layout: fixed; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.file-table th, .file-table td { padding: 12px 16px 12px 0; border-bottom: 1px solid var(--ds-hairline); text-align: left; vertical-align: top; font-weight: 350; overflow-wrap: anywhere; }
.file-table tbody tr:last-child th, .file-table tbody tr:last-child td { border-bottom: 0; }
.file-table thead th { padding-top: 0; }
.file-table thead th .file-secondary { margin-left: 8px; }
.file-table tbody th { color: var(--ds-ink-2); }
.file-table td.is-best, .file-table td.file-product-price { font-weight: 600; }
.file-table.is-products { font-variant-numeric: normal; }
.file-table.is-products thead th { padding-bottom: 20px; vertical-align: top; }
.file-cell-label { display: block; color: var(--ds-ink-2); font-size: var(--file-small); line-height: 20px; font-weight: 350; }
.file-product-head { display: flex; flex-direction: column; }
.file-product-head-photo { position: relative; display: block; margin-bottom: 12px; }
.file-product-head-photo img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; background: var(--ds-raised); }
.file-product-head-photo > .file-product-empty { display: grid; aspect-ratio: 1; border-radius: 12px; background: var(--ds-raised); padding: 16px; }

/* Photos */
.file-photos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 8px; min-width: 0; }
.file-photos img { display: block; width: 100%; min-width: 0; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; background: var(--ds-raised); }
.file-photos[data-layout="strip"] { display: flex; align-items: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.file-photos[data-layout="strip"]::-webkit-scrollbar { display: none; }
.file-photos[data-layout="strip"] img { flex: 0 0 auto; width: 85%; max-width: 480px; aspect-ratio: auto; scroll-snap-align: start; }
/* Each photo sits in the button that opens the viewer, so in a strip the button takes the slide and the photo fills it. */
.file-photo-zoom { all: unset; box-sizing: border-box; display: block; min-width: 0; border-radius: 8px; cursor: zoom-in; }
.file-photos[data-layout="strip"] > .file-photo-zoom { flex: 0 0 auto; width: 85%; max-width: 480px; scroll-snap-align: start; }
.file-photos[data-layout="strip"] > .file-photo-zoom img { width: 100%; max-width: none; }
.file-photos.is-single > .file-photo-zoom { width: 100%; max-width: none; }
/* A strip clips anything outside it, so a photo's focus ring sits inside the photo. */
.file-photo-zoom:focus-visible { outline: 2px solid var(--ds-ink); outline-offset: -2px; }
[data-can-drag], [data-can-drag] .file-product-toggle, [data-can-drag] .file-product-zoom, [data-can-drag] .file-photo-zoom { cursor: grab; }
[data-drag-scroll] { position: relative; }
[data-drag-scroll][data-dragging] { scroll-snap-type: none; user-select: none; }
[data-dragging], [data-dragging] .file-product-toggle, [data-dragging] .file-product-zoom, [data-dragging] .file-photo-zoom { cursor: grabbing; }
.file-photos.is-single img { width: 100%; max-width: none; aspect-ratio: auto; }

/* A strip or carousel runs to the card's edges, so its scroll reads without a control. */
.file-bleed { margin-inline: calc(-1 * var(--file-pad-x)); padding-inline: var(--file-pad-x); scroll-padding-inline: var(--file-pad-x); }
/* A photo strip's frame carries its arrows. The frame takes the strip's bleed, so its box is the strip's visible area and the arrows sit 12px in from its edges; a host whose strip bleeds further moves them with --file-strip-arrows-inset. */
.file-strip { position: relative; min-width: 0; }
.file-strip[data-bleed] { margin-inline: calc(-1 * var(--file-pad-x)); }
.file-strip > .file-bleed { margin-inline: 0; }
.file-strip-arrows { position: absolute; inset: 50% var(--file-strip-arrows-inset, 12px) auto; z-index: 1; display: flex; justify-content: space-between; transform: translateY(-50%); pointer-events: none; }
.file-strip-arrow { all: unset; box-sizing: border-box; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ds-page); color: var(--ds-ink); box-shadow: var(--ds-elevation-0); cursor: pointer; pointer-events: auto; transition: opacity 160ms ease-out, transform 160ms ease-out, visibility 0s; animation: file-strip-arrow-in 160ms ease-out; }
/* An arrow with nowhere to go fades and shrinks away, keeping its place so the other stays put. */
.file-strip-arrow:disabled { opacity: 0; transform: scale(0.95); visibility: hidden; transition: opacity 160ms ease-out, transform 160ms ease-out, visibility 0s 160ms; }
@keyframes file-strip-arrow-in { from { opacity: 0; transform: scale(0.95); } }
@media (prefers-reduced-motion: reduce) { .file-strip-arrow, .file-strip-arrow:disabled { transition: none; animation: none; } }
.file-strip-arrow:focus-visible { outline: 2px solid var(--ds-ink); outline-offset: 2px; }

.file-recommendations { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 20px; align-items: start; }
.file-recommendation { min-width: 0; padding: 20px; border: 1px solid var(--ds-hairline); border-radius: 18px; background: var(--ds-white); }
.file-recommendation-header { margin-bottom: 20px; }
.file-recommendation-meta { display: flex; align-items: center; gap: 8px; min-height: 24px; margin-bottom: 10px; }
.file-recommendation-number { flex: none; margin-right: 4px; color: var(--ds-ink-2); font-size: var(--file-small); font-weight: 500; }
.file-recommendation-eyebrow { min-width: 0; margin: 0; color: var(--ds-ink-2); font-size: var(--file-small); line-height: 18px; overflow-wrap: anywhere; }
.file-recommendation-badge { flex: none; margin-left: auto; padding: 2px 7px; border: 1px solid var(--ds-hairline); border-radius: 4px; background: var(--ds-page); color: var(--ds-ink); font-size: var(--file-small); line-height: 18px; font-weight: 500; }
.file-recommendation-title { margin: 0; font-family: var(--ds-font-display); font-size: 24px; line-height: 1.15; font-weight: 400; letter-spacing: -0.025em; overflow-wrap: anywhere; }
.file-recommendation-photos { margin: 0 0 20px; }
.file-recommendation-photos .file-photos:not(.is-single) img { aspect-ratio: 4 / 3; }
.file-recommendation-photos > figcaption { margin-top: 12px; }
.file-recommendation-content { display: flex; flex-direction: column; gap: 24px; }
.file-recommendation-content > * { min-width: 0; }
.file-recommendation-links { display: flex; flex-wrap: wrap; gap: 12px 20px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--ds-hairline); }
.file-recommendation-links a { display: inline-flex; align-items: center; min-height: 44px; }

/* Charts: compact white panels inside the text column, type one step down from body */
.file-chart { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 8px; background: var(--ds-white); font-size: var(--file-small); line-height: 20px; }
.file-chart-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; color: var(--ds-ink-2); }
.file-chart-head > span:first-child { min-width: 0; text-wrap: pretty; }
.file-chart-head > span + span { flex: none; white-space: nowrap; }
.file-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.file-chart.is-drawn { max-width: 420px; }
.file-chart-axis { display: flex; justify-content: space-between; gap: 12px; color: var(--ds-ink-2); white-space: nowrap; }
.file-sparklines { display: flex; flex-direction: column; }
.file-sparkline { display: grid; grid-template-columns: 1fr 110px 56px; gap: 16px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--ds-hairline); }
.file-sparkline:last-child { border-bottom: 0; }
.file-sparkline svg { width: 110px; height: 32px; }
.file-sparkline-delta { text-align: right; font-weight: 600; }
.file-sparkline.is-highlight .file-sparkline-name { font-weight: 600; }
.file-sparkline.is-highlight .file-sparkline-delta { color: var(--ds-teal); font-weight: 600; }
.file-ranges { display: flex; flex-direction: column; gap: 28px; }
.file-range { display: grid; grid-template-columns: 104px 1fr; gap: 12px; align-items: center; }
.file-range-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-range-track { position: relative; height: 20px; }
.file-range-line { position: absolute; left: 0; right: 0; top: 9px; height: 1px; background: var(--ds-hairline); }
.file-range-band { position: absolute; top: 7px; height: 6px; border-radius: 3px; background: var(--ds-page); }
.file-range-now { position: absolute; top: 4px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--file-series, var(--ds-ink-2)); }
.file-range.is-highlight .file-range-now { background: var(--ds-teal); }
.file-range-scale { display: grid; grid-template-columns: 104px 1fr; gap: 12px; }
.file-stack-bar { display: flex; height: 16px; gap: 2px; border-radius: 3px; overflow: hidden; }
.file-stack-parts { display: flex; flex-direction: column; }
.file-stack-part { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--ds-hairline); }
.file-stack-part:last-child { border-bottom: 0; }
.file-stack-swatch { flex: none; width: 10px; height: 10px; border-radius: 2px; box-shadow: inset 0 0 0 1px var(--ds-hairline); }
.file-stack-part span:nth-child(2) { flex: 1; }
.file-stack-share { color: var(--ds-ink-2); }

/* Controls */
.file-button {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 32px;
    padding: 0 16px;
    border: 1px solid var(--ds-hairline);
    border-radius: 4px;
    background: var(--ds-white);
    color: var(--ds-ink);
    font: inherit;
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.01em;
    white-space: nowrap;
    text-decoration: none;
    align-self: flex-start;
    max-width: 100%;
    box-shadow: var(--ds-shadow-control);
    cursor: pointer;
    transition: background-color 120ms, border-color 120ms, color 120ms, transform 120ms;
}
.file-button.is-compact { padding: 0 16px; }
/* A close button centres in whatever bar holds it, unlike a button in the flow, which starts its line. It stays a 32px square on a phone too, reaching a 44px target through an invisible margin. */
.file-close { position: relative; flex: none; align-self: center; width: 32px; padding: 0; }
.file-close::before { content: ""; position: absolute; inset: -6px; }
/* An icon at a pill's end takes less side padding than text, so it sits about as far from the edge as from the top and bottom. The label must be an element beside the icon, since :first-child and :last-child skip text. */
.file-button.is-pill { border-radius: 999px; --file-button-icon-pad: 10px; }
.file-button.is-pill:has(> svg:first-child, > .file-button-slot > .file-button-face:last-child > svg:first-child) { padding-inline-start: var(--file-button-icon-pad); }
.file-button.is-pill:has(> svg:last-child, > .file-button-slot > .file-button-face:last-child > svg:last-child) { padding-inline-end: var(--file-button-icon-pad); }
/* A stateful button clips its own faces, so a push runs to the button's edge. The inset is the gap from a face to that edge: (32px height - 16px face) / 2. */
.file-button[data-state] { overflow: hidden; --file-button-inset: 8px; }
.file-button-slot { display: inline-grid; grid-template-columns: minmax(0, auto); min-width: 0; transition: width var(--file-button-roll) cubic-bezier(0.2, 0.8, 0.2, 1); }
.file-button-face { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 8px; width: max-content; max-width: 100%; justify-self: start; }
/* A row too narrow for the longest full label, "Sent to Instinct" at 148px, swaps every state with a short label to it. */
.file-button-label.is-short { display: none; }
@container file-actions (width < 150px) { .file-button-face:has(> .is-short) > .file-button-label:not(.is-short) { display: none; } .file-button-label.is-short { display: inline; } }
/* Both faces travel one face plus the inset on the same curve, so the next pushes the current out; the outgoing face also fades as it goes. */
.file-button-face.is-leaving { animation: file-button-out var(--file-button-roll) cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
.file-button-face.is-entering { animation: file-button-in var(--file-button-roll) cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes file-button-out { to { transform: translateY(calc(-100% - var(--file-button-inset))); opacity: 0; } }
@keyframes file-button-in { from { transform: translateY(calc(100% + var(--file-button-inset))); } }
.file-spin { animation: file-spin 900ms linear infinite; }
@keyframes file-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .file-button-slot { transition: none; } .file-button-face.is-entering, .file-spin { animation: none; } .file-button-face.is-leaving { display: none; } }
.file-button svg { flex: none; }
/* A button never outgrows its container: the label gives way with an ellipsis and the icon keeps its size. */
.file-button > span:not(.file-button-slot), .file-button-label { min-width: 0; overflow-x: clip; text-overflow: ellipsis; }
@media (hover: hover) { .file-button:hover { transform: scale(1.05); } }
.file-button[data-variant="primary"] { background: var(--ds-ink); border-color: var(--ds-ink); color: var(--ds-page); }
.file-button[data-variant="ghost"] { background: transparent; border-color: transparent; box-shadow: none; }
.file-button[aria-pressed="true"] { background: var(--ds-teal); border-color: var(--ds-teal); color: var(--ds-white); }
.file-button:disabled:not([data-state]) { background: transparent; border-color: var(--ds-hairline); color: var(--ds-ink-4); box-shadow: none; cursor: default; transform: none; }
/* A stateful button keeps its colours while disabled; only its label and icon say it is working or done. */
.file-button[data-state]:disabled { cursor: default; transform: none; }
.file-button.is-unavailable:disabled { text-decoration: line-through; }
.file-control { display: flex; flex-direction: column; gap: 24px; }
.file-control-head { display: flex; justify-content: space-between; gap: 16px; }
.file-control-label { color: var(--ds-ink-2); }
.file-choice-row { display: flex; gap: 8px; flex-wrap: wrap; }
.file-field {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: 40px;
    padding: 0 16px;
    border: 1px solid var(--ds-hairline);
    border-radius: 4px;
    background: var(--ds-white);
    color: inherit;
    font: inherit;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: -0.01em;
    outline: none;
}
.file-field:focus { border-color: var(--ds-teal); }
.file-slider { width: 100%; height: 2px; margin: 8px 0; appearance: none; -webkit-appearance: none; border-radius: 1px; background: linear-gradient(to right, var(--ds-ink) var(--file-slider-fill, 50%), var(--ds-hairline) var(--file-slider-fill, 50%)); outline: none; accent-color: var(--ds-ink); }
.file-slider::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--ds-white); border: 1px solid var(--ds-hairline); box-shadow: var(--ds-shadow-control); cursor: pointer; }
.file-slider::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--ds-white); border: 1px solid var(--ds-hairline); cursor: pointer; }

/* Closing line */
.file-closing { margin: 0; color: var(--ds-ink-2); }

/* Wordmark */
.file-wordmark { display: block; color: var(--ds-ink); }

/* Shopping */
.file-product { position: relative; display: flex; flex-direction: column; min-width: 0; }
.file-product-toggle, .file-product-preview {
    all: unset;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.file-product-preview { cursor: default; }
/* Text marked as a link's label underlines while the link or button around it is hovered: a product's name, an option's title and its See details. */
@media (hover: hover) { :is(a, button):hover .file-hover-underline { text-decoration: underline; text-underline-offset: 3px; } }
.file-product.is-card { gap: 20px; }
/* 48px clear each side: the group's 24px gap plus this margin, and the padding below. */
.file-group > .file-product.is-card + .file-product.is-card { margin-top: 24px; padding-top: 48px; border-top: 1px solid var(--ds-hairline); }
.file-product-media { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 8px; container-type: inline-size; }
/* Only a strip of several photos needs one shared height; a lone photo takes the column width, because a fixed frame could only fit it by banding. */
.file-product-media .file-photos:not(.is-single) { height: min(420px, 100cqw); }
.file-product-media .file-photos img { width: auto; height: 100%; max-width: none; object-fit: contain; border-radius: 12px; }
.file-product-media .file-photos.is-single img { width: 100%; height: auto; max-height: calc(100cqw * 4 / 3); object-fit: cover; }
/* Each photo sits in the button that opens the viewer, so the button takes the frame and the photo fills it. */
.file-product-zoom { all: unset; box-sizing: border-box; display: block; flex: none; border-radius: 12px; cursor: zoom-in; }
.file-photos:not(.is-single) > .file-product-zoom { height: 100%; }
.file-photos.is-single > .file-product-zoom { width: 100%; }
.file-product-thumbs { display: none; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 1px; margin: -1px; }
.file-product-thumbs::-webkit-scrollbar { display: none; }
.file-product-thumb { all: unset; box-sizing: border-box; flex: 0 0 auto; display: block; width: 48px; height: 48px; border-radius: 12px; overflow: hidden; cursor: pointer; box-shadow: 0 0 0 1px var(--ds-hairline); }
.file-product-thumb[aria-pressed="true"] { box-shadow: 0 0 0 1px var(--ds-ink-3); }
.file-product-thumbs img { display: block; width: 100%; height: 100%; object-fit: contain; background: var(--ds-raised); }
.file-product-photo { position: relative; display: block; width: 100%; container-type: inline-size; }
.file-product-photo img, .file-product-photo .file-product-empty { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 12px; background: var(--ds-raised); }
.file-product-photo img { display: block; height: auto; max-height: calc(100cqw * 4 / 3); aspect-ratio: auto; }
/* The square is the crop: contain in a fixed frame bands every photo the merchant did not shoot square. */
.file-product.is-tile .file-product-photo img { aspect-ratio: 1; object-fit: cover; }
.file-product.is-tile .file-product-photo .file-product-empty { aspect-ratio: 1; }
.file-product-empty { display: grid; place-items: center; color: var(--ds-ink-2); text-align: center; padding: 40px 16px 16px; box-sizing: border-box; }
.file-tags { position: absolute; top: 8px; left: 8px; right: 8px; display: flex; gap: 4px; align-items: center; }
.file-pill { box-sizing: border-box; min-width: 24px; height: 24px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; background: var(--ds-ink); color: var(--ds-white); font-size: var(--file-text); font-weight: 500; line-height: 1; letter-spacing: -0.01em; }
.file-pill.is-pick { background: var(--ds-ink); }
.file-badge { box-sizing: border-box; height: 24px; padding: 0 8px; display: inline-flex; align-items: center; border-radius: 4px; background: var(--ds-white); color: var(--ds-ink); font-size: var(--file-text); font-weight: 500; line-height: 1; letter-spacing: -0.01em; box-shadow: var(--ds-elevation-0); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-product-line { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; width: 100%; min-width: 0; }
.file-product-name { flex: 1; min-width: 0; font-weight: 600; text-wrap: pretty; }
.file-product .file-product-name { overflow-wrap: break-word; }
.file-product-toggle .file-product-note, .file-product-preview .file-product-note { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.file-product-price { flex: none; font-weight: 600; color: var(--ds-teal); }
.file-product-brand { color: var(--ds-ink-2); font-size: var(--file-small); line-height: 20px; }
/* A tile keeps its brand line to one row so tiles in a row align; the dialog carries it in full. */
.file-product.is-tile .file-product-brand { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.file-product-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 16px; }
.file-product-carousel { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.file-product-carousel::-webkit-scrollbar { display: none; }
.file-product-carousel > .file-product { flex: none; width: clamp(200px, 29vw, 320px); scroll-snap-align: start; }

/* Product details share one gallery in page content and the modal. */
.file-product-detail { display: flex; flex-direction: column; gap: 24px; }
.file-product-gallery { position: relative; min-width: 0; container-type: inline-size; }
.file-product-gallery .file-photos { overscroll-behavior-x: contain; scroll-snap-type: none; border-radius: 12px; }
.file-product-gallery .file-photos:not(.is-single) { height: min(360px, 100cqw); }
.file-product-gallery .file-photos img { object-fit: contain; max-width: none; scroll-snap-align: none; border-radius: 12px; }
.file-product-gallery .file-photos:not(.is-single) img { width: auto; height: 100%; }
.file-product-gallery .file-photos.is-single img { max-height: calc(100cqw * 4 / 3); object-fit: cover; }
.file-product-gallery > .file-product-empty { width: 100%; aspect-ratio: 1; background: var(--ds-raised); border-radius: 12px; }
.file-product-info { min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.file-product-copy { display: flex; flex-direction: column; }
.file-product-note { margin: 8px 0 0; text-wrap: pretty; }
.file-product-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; container: file-actions / inline-size; }
.file-product > .file-product-actions { margin-top: auto; padding-top: 14px; }
.file-product.is-card > .file-product-actions { padding-top: 2px; }
.file-product-actions .file-caption { margin: 0; font-size: var(--file-small); line-height: 18px; }
.file-product-actions .file-caption button { border: 0; padding: 0; background: transparent; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 44px; }
/* The citation always starts its own line under the note it credits. */
.file-product-source { display: block; }
/* A host reset may set svg to display block, which would drop the arrow onto its own line. */
.file-product-source svg { display: inline-block; vertical-align: -0.125em; margin-left: 3px; }
.file-product-detail .file-product-name { font-size: 22px; line-height: 1.25; }
.file-product-modal { box-sizing: border-box; inset: 0; width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; border-radius: 0; padding: 0 24px 24px; border: 0; background: var(--ds-white); color: var(--ds-ink); box-shadow: var(--ds-shadow-modal); overflow: auto; overscroll-behavior: contain; font-family: var(--ds-font-text); font-size: var(--file-text); font-weight: 350; line-height: 24px; letter-spacing: -0.01em; }
.file-product-modal:focus { outline: none; }
.file-product-modal::backdrop { background: var(--ds-scrim); }
.file-product-modal-header { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: flex-end; margin-inline: -24px; padding: 12px; background: var(--ds-white); }
.file-product-modal :focus-visible { outline: 2px solid var(--ds-ink); outline-offset: 2px; }
/* A strip clips anything outside it, so a photo's focus ring sits inside the photo. */
.file-product-zoom:focus-visible { outline-offset: -2px; }

/* Variant pickers sit a step below the 32px purchase button, so buying stays the strongest control. */
.file-variants { display: flex; flex-direction: column; gap: 14px; }
.file-variant { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.file-variant-label { display: flex; gap: 6px; align-items: baseline; color: var(--ds-ink-2); }
.file-variant-label b { font-weight: 400; color: var(--ds-ink); }
.file-variant-label em { font-style: normal; color: var(--ds-ink-3); }
.file-swatches { display: flex; flex-wrap: wrap; gap: 10px; padding: 3px 0 0 3px; }
/* The ring sits outside the colour, so a pale swatch keeps its edge against the page. */
.file-swatch, .file-dot { all: unset; position: relative; box-sizing: border-box; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ds-ink) 12%, transparent); }
.file-swatch { width: 24px; height: 24px; cursor: pointer; }
.file-swatch::after, .file-dot::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; box-shadow: 0 0 0 1px transparent; transition: box-shadow 120ms; }
.file-swatch[aria-pressed="true"]::after { box-shadow: 0 0 0 1.25px var(--ds-ink); }
.file-swatch.is-out::before { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1.5px; background: var(--ds-white); transform: translateX(-50%) rotate(45deg); box-shadow: 0 0 0 0.5px color-mix(in srgb, var(--ds-ink) 25%, transparent); }
.file-swatch:focus-visible, .file-dot:focus-visible { outline: none; }
.file-swatch:focus-visible::after, .file-dot:focus-visible::after { box-shadow: 0 0 0 2px var(--ds-ink); }
.file-sizes { display: flex; flex-wrap: wrap; gap: 6px; }
.file-size { height: 28px; min-width: 36px; padding: 0 10px; font-size: var(--file-small); }
.file-size[aria-pressed="true"] { background: var(--ds-ink); border-color: var(--ds-ink); color: var(--ds-page); }
.file-stock { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--ds-ink-2); font-size: var(--file-small); line-height: 20px; }
.file-stock::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--ds-ink-4); }
.file-stock.is-in::before { background: var(--ds-teal); }
.file-stock.is-low::before { background: var(--file-low-stock); }
.file-stock.is-out { color: var(--ds-ink); }
.file-stock.is-out::before { background: var(--ds-ink); }
.file-price-was { margin-left: 6px; color: var(--ds-ink-3); font-weight: 350; text-decoration: line-through; }
/* Compact colour dots show the range on a tile, a comparison head or an image card, and switch the photo where they can. */
.file-dots { display: flex; align-items: center; gap: 6px; min-width: 0; min-height: 20px; }
.file-dot { width: 16px; height: 16px; }
button.file-dot { cursor: pointer; }
.file-dot.is-current::after { box-shadow: 0 0 0 1px var(--ds-ink); }
.file-dots-more { margin-left: 2px; color: var(--ds-ink-3); font-size: var(--file-small); line-height: 20px; }
.file-dots-label { min-width: 0; margin-left: 4px; overflow: hidden; color: var(--ds-ink-2); font-size: var(--file-small); line-height: 20px; white-space: nowrap; text-overflow: ellipsis; }
.file-product.is-tile > .file-dots, .file-table.is-products thead .file-dots { margin-top: 8px; }

/* Full-screen photo viewer. It owns every gesture, so a pinch zooms the photo and never the page behind it. */
.file-viewer { box-sizing: border-box; position: fixed; inset: 0; width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; flex-direction: column; overflow: hidden; background: transparent; color: var(--ds-white); font-family: var(--ds-font-text); font-size: var(--file-text); font-weight: 350; line-height: 24px; letter-spacing: -0.01em; touch-action: none; overscroll-behavior: contain; }
/* An author display value would beat the browser rule that hides a closed dialog. */
.file-viewer[open] { display: flex; }
.file-viewer:focus { outline: none; }
/* The page stays faintly in view behind the photo, so the viewer reads as a layer over it. */
.file-viewer::backdrop { background: color-mix(in srgb, var(--ds-ink) 80%, transparent); transition: background-color 200ms ease-out; }
/* A zoomed photo has the screen to itself: the overlay turns opaque and the controls fade until a tap zooms back out. */
.file-viewer[data-zoomed]::backdrop { background: var(--ds-ink); }
.file-viewer-bar, .file-viewer-footer { transition: opacity 200ms ease-out; }
.file-viewer[data-zoomed] :is(.file-viewer-bar, .file-viewer-footer) { opacity: 0; visibility: hidden; transition: opacity 200ms ease-out, visibility 0s 200ms; }
.file-viewer-bar { display: flex; justify-content: flex-end; padding: calc(12px + env(safe-area-inset-top, 0px)) 12px 8px; }
.file-viewer-stage { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 8px 16px; overflow: hidden; touch-action: none; }
.file-viewer-stage img { display: block; max-width: 100%; max-height: 100%; border-radius: 12px; object-fit: contain; user-select: none; -webkit-user-drag: none; cursor: zoom-in; will-change: transform; animation: file-viewer-in 200ms ease-out; }
/* The stage keeps its size, so the photo does not jump, but stops clipping, so a zoomed photo runs to the screen's edges where the faded controls were. */
.file-viewer[data-zoomed] .file-viewer-stage { overflow: visible; }
.file-viewer[data-zoomed] .file-viewer-stage img { cursor: zoom-out; }
@keyframes file-viewer-in { from { opacity: 0.35; } }
/* Stepping, the count and the caption sit together under the photo, in reach of a thumb, so nothing covers the photo itself. */
.file-viewer-footer { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 20px calc(16px + env(safe-area-inset-bottom, 0px)); text-align: center; font-size: var(--file-text); line-height: 20px; }
.file-viewer-steps { display: flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
.file-viewer-title { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: color-mix(in srgb, var(--ds-white) 72%, transparent); }
.file-viewer-count { min-width: 64px; text-align: center; }
/* The library's ghost button in the viewer's dark colours: a 32px rounded square, 44px on a phone. */
.file-viewer .file-viewer-button { width: 32px; padding: 0; align-self: center; color: var(--ds-white); }
@media (hover: hover) { .file-viewer .file-viewer-button:not(:disabled):hover { background: color-mix(in srgb, var(--ds-white) 12%, transparent); } }
.file-viewer .file-viewer-button:disabled { border-color: transparent; background: transparent; color: color-mix(in srgb, var(--ds-white) 30%, transparent); }
.file-viewer .file-viewer-button:focus-visible { outline: 2px solid var(--ds-white); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .file-viewer-stage img { animation: none; } .file-viewer::backdrop, .file-viewer-bar, .file-viewer-footer, .file-viewer[data-zoomed] :is(.file-viewer-bar, .file-viewer-footer) { transition: none; } }
/* Focus handed back after a click or tap closes a dialog carries no ring; it outranks any host's focus ring, which cannot know about it. */
[data-quiet-focus]:focus { outline: none !important; }

/* Image frame: the card every rendered image shares */
.file-image {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 16px 16px;
    background: var(--ds-white);
    color: var(--ds-ink);
    border-radius: 24px;
    overflow: hidden;
    font-family: var(--ds-font-text);
    font-size: var(--file-text);
    font-weight: 350;
    line-height: 24px;
    letter-spacing: -0.01em;
}
.file-image[data-ratio="portrait"] { width: 390px; height: 480px; }
.file-image[data-ratio="square"] { width: 390px; height: 390px; }
.file-image[data-ratio="landscape"] { width: 480px; height: 360px; }
.file-image-body { display: flex; flex-direction: column; gap: 36px; flex: 1; min-height: 0; overflow: hidden; }
.file-image-body > .file-card { padding: 0; max-width: none; background: transparent; }
.file-image-footer { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex: none; margin: 0 0 -2px; padding: 16px 0 4px; border-top: 1px solid var(--ds-hairline); color: var(--ds-ink-2); }
.file-image-footer > span { color: var(--ds-ink-3); }
.file-image-footer > span:empty { display: none; }
.file-image-footer > span:empty + .file-wordmark { margin-left: auto; }

/* Product image: the single-product PNG */
.file-product-image-photo { position: relative; flex: 1; min-height: 0; }
.file-product-image-photo img, .file-product-image-photo .file-product-empty { width: 100%; height: 100%; object-fit: contain; border-radius: 20px; background: var(--ds-raised); aspect-ratio: auto; }
.file-product-image-photo img { display: block; }
.file-product-image-tag { position: absolute; top: 12px; left: 12px; box-sizing: border-box; min-width: 32px; height: 32px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--ds-ink); color: var(--ds-white); font-size: 18px; font-weight: 500; line-height: 1; letter-spacing: -0.01em; }
.file-product-image-tag.is-pick { background: var(--ds-ink); }
.file-product-image-copy { display: flex; flex-direction: column; gap: 2px; flex: none; }
.file-product-image .file-image-body { gap: 16px; }
.file-product-image .file-image-footer { padding-top: 10px; font-size: var(--file-small); line-height: 18px; }
.file-product-image .file-product-name { overflow-wrap: break-word; }
.file-product-image-variant { display: flex; align-items: center; gap: 12px; min-width: 0; margin-top: 6px; }
/* The frame body clips at its edge, so the dots leave room for the ring and its 1px line. */
.file-product-image-variant .file-dots { gap: 5px; padding: 1px 0 1px 4px; }
.file-product-image-variant .file-dot { width: 14px; height: 14px; }
.file-product-image-size { flex: none; margin-left: auto; color: var(--ds-ink-2); font-size: var(--file-small); line-height: 20px; }

/* Rendered images keep the smaller scale inside their fixed frame; the body size is for pages */
.file-image .file-card { font-size: var(--file-small); line-height: 20px; }
.file-image .file-title { font-size: 24px; }
.file-image .file-group-heading { font-size: 18px; }
.file-image .file-intro, .file-image .file-p, .file-image .file-bullets, .file-image .file-key { line-height: 20px; }

/* Desktop */
@media (min-width: 768px) {
    .file-ground { padding: 36px; }
    .file-card { --file-pad-x: 36px; padding: 36px; }
    .file-card[data-width="phone"] { --file-pad-x: 24px; padding: 24px 24px; }
    .file-title { font-size: 36px; }
    .file-intro, .file-closing, .file-p { max-width: 72ch; }
    .file-product-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
    .file-product-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 28px; align-items: start; }
    .file-product-modal { width: min(920px, calc(100% - 32px)); height: auto; max-height: calc(100dvh - 32px); margin: auto; border-radius: 16px; }
    .file-product.is-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
    .file-bleed { padding-inline: var(--file-pad-x) 0; scroll-padding-inline: var(--file-pad-x) 0; }
    .file-product-media .file-photos, .file-product-gallery .file-photos { margin-inline: 0; padding-inline: 0; }
    .file-product-media > .file-strip, .file-product-gallery > .file-strip { margin-inline: 0; }
    .file-product-detail .file-product-info { position: sticky; top: 56px; }
    .file-product-gallery .file-photos { display: grid; grid-template-columns: minmax(0, 1fr); height: auto; overflow: visible; }
    .file-product-gallery .file-photos:not(.is-single) { height: auto; }
    .file-product-gallery .file-photos img, .file-product-gallery .file-photos:not(.is-single) img { width: 100%; height: auto; }
    .file-product-media .file-photos { display: block; overflow: visible; height: auto; }
    .file-product-media .file-photos:not(.is-single) { height: auto; }
    .file-product-media .file-photos > .file-product-zoom:not(:first-child) { display: none; }
    .file-product-media .file-photos > .file-product-zoom, .file-product-gallery .file-photos > .file-product-zoom { width: 100%; height: auto; }
    .file-product-media .file-photos img { width: 100%; height: auto; max-height: calc(100cqw * 4 / 3); object-fit: cover; }
    .file-product-thumbs { display: flex; }
}

@media (max-width: 600px) {
    .file-card .file-button, .file-card .file-product-toggle { min-height: 44px; }
    .file-card .file-button[data-state] { --file-button-inset: 14px; }
    .file-card .file-button.is-pill { --file-button-icon-pad: 14px; }
    .file-viewer .file-viewer-button:not(.file-close) { width: 44px; height: 44px; }
    .file-close, .file-card .file-close { height: 32px; min-height: 32px; }
    .file-swatches { gap: 12px; }
    .file-size, .file-card .file-size { height: 32px; min-height: 32px; min-width: 38px; }
}

@media print {
    .file-ground { background: var(--ds-white); padding: 0; }
    .file-card, .file-ground .file-card { box-shadow: none; max-width: none; border-radius: 0; }
    .file-photos, .file-table-scroll { overflow: visible; }
    .file-strip-arrows { display: none; }
}

.file-figure[data-fit="contain"] img { aspect-ratio: auto; object-fit: contain; }
.file-data-table { min-width: 100%; }
.file-data-table caption { text-align: start; color: var(--ds-ink-2); padding-bottom: 16px; }
.file-data-table th, .file-data-table td { min-width: 120px; max-width: 32ch; white-space: normal; overflow-wrap: anywhere; }
.file-data-table [data-numeric] { text-align: end; font-variant-numeric: tabular-nums; }
.file-data-table th button { background: none; border: 0; padding: 10px 0; color: inherit; font: inherit; text-align: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
/* Compare columns: subgrid keeps every row level across columns; the last column ends on the text margin. */
.file-compare { --file-compare-col: var(--file-product-col); display: grid; grid-auto-flow: column; grid-auto-columns: var(--file-compare-col); column-gap: 16px; margin-inline: calc(-1 * var(--file-pad-x)); padding: 0 var(--file-pad-x); overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-left: var(--file-pad-x); scrollbar-width: none; }
.file-compare::-webkit-scrollbar { display: none; }
/* Focus returns to the scroller after a dialog closes, and Safari then treats it as keyboard focus; the column heads carry the visible focus instead. */
.file-compare:focus, .file-compare-head:focus:not(:focus-visible) { outline: none; }
.file-compare-column, .file-compare-column > dl { display: grid; grid-row: 1 / -1; grid-template-rows: subgrid; min-width: 0; margin: 0; }
.file-compare-column { scroll-snap-align: start; }
.file-compare-column > dl { grid-row: 2 / -1; }
.file-compare-head { display: flex; flex-direction: column; gap: 12px; padding: 0 0 12px; border: 0; background: none; text-align: left; color: inherit; font: inherit; }
button.file-compare-head { cursor: pointer; }
.file-compare-photo { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: 12px; overflow: clip; background: var(--ds-raised); }
.file-compare-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* An option without a photo shows its title in the photo's place, so its column never reads as missing content. */
.file-compare-photo-name { box-sizing: border-box; display: grid; place-items: center; height: 100%; padding: 16px; text-align: center; overflow-wrap: anywhere; font-family: var(--ds-font-display); font-size: 22px; line-height: 1.15; letter-spacing: -0.02em; color: var(--ds-ink-2); }
.file-compare-tags { position: absolute; top: 8px; left: 8px; right: 8px; display: flex; gap: 4px; align-items: flex-start; }
.file-compare-tags > .file-badge { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-compare-column.is-selected .file-compare-photo { box-shadow: inset 0 0 0 2px var(--ds-ink); }
.file-compare-tags .file-badge { gap: 4px; }
.file-compare-open { display: inline-flex; align-items: center; gap: 2px; margin-top: -8px; color: var(--ds-ink); line-height: 20px; }
.file-compare-head > strong { font-weight: 600; line-height: 20px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.file-compare-cell { padding: 8px 0; border-top: 1px solid var(--ds-hairline); }
.file-compare-cell > dt { margin: 0; }
.file-compare-cell > dd { margin: 0; display: flex; flex-direction: column; font-size: var(--file-text); line-height: 24px; }
.file-compare-cell.is-best > dd { font-weight: 600; }
.file-chart details { border-block: 1px solid var(--ds-hairline); padding: 12px 0; }
.file-chart details > summary { cursor: pointer; min-height: 24px; padding: 10px 0; font-weight: 600; }
.file-chart details > :not(summary) { margin-top: 12px; }
@media print {
    .file-data-table { min-width: 0; }
    .file-data-table th, .file-data-table td { min-width: 0; }
}
.file-scaled-chart { max-width: 640px; width: 100%; box-sizing: border-box; }
.file-signed-bars { display: grid; gap: 14px; }
.file-signed-bars > div { display: grid; grid-template-columns: minmax(50px, 1fr) minmax(60px, 2fr) minmax(30px, auto); align-items: center; gap: 12px; }
.file-signed-bars strong { text-align: end; font-weight: 600; }
.file-bar-labels { display: flex; text-align: center; }
.file-bar-labels > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.file-chart-readout { margin: 0; min-height: 40px; color: var(--ds-ink-2); }
.file-scaled-chart .file-chart-axis { white-space: normal; }
.file-scaled-chart .file-chart-axis span:last-child { text-align: end; }
.file-scaled-chart [tabindex]:focus { outline: none; }
.file-scaled-chart [tabindex]:focus-visible circle:last-child { stroke-width: 3; }

.file-image .file-chart details, .file-image .file-chart-readout { display: none; }

/* src/style.css */
html,
body,
#root {
  margin: 0;
  min-height: 100%;
}
body {
  background-color: #0b0b0d;
  background-image:
    radial-gradient(
      circle at 88% 6%,
      #1d1d21 0,
      transparent 320px),
    radial-gradient(
      circle at -8% 38%,
      #17171a 0,
      transparent 300px),
    radial-gradient(
      circle at 92% 88%,
      #161619 0,
      transparent 340px);
  background-attachment: fixed;
}
.zekyra-dark {
  --ds-font-display:
    "GT America",
    "KMR Melange Grotesk",
    "Helvetica Neue",
    Arial,
    sans-serif;
  --ds-page: #0b0b0d;
  --ds-raised: #161618;
  --ds-white: #161618;
  --ds-ink: #f4f4f4;
  --ds-ink-2: #b9b9b9;
  --ds-ink-3: #8a8a8a;
  --ds-ink-4: #5c5c5c;
  --ds-hairline: #2e2e33;
  --ds-teal: #f0f0f0;
  --ds-red: #e8e8e8;
  --ds-red-border: #3a3a3f;
  --ds-hover: color-mix(in srgb, #f4f4f4 8%, transparent);
  --ds-hover-strong: color-mix(in srgb, #f4f4f4 14%, transparent);
  --ds-hover-red: color-mix(in srgb, #f4f4f4 10%, transparent);
  --ds-scrim: rgb(0 0 0 / 0.55);
  --ds-shadow-control: 0 1px 2px rgb(0 0 0 / 0.4);
  --ds-shadow-modal: 0 30px 70px rgb(0 0 0 / 0.5);
  --ds-elevation-0: 0 0 1px rgb(0 0 0 / 0.35), 0 1px 2px rgb(0 0 0 / 0.3);
  --ds-elevation-1: 0 1px 2px rgb(0 0 0 / 0.35), 0 4px 12px rgb(0 0 0 / 0.4);
  --ds-elevation-2: 0 1px 3px rgb(0 0 0 / 0.3), 0 8px 24px rgb(0 0 0 / 0.45);
}
.file-card {
  background: transparent;
}
.zekyra-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: -4px 0 28px;
  padding-bottom: 0;
  border-bottom: none;
}
.zekyra-tab {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #ececec;
  text-decoration: none;
  background: #1a1a1d;
  border: 3px solid #f2f2f2;
  box-shadow: 4px 4px 0 #2b2b30;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.zekyra-tab:hover {
  color: #ffffff;
  background: #242428;
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 #2b2b30;
}
.zekyra-tab.active {
  background: #ffffff;
  color: #111111;
  border-color: #101010;
  box-shadow: 5px 5px 0 #2b2b30;
}
.zekyra-tab.hot {
  background: #ff7a1a;
  color: #141414;
  border-color: #101010;
}
.zekyra-tab.hot:hover {
  background: #ff8a33;
  color: #141414;
}
.zekyra-tab.hot.active {
  background: #ff7a1a;
  color: #141414;
  border-color: #ffffff;
  box-shadow: 5px 5px 0 #2b2b30;
}
.file-header {
  margin-bottom: 8px;
}
.file-title {
  margin: 0 0 14px;
  color: #ffffff;
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(38px, 10vw, 60px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-shadow: 5px 5px 0 #2b2b30;
}
.route-hot .file-title {
  color: #ff7a1a;
}
.file-header .file-fact,
.file-header .file-fact.is-known {
  display: inline-block;
  margin: 0 0 18px;
  color: #111111;
  align-self: flex-start;
  width: fit-content;
  max-width: 100%;
  background: #dcdcdc;
  color: #111111;
  border: 3px solid #101010;
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.2;
  box-shadow: 4px 4px 0 #2b2b30;
  transform: rotate(-1.5deg);
}
.route-hot .file-header .file-fact,
.route-hot .file-header .file-fact.is-known {
  background: #ff7a1a;
  color: #141414;
}
.file-intro,
.hero-intro {
  margin: 0 0 10px;
  background: #17171a;
  color: #f2f2f2;
  border: 3px solid #f2f2f2;
  border-radius: 18px;
  box-shadow: 7px 7px 0 #2b2b30;
  padding: 16px 18px;
  font-size: 15px;
  line-height: 1.55;
  font-weight: 600;
}
.hero {
  position: relative;
  margin: 26px 0 30px;
}
.hero-shout {
  color: #ffffff;
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(40px, 11.5vw, 68px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-shadow: 5px 5px 0 #2b2b30;
}
.hero-slab {
  display: inline-block;
  margin-top: 16px;
  background: #d9d9d9;
  color: #111111;
  border: 3px solid #101010;
  border-radius: 18px;
  box-shadow: 7px 7px 0 #2b2b30;
  padding: 14px 22px;
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(26px, 7.5vw, 44px);
  line-height: 1;
  letter-spacing: -0.01em;
  transform: rotate(-1.2deg);
}
.hero-intro {
  margin-top: 22px;
}
.hero-stamp {
  position: absolute;
  top: -14px;
  right: 2px;
  width: 116px;
  height: 116px;
  border-radius: 50%;
  background: #f0f0f0;
  color: #111111;
  border: 3px solid #101010;
  box-shadow: 5px 5px 0 #2b2b30;
  transform: rotate(10deg);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 12px;
  box-sizing: border-box;
}
@media (max-width: 640px) {
  .hero {
    padding-top: 104px;
  }
  .hero-stamp {
    top: 0;
    right: 4px;
    width: 96px;
    height: 96px;
    font-size: 11px;
  }
}
@media (min-width: 641px) {
  .hero-shout {
    max-width: calc(100% - 140px);
  }
}
.file-group {
  --ds-ink: #141414;
  --ds-ink-2: #4c4c4c;
  --ds-ink-3: #6e6e6e;
  --ds-ink-4: #9a9a9a;
  --ds-hairline: #d2d2d2;
  --ds-teal: #111111;
  --ds-red: #111111;
  --ds-raised: #ffffff;
  --ds-white: #ffffff;
  --ds-hover: color-mix(in srgb, #141414 6%, transparent);
  background: #f4f4f4;
  color: #141414;
  border: 3px solid #101010;
  border-radius: 20px;
  box-shadow: 7px 7px 0 #2b2b30;
  padding: 0 18px 20px;
  margin: 0 0 30px;
  overflow: hidden;
}
.file-group > h2.file-group-heading,
.file-group > h2.file-group-label {
  margin: 0 -18px 18px;
  padding: 12px 18px;
  background: #dcdcdc;
  color: #111111;
  border-bottom: 3px solid #101010;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 18px;
  line-height: 1.2;
}
.file-group > h2.file-group-label {
  font-size: 13px;
  background: #e6e6e6;
  letter-spacing: 0.05em;
}
.route-hot .file-group > h2.file-group-heading,
.route-hot .file-group > h2.file-group-label {
  background: #141414;
  color: #ff7a1a;
}
.file-rows .file-row {
  padding: 12px 0;
}
.file-rows .file-row + .file-row {
  border-top: 2px dashed #b8b8b8;
}
.file-row-slot.is-number {
  width: auto;
  min-width: 34px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 7px;
  background: #141414;
  color: #ffffff;
  border: 3px solid #101010;
  border-radius: 10px;
  box-shadow: 3px 3px 0 #b9b9b9;
  font-weight: 900;
  transform: rotate(-2deg);
}
.file-row .file-strong {
  font-weight: 800;
}
.file-row-value {
  font-weight: 800;
}
.file-facts {
  gap: 12px;
}
.file-facts > div {
  background: #ffffff;
  border: 3px solid #101010;
  border-radius: 14px;
  box-shadow: 4px 4px 0 #b9b9b9;
  padding: 12px 14px;
}
.file-facts dt {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #5a5a5a;
}
.file-facts dd {
  margin: 4px 0 0;
  font-weight: 900;
  color: #111111;
}
.file-steps li {
  padding: 12px 0;
}
.file-steps li + li {
  border-top: 2px dashed #c2c2c2;
}
.file-step-n {
  width: auto;
  min-width: 32px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 7px;
  background: #141414;
  color: #ffffff;
  border: 3px solid #101010;
  border-radius: 10px;
  box-shadow: 3px 3px 0 #b9b9b9;
  font-weight: 900;
  transform: rotate(-3deg);
}
.file-callout.file-bar {
  background: #141416;
  color: #f4f4f4;
  border: 3px solid #f4f4f4;
  border-radius: 18px;
  box-shadow: 6px 6px 0 #2b2b30;
  padding: 16px 18px;
  transform: rotate(-0.4deg);
}
.file-callout .file-strong {
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.file-group .file-callout.file-bar {
  border-color: #101010;
  box-shadow: 6px 6px 0 #b9b9b9;
}
.file-key.file-bar {
  background: #e4e4e4;
  color: #111111;
  border: 3px solid #101010;
  border-radius: 14px;
  box-shadow: 4px 4px 0 #b9b9b9;
  padding: 14px 16px;
  font-weight: 800;
}
.file-button-face,
.file-button-label,
.file-button-slot {
  color: #ffffff !important;
}
.file-button-face {
  background: #141414;
  color: #ffffff;
  border: 3px solid #f4f4f4;
  border-radius: 14px;
  box-shadow: 5px 5px 0 #2b2b30;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.file-button:hover .file-button-face {
  transform: translate(-1px, -1px);
  box-shadow: 6px 6px 0 #2b2b30;
}
.file-group .file-button-face {
  border-color: #101010;
  box-shadow: 5px 5px 0 #b9b9b9;
}
.file-control-label {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
input.file-field {
  background: #ffffff;
  color: #111111;
  border: 3px solid #101010;
  border-radius: 14px;
  box-shadow: 4px 4px 0 #b9b9b9;
  padding: 14px 16px;
  font-weight: 600;
}
.file-photos img {
  border: 3px solid #f2f2f2;
  border-radius: 18px;
  box-shadow: 7px 7px 0 #2b2b30;
}
.file-chart {
  filter: grayscale(1);
}
.file-stack-bar {
  border: 3px solid #101010;
  border-radius: 12px;
  overflow: hidden;
}
.file-caption {
  color: #8a8a8a;
}
.file-group .file-caption {
  color: #5a5a5a;
}
.file-closing {
  color: #7a7a7a;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.file-link {
  font-weight: 800;
  text-decoration-thickness: 2px;
}
.file-group .file-link {
  color: #111111;
}
.flag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.flag-pill {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 14px;
  border-radius: 999px;
  background: #141414;
  color: #f4f4f4;
  border: 3px solid #101010;
  box-shadow: 3px 3px 0 #b9b9b9;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.3;
}
.flag-row .flag-pill:nth-child(odd) {
  transform: rotate(-1deg);
}
.flag-row .flag-pill:nth-child(even) {
  transform: rotate(1deg);
}
.mint-result {
  margin-top: 14px;
  padding: 16px 18px;
  background: #141416;
  color: #f4f4f4;
  border: 3px solid #101010;
  border-radius: 18px;
  box-shadow: 5px 5px 0 #b9b9b9;
  font-size: 14px;
  line-height: 24px;
}
.mint-result p {
  margin: 0 0 8px;
}
.mint-result p:last-child {
  margin-bottom: 0;
}
.mint-result-title {
  font-weight: 900;
  color: #b9b9b9;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.05em;
}
.mint-result-verdict {
  font-weight: 800;
  color: #ffffff;
}
.hot-card {
  padding: 14px 0;
}
.hot-card + .hot-card {
  border-top: 2px dashed #b8b8b8;
}
.hot-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.hot-name {
  font-weight: 900;
  font-size: 17px;
  line-height: 1.3;
  color: #111111;
  text-transform: uppercase;
}
.hot-risk {
  margin-left: auto;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.03em;
  padding: 5px 12px;
  border-radius: 999px;
  border: 3px solid #101010;
  white-space: nowrap;
  box-shadow: 3px 3px 0 #b9b9b9;
}
.hot-risk.hi {
  background: #141414;
  color: #ffffff;
}
.hot-risk.mid {
  background: #6e6e6e;
  color: #ffffff;
}
.hot-risk.low {
  background: #e3e3e3;
  color: #111111;
}
.hot-dead {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  border: 3px solid #101010;
  white-space: nowrap;
  background: #d92b2b;
  color: #ffffff;
  box-shadow: 3px 3px 0 #b9b9b9;
  transform: rotate(-2deg);
}
.hot-live {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 20px;
  color: #4c4c4c;
  font-weight: 700;
}
.hot-desc {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 22px;
  color: #4c4c4c;
}
.hot-stats {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 22px;
  color: #141414;
  font-weight: 700;
}
.hot-window {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 22px;
  color: #111111;
  font-weight: 900;
}
.route-hot .hot-window {
  color: #d95f00;
}
.hot-window .fade {
  color: #6e6e6e;
  font-weight: 700;
}
.hot-pair {
  margin: 8px 0 6px;
  font-size: 12px;
  line-height: 18px;
  font-family: ui-monospace, monospace;
  color: #6e6e6e;
}
button.hot-pair.hot-copy {
  display: block;
  background: none;
  border: none;
  padding: 2px 6px;
  margin-left: -6px;
  cursor: pointer;
  text-align: left;
  border-radius: 6px;
}
button.hot-pair.hot-copy:hover {
  background: #e3e3e3;
  color: #111111;
}
button.hot-pair.hot-copy:active {
  transform: translate(1px, 1px);
}
.checker-go {
  margin-top: 10px;
  display: inline-block;
  font: inherit;
  font-weight: 900;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 10px 22px;
  background: #141414;
  color: #ffffff;
  border: 3px solid #101010;
  border-radius: 999px;
  box-shadow: 4px 4px 0 #b9b9b9;
  cursor: pointer;
}
.checker-go:hover {
  background: #000000;
}
.checker-go:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 #b9b9b9;
}
.checker-go:disabled {
  opacity: 0.6;
  cursor: default;
}
.flag-line {
  font-weight: 700;
}
.flag-red {
  color: #ff5c5c;
}
.flag-green {
  color: #7ee787;
}
.flag-dim {
  color: #9a9a9a;
}
.mint-fact-line {
  color: #f4f4f4;
  font-weight: 700;
}

/* === Zekyra sticker theme (matte black / grey sticker cards) === */
body { background: #0e0e0e; }
.zekyra-dark {
    --ds-page: #0e0e0e;
    --ds-raised: #2c2c2c;
    --ds-white: #2c2c2c;
    --ds-ink: #ececec;
    --ds-ink-2: #b3b3b3;
    --ds-ink-3: #8a8a8a;
    --ds-ink-4: #5f5f5f;
    --ds-hairline: #1c1c1c;
    --ds-teal: #58a37c;
    --ds-red: #e05260;
    --ds-red-border: #5c232a;
    --ds-hover: color-mix(in srgb, #ececec 6%, transparent);
    --ds-hover-strong: color-mix(in srgb, #ececec 12%, transparent);
    --ds-font-display: 'Melange Grotesk', system-ui, sans-serif;
    background: #0e0e0e;
}
.zekyra-dark .file-card { background: transparent; gap: 28px; }

/* chunky display type */
.zekyra-dark .file-title {
    font-family: 'Melange Grotesk', system-ui, sans-serif;
    font-weight: 600; text-transform: uppercase; letter-spacing: -0.015em;
    font-size: 40px; line-height: 1.02;
}
.zekyra-dark .file-group-heading, .zekyra-dark .file-heading {
    font-family: 'Melange Grotesk', system-ui, sans-serif;
    font-weight: 600; text-transform: uppercase; letter-spacing: 0.01em; font-size: 19px;
}
.zekyra-dark .file-group-label { color: #8a8a8a; text-transform: uppercase; letter-spacing: 0.08em; font-size: 12px; }

/* tilted degen badge under the header */
.zekyra-dark .file-header { position: relative; }
.zekyra-dark .file-header::after {
    content: "100% DEGEN APPROVED";
    display: inline-block; margin-top: 16px;
    transform: rotate(-3.5deg);
    background: #3a3a3a; color: #ececec;
    border: 3px solid #171717; border-radius: 10px;
    box-shadow: 4px 4px 0 #1e1e1e;
    padding: 8px 16px;
    font-family: 'Melange Grotesk', system-ui, sans-serif;
    font-weight: 600; font-size: 14px; letter-spacing: 0.07em;
}

/* every group becomes a grey sticker card */
.zekyra-dark .file-group {
    background: #2c2c2c;
    border: 3px solid #171717; border-radius: 18px;
    box-shadow: 6px 6px 0 #3d3d3d;
    padding: 20px;
}

/* nav pills */
.zekyra-dark .zekyra-nav { border-bottom: 0; gap: 10px; margin: -4px 0 8px; }
.zekyra-dark .zekyra-tab {
    background: #3a3a3a; color: #d5d5d5;
    border: 3px solid #171717; border-radius: 999px;
    box-shadow: 3px 3px 0 #1e1e1e;
    font-weight: 600; min-height: 40px; padding: 8px 16px;
}
.zekyra-dark .zekyra-tab:hover { background: #444444; color: #ececec; }
/* active tab: white pill, dark text, thick dark bottom marker */
.zekyra-dark .zekyra-tab[aria-current="page"] {
    background: #f2f2f2; color: #141414;
    border: 3px solid #171717; border-bottom-width: 6px;
    box-shadow: 3px 3px 0 #1e1e1e;
}
/* HOT: always orange with flame */
.zekyra-dark .zekyra-tab[href="/hot"] {
    background: #e8710a; color: #fff; border-color: #7a3c04;
    box-shadow: 3px 3px 0 #5c2e03;
}
.zekyra-dark .zekyra-tab[href="/hot"]::before { content: "\1F525"; margin-right: 6px; }
.zekyra-dark .zekyra-tab[href="/hot"]:hover { background: #f57f17; }
/* HOT active: stays orange, white ring + bottom marker */
.zekyra-dark .zekyra-tab[href="/hot"][aria-current="page"] {
    background: #e8710a; color: #fff;
    border-color: #7a3c04; border-bottom-width: 6px;
    box-shadow: 3px 3px 0 #5c2e03, 0 0 0 3px #f2f2f2;
}

/* photos as stickers */
.zekyra-dark .file-photos img, .zekyra-dark .file-figure img, .zekyra-dark .file-image {
    border: 3px solid #171717; border-radius: 16px;
    box-shadow: 5px 5px 0 #3d3d3d;
}

/* buttons as stickers */
.zekyra-dark .file-button-face, .zekyra-dark .file-button {
    border: 3px solid #171717 !important; border-radius: 12px !important;
    box-shadow: 4px 4px 0 #1e1e1e !important;
    font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
}

/* inputs as dark inset panels */
.zekyra-dark input, .zekyra-dark textarea, .zekyra-dark .file-field input {
    background: #1c1c1c !important; color: #ececec !important;
    border: 3px solid #171717 !important; border-radius: 12px !important;
}

/* inner panels */
.zekyra-dark .file-callout, .zekyra-dark .mint-result {
    background: #1c1c1c; border: 3px solid #171717; border-radius: 14px;
    box-shadow: 4px 4px 0 #242424;
}
.zekyra-dark .file-facts, .zekyra-dark .file-data-table, .zekyra-dark .file-table {
    border-color: #171717;
}

/* flag pills: thicker, sticker-ish */
.zekyra-dark .flag-pill { border-width: 2px; font-weight: 600; }

/* footer */
.zekyra-dark .file-closing { color: #5f5f5f; letter-spacing: 0.14em; text-transform: uppercase; font-size: 12px; }

/* tagline grey, green reserved for EARLY chips */
.zekyra-dark .file-header .file-known, .zekyra-dark .file-header .file-fact { color: #8a8a8a !important; }
/* muted green chips stay green */
.zekyra-dark .file-badge, .zekyra-dark .file-pill { font-weight: 600; }

/* fix: builder's HOT-page fact is an orange pill - keep its text dark (our tagline-grey override was hitting it) */
.route-hot .file-header .file-fact, .route-hot .file-header .file-fact.is-known { color: #141414 !important; }

/* light ink inside dark sticker cards (builder gen-8 theme inks cards for a light card bg) */
.zekyra-dark .file-group {
    --ds-ink: #f0f0f0; --ds-ink-2: #d8d8d8; --ds-ink-3: #b8b8b8; --ds-ink-4: #9a9a9a;
    --ds-hairline: #6e6e6e; --ds-teal: #58a37c; --ds-red: #e06570;
    --ds-hover: color-mix(in srgb, #f0f0f0 10%, transparent);
    color: #f0f0f0;
}
.zekyra-dark .file-group .bg-ds-ink { background-color: #141414; }
.zekyra-dark .file-group .file-pill { background: #141414; color: #f4f4f4; }
.zekyra-dark .file-group .hot-name,
.zekyra-dark .file-group .hot-stats,
.zekyra-dark .file-group .hot-window,
.zekyra-dark .file-group .file-link { color: #ececec; }

/* tap-to-copy affordance */
.zekyra-dark .hot-pair, .zekyra-dark [data-zk-addr] { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
#zk-copy-toast {
    position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(80px);
    background: #2c2c2c; color: #f0f0f0; border: 3px solid #171717; border-radius: 999px;
    box-shadow: 4px 4px 0 #3d3d3d; padding: 10px 18px; font: 600 14px/1.2 system-ui, sans-serif;
    z-index: 99999; opacity: 0; transition: transform .18s ease, opacity .18s ease; pointer-events: none;
}
#zk-copy-toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }

/* dim hard-coded greys from the builder theme -> readable on dark cards */
.zekyra-dark .hot-desc { color: #cfcfcf; }
.zekyra-dark .hot-pair { color: #b8b8b8; }
.zekyra-dark .hot-window .fade { color: #9a9a9a; }