/* Layout: a dark room. The hero is the apparatus itself (source, two slits, screen), drawn in thin light. The decision is made on that screen. Single dark theme by choice. */
:root{
  --room:#000000;      /* the experiment runs in the dark */
  --light:#ECEBE7;     /* primary text and particle light */
  --dim:#7D7C78;       /* secondary text */
  --faint:#2A2A28;     /* hairlines */
  --sans:"Geist","Helvetica Neue",Arial,sans-serif;
  --mono:"Geist Mono",ui-monospace,Menlo,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{background:var(--room);color:var(--light)}
body{font-family:var(--sans);font-weight:400;font-size:16px;line-height:1.6;padding-inline:clamp(16px,4vw,48px);padding-block:0;-webkit-font-smoothing:antialiased}
.wrap{max-width:1120px;margin:0 auto}
a{color:var(--light);text-underline-offset:3px;text-decoration-color:var(--dim);text-decoration-thickness:1px}
a:hover{text-decoration-color:var(--light)}
:focus-visible{outline:1px solid var(--light);outline-offset:4px}

nav{display:flex;justify-content:space-between;align-items:center;padding-block:24px}
.mark{font-weight:500;font-size:15px;text-decoration:none;letter-spacing:-.01em}
.mark span{color:var(--dim);font-weight:400}
nav .links{display:flex;gap:24px;font-size:14px}
nav .links a{text-decoration:none;color:var(--dim)}
nav .links a:hover{color:var(--light)}

.hero{padding-block:clamp(48px,9vw,112px) 0}
h1{font-weight:400;font-size:clamp(30px,4.2vw,50px);line-height:1.12;letter-spacing:-.03em;margin:0;max-width:17ch;text-wrap:balance}
.lede{max-width:44ch;color:var(--dim);font-size:17px;margin:20px 0 0;font-weight:300}

/* apparatus */
.apparatus{position:relative;margin-top:clamp(36px,6vw,64px)}
canvas{display:block;width:100%;height:clamp(260px,40vw,440px)}
.readout{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:12px;color:var(--dim);padding-block:10px 0}
.readout b{font-weight:400;color:var(--light);font-variant-numeric:tabular-nums}

/* controls sit directly under the screen */
form{margin-top:28px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:12px;align-items:end}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field label{font-family:var(--mono);font-size:12px;color:var(--dim)}
.field input{background:transparent;border:1px solid var(--faint);color:var(--light);font:inherit;font-size:16px;padding:13px 14px;width:100%;min-width:0;transition:border-color .2s}
.field input::placeholder{color:#55544F}
.field input:focus{outline:none;border-color:var(--dim)}
button.measure{appearance:none;border:1px solid var(--light);background:var(--light);color:var(--room);font:inherit;font-weight:500;font-size:15px;padding:13px 28px;cursor:pointer;transition:background .2s,color .2s;white-space:nowrap}
button.measure:hover{background:var(--room);color:var(--light)}
button.measure:disabled{opacity:.45;cursor:default}
.under{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:12px;font-size:13px;color:var(--dim)}
button.link{appearance:none;background:none;border:0;color:var(--dim);font:inherit;text-decoration:underline;text-decoration-color:var(--faint);text-underline-offset:3px;cursor:pointer;padding:0}
button.link:hover{color:var(--light)}

/* result */
#out{min-height:8px}
.result{margin-top:48px;padding-top:32px;border-top:1px solid var(--faint);display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:40px}
.result small{display:block;font-size:13px;color:var(--dim)}
.result .text{font-weight:400;font-size:clamp(30px,4.6vw,52px);line-height:1.1;letter-spacing:-.03em;margin:10px 0 16px;overflow-wrap:anywhere}
.result p{margin:0;color:var(--dim);max-width:40ch}
.record{font-family:var(--mono);font-size:12px;align-self:start;border-left:1px solid var(--faint);padding-left:20px}
.record dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0}
.record dt{color:var(--dim)}
.record dd{margin:0;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.fade{animation:fade 1.2s ease both}
@keyframes fade{from{opacity:0}to{opacity:1}}
.care{margin-top:40px;border-top:1px solid var(--faint);padding-top:28px;max-width:58ch}
.care h3{font-weight:400;font-size:22px;letter-spacing:-.02em;margin:0 0 8px}
.care p{margin:0 0 8px;color:var(--dim)}
.care strong{color:var(--light);font-weight:500}

section.text{border-top:1px solid var(--faint);margin-top:clamp(72px,10vw,128px);padding-top:28px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:40px}
section.text + section.text{margin-top:clamp(56px,7vw,88px)}
section.text h2{font-weight:400;font-size:15px;margin:0;color:var(--dim)}
.how ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;counter-reset:s}
.how li{counter-increment:s}
.how li::before{content:counter(s);display:block;font-family:var(--mono);font-size:12px;color:var(--dim);margin-bottom:12px}
.how li b{display:block;font-weight:500;margin-bottom:4px}
.how li span{color:var(--dim)}
.why p{margin:0 0 18px;max-width:56ch;font-size:clamp(18px,1.8vw,21px);line-height:1.5;letter-spacing:-.01em;font-weight:300}
.why .read{display:flex;flex-direction:column;gap:8px;font-size:14px;margin-top:28px}

footer{margin-top:clamp(72px,10vw,128px);border-top:1px solid var(--faint);padding-block:24px 48px;font-size:13px;color:var(--dim);display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
footer p{margin:0;max-width:68ch}
footer .legal{display:flex;gap:20px}
footer a{color:var(--dim)}

@media (max-width:760px){
  form{grid-template-columns:1fr}
  section.text{grid-template-columns:1fr;gap:16px}
  .how ol{grid-template-columns:1fr;gap:24px}
  .result{grid-template-columns:1fr;gap:28px}
  .record{border-left:0;padding-left:0;border-top:1px solid var(--faint);padding-top:16px}
}
@media (prefers-reduced-motion:reduce){.fade{animation:none}}

/* additions for the live site (same tokens only) */
.chips{position:relative;margin-top:16px;height:38px;overflow-x:auto;overflow-y:hidden;white-space:nowrap;max-width:100%;
  -webkit-overflow-scrolling:touch;touch-action:pan-x;overscroll-behavior-x:contain;scrollbar-width:none;-ms-overflow-style:none;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;cursor:grab;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 20px,#000 calc(100% - 20px),transparent);
  mask-image:linear-gradient(to right,transparent,#000 20px,#000 calc(100% - 20px),transparent)}
.chips::-webkit-scrollbar{display:none;width:0;height:0}
.chips.is-dragging{cursor:grabbing}
.chips-track{display:flex;flex-wrap:nowrap;align-items:center;gap:8px;width:max-content;height:38px}
.chips button{appearance:none;-webkit-appearance:none;background:transparent;border:1px solid var(--faint);color:var(--dim);font-family:var(--mono);font-size:12px;line-height:1;padding:8px 12px;cursor:pointer;transition:color .2s,border-color .2s;border-radius:0;flex:0 0 auto;white-space:nowrap;box-sizing:border-box;height:34px;outline:none;-webkit-tap-highlight-color:transparent}
.chips.is-dragging button{cursor:grabbing}
.chips button:focus{outline:none}
.chips button:focus-visible{color:var(--light);border-color:var(--dim)}
@media (hover:hover) and (pointer:fine){.chips button:hover{color:var(--light);border-color:var(--dim)}}
.care form{display:flex;gap:0;margin:16px 0 8px;max-width:480px}
.care form input{flex:1;min-width:0;background:transparent;border:1px solid var(--faint);border-right:0;color:var(--light);font:inherit;font-size:16px;padding:12px 14px}
.care form input:focus{outline:none;border-color:var(--dim)}
.care .actions{margin-top:12px}
html,body{overflow-x:hidden;margin:0}