/* Daylight Lab — ExplainerTools brand layer (2026-10-09)
   Spec: docs/brand/DAYLIGHT-LAB.md. Load after a page's own stylesheet.
   Paper chrome everywhere; Night only inside a stage. */
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url('/fonts/variable-9fea608a947e.woff2') format('woff2')}@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url('/fonts/variable-0640890476fc.woff2') format('woff2')}
:root{
 --dl-paper:#F6F3EC;--dl-paper-2:#EFEADF;--dl-card:#FFFFFF;--dl-line:#DED8CC;--dl-line-2:#CFC8BA;--dl-sand:#E7E1D4;
 --dl-ink:#151A2D;--dl-ink-2:#3A4157;--dl-muted:#5C6378;
 --dl-cobalt:#2D55F2;--dl-cobalt-deep:#1B36B5;--dl-cobalt-soft:#E6EBFF;
 --dl-sun:#FFC83D;--dl-coral:#F2603F;--dl-coral-ink:#B83A1F;--dl-night:#0B1124;--dl-night-2:#151D3A;
 --dl-display:'Space Grotesk','DM Sans',Arial,sans-serif;--dl-body:'DM Sans',Arial,sans-serif;
 --dl-r:22px;--dl-r-sm:14px;--dl-shadow:0 24px 50px rgba(21,26,45,.14)
}
/* Wordmark lockup: cobalt tile + ExplainerTools */
.dl-wordmark{display:inline-flex;align-items:center;gap:10px;font:700 26px/1 var(--dl-display);letter-spacing:-.035em;color:var(--dl-cobalt-deep);text-decoration:none;white-space:nowrap}
.dl-wordmark:hover{color:var(--dl-cobalt-deep)}
.dl-wordmark .dl-tile{width:1.35em;height:1.35em;flex:none;border-radius:.34em;background:var(--dl-cobalt);display:grid;place-items:center}
.dl-wordmark .dl-tile svg{width:100%;height:100%;fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round}
/* Highlighter: the one idea */
.dl-hl{background:linear-gradient(180deg,transparent 54%,var(--dl-sun) 54%,var(--dl-sun) 93%,transparent 93%);padding:0 .06em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* Eyebrow */
.dl-eyebrow{font:700 12px/1.2 var(--dl-body);letter-spacing:.16em;text-transform:uppercase;color:var(--dl-muted)}
/* Step rail: 1 See · 2 Change · 3 Understand */
.dl-step{display:inline-flex;align-self:flex-start;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:var(--dl-sand);color:var(--dl-ink-2);font:700 12px/1.2 var(--dl-body)}
.dl-step.is-change{background:var(--dl-cobalt);color:#fff}
.dl-step.is-understand{background:var(--dl-sun);color:var(--dl-ink)}
/* Honesty tag */
.dl-model-tag{display:inline-flex;align-items:center;padding:6px 11px;border-radius:8px;background:rgba(11,17,36,.82);border:2px solid var(--dl-coral);color:#FFB4A3;font:700 11px/1.2 var(--dl-body);letter-spacing:.14em;text-transform:uppercase}
.dl-model-tag.on-paper{background:#FFF1EC;color:var(--dl-coral-ink)}
/* Buttons */
.dl-btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:48px;padding:12px 22px;border-radius:999px;background:var(--dl-cobalt);color:#fff;font:700 16px/1.2 var(--dl-body);text-decoration:none;border:0;cursor:pointer}
.dl-btn:hover{background:var(--dl-cobalt-deep);color:#fff}
.dl-btn .dl-dot{width:18px;height:18px;border-radius:50%;background:#fff;border:5px solid var(--dl-sun);box-sizing:border-box;flex:none}
.dl-btn.ghost{background:transparent;color:var(--dl-ink);border:1.5px solid var(--dl-ink)}
.dl-btn.ghost:hover{background:var(--dl-ink);color:#fff}
.dl-chip{min-height:44px;padding:9px 16px;border-radius:999px;border:1.5px solid var(--dl-line-2);background:#fff;color:var(--dl-ink);font:600 14px/1.2 var(--dl-body);cursor:pointer}
.dl-chip[aria-pressed=true],.dl-chip.is-on{background:var(--dl-ink);border-color:var(--dl-ink);color:#fff}
/* Cards and readouts */
.dl-card{background:var(--dl-card);border:1px solid var(--dl-line);border-radius:var(--dl-r)}
.dl-readout{background:#fff;border:1px solid var(--dl-line);border-radius:16px;padding:12px 14px;display:flex;flex-direction:column;gap:4px;min-width:0}
.dl-readout>span:first-child{font:700 11px/1.2 var(--dl-body);letter-spacing:.14em;text-transform:uppercase;color:var(--dl-muted)}
.dl-readout>strong,.dl-readout>span:last-child{font:600 26px/1.1 var(--dl-display);color:var(--dl-ink);font-variant-numeric:tabular-nums}
/* Stage: Night lives only here */
.dl-stage{position:relative;border-radius:30px;overflow:hidden;background:var(--dl-night);box-shadow:var(--dl-shadow)}
/* Knob slider: the logo ring in motion */
input[type=range].dl-knob{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:4px;outline:none;margin:18px 0 10px;cursor:pointer;background:linear-gradient(90deg,var(--dl-cobalt) var(--p,0%),#E2DCCF var(--p,0%))}
input[type=range].dl-knob::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:36px;height:36px;border-radius:50%;background:#fff;border:8px solid var(--dl-cobalt);box-sizing:border-box;box-shadow:0 2px 6px rgba(21,26,45,.25)}
input[type=range].dl-knob::-moz-range-thumb{width:36px;height:36px;border-radius:50%;background:#fff;border:8px solid var(--dl-cobalt);box-sizing:border-box}
input[type=range].dl-knob:active::-webkit-slider-thumb{box-shadow:0 0 0 12px rgba(45,85,242,.14)}
input[type=range].dl-knob:focus-visible{box-shadow:0 0 0 4px rgba(45,85,242,.3)}