@font-face{font-family:'Atelier Zen';src:url('../downloads/fonts/zenkakugothicnew/ZenKakuGothicNew-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'Atelier Zen';src:url('../downloads/fonts/zenkakugothicnew/ZenKakuGothicNew-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:'Atelier Space';src:url('../downloads/fonts/spacegrotesk/SpaceGrotesk%5Bwght%5D.ttf') format('truetype');font-weight:300 700;font-display:swap}
@font-face{font-family:'Atelier Mincho';src:url('../downloads/fonts/shipporimincho/ShipporiMincho-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
:root{--paper:#f2eee3;--panel:#e7e1d0;--field:#fbf9f3;--ink:#17150f;--muted:#4f4a3f;--line:#d9d2bf;--rule:rgba(23,21,15,.2);--acid:#cbef3a;--lime:#cbef3a;--warn:#a63a1f;--sans:'Atelier Zen',-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Meiryo","Noto Sans JP",system-ui,sans-serif;--mincho:'Atelier Mincho',"Hiragino Mincho ProN","Yu Mincho","BIZ UDPMincho","Noto Serif JP",serif}
html{scroll-behavior:auto;scroll-padding-top:110px}body{background:var(--paper);font-family:var(--sans);color:var(--ink)}button,a,input,select{touch-action:manipulation}
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--ink);outline-offset:2px;box-shadow:0 0 0 5px var(--lime)}
.shell{max-width:1320px;padding-left:42px;padding-right:42px}.header{background:var(--paper);border-bottom:1px solid var(--ink);backdrop-filter:none}.header-inner{min-height:0;gap:0 28px;padding-block:4px}.atelier-brand{gap:12px;text-decoration:none}.brand-symbol{font:700 44px/.9 'Atelier Space',sans-serif;letter-spacing:-5px}.atelier-brand>span:last-child{font:700 clamp(1rem,2.2vw,1.25rem)/1.2 "Segoe UI",Arial,system-ui,sans-serif;letter-spacing:-.035em}.atelier-brand small{display:block;font:400 10px/1.5 var(--sans);letter-spacing:0;margin-top:6px;color:var(--muted)}.header nav{gap:28px}.header-github{display:inline-flex;align-items:center;min-height:2.75rem;border:1px solid var(--ink);padding:6px 15px;border-radius:0}
/* 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;color:var(--ink)}
.header-sites a[aria-current="page"]{font-weight:700;box-shadow:inset 0 -3px 0 var(--blue)}
.eyebrow{font:600 11px/1.5 'Atelier Space',sans-serif;letter-spacing:.11em;color:var(--ink)}
.button{border-radius:0;padding:13px 19px;font-size:13px;border:1px solid var(--ink)}.button.primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}.button.primary:hover{background:#2e2a21}.button.outline{color:var(--ink);background:transparent}.text-link{color:var(--ink);font-size:13px}
.section{padding-top:40px;padding-bottom:48px}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:35px;margin-bottom:24px}.section-heading h2{font:700 clamp(28px,3vw,38px)/1.35 var(--mincho);letter-spacing:-.01em;margin:10px 0 0}.section-heading>p{font-size:13px;line-height:1.9;margin:0 0 6px;max-width:440px}.results{font-size:12px;color:var(--muted);margin:14px 0}

/* Top: the subject is the skill. Entrances are pill filters like the main gallery's chips. */
.effect-hero{padding-top:32px;padding-bottom:26px;border-bottom:1px solid var(--ink)}.effect-hero h1{font:700 clamp(30px,4.2vw,54px)/1.3 var(--mincho);letter-spacing:-.02em;margin:12px 0 10px}.effect-hero .hero-description{font-size:15px;line-height:1.9;margin:0 0 16px;max-width:640px}
.need-title{margin:0 0 10px;font-size:13px;font-weight:700}.need-entrance ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}.need-entrance button{position:relative;display:inline-flex;align-items:center;gap:.45rem;min-height:2.75rem;padding:.375rem .9375rem;border:1px solid var(--rule);border-radius:999px;background:var(--field);color:var(--ink);text-align:left;font:inherit;font-size:.9375rem;line-height:1.3;cursor:pointer}.need-entrance b{font-size:.9375rem;font-weight:700;line-height:1.3}.need-entrance span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.need-entrance small{font-size:.8125rem;font-variant-numeric:tabular-nums;color:var(--ink-soft)}.need-entrance button:hover{background:var(--panel);border-color:var(--ink)}.need-entrance button[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}.need-entrance button[aria-pressed=true] small{color:var(--paper-deep)}

/* One list: controls, selected state and cards. */
.effect-tools{display:grid;grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));gap:12px;align-items:end;padding:18px 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--line)}.effect-tools label{display:grid;gap:6px;font-size:12px;font-weight:700;min-width:0}.effect-tools input,.effect-tools select{width:100%;min-width:0;min-height:44px;padding:10px 12px;border:1px solid var(--ink);border-radius:0;background:transparent;color:var(--ink);font:inherit;font-size:14px;font-weight:400}.effect-tools select:disabled{opacity:.5}
.effect-active{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.effect-active:empty{display:none}.effect-active button{min-height:36px;padding:7px 12px;border:1px solid var(--ink);background:var(--acid);color:var(--ink);font:inherit;font-size:12px;cursor:pointer}.effect-active button[data-clear-filters]{background:transparent}
.effect-data-note{margin:0 0 14px;padding:10px 14px;border-left:3px solid var(--ink);background:var(--panel);font-size:12px;line-height:1.8}
.effect-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}
.effect-card{display:flex;flex-direction:column;min-width:0;padding:1.25rem;border:0;border-radius:1.5rem;background:var(--field);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)}
.effect-repo{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0;font-size:11px;color:var(--muted);overflow-wrap:anywhere}.effect-repo a{color:var(--muted)}.effect-repo b{color:var(--ink)}.effect-warning{padding:1px 7px;border:1px solid var(--warn);color:var(--warn);font-weight:700}
.effect-card h3{margin:8px 0 6px;font-size:21px;line-height:1.5;letter-spacing:-.01em;overflow-wrap:anywhere}.effect-card h3 a{color:var(--ink);text-decoration:none}.effect-card h3 a:hover{text-decoration:underline;text-underline-offset:4px}
.effect-job{margin:0 0 12px;font-size:13px;line-height:1.85}
.effect-facts{margin:0 0 12px;border-top:1px solid var(--line)}.effect-facts>div{display:grid;grid-template-columns:7.5em minmax(0,1fr);gap:12px;padding:8px 0;border-bottom:1px solid var(--line)}.effect-facts dt{font-size:11px;font-weight:700;padding-top:2px}.effect-facts dd{margin:0;font-size:13px;line-height:1.8;overflow-wrap:anywhere}
.effect-tags{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px;padding:0}.effect-tags button{min-height:28px;padding:2px 9px;border:1px solid var(--line);background:transparent;color:var(--ink);font:inherit;font-size:11px;cursor:pointer}.effect-tags button:hover{border-color:var(--ink)}.effect-tags button[aria-pressed=true]{background:var(--acid);border-color:var(--ink)}
.effect-proof{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,42%);grid-template-areas:"title image" "note image" "case image";align-content:start;column-gap:16px;padding:14px;background:var(--panel)}.effect-proof-title{grid-area:title;margin:0 0 6px;font-size:11px;font-weight:700;letter-spacing:.04em}.effect-proof>.effect-inspect,.effect-proof>.effect-missing{grid-area:note;margin:0}.effect-inspect{font-size:13px;line-height:1.8}.effect-inspect b{display:inline-block;margin-right:8px;padding:0 6px;background:var(--ink);color:var(--paper);font-size:11px}.effect-case{grid-area:case;margin:10px 0 0;font-size:11px;line-height:1.7;color:var(--muted)}.effect-case span{white-space:nowrap}
.effect-proof-image{grid-area:image;position:relative;align-self:start;display:block;width:100%;aspect-ratio:16/9;padding:0;border:1px solid var(--ink);background:#dcd8cb;overflow:hidden;cursor:pointer}.effect-proof-image.square-preview{aspect-ratio:1}.effect-proof-image img{display:block;width:100%;height:100%;object-fit:contain}.effect-proof-image span{position:absolute;left:6px;bottom:6px;padding:2px 7px;background:var(--acid);border:1px solid var(--ink);color:var(--ink);font-size:10px;font-weight:700}
.effect-others{margin:10px 0 0;font-size:12px;line-height:1.9}.effect-others button{margin:0 10px 0 0;padding:0;border:0;background:transparent;color:var(--ink);font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.effect-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:auto;padding-top:14px}.effect-actions .effect-primary{padding:11px 16px;background:var(--ink);color:var(--paper);font-size:13px;font-weight:700;text-decoration:none}.effect-actions .effect-primary:hover{background:#32412a}.effect-actions button{min-height:42px;padding:9px 14px;border:1px solid var(--ink);background:transparent;color:var(--ink);font:inherit;font-size:13px;font-weight:700;cursor:pointer}.effect-actions a[download]{font-size:12px;color:var(--ink)}
.effect-missing{color:#6b5a2f;font-size:12px;line-height:1.8}
.effect-empty{grid-column:1/-1;padding:24px;border:1px solid var(--ink);background:var(--panel);font-size:14px;line-height:1.9}.effect-empty p{margin:0 0 6px}.effect-empty ul{margin:6px 0 14px;padding-left:20px}.effect-empty li button{padding:0;border:0;background:transparent;color:var(--ink);font:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.effect-bundle{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:36px;font-size:12px;color:var(--muted)}.effect-bundle a{color:var(--ink);font-weight:700}

.effect-how{background:var(--panel);color:var(--ink);border-top:1px solid var(--ink);padding:56px 0}.effect-how .eyebrow{color:var(--muted)}.effect-how h2{font:700 32px/1.4 var(--mincho);margin:8px 0 24px}.effect-how-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px}.effect-how-steps li{border-top:1px solid var(--rule);padding-top:14px}.effect-how-steps b{font:500 30px/1 'Atelier Space',var(--sans);color:var(--blue)}.effect-how-steps h3{font-size:15px;margin:12px 0 8px}.effect-how-steps p{margin:0;font-size:12px;line-height:1.9;color:var(--muted)}.effect-how .text-link{display:inline-block;margin-top:24px;color:var(--ink)}.effect-how a:focus-visible{outline-color:var(--ink)}
.atelier-fonts{border-top:1px solid var(--ink)}

/* Repository page: problem → what it does → input/output → features used → pages → apply. */
.doc-shell{padding-top:44px;padding-bottom:85px}.doc-shell:has(#repository-detail){max-width:1080px}
.effect-top{margin:24px 0 8px}.effect-top .repo-owner{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;font-size:12px;font-weight:400;color:var(--muted);overflow-wrap:anywhere}.effect-top .repo-owner a{color:var(--muted)}.effect-top .repo-owner b{color:var(--ink)}.effect-top h1{font:700 clamp(28px,4vw,46px)/1.35 var(--mincho);letter-spacing:-.01em;margin:12px 0}.effect-top>.repo-desc{font-size:16px;line-height:1.9;max-width:820px}.effect-siblings{font-size:13px;line-height:1.9}.effect-siblings a{color:var(--ink)}
.effect-toc{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px;padding-top:16px;border-top:1px solid var(--line)}.effect-toc a{padding:6px 10px;border:1px solid var(--line);color:var(--ink);font-size:12px;text-decoration:none}.effect-toc a:hover{border-color:var(--ink)}
#problem{scroll-margin-top:160px}
.effect-proof-dialog{width:min(1100px,96vw);max-height:94vh;overflow:auto;padding:20px;background:var(--paper);color:var(--ink);border:1px solid var(--ink)}.effect-proof-dialog::backdrop{background:#17201bd9}.effect-proof-dialog>header{display:flex;align-items:start;justify-content:space-between;gap:20px;margin-bottom:16px}.effect-proof-dialog h2{font:700 20px/1.5 var(--mincho);margin:0}.effect-proof-dialog>header button{flex-shrink:0}.effect-proof-images{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(360px,100%),1fr));gap:16px}.effect-proof-images figure{margin:0;min-width:0}.effect-proof-images img{display:block;width:100%;aspect-ratio:16/9;max-height:62vh;object-fit:contain;background:#fff;border:1px solid var(--line)}.effect-proof-images figcaption{font-size:12px;margin-top:6px}.effect-proof-context{display:grid;grid-template-columns:110px 1fr;gap:8px 14px;font-size:13px;line-height:1.9}.effect-proof-context dt{font-weight:700}.effect-proof-context dd{margin:0}.effect-proof-dialog>p{margin-bottom:0}body:has(.effect-proof-dialog[open]){overflow:hidden}
.effect-proof-dialog .effect-proof-actions{margin:0 0 16px}
@media(max-width:650px){#problem{scroll-margin-top:240px}.effect-proof-dialog{padding:14px}.effect-proof-dialog h2{font-size:17px}.effect-proof-dialog>header{gap:10px}.effect-proof-context{grid-template-columns:1fr;gap:2px}.effect-proof-context dd{margin-bottom:10px}.effect-proof-images img{max-height:40vh}}
.effect-section{padding:30px 0;border-top:1px solid var(--ink)}.effect-section h2{display:flex;align-items:baseline;gap:12px;margin:0 0 16px;font:700 24px/1.45 var(--mincho)}.effect-step{flex:0 0 auto;display:inline-grid;place-items:center;width:30px;height:30px;background:var(--acid);border:1px solid var(--ink);font:600 14px/1 'Atelier Space',var(--sans)}.effect-section h3{margin:20px 0 8px;font-size:15px}.effect-section h4{margin:0 0 8px;font-size:13px}.effect-section p,.effect-section li{font-size:14px;line-height:1.95;overflow-wrap:anywhere}.effect-section ul,.effect-section ol{padding-left:22px}.effect-lead{font-size:16px!important;max-width:820px}
.effect-upstream{margin:16px 0 8px;padding:12px 16px;border-left:3px solid var(--ink);background:var(--panel)}.effect-upstream p{margin:0}.effect-label{font-size:11px!important;font-weight:700;margin-bottom:4px!important}.effect-source{font-size:13px!important}.effect-source a{color:var(--ink);overflow-wrap:anywhere}
.effect-io,.effect-scope{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.effect-io>div,.effect-scope>div{min-width:0;padding:14px 16px;border:1px solid var(--line)}.effect-io h3{margin-top:0}.effect-scope{margin-top:14px}.effect-note{font-size:13px!important}.effect-note a{color:var(--ink)}
.effect-case-title{margin:0 0 4px!important;font:700 19px/1.6 var(--mincho)!important}.effect-case-meta{margin:0 0 12px;font-size:12px!important;color:var(--muted)}.effect-boundary{margin-top:14px;padding:10px 14px;border:1px dashed var(--ink);font-size:13px!important}.effect-boundary a{color:var(--ink)}
.effect-details{margin-top:16px;font-size:13px}.effect-details summary{cursor:pointer;font-weight:700;min-height:32px}.effect-details pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px}
.effect-pages{list-style:none;margin:0;padding:0!important;display:grid;gap:18px}.effect-page{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:20px;padding:16px;background:var(--panel)}.effect-page-image{position:relative;display:block;width:100%;aspect-ratio:16/9;padding:0;border:1px solid var(--ink);background:#dcd8cb;overflow:hidden;cursor:pointer}.effect-page-image img{display:block;width:100%;height:100%;object-fit:contain}.effect-page-image.is-invalid{display:grid;place-items:center;cursor:default;font-size:12px}.effect-page-noimage{display:grid;place-items:center;height:100%;font-size:12px;line-height:1.6}.effect-page-copy{min-width:0}.effect-page-label{margin:0 0 8px!important}.effect-page-label b{margin-right:10px;padding:1px 8px;background:var(--ink);color:var(--paper);font-size:12px}.effect-page-copy dl{display:grid;grid-template-columns:6.5em minmax(0,1fr);gap:6px 12px;margin:0 0 10px}.effect-page-copy dt{font-size:12px;font-weight:700;padding-top:3px}.effect-page-copy dd{margin:0;font-size:14px;line-height:1.85;overflow-wrap:anywhere}.effect-page-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:0!important}.effect-page-actions a{color:var(--ink);font-size:13px}.effect-page-actions .button{min-height:42px}
.effect-edit-note{margin-top:16px;padding:12px 16px;border-left:3px solid var(--ink);background:#fff9ed;font-size:13px!important}.effect-edit-note a{margin-left:6px;color:var(--ink);font-weight:700}
.effect-howto{margin:0 0 16px}.effect-howto li{margin-bottom:4px}.effect-chooser{margin:8px 0 12px}.effect-works h2{font:700 20px/1.5 var(--mincho)}
.repo-chips span{background:var(--panel,#e7e1d0);border-radius:0}.repo-guide-section{border-top:1px solid var(--ink)}.repo-guide-section h2{font:700 22px/1.5 var(--mincho);margin:0 0 12px}.repo-guide-section pre,.repo-guide-section textarea{background:transparent;border-color:var(--line);border-radius:0}.repo-guide-section>details{font-size:12px}.repo-guide-section>details summary{cursor:pointer;font-weight:700}.repo-guide-section>details[open]{margin-top:15px}.repo-code-actions{align-items:center}.repo-code-actions a,.repo-code-actions button{color:var(--ink)}.repo-code-actions .button.primary{color:var(--paper)}.repo-example-row button{color:var(--ink)}.repo-example-row img{border-radius:0}
#repository-font{display:block;width:100%;max-width:360px;margin:10px 0 8px;padding:11px 13px;border:1px solid var(--line);border-radius:0;background:transparent;font:inherit;font-size:13px}#repository-copy-state{display:block;margin-top:10px;font-size:12px}
.repository-request-inputs>label,.repository-request-options label,.repo-guide-section>label[for="repository-prompt"]{display:block;font-size:12px;font-weight:700;margin:15px 0 7px}.repository-request-inputs input{display:block;width:100%;min-width:0;padding:11px 13px;border:1px solid var(--line);border-radius:0;background:transparent;font:inherit;font-size:13px}.repository-request-options{display:grid;grid-template-columns:minmax(0,1fr) 90px;gap:12px;margin-bottom:18px}.repository-request-inputs #repository-content{min-height:160px}.repo-guide-section #repository-assemble{margin:5px 0 8px}.repository-used-prompt{margin-top:20px}.repository-used-prompt summary{cursor:pointer;font-size:12px;font-weight:700}.repository-used-prompt pre{max-height:360px;overflow:auto}
.repo-archive-note{padding:18px;border-left:3px solid var(--ink);background:var(--panel);font-size:13px;line-height:1.9}
.repository-skill-text{white-space:pre-wrap;overflow-wrap:anywhere;max-height:36rem;overflow:auto;font-size:.875rem;line-height:1.8}
#repository-case{display:block;width:100%;min-height:44px;margin:8px 0 12px;padding:10px 12px;font:inherit;background:#faf8f1;color:#17231f;border:1px solid #aba99d}
#repository-detail .repo-license-notice{margin:16px 0;padding:12px 16px;border-left:3px solid var(--warn);background:#fff9ed;font-size:14px;line-height:1.8}

/* Player: current skill, its change, and what to inspect on this page. */
#case-dialog{border:1px solid var(--ink);border-radius:2px;background:var(--paper);box-shadow:0 40px 100px #0007;animation:atelier-float .23s cubic-bezier(.2,.8,.2,1)}#case-dialog::backdrop{background:#0d161db3;backdrop-filter:blur(6px);animation:atelier-shade .18s ease}.player-header{background:var(--paper);border-color:var(--line)}.player-header h2{font-size:17px}.player-kicker{color:var(--ink)!important;font-weight:700}.player-header-actions button{border-radius:0;border-color:var(--line);color:var(--ink)}.case-controls{background:var(--paper);border-color:var(--line)}.case-controls button,.case-pages button{border-radius:0}.case-controls button{border-color:var(--line);color:var(--ink)}.case-pages{background:var(--paper)}.case-pages button[aria-current=true]{outline-color:var(--ink)}.case-pages button:not(:has(img)){min-height:70px;min-width:150px;background:var(--panel,#e7e1d0);display:flex;align-items:center}.case-pages button span{line-height:1.6;font-size:10px;white-space:normal}.case-bottom{background:var(--paper);border-color:var(--line)}#case-note{background:var(--panel);border-radius:0}#case-skill[hidden]{display:none}
.case-effect{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) auto;gap:10px 22px;align-items:start;margin:0 0 12px;padding:12px 14px;background:var(--panel);border-left:3px solid var(--ink)}.case-effect:empty{display:none}.case-effect p{margin:0}.case-effect-kicker,.case-effect-label{font-size:11px;font-weight:700;color:var(--muted)}.case-effect-name{font-size:14px;font-weight:700;line-height:1.6}.case-effect-change,.case-effect-inspect{font-size:13px;line-height:1.75}.case-effect-rule{margin-top:4px!important;font-size:12px;line-height:1.7}.case-effect-rule span{margin-right:8px;font-weight:700}.case-effect-jumps{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px!important;font-size:11px}.case-effect-jumps button{min-width:32px;min-height:32px;border:1px solid var(--ink);background:transparent;color:var(--ink);font:inherit;font-size:12px;cursor:pointer}.case-effect-jumps button[aria-current=true]{background:var(--ink);color:var(--paper)}.case-effect-link{align-self:center;color:var(--ink);font-size:12px;font-weight:700;white-space:nowrap}
#case-dialog.expanded .case-effect-change{display:none}
@keyframes atelier-float{from{opacity:0;transform:translateY(25px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes atelier-shade{from{opacity:0}to{opacity:1}}

.footer{background:var(--paper);color:var(--ink);border-top:1px solid var(--ink)}.footer a,.footer-brand{color:var(--ink)}.footer-bottom{border-color:var(--rule);color:var(--muted);font-size:10px}.footer-main p{font-size:12px;color:var(--muted)}.footer-links{flex-wrap:wrap;row-gap:10px}.footer a:focus-visible{outline-color:var(--ink)}
.footer-sites{display:flex;flex-wrap:wrap;gap:.125rem 1.5rem;padding-top:14px;border-top:1px solid var(--rule);font-size:.8125rem;font-weight:600}
.footer-sites a{display:inline-flex;align-items:center;min-height:2.75rem;text-decoration:none}
.footer-sites a[aria-current="page"]{font-weight:700;box-shadow:inset 0 -2px 0 var(--blue)}
.doc-hero h1{font:700 clamp(30px,3.6vw,48px)/1.4 var(--mincho);letter-spacing:-.01em}.doc-section h2{font:700 24px/1.5 var(--mincho)}.doc-section p,.doc-section li{font-size:14px;line-height:2}.doc-section pre{padding:25px;background:#e9e5d9;white-space:pre-wrap;overflow-wrap:anywhere;font-size:13px;line-height:1.9}.doc-section h3{margin-top:22px;font-size:16px}
.atelier-edition{background:var(--panel);color:var(--ink);border-top:1px solid var(--ink)}.edition-inner{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px 28px;padding-top:12px;padding-bottom:12px}.edition-model{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin:0}.edition-model span{font:600 10px/1.4 'Atelier Space',var(--sans);letter-spacing:.14em;color:var(--muted)}.edition-model b{font:700 15px/1.2 'Atelier Space',var(--sans);letter-spacing:.06em;color:var(--blue)}.edition-copy{margin:0;font-size:12px;line-height:1.8;color:var(--ink-soft)}.edition-copy b{color:var(--ink)}.edition-copy span{display:block;font-size:11px;color:var(--muted)}.edition-link{color:var(--ink);font-size:12px;font-weight:700;white-space:nowrap;border-bottom:1px solid var(--blue);padding-bottom:2px}.atelier-edition a:focus-visible{outline-color:var(--ink)}
.atelier-edition.is-pending{background:#e9e5d9;color:var(--ink);border-top:1px solid var(--line)}.is-pending .edition-model b{font:700 13px/1.4 var(--sans);letter-spacing:0;color:var(--ink)}.is-pending .edition-model span,.is-pending .edition-copy span{color:var(--muted)}.is-pending .edition-copy,.is-pending .edition-copy b,.is-pending .edition-link{color:var(--ink)}.atelier-edition.is-pending a:focus-visible{outline-color:#698a00}
.guide-lead{margin-top:12px;font-size:14px;line-height:2}.guide-kit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:0;border-top:1px solid var(--ink)}.guide-kit>div{padding:18px 22px 20px 0;border-bottom:1px solid var(--line);min-width:0}.guide-kit>div:nth-child(odd){border-right:1px solid var(--line)}.guide-kit>div:nth-child(even){padding-left:22px}.guide-kit dt{margin-bottom:6px;font:700 17px/1.5 var(--mincho)}.guide-kit dd{margin:0;font-size:13px;line-height:1.9}.guide-steps b{margin-right:8px}.doc-section .guide-caution{padding:16px 18px;border-left:3px solid var(--ink);background:#e9e5d9;font-size:13px}.guide-caution b{display:block;margin-bottom:4px}
.status-stamp{font-size:12px;color:var(--muted)}.status-figures{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:0 0 14px;border-top:1px solid var(--ink)}.status-figures>div{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:6px;min-width:0;padding:14px 12px 14px 0;border-bottom:1px solid var(--line)}.status-figures dt{font-size:11px;color:var(--muted)}.status-figures dd{margin:0;font:500 32px/1 'Atelier Space',var(--sans)}.status-figures small{margin-left:3px;font:700 11px/1 var(--sans)}.status-model{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;padding:14px 18px;background:var(--ink);color:var(--paper)}.status-model span{font:600 10px/1.4 'Atelier Space',var(--sans);letter-spacing:.14em;color:#b9c2b9}.status-model b{font:700 22px/1.2 'Atelier Space',var(--sans);letter-spacing:.06em;color:var(--acid)}.status-list{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:10px 24px;font-size:14px;line-height:1.8}.status-list dt{font-weight:700}.status-list dd{margin:0;overflow-wrap:anywhere}.status-pending{padding:16px 18px;border-left:3px solid var(--ink);background:#e9e5d9}.status-pending b{display:inline-block;margin-right:10px;padding:1px 8px;border:1px solid var(--ink);background:var(--acid);font-size:12px}
.license-table-wrap small{font-size:11px;line-height:1.7;color:var(--muted)}

@media(max-width:1100px){.shell{padding-left:30px;padding-right:30px}.effect-how-steps{grid-template-columns:repeat(3,minmax(0,1fr))}.effect-tools{grid-template-columns:repeat(3,minmax(0,1fr))}.effect-search{grid-column:1/-1}}
@media(max-width:900px){.effect-list{grid-template-columns:1fr;gap:1.25rem}.case-effect{grid-template-columns:minmax(0,1fr)}.case-effect-link{justify-self:start}}
@media(max-width:800px){.header nav{gap:18px}.header nav a{font-size:12px}.header-github{display:none}.atelier-brand>span:last-child{font-size:13px}.section{padding-top:32px;padding-bottom:36px}.section-heading{display:block}.section-heading>p{margin-top:12px;max-width:none}.edition-inner{grid-template-columns:1fr;gap:6px}.status-figures{grid-template-columns:repeat(3,minmax(0,1fr))}.effect-page{grid-template-columns:minmax(0,220px) minmax(0,1fr)}.case-controls{flex-wrap:wrap}}
@media(max-width:600px){.shell{padding-left:20px;padding-right:20px}.brand-symbol{font-size:34px}.atelier-brand{gap:7px}.atelier-brand>span:last-child{font-size:10px}.atelier-brand small{font-size:9px}
 .effect-hero{padding-top:24px;padding-bottom:20px}.effect-hero h1{font-size:28px}.effect-hero .hero-description{font-size:14px;margin-bottom:12px}.need-entrance button{min-height:2.75rem;padding:.375rem .875rem}.need-entrance b{font-size:.875rem}
 .effect-tools{grid-template-columns:1fr 1fr;gap:10px}.effect-tools label:last-child{grid-column:1/-1}.section-heading h2{font-size:26px}
 .effect-card h3{font-size:19px}.effect-facts>div{grid-template-columns:1fr;gap:2px}.effect-proof{grid-template-columns:minmax(0,1fr);grid-template-areas:"title" "note" "image" "case";row-gap:8px}.effect-proof-image{margin-top:4px}.effect-case{margin-top:0}.effect-case span{white-space:normal}.effect-actions{gap:10px}.effect-actions .effect-primary,.effect-actions button{flex:1 1 100%;text-align:center}
 .effect-how h2{font-size:26px}.effect-how-steps{grid-template-columns:1fr;gap:14px}.effect-how-steps li{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:12px}.effect-how-steps b{grid-row:1/3;font-size:24px}.effect-how-steps h3{margin:0 0 4px}.effect-how-steps p{grid-column:2}
 .doc-shell{padding-top:26px}.effect-top h1{font-size:28px}.effect-top>.repo-desc{font-size:15px}.effect-section h2{font-size:20px}.effect-io,.effect-scope{grid-template-columns:1fr;gap:12px}.effect-page{grid-template-columns:1fr;padding:12px}.effect-page-copy dl{grid-template-columns:1fr;gap:2px}.effect-page-copy dd{margin-bottom:8px}.effect-page-actions .button{flex:1 1 100%;text-align:center}
 .guide-kit{grid-template-columns:1fr}.guide-kit>div,.guide-kit>div:nth-child(even){padding:16px 0 18px;border-right:0}.guide-kit>div:nth-child(odd){border-right:0}.status-figures{grid-template-columns:repeat(2,minmax(0,1fr))}.status-figures dd{font-size:28px}.status-list{grid-template-columns:1fr;gap:2px}.status-list dd{margin-bottom:10px}
 .player-header h2{font-size:13px}.player-header-actions button{font-size:10px}.case-bottom>div{gap:9px}.case-pages{max-height:98px}.case-effect{padding:10px 12px;gap:6px}.case-effect-change{font-size:12px}.footer-bottom{display:block;line-height:1.8}}
@media(hover:hover) and (pointer:fine){.effect-card:hover{box-shadow:0 0 0 1px rgba(23,21,15,.12),0 2px 4px rgba(23,21,15,.05),0 22px 40px -22px rgba(23,21,15,.38)}}
@media(prefers-reduced-motion:no-preference){.effect-card{transition:box-shadow 200ms ease-out}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}

.effect-cautions{border-left:3px solid #9a3c21;background:#f2e5d8;padding:10px 14px;margin:14px 0;font-size:12px;line-height:1.8}.effect-cautions p{margin:0}.effect-cautions ul{margin:0;padding-left:18px}
.effect-edit-proof{margin-top:28px;padding-top:20px;border-top:1px solid var(--line,#c8beb0)}.effect-edit-proof h3{font-size:20px}.effect-edit-comparison{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.effect-edit-comparison figure{margin:0}.effect-edit-comparison img{width:100%;display:block;border:1px solid #c8beb0}.effect-edit-comparison figcaption{font-size:12px;margin-top:8px}@media(max-width:700px){.effect-edit-comparison{grid-template-columns:1fr}}

/* Keep source downloads readable and mobile filter choices untruncated. */
.effect-edit-note a{display:inline-block;white-space:nowrap;margin:6px 8px 0 0;padding:5px 8px;border:1px solid currentColor;text-decoration:none}
@media(max-width:600px){.effect-tools{grid-template-columns:minmax(0,1fr)}.effect-tools label{grid-column:1/-1}}

.effect-edit-downloads a{white-space:nowrap}

/* Phones: discovery density on the guide top, matching the main ToolBox.
   Header becomes the family's two rows (brand, then the three specialist
   sites) exactly like the main masthead, and the in-page nav moves to the
   bottom tab bar, the same treatment as the main site. The need entrances
   become a single horizontal chip row like the main gallery's filters, and
   the four list controls fit in two compact rows. Text stays readable,
   every target keeps its 44px minimum, and nothing is removed from the
   DOM — the page nav stays available in the tab bar, and the only hidden
   element is the card-anatomy note, which wider screens keep. */
@media(max-width:600px){
  /* Header: brand row, then the specialist sites row. The in-page nav
     reappears as the bottom tab bar below. */
  .header-inner{gap:0;padding-block:0}
  .atelier-brand{flex:0 0 100%;min-height:44px}
  .atelier-brand>span:last-child{font-size:13px}
  .atelier-brand small{font-size:10px}
  .header nav:not(.header-sites){display:none}

  /* The shared base drops every .header nav a to 32px on phones; the
     family row is the exception. Its three links keep the 44px minimum
     like the rest of the family's mobile targets. */
  .header nav.header-sites a{min-height:2.75rem}

  /* Hero: same message, half the vertical spend. */
  .effect-hero{padding-top:20px;padding-bottom:16px}
  .effect-hero h1{margin:10px 0 8px}
  .effect-hero .hero-description{font-size:13px;line-height:1.8;margin-bottom:10px}
  .need-title{margin-bottom:8px}
  .need-entrance ul{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin}
  .need-entrance li{flex:none}
  .need-entrance b{white-space:nowrap}

  /* Skill list head: the anatomy note repeats what each card's own rows show;
     it stays available from 601px up. */
  .effect-catalog .section-heading>p{display:none}
  .section-heading{margin-bottom:16px}
  .results{margin:8px 0}

  /* Controls: search with the need filter, then format with the tags. */
  .effect-tools{grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:10px;padding:12px 0}
  .effect-tools label{grid-column:auto}
  .effect-tools label:last-child{grid-column:auto}
}

/* Bottom tab bar (phones): the in-page nav, same treatment as the main site. */
.tabbar{display:none}
@media(max-width:600px){
  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 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(--blue)}
}
