:root { --cream:#f4eedf; --paper:#fbf8ef; --green:#183729; --soil:#a85632; --ink:#1d251f; --muted:#657066; --line:rgba(24,55,41,.2); --serif:"Noto Serif JP","Yu Mincho",serif; --sans:"IBM Plex Sans JP","Yu Gothic",sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--cream); color:var(--ink); font-family:var(--sans); line-height:1.85; } img { display:block; width:100%; max-width:100%; } a { color:inherit; } .skip-link { position:fixed; top:-5rem; left:1rem; z-index:10; padding:.5rem 1rem; background:var(--paper); } .skip-link:focus { top:1rem; }
.site-header { display:flex; justify-content:space-between; align-items:center; gap:1rem; min-height:68px; padding:0 clamp(1.25rem,5vw,5rem); background:var(--paper); border-bottom:1px solid var(--line); } .brand { color:var(--green); text-decoration:none; font:700 .88rem var(--serif); letter-spacing:.08em; } .brand span { color:var(--muted); font:500 .68rem var(--sans); } .header-link { color:var(--green); font-size:.75rem; font-weight:600; text-underline-offset:.25em; }
.guide-hero,.detail-callout { padding:clamp(4rem,10vw,8rem) clamp(1.25rem,10vw,10rem); } .guide-hero { background:var(--paper); } .guide-hero>* { max-width:760px; } .eyebrow { margin:0 0 1rem; color:var(--soil); font-size:.7rem; font-weight:700; letter-spacing:.18em; } h1,h2 { font-family:var(--serif); } .guide-hero h1,.detail-callout h2 { margin:.1rem 0 1.7rem; color:var(--green); font-size:clamp(2.45rem,6.6vw,5.7rem); line-height:1.18; letter-spacing:-.06em; } .guide-hero>p:not(.eyebrow) { margin:0 0 1.3rem; font-size:clamp(.94rem,1.5vw,1.08rem); } .notice { padding:.9rem 0 .9rem 1.1rem; border-left:4px solid var(--soil); color:var(--muted); font-size:.83rem!important; } .primary-link { display:inline-flex; align-items:center; gap:2rem; min-height:48px; margin-top:1.5rem; padding:.7rem 1.1rem; border:1px solid var(--green); color:var(--green); font-size:.86rem; font-weight:700; text-decoration:none; } .primary-link:hover { background:var(--green); color:var(--paper); }
.chapter-nav { padding:clamp(2rem,5vw,4rem) clamp(1.25rem,10vw,10rem); background:var(--green); } .chapter-nav ol { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); max-width:1200px; margin:0 auto; padding:0; list-style:none; border-top:1px solid rgba(244,238,223,.4); border-left:1px solid rgba(244,238,223,.4); } .chapter-nav a { display:grid; min-height:105px; padding:1rem; border-right:1px solid rgba(244,238,223,.4); border-bottom:1px solid rgba(244,238,223,.4); color:var(--paper); text-decoration:none; font-family:var(--serif); line-height:1.45; } .chapter-nav a:hover,.chapter-nav a:focus-visible { background:#10251b; } .chapter-nav span { color:#e9bd92; font:700 .7rem var(--serif); letter-spacing:.1em; } .chapter-nav small { margin-top:.3rem; color:rgba(244,238,223,.72); font:.68rem var(--sans); }.intro-nav ol { grid-template-columns:repeat(4,minmax(0,1fr)); }.intro-nav a { min-height:88px; }
.snap-wrap { width:min(1240px,100%); margin:0 auto; padding:clamp(2rem,5vw,5rem) clamp(1rem,4vw,3rem); } .snap-page { position:relative; min-width:0; margin:0 0 clamp(2.2rem,5vw,5rem); padding:clamp(1.4rem,4vw,3.5rem); background:var(--paper); border-top:3px solid var(--green); box-shadow:0 14px 30px rgba(24,55,41,.07); scroll-margin-top:1rem; } .page-number { margin:0 0 1rem; color:var(--soil); font:700 .72rem var(--serif); letter-spacing:.16em; }.intro-grid,.detail-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(250px,.9fr); gap:clamp(2rem,6vw,6rem); align-items:center; }.page-copy h1,.page-copy h2 { margin:.1rem 0 1rem; color:var(--green); font-size:clamp(2rem,4vw,3.75rem); line-height:1.32; letter-spacing:-.055em; }.lead { margin:0; font-size:clamp(.95rem,1.5vw,1.08rem); }.character-line { margin:1.5rem 0 0; padding-top:1rem; border-top:1px solid var(--line); color:var(--green); font:600 .9rem var(--serif); }.page-note { margin:1rem 0 0; padding:.8rem 1rem; background:#eee9db; color:#566056; font-size:.78rem; }.page-note p { margin:0; }.detail-line { color:var(--soil); font-size:.82rem; }.art-card,.screen-card,.chapter-art { display:block; color:var(--soil); font-size:.7rem; font-weight:700; letter-spacing:.04em; text-decoration:none; }.art-card span,.screen-card span,.chapter-art span { display:block; margin-top:.55rem; }.guide-art { max-height:480px; object-fit:contain; background:var(--cream); }.app-screen { max-height:530px; object-fit:contain; object-position:center; border:5px solid #203e30; box-shadow:9px 9px 0 rgba(168,86,50,.8); background:#fff; }.visual-column { display:grid; gap:1.6rem; justify-items:center; }.screen-card { width:100%; }.chapter-art { width:min(240px,68%); color:var(--muted); }.chapter-image { border-bottom:1px solid var(--line); }.chapter-marker { margin:0 0 1.2rem; color:var(--muted); font-size:.78rem; }.chapter-marker span { display:inline-block; margin-right:.75rem; color:var(--soil); font-weight:700; letter-spacing:.1em; }.steps { margin:1.6rem 0 0; padding:0; list-style:none; counter-reset:step; }.steps li { position:relative; padding:.65rem 0 .65rem 2.5rem; border-top:1px solid var(--line); counter-increment:step; }.steps li::before { position:absolute; left:0; color:var(--soil); content:counter(step, decimal-leading-zero); font:700 .72rem var(--serif); letter-spacing:.08em; }
.detail-callout { background:var(--green); color:var(--cream); }.detail-callout .eyebrow { color:#e9bd92; }.detail-callout h2 { color:var(--paper); }.detail-callout>p:not(.eyebrow) { max-width:550px; }.detail-callout .primary-link { border-color:var(--paper); color:var(--paper); }.detail-callout .primary-link:hover { background:var(--paper); color:var(--green); }.back-to-top { margin:0; padding:0 1.25rem 4rem; text-align:center; font-size:.82rem; }.back-to-top a { color:var(--green); text-underline-offset:.25em; } footer { padding:1.5rem; background:#10251b; color:rgba(244,238,223,.75); text-align:center; font-size:.65rem; letter-spacing:.05em; } footer p { margin:0; } :focus-visible { outline:3px solid var(--soil); outline-offset:4px; }
/* One chapter is a short horizontal deck.  The page links also work without scrolling. */
.snap-wrap { max-width:1300px; overflow:hidden; }.slide-track { display:flex; gap:clamp(1rem,3vw,2.5rem); overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding:0; padding:0 0 1.5rem; scrollbar-color:var(--soil) transparent; }.slide-track .snap-page { flex:0 0 100%; min-width:0; margin:0; scroll-snap-align:start; }.pager { display:flex; justify-content:space-between; gap:1rem; margin:1.1rem 0 1.5rem; padding:.7rem 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); font-size:.78rem; font-weight:700; }.pager a { color:var(--green); text-underline-offset:.25em; }.pager a:last-child { text-align:right; }.page-copy-top { max-width:780px; margin:0 auto 1.8rem; }.page-copy-bottom { max-width:780px; margin:1.6rem auto 0; }.visual-pair { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(180px,.85fr); gap:clamp(1.25rem,4vw,4rem); align-items:center; max-width:940px; margin:0 auto; }.visual-pair .screen-card { justify-self:center; width:min(100%,520px); }.visual-pair .chapter-art,.visual-pair .art-card { width:100%; max-width:350px; justify-self:center; }.intro-visual-pair .art-card { max-width:420px; }.intro-screen .app-screen { max-height:450px; }.guide-chapter { padding:clamp(3rem,7vw,6rem) clamp(1rem,5vw,5rem); background:var(--cream); scroll-margin-top:1rem; }.guide-chapter:nth-child(even) { background:#eae3d4; }.chapter-heading { width:min(1180px,100%); margin:0 auto 1.7rem; }.chapter-heading h2 { margin:0 0 .6rem; color:var(--green); font-size:clamp(2rem,4.5vw,4rem); line-height:1.25; letter-spacing:-.055em; }.chapter-heading p:not(.eyebrow) { margin:0; color:var(--muted); font-size:.82rem; }.guide-chapter .slide-track { width:min(1180px,100%); margin:0 auto; }.chapter-end { display:flex; justify-content:space-between; gap:1rem; width:min(1180px,100%); margin:1rem auto 0; font-size:.78rem; font-weight:700; }.chapter-end a { color:var(--green); text-underline-offset:.25em; }
@media (max-width:700px) { body { overflow-x:hidden; }.site-header { min-height:62px; }.guide-hero,.detail-callout { padding:3.6rem 1.25rem; }.guide-hero h1,.detail-callout h2 { font-size:clamp(2.2rem,9vw,3.2rem); }.chapter-nav { padding:1.25rem; }.chapter-nav ol,.intro-nav ol { grid-template-columns:repeat(2,minmax(0,1fr)); }.chapter-nav a { min-height:78px; padding:.7rem; font-size:.88rem; }.snap-wrap { padding:1.25rem 1rem 2.5rem; }.snap-page { margin-bottom:1.5rem; padding:1.2rem; }.intro-grid,.detail-grid,.visual-pair { grid-template-columns:minmax(0,1fr); gap:1.75rem; }.page-copy h1,.page-copy h2 { font-size:2rem; }.guide-art { max-height:400px; }.app-screen { max-height:430px; }.chapter-art { width:min(210px,75%); }.steps li { padding-left:2.25rem; }.header-link { font-size:.7rem; }.guide-chapter { padding:2.5rem 1rem; }.chapter-end { font-size:.72rem; }.pager { margin:.9rem 0 1.2rem; }.slide-track .snap-page { padding:1.1rem; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }

.mobile-art-link{display:none}.desktop-art-link{display:block}@media(max-width:700px){.mobile-art-link{display:block}.desktop-art-link{display:none}}

/* The seven chapters stay within thumb reach while the guide is open. */
html { scroll-behavior:auto; }
.full-guide-page { --guide-nav-height:4.6rem; padding-bottom:calc(var(--guide-nav-height) + env(safe-area-inset-bottom)); background:#10251b; }
.chapter-tabs { position:fixed; inset:auto 0 0; z-index:20; border-top:1px solid #c6d1c5; background:rgba(251,248,239,.97); box-shadow:0 -6px 24px rgba(24,55,41,.12); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
.chapter-tabs ol { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); width:min(1220px,100%); margin:0 auto; padding:0 .7rem env(safe-area-inset-bottom); list-style:none; }
.chapter-tabs li + li { border-left:1px solid rgba(24,55,41,.1); }
.chapter-tabs a { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.05rem; min-height:var(--guide-nav-height); padding:.35rem .1rem; border-top:3px solid transparent; color:#526257; font-size:.76rem; font-weight:600; line-height:1.3; text-align:center; text-decoration:none; white-space:nowrap; }
.chapter-tabs a:hover,.chapter-tabs a:focus-visible { background:#e9efe7; color:var(--green); }
.chapter-tabs a[aria-current="location"] { border-top-color:var(--soil); background:#e6ede4; color:var(--green); font-weight:700; }
.chapter-tab-number { color:var(--soil); font:700 .65rem var(--serif); letter-spacing:.09em; }
.chapter-tab-short { display:none; }
.full-guide-page .chapter-heading { margin-bottom:1.3rem; }
.full-guide-page .page-copy-top { margin-bottom:1.2rem; }
.screen-stage { width:min(760px,100%); margin:0 auto; padding:clamp(.8rem,2.5vw,1.5rem); border:1px solid #c7d6c9; background:#dfe8df; }
.screen-stage .screen-card { display:flex; flex-direction:column; align-items:center; width:100%; margin:0 auto; }
.screen-stage .app-screen { width:auto; max-width:100%; max-height:650px; border:3px solid #315943; box-shadow:0 12px 24px rgba(24,55,41,.15); }
.screen-stage .screen-card span { align-self:flex-start; margin-top:.75rem; }
@media(max-width:1000px){.chapter-tab-full{display:none}.chapter-tab-short{display:block}}
@media(max-width:700px){.full-guide-page{--guide-nav-height:4.25rem}.chapter-tabs ol{padding-inline:.15rem}.chapter-tabs a{font-size:.65rem;letter-spacing:-.02em}.chapter-tab-number{font-size:.64rem}.screen-stage{padding:.75rem}.screen-stage .app-screen{max-height:520px}}

/* Each chapter page is a single viewport card. Full steps open inside the card. */
.full-guide-page .guide-chapter { display:grid; grid-template-rows:auto minmax(0,1fr); height:calc(100dvh - var(--guide-nav-height) - env(safe-area-inset-bottom)); min-height:0; padding:clamp(.5rem,1.4vh,.9rem) clamp(.6rem,3vw,2.5rem) clamp(.65rem,1.5vh,1rem); scroll-margin-top:0; }
.full-guide-page .chapter-heading { display:flex; align-items:baseline; gap:.6rem; width:min(1180px,100%); min-height:2.6rem; margin:0 auto .4rem; }
.full-guide-page .chapter-heading .eyebrow { margin:0; white-space:nowrap; }
.full-guide-page .chapter-heading h2 { margin:0; font-size:clamp(1.1rem,2vw,1.55rem); line-height:1.25; letter-spacing:-.03em; }
.full-guide-page .chapter-heading p:not(.eyebrow) { margin-left:auto; white-space:nowrap; }
.full-guide-page .slide-track { height:100%; padding:0; overflow-y:hidden; }
.full-guide-page .detail-page { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); grid-template-rows:minmax(0,1fr) auto; column-gap:clamp(.8rem,2.5vw,2.4rem); height:100%; min-height:0; padding:clamp(.85rem,2vw,1.5rem); overflow:hidden; }
.full-guide-page .detail-page .page-copy-top { grid-column:1; grid-row:1; width:100%; max-width:none; margin:0; }
.full-guide-page .detail-page .page-copy-bottom { grid-column:1; grid-row:2; width:100%; max-width:none; margin:0; }
.full-guide-page .detail-page .page-number { margin-bottom:.55rem; }
.full-guide-page .detail-page .page-copy-top .eyebrow { margin-bottom:.35rem; }
.full-guide-page .detail-page .page-copy-top h3 { margin:0 0 .55rem; color:var(--green); font-family:var(--serif); font-size:clamp(1.5rem,2.6vw,2.65rem); line-height:1.32; letter-spacing:-.055em; }
.full-guide-page .detail-page .lead { font-size:clamp(.88rem,1.1vw,1rem); line-height:1.65; }
.full-guide-page .detail-visuals { grid-column:2; grid-row:1 / 3; display:flex; align-items:stretch; justify-content:center; gap:clamp(.45rem,1.4vw,1rem); min-width:0; min-height:0; height:100%; }
.full-guide-page .detail-visuals .screen-stage { display:flex; align-items:center; justify-content:center; flex:1 1 0; min-width:0; min-height:0; width:auto; height:100%; padding:.6rem; }
.full-guide-page .detail-visuals .screen-card { display:flex; flex-direction:column; justify-content:center; align-items:center; width:100%; height:100%; min-height:0; }
.full-guide-page .detail-visuals .app-screen { width:auto; height:auto; max-width:100%; max-height:calc(100% - 1.4rem); object-fit:contain; }
.full-guide-page .detail-visuals .screen-card span { align-self:center; margin:.2rem 0 0; line-height:1.2; }
.full-guide-page .chapter-art-link { display:block; flex:0 0 42%; align-self:center; width:42%; max-width:280px; aspect-ratio:1; border:1px solid #d8d6c9; background:var(--paper); box-shadow:0 9px 20px rgba(24,55,41,.11); }
.full-guide-page .chapter-art-image { width:100%; height:100%; object-fit:contain; }
.full-guide-page .detail-page .character-line { margin:0 0 .65rem; padding:.55rem 0 0; font-size:clamp(.75rem,1.05vw,.88rem); line-height:1.55; }
.full-guide-page .page-details { color:var(--green); font-size:.79rem; }
.full-guide-page .page-details summary { width:max-content; max-width:100%; padding:.2rem .45rem; border:1px solid var(--line); cursor:pointer; font-weight:700; }
.full-guide-page .page-details summary:hover { background:#e9efe7; }
.full-guide-page .details-close-label,.full-guide-page .page-details[open] .details-open-label { display:none; }
.full-guide-page .page-details[open] .details-close-label { display:inline; }
.full-guide-page .page-details[open] { position:absolute; inset:clamp(.6rem,2vw,1.5rem); z-index:4; padding:clamp(.8rem,2vw,1.5rem); overflow:auto; border:1px solid #b6c9b9; background:var(--paper); box-shadow:0 16px 36px rgba(24,55,41,.18); }
.full-guide-page .page-details[open] summary { margin-left:auto; }
.full-guide-page .page-details .steps { margin-top:1.2rem; }
.full-guide-page .detail-page .pager { margin:.55rem 0 0; padding:.45rem 0 0; border-bottom:0; font-size:.78rem; }
@media(min-width:701px){
  .full-guide-page .first-in-chapter .chapter-art-link { position:absolute; top:51%; left:clamp(.85rem,2vw,1.5rem); transform:translateY(-45%); width:min(27%,280px); max-width:none; }
  .full-guide-page .first-in-chapter .detail-visuals .screen-stage { flex:1 1 100%; }
}
@media(max-width:700px){
  .full-guide-page .guide-chapter { padding:.45rem .45rem .5rem; }
  .full-guide-page .chapter-heading { min-height:2rem; margin-bottom:.25rem; padding:0 .25rem; gap:.4rem; }
  .full-guide-page .chapter-heading .eyebrow { font-size:.55rem; letter-spacing:.06em; }
  .full-guide-page .chapter-heading h2 { font-size:clamp(.89rem,4vw,1.08rem); }
  .full-guide-page .chapter-heading p:not(.eyebrow) { font-size:.6rem; }
  .full-guide-page .detail-page { grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr) auto; gap:.4rem; padding:.65rem; }
  .full-guide-page .detail-page .page-copy-top { display:grid; grid-template-columns:auto 1fr; align-content:start; column-gap:.55rem; }
  .full-guide-page .detail-page .page-number,.full-guide-page .detail-page .page-copy-top .eyebrow { margin:0 0 .15rem; font-size:.61rem; line-height:1.35; }
  .full-guide-page .detail-page .page-copy-top h3,.full-guide-page .detail-page .lead { grid-column:1 / -1; }
  .full-guide-page .detail-page .page-copy-top h3 { margin:0 0 .2rem; font-size:clamp(1.15rem,5.2vw,1.5rem); line-height:1.28; }
  .full-guide-page .detail-page .lead { font-size:.78rem; line-height:1.45; }
  .full-guide-page .detail-visuals { grid-column:1; grid-row:2; gap:.35rem; }
  .full-guide-page .detail-visuals .screen-stage { padding:.35rem; }
  .full-guide-page .chapter-art-link { position:static; transform:none; flex-basis:42%; width:42%; max-width:none; }
  .full-guide-page .detail-page .page-copy-bottom { grid-column:1; grid-row:3; }
  .full-guide-page .detail-page .character-line { margin:0 0 .25rem; padding:.3rem 0 0; font-size:.69rem; line-height:1.35; }
  .full-guide-page .page-details { font-size:.68rem; }
  .full-guide-page .page-details summary { padding:.12rem .35rem; }
  .full-guide-page .detail-page .pager { margin:.28rem 0 0; padding:.25rem 0 0; font-size:.7rem; }
}

/* Reading mode keeps one page and one chapter in the viewport. */
.full-guide-page [hidden] { display:none!important; }
.full-guide-page { --guide-header-height:68px; }
.full-guide-page .site-header { height:var(--guide-header-height); min-height:var(--guide-header-height); }
.full-guide-page.is-reading { height:var(--guide-page-height,100dvh); padding-bottom:0; overflow:hidden; }
.full-guide-page.is-reading .guide-hero,.full-guide-page.is-reading footer { display:none; }
.full-guide-page.is-reading main { height:var(--guide-main-height,calc(100dvh - var(--guide-header-height) - var(--guide-nav-height) - env(safe-area-inset-bottom))); overflow:hidden; }
.full-guide-page.is-reading .detail-wrap { height:100%; overflow:hidden; }
.full-guide-page.is-reading .guide-chapter { height:100%; padding:.35rem clamp(.5rem,2vw,1.5rem) .45rem; }
.full-guide-page.is-reading .chapter-heading { min-height:2rem; width:min(1040px,100%); margin-bottom:.25rem; }
.full-guide-page.is-reading .slide-track { display:block; width:min(1040px,100%); height:calc(100% - 2.25rem); overflow:hidden; }
.full-guide-page.is-reading .detail-page { height:100%; padding:clamp(.55rem,1.3vw,1rem); column-gap:clamp(.6rem,2vw,1.5rem); }
.full-guide-page.is-reading .detail-page .page-copy-top h3 { font-size:clamp(1.3rem,2.25vw,2.15rem); }
.full-guide-page.is-reading .detail-page .lead { font-size:clamp(.82rem,1vw,.95rem); line-height:1.5; }
.full-guide-page.is-reading .detail-page .character-line { font-size:.76rem; }
.full-guide-page.is-reading .screen-stage { padding:.35rem; }
.full-guide-page.is-reading .pager-disabled { color:#899289; }
@media(max-width:700px){
  .full-guide-page { --guide-header-height:62px; }
  .full-guide-page.is-reading .guide-chapter { padding:.25rem .35rem .35rem; }
  .full-guide-page.is-reading .chapter-heading { min-height:1.8rem; margin-bottom:.15rem; }
  .full-guide-page.is-reading .slide-track { height:calc(100% - 1.95rem); }
  .full-guide-page.is-reading .detail-page { padding:.45rem; gap:.25rem; }
  .full-guide-page.is-reading .detail-page .page-copy-top h3 { font-size:clamp(1.05rem,4.7vw,1.35rem); }
  .full-guide-page.is-reading .detail-page .lead { font-size:.73rem; line-height:1.34; }
  .full-guide-page.is-reading .detail-page .character-line { font-size:.65rem; line-height:1.25; }
  .full-guide-page.is-reading .detail-page .pager { margin:.18rem 0 0; padding:.18rem 0 0; }
}