:root {
  --ink: #17211e;
  --muted: #58645f;
  --paper: #fbfaf6;
  --surface: #ffffff;
  --surface-alt: #f2eee5;
  --green: #173f35;
  --green-2: #245f4f;
  --gold: #b86724;
  --gold-soft: #f5e3d3;
  --border: #d9d8d0;
  --shadow: 0 14px 34px rgba(26, 38, 33, .10);
  --radius: 1rem;
  --wrap: 1180px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.6; }
img { max-width: 100%; height: auto; }
a { color: var(--green-2); text-underline-offset: .18em; }
a:hover { color: var(--gold); }
button, input, select { font: inherit; }
:focus-visible { outline: 3px solid #ffbf47; outline-offset: 3px; }
.wrap { width: min(calc(100% - 2rem), var(--wrap)); margin-inline: auto; }
.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; }
.skip-link { position: fixed; z-index: 1000; top: .5rem; left: .5rem; padding: .7rem 1rem; background: #fff; color: #000; transform: translateY(-180%); }
.skip-link:focus { transform: translateY(0); }
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(251,250,246,.96); border-bottom: 1px solid var(--border); backdrop-filter: blur(12px); }
.header-inner { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.brand { display: inline-flex; align-items: center; gap: .75rem; color: var(--ink); text-decoration: none; }
.brand img { width: 52px; border-radius: 50%; }
.brand span { display: grid; line-height: 1.15; }
.brand strong { font-size: 1.08rem; }
.brand small { margin-top: .2rem; color: var(--muted); font-size: .78rem; }
.site-nav ul, .site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-nav ul { display: flex; align-items: center; gap: .25rem; }
.site-nav a { display: block; padding: .65rem .85rem; border-radius: 999px; color: var(--ink); text-decoration: none; font-weight: 650; }
.site-nav a:hover, .site-nav a[aria-current="page"] { background: var(--surface-alt); color: var(--green); }
.nav-toggle { display: none; border: 1px solid var(--border); border-radius: .65rem; background: var(--surface); padding: .55rem .8rem; }
.hero { padding: clamp(3rem, 7vw, 6rem) 0; background: radial-gradient(circle at 90% 20%, #eadcc8 0, transparent 33%), linear-gradient(135deg, #f7f1e6, #fbfaf6 55%); border-bottom: 1px solid var(--border); }
.hero-grid { display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; gap: clamp(2rem, 5vw, 5rem); }
.eyebrow { margin: 0 0 .75rem; color: var(--gold); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: .8rem; }
h1, h2, h3 { line-height: 1.15; text-wrap: balance; }
h1 { margin: 0 0 1rem; font-size: clamp(2.35rem, 6vw, 4.8rem); letter-spacing: -.045em; }
h2 { font-size: clamp(1.55rem, 3vw, 2.35rem); letter-spacing: -.025em; }
.lead { max-width: 65ch; font-size: clamp(1.05rem, 2vw, 1.25rem); color: var(--muted); }
.button-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.5rem; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 46px; padding: .72rem 1.05rem; border: 2px solid var(--green); border-radius: .75rem; background: var(--green); color: #fff; font-weight: 750; text-decoration: none; cursor: pointer; }
.button:hover { background: var(--green-2); color: #fff; }
.button-secondary { background: transparent; color: var(--green); }
.button-secondary:hover { background: #fff; color: var(--green); }
.hero-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; transform: rotate(1deg); }
.hero-gallery img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 1.1rem; border: 7px solid #fff; box-shadow: var(--shadow); }
.hero-gallery img:nth-child(2), .hero-gallery img:nth-child(3) { transform: translateY(1rem); }
.section { padding: clamp(2.8rem, 6vw, 5.5rem) 0; }
.section-alt { background: var(--surface-alt); border-block: 1px solid var(--border); }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.section-heading p { max-width: 58ch; color: var(--muted); }
.stat-grid, .category-grid, .card-grid { display: grid; gap: 1rem; }
.stat-grid { grid-template-columns: repeat(3, 1fr); margin-top: 2rem; }
.stat { padding: 1.1rem; background: rgba(255,255,255,.75); border: 1px solid var(--border); border-radius: .9rem; }
.stat strong { display: block; font-size: 1.65rem; color: var(--green); }
.category-grid { grid-template-columns: repeat(4, 1fr); }
.category-card { min-height: 180px; display: flex; flex-direction: column; justify-content: end; padding: 1.25rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: 0 8px 24px rgba(26,38,33,.06); text-decoration: none; color: var(--ink); }
.category-card span { color: var(--gold); font-weight: 800; }
.category-card h3 { margin: .35rem 0; font-size: 1.35rem; }
.category-card p { margin: 0; color: var(--muted); }
.card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card { min-width: 0; overflow: hidden; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(26,38,33,.06); }
.card[hidden] { display: none !important; }
.card-image { display: grid; place-items: center; min-height: 190px; padding: .8rem; background: linear-gradient(145deg, #f6f0e6, #fff); }
.card-image img { width: 100%; height: 190px; object-fit: contain; }
.card-body { display: flex; flex: 1; flex-direction: column; padding: 1rem; }
.card h2, .card h3 { margin: .75rem 0 .45rem; font-size: 1.18rem; }
.card h2 a, .card h3 a { color: var(--ink); text-decoration: none; }
.card-meta { margin: 0 0 .8rem; color: var(--muted); }
.card-actions, .text-link { margin-top: auto; }
.text-link { display: inline-flex; gap: .3rem; font-weight: 800; text-decoration: none; }
.badge-row { display: flex; flex-wrap: wrap; gap: .4rem; }
.badge { display: inline-flex; align-items: center; width: fit-content; padding: .2rem .55rem; border-radius: 999px; background: var(--surface-alt); color: var(--green); font-size: .74rem; font-weight: 800; }
.badge-good { background: #def1e7; color: #15593e; }
.badge-warn { background: #fff0ca; color: #74520a; }
.badge-muted { background: #ececec; color: #565656; }
.page-hero { padding: 3.2rem 0 2.4rem; background: linear-gradient(135deg, #f3ebdd, #fbfaf6); border-bottom: 1px solid var(--border); }
.page-hero h1 { max-width: 18ch; font-size: clamp(2.2rem, 5vw, 4rem); }
.breadcrumbs { margin-bottom: 1rem; font-size: .9rem; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: .45rem; list-style: none; margin: 0; padding: 0; }
.breadcrumbs li:not(:last-child)::after { content: "/"; margin-left: .45rem; color: #8b928e; }
.search-panel { margin: -1.3rem auto 2rem; position: relative; z-index: 2; padding: 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.filter-grid { display: grid; grid-template-columns: minmax(220px, 2fr) repeat(3, minmax(150px, 1fr)) auto; gap: .7rem; align-items: end; }
.filter-grid-compact { grid-template-columns: minmax(260px, 2fr) minmax(150px, 1fr) auto; }
.field { display: grid; gap: .3rem; }
.field label { font-size: .82rem; font-weight: 800; }
.field input, .field select { width: 100%; min-height: 44px; padding: .65rem .7rem; border: 1px solid #a9ada9; border-radius: .55rem; background: #fff; color: var(--ink); }
.results-summary { margin: .85rem 0 0; color: var(--muted); }
.archive-notice, .callout { padding: 1rem 1.1rem; border-left: 5px solid var(--gold); border-radius: .55rem; background: var(--gold-soft); }
.compact-details { margin: .75rem 0 1rem; display: grid; gap: .35rem; }
.compact-details div { display: flex; justify-content: space-between; gap: .75rem; border-bottom: 1px dotted var(--border); }
.compact-details dt { color: var(--muted); }
.compact-details dd { margin: 0; text-align: right; font-weight: 700; }
.prose { max-width: 76ch; }
.prose h2 { margin-top: 2rem; }
.prose li + li { margin-top: .35rem; }
.solution-layout { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 2rem; align-items: start; }
.solution-main { min-width: 0; }
.puzzle-summary { position: sticky; top: 96px; padding: 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.puzzle-summary img { width: 100%; max-height: 260px; object-fit: contain; background: var(--surface-alt); border-radius: .7rem; }
.solution-details { margin-top: 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: clip; }
.solution-details summary { padding: 1rem 1.15rem; cursor: pointer; font-weight: 850; color: var(--green); }
.solution-content { padding: 0 1rem 1rem; }
.solution-image { display: block; width: min(100%, 900px); margin-inline: auto; border: 1px solid var(--border); border-radius: .6rem; background: #fff; }
.video-placeholder { min-height: 340px; display: grid; place-items: center; padding: 2rem; text-align: center; background: #17211e; color: #fff; border-radius: .8rem; }
.video-placeholder p { max-width: 45ch; }
.video-frame { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: .8rem; }
.utility-row { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1rem; }
.no-results { padding: 2rem; text-align: center; border: 1px dashed var(--border); border-radius: var(--radius); background: var(--surface); }
.site-footer { margin-top: 3rem; padding-top: 3rem; background: #102d26; color: #dce7e2; }
.site-footer a { color: #fff; }
.site-footer h2 { font-size: 1rem; color: #fff; }
.site-footer p { max-width: 48ch; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2rem; }
.brand-footer { color: #fff; }
.brand-footer small { color: #b7cac2; }
.footer-bottom { margin-top: 2rem; padding: 1rem 0; border-top: 1px solid rgba(255,255,255,.18); font-size: .9rem; }
@media (max-width: 980px) {
  .card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .category-grid { grid-template-columns: repeat(2, 1fr); }
  .filter-grid { grid-template-columns: 1fr 1fr; }
  .filter-grid .field:first-child { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .nav-toggle { display: inline-flex; }
  .site-nav { position: absolute; inset: 76px 1rem auto; display: none; padding: .7rem; background: var(--surface); border: 1px solid var(--border); border-radius: .8rem; box-shadow: var(--shadow); }
  .site-nav[data-open="true"] { display: block; }
  .site-nav ul { display: grid; }
  .hero-grid, .solution-layout, .footer-grid { grid-template-columns: 1fr; }
  .hero-gallery { max-width: 520px; }
  .puzzle-summary { position: static; order: -1; }
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .wrap { width: min(calc(100% - 1.2rem), var(--wrap)); }
  .brand small { display: none; }
  .category-grid, .card-grid, .filter-grid { grid-template-columns: 1fr; }
  .filter-grid .field:first-child { grid-column: auto; }
  .hero { padding-top: 2.6rem; }
  .hero-gallery { gap: .45rem; }
  .card-image img { height: 220px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
@media print {
  .site-header, .site-footer, .button-row, .utility-row, .search-panel, .related-section { display: none !important; }
  body { background: #fff; color: #000; }
  .section, .page-hero { padding: 1rem 0; }
  .solution-layout { display: block; }
  .puzzle-summary { position: static; border: 0; }
  details > *:not(summary) { display: block !important; }
  details summary { display: none; }
  a { color: #000; text-decoration: none; }
}
/* Enhanced archive features */
.site-nav ul { gap: .15rem; }
.aliases { color: var(--muted); font-size: .96rem; }
.hint-detail { margin: .7rem 0; border: 1px solid var(--border); border-radius: .8rem; background: var(--surface); overflow: clip; }
.hint-detail summary { cursor: pointer; padding: .85rem 1rem; font-weight: 800; color: var(--green); }
.detail-body { padding: 0 1rem 1rem; }
.solution-steps { counter-reset: step; list-style: none; padding: 0; display: grid; gap: .75rem; }
.solution-steps li { counter-increment: step; position: relative; padding: .9rem 1rem .9rem 3.4rem; background: var(--surface); border: 1px solid var(--border); border-radius: .8rem; }
.solution-steps li::before { content: counter(step); position: absolute; left: .9rem; top: .8rem; width: 1.8rem; height: 1.8rem; display: grid; place-items: center; border-radius: 50%; background: var(--green); color: white; font-weight: 800; }
.small-note { color: var(--muted); font-size: .93rem; }
.provenance { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.summary-image { display: block; max-height: 240px; margin: 0 auto 1rem; object-fit: contain; }
.image-zoom-button { display: block; width: 100%; padding: 0; border: 0; background: transparent; color: var(--green); cursor: zoom-in; font-weight: 800; }
.image-zoom-button span { display: block; margin-top: .55rem; }
.image-dialog { width: min(96vw, 1400px); height: min(94vh, 1000px); padding: 0; border: 0; border-radius: 1rem; box-shadow: 0 25px 80px rgba(0,0,0,.45); }
.image-dialog::backdrop { background: rgba(0,0,0,.75); }
.dialog-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .75rem 1rem; border-bottom: 1px solid var(--border); background: white; }
.dialog-toolbar h2 { margin: 0; font-size: 1rem; }
.dialog-toolbar button { padding: .45rem .7rem; margin-left: .25rem; border: 1px solid var(--border); border-radius: .45rem; background: white; cursor: pointer; }
.image-pan { height: calc(100% - 62px); overflow: auto; display: grid; place-items: start center; background: #ecebe7; }
.image-pan img { max-width: none; transform-origin: top center; transition: transform .12s ease; }
.video-poster { max-width: 260px; max-height: 190px; object-fit: contain; margin: 0 auto 1rem; background: white; border-radius: .5rem; }
.finder-layout { display: grid; grid-template-columns: 320px minmax(0,1fr); gap: 2rem; align-items: start; }
.finder-controls { position: sticky; top: 95px; padding: 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.upload-box { display: grid; gap: .3rem; padding: 1.2rem; border: 2px dashed var(--border); border-radius: .8rem; cursor: pointer; text-align: center; }
.upload-box span { font-weight: 800; color: var(--green); }
.upload-box small { color: var(--muted); }
#puzzle-photo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.photo-preview { min-height: 120px; margin: 1rem 0; display: grid; place-items: center; background: var(--surface-alt); border-radius: .7rem; overflow: hidden; }
.photo-preview img { max-height: 260px; object-fit: contain; }
.compact-grid .card-image img { height: 170px; }
.compare-select { display: inline-flex; gap: .45rem; align-items: center; margin: .55rem 0; font-weight: 700; }
.comparison-tray { margin: 1.5rem 0; padding: 1rem; border: 2px solid var(--green); border-radius: var(--radius); background: var(--surface); }
.comparison-table { width: 100%; border-collapse: collapse; }
.comparison-table th, .comparison-table td { padding: .7rem; border: 1px solid var(--border); vertical-align: top; }
.comparison-table img { width: 150px; height: 130px; object-fit: contain; }
.guide-grid { align-items: stretch; }
.guide-card .card-body { height: 100%; }
.form-layout { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(280px,.7fr); gap: 2rem; align-items: start; }
.contribution-form { padding: 1.2rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.contribution-form textarea { width: 100%; resize: vertical; }
.contribution-form fieldset { margin: 1rem 0; border: 1px solid var(--border); border-radius: .7rem; }
.check-row { display: flex; gap: .7rem; align-items: flex-start; margin: .7rem 0; }
.form-status { font-weight: 700; }
.contact-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.5rem; }
.warning { border-color: #a9451f; background: #fff4ec; }
.history-hero { padding-bottom: 2rem; }
.history-hero-grid { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(300px,.8fr); gap: 2.2rem; align-items: center; }
.history-hero figure { margin: 0; padding: .7rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.history-hero figure img { display: block; width: 100%; height: auto; border-radius: .8rem; }
.history-hero figcaption { padding: .65rem .4rem .15rem; color: var(--muted); font-size: .9rem; }
.history-layout { display: grid; grid-template-columns: minmax(0,1fr) 280px; gap: 2.5rem; align-items: start; }
.history-article > p:first-child { font-size: 1.12rem; color: #34413d; }
.history-side { position: sticky; top: 96px; padding: 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.history-side h2 { margin-top: .25rem; font-size: 1.05rem; }
.history-side ul { padding-left: 1.15rem; }
.history-side .button { width: 100%; text-align: center; }
.history-card .card-image { background: #f3eee3; }
.history-card .card-image img { object-fit: cover; }
.history-grid { align-items: stretch; }
.timeline { position: relative; display: grid; gap: 1.1rem; max-width: 900px; margin-inline: auto; }
.timeline::before { content: ''; position: absolute; left: 84px; top: 20px; bottom: 20px; width: 4px; background: var(--border); border-radius: 2px; }
.timeline > div { position: relative; display: grid; grid-template-columns: 70px 1fr; column-gap: 2rem; padding: 1rem 1.2rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.timeline > div::before { content: ''; position: absolute; left: 77px; top: 27px; width: 18px; height: 18px; border-radius: 50%; background: var(--orange); border: 4px solid var(--surface); box-shadow: 0 0 0 2px var(--orange); }
.timeline time { grid-row: 1 / span 2; align-self: start; font-weight: 900; color: var(--green); }
.timeline h2 { margin: 0 0 .25rem; font-size: 1.15rem; }
.timeline p { margin: 0; color: var(--muted); }
.source-panel { margin-top: 2.5rem; padding: 1.2rem; background: var(--surface-alt); border-left: 5px solid var(--green); border-radius: .5rem; }
.source-panel h2 { margin-top: 0; }
.source-list { padding-left: 1.25rem; }
.source-list li { margin: .55rem 0; }
.related-links { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .75rem; }
.related-links a { display: block; padding: .9rem; background: var(--surface); border: 1px solid var(--border); border-radius: .7rem; font-weight: 800; text-decoration: none; }
.type-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; margin: 1.5rem 0; }
.type-grid article { padding: 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.type-grid h2 { margin-top: 0; font-size: 1.2rem; }
.glossary-list { display: grid; grid-template-columns: minmax(150px,.35fr) minmax(0,1fr); gap: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.glossary-list dt, .glossary-list dd { margin: 0; padding: .85rem 1rem; border-bottom: 1px solid var(--border); }
.glossary-list dt { font-weight: 900; color: var(--green); background: var(--surface-alt); }
.glossary-list dd { background: var(--surface); }
.glossary-list dt:last-of-type, .glossary-list dd:last-of-type { border-bottom: 0; }
@media(max-width:900px){ .finder-layout,.form-layout,.contact-grid,.history-hero-grid,.history-layout{grid-template-columns:1fr}.finder-controls,.history-side{position:static}.comparison-table{display:block;overflow-x:auto}.site-nav a{padding:.55rem .65rem;font-size:.94rem}.related-links{grid-template-columns:1fr 1fr} }
@media(max-width:600px){ .timeline::before{left:22px}.timeline>div{display:block;padding-left:3.3rem}.timeline>div::before{left:15px}.timeline time{display:block;margin-bottom:.35rem}.type-grid,.related-links,.glossary-list{grid-template-columns:1fr}.glossary-list dt{border-bottom:0}.glossary-list dd{border-bottom:1px solid var(--border)} }
@media print { .hint-detail:not([open]) .detail-body { display:block!important; } .image-zoom-button span, .provenance, .aliases { display:none!important; } }
/* Content expansion features */
.discover-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.discover-card .card-image{background:#f3eee3}.discover-card .card-image img{object-fit:cover}.pathway-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.pathway-grid article,.game-help,.printable-banner,.challenge-card,.catalogue-fields>div{padding:1rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)}
.game-layout{display:grid;grid-template-columns:minmax(0,1.5fr)minmax(260px,.6fr);gap:2rem;align-items:start}.game-toolbar{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;margin-bottom:1rem}.game-toolbar select{min-height:46px;padding:.55rem;border:1px solid var(--border);border-radius:.5rem;background:#fff}.game-status{min-height:2rem;font-weight:800;color:var(--green)}
.hanoi-game{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;min-height:360px;padding:1rem;background:linear-gradient(#f8f3e9,#e8d6b9);border:1px solid var(--border);border-radius:var(--radius)}.hanoi-peg{position:relative;display:flex;flex-direction:column-reverse;align-items:center;justify-content:flex-start;gap:4px;padding:1rem .25rem 1.5rem;border:2px solid transparent;border-radius:.8rem;background:transparent;cursor:pointer}.hanoi-peg::after{content:'';position:absolute;left:8%;right:8%;bottom:.75rem;height:12px;background:#6e553d;border-radius:8px}.hanoi-peg.selected{border-color:var(--gold);background:rgba(255,255,255,.55)}.peg-post{position:absolute;bottom:1.4rem;width:12px;height:78%;background:#8a6b49;border-radius:8px}.hanoi-disc{z-index:1;display:grid;place-items:center;width:calc(32% + var(--disc)*10%);height:28px;border-radius:8px;background:var(--green);color:#fff;font-size:.72rem;font-weight:900;border:2px solid #fff}
.sliding-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.55rem;width:min(100%,520px);aspect-ratio:1;padding:.75rem;background:#6e553d;border-radius:var(--radius)}.slide-tile{border:0;border-radius:.65rem;background:#f5e3d3;color:var(--ink);font-size:clamp(1.2rem,5vw,2.3rem);font-weight:900;box-shadow:inset 0 -4px rgba(0,0,0,.12);cursor:pointer}.slide-tile.empty{background:rgba(255,255,255,.13);box-shadow:none}.sequence-board{display:grid;grid-template-areas:'. up .' 'left . right' '. down .';grid-template-columns:repeat(3,110px);justify-content:center;gap:.65rem;padding:2rem;background:var(--surface-alt);border-radius:var(--radius)}.sequence-board button{width:110px;height:90px;border:2px solid var(--green);border-radius:1rem;background:#fff;color:var(--green);font-size:2.2rem;font-weight:900;transition:.15s}.sequence-board [data-direction=up]{grid-area:up}.sequence-board [data-direction=left]{grid-area:left}.sequence-board [data-direction=right]{grid-area:right}.sequence-board [data-direction=down]{grid-area:down}.sequence-board button.active{transform:scale(1.08);background:var(--gold);color:#fff}
.printable-page .wrap{max-width:920px}.printable-banner{margin-bottom:2rem;border-left:6px solid var(--gold)}.print-sheet-svg,.print-board{display:block;width:min(100%,780px);margin:1rem auto;color:#111;background:#fff}.silhouette-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.silhouette-grid figure{margin:0;padding:1rem;text-align:center;border:1px solid var(--border);border-radius:var(--radius)}.silhouette-grid svg{width:100%;height:180px;fill:#111}.answer-key{margin:2rem 0;padding:1rem;border:2px solid var(--green);border-radius:var(--radius)}.challenge-list{display:grid;gap:1rem}.challenge-card h2{font-size:1.25rem}.quiz-list li{padding:1rem 0;break-inside:avoid}.quiz-line{height:2.3rem;border-bottom:1px solid #777}.answer-page{margin-top:3rem;padding-top:2rem;border-top:3px dashed #777;break-before:page}
.lesson-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}.lesson-meta div{padding:.8rem;background:var(--surface-alt);border-radius:.6rem}.lesson-meta dt{font-weight:900}.lesson-meta dd{margin:0}.mechanism-demo{position:relative;width:min(100%,700px);height:330px;margin:1.5rem auto 2rem;background:var(--surface-alt);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}.beam{position:absolute;width:380px;height:58px;left:150px;top:135px;border-radius:12px;background:#8c6745;border:5px solid #fff;box-shadow:0 4px 10px rgba(0,0,0,.15)}.beam-a{transform:rotate(90deg)}.beam-b{transform:rotate(0deg)}.beam-key{background:var(--gold);animation:keyslide 4s ease-in-out infinite}.beam-key span{display:grid;height:100%;place-items:center;color:#fff;font-weight:900}.box-shell{position:absolute;inset:45px 100px;border:12px solid #8c6745;background:#e7cfac}.panel{position:absolute;top:25px;width:45%;height:95px;display:grid;place-items:center;background:var(--green);color:#fff;font-weight:900}.panel-left{left:5px;animation:panelleft 5s infinite}.panel-right{right:5px;animation:panelright 5s infinite}.lock-pin{position:absolute;left:47%;top:135px;padding:.4rem;background:var(--gold);color:#fff;border-radius:50%;animation:pinshow 5s infinite}.drawer{position:absolute;left:25%;right:25%;bottom:10px;height:55px;display:grid;place-items:center;background:#fff;border:3px solid var(--green);animation:drawerout 5s infinite}.cord-loop{position:absolute;left:130px;top:55px;width:260px;height:220px;border:14px solid var(--green);border-radius:50%}.ring-shape{position:absolute;left:330px;top:105px;width:120px;height:120px;border:18px solid var(--gold);border-radius:50%;animation:ringmove 5s infinite}.post-shape{position:absolute;right:130px;top:60px;width:26px;height:220px;background:#6e553d;border-radius:12px}
.catalogue-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;margin:1rem 0}.catalogue-fields>div{display:grid;gap:.25rem}.catalogue-fields strong{color:var(--green)}.catalogue-fields span{color:var(--muted)}
@keyframes keyslide{0%,35%,100%{transform:translateX(0)}55%,80%{transform:translateX(125px)}}@keyframes panelleft{0%,20%,100%{transform:translateX(0)}35%,85%{transform:translateX(-55px)}}@keyframes panelright{0%,35%,100%{transform:translateX(0)}50%,85%{transform:translateX(55px)}}@keyframes pinshow{0%,45%,100%{opacity:.15}55%,85%{opacity:1}}@keyframes drawerout{0%,60%,100%{transform:translateY(0)}75%,90%{transform:translateY(65px)}}@keyframes ringmove{0%,25%,100%{transform:translate(0,0)}50%{transform:translate(115px,10px)}75%{transform:translate(175px,95px)}}
@media(max-width:900px){.discover-grid,.pathway-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.game-layout{grid-template-columns:1fr}.mechanism-demo{height:290px}.beam{left:90px}.sequence-board{grid-template-columns:repeat(3,90px)}.sequence-board button{width:90px}}
@media(max-width:600px){.discover-grid,.pathway-grid,.silhouette-grid,.catalogue-fields,.lesson-meta{grid-template-columns:1fr}.hanoi-game{min-height:300px;padding:.4rem}.hanoi-disc{height:24px}.sequence-board{grid-template-columns:repeat(3,72px);padding:1rem}.sequence-board button{width:72px;height:70px}.mechanism-demo{height:250px}.beam{left:35px;width:280px}.box-shell{inset:30px}.cord-loop{left:30px}.ring-shape{left:160px}.post-shape{right:35px}}
@media(prefers-reduced-motion:reduce){.beam-key,.panel-left,.panel-right,.lock-pin,.drawer,.ring-shape{animation:none!important}}
@media print{.printable-page .button,.answer-key summary{display:none!important}.printable-page{font-size:11pt}.print-sheet-svg,.print-board{max-height:190mm}.challenge-card{break-inside:avoid}.answer-key[open] .detail-body,.answer-key>*{display:block!important}}