/* Original interface and demo artwork. Copyright 2026 StudioYebisu, MIT. */
:root{--paper:#f2eee3;--paper-deep:#e7e1d0;--field:#fbf9f3;--ink:#17150f;--ink-soft:#4f4a3f;--muted:#4f4a3f;--line:#d9d2bf;--rule:rgba(23,21,15,.2);--white:#fbf9f3;--dark:#17150f;--accent:#3d7d4f;--accent-strong:#27563a;--lime:#cbef3a;--mincho:"Hiragino Mincho ProN","Yu Mincho","YuMincho","BIZ UDPMincho","Noto Serif JP",serif;color-scheme:light;font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic","YuGothic","Meiryo","Noto Sans JP",system-ui,sans-serif;font-synthesis:none}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:130px}body{margin:0;background:var(--paper);color:var(--ink);font-size:16px;line-height:1.7}a{color:inherit;text-decoration-thickness:1px;text-underline-offset:4px}button,input,select{font:inherit}button,select{cursor:pointer}button,a,input,select,summary{touch-action:manipulation}button{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--ink);outline-offset:2px;box-shadow:0 0 0 5px var(--lime)}[hidden]{display:none!important}.page-width{width:min(1180px,calc(100% - 64px));margin-inline:auto}.skip-link{position:fixed;left:12px;top:-80px;background:var(--dark);color:white;padding:10px 18px;z-index:20}.skip-link:focus{top:10px}.site-header{position:sticky;top:0;z-index:40;border-bottom:1px solid var(--ink);background:var(--paper)}.header-inner{width:min(1250px,calc(100% - 64px));margin:auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 25px;min-height:0;padding-block:4px}.brand{display:flex;align-items:center;gap:13px;text-decoration:none;font-size:clamp(1rem,2.5vw,1.25rem);font-weight:700;line-height:1.3;font-family:"Segoe UI",Arial,system-ui,sans-serif;letter-spacing:-.035em}.brand small{display:block;font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Meiryo","Noto Sans JP",system-ui,sans-serif;font-size:11px;font-weight:450;color:var(--muted);letter-spacing:.05em}
nav{display:flex;align-items:center;gap:27px;font-size:13px;flex-wrap:wrap}nav a{text-decoration:none}nav a:hover{text-decoration:underline}.nav-github{border:1px solid var(--ink);border-radius:0;padding:6px 13px}
/* Specialist sites: the family row, on every page and width. */
.header-sites{flex-basis:100%;display:flex;flex-wrap:nowrap;gap:.125rem 1.5rem;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;font-size:.8125rem;font-weight:600;line-height:1.3}
.header-sites a{display:inline-flex;align-items:center;min-height:2.75rem;min-width:2.75rem;text-decoration:none;white-space:nowrap}
.header-sites a[aria-current="page"]{font-weight:700;box-shadow:inset 0 -3px 0 var(--accent)}nav a{text-decoration:none}nav a:hover{text-decoration:underline}
.hero{display:flex;align-items:center;justify-content:space-between;gap:36px;padding-block:54px 45px}.eyebrow{font-size:10px;font-weight:650;letter-spacing:.17em;color:var(--muted);margin:0 0 15px}.hero h1{font-size:clamp(28px,4vw,48px);line-height:1.3;letter-spacing:.01em;margin:0;font-weight:700;font-family:var(--mincho)}.hero-description{color:var(--muted);font-size:15px;margin:18px 0 0}.mobile-break{display:none}.hero-meta{min-width:220px;padding-left:35px;border-left:1px solid var(--line);align-self:center}.hero-meta div{display:flex;align-items:baseline;gap:13px}.hero-meta strong{font:700 74px/1 var(--mincho);letter-spacing:-.045em}.hero-meta div span{font-size:12px;max-width:80px;line-height:1.8}.hero-meta p{font-size:12px;margin:17px 0 3px}.hero-meta p b{font-size:16px}.hero-meta p span{padding-inline:7px;color:#a3a8a2}.hero-meta small{font-size:10px;color:var(--muted)}.section-top{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:19px}.section-top h2{font-size:19px;margin:0;letter-spacing:-.02em}.demo-controls{display:flex;align-items:center;gap:10px;font-size:11px}.demo-controls button{border:1px solid var(--ink);background:transparent;border-radius:0;padding:5px 11px;font-size:11px;min-height:33px}.demo-controls button span{margin-left:6px;font-size:9px}.scrub-label{font-size:0}.demo-controls input{width:100px;accent-color:#53694b;cursor:pointer}.demo-controls output{font-family:Consolas,monospace;color:var(--muted);width:41px}.category-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.category-card{background:var(--white);border:0;border-radius:1.5rem;overflow:hidden;box-shadow:0 0 0 1px rgba(23,21,15,.07),0 1px 2px rgba(23,21,15,.04),0 14px 32px -22px rgba(23,21,15,.3)}.category-top{display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:.06em;font-weight:600;padding:15px 18px;color:var(--muted)}.category-top span:last-child{letter-spacing:0;color:var(--ink);font-size:11px}.category-art{display:flex;position:relative;align-items:center;justify-content:center;overflow:hidden;height:186px;background:var(--dark);color:var(--accent);text-decoration:none;margin-inline:10px;border-radius:7px}.category-art:hover{background:#242b32}.category-body{padding:18px 19px 15px}.category-body h3{font-size:18px;margin:0 0 7px;letter-spacing:-.035em}.category-body h3 a{text-decoration:none}.category-body p{color:var(--muted);font-size:12px;line-height:1.9;margin:0;min-height:45px}.category-body .category-examples{font-size:10px;color:#80877c;min-height:0;margin-top:10px}.category-action{display:flex;align-items:center;justify-content:space-between;text-decoration:none;border-top:1px solid #e9e9e1;padding-top:10px;margin-top:13px;font-size:12px;font-weight:650}.category-action span{font-size:19px;line-height:1}.demo-note{font-size:10px;color:var(--muted);margin:13px 0 0}.routes-section{margin-top:65px}.section-heading h2{font-size:27px;line-height:1.3;letter-spacing:.01em;margin:0 0 10px;font-family:var(--mincho);font-weight:700}.section-heading>p:last-child{color:var(--muted);margin:0;font-size:13px}.route-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:24px;border:1px solid var(--ink);border-radius:9px;overflow:hidden;background:var(--paper-deep)}.route-card{text-decoration:none;padding:20px 20px 17px;border-right:1px solid var(--ink);transition:background .16s}.route-card:last-child{border:0}.route-card:hover{background:#ded7c2}.route-no{font:700 17px var(--mincho);color:var(--accent-strong)}.route-card h3{font-size:14px;line-height:1.7;margin:10px 0 5px;letter-spacing:-.025em}.route-card p{font-size:11px;color:var(--muted);margin:0}.route-more{display:flex;justify-content:space-between;align-items:center;font-size:10px;margin-top:17px;color:#5d6654}.route-more b{font-size:17px;font-weight:400}.role-section{display:grid;grid-template-columns:1.05fr 1fr;gap:75px;margin-top:70px;padding:35px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);align-items:center}.role-section h2{font-size:25px;line-height:1.6;letter-spacing:-.04em;margin:0}.role-section>div>p:not(.eyebrow){color:var(--muted);font-size:13px;max-width:470px;margin:16px 0}.role-section>div>a{font-size:12px;text-decoration:none;font-weight:600}.role-flow{list-style:none;margin:0;padding:0}.role-flow li{position:relative;border-bottom:1px solid var(--line);padding:13px 0 13px 38px}.role-flow li:before{content:"";position:absolute;left:5px;top:33px;width:9px;height:9px;background:var(--accent);border-radius:50%}.role-flow li:last-child{border:0}.role-flow span{font-size:9px;letter-spacing:.1em;color:var(--muted);display:block}.role-flow strong{font-size:15px;font-weight:600}.role-flow p{font-size:11px;color:var(--muted);margin:3px 0 0}.about-section{margin-block:50px 55px}.about-section h2{font-size:21px}.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px}.about-grid h3{font-size:13px;margin:10px 0}.about-grid p{font-size:12px;color:var(--muted);margin:0;line-height:2}.source-links{display:flex;gap:23px;flex-wrap:wrap;font-size:11px;margin-top:21px}.site-footer{border-top:1px solid var(--ink);padding:22px 0 20px;background:var(--paper)}.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:11px}.footer-inner a{text-decoration:none}.footer-inner a:hover{text-decoration:underline}.footer-inner span{color:var(--muted);font-size:10px;margin-left:10px}.footer-sites{display:flex;align-items:center;gap:1.25rem;font-size:11px;font-weight:600}.footer-sites a[aria-current="page"]{font-weight:700;box-shadow:inset 0 -2px 0 var(--accent)}.footer-note{text-align:center;font-size:10px;color:var(--muted);margin:17px 22px 0}.list-main{padding-block:32px 65px}.back-link{font-size:11px;color:var(--muted);text-decoration:none;display:inline-block;margin-bottom:24px}.list-heading h1{font-size:34px;letter-spacing:.01em;margin:0;font-family:var(--mincho);font-weight:700}.list-heading .eyebrow{margin-bottom:10px}.list-heading>p:last-child{color:var(--muted);font-size:13px;margin:7px 0 27px}.search-row{display:flex;gap:13px;align-items:center}.search-box{flex:1;display:flex;align-items:center;gap:13px;background:var(--field);border:1.5px solid var(--ink);border-radius:0;min-height:47px;padding:0 15px}.search-box span{font-size:27px;color:var(--muted);line-height:1}.search-box input{border:0;outline:0;background:none;width:100%;min-width:0;font-size:14px;color:var(--ink)}.search-box:focus-within{outline:2px solid var(--ink);outline-offset:2px;box-shadow:0 0 0 4px var(--lime)}.select-wrap{font-size:10px;color:var(--muted);display:flex;gap:7px;align-items:center}.select-wrap select{background:var(--field);border:1.5px solid var(--ink);border-radius:0;max-width:200px;min-height:45px;padding:0 10px;font-size:11px;color:var(--ink)}.filter-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}.filter-chip{border:1px solid var(--rule);background:var(--field);border-radius:999px;padding:5px 13px;font-size:11px;min-height:34px}.filter-chip span{font-size:10px;margin-left:5px;color:var(--ink-soft)}.filter-chip:hover{border-color:var(--ink)}.filter-chip.active{background:var(--ink);color:var(--paper);border-color:var(--ink)}.filter-chip.active span{color:var(--paper-deep)}.list-status{display:flex;justify-content:space-between;align-items:center;margin-top:25px}.list-status p{font-size:13px;font-weight:600;margin:0}.list-status button{background:none;border:0;font-size:11px;text-decoration:underline;text-underline-offset:4px;color:var(--muted)}.list-note{font-size:10px;color:var(--muted);margin:9px 0 19px}.project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:19px;align-items:start}.project-card{border:0;border-top:3px solid var(--accent);border-radius:1.25rem;background:var(--white);padding:17px 19px;scroll-margin-top:30px;overflow-wrap:anywhere;box-shadow:0 0 0 1px rgba(23,21,15,.07),0 1px 2px rgba(23,21,15,.04),0 14px 32px -22px rgba(23,21,15,.3)}.project-card:target{outline:3px solid var(--accent);outline-offset:4px}.project-top{display:flex;justify-content:space-between;gap:8px;align-items:center}.project-kind{font-size:10px;color:var(--muted)}.project-card h2{font-size:18px;line-height:1.5;letter-spacing:-.02em;margin:10px 0 2px}.project-card h2 a{text-decoration:none}.project-card h2 a:hover{text-decoration:underline}.project-card h2 a span{font-size:11px;color:var(--muted)}.repo-name{font:10px/1.7 Consolas,monospace;color:var(--muted);margin:0 0 15px}.project-summary{font-size:12px;margin:0;min-height:68px}.use-case{font-size:11px;color:#5a6257;line-height:1.9;margin:13px 0 15px}.use-case b{font-size:10px;display:block;font-weight:600;color:var(--muted);margin-bottom:2px}.tags{display:flex;flex-wrap:wrap;gap:5px}.tags span{font-size:9px;background:var(--paper-deep);border-radius:3px;padding:2px 6px;color:var(--ink-soft)}.project-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:15px;font-size:10px}.project-meta a{color:#65705f}.project-meta>span{white-space:nowrap;color:var(--muted);font-variant-numeric:tabular-nums}.project-card details{border-top:1px solid #e4e6dd;margin-top:14px;padding-top:10px;font-size:11px}.project-card summary{cursor:pointer;color:#5c6950;font-size:10px;list-style-position:outside;margin-left:13px}.detail-body{font-size:11px;color:#5a6257;padding-top:7px}.detail-body p{margin:8px 0}.detail-body b{font-weight:650}.detail-body a{font-size:10px}.verification-label{font-size:9px;color:var(--muted)}.commit-label{font:9px Consolas,monospace;color:var(--muted);margin-left:8px}.install{display:flex;flex-direction:column;align-items:flex-start;gap:7px;margin:13px 0;background:var(--paper-deep);padding:10px;border-radius:0}.install code{font:10px/1.7 Consolas,monospace;overflow-wrap:anywhere;white-space:pre-wrap}.install button{border:1px solid #b8c0b1;padding:2px 8px;border-radius:4px;font-size:9px;background:transparent}.no-results{text-align:center;border:1px dashed var(--rule);border-radius:8px;padding:50px 20px}.no-results h2{font-size:19px}.no-results p,.noscript-note{font-size:13px;color:var(--muted)}.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);padding:8px 18px;background:var(--ink);color:var(--paper);border-radius:6px;font-size:12px;pointer-events:none;opacity:0;transition:opacity .15s;z-index:10;max-width:calc(100% - 30px)}.toast.visible{opacity:1}
/* Six hand-built, seekable expressions. */
.art-board{width:238px;padding:17px 20px;background:#ecf0df;border-radius:7px;color:#293327;position:relative;box-shadow:8px 8px 0 #738a5966}.board-label{font-size:10px;font-weight:700;letter-spacing:2px}.board-line{width:90%;height:4px;background:#b4c3a1;margin-top:14px;border-radius:2px}.board-line.short{width:62%;margin-top:7px}.board-steps{display:flex;gap:9px;margin-top:17px}.board-steps span{font:9px/1.5 Consolas,monospace;border:1px solid #b5c79e;border-radius:4px;padding:5px;background:#dee8c6}.board-cursor{position:absolute;bottom:-8px;right:17px;font-size:37px;line-height:1;color:#cbe681;text-shadow:2px 2px #273127}.art-render{position:relative;width:242px;height:132px}.render-sheet{position:absolute;width:196px;height:93px;top:5px;left:23px;border:1px solid #e4b26a;background:#4c4131;border-radius:7px}.render-sheet.rear{transform:rotate(-7deg)}.render-sheet.front{display:flex;align-items:center;justify-content:space-around;background:#f2c078;color:#26231d;font:23px Georgia,serif;font-weight:600;transform:rotate(3deg)}.render-sheet b{font-family:sans-serif;font-weight:400}.render-timeline{position:absolute;left:16px;bottom:9px;right:16px;height:13px;display:flex;gap:4px}.render-timeline span{flex:1;border-radius:3px;background:#52616a}.render-timeline span:nth-of-type(2){background:#e3b773}.render-timeline i{position:absolute;left:0;top:-3px;width:2px;height:20px;background:#fffefa;z-index:1}.art-render small{position:absolute;bottom:-12px;left:16px;font:8px Consolas,monospace;letter-spacing:2px;color:#a8b1b8}.art-type{text-align:center}.type-word{font-size:57px;line-height:1.25;font-weight:850;letter-spacing:-3px;display:flex;align-items:center;justify-content:center;color:#d7c7f4}.type-word span{display:inline-block;will-change:transform}.type-word b{color:#8f759a;font-size:62px}.type-pill{display:inline-flex;justify-content:space-between;gap:26px;align-items:center;background:#c8b7f0;color:#292135;font:9px/1.5 Consolas,monospace;font-weight:600;letter-spacing:1px;padding:8px 15px;border-radius:30px;margin-top:10px}.type-pill span{font-size:15px}.art-depth{position:relative;width:280px;height:180px;display:flex;align-items:center;justify-content:center;perspective:600px}.depth-orbit{width:195px;height:94px;border:1px solid #73959366;border-radius:50%;position:absolute;transform:rotate(-26deg)}.depth-orbit.second{transform:rotate(30deg);width:179px;height:119px}.cube{width:72px;height:72px;position:relative;transform-style:preserve-3d}.face{position:absolute;inset:0;border:1px solid #c9e6e3aa;background:#7bb7b37d}.face-front{transform:translateZ(36px)}.face-back{transform:rotateY(180deg) translateZ(36px);background:#60979566}.face-right{transform:rotateY(90deg) translateZ(36px);background:#6097959e}.face-left{transform:rotateY(-90deg) translateZ(36px)}.face-top{transform:rotateX(90deg) translateZ(36px);background:#c5e4dfd9}.face-bottom{transform:rotateX(-90deg) translateZ(36px)}.depth-label{position:absolute;bottom:12px;font:8px Consolas,monospace;letter-spacing:2px;color:#93bbb9}.art-vector,.art-data{height:100%;width:100%;display:block}
/* Practical stack guide. */
.guide-main{max-width:1020px;padding-block:33px 65px}.guide-heading h1{font-size:36px;letter-spacing:.01em;line-height:1.3;margin:0;font-family:var(--mincho);font-weight:700}.guide-heading>p:last-child{color:var(--muted);font-size:14px;max-width:680px}.guide-nav{display:flex;gap:10px;flex-wrap:wrap;margin:24px 0 35px}.guide-nav a{border:1px solid var(--line);border-radius:5px;padding:6px 12px;font-size:11px;text-decoration:none}.guide-intro{background:var(--paper-deep);border:1px solid var(--rule);border-radius:0;padding:21px 25px;margin-bottom:40px}.guide-intro h2{font-size:17px;margin:0 0 10px}.guide-intro p{font-size:13px;margin:7px 0;color:var(--ink-soft)}.guide-section{border-top:1px solid var(--line);padding-top:36px;margin-top:36px}.guide-section h2{font-size:27px;line-height:1.3;letter-spacing:.01em;margin:0 0 12px;font-family:var(--mincho);font-weight:700}.guide-section h3{font-size:16px;margin:24px 0 10px}.guide-section>p,.guide-section li{font-size:13px;line-height:2;color:#565f64}.guide-section ul,.guide-section ol{padding-left:22px}.stack-line{display:flex;gap:9px;align-items:center;flex-wrap:wrap;padding:17px 19px;border:1px solid #d5d9ca;background:var(--white);border-radius:7px;margin:18px 0}.stack-line span{font-size:12px;font-weight:600}.stack-line i{font-style:normal;color:#9aa58a}.guide-columns{display:grid;grid-template-columns:1fr 1fr;gap:28px}.code-panel{border:1px solid var(--ink);border-radius:0;overflow:hidden;background:var(--dark);margin:17px 0}.code-header{display:flex;justify-content:space-between;align-items:center;padding:8px 15px;background:#2e2a21;color:#e7e1d0;font-size:10px}.code-header button{background:none;border:1px solid #6b6552;color:#f2eee3;border-radius:0;padding:2px 8px;font-size:10px}.code-panel pre{margin:0;padding:16px;color:#e3e9da;overflow:auto;font:12px/1.9 Consolas,monospace;tab-size:2;white-space:pre-wrap;overflow-wrap:anywhere}.source-inline{font-size:11px!important;color:var(--muted)!important}.source-inline a{margin-right:14px}.guide-note{padding:14px 18px;border-left:3px solid var(--accent);background:var(--paper-deep);font-size:12px!important;line-height:1.9}.workflow-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:20px 0}.workflow-item{padding:19px;border:1px solid var(--line);border-radius:7px;background:var(--white)}.workflow-item strong{display:block;font-size:14px}.workflow-item span{font:17px Georgia,serif;color:#73845f}.workflow-item p{font-size:11px;margin:9px 0 0;color:var(--muted)}.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:7px;margin:20px 0}table{border-collapse:collapse;width:100%;background:var(--white);font-size:12px;text-align:left}th,td{padding:13px 15px;border-bottom:1px solid var(--line);vertical-align:top}th{background:#e8ebdf;font-size:11px;white-space:nowrap}tr:last-child td{border-bottom:0}.guide-footer-cta{border:1px solid var(--rule);background:var(--paper-deep);border-radius:0;padding:24px;display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:40px}.guide-footer-cta p{margin:0;font-size:14px;font-weight:600}.guide-footer-cta a{font-size:12px}
@media(min-width:1600px){.category-art{height:200px}}@media(max-width:1000px){.page-width,.header-inner{width:calc(100% - 44px)}.category-grid,.project-grid{gap:15px}.hero h1{font-size:38px}.hero-meta{padding-left:23px;min-width:180px}.hero-meta strong{font-size:61px}.category-body{padding-inline:15px}.category-body h3{font-size:16px}.category-body p{font-size:11px}.route-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.route-card:nth-child(2){border-right:0}.route-card:nth-child(-n+2){border-bottom:1px solid #c9cec1}.role-section{gap:32px}.project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.search-row{flex-wrap:wrap}.search-box{flex-basis:100%}.guide-main{max-width:900px}}@media(max-width:760px){.category-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.header-inner{align-items:center;gap:15px}.brand{font-size:13px;gap:9px}.brand small{font-size:9px}nav{gap:12px;font-size:10px;justify-content:flex-end}nav .nav-github{display:none}.hero{padding-block:33px;gap:20px}.hero h1{font-size:32px}.hero-meta{min-width:142px;padding-left:20px}.hero-meta strong{font-size:52px}.hero-meta div{gap:9px}.hero-meta div span{font-size:10px}.hero-meta p{font-size:10px}.hero-meta small{font-size:9px}.section-top{flex-wrap:wrap}.demo-controls{margin-left:auto}.category-art{height:168px}.art-board{width:210px}.type-word{font-size:48px}.role-section{grid-template-columns:1fr;gap:18px}.about-grid{gap:26px}.workflow-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.guide-columns{grid-template-columns:1fr;gap:0}.guide-heading h1{font-size:30px}}@media(max-width:520px){.page-width,.header-inner{width:calc(100% - 32px)}.header-inner{align-items:center;gap:0;padding-block:0}.brand{flex:0 0 100%;min-height:44px;font-size:13px}.brand small{font-size:10px}.site-header nav:not(.header-sites){display:none}nav a{min-height:44px;display:inline-flex;align-items:center}.hero{display:block;padding-block:30px 26px}.hero h1{font-size:clamp(25px,7vw,33px);line-height:1.4}.hero-description{font-size:12px;margin-top:14px}.mobile-break{display:block}.hero-meta{margin-top:24px;padding-left:0;border-left:0;border-top:1px solid var(--line);padding-top:15px;display:flex;align-items:center;justify-content:space-between;gap:9px}.hero-meta strong{font-size:36px}.hero-meta div span{max-width:none;font-size:10px}.hero-meta p{margin:0;font-size:9px}.hero-meta p b{font-size:13px}.hero-meta small{display:none}.section-top{display:block;margin-bottom:14px}.section-top h2{font-size:17px}.demo-controls{margin-top:12px;justify-content:flex-start;gap:10px}.demo-controls input{width:110px}.category-grid{grid-template-columns:1fr;gap:17px}.category-art{height:190px}.category-top{padding:12px 18px}.category-body{padding:17px 18px 14px}.category-body h3{font-size:19px}.category-body p{font-size:12px;min-height:0}.category-body .category-examples{font-size:10px}.category-action{padding-top:10px;margin-top:12px}.art-board{width:238px}.type-word{font-size:60px}.routes-section{margin-top:40px}.section-heading h2{font-size:23px}.route-grid{grid-template-columns:1fr}.route-card{border-right:0;border-bottom:1px solid #c9cec1!important;padding:15px 18px}.route-card:last-child{border:0!important}.route-card h3{margin-top:5px;font-size:15px}.route-no{float:right;margin-top:3px}.route-more{margin-top:9px}.role-section{margin-top:40px;padding-block:25px}.role-section h2{font-size:23px}.about-section{margin-block:35px}.about-grid{grid-template-columns:1fr;gap:17px}.source-links{gap:15px;font-size:10px}.footer-inner{display:grid;grid-template-columns:1fr;gap:10px}.footer-note{text-align:left;font-size:9px;margin-inline:16px}.list-main{padding-top:24px}.list-heading h1{font-size:27px}.list-heading>p:last-child{font-size:12px}.back-link{margin-bottom:19px}.search-row{gap:12px}.select-wrap{flex-direction:column;align-items:flex-start;gap:3px;flex:1}.select-wrap select{width:100%;max-width:100%;font-size:11px}.filter-chip{font-size:10px;padding:5px 8px}.filter-chips{gap:6px}.project-grid{grid-template-columns:1fr}.project-summary{min-height:0}.project-card h2{font-size:20px}.project-card{padding:17px 18px}.list-note{line-height:1.9}.guide-heading h1{font-size:26px}.guide-heading>p:last-child{font-size:12px}.guide-nav{gap:7px}.guide-nav a{font-size:10px;padding:5px 9px}.guide-intro{padding:15px 17px}.guide-intro p{font-size:12px}.guide-section h2{font-size:24px}.guide-section>p,.guide-section li{font-size:12px}.stack-line{padding:12px 14px;gap:6px}.stack-line span{font-size:11px}.workflow-grid{grid-template-columns:1fr}.workflow-item{padding:14px}.guide-footer-cta{display:block}.guide-footer-cta a{display:inline-block;margin-top:12px}.code-panel pre{font-size:10px;padding:13px}.table-wrap th,.table-wrap td{padding:10px}.table-wrap table{min-width:530px}}
/* Bottom tab bar (phones): the in-page menu, same treatment as the main site.
   Header keeps the family's two rows — brand, then the three specialist sites. */
.tabbar{display:none}
@media(max-width:520px){
  body{padding-bottom:calc(3.5rem + env(safe-area-inset-bottom))}
  html{scroll-padding-bottom:calc(3.5rem + env(safe-area-inset-bottom))}
  a,button,input,select,textarea,summary{scroll-margin-bottom:calc(3.5rem + env(safe-area-inset-bottom) + 1rem)}
  .tabbar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0;padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);background:var(--paper);border-top:1px solid var(--ink)}
  .tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.125rem;min-width:0;min-height:3.5rem;padding:.25rem .25rem .375rem;color:var(--ink);font-size:.8125rem;line-height:1.2;font-weight:600;text-decoration:none;text-align:center}
  .tab:hover{text-decoration:none}
  .tab span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tab svg{width:1.25rem;height:1.25rem;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .tab[aria-current="page"]{font-weight:700;box-shadow:inset 0 3px 0 var(--accent)}
  .toast{bottom:calc(3.5rem + env(safe-area-inset-bottom) + 12px)}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}

.about-grid h3{font-size:15px}.about-grid p{font-size:13px}