/* Presentation layer. Load last so every public page shares the same lab-paper system.
   Renderer colours, engines, route names, copy and control behaviour stay in their original files. */
@import url('/assets/lab-controls.css?variant=paper-v1');

:root{
  color-scheme:light;
  --bg:#f5f4ee;--paper:#fbfaf5;--text:#171b1a;--text-soft:#444c49;--text-muted:#65706b;
  --rule:#cbd0c7;--cyan:#05d9e8;--magenta:#ff2a6d;--amber:#ffb800;
  --magenta-text:#b8003f;--sharing-surface:#ffdde8;--link-on-light:#00616a;
  --glass:#eeeee7;--glass-border:#bec5bb;--glass-panel:#fbfaf5;
  --glass-panel-text:#171b1a;--glass-panel-muted:#52605a;--blur:none;
  --dur-gelatin:.55s;--dur-agar:.3s;--heading-tracking:-.03em;
}
body{background:var(--bg);color:var(--text);font-size:16px;line-height:1.75}
::selection{background:var(--cyan);color:var(--text)}
p a,li a:not(.card),td a{color:var(--link-on-light);text-decoration-thickness:1px;text-underline-offset:4px}
.reading-page p a,.reading-page li a{overflow-wrap:anywhere}
:focus-visible{outline:2px solid var(--link-on-light);outline-offset:4px;box-shadow:0 0 0 2px var(--bg)}
.skip:focus{background:var(--cyan);color:var(--text)}
.bar{padding:18px clamp(20px,4.8vw,80px);gap:12px 24px;border-color:var(--rule)}
.brand{font-size:25px;font-weight:800;letter-spacing:var(--heading-tracking);gap:11px}
.brand::before{content:"";width:19px;height:19px;border:1.5px solid var(--text);border-radius:50%;
  background:var(--cyan);box-shadow:5px 0 0 -1px var(--bg),6px 0 0 0 var(--text);margin-right:5px}
.bar nav{gap:clamp(4px,1.8vw,28px)}
.bar nav a{font-family:var(--font-sans);font-size:13px;letter-spacing:.015em;text-transform:none;
  padding:0 4px;color:var(--text-soft)}
.bar nav a:hover,.bar nav a[aria-current]{color:var(--text)}
.bar nav a[aria-current]{box-shadow:inset 0 -2px 0 var(--text)}
.bar nav a[href='/squish/']{padding:0 15px;border:1px solid var(--text);border-radius:4px;
  background:var(--magenta);color:var(--text);font-weight:700;box-shadow:none}
.bar nav a[href='/squish/'][aria-current]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.bar nav a[href='/squish/']:hover{background:var(--sharing-surface)}
.wrap{max-width:1280px;padding:0 clamp(22px,4.8vw,72px)}
.measure{max-width:46rem}
.kicker{font-size:12px;letter-spacing:.08em;color:var(--text-muted);margin-bottom:20px}
h1{font-size:clamp(40px,6.4vw,82px);font-weight:750;line-height:1.1;letter-spacing:var(--heading-tracking);margin-bottom:30px;text-wrap:balance;overflow-wrap:break-word}
h2{font-size:clamp(28px,3.6vw,44px);font-weight:650;line-height:1.2;letter-spacing:var(--heading-tracking);margin:64px 0 20px;text-wrap:balance;overflow-wrap:break-word}
h3{font-weight:650;letter-spacing:var(--heading-tracking);overflow-wrap:break-word}
.squish-page .maker h1{letter-spacing:var(--heading-tracking)}
p,li{font-size:16px}
p{margin:0 0 20px}
.lead{font-size:clamp(18px,1.6vw,21px);line-height:1.65;color:var(--text-soft)}
main>section{padding:clamp(56px,7vw,104px) 0}
section+section{border-color:var(--rule)}
main>section>.wrap>h2:first-child{margin-top:0}
code{background:#e7e9e1;border-radius:2px;padding:3px 6px;color:var(--text);overflow-wrap:anywhere}
pre{background:var(--paper);border-color:var(--rule);border-radius:4px}
blockquote{border-color:var(--cyan);color:var(--text-soft);border-left-width:4px}
.inshort{background:var(--paper);border:1px solid var(--rule);border-left:3px solid var(--cyan);
  border-radius:2px;padding:24px;margin:32px 0 42px}
.inshort .kicker{color:var(--text-muted)}
table{font-size:14px;line-height:1.55;background:var(--paper);margin:32px 0}
th,td{padding:16px 12px;border-color:var(--rule);overflow-wrap:anywhere}
th{color:var(--text-soft);font-size:12px;letter-spacing:.03em;background:#e8eae2}
.btn{min-height:48px;padding:0 24px;background:var(--cyan);color:var(--text);border:1px solid var(--text);
  border-radius:4px;font:600 14px/1.35 var(--font-sans);letter-spacing:.02em;margin-top:14px;
  transition:scale var(--dur-agar) var(--spring-agar),background-color .18s,box-shadow .18s}
.btn[href='/squish/']{background:var(--magenta)}
.btn:hover{color:var(--text);background:var(--paper);box-shadow:3px 3px 0 var(--text);scale:1}
.btn:active{scale:.98 1.02;box-shadow:none}
.cards{gap:24px;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:38px}
.card{--accent:var(--text)!important;--accent-text:var(--link-on-light)!important;
  padding:28px;border:1px solid var(--rule);border-radius:4px;background:var(--paper);color:var(--text);
  transition:border-color .18s,background-color .18s,scale var(--dur-agar) var(--spring-agar)}
.card:hover,.card:focus-visible{border-color:var(--text);background:var(--paper);box-shadow:none;scale:1}
.card:active{scale:.995 .998}
.card h3{font-size:clamp(21px,2.2vw,29px);font-weight:650;letter-spacing:var(--heading-tracking);line-height:1.2;margin:0 0 12px}
.card p{font-size:14px;line-height:1.7;color:var(--text-soft);max-width:52ch}
.tag{font-size:12px;letter-spacing:.075em;border:0;padding:0;display:flex;align-items:center;gap:7px;
  color:var(--text-muted);margin:4px 0 16px}
.tag::before{content:"";width:6px;height:6px;background:var(--cyan);border:1px solid var(--link-on-light);border-radius:50%}
.card.soon{background:transparent;border:0;border-top:1px dashed var(--glass-border);border-radius:0;padding:26px 0}
.card.soon .tag::before{background:transparent;border-color:var(--text-muted)}
.card.soon h3{font-size:21px}
.bento{gap:0;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--rule)}
.bento li,.bento li:nth-child(n){grid-column:auto}
.bento .card{background:transparent;min-height:220px;border:0;border-bottom:1px solid var(--rule);border-radius:0;padding:32px}
.bento li:nth-child(odd) .card{border-right:1px solid var(--rule);padding-left:0}
.bento .card:hover{background:var(--paper)}
.bento .card h3{font-size:28px}
.bento .card p{font-size:15px;margin-top:14px}
.notes-list{margin-top:40px}
.notes-list li{padding:26px 0;border-color:var(--rule)}
.notes-list a{font-size:26px;letter-spacing:var(--heading-tracking)}
.notes-list p{font-size:15px;margin-top:8px}

/* One memorable opening: the invitation sits beside a damped-wave field sketch. */
.home-page #pick-a-blob{padding-top:clamp(48px,5vw,80px)}
.lab-intro{display:grid;grid-template-columns:1.9fr 1fr;gap:36px;align-items:center;margin-bottom:32px}
.lab-intro h1{font-size:clamp(50px,6.3vw,82px);line-height:1.1;letter-spacing:var(--heading-tracking);max-width:14ch;margin-bottom:0}
.lab-intro .lead{font-size:17px;max-width:52ch;margin:0}
.lab-plot{width:100%;overflow:visible;color:var(--text);height:180px;min-height:0}
.lab-plot .axis{fill:none;stroke:#b8c1b7;stroke-width:1}
.lab-plot .trace{fill:none;stroke:var(--link-on-light);stroke-width:1.4;stroke-dasharray:3 5;opacity:.4}
.lab-plot .wave{fill:none;stroke:var(--text);stroke-width:2;vector-effect:non-scaling-stroke}
.lab-plot .point{fill:var(--cyan);stroke:var(--text);stroke-width:1.5}
.primary-actions{display:grid;grid-template-columns:2fr 1fr;gap:24px;align-items:stretch}
.primary-actions .daily .kicker{font:700 16px/1.4 var(--font-sans);letter-spacing:-.015em;
  text-transform:none;color:var(--text);margin-bottom:16px}
.primary-actions .daily .btn{min-width:148px;justify-content:center;font-weight:600}
.send-feature{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:36px;
  padding:30px;border:1px solid var(--text);border-radius:4px;background:var(--sharing-surface);color:var(--text);text-decoration:none}
.send-feature>span{font-size:clamp(34px,3.8vw,52px);font-weight:700;line-height:1.1;letter-spacing:var(--heading-tracking);max-width:8ch}
.send-feature svg{display:block;width:100%;max-width:240px;align-self:flex-end;overflow:visible}
.send-feature .send-compact-arrow{display:none}
.send-axis{fill:none;stroke:var(--link-on-light);stroke-width:1;opacity:.45}
.send-trace{fill:none;stroke:var(--text);stroke-width:1.5;stroke-dasharray:3 4}
.send-arrow{fill:none;stroke:var(--text);stroke-width:3;transition:transform var(--dur-agar) var(--spring-agar)}
.send-feature:hover .send-arrow{transform:translate(3px,-3px)}
.send-feature:active .send-arrow{transform:translate(-2px,2px)}
.secondary-intro{margin-top:64px;padding-top:32px;border-top:1px solid var(--rule)}
.secondary-intro .lead{font-size:16px;max-width:65ch;margin:0}
.home-page .daily{margin-top:0;padding:28px 32px;gap:24px 36px;border:1px solid var(--text);border-radius:4px;
  background:var(--paper);backdrop-filter:none;-webkit-backdrop-filter:none;
  grid-template-columns:minmax(0,1fr) 190px}
.daily .kicker{color:var(--text-muted);margin-bottom:12px}
.daily h2{font-size:clamp(24px,2.6vw,34px);margin:0 0 12px;letter-spacing:var(--heading-tracking)}
.daily-challenge{font-size:17px;color:var(--text-soft);min-height:3em}
.daily-side{padding-left:36px;border-color:var(--rule);justify-content:center}
.daily-label{color:var(--text-muted);font-size:12px;letter-spacing:.055em}
.daily-clock{font-size:34px;color:var(--text);letter-spacing:-.07em}
.daily-count{color:var(--link-on-light)}
.daily-day{color:var(--text-muted);font-size:12px}
/* The same challenge and four live statistics stay readable as their values update. */
.daily-play{height:auto;padding:18px 0;background:var(--paper);border-color:var(--rule)}
.daily-play-inner{height:auto;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
.daily-play h2{font:650 14px/1.5 var(--font-sans);white-space:normal}
.daily-play h2 span{font:500 12px/1.5 var(--font-mono);white-space:normal}
.daily-play p{display:block;height:auto;margin:4px 0 0;font:400 14px/1.6 var(--font-sans);white-space:normal;
  overflow:visible;text-overflow:clip;-webkit-line-clamp:unset;line-clamp:unset}
.daily-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px 24px;overflow:visible}
.daily-stats>div{min-width:0}
.daily-stats dt{min-height:3em;font:500 12px/1.5 var(--font-mono);white-space:normal;overflow-wrap:anywhere}
.daily-stats dd{margin:4px 0 0;min-height:1.5em;font:500 14px/1.5 var(--font-mono);white-space:normal;
  overflow-wrap:anywhere;color:var(--link-on-light)}
/* Reserve the saved score's wrapped lines before client-side enhancement. */
.daily-stats .daily-best dd{min-height:4.5em;color:var(--text)}
@media(max-width:1100px){.daily-stats .daily-best dd{min-height:6em}}
.experiment-back{margin:0;padding-block:12px;font:400 14px/1.5 var(--font-sans)}

.home-page .experiment-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:32px}
.experiment-cards .card{min-width:0;padding:0 0 26px;background:transparent;border:0;border-bottom:1px solid var(--rule);border-radius:0}
.experiment-cards video[data-card-loop]{display:block;width:100%;height:auto!important;aspect-ratio:4/3!important;object-fit:contain!important;
  border:1px solid var(--rule);border-radius:3px!important;margin-bottom:24px!important;background:#e7e4dd;
  transition:border-color .2s}
.experiment-cards video[poster^='/experiments/']{background:#0d0d0d}
.experiment-cards video[poster^='/experiments/sleepy-and-wobbly/'],
.experiment-cards video[poster^='/experiments/bouncy-and-squeezy/']{background:#14121e}
.experiment-cards .card:hover video{border-color:var(--text)}
.experiment-cards .tag{margin-left:1px}
.experiment-cards h3{font-size:clamp(26px,2.5vw,36px);margin-bottom:12px}
.experiment-cards .soon h3{font-size:23px}
.experiment-cards p{font-size:15px;max-width:55ch}
.home-page .physics-section>.wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:0 64px;align-items:start}
.physics-section .kicker{grid-column:1/-1}
.physics-section h2{font-size:clamp(44px,5.2vw,70px);margin:0;grid-row:2/4;max-width:14ch}
.physics-section .lead{margin:0;font-size:19px}
.physics-section .btn{justify-self:start;margin-top:28px}
.home-page .reading-intro>.wrap,.home-page .closing-section>.wrap{max-width:1280px;display:grid;
  grid-template-columns:.7fr 1fr;column-gap:100px}
.reading-intro h2,.closing-section h2{grid-column:1;grid-row:1/4;margin-top:0}
.reading-intro p,.closing-section p,.closing-section .btn{grid-column:2}
.closing-section .btn{justify-self:start}
.home-page .science-section .cards{gap:0;border-top:1px solid var(--rule)}
.science-section .card{background:transparent;border:0;border-bottom:1px solid var(--rule);border-radius:0;padding:32px}
.science-section .card:nth-child(odd){border-right:1px solid var(--rule);padding-left:0}
.science-section .card:hover{background:var(--paper)}

/* Reading pages retain a comfortable line length; the margin carries a quiet measurement rule. */
.reading-page main>.section,.reading-page main>section{padding-top:80px}
.reading-page,.has-stage{--reading-pad:clamp(22px,5vw,72px)}
.reading-page .wrap.measure,.has-stage main>section>.wrap.measure{position:relative;font-size:18px;max-width:calc(65ch + 2 * var(--reading-pad));
  padding-left:var(--reading-pad);padding-right:var(--reading-pad)}
.reading-page main p:not(.kicker),.reading-page main li,
.has-stage main>section .measure p:not(.kicker),.has-stage main>section .measure li{font-size:18px;line-height:1.7}
.specimen-notes .measure{font-size:18px;max-width:65ch}
.reading-page .wrap.measure::before{content:"";position:absolute;top:0;bottom:0;left:-24px;width:8px;
  border-left:1px solid var(--rule);pointer-events:none}
.reading-page h1{font-size:clamp(40px,5.4vw,70px);margin-bottom:34px}
.reading-page .lead{margin-bottom:32px}
.reading-page h2{padding-top:20px;border-top:1px solid var(--rule);margin-top:48px;font-size:30px}
.reading-page h3{font-size:19px}
.specimen-notes{padding-top:72px}
.specimen-notes .wrap{gap:64px;grid-template-columns:minmax(0,340px) minmax(0,1fr)}
.specimen-notes img{border-radius:3px;border-color:var(--rule)}
.specimen-notes figcaption{font-size:12px;line-height:1.5;color:var(--text-muted)}
.specimen-notes h1{font-size:clamp(42px,5vw,64px)}
.ad-slot{background:#edeee7;border-color:var(--rule)}
.adzone{background:transparent;border-color:var(--rule)}
.adzone .caps,.adzone .slot.dev,.ad-slot:has(.adzone[hidden])::before{color:var(--text-muted)}

/* Existing footer words become the final large, quiet statement. */
.foot{position:relative;margin-top:40px;padding-top:60px;padding-bottom:32px;display:flex;flex-direction:column;
  align-items:stretch;gap:46px;border-top:1px solid var(--text);font-size:13px;background:var(--bg)}
.foot>.muted{order:-1;max-width:900px;font-size:clamp(26px,4vw,53px);font-weight:550;line-height:1.2;
  letter-spacing:var(--heading-tracking);color:var(--text);padding-right:60px;text-wrap:balance}
.foot>div:first-child{display:flex;gap:24px}
.foot a{color:var(--text-soft);padding:0;font-size:12px;text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--rule)}
.foot a:hover{color:var(--text);text-decoration-color:var(--text)}
.foot::after{content:"";position:absolute;right:clamp(22px,4.8vw,72px);top:60px;width:26px;height:26px;
  border:1px solid var(--text);border-radius:50%;background:var(--cyan);pointer-events:none}
.not-found-page main>section{min-height:70vh;display:flex;align-items:center}
.not-found-page .wrap.measure{max-width:1280px;width:100%;display:grid;grid-template-columns:.9fr 1.4fr;
  gap:0 70px;align-items:start}
.not-found-page .kicker{font-family:var(--font-sans);font-weight:700;font-size:clamp(100px,18vw,246px);
  letter-spacing:-.1em;line-height:1;color:var(--text);margin:0;grid-column:1;grid-row:1/4;
  position:relative;padding-bottom:42px}
.not-found-page .kicker::after{content:"";position:absolute;bottom:20px;left:0;right:0;height:1px;
  background:var(--cyan);transform-origin:center;transition:transform var(--dur-gelatin) var(--spring-gelatin)}
.not-found-page .kicker:hover::after{transform:scaleX(.75) scaleY(4)}
.not-found-page h1{font-size:clamp(46px,5.7vw,78px);max-width:12ch;margin-bottom:26px}
.not-found-page .lead,.not-found-page .btn{grid-column:2}
.not-found-page .btn{justify-self:start}

@media(min-width:1600px){.bar,.foot{padding-left:max(80px,calc((100vw - 1280px)/2 + 72px));padding-right:max(80px,calc((100vw - 1280px)/2 + 72px))}}
@media(max-width:1000px){
  .lab-intro{grid-template-columns:1.7fr 1fr;gap:20px}
  .lab-intro h1{font-size:clamp(54px,6.8vw,72px)}
  .lab-plot{height:150px;min-height:0}
  .primary-actions{grid-template-columns:1.7fr 1fr;gap:18px}
  .home-page .daily{grid-template-columns:minmax(0,1fr);padding:24px;gap:20px}
  .daily-side{padding-left:24px}
  .primary-actions .daily-side{border-left:0;border-top:1px solid var(--rule);padding:16px 0 0;
    display:grid;grid-template-columns:1fr 1.2fr;column-gap:18px}
  .primary-actions .daily-side .daily-label:first-child{grid-column:1;grid-row:1}
  .primary-actions .daily-clock{grid-column:1;grid-row:2;font-size:26px}
  .primary-actions .daily-shared-label{grid-column:2;grid-row:1;margin-top:0}
  .primary-actions .daily-count{grid-column:2;grid-row:2;margin-top:0!important}
  .primary-actions .daily-day{grid-column:1/-1;max-width:none;margin-top:10px!important}
  .send-feature{padding:24px}
  .home-page .reading-intro>.wrap,.home-page .closing-section>.wrap{column-gap:48px}
  .physics-section .lead{font-size:17px}
  .reading-page .wrap.measure::before{display:none}
  .specimen-notes .wrap{gap:32px;grid-template-columns:minmax(0,260px) minmax(0,1fr)}
}
@media(max-width:720px){
  :root{--heading-tracking:-.025em}
  .bar{padding:14px 20px;gap:8px;justify-content:center}
  .brand{width:100%;justify-content:center;font-size:23px;min-height:38px}
  .bar nav{width:100%;justify-content:space-between;gap:4px}
  .bar nav a{font-size:13px;padding:0 3px}
  .bar nav a[href='/squish/']{padding:0 8px}
  .home-page #pick-a-blob{padding-top:32px}
  .lab-intro{grid-template-columns:1fr;margin-bottom:28px;gap:0}
  .lab-intro h1{font-size:clamp(40px,10.5vw,62px);max-width:14ch}
  .lab-intro .lead{font-size:16px}
  .lab-plot{display:none}
  .primary-actions{grid-template-columns:1fr;gap:18px}
  .send-feature{flex-direction:row;align-items:center;gap:20px;padding:18px 22px}
  .send-feature>span{font-size:28px;max-width:none}
  .send-feature .send-wave{display:none}
  .send-feature .send-compact-arrow{display:block;width:34px;height:34px;align-self:center}
  .home-page .daily{grid-template-columns:1fr;padding:24px 22px;gap:18px}
  .daily-side{padding:20px 0 0;border-left:0;border-top:1px solid var(--rule)}
  .daily h2{min-height:2.4em;font-size:26px}
  .daily-challenge{min-height:3em;font-size:16px}
  .daily-clock{font-size:32px}
  .daily-day{max-width:32ch}
  .secondary-intro{margin-top:44px;padding-top:26px}
  .daily-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .daily-stats dd{min-height:3em}
  .daily-stats .daily-best dd{min-height:7.5em}
  .home-page .experiment-cards{grid-template-columns:1fr;gap:24px;margin-top:42px}
  .experiment-cards h3{font-size:clamp(26px,7vw,32px)}
  .home-page .physics-section>.wrap,.home-page .reading-intro>.wrap,.home-page .closing-section>.wrap{display:block}
  .physics-section h2{font-size:48px;max-width:15ch;margin-bottom:30px}
  .physics-section .lead{font-size:18px}
  .cards,.bento{grid-template-columns:1fr}
  .science-section .card:nth-child(n),.bento li:nth-child(n) .card{border-right:0;padding:28px 0}
  .bento .card{min-height:0}
  .home-page .science-section .cards{margin-top:28px}
  .reading-page main>section{padding-top:52px}
  .reading-page,.has-stage{--reading-pad:22px}
  .reading-page .wrap.measure,.has-stage main>section>.wrap.measure,.specimen-notes .measure{font-size:17px}
  .reading-page main p:not(.kicker),.reading-page main li,
  .has-stage main>section .measure p:not(.kicker),.has-stage main>section .measure li{font-size:17px}
  .reading-page h1{font-size:clamp(36px,9.5vw,62px)}
  .reading-page h2{font-size:27px}
  th,td{padding:12px 7px;font-size:12px}
  .specimen-notes .wrap{grid-template-columns:1fr;gap:32px}
  .specimen-notes figure{max-width:340px}
  .foot{align-items:stretch;padding:42px 22px 24px;gap:28px}
  .foot>.muted{font-size:31px;padding-right:26px}
  .foot::after{width:16px;height:16px;top:44px;right:22px}
  .not-found-page .wrap.measure{grid-template-columns:1fr;gap:16px}
  .not-found-page .kicker{grid-row:auto;font-size:140px;max-width:220px;padding-bottom:32px}
  .not-found-page .lead,.not-found-page .btn{grid-column:1}
  .not-found-page h1{font-size:52px}
}
@media(prefers-reduced-motion:reduce){
  .btn:hover,.btn:active,.card:hover,.card:active{scale:none}
  .not-found-page .kicker:hover::after{transform:none}
  .send-feature .send-arrow{transition:none}
  .send-feature:hover .send-arrow,.send-feature:active .send-arrow{transform:none}
}