@font-face{font-family:"Fraunces";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/fraunces-normal-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/fraunces-normal-latin-ext.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:100 700;font-display:swap;src:url(fonts/IBMPlexSans-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:100 700;font-display:swap;src:url(fonts/IBMPlexSans-latin-ext.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{--bg:#f3ede2;--bg2:#ebe3d4;--fg:#1d1b26;--mut:#5d5866;--line:#d5cbb9;--line-soft:#e0d7c7;--acc:#b8402a;--acc2:#2b3a6b;--card:#fbf8f2;--serif:"Fraunces",Georgia,"Times New Roman",serif;--sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;--col:40rem;--bar:46px;color-scheme:light}
:root[data-theme=dark]{--bg:#12131d;--bg2:#191b28;--fg:#ece6da;--mut:#a59fb2;--line:#2f3144;--line-soft:#262839;--acc:#f0a25e;--acc2:#9fb0e8;--card:#1a1c2a;color-scheme:dark}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--fg);font:400 1.0625rem/1.62 var(--serif);font-optical-sizing:auto;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration-color:color-mix(in srgb,var(--acc) 60%,transparent);text-underline-offset:.18em}
a:hover{color:var(--acc)}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.skip{position:absolute;left:-999px;top:0}.skip:focus{left:8px;top:8px;z-index:99;background:var(--bg);padding:.4rem .7rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* top bar: one quiet line */
.topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:.9rem;height:calc(var(--bar) + var(--browser-safe-top,env(safe-area-inset-top)));padding:var(--browser-safe-top,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left));background:color-mix(in srgb,var(--bg) 92%,transparent);border-bottom:1px solid var(--line-soft);font:500 .86rem/1 var(--sans)}
.brand{text-decoration:none;display:flex;align-items:center;gap:.45rem;white-space:nowrap}
.brand svg{width:18px;height:18px}
.topnav{display:flex;gap:1rem;overflow-x:auto;scrollbar-width:none;min-width:0}
.topnav::-webkit-scrollbar{display:none}
.topnav a{text-decoration:none;color:var(--mut);white-space:nowrap}.topnav a:hover{color:var(--fg)}
.spacer{flex:1}
.chip{text-decoration:none;border:1px solid var(--line);border-radius:99px;padding:.32rem .7rem;white-space:nowrap}
.icon-btn{display:grid;place-items:center;width:36px;height:36px;border:1px solid var(--line);border-radius:50%;background:none;color:var(--fg);cursor:pointer}
.icon-btn svg{width:17px;height:17px}
:root[data-theme=dark] .sun,:root:not([data-theme=dark]) .moon{display:none}
@media(max-width:560px){.topnav{display:none}}

/* opening: the text beside the painting */
.hero{display:grid;grid-template-columns:minmax(0,1fr);gap:1.4rem;padding:1.2rem 16px 2rem;max-width:1280px;margin:0 auto}
@media(min-width:960px){.hero{grid-template-columns:minmax(330px,27rem) minmax(0,1fr);gap:3.2rem;align-items:center;padding:2.2rem 2.5rem 3rem;min-height:calc(100svh - var(--bar))}}
.kicker{font:600 .78rem/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--acc);margin:0 0 .7rem}
h1{font:600 clamp(2rem,4.4vw,3.15rem)/1.06 var(--serif);letter-spacing:-.018em;margin:0 0 1rem;font-variation-settings:"SOFT" 60,"WONK" 0}
.deck{font-size:1.14rem;line-height:1.55;margin:0 0 1.3rem;color:var(--fg)}
.how{font:400 .95rem/1.5 var(--sans);color:var(--mut);margin:.2rem 0 1.1rem}
.starts{display:flex;flex-direction:column;gap:.6rem;margin:0 0 .9rem}
.btn{display:flex;align-items:center;gap:.7rem;width:100%;min-height:52px;padding:.7rem 1.1rem;border-radius:14px;border:1px solid var(--line);background:var(--card);color:var(--fg);font:600 1rem/1.25 var(--sans);text-align:left;cursor:pointer;transition:border-color .15s,transform .15s}
.btn:hover{border-color:var(--acc)}
.btn.primary{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.btn.primary:hover{background:var(--acc);border-color:var(--acc);color:#fff}
.btn small{display:block;font-weight:400;font-size:.84rem;opacity:.78;margin-top:.12rem}
.btn svg{width:22px;height:22px;flex:none}
.privacy{font:400 .84rem/1.45 var(--sans);color:var(--mut);margin:0}
.shared{font:500 .95rem/1.45 var(--sans);background:var(--bg2);border-left:3px solid var(--acc);padding:.6rem .8rem;margin:0 0 1rem}
.camfail{font:400 .9rem/1.45 var(--sans);color:var(--acc);margin:.5rem 0 0}

/* the stage */
.stage-wrap{display:flex;flex-direction:column;align-items:center;gap:.8rem;min-width:0}
.stage{position:relative;width:min(100%,calc((100svh - var(--bar) - 7rem) * .8));aspect-ratio:4/5;border-radius:6px;overflow:hidden;box-shadow:0 1px 0 rgba(0,0,0,.05),0 24px 60px -24px rgba(30,20,10,.45);background:#f4ecde url(img/morning.jpg) center/cover no-repeat;touch-action:manipulation}
@media(max-width:959px){.stage{width:min(100%,calc((100svh - var(--bar) - 9rem) * .8),34rem)}}
.stage canvas{display:block;width:100%;height:100%}
#blank{position:absolute;inset:0;background:#8d877f;opacity:0;pointer-events:none}
#blank.on{opacity:1}
#outline{position:absolute;border:2px dashed #fff;border-radius:6px;box-shadow:0 0 0 1px rgba(0,0,0,.45),inset 0 0 0 1px rgba(0,0,0,.45);pointer-events:none;transition:all .35s}
@media(prefers-reduced-motion:reduce){#outline{transition:none}}
#cam{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.caption{font:400 .82rem/1.4 var(--sans);color:var(--mut);text-align:center;max-width:34rem;margin:0}

/* the run: everything but the painting steps back */
.runbar{display:none;align-items:center;gap:.7rem;width:min(100%,34rem)}
.running .runbar{display:flex}
.running .hero-text>:not(.runhelp){opacity:.18;pointer-events:none;transition:opacity .4s}
.running .topbar,.running .rail,.running .to-top{opacity:0;pointer-events:none}
.running main>section:not(.hero),.running footer{visibility:hidden}
.runhelp{display:none;font:500 1rem/1.5 var(--sans);margin:0 0 1rem}
.running .runhelp{display:block}
#seen{flex:1;min-height:56px;border-radius:14px;border:0;background:var(--acc);color:#fff;font:600 1.05rem/1.2 var(--sans);cursor:pointer}
#seen.ping{animation:ping .28s}
@keyframes ping{50%{transform:scale(.97);filter:brightness(1.15)}}
#stop{min-height:56px;padding:0 1.1rem;border-radius:14px;border:1px solid var(--line);background:none;color:var(--fg);font:500 .95rem/1 var(--sans);cursor:pointer}
#elapsed{font:500 .95rem/1 var(--sans);font-variant-numeric:tabular-nums;color:var(--mut);min-width:3.2rem}
#camstatus{font:400 .85rem/1.4 var(--sans);color:var(--mut);min-height:1.2em;margin:0;text-align:center}
#camstatus[data-k=noface]{color:var(--acc)}

/* result, beside the painting */
.done .hero-intro{display:none}
.result{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:1.2rem 1.2rem 1rem;outline:none}
.result h2{font:600 1.45rem/1.2 var(--serif);margin:0 0 .5rem}
.result p{margin:.2rem 0 .5rem;font:400 .98rem/1.5 var(--sans)}
.res-main{font:600 1.3rem/1.3 var(--serif)!important}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:.7rem;margin:.8rem 0}
.pair figure{margin:0}.pair canvas{width:100%;aspect-ratio:4/5;border-radius:4px;display:block}
.pair figcaption{font:400 .8rem/1.3 var(--sans);color:var(--mut);margin-top:.3rem}
.row{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:.6rem 0}
.link-btn{background:none;border:1px solid var(--line);border-radius:99px;padding:.45rem .85rem;color:var(--fg);font:500 .9rem/1 var(--sans);cursor:pointer;min-height:40px}
.link-btn:hover{border-color:var(--acc)}
.replay{display:flex;align-items:center;gap:.6rem;width:min(100%,34rem);font:400 .88rem/1.4 var(--sans)}
.replay input{flex:1;accent-color:var(--acc)}
.replay-cap{font:400 .9rem/1.45 var(--sans);text-align:center;max-width:34rem;margin:0;min-height:2.6em}
.replay-wrap{display:flex;flex-direction:column;align-items:center;gap:.4rem;width:100%}

/* share row: quiet round icons */
.share{margin:.6rem 0 .2rem}
.share-row{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap}
.share-label{font:500 .85rem/1 var(--sans);color:var(--mut);margin-right:.2rem}
.share-row a,.share-row button{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--line-soft);background:transparent;color:var(--fg);cursor:pointer}
@media(pointer:coarse){.share-row a,.share-row button{width:44px;height:44px}}
.share-row a:hover,.share-row button:hover{border-color:var(--acc);color:var(--acc)}
.share-row svg{width:18px;height:18px}
.share-status{font:400 .82rem/1.3 var(--sans);color:var(--mut);min-height:1.1em;margin:.3rem 0 0}

/* article */
main>section:not(.hero){max-width:var(--col);margin:0 auto;padding:2.6rem 16px 1rem;scroll-margin-top:calc(var(--bar) + 10px)}
h2{font:600 clamp(1.5rem,3vw,2.05rem)/1.15 var(--serif);letter-spacing:-.01em;margin:0 0 1rem}
h3{font:600 1.15rem/1.3 var(--serif);margin:1.6rem 0 .5rem}
p{margin:0 0 1.05rem}
.lead{font-size:1.18rem}
.note{font:400 .9rem/1.5 var(--sans);color:var(--mut)}
.fig{margin:1.6rem 0;padding:1rem 1.1rem;background:var(--bg2);border-radius:12px}
.fig figcaption{font:400 .85rem/1.45 var(--sans);color:var(--mut);margin-top:.6rem}
.big{font:600 clamp(2.4rem,7vw,3.6rem)/1 var(--serif);letter-spacing:-.02em;color:var(--acc)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:1rem;margin:1rem 0 1.4rem}
.stats div{border-top:1px solid var(--line);padding-top:.5rem}
.stats b{display:block;font:600 2rem/1.1 var(--serif);color:var(--acc)}
.stats span{font:400 .85rem/1.35 var(--sans);color:var(--mut)}
.mine{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:1rem 1.1rem;margin:0 0 1.4rem}
.mine h3{margin-top:0}

/* the words: a wall of 'moments' that are blinks */
.words{list-style:none;margin:1.4rem 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:.2rem 1.4rem}
.words li{padding:.7rem 0;border-top:1px solid var(--line)}
.words .w{display:block;font:500 1.55rem/1.15 var(--serif)}
.words .lang{font:600 .72rem/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--acc)}
.words .gloss{display:block;font:400 .88rem/1.4 var(--sans);color:var(--mut);margin-top:.2rem}
.words .src{font:400 .76rem/1.3 var(--sans);color:var(--mut)}
.timeline{display:flex;gap:3px;flex-wrap:wrap;margin:.4rem 0}

.sources{font:400 .9rem/1.5 var(--sans)}
.sources li{margin:.35rem 0}
.ending{font:500 1.3rem/1.5 var(--serif)}
footer{max-width:var(--col);margin:2rem auto 0;padding:1.4rem 16px 3rem;border-top:1px solid var(--line);font:400 .86rem/1.5 var(--sans);color:var(--mut)}
footer a{color:var(--mut)}

@media print{.topbar,.rail,.runbar,.starts,.share,.to-top{display:none}}

[hidden]{display:none!important}
/* reading-rail v2: dots in the gutter beside the column, labels never over the text */
.rail{display:none}
@media(min-width:1100px){
.rail{--col:40rem;--gut:1.25rem;display:flex;flex-direction:column;position:fixed;top:50%;left:calc(50% + var(--col)/2 + var(--gut));transform:translateY(-50%);z-index:40;margin:0;padding:.4rem 0;max-height:calc(100vh - 7rem)}
.rail::before{content:"";position:absolute;left:calc(.875rem - .5px);top:1.1rem;bottom:1.1rem;width:1px;background:var(--line)}
.rail-dot{position:relative;display:flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;text-decoration:none;border-radius:50%}
.rail-dot .dot{width:7px;height:7px;border-radius:50%;background:var(--mut);box-shadow:0 0 0 3px var(--bg);transition:transform .2s,background .2s,box-shadow .2s;flex:none}
.rail-dot:hover .dot,.rail-dot:focus-visible .dot{background:var(--acc);transform:scale(1.25)}
.rail-dot[aria-current=true] .dot{background:var(--acc);transform:scale(1.45);box-shadow:0 0 0 3px var(--bg),0 0 0 4.5px color-mix(in srgb,var(--acc) 38%,transparent)}
.rail-dot:focus-visible{outline:2px solid var(--acc);outline-offset:-1px}
/* narrow gutter: a label is a hover/focus tooltip only, never left on over the text */
.rail-label{position:absolute;right:calc(100% + .3rem);top:50%;transform:translate(6px,-50%);padding:.22rem .65rem;border:1px solid var(--line);border-radius:.5rem;background:var(--bg);color:var(--fg);box-shadow:0 6px 20px rgba(0,0,0,.14);font-size:.82rem;font-weight:600;line-height:1.3;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s,transform .15s}
.rail-dot:hover .rail-label,.rail-dot:focus-visible .rail-label{opacity:1;transform:translate(0,-50%)}
}
/* wide gutter: labels sit outside the column and still appear only on hover or focus */
@media(min-width:1400px){
.rail-label{right:auto;left:calc(100% + .15rem);max-width:calc(50vw - var(--col)/2 - var(--gut) - 3.25rem);overflow:hidden;text-overflow:ellipsis;padding:.1rem .2rem;border-color:transparent;background:transparent;box-shadow:none;color:var(--mut);transform:translate(-4px,-50%)}
.rail-dot:hover .rail-label,.rail-dot:focus-visible .rail-label{color:var(--acc)}
}
@media(prefers-reduced-motion:reduce){.rail .dot,.rail-label{transition:none}}
@media(forced-colors:active){.rail::before{background:CanvasText}.rail-dot .dot{background:CanvasText;box-shadow:none}.rail-dot[aria-current=true] .dot{background:Highlight}.rail-label{border-color:CanvasText}}
.running .rail{opacity:0;pointer-events:none}
/* phone: the painting comes first, half a screen tall; full size while the experiment runs */
@media(max-width:959px){
.hero{padding-top:.8rem}
.stage-wrap{order:-1}
.stage{width:min(100%,calc((100svh - var(--bar)) * .5 * .8),30rem)}
.running .stage{width:min(100%,calc((100svh - var(--bar) - 8.5rem) * .8),34rem)}
.running .hero-text{display:none}
.done .stage-wrap{order:0}
}
/* the rail stays out of the opening screen, where it would sit over the painting */
.rail{opacity:0;pointer-events:none;transition:opacity .4s}
.past-hero .rail{opacity:1;pointer-events:auto}
.running .rail{opacity:0!important;pointer-events:none!important}
/* phone: painting first (40% of the screen), then the headline and straight away the two buttons */
@media(max-width:959px){
.stage{width:min(100%,calc((100svh - var(--bar)) * .4 * .8),26rem)}
.hero-intro{display:flex;flex-direction:column}
.hero-intro .kicker{order:0}.hero-intro h1{order:1;font-size:clamp(1.7rem,7.4vw,2.3rem)}.hero-intro .shared{order:2}
.hero-intro .starts{order:3}.hero-intro .deck{order:4;font-size:1.05rem}.hero-intro .privacy{order:5}.hero-intro #camfail{order:6}
}