/* hexTool — "specimen sheet" theme. The live color is --c; --on-c is readable text on it. */
:root{
  --paper:#F2EFE7;--sheet:#FBFAF5;--ink:#151412;--ink-2:#55514A;--ink-3:#6F6A5F;--rule:#DAD4C6;--rule-2:#C4BCAA;
  --ok:#17703F;--bad:#B42318;
  --c:#1E90FF;--on-c:#fff;
  --f-sans:"Schibsted Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI","Noto Sans","Noto Sans JP","Noto Sans KR","Noto Sans SC","Noto Sans TC","Noto Sans Devanagari","Noto Sans Bengali",sans-serif;
  --f-mono:"Fragment Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --f-serif:"Instrument Serif","Iowan Old Style",Georgia,serif;
  --f-label:var(--f-mono);
  --tight:-.035em;--wide:.12em;
  --gutter:clamp(16px,4vw,48px);
  --ease:cubic-bezier(.2,.75,.25,1);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --paper:#11110F;--sheet:#1A1917;--ink:#EEEBE3;--ink-2:#B0AB9F;--ink-3:#8E897E;--rule:#2C2B27;--rule-2:#403E38;
  --ok:#5CC48B;--bad:#FF8B7B;color-scheme:dark;
}}
/* Scripts that must not be letter-spaced (joined or syllabic) */
/* Scripts that must not be letter-spaced (joined or syllabic); their translated labels use the sans face. */
:root:lang(ar),:root:lang(ur),:root:lang(hi),:root:lang(bn),:root:lang(ja),:root:lang(ko),:root:lang(zh){--tight:0;--wide:0;--f-label:var(--f-sans)}
:root:lang(ar){--f-sans:"Noto Sans Arabic","Schibsted Grotesk",system-ui,sans-serif}
:root:lang(ur){--f-sans:"Noto Nastaliq Urdu","Noto Sans Arabic",system-ui,sans-serif}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;font:400 16px/1.55 var(--f-sans);background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased}
:root:lang(ur) body{line-height:2}
:root:lang(ar) dt,:root:lang(ur) dt,:root:lang(hi) dt,:root:lang(bn) dt,:root:lang(ja) dt,:root:lang(ko) dt,:root:lang(zh) dt{font-size:.8rem}
body::before{content:"";position:fixed;inset:0;z-index:100;pointer-events:none;opacity:.06;mix-blend-mode:multiply;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@media (prefers-color-scheme:dark){body::before{mix-blend-mode:screen;opacity:.035}}
::selection{background:var(--c);color:var(--on-c)}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
a{color:inherit}
img,svg{display:block}
button,input,select{font:inherit;color:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.mono{font-family:var(--f-mono);font-weight:400}
.wrap{width:100%;max-width:1240px;margin-inline:auto;padding-inline:var(--gutter)}
main{flex:1}

/* ---------- Header ---------- */
.top{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--paper) 86%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--rule)}
.top-in{display:flex;align-items:center;gap:20px;min-height:64px}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-size:1.25rem;font-weight:500;letter-spacing:-.02em;white-space:nowrap}
.brand b{font-weight:800}
.brand-chip{width:20px;height:26px;flex:none;background:linear-gradient(var(--c) 0 68%,var(--sheet) 0);box-shadow:0 0 0 1px var(--rule-2),0 3px 6px -3px rgb(0 0 0/.4);border-radius:2px;transition:background .3s}
.nav{margin-inline-start:auto;display:flex;align-items:center;gap:6px 18px}
.nav a,.nav .link{font:500 .8rem/1 var(--f-label);letter-spacing:calc(var(--wide)/3);text-decoration:none;color:var(--ink-2);padding:8px 0;transition:color .15s}
.nav a:hover,.nav .link:hover{color:var(--ink)}
.nav form{margin:0}
.nav .nav-premium{color:var(--ink);display:inline-flex;align-items:center;gap:8px}
.nav .nav-premium::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c);box-shadow:0 0 0 1px var(--rule-2)}
.lang{appearance:none;-webkit-appearance:none;max-width:150px;font:500 .8rem var(--f-sans);padding:8px 30px 8px 12px;border:1px solid var(--rule-2);border-radius:3px;cursor:pointer;text-overflow:ellipsis;
  background:var(--sheet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238A857A' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 11px center}
[dir=rtl] .lang{padding:8px 12px 8px 30px;background-position:left 11px center}
.lang:hover{border-color:var(--ink-3)}
.link{background:none;border:0;padding:0;cursor:pointer;color:var(--ink-2)}
.badge{display:inline-block;font:600 .68rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;padding:6px 9px;border-radius:99px;background:var(--c);color:var(--on-c)}
@media (max-width:560px){.nav .nav-premium{display:none}.lang{max-width:112px}.brand{font-size:1.1rem}}

/* ---------- Shared type ---------- */
.kicker{display:flex;align-items:center;gap:10px;margin:0 0 18px;font:500 .78rem var(--f-label);letter-spacing:calc(var(--wide)/2);color:var(--ink-2)}
.kicker-dot{width:10px;height:10px;border-radius:50%;background:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 22%,transparent)}
h1,h2{text-wrap:balance}
.page-title{font-weight:800;font-size:clamp(2.2rem,6vw,4.2rem);line-height:1;letter-spacing:var(--tight);margin:0}

/* ---------- Buttons & inputs ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:700 .95rem/1 var(--f-sans);padding:15px 22px;border:1px solid var(--ink);border-radius:3px;background:var(--ink);color:var(--paper);text-decoration:none;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.btn:hover{background:var(--c);border-color:var(--c);color:var(--on-c)}
.btn-ghost{background:transparent;color:var(--ink)}
.input{width:100%;font:500 1rem var(--f-sans);padding:12px 14px;background:var(--sheet);border:1px solid var(--rule-2);border-radius:3px;transition:border-color .15s,box-shadow .15s}
.input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 40%,transparent)}
.err{color:var(--bad);font:500 .85rem var(--f-label);margin:12px 0 0}
.err[hidden]{display:none}

/* ---------- Converter: specimen ---------- */
.spec{display:grid;grid-template-columns:minmax(280px,5fr) 7fr;gap:clamp(28px,5vw,80px);align-items:start;padding-block:clamp(28px,5vw,64px) clamp(16px,3vw,32px)}
.spec-chip{position:relative;padding:26px}
.crop{position:absolute;inset:0;pointer-events:none;--m:var(--ink-3);
  background:
    linear-gradient(var(--m),var(--m)) 0 26px/16px 1px no-repeat,linear-gradient(var(--m),var(--m)) 26px 0/1px 16px no-repeat,
    linear-gradient(var(--m),var(--m)) 100% 26px/16px 1px no-repeat,linear-gradient(var(--m),var(--m)) calc(100% - 26px) 0/1px 16px no-repeat,
    linear-gradient(var(--m),var(--m)) 0 calc(100% - 26px)/16px 1px no-repeat,linear-gradient(var(--m),var(--m)) 26px 100%/1px 16px no-repeat,
    linear-gradient(var(--m),var(--m)) 100% calc(100% - 26px)/16px 1px no-repeat,linear-gradient(var(--m),var(--m)) calc(100% - 26px) 100%/1px 16px no-repeat}
.chip{margin:0;background:var(--sheet);padding:14px 14px 0;border:1px solid var(--rule);rotate:-1.4deg;transition:rotate .6s var(--ease),box-shadow .4s;
  box-shadow:0 1px 0 var(--rule),0 40px 70px -40px color-mix(in srgb,var(--c) 70%,transparent),0 18px 30px -22px rgb(0 0 0/.45)}
[dir=rtl] .chip{rotate:1.4deg}
.spec-chip:hover .chip,.chip:focus-within{rotate:0deg}
.chip-color{position:relative;aspect-ratio:1/1.04;background:var(--c);transition:background-color .25s}
.chip-color input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:crosshair;border:0;padding:0}
.chip-color:focus-within{outline:2px solid var(--ink);outline-offset:4px}
.chip-hint{position:absolute;inset-block-start:14px;inset-inline-end:14px;display:inline-flex;align-items:center;gap:7px;padding:7px 11px 7px 9px;border:1px solid currentColor;border-radius:99px;color:var(--on-c);font:500 .7rem/1 var(--f-label);letter-spacing:calc(var(--wide)/2);pointer-events:none;opacity:.8;transition:opacity .2s}
.chip-color:hover .chip-hint{opacity:1}
.chip-label{display:grid;grid-template-columns:1fr auto;align-items:end;gap:4px 14px;padding:16px 4px 18px}
.chip-brand{grid-column:1/-1;font:600 .66rem var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.chip-name{font:italic 400 clamp(1.8rem,3.2vw,2.5rem)/1 var(--f-serif);letter-spacing:-.01em;overflow-wrap:anywhere}
.chip-code{font:400 1rem var(--f-mono);color:var(--ink-2);direction:ltr}

.spec-body h1{font-weight:800;font-size:clamp(2rem,4.4vw,3.5rem);line-height:1.02;letter-spacing:var(--tight);margin:0}
.lede{margin:14px 0 0;color:var(--ink-2);font-size:1.12rem;max-width:44ch}
.fields{margin-top:clamp(24px,3vw,36px);border-top:2px solid var(--ink)}
.field{display:grid;grid-template-columns:76px 1fr auto;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--rule)}
.field-label{font:600 .8rem var(--f-mono);letter-spacing:var(--wide)}
.field-inputs{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px}
.ch{position:relative;display:block;min-width:0}
.ch i{position:absolute;top:7px;left:10px;font:normal 500 .62rem/1 var(--f-mono);letter-spacing:.08em;color:var(--ink-3);pointer-events:none}
.ch input{width:100%;font:400 1.02rem/1.2 var(--f-mono);padding:20px 10px 8px;background:var(--sheet);border:1px solid var(--rule);border-radius:3px;transition:border-color .15s,box-shadow .15s;-moz-appearance:textfield;appearance:textfield}
.ch input::-webkit-inner-spin-button,.ch input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.ch input:hover{border-color:var(--rule-2)}
.ch input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 42%,transparent)}
.ch input[aria-invalid=true]{border-color:var(--bad)}
#hex{text-transform:uppercase;letter-spacing:.06em}
.copy{min-width:88px;font:600 .7rem/1 var(--f-label);letter-spacing:var(--wide);text-transform:uppercase;padding:15px 12px;border:1px solid var(--ink);border-radius:3px;background:transparent;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.copy:hover{background:var(--ink);color:var(--paper)}
.copy.is-copied{background:var(--c);border-color:var(--c);color:var(--on-c)}

/* ---------- Readout ---------- */
.readout{margin-block:clamp(28px,5vw,56px)}
.data{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;border-top:2px solid var(--ink)}
.d{padding:16px 18px 20px;border-bottom:1px solid var(--rule);border-inline-end:1px solid var(--rule);min-width:0}
.d:nth-child(4n){border-inline-end:0}
.d:nth-child(4n+1){padding-inline-start:0}
dt{font:600 .68rem/1.3 var(--f-label);letter-spacing:var(--wide);text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}
dd{margin:0;font-weight:700;font-size:1.12rem;line-height:1.3;overflow-wrap:anywhere}
dd .mono,dd.mono{font-weight:400}
.mini{display:inline-flex;align-items:center;gap:8px;margin-top:6px;font:400 .85rem var(--f-mono);color:var(--ink-2);text-decoration:none;border-bottom:1px dashed var(--rule-2);padding-bottom:1px;direction:ltr}
dd>.mini:first-child{margin-top:0;font-size:1.05rem;color:var(--ink)}
.mini i{width:14px;height:14px;background:var(--chip);box-shadow:0 0 0 1px var(--rule-2);border-radius:2px}
.mini:hover{color:var(--ink);border-bottom-color:var(--ink)}
.mini[hidden]{display:none}
.meter{display:block;height:4px;margin-top:12px;background:var(--rule);overflow:hidden}
.meter span{display:block;height:100%;background:var(--ink);transition:width .35s var(--ease)}
.flag::before{content:"✕";display:inline-block;width:1.4em;color:var(--bad);font-weight:400}
.flag.yes::before{content:"✓";color:var(--ok)}
.d-contrast dd{display:flex;align-items:center;gap:14px}
.sample{flex:none;display:grid;place-items:center;width:52px;height:52px;border:1px solid var(--rule-2);font:italic 400 1.7rem/1 var(--f-serif);color:var(--c)}
.sample-white{background:#fff}.sample-black{background:#000}
.ratio{display:grid;gap:6px}
.pills{display:flex;gap:5px}
.pill{font:600 .62rem/1 var(--f-mono);letter-spacing:.06em;padding:4px 6px 4px 5px;border:1px solid var(--rule-2);border-radius:2px;color:var(--ink-3);text-decoration:line-through;text-decoration-thickness:1px}
.pill.pass{background:var(--ok);border-color:var(--ok);color:#fff;text-decoration:none}
@media (prefers-color-scheme:dark){.pill.pass{color:#0D1F14}}

/* ---------- Shades / tints ---------- */
.ramps{display:grid;gap:clamp(28px,4vw,44px);margin-block:clamp(28px,5vw,56px) clamp(16px,3vw,40px)}
.ramp-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;border-top:2px solid var(--ink);padding-top:12px;margin-bottom:16px}
.ramp-head h2{font-weight:800;font-size:1.5rem;letter-spacing:var(--tight);margin:0}
.ramp-head span{font-size:.75rem;color:var(--ink-3);direction:ltr}
.ramp{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:8px}
.rchip{display:flex;flex-direction:column;padding:5px 5px 0;background:var(--sheet);border:1px solid var(--rule);color:var(--ink-2);text-decoration:none;transition:translate .25s var(--ease),box-shadow .25s,color .15s;animation:rise .5s var(--ease) both;animation-delay:calc(var(--n,0)*28ms)}
.rchip::before{content:"";display:block;aspect-ratio:1/1.12;background:var(--chip)}
.rchip span{font:400 .68rem/1 var(--f-mono);padding:8px 1px 9px;overflow:hidden;white-space:nowrap;direction:ltr;text-align:start}
.rchip:hover,.rchip:focus-visible{translate:0 -6px;color:var(--ink);box-shadow:0 16px 24px -16px rgb(0 0 0/.45)}

/* ---------- Ads ---------- */
.ad{margin-block:24px;padding:10px 12px 12px;border:1px dashed var(--rule-2);min-height:120px}
.ad-label{display:block;margin-bottom:8px;font:500 .6rem var(--f-label);letter-spacing:var(--wide);text-transform:uppercase;color:var(--ink-3)}
.ad:has(ins[data-ad-status=unfilled]){display:none}
.abprompt{position:fixed;inset-inline:12px;bottom:12px;z-index:40;max-width:620px;margin-inline:auto;display:flex;align-items:center;gap:14px;padding:12px 12px 12px 16px;background:var(--ink);color:var(--paper);border-radius:4px;box-shadow:0 20px 40px -12px rgb(0 0 0/.5);animation:rise .4s var(--ease)}
.abprompt>span{flex:1;font-size:.9rem}
.abprompt .btn{padding:11px 14px;background:var(--c);border-color:var(--c);color:var(--on-c);white-space:nowrap}
.abprompt .link{color:inherit;font-size:1.4rem;line-height:1;padding:4px 6px;opacity:.7}

/* ---------- Footer ---------- */
.foot{margin-top:clamp(40px,6vw,80px);border-top:2px solid var(--ink);padding-block:28px 36px;font-size:.85rem;color:var(--ink-2)}
.foot-in{display:grid;grid-template-columns:auto 1fr;gap:20px 48px;align-items:start}
.foot-brand{display:grid;gap:14px}
.colorbar{display:flex;width:176px;height:10px}
.colorbar i{flex:1;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--paper) 12%,transparent)}
.colorbar i:nth-child(1){background:#00A0E3}.colorbar i:nth-child(2){background:#E6007E}.colorbar i:nth-child(3){background:#FFED00}.colorbar i:nth-child(4){background:#151412}
.colorbar i:nth-child(5){background:#E30613}.colorbar i:nth-child(6){background:#009640}.colorbar i:nth-child(7){background:#2A2A86}.colorbar i:nth-child(8){background:var(--c)}
.foot-langs{display:flex;flex-wrap:wrap;gap:6px 16px;justify-content:flex-end}
.foot-langs a{text-decoration:none;color:var(--ink-2);padding:2px 0;border-bottom:1px solid transparent}
.foot-langs a:hover{color:var(--ink);border-bottom-color:var(--ink)}
.foot-langs a[aria-current]{color:var(--ink);font-weight:700}
.foot-meta{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;margin:0;padding-top:16px;border-top:1px solid var(--rule);font:400 .75rem var(--f-label);color:var(--ink-3)}
.foot-meta a{color:inherit;text-decoration:none}.foot-meta a:hover{color:var(--ink)}

/* ---------- Premium ---------- */
.page-head{padding-block:clamp(32px,6vw,72px) clamp(20px,3vw,36px);border-bottom:2px solid var(--ink);margin-bottom:clamp(24px,4vw,40px)}
.page-head p:not(.kicker){margin:16px 0 0;color:var(--ink-2);max-width:52ch;font-size:1.1rem}
.plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,3vw,32px);margin-bottom:24px}
.plan{position:relative;display:flex;flex-direction:column;gap:20px;padding:clamp(22px,3vw,34px);background:var(--sheet);border:1px solid var(--rule)}
.plan h2{display:flex;align-items:center;gap:14px;font-weight:800;font-size:2rem;letter-spacing:var(--tight);margin:0}
.plan-chip{width:28px;height:36px;flex:none;background:linear-gradient(var(--chip) 0 66%,var(--sheet) 0);box-shadow:0 0 0 1px var(--rule-2)}
.plan ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.plan li{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--rule)}
.plan li::before{content:"—";color:var(--ink-3)}
.plan-pro{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.plan-pro ul,.plan-pro li{border-color:color-mix(in srgb,var(--paper) 18%,transparent)}
.plan-pro li::before{content:"✓";color:var(--c)}
.plan-pro .plan-chip{--chip:var(--c);box-shadow:none;background:linear-gradient(var(--c) 0 66%,var(--paper) 0)}
.plan-pro .btn{background:var(--c);border-color:var(--c);color:var(--on-c);align-self:flex-start}
.plan-pro .btn:hover{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.plan-note{margin:0;color:color-mix(in srgb,var(--paper) 70%,transparent);font-size:.92rem}
.plan-pro .badge{align-self:flex-start}

/* ---------- Auth ticket ---------- */
.ticket{max-width:430px;margin:clamp(32px,7vw,88px) auto;background:var(--sheet);border:1px solid var(--rule);box-shadow:0 30px 60px -40px rgb(0 0 0/.5)}
.ticket .colorbar{width:100%;height:8px}
.ticket-body{display:grid;gap:16px;padding:clamp(22px,4vw,36px)}
.ticket h1{font-weight:800;font-size:2rem;letter-spacing:var(--tight);margin:0 0 6px}
.ticket label:not(.check){display:grid;gap:6px;font:600 .7rem var(--f-label);letter-spacing:var(--wide);text-transform:uppercase;color:var(--ink-2)}
.check{display:flex;align-items:center;gap:10px;font-size:.92rem;color:var(--ink-2);cursor:pointer}
.check input{width:18px;height:18px;accent-color:var(--ink)}
.ticket .btn{width:100%;margin-top:6px}
.ticket-alt{margin:4px 0 0;text-align:center;font-size:.92rem;color:var(--ink-2)}
.ticket-alt a{color:var(--ink);font-weight:700;text-underline-offset:3px}
.ticket .err{margin:0}

/* ---------- 404 ---------- */
.lost{display:grid;grid-template-columns:minmax(220px,360px) 1fr;gap:clamp(28px,6vw,80px);align-items:center;padding-block:clamp(40px,8vw,110px)}
.lost .chip{--c:#440044;rotate:-3deg}
.lost .chip-color{aspect-ratio:1/1.1;background:#440044}
.lost h1{font-weight:800;font-size:clamp(2.4rem,7vw,5rem);line-height:.95;letter-spacing:var(--tight);margin:0 0 24px}

/* ---------- Motion ---------- */
@keyframes rise{from{opacity:0;translate:0 14px}}
@keyframes drop{from{opacity:0;transform:translateY(-28px) rotate(-7deg)}}
.reveal{animation:rise .7s var(--ease) both;animation-delay:calc(var(--i,0)*70ms + 120ms)}
.spec-chip.reveal,.lost .spec-chip{animation:drop .9s var(--ease) both}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.chip{rotate:0deg!important}}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .spec{grid-template-columns:1fr}
  .spec-chip{max-width:520px;width:100%;margin-inline:auto}
  .chip-color{aspect-ratio:16/10}
  .data{grid-template-columns:repeat(2,minmax(0,1fr))}
  .d:nth-child(4n){border-inline-end:1px solid var(--rule)}
  .d:nth-child(2n){border-inline-end:0}
  .d:nth-child(4n+1){padding-inline-start:18px}
  .d:nth-child(2n+1){padding-inline-start:0}
  .lost{grid-template-columns:1fr}.lost .spec-chip{max-width:320px}
}
@media (max-width:720px){
  .plans{grid-template-columns:1fr}
  .foot-in{grid-template-columns:1fr}.foot-langs{justify-content:flex-start}
}
@media (max-width:560px){
  .spec-chip{padding:18px}
  .crop{display:none}
  .field{grid-template-columns:minmax(0,1fr) auto;gap:8px 10px;padding:12px 0}
  .field-label{grid-column:1/-1}
  .field-inputs{gap:6px}
  .ch input{padding-inline:8px;font-size:.95rem}
  .ch i{left:8px}
  .copy{min-width:0;padding-inline:10px}
  .d{padding:14px 12px 16px}
  .d-contrast dd{flex-direction:column;align-items:flex-start;gap:10px}
  .sample{width:44px;height:44px;font-size:1.4rem}
  .ramp{grid-template-columns:repeat(5,minmax(0,1fr))}
}