:root{
  --ink:#2d211b;--muted:#6a5b50;--accent:#975a37;--accent-dark:#744125;
  --paper:#f7f3eb;--cream:#fffcf7;--warm:#eee3d4;--line:#dccdbb;--dark:#2a1b15;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.65}
img{display:block;max-width:100%}
a{color:inherit}
button{font:inherit}
::selection{background:#d9aa82;color:#25160f}
.shell{width:min(100% - 3rem,1160px);margin-inline:auto}
.skip-link{position:absolute;left:1rem;top:-5rem;z-index:100;background:#fff;padding:.7rem 1rem}
.skip-link:focus{top:1rem}
.site-header{background:var(--dark);color:#fff7ed}
.header-inner{height:70px;display:flex;align-items:center;justify-content:space-between;gap:2rem}
.brand{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;font-size:1.5rem;font-weight:800;letter-spacing:-.065em;line-height:1}
.brand-dot,.footer-brand span{color:#d9a372}
.brand-mark{width:27px;height:27px;display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);gap:2px;transform:rotate(-8deg)}
.brand-mark i{display:block;background:#c28b5b;border-radius:2px;box-shadow:inset -2px -2px rgba(63,33,18,.32)}
.brand-mark i:nth-child(2){background:#a96d43}.brand-mark i:nth-child(3){background:#925531}.brand-mark i:nth-child(4){background:#d3a272}
.top-nav{display:flex;align-items:center;gap:1.8rem;font-size:.9rem;font-weight:600}
.top-nav a{text-decoration:none;color:#e6d7c9}.top-nav a:hover,.top-nav a[aria-current=page]{color:#fff}
.top-nav a[aria-current=page]{text-decoration:underline;text-decoration-color:#cc9366;text-underline-offset:8px;text-decoration-thickness:2px}
.header-actions{display:flex;align-items:center;gap:.55rem;margin-left:auto}
.theme-toggle{display:grid;place-items:center;width:30px;height:30px;padding:0;border:1px solid #795844;border-radius:3px;background:transparent;color:#ead4bf;cursor:pointer}
.theme-toggle:hover,.theme-toggle:focus-visible{background:#6a422d;color:#fff;outline-offset:3px}
.theme-icon::before{content:"☾";display:block;font-family:Georgia,serif;font-size:1.25rem;line-height:1}
html[data-theme=dark] .theme-icon::before{content:"☀";font-family:ui-sans-serif,sans-serif;font-size:1rem}
.language-switch{display:flex;align-items:center;gap:.2rem;border:1px solid #795844;border-radius:3px;padding:2px;font-size:.73rem;font-weight:750;letter-spacing:.05em}
.language-switch a{padding:.12rem .38rem;color:#c9ae97;text-decoration:none;border-radius:2px}
.language-switch a:hover,.language-switch a[aria-current=page]{background:#6a422d;color:#fff}
.nav-github span{color:#d1a078}
.site-footer{background:var(--dark);color:#f2e4d7;padding:2.6rem 0}
.footer-inner{display:flex;justify-content:space-between;gap:2rem}
.footer-brand{font-size:1.3rem;font-weight:800;letter-spacing:-.06em}
.footer-inner p{font-size:.85rem;color:#c7b4a2;margin:.25rem 0 0}
.footer-links{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;font-size:.85rem}
.footer-links a{text-decoration:none}.footer-links a:hover{color:#e1ac79}
.eyebrow{display:block;font-size:.7rem;font-weight:750;letter-spacing:.15em;color:var(--accent)}
h1,h2,h3,p{margin-top:0}
h1,h2,h3{line-height:1.15}
h1,h2{font-family:Georgia,"Times New Roman",serif;font-weight:500;letter-spacing:-.035em}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:.68rem 1.05rem;border:1px solid transparent;border-radius:4px;text-decoration:none;font-size:.88rem;font-weight:700;transition:background .2s,color .2s,border-color .2s}
.button-primary{background:var(--accent);color:#fff}.button-primary:hover{background:var(--accent-dark)}
.button-secondary{background:transparent;border-color:#bda78f;color:var(--ink)}.button-secondary:hover{border-color:var(--accent);color:var(--accent-dark)}
.text-link{color:var(--accent-dark);font-size:.9rem;font-weight:700;text-underline-offset:3px}

/* Product overview */
.hero{background:#eee4d6;border-bottom:1px solid var(--line)}
.hero-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:clamp(2rem,5vw,5rem);padding-block:5rem}
.hero-copy h1{font-size:clamp(4.2rem,8vw,6.7rem);margin:.5rem 0 .7rem}
.hero-lead{font-family:Georgia,"Times New Roman",serif;font-size:clamp(1.35rem,2vw,1.7rem);line-height:1.4;color:#5e3d2b;margin-bottom:1.2rem}
.hero-copy>p:not(.hero-lead){max-width:490px;color:#54453b;font-size:1rem;line-height:1.75;margin-bottom:1.6rem}
.hero-actions{display:flex;gap:.75rem;flex-wrap:wrap}
.hero-image,.project-image,.about-image{margin:0}
.hero-image img{width:100%;height:auto;max-height:430px;object-fit:contain;background:#d9d5d9;border:1px solid #cdbca8}
figcaption{font-size:.75rem;color:var(--muted);margin-top:.45rem}
.facts-bar{background:#f2e9dc;border-bottom:1px solid var(--line)}
.facts-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;padding:1.1rem 0}
.facts-grid span{font-size:.83rem;color:#6d594a;border-right:1px solid #d5c3ad}.facts-grid span:last-child{border:0}
.facts-grid strong{color:#593722;margin-right:.35rem;font-weight:800}
.content-section{padding-block:5rem 5.5rem}
.section-intro{max-width:720px;margin-bottom:2rem}.section-intro h2,.project-grid h2{font-size:clamp(2.2rem,3.4vw,3rem);margin:.45rem 0 1rem}.section-intro p,.project-grid p{color:var(--muted);line-height:1.75;margin:0}
.feature-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.feature-grid article{background:var(--cream);padding:1.7rem 1.85rem;min-height:160px}
.feature-grid h3{font-size:1.06rem;margin-bottom:.5rem;color:#432a1d}.feature-grid p{font-size:.91rem;color:var(--muted);margin:0;max-width:440px}
.project-section{background:var(--warm);border-top:1px solid var(--line);padding-block:4.5rem}
.project-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.project-grid p{max-width:500px}.project-links{display:flex;align-items:center;gap:1.3rem;flex-wrap:wrap;margin-top:1.5rem}
.project-image img{width:100%;height:290px;object-fit:cover;border:1px solid #cbb9a4}

/* Documentation and About */
.page-heading{background:#eee4d6;border-bottom:1px solid var(--line)}
.page-heading .shell{padding-block:3.2rem 3.4rem}
.page-heading h1{font-size:clamp(2.8rem,5vw,4rem);margin:.4rem 0 .5rem}
.page-heading p{font-size:1rem;color:var(--muted);margin:0}
.docs-layout{display:grid;grid-template-columns:210px minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:start;padding-block:3.5rem 6rem}
.docs-sidebar{position:sticky;top:1.5rem}
.docs-toc{display:flex;flex-direction:column;border-left:1px solid var(--line);padding-left:.9rem}
.toc-label{color:#9a765e;font-size:.64rem;font-weight:800;letter-spacing:.14em;margin:1.2rem 0 .4rem .65rem}.toc-label:first-child{margin-top:0}
.docs-toc a{position:relative;padding:.34rem .65rem;text-decoration:none;border-radius:3px;font-size:.89rem;color:#69564b;font-weight:550;line-height:1.45}
.docs-toc a:hover{color:var(--accent-dark);background:#eee4d6}
.docs-toc a[aria-current=location]{color:var(--accent-dark);background:#e9d8c5;font-weight:700}
.docs-toc a[aria-current=location]:before{content:"";position:absolute;left:-.98rem;top:.33rem;bottom:.33rem;width:2px;background:var(--accent)}
.toc-toggle{display:none}
.docs-article{min-width:0;background:var(--cream);border:1px solid #e3d8ca;padding:clamp(1.5rem,4vw,3.5rem)}
.docs-note{border-left:3px solid #bc8a62;background:#f5ece0;padding:.8rem 1rem;color:#625145;margin-bottom:2.5rem!important}
.prose{font-size:.94rem;line-height:1.8;color:#4f4137}
.prose h2{font-size:clamp(1.9rem,2.7vw,2.4rem);color:var(--ink);margin:3.7rem 0 1rem;scroll-margin-top:2rem}
.prose h2:first-of-type{margin-top:0}
.prose h2:not(:first-of-type){border-top:1px solid var(--line);padding-top:3rem}
.prose h3{font-family:Georgia,"Times New Roman",serif;font-size:1.4rem;font-weight:500;letter-spacing:-.02em;color:#513521;margin:2.2rem 0 .8rem}
.prose p,.prose ul,.prose ol{margin-bottom:1.25rem}.prose li{margin:.28rem 0;padding-left:.15rem}
.prose a{color:var(--accent-dark);text-decoration-color:#bc987c;text-underline-offset:3px}.prose a:hover{text-decoration-color:currentColor}
.prose strong{color:#32251d}
.prose code{font-size:.87em;background:#f0e6d9;padding:.08rem .25rem;border-radius:2px;color:#6e3e27}
.prose pre{overflow:auto;background:#2d211b;color:#f6ede1;padding:1rem 1.2rem;border-radius:3px;margin:1.5rem 0 2rem;line-height:1.55}.prose pre code{background:none;color:inherit;padding:0}
.prose table{display:block;overflow-x:auto;width:100%;border-collapse:collapse;margin:1.4rem 0 2rem;font-size:.85rem;line-height:1.55}
.prose th,.prose td{text-align:left;vertical-align:top;padding:.68rem .8rem;min-width:105px;border-bottom:1px solid #e6dbcd}.prose th{background:#eadbca;color:#4a3020;font-weight:700;white-space:nowrap}.prose tr:nth-child(even) td{background:#faf4ec}
.about-layout{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:clamp(2rem,5vw,4.5rem);padding-block:4rem 5.5rem;align-items:start}
.about-article h2:first-of-type{margin-top:0}.about-image img{width:100%;height:auto;border:1px solid #d2c0ae}

/* Illustrated documentation */
.controller-map{margin:1.8rem 0 2rem;border:1px solid #d7c5af;background:#f3ecdf}
.controller-map-title{display:flex;justify-content:space-between;gap:1rem;padding:.8rem 1rem;border-bottom:1px solid #d7c5af;font-size:.8rem;line-height:1.35;color:#6b5140}
.controller-map-title strong{color:#39271d}.controller-map-title span{color:#806c5a}
.controller-map-main{padding:1rem}
.controller-diagram{display:grid;grid-template-columns:31% 1fr;gap:.75rem;background:#e5d9c8;border:1px solid #c8b39a;padding:1rem;max-width:620px;margin:auto}
.diagram-left{display:flex;flex-direction:column;align-items:center;justify-content:space-around;gap:1.1rem;min-width:0}
.diagram-oled{width:100%;aspect-ratio:2/1;background:#080808;border:6px solid #504f4b;box-shadow:0 0 0 1px #afa69a;display:flex;flex-direction:column;justify-content:space-between;color:#f3f4ed;padding:.25rem .3rem;font-family:monospace;line-height:1.1}
.diagram-oled span{font-size:clamp(.42rem,.9vw,.63rem)}.diagram-oled strong{font-size:clamp(.65rem,1.3vw,.95rem);text-align:center;color:#f3f4ed}
.diagram-joystick{display:flex;align-items:center;flex-direction:column;gap:.35rem;color:#715b48;font-size:.62rem;font-weight:750;letter-spacing:.07em}
.joystick-knob{position:relative;display:block;width:66px;height:66px;background:#d3c5b1;border:1px solid #a99983;border-radius:50%;box-shadow:inset 0 0 0 3px #b6a997}
.joystick-knob::before,.joystick-knob::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%}
.joystick-knob::before{width:48px;height:48px;background:#35312d}
.joystick-knob::after{width:31px;height:31px;background:#85807a;box-shadow:inset -2px -2px 3px #6c6761}
.diagram-keypad{display:grid;grid-template-rows:repeat(3,1fr);gap:.4rem;align-items:stretch;min-width:0}
.diagram-key-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.4rem;min-width:0}
.diagram-key-row-offset{grid-template-columns:repeat(3,minmax(0,1fr));margin-inline:12.5%}
.diagram-key{min-width:0;min-height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#fdfbf6;border:1px solid #b39d85;border-bottom:4px solid #aa8d73;color:#302019;font-family:ui-sans-serif,sans-serif;font-size:1.1rem;font-weight:750;line-height:1.2}
.diagram-key-mod{background:#292724;border-color:#191715;border-bottom-color:#11100e;color:#f7ede1}.diagram-key-mod strong{color:#f7ede1}.diagram-key-mod small{color:#dfc4ac}
.diagram-key-mid{background:#ae744e;border-color:#8d5938;border-bottom-color:#75492e;color:#28190f}.diagram-key small{font-size:.47rem;letter-spacing:.03em;font-weight:800}
.controller-map-legend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.2rem 1rem;margin-top:1rem}.controller-map-legend p{font-size:.82rem;line-height:1.5;margin:0;padding:.35rem 0;color:#5e4c3f}.controller-map-legend strong{color:#50311f}
.controller-map-shortcuts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1rem;padding:1rem;border-top:1px solid #d7c5af;background:#faf6ee}.shortcut-heading{grid-column:1/-1;color:#986340;font-size:.66rem;font-weight:800;letter-spacing:.12em;margin-bottom:.5rem}.controller-map-shortcuts div{display:flex;gap:.55rem;padding:.35rem 0;border-top:1px solid #e9dfd2;font-size:.78rem;line-height:1.4}.controller-map-shortcuts b{min-width:128px;color:#53311e}.controller-map-shortcuts span{color:#6a584a}.controller-map figcaption{padding:.65rem 1rem;border-top:1px solid #e0d0bc;margin:0;font-size:.74rem}
.screen-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin:1.4rem 0 1.8rem}.screen-gallery figure{margin:0;min-width:0}.screen-bezel{background:#292a28;border:1px solid #535754;border-radius:9px;padding:.75rem;box-shadow:inset 0 0 0 3px #373a37}.screen-bezel img{display:block;width:100%;height:auto;aspect-ratio:2/1;background:#000;image-rendering:pixelated}.screen-gallery figcaption{margin:.5rem 0 0;line-height:1.4}.screen-gallery figcaption strong,.screen-gallery figcaption span{display:block}.screen-gallery figcaption strong{font-size:.84rem;color:#3d2a1f}.screen-gallery figcaption span{font-size:.76rem;color:#6c5a4c}

@media(max-width:850px){.hero-grid{grid-template-columns:1fr;padding-block:3.5rem;gap:2rem}.hero-copy{max-width:680px}.hero-image{max-width:680px}.project-grid{grid-template-columns:1fr}.project-image{max-width:700px}.about-layout{grid-template-columns:1fr}.about-image{max-width:560px}}
@media(max-width:700px){.shell{width:min(100% - 2rem,1160px)}.header-inner{height:62px;gap:.8rem}.brand{font-size:1.3rem}.brand-mark{width:24px;height:24px}.top-nav{gap:1rem;font-size:.8rem}.top-nav .nav-github{display:none}.hero-copy h1{font-size:4.4rem}.hero-lead{font-size:1.35rem}.facts-grid{grid-template-columns:repeat(2,1fr);row-gap:.6rem}.facts-grid span:nth-child(2){border:0}.content-section,.project-section{padding-block:3.3rem}.feature-grid{grid-template-columns:1fr}.feature-grid article{min-height:0;padding:1.35rem}.page-heading .shell{padding-block:2.4rem}.docs-layout{display:block;padding-block:1.4rem 3.5rem}.docs-sidebar{position:relative;top:auto;margin-bottom:1rem}.toc-toggle{display:flex;justify-content:space-between;align-items:center;width:100%;background:#eadcc9;border:1px solid #d4bfa8;border-radius:3px;color:#4c3526;padding:.65rem .9rem;font-weight:700}.docs-toc{display:none;background:#f5ebdf;padding:.8rem;border:1px solid #d9c8b5;border-top:0}.docs-toc.is-open{display:flex}.docs-toc a[aria-current=location]:before{display:none}.docs-article{padding:1.4rem}.prose h2:not(:first-of-type){padding-top:2.2rem}.about-layout{padding-block:3rem}.footer-inner{display:block}.footer-links{margin-top:1.3rem;gap:1rem}.controller-map-legend,.controller-map-shortcuts{grid-template-columns:1fr}.controller-map-shortcuts b{min-width:120px}.diagram-key small{display:none}.screen-gallery{grid-template-columns:1fr}}
@media(max-width:400px){.header-inner{gap:.5rem}.brand-mark{display:none}.top-nav{gap:.5rem;font-size:.7rem}.top-nav a{white-space:nowrap}.language-switch{font-size:.64rem}.language-switch a{padding:.1rem .22rem}.hero-actions{align-items:stretch;flex-direction:column}.facts-grid span{font-size:.78rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition-duration:.01ms!important}}

@media(max-width:700px){
  .header-inner{display:grid;grid-template-columns:1fr auto;min-height:86px;height:auto;row-gap:.35rem;padding-block:.45rem}
  .brand{grid-column:1;grid-row:1}
  .header-actions{grid-column:2;grid-row:1}
  .top-nav{grid-column:1/-1;grid-row:2;justify-content:center;border-top:1px solid #4d3428;padding-top:.28rem}
}

/* Dark palette; the board keys and OLED drawings retain their physical colors. */
html[data-theme=dark]{
  color-scheme:dark;
  --ink:#f2e6d9;--muted:#bcaa9c;--accent:#ca9067;--accent-dark:#e6ad80;
  --paper:#171310;--cream:#221b17;--warm:#281e19;--line:#4a392f;--dark:#100d0c;
}
html[data-theme=dark] .skip-link{background:#332720;color:var(--ink)}
html[data-theme=dark] .button-primary{color:#1d120d}
html[data-theme=dark] .button-secondary{border-color:#80634f;color:var(--ink)}
html[data-theme=dark] .button-secondary:hover{color:var(--accent-dark)}
html[data-theme=dark] .hero,html[data-theme=dark] .page-heading{background:#261c17}
html[data-theme=dark] .hero-lead{color:#e4ba98}
html[data-theme=dark] .hero-copy>p:not(.hero-lead){color:#cbb9ab}
html[data-theme=dark] .hero-image img{border-color:#57483d}
html[data-theme=dark] .facts-bar{background:#201914}
html[data-theme=dark] .facts-grid span{color:#c7b4a4;border-color:#574236}
html[data-theme=dark] .facts-grid strong{color:#edbd91}
html[data-theme=dark] .feature-grid h3{color:#e8c5a7}
html[data-theme=dark] .project-image img,html[data-theme=dark] .about-image img{border-color:#5d4739}
html[data-theme=dark] .toc-label{color:#bc9273}
html[data-theme=dark] .docs-toc a{color:#c5b1a2}
html[data-theme=dark] .docs-toc a:hover{color:#f4ceb0;background:#35271f}
html[data-theme=dark] .docs-toc a[aria-current=location]{color:#f5ccaa;background:#433025}
html[data-theme=dark] .docs-article{border-color:#4c3a2f}
html[data-theme=dark] .docs-note{background:#32251d;color:#d9c4b2;border-color:#bd8054}
html[data-theme=dark] .prose{color:#d4c3b6}
html[data-theme=dark] .prose h3{color:#e8c2a1}
html[data-theme=dark] .prose a{color:#e8b184;text-decoration-color:#9c6748}
html[data-theme=dark] .prose strong{color:#f5e7d9}
html[data-theme=dark] .prose code{background:#39291f;color:#f1bd97}
html[data-theme=dark] .prose pre{background:#100d0c;color:#f6ede1}
html[data-theme=dark] .prose pre code{background:none;color:inherit}
html[data-theme=dark] .prose th,html[data-theme=dark] .prose td{border-color:#4d3a2f}
html[data-theme=dark] .prose th{background:#3c2b22;color:#f0d0b3}
html[data-theme=dark] .prose tr:nth-child(even) td{background:#2c211b}
html[data-theme=dark] .controller-map{background:#2b211b;border-color:#574133}
html[data-theme=dark] .controller-map-title{border-color:#574133;color:#d4b49a}
html[data-theme=dark] .controller-map-title strong{color:#f0d6bd}
html[data-theme=dark] .controller-map-title span{color:#bda38f}
html[data-theme=dark] .controller-diagram{background:#4a3b2e;border-color:#715847}
html[data-theme=dark] .diagram-key strong{color:#302019}
html[data-theme=dark] .diagram-key-mod strong{color:#f7ede1}
html[data-theme=dark] .diagram-joystick{color:#e0c2a6}
html[data-theme=dark] .controller-map-legend p{color:#dac8b9}
html[data-theme=dark] .controller-map-legend strong{color:#f3d8c0}
html[data-theme=dark] .controller-map-shortcuts{background:#261d18;border-color:#574133}
html[data-theme=dark] .shortcut-heading{color:#dca27a}
html[data-theme=dark] .controller-map-shortcuts div{border-color:#4e3b30}
html[data-theme=dark] .controller-map-shortcuts b{color:#efc9a9}
html[data-theme=dark] .controller-map-shortcuts span{color:#d0bdad}
html[data-theme=dark] .controller-map figcaption{border-color:#574133}
html[data-theme=dark] .screen-gallery figcaption strong{color:#f0d6bc}
html[data-theme=dark] .screen-gallery figcaption span{color:#bca99b}
@media(max-width:700px){
  html[data-theme=dark] .toc-toggle{background:#3a2b22;border-color:#665043;color:#f3dfcc}
  html[data-theme=dark] .docs-toc{background:#2a211b;border-color:#594337}
}