/* Taste Training: quiet paper, ink, and the eight Paint colors used only as solid squares.
   Headings use Bricolage Grotesque, text uses Instrument Sans (both SIL Open Font License, see /fonts/OFL-*.txt). One family per role, no serif.
   The site's Content-Security-Policy allows no inline styles, so every size and color lives here, never in a style attribute. */
@font-face{font-family:"Bricolage Grotesque";src:url("/fonts/BricolageGrotesque-Variable.woff2") format("woff2");font-weight:200 800;font-stretch:75% 100%;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("/fonts/InstrumentSans-Variable.woff2") format("woff2");font-weight:400 700;font-stretch:75% 100%;font-display:swap}
:root{color-scheme:light dark;--paper:#f8f7f4;--ink:#111;--muted:#5f5f58;--line:#d8d7d1;--canvas:#fff;--silver:#c0c0c0;--focus:#0000ff;--error:#c00000;
  --red:#f00;--yellow:#ff0;--blue:#00f;--lime:#0f0;--fuchsia:#f0f;--aqua:#0ff;--orange:#ff8000;--green:#00a000;--radius:3px;
  --display:"Bricolage Grotesque",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --body:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-family:var(--body);color:var(--ink);background:var(--paper);font-synthesis:none}
@media(prefers-color-scheme:dark){:root{--paper:#161615;--ink:#f4f3ee;--muted:#aaaaa2;--line:#3d3d39;--canvas:#22221f;--silver:#4a4a46;--focus:#0ff;--error:#ff8a80}}
*{box-sizing:border-box}
body{margin:0 auto;max-width:1120px;padding:0 48px;line-height:1.6;background:var(--paper)}
a{color:inherit;text-underline-offset:4px}a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
header,footer{display:flex;justify-content:space-between;align-items:center;gap:24px}
header{padding:30px 0;border-bottom:2px solid var(--ink)}
nav{display:flex;gap:28px;font-size:17px;white-space:nowrap}
.wordmark{display:flex;align-items:center;gap:16px;text-decoration:none;white-space:nowrap;font:700 clamp(28px,3.4vw,40px)/1 var(--display);letter-spacing:-.04em}
.wordmark .t{--size:46px}
header,main,footer{position:relative;z-index:1}
main{min-height:62vh}
h1,h2,p{margin-top:0}
h1{font:700 clamp(48px,6.5vw,76px)/1.02 var(--display);letter-spacing:-.04em;text-wrap:balance;margin-bottom:26px}
h2{font:700 32px/1.1 var(--display);letter-spacing:-.04em;margin-bottom:14px}
p{font-size:16px;max-width:66ch}
.muted{color:var(--muted);font-size:14px}

/* The mark in plain HTML: line width and cell size round to whole pixels, so it is crisp at any size. Only --size changes. */
.t{--size:32px;--w:max(1px,round(down,calc(var(--size) / 32),1px));--c:round(down,calc((var(--size) - 5 * var(--w)) / 4),1px);
  display:grid;grid-template-columns:repeat(4,var(--c));grid-template-rows:repeat(4,var(--c));gap:var(--w);margin:var(--w);flex:none}
.t i{display:block;box-shadow:0 0 0 var(--w) var(--ink)}
.t .a{grid-area:1/2;background:var(--red)}.t .b{grid-area:2/1;background:var(--yellow)}.t .c{grid-area:2/2;background:var(--blue)}
.t .d{grid-area:2/3;background:var(--lime)}.t .e{grid-area:3/2;background:var(--fuchsia)}.t .f{grid-area:4/2;background:var(--aqua)}
.t .g{grid-area:4/3;background:var(--orange)}.t .h{grid-area:4/4;background:var(--green)}
.t-hero{--size:clamp(200px,26vw,320px);justify-self:center}

/* Home: short sections on paper, separated by ink rules. The only framed objects are the demos. */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center;padding:clamp(48px,8vw,96px) 0 28px}
.hero h1{font-size:clamp(46px,6.6vw,86px);line-height:.96;letter-spacing:-.04em;margin-bottom:26px}
.lede{font-size:clamp(18px,1.7vw,22px);line-height:1.5;margin-bottom:30px;max-width:28ch}
.invite{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.invite p{margin:0;color:var(--muted);font-size:15px}
.palette{display:flex;flex-wrap:wrap;gap:6px;padding:8px;background:var(--silver);border:2px solid var(--ink);border-radius:var(--radius);width:max-content;max-width:100%;margin:8px 0 clamp(40px,6vw,72px)}
.palette button{all:unset;box-sizing:border-box;width:26px;height:26px;border:2px solid #111;cursor:pointer}
.palette button[aria-pressed=true]{outline:2px solid #111;outline-offset:2px;box-shadow:inset 0 0 0 2px #fff}
.palette button:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.palette .swatch-red{background:var(--red)}.palette .swatch-yellow{background:var(--yellow)}.palette .swatch-blue{background:var(--blue)}.palette .swatch-lime{background:var(--lime)}
.palette .swatch-fuchsia{background:var(--fuchsia)}.palette .swatch-aqua{background:var(--aqua)}.palette .swatch-orange{background:var(--orange)}.palette .swatch-green{background:var(--green)}

/* The clip demo: four clips, one at a time. Select it, call it taste or slop, say why, and it is added. 6 s each; every scene runs
   the same 0-25% timeline, shifted by a negative delay. */
.demo{position:relative;aspect-ratio:5/4;max-width:100%;border:3px solid var(--ink);background:var(--canvas);overflow:hidden}
.scene{position:absolute;inset:0;animation:scene 24s steps(1,end) infinite}
.scene-b,.scene-b *{animation-delay:-18s!important}
.scene-c,.scene-c *{animation-delay:-12s!important}
.scene-d,.scene-d *{animation-delay:-6s!important}
@keyframes scene{0%,24.9%{opacity:1}25%,100%{opacity:0}}
.clip{position:absolute;left:6%;top:6%;width:72%;height:48%;overflow:hidden}
.menu{background:#fbfbfa;color:#1a1a1a;border:1px solid #d9d9d6;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.08);font:400 clamp(9px,1vw,12px)/1 -apple-system,BlinkMacSystemFont,system-ui,sans-serif;display:grid;align-content:start}
.menu .q{padding:9px 12px;border-bottom:1px solid #e6e6e3;color:#8a8a85}
.menu .g{padding:8px 12px 3px;color:#8a8a85;font-size:.85em}
.menu .r{display:flex;justify-content:space-between;padding:7px 12px}
.menu .r kbd{font:inherit;color:#8a8a85}
.menu .r.on{background:#1a1a1a;color:#fff;margin:2px 6px;padding:7px 6px;border-radius:5px}
.menu .r.on kbd{color:#bdbdb8}
.ai{background:linear-gradient(135deg,#7b5cff,#2f9bff);color:#fff;font-family:system-ui,sans-serif;padding:5%;display:grid;justify-items:center;align-content:center;gap:7px;text-align:center}
.ai .pill{font:700 clamp(7px,.75vw,9px)/1 system-ui,sans-serif;letter-spacing:.12em;padding:4px 8px;border-radius:99px;background:rgba(255,255,255,.25)}
.ai .h{font:800 clamp(14px,1.9vw,23px)/1.1 system-ui,sans-serif}
.ai .btns{display:flex;gap:6px}.ai .btns span{padding:4px 10px;border-radius:99px;background:#fff;color:#5a3df0;font:700 clamp(8px,.8vw,10px) system-ui,sans-serif}
.ai .btns span+span{background:transparent;color:#fff;border:1px solid #fff}
.ai .row{display:flex;gap:6px}.ai .row span{width:clamp(30px,4vw,48px);aspect-ratio:1;border-radius:10px;background:rgba(255,255,255,.9);display:grid;place-content:center;font-size:clamp(10px,1.2vw,15px)}
.essay{background:#fff;color:#1a1a1a;border:1px solid #d9d9d6;padding:6% 7%;display:grid;align-content:center;gap:10px;font-family:-apple-system,BlinkMacSystemFont,system-ui,sans-serif}
.essay p{margin:0;font-size:clamp(13px,1.55vw,19px);line-height:1.45;max-width:none}
.essay span{font-size:clamp(8px,.85vw,10px);color:#8a8a85}
.post{padding:4% 5%;font-size:clamp(11px,1.25vw,15px);line-height:1.45;background:var(--canvas)}
.post .who{display:flex;align-items:center;gap:8px;font-weight:600;margin-bottom:6px}
.post .who i{width:20px;height:20px;border-radius:50%;background:var(--orange);border:2px solid var(--ink)}
.post p{margin:0 0 4px}
.marquee{position:absolute;left:4%;top:4%;width:76%;height:52%;border:2px dashed var(--ink);opacity:0;animation:marquee 24s steps(1,end) infinite}
@keyframes marquee{0%,2%{opacity:0}3%,24.9%{opacity:1}25%,100%{opacity:0}}
.panel{position:absolute;right:5%;bottom:5%;width:62%;background:var(--paper);border:3px solid var(--ink);opacity:0;animation:panel 24s steps(1,end) infinite;font-size:clamp(12px,1.25vw,15px)}
@keyframes panel{0%,6%{opacity:0}7%,24.9%{opacity:1}25%,100%{opacity:0}}
.panel .bar{background:var(--silver);border-bottom:2px solid var(--ink);padding:4px 10px;font-weight:600}
.panel .body{padding:10px;display:grid;gap:8px}
.choices{display:flex;gap:8px}
.opt{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:2px solid var(--ink);background:var(--canvas);font-weight:600}
.opt i{width:11px;height:11px;border:2px solid var(--ink)}
.opt-taste i{background:var(--lime)}.opt-slop i{background:var(--red)}
.pick{animation:pick 24s steps(1,end) infinite}
@keyframes pick{0%,9%{background:var(--canvas);color:var(--ink)}10%,24.9%{background:var(--ink);color:var(--paper)}25%,100%{background:var(--canvas);color:var(--ink)}}
.note{border:2px solid var(--ink);background:var(--canvas);padding:5px 8px;min-height:2.2em}
.typed{display:inline-block;clip-path:inset(0 100% 0 0);animation:typed 24s steps(26,end) infinite}
@keyframes typed{0%,11%{clip-path:inset(0 100% 0 0)}17%,24.9%{clip-path:inset(0 0 0 0)}25%,100%{clip-path:inset(0 100% 0 0)}}
.added{position:absolute;left:0;right:0;top:0;padding:4px 10px;border-bottom:2px solid var(--ink);background:var(--ink);color:var(--paper);font-weight:600;opacity:0;animation:added 24s steps(1,end) infinite}
@keyframes added{0%,18%{opacity:0}19%,24.9%{opacity:1}25%,100%{opacity:0}}

/* Sections */
.block{padding:clamp(48px,7vw,88px) 0;border-top:2px solid var(--ink)}
.block h2{font-size:clamp(32px,4.4vw,58px);line-height:1;letter-spacing:-.04em;margin:0}
.section-intro{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:20px 56px;align-items:end;margin-bottom:36px}
.section-intro p{font-size:19px;margin:0}

/* Slop: an eraser wipes a slide and a paragraph into what your agent makes after reading your slop list. */
.wipes{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:24px}
.morph{position:relative;border:3px solid var(--ink);overflow:hidden;background:var(--canvas);min-height:260px}
.morph-slide{aspect-ratio:16/10}
.morph .layer{position:absolute;inset:0;display:grid}
.before{background:linear-gradient(135deg,#7b5cff,#2f9bff);color:#fff;padding:4% 5%;grid-template-rows:auto 1fr auto;gap:4%;font-family:system-ui,sans-serif}
.slop-top{display:grid;gap:6px;text-align:center;justify-items:center}
.slop-top p{margin:0;font-size:clamp(8px,.95vw,12px);line-height:1.35;max-width:60ch;opacity:.9}
.slop-caps{font:800 clamp(7px,.8vw,10px)/1 system-ui,sans-serif;letter-spacing:.18em;text-transform:uppercase}
.slop-fine{margin:0;font:600 clamp(6px,.65vw,8px)/1.3 system-ui,sans-serif;letter-spacing:.08em;text-align:center;opacity:.75}
.before h4{margin:0;font:800 clamp(16px,2.3vw,28px)/1.1 system-ui,sans-serif;text-align:center}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:4%}
.cards div{background:rgba(255,255,255,.95);border-radius:16px;box-shadow:0 10px 24px rgba(0,0,0,.25);color:#222;display:grid;place-content:center;justify-items:center;gap:8px;padding:8px;text-align:center}
.cards i{width:clamp(22px,3vw,38px);aspect-ratio:1;border-radius:50%;background:#efe8ff;display:grid;place-content:center;font-style:normal;font-size:clamp(12px,1.6vw,19px)}
.cards b{font:800 clamp(8px,1vw,11px)/1 system-ui,sans-serif;letter-spacing:.14em}
.cards small{font-size:clamp(6px,.7vw,9px);line-height:1.2;color:#555}
.after{background:var(--paper);padding:7%;align-content:center;gap:clamp(8px,1.4vw,16px);clip-path:inset(0 100% 0 0);animation:wipe 8s steps(12,end) infinite}
.after .say{font:700 clamp(32px,5.6vw,76px)/.95 var(--display);letter-spacing:-.04em;max-width:none}
.after hr{border:0;border-top:2px solid var(--ink);margin:0;width:100%}
.after p{margin:0;font-size:clamp(13px,1.4vw,17px);max-width:34ch}
.morph-prose .before{background:#fff;color:#222;padding:6%;align-content:center;grid-template-rows:none;gap:8px;font:400 clamp(11px,1.15vw,14px)/1.5 system-ui,sans-serif}
.morph-prose .before p{margin:0;max-width:none}
.morph-prose .slop-caps{color:#7b5cff}
.slop-big{font:800 clamp(18px,2.2vw,28px)/1.1 system-ui,sans-serif}
.slop-shout{font:900 clamp(13px,1.5vw,18px)/1 system-ui,sans-serif;letter-spacing:.06em}
.morph-prose .slop-fine{text-align:left;color:#666;font-weight:400;letter-spacing:0;text-transform:none;font-size:clamp(9px,.9vw,11px)}
.morph-prose .after,.morph-prose .eraser{animation-delay:1.5s}
.morph-prose .after p{font-weight:500;font-size:clamp(17px,1.9vw,23px);line-height:1.45;max-width:none}
.eraser{position:absolute;top:-4px;bottom:-4px;left:-40px;width:clamp(14px,2.2vw,24px);background:#ffb6d9;border:3px solid var(--ink);animation:erase 8s steps(12,end) infinite}
@keyframes wipe{0%,12%{clip-path:inset(0 100% 0 0)}55%,92%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 100% 0 0)}}
@keyframes erase{0%,12%{left:-40px}55%,100%{left:100%}}
.wipe-caption{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 24px;margin-top:12px;font-size:14px;color:var(--muted)}
.wipe-caption .pause{min-height:0;padding:6px 12px;font-size:13px;background:var(--paper);color:var(--ink)}
.paused *{animation-play-state:paused!important}
.known{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 56px;margin-top:56px}
.known h3{font:700 22px/1.2 var(--display);letter-spacing:-.03em;margin:0 0 10px}
.known ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.known li{padding:10px 0;border-bottom:1px solid var(--line)}
.known-note{margin-top:24px;font-size:17px}

/* What happens to your clips: a plain-words profile and an agent using it. Still, no motion. */
.use{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:start}
.use figure{margin:0;display:grid;gap:12px;min-width:0}
.use figcaption{font-size:16px;color:var(--muted);max-width:44ch}
.doc,.chat{border:3px solid var(--ink);background:var(--canvas);min-height:340px}
.doc-head{display:flex;justify-content:space-between;align-items:baseline;padding:12px 18px;border-bottom:2px solid var(--ink);background:var(--silver)}
.doc-head b{font:700 18px var(--display);letter-spacing:-.02em}
.doc-head span{font-size:14px;font-variant-numeric:tabular-nums}
.doc-body{padding:14px 18px;display:grid;gap:6px}
.doc-body p{margin:0;font-size:16px;max-width:none}
.doc-body .k{font-weight:700;margin-top:6px}
.doc-body .ln{padding:6px 0;border-bottom:1px solid var(--line)}
.chat{padding:16px;display:grid;align-content:start;gap:12px}
.msg{padding:10px 12px;font-size:16px;line-height:1.45;max-width:88%}
.msg-you{justify-self:end;background:var(--ink);color:var(--paper)}
.msg-agent{border:2px solid var(--ink)}
.msg-agent b{display:block;font-size:13px;margin-bottom:4px}
.result{border:2px solid var(--ink);padding:12px 14px;display:grid;gap:4px;font-size:14px}
.r-h{font:700 17px var(--display);letter-spacing:-.02em;margin-bottom:6px}
.r-row{display:flex;justify-content:space-between;padding:5px 0;border-top:1px solid var(--line);font-variant-numeric:tabular-nums}
.r-btn{justify-self:start;margin-top:8px;padding:6px 12px;background:var(--blue);color:#fff;font-weight:600}

.editions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-top:1px solid var(--line);margin-top:36px}
.editions>div{padding:24px 32px 0 0;display:grid;gap:10px;align-content:start}
.editions>div+div{padding:24px 0 0 32px;border-left:1px solid var(--line)}
.editions h3{font:700 24px/1.2 var(--display);letter-spacing:-.03em;margin:0}
.editions p{margin:0}
.edition-note{font-size:14px;color:var(--muted)}
.close{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:center}
.close .block-h{font-size:clamp(30px,3.6vw,46px);margin-bottom:14px}
.close p{font-size:19px;margin:0}

@media(prefers-reduced-motion:reduce){
  .scene,.scene *,.morph *{animation:none!important}
  .scene-b,.scene-c,.scene-d{display:none}
  .marquee,.panel,.added{opacity:1}.typed{clip-path:none}.scene-a .pick{background:var(--ink);color:var(--paper)}
  .after{clip-path:none}.eraser{display:none}
}
canvas.spray{position:fixed;left:0;top:0;z-index:0;pointer-events:none}

/* Buttons and forms (sign-in, account, device) */
.button,button{font:inherit;font-weight:600;background:var(--ink);color:var(--paper);border:2px solid var(--ink);padding:10px 20px;border-radius:var(--radius);
  display:inline-flex;align-items:center;justify-content:center;text-decoration:none;cursor:pointer;min-height:48px}
.button:hover,button:hover{background:var(--paper);color:var(--ink)}
button:disabled{opacity:.5;cursor:wait}
.secondary{background:transparent;color:var(--ink);border-color:var(--ink)}
label{display:block;margin-bottom:8px;font-size:15px}
input[type=email]{width:100%;padding:12px;font:inherit;color:var(--ink);background:transparent;border:2px solid var(--ink);border-radius:var(--radius);margin-bottom:22px}
input[type=checkbox]{width:18px;height:18px;flex-shrink:0;margin:2px 0 0;accent-color:var(--ink)}
.check{display:flex;align-items:start;gap:10px;line-height:1.5;font-size:14px;margin-bottom:24px}
form{margin-top:28px}
.status{min-height:1.6em;margin:20px 0;font-size:15px}.status[data-error=true]{color:var(--error)}
.narrow{max-width:560px;padding:72px 0 56px}
.account{padding:72px 0 50px;max-width:700px}.account h2{margin-top:44px}
.device-code{font-family:ui-monospace,monospace;letter-spacing:4px;font-size:32px;margin:28px 0}
.devices{padding:0;list-style:none}
.devices li{display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid var(--line);padding:18px 0}
.devices small{display:block;color:var(--muted);margin-top:5px}

/* Legal pages */
.policy{max-width:760px;padding:64px 0 72px}
.policy h1{font-size:clamp(48px,7vw,72px);margin-bottom:12px}
.policy h2{font-size:26px;margin-top:40px}
.policy li{line-height:1.6;margin-bottom:10px}
.policy .effective{color:var(--muted);font-size:14px;padding-bottom:24px;border-bottom:2px solid var(--ink);margin-bottom:32px}

footer{padding:26px 0 36px;border-top:2px solid var(--ink);margin-top:44px;color:var(--muted);font-size:14px}
footer nav{gap:20px}
[hidden]{display:none!important}

@media(max-width:760px){
  body{padding:0 20px}header{padding:20px 0}nav{gap:16px;font-size:15px}
  .wordmark{font-size:24px;gap:10px}.wordmark .t{--size:30px}
  .hero,.section-intro,.wipes,.known,.use,.close{grid-template-columns:minmax(0,1fr)}
  .editions{grid-template-columns:minmax(0,1fr)}
  .editions>div,.editions>div+div{padding:24px 0 0;border-left:0}
  .editions>div+div{border-top:1px solid var(--line);margin-top:24px}
  .morph-slide{aspect-ratio:4/3}.panel{width:76%}
  .demo{aspect-ratio:1/1}.clip{height:42%}.marquee{height:46%}
  .palette{gap:4px;padding:8px}.palette button{width:22px;height:22px}
  .narrow,.account,.policy{padding:48px 0 36px}
  footer{flex-direction:column;align-items:flex-start;gap:14px}
  .devices li{align-items:start;gap:16px}
}
@media(max-width:360px){
  header{gap:12px}.wordmark{font-size:20px}nav{gap:12px;font-size:13px}
}