.ft{padding-block:40px 72px}.ft__head{gap:var(--space-3);flex-direction:column;margin-bottom:28px;display:flex}.ft__head h1{font:800 clamp(36px, 4vw, 52px)/1 var(--font-display);letter-spacing:-.03em;text-wrap:balance}.ft__lede{gap:var(--space-2);flex-direction:column;max-width:680px;display:flex}.ft__lede .lede{color:var(--ink-muted);font-size:18px;line-height:27px}.ft__aside{font:400 15px/22px var(--font-sans);color:var(--ink-muted)}.ft__private{margin-top:var(--space-3);font-size:13px;line-height:18px}.callout.ft__noscript{margin-bottom:var(--space-4);border-color:var(--ink);font-weight:600}.ft__tool>*{background:var(--line);border:1.5px solid var(--ink);border-radius:var(--radius-lg);gap:1px;overflow:hidden}.ft-card{min-width:0;padding:var(--space-8);background:var(--surface)}.ft-card>h2{margin-bottom:var(--space-3)}.ft-card--answer{background:var(--paper)}@media (width<=560px){.ft-card{padding:20px}}.ft-msg{margin-top:var(--space-3);padding:var(--space-2) var(--space-3);background:var(--danger-bg);color:var(--ink);border:1.5px solid var(--danger);border-radius:var(--radius-sm);font:600 14px/20px var(--font-sans)}.ft-msg[hidden]{display:none}.ft-copy{min-width:68px;min-height:32px;padding:0 var(--space-3);border:1.5px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink);font:600 13px/18px var(--font-sans);cursor:pointer;flex:none}.ft-copy:hover{background:var(--surface-sunk)}.cn-btn.ft-btn-ink{background:var(--ink);color:var(--paper);border-color:var(--ink)}.cn-btn.ft-btn-ink:hover{background:var(--ink);opacity:.88}.cn-btn.ft-btn-ink[disabled]{opacity:.6;cursor:default}.ft-chip{align-items:center;gap:var(--space-2);min-height:40px;padding:0 var(--space-3);border:1.5px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--surface);color:var(--ink);font:500 13px/18px var(--font-mono);cursor:pointer;white-space:nowrap;display:inline-flex}.ft-chip:hover{border-color:var(--ink)}.ft-chip[aria-pressed=true]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);background:var(--marker-tint)}.ft-chip span{font:400 13px/18px var(--font-sans);color:var(--ink-muted)}@media (width<=900px),(pointer:coarse){.ft-copy,.ft-chip{min-height:44px}}.ft-swatches{gap:var(--space-1);grid-template-columns:repeat(auto-fill,minmax(78px,1fr));display:grid}.ft-swatch{border-radius:var(--radius-md);min-width:0;color:var(--ink);text-align:center;cursor:pointer;background:0 0;border:1.5px solid #0000;flex-direction:column;gap:6px;padding:4px 4px 6px;display:flex}.ft-swatch:hover{border-color:var(--line-strong)}.ft-swatch[aria-pressed=true]{border-color:var(--ink)}.ft-swatch__chip{border:1px solid var(--line-strong);border-radius:var(--radius-sm);height:48px;display:block}.ft-swatch__hex{font:500 11px/16px var(--font-mono);white-space:nowrap}.ft-swatch.is-base .ft-swatch__chip{box-shadow:0 0 0 2px var(--surface), 0 0 0 3.5px var(--ink)}.ft-steps{gap:var(--space-6);grid-template-columns:repeat(auto-fit,minmax(220px,1fr));display:grid}.ft-steps li{gap:var(--space-3);flex-direction:column;min-width:0;display:flex}.ft-steps p{margin-top:var(--space-1);color:var(--ink-muted);font:400 15px/22px var(--font-sans)}@media (width<=560px){.ft-steps li{gap:var(--space-4);flex-direction:row}}[data-tool-explain]>h2:first-child{margin-top:0}.ft-more{gap:var(--space-4);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.ft-more .card-link{gap:var(--space-2);padding:var(--space-6);border-radius:var(--radius-lg)}.ft-more .card-link strong{font-size:20px;line-height:26px}.ft-more .card-link span{font-size:15px;line-height:22px}@media (width<=720px){.ft-more{grid-template-columns:minmax(0,1fr)}.ft-more .card-link{padding:20px}}.tool-cards{gap:var(--space-4);grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.tool-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);flex-direction:column;min-width:0;display:flex;overflow:hidden}.tool-card:hover{border-color:var(--ink)}.tool-card__fig{height:180px;padding:var(--space-6);background:var(--surface-sunk);border-bottom:1px solid var(--line);flex-direction:column;justify-content:center;gap:14px;display:flex;overflow:hidden}.tool-card__body{gap:var(--space-3);padding:var(--space-6);flex-direction:column;flex:1;display:flex}.tool-card h2{font:700 24px/30px var(--font-display);letter-spacing:-.015em;text-wrap:balance}.tool-card h2 a{color:var(--ink);text-decoration:none}.tool-card h2 a:hover{text-underline-offset:4px;text-decoration:underline 2px}.tool-card p{color:var(--ink-muted);font:400 15px/22px var(--font-sans)}.tool-card__go{padding-top:var(--space-1);margin-top:auto}.tool-fig--colour{border:1px solid var(--ink);border-radius:var(--radius-sm);height:64px;display:flex;overflow:hidden}.tool-fig--colour i{flex:1}.tool-fig__picked{align-items:center;gap:var(--space-2);font:400 11px/16px var(--font-mono);color:var(--ink-muted);flex-wrap:wrap;display:flex}.tool-fig__picked .cn-pin{background:#e4572e;width:24px;height:24px}.tool-fig__picked .cn-sel{box-shadow:none}.tool-fig--browser{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);font:400 13px/18px var(--font-sans)}.tool-fig--browser>div{justify-content:space-between;gap:var(--space-3);padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--line);display:flex}.tool-fig--browser>div:last-child{border-bottom:0}.tool-fig--browser dt{color:var(--ink-muted)}.tool-fig--browser dd{color:var(--ink);font-weight:600}.tool-fig--browser dd.m{font:500 11px/18px var(--font-mono)}.tool-card__fig--ratio{justify-content:center;align-items:flex-end;gap:var(--space-3);flex-direction:row}.tool-card__fig--ratio i{border:1.5px solid var(--line-strong);background:var(--surface);color:var(--ink-muted);font:400 11px/1 var(--font-mono);border-radius:4px;flex:none;justify-content:center;align-items:center;font-style:normal;display:flex}.tool-card__fig--ratio i:first-child{border-color:var(--ink);color:var(--ink)}@media (width<=900px){.tool-cards{grid-template-columns:minmax(0,1fr)}}.send{padding:28px var(--space-8);background:var(--surface);border:1.5px solid var(--ink);border-radius:var(--radius-lg) var(--radius-lg) var(--radius-lg) var(--radius-notch);flex-wrap:wrap;align-items:center;gap:20px 40px;display:flex}.send__text{flex-direction:column;flex:360px;gap:6px;display:flex}.send__text h2{font:700 22px/28px var(--font-display);letter-spacing:-.01em}.send__text p{font:400 15px/22px var(--font-sans);color:var(--ink-muted)}.send__link{align-items:center;gap:var(--space-2);flex:420px;min-width:0;display:flex}.send__link a{min-width:0;min-height:44px;padding:0 var(--space-3);background:var(--surface-sunk);border:1px solid var(--line);border-radius:var(--radius-sm);color:var(--ink);font:400 12px/18px var(--font-mono);white-space:nowrap;text-overflow:ellipsis;flex:1;align-items:center;text-decoration:none;display:flex;overflow:hidden}.send__link a:hover{border-color:var(--ink)}@media (width<=560px){.send{padding:20px}.send__link{flex-wrap:wrap}.send__link a{flex-basis:100%}}.cp{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:stretch;gap:1px;display:grid}.cp__stage,.cp__palette{grid-column:1}.cp__picked{gap:var(--space-3);flex-direction:column;grid-area:1/2/span 2;display:flex}.cp__picked>h2{margin-bottom:0}.cp__with{grid-column:1/-1}@media (width<=900px){.cp{grid-template-columns:minmax(0,1fr)}.cp__stage,.cp__palette,.cp__picked,.cp__with{grid-area:auto/1}}.cp__drop{justify-content:center;align-items:center;gap:var(--space-3);min-height:340px;padding:var(--space-8) var(--space-4);border:2px dashed var(--line-strong);border-radius:var(--radius-md);text-align:center;flex-direction:column;display:flex}.cp__drop[hidden],.cp__view[hidden]{display:none}.cp__stage.is-over .cp__drop,.cp__stage.is-over .cp__frame{border-color:var(--marker);background:var(--marker-tint)}.cp__drop-title{font:700 28px/32px var(--font-display);letter-spacing:-.02em}.cp__drop-or{color:var(--ink-muted)}.cp__drop-actions{justify-content:center}.cp__drop .caption{max-width:420px}@media (width<=560px){.cp__drop{min-height:260px}}.cp__frame{padding:var(--space-3);background:var(--surface-sunk);border-radius:var(--radius-md);border:2px dashed #0000}.cp__room{justify-content:center;display:flex}.cp__area{cursor:crosshair;touch-action:manipulation;flex:none;line-height:0;position:relative}.cp__area:focus-visible{outline:2px solid var(--focus);outline-offset:3px}.cp__canvas{height:auto;display:block}.cp__canvas.is-enlarged{image-rendering:pixelated}.cp .cp__pin{z-index:2;pointer-events:none;width:22px;height:22px;position:absolute;transform:translateY(-100%)}.cp .cp__pin[hidden]{display:none}.cp__loupe{z-index:3;background:var(--chrome);color:var(--on-chrome);border-radius:var(--radius-md);box-shadow:var(--shadow-float);pointer-events:none;flex-direction:column;gap:6px;padding:6px;line-height:1;display:flex;position:absolute}.cp__loupe[hidden]{display:none}.cp__loupe-glass{background:#15171a;border-radius:4px;width:132px;height:132px;display:block;position:relative;overflow:hidden}.cp__loupe-glass canvas{width:132px;height:132px;image-rendering:pixelated;display:block}.cp__loupe-glass i{width:12px;height:12px;position:absolute;top:60px;left:60px;box-shadow:0 0 0 1.5px #fff,0 0 0 3px #15171a}.cp__loupe-hex{font:500 12px/16px var(--font-mono);text-align:center}.cp__bar{align-items:center;gap:var(--space-3);margin-top:var(--space-3);flex-wrap:wrap;display:flex}.cp__keys{flex:260px}.cp__nudge{gap:var(--space-1);display:none}.cp__nudge .cn-btn{min-width:44px;min-height:44px;padding:0}@media (pointer:coarse){.cp__nudge{display:inline-flex}.cp__bar>.cn-btn--small{min-height:44px}}.cp__note{margin-top:var(--space-3)}.cp__note[hidden]{display:none}.cp__swatch{border:1px solid var(--line-strong);border-radius:var(--radius-md);height:96px}.cp__values{border-top:1px solid var(--line)}.cp__values>div{align-items:center;gap:var(--space-3);border-bottom:1px solid var(--line);grid-template-columns:58px minmax(0,1fr);padding:6px 0;display:grid}.cp__values dt{font:600 11px/16px var(--font-sans);letter-spacing:.08em;color:var(--ink-muted)}.cp__values dd{justify-content:space-between;align-items:center;gap:var(--space-2);min-width:0;display:flex}.cp__values code{min-width:0;font:500 13px/20px var(--font-mono);overflow-wrap:anywhere}.cp__type{margin-top:var(--space-1)}.cp__type .cn-input{font-family:var(--font-mono);text-transform:uppercase;font-size:16px}.cp__type .cn-input::placeholder{text-transform:none}.cp__sub{margin-top:var(--space-2);font:700 15px/20px var(--font-display);letter-spacing:-.005em}.cp__sub span{font:400 13px/20px var(--font-sans);letter-spacing:0;color:var(--ink-muted);margin-left:6px}.cp__contrast{gap:var(--space-2);flex-direction:column;display:flex}.cp__contrast li{align-items:center;gap:var(--space-3);grid-template-columns:112px minmax(0,1fr);display:grid}.cp__sample{border:1px solid var(--line-strong);border-radius:var(--radius-sm);height:44px;font:600 14px/18px var(--font-sans);justify-content:center;align-items:center;display:flex}.cp__ratio{font:400 14px/20px var(--font-sans);color:var(--ink-muted)}.cp__ratio strong{color:var(--ink);font:500 14px/20px var(--font-mono);display:block}.cp__palette .ft-swatches{margin-top:var(--space-2)}.cp__palette .ft-swatches:empty{display:none}.cp__groups{gap:var(--space-4) var(--space-8);margin-top:var(--space-3);grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,2fr);display:grid}.cp__group{min-width:0}.cp__group--wide{grid-column:1/-1}.cp__group .ft-swatches{margin-top:var(--space-2);grid-template-columns:repeat(auto-fill,minmax(78px,96px))}.cp__group--wide .ft-swatches{grid-template-columns:repeat(9,minmax(0,1fr))}@media (width<=900px){.cp__groups{grid-template-columns:minmax(0,1fr)}.cp__group--wide .ft-swatches{grid-template-columns:repeat(auto-fill,minmax(78px,1fr))}}.wb{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:stretch;gap:1px;display:grid}.wb__ua{grid-column:1/-1}@media (width<=900px){.wb{grid-template-columns:minmax(0,1fr)}}.wb__you{font:800 clamp(26px, 3.2vw, 38px)/1.08 var(--font-display);letter-spacing:-.03em;text-wrap:balance}.wb__list{margin-top:var(--space-4);border-top:1px solid var(--line);font:400 15px/22px var(--font-sans)}.wb__list>div{gap:var(--space-3);padding:var(--space-2) 0;border-bottom:1px solid var(--line);grid-template-columns:150px minmax(0,1fr);display:grid}.wb__list dt{color:var(--ink-muted)}.wb__list dd{overflow-wrap:anywhere;min-width:0;font-weight:600}@media (width<=400px){.wb__list>div{grid-template-columns:116px minmax(0,1fr)}}.wb__actions{margin:var(--space-6) 0 var(--space-3)}.wb__line{color:var(--ink-muted);font:400 16px/24px var(--font-sans)}.wb__stats{gap:var(--space-2);margin-top:var(--space-4);flex-direction:column;display:flex}.wb__stats .cn-stat{background:var(--paper)}.wb__stats .cn-stat__n{white-space:nowrap;font-size:32px;line-height:36px}.wb__box{margin-top:var(--space-3);min-height:64px;padding:var(--space-3) var(--space-4);background:var(--surface-sunk);border:1px solid var(--line);border-radius:var(--radius-sm);color:var(--ink);font:400 12px/20px var(--font-mono);white-space:pre-wrap;overflow-wrap:anywhere}.ar{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"size answer""start answer""resize css";align-items:stretch;gap:1px;display:grid}.ar__size{grid-area:size}.ar__answer{grid-area:answer}.ar__start{grid-area:start}.ar__resize{grid-area:resize}.ar__css{grid-area:css}@media (width<=900px){.ar{grid-template-columns:minmax(0,1fr);grid-template-areas:"size""answer""start""resize""css"}}.ar__resize .caption{margin-bottom:var(--space-3)}.ar__pair{align-items:end;gap:var(--space-3);grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);display:grid}.ar__pair .cn-input{font:500 18px/24px var(--font-mono)}.ar__by{color:var(--ink-muted);font:500 16px/24px var(--font-mono);padding-bottom:11px}.ar__presets+.ar__presets{margin-top:var(--space-4)}.ar__label{margin-bottom:var(--space-2);font:600 11px/14px var(--font-sans);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-muted)}.ar__chips{gap:var(--space-2);flex-wrap:wrap;display:flex}.ar__ratio{font:800 clamp(52px, 7vw, 76px)/1 var(--font-display);letter-spacing:-.035em;overflow-wrap:anywhere}.ar__also{margin-top:var(--space-2);color:var(--ink-muted);font:400 15px/22px var(--font-sans)}.ar__stage{height:220px;margin:var(--space-4) 0 var(--space-2);padding:var(--space-4);background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-md);justify-content:center;align-items:center;display:flex}.ar__box{--w:16;--h:9;width:min(100%, calc(186px * var(--w) / var(--h)));min-width:3px;min-height:3px;max-height:100%;aspect-ratio:var(--w) / var(--h);background:var(--marker);border:1.5px solid var(--on-marker);border-radius:var(--radius-notch)}.ar__scaled{margin-top:var(--space-3);font:600 16px/24px var(--font-sans)}.ar__scaled:empty{display:none}.ar__code{justify-content:space-between;align-items:center;gap:var(--space-3);margin-bottom:var(--space-2);padding:var(--space-2) var(--space-2) var(--space-2) var(--space-4);background:var(--surface-sunk);border:1px solid var(--line);border-radius:var(--radius-sm);display:flex}.ar__code code{min-width:0;font:500 14px/22px var(--font-mono);overflow-wrap:anywhere}.ar__css .caption{margin-top:var(--space-3)}.ar__answer,.ar__css,.cp__picked,.wb__screen{background:var(--paper)}.wb__stats .cn-stat,.ar__stage{background:var(--surface)}.ar__ratio{font-size:clamp(56px,6vw,72px)}.ar__box{background:var(--marker-tint);border:2px dashed var(--marker)}.ar__pair .cn-input{min-height:52px;font-size:20px}.ar__resize .ar__pair .cn-input{min-height:48px;font-size:18px}