:root{--paper:#f3f0e8;--card:#fffcf6;--ink:#292c28;--muted:#686e65;--line:#d8d9cc;--accent:#315d49;--soft:#e1e9dd;--serif:Georgia,'Times New Roman',serif;--sans:ui-sans-serif,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;--ease:cubic-bezier(.2,0,0,1)}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.6 var(--sans)}button,input,textarea,select{font:inherit}button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit}button,a{touch-action:manipulation}a{color:inherit;text-decoration-thickness:1px;text-underline-offset:4px}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--accent);outline-offset:4px}button{transition:background-color .15s,scale .08s}button:active{scale:.96}button:disabled{cursor:default;opacity:.55}button:disabled:active{scale:1}button:has(input){text-align:left}button.active{background:var(--ink);color:var(--paper);border-color:var(--ink)}[hidden]{display:none!important}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-weight:400}h1{font:clamp(42px,6vw,78px)/1.04 var(--serif);letter-spacing:-.045em;margin-bottom:24px}h2{font:34px/1.15 var(--serif);letter-spacing:-.025em}h3{font:23px/1.25 var(--serif)}p{margin-bottom:16px}.small,small{font-size:12px}.muted{color:var(--muted)}.eyebrow{font-size:11px;letter-spacing:.15em;text-transform:uppercase;font-weight:650}.mono{font-family:ui-monospace,SFMono-Regular,monospace;font-variant-numeric:tabular-nums}.topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 4vw;border-bottom:1px solid var(--line)}.brand{text-decoration:none;font:19px var(--serif);letter-spacing:-.03em}.topbar-right{display:flex;align-items:center;gap:22px}.topbar .small{color:var(--muted)}.topbar button{border:0;background:none;padding:8px;color:var(--muted);font-size:12px}.shell{max-width:1280px;margin:auto;padding:45px 4vw 70px}.intro{max-width:650px;margin-bottom:35px}.intro .eyebrow{color:var(--accent);margin-bottom:18px}.intro p{font-size:17px;color:var(--muted);max-width:580px}.intro h1{font-size:clamp(40px,5vw,64px)}.row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.between{justify-content:space-between}.stack>*+*{margin-top:20px}.btn{border:1px solid var(--line);background:var(--card);padding:11px 17px;border-radius:7px;min-height:44px;font-size:13px;font-weight:550}.btn:hover{background:var(--soft)}.btn.primary{background:var(--accent);color:var(--card);border-color:var(--accent)}.btn.primary:hover{filter:brightness(1.1)}.btn.link{background:transparent;border-color:transparent;padding-left:0;text-decoration:underline;text-underline-offset:5px}.pill{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:30px;padding:5px 10px;font-size:11px;gap:6px}.pill:before{content:'';width:5px;height:5px;background:var(--accent);border-radius:50%}.panel{padding:26px;border:1px solid var(--line);background:var(--card);border-radius:12px}.grid2{display:grid;grid-template-columns:1.4fr 1fr;gap:24px}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.rule{border:0;border-top:1px solid var(--line);margin:25px 0}.tabs{display:flex;gap:5px;flex-wrap:wrap}.tabs button{border:1px solid transparent;background:none;padding:10px 15px;border-radius:6px;min-height:44px;font-size:13px}.tabs button.active{background:var(--ink);color:var(--paper)}.tabs button:not(.active):hover{background:var(--soft)}.feedback{padding:17px 20px;border-left:3px solid var(--accent);background:var(--soft);margin-top:16px;font-size:14px;min-height:56px}.status{min-height:26px;margin:10px 0 0;font-size:13px;color:var(--accent)}.footer{padding:20px 4vw;border-top:1px solid var(--line);color:var(--muted);font-size:12px;display:flex;gap:25px;justify-content:space-between}.footer span{max-width:650px}.note{padding:13px 16px;background:var(--soft);font-size:12px;border-radius:6px}svg{max-width:100%;height:auto;display:block}svg text{font-family:var(--sans)}input[type=range]{width:100%;accent-color:var(--accent);cursor:pointer;min-height:32px}textarea{width:100%;resize:vertical;min-height:100px;padding:14px;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:7px}select{padding:10px;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:5px}label{display:block}kbd{padding:2px 6px;border:1px solid var(--line);border-radius:3px;font:11px var(--sans)}.skip{position:fixed;top:-100px;left:20px;background:var(--card);padding:12px;z-index:9}.skip:focus{top:12px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* The collection: six windows into possible learning environments. */
.gallery-hero{display:grid;grid-template-columns:1.3fr 1fr;gap:70px;padding:38px 0 48px;align-items:end}.gallery-hero p{max-width:420px;color:var(--muted);font-size:17px}.gallery-hero h1{margin:15px 0 0}.gallery-card{border:1px solid var(--line);border-radius:10px;overflow:hidden;text-decoration:none;background:var(--card);transition:translate .18s var(--ease),box-shadow .18s var(--ease)}.gallery-card:hover{translate:0 -4px;box-shadow:0 10px 20px #292c2810}.gallery-copy{padding:23px}.gallery-copy h2{font-size:27px;margin:9px 0 12px}.gallery-copy p{font-size:13px;color:var(--muted);min-height:62px}.gallery-copy .row{font-size:12px;justify-content:space-between}.preview{height:185px;overflow:hidden;position:relative;padding:28px;display:flex;align-items:center;justify-content:center}.preview.work{background:#26362e;color:#dce9c4}.preview.map{background:#dce4d6}.preview.read{background:#e8ddcf;color:#704535}.preview.talk{background:#e0e5f4;color:#31436c}.preview.trace{background:#e6e0ed;color:#675575}.preview.book{background:#e9c987;color:#42392d}.preview .big-symbol{font:95px var(--serif)}.preview .mini-card{padding:14px 18px;background:#fffdf5;border:1px solid #0002;border-radius:6px;font:16px var(--serif);box-shadow:4px 5px 0 #0001;rotate:-5deg}.preview .mini-card:nth-child(2){rotate:7deg;margin-left:-12px;margin-top:25px}.gallery-label{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:22px}.hero-mark{display:flex;gap:9px;font:25px var(--serif);align-items:center;margin-bottom:20px}.hero-mark span{width:45px;height:45px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%}
/* 01: instrument bench */
body[data-demo=workbench]{--paper:#eeeae0;--accent:#bc542f;--soft:#f3e2d5}.bench-screen{background:#23352e;color:#dae6d3;border-radius:9px;padding:24px;position:relative;overflow:hidden}.bench-screen .eyebrow{color:#a8bdad}.bench-screen svg{width:100%;height:250px}.bench-screen text{fill:#bccfc1;font-size:12px}.bench-screen .readouts{display:flex;justify-content:space-between;gap:20px;border-top:1px solid #53665b;padding-top:16px}.readouts strong{display:block;font:30px var(--serif);color:#e9edc9}.control{margin:22px 0}.control .row{justify-content:space-between}.control output{font:14px ui-monospace,monospace}.bench-story{padding-top:8px}.character{display:flex;align-items:start;gap:12px;margin-bottom:20px}.avatar{flex:0 0 36px;height:36px;border:1px solid currentColor;border-radius:50% 50% 40% 40%;display:grid;place-items:center;font:19px var(--serif);background:var(--soft)}.character p{margin:0}.character strong{display:block;font-size:12px;margin-bottom:4px}.answer-grid{display:grid;gap:8px}.answer-grid button{text-align:left}.trail{display:flex;gap:6px;align-items:center;margin-bottom:28px;font-size:11px}.trail span{padding:5px 10px;border-radius:4px}.trail span.on{background:var(--accent);color:#fff}.trace-svg{height:100px!important;margin:8px 0}.bench-caption{font-size:11px;color:#becdbd;padding-top:12px}.earned{border:1px solid var(--accent);border-radius:8px;padding:18px;rotate:-1deg;background:var(--card)}
/* 02: a landscape of capabilities */
body[data-demo=atlas]{--paper:#eef0e6;--card:#fbfcf5;--accent:#477052;--soft:#dce7d9}.atlas-grid{display:grid;grid-template-columns:1fr 350px;gap:28px}.map-land{position:relative;padding:28px 25px;background:radial-gradient(ellipse at 25% 40%,#e0e8c7 0%,transparent 50%),radial-gradient(ellipse at 70% 70%,#dae4cf 0%,transparent 50%),#e8eddf;border:1px solid #ccd8bf;border-radius:18px;min-height:600px;overflow:hidden}.map-land:before{content:'';position:absolute;inset:40px;border:1px dashed #a0b58d;border-radius:45% 60% 40% 50%;rotate:-15deg;pointer-events:none}.island-list{display:grid;grid-template-columns:1fr 1fr;gap:24px 40px;position:relative;margin:30px 10px}.island{border:1px solid #b9c9ac;background:#fafcf1;border-radius:12px;text-align:left;padding:18px 20px;box-shadow:0 6px 0 #cad6bd;min-height:112px;position:relative}.island:nth-child(even){translate:0 25px}.island.active{background:#355540;color:#fff;border-color:#355540}.island.learned:after{content:'✓';position:absolute;right:12px;top:10px;font-size:13px}.island .eyebrow{display:block;font-size:9px;opacity:.7;margin-bottom:10px}.island strong{font:21px var(--serif);display:block}.island small{font-size:11px;opacity:.75}.map-legend{position:relative;display:flex;gap:20px;flex-wrap:wrap;margin:35px 10px 0;font-size:11px}.ability{border:1px solid var(--line);background:var(--card);padding:15px;display:flex;gap:15px;border-radius:8px}.ability-icon{font:30px var(--serif);width:36px;flex-shrink:0}.map-detail{position:sticky;top:25px;align-self:start}.map-detail h2{margin:14px 0 20px}.links-list{border-top:1px solid var(--line);margin:20px 0;padding-top:15px}.links-list p{font-size:12px;margin:0 0 8px}.region-counter{font:50px var(--serif);line-height:1;margin-bottom:12px}.map-land.books{background:radial-gradient(ellipse at 25% 40%,#e3d5b2 0%,transparent 55%),radial-gradient(ellipse at 80% 70%,#e9ddd0 0%,transparent 55%),#eae7dc}
/* 03: text with room to think */
body[data-demo=reading]{--paper:#f3ece1;--card:#fcf7ef;--accent:#8e443d;--soft:#edddd2;--ink:#392f29;--line:#d9c9b9}.reading-shell{max-width:1350px;padding-top:30px}.reading-layout{display:grid;grid-template-columns:175px minmax(250px,1fr) 270px;gap:42px}.book-spine{border-right:1px solid var(--line);padding-right:20px}.book-spine button{display:block;width:100%;text-align:left;background:none;border:0;padding:11px 9px;color:var(--muted);min-height:44px;font-size:12px;border-radius:4px}.book-spine button.active{background:var(--soft);color:var(--accent)}.book-spine small{display:block;margin-bottom:20px;color:var(--muted)}.reader h1{font-size:54px;margin:15px 0 24px}.reader .lede{font:20px/1.7 var(--serif);color:var(--muted)}.passage{font:25px/1.9 var(--serif);margin:24px 0 30px}.word{display:inline;border:0;border-bottom:1px dotted var(--accent);padding:0 2px;background:transparent;color:var(--accent);font:inherit;line-height:inherit;border-radius:0}.word:hover,.word.selected{background:var(--soft)}.word:active{scale:1}.passage.clean .word{border-color:transparent;color:inherit}.margin{padding-top:70px}.margin h3{font-size:24px}.margin .note{background:none;border-left:2px solid var(--accent);border-radius:0;padding-left:17px;font-size:13px}.reader-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:9px 0;flex-wrap:wrap}.reader-toolbar button{font-size:11px;min-height:36px;padding:7px}.reading-nav{display:flex;justify-content:space-between;gap:15px;margin-top:32px}.notebook-lines{background:repeating-linear-gradient(transparent,transparent 29px,var(--line) 29px,var(--line) 30px);line-height:30px;min-height:120px}.layer-note{font:16px/1.6 var(--serif);border-top:1px solid var(--line);margin-top:28px;padding-top:20px}.annotation-label{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--accent);margin-bottom:12px}.reader-progress{display:flex;gap:5px;margin:0 0 25px}.reader-progress span{height:3px;background:var(--line);flex:1}.reader-progress span.on{background:var(--accent)}
/* 04: conversation as a place to work */
body[data-demo=dialogue]{--paper:#e9edf6;--card:#fbfcff;--ink:#263653;--muted:#62708b;--accent:#4a5c95;--soft:#dce3f4;--line:#c6cee1}.dialogue-grid{display:grid;grid-template-columns:1.4fr .8fr;gap:38px}.conversation{padding:0 20px 0 0}.bubble{display:grid;grid-template-columns:46px 1fr;gap:15px;margin-bottom:25px}.bubble-body{border:1px solid var(--line);background:var(--card);border-radius:2px 14px 14px 14px;padding:21px 25px;font:20px/1.55 var(--serif)}.bubble-body small{display:block;font:10px var(--sans);letter-spacing:.14em;margin-bottom:8px;color:var(--accent);text-transform:uppercase}.bubble.theo .bubble-body{background:#dce5ec}.bubble.you .bubble-body{background:#354a6b;color:#fff}.bubble.you small{color:#d2ddf0}.reply-options{margin:15px 0 25px 61px;display:grid;gap:8px}.reply-options button{padding:15px 18px;text-align:left;font-size:13px;background:transparent;border:1px solid #aab8d0;border-radius:8px}.reply-options button:hover{background:var(--card)}.question-pin{background:#fbf7e8;border:1px solid #dcd4b7;color:#62583f;border-radius:4px;rotate:1deg;padding:25px;margin-bottom:28px}.question-pin h3{font:27px var(--serif)}.argument-node{padding:13px 15px;border-left:2px solid var(--accent);background:var(--card);margin:10px 0;font-size:13px}.argument-node.maybe{border-style:dashed;background:none}.argument-arrow{font-size:11px;color:var(--muted);padding-left:15px}.dialogue-footer{margin-left:61px}
/* 05: an inspectable learner model */
body[data-demo=evidence]{--paper:#f0edf5;--card:#fcfaff;--ink:#393147;--muted:#73687f;--accent:#775b98;--soft:#e7dff0;--line:#d6ccdf}.evidence-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}.skill-tree{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:30px;display:grid;gap:14px}.skill-node{border:1px solid var(--line);border-radius:8px;padding:15px 19px;display:flex;gap:15px;align-items:center;transition:background-color .15s}.skill-node .dot{height:12px;width:12px;flex-shrink:0;border:1px solid var(--accent);border-radius:50%}.skill-node .name{font-size:14px}.skill-node .detail{font-size:11px;color:var(--muted)}.skill-node.used{border-color:var(--accent);background:var(--soft)}.skill-node.used .dot{background:var(--accent)}.skill-node small{margin-left:auto;font-size:10px;white-space:nowrap}.edge{font-size:10px;text-align:center;color:var(--muted);height:16px}.segmented{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:20px 0}.segmented button{font-size:11px;padding:10px 5px}.ledger{width:100%;border-collapse:collapse;font-size:12px}.ledger td,.ledger th{text-align:left;border-bottom:1px solid var(--line);padding:12px 8px;vertical-align:top}.ledger th{font-weight:500;color:var(--muted)}.ledger td:first-child{padding-left:0}.metric{font:60px/1 var(--serif);margin:15px 0}.credit-copy{min-height:100px}.evidence-note{font:24px/1.35 var(--serif)}
/* 06: a cabinet of useful things */
body[data-demo=notebook]{--paper:#f3e7cc;--card:#fff9e9;--ink:#433728;--muted:#7c6b52;--accent:#93632e;--soft:#ead7af;--line:#d9c397}.notebook-grid{display:grid;grid-template-columns:1.3fr .85fr;gap:35px}.collection{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-content:start}.specimen{padding:23px;background:var(--card);border:1px solid var(--line);border-radius:4px;min-height:205px;box-shadow:2px 4px 0 #b9975f22;position:relative}.specimen:nth-child(3n){rotate:-1deg}.specimen:nth-child(3n + 2){rotate:1deg}.specimen h3{font-size:25px;margin:13px 0}.specimen p{font-size:12px;color:var(--muted)}.specimen .symbol{font:36px var(--serif);display:block;color:var(--accent)}.specimen .stamp{position:absolute;right:15px;top:16px;font-size:9px;border:1px solid var(--line);padding:2px 6px;rotate:5deg}.specimen a{font-size:11px}.return-card{background:#3d4d3d;color:#f8f1d8;padding:30px;border-radius:10px;align-self:start}.return-card .eyebrow{color:#c8d2a8}.return-card h2{font-size:37px;margin:17px 0}.return-card .btn{background:#f5edda;color:#394536;border:0}.return-card .btn:hover{background:#fff}.return-card .feedback{background:#50644c;color:#fff;border-color:#c8d2a8}.return-card .muted{color:#c8cebb}.return-card select{background:#53624c;color:#fff;border-color:#80916d;width:100%}.return-card textarea{background:#455940;color:#fff;border-color:#8b9c7f}.return-card textarea::placeholder{color:#d3dccb}.return-card .status{color:#d3e6b7}.empty{grid-column:1/-1;text-align:center;padding:40px;border:1px dashed var(--line);color:var(--muted)}
@media(min-width:1500px){.shell{padding-top:60px}.gallery-hero{padding-top:55px;padding-bottom:65px}}
@media(max-width:1050px){.grid3{grid-template-columns:repeat(2,1fr)}.reading-layout{grid-template-columns:150px 1fr;gap:30px}.margin{grid-column:2;padding-top:0;display:grid;grid-template-columns:1fr 1fr;gap:25px}.margin .layer-note{margin-top:0}.atlas-grid{grid-template-columns:1fr 300px}.island-list{gap:20px}.island strong{font-size:18px}.map-land{padding:20px 10px}.dialogue-grid{gap:20px}}
@media(max-width:760px){.topbar{padding:16px 20px}.topbar-right{gap:10px}.topbar .small{display:none}.shell{padding:30px 20px 50px}.gallery-hero{display:block;padding:10px 0 30px}.gallery-hero h1{font-size:58px;margin-bottom:25px}.gallery-hero .hero-mark{display:none}.grid2,.atlas-grid,.dialogue-grid,.evidence-grid,.notebook-grid{grid-template-columns:1fr}.grid3{gap:14px}.gallery-copy{padding:18px}.gallery-copy h2{font-size:23px}.preview{height:150px;padding:20px}.gallery-copy p{min-height:85px}.map-detail{position:static}.map-land{min-height:unset;padding-bottom:40px}.reading-layout{display:block}.book-spine{border:0;display:flex;overflow:auto;gap:5px;padding:0 0 17px;margin-bottom:25px}.book-spine small{display:none}.book-spine button{width:auto;white-space:nowrap;flex-shrink:0;padding:10px}.reader h1{font-size:44px}.passage{font-size:24px}.margin{display:block;margin-top:35px}.margin .layer-note{margin-top:20px}.conversation{padding:0}.dialogue-grid>aside{border-top:1px solid var(--line);padding-top:25px}.footer{padding:20px;display:block}.footer a{display:inline-block;margin-top:12px}.bench-screen svg{height:210px}.intro{margin-bottom:25px}}
@media(max-width:430px){.grid3,.collection{grid-template-columns:1fr}.gallery-copy p{min-height:0}.preview{height:175px}.gallery-hero h1{font-size:49px}.panel{padding:20px}.island-list{gap:20px 13px;margin:20px 2px}.island{padding:16px 12px;min-height:113px}.island strong{font-size:18px}.map-land:before{inset:30px 15px}.bubble{grid-template-columns:32px 1fr;gap:10px}.avatar{flex-basis:30px;width:30px;height:32px;font-size:16px}.bubble-body{padding:17px;font-size:18px}.reply-options,.dialogue-footer{margin-left:42px}.segmented{grid-template-columns:1fr}.topbar-right a{font-size:11px}.bench-screen{padding:18px}.readouts strong{font-size:25px}.ledger td,.ledger th{padding:10px 4px}.skill-tree{padding:18px}.skill-node{padding:12px;gap:10px}.skill-node small{white-space:normal}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}button:active{scale:1}.gallery-card:hover{translate:none}}
/* Keep selected controls legible under the pointer. */
.btn.active,.btn.active:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.grid2>*,.evidence-grid>*,.notebook-grid>*,.dialogue-grid>*{min-width:0}
@media(max-width:430px){.readouts{flex-wrap:wrap}.readouts>div:last-child{flex-basis:100%}.reader-toolbar button{min-height:44px}.topbar button{min-height:44px}}