/* Paper edition: the original site, with Papercraft's warmth.
   Loaded after the original stylesheet, which it only re-tunes. Mood, not props:
   confident flat colour, crisp white keylines, soft solid offset shadows, friendly rounded headings,
   springy motion. Reading text keeps the original serif. Original JS runs unchanged. */
:root{
  --tomato:#e04a3a;--tomato-ink:#b8321f;--sun:#f6bf2c;--sun-ink:#8a5300;--grass:#46a652;--grass-ink:#2a7a36;
  --sky:#4a95dd;--sky-ink:#2a6db3;--plum:#7b3f90;--butter:#fdeeb8;
  --ink:#2b2230;--muted:#5f5560;--stage:#2d2536;--stage-2:#3a3044;
  --paper:#f6f1e4;--card:#fffdf8;--line:#e4dccb;--soft:#f6ecd9;--accent:var(--tomato-ink);
  --shadow:rgba(43,34,48,.10);--shadow-2:rgba(43,34,48,.16);--focus:var(--sky-ink);
  --round:ui-rounded,"SF Pro Rounded","Arial Rounded MT Bold","Nunito","Varela Round",system-ui,sans-serif;
  --sans:"Avenir Next",Avenir,"Segoe UI","Helvetica Neue",ui-sans-serif,system-ui,sans-serif;
  --spring:cubic-bezier(.34,1.56,.64,1);--ease:cubic-bezier(.2,.8,.2,1);
}
body{background:var(--paper);color:var(--ink);font-family:var(--sans)}
::selection{background:#f6bf2c66}

/* ---------- Type: rounded headings, serif for reading ---------- */
h1,h2,h3,.brand{font-family:var(--round)!important;font-weight:800;letter-spacing:-.02em}
h1{letter-spacing:-.03em;line-height:1.02}
h1 em,h2 em{font-style:normal;color:var(--plum);position:relative;display:inline-block;z-index:0}
h1 em::after{content:"";position:absolute;left:.03em;right:.12em;bottom:.04em;height:.18em;border-radius:99px;background:var(--sun);z-index:-1;rotate:-1.2deg}
.eyebrow{font-family:var(--round);font-weight:800;letter-spacing:.14em}
.intro .eyebrow{color:var(--accent)}
.intro p{color:var(--muted)}

/* ---------- Focus: an unmistakable coloured keyline ---------- */
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--focus)!important;outline-offset:3px;border-radius:10px}

/* ---------- Chrome ---------- */
.topbar{border-bottom:0;background:transparent}
.brand{font-size:21px;display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.brand span{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:10px;background:var(--tomato);color:#fff;font-size:17px;box-shadow:0 0 0 3px #fff,3px 4px 0 3px var(--shadow);rotate:-6deg;transition:rotate .5s var(--spring)}
.brand:hover span{rotate:174deg}
.topbar .small,.topbar-right a{color:var(--muted)}
.topbar-right a{text-decoration:none;font-weight:600;border-bottom:2px solid transparent;padding:4px 0;transition:border-color .2s}
.topbar-right a:hover{border-color:var(--sun)}
.topbar .edition,.paper-tag{display:inline-block;font:800 10px/1 var(--round)!important;letter-spacing:.12em;text-transform:uppercase;color:var(--tomato-ink)!important;background:#fff;padding:6px 9px;border-radius:99px;box-shadow:2px 3px 0 var(--shadow);rotate:-2deg}
.topbar button{font-family:var(--round);font-weight:700}
.footer{border-top:0;color:var(--muted)}

/* ---------- Surfaces: clean white, clear edge, solid lifted shadow ---------- */
.panel,.skill-tree,.ability,.specimen,.bubble-body,.argument-node,.question-pin{border-color:var(--line)}
.panel,.skill-tree{background:var(--card);border-radius:18px;box-shadow:4px 5px 0 var(--shadow)}
.note{background:var(--soft);border-radius:12px}
.feedback{background:#fff;border:0;border-left:0;border-radius:14px;box-shadow:inset 0 0 0 2px var(--accent),3px 4px 0 var(--shadow);padding:15px 18px}
.rule{border-top-color:var(--line)}
textarea,select{border-radius:12px;border-color:var(--line);background:#fff}
textarea:focus{border-color:var(--focus)}
kbd{border-radius:7px;border:0;background:#fff;box-shadow:0 2px 0 var(--shadow-2);font:700 11px/1 var(--round)}
.pill{border:0;background:#fff;box-shadow:2px 3px 0 var(--shadow);font-family:var(--round);font-weight:700}
.pill:before{background:var(--accent)}

/* ---------- Buttons: white chips that spring ---------- */
.btn,.tabs button,.reply-options button,.segmented button,.answer-grid button{font-family:var(--round);font-weight:700;letter-spacing:.005em}
.btn{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:3px 4px 0 var(--shadow);transition:translate .35s var(--spring),box-shadow .35s var(--spring),background-color .2s,scale .08s}
.btn:hover{background:#fff;translate:-1px -2px;box-shadow:5px 7px 0 var(--shadow)}
.btn:active{translate:1px 1px;box-shadow:1px 2px 0 var(--shadow)}
.btn.primary{background:var(--accent);border-color:transparent;color:#fff;box-shadow:3px 4px 0 var(--shadow-2)}
.btn.primary:hover{filter:none;background:var(--accent);box-shadow:5px 7px 0 var(--shadow-2)}
.btn.link{box-shadow:none;border-color:transparent;background:transparent}
.btn.link:hover{translate:none;box-shadow:none;text-decoration-color:var(--sun);text-decoration-thickness:3px}
.btn.active,.btn.active:hover,.btn.selected,button.active{background:var(--ink)!important;color:#fff!important;border-color:var(--ink)!important}
button:disabled,.btn:disabled{box-shadow:none;translate:none}
.tabs{gap:8px}
.tabs button{border-radius:12px;transition:translate .35s var(--spring),background-color .2s}
.tabs button:not(.active):hover{background:#fff;translate:0 -2px}
.tabs button.active{box-shadow:3px 4px 0 var(--shadow-2)}
input[type=range]{accent-color:var(--accent)}
.status{color:var(--accent);font-weight:600}

/* ---------- Home gallery ---------- */
body[data-demo=gallery]{--accent:var(--tomato-ink)}
body[data-demo=gallery] .shell{padding-top:26px}
.gallery-hero{padding:14px 0 30px;gap:60px}
.gallery-hero h1{font-size:clamp(46px,6vw,82px)}
.gallery-hero p{font:18px/1.6 Georgia,"Iowan Old Style",serif;color:var(--muted)}
.gallery-hero p.small{font:13px/1.55 var(--sans)}
.hero-mark span{border:0;background:#fff;box-shadow:0 0 0 3px #fff,3px 4px 0 3px var(--shadow);font-family:var(--round);font-weight:800;transition:rotate .5s var(--spring),translate .5s var(--spring)}
.hero-mark span:nth-child(1){background:var(--tomato);color:#fff;rotate:-6deg}
.hero-mark span:nth-child(2){background:var(--sun);color:var(--ink);rotate:4deg}
.hero-mark span:nth-child(3){background:var(--sky);color:#fff;rotate:-3deg}
.hero-mark:hover span{rotate:0deg;translate:0 -3px}
.gallery-label{border-bottom:2px dotted var(--line)}
.gallery-label .eyebrow{color:var(--ink)}
.grid3{gap:22px}
.gallery-card{border:1px solid var(--line);border-radius:20px;background:var(--card);box-shadow:4px 5px 0 var(--shadow);transition:translate .45s var(--spring),box-shadow .45s var(--spring),rotate .45s var(--spring)}
.gallery-card:hover,.gallery-card:focus-visible{translate:-2px -6px;box-shadow:8px 11px 0 var(--shadow-2)}
.gallery-card:focus-visible{outline-offset:4px;border-radius:20px}
.preview{margin:9px 9px 0;border-radius:14px;box-shadow:inset 0 0 0 3px rgba(255,255,255,.55);height:170px}
.preview.work{background:var(--sun);color:var(--ink)}
.preview.map{background:var(--grass)}
.preview.read{background:var(--plum);color:#fff}
.preview.talk{background:var(--sky);color:var(--ink)}
.preview.trace{background:var(--tomato);color:#fff}
.preview.book{background:var(--butter);color:var(--ink)}
.preview svg,.preview .mini-card,.preview .big-symbol{transition:translate .5s var(--spring),rotate .5s var(--spring),scale .5s var(--spring)}
.gallery-card:hover .preview svg,.gallery-card:focus-visible .preview svg{scale:1.05;translate:0 -3px}
.gallery-card:hover .mini-card,.gallery-card:focus-visible .mini-card{rotate:0deg;translate:0 -4px}
.gallery-card:hover .big-symbol,.gallery-card:focus-visible .big-symbol{translate:0 -4px;rotate:-3deg}
.preview .mini-card{background:#fff;border:0;border-radius:12px;box-shadow:0 0 0 3px rgba(255,255,255,.6),4px 5px 0 rgba(43,34,48,.18);font:700 15px var(--round);color:var(--ink)}
.preview .big-symbol{font-family:Georgia,serif;font-weight:700}
/* the six preview drawings, re-tinted */
.preview.work [stroke="#a0b39b"]{stroke:rgba(43,34,48,.45);stroke-width:1.5}
.preview.work [stroke="#e4bc76"]{stroke:var(--tomato-ink);stroke-width:4;stroke-linecap:round}
.preview.work [stroke="#819e88"]{stroke:rgba(43,34,48,.55)}
.preview.trace [stroke="#9a88aa"]{stroke:#fff;stroke-width:2.5}
.preview.trace [fill="#f9f4ff"]{fill:#fff}
.preview.trace [stroke="#796088"],.preview.trace [fill="#f9f4ff"][stroke="#796088"]{stroke:var(--ink);stroke-width:2}
.preview.trace circle[fill="#796088"]{fill:var(--ink)}
.gallery-copy{padding:18px 22px 20px}
.gallery-copy h2{font-size:24px;margin:8px 0 8px}
.gallery-copy .eyebrow{font-size:10px}
.gallery-copy p{color:var(--muted);min-height:0}
.gallery-copy .row{font-family:var(--round);font-weight:700}
.gallery-copy .row span:last-child{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff;transition:translate .4s var(--spring)}
.gallery-card:hover .gallery-copy .row span:last-child,.gallery-card:focus-visible .gallery-copy .row span:last-child{translate:4px -2px}
/* The home's announcement panels (inline-styled in the shell) */
body[data-demo=gallery] aside.panel,body[data-demo=gallery] section.panel{border-radius:20px}
body[data-demo=gallery] section.panel a[style]{border-radius:14px!important;box-shadow:3px 4px 0 var(--shadow);background:#fff!important;transition:translate .35s var(--spring),box-shadow .35s var(--spring)}
body[data-demo=gallery] section.panel a[style]:hover{translate:-1px -3px;box-shadow:6px 8px 0 var(--shadow)}

/* ---------- 01 Workbench ---------- */
body[data-demo=workbench]{--paper:#f6f1e4;--accent:var(--tomato-ink);--soft:#fde6df}
.bench-screen{background:var(--stage);color:#f3ecf6;border-radius:18px;box-shadow:0 0 0 4px #fff,5px 7px 0 4px var(--shadow)}
.bench-screen .eyebrow{color:#e9d8f0}
.bench-screen text{fill:#e6dcea}
.bench-screen .readouts{border-top-color:rgba(255,255,255,.18)}
.readouts strong{font-family:var(--round);font-weight:800;color:#fff}
.bench-caption{color:#d9cfe0}
.bench-screen [stroke="#8ba88f"]{stroke:rgba(255,255,255,.4)}
.bench-screen [fill="#d8dfb8"],.bench-screen [fill="#d7dfb7"]{fill:var(--sun)}
.bench-screen [stroke="#d8dfb8"]{stroke:var(--sun)}
.bench-screen [fill="#9db695"],.bench-screen [fill="#9bba93"]{fill:#fff}
.bench-screen [fill="#23352e"]{fill:var(--stage)}
.bench-screen [stroke="#eab277"]{stroke:#ff7a64}
.bench-screen [stroke="#a7bda0"]{stroke:#8cc4f5}
.bench-screen [stroke="#e1c893"]{stroke:var(--sun)}
.bench-screen [fill="#eac68b"]{fill:var(--sun)}
.bench-screen [stroke="#d0de9c"]{stroke:#8fd89c}
[stroke="#718876"]{stroke:rgba(43,34,48,.35)}
[stroke="#e8b174"]{stroke:var(--tomato);stroke-width:3}
[fill="#f0e5bd"]{fill:var(--ink)}
.bench-screen [stroke="#718876"]{stroke:rgba(255,255,255,.35)}
.bench-screen [stroke="#e8b174"]{stroke:var(--sun)}
.bench-screen [fill="#f0e5bd"]{fill:#fff}
.avatar{background:var(--sun);border:0;color:var(--ink);font-family:var(--round);font-weight:800;box-shadow:0 0 0 3px #fff,2px 3px 0 3px var(--shadow)}
.character p{font:17px/1.5 Georgia,"Iowan Old Style",serif}
.character strong{font-family:var(--round)}
.trail span{border-radius:99px;font-family:var(--round);font-weight:700}
.trail span.on{background:var(--accent);color:#fff}
.earned{border:0;border-radius:16px;background:var(--butter);box-shadow:0 0 0 3px #fff,4px 5px 0 3px var(--shadow);rotate:-1.2deg}

/* ---------- 02 Atlas ---------- */
body[data-demo=atlas]{--paper:#f6f1e4;--card:#fffdf8;--accent:var(--grass-ink);--soft:#e3f2df}
.map-land{background:#e9f4e4;border:0;border-radius:24px;box-shadow:inset 0 0 0 4px #fff,5px 6px 0 var(--shadow)}
.map-land.books{background:#f4e9f6}
.map-land:before{border:2px dashed rgba(42,122,54,.28)}
.map-land.books:before{border-color:rgba(123,63,144,.28)}
.island{background:#fff;border:0;border-radius:18px;box-shadow:0 0 0 1px var(--line),4px 6px 0 var(--shadow);transition:translate .4s var(--spring),box-shadow .4s var(--spring),background-color .2s}
.island:hover{translate:-1px -3px;box-shadow:0 0 0 1px var(--line),6px 9px 0 var(--shadow)}
.island:nth-child(even){translate:0 22px}
.island:nth-child(even):hover{translate:-1px 19px}
.island.active{background:var(--grass-ink);color:#fff;box-shadow:0 0 0 3px #fff,5px 7px 0 3px var(--shadow-2)}
.map-land.books .island.active{background:var(--plum)}
.island strong{font-family:var(--round);font-weight:800;font-size:19px}
.island.learned:after{content:'✓';display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--sun);color:var(--ink);font-weight:800}
.ability{border:0;border-radius:16px;box-shadow:0 0 0 1px var(--line),3px 4px 0 var(--shadow)}
.ability-icon{font-family:var(--round);font-weight:800;color:var(--accent)}
.region-counter{font-family:var(--round);font-weight:800;color:var(--accent)}

/* ---------- 03 Reading room ---------- */
body[data-demo=reading]{--paper:#f6f1e4;--card:#fffdf8;--accent:var(--plum);--soft:#f1e3f5;--ink:#2b2230;--line:#e4dccb}
.book-spine{border-right:2px dotted var(--line)}
.book-spine button{font-family:var(--round);font-weight:700;border-radius:12px;transition:translate .35s var(--spring),background-color .2s}
.book-spine button:hover{background:#fff;translate:3px 0}
.book-spine button.active{background:var(--plum);color:#fff;box-shadow:3px 4px 0 var(--shadow-2)}
.reader h1{font-size:50px}
.word{color:var(--plum);border-bottom:2px dotted var(--plum)}
.word:hover,.word.selected{background:var(--butter);border-radius:4px}
.margin .note{border-left:0;background:#fff;border-radius:14px;box-shadow:inset 0 0 0 2px var(--soft),3px 4px 0 var(--shadow);padding:14px 16px}
.reader-toolbar{border-top:2px dotted var(--line);border-bottom:2px dotted var(--line)}
.reader-toolbar button{font-family:var(--round);font-weight:700}
.reader-progress span{height:6px;border-radius:99px}
.reader-progress span.on{background:var(--plum)}
.annotation-label{font-family:var(--round);font-weight:800;color:var(--plum)}

/* ---------- 04 Dialogue ---------- */
body[data-demo=dialogue]{--paper:#f6f1e4;--card:#fffdf8;--ink:#2b2230;--muted:#5f5560;--accent:var(--sky-ink);--soft:#e1edf9;--line:#e4dccb}
.bubble-body{background:#fff;border:0;border-radius:4px 20px 20px 20px;box-shadow:0 0 0 1px var(--line),4px 5px 0 var(--shadow)}
.bubble-body small{font-family:var(--round);font-weight:800;color:var(--sky-ink)}
.bubble.theo .bubble-body{background:#e6f1fb}
.bubble.you .bubble-body{background:var(--sky-ink);color:#fff}
.bubble.you small{color:#e4efff}
.reply-options button{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:3px 4px 0 var(--shadow);transition:translate .35s var(--spring),box-shadow .35s var(--spring)}
.reply-options button:hover{background:#fff;translate:3px -2px;box-shadow:5px 7px 0 var(--shadow)}
.question-pin{background:var(--butter);border:0;color:var(--ink);border-radius:18px;box-shadow:0 0 0 3px #fff,5px 6px 0 3px var(--shadow);rotate:-1deg}
.question-pin h3{font-family:var(--round)!important}
.argument-node{background:#fff;border-left:0;border-radius:12px;box-shadow:inset 3px 0 0 var(--sky),2px 3px 0 var(--shadow)}
.argument-node.maybe{background:transparent;box-shadow:inset 0 0 0 2px var(--soft)}

/* ---------- 05 Evidence ---------- */
body[data-demo=evidence]{--paper:#f6f1e4;--card:#fffdf8;--ink:#2b2230;--muted:#5f5560;--accent:var(--tomato-ink);--soft:#fde6df;--line:#e4dccb}
.skill-node{border:0;border-radius:14px;background:#fff;box-shadow:0 0 0 1px var(--line),3px 4px 0 var(--shadow);transition:background-color .25s,translate .35s var(--spring)}
.skill-node.used{background:#fde6df;box-shadow:0 0 0 2px var(--tomato),4px 5px 0 var(--shadow);translate:0 -2px}
.skill-node .dot{border:2px solid var(--tomato-ink);width:14px;height:14px}
.skill-node.used .dot{background:var(--tomato)}
.skill-node .name{font-family:var(--round);font-weight:700}
.metric{font-family:var(--round);font-weight:800;color:var(--tomato-ink)}
.ledger th{font-family:var(--round);font-weight:800}

/* ---------- 06 Notebook ---------- */
body[data-demo=notebook]{--paper:#f6f1e4;--card:#fffdf8;--ink:#2b2230;--muted:#5f5560;--accent:var(--sun-ink);--soft:#fdf0c8;--line:#e4dccb}
.specimen{border:0;border-radius:18px;background:#fff;box-shadow:0 0 0 1px var(--line),4px 5px 0 var(--shadow);transition:translate .4s var(--spring),rotate .4s var(--spring),box-shadow .4s var(--spring)}
.specimen:hover{rotate:0deg;translate:-1px -4px;box-shadow:0 0 0 1px var(--line),7px 9px 0 var(--shadow)}
.specimen .symbol{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:14px;background:var(--sun);color:var(--ink);font:800 26px var(--round);box-shadow:0 0 0 3px #fff,3px 4px 0 3px var(--shadow);rotate:-4deg}
.specimen .stamp{border:0;background:var(--sky-ink);color:#fff;border-radius:99px;padding:4px 8px;font-family:var(--round);font-weight:800}
.return-card{background:var(--stage);color:#fbf4ff;border-radius:20px;box-shadow:0 0 0 4px #fff,6px 8px 0 4px var(--shadow)}
.return-card .eyebrow{color:var(--sun)}
.return-card .btn{background:var(--sun);color:var(--ink)}
.return-card .btn:hover{background:var(--sun)}
.return-card .feedback{background:var(--stage-2);color:#fff;box-shadow:inset 0 0 0 2px var(--sun)}
.return-card .muted{color:#d9cfe0}
.return-card select,.return-card textarea{background:var(--stage-2);border-color:#6a5c77;color:#fff}
.return-card textarea::placeholder{color:#cfc3d8}
.return-card .status{color:var(--sun)}
.empty{border:2px dashed var(--line);border-radius:18px}

@media(prefers-reduced-motion:reduce){.brand span,.hero-mark span,.gallery-card,.btn,.island,.specimen{transition:none!important}}

/* ---------- Fit: the rounded face is wider than Georgia, so step headings down and tighten the home ---------- */
.intro h1{font-size:clamp(34px,4vw,54px);margin-bottom:14px}
.intro{margin-bottom:26px}
.shell{padding-top:30px}
.hero-mark span{font-size:22px}
body[data-demo=gallery] aside.panel,body[data-demo=gallery] section.panel{margin-top:16px!important;padding:16px 22px!important}
body[data-demo=gallery] aside.panel h3,body[data-demo=gallery] section.panel h3{font-size:20px;margin:4px 0!important}
body[data-demo=gallery] section.panel>div[style*="grid"]{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:10px!important}
body[data-demo=gallery] section.panel>div.row{margin-bottom:10px!important}
body[data-demo=gallery] section.panel a[style]{padding:11px 13px!important}
body[data-demo=gallery] section.panel a[style] b{font-size:14px!important}
.preview{height:140px}
@media(max-width:1050px){body[data-demo=gallery] section.panel>div[style*="grid"]{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:560px){body[data-demo=gallery] section.panel>div[style*="grid"]{grid-template-columns:1fr!important}}

/* ---------- Page-coloured active states win over the generic ink "active" ---------- */
.island.active{background:var(--grass-ink)!important;color:#fff!important;border-color:transparent!important}
.map-land.books .island.active{background:var(--plum)!important}
.book-spine button.active{background:var(--plum)!important;color:#fff!important;border-color:transparent!important}
.bubble.theo .avatar{background:var(--sky);color:#fff}
.bubble.you .avatar{background:var(--tomato);color:#fff}
.return-card .btn{background:#fff;color:var(--ink)}
.return-card .btn:hover{background:#fff}
.return-card .btn.primary,.return-card .btn.selected{background:var(--sun)!important;color:var(--ink)!important;border-color:transparent!important}
/* AA: small labels on the coloured active stop at full strength */
.island.active .eyebrow,.island.active small{opacity:1;color:#fff}
/* Narrow screens: the tag steps aside like the original's other small header items */
.brand{white-space:nowrap}
@media(max-width:760px){.topbar .edition{display:none}}