/* All styles for aianemo.com. Loaded by index.html. Paths here are relative to this file (../fonts, ../logo). */
/* Bornomala (Bangla) is not on Google Fonts, so it ships in the website's fonts folder */
@font-face{font-family:"Bornomala";src:url("../fonts/Bornomala-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Bornomala";src:url("../fonts/Bornomala-Bold.woff2") format("woff2");font-weight:700;font-display:swap}
:root{
  --paper:#F3F6F1; --sheet:#FFFFFF; --text:#1B2033; --muted:#596079; --ink:#1E2A5E;
  --btn-bg:#1E2A5E; --btn-fg:#FFFFFF; --grid:#B8D2C0; --grid-faint:#DFEBE3; --line:#DCE2E8;
  --stamp:#C7333D; --chip:#E6ECF5;
  /* English: Gelasio (a free Georgia look-alike that also works on Android) · Bangla: Bornomala · Japanese: Zen Old Mincho */
  --head:"Gelasio","Bornomala","Zen Old Mincho",Georgia,"Noto Serif",serif;
  --body:"Gelasio","Bornomala","Zen Old Mincho",Georgia,"Noto Serif",serif;
  --jp:"Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;
  color-scheme:light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#11152A; --sheet:#1A1F3A; --text:#E7E9F3; --muted:#A4AAC4; --ink:#AFC0FF;
    --btn-bg:#C8D3FF; --btn-fg:#11152A; --grid:#3A4A66; --grid-faint:#273250; --line:#2A3152;
    --stamp:#E25763; --chip:#232A4A; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#11152A; --sheet:#1A1F3A; --text:#E7E9F3; --muted:#A4AAC4; --ink:#AFC0FF;
  --btn-bg:#C8D3FF; --btn-fg:#11152A; --grid:#3A4A66; --grid-faint:#273250; --line:#2A3152;
  --stamp:#E25763; --chip:#232A4A; color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important} /* hidden things stay hidden, whatever their layout style */
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;font-variant-numeric:lining-nums;background:var(--paper);color:var(--text);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:var(--ink)}
:focus-visible{outline:3px solid var(--stamp);outline-offset:2px}
main:focus{outline:none}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.muted{color:var(--muted)}

/* banner + header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:var(--paper);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--head);font-weight:700;color:var(--ink);text-decoration:none;font-size:1.12rem;white-space:nowrap}
.seal{width:30px;height:30px;border:2px solid var(--stamp);color:var(--stamp);border-radius:6px;display:grid;place-items:center;font-size:17px;font-weight:700;transform:rotate(-6deg);flex:none}
.logo .seal{border:0;border-radius:0;transform:none;font-size:0;background:url("../logo/seal.svg") center/contain no-repeat} /* the Aianemo seal (logo/seal.svg) */
.nav{display:flex;gap:2px;overflow-x:auto;margin-left:12px}
.nav a{color:var(--text);text-decoration:none;padding:7px 11px;border-radius:8px;font-weight:500;white-space:nowrap}
.nav a:hover{background:var(--chip)}
.nav a[aria-current="page"]{background:var(--chip);color:var(--ink)}
.actions{margin-left:auto;display:flex;gap:8px;align-items:center}
.cart-link{display:flex;align-items:center;gap:6px;text-decoration:none;color:var(--text);font-weight:600;padding:7px 10px;border-radius:8px}
.cart-link{position:relative}
.cart-link::before{content:"";position:absolute;inset:0 var(--hx,5.5px);border-radius:8px;z-index:-1}
@media (hover:hover){.cart-link:hover::before{background:var(--chip)}} /* the hover shade stops 3px short of the language button */
html[lang="bn"] .cart-link{--hx:3.5px}
.cart-link{margin-right:-10px} /* the word / icon lines up with the right edge of the page content */
/* equal visible gaps: theme | language | cart (the cart has no box, so its padding is pulled back) */
.actions{gap:8px}
.actions .btn{position:relative;z-index:1} /* buttons stay clickable where the cart's padding overlaps them */
.actions .cart-link{margin-left:-10.5px}
html[lang="bn"] .actions .cart-link{margin-left:-8.5px}
/* theme and language buttons: same height, theme button square */
.actions #musicBtn,.actions #themeBtn,.actions #langBtn{height:34px;padding-top:0;padding-bottom:0;display:inline-flex;align-items:center;justify-content:center}
.actions #musicBtn,.actions #themeBtn{width:34px;padding:0}
.actions #musicBtn[aria-pressed="true"]{background:var(--btn-bg);color:var(--btn-fg)} /* filled while music plays */
.actions #musicBtn.loading svg{opacity:.4}
.actions #langBtn{padding:0 12px}
@media (max-width:520px){.actions #musicBtn,.actions #themeBtn,.actions #langBtn{height:32px}.actions #musicBtn,.actions #themeBtn{width:32px}.actions #langBtn{padding:0 10px}}

.l-short{display:none}
@media (max-width:430px){.l-long{display:none}.l-short{display:inline}} /* small phones: short language label */
@media (max-width:350px){.logo{font-size:.92rem}}
.cart-ico{display:none;width:16px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
@media (max-width:520px){.cart-ico{display:block}.cart-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.actions .cart-link{gap:4px;margin-right:-6px;margin-left:-6px}html[lang="bn"] .actions .cart-link{margin-left:-6px}.actions .cart-link,html[lang="bn"] .actions .cart-link{--hx:1px}.cart-link .count{min-width:16px;height:16px;font-size:10px;padding:0 4px}} /* phones: a bag icon instead of the word */
.count{background:var(--stamp);color:#fff;border-radius:999px;min-width:20px;height:20px;font-size:12px;display:grid;place-items:center;padding:0 6px}
.count:empty{display:none}
@media (max-width:760px){.nav{order:3;width:100%;margin:0 -8px}}
@media (max-width:520px){.bar{column-gap:8px}.logo{gap:8px}.seal{width:26px;height:26px;font-size:15px}.actions{gap:8px}.icon-btn{width:32px;height:30px}.actions .btn.small{padding:4px 9px}.cart-link{padding:6px 6px}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-weight:600;padding:11px 20px;border-radius:10px;border:2px solid var(--btn-bg);background:var(--btn-bg);color:var(--btn-fg);text-decoration:none;cursor:pointer;line-height:1.3;text-align:center}
.btn:hover{filter:brightness(1.12)}
.btn.alt{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.small{padding:5px 12px;font-size:.9rem;border-width:1.5px}
.btn.full{width:100%}
.btn[disabled]{opacity:.55;cursor:not-allowed;filter:none}

/* sections */
/* one spacing rhythm for every page:
   --gap between sections; --edge from the header line to the content, and from the content to the footer line */
:root{--gap:72px;--edge:56px}
@media (max-width:520px){:root{--gap:56px;--edge:44px}}
main{padding:var(--edge) 0;flex:1 0 auto} /* main grows, so the footer sits at the bottom of the screen on short pages */
section,section.tight{padding:calc(var(--gap) / 2) 0}
#main > section:first-child{padding-top:0}
#main > section:last-child{padding-bottom:0}
#main > * > :last-child{margin-bottom:0}
/* trim text to its visible letters at the edges of homepage sections, so the gaps look equal */
@supports (text-box: trim-both cap alphabetic){
  #main > section > .wrap > h2,.head-row h2{text-box:trim-both cap alphabetic}
  .head-row{align-items:center}
  .fact p:last-child{text-box:trim-end cap alphabetic}
  .card .price{text-box:trim-both cap alphabetic} /* the Save tag centres on the price digits */
  .fact h3{text-box:trim-start cap alphabetic}
  .total > span{text-box:trim-end cap alphabetic}
  .logo > span:last-child{text-box:trim-both cap alphabetic} /* the name centres on the stamp and the buttons by its letters */ /* block measured from the top of the title letters */
  .steps li > span{text-box:trim-both cap alphabetic} /* centre the letters, not the line box, on the square */
  #main > section > .wrap > h2 + .steps{margin-top:26px}
  html[lang="bn"] .facts{padding-bottom:6px}
  html[lang="bn"] .hero h1,html[lang="bn"] .pg-h1,html[lang="bn"] .back{margin-top:.22em} /* Bangla letters rise above the English cap line */
  .pg-h1,.back{text-box:trim-both cap alphabetic}
  #main > * > p:last-child,.more-grid > div > p:last-child,.memo p:last-child,details:last-child > p{text-box:trim-end cap alphabetic} /* Bangla vowel signs hang lower than English letters */
}
h2{font-family:var(--head);font-weight:700;font-size:clamp(1.45rem,3vw,1.9rem);line-height:1.25;color:var(--ink);margin:0 0 8px}
.pg-h1{font-family:var(--head);font-weight:700;font-size:clamp(1.7rem,3.6vw,2.4rem);line-height:1.2;color:var(--ink);margin:0 0 6px}
.head-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:22px}
.head-row a{font-weight:600}

/* hero */
.hero{padding:calc(var(--gap) / 2) 0}
.hero-in{display:grid;grid-template-columns:1.25fr 1fr;gap:56px;align-items:center}
.hero h1{font-family:var(--head);font-weight:700;font-size:clamp(2.3rem,5.4vw,3.9rem);line-height:1.12;letter-spacing:-.01em;color:var(--ink);margin:0 0 18px;max-width:13ch}
@supports (text-box: trim-both cap alphabetic){.hero h1{text-box:trim-both cap alphabetic;margin-bottom:28px}}
.hero h1{text-wrap:balance}
/* English headline: a little smaller and wider so it fits on 2 lines like the Bangla one */
:root[lang="en"] .hero h1{max-width:none}
@media (min-width:861px){:root[lang="en"] .hero h1{font-size:clamp(2rem,4.4vw,3.45rem)}}
@media (max-width:520px){:root[lang="en"] .hero h1{font-size:2.1rem}}
@media (max-width:860px){:root[lang="en"] .hero h1{max-width:19ch}}
@media (max-width:520px){.ctas .btn{padding:10px 14px;font-size:.95rem}}
:root[lang="en"] .hero .lede{max-width:54ch}
.lede{font-size:1.12rem;color:var(--muted);max-width:46ch;margin:0 0 26px}
.ctas{display:flex;gap:12px;flex-wrap:wrap}
.genko-wrap{background:var(--sheet);border:1px solid var(--line);padding:18px;border-radius:4px;box-shadow:0 22px 44px -30px rgba(30,42,94,.5);max-width:520px;width:100%;justify-self:end}
.genko-wrap.fitted{max-width:none;width:auto}
.genko{display:grid;grid-template-columns:repeat(6,1fr);border:2px solid var(--grid);container-type:inline-size}
.cell{aspect-ratio:1;border:1px solid var(--grid);display:grid;place-items:center;
  background:linear-gradient(var(--grid-faint),var(--grid-faint)) center/1px 100% no-repeat,linear-gradient(var(--grid-faint),var(--grid-faint)) center/100% 1px no-repeat}
.cell .w{font-family:var(--jp);font-weight:700;font-size:10.5cqw;color:var(--ink);line-height:1}
.cell .w.sm{translate:-18% 12%}
.cell .hanko{color:var(--stamp);border:.7cqw solid var(--stamp);border-radius:2cqw;font-family:var(--jp);font-weight:700;font-size:7.5cqw;width:12.5cqw;height:12.5cqw;display:grid;place-items:center;transform:rotate(-6deg);opacity:.92}
.genko.anim .w{opacity:0;animation:ink .55s ease-out forwards;animation-delay:calc(var(--i) * 110ms + 250ms)}
.genko.anim .hanko{opacity:0;animation:stamp .45s cubic-bezier(.2,1.4,.4,1) forwards;animation-delay:calc(var(--i) * 110ms + 450ms)}
@keyframes ink{from{opacity:0;transform:translateY(-8%) scale(1.1);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}
@keyframes stamp{from{opacity:0;transform:scale(1.8) rotate(-14deg)}to{opacity:.92;transform:scale(1) rotate(-6deg)}}
@media (prefers-reduced-motion: reduce){.genko.anim .w,.genko.anim .hanko{animation:none;opacity:1}.genko.anim .hanko{opacity:.92}}
@media (max-width:860px){.hero-in{grid-template-columns:1fr;gap:var(--gap)}.genko-wrap{justify-self:start}}

/* facts */
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
@media (max-width:960px){.facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.facts{grid-template-columns:1fr}}
/* the square is centred on the whole text block: title + description */
.fact{display:flex;gap:14px;align-items:center}
.sq{flex:none;width:46px;height:46px;border:2px solid var(--grid);display:grid;place-items:center;font-family:var(--jp);font-weight:700;font-size:22px;color:var(--ink);background:var(--sheet)}
.fact h3{margin:0;font-size:1.05rem;line-height:1.35}
.fact p{margin:1px 0 0;color:var(--muted);font-size:.95rem} /* description sits close under its title */

/* product grid + covers */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:30px 22px}
@media (max-width:520px){.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 14px}.card h3{font-size:.95rem}.meta{gap:8px;font-size:.8rem}}
.card{text-decoration:none;color:inherit;display:block;border-radius:10px;min-width:0}
.card .cover{transition:transform .2s ease}
.card:hover .cover{transform:translateY(-4px)}
.card h3{font-size:1.02rem;margin:12px 0 2px;line-height:1.35}
.meta{display:flex;flex-wrap:wrap;gap:2px 12px;color:var(--muted);font-size:.88rem}
.card .meta{column-gap:0}
.card .meta span+span::before{content:"・";margin:0 -.12em;font-family:var(--jp);line-height:1} /* level・topic・type, with the Japanese nakaguro */
@media (max-width:520px){.card .meta{font-size:.8rem}}
.price-row{display:flex;align-items:center;gap:10px;margin-top:4px;min-height:24px} /* same height with or without a Save tag, so prices line up across cards */
.price{font-weight:700;font-size:1.1rem;color:var(--ink)}
.pill{font-size:.78rem;padding:2px 9px;border-radius:999px;background:var(--chip);color:var(--ink);font-weight:600;white-space:nowrap}
.pill.free{background:var(--stamp);color:#fff}

.cover{position:relative;aspect-ratio:3/4;border-radius:5px 10px 10px 5px;background:var(--c);color:#fff;overflow:hidden;container-type:inline-size;
  box-shadow:0 14px 28px -20px rgba(20,30,70,.6)}
.cover::before{content:"";position:absolute;left:0;top:0;bottom:0;width:8%;background:rgba(0,0,0,.16);border-right:2px solid rgba(255,255,255,.14)}
.cover.bundle::before{display:none}
.cover::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(255,255,255,.035) 0 2px,transparent 2px 6px);pointer-events:none}
.cover .label{position:absolute;left:18%;right:9%;top:14%;background:#fff;color:#1B2033;border-radius:3cqw;padding:9% 6% 8%;text-align:center}
.cover .jp{font-family:var(--jp);font-weight:900;font-size:21cqw;line-height:1;color:var(--c)}
.cover .ttl{font-size:7cqw;font-weight:600;margin-top:6%;line-height:1.2}
.cover .lv{position:absolute;bottom:7%;left:18%;font-size:6.5cqw;font-weight:700}
.cover .brand{position:absolute;bottom:7.5%;right:9%;font-size:5cqw;opacity:.85;font-family:var(--head)}
.cover.bundle{background:var(--sheet);border:2px dashed var(--grid);box-shadow:none}
.cover.bundle::after{display:none}
.cover.bundle .mini{position:absolute;width:52%}
.cover.bundle .m0{left:5%;top:9%;transform:rotate(-9deg)}
.cover.bundle .m1{left:24%;top:5%;transform:rotate(1deg)}
.cover.bundle .m2{left:43%;top:11%;transform:rotate(9deg)}
.cover.bundle .bundle-tag{position:absolute;bottom:7%;left:0;right:0;text-align:center;font-family:var(--head);font-weight:700;font-size:9cqw;color:var(--ink)}

.soon{border:2px dashed var(--grid);border-radius:10px;padding:20px;display:flex;flex-direction:column;justify-content:center;aspect-ratio:3/4;color:var(--muted)}
.soon b{font-family:var(--head);font-size:1.3rem;color:var(--ink)}
.soon p{margin:6px 0 0;font-size:.92rem}
.empty{border:2px dashed var(--grid);border-radius:10px;padding:28px;color:var(--muted)}

/* pack + steps + levels + free */
.pack,.free-block{display:grid;grid-template-columns:200px 1fr;gap:36px;align-items:center;background:var(--sheet);border:1px solid var(--line);padding:28px;border-radius:12px}
.pack p,.free-block p{color:var(--muted);max-width:52ch;margin:0 0 4px}
.free-block .btn{margin-top:14px}
.fb-ctas{margin-top:14px}
.fb-ctas .btn{margin-top:0}
.free-grid{margin-top:30px}
@media (max-width:640px){.pack,.free-block{grid-template-columns:1fr;gap:28px}.pack-cover,.fb-cover{max-width:180px}}
.buy{display:flex;align-items:center;gap:18px;margin:20px 0 10px;flex-wrap:wrap}
.big-price{font-size:1.8rem;font-weight:700;color:var(--ink);line-height:1}
.strike{text-decoration:line-through;color:var(--muted);font-size:1rem;margin-left:10px;font-weight:400}
.steps{list-style:none;padding:0;margin:22px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:20px;counter-reset:s}
.steps li{display:flex;gap:12px;align-items:center;line-height:1.45}
.steps li::before{counter-increment:s;content:counter(s);flex:none;width:38px;height:38px;border:2px solid var(--grid);display:grid;place-items:center;font-family:var(--head);font-weight:700;color:var(--ink);background:var(--sheet)}
.levels{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.lv-box{width:78px;aspect-ratio:1;border:2px solid var(--ink);display:grid;place-content:center;text-align:center;background:var(--sheet);line-height:1.2}
.lv-box b{font-family:var(--head);font-size:1.45rem;color:var(--ink)}
.lv-box small{font-size:.74rem;color:var(--muted)}
.lv-box.later{border-style:dashed;border-color:var(--grid)}
.lv-box.later b{color:var(--muted)}

/* shop */
.filters{display:flex;flex-wrap:wrap;gap:14px 30px;margin:22px 0 30px}
.fgroup{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.fgroup>span{color:var(--muted);font-size:.9rem;margin-right:2px}
.chip{font:inherit;font-size:.92rem;padding:5px 14px;border-radius:999px;border:1.5px solid var(--line);background:var(--sheet);color:var(--text);cursor:pointer}
.chip:hover{border-color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--btn-bg);color:var(--btn-fg);border-color:var(--btn-bg)}
.chip.lg{padding:9px 20px;font-weight:600}
.page-pad{padding-bottom:0}

/* product page */
.back{display:block;width:fit-content;font-weight:600}
.pd{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;padding-top:28px}
.more{border-top:1px solid var(--line);margin-top:calc(var(--gap) / 2);padding:calc(var(--gap) / 2) 0 0}
.more-grid > div > p:last-child,.memo p:last-child{margin-bottom:0}
.memo{padding-bottom:20px!important}
.more-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:40px;margin-top:24px}
@media (max-width:860px){.more-grid{grid-template-columns:1fr;gap:20px}}
.more h3{font-size:1.05rem;margin:0 0 6px;color:var(--ink)}
.more p{margin:0 0 20px}
.memo{background:var(--sheet);border:1px solid var(--line);border-radius:10px;padding:20px 20px 4px;position:relative;align-self:start}
.memo h3{padding-right:44px}
.memo .seal{position:absolute;top:16px;right:16px}
@media (max-width:820px){.pd{grid-template-columns:1fr;gap:var(--gap)}}
.stage{max-width:400px}
.thumbs{display:flex;gap:10px;margin-top:16px;align-items:flex-start;flex-wrap:wrap}
.thumbs button{width:62px;padding:3px;border:2px solid transparent;background:none;cursor:pointer;border-radius:7px}
.thumbs button[aria-current="true"]{border-color:var(--ink)}
.info .tags{display:flex;gap:8px;flex-wrap:wrap}
.info h1{font-family:var(--head);font-weight:700;font-size:clamp(1.6rem,3.4vw,2.3rem);line-height:1.2;color:var(--ink);margin:12px 0 10px}
.note{color:var(--muted);font-size:.92rem;margin:0}
.h3{font-size:1.08rem;margin:28px 0 8px}
.inside{padding-left:1.2em;margin:0}
.inside li{margin:4px 0}
.specs{display:grid;grid-template-columns:auto 1fr;gap:6px 22px;margin:0}
.specs dt{color:var(--muted)}
.specs dd{margin:0;font-weight:500}

/* cart */
.cart{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:44px;align-items:start}
@media (max-width:860px){.cart{grid-template-columns:1fr;gap:var(--gap)}}
.item{display:flex;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.item .thumb{width:52px;flex:none}
.item .nm{flex:1;font-weight:600;line-height:1.35}
.item .nm .meta{font-weight:400;margin-top:2px}
.item .ip{text-align:right}
.linkbtn{background:none;border:none;color:var(--muted);text-decoration:underline;font:inherit;font-size:.88rem;cursor:pointer;padding:0}
.total{display:flex;justify-content:space-between;padding:16px 0 0;font-size:1.2rem;font-weight:700;color:var(--ink)}
.hint{background:var(--chip);padding:14px 16px;border-radius:10px;margin-top:20px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.paybox{background:var(--sheet);border:1px solid var(--line);border-radius:12px;padding:24px}

.label-sm{font-weight:600;font-size:.95rem}
.methods{display:flex;gap:10px;margin:8px 0 16px}
.instr{border-left:4px solid var(--stamp);padding:10px 14px;background:var(--paper);margin-bottom:20px;border-radius:0 8px 8px 0}
.num{display:block;font-size:1.4rem;font-weight:700;letter-spacing:.04em;color:var(--ink);margin-top:4px}
.num small{font-size:.8rem;font-weight:400;color:var(--muted);letter-spacing:0;margin-left:10px}
.field{display:flex;flex-direction:column;gap:4px;margin-bottom:14px}
.field label{font-weight:600;font-size:.95rem}
.field input{font:inherit;padding:10px 12px;border-radius:8px;border:1.5px solid var(--line);background:var(--paper);color:var(--text)}
.field input:focus{border-color:var(--ink);outline:none;box-shadow:0 0 0 3px var(--chip)}
.help{font-size:.84rem;color:var(--muted)}
.help.wait{text-align:center;margin:0 0 10px} /* just above the button, where the buyer is looking */
.help.key{display:flex;align-items:center;gap:8px;margin-top:4px;padding:8px 10px;border-radius:8px;background:var(--chip);color:var(--ink);font-weight:600;line-height:1.35} /* the line buyers must not miss */
.help.key svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.err{color:var(--stamp);font-weight:600;margin:0 0 14px}
.check{font-size:.88rem;color:var(--muted);margin:4px 0 16px;padding:2px 0 2px 12px;border-left:3px solid var(--stamp)}
.err:empty{display:none} /* takes no space until there is a message */
#order .btn.full{margin-top:10px}

/* about / faq / done */
.about,.done{max-width:640px}
.seal-big{width:64px;height:64px;border:3px solid var(--stamp);color:var(--stamp);border-radius:12px;display:grid;place-items:center;font-family:var(--jp);font-weight:700;font-size:34px;transform:rotate(-6deg);margin:0 0 28px}
details{border-bottom:1px solid var(--line);padding:14px 0}
.pg-h1 + details{margin-top:39px} /* FAQ title to first question: 50px visible on desktop, 52px on phones */
html[lang="bn"] .pg-h1 + details{margin-top:41px} /* Bangla letters reach 2px lower */
summary{font-weight:600;cursor:pointer;color:var(--ink)}
details p{margin:8px 0 0;color:var(--muted)}

/* footer + toast */
.foot{border-top:1px solid var(--line);padding:calc(var(--gap) / 2) 0 10px;color:var(--muted);font-size:.92rem}
main,.foot{position:relative;z-index:1}
.foot{overflow-x:clip} /* the tilted logo never makes the page scroll sideways */
.foot::before{content:"";position:absolute;z-index:-1;bottom:24px;width:330px;height:330px;right:24px;transform:rotate(-8deg);background:var(--ink);-webkit-mask:url("../logo/watermark.svg") center/contain no-repeat;mask:url("../logo/watermark.svg") center/contain no-repeat;opacity:.06;pointer-events:none} /* faint Aianemo logo, whole, sitting over the footer's top edge, same space from the right and the bottom; tinted for light or dark mode */
@media (max-width:700px){.foot::before{width:250px;height:250px;right:18px;bottom:18px}}
.about-logo{display:block;width:170px;height:170px;margin:0 0 28px}
@media (max-width:520px){.about-logo{width:140px;height:140px}}

/* theme toggle */
.icon-btn{width:36px;height:34px;padding:0;display:inline-grid;place-items:center}
.icon-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* falling sakura petals: light mode only, behind the content */
.petals{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;display:none}
:root[data-theme="light"] .petals{display:block}
.petal{position:absolute;top:-6vh;left:var(--x);animation:petal-fall var(--d) linear var(--delay) infinite}
.petal i{display:block;width:var(--s);height:calc(var(--s) * .8);border-radius:150% 0 150% 0;
  background:linear-gradient(135deg,#FBD3DD 0%,#F4A7B9 70%,#EE93A9 100%);opacity:.9;box-shadow:0 1px 2px rgba(200,80,110,.15);
  animation:petal-sway var(--sw) ease-in-out infinite alternate,petal-spin var(--sp) linear infinite}
@keyframes petal-fall{to{transform:translate3d(var(--drift),112vh,0)}}
@keyframes petal-sway{from{margin-left:-28px}to{margin-left:28px}}
@keyframes petal-spin{0%{transform:rotate(0deg) rotateX(0deg)}50%{transform:rotate(180deg) rotateX(55deg)}100%{transform:rotate(360deg) rotateX(0deg)}}
/* reduce-motion devices get a calmer version: fewer petals, slower, no spinning */
@media (prefers-reduced-motion: reduce){.petal{animation-duration:calc(var(--d) * 1.8)}.petal i{animation:none;transform:rotate(35deg)}.petal:nth-child(n+8){display:none}}
.foot-in{display:grid;grid-template-columns:1fr auto;column-gap:40px;align-items:stretch}
.foot-col{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;gap:10px}
.foot .foot-tag{margin:0}
.foot-h{font-family:var(--head);font-weight:700;font-size:1rem;color:var(--text);line-height:1.2}
@media (max-width:700px){.foot-in{grid-template-columns:1fr}.foot-col+.foot-col{margin-top:calc(var(--gap) / 2)}}
.socials{display:flex;flex-wrap:wrap;gap:8px}
.socials a{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border:1.5px solid var(--line);border-radius:999px;color:var(--text);text-decoration:none;font-weight:500;background:var(--sheet)}
.socials a:hover{border-color:var(--ink);color:var(--ink)}
.socials svg{width:16px;height:16px;fill:currentColor;flex:none}
@supports (text-box: trim-both cap alphabetic){.socials a > span{text-box:trim-both cap alphabetic}} /* centre icons on the letters, not the line box */
.foot .copy{grid-column:1/-1;text-align:center;border-top:1px solid var(--line);padding-top:12px;margin:16px 0 0} /* slim strip: 16px of space above and below the text */
@media (max-width:700px){.foot .copy{margin-top:calc(var(--gap) / 2)}} /* phones: same 28px above and below the divider */
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translate(-50%,12px);background:var(--btn-bg);color:var(--btn-fg);padding:12px 18px;border-radius:10px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;max-width:calc(100% - 40px);z-index:20;font-weight:500}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* preview pages (always paper-white, like a printout) */
.page{--cross:linear-gradient(#E3ECE6,#E3ECE6) center/.25cqw 100% no-repeat,linear-gradient(#E3ECE6,#E3ECE6) center/100% .25cqw no-repeat;
  container-type:inline-size;aspect-ratio:1/1.3;background:#fff;color:#1B2033;border:1px solid #D9DEE6;border-radius:3px;position:relative;overflow:hidden;box-shadow:0 16px 34px -24px rgba(20,30,70,.5)}
.page.img{aspect-ratio:auto;background:#fff}
.page.img img{display:block;width:100%;height:auto}
.thumbs .page.img img{aspect-ratio:1/1.3;object-fit:cover;object-position:top}
.state{color:var(--muted)}
.state p{margin:0}
.soon-page{max-width:560px}
.soon-page .pg-h1{margin-bottom:12px}
.state .btn{margin-top:14px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* small phones: a more compact header so the logo and all buttons stay on one row */
@media (max-width:430px){
  header .bar{column-gap:6px}
  .logo{font-size:clamp(12px, 6.36vw - 7.45px, 17.9px);gap:6px;letter-spacing:-.01em} /* the name grows to fill the space beside the buttons */
  .seal{width:24px;height:24px;font-size:14px}
  header .actions{gap:6px}
  .actions #musicBtn,.actions #themeBtn,.actions #langBtn{height:30px}
  .actions #musicBtn,.actions #themeBtn{width:30px}
  .actions #langBtn{padding:0 7px}
  .icon-btn svg{width:16px;height:16px}
  .cart-ico{width:15px;height:20px}
  .actions .cart-link .count{min-width:15px;height:15px;font-size:9.5px;padding:0 3px}
}
/* tiny phones: everything a touch smaller, so the logo, its stamp and all buttons keep one row */
@media (max-width:374px){
  .logo{gap:5px}
  .seal{width:22px;height:22px;font-size:13px}
  header .actions{gap:4px}
  .actions #musicBtn,.actions #themeBtn,.actions #langBtn{height:28px}
  .actions #musicBtn,.actions #themeBtn{width:28px}
  .actions #langBtn{padding:0 5px}
  .icon-btn svg{width:15px;height:15px}
}
@media (max-width:340px){header .bar{column-gap:3px}.logo{gap:4px}.seal{width:20px;height:20px;font-size:12px}header .actions{gap:3px}.actions #langBtn{padding:0 4px}.actions .cart-link{gap:2px}}

/* ===== Study section (demo) ===== */
:root{--ok:#2E7550;--ok-bg:#E3F1E8;--no-bg:#FBE7E8}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--ok:#86D3A6;--ok-bg:#1D3A2E;--no-bg:#3D2230}}
:root[data-theme="dark"]{--ok:#86D3A6;--ok-bg:#1D3A2E;--no-bg:#3D2230}
.eyebrow{font-size:.8rem;letter-spacing:.09em;text-transform:uppercase;color:var(--stamp);font-weight:700;margin:0 0 12px;display:flex;align-items:center;gap:10px}
.eyebrow .jp{font-family:var(--jp);letter-spacing:.05em;text-transform:none;color:var(--muted);font-weight:400}
html[lang="bn"] .eyebrow{letter-spacing:.02em;font-size:.88rem}
.st-top{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:56px;align-items:center}
@media (max-width:860px){.st-top{grid-template-columns:1fr;gap:calc(var(--gap) * .75)}}
.st-h1{font-family:var(--head);font-weight:700;font-size:clamp(2rem,4.4vw,3.15rem);line-height:1.15;letter-spacing:-.01em;color:var(--ink);margin:0 0 18px;text-wrap:balance;max-width:16ch}
html[lang="bn"] .st-h1{line-height:1.3}
.st-top .lede{margin-bottom:0}
/* progress: one manuscript square per lesson, stamped 済 when done */
.st-prog{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:28px}
.st-boxes{display:flex;gap:6px}
.st-box{width:36px;height:36px;border:1.5px solid var(--grid);display:grid;place-items:center;
  background:linear-gradient(var(--grid-faint),var(--grid-faint)) center/1px 100% no-repeat,linear-gradient(var(--grid-faint),var(--grid-faint)) center/100% 1px no-repeat,var(--sheet)}
.st-prog span.muted{font-size:.95rem}
.hanko-s{color:var(--stamp);border:2px solid var(--stamp);border-radius:5px;font-family:var(--jp);font-weight:700;font-size:15px;line-height:1;width:25px;height:25px;display:grid;place-items:center;transform:rotate(-8deg);background:var(--sheet)}
.hanko-s.pop{animation:st-stamp .4s cubic-bezier(.2,1.4,.4,1)}
@keyframes st-stamp{from{transform:scale(1.9) rotate(-18deg);opacity:0}to{transform:scale(1) rotate(-8deg);opacity:1}}

/* word of the day */
.wotd{background:var(--sheet);border:1px solid var(--line);border-radius:14px;padding:24px;box-shadow:0 22px 44px -32px rgba(30,42,94,.55);display:flex;flex-direction:column;gap:18px;min-width:0}
.wotd-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.wotd-head b{font-family:var(--head);color:var(--ink);font-size:1.02rem}
.wotd-head .jp{font-family:var(--jp);color:var(--muted);font-size:.9rem;margin-left:8px;font-weight:400}
.wotd-body{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.wcells{display:flex;border:2px solid var(--grid);flex:none}
.wc{width:var(--wc,74px);height:var(--wc,74px);border:1px solid var(--grid);display:grid;place-items:center;font-family:var(--jp);font-weight:700;font-size:calc(var(--wc,74px) * .62);color:var(--ink);line-height:1;
  background:linear-gradient(var(--grid-faint),var(--grid-faint)) center/1px 100% no-repeat,linear-gradient(var(--grid-faint),var(--grid-faint)) center/100% 1px no-repeat,var(--sheet)}
.wotd-read{font-family:var(--jp);font-size:1.15rem;color:var(--muted);line-height:1.3}
.wotd-mean{font-family:var(--head);font-size:1.45rem;font-weight:700;color:var(--ink);line-height:1.25}
.wotd-ex{border-top:1px dashed var(--line);padding-top:16px}
.wotd-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
@media (max-width:520px){.wotd{padding:20px}.wc{--wc:62px}}

/* Japanese lines with furigana */
.jp-line{font-family:var(--jp);font-size:1.28rem;line-height:2.05;color:var(--text);margin:0}
ruby rt{font-size:.5em;color:var(--muted);font-weight:400;letter-spacing:.02em}
.no-furi ruby rt{visibility:hidden}
.tr{color:var(--muted);margin:0;line-height:1.45}

/* lesson list */
.st-sec-head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.st-sec-head h2{margin:0}
.st-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.st-row{display:grid;grid-template-columns:46px minmax(0,1fr) auto;gap:18px;align-items:center;padding:16px 6px;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
a.st-row:hover .st-t{text-decoration:underline;text-underline-offset:3px}
.st-row .sq{font-family:var(--head);font-size:1.1rem}
.st-t{font-weight:600;font-size:1.06rem;color:var(--ink);line-height:1.35}
.st-t .jp{font-family:var(--jp)}
.st-m{color:var(--muted);font-size:.88rem;margin-top:2px}
.st-m span+span::before{content:"・";font-family:var(--jp)}
.st-go{width:20px;height:20px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.st-row.is-soon .sq{border-style:dashed;color:var(--muted);background:transparent}
.st-row.is-soon .st-t{color:var(--muted)}

/* practice */
.st-prac{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
@media (max-width:760px){.st-prac{grid-template-columns:1fr}}
.qcard{background:var(--sheet);border:1px solid var(--line);border-radius:14px;padding:24px;display:flex;gap:20px;align-items:flex-start;min-width:0}
.qcard h3{margin:0 0 4px;font-size:1.12rem;color:var(--ink);font-family:var(--head)}
.qcard p{margin:0 0 14px;color:var(--muted);font-size:.95rem}
.qcard .best{font-size:.88rem;color:var(--ink);font-weight:600;margin:-6px 0 14px}
.qcard.later{background:transparent;border:2px dashed var(--grid)}
.qcard.later p{margin:0}
.qcard .wc{--wc:58px;flex:none}
.qcard.later .wc{color:var(--muted)}
.st-paper{border-top:1px solid var(--line);padding-top:calc(var(--gap) / 2);display:flex;justify-content:space-between;align-items:center;gap:18px 30px;flex-wrap:wrap}
.st-paper p{color:var(--muted);margin:14px 0 0;max-width:56ch}

/* lesson page */
.ls{max-width:780px}
.ls .tags{display:flex;gap:8px;flex-wrap:wrap;margin:26px 0 14px}
.ls .lede{max-width:60ch}
.ls-body{display:flex;flex-direction:column;gap:44px;margin-top:40px}
.ls-h{font-family:var(--head);font-weight:700;font-size:1.32rem;color:var(--ink);margin:0}
.ls-blk{display:flex;flex-direction:column;gap:16px;min-width:0}
.ls-blk .head-row{margin:0}
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
@media (max-width:640px){.pair{grid-template-columns:1fr}}
.pcard{background:var(--sheet);border:1px solid var(--line);border-radius:12px;padding:20px;display:flex;gap:16px;align-items:flex-start;min-width:0}
.pcard .wc{--wc:58px;flex:none}
.pcard h3{margin:0 0 6px;font-size:1.04rem;color:var(--ink);line-height:1.35}
.pcard p{margin:0;color:var(--muted);font-size:.95rem}
.pcard .jp{font-family:var(--jp)}
.exs{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.exs li{padding:12px 0 14px;border-bottom:1px dashed var(--line)}
.kgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.kitem{background:var(--sheet);border:1px solid var(--line);border-radius:12px;padding:16px;display:flex;gap:14px;align-items:center;min-width:0}
.kitem .wc{--wc:56px;flex:none}
.kitem b{display:block;color:var(--ink);line-height:1.3}
.kitem small{display:block;color:var(--muted);font-family:var(--jp);font-size:.82rem;line-height:1.5;margin-top:2px}
@media (max-width:520px){.kgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.kitem{flex-direction:column;text-align:center;gap:10px;padding:16px 10px}} /* phones: square on top, words below */
.kitem small i{font-style:normal;color:var(--stamp);margin-right:3px}
.tbl-wrap{overflow-x:auto;border-top:1px solid var(--line)}
.ls-table{width:100%;border-collapse:collapse}
.ls-table td{padding:10px 12px 10px 0;border-bottom:1px solid var(--line);vertical-align:middle}
.ls-table td:first-child{font-family:var(--jp);font-size:1.2rem;line-height:2;white-space:nowrap;padding-right:22px}
.ls-table td:last-child{color:var(--muted)}
.ls-table .sky{font-family:var(--jp);color:var(--stamp);white-space:nowrap}
.tip{border-left:4px solid var(--stamp);background:var(--sheet);padding:18px 20px;border-radius:0 12px 12px 0}
.tip h3{margin:0 0 6px;font-size:1.04rem;color:var(--ink)}
.tip p{margin:0;color:var(--text)}
.tip .jp{font-family:var(--jp)}
/* quick check */
.chk{background:var(--sheet);border:1px solid var(--line);border-radius:14px;padding:22px;display:flex;flex-direction:column;gap:24px}
.chk-q{display:flex;flex-direction:column;gap:10px}
.chk-q + .chk-q{border-top:1px dashed var(--line);padding-top:22px}
.chk-p{margin:0;font-weight:600}
.opts{display:flex;gap:10px;flex-wrap:wrap}
.opt{font:inherit;font-family:var(--body);font-size:1.05rem;padding:9px 18px;min-width:64px;border:1.5px solid var(--line);border-radius:10px;background:var(--paper);color:var(--text);cursor:pointer;line-height:1.4}
.opt .jp,.opt.jp{font-family:var(--jp)}
.opt:hover:not([disabled]){border-color:var(--ink)}
.opt[disabled]{cursor:default}
.opt.right{border-color:var(--ok);background:var(--ok-bg);color:var(--ok);font-weight:700}
.opt.wrong{border-color:var(--stamp);background:var(--no-bg);color:var(--stamp)}
.fb{margin:0;display:flex;gap:10px;align-items:baseline}
.fb .mk{font-family:var(--jp);font-weight:700;font-size:1.2rem;line-height:1}
.fb.ok .mk{color:var(--stamp)}
.fb.no .mk{color:var(--muted)}
.fb b{color:var(--ink)}
.fb span.muted{font-size:.95rem}
.ls-end{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:26px}
.ls-end .btn .hanko-s{width:22px;height:22px;font-size:13px}
.ls-rel{font-size:.95rem;color:var(--muted);margin:0}

/* quiz */
.qz{max-width:700px}
.qz .st-boxes{flex-wrap:wrap;margin:22px 0 26px}
.qz .st-box{width:30px;height:30px}
.qz .st-box.now{border-color:var(--ink);border-width:2px}
.qz .st-box .mk{font-family:var(--jp);font-weight:700;font-size:17px;line-height:1}
.qz .st-box .mk.ok{color:var(--stamp)}
.qz .st-box .mk.no{color:var(--muted)}
.qz-card{background:var(--sheet);border:1px solid var(--line);border-radius:16px;padding:28px;display:flex;flex-direction:column;gap:20px}
.qz-n{color:var(--muted);font-size:.9rem;margin:0}
.qz-p{margin:0;font-weight:600;font-size:1.1rem;color:var(--ink)}
.qz-big .wcells{width:fit-content}
.qz-big .wc{--wc:92px}
.qz-big .jp-line{font-size:clamp(1.4rem,4.5vw,1.9rem)}
.qz-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.qz-opts .opt{padding:14px;font-size:1.12rem;text-align:center;width:100%}
.qz-opts .opt.jp{font-size:1.3rem}
.qz-foot{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
@media (max-width:520px){.qz-card{padding:20px}.qz-big .wc{--wc:76px}}
/* result: the round teacher's stamp */
.res{display:flex;gap:34px;align-items:center;flex-wrap:wrap}
.res-stamp{width:156px;height:156px;flex:none;border:4px double var(--stamp);border-radius:50%;color:var(--stamp);font-family:var(--jp);font-weight:700;display:grid;place-items:center;text-align:center;font-size:1.22rem;line-height:1.35;transform:rotate(-10deg);animation:st-big .5s cubic-bezier(.2,1.3,.4,1)}
@keyframes st-big{from{transform:scale(1.8) rotate(-22deg);opacity:0}to{transform:scale(1) rotate(-10deg);opacity:1}}
@media (prefers-reduced-motion: reduce){.res-stamp,.hanko-s.pop{animation:none}}
.res-score{font-family:var(--head);font-size:2.6rem;font-weight:700;color:var(--ink);line-height:1;margin:0}
.res-score small{font-size:1.1rem;color:var(--muted);font-weight:400}
.res p{margin:8px 0 0}
.res .ctas{margin-top:20px}

/* soft colour bands between sections, full width (like a notebook's tinted pages) */
:root{--band-a:rgba(70,120,200,.065);--band-b:rgba(70,120,200,.13);--glass:rgba(243,246,241,.3)} /* misty blue-grey, a lighter shade of the indigo ink */ /* soft blue bands; see-through header */
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--band-a:rgba(120,150,255,.045);--band-b:rgba(120,150,255,.09);--glass:rgba(17,21,42,.35)}}
:root[data-theme="dark"]{--band-a:rgba(120,150,255,.045);--band-b:rgba(120,150,255,.09);--glass:rgba(17,21,42,.35)}
main{padding-bottom:calc(var(--gap) / 2)} /* every page: 30px (25px on phones) from the last content to the footer line */
.bands{margin-top:calc(-1 * var(--edge));margin-bottom:calc(-1 * var(--gap) / 2)}
/* one spacing rhythm for the whole site: 30px above and below each section's content (25px on phones), so 60px / 50px between sections */
:root{--gap:60px;--edge:50px} /* --edge: space under the header line and above the footer line */
@media (max-width:520px){:root{--gap:50px;--edge:40px}}
.bands > section{padding-block:calc(var(--gap) / 2)}
@supports (text-box: trim-both cap alphabetic){.bands > section > .wrap > h2,.bands .st-sec-head h2,.bands .st-paper h2{text-box:trim-both cap alphabetic}} /* space measured from the letters, like other pages */
.bands > .tint{background:linear-gradient(180deg,var(--band-a),var(--band-b))} /* clean edges, slightly deeper towards the bottom */
.bands > .tint-fade{background:linear-gradient(180deg,transparent,var(--band-b))} /* top section: paper melting into the blue */
.bands > .tint-fade{padding-top:var(--edge)}
.bands .st-paper{border-top:0;padding-top:0}
/* glassy header: the page shows through, softly blurred */
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .top{background:var(--glass);-webkit-backdrop-filter:saturate(1.6) blur(8px);backdrop-filter:saturate(1.6) blur(8px)}
}

/* ===== Landing page (demo) ===== */
.sec-h{margin:0 0 24px}
.starts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
@media (max-width:960px){.starts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.starts{grid-template-columns:1fr;gap:14px}}
.start{display:flex;flex-direction:column;gap:8px;background:var(--sheet);border:1px solid var(--line);border-radius:14px;padding:22px;text-decoration:none;color:inherit;min-width:0;transition:transform .2s ease,box-shadow .2s ease}
.start:hover{transform:translateY(-3px);box-shadow:0 18px 36px -28px rgba(30,42,94,.65)}
.start .g{font-family:var(--jp);font-weight:700;font-size:2.3rem;line-height:1.1;color:var(--ink);margin-bottom:6px}
.start h3{margin:0;font-size:1.12rem;line-height:1.3;color:var(--ink);font-family:var(--head)}
.start p{margin:0;color:var(--muted);font-size:.95rem;flex:1}
.start .go{display:flex;align-items:center;gap:2px;font-weight:600;color:var(--ink);margin-top:6px}
.start .go .st-go{width:18px;height:18px}
.start .g{white-space:nowrap}
@media (max-width:560px){.start{display:grid;grid-template-columns:74px minmax(0,1fr);column-gap:12px;row-gap:4px;padding:18px}.start .g{grid-row:1 / span 3;font-size:1.45rem;margin:0}.start .go{margin-top:2px}}
@media (prefers-reduced-motion: reduce){.start,.start:hover{transition:none;transform:none}}
.st-top h2{margin:0 0 14px}
.foot-tag .motto{display:block;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--stamp);margin-top:6px;font-weight:600}
.shop-steps{margin-top:calc(var(--gap) / 2);padding-top:calc(var(--gap) / 2);border-top:1px solid var(--line)} /* a section break: 30px either side of the line (25px on phones) */
@supports (text-box: trim-both cap alphabetic){.shop-steps h2{text-box:trim-both cap alphabetic}} /* measured from the letters, like other headings */
.shop-steps h2{margin:0 0 24px}

/* centred headings for sections that are a row of cards; lists, lessons and split layouts stay left-aligned for easy reading */
.sec-h.c{text-align:center;text-wrap:balance}
.more-c{text-align:center;margin:30px 0 0}

/* centred where nothing sits on the right; split layouts (hero, product, cart, word card) stay left */
.page-pad > .eyebrow{justify-content:center}
.page-pad > .pg-h1,.page-pad > .pg-h1 + .muted{text-align:center}
.page-pad > .pg-h1 + .muted{max-width:60ch;margin-inline:auto}
.page-pad > .btn{display:flex;width:fit-content;margin:18px auto 0} /* empty cart */
.filters,.fgroup{justify-content:center}
.shop-steps h2{text-align:center}
.about{text-align:center}
.about .about-logo{margin-inline:auto}
.about details{text-align:left}
.done{margin-inline:auto;max-width:640px;text-align:center}
.done .seal-big{margin-inline:auto}
.ls > .tags{justify-content:center}
.ls > .pg-h1,.ls > .lede,.qz > .pg-h1{text-align:center;margin-inline:auto;text-wrap:balance}
.qz .st-boxes{justify-content:center}
.qz-n,.qz-p{text-align:center}
.qz-big{display:flex;justify-content:center;text-align:center}
.res{justify-content:center}

/* blocks that sit on the left keep their place, but their text is centred inside them */
.hero-in > div:first-child,.st-top > div:first-child,.st-paper > div:first-child,.free-block > div:last-child,.pack > div:last-child{text-align:center}
.hero h1,.st-h1,.hero-in .lede,.st-top .lede,.st-paper p,.free-block p,.pack p{margin-inline:auto}
.hero-in .ctas,.st-top .ctas,.st-top .eyebrow,.st-prog,.free-block .ctas,.pack .buy{justify-content:center}

.start.still:hover{transform:none;box-shadow:none} /* same card look, but these are not links */
@media (max-width:560px){.start.still{grid-template-columns:40px minmax(0,1fr)}.start.still .g{grid-row:1 / span 2}} /* one kanji needs a narrower column */
.step-cards{list-style:none;margin:0;padding:0}
.step-cards .start p{color:var(--text);font-size:1rem} /* the step itself is the main text here */
@media (max-width:560px){.step-cards .start{align-items:center}.step-cards .start .g{grid-row:auto}} /* one line of text: kanji and text side by side */
.filters{margin-top:25px} /* 30px from the line above to the buttons, same as buttons to covers */

/* ===== spacing system (measured from the letters) =====
   header → first content 50/40 · section break 30 each side (25 on phones) · heading → its content 24
   back link → next 24 · page title → its line 22 · page intro → page content 30 · last content → footer 30/25 */
@supports (text-box: trim-both cap alphabetic){
  .ls-h,.more h2,.ls-rel,.st-paper p,.ls > .lede,.page-pad > .pg-h1 + .muted,.about > p,.pcard p{text-box:trim-both cap alphabetic}
}
.ls > .tags{margin-top:24px}
.ls > .lede{margin:22px auto 0}
.ls-body{margin-top:30px;gap:60px}
.ls-blk{gap:24px}
.ls-blk > .head-row .chip,.st-sec-head .chip{margin-block:-8px} /* the button doesn't push the content down */
.ls-body > .ls-end{margin-top:-30px;padding-top:30px}
.ls-body > .ls-rel{margin-top:-30px}
.st-sec-head{margin-bottom:24px}
.page-pad > .pg-h1 + .muted{margin-top:22px}
.filters{margin-top:30px}
.page-pad > .btn{margin-top:30px}
.about > p{margin:22px 0 0}
.about > p + p{margin-top:20px}
.about > p + .btn{margin-top:30px}
.about .about-logo{margin-bottom:24px}
.pg-h1 + details,html[lang="bn"] .pg-h1 + details{margin-top:16px} /* FAQ title → first question: 30 */
.qz > .pg-h1{margin-top:24px!important}
.qz .st-boxes{margin:22px 0 30px}
.pd{padding-top:24px}
.more{margin-top:20px}
.more h2{margin:0}
.more-grid{margin-top:24px}
.st-paper p{margin-top:16px}
.ls-blk > .head-row,.st-sec-head{align-items:center}
.ls-blk > .head-row .chip,.st-sec-head .chip{margin-block:-12px} /* the button hangs over the heading's line, so heading → content stays 24 */
/* titles and labels */
.eyebrow{margin-bottom:0}
.eyebrow + h1,.eyebrow + h2,.eyebrow + .pg-h1,.eyebrow + .st-h1{margin-top:20px}
@supports (text-box: trim-both cap alphabetic){.eyebrow,.hero .lede,.st-top .lede{text-box:trim-both cap alphabetic}}
.hero h1,.st-h1,.st-top h2{margin-bottom:22px}
.hero-in .lede,.st-top .lede{margin:0 auto}
.hero .ctas,.st-top .ctas{margin-top:30px!important}
.st-top .st-prog{margin-top:30px}
.st-paper p{margin-top:22px}
.about > p + p{margin-top:22px}
.pg-h1 + details,html[lang="bn"] .pg-h1 + details{margin-top:11px}
.more{margin-top:30px}
@supports (text-box: trim-both cap alphabetic){.specs > :nth-last-child(-n+2){text-box:trim-end alphabetic}}
.eyebrow{display:block}
.eyebrow .jp{margin-left:10px}
.page-pad > .eyebrow{text-align:center}
@supports (text-box: trim-both cap alphabetic){.st-top h2,.st-h1{text-box:trim-both cap alphabetic}}
@supports (text-box: trim-both cap alphabetic){#main .about > p{text-box:trim-both cap alphabetic}}
.ls-body{gap:var(--gap)}
.ls-body > .ls-end{margin-top:calc(var(--gap) / -2);padding-top:calc(var(--gap) / 2)}
.ls-body > .ls-rel{margin-top:calc(var(--gap) / -2)}
/* stacked layouts on phones: block → block 30 (like a line → its content) */
@media (max-width:860px){.hero-in,.st-top{gap:30px}}
@media (max-width:820px){.pd{gap:30px}}
@media (max-width:860px){.cart{gap:30px}}
@media (max-width:640px){.st-paper{row-gap:30px}}
/* cards side by side: 20px apart (14px on phones) */
.starts,.st-prac,.pair,.kgrid{gap:20px}
@media (max-width:560px){.starts,.st-prac,.pair,.kgrid{gap:14px}}
@media (max-width:760px){.st-prac{gap:14px}}
@media (max-width:640px){.pair{gap:14px}}
/* product page: title → line 22, line → price row 30, sub-heading 30 above and 24 to its list */
@supports (text-box: trim-both cap alphabetic){.info h1,.info .lede,.info .h3,.more h3,.more-grid p{text-box:trim-both cap alphabetic}.specs > :nth-last-child(-n+2),.inside li:last-child{text-box:trim-end cap alphabetic}}
.info .tags + h1{margin:24px 0 0}
.info .lede{margin:22px 0 0}
.info .buy{margin:30px 0 0}
.info .note{margin-top:16px}
.info .h3{margin:30px 0 24px}
.inside{margin:0}
.more{margin-top:calc(var(--gap) / 2);padding-top:calc(var(--gap) / 2)}
.more h3{margin:0 0 16px}
.more-grid > div > p{margin:0}
.more-grid > div > p + h3{margin-top:30px}
/* cart: title → first item 30 */
.cart .pg-h1{margin-bottom:16px}
@supports (text-box: trim-both cap alphabetic){.st-prog > span,.info .note{text-box:trim-both cap alphabetic}.inside li:first-child{text-box:trim-start cap alphabetic}.specs > :nth-child(-n+2){text-box:trim-start cap alphabetic}}
.info .note + .h3{margin-top:30px}

/* ===== Redesign (demo): ink, paper, brush and stamp =====
   Layout idea: a navy "ink" hero and footer frame the paper pages; Japanese is the decoration (brush kanji, red labels, tategaki). */
:root{
  --navy:#141B3D; --navy-2:#1D2652; --on-navy:#F1F2F8; --on-navy-2:#B4BAD6; --navy-line:rgba(255,255,255,.14);
  --brush:"Yuji Syuku","Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --display:"Cormorant Garamond","Tiro Bangla","Bornomala","Zen Old Mincho",Georgia,serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--navy:#0A0E21;--navy-2:#141A38;--on-navy:#E9EBF5;--on-navy-2:#A3AACB;--navy-line:rgba(255,255,255,.12)}}
:root[data-theme="dark"]{--navy:#0A0E21;--navy-2:#141A38;--on-navy:#E9EBF5;--on-navy-2:#A3AACB;--navy-line:rgba(255,255,255,.12)}

/* display type: an elegant serif for English headings (Bangla falls back to Bornomala) */
.hero2 h1,.sec-h,.st-top h2,.st-h1,.pg-h1,.free-block h2,.letter h2,.st-sec-head h2,.shop-steps h2,.ls-h{font-family:var(--display);font-weight:600;letter-spacing:-.005em}
html[lang="bn"] .hero2 h1,html[lang="bn"] .sec-h,html[lang="bn"] .pg-h1{font-weight:400;letter-spacing:0}
.sec-h,.st-top h2,.free-block h2,.letter h2,.pg-h1{font-size:clamp(1.7rem,3.4vw,2.25rem)}

/* red Japanese word beside headings */
[data-jp]:not([data-jp=""])::after{content:attr(data-jp);font-family:var(--jp);font-size:.5em;font-weight:500;color:var(--stamp);margin-left:.6em;letter-spacing:.08em;vertical-align:.18em;white-space:nowrap}

/* ---------- hero: ink background, brush kanji of the day ---------- */
.bands > .hero2{background:var(--navy);color:var(--on-navy);padding-block:calc(var(--edge) + 6px) calc(var(--gap) / 2 + 14px);position:relative;overflow:hidden}
.hero2::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:linear-gradient(var(--navy-line) 1px,transparent 1px) 0 0/56px 56px,linear-gradient(90deg,var(--navy-line) 1px,transparent 1px) 0 0/56px 56px;
  -webkit-mask:linear-gradient(90deg,transparent 0%,#000 55%);mask:linear-gradient(90deg,transparent 0%,#000 55%)} /* manuscript-paper grid fading in on the right */
.hero2-in{position:relative;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:48px;align-items:center}
@media (max-width:860px){.hero2-in{grid-template-columns:1fr;gap:34px}}
.h2-text{text-align:left}
.kicker{margin:0 0 18px;font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--on-navy-2);display:flex;align-items:center;gap:12px}
.kicker::before{content:"";width:28px;height:1px;background:var(--stamp)}
html[lang="bn"] .kicker{letter-spacing:.06em;font-size:.86rem}
.hero2 h1{color:var(--on-navy);font-size:clamp(2.5rem,5.6vw,4.2rem);line-height:1.04;margin:0 0 22px;text-wrap:balance}
html[lang="bn"] .hero2 h1{line-height:1.25;font-size:clamp(2.2rem,5vw,3.6rem)}
.brush{position:relative;font-style:italic;white-space:nowrap}
html[lang="bn"] .brush{font-style:normal}
.brush::after{content:"";position:absolute;left:-2%;right:-4%;bottom:-.12em;height:.32em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24' preserveAspectRatio='none'%3E%3Cpath d='M4 15 C 60 7, 120 5, 180 8 S 270 14, 296 9' fill='none' stroke='%23C7333D' stroke-width='7' stroke-linecap='round'/%3E%3Cpath d='M40 18 C 110 12, 190 12, 260 15' fill='none' stroke='%23C7333D' stroke-width='2.5' stroke-linecap='round' opacity='.55'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.hero2 .lede{color:var(--on-navy-2);margin:0;max-width:46ch}
.hero2 .ctas{margin-top:30px;justify-content:flex-start}
.btn.red{background:var(--stamp);border-color:var(--stamp);color:#fff}
.btn.ghost{background:transparent;border-color:var(--on-navy-2);color:var(--on-navy)}
.btn.ghost:hover{border-color:var(--on-navy)}
.hero-meta{margin:20px 0 0;font-size:.86rem;color:var(--on-navy-2);letter-spacing:.02em}

/* today's kanji */
.kd{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.kd-top{display:flex;gap:10px;align-items:center;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--on-navy-2)}
.kd-top .jp{font-family:var(--jp);letter-spacing:.1em;text-transform:none}
.kd-sq{position:relative;width:min(300px,72vw);aspect-ratio:1;border:1.5px solid var(--navy-line);border-radius:4px;background:
  linear-gradient(var(--navy-line),var(--navy-line)) center/1px 100% no-repeat,linear-gradient(var(--navy-line),var(--navy-line)) center/100% 1px no-repeat,rgba(255,255,255,.03);
  display:grid;place-items:center;cursor:pointer;color:var(--on-navy);padding:0;font:inherit}
.kd-sq:hover{border-color:var(--on-navy-2)}
.kd-char{font-family:var(--brush);font-size:min(210px,50vw);line-height:1;color:var(--on-navy);text-shadow:3px 3px 0 rgba(199,51,61,.35)}
.kd-seal{position:absolute;right:-14px;bottom:-14px;width:46px;height:46px;transform:rotate(-8deg)}
.kd-tate{position:absolute;top:14px;right:14px;writing-mode:vertical-rl;font-family:var(--jp);font-size:.95rem;letter-spacing:.3em;color:var(--on-navy-2)}
.kd-info{display:flex;flex-direction:column;gap:4px}
.kd-read{font-family:var(--jp);color:var(--on-navy-2);font-size:.95rem}
.kd-read i{font-style:normal;color:var(--stamp);margin:0 4px 0 12px}
.kd-read i:first-child{margin-left:0}
.kd-mean{font-family:var(--display);font-size:1.6rem;font-weight:600;color:var(--on-navy);line-height:1.2}
.kd-hint{margin:0;font-size:.82rem;color:var(--on-navy-2)}
.kd-ex{max-width:340px}
.kd-ex .jp-line{color:var(--on-navy);font-size:1.2rem}
.kd-ex .tr{color:var(--on-navy-2)}
.kd ruby rt{color:var(--on-navy-2)}
@media (max-width:860px){.kd-sq{width:min(240px,64vw)}.kd-char{font-size:min(170px,44vw)}}

/* brush characters on cards, in stamp red */
.start .g{font-family:var(--brush);color:var(--stamp);font-weight:400;font-size:2.6rem}
@media (max-width:560px){.start .g{font-size:1.9rem}}

/* a note from Aianemo: a letter on manuscript paper */
.letter{max-width:720px;margin:0 auto;background:var(--sheet);border:1px solid var(--line);border-radius:6px;padding:36px 40px 30px;position:relative;
  background-image:linear-gradient(var(--grid-faint) 1px,transparent 1px);background-size:100% 32px;background-position:0 20px}
.letter p{margin:0 0 16px;line-height:2;font-size:1.04rem}
.letter .sign{display:flex;align-items:center;justify-content:flex-end;gap:14px;margin-top:6px}
.letter .sign .jp{font-family:var(--brush);font-size:1.35rem;color:var(--ink)}
.letter .sign .who{font-family:var(--display);font-style:italic;font-size:1.25rem;color:var(--muted)}
.letter .sign img{transform:rotate(-6deg)}
@media (max-width:560px){.letter{padding:26px 22px 22px}.letter .sign{flex-wrap:wrap}}

/* ---------- footer: ink, with a proverb of the day ---------- */
.foot{background:var(--navy);color:var(--on-navy-2);border-top:0}
.foot::before{background:#fff;opacity:.05}
.foot .logo,.foot .foot-h{color:var(--on-navy)}
.foot .foot-tag .motto{color:#F07C84}
.foot .socials a{background:transparent;border-color:var(--navy-line);color:var(--on-navy)}
.foot .socials a:hover{border-color:var(--on-navy)}
.foot .copy{border-top-color:var(--navy-line);color:var(--on-navy-2)}
.proverb{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr;column-gap:28px;row-gap:4px;align-items:baseline;padding-bottom:calc(var(--gap) / 2);margin-bottom:calc(var(--gap) / 2);border-bottom:1px solid var(--navy-line)}
.pv-h{grid-row:span 3;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--on-navy-2);display:flex;flex-direction:column;gap:4px}
.pv-h .jp{font-family:var(--jp);color:#F07C84;letter-spacing:.12em;text-transform:none;font-size:.85rem}
.pv-jp{font-family:var(--brush);font-size:1.9rem;color:var(--on-navy);line-height:1.2}
.pv-r{font-family:var(--jp);font-size:.9rem;color:var(--on-navy-2)}
.pv-m{font-family:var(--display);font-style:italic;font-size:1.2rem;color:var(--on-navy)}
html[lang="bn"] .pv-m{font-style:normal;font-size:1.05rem}
@media (max-width:560px){.proverb{grid-template-columns:1fr}.pv-h{grid-row:auto;flex-direction:row;gap:10px;margin-bottom:6px}.pv-jp{font-size:1.6rem}}

/* home: the first lessons beside "learn a little every day" (today's kanji is already in the hero) */
.lessons-card{background:var(--sheet);border:1px solid var(--line);border-radius:14px;padding:22px 24px 8px;box-shadow:0 22px 44px -32px rgba(30,42,94,.55);min-width:0}
.lc-h{margin:0 0 12px;font-family:var(--display);font-weight:600;font-size:1.3rem;color:var(--ink)}
.lc-h .jp{font-family:var(--body);font-size:.8rem;font-weight:600;background:var(--chip);border-radius:999px;padding:2px 9px;vertical-align:.2em;margin-left:6px}
.lessons-card .st-list{border-top:0}
.lessons-card .st-list li:last-child .st-row{border-bottom:0}

/* faint hiragana rows behind the hero headline */
.kana-rows{position:absolute;left:max(16px,calc(50% - 560px));top:18px;display:flex;flex-direction:column;gap:6px;font-family:var(--jp);font-size:1.5rem;letter-spacing:.75em;color:var(--on-navy);opacity:.07;white-space:nowrap;pointer-events:none;user-select:none}
@media (max-width:560px){.kana-rows{font-size:1.1rem;letter-spacing:.5em}}

/* take a sentence apart */
.sec-sub{text-align:center;color:var(--muted);margin:-12px auto 24px;max-width:56ch}
.lens{max-width:820px;margin:0 auto;background:var(--sheet);border:1px solid var(--line);border-radius:16px;padding:26px 28px;display:flex;flex-direction:column;gap:18px;box-shadow:0 22px 44px -34px rgba(30,42,94,.55)}
.lens-tabs{display:flex;gap:8px;justify-content:center}
.lens-tabs .chip{min-width:40px}
.lens-sent{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 4px}
.lp{font:inherit;font-family:var(--jp);font-size:clamp(1.6rem,4.4vw,2.3rem);line-height:1.3;padding:4px 6px 6px;border:0;border-bottom:4px solid var(--kc);background:transparent;color:var(--text);cursor:pointer;border-radius:6px 6px 0 0;transition:background .15s}
.lp:hover{background:var(--chip)}
.lp[aria-pressed="true"]{background:var(--kc);color:#fff}
.k-noun{--kc:#2E4A9E}.k-part{--kc:var(--stamp)}.k-verb{--kc:#2E7550}.k-time{--kc:#B07A12}.k-mark{--kc:var(--grid)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .k-noun{--kc:#7F9BFF}:root:not([data-theme="light"]) .k-verb{--kc:#5DBB89}:root:not([data-theme="light"]) .k-time{--kc:#E0A93C}}
:root[data-theme="dark"] .k-noun{--kc:#7F9BFF}:root[data-theme="dark"] .k-verb{--kc:#5DBB89}:root[data-theme="dark"] .k-time{--kc:#E0A93C}
.lp[aria-pressed="true"]{color:var(--paper)}
.lens-tr{text-align:center;margin:-6px 0 0;color:var(--muted);font-style:italic}
html[lang="bn"] .lens-tr{font-style:normal}
.lens-info{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;border-left:4px solid var(--kc);background:var(--paper);border-radius:0 12px 12px 0;padding:16px 20px}
.li-w{font-family:var(--jp);font-size:2.2rem;line-height:1;color:var(--kc);display:flex;flex-direction:column;gap:8px;min-width:3.2rem}
.li-r{font-size:.85rem;color:var(--muted)}
.li-k{display:inline-block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--kc);font-weight:700;margin-right:10px}
html[lang="bn"] .li-k{letter-spacing:.04em;font-size:.85rem}
.li-m{font-family:var(--display);font-size:1.3rem;color:var(--ink)}
.lens-info p{margin:6px 0 0;color:var(--text)}
.lens-tip{margin:0;font-size:.92rem;color:var(--muted);display:flex;gap:10px;align-items:baseline;border-top:1px dashed var(--line);padding-top:14px}
.lens-tip .jp{font-family:var(--jp);color:var(--stamp);font-weight:700;white-space:nowrap}
@media (max-width:560px){.lens{padding:20px 16px}.lens-info{grid-template-columns:1fr;gap:10px}.li-w{flex-direction:row;align-items:baseline;gap:12px}}

/* who it's for: three cards */
.starts.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:860px){.starts.three{grid-template-columns:1fr}}

/* send to a friend */
.share{max-width:720px;margin:30px auto 0;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.share p{margin:0;color:var(--muted)}
.share-btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}

/* red wavy line in place of the grey divider lines */
.shop-steps,.more,.ls-body > .ls-end{border-top:0!important;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 8'%3E%3Cpath d='M0 4 Q 10 0 20 4 T 40 4' fill='none' stroke='%23C7333D' stroke-width='1.4' opacity='.7'/%3E%3C/svg%3E") top left/40px 8px repeat-x}
@media (max-width:560px){.start{grid-template-columns:40px minmax(0,1fr)}} /* one brush character per card now */

/* ===== text voices ===== */
/* 1. numbered section labels: kanji numeral + small spaced capitals */
.sec-num{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 0 14px;font-size:.74rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.sec-num::before{content:"";width:22px;height:1.5px;background:var(--stamp)}
.sec-num .n{font-family:var(--brush);font-size:1.15rem;letter-spacing:0;color:var(--stamp);font-weight:400;line-height:1}
html[lang="bn"] .sec-num{letter-spacing:.04em;font-size:.86rem}
.st-top .sec-num,.free-block .sec-num{justify-content:center}
.letter .sec-num{justify-content:flex-start}
.sec-num + .sec-h{margin-top:0}
/* 2. hanko stamps instead of round pills */
.price-row .pill,.stamp,.st-row .pill{font-family:var(--body);background:transparent;color:var(--stamp);border:1.5px solid var(--stamp);border-radius:3px;padding:1px 6px;font-size:.74rem;font-weight:700;transform:rotate(-4deg);display:inline-flex;align-items:center;gap:4px;line-height:1.4}
.price-row .pill::before{content:"お得";font-family:var(--jp)}
.st-row .pill::before{content:"近日";font-family:var(--jp)}
.stamp{font-family:var(--jp);font-size:.85rem}
/* 3. teacher's red-pen notes */
.pen-host{position:relative}
.pen-host::after{content:attr(data-pen);position:absolute;font-family:"Caveat","Bornomala",cursive;font-weight:600;font-size:1.35rem;color:var(--stamp);white-space:nowrap;pointer-events:none;transform:rotate(-6deg);line-height:1}
.start.pen-host::after{top:-30px;right:6px}
.lens.pen-host::after{top:22px;left:26px;transform:rotate(-8deg)}
.card.pen-low::after{bottom:4px;right:0;transform:rotate(-8deg)}
html[lang="bn"] .pen-host::after{font-size:1rem}
@media (max-width:560px){.start.pen-host::after{top:-24px;right:10px;font-size:1.15rem}.lens.pen-host::after{top:16px;left:14px;font-size:1.1rem}.card.pen-low::after{bottom:-2px;font-size:1.05rem}}
#main .starts{padding-top:6px}
/* 4. a tiny Japanese word under links */
.jcap{display:block;font-family:var(--jp);font-size:.72rem;color:var(--muted);letter-spacing:.06em;margin-top:-2px}
@media (min-width:761px){.nav a[data-jpn]:not([data-jpn=""]){display:inline-flex;flex-direction:column;align-items:center;line-height:1.2;padding-top:4px;padding-bottom:4px}
  .nav a[data-jpn]:not([data-jpn=""])::after{content:attr(data-jpn);font-family:var(--jp);font-size:.62rem;color:var(--stamp);letter-spacing:.1em;font-weight:500}}
/* 5. numbers in the display serif */
.price,.big-price,.res-score,.st-row .sq,.st-box .mk,.cart .total{font-family:var(--display);font-weight:700}
.price{font-size:1.25rem}.big-price{font-size:2.1rem}
/* 6. vertical Japanese label down the side of each section (wide screens) */
.bands > section{position:relative}
.tate{display:none}
@media (min-width:1240px){.tate{display:block;position:absolute;top:calc(var(--gap) / 2);left:max(14px,calc(50% - 600px));writing-mode:vertical-rl;font-family:var(--jp);font-size:.82rem;letter-spacing:.42em;color:var(--muted);opacity:.75;padding-top:30px}
  .tate::before{content:"";position:absolute;top:0;left:50%;width:1.5px;height:20px;background:var(--stamp);transform:translateX(-50%)}}
/* 7. spaced Japanese tagline in the hero */
.jp-sp{font-family:var(--jp);letter-spacing:.55em;text-transform:none;font-size:.9rem;color:var(--on-navy-2)}
.letter .sec-num{font-size:.74rem;line-height:1.2;margin:0 0 14px}
html[lang="bn"] .letter .sec-num{font-size:.86rem}

/* ===== calm pass ===== */
/* 1. traditional colours: 藍 indigo, 朱 vermilion, 生成り kinari paper */
:root{--paper:#F6F3EA;--sheet:#FFFDF8;--text:#22252F;--muted:#62626C;--ink:#233A6B;--btn-bg:#233A6B;--line:#E3DDCF;--chip:#ECE7DA;--stamp:#C8423A;
  --grid:#C6D3C2;--grid-faint:#E7ECE2;--navy:#1A2546;--navy-2:#22305A;
  --card-line:rgba(35,58,107,.07);--card-shadow:0 1px 2px rgba(34,37,47,.04),0 14px 34px -22px rgba(34,37,47,.22)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--card-line:var(--line);--card-shadow:0 14px 34px -24px rgba(0,0,0,.6)}}
:root[data-theme="dark"]{--card-line:var(--line);--card-shadow:0 14px 34px -24px rgba(0,0,0,.6)}
.brush::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24' preserveAspectRatio='none'%3E%3Cpath d='M4 15 C 60 7, 120 5, 180 8 S 270 14, 296 9' fill='none' stroke='%23C8423A' stroke-width='7' stroke-linecap='round'/%3E%3Cpath d='M40 18 C 110 12, 190 12, 260 15' fill='none' stroke='%23C8423A' stroke-width='2.5' stroke-linecap='round' opacity='.55'/%3E%3C/svg%3E")}
/* 2. washi paper grain */
body{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .22 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E")}
/* 3. softer cards: a shadow to rest on, instead of an outline */
.start,.qcard:not(.later),.pcard,.kitem,.lessons-card,.wotd,.lens,.chk,.qz-card,.free-block,.pack,.paybox,.memo,.letter,.tip{border-color:var(--card-line);box-shadow:var(--card-shadow)}
.start{border-radius:16px}
/* 4. calmer phone hero */
@media (max-width:560px){.kana-rows{display:none}}

/* 5. ensō behind today's kanji */
.kd-sq{overflow:visible}
.enso{position:absolute;inset:6%;width:88%;height:88%;pointer-events:none}
.enso path{fill:none;stroke:var(--on-navy);stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.enso .e1{stroke-width:9;opacity:.13}
.enso .e2{stroke-width:3;opacity:.08}
.kd-char{position:relative}

/* 6. ink-wash hills: the hero settles into the paper, the paper into the footer */
.bands > .hero2{padding-bottom:calc(var(--gap) / 2 + 70px)}
.hero-hills{position:absolute;left:0;bottom:-1px;width:100%;height:90px;pointer-events:none}
.hero-hills .h1{fill:#fff;opacity:.04}
.hero-hills .h2{fill:#fff;opacity:.06}
.hero-hills .h3{fill:var(--paper)}
@media (max-width:560px){.hero-hills{height:54px}.bands > .hero2{padding-bottom:calc(var(--gap) / 2 + 40px)}}
.foot-hills{height:70px;margin-top:-10px;position:relative;z-index:1;line-height:0}
.foot-hills svg{width:100%;height:100%;display:block}
.foot-hills .f1{fill:var(--navy);opacity:.35}
.foot-hills .f2{fill:var(--navy)}
.foot-hills .sun{fill:var(--stamp);opacity:.55}
@media (max-width:560px){.foot-hills{height:44px}}
main{padding-bottom:calc(var(--gap) / 2)}

/* 7. slow ink motion (first visit to the hero only; off for reduced motion) */
@media (prefers-reduced-motion: no-preference){
  html:not(.hero-done) .brush::after{animation:brush-draw 1s cubic-bezier(.6,0,.2,1) .5s both}
  html:not(.hero-done) .kd-char{animation:ink-in 1.6s ease-out .2s both}
  html:not(.hero-done) .enso path{animation:enso-draw 1.8s cubic-bezier(.5,0,.2,1) .1s both}
  html:not(.hero-done) .enso .e2{animation-delay:.5s}
  .rise{animation:rise .8s cubic-bezier(.2,.7,.2,1) calc(var(--ri,0) * 90ms) both}
}
@keyframes brush-draw{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes ink-in{from{opacity:0;filter:blur(10px);transform:scale(1.06)}to{opacity:1;filter:none;transform:none}}
@keyframes enso-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* 8. seasons for the falling petals */
[data-season="autumn"] .petal i{width:calc(var(--s) * 1.35);height:calc(var(--s) * 1.35);border-radius:0;box-shadow:none;opacity:.8;
  background:linear-gradient(160deg,#E2703A,#C23B22);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 4 L58 26 L72 16 L68 38 L92 32 L78 50 L96 60 L70 64 L76 86 L54 72 L52 96 L48 96 L46 72 L24 86 L30 64 L4 60 L22 50 L8 32 L32 38 L28 16 L42 26 Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 4 L58 26 L72 16 L68 38 L92 32 L78 50 L96 60 L70 64 L76 86 L54 72 L52 96 L48 96 L46 72 L24 86 L30 64 L4 60 L22 50 L8 32 L32 38 L28 16 L42 26 Z'/%3E%3C/svg%3E") center/contain no-repeat}
[data-season="autumn"] .petal{animation-duration:calc(var(--d) * 1.3)}
[data-season="winter"] .petal i{width:calc(var(--s) * .55);height:calc(var(--s) * .55);border-radius:50%;background:#fff;box-shadow:0 0 3px rgba(90,110,150,.35);animation:petal-sway var(--sw) ease-in-out infinite alternate}
[data-season="winter"] .petal{animation-duration:calc(var(--d) * 1.5)}
.foot-hills{margin-top:0}
.foot-hills.on-tint{background:linear-gradient(var(--band-b),var(--band-b)),var(--paper)}
main:has(.bands > section.tint:last-child){padding-bottom:0}

/* ===== stay-a-while pass ===== */
/* 1. hero sky follows the time of day */
.hero2 > .sky{position:absolute;inset:0;pointer-events:none}
[data-tod="dawn"] .hero2{background:linear-gradient(180deg,#24305B 0%,#3A3F72 55%,#7E5A78 100%)}
[data-tod="dusk"] .hero2{background:linear-gradient(180deg,#1C2850 0%,#3E3664 58%,#93524D 100%)}
[data-tod="night"] .hero2{background:linear-gradient(180deg,#0D1330 0%,#16204A 100%)}
[data-tod="night"] .hero2 > .sky{background:
  radial-gradient(1.2px 1.2px at 12% 18%,#fff 98%,transparent),radial-gradient(1px 1px at 28% 8%,#fff 98%,transparent),radial-gradient(1.4px 1.4px at 44% 22%,#fff 98%,transparent),
  radial-gradient(1px 1px at 58% 12%,#fff 98%,transparent),radial-gradient(1.3px 1.3px at 71% 26%,#fff 98%,transparent),radial-gradient(1px 1px at 86% 10%,#fff 98%,transparent),
  radial-gradient(1px 1px at 93% 34%,#fff 98%,transparent),radial-gradient(1.2px 1.2px at 6% 42%,#fff 98%,transparent),radial-gradient(1px 1px at 37% 40%,#fff 98%,transparent);opacity:.55}
.moon{display:none}
[data-tod="night"] .moon,[data-tod="dusk"] .moon{display:block;position:absolute;top:34px;right:max(24px,calc(50% - 600px));width:34px;height:34px;border-radius:50%;box-shadow:-7px 5px 0 0 #F3E7C4;transform:rotate(-20deg);opacity:.85}
[data-tod="dusk"] .moon{opacity:.4}
.greet{margin:0 0 10px;display:flex;align-items:baseline;gap:10px;color:var(--on-navy-2);font-size:.92rem}
.greet .jp{font-family:var(--brush);font-size:1.25rem;color:var(--on-navy)}
/* 2. page turns softly, like paper */
@media (prefers-reduced-motion: no-preference){main.turn{animation:page-in .5s ease-out both}}
@keyframes page-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* 3. the big finishing stamp */
.bigstamp{position:fixed;inset:0;display:grid;place-items:center;z-index:50;pointer-events:none}
.bigstamp span{width:150px;height:150px;border:6px solid var(--stamp);border-radius:16px;color:var(--stamp);font-family:var(--brush);font-size:96px;line-height:1;display:grid;place-items:center;background:rgba(255,253,248,.85);
  animation:press 1.5s cubic-bezier(.2,1.2,.4,1) both}
@keyframes press{0%{transform:scale(2.4) rotate(-22deg);opacity:0}22%{transform:scale(.94) rotate(-8deg);opacity:1}30%{transform:scale(1) rotate(-8deg)}80%{opacity:1}100%{opacity:0;transform:scale(1) rotate(-8deg)}}
@media (prefers-reduced-motion: reduce){.bigstamp span{animation:none;transform:rotate(-8deg)}}
/* 4. study stamp card */
.stampcard{position:relative;margin:26px auto 0;max-width:420px;background:var(--sheet);border:1px solid var(--card-line);box-shadow:var(--card-shadow);border-radius:14px;padding:16px 18px;text-align:center}
.sc-top{display:flex;justify-content:center;align-items:baseline;gap:8px;margin-bottom:12px}
.sc-top b{font-family:var(--display);font-size:1.15rem;color:var(--ink)}
.sc-top .jp{font-family:var(--jp);font-size:.8rem;color:var(--stamp)}
.sc-n{font-size:.75rem;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:0 8px}
.slots{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.slot{aspect-ratio:1;border-radius:50%;border:1.5px dashed var(--grid);display:grid;place-items:center;color:var(--muted);font-size:.8rem}
.slot.on{border:0}
.slot .st{width:100%;height:100%;border-radius:50%;border:2.5px solid var(--stamp);color:var(--stamp);font-family:var(--brush);font-size:1.15rem;display:grid;place-items:center;transform:rotate(-10deg);background:rgba(200,66,58,.06)}
.slot.pop .st{animation:st-stamp .5s cubic-bezier(.2,1.4,.4,1)}
.sc-msg{margin:12px 0 0;font-size:.88rem;color:var(--muted)}
.sc-done{position:absolute;right:-10px;top:-14px;width:76px;height:76px;border-radius:50%;border:3px double var(--stamp);color:var(--stamp);font-family:var(--jp);font-weight:700;font-size:.72rem;line-height:1.25;display:grid;place-items:center;transform:rotate(12deg);background:var(--sheet)}
/* 5. omikuji */
.omikuji{background:var(--sheet);border:1px solid var(--card-line);box-shadow:var(--card-shadow);border-radius:16px;padding:22px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;min-width:0}
.omi-top{display:flex;gap:8px;align-items:baseline}
.omi-top b{font-family:var(--display);font-size:1.3rem;color:var(--ink)}
.omi-top .jp{font-family:var(--jp);font-size:.85rem;color:var(--stamp)}
.omi-box{position:relative;width:86px;height:120px;border:0;border-radius:6px;cursor:pointer;padding:0;
  background:linear-gradient(90deg,rgba(0,0,0,.08),transparent 30%,transparent 70%,rgba(0,0,0,.12)),repeating-linear-gradient(0deg,#C99A5B 0 6px,#C1904F 6px 7px);box-shadow:0 10px 18px -10px rgba(60,40,20,.5)}
.omi-label{position:absolute;left:50%;top:14px;transform:translateX(-50%);writing-mode:vertical-rl;background:#fff;color:#B33A2F;font-family:var(--brush);font-size:1rem;padding:6px 3px;border-radius:2px;letter-spacing:.1em}
.omi-hole{position:absolute;left:50%;top:-6px;width:12px;height:12px;transform:translateX(-50%);border-radius:50%;background:#5A3D1E;box-shadow:inset 0 2px 2px rgba(0,0,0,.4)}
.omi-box.shake{animation:shake .7s ease-in-out}
@keyframes shake{0%,100%{transform:rotate(0)}20%{transform:rotate(-14deg)}40%{transform:rotate(12deg)}60%{transform:rotate(-9deg)}80%{transform:rotate(6deg)}}
.omi-hint{margin:0;font-size:.85rem;color:var(--muted)}
.slip{width:min(240px,100%);background:#FFFEFA;color:#2A2A2A;border:1px solid #E8E1CF;border-top:6px solid var(--stamp);padding:16px 16px 14px;display:flex;flex-direction:column;align-items:center;gap:6px;
  box-shadow:0 12px 24px -16px rgba(0,0,0,.4);animation:unfold .6s ease-out both}
@keyframes unfold{from{opacity:0;transform:translateY(-10px) scaleY(.7)}to{opacity:1;transform:none}}
.slip-r{font-family:var(--brush);font-size:2.6rem;line-height:1.1;color:var(--stamp)}
.slip-rm{font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:#6B6B6B}
html[lang="bn"] .slip-rm{letter-spacing:.02em;text-transform:none}
.slip-tip{margin:6px 0 0;font-size:.98rem;line-height:1.6;color:#2A2A2A}
.slip-lucky{margin:6px 0 0;padding-top:8px;border-top:1px dashed #E0D8C4;font-size:.8rem;color:#6B6B6B;display:flex;gap:6px;align-items:baseline;flex-wrap:wrap;justify-content:center}
.slip-lucky b{font-family:var(--brush);font-size:1.4rem;color:#22386A}
/* 8. haiku of the week, written top to bottom */
.foot-poems{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:30px;align-items:start;padding-bottom:calc(var(--gap) / 2);margin-bottom:calc(var(--gap) / 2);border-bottom:1px solid var(--navy-line)}
.foot-poems .proverb{padding:0;margin:0;border:0}
.haiku{display:grid;grid-template-columns:auto auto;column-gap:18px;align-items:start;max-width:330px}
.haiku .pv-h{grid-column:1/-1;flex-direction:row;gap:10px;margin-bottom:10px;grid-row:auto}
.hk-v{grid-row:2 / span 3;writing-mode:vertical-rl;display:flex;gap:8px;font-family:var(--brush);font-size:1.25rem;color:var(--on-navy);line-height:1.4;max-height:170px}
.hk-by{font-family:var(--jp);font-size:.85rem;color:#F07C84}
.haiku .pv-m{font-size:1rem}
@media (max-width:700px){.foot-poems{grid-template-columns:1fr}.haiku{max-width:none}}
.foot-poems .proverb{grid-column:auto}
.hk-v{max-height:none}
.hk-v span{white-space:nowrap}
.hk-v{flex-direction:column;gap:10px}

/* ===== quiet polish: things that respond softly ===== */
body{line-height:1.68}
/* 1. ink-fill buttons */
.btn{background-image:linear-gradient(rgba(255,255,255,.14),rgba(255,255,255,.14));background-repeat:no-repeat;background-size:0% 100%;transition:background-size .5s cubic-bezier(.3,.7,.2,1),color .3s,border-color .3s}
.btn:hover{filter:none;background-size:100% 100%}
.btn.alt,.btn.ghost{background-image:linear-gradient(var(--ink),var(--ink))}
.btn.alt:hover{color:var(--paper)}
.btn.ghost{background-image:linear-gradient(var(--on-navy),var(--on-navy))}
.btn.ghost:hover{color:var(--navy)}
.btn[disabled]{background-size:0 0}
/* 4. soft vermilion focus ring */
:focus-visible{outline:2px solid rgba(200,66,58,.55);outline-offset:3px;border-radius:6px}
/* 6. Japanese typesetting: proportional kana spacing */
.jp,.sec-h::after,[data-jp]::after,.pv-jp,.kd-tate,.slip-r,.greet .jp,.jp-sp,.hk-v,.lp,.jp-line,.haikei{font-feature-settings:"palt"}
/* 7. the letter opens with 拝啓, as Japanese letters do */
.haikei{float:left;writing-mode:vertical-rl;font-family:var(--brush);font-size:1.5rem;line-height:1;color:var(--stamp);margin:6px 14px 0 0;letter-spacing:.15em}
/* 8. vermilion text selection */
::selection{background:rgba(200,66,58,.2)}
/* 9. slim indigo scrollbar */
html{scrollbar-width:thin;scrollbar-color:rgba(35,58,107,.4) transparent}
::-webkit-scrollbar{width:9px;height:9px}::-webkit-scrollbar-thumb{background:rgba(35,58,107,.35);border-radius:9px;border:2px solid transparent;background-clip:content-box}::-webkit-scrollbar-track{background:transparent}
/* 10. breathing seal while the order is being placed */
.help.wait:not([hidden])::before{content:"";display:block;width:34px;height:34px;margin:0 auto 8px;background:url("../logo/seal.svg") center/contain no-repeat;animation:breathe 2.4s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.35;transform:scale(.94)}50%{opacity:1;transform:scale(1)}}
/* 12. gentle empty states: a faint ensō above the words */
.page-pad:has(> .pg-h1 + .muted + .btn)::before,.about:has(> .pg-h1 + .muted + .btn)::before{content:"";display:block;width:120px;height:120px;margin:0 auto 22px;background:var(--ink);opacity:.18;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M138 32 C 96 10, 40 30, 26 84 C 12 140, 62 182, 112 176 C 162 170, 188 128, 178 86 C 172 60, 156 44, 134 38' fill='none' stroke='%23000' stroke-width='11' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M138 32 C 96 10, 40 30, 26 84 C 12 140, 62 182, 112 176 C 162 170, 188 128, 178 86 C 172 60, 156 44, 134 38' fill='none' stroke='%23000' stroke-width='11' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
@media (prefers-reduced-motion: reduce){.btn{transition:none}.help.wait:not([hidden])::before{animation:none}}
.btn.alt,.btn.ghost{background-repeat:no-repeat;background-size:0% 100%}
.btn.alt:hover,.btn.ghost:hover{background-size:100% 100%}
.btn.alt{background-image:linear-gradient(var(--ink),var(--ink))}
.btn.ghost{background-image:linear-gradient(var(--on-navy),var(--on-navy))}

/* ===== quiet pass 2 ===== */
/* 1. info cards: thin coloured line on top, kana label, faded kanji in the corner */
.tone0{--kc:var(--stamp)}.tone1{--kc:#2E4A9E}.tone2{--kc:#2E7550}.tone3{--kc:#B07A12}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .tone1{--kc:#7F9BFF}:root:not([data-theme="light"]) .tone2{--kc:#5DBB89}:root:not([data-theme="light"]) .tone3{--kc:#E0A93C}}
:root[data-theme="dark"] .tone1{--kc:#7F9BFF}:root[data-theme="dark"] .tone2{--kc:#5DBB89}:root[data-theme="dark"] .tone3{--kc:#E0A93C}
#main .start.still{overflow:hidden}
#main .start.q{display:flex;flex-direction:column;align-items:stretch;text-align:left;gap:8px;position:relative;border-radius:4px 4px 8px 8px;border-top:2px solid var(--kc);padding:20px 22px 22px}
#main .start.still:hover{box-shadow:var(--card-shadow)}
#main .start.q .g{position:absolute;top:8px;right:12px;margin:0;font-family:var(--brush);font-size:3.4rem;line-height:1;color:var(--kc);opacity:.15;pointer-events:none}
.start.q .lbl{display:flex;align-items:center;gap:8px;font-family:var(--jp);font-size:.78rem;font-weight:600;letter-spacing:.22em;color:var(--kc);font-feature-settings:"palt"}
.start.q .lbl::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--kc);flex:none}
.start.q > :not(.g){position:relative}
#main .step-cards .start.q p{color:var(--muted);font-size:.95rem}
#main .step-cards .start.still .g{font-size:3.8rem;opacity:.2;top:6px}
@media (max-width:560px){#main .start.q{padding:16px 18px 18px}#main .start.q .g{font-size:2.8rem;right:10px}}

/* 2. proverb band: ink background, one proverb large, a huge faded kanji behind */
.foot-poems.solo{grid-template-columns:1fr}
.foot-poems.solo .proverb{display:none}
.foot-poems.solo .haiku{justify-self:center}

/* 3. closing: a small ink-wash scene on faint waves (青海波) */
.bands > .closing{text-align:center;overflow:hidden}
.sgh{position:absolute;left:0;right:0;bottom:0;width:100%;height:220px;pointer-events:none;opacity:.07;
  -webkit-mask:linear-gradient(transparent,#000 80%);mask:linear-gradient(transparent,#000 80%)}
.sgh .sg-f{fill:var(--paper)}
.sgh .sg-s{fill:none;stroke:var(--ink);stroke-width:1}
.close-in{position:relative}
.scene{display:block;width:min(500px,100%);height:auto;margin:0 auto 10px;-webkit-mask:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);mask:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent)}
.scene .w0{stop-color:var(--ink);stop-opacity:.6}.scene .w1{stop-color:var(--ink);stop-opacity:0}
.sc-sun{fill:var(--stamp);opacity:.32}
.sc-far{fill:url(#wash);opacity:.45}
.sc-mid{fill:url(#wash);opacity:.7}
.sc-near{fill:url(#wash)}
.sc-fog{fill:var(--paper);opacity:.85}
.sc-water,.sc-refl{fill:none;stroke:var(--ink);stroke-width:1.4;stroke-linecap:round;opacity:.16}
.sc-refl{opacity:.12}
.sc-boat path{fill:var(--ink);opacity:.78}
.sc-boat .ln{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round}
.close-k{margin:0 0 14px;font-family:var(--jp);font-size:.9rem;letter-spacing:.6em;padding-left:.6em;color:var(--stamp);font-feature-settings:"palt"}
.closing .sec-h{margin:0 0 14px}
.close-p{margin:0 auto;max-width:46ch;color:var(--muted);text-wrap:balance}
.closing .ctas{justify-content:center;margin-top:26px}

/* 4. lessons as stepping stones (飛び石) */
.st-list{border-top:0}
.st-list li{position:relative}
.st-row{border-bottom:0;position:relative}
.st-row::after{content:"";position:absolute;left:70px;right:0;bottom:0;height:1px;background:var(--line)}
.st-list li:last-child .st-row::after{display:none}
.st-row .sq{width:44px;height:38px;display:grid;place-items:center;border:0;border-radius:52% 48% 55% 45% / 58% 52% 48% 42%;background:var(--chip);color:var(--muted);
  font-family:var(--display);font-weight:700;font-size:1.15rem;transform:rotate(-5deg);box-shadow:inset 0 -3px 0 rgba(0,0,0,.05)}
.st-list li:nth-child(even) .sq{transform:rotate(6deg);border-radius:46% 54% 44% 56% / 52% 58% 42% 48%}
.st-list li:not(:last-child)::before{content:"";position:absolute;left:27px;top:calc(50% + 24px);height:calc(100% - 48px);border-left:2px dotted var(--grid);pointer-events:none}
.st-row.is-done .sq{background:var(--ink) radial-gradient(circle at 35% 30%,rgba(255,255,255,.2),transparent 62%);color:var(--paper);box-shadow:none}
.st-row.is-next .sq{background:var(--sheet);color:var(--ink);box-shadow:0 0 0 2px var(--ink),0 0 0 7px rgba(35,58,107,.1)}
@media (prefers-reduced-motion: no-preference){.st-row.is-next .sq{animation:stone 3.6s ease-in-out infinite}}
@keyframes stone{0%,100%{box-shadow:0 0 0 2px var(--ink),0 0 0 4px rgba(35,58,107,0)}50%{box-shadow:0 0 0 2px var(--ink),0 0 0 8px rgba(35,58,107,.12)}}
.st-row.is-soon .sq{background:transparent;border:1.5px dashed var(--grid);box-shadow:none}

/* 5. bookmark ribbon (栞) on the lesson opened last */
.shiori{position:absolute;top:-1px;right:48px;width:10px;height:34px;background:var(--stamp);clip-path:polygon(0 0,100% 0,100% 100%,50% 78%,0 100%);opacity:.9;pointer-events:none}
.sh-m{color:var(--stamp)}
@media (max-width:560px){.shiori{right:40px;height:28px}}

/* 6. hemp-leaf pattern (麻の葉), barely there, on the stamp card */
.stampcard{isolation:isolate;overflow:hidden}
.stampcard::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);opacity:.06;pointer-events:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24.00' height='41.57' viewBox='0 0 24.00 41.57'%3E%3Cpath d='M-48 0.0L-36.0 6.93M-48 0.0L-36.0 20.78M-48 0.0L-24 0.0M-48 41.57L-36.0 48.5M-48 41.57L-36.0 62.35M-48 41.57L-24 41.57M-36.0 -20.78L-24.0 -13.85M-36.0 -20.78L-24.0 0.0M-36.0 -20.78L-12.0 -20.78M-36.0 6.93L-36.0 20.78M-36.0 6.93L-24 0.0M-36.0 20.78L-24 0.0M-36.0 20.78L-24.0 13.85M-36.0 20.78L-24.0 27.71M-36.0 20.78L-24.0 41.57M-36.0 20.78L-12.0 20.78M-36.0 48.5L-36.0 62.35M-36.0 48.5L-24 41.57M-36.0 62.35L-24 41.57M-36.0 62.35L-24.0 55.42M-36.0 62.35L-24.0 69.28M-36.0 62.35L-24.0 83.14M-36.0 62.35L-12.0 62.35M-24.0 -13.85L-24.0 0.0M-24.0 -13.85L-12.0 -20.78M-24 0.0L-24.0 13.85M-24.0 0.0L-12.0 -20.78M-24.0 0.0L-12.0 -6.93M-24 0.0L-12.0 6.93M-24 0.0L-12.0 20.78M-24.0 0.0L0.0 0.0M-24.0 13.85L-12.0 20.78M-24.0 27.71L-24.0 41.57M-24.0 27.71L-12.0 20.78M-24 41.57L-24.0 55.42M-24.0 41.57L-12.0 20.78M-24.0 41.57L-12.0 34.64M-24 41.57L-12.0 48.5M-24 41.57L-12.0 62.35M-24.0 41.57L0.0 41.57M-24.0 55.42L-12.0 62.35M-24.0 69.28L-24.0 83.14M-24.0 69.28L-12.0 62.35M-24.0 83.14L-12.0 62.35M-24.0 83.14L-12.0 76.21M-24.0 83.14L0.0 83.14M-12.0 -20.78L-12.0 -6.93M-12.0 -20.78L0.0 -13.85M-12.0 -20.78L0.0 0.0M-12.0 -20.78L12.0 -20.78M-12.0 -6.93L0.0 0.0M-12.0 6.93L-12.0 20.78M-12.0 6.93L0 0.0M-12.0 20.78L-12.0 34.64M-12.0 20.78L0 0.0M-12.0 20.78L0.0 13.85M-12.0 20.78L0.0 27.71M-12.0 20.78L0.0 41.57M-12.0 20.78L12.0 20.78M-12.0 34.64L0.0 41.57M-12.0 48.5L-12.0 62.35M-12.0 48.5L0 41.57M-12.0 62.35L-12.0 76.21M-12.0 62.35L0 41.57M-12.0 62.35L0.0 55.42M-12.0 62.35L0.0 69.28M-12.0 62.35L0.0 83.14M-12.0 62.35L12.0 62.35M-12.0 76.21L0.0 83.14M0.0 -13.85L0.0 0.0M0.0 -13.85L12.0 -20.78M0 0.0L0.0 13.85M0.0 0.0L12.0 -20.78M0.0 0.0L12.0 -6.93M0 0.0L12.0 6.93M0 0.0L12.0 20.78M0.0 0.0L24.0 0.0M0.0 13.85L12.0 20.78M0.0 27.71L0.0 41.57M0.0 27.71L12.0 20.78M0 41.57L0.0 55.42M0.0 41.57L12.0 20.78M0.0 41.57L12.0 34.64M0 41.57L12.0 48.5M0 41.57L12.0 62.35M0.0 41.57L24.0 41.57M0.0 55.42L12.0 62.35M0.0 69.28L0.0 83.14M0.0 69.28L12.0 62.35M0.0 83.14L12.0 62.35M0.0 83.14L12.0 76.21M0.0 83.14L24.0 83.14M12.0 -20.78L12.0 -6.93M12.0 -20.78L24.0 -13.85M12.0 -20.78L24.0 0.0M12.0 -20.78L36.0 -20.78M12.0 -6.93L24.0 0.0M12.0 6.93L12.0 20.78M12.0 6.93L24 0.0M12.0 20.78L12.0 34.64M12.0 20.78L24 0.0M12.0 20.78L24.0 13.85M12.0 20.78L24.0 27.71M12.0 20.78L24.0 41.57M12.0 20.78L36.0 20.78M12.0 34.64L24.0 41.57M12.0 48.5L12.0 62.35M12.0 48.5L24 41.57M12.0 62.35L12.0 76.21M12.0 62.35L24 41.57M12.0 62.35L24.0 55.42M12.0 62.35L24.0 69.28M12.0 62.35L24.0 83.14M12.0 62.35L36.0 62.35M12.0 76.21L24.0 83.14M24.0 -13.85L24.0 0.0M24.0 -13.85L36.0 -20.78M24 0.0L24.0 13.85M24.0 0.0L36.0 -20.78M24.0 0.0L36.0 -6.93M24 0.0L36.0 6.93M24 0.0L36.0 20.78M24.0 0.0L48.0 0.0M24.0 13.85L36.0 20.78M24.0 27.71L24.0 41.57M24.0 27.71L36.0 20.78M24 41.57L24.0 55.42M24.0 41.57L36.0 20.78M24.0 41.57L36.0 34.64M24 41.57L36.0 48.5M24 41.57L36.0 62.35M24.0 41.57L48.0 41.57M24.0 55.42L36.0 62.35M24.0 69.28L24.0 83.14M24.0 69.28L36.0 62.35M24.0 83.14L36.0 62.35M24.0 83.14L36.0 76.21M24.0 83.14L48.0 83.14M36.0 -20.78L36.0 -6.93M36.0 -20.78L48.0 -13.85M36.0 -20.78L48.0 0.0M36.0 -20.78L60.0 -20.78M36.0 -6.93L48.0 0.0M36.0 6.93L36.0 20.78M36.0 6.93L48 0.0M36.0 20.78L36.0 34.64M36.0 20.78L48 0.0M36.0 20.78L48.0 13.85M36.0 20.78L48.0 27.71M36.0 20.78L48.0 41.57M36.0 20.78L60.0 20.78M36.0 34.64L48.0 41.57M36.0 48.5L36.0 62.35M36.0 48.5L48 41.57M36.0 62.35L36.0 76.21M36.0 62.35L48 41.57M36.0 62.35L48.0 55.42M36.0 62.35L48.0 69.28M36.0 62.35L48.0 83.14M36.0 62.35L60.0 62.35M36.0 76.21L48.0 83.14M48.0 -13.85L48.0 0.0M48.0 -13.85L60.0 -20.78M48 0.0L48.0 13.85M48.0 0.0L60.0 -20.78M48.0 0.0L60.0 -6.93M48 0.0L60.0 6.93M48 0.0L60.0 20.78M48.0 0.0L72.0 0.0M48.0 13.85L60.0 20.78M48.0 27.71L48.0 41.57M48.0 27.71L60.0 20.78M48 41.57L48.0 55.42M48.0 41.57L60.0 20.78M48.0 41.57L60.0 34.64M48 41.57L60.0 48.5M48 41.57L60.0 62.35M48.0 41.57L72.0 41.57M48.0 55.42L60.0 62.35M48.0 69.28L48.0 83.14M48.0 69.28L60.0 62.35M48.0 83.14L60.0 62.35M48.0 83.14L60.0 76.21M48.0 83.14L72.0 83.14M60.0 -20.78L60.0 -6.93M60.0 -20.78L72.0 -13.85M60.0 -20.78L72.0 0.0M60.0 -20.78L84.0 -20.78M60.0 -6.93L72.0 0.0M60.0 6.93L60.0 20.78M60.0 6.93L72 0.0M60.0 20.78L60.0 34.64M60.0 20.78L72 0.0M60.0 20.78L72.0 13.85M60.0 20.78L72.0 27.71M60.0 20.78L72.0 41.57M60.0 20.78L84.0 20.78M60.0 34.64L72.0 41.57M60.0 48.5L60.0 62.35M60.0 48.5L72 41.57M60.0 62.35L60.0 76.21M60.0 62.35L72 41.57M60.0 62.35L72.0 55.42M60.0 62.35L72.0 69.28M60.0 62.35L72.0 83.14M60.0 62.35L84.0 62.35M60.0 76.21L72.0 83.14M72.0 -13.85L72.0 0.0M72.0 -13.85L84.0 -20.78M72 0.0L72.0 13.85M72.0 0.0L84.0 -20.78M72.0 0.0L84.0 -6.93M72 0.0L84.0 20.78M72.0 0.0L96.0 0.0M72.0 13.85L84.0 20.78M72.0 27.71L72.0 41.57M72.0 27.71L84.0 20.78M72 41.57L72.0 55.42M72.0 41.57L84.0 20.78M72.0 41.57L84.0 34.64M72 41.57L84.0 62.35M72.0 41.57L96.0 41.57M72.0 55.42L84.0 62.35M72.0 69.28L72.0 83.14M72.0 69.28L84.0 62.35M72.0 83.14L84.0 62.35M72.0 83.14L84.0 76.21M72.0 83.14L96.0 83.14M84.0 -20.78L84.0 -6.93M84.0 -20.78L96.0 0.0M84.0 -6.93L96.0 0.0M84.0 20.78L84.0 34.64M84.0 20.78L96.0 41.57M84.0 34.64L96.0 41.57M84.0 62.35L84.0 76.21M84.0 62.35L96.0 83.14M84.0 76.21L96.0 83.14' fill='none' stroke='%23000' stroke-width='.8'/%3E%3C/svg%3E") 0 0/24px 41.57px repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24.00' height='41.57' viewBox='0 0 24.00 41.57'%3E%3Cpath d='M-48 0.0L-36.0 6.93M-48 0.0L-36.0 20.78M-48 0.0L-24 0.0M-48 41.57L-36.0 48.5M-48 41.57L-36.0 62.35M-48 41.57L-24 41.57M-36.0 -20.78L-24.0 -13.85M-36.0 -20.78L-24.0 0.0M-36.0 -20.78L-12.0 -20.78M-36.0 6.93L-36.0 20.78M-36.0 6.93L-24 0.0M-36.0 20.78L-24 0.0M-36.0 20.78L-24.0 13.85M-36.0 20.78L-24.0 27.71M-36.0 20.78L-24.0 41.57M-36.0 20.78L-12.0 20.78M-36.0 48.5L-36.0 62.35M-36.0 48.5L-24 41.57M-36.0 62.35L-24 41.57M-36.0 62.35L-24.0 55.42M-36.0 62.35L-24.0 69.28M-36.0 62.35L-24.0 83.14M-36.0 62.35L-12.0 62.35M-24.0 -13.85L-24.0 0.0M-24.0 -13.85L-12.0 -20.78M-24 0.0L-24.0 13.85M-24.0 0.0L-12.0 -20.78M-24.0 0.0L-12.0 -6.93M-24 0.0L-12.0 6.93M-24 0.0L-12.0 20.78M-24.0 0.0L0.0 0.0M-24.0 13.85L-12.0 20.78M-24.0 27.71L-24.0 41.57M-24.0 27.71L-12.0 20.78M-24 41.57L-24.0 55.42M-24.0 41.57L-12.0 20.78M-24.0 41.57L-12.0 34.64M-24 41.57L-12.0 48.5M-24 41.57L-12.0 62.35M-24.0 41.57L0.0 41.57M-24.0 55.42L-12.0 62.35M-24.0 69.28L-24.0 83.14M-24.0 69.28L-12.0 62.35M-24.0 83.14L-12.0 62.35M-24.0 83.14L-12.0 76.21M-24.0 83.14L0.0 83.14M-12.0 -20.78L-12.0 -6.93M-12.0 -20.78L0.0 -13.85M-12.0 -20.78L0.0 0.0M-12.0 -20.78L12.0 -20.78M-12.0 -6.93L0.0 0.0M-12.0 6.93L-12.0 20.78M-12.0 6.93L0 0.0M-12.0 20.78L-12.0 34.64M-12.0 20.78L0 0.0M-12.0 20.78L0.0 13.85M-12.0 20.78L0.0 27.71M-12.0 20.78L0.0 41.57M-12.0 20.78L12.0 20.78M-12.0 34.64L0.0 41.57M-12.0 48.5L-12.0 62.35M-12.0 48.5L0 41.57M-12.0 62.35L-12.0 76.21M-12.0 62.35L0 41.57M-12.0 62.35L0.0 55.42M-12.0 62.35L0.0 69.28M-12.0 62.35L0.0 83.14M-12.0 62.35L12.0 62.35M-12.0 76.21L0.0 83.14M0.0 -13.85L0.0 0.0M0.0 -13.85L12.0 -20.78M0 0.0L0.0 13.85M0.0 0.0L12.0 -20.78M0.0 0.0L12.0 -6.93M0 0.0L12.0 6.93M0 0.0L12.0 20.78M0.0 0.0L24.0 0.0M0.0 13.85L12.0 20.78M0.0 27.71L0.0 41.57M0.0 27.71L12.0 20.78M0 41.57L0.0 55.42M0.0 41.57L12.0 20.78M0.0 41.57L12.0 34.64M0 41.57L12.0 48.5M0 41.57L12.0 62.35M0.0 41.57L24.0 41.57M0.0 55.42L12.0 62.35M0.0 69.28L0.0 83.14M0.0 69.28L12.0 62.35M0.0 83.14L12.0 62.35M0.0 83.14L12.0 76.21M0.0 83.14L24.0 83.14M12.0 -20.78L12.0 -6.93M12.0 -20.78L24.0 -13.85M12.0 -20.78L24.0 0.0M12.0 -20.78L36.0 -20.78M12.0 -6.93L24.0 0.0M12.0 6.93L12.0 20.78M12.0 6.93L24 0.0M12.0 20.78L12.0 34.64M12.0 20.78L24 0.0M12.0 20.78L24.0 13.85M12.0 20.78L24.0 27.71M12.0 20.78L24.0 41.57M12.0 20.78L36.0 20.78M12.0 34.64L24.0 41.57M12.0 48.5L12.0 62.35M12.0 48.5L24 41.57M12.0 62.35L12.0 76.21M12.0 62.35L24 41.57M12.0 62.35L24.0 55.42M12.0 62.35L24.0 69.28M12.0 62.35L24.0 83.14M12.0 62.35L36.0 62.35M12.0 76.21L24.0 83.14M24.0 -13.85L24.0 0.0M24.0 -13.85L36.0 -20.78M24 0.0L24.0 13.85M24.0 0.0L36.0 -20.78M24.0 0.0L36.0 -6.93M24 0.0L36.0 6.93M24 0.0L36.0 20.78M24.0 0.0L48.0 0.0M24.0 13.85L36.0 20.78M24.0 27.71L24.0 41.57M24.0 27.71L36.0 20.78M24 41.57L24.0 55.42M24.0 41.57L36.0 20.78M24.0 41.57L36.0 34.64M24 41.57L36.0 48.5M24 41.57L36.0 62.35M24.0 41.57L48.0 41.57M24.0 55.42L36.0 62.35M24.0 69.28L24.0 83.14M24.0 69.28L36.0 62.35M24.0 83.14L36.0 62.35M24.0 83.14L36.0 76.21M24.0 83.14L48.0 83.14M36.0 -20.78L36.0 -6.93M36.0 -20.78L48.0 -13.85M36.0 -20.78L48.0 0.0M36.0 -20.78L60.0 -20.78M36.0 -6.93L48.0 0.0M36.0 6.93L36.0 20.78M36.0 6.93L48 0.0M36.0 20.78L36.0 34.64M36.0 20.78L48 0.0M36.0 20.78L48.0 13.85M36.0 20.78L48.0 27.71M36.0 20.78L48.0 41.57M36.0 20.78L60.0 20.78M36.0 34.64L48.0 41.57M36.0 48.5L36.0 62.35M36.0 48.5L48 41.57M36.0 62.35L36.0 76.21M36.0 62.35L48 41.57M36.0 62.35L48.0 55.42M36.0 62.35L48.0 69.28M36.0 62.35L48.0 83.14M36.0 62.35L60.0 62.35M36.0 76.21L48.0 83.14M48.0 -13.85L48.0 0.0M48.0 -13.85L60.0 -20.78M48 0.0L48.0 13.85M48.0 0.0L60.0 -20.78M48.0 0.0L60.0 -6.93M48 0.0L60.0 6.93M48 0.0L60.0 20.78M48.0 0.0L72.0 0.0M48.0 13.85L60.0 20.78M48.0 27.71L48.0 41.57M48.0 27.71L60.0 20.78M48 41.57L48.0 55.42M48.0 41.57L60.0 20.78M48.0 41.57L60.0 34.64M48 41.57L60.0 48.5M48 41.57L60.0 62.35M48.0 41.57L72.0 41.57M48.0 55.42L60.0 62.35M48.0 69.28L48.0 83.14M48.0 69.28L60.0 62.35M48.0 83.14L60.0 62.35M48.0 83.14L60.0 76.21M48.0 83.14L72.0 83.14M60.0 -20.78L60.0 -6.93M60.0 -20.78L72.0 -13.85M60.0 -20.78L72.0 0.0M60.0 -20.78L84.0 -20.78M60.0 -6.93L72.0 0.0M60.0 6.93L60.0 20.78M60.0 6.93L72 0.0M60.0 20.78L60.0 34.64M60.0 20.78L72 0.0M60.0 20.78L72.0 13.85M60.0 20.78L72.0 27.71M60.0 20.78L72.0 41.57M60.0 20.78L84.0 20.78M60.0 34.64L72.0 41.57M60.0 48.5L60.0 62.35M60.0 48.5L72 41.57M60.0 62.35L60.0 76.21M60.0 62.35L72 41.57M60.0 62.35L72.0 55.42M60.0 62.35L72.0 69.28M60.0 62.35L72.0 83.14M60.0 62.35L84.0 62.35M60.0 76.21L72.0 83.14M72.0 -13.85L72.0 0.0M72.0 -13.85L84.0 -20.78M72 0.0L72.0 13.85M72.0 0.0L84.0 -20.78M72.0 0.0L84.0 -6.93M72 0.0L84.0 20.78M72.0 0.0L96.0 0.0M72.0 13.85L84.0 20.78M72.0 27.71L72.0 41.57M72.0 27.71L84.0 20.78M72 41.57L72.0 55.42M72.0 41.57L84.0 20.78M72.0 41.57L84.0 34.64M72 41.57L84.0 62.35M72.0 41.57L96.0 41.57M72.0 55.42L84.0 62.35M72.0 69.28L72.0 83.14M72.0 69.28L84.0 62.35M72.0 83.14L84.0 62.35M72.0 83.14L84.0 76.21M72.0 83.14L96.0 83.14M84.0 -20.78L84.0 -6.93M84.0 -20.78L96.0 0.0M84.0 -6.93L96.0 0.0M84.0 20.78L84.0 34.64M84.0 20.78L96.0 41.57M84.0 34.64L96.0 41.57M84.0 62.35L84.0 76.21M84.0 62.35L96.0 83.14M84.0 76.21L96.0 83.14' fill='none' stroke='%23000' stroke-width='.8'/%3E%3C/svg%3E") 0 0/24px 41.57px repeat}
.sc-done{z-index:1}

/* 7. noren curtain at the shop entrance */
:root{--noren:#233A6B}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--noren:#33477F}}
:root[data-theme="dark"]{--noren:#33477F}
.noren{position:relative;width:170px;height:66px;margin:calc(-1 * var(--edge)) auto 32px;filter:drop-shadow(0 8px 10px rgba(20,27,61,.12))}
.noren .rod{position:absolute;left:-10px;right:-10px;top:0;height:5px;border-radius:3px;background:#8A6A44;z-index:1}
.noren .nr{position:absolute;inset:3px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.noren .nr i{display:block;background:linear-gradient(rgba(0,0,0,.16) 0 6px,transparent 6px),repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 4px),var(--noren);border-radius:0 0 2px 2px;transform-origin:top center}
.noren .mon{position:absolute;left:50%;top:50%;transform:translate(-50%,-42%);width:36px;height:36px;border-radius:50%;background:var(--paper);color:var(--ink);font-family:var(--brush);font-size:1.25rem;line-height:1;display:grid;place-items:center}
@media (prefers-reduced-motion: no-preference){.noren .nr i{animation:breeze 2.6s ease-in-out .3s both}.noren .nr i:nth-child(2){animation-delay:.45s}.noren .nr i:nth-child(3){animation-delay:.6s}}
@keyframes breeze{0%,100%{transform:none}35%{transform:rotate(1.6deg)}70%{transform:rotate(-.8deg)}}
@media (max-width:560px){.noren{width:150px;height:58px;margin-bottom:26px}.noren .mon{width:32px;height:32px;font-size:1.1rem}}

#main .start.q .go{color:var(--kc);margin-top:auto;padding-top:6px}
#main .start.q .go .st-go{stroke:var(--kc)}
/* Study page: practice cards */
#main .pq{padding:26px 28px 28px;gap:10px}
#main .pq .g{font-size:5rem;top:14px;right:18px}
#main .pq h3{font-family:var(--display);font-weight:600;font-size:1.5rem;line-height:1.2}
html[lang="bn"] #main .pq h3{font-family:var(--head);font-size:1.25rem}
#main .pq p{flex:none;margin:0;max-width:40ch}
.pq-dots{display:flex;gap:7px;margin:6px 0 2px}
.pq-dots span{width:12px;height:12px;border-radius:50%;border:1.5px solid var(--grid)}
.pq-dots span.on{border:2px solid var(--stamp);background:rgba(200,66,58,.08)}
#main .pq .best{margin:0;font-size:.88rem;font-weight:600;color:var(--stamp)}
#main .pq .btn{align-self:flex-start;margin-top:8px}
#main .pq.later{background:transparent;box-shadow:none;border:1px solid var(--line);border-top:2px dashed var(--kc)}
#main .pq.later h3{color:var(--muted)}
#main .pq.later .g{opacity:.1}
#main .pq.later .stamp{align-self:flex-start;margin-top:8px}
@media (max-width:560px){#main .pq{padding:20px 20px 22px}#main .pq .g{font-size:3.6rem;top:12px;right:14px}#main .pq h3{font-size:1.3rem}}

/* ===== soft edges between bands: hills, waves and kasumi mist, so one section flows into the next ===== */
:root{--edge-hills:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 1440 40%27 preserveAspectRatio=%27none%27%3E%3Cpath d=%27M0 30 C 180 8, 330 12, 480 22 S 770 38, 910 24 S 1210 4, 1440 18 V40 H0Z%27/%3E%3C/svg%3E")}
:root{--edge-wave:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 1440 40%27 preserveAspectRatio=%27none%27%3E%3Cpath d=%27M0 24 C 120 10, 240 10, 360 22 S 600 36, 720 24 S 960 10, 1080 22 S 1320 36, 1440 24 V40 H0Z%27/%3E%3C/svg%3E")}
:root{--edge-kasumi:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 1440 40%27 preserveAspectRatio=%27none%27%3E%3Cpath d=%27M0 40 V30 H236 C 262 30, 264 12, 296 12 H596 C 626 12, 628 30, 658 30 H976 C 1004 30, 1006 8, 1038 8 H1440 V40Z%27/%3E%3C/svg%3E")}
.bands > section:nth-of-type(3n){--edge-m:var(--edge-hills)}
.bands > section:nth-of-type(3n+1){--edge-m:var(--edge-wave)}
.bands > section:nth-of-type(3n+2){--edge-m:var(--edge-kasumi)}
.bands > section.tint::before,.bands > section.tint::after,.bands > section.tint-fade::after{content:"";position:absolute;left:0;right:0;height:26px;pointer-events:none;z-index:1;
  -webkit-mask:var(--edge-m) center/100% 100% no-repeat;mask:var(--edge-m) center/100% 100% no-repeat}
.bands > section.tint::before{bottom:100%;background:var(--band-a)}
.bands > section.tint::after,.bands > section.tint-fade::after{top:100%;background:var(--band-b);transform:scale(-1,-1)}
.bands > section.tint:last-child::after{display:none} /* the footer hills take over there */
@media (max-width:560px){.bands > section.tint::before,.bands > section.tint::after,.bands > section.tint-fade::after{height:16px}}

/* ===== small charms and one saying per page ===== */
/* a saying (ことば) near the end of the page */
.kotoba{margin:calc(var(--gap) / 2) auto 0;max-width:600px;text-align:center;padding-top:calc(var(--gap) / 2);background:linear-gradient(var(--stamp),var(--stamp)) top center/26px 1.5px no-repeat}
.kt-k{margin:0 0 10px;font-family:var(--jp);font-size:.78rem;letter-spacing:.5em;padding-left:.5em;color:var(--stamp)}
.kt-jp{margin:0;font-family:var(--brush);font-size:clamp(1.35rem,3.4vw,1.75rem);line-height:1.9;color:var(--ink);letter-spacing:.05em;font-feature-settings:"palt"}
.kt-jp rt{font-family:var(--jp);font-size:.42em;letter-spacing:.08em;color:var(--muted)}
.kt-m{margin:2px auto 0;max-width:42ch;font-family:var(--display);font-style:italic;font-size:1.15rem;line-height:1.4;color:var(--muted)}
html[lang="bn"] .kt-m{font-style:normal;font-size:1rem;line-height:1.6}
.about > .kotoba,.page-pad > .kotoba{margin-top:calc(var(--gap) / 2 + 10px)}
#main .kotoba p{max-width:none}#main .kotoba .kt-m{max-width:46ch;margin-inline:auto}

/* daruma on the stamp card */
.daruma{position:absolute;left:14px;top:12px;width:40px;height:43px;transform:rotate(-6deg);z-index:1}
.dm-b{fill:#C8423A}.dm-f{fill:#FFF8EC}.dm-e{fill:#fff;stroke:#C9B9A3;stroke-width:.6}.dm-p{fill:#1E1E1E}
.dm-l{fill:none;stroke:#2A2A2A;stroke-width:1.8;stroke-linecap:round}.dm-g{fill:none;stroke:#E2B65C;stroke-width:2.4;stroke-linecap:round}
@media (prefers-reduced-motion: no-preference){.dm-new{animation:dm-paint .9s ease-out both;transform-origin:22.5px 27px}}
@keyframes dm-paint{from{transform:scale(0)}to{transform:none}}
@media (max-width:560px){.daruma{width:32px;height:35px;left:10px;top:10px}}

/* paper crane on the letter */
.crane{position:absolute;top:-22px;right:26px;width:74px;height:52px;transform:rotate(-6deg);pointer-events:none}
.crane{filter:drop-shadow(0 4px 3px rgba(60,20,20,.15))}
.crane path{stroke:#9E2F28;stroke-width:.6;stroke-linejoin:round;stroke-opacity:.5}
.cr-w{fill:#D9574B}.cr-w2{fill:#B8382F}.cr-b{fill:#CC4A3F}.cr-b2{fill:#E06C60}
@media (max-width:560px){.crane{width:56px;height:40px;right:14px;top:-18px}}

/* leaf of the season on the free sheet */
.fb-cover{position:relative}
.leaf{position:absolute;top:-12px;right:-12px;width:34px;height:34px;transform:rotate(18deg);pointer-events:none;filter:drop-shadow(0 3px 3px rgba(0,0,0,.12))}
.lf-s{fill:#F2B8C6}.lf-v{stroke:#E28AA0;stroke-width:1.2;fill:none}.lf-a{fill:#E3B23C}.lf-av{fill:none;stroke:#C8932A;stroke-width:1.6;opacity:.6}.lf-w{fill:none;stroke:#8FB2D9;stroke-width:3;stroke-linecap:round}

/* tea break after a finished lesson */
.ippuku{display:flex;align-items:center;justify-content:center;gap:14px;margin:0 0 6px;color:var(--muted);font-size:.95rem}
.ippuku .jp{font-family:var(--brush);font-weight:400;font-size:1.2rem;color:var(--stamp);margin-right:10px}
.tea{width:44px;height:42px;flex:none}
.te-c{fill:var(--sheet);stroke:var(--ink);stroke-width:1.4;stroke-opacity:.7}.te-band{stroke:#3E6E8E;stroke-width:3;opacity:.75}
.te-m{fill:#C9A06B;opacity:.55}.te-s{fill:none;stroke:var(--ink);stroke-width:1.3;stroke-linecap:round;opacity:.3}

/* maneki-neko: empty cart and the thank-you page */
.neko-wrap{position:relative;width:130px;height:130px;margin:0 auto 22px;display:grid;place-items:center}
.neko-wrap::before{content:"";position:absolute;inset:0;background:var(--ink);opacity:.16;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M138 32 C 96 10, 40 30, 26 84 C 12 140, 62 182, 112 176 C 162 170, 188 128, 178 86 C 172 60, 156 44, 134 38' fill='none' stroke='%23000' stroke-width='9' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M138 32 C 96 10, 40 30, 26 84 C 12 140, 62 182, 112 176 C 162 170, 188 128, 178 86 C 172 60, 156 44, 134 38' fill='none' stroke='%23000' stroke-width='9' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
.neko-wrap .neko{position:relative;width:74px;margin-top:6px}
.neko-wrap.small{width:96px;height:96px;margin:-4px auto 18px}
.neko-wrap.small .neko{width:54px}
.neko{display:block;width:100%;height:auto}
#main .page-pad:has(.neko-wrap)::before{display:none}
.nk-f{fill:#FFFDF8;stroke:#2A3550;stroke-width:1.6;stroke-linejoin:round}.nk-in{fill:#F2B8C6}.nk-sp{fill:#E9A15B}
.nk-l{fill:none;stroke:#2A3550;stroke-width:1.5;stroke-linecap:round}.nk-c{fill:none;stroke:#C8423A;stroke-width:4;stroke-linecap:round}.nk-bell{fill:#E2B65C;stroke:#9A7430;stroke-width:1}
.page-pad:has(.neko-wrap)::before{display:none}
.done .seal-big{display:inline-grid;margin-bottom:12px}

/* ema: a wooden wish plaque on the About page */
.ema{margin:calc(var(--gap) / 2 + 10px) auto 0;width:min(300px,100%);text-align:center}
.ema-str{display:block;width:2px;height:22px;margin:0 auto;background:#C8423A;border-radius:2px}
.ema-board{position:relative;padding:44px 26px 26px;color:#3B2A18;
  clip-path:polygon(50% 0,100% 26%,100% 100%,0 100%,0 26%);border-radius:0 0 8px 8px;
  background:repeating-linear-gradient(90deg,rgba(120,80,40,.05) 0 2px,transparent 2px 9px),linear-gradient(180deg,#E6C893,#D7B074);box-shadow:inset 0 -4px 0 rgba(0,0,0,.08)}
.ema-board::before{content:"";position:absolute;left:50%;top:16px;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:#7A5A34}
.ema-k{display:block;font-family:var(--brush);font-size:1.5rem;letter-spacing:.2em;padding-left:.2em;color:#B2362E;margin-bottom:2px}
.ema-l{display:block;font-size:.8rem;letter-spacing:.06em;color:#6A4E2E;margin-bottom:8px}
.ema-in{width:100%;border:0;border-bottom:1.5px dashed rgba(90,60,30,.4);background:transparent;font-family:"Caveat","Bornomala",cursive;font-size:1.5rem;line-height:1.3;text-align:center;color:#2B1E10;padding:4px 2px}
html[lang="bn"] .ema-in{font-size:1.1rem}
.ema-in::placeholder{color:rgba(60,40,20,.38)}
.ema-in:focus{outline:none;border-bottom-color:#B2362E}
.ema-h{margin:12px 0 0;font-size:.85rem;color:var(--muted)}
/* footer: proverb on the left, haiku on the right */
.foot-poems .haiku{justify-self:end;text-align:right;grid-template-columns:auto auto}
.foot-poems .haiku .pv-h{justify-content:flex-end}
.foot-poems .haiku .hk-v{grid-column:2;grid-row:2 / span 3}
.foot-poems .haiku .hk-by,.foot-poems .haiku .pv-m{grid-column:1;justify-self:end}
.foot-poems .haiku .hk-by{grid-row:2}.foot-poems .haiku .pv-m{grid-row:3}
.foot-poems .haiku .hk-v{text-align:start}
.foot-poems .pv-h{align-items:baseline}.foot-poems .proverb .pv-h{align-items:flex-start}@media (max-width:560px){.foot-poems .proverb .pv-h{align-items:baseline}}
/* footer proverb mirrors the haiku */
#proverb{display:grid;grid-template-columns:auto auto;column-gap:18px;row-gap:0;align-items:start;justify-self:start;max-width:440px;padding:0;margin:0;border:0}
#proverb .pv-h{grid-column:1/-1;grid-row:auto;flex-direction:row;gap:10px;align-items:baseline;margin-bottom:10px}
#proverb .pv-v{grid-column:1;grid-row:2 / span 3;writing-mode:vertical-rl;display:flex;flex-direction:column;gap:10px;font-family:var(--brush);font-size:1.25rem;line-height:1.4;color:var(--on-navy);font-feature-settings:"palt"}
#proverb .pv-v span{white-space:nowrap}
#proverb .pv-r{grid-column:2;grid-row:2;font-family:var(--jp);font-size:.85rem;color:#F07C84}
#proverb .pv-m{grid-column:2;grid-row:3;font-size:1rem}
@media (max-width:560px){#proverb{grid-template-columns:auto auto}#proverb .pv-h{margin-bottom:10px}}

/* ===== 言の葉: tanzaku word strips, the old calendar, the sound of rain ===== */
.tz-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px 20px;margin:6px 0 34px}
@media (max-width:760px){.tz-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tz{margin:0;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}
.tz-strip{position:relative;writing-mode:vertical-rl;width:66px;height:210px;padding:34px 0 16px;display:flex;align-items:center;justify-content:flex-start;
  font-family:var(--brush);font-size:1.75rem;letter-spacing:.12em;line-height:1;color:#233A6B;background:var(--tz);border-radius:2px;
  box-shadow:0 1px 2px rgba(0,0,0,.05),0 14px 22px -16px rgba(30,30,60,.35);font-feature-settings:"palt"}
.tz-strip::before{content:"";position:absolute;left:50%;top:-22px;width:1.5px;height:30px;background:#C8423A;transform:translateX(-50%)}
.tz-strip::after{content:"";position:absolute;left:50%;top:10px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:rgba(0,0,0,.18)}
.tz-strip rt{font-family:var(--jp);font-size:.36em;letter-spacing:.1em;color:#5A6585}
.tz:nth-child(odd) .tz-strip{transform:rotate(-1.5deg)}.tz:nth-child(even) .tz-strip{transform:rotate(1.2deg)}
.tz-strip.c0{--tz:#F3DCD8}.tz-strip.c1{--tz:#DDE8D6}.tz-strip.c2{--tz:#DAE3EF}.tz-strip.c3{--tz:#F1E7CB}
.tz figcaption{display:flex;flex-direction:column;gap:4px;max-width:24ch}
.tz-ro{font-size:.74rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--stamp)}
.tz-m{font-family:var(--display);font-style:italic;font-size:1.08rem;line-height:1.4;color:var(--muted)}
html[lang="bn"] .tz-m{font-style:normal;font-size:.95rem;line-height:1.6}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .tz-strip{color:#EDEFF7}:root:not([data-theme="light"]) .tz-strip rt{color:#B9C0DA}
  :root:not([data-theme="light"]) .tz-strip.c0{--tz:#4B3442}:root:not([data-theme="light"]) .tz-strip.c1{--tz:#33463B}:root:not([data-theme="light"]) .tz-strip.c2{--tz:#2E3C57}:root:not([data-theme="light"]) .tz-strip.c3{--tz:#4A4231}}
:root[data-theme="dark"] .tz-strip{color:#EDEFF7}:root[data-theme="dark"] .tz-strip rt{color:#B9C0DA}
:root[data-theme="dark"] .tz-strip.c0{--tz:#4B3442}:root[data-theme="dark"] .tz-strip.c1{--tz:#33463B}:root[data-theme="dark"] .tz-strip.c2{--tz:#2E3C57}:root[data-theme="dark"] .tz-strip.c3{--tz:#4A4231}
@media (max-width:560px){.tz-strip{width:58px;height:184px;font-size:1.5rem}}
.kt-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;max-width:900px;margin:0 auto}
@media (max-width:760px){.kt-row{grid-template-columns:1fr;gap:14px}}
.sk-now{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin:4px 0 0!important}
.sk-k{font-family:var(--brush);font-size:2.2rem;line-height:1.1;color:var(--ink)}
.sk-r{font-family:var(--jp);font-size:.9rem;color:var(--kc)}
.sk-m{font-family:var(--display);font-style:italic;font-size:1.2rem;color:var(--text)}
html[lang="bn"] .sk-m{font-style:normal;font-size:1rem}
#main .sk-span{margin:0;font-size:.85rem;letter-spacing:.06em;color:var(--kc);font-weight:600}
.rn{list-style:none;margin:4px 0 2px;padding:0;display:flex;flex-direction:column;gap:8px}
.rn li{display:grid;grid-template-columns:5.2em 70px minmax(0,1fr);align-items:center;gap:12px}
.rn-w{font-family:var(--jp);font-size:1.15rem;color:var(--ink);font-feature-settings:"palt"}
.rn-d{width:70px;height:24px}.rn-d path{stroke:var(--kc);stroke-width:1.5;stroke-linecap:round;opacity:.6}
.rn-m{font-size:.92rem;color:var(--muted)}
#main .kt-row .start p{flex:none}
#main .kt-row .start > p:last-child{margin-top:auto;padding-top:6px}
.tz-strip{justify-content:center;padding:26px 0 14px}
/* slider of little things about Japanese */
.kt-slide{max-width:940px;margin:0 auto}
.kt-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 20px) / 2);gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 2px 26px;margin:-6px -2px -20px;scrollbar-width:none;overscroll-behavior-x:contain}
.kt-track::-webkit-scrollbar{display:none}
.kt-track > *{scroll-snap-align:start}
.kt-track:focus-visible{outline-offset:2px}
@media (max-width:760px){.kt-track{grid-auto-columns:86%;gap:14px}}
.kt-nav{display:flex;justify-content:center;gap:12px;margin-top:18px}
.kt-arr{width:42px;height:42px;border-radius:50%;border:1.5px solid var(--ink);background:transparent;color:var(--ink);display:grid;place-items:center;cursor:pointer;padding:0;transition:background .3s,color .3s,opacity .3s}
.kt-arr .st-go{width:18px;height:18px;stroke:currentColor}
.kt-arr[data-kt="-1"] .st-go{transform:scaleX(-1)}
.kt-arr:hover:not(:disabled){background:var(--ink);color:var(--paper)}
.kt-arr:disabled{opacity:.3;cursor:default}
#main .kt-track .start p{flex:none}
#main .kt-track .start > p:last-child{margin-top:auto;padding-top:6px}
.rn.sm li{grid-template-columns:6.2em 28px minmax(0,1fr)}
.rn.no li{grid-template-columns:6.2em minmax(0,1fr)}
.rn-w ruby rt{font-size:.5em;color:var(--muted)}
.rn-i{display:flex;align-items:center}
.sw{width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.mo{width:22px;height:22px}.mo path,.mo circle{fill:#E8C66A}.mo .hz{opacity:.45;filter:blur(1.2px)}.mo .gr{fill:none;stroke:var(--kc);stroke-width:1.4;stroke-linecap:round}
.kt-track{align-items:start}
#main .kt-track .start > p:last-child{margin-top:4px;padding-top:0}
#main .sk-next{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin:6px 0 2px;padding-top:10px;border-top:1px dashed var(--line);font-size:.9rem;color:var(--muted)}
.sk-next b{font-family:var(--brush);font-weight:400;font-size:1.25rem;color:var(--ink)}
/* slider: equal cards, soft fade at the edges, eased glide */
.kt-track{align-items:stretch}
#main .kt-track .start > p:last-child{margin-top:auto;padding-top:8px}
.kt-track > .start{opacity:calc(.3 + .7 * var(--kv,1));transform:translateY(calc((1 - var(--kv,1)) * 10px)) scale(calc(.97 + .03 * var(--kv,1)));transform-origin:center bottom;will-change:opacity,transform}
@media (prefers-reduced-motion: reduce){.kt-track > .start{transform:none}}
.kt-nav{align-items:center}
.kt-prog{position:relative;width:96px;height:2px;border-radius:2px;background:var(--line);overflow:hidden}
.kt-prog i{position:absolute;top:0;bottom:0;left:0;width:40%;border-radius:2px;background:var(--stamp);transition:left .12s linear}
/* seasonal leaf floating on the closing scene's water */
.scene-wrap{position:relative;width:min(500px,100%);margin:0 auto 10px}
.scene-wrap .scene{margin:0}
.scene-wrap .leaf{top:auto;bottom:6%;right:auto;left:30%;width:18px;height:18px;transform:rotate(-24deg);filter:none;opacity:.9}
.closing .ctas{gap:12px;flex-wrap:wrap}

/* ===== 本物: nothing here is made up ===== */
.roots .sec-num{justify-content:flex-start}
.r-head{display:flex;justify-content:space-between;align-items:flex-end;gap:10px 24px;flex-wrap:wrap}
#main .r-h2{text-align:left;margin:0;position:relative;padding-bottom:16px}
.r-h2::before{content:"";position:absolute;left:2px;bottom:0;width:150px;height:9px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 9' preserveAspectRatio='none'%3E%3Cpath d='M3 6 C 40 2, 90 2, 147 5' fill='none' stroke='%23C8423A' stroke-width='2.2' stroke-linecap='round' opacity='.8'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.r-link{color:var(--stamp);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px;font-size:.98rem;margin-bottom:18px}
.r-link:hover{border-bottom-width:2px}
.r-p{margin:20px 0 26px;max-width:64ch;font-size:1.08rem;line-height:1.8;color:var(--text)}
.r-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid var(--line);background:var(--sheet);border-radius:4px;overflow:hidden}
.r-it{padding:26px 30px 28px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);min-width:0}
.r-it:nth-child(2n){border-right:0}.r-it:nth-last-child(-n+2){border-bottom:0}
.r-it h3{display:flex;align-items:baseline;gap:12px;margin:0 0 10px;font-size:1.08rem;color:var(--ink);font-family:var(--head)}
.r-it h3::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:#2E7550;transform:translateY(-1px)}
.r-it p{margin:0 0 0 20px;color:var(--muted);line-height:1.75}
.r-foot{margin:20px 0 0;font-size:.92rem;color:var(--muted)}
@media (max-width:700px){.r-grid{grid-template-columns:1fr}.r-it{border-right:0;padding:20px 20px 22px}.r-it:nth-last-child(2){border-bottom:1px solid var(--line)}.r-link{margin-bottom:0}}
.r-tags{list-style:none;margin:14px 0 0 20px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.r-tags li{font-size:.8rem;font-weight:600;letter-spacing:.02em;color:var(--ink);background:var(--chip);border-radius:999px;padding:3px 11px}

/* ===== 五十音: kana chart (columns read right to left on wide screens, like a Japanese chart) ===== */
.kana-ctl{display:flex;justify-content:center;flex-wrap:wrap;gap:10px 18px;margin:0 0 24px}
.kana-ctl .fgroup{display:flex;gap:8px}
.kana-tbl{display:grid;grid-template-rows:repeat(5,auto);grid-auto-flow:column;grid-auto-columns:60px;gap:8px;direction:rtl;justify-content:center}
.kn{direction:ltr;position:relative;height:72px;padding:6px 0 0;border:1px solid var(--card-line);border-radius:10px;background:var(--sheet);box-shadow:var(--card-shadow);cursor:pointer;perspective:400px;display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--ink);font:inherit}
.kn:hover{border-color:var(--stamp)}
.kn-x{background:transparent;border:1px dashed var(--line);box-shadow:none;cursor:default;opacity:.5}
.kn-x:hover{border-color:var(--line)}
.kn-in{position:relative;width:100%;height:40px;transform-style:preserve-3d;transition:transform .55s cubic-bezier(.3,.7,.2,1)}
.kn-f,.kn-b{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--jp);font-size:1.75rem;line-height:1;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.kn-b{transform:rotateY(180deg);color:var(--stamp)}
.kana-tbl:not(.kata) .kn.flip .kn-in,.kana-tbl.kata .kn:not(.flip) .kn-in{transform:rotateY(180deg)}
.kn-r{font-size:.74rem;letter-spacing:.06em;color:var(--muted)}
.kana-tbl.no-ro .kn-r{visibility:hidden}
.kana-note{text-align:center;margin:24px auto 0;color:var(--muted);font-size:.95rem}
@media (prefers-reduced-motion: reduce){.kn-in{transition:none}}
@media (max-width:760px){.kana-tbl{direction:ltr;grid-template-rows:none;grid-auto-flow:row;grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-columns:auto;gap:6px;max-width:360px;margin:0 auto}
  .kn{height:62px}.kn-in{height:34px}.kn-f,.kn-b{font-size:1.5rem}}
.kn-b{color:var(--ink)}.kn.flip{border-color:var(--stamp)}.kn.flip .kn-f,.kn.flip .kn-b{color:var(--stamp)}

/* ===== kanji from pictures ===== */
.pict-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px}
@media (max-width:900px){.pict-row{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:480px){.pict-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}}
.pict{margin:0;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.pict-tile{position:relative;width:100%;aspect-ratio:1;border:1px solid var(--card-line);border-radius:14px;cursor:pointer;padding:0;overflow:hidden;color:var(--ink);font:inherit;
  background:linear-gradient(var(--grid-faint),var(--grid-faint)) center/1px 100% no-repeat,linear-gradient(var(--grid-faint),var(--grid-faint)) center/100% 1px no-repeat,var(--sheet);box-shadow:var(--card-shadow)}
.pict-tile:hover{border-color:var(--stamp)}
.pict-pic{position:absolute;inset:14%;width:72%;height:72%;transition:opacity .7s ease,transform .8s cubic-bezier(.3,.7,.2,1),filter .7s ease}
.pict-pic path,.pict-pic circle{fill:none;stroke:var(--ink);stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0;opacity:.85}
.pict-k{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--brush);font-size:clamp(3rem,7vw,4.4rem);line-height:1;color:var(--ink);opacity:0;filter:blur(10px);transform:scale(1.1);
  transition:opacity .8s ease .2s,filter .9s ease .2s,transform 1s cubic-bezier(.3,.7,.2,1) .2s}
.pict-hint{position:absolute;right:8px;bottom:6px;font-family:var(--jp);font-size:.62rem;letter-spacing:.08em;color:var(--muted);opacity:.7}
.pict.on .pict-pic,.pict-row.all .pict:not(.on) .pict-pic{opacity:0;transform:scale(.86);filter:blur(6px)}
.pict.on .pict-k,.pict-row.all .pict:not(.on) .pict-k{opacity:1;filter:none;transform:none}
.pict-row.all .pict.on .pict-pic{opacity:1;transform:none;filter:none}.pict-row.all .pict.on .pict-k{opacity:0;filter:blur(10px)}
.pict.on .pict-hint,.pict-row.all .pict-hint{opacity:0}
.pict figcaption{display:flex;flex-direction:column;gap:2px}
.pict-r{font-family:var(--jp);font-size:.9rem;color:var(--stamp);letter-spacing:.08em}
.pict-m{font-family:var(--display);font-style:italic;font-size:1.05rem;color:var(--muted)}
html[lang="bn"] .pict-m{font-style:normal;font-size:.95rem}
@media (prefers-reduced-motion: no-preference){
  .pict-row:not(.drawn) .pict-pic path,.pict-row:not(.drawn) .pict-pic circle{stroke-dashoffset:1}
  .pict-row.drawn .pict-pic path,.pict-row.drawn .pict-pic circle{animation:pict-draw 1.4s cubic-bezier(.5,0,.3,1) calc(var(--pi) * 160ms) both}}
@keyframes pict-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@media (prefers-reduced-motion: reduce){.pict-pic,.pict-k{transition:none}}
.pict-tile{container-type:inline-size}.pict-k{font-size:50cqi}
.pict-next{text-align:center;margin:10px 0 0;font-size:.95rem;color:var(--muted)}
.pict-next a{color:var(--stamp);font-weight:600;text-decoration:none;border-bottom:1px solid currentColor;margin-left:4px}
.pict-sec .kana-note{margin-top:22px}

/* ===== divider pass 2: a fainter far layer behind each edge, and an ink-wash fill (deeper at the crest) ===== */
:root{--edge-hills:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 1440 40%27 preserveAspectRatio=%27none%27%3E%3Cpath d=%27M0 30 C 180 8, 330 12, 480 22 S 770 38, 910 24 S 1210 4, 1440 18 V40 H0Z%27 fill-opacity=%27.38%27 transform=%27translate%281440 40%29 scale%28-1 1.3%29 translate%280 -40%29%27/%3E%3Cpath d=%27M0 30 C 180 8, 330 12, 480 22 S 770 38, 910 24 S 1210 4, 1440 18 V40 H0Z%27/%3E%3C/svg%3E");--edge-wave:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 1440 40%27 preserveAspectRatio=%27none%27%3E%3Cpath d=%27M0 24 C 120 10, 240 10, 360 22 S 600 36, 720 24 S 960 10, 1080 22 S 1320 36, 1440 24 V40 H0Z%27 fill-opacity=%27.38%27 transform=%27translate%281440 40%29 scale%28-1 1.3%29 translate%280 -40%29%27/%3E%3Cpath d=%27M0 24 C 120 10, 240 10, 360 22 S 600 36, 720 24 S 960 10, 1080 22 S 1320 36, 1440 24 V40 H0Z%27/%3E%3C/svg%3E");--edge-kasumi:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 1440 40%27 preserveAspectRatio=%27none%27%3E%3Cpath d=%27M0 40 V30 H236 C 262 30, 264 12, 296 12 H596 C 626 12, 628 30, 658 30 H976 C 1004 30, 1006 8, 1038 8 H1440 V40Z%27 fill-opacity=%27.38%27 transform=%27translate%281440 40%29 scale%28-1 1.3%29 translate%280 -40%29%27/%3E%3Cpath d=%27M0 40 V30 H236 C 262 30, 264 12, 296 12 H596 C 626 12, 628 30, 658 30 H976 C 1004 30, 1006 8, 1038 8 H1440 V40Z%27/%3E%3C/svg%3E");}
:root{--edge-ink:rgba(52,96,176,.17)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--edge-ink:rgba(130,160,255,.12)}}
:root[data-theme="dark"]{--edge-ink:rgba(130,160,255,.12)}
.bands > section.tint::before{background:linear-gradient(180deg,var(--edge-ink),var(--band-a) 85%)}
.bands > section.tint::after,.bands > section.tint-fade::after{background:linear-gradient(180deg,var(--edge-ink),var(--band-b) 85%)}

/* one small motif resting on a divider, never more than one per page */
.motif{position:absolute;bottom:calc(100% + 14px);pointer-events:none;z-index:2}
.motif svg{display:block}
.motif.birds svg{width:54px;height:24px}.motif.birds path{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;opacity:.5}
.motif.sun{bottom:calc(100% + 8px)}.motif.sun span{display:block;width:18px;height:18px;border-radius:50%;background:var(--stamp);opacity:.45}
.motif.leaf{bottom:calc(100% - 4px)}.motif.leaf .leaf{position:static;width:20px;height:20px;transform:rotate(-30deg)}
@media (max-width:560px){.motif{bottom:calc(100% + 8px)}.motif.birds svg{width:42px;height:19px}}
@media (prefers-reduced-motion: no-preference){.motif.birds svg{animation:birds 9s ease-in-out infinite alternate}}
@keyframes birds{from{transform:translate(0,0)}to{transform:translate(10px,-4px)}}
.motif.birds svg{width:66px;height:29px}.motif.birds path{stroke-width:1.8;opacity:.62}@media (max-width:560px){.motif.birds svg{width:50px;height:22px}}

/* ===== divider pass 3: stronger, taller, and kept behind the text ===== */
:root{--edge-hills:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 1440 40%27 preserveAspectRatio=%27none%27%3E%3Cpath d=%27M0 30 C 180 8, 330 12, 480 22 S 770 38, 910 24 S 1210 4, 1440 18 V40 H0Z%27 fill-opacity=%27.62%27 transform=%27translate%281440 40%29 scale%28-1 1.25%29 translate%280 -40%29%27/%3E%3Cpath d=%27M0 30 C 180 8, 330 12, 480 22 S 770 38, 910 24 S 1210 4, 1440 18 V40 H0Z%27 transform=%27translate%280 40%29 scale%281 .78%29 translate%280 -40%29%27/%3E%3C/svg%3E");--edge-wave:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 1440 40%27 preserveAspectRatio=%27none%27%3E%3Cpath d=%27M0 24 C 120 10, 240 10, 360 22 S 600 36, 720 24 S 960 10, 1080 22 S 1320 36, 1440 24 V40 H0Z%27 fill-opacity=%27.62%27 transform=%27translate%281440 40%29 scale%28-1 1.25%29 translate%280 -40%29%27/%3E%3Cpath d=%27M0 24 C 120 10, 240 10, 360 22 S 600 36, 720 24 S 960 10, 1080 22 S 1320 36, 1440 24 V40 H0Z%27 transform=%27translate%280 40%29 scale%281 .78%29 translate%280 -40%29%27/%3E%3C/svg%3E");--edge-kasumi:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 1440 40%27 preserveAspectRatio=%27none%27%3E%3Cpath d=%27M0 40 V30 H236 C 262 30, 264 12, 296 12 H596 C 626 12, 628 30, 658 30 H976 C 1004 30, 1006 8, 1038 8 H1440 V40Z%27 fill-opacity=%27.62%27 transform=%27translate%281440 40%29 scale%28-1 1.25%29 translate%280 -40%29%27/%3E%3Cpath d=%27M0 40 V30 H236 C 262 30, 264 12, 296 12 H596 C 626 12, 628 30, 658 30 H976 C 1004 30, 1006 8, 1038 8 H1440 V40Z%27 transform=%27translate%280 40%29 scale%281 .78%29 translate%280 -40%29%27/%3E%3C/svg%3E");}
:root{--edge-ink:rgba(52,96,176,.28)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--edge-ink:rgba(130,160,255,.2)}}
:root[data-theme="dark"]{--edge-ink:rgba(130,160,255,.2)}
#main .bands{position:relative;z-index:0}
.bands > section.tint::before,.bands > section.tint::after,.bands > section.tint-fade::after{height:44px;z-index:-1}
@media (max-width:560px){.bands > section.tint::before,.bands > section.tint::after,.bands > section.tint-fade::after{height:28px}}
.motif.birds svg{width:84px;height:37px}.motif.birds path{stroke-width:2;opacity:.75}
.motif.birds{bottom:calc(100% + 26px)}
.motif.leaf{bottom:calc(100% + 4px)}.motif.leaf .leaf{width:28px;height:28px}
@media (max-width:560px){.motif.birds svg{width:60px;height:26px}.motif.birds{bottom:calc(100% + 16px)}}
.bands > section.tint::before,.bands > section.tint::after,.bands > section.tint-fade::after{height:38px}
@media (max-width:560px){.bands > section.tint::before,.bands > section.tint::after,.bands > section.tint-fade::after{height:24px}}
/* birds fly just inside the band, clear of any text */
.motif.birds{bottom:auto;top:2px;left:auto!important;right:9%}
@media (max-width:560px){.motif.birds{top:0;right:5%}.motif.birds svg{width:48px;height:21px}}

/* ===== header pass: ink over the hero, brush mark on the current page, a reading line, softer buttons ===== */
:root{--hero-top:var(--navy)}
[data-tod="dawn"]{--hero-top:#24305B}[data-tod="dusk"]{--hero-top:#1C2850}[data-tod="night"]{--hero-top:#0D1330}
.top{transition:background-color .45s ease,border-color .45s ease,box-shadow .45s ease}
.top.scrolled:not(.on-ink){border-bottom-color:transparent;box-shadow:0 1px 0 var(--line),0 10px 24px -20px rgba(30,42,94,.35)}
/* over the hero the header takes the hero's ink colour, so the two read as one piece */
.top.on-ink{background:var(--hero-top);-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom-color:transparent}
.top.on-ink .logo{color:var(--on-navy)}
.top.on-ink .nav a{color:var(--on-navy-2)}
.top.on-ink .nav a:hover,.top.on-ink .nav a[aria-current="page"]{color:var(--on-navy)}
.top.on-ink .actions .btn.alt{color:var(--on-navy);border-color:rgba(255,255,255,.28);background-image:linear-gradient(var(--on-navy),var(--on-navy))}
.top.on-ink .actions .btn.alt:hover{color:var(--navy)}
.top.on-ink .actions #musicBtn[aria-pressed="true"]{background:var(--on-navy);color:var(--navy)}
.top.on-ink .cart-link{color:var(--on-navy)}
@media (hover:hover){.top.on-ink .cart-link:hover::before{background:rgba(255,255,255,.08)}}
/* the name in the display serif */
.logo > span:last-child{font-family:var(--display);font-weight:600;font-size:1.2em;letter-spacing:.01em}
/* current page: a short red brush stroke instead of a grey chip */
.nav a{position:relative;transition:color .25s}
.nav a:hover,.nav a[aria-current="page"]{background:transparent}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"]{color:var(--ink);font-weight:600}
.nav a::before{content:"";position:absolute;left:50%;bottom:1px;width:26px;height:5px;margin-left:-13px;opacity:0;transform:scaleX(.4);transition:opacity .3s,transform .4s cubic-bezier(.3,.7,.2,1);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 5' preserveAspectRatio='none'%3E%3Cpath d='M1.5 3.2C7 1.6 15 1.4 24.5 2.6' fill='none' stroke='%23C8423A' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.nav a[aria-current="page"]::before{opacity:1;transform:none}
@media (hover:hover){.nav a:hover::before{opacity:.45;transform:none}}
@media (min-width:761px){.nav a[data-jpn]:not([data-jpn=""]){padding-bottom:8px}.nav a::before{bottom:-1px}}
/* round, lighter icon buttons */
.actions #musicBtn,.actions #themeBtn{border-radius:50%;border-width:1px}
.actions #langBtn{border-radius:999px;border-width:1px}
/* cart count as a little hanko */
.count{border-radius:5px;transform:rotate(-6deg);font-weight:700}
/* a thin red reading line along the bottom of the header */
.top::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:calc(var(--sp,0) * 100%);border-radius:0 2px 2px 0;pointer-events:none;
  background:linear-gradient(90deg,rgba(200,66,58,0),rgba(200,66,58,.85) 40%,var(--stamp));opacity:.85}
@media (prefers-reduced-motion: reduce){.top,.nav a,.nav a::before{transition:none}}
header.top.on-ink .actions .cart-link,header.top.on-ink .actions .cart-link .cart-ico{color:var(--on-navy);stroke:var(--on-navy)}
/* the menu never scrolls up and down, and its sideways scroll on small phones has no visible bar */
.nav{overflow-y:hidden;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
@media (min-width:761px){.nav a::before{bottom:1px}}


/* ===== inner pages share the landing look ===== */
:root{--pe-top:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 1440 40%27 preserveAspectRatio=%27none%27%3E%3Cg%3E%3Cpath d=%27M0 24 C 120 10, 240 10, 360 22 S 600 36, 720 24 S 960 10, 1080 22 S 1320 36, 1440 24 V40 H0Z%27 fill-opacity=%27.62%27 transform=%27translate%281440 40%29 scale%28-1 1.25%29 translate%280 -40%29%27/%3E%3Cpath d=%27M0 24 C 120 10, 240 10, 360 22 S 600 36, 720 24 S 960 10, 1080 22 S 1320 36, 1440 24 V40 H0Z%27 transform=%27translate%280 40%29 scale%281 .78%29 translate%280 -40%29%27/%3E%3C/g%3E%3C/svg%3E");--pe-bot:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 1440 40%27 preserveAspectRatio=%27none%27%3E%3Cg transform=%27translate%280 40%29 scale%281 -1%29%27%3E%3Cpath d=%27M0 30 C 180 8, 330 12, 480 22 S 770 38, 910 24 S 1210 4, 1440 18 V40 H0Z%27 fill-opacity=%27.62%27 transform=%27translate%281440 40%29 scale%28-1 1.25%29 translate%280 -40%29%27/%3E%3Cpath d=%27M0 30 C 180 8, 330 12, 480 22 S 770 38, 910 24 S 1210 4, 1440 18 V40 H0Z%27 transform=%27translate%280 40%29 scale%281 .78%29 translate%280 -40%29%27/%3E%3C/g%3E%3C/svg%3E")}
#main{position:relative;isolation:isolate;overflow-x:clip}
/* 1. a misty head behind the top of every inner page, ending in a soft hill line */
#main.inner::before{content:"";position:absolute;z-index:-1;left:0;right:0;top:0;height:var(--head-h,250px);pointer-events:none;
  background:linear-gradient(180deg,var(--band-b),var(--band-a));
  -webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - 38px) no-repeat,var(--pe-bot) bottom/100% 38px no-repeat;
  mask:linear-gradient(#000 0 0) top/100% calc(100% - 38px) no-repeat,var(--pe-bot) bottom/100% 38px no-repeat}

@media (max-width:560px){#main.inner::before{-webkit-mask-size:100% calc(100% - 24px),100% 24px;mask-size:100% calc(100% - 24px),100% 24px}}
/* 2. a vertical label down the side, like the landing sections */
.page-tate{top:var(--edge)}
/* 3. small labels above titles get the red rule */
.eyebrow::before{content:"";display:inline-block;width:22px;height:1.5px;background:var(--stamp);vertical-align:middle;margin:-2px 10px 0 0}
/* 4. one heading voice everywhere */
.pd h1,.more h2,.paybox h2,.cart .pg-h1,.done .pg-h1,.res-score{font-family:var(--display);font-weight:600;letter-spacing:-.005em}
.pd h1{font-size:clamp(1.9rem,3.6vw,2.5rem);line-height:1.15}
.more h2,.paybox h2{font-size:clamp(1.5rem,2.8vw,1.9rem)}
html[lang="bn"] .pd h1,html[lang="bn"] .more h2,html[lang="bn"] .paybox h2{font-weight:400;letter-spacing:0}
/* 5. second halves of pages sit on a full-width band with soft edges, like the landing bands */
.shop-steps,.more{position:relative;isolation:isolate;background:none!important;border-top:0!important}
.shop-steps::before,.more::before{content:"";position:absolute;z-index:-1;left:-100vmax;right:-100vmax;top:-26px;bottom:-30px;pointer-events:none;
  background:linear-gradient(180deg,var(--band-a),var(--band-b));
  -webkit-mask:var(--pe-top) top/100% 38px no-repeat,linear-gradient(#000 0 0) center/100% calc(100% - 76px) no-repeat,var(--pe-bot) bottom/100% 38px no-repeat;
  mask:var(--pe-top) top/100% 38px no-repeat,linear-gradient(#000 0 0) center/100% calc(100% - 76px) no-repeat,var(--pe-bot) bottom/100% 38px no-repeat}
.shop-steps{padding-bottom:calc(var(--gap) / 2)}
.more{padding-bottom:calc(var(--gap) / 2)}
/* 6. lesson and product details in the landing's voice */
.ls-h,.pd .h3,.more h3{display:flex;align-items:center;gap:10px}
.ls-h::before,.pd .h3::before{content:"";flex:none;width:18px;height:1.5px;background:var(--stamp)}
.ls-h{font-size:1.35rem}
.tip{border-radius:4px 4px 10px 10px;border-top:2px solid #B07A12!important;position:relative;overflow:hidden}
.tip::after{content:"知";position:absolute;top:6px;right:14px;font-family:var(--brush);font-size:3.2rem;line-height:1;color:#B07A12;opacity:.14;pointer-events:none}
.chk{border-top:2px solid #2E4A9E!important;border-radius:4px 4px 12px 12px}
.inside{list-style:none;padding-left:0}
.inside li{position:relative;padding-left:22px}
.inside li::before{content:"";position:absolute;left:2px;top:.62em;width:9px;height:9px;border-radius:50%;border:1.5px solid var(--stamp);background:rgba(200,66,58,.08)}
.paybox{border-top:2px solid var(--stamp)!important;border-radius:4px 4px 16px 16px}
.memo{border-top:2px solid #2E7550!important;border-radius:4px 4px 12px 12px}

/* ===== divider fit: every edge stays inside the empty space between blocks, never over content ===== */
:root{--eh:calc(var(--gap) / 2 - 6px)}
.bands > section.tint::before,.bands > section.tint::after,.bands > section.tint-fade::after{height:var(--eh)}
@media (max-width:560px){.bands > section.tint::before,.bands > section.tint::after,.bands > section.tint-fade::after{height:var(--eh)}}
.shop-steps::before,.more::before{top:calc(4px - var(--gap) / 2);bottom:calc(4px - var(--gap) / 2);
  -webkit-mask:var(--pe-top) top/100% var(--eh) no-repeat,linear-gradient(#000 0 0) center/100% calc(100% - 2 * var(--eh)) no-repeat,var(--pe-bot) bottom/100% var(--eh) no-repeat;
  mask:var(--pe-top) top/100% var(--eh) no-repeat,linear-gradient(#000 0 0) center/100% calc(100% - 2 * var(--eh)) no-repeat,var(--pe-bot) bottom/100% var(--eh) no-repeat}
#main.inner::before{-webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - var(--pe-h,24px)) no-repeat,var(--pe-bot) bottom/100% var(--pe-h,24px) no-repeat;
  mask:linear-gradient(#000 0 0) top/100% calc(100% - var(--pe-h,24px)) no-repeat,var(--pe-bot) bottom/100% var(--pe-h,24px) no-repeat}
.shop-steps::before,.more::before{top:calc(10px - var(--gap) / 2)}
@media (max-width:560px){.bands > section.tint-fade::after{height:12px}}
.bands > section.tint-fade::after{height:14px}

/* ===== breathing room: every band edge gets its own space, with clear air on both sides ===== */
:root{--br:30px;--eh:32px}
@media (max-width:560px){:root{--br:20px;--eh:22px}}
.bands > section{padding-block:calc(var(--gap) / 2 + var(--br))}
.bands > section.tint::before,.bands > section.tint::after,.bands > section.tint-fade::after{height:var(--eh)}
.bands > section.tint-fade::after{height:var(--eh)}
@media (max-width:560px){.bands > section.tint::before,.bands > section.tint::after,.bands > section.tint-fade::after{height:var(--eh)}}
/* bands inside a page (ordering steps, more about this book): edges sit inside the band's own padding */
.shop-steps,.more{margin-top:calc(var(--gap) / 2 + 10px)!important;padding-top:calc(var(--gap) / 2 + var(--br))!important;padding-bottom:calc(var(--gap) / 2 + var(--br))!important}
.shop-steps::before,.more::before{top:0;bottom:0}
@media (max-width:560px){.bands > section.tint-fade::after{height:16px}}

/* ===== Study rooms ===== */
.rooms .start{gap:8px}
.room-prog{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:8px;font-size:.85rem;font-weight:600;color:var(--kc)}
.rp-bar{flex:1;max-width:90px;height:4px;border-radius:4px;background:var(--line);overflow:hidden}.rp-bar i{display:block;height:100%;background:var(--kc);border-radius:4px}
.rooms .start.soon h3,.rooms .start.soon p{color:var(--muted)}
.rooms .start .stamp{align-self:flex-start;margin-top:auto}
.desk-go{margin-top:22px;justify-content:center}
.st-prac.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.st-prac.three{grid-template-columns:1fr}}
/* a room: units of stepping stones */
.room > .lede{text-align:center;margin-inline:auto;max-width:56ch}
.room-lv{display:flex;justify-content:center;gap:8px;margin:0 0 6px}
.unit{margin-top:34px}
.unit-k{display:flex;align-items:baseline;gap:12px;margin:0 0 10px;padding-bottom:10px;border-bottom:1px solid var(--line);font-weight:600;color:var(--ink);font-family:var(--display);font-size:1.25rem}
html[lang="bn"] .unit-k{font-family:var(--head);font-size:1.05rem}
.unit-n{font-family:var(--brush);font-weight:400;color:var(--stamp);font-size:1.3rem}
.unit-k .jp{margin-left:auto;font-family:var(--jp);font-size:.8rem;font-weight:500;color:var(--stamp);letter-spacing:.1em}
.room-more{margin:24px 0 0;text-align:center;color:var(--muted);font-size:.92rem}
.room-empty{text-align:center;margin-top:30px}
.room-empty::before{content:"";display:block;width:110px;height:110px;margin:0 auto 20px;background:var(--ink);opacity:.18;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M138 32 C 96 10, 40 30, 26 84 C 12 140, 62 182, 112 176 C 162 170, 188 128, 178 86 C 172 60, 156 44, 134 38' fill='none' stroke='%23000' stroke-width='11' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M138 32 C 96 10, 40 30, 26 84 C 12 140, 62 182, 112 176 C 162 170, 188 128, 178 86 C 172 60, 156 44, 134 38' fill='none' stroke='%23000' stroke-width='11' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
.room-empty .muted{max-width:46ch;margin:0 auto 20px}
/* numbered rules inside a lesson */
.rule-n{font-family:var(--jp);font-size:.78rem;font-weight:700;letter-spacing:.08em;color:#fff;background:var(--stamp);border-radius:3px;padding:2px 7px;transform:rotate(-3deg);flex:none}
.rule .ls-h::before{display:none}
.rule-p{margin:10px 0 14px;color:var(--text);line-height:1.75}
.ls-blk.rule + .ls-blk.rule{margin-top:34px}
.kana-page > .lede{text-align:center;margin-inline:auto}

/* ===== grammar lessons made of rules ===== */
.gl-list .st-row{align-items:start}
.gl-k{font-family:var(--jp);font-size:.78rem;font-weight:600;color:var(--stamp);margin-right:10px;letter-spacing:.06em}
.gl-pats{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.gl-pats span{font-family:var(--jp);font-size:.82rem;color:var(--ink);background:var(--chip);border-radius:6px;padding:2px 8px}
.st-row.is-soon .gl-pats span{color:var(--muted);background:transparent;border:1px dashed var(--line)}
.gl-no{display:flex;justify-content:center;align-items:baseline;gap:10px;margin:0 0 12px;font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.gl-no [lang="ja"]{font-family:var(--brush);font-size:1.3rem;letter-spacing:.06em;text-transform:none;color:var(--stamp)}
html[lang="bn"] .gl-no{letter-spacing:.02em;text-transform:none;font-size:.9rem}
.gl > .lede{text-align:center}
.rule-nav{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 14px;margin:6px 0 10px}
.rn-list{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.rn-b{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--card-line);background:var(--sheet);box-shadow:var(--card-shadow);border-radius:999px;padding:5px 12px 5px 6px;font:inherit;font-family:var(--jp);font-size:.88rem;color:var(--ink);cursor:pointer}
.rn-b:hover{border-color:var(--stamp)}
.rn-b .rule-n{font-size:.68rem}
/* a rule card */
.rule-card{scroll-margin-top:90px;margin-top:34px;background:var(--sheet);border:1px solid var(--card-line);border-top:2px solid var(--stamp);border-radius:4px 4px 16px 16px;box-shadow:var(--card-shadow);padding:26px 28px 24px;display:flex;flex-direction:column;gap:22px}
.rc-head{display:flex;align-items:center;gap:12px}
.rc-name{margin:0;font-family:var(--display);font-weight:600;font-size:1.5rem;color:var(--ink)}
html[lang="bn"] .rc-name{font-family:var(--head);font-size:1.2rem}
.rc-pat{text-align:center;padding:18px 10px;border-radius:12px;background:var(--paper);border:1px dashed var(--line)}
.pat{display:inline-flex;flex-wrap:wrap;justify-content:center;gap:8px;font-family:var(--jp);font-size:clamp(1.4rem,4vw,2rem)}
.pt{padding:2px 10px 4px;border-bottom:4px solid var(--kc);color:var(--ink);line-height:1.3}
.pt.k-noun{background:rgba(46,74,158,.06);border-radius:6px 6px 0 0;font-family:var(--display);font-weight:600;font-style:italic}
.rp p{margin:0}
.rp-k{display:flex;align-items:baseline;gap:10px;margin:0 0 10px!important;font-size:.76rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.rp-k .jp{font-family:var(--jp);font-size:.85rem;letter-spacing:.08em;text-transform:none;color:var(--stamp);font-weight:600}
html[lang="bn"] .rp-k{letter-spacing:.02em;text-transform:none;font-size:.88rem}
.rp-how p{line-height:1.8;color:var(--text)}
.ngs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ngs li{display:grid;grid-template-columns:auto auto 1fr;gap:6px 18px;align-items:baseline;padding:10px 14px;border-radius:10px;background:var(--paper)}
.ng-bad{font-family:var(--jp);font-size:1.1rem;color:var(--stamp);text-decoration:line-through;text-decoration-thickness:1.5px;text-decoration-color:rgba(200,66,58,.6)}
.ng-good{font-family:var(--jp);font-size:1.1rem;color:#2E7550}
.ng-why{font-size:.9rem;color:var(--muted)}
@media (max-width:640px){.ngs li{grid-template-columns:1fr}}
.no-furi rt{visibility:hidden}
.rp-cul{position:relative;overflow:hidden;padding:18px 20px;border-radius:12px;background:linear-gradient(180deg,var(--band-a),var(--band-b));border-left:3px solid #B07A12}
.rp-cul::after{content:"文";position:absolute;right:14px;top:4px;font-family:var(--brush);font-size:3.4rem;line-height:1;color:#B07A12;opacity:.14;pointer-events:none}
.rp-cul p:last-child{line-height:1.85;color:var(--text);position:relative}
.rels{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.rels li{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px}
.rel-p{font-family:var(--jp);font-size:1.02rem;color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:2px 10px;background:var(--paper)}
.rels li > span:last-child{color:var(--muted);font-size:.93rem}
.rp-note{margin:0;display:flex;gap:12px;align-items:baseline;padding:12px 16px;border-radius:10px;border:1px dashed var(--line);color:var(--text);font-size:.95rem}
.rp-note .jp{flex:none;font-family:"Caveat","Bornomala",cursive;font-size:1.25rem;color:var(--stamp);transform:rotate(-4deg)}
.rp-try .chk.try{border-top-color:#2E7550!important;margin:0}
.rp-ref{margin:0;padding-top:14px;border-top:1px dashed var(--line);font-size:.82rem;color:var(--muted);display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.rp-ref .jp{font-family:var(--jp);color:var(--stamp);font-weight:600}
@media (max-width:560px){.rule-card{padding:20px 18px;gap:18px}.rc-name{font-size:1.3rem}}
/* one rule per page */
.rn-b.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.rn-b.on .rule-n{background:var(--paper);color:var(--stamp)}
.rn-b.seen{border-color:rgba(46,117,80,.45)}
.rn-b .chk-n{background:#2E7550}
.rn-b:has(.chk-n){padding-right:6px}
.rule-step{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px 16px;margin:4px 0 0;font-size:.85rem;color:var(--muted)}
.rs-bar{width:120px;height:3px;border-radius:3px;background:var(--line);overflow:hidden}.rs-bar i{display:block;height:100%;background:var(--stamp)}
.gl .rule-card{margin-top:26px}
.rule-pager{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:26px}
.rule-pager .btn [lang="ja"]{font-family:var(--jp);font-size:.85em}
@media (max-width:560px){.rule-pager .btn{padding-inline:14px}}
.gl .ls-body .head-row .chip{display:none}
/* rule path: brush-numbered stones joined by a thin line, the pattern written under each */
.rule-nav{display:block;margin:8px auto 6px;max-width:760px}
.rs-path{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));position:relative}
.rs{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;min-width:0}
.rs::before{content:"";position:absolute;top:21px;left:-50%;width:100%;height:1.5px;background:var(--line);z-index:0}
.rs:first-child::before{display:none}
.rs.past::before,.rs.on::before{background:var(--stamp);opacity:.55}
.rs-dot{position:relative;z-index:1;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line);background:var(--sheet);color:var(--muted);cursor:pointer;padding:0;display:grid;place-items:center;
  font-family:var(--brush);font-size:1.35rem;line-height:1;transition:transform .25s,border-color .25s,background .25s,color .25s}
.rs-dot:hover{border-color:var(--stamp);color:var(--stamp)}
.rs.seen .rs-dot,.rs.past .rs-dot{border-color:var(--stamp);color:var(--stamp)}
.rs.on .rs-dot{background:var(--stamp);border-color:var(--stamp);color:#fff;transform:scale(1.12);box-shadow:0 0 0 6px rgba(200,66,58,.12)}
.rs:last-child .rs-dot{font-family:var(--jp);font-size:1rem;font-weight:700}
.rs-cap{font-family:var(--jp);font-size:.82rem;line-height:1.4;color:var(--muted);padding:0 4px;font-feature-settings:"palt"}
.rs.on .rs-cap{color:var(--ink);font-weight:600}
.rule-step{margin-top:14px}
@media (max-width:560px){.rs-dot{width:38px;height:38px;font-size:1.15rem}.rs::before{top:18px}.rs-cap{display:none}.rs.on .rs-cap{display:block;position:absolute;top:50px;white-space:nowrap}.rule-nav{margin-bottom:34px}}
@media (prefers-reduced-motion: reduce){.rs-dot{transition:none}}
/* furigana switch sits in the card's top-right corner */
.gl .ls-body .head-row .chip{display:inline-flex}
.rc-head{flex-wrap:wrap}
.rc-furi{margin-left:auto}
@media (max-width:420px){.rc-head{column-gap:10px}.rc-furi{font-size:.8rem;padding:4px 10px}}
@media (max-width:560px){.rs.on .rs-cap{left:50%;transform:translateX(-50%)}.rs:first-child.on .rs-cap{left:0;transform:none}.rs:last-child.on .rs-cap{left:auto;right:0;transform:none}}
.rule-pager{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.rule-pager > :first-child{justify-self:start}.rule-pager > :last-child{justify-self:end}
.rule-pager .rs-txt{font-size:.85rem;color:var(--muted);white-space:nowrap}
.gl .rule-nav{margin-bottom:0}
@media (max-width:560px){.gl .rule-nav{margin-bottom:28px}.rule-pager{grid-template-columns:1fr 1fr;row-gap:12px}.rule-pager .rs-txt{grid-column:1/-1;grid-row:1;justify-self:center}}
.ls-body > .rule-pager{margin-top:calc(var(--gap) / -2)}.gl .ls-body > .rule-card{margin-top:0}

/* ===== notebook page ===== */
:root{--nb-paper:#FFFDF6;--nb-dot:rgba(35,58,107,.13);--nb-margin:rgba(200,66,58,.38);--nb-kinari:#F4EAD3;--nb-tape:rgba(200,66,58,.22)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--nb-paper:#1C2140;--nb-dot:rgba(175,192,255,.12);--nb-margin:rgba(240,124,132,.35);--nb-kinari:#2C2A3C;--nb-tape:rgba(240,124,132,.25)}}
:root[data-theme="dark"]{--nb-paper:#1C2140;--nb-dot:rgba(175,192,255,.12);--nb-margin:rgba(240,124,132,.35);--nb-kinari:#2C2A3C;--nb-tape:rgba(240,124,132,.25)}
.rule-card.nb-page{position:relative;display:block;padding:30px 34px 22px 34px;border:0;border-top:0!important;border-radius:3px;
  background:radial-gradient(circle,var(--nb-dot) 1.1px,transparent 1.4px) 0 0/22px 22px,var(--nb-paper);
  box-shadow:0 1px 1px rgba(0,0,0,.04),0 2px 0 -1px var(--nb-paper),0 3px 0 -1px rgba(0,0,0,.06),0 5px 0 -2px var(--nb-paper),0 6px 0 -2px rgba(0,0,0,.05),0 26px 44px -30px rgba(34,37,47,.45)}
/* the red margin line down the left, like a school notebook */
.nb-page::before{content:"";position:absolute;top:0;bottom:0;left:98px;width:1.5px;background:var(--nb-margin)}
/* a folded corner at the bottom right */
.nb-page::after{content:"";position:absolute;right:0;bottom:0;width:28px;height:28px;background:linear-gradient(135deg,rgba(0,0,0,.08) 0 50%,var(--paper) 50%);border-radius:0 0 3px 0;box-shadow:-2px -2px 4px -2px rgba(0,0,0,.12)}
.nb-head{position:relative;display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-left:82px;min-height:52px}
.nb-seal{position:absolute;left:0;top:50%;transform:translateY(-50%) rotate(-6deg);width:62px;height:62px;border:2px solid var(--stamp);border-radius:8px;color:var(--stamp);
  display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--jp);font-size:.62rem;font-weight:700;letter-spacing:.08em;line-height:1;background:rgba(200,66,58,.04)}
.nb-seal b{font-family:var(--brush);font-weight:400;font-size:1.9rem;letter-spacing:0;margin-top:3px}
.nb-head .rc-name{font-family:var(--display);font-style:italic;font-weight:600;font-size:clamp(1.5rem,3vw,1.85rem);margin:0}
html[lang="bn"] .nb-head .rc-name{font-style:normal;font-family:var(--head);font-size:1.3rem}
/* the pattern written into worksheet squares; nouns are blanks to fill */
.nb-pat{margin:26px 0 30px 82px;padding:0}
.pat.nb{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 8px;font-size:inherit}
.nb-kana{display:inline-flex;border-bottom:3px solid var(--kc);padding-bottom:4px}
.nb-cell{width:46px;height:46px;display:grid;place-items:center;font-family:var(--brush);font-size:1.75rem;color:var(--ink);
  background:linear-gradient(var(--nb-dot),var(--nb-dot)) center/1px 100% no-repeat,linear-gradient(var(--nb-dot),var(--nb-dot)) center/100% 1px no-repeat;border:1px solid rgba(35,58,107,.22);margin-left:-1px}
.nb-slot{display:inline-grid;place-items:center;min-width:78px;height:46px;border:1.5px dashed var(--kc);border-radius:6px;margin-bottom:7px;background:rgba(46,74,158,.04)}
.nb-slot i{font-family:var(--display);font-weight:600;font-size:1.35rem;color:var(--kc)}
/* sections: the Japanese label written down the margin in red, the content to the right */
.nb-sec{display:grid;grid-template-columns:64px minmax(0,1fr);column-gap:34px;margin-top:26px}
.nb-m{margin:2px 0 0;justify-self:center;writing-mode:vertical-rl;font-family:var(--brush);font-size:1.15rem;letter-spacing:.3em;color:var(--stamp);line-height:1}
.nb-c{min-width:0}
.nb-l{margin:0 0 8px;font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
html[lang="bn"] .nb-l{letter-spacing:.02em;text-transform:none;font-size:.85rem}
.nb-c > p:not(.nb-l){margin:0;line-height:1.85;color:var(--text)}
/* red-pen corrections */
.nb-ngs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.nb-ngs li{display:grid;grid-template-columns:auto 1fr;column-gap:16px;row-gap:2px;align-items:baseline}
.nb-ngs p{margin:0}
.nb-bad,.nb-good{display:flex;align-items:baseline;gap:8px;font-family:var(--jp);font-size:1.15rem}
.nb-bad s{text-decoration:none;color:var(--muted);background:linear-gradient(transparent 52%,rgba(200,66,58,.8) 52%,rgba(200,66,58,.8) 60%,transparent 60%)}
.nb-x,.nb-o{font-family:var(--brush);color:var(--stamp);font-size:1.25rem;line-height:1}
.nb-good{color:var(--ink)}
.nb-why{grid-column:1/-1;font-family:"Caveat","Bornomala",cursive;font-size:1.2rem;color:var(--stamp);transform:rotate(-.6deg);transform-origin:left}
html[lang="bn"] .nb-why{font-family:var(--body);font-size:.92rem}
/* the culture note: a kinari card held on with washi tape */
.nb-cul{position:relative;margin:34px 6px 8px calc(98px + 18px);padding:22px 24px 20px;background:var(--nb-kinari);transform:rotate(-.7deg);box-shadow:0 12px 22px -16px rgba(60,40,10,.45)}
.nb-cul::before{content:"";position:absolute;top:-11px;left:50%;width:96px;height:22px;margin-left:-48px;transform:rotate(2deg);
  background:repeating-linear-gradient(45deg,var(--nb-tape) 0 6px,rgba(255,255,255,.18) 6px 12px);opacity:.9}
.nb-cul-k{display:flex;gap:10px;align-items:baseline;margin:0 0 8px;font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#8C6A2A}
.nb-cul-k .jp{font-family:var(--brush);font-size:1.2rem;letter-spacing:.1em;text-transform:none;color:var(--stamp);font-weight:400}
html[lang="bn"] .nb-cul-k{letter-spacing:.02em;text-transform:none;font-size:.85rem}
.nb-cul p:last-child{margin:0;line-height:1.85;color:var(--text)}
/* numbered examples */
.nb-exs{list-style:none;margin:0;padding:0;counter-reset:ex}
.nb-exs li{counter-increment:ex;position:relative;padding:10px 0 10px 34px;border-bottom:1px dashed rgba(35,58,107,.16)}
.nb-exs li:last-child{border-bottom:0}
.nb-exs li::before{content:counter(ex);position:absolute;left:0;top:14px;width:22px;height:22px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-family:var(--display);font-size:.8rem;color:var(--muted)}
.nb-exs .jp-line{margin:0;font-size:1.2rem}.nb-exs .tr{margin:2px 0 0;color:var(--muted)}
/* handwritten memo in the margin style */
.nb-memo{margin:26px 0 0 calc(98px + 18px);font-family:"Caveat","Bornomala",cursive;font-size:1.3rem;line-height:1.4;color:#2E4A9E;transform:rotate(-.8deg)}
html[lang="bn"] .nb-memo{font-family:var(--body);font-size:1rem;line-height:1.7}
.nb-memo .jp{font-family:var(--brush);color:var(--stamp);margin-right:10px;font-size:1.1rem}
/* practice and footer */
.nb-page .rp-try .chk.try{background:transparent;box-shadow:none;border:1px solid var(--line)!important;border-top:2px solid #2E7550!important}
.nb-foot{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin:30px 0 0;padding:14px 0 0 calc(98px + 18px);border-top:1px solid rgba(35,58,107,.1)}
.nb-ref{margin:0;font-size:.8rem;color:var(--muted)}.nb-ref .jp{font-family:var(--jp);color:var(--stamp);font-weight:600;margin-right:8px}
.nb-no{font-family:var(--jp);font-size:.8rem;color:var(--muted);letter-spacing:.2em;white-space:nowrap;margin-right:22px}
/* phones: a narrower margin */
@media (max-width:640px){
  .rule-card.nb-page{padding:24px 18px 18px 18px}
  .nb-page::before{left:52px}
  .nb-head{padding-left:58px}.nb-seal{width:46px;height:46px;font-size:.5rem}.nb-seal b{font-size:1.4rem}
  .nb-pat{margin-left:0}.nb-cell{width:38px;height:38px;font-size:1.45rem}.nb-slot{min-width:62px;height:38px}
  .nb-sec{grid-template-columns:34px minmax(0,1fr);column-gap:20px}.nb-m{font-size:1rem}
  .nb-cul{margin-left:4px;margin-right:2px}.nb-memo,.nb-foot{margin-left:0;padding-left:0}
  .nb-ngs li{grid-template-columns:1fr}
}
@media (prefers-reduced-motion: reduce){.nb-cul,.nb-memo,.nb-why{transform:none}}
.nb-sec .nb-m{color:var(--stamp)!important}
.nb-cul-k .jp{white-space:nowrap}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .nb-memo{color:#AFC0FF}:root:not([data-theme="light"]) .nb-cul-k{color:#D9B26A}}
:root[data-theme="dark"] .nb-memo{color:#AFC0FF}:root[data-theme="dark"] .nb-cul-k{color:#D9B26A}
@media (max-width:640px){.nb-memo,.nb-foot{margin-left:54px}.nb-foot{flex-direction:column;gap:6px}.nb-no{align-self:flex-end}}

/* ===== rule page looks (demo switcher) ===== */
.rs-switch{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin:18px 0 0;padding:10px 14px;border:1px dashed var(--line);border-radius:12px;font-size:.85rem;color:var(--muted)}
.rs-switch [lang="ja"]{font-family:var(--jp)}
.ENSO{--enso:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M138 32 C 96 10, 40 30, 26 84 C 12 140, 62 182, 112 176 C 162 170, 188 128, 178 86 C 172 60, 156 44, 134 38' fill='none' stroke='%23000' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E")}

/* --- 霞 Mist: no box at all; the rule sits on the page like the home sections --- */
.v-mist .rule-card.nb-page{background:none;box-shadow:none;padding:0;border-radius:0}
.v-mist .nb-page::before,.v-mist .nb-page::after{display:none}
.v-mist .nb-head{flex-direction:column;align-items:center;text-align:center;padding:0;gap:6px;min-height:0}
.v-mist .nb-seal{position:static;transform:none;width:auto;height:auto;border:0;background:none;flex-direction:row;gap:10px;font-size:.74rem;letter-spacing:.22em;color:var(--muted)}
.v-mist .nb-seal::before{content:"";width:22px;height:1.5px;background:var(--stamp)}
.v-mist .nb-seal b{font-size:1.2rem;color:var(--stamp);margin:0}
.v-mist .nb-head .rc-name{font-style:normal;font-size:clamp(1.9rem,4vw,2.5rem)}
.v-mist .rc-furi{position:absolute;right:0;top:0}
.v-mist .nb-pat{position:relative;margin:30px auto 40px;padding:46px 0;display:flex;justify-content:center}
.v-mist .nb-pat::before{content:"";position:absolute;left:50%;top:50%;width:230px;height:230px;transform:translate(-50%,-50%);background:var(--ink);opacity:.08;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M138 32 C 96 10, 40 30, 26 84 C 12 140, 62 182, 112 176 C 162 170, 188 128, 178 86 C 172 60, 156 44, 134 38' fill='none' stroke='%23000' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M138 32 C 96 10, 40 30, 26 84 C 12 140, 62 182, 112 176 C 162 170, 188 128, 178 86 C 172 60, 156 44, 134 38' fill='none' stroke='%23000' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
.v-mist .pat.nb{position:relative;gap:6px 14px;align-items:baseline}
.v-mist .nb-cell{border:0;background:none;width:auto;height:auto;font-size:clamp(2.2rem,6vw,3.2rem);padding:0 1px}
.v-mist .nb-kana{border-bottom:3px solid var(--kc);padding-bottom:2px}
.v-mist .nb-slot{border:0;border-bottom:3px solid var(--kc);border-radius:0;background:none;min-width:0;height:auto;padding:0 6px 4px;margin:0}
.v-mist .nb-slot i{font-size:clamp(1.8rem,4.6vw,2.4rem)}
.v-mist .nb-sec{display:block;max-width:680px;margin:40px auto 0}
.v-mist .nb-m{writing-mode:horizontal-tb;display:flex;align-items:center;justify-content:center;gap:10px;margin:0 0 4px;letter-spacing:.12em;font-size:1.05rem}
.v-mist .nb-m::before,.v-mist .nb-m::after{content:"";width:18px;height:1.5px;background:var(--stamp);opacity:.6}
.v-mist .nb-l{text-align:center;margin-bottom:16px}
.v-mist .rp-how .nb-c > p:not(.nb-l){text-align:center;font-size:1.08rem}
.v-mist .nb-ngs li{justify-items:center;text-align:center;grid-template-columns:1fr}
.v-mist .nb-why{transform:none;text-align:center}
.v-mist .nb-cul{transform:none;margin:48px calc(50% - 50vw) 8px;padding:46px max(20px,calc(50vw - 340px));background:linear-gradient(180deg,var(--band-a),var(--band-b));box-shadow:none;text-align:center;overflow:hidden}
.v-mist .nb-cul::before{display:none}
.v-mist .nb-cul::after{content:"文";position:absolute;right:max(10px,calc(50vw - 520px));top:50%;transform:translateY(-50%);font-family:var(--brush);font-size:9rem;line-height:1;color:var(--ink);opacity:.06;pointer-events:none}
.v-mist .nb-cul-k{justify-content:center;color:var(--muted)}
.v-mist .nb-cul p:last-child{font-size:1.08rem;position:relative}
.v-mist .nb-exs li{text-align:center;padding-left:0}
.v-mist .nb-exs li::before{position:static;margin:0 auto 6px;width:20px;height:20px}
.v-mist .nb-memo{margin:34px auto 0;text-align:center;transform:none;max-width:560px}
.v-mist .rels li{justify-content:center}
.v-mist .nb-foot{padding-left:0;justify-content:center;flex-direction:column;align-items:center;border-top:0;margin-top:40px}
.v-mist .nb-no{margin:0}

/* --- 掛軸 Scroll: the rule mounted like a hanging scroll --- */
.v-scroll .rule-card.nb-page{background:#FBF5E6;border:16px solid var(--navy);border-width:42px 16px 42px;border-radius:2px;padding:30px 30px 20px;margin-inline:14px;
  box-shadow:inset 0 0 0 1px rgba(176,122,18,.35),0 30px 50px -30px rgba(20,27,61,.6)}
.v-scroll .nb-page::before{left:-34px;right:-34px;top:-56px;bottom:auto;width:auto;height:14px;border-radius:7px;background:linear-gradient(180deg,#8A5A2B,#5B3716);box-shadow:0 2px 3px rgba(0,0,0,.3)}
.v-scroll .nb-page::after{left:-34px;right:-34px;bottom:-56px;width:auto;height:16px;border-radius:8px;background:linear-gradient(180deg,#8A5A2B,#4A2C10);box-shadow:0 3px 4px rgba(0,0,0,.3)}
.v-scroll .nb-head{flex-direction:column;align-items:center;text-align:center;padding:0;gap:12px}
.v-scroll .nb-seal{position:static;transform:rotate(-4deg);background:var(--stamp);color:#fff;border-color:var(--stamp)}
.v-scroll .rc-furi{position:absolute;right:0;top:0}
.v-scroll .nb-head .rc-name{color:#233A6B}
.v-scroll .nb-pat{margin:22px 0 26px;display:flex;justify-content:center;padding:18px 0;border-top:1px solid rgba(176,122,18,.4);border-bottom:1px solid rgba(176,122,18,.4)}
.v-scroll .nb-cell{border:0;background:none;width:auto;height:auto;font-size:2.6rem;color:#1B2033}
.v-scroll .nb-slot{background:none;border:0;border-bottom:3px solid var(--kc);border-radius:0;height:auto;padding:0 6px 4px}
.v-scroll .nb-sec{grid-template-columns:40px minmax(0,1fr);column-gap:22px}
.v-scroll .nb-m{color:#B07A12!important}
.v-scroll .nb-c > p:not(.nb-l),.v-scroll .nb-exs .jp-line,.v-scroll .nb-good{color:#22252F}
.v-scroll .nb-cul{transform:none;margin-left:62px;background:rgba(35,58,107,.06);box-shadow:none;border-left:3px solid #B07A12}
.v-scroll .nb-cul::before{display:none}
.v-scroll .nb-memo,.v-scroll .nb-foot{margin-left:62px;padding-left:0}
.v-scroll .nb-no{margin-right:0}
@media (max-width:640px){.v-scroll .rule-card.nb-page{border-width:30px 10px;padding:20px 14px;margin-inline:10px}.v-scroll .nb-page::before{top:-42px;left:-22px;right:-22px}.v-scroll .nb-page::after{bottom:-42px;left:-22px;right:-22px}
  .v-scroll .nb-cul,.v-scroll .nb-memo,.v-scroll .nb-foot{margin-left:0}.v-scroll .nb-sec{grid-template-columns:28px minmax(0,1fr);column-gap:14px}}

/* --- 墨 Ink: night ink page with a paper practice card inside --- */
.v-ink .rule-card.nb-page{background:radial-gradient(1px 1px at 12% 8%,rgba(255,255,255,.5) 98%,transparent),radial-gradient(1px 1px at 78% 4%,rgba(255,255,255,.4) 98%,transparent),
  linear-gradient(var(--navy-line) 1px,transparent 1px) 0 0/48px 48px,linear-gradient(90deg,var(--navy-line) 1px,transparent 1px) 0 0/48px 48px,var(--navy);color:var(--on-navy);border-radius:18px;
  box-shadow:0 30px 60px -34px rgba(10,14,33,.8)}
.v-ink .nb-page::before{display:none}.v-ink .nb-page::after{display:none}
.v-ink .nb-head .rc-name{color:var(--on-navy)}
.v-ink .nb-seal{background:var(--stamp);color:#fff;border-color:var(--stamp)}
.v-ink .nb-cell{color:#fff;border-color:rgba(255,255,255,.22);background:linear-gradient(rgba(255,255,255,.1),rgba(255,255,255,.1)) center/1px 100% no-repeat,linear-gradient(rgba(255,255,255,.1),rgba(255,255,255,.1)) center/100% 1px no-repeat}
.v-ink .nb-cell{font-size:2rem;width:52px;height:52px}
.v-ink .nb-slot{background:rgba(255,255,255,.05)}
.v-ink .k-noun{--kc:#9DB2FF}.v-ink .k-part{--kc:#F07C84}.v-ink .k-verb{--kc:#7BD3A3}
.v-ink .nb-m{color:#F07C84!important}
.v-ink .nb-l{color:var(--on-navy-2)}
.v-ink .nb-c > p:not(.nb-l),.v-ink .nb-exs .jp-line,.v-ink .nb-good{color:var(--on-navy)}
.v-ink .nb-exs .tr,.v-ink .nb-bad s,.v-ink .nb-ref,.v-ink .nb-no,.v-ink .rels li > span:last-child{color:var(--on-navy-2)}
.v-ink .nb-exs li{border-bottom-color:rgba(255,255,255,.12)}
.v-ink .nb-exs li::before{border-color:rgba(255,255,255,.25);color:var(--on-navy-2)}
.v-ink rt{color:var(--on-navy-2)}
.v-ink .nb-why{color:#F07C84}
.v-ink .nb-cul{color:#22252F}.v-ink .nb-cul p:last-child{color:#22252F}.v-ink .nb-cul{background:#F4EAD3}
.v-ink .nb-memo{color:#C9D3FF}
.v-ink .rel-p{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2);color:var(--on-navy)}
.v-ink .nb-page .rp-try .chk.try{background:var(--sheet);color:var(--text)}
.v-ink .nb-page .rp-try .chk.try .jp-line{color:var(--text)}.v-ink .nb-page .rp-try rt{color:var(--muted)}
.v-ink .nb-foot{border-top-color:rgba(255,255,255,.12)}
.v-ink .rc-furi{background:var(--on-navy);color:var(--navy)}
.v-scroll .rule-card.nb-page{margin-top:64px;margin-bottom:30px}.v-scroll .nb-head .rc-name{font-size:clamp(1.6rem,3.4vw,2.1rem)}@media (max-width:640px){.v-scroll .rule-card.nb-page{margin-top:50px}}

/* fixes: scroll mounting shows on all sides, rods sit on the mounting; notebook stamp clears the margin line */
.v-scroll .rule-card.nb-page{border-top:42px solid var(--navy)!important;border-bottom:42px solid var(--navy)!important}
.v-scroll .nb-page::before{top:-49px}.v-scroll .nb-page::after{bottom:-49px}
@media (max-width:640px){.v-scroll .rule-card.nb-page{border-top-width:30px!important;border-bottom-width:30px!important}.v-scroll .nb-page::before{top:-37px}.v-scroll .nb-page::after{bottom:-37px}}
.v-note .nb-seal{width:52px;height:52px;left:-6px}.v-note .nb-seal b{font-size:1.6rem}
.v-note .nb-page::before{left:104px}
@media (max-width:640px){.v-note .nb-page::before{left:62px}.v-note .nb-seal{width:38px;height:38px;left:-4px;font-size:.45rem}.v-note .nb-seal b{font-size:1.15rem}.v-note .nb-head{padding-left:56px}
  .v-note .nb-sec{grid-template-columns:36px minmax(0,1fr);column-gap:26px}.v-note .nb-memo,.v-note .nb-foot{margin-left:62px}}

/* --- 高札 Notice board: the rule posted on a wooden board with a little roof, stamped in red --- */
.v-board .rule-card.nb-page{margin:58px 6px 60px;padding:34px 34px 24px;border-radius:2px;background:#FFFCF3;
  border:18px solid transparent!important;border-image:repeating-linear-gradient(90deg,#9B6B3C 0 7px,#A8774A 7px 11px,#8E6033 11px 19px,#A47243 19px 24px) 18;
  box-shadow:0 0 0 1px rgba(80,50,20,.25),0 30px 44px -28px rgba(60,35,10,.55)}
.v-board .nb-page::before{content:"";position:absolute;left:-46px;right:-46px;top:-60px;height:34px;bottom:auto;width:auto;background:linear-gradient(180deg,#4A3A33,#2E2420);
  clip-path:polygon(4% 0,96% 0,100% 100%,0 100%);border-radius:0}
.v-board .nb-page::after{content:"";position:absolute;left:12%;right:12%;bottom:-62px;top:auto;width:auto;height:44px;border-radius:0;box-shadow:none;
  background:linear-gradient(90deg,#8E6033 0 18px,transparent 18px calc(100% - 18px),#8E6033 calc(100% - 18px))}
.v-board .nb-head{padding-left:0;justify-content:center;flex-direction:column;gap:6px;text-align:center}
.v-board .nb-head .rc-name{font-family:var(--brush);font-style:normal;font-weight:400;font-size:clamp(1.8rem,4vw,2.3rem);color:#2A2A2A}
.v-board .nb-seal{position:absolute;left:auto;right:-6px;top:-8px;transform:rotate(12deg);width:74px;height:74px;border:3px solid var(--stamp);border-radius:50%;background:rgba(200,66,58,.06);font-size:.6rem}
.v-board .nb-seal b{font-size:2rem}
.v-board .rc-furi{position:absolute;left:0;top:0}
.v-board .nb-pat{margin:22px 0 28px;display:flex;justify-content:center;padding:16px 0;border-block:2px solid #2A2A2A;border-width:2px 0 1px}
.v-board .nb-cell{border:0;background:none;width:auto;height:auto;font-size:2.4rem;color:#1B1B1B}
.v-board .nb-slot{background:none;border:2px solid var(--kc);border-radius:4px;height:auto;padding:2px 10px}
.v-board .nb-page{color:#22252F}
.v-board .nb-sec{grid-template-columns:auto minmax(0,1fr);column-gap:22px;align-items:start;margin-top:24px}
.v-board .nb-m{writing-mode:horizontal-tb;width:52px;height:52px;display:grid;place-items:center;margin:0;padding:4px;border:2px solid var(--stamp);border-radius:6px;font-size:.95rem;letter-spacing:0;line-height:1.05;text-align:center;transform:rotate(-4deg);background:rgba(200,66,58,.05)}
.v-board .nb-sec:nth-of-type(even) .nb-m{transform:rotate(3deg)}
.v-board .nb-c > p:not(.nb-l),.v-board .nb-exs .jp-line,.v-board .nb-good{color:#22252F}
.v-board .nb-cul{transform:rotate(-.6deg);margin-left:74px;background:#F4EAD3;box-shadow:0 10px 18px -12px rgba(60,40,10,.4)}
.v-board .nb-cul::before{width:14px;height:14px;border-radius:50%;margin-left:-7px;top:-6px;background:radial-gradient(circle at 35% 35%,#E36A5F,#A12E25);transform:none;opacity:1}
.v-board .nb-memo,.v-board .nb-foot{margin-left:74px;padding-left:0}
.v-board .nb-no{margin-right:0}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .v-board .rule-card.nb-page{background:#F4EEDD}}
:root[data-theme="dark"] .v-board .rule-card.nb-page{background:#F4EEDD}
.v-board .rule-card.nb-page .nb-ref,.v-board .nb-exs .tr,.v-board .nb-l{color:#5E5A55}
@media (max-width:640px){.v-board .rule-card.nb-page{border-width:12px!important;padding:26px 16px 18px;margin-inline:2px}.v-board .nb-page::before{left:-24px;right:-24px;top:-44px;height:26px}
  .v-board .nb-seal{width:56px;height:56px;right:-8px;top:-14px}.v-board .nb-seal b{font-size:1.5rem}
  .v-board .nb-m{width:42px;height:42px;font-size:.8rem}.v-board .nb-sec{column-gap:14px}.v-board .nb-cul,.v-board .nb-memo,.v-board .nb-foot{margin-left:0}
  .v-board .rc-furi{position:static;align-self:flex-end;order:3}}

/* --- 枝 Branch: a brush trunk down the side; every part grows from it like a branch with a blossom --- */
.v-branch .rule-card.nb-page{background:none;box-shadow:none;padding:6px 0 10px 0}
.v-branch .nb-page::after{display:none}
.v-branch .nb-page::before{left:30px;top:60px;bottom:20px;width:5px;border-radius:5px;background:linear-gradient(180deg,#3B2A22,#5A4033 40%,#3B2A22);opacity:.85}
.v-branch .nb-head{padding-left:84px;min-height:68px}
.v-branch .nb-seal{left:0;top:30px;transform:translateY(-50%);width:66px;height:66px;border:0;border-radius:50%;background:radial-gradient(circle,#F6C9D1 0 55%,#EFA7B5 56% 100%);color:#8E2A3A;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg%3E%3Cellipse cx='50' cy='24' rx='17' ry='24'/%3E%3Cellipse cx='50' cy='24' rx='17' ry='24' transform='rotate(72 50 50)'/%3E%3Cellipse cx='50' cy='24' rx='17' ry='24' transform='rotate(144 50 50)'/%3E%3Cellipse cx='50' cy='24' rx='17' ry='24' transform='rotate(216 50 50)'/%3E%3Cellipse cx='50' cy='24' rx='17' ry='24' transform='rotate(288 50 50)'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg%3E%3Cellipse cx='50' cy='24' rx='17' ry='24'/%3E%3Cellipse cx='50' cy='24' rx='17' ry='24' transform='rotate(72 50 50)'/%3E%3Cellipse cx='50' cy='24' rx='17' ry='24' transform='rotate(144 50 50)'/%3E%3Cellipse cx='50' cy='24' rx='17' ry='24' transform='rotate(216 50 50)'/%3E%3Cellipse cx='50' cy='24' rx='17' ry='24' transform='rotate(288 50 50)'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;font-size:.5rem}
.v-branch .nb-seal b{font-size:1.5rem;color:#8E2A3A}
.v-branch .nb-head .rc-name{font-style:normal;font-size:clamp(1.7rem,3.6vw,2.2rem)}
.v-branch .nb-pat{margin:18px 0 10px 84px;display:flex;justify-content:flex-start}
.v-branch .nb-cell{border:0;background:none;width:auto;height:auto;font-size:2.3rem}
.v-branch .nb-slot{background:none;border:0;border-bottom:3px solid var(--kc);border-radius:0;height:auto;padding:0 6px 3px}
.v-branch .nb-sec{position:relative;display:block;margin-top:30px;padding-left:84px}
.v-branch .nb-sec::before{content:"";position:absolute;left:33px;top:-2px;width:40px;height:22px;border-top:3px solid #4A3428;border-radius:60% 40% 0 0 / 100% 100% 0 0;transform:skewX(-20deg);opacity:.85}
.v-branch .nb-sec::after{content:"";position:absolute;left:66px;top:-10px;width:16px;height:16px;border-radius:50% 0 50% 50%;background:#7FA65A;transform:rotate(-30deg)}
.v-branch .nb-sec:nth-of-type(odd)::after{background:#F2A7B6;border-radius:50%}
.v-branch .nb-m{writing-mode:horizontal-tb;display:inline;margin:0 12px 0 0;font-size:1.15rem;letter-spacing:.1em}
.v-branch .nb-c{display:inline}
.v-branch .nb-l{display:inline;margin:0}
.v-branch .nb-c > :not(.nb-l){margin-top:12px}
.v-branch .nb-c > p:not(.nb-l){display:block}
.v-branch .nb-cul{transform:none;margin:34px 0 0 84px;background:linear-gradient(180deg,var(--band-a),var(--band-b));box-shadow:none;border-radius:4px 22px 4px 22px}
.v-branch .nb-cul::before{display:none}
.v-branch .nb-memo,.v-branch .nb-foot{margin-left:84px;padding-left:0}
@media (max-width:640px){.v-branch .nb-page::before{left:14px}.v-branch .nb-head{padding-left:56px}.v-branch .nb-seal{width:48px;height:48px;left:-8px}.v-branch .nb-seal b{font-size:1.1rem}
  .v-branch .nb-pat{margin-left:0;justify-content:center}.v-branch .nb-sec{padding-left:48px}.v-branch .nb-sec::before{left:17px;width:26px}.v-branch .nb-sec::after{left:36px}
  .v-branch .nb-cul,.v-branch .nb-memo,.v-branch .nb-foot{margin-left:48px}}

/* --- 扇 Fan: the pattern written across an open folding fan; parts below as calm blocks --- */
.v-board .rule-card.nb-page{border:18px solid transparent!important;border-image:none;
  background:linear-gradient(#FFFCF3,#FFFCF3) padding-box,repeating-linear-gradient(90deg,#9B6B3C 0 7px,#A8774A 7px 11px,#8E6033 11px 19px,#A47243 19px 24px) border-box}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .v-board .rule-card.nb-page{background:linear-gradient(#F4EEDD,#F4EEDD) padding-box,repeating-linear-gradient(90deg,#7E5530 0 7px,#8C6038 7px 11px,#734C29 11px 19px,#855C35 19px 24px) border-box}}
:root[data-theme="dark"] .v-board .rule-card.nb-page{background:linear-gradient(#F4EEDD,#F4EEDD) padding-box,repeating-linear-gradient(90deg,#7E5530 0 7px,#8C6038 7px 11px,#734C29 11px 19px,#855C35 19px 24px) border-box}
.v-board .nb-page::before{top:-52px}.v-board .nb-page::after{bottom:-80px}
@media (max-width:640px){.v-board .rule-card.nb-page{border-width:12px!important}.v-board .nb-page::before{top:-38px}}

/* --- 石庭 Stone garden: raked sand; every part is a flat stone with rake rings around it --- */
:root{--sand:#EEE7D8;--rake:rgba(120,104,80,.16);--stone:#F8F4EB;--stone-big:#59564F}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--sand:#1F2238;--rake:rgba(200,200,230,.08);--stone:#2A2E4A;--stone-big:#0E1022}}
:root[data-theme="dark"]{--sand:#1F2238;--rake:rgba(200,200,230,.08);--stone:#2A2E4A;--stone-big:#0E1022}
/* the big stone carries the pattern */
/* smaller flat stones for each part */

/* --- 暖簾 Noren: the pattern printed on a split indigo shop curtain --- */
.v-noren .rule-card.nb-page{background:var(--sheet);border-radius:4px 4px 16px 16px;box-shadow:var(--card-shadow);padding:0 34px 24px;overflow:hidden}
.v-noren .nb-page::before,.v-noren .nb-page::after{display:none}
.v-noren .nb-head{position:relative;z-index:1;padding:18px 0 0;margin:0 -34px;justify-content:center;flex-direction:column;gap:4px;text-align:center;
  background:linear-gradient(180deg,#7A5A34 0 8px,transparent 8px)}
.v-noren .nb-seal{position:absolute;left:24px;top:30px;transform:rotate(-6deg);width:48px;height:48px;background:#fff;border-color:#fff;color:var(--stamp);font-size:.48rem}
.v-noren .nb-seal b{font-size:1.4rem}
.v-noren .nb-head .rc-name{font-style:normal;font-size:clamp(1.1rem,2.4vw,1.3rem);color:#DDE4F7;letter-spacing:.04em;padding-top:14px}
.v-noren .rc-furi{position:absolute;right:20px;top:28px;background:#fff;color:#233A6B}
.v-noren .nb-head,.v-noren .nb-pat{background-color:transparent}
.v-noren .nb-head::before,.v-noren .nb-pat::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,#233A6B 0 32.6%,transparent 32.6% 33.7%,#233A6B 33.7% 66.3%,transparent 66.3% 67.4%,#233A6B 67.4%)}
.v-noren .nb-head::before{top:8px}
.v-noren .nb-pat{position:relative;z-index:1;margin:0 -34px 34px;padding:26px 20px 40px;display:flex;justify-content:center;transform-origin:top center}
.v-noren .nb-pat::before{border-radius:0 0 4px 4px;-webkit-mask:linear-gradient(180deg,#000 calc(100% - 10px),transparent);}
.v-noren .nb-pat::after{content:"";position:absolute;left:50%;bottom:14px;width:44px;height:3px;margin-left:-22px;background:rgba(255,255,255,.35);border-radius:3px}
.v-noren .nb-cell{border:0;background:none;width:auto;height:auto;font-size:clamp(2rem,5.4vw,2.8rem);color:#fff;font-family:var(--brush)}
.v-noren .nb-slot{background:rgba(255,255,255,.08);border:1.5px dashed rgba(255,255,255,.55);border-radius:6px;height:auto;padding:4px 10px}
.v-noren .nb-slot i{color:#fff}
.v-noren .nb-kana{border-bottom-color:rgba(255,255,255,.75)}
@media (prefers-reduced-motion: no-preference){.v-noren .nb-pat{animation:noren-sway 2.4s ease-in-out .2s both}}
@keyframes noren-sway{0%{transform:skewX(0)}30%{transform:skewX(1.4deg)}65%{transform:skewX(-.7deg)}100%{transform:skewX(0)}}
.v-noren .nb-sec{display:grid;grid-template-columns:110px minmax(0,1fr);column-gap:24px;margin-top:24px;padding-top:22px;border-top:1px solid var(--line)}
.v-noren .nb-sec:first-of-type{border-top:0;padding-top:0}
.v-noren .nb-m{writing-mode:horizontal-tb;justify-self:start;margin:0;font-size:1.2rem;letter-spacing:.08em;padding:4px 10px;border-radius:4px;background:#233A6B;color:#fff!important;height:fit-content}
.v-noren .nb-cul{transform:none;margin:28px 0 0;background:linear-gradient(180deg,var(--band-a),var(--band-b));box-shadow:none;border-radius:12px}
.v-noren .nb-cul::before{display:none}
.v-noren .nb-memo,.v-noren .nb-foot{margin-left:134px;padding-left:0}
.v-noren .nb-no{margin-right:0}
@media (max-width:640px){.v-noren .rule-card.nb-page{padding:0 18px 18px}.v-noren .nb-head,.v-noren .nb-pat{margin-inline:-18px}.v-noren .nb-seal{left:12px;top:24px;width:38px;height:38px}.v-noren .nb-seal b{font-size:1.1rem}
  .v-noren .rc-furi{right:10px;top:24px;font-size:.78rem;padding:4px 10px}.v-noren .nb-head .rc-name{padding-top:56px}
  .v-noren .nb-sec{grid-template-columns:1fr;row-gap:8px}.v-noren .nb-memo,.v-noren .nb-foot{margin-left:0}}

/* --- 絵巻 Picture scroll: the rule unrolls sideways, one scene at a time, with gold mist between --- */
.v-emaki .rule-card.nb-page{display:flex;gap:0;overflow-x:auto;scroll-snap-type:x mandatory;padding:0;border-radius:6px;
  background:linear-gradient(180deg,#F8F0DC,#F3E8CF);box-shadow:inset 0 10px 0 #7A5A34,inset 0 -10px 0 #7A5A34,0 24px 40px -28px rgba(60,40,10,.5);scrollbar-width:thin;scrollbar-color:rgba(122,90,52,.6) transparent}
.v-emaki .nb-page::before,.v-emaki .nb-page::after{display:none}
.v-emaki .rule-card > *{flex:0 0 min(520px,84%);scroll-snap-align:start;margin:0!important;padding:46px 40px 40px!important;position:relative;color:#22252F;min-height:420px;box-sizing:border-box}
.v-emaki .rule-card > *:not(:first-child)::before{content:"";position:absolute;left:-36px;top:0;bottom:0;width:72px;pointer-events:none;z-index:1;
  background:radial-gradient(ellipse 36px 40px at 50% 20%,rgba(214,176,92,.55),transparent 70%),radial-gradient(ellipse 30px 46px at 40% 55%,rgba(214,176,92,.45),transparent 70%),radial-gradient(ellipse 36px 34px at 60% 85%,rgba(214,176,92,.5),transparent 70%)}
.v-emaki .em-title{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:22px}
.v-emaki .nb-head{padding:0;flex-direction:column;gap:12px;align-items:center}
.v-emaki .nb-seal{position:static;transform:rotate(-6deg)}
.v-emaki .rc-furi{position:absolute;right:20px;top:24px}
.v-emaki .nb-head .rc-name{color:#233A6B;font-size:clamp(1.8rem,3.6vw,2.3rem)}
.v-emaki .nb-pat{margin:0;display:flex;justify-content:center}
.v-emaki .nb-cell{border:0;background:none;width:auto;height:auto;font-size:2.6rem;color:#1B2033}
.v-emaki .nb-slot{background:none;border:0;border-bottom:3px solid var(--kc);border-radius:0;height:auto;padding:0 6px 3px}
.v-emaki .nb-sec{display:block}
.v-emaki .nb-m{writing-mode:vertical-rl;position:absolute;right:26px;top:46px;font-size:1.5rem;letter-spacing:.3em;margin:0}
.v-emaki .nb-c{padding-right:44px}
.v-emaki .nb-c > p:not(.nb-l),.v-emaki .nb-exs .jp-line,.v-emaki .nb-good{color:#22252F}
.v-emaki .nb-exs .tr,.v-emaki .nb-l,.v-emaki .nb-ref,.v-emaki .rels li > span:last-child{color:#6A6258}
.v-emaki .nb-cul{transform:none;background:rgba(35,58,107,.06);box-shadow:none;display:flex;flex-direction:column;justify-content:center}
.v-emaki .nb-cul::before{content:""!important;transform:none;opacity:1;height:auto;margin:0}
.v-emaki .nb-cul-k{color:#8C6A2A}.v-emaki .nb-cul p:last-child{color:#22252F;font-size:1.08rem}
.v-emaki .nb-memo{transform:none;display:flex;flex-direction:column;justify-content:center;font-size:1.5rem;color:#2E4A9E}
.v-emaki .nb-foot{flex-basis:260px!important;display:flex;flex-direction:column;justify-content:center;align-items:center;border:0;gap:12px}
.v-emaki .nb-no{margin:0}
.v-emaki .rp-try .chk.try{background:#FFFCF3}
.em-nav{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:18px}
.em-hint{font-size:.85rem;color:var(--muted)}
.em-nav .kt-arr[data-em="-1"] .st-go{transform:scaleX(-1)}
.v-emaki rt{color:#7A6E60}
@media (max-width:640px){.v-emaki .rule-card > *{flex-basis:88%;padding:34px 22px 30px!important;min-height:380px}.v-emaki .nb-m{right:12px;top:34px;font-size:1.2rem}.v-emaki .nb-c{padding-right:30px}}
.v-emaki .rule-card.nb-page{flex-direction:row;align-items:stretch}
.v-emaki .rc-furi{position:static}
.v-emaki .em-title .nb-head{gap:14px}
.v-noren .nb-head::before,.v-noren .nb-pat::before{background:linear-gradient(90deg,#233A6B 0 33%,#16264D 33% 33.5%,#233A6B 33.5% 66.5%,#16264D 66.5% 67%,#233A6B 67%)}
.v-noren .nb-pat::before{-webkit-mask:none;mask:none;clip-path:polygon(0 0,100% 0,100% 100%,67.5% 100%,67.5% 88%,66.5% 88%,66.5% 100%,33.5% 100%,33.5% 88%,32.5% 88%,32.5% 100%,0 100%)}
.v-noren .nb-seal{background:#fff;color:var(--stamp)}
.v-noren .nb-seal b{color:var(--stamp)}

/* 枝 Branch, v2: the trunk stands in the centre and parts grow out to the left and right */
@media (min-width:641px){
  .v-branch .rule-card.nb-page{padding:6px 0 10px}
  .v-branch .nb-page::before{left:50%;margin-left:-3px;top:150px;bottom:70px;width:6px;
    background:linear-gradient(180deg,#5A4033,#3B2A22 30%,#4A3428 70%,#3B2A22)}
  .v-branch .nb-head{padding:0;flex-direction:column;align-items:center;text-align:center;gap:8px;min-height:0}
  .v-branch .nb-seal{position:static;transform:none;width:76px;height:76px}
  .v-branch .nb-seal b{font-size:1.7rem}
  .v-branch .rc-furi{position:absolute;right:0;top:0}
  .v-branch .nb-pat{position:relative;z-index:1;margin:18px auto 24px;justify-content:center;width:fit-content;padding:10px 26px 14px;background:var(--paper);border-radius:40px}
  .v-branch .nb-sec{width:calc(50% - 46px);padding:0;margin-top:34px;position:relative}
  .v-branch .nb-sec:nth-of-type(even){margin-right:auto;text-align:right}
  .v-branch .nb-sec:nth-of-type(odd){margin-left:auto}
  .v-branch .nb-sec::before{top:12px;width:44px;height:16px;border-top:3px solid #4A3428;transform:none;opacity:.85}
  .v-branch .nb-sec:nth-of-type(even)::before{left:auto;right:-46px;border-radius:0 70% 0 0 / 0 100% 0 0}
  .v-branch .nb-sec:nth-of-type(odd)::before{left:-46px;border-radius:70% 0 0 0 / 100% 0 0 0}
  .v-branch .nb-sec::after{top:4px;width:15px;height:15px}
  .v-branch .nb-sec:nth-of-type(even)::after{left:auto;right:-14px}
  .v-branch .nb-sec:nth-of-type(odd)::after{left:-14px}
  .v-branch .nb-sec:nth-of-type(even) .rels li,.v-branch .nb-sec:nth-of-type(even) .nb-bad,.v-branch .nb-sec:nth-of-type(even) .nb-good{justify-content:flex-end}
  .v-branch .nb-sec:nth-of-type(even) .nb-ngs li{justify-items:end}
  .v-branch .nb-sec:nth-of-type(even) .nb-exs li{padding-left:0;padding-right:34px}
  .v-branch .nb-sec:nth-of-type(even) .nb-exs li::before{left:auto;right:0}
  .v-branch .nb-sec .chk.try{text-align:left}
  .v-branch .rp-try{width:calc(50% - 46px)}
  .v-branch .nb-cul{position:relative;z-index:1;margin:44px auto 0;max-width:620px;text-align:center;border-radius:28px;background:linear-gradient(180deg,#EEF2F8,#E4EAF4);box-shadow:0 0 0 10px var(--paper)}
  .v-branch .nb-cul-k{justify-content:center}
  .v-branch .nb-memo{position:relative;z-index:1;margin:40px auto 0;width:fit-content;max-width:560px;text-align:center;background:var(--paper);padding:6px 18px}
  .v-branch .nb-foot{position:relative;z-index:1;margin:40px 0 0;padding:14px 0 0;justify-content:center;flex-direction:column;align-items:center;background:var(--paper)}
  .v-branch .nb-no{margin:0}
  /* roots at the bottom of the trunk */
  .v-branch .nb-foot::before{content:"";position:absolute;left:50%;top:-22px;width:120px;height:22px;margin-left:-60px;border-bottom:3px solid #4A3428;border-radius:0 0 50% 50%;opacity:.6}
}
@media (min-width:641px) and (prefers-color-scheme: dark){:root:not([data-theme="light"]) .v-branch .nb-cul{background:linear-gradient(180deg,#252B4D,#202644)}}
:root[data-theme="dark"] .v-branch .nb-cul{background:linear-gradient(180deg,#252B4D,#202644)}
@media (min-width:641px){.v-branch .nb-foot{background:none;padding-top:30px}.v-branch .nb-foot::before{top:-6px}.v-branch .nb-page::before{bottom:100px}}

/* ===== lesson: three columns on wide screens ===== */
.gl-map{display:none}
.gl-side{margin-top:44px}
.gs-box{background:var(--sheet);border:1px solid var(--card-line);box-shadow:var(--card-shadow);border-radius:14px;padding:18px 18px 16px}
.gs-box + .gs-box{margin-top:18px}
.gs-k{display:flex;align-items:baseline;gap:8px;margin:0 0 12px;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.gs-k .jp{font-family:var(--jp);font-size:.85rem;letter-spacing:.06em;text-transform:none;color:var(--stamp)}
html[lang="bn"] .gs-k{letter-spacing:.02em;text-transform:none;font-size:.85rem}
.gw{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.gw li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:7px 0;border-bottom:1px dashed var(--line)}
.gw li:last-child{border-bottom:0}
.gw-w{font-family:var(--jp);font-size:1.05rem;color:var(--ink);white-space:nowrap}
.gw-w rt{font-size:.5em;color:var(--muted)}
.gw-m{font-size:.84rem;color:var(--muted);text-align:right}
.gp-row{display:flex;gap:14px;align-items:center}
.gp-stamp{flex:none;width:46px;height:46px;border:2px dashed var(--line);border-radius:8px;display:grid;place-items:center;font-family:var(--brush);font-size:1.5rem;color:var(--muted);transform:rotate(-6deg)}
.gp-stamp.on{border:2.5px solid var(--stamp);color:var(--stamp);background:rgba(200,66,58,.06)}
.gp-row > div{flex:1;min-width:0}
.gp-l{margin:0;font-weight:600;color:var(--ink);font-size:.95rem}
.gp-s{margin:2px 0 8px;font-size:.82rem;color:var(--muted)}
.gs-prog .rp-bar{display:block;max-width:none;--kc:#2E7550}
.gs-prog .rp-bar i{background:#2E7550}
@media (min-width:1200px){
  .ls.gl{max-width:1280px}
  .gl > .back,.gl > .gl-no,.gl > .pg-h1,.gl > .lede{max-width:780px;margin-inline:auto}
  .gl > .back{display:block;width:fit-content;margin-left:calc(50% - 390px)}
  .gl-grid{display:grid;grid-template-columns:200px minmax(0,780px) 240px;gap:40px;justify-content:center;align-items:start}
  .gl-mid{min-width:0}
  .gl-mid > .rule-nav{display:none}
  .gl-map{display:block}
  .gl-side{margin-top:0}
  .gl-stick{position:sticky;top:96px;padding-top:24px}
  .gl-map ol{list-style:none;margin:0;padding:0;position:relative}
  .gl-map ol::before{content:"";position:absolute;left:19px;top:20px;bottom:20px;width:1.5px;background:var(--line)}
  .gl-map li{position:relative;margin:0 0 6px}
  .gl-map button{display:flex;align-items:center;gap:12px;width:100%;padding:6px 8px 6px 0;border:0;background:none;cursor:pointer;text-align:left;font:inherit;border-radius:10px}
  .gl-map button:hover .gm-cap{color:var(--ink)}
  .gm-dot{position:relative;z-index:1;flex:none;width:40px;height:40px;border-radius:50%;border:1.5px solid var(--line);background:var(--sheet);display:grid;place-items:center;font-family:var(--brush);font-size:1.2rem;color:var(--muted);transition:all .25s}
  .gl-map li:last-child .gm-dot{font-family:var(--jp);font-size:.9rem;font-weight:700}
  .gm-cap{font-family:var(--jp);font-size:.84rem;line-height:1.35;color:var(--muted)}
  .gl-map li.seen .gm-dot{border-color:var(--stamp);color:var(--stamp)}
  .gl-map li.on .gm-dot{background:var(--stamp);border-color:var(--stamp);color:#fff;box-shadow:0 0 0 5px rgba(200,66,58,.12)}
  .gl-map li.on .gm-cap{color:var(--ink);font-weight:600}
  .gl .rs-switch{margin-top:24px}
}
@media (min-width:1200px){.gl-grid{grid-template-columns:180px minmax(0,780px) 220px;gap:28px}.gl-map,.gl-side{align-self:stretch}.gl-stick{top:84px}}
@media (min-width:1400px){.gl-grid{grid-template-columns:200px minmax(0,780px) 250px;gap:44px}}
.gs-k .jp{white-space:nowrap}.gs-k{flex-wrap:wrap;row-gap:2px}
@media (min-width:1200px){
  .gl-side .gl-stick{display:flex;flex-direction:column}
  .gl-side .gs-prog{order:-1;margin:0 0 18px}
  .gl-side .gs-box + .gs-box{margin-top:0}
  .gl-side .gs-box:not(.gs-prog){max-height:calc(100vh - 300px);display:flex;flex-direction:column}
  .gl-side .gw{overflow-y:auto;scrollbar-width:thin;padding-right:4px;margin-right:-4px}
  .gw li{flex-wrap:wrap;column-gap:10px}
  .gw-m{font-size:.8rem}
}
/* noren: the seal and furigana switch sit above the curtain's lower panel, never clipped */
.v-noren .nb-head{z-index:2;padding-bottom:18px;min-height:96px}
.v-noren .nb-seal{top:24px;width:52px;height:52px;font-size:.5rem;box-shadow:0 4px 10px -4px rgba(0,0,0,.4)}
.v-noren .nb-seal b{font-size:1.5rem;margin-top:2px}
.v-noren .rc-furi{top:30px}
.v-noren .nb-pat{padding-top:14px}
@media (max-width:640px){.v-noren .nb-head{min-height:0}.v-noren .nb-seal{top:22px;width:42px;height:42px}.v-noren .nb-seal b{font-size:1.2rem}.v-noren .rc-furi{top:24px}}

/* branch: a bigger sakura holds the rule label */
.v-branch .nb-seal{-webkit-mask:none;mask:none;border-radius:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cellipse cx='50' cy='25' rx='19' ry='25' transform='rotate(0 50 50)' fill='%23F6C9D1' stroke='%23E89AAB' stroke-width='1.2'/%3E%3Cpath d='M50 4 L46 0 M50 4 L54 0' transform='rotate(0 50 50)' stroke='%23FBF3F4' stroke-width='3'/%3E%3Cellipse cx='50' cy='25' rx='19' ry='25' transform='rotate(72 50 50)' fill='%23F6C9D1' stroke='%23E89AAB' stroke-width='1.2'/%3E%3Cpath d='M50 4 L46 0 M50 4 L54 0' transform='rotate(72 50 50)' stroke='%23FBF3F4' stroke-width='3'/%3E%3Cellipse cx='50' cy='25' rx='19' ry='25' transform='rotate(144 50 50)' fill='%23F6C9D1' stroke='%23E89AAB' stroke-width='1.2'/%3E%3Cpath d='M50 4 L46 0 M50 4 L54 0' transform='rotate(144 50 50)' stroke='%23FBF3F4' stroke-width='3'/%3E%3Cellipse cx='50' cy='25' rx='19' ry='25' transform='rotate(216 50 50)' fill='%23F6C9D1' stroke='%23E89AAB' stroke-width='1.2'/%3E%3Cpath d='M50 4 L46 0 M50 4 L54 0' transform='rotate(216 50 50)' stroke='%23FBF3F4' stroke-width='3'/%3E%3Cellipse cx='50' cy='25' rx='19' ry='25' transform='rotate(288 50 50)' fill='%23F6C9D1' stroke='%23E89AAB' stroke-width='1.2'/%3E%3Cpath d='M50 4 L46 0 M50 4 L54 0' transform='rotate(288 50 50)' stroke='%23FBF3F4' stroke-width='3'/%3E%3Ccircle cx='50' cy='50' r='25' fill='%23FDEEF1' stroke='%23F0B7C3' stroke-width='1'/%3E%3C/svg%3E") center/contain no-repeat;color:#9A2E44;font-size:.66rem;letter-spacing:.06em;gap:0;line-height:1}
.v-branch .nb-seal b{font-size:2rem;color:#9A2E44;margin-top:2px}
@media (min-width:641px){.v-branch .nb-seal{width:116px;height:116px}.v-branch .nb-page::before{top:190px}}
@media (max-width:640px){.v-branch .nb-seal{width:78px;height:78px;left:-14px;top:34px;font-size:.5rem}.v-branch .nb-seal b{font-size:1.4rem}.v-branch .nb-head{padding-left:72px;min-height:80px}}
@media (min-width:641px){.v-branch .nb-seal{width:132px;height:132px;font-size:.72rem}.v-branch .nb-seal b{font-size:2.3rem}.v-branch .nb-page::before{top:206px}}
@media (min-width:641px){.v-branch .nb-page::before{top:var(--trunk-top,206px);bottom:var(--trunk-bot,100px)}}
/* branch: a little air between each branch tip and its text */
@media (min-width:641px){
  .v-branch .nb-sec,.v-branch .rp-try{width:calc(50% - 72px)}
  .v-branch .nb-sec::before{width:48px}
  .v-branch .nb-sec:nth-of-type(even)::before{right:-69px}
  .v-branch .nb-sec:nth-of-type(odd)::before{left:-69px}
  .v-branch .nb-sec:nth-of-type(even)::after{right:-34px}
  .v-branch .nb-sec:nth-of-type(odd)::after{left:-34px}
}
@media (max-width:640px){.v-branch .nb-sec{padding-left:62px}.v-branch .nb-sec::after{left:38px}.v-branch .nb-cul,.v-branch .nb-memo,.v-branch .nb-foot{margin-left:62px}}
.v-branch .nb-ngs li{grid-template-columns:1fr}
.v-branch .nb-good,.v-branch .nb-bad{white-space:nowrap}
@media (max-width:640px){.v-branch .nb-sec{padding-left:72px}.v-branch .nb-sec::after{left:36px}.v-branch .nb-cul,.v-branch .nb-memo,.v-branch .nb-foot{margin-left:72px}}

/* --- 御朱印 Goshuin book: an opened accordion book, brush pattern, a big red shrine-style seal --- */
.v-goshuin .rule-card.nb-page{border-radius:3px;padding:30px 40px 26px;border-top:16px solid transparent!important;border-bottom:16px solid transparent!important;
  background:repeating-linear-gradient(90deg,transparent 0 calc(25% - 10px),rgba(120,90,40,.05) calc(25% - 10px) calc(25% - 1px),rgba(120,90,40,.16) calc(25% - 1px) 25%) padding-box,
    linear-gradient(#FBF6EA,#F7F0DF) padding-box,
    repeating-linear-gradient(45deg,#233A6B 0 6px,#2B4580 6px 12px) border-box;
  box-shadow:0 0 0 1px rgba(35,58,107,.25),0 28px 46px -30px rgba(40,30,10,.55)}
.v-goshuin .nb-page::before,.v-goshuin .nb-page::after{display:none}
.v-goshuin .nb-head{padding-left:0;flex-direction:column;align-items:center;text-align:center;gap:6px}
.v-goshuin .nb-seal{position:static;transform:none;width:auto;height:auto;border:0;background:none;writing-mode:vertical-rl;flex-direction:row;gap:6px;font-family:var(--brush);font-size:.95rem;color:#2A2A2A;letter-spacing:.2em}
.v-goshuin .nb-seal b{font-size:1.1rem;margin:0;color:#2A2A2A}
.v-goshuin .nb-head .rc-name{font-style:normal;color:#233A6B;font-size:clamp(1.6rem,3.4vw,2.1rem)}
.v-goshuin .rc-furi{position:absolute;right:0;top:0}
.v-goshuin .nb-pat{position:relative;margin:28px 0 34px;padding:40px 0;display:flex;justify-content:center}
.v-goshuin .nb-pat::before{content:"";position:absolute;left:50%;top:50%;width:190px;height:190px;transform:translate(-50%,-50%) rotate(-8deg);border-radius:50%;
  border:7px double rgba(200,66,58,.75);background:radial-gradient(circle,rgba(200,66,58,.10) 0 58%,transparent 59%);mix-blend-mode:multiply}
.v-goshuin .nb-pat::after{content:"学";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-8deg);font-family:var(--brush);font-size:6.5rem;line-height:1;color:rgba(200,66,58,.22);pointer-events:none}
.v-goshuin .pat.nb{position:relative;z-index:1}
.v-goshuin .nb-cell{border:0;background:none;width:auto;height:auto;font-size:clamp(2.4rem,6.4vw,3.4rem);color:#141414}
.v-goshuin .nb-kana{border-bottom:0}
.v-goshuin .nb-slot{background:none;border:0;border-bottom:2px solid #141414;border-radius:0;height:auto;padding:0 8px 2px}
.v-goshuin .nb-slot i{color:#233A6B}
.v-goshuin .nb-sec{grid-template-columns:52px minmax(0,1fr);column-gap:26px;margin-top:28px}
.v-goshuin .nb-m{color:#141414!important;font-size:1.25rem;position:relative}
.v-goshuin .nb-m::after{content:"";position:absolute;left:50%;bottom:-16px;width:12px;height:12px;margin-left:-6px;background:var(--stamp);border-radius:2px;transform:rotate(12deg)}
.v-goshuin .nb-c > p:not(.nb-l),.v-goshuin .nb-exs .jp-line,.v-goshuin .nb-good{color:#22252F}
.v-goshuin .nb-l,.v-goshuin .nb-exs .tr,.v-goshuin .nb-ref,.v-goshuin .rels li > span:last-child{color:#6A6258}
.v-goshuin .nb-cul{transform:none;margin-left:78px;background:#fff;box-shadow:0 0 0 1px rgba(200,66,58,.25);border-top:3px solid var(--stamp)}
.v-goshuin .nb-cul::before{display:none}
.v-goshuin .nb-memo,.v-goshuin .nb-foot{margin-left:78px;padding-left:0}
.v-goshuin .nb-no{margin-right:0}
.v-goshuin .rp-try .chk.try{background:#FFFDF6}
.v-goshuin rt{color:#7A6E60}
@media (max-width:640px){.v-goshuin .rule-card.nb-page{padding:22px 16px 18px}.v-goshuin .nb-pat::before{width:150px;height:150px}.v-goshuin .nb-pat::after{font-size:5rem}
  .v-goshuin .nb-sec{grid-template-columns:34px minmax(0,1fr);column-gap:16px}.v-goshuin .nb-cul,.v-goshuin .nb-memo,.v-goshuin .nb-foot{margin-left:0}.v-goshuin .rc-furi{position:static}}

/* --- 金継ぎ Kintsugi: dark glazed ceramic mended with gold; mistakes are cracks repaired in gold --- */
.v-kintsugi .rule-card.nb-page{border-radius:22px;padding:34px 38px 26px;color:#EDE6D6;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 1200' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23F6D77B'/%3E%3Cstop offset='.5' stop-color='%23C9962E'/%3E%3Cstop offset='1' stop-color='%23F0C860'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='none' stroke='url%28%23g%29' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0 160 L14 168 L22 162 L34 176' stroke-width='1.6'/%3E%3Cpath d='M14 168 L18 186' stroke-width='1'/%3E%3Cpath d='M800 520 L788 528 L780 520 L766 534' stroke-width='1.5'/%3E%3Cpath d='M0 930 L12 926 L20 940 L32 936' stroke-width='1.4'/%3E%3Cpath d='M800 1060 L790 1070 L782 1066 L770 1082' stroke-width='1.4'/%3E%3Cpath d='M120 0 L126 12 L118 22' stroke-width='1.3'/%3E%3Cpath d='M640 1200 L646 1188 L638 1176' stroke-width='1.3'/%3E%3C/g%3E%3C/svg%3E") center/100% 100% no-repeat,radial-gradient(120% 80% at 30% 0%,#3B3A40 0%,#25242A 60%,#1C1B20 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 30px 50px -30px rgba(0,0,0,.7)}
.v-kintsugi .nb-page::before,.v-kintsugi .nb-page::after{display:none}
.v-kintsugi .nb-head{padding-left:0;flex-direction:column;align-items:center;text-align:center;gap:8px}
.v-kintsugi .nb-seal{position:static;transform:none;border:1.5px solid #D9AE4E;background:rgba(217,174,78,.08);color:#E9C46A;width:60px;height:60px;border-radius:50%}
.v-kintsugi .nb-seal b{color:#F2D27A}
.v-kintsugi .nb-head .rc-name{font-style:normal;color:#F3EAD6;font-size:clamp(1.7rem,3.6vw,2.2rem)}
.v-kintsugi .rc-furi{position:absolute;right:0;top:0;background:#E9C46A;color:#25242A}
.v-kintsugi .nb-pat{margin:24px 0 30px;display:flex;justify-content:center;padding:22px 0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 10' preserveAspectRatio='none'%3E%3Cpath d='M0 5 L60 3 L110 7 L170 4 L240 6 L300 2 L360 6 L430 4 L500 7 L560 3 L600 5' fill='none' stroke='%23D9AE4E' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") top/100% 10px no-repeat,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 10' preserveAspectRatio='none'%3E%3Cpath d='M0 5 L60 3 L110 7 L170 4 L240 6 L300 2 L360 6 L430 4 L500 7 L560 3 L600 5' fill='none' stroke='%23D9AE4E' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") bottom/100% 10px no-repeat}
.v-kintsugi .nb-cell{border:0;background:none;width:auto;height:auto;font-size:clamp(2.2rem,6vw,3rem);color:#FBF4E4}
.v-kintsugi .nb-slot{background:none;border:0;border-bottom:2px solid #D9AE4E;border-radius:0;height:auto;padding:0 6px 3px}
.v-kintsugi .nb-slot i{color:#E9C46A}
.v-kintsugi .k-part,.v-kintsugi .k-verb,.v-kintsugi .k-noun{--kc:#D9AE4E}
.v-kintsugi .nb-sec{display:block;margin-top:26px;padding-top:24px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 10' preserveAspectRatio='none'%3E%3Cpath d='M0 5 L60 3 L110 7 L170 4 L240 6 L300 2 L360 6 L430 4 L500 7 L560 3 L600 5' fill='none' stroke='%23D9AE4E' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") top/100% 8px no-repeat}
.v-kintsugi .nb-sec:first-of-type{background:none;padding-top:0}
.v-kintsugi .nb-m{writing-mode:horizontal-tb;display:inline;margin:0 10px 0 0;color:#E9C46A!important;font-size:1.15rem;letter-spacing:.1em}
.v-kintsugi .nb-c{display:inline}.v-kintsugi .nb-l{display:inline;color:#B8AE9C}
.v-kintsugi .nb-c > :not(.nb-l){margin-top:12px}.v-kintsugi .nb-c > p:not(.nb-l){display:block;color:#EDE6D6}
.v-kintsugi .nb-exs .jp-line,.v-kintsugi .nb-good{color:#FBF4E4}
.v-kintsugi .nb-exs .tr,.v-kintsugi .nb-ref,.v-kintsugi .nb-no,.v-kintsugi .rels li > span:last-child{color:#B8AE9C}
.v-kintsugi .nb-exs li{border-bottom-color:rgba(217,174,78,.25)}.v-kintsugi .nb-exs li::before{border-color:rgba(217,174,78,.5);color:#E9C46A}
.v-kintsugi rt{color:#B8AE9C}
/* a mistake is a crack mended in gold */
.v-kintsugi .nb-bad s{color:#9A9286;background:linear-gradient(transparent 50%,#D9AE4E 50%,#D9AE4E 58%,transparent 58%)}
.v-kintsugi .nb-x{color:#E9C46A}.v-kintsugi .nb-o{color:#7BD3A3}
.v-kintsugi .nb-why{color:#E9C46A}
.v-kintsugi .rel-p{background:rgba(255,255,255,.04);border-color:rgba(217,174,78,.4);color:#FBF4E4}
.v-kintsugi .nb-cul{transform:none;margin:30px 0 0;background:#F3EAD6;color:#2A2622;border-radius:16px;box-shadow:inset 0 0 0 1px rgba(217,174,78,.6)}
.v-kintsugi .nb-cul::before{display:none}.v-kintsugi .nb-cul p:last-child{color:#2A2622}
.v-kintsugi .nb-memo{margin:26px 0 0;transform:none;color:#F2D27A}
.v-kintsugi .nb-foot{margin:30px 0 0;padding:14px 0 0;border-top:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 10' preserveAspectRatio='none'%3E%3Cpath d='M0 5 L60 3 L110 7 L170 4 L240 6 L300 2 L360 6 L430 4 L500 7 L560 3 L600 5' fill='none' stroke='%23D9AE4E' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") top/100% 8px no-repeat}
.v-kintsugi .nb-no{margin-right:0}
.v-kintsugi .rp-try .chk.try{background:#F7F1E3;color:#22252F;border-color:rgba(217,174,78,.6)!important;border-top:2px solid #D9AE4E!important}
.v-kintsugi .rp-try .chk.try .jp-line{color:#22252F}.v-kintsugi .rp-try .chk.try rt{color:#7A6E60}
@media (max-width:640px){.v-kintsugi .rule-card.nb-page{padding:24px 18px 18px;border-radius:16px}.v-kintsugi .rc-furi{position:static}}
.v-goshuin .nb-pat::before{left:auto;right:4%;top:50%;width:140px;height:140px;transform:translateY(-50%) rotate(-10deg)}
.v-goshuin .nb-pat::after{left:auto;right:calc(4% + 70px);transform:translate(50%,-50%) rotate(-10deg);font-size:4.6rem;color:rgba(200,66,58,.55)}
.v-goshuin .nb-m::after{display:none}
.v-goshuin .nb-m{border-right:2px solid rgba(200,66,58,.6);padding-left:6px}
@media (max-width:640px){.v-goshuin .nb-pat{flex-direction:column;align-items:center;padding:20px 0 150px}.v-goshuin .nb-pat::before{right:50%;top:auto;bottom:6px;width:120px;height:120px;transform:translateX(50%) rotate(-10deg)}.v-goshuin .nb-pat::after{right:50%;top:auto;bottom:66px;transform:translate(50%,50%) rotate(-10deg);font-size:3.6rem}}
.v-kintsugi .rule-card.nb-page{background-size:100% 100%,auto}
.v-kintsugi .rule-card.nb-page{position:relative;isolation:isolate}

.v-kintsugi .nb-page > *{position:relative}
.v-kintsugi .rule-card.nb-page{background-blend-mode:normal}

.v-goshuin .nb-pat{padding-right:150px;padding-left:20px}@media (max-width:640px){.v-goshuin .nb-pat{padding-right:0;padding-left:0}}
/* careful: the strike line runs through the middle of the words, with clear space after ✕ */
.nb-bad{gap:12px}
.nb-good{gap:12px}
.nb-bad s{background:none!important;text-decoration:line-through;text-decoration-color:rgba(200,66,58,.85);text-decoration-thickness:2px;text-decoration-skip-ink:none}
.v-kintsugi .nb-bad s{text-decoration-color:#D9AE4E}
.nb-bad s rt{text-decoration:none;display:ruby-text}
.nb-ngs li{row-gap:6px}
/* goshuin: the red rule beside each label is short and stands a little away from the brush text */
.v-goshuin .nb-m{border-right:0;padding-left:0}
.v-goshuin .nb-m::after{display:block;content:"";position:static;width:1.5px;height:28px;margin:12px auto 0;background:rgba(200,66,58,.6);border-radius:0;transform:none}
.v-goshuin .nb-m::after{display:none}

/* paper-coloured looks keep dark ink text in dark mode too (they are always light paper) */
.v-scroll .rule-card,.v-emaki .rule-card,.v-goshuin .rule-card,.v-board .rule-card,
.v-ink .nb-cul,.v-kintsugi .nb-cul,.v-ink .rp-try .chk.try,.v-kintsugi .rp-try .chk.try{
  --paper:#F6F3EA;--sheet:#FFFDF8;--text:#22252F;--muted:#62626C;--ink:#233A6B;--line:#E3DDCF;--chip:#ECE7DA;--grid:#C6D3C2;--grid-faint:#E7ECE2;
  --card-line:rgba(35,58,107,.07);--btn-bg:#233A6B;--btn-fg:#fff;--ok:#2E7550;--ok-bg:#E3F1E8;--no-bg:#F8E1E1;color:var(--text)}
.v-scroll .rule-card .k-noun,.v-emaki .rule-card .k-noun,.v-goshuin .rule-card .k-noun,.v-board .rule-card .k-noun{--kc:#2E4A9E}
.v-scroll .rule-card .k-verb,.v-emaki .rule-card .k-verb,.v-goshuin .rule-card .k-verb,.v-board .rule-card .k-verb{--kc:#2E7550}
.v-scroll .rule-card .k-time,.v-emaki .rule-card .k-time,.v-goshuin .rule-card .k-time,.v-board .rule-card .k-time{--kc:#B07A12}
.v-ink .nb-cul-k,.v-kintsugi .nb-cul-k{color:#8C6A2A}
.v-emaki .nb-memo{color:#2E4A9E}
.v-scroll .rule-card .chip:not([aria-pressed="true"]),.v-board .rule-card .chip:not([aria-pressed="true"]),.v-goshuin .rule-card .chip:not([aria-pressed="true"]),.v-emaki .rule-card .chip:not([aria-pressed="true"]){background:#fff;color:#233A6B}
.v-scroll .opt,.v-emaki .opt,.v-goshuin .opt,.v-board .opt,.v-ink .rp-try .opt,.v-kintsugi .rp-try .opt{background:#F3EFE4;color:#22252F;border-color:#E3DDCF}
@media (max-width:560px){.gl .rule-nav{margin-bottom:0;padding-bottom:44px}.gl .rs-switch{margin-top:22px}}
/* lesson label: breathing room under the back link, Japanese and English the same visual size on one line */
.gl > .back + .gl-no{margin-top:24px}
.gl-no{align-items:center;gap:12px;font-size:.82rem}
.gl-no [lang="ja"]{font-family:var(--jp);font-weight:700;font-size:.95rem;letter-spacing:.1em;line-height:1}
html[lang="bn"] .gl-no{font-size:.9rem}

/* ===== rule pager: an unrolling hand scroll between the two buttons ===== */
.rule-pager{grid-template-columns:1fr auto 1fr;column-gap:18px}
.pscroll{display:flex;align-items:stretch;justify-self:center;filter:drop-shadow(0 8px 10px rgba(60,40,10,.12))}
.ps-rod{width:12px;border-radius:6px;background:linear-gradient(90deg,#5B3716,#8A5A2B 45%,#5B3716);position:relative;z-index:1;margin:-6px 0}
.ps-rod::before,.ps-rod::after{content:"";position:absolute;left:50%;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:#C8423A}
.ps-rod::before{top:-5px}.ps-rod::after{bottom:-5px}
.ps-paper{position:relative;overflow:hidden;background:linear-gradient(180deg,#FBF5E6,#F3E8CF);border-block:1px solid rgba(176,122,18,.35);
  box-shadow:inset 8px 0 8px -8px rgba(90,60,20,.35),inset -8px 0 8px -8px rgba(90,60,20,.35)}
.ps-in{padding:10px 22px 9px;display:flex;flex-direction:column;align-items:center;gap:3px;white-space:nowrap}
.ps-marks{list-style:none;margin:0;padding:0;display:flex;gap:4px}
.ps-marks button{width:30px;height:30px;border:0;background:none;border-radius:50%;cursor:pointer;font-family:var(--brush);font-size:1.15rem;line-height:1;color:#9A8F7C;display:grid;place-items:center;transition:color .2s,background .2s}
.ps-marks button:hover{color:#C8423A}
.ps-marks li.past button{color:#233A6B}
.ps-marks li.on button{background:#C8423A;color:#fff;box-shadow:0 0 0 3px rgba(200,66,58,.15)}
.ps-txt{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:#7A6E60}
html[lang="bn"] .ps-txt{letter-spacing:.02em;text-transform:none;font-size:.82rem}
/* elegant buttons either side */
.rule-pager .btn{border-radius:999px;padding-inline:18px;font-size:.95rem}
.rule-pager .btn [lang="ja"]{font-family:var(--brush);font-size:1.05em;letter-spacing:.04em}
@media (prefers-reduced-motion: no-preference){
  .ps-paper{animation:ps-unroll 1s cubic-bezier(.3,.7,.2,1) both}
  .ps-rod.l{animation:ps-rod-l 1s cubic-bezier(.3,.7,.2,1) both}
  .ps-rod.r{animation:ps-rod-r 1s cubic-bezier(.3,.7,.2,1) both}
  .ps-marks li.on button{animation:ps-pop .5s .8s cubic-bezier(.2,1.4,.4,1) both}
}
@keyframes ps-unroll{from{clip-path:inset(0 50% 0 50%)}to{clip-path:inset(0 0 0 0)}}
@keyframes ps-rod-l{from{transform:translateX(var(--ps-half,90px))}to{transform:none}}
@keyframes ps-rod-r{from{transform:translateX(calc(-1 * var(--ps-half,90px)))}to{transform:none}}
@keyframes ps-pop{from{transform:scale(.4)}to{transform:none}}
.v-ink .ps-paper,.v-kintsugi .ps-paper{}
@media (max-width:560px){
  .rule-pager{grid-template-columns:1fr 1fr;row-gap:14px}
  .pscroll{grid-column:1/-1;grid-row:1}
  .ps-marks button{width:28px;height:28px;font-size:1.05rem}
  .rule-pager .btn{padding-inline:14px;font-size:.9rem}
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .pscroll{filter:drop-shadow(0 8px 12px rgba(0,0,0,.4))}}
/* quieter pager scroll */
.pscroll{filter:none}
.ps-rod{width:5px;border-radius:3px;margin:-3px 0;background:#9C7B57;opacity:.75}
.ps-rod::before,.ps-rod::after{width:5px;height:5px;margin-left:-2.5px;background:#C8423A;opacity:.7}
.ps-rod::before{top:-3px}.ps-rod::after{bottom:-3px}
.ps-paper{background:rgba(251,245,230,.7);border-block:1px solid rgba(176,122,18,.18);box-shadow:none}
.ps-in{padding:6px 16px 5px;gap:1px}
.ps-marks{gap:2px}
.ps-marks button{width:24px;height:24px;font-size:.92rem;color:#B5AC9C;position:relative}
.ps-marks li.past button{color:#7D8AA8}
.ps-marks li.on button{background:none;box-shadow:none;color:#C8423A}
.ps-marks li.on button::after{content:"";position:absolute;left:50%;bottom:0;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:#C8423A}
.ps-txt{font-size:.66rem;letter-spacing:.16em;color:#9A8F7C}
@keyframes ps-pop{from{opacity:0}to{opacity:1}}
.rule-pager .btn{font-weight:500;font-size:.9rem;padding:8px 16px;border-width:1px}
.rule-pager .btn.alt{border-color:var(--line);color:var(--muted)}
.rule-pager .btn.alt:hover{color:var(--paper);border-color:var(--ink)}
.rule-pager .btn [lang="ja"]{font-family:var(--jp);font-size:.95em}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .ps-paper{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1)}:root:not([data-theme="light"]) .ps-marks button{color:#6C7290}:root:not([data-theme="light"]) .ps-marks li.past button{color:#AFC0FF}}
:root[data-theme="dark"] .ps-paper{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1)}:root[data-theme="dark"] .ps-marks button{color:#6C7290}:root[data-theme="dark"] .ps-marks li.past button{color:#AFC0FF}
.ps-marks button{height:30px;align-items:start;padding-top:2px}.ps-marks li.on button::after{bottom:1px}

/* ===== kanji / vocab / reading items ===== */
.nb-pat{color:var(--ink)}
.v-noren .nb-pat,.v-ink .nb-pat{color:#fff}.v-kintsugi .nb-pat{color:#FBF4E4}.v-goshuin .nb-pat,.v-scroll .nb-pat,.v-board .nb-pat,.v-emaki .nb-pat{color:#141414}
.kj-big{font-family:var(--brush);font-size:clamp(5.5rem,16vw,8.5rem);line-height:1;color:inherit}
.vb-big{font-family:var(--brush);font-size:clamp(2.8rem,8vw,4.2rem);line-height:1.4;color:inherit;letter-spacing:.06em}
.vb-big rt{font-family:var(--jp);font-size:.3em;letter-spacing:.2em;opacity:.75}
.i-kanji .nb-pat,.i-vocab .nb-pat{justify-content:center}
.v-note .i-kanji .nb-pat,.v-note .i-vocab .nb-pat,.v-note .i-read .nb-pat{margin-left:82px;display:flex}
.i-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:8px;margin:0 0 6px;padding:0}
.i-facts > div{border:1px solid rgba(128,128,128,.22);border-radius:10px;padding:8px 12px;text-align:center;background:rgba(128,128,128,.04)}
.i-facts dt{display:flex;justify-content:center;align-items:baseline;gap:6px;font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.7;margin:0 0 4px}
.i-facts dt .jp{font-family:var(--jp);color:var(--stamp);letter-spacing:.04em;text-transform:none;font-size:.8rem;opacity:1}
html[lang="bn"] .i-facts dt{letter-spacing:.02em;text-transform:none;font-size:.78rem}
.i-facts dd{margin:0;font-size:1rem;font-weight:600}
.i-facts dt{flex-wrap:wrap;row-gap:1px}.i-facts dt .jp{white-space:nowrap}
.i-facts dd[lang="ja"]{font-family:var(--jp);font-size:1.12rem;letter-spacing:.04em}
.i-facts dd small{display:block;font-weight:400;font-size:.74rem;opacity:.75}
.i-facts dd b{font-family:var(--brush);font-weight:400;font-size:1.35rem}
.v-note .i-facts,.v-scroll .i-facts,.v-goshuin .i-facts,.v-board .i-facts{margin-left:82px}
@media (max-width:640px){.i-facts{grid-template-columns:repeat(2,minmax(0,1fr))}.v-note .i-facts,.v-scroll .i-facts,.v-goshuin .i-facts,.v-board .i-facts,.v-note .i-kanji .nb-pat,.v-note .i-vocab .nb-pat,.v-note .i-read .nb-pat{margin-left:0}}
.i-parts{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 10px!important}
.i-parts span{display:inline-flex;align-items:baseline;gap:8px;padding:3px 12px 3px 6px;border:1px solid rgba(128,128,128,.25);border-radius:999px;font-size:.88rem}
.i-parts b{font-family:var(--brush);font-weight:400;font-size:1.3rem;color:var(--stamp)}
.i-parts i{font-style:normal;opacity:.5}
.i-evo{display:flex;align-items:center;gap:16px;margin:2px 0 12px}
.i-evo svg{width:70px;height:70px;border:1px dashed rgba(128,128,128,.35);border-radius:10px;padding:6px;background:rgba(128,128,128,.04)}
.i-evo svg path,.i-evo svg circle{fill:none;stroke:currentColor;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;opacity:.75}
.ev-arr{font-size:1.3rem;opacity:.5}
.ev-k{font-family:var(--brush);font-size:3.4rem;line-height:1}
.i-sim{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.i-sim li{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;padding:8px 14px 8px 10px;border:1px solid rgba(128,128,128,.25);border-radius:12px;min-width:180px;flex:1 1 200px;max-width:320px}
.i-sim b{grid-row:span 2;font-family:var(--brush);font-weight:400;font-size:2.2rem;line-height:1}
.i-sim span{font-family:var(--jp);font-size:.9rem;opacity:.85}
.i-sim small{font-size:.84rem;opacity:.75;line-height:1.4}
.i-ctx{display:grid;grid-template-columns:1fr 1fr;gap:16px 26px}
@media (max-width:640px){.i-ctx{grid-template-columns:1fr}}
.i-sub{display:flex;gap:8px;align-items:baseline;margin:0 0 6px!important;font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.75}
.i-sub .jp{font-family:var(--jp);color:var(--stamp);text-transform:none;letter-spacing:.04em;font-size:.85rem;opacity:1}
html[lang="bn"] .i-sub{text-transform:none;letter-spacing:.02em;font-size:.85rem}
.i-words{list-style:none;margin:0 0 6px;padding:0}
.i-words li{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:7px 0;border-bottom:1px dashed rgba(128,128,128,.25)}
.i-words li:last-child{border-bottom:0}
.iw-w{font-family:var(--jp);font-size:1.12rem}
.iw-w rt{font-size:.5em;opacity:.7}
.iw-m{font-size:.88rem;opacity:.8;text-align:right}
.rp-ctx .nb-exs{margin-top:10px}
/* reading */
.i-read .rc-name small{font-family:var(--body);font-style:normal;font-size:.55em;opacity:.7;margin-left:6px}
.i-read .rc-name rt{font-size:.4em}
.rd-tog{display:inline-flex;gap:6px}
.rd-tog [lang="ja"]{font-family:var(--jp)}
.i-read .nb-pat{justify-content:center}
.rd-text{display:block;max-width:640px;margin:0 auto;font-family:var(--jp);font-size:clamp(1.15rem,2.6vw,1.4rem);line-height:2.3;letter-spacing:.06em;text-align:left;font-feature-settings:"palt"}
.rd-text rt{font-size:.5em;letter-spacing:.1em;opacity:.75}
.rd-text.v{writing-mode:vertical-rl;height:300px;max-width:100%;overflow-x:auto;line-height:2.2;margin:0 auto;padding:4px 6px;scrollbar-width:thin}
.v-mist .rd-text,.v-noren .rd-text,.v-ink .rd-text,.v-kintsugi .rd-text,.v-scroll .rd-text,.v-emaki .rd-text,.v-goshuin .rd-text,.v-board .rd-text,.v-branch .rd-text{font-family:var(--jp)}
.v-noren .i-read .nb-pat,.v-ink .i-read .nb-pat{padding-inline:28px}
.rd-kana{font-family:var(--jp);font-size:1.05rem;line-height:2;letter-spacing:.04em}
a.rel-p{text-decoration:none;color:inherit;border-bottom-color:var(--stamp)}
a.rel-p:hover{border-color:var(--stamp)}
/* branch: centre pattern bubble should hold the big kanji / text */
.v-branch .i-read .nb-pat,.v-branch .i-kanji .nb-pat,.v-branch .i-vocab .nb-pat{border-radius:28px}
.v-branch .i-facts{position:relative;z-index:1;background:var(--paper);max-width:680px;margin:0 auto 10px}
/* pager: back · scroll · next on one line at every width */
.pg-short{display:none}
@media (max-width:560px){
  .rule-pager{grid-template-columns:auto 1fr auto;column-gap:8px;row-gap:0}
  .pscroll{grid-column:auto;grid-row:auto}
  .rule-pager .btn{padding:7px 11px;font-size:.82rem;white-space:nowrap}
  .rule-pager .pg-nx{display:none}.rule-pager .pg-short{display:inline}
  .ps-in{padding:5px 8px 4px}.ps-marks{gap:0}.ps-marks button{width:20px;height:24px;font-size:.8rem}
  .ps-txt{font-size:.56rem;letter-spacing:.08em}
}
@media (max-width:380px){.ps-txt{display:none}.ps-marks button{width:18px}.rule-pager .btn{padding:6px 9px}}

/* audit fixes */
ruby{ruby-align:center} /* 勉強 stays together when its reading is wider */
.rd-text rt{color:inherit} /* readings stay readable on the dark looks */
.v-noren .rd-text{position:relative;z-index:1}
/* ===== About: seal card, story, road so far, ink panel ===== */
.ab-top .st-h1{max-width:14ch}
.ab-card{margin:0;justify-self:center;width:100%;max-width:380px;background:var(--sheet);border:1px solid var(--line);border-radius:6px;padding:30px 30px 24px;text-align:center;box-shadow:0 1px 0 var(--line),0 18px 40px -28px rgba(20,27,61,.35)}
.ab-card img{display:block;margin:0 auto 16px}
.ab-card figcaption b{display:block;font-family:var(--display);font-size:1.5rem;font-weight:600;color:var(--ink)}
.ab-card figcaption span{display:block;margin-top:4px;color:var(--muted);font-size:.95rem}
.ab-card ul{list-style:none;margin:20px 0 0;padding:16px 0 0;border-top:1px solid var(--line);text-align:left;display:grid;gap:10px}
.ab-card li{display:grid;grid-template-columns:3.2em 1fr;gap:12px;align-items:baseline;font-size:.95rem;color:var(--text);line-height:1.5}
.ab-card li .jp{font-family:var(--jp);color:var(--stamp);font-size:.85rem;letter-spacing:.05em}
.ab-story{max-width:680px}
.ab-story > p:not(.sec-num){margin:0 0 18px;font-size:1.06rem;line-height:1.95}
.ab-story > p:last-child{margin-bottom:0}
.ab-tl{list-style:none;margin:0 auto;padding:0;max-width:720px;position:relative}
.ab-tl::before{content:"";position:absolute;left:calc(4.5rem + 17px);top:10px;bottom:10px;width:2px;background:var(--grid)}
.ab-tl li{display:grid;grid-template-columns:4.5rem 1fr;column-gap:40px;padding:0 0 28px;position:relative}
.ab-tl li:last-child{padding-bottom:0}
.ab-tl li::before{content:"";position:absolute;left:calc(4.5rem + 12px);top:9px;width:12px;height:12px;border-radius:50%;background:var(--paper);border:2px solid var(--stamp)}
.ab-y{text-align:right;font-family:var(--display);font-weight:600;font-size:1.3rem;line-height:1.3;color:var(--stamp)}
.ab-tl h3{margin:0 0 6px;font-family:var(--head);font-size:1.1rem;color:var(--ink);display:flex;align-items:baseline;gap:10px}
.ab-tl h3 .jp{font-family:var(--brush);font-weight:400;color:var(--muted);font-size:1.05rem}
.ab-tl p{margin:0;color:var(--muted);line-height:1.75}
@media (max-width:560px){.ab-tl::before{left:calc(3rem + 11px)}.ab-tl li{grid-template-columns:3rem 1fr;column-gap:28px}.ab-tl li::before{left:calc(3rem + 6px)}.ab-y{font-size:1.1rem}}
.ab-ink{display:grid;grid-template-columns:auto 1fr;gap:36px;align-items:center;max-width:860px;margin:0 auto 28px;background:var(--navy);color:var(--on-navy-2);border:1px solid var(--navy-line);border-radius:6px;padding:34px 40px}
.ab-wa{display:flex;flex-direction:column;align-items:center;justify-content:center;width:120px;height:120px;border:1.5px solid var(--navy-line);border-radius:50%}
.ab-wa b{font-family:var(--jp);font-weight:500;font-size:3.6rem;line-height:1;color:var(--on-navy)}
.ab-wa span{margin-top:4px;font-size:.85rem;letter-spacing:.2em;color:#F07C84}
.ab-ink p{margin:0;line-height:1.85}
.ab-ink .ab-ink-k{font-family:var(--display);font-size:1.4rem;color:var(--on-navy);margin-bottom:10px}
html[lang="bn"] .ab-ink .ab-ink-k{font-family:var(--head);font-size:1.15rem}
.ab-pts{max-width:860px;margin:0 auto}
@media (max-width:700px){.ab-ink{grid-template-columns:1fr;justify-items:center;padding:28px 22px;gap:20px}.ab-ink > div:last-child{text-align:left}.ab-wa{width:96px;height:96px}.ab-wa b{font-size:2.8rem}}
.ab .about{max-width:760px}
.ab .about > p{text-align:center;max-width:56ch;margin-inline:auto}
.ab-soc{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:26px}
.ab-soc a{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border:1px solid var(--line);border-radius:999px;background:var(--sheet);color:var(--ink);text-decoration:none;font-size:.92rem;font-weight:600}
.ab-soc a[hidden]{display:none}
.ab-soc a:hover{border-color:var(--ink)}
.ab-soc svg{width:18px;height:18px;fill:currentColor}
/* ===== FAQ: topic index, question cards ===== */
.fq-top .st-h1{max-width:12ch}
.fq-idx{justify-self:center;width:100%;max-width:380px;background:var(--sheet);border:1px solid var(--line);border-radius:6px;padding:10px 0;box-shadow:0 1px 0 var(--line),0 18px 40px -28px rgba(20,27,61,.35)}
.fq-idx button{display:grid;grid-template-columns:2.4em 1fr auto;align-items:center;gap:12px;width:100%;padding:13px 24px;background:none;border:0;border-bottom:1px solid var(--line);font:inherit;color:var(--ink);text-align:left;cursor:pointer}
.fq-idx button:last-child{border-bottom:0}
.fq-idx button:hover span:nth-child(2){color:var(--stamp)}
.fq-idx .jp{font-family:var(--brush);font-size:1.5rem;line-height:1;color:var(--stamp);text-align:center}
.fq-idx small{font-size:.8rem;color:var(--muted);min-width:1.8em;text-align:center;border:1px solid var(--line);border-radius:999px;padding:1px 6px}
.bands.fq > section[id]{scroll-margin-top:70px}
.fq-list{max-width:760px;margin:0 auto;background:var(--sheet);border:1px solid var(--line);border-radius:4px}
.fq-q{border-bottom:1px solid var(--line);padding:0}
.fq-q:last-child{border-bottom:0}
.fq-q summary{display:grid;grid-template-columns:2em 1fr 18px;gap:14px;align-items:baseline;padding:20px 26px;list-style:none;font-weight:600;color:var(--ink)}
.fq-q summary::-webkit-details-marker{display:none}
.fq-q summary::after{content:"";width:9px;height:9px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:translateY(-3px) rotate(45deg);transition:transform .2s ease;justify-self:center}
.fq-q[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.fq-q summary:hover > span:nth-child(2){color:var(--stamp)}
.fq-q .jp{font-family:var(--jp);font-weight:500;color:var(--stamp);text-align:center}
.fq-q p{display:grid;grid-template-columns:2em 1fr;gap:14px;margin:0;padding:0 calc(26px + 32px) 22px 26px;color:var(--text);line-height:1.8}
.fq-q p .jp{color:var(--muted)}
.fq-q p a{color:var(--stamp)}
@media (max-width:560px){.fq-q summary{padding:16px 16px;gap:10px;grid-template-columns:1.6em 1fr 14px}.fq-q p{padding:0 16px 18px;gap:10px;grid-template-columns:1.6em 1fr}.fq-idx button{padding:12px 18px}}