/* Tint — the eye, and the few styles the demo and the previews use. */
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("assets/fonts/IBMPlexMono-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-style: normal; font-display: swap; src: url("assets/fonts/IBMPlexMono-500.woff2") format("woff2"); }
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--paper); color-scheme: light; }
html, body { overflow-x: clip; }
body { min-height: 100svh; color: var(--ink); background: var(--paper); font: 300 17px/1.6 var(--sans); }
button, input { font: inherit; color: inherit; }
::selection { background: var(--mark); color: var(--ink); }

/* the eye: three elements and nothing else. The field is the letters, the iris colours the ones under it, the tone lays the paper back over them. */
.field, .iris { margin: 0; padding: 0; font: 400 10px/11px var(--mono); letter-spacing: 0; white-space: pre; }
.field { position: fixed; inset: 0; z-index: 0; overflow: hidden; color: var(--ink); user-select: text; cursor: pointer; }
.iris { position: fixed; top: 0; left: 0; z-index: 1; pointer-events: none; user-select: none; color: transparent; -webkit-background-clip: text; background-clip: text; background-repeat: no-repeat; }
@supports not ((background-clip: text) or (-webkit-background-clip: text)) { .iris { color: var(--lens); } }
.tone { position: fixed; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }

/* the sheet the previews set their copy on, over the eye */
.sheet { position: relative; z-index: 3; width: min(100%, 1100px); margin: 0 auto; padding: 40px clamp(18px, 4vw, 48px) 60px; display: grid; gap: 14px; pointer-events: none; }
.sheet > * { pointer-events: auto; }
.sheet .panel { padding: 24px 26px; background: var(--paper); border: 1px solid var(--rule); box-shadow: 0 30px 80px rgba(21, 20, 14, .10); display: grid; gap: 12px; }
.eyebrow { font: 500 11px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.sheet h1 { font: 400 clamp(28px, 4vw, 48px)/1.03 var(--sans); letter-spacing: -.03em; text-wrap: balance; }
.sheet p { max-width: 640px; color: #322f26; }
.sheet mark { background: linear-gradient(100deg, rgba(232,224,42,0) 0%, var(--mark) 3%, var(--mark) 97%, rgba(232,224,42,0) 100%); mix-blend-mode: multiply; color: inherit; padding: 0 .12em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.note { font: 500 11px/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); }

/* the range: one swatch per lens, drawn the way the study draws them */
.lenses { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.lens { display: grid; grid-template-columns: 34px 1fr; gap: 4px 12px; align-items: center; width: 100%; padding: 12px; border: 1px solid var(--rule); border-radius: 8px; background: transparent; text-align: left; cursor: pointer; transition: border-color .25s, background-color .25s; }
.lens:hover, .lens:focus-visible { border-color: var(--ink); outline: none; }
.lens[aria-pressed="true"] { border-color: var(--ink); background: rgba(21, 20, 14, .04); }
.lens i { grid-row: 1 / 3; display: block; width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 50% 50%, var(--ink) 0 26%, var(--c) 30%, color-mix(in srgb, var(--c) 60%, var(--ink)) 92%, var(--paper) 96%); box-shadow: inset 0 0 0 1px rgba(21,20,14,.25); }
.lens b { font: 400 16px/1.3 var(--sans); }
.lens span { font: 400 12px/1.4 var(--sans); color: var(--ink-soft); }

/* the specimen */
.specimen { display: grid; gap: 18px; }
.specimen .display { font: 400 clamp(40px, 6vw, 76px)/1.02 var(--sans); letter-spacing: -.03em; }
.specimen .body { font: 300 17px/1.6 var(--sans); max-width: 560px; }
.specimen .label { font: 500 11px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.specimen .caption { font: 400 12px/1.6 var(--mono); color: var(--ink-soft); }
a { color: var(--ink); }
@media (max-width: 860px) { .field, .iris { font: 400 9px/10px var(--mono); } }