/* ことば帖: a thread-bound Japanese dictionary, wabi-sabi (dict-ja.html).
   The book is laid out in fixed "book units" (a page is 540 × 740) and the frame is scaled to fit. */
:root {
  --wall: #d7cfc1;
  --wall-hi: #e6e0d4;
  --wall-lo: #c3b8a6;
  --washi: #efe6d3;
  --washi-2: #e6dbc4;
  --sumi: #23201c;
  --sumi-2: #5a534a;
  --sumi-3: #8d8476;
  --bengara: #9b3a2a;
  --ai: #2e3b52;
  --ochre: #a98443;
  --moss: #6a7048;
  --shikon: #4a3346;   /* 紫紺, the rude words */
  --momo: #b3606d;     /* 桃, the sweet ones */
  --W: 540px;
  --H: 740px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
body {
  /* a clay-plaster wall (tsuchikabe): mottled, with flecks of straw, lit softly from the upper left */
  background-color: var(--wall);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='s'%3E%3CfeTurbulence stitchTiles='stitch' type='fractalNoise' baseFrequency='.9 .04' numOctaves='1' seed='8'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .45 0 0 0 0 .28 0 0 0 2.4 -1.95'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='m'%3E%3CfeTurbulence stitchTiles='stitch' type='fractalNoise' baseFrequency='.006' numOctaves='4' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .36 0 0 0 0 .27 0 0 0 .55 -.12'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence stitchTiles='stitch' type='fractalNoise' baseFrequency='.8' numOctaves='2' seed='1'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .26 0 0 0 0 .2 0 0 0 .35 -.12'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),
    radial-gradient(70% 60% at 22% 12%, var(--wall-hi), transparent 70%),
    radial-gradient(120% 90% at 50% 50%, transparent 55%, var(--wall-lo) 100%);
  background-size: 420px 420px, cover, 180px 180px, auto, auto;
  background-repeat: repeat, no-repeat, repeat, no-repeat, no-repeat;
  background-attachment: fixed;
  color: var(--sumi);
  font-family: 'Shippori Mincho', serif;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}


/* ---------------------------------------------------------------- the book */
.frame { position: fixed; left: 50%; top: 50%; width: calc(var(--W) * 2); height: var(--H); transform-origin: 50% 50%; z-index: 10; }
.frame.single { width: var(--W); clip-path: inset(-40px 0 -220px 0); touch-action: none; }
.book { position: absolute; left: 0; top: 0; width: calc(var(--W) * 2); height: var(--H); perspective: 3800px; }
.block { position: absolute; top: 0; height: 100%; width: var(--W); border-radius: 3px; background: var(--washi-2); }
.block.l { left: 0; }
.block.r { left: var(--W); }

.page, .face {
  position: absolute; top: 0; width: var(--W); height: var(--H); overflow: hidden;
  background-color: var(--washi);
}
.slot-l { left: 0; }
.slot-r { left: var(--W); }
.page::before, .face::before { /* a whisper of grain */
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: .5;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .25 0 0 0 0 .2 0 0 0 .5 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
.pg-r::after, .pg-l::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 20; }
.pg-r::after { background: linear-gradient(90deg, rgba(60,40,20,.12), transparent 8%); }
.pg-l::after { background: linear-gradient(270deg, rgba(60,40,20,.12), transparent 8%); }
.page > *, .face > * { position: absolute; z-index: 1; }

.gutter { position: absolute; left: calc(var(--W) - 1px); width: 2px; top: 0; height: 100%; pointer-events: none; z-index: 60; background: rgba(40,25,10,.16); }
.frame.closed .gutter { display: none; }

/* leaves (pages in mid-turn) */
.leaf { position: absolute; left: 0; top: 0; width: var(--W); height: var(--H); transform-origin: 100% 50%; transform-style: preserve-3d; z-index: 100; }
.leaf .face { left: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.leaf .face.back { transform: rotateY(180deg); }
.leaf .shade { position: absolute; inset: 0; z-index: 30; pointer-events: none; opacity: 0; }
.leaf .front .shade { background: linear-gradient(270deg, rgba(40,25,10,.55), rgba(40,25,10,.15) 40%, transparent); }
.leaf .back .shade { background: linear-gradient(90deg, rgba(40,25,10,.45), rgba(40,25,10,.1) 40%, transparent); }

/* ---------------------------------------------------------------- printed furniture */
.kyo { inset: 52px 48px 60px; border: 1px solid rgba(35,32,28,.25); }
.folio { bottom: 22px; font: 400 15px 'Shippori Mincho', serif; color: var(--sumi-2); letter-spacing: .1em; }
.pg-r .folio { right: 52px; } .pg-l .folio { left: 52px; }
.folio small { font: italic 12px 'EB Garamond', serif; color: var(--sumi-3); margin-left: 6px; }
.hashira { top: 66px; right: 62px; writing-mode: vertical-rl; font: 600 14px/1 'Shippori Mincho', serif; letter-spacing: .32em; color: var(--sumi-2); }
.hashira b { color: var(--bengara); font-weight: 800; }
.v { writing-mode: vertical-rl; }

.seal { display: grid; place-items: center; color: var(--washi); background: var(--bengara); font: 800 26px/1 'Shippori Mincho', serif; filter: url(#stamp); }
.seal.sq { width: 56px; height: 56px; border-radius: 4px; box-shadow: inset 0 0 0 3px var(--bengara), inset 0 0 0 5px var(--washi); }
.seal.round { width: 78px; height: 78px; border-radius: 50%; background: none; color: var(--bengara); border: 3px solid var(--bengara); font-size: 24px; letter-spacing: .05em; writing-mode: vertical-rl; box-shadow: inset 0 0 0 3px var(--washi), inset 0 0 0 4.5px var(--bengara); }
.seal.small { width: 26px; height: 26px; font-size: 14px; border-radius: 3px; box-shadow: none; }

/* ---------------------------------------------------------------- endpaper, cover */
.endpaper { inset: 0; }
.endpaper svg { width: 100%; height: 100%; }
.cover { inset: 0; background: var(--ai); overflow: hidden; }
.cover-cloth { inset: 0; opacity: .9;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.08) 0 1px, transparent 1px 3px),
    radial-gradient(70% 50% at 40% 35%, rgba(90,110,150,.35), transparent 70%),
    radial-gradient(40% 30% at 75% 80%, rgba(0,0,0,.25), transparent 70%); }
.daisen { top: 58px; left: 56px; width: 92px; height: 330px; background: var(--washi); box-shadow: 0 1px 3px rgba(0,0,0,.4); display: grid; place-items: center; }
.daisen::before { content: ''; position: absolute; inset: 6px; border: 1.5px solid rgba(35,32,28,.7); outline: 1px solid rgba(35,32,28,.45); outline-offset: -4px; }
.daisen h1 { margin: 0; writing-mode: vertical-rl; font: 400 50px/1 'Yuji Syuku', serif; letter-spacing: .12em; filter: url(#brush); }
.daisen h1 small { font-size: 22px; letter-spacing: 0; margin-top: 14px; color: var(--sumi-2); }
.binding { right: 0; top: 0; width: 60px; height: 100%; }
.cover-foot { left: 56px; bottom: 54px; font: italic 15px 'EB Garamond', serif; color: rgba(239,230,211,.6); letter-spacing: .04em; }
.cover-seal { left: 162px; top: 66px; }

/* ---------------------------------------------------------------- title page */
.t-title { right: 140px; top: 120px; margin: 0; writing-mode: vertical-rl; font: 400 92px/1 'Yuji Syuku', serif; letter-spacing: .1em; filter: url(#brush); }
.t-sub { right: 270px; top: 136px; margin: 0; writing-mode: vertical-rl; font: 600 22px/1.4 'Shippori Mincho', serif; letter-spacing: .4em; color: var(--sumi-2); }
.t-enso { right: 60px; top: 72px; width: 300px; height: 300px; opacity: .9; }
.t-seal { right: 280px; top: 420px; }
.t-how { left: 76px; right: 76px; bottom: 60px; text-align: center; font: 400 14px/1.6 'Klee One', serif; color: var(--sumi-3); }
.t-how b { color: var(--bengara); font-weight: 600; }

/* ---------------------------------------------------------------- contents */
.toc { top: 82px; bottom: 86px; right: 52px; left: 58px; writing-mode: vertical-rl; display: flex; flex-direction: column; }
.toc .ttl { font: 400 42px/1 'Yuji Syuku', serif; margin-left: 8px; filter: url(#brush); }
.toc .sec { font: 800 16px/1 'Shippori Mincho', serif; letter-spacing: .25em; color: var(--bengara); margin: 0 2px 0 8px; display: flex; align-items: center; gap: 10px; }
.toc .sec i { font: italic 13px 'EB Garamond', serif; letter-spacing: .04em; color: var(--sumi-3); }
.toc .ent { display: flex; align-items: center; width: 20px; font: 600 16px/1 'Shippori Mincho', serif; letter-spacing: .14em; cursor: pointer; padding: 0 2px; border-radius: 2px; }
.toc .ent:hover { background: rgba(155,58,42,.08); color: var(--bengara); }
.toc .ent .dots { flex: 1; margin: 10px 0; border-right: 2px dotted rgba(35,32,28,.35); align-self: center; height: auto; width: 0; }
.toc .ent .pn { font-size: 15px; font-weight: 400; color: var(--sumi-2); }
.toc .ent .seal.small { margin-bottom: 8px; writing-mode: horizontal-tb; }
.toc-foot { left: 74px; right: 74px; bottom: 30px; text-align: center; font: 400 14px 'Klee One', serif; color: var(--sumi-3); }
.toc-foot b { color: var(--bengara); font-weight: 600; }

/* ---------------------------------------------------------------- headword page */
.hw-enso { right: 96px; top: 74px; width: 250px; height: 250px; opacity: .85; }
.hw { right: 150px; top: 112px; margin: 0; writing-mode: vertical-rl; font: 400 96px/1 'Yuji Syuku', serif; letter-spacing: .06em; white-space: nowrap; }
.hw span { display: inline-block; }
.hw-line { right: 128px; top: 112px; width: 3px; height: 0; background: var(--bengara); border-radius: 2px; opacity: .85; }
.kanji-form { right: 300px; top: 120px; writing-mode: vertical-rl; font: 600 30px/1 'Shippori Mincho', serif; letter-spacing: .2em; color: var(--sumi-2); }
.kanji-form small { font-size: 14px; color: var(--sumi-3); letter-spacing: .3em; margin-bottom: 14px; display: inline-block; }
.hw-seal { left: 82px; top: 92px; }
.gloss { left: 80px; bottom: 98px; width: 240px; }
.gloss .ro { display: block; font: italic 17px 'EB Garamond', serif; color: var(--sumi-3); letter-spacing: .06em; }
.gloss .en { display: block; font: 500 30px/1.15 'EB Garamond', serif; color: var(--sumi); margin-top: 4px; }

/* ---------------------------------------------------------------- notes page */
.notes { top: 76px; left: 80px; right: 74px; bottom: 82px; display: flex; flex-direction: column; gap: 18px; }
.notes > * { position: relative; }
.n-head { display: flex; align-items: baseline; justify-content: space-between; border-bottom: 1px solid rgba(35,32,28,.3); padding-bottom: 8px; }
.n-head .w { font: 600 22px 'Shippori Mincho', serif; letter-spacing: .1em; }
.n-head .no { font: italic 14px 'EB Garamond', serif; color: var(--sumi-3); }
.lbl { display: flex; align-items: baseline; gap: 10px; margin: 0 0 8px; font: italic 14px 'EB Garamond', serif; color: var(--sumi-3); letter-spacing: .04em; font-weight: 400; }
.lbl b { font: 800 16px 'Shippori Mincho', serif; color: var(--bengara); font-style: normal; }
.genko { display: flex; gap: 0; }
.cell { width: 50px; text-align: center; }
.cell .sq { position: relative; height: 50px; display: grid; place-items: center; border: 1px solid rgba(155,58,42,.45); margin-left: -1px; font: 600 27px/1 'Shippori Mincho', serif; transition: color .15s; }
.cell .sq::before { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: radial-gradient(circle, rgba(155,58,42,.9) 40%, rgba(155,58,42,.55) 62%, transparent 72%); transform: scale(0); transition: transform .18s ease-out; filter: url(#brush); z-index: -1; }
.cell.on .sq { color: var(--washi); }
.cell.on .sq::before { transform: scale(1.15); }
.cell i { display: block; margin-top: 5px; font: 400 13px 'Klee One', serif; font-style: normal; color: var(--sumi-2); }
.whole .cell .sq { color: var(--bengara); }
.hand { margin: 0; font: 400 21px/1.3 'Klee One', serif; color: var(--sumi); }
.mean { margin: 0; font: 500 26px/1.2 'EB Garamond', serif; }
.ex-ja { margin: 0; font: 600 21px/1.5 'Shippori Mincho', serif; letter-spacing: .06em; transition: color .2s; }
.ex-ja.on { color: var(--bengara); }
.ex-ro { margin: 2px 0 0; font: italic 15px 'EB Garamond', serif; color: var(--sumi-3); }
.ex-en { margin: 0; font: 400 16px 'EB Garamond', serif; color: var(--sumi-2); }
.act { appearance: none; background: none; border: 0; padding: 4px 2px; cursor: pointer; color: var(--sumi); font: 600 18px 'Shippori Mincho', serif; letter-spacing: .12em; display: inline-flex; align-items: baseline; gap: 8px; border-bottom: 1.5px solid rgba(35,32,28,.55); }
.act i { font: italic 14px 'EB Garamond', serif; letter-spacing: .02em; color: var(--sumi-3); }
.act:hover { color: var(--bengara); border-color: var(--bengara); }
.act .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; align-self: center; }
.act.rec { color: var(--bengara); border-color: var(--bengara); }
.act.rec .dot { animation: breathe 1s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.7); opacity: .4; } }
.ex-act { position: absolute; right: 0; top: -2px; font-size: 15px; }
.practice .row { display: flex; gap: 26px; align-items: center; }
.heard { min-height: 28px; margin-top: 10px; font-size: 18px; color: var(--sumi-2); }
.heard .ok { color: var(--bengara); }
.pass-seal { right: 6px; bottom: -6px; opacity: 0; transform: rotate(-12deg); }
.pass-seal.shown { opacity: .9; }
.ripple { position: absolute; border: 1.5px solid rgba(155,58,42,.5); border-radius: 50%; pointer-events: none; }

/* ---------------------------------------------------------------- colophon */
.colo { top: 120px; right: 110px; writing-mode: vertical-rl; font: 400 18px/2.4 'Shippori Mincho', serif; letter-spacing: .18em; color: var(--sumi-2); }
.colo b { font: 400 34px/2 'Yuji Syuku', serif; color: var(--sumi); letter-spacing: .1em; }
.colo-seal { right: 120px; bottom: 120px; }
.colo-box { top: 110px; bottom: 110px; right: 80px; width: 330px; border: 1px solid rgba(35,32,28,.5); }

/* ---------------------------------------------------------------- thumb index */
.tabs { position: absolute; left: -30px; top: 90px; display: flex; flex-direction: column; gap: 14px; z-index: -1; }
.tab { appearance: none; width: 42px; height: 64px; border: 0; border-radius: 4px 0 0 4px; padding: 0 12px 0 0; cursor: pointer; color: var(--washi); font: 800 17px/1 'Shippori Mincho', serif; writing-mode: vertical-rl; display: grid; place-items: center; box-shadow: inset -6px 0 8px rgba(0,0,0,.18); transition: transform .2s; opacity: .9; }
.tab:hover, .tab.on { transform: translateX(-6px); opacity: 1; }
.frame.closed .tabs, .frame.single .tabs { display: none; }

/* ---------------------------------------------------------------- the bookmark ribbon (栞) */
.ribbon { position: absolute; left: 0; top: 0; overflow: visible; z-index: 70; pointer-events: none; filter: drop-shadow(1px 2px 1.5px rgba(0,0,0,.35)); }
.ribbon .band { pointer-events: visibleStroke; cursor: pointer; }
.ribbon .hit { pointer-events: all; cursor: pointer; }
.markbtn { position: fixed; right: 18px; bottom: 16px; z-index: 20; appearance: none; background: none; border: 1px solid rgba(35,32,28,.22); border-radius: 999px; color: rgba(35,32,28,.7); cursor: pointer; padding: 7px 14px; font: 500 15px 'EB Garamond', serif; letter-spacing: .04em; display: flex; gap: 8px; align-items: baseline; transition: color .2s, border-color .2s; }
.markbtn b { font: 600 15px 'Shippori Mincho', serif; color: var(--bengara); }
.markbtn:hover { color: var(--sumi); border-color: rgba(35,32,28,.55); }
.markbtn[hidden], .tocbtn { display: none; }
.markbtn .t { margin-left: 0; }
.markbtn.on { border-color: rgba(155,58,42,.5); }

/* ---------------------------------------------------------------- around the book */
.branch { position: fixed; top: -40px; right: -30px; width: min(52vw, 640px); pointer-events: none; z-index: 1; opacity: .11; filter: blur(4px); transform-origin: 100% 0; }
.shadows { position: fixed; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.shadows svg { position: absolute; fill: #2a2118; stroke: #2a2118; }
.shadows .shoji { left: -4vw; top: -8vh; width: min(40vw, 480px); fill: none; opacity: .085; filter: blur(3.5px); transform: skewX(-10deg) rotate(2deg); transform-origin: 0 0; }
.shadows .ume { inset: 0; width: 100%; height: 100%; opacity: .1; filter: blur(4.5px); transform-origin: 100% 30%; }
.shadows .petal { position: absolute; width: 18px; height: 14px; border-radius: 60% 40% 60% 40%; background: #2a2118; opacity: 0; filter: blur(1.6px); }
.nav { position: fixed; top: 50%; z-index: 20; appearance: none; background: none; border: 1px solid rgba(35,32,28,.22); border-radius: 999px; color: rgba(35,32,28,.7); cursor: pointer; display: flex; align-items: center; gap: 8px; transform: translateY(-50%); transition: color .2s, border-color .2s; padding: 9px 16px; font: 500 16px 'EB Garamond', serif; letter-spacing: .06em; }
.nav:hover { color: var(--sumi); border-color: rgba(35,32,28,.55); }
.nav .a { font-size: 22px; line-height: 1; }
.nav.fwd { left: 18px; } .nav.back { right: 18px; }
.nav[disabled] { opacity: .25; cursor: default; }
.hint { position: fixed; left: 0; right: 0; bottom: 30px; margin: 0; text-align: center; z-index: 20; font: italic 15px 'EB Garamond', serif; color: rgba(35,32,28,.5); letter-spacing: .04em; }
.credit { position: fixed; left: 0; right: 0; bottom: 8px; margin: 0; text-align: center; z-index: 20; font: italic 13px 'EB Garamond', serif; color: rgba(35,32,28,.5); letter-spacing: .04em; pointer-events: none; }
.credit a { color: var(--bengara); text-decoration: none; border-bottom: 1px solid rgba(155,58,42,.35); pointer-events: auto; }
.credit a:hover { border-color: var(--bengara); }
.hint span { font: 400 15px 'Klee One', serif; font-style: normal; }

/* ---------------------------------------------------------------- one page at a time (phones, portrait) */
/* the page grows taller to fill the phone (JS sets --H), and the notes get bigger type */
.frame.single.tall .notes { zoom: 1.2; top: 58px; left: 58px; right: 52px; bottom: 60px; gap: 15px; }
/* the headword column sits lower on a tall page instead of leaving a gap above the gloss */
.frame.tall .headword .hw, .frame.tall .headword .hw-line, .frame.tall .headword .kanji-form, .frame.tall .headword .enso-wrap { translate: 0 var(--dy, 0px); }
body.single .credit { bottom: auto; top: calc(10px + env(safe-area-inset-top)); font-size: 12px; }
body.single .hint { bottom: calc(76px + env(safe-area-inset-bottom)); font-size: 14px; }
/* a bottom bar: ‹ Next · 目次 · 栞 · Back › */
body.single .nav, body.single .tocbtn, body.single .markbtn {
  top: auto; bottom: calc(14px + env(safe-area-inset-bottom)); transform: none; height: 44px; padding: 0 16px;
  background: rgba(239,230,211,.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
body.single .nav.fwd { left: 12px; } body.single .nav.back { right: 12px; }
body.single .tocbtn:not([hidden]) {
  display: grid; place-items: center; position: fixed; z-index: 20; left: 50%; margin-left: -58px; width: 54px; appearance: none;
  border: 1px solid rgba(35,32,28,.22); border-radius: 999px; color: rgba(35,32,28,.75); font: 600 15px 'Shippori Mincho', serif; letter-spacing: .1em; padding: 0; cursor: pointer;
}
body.single .markbtn { left: 50%; right: auto; margin-left: 4px; width: 54px; justify-content: center; padding: 0; align-items: center; }
body.single .markbtn .t { display: none; }
body.single .markbtn b { font-size: 17px; }
body.single .markbtn.on { background: var(--bengara); border-color: var(--bengara); }
body.single .markbtn.on b { color: var(--washi); }
@media (max-width: 360px) { body.single .nav { padding: 0 12px; font-size: 15px; } }

/* a page whose ink hasn't settled yet (inkIn() reveals it) */
.pre .hw span, .pre .t-title span, .pre .hw-seal, .pre .t-seal, .pre .colo-seal, .pre .cell, .pre .ent { opacity: 0; }
.pre .enso { visibility: hidden; }
.enso-wrap { opacity: .62; }
.enso-wrap svg { display: block; width: 100%; height: 100%; }
.cover > * { position: absolute; }

/* back to the bookshelf (shelf.html), top-left */
.shelf-link { position: fixed; top: 14px; left: 18px; z-index: 30; display: inline-flex; align-items: center; gap: 6px; padding: 5px 13px 6px; border: 1px solid rgba(30,26,22,.22); border-radius: 999px; color: rgba(30,26,22,.7); text-decoration: none; font: 500 15px 'EB Garamond', serif; letter-spacing: .05em; transition: color .2s, border-color .2s; }
.shelf-link .a { font-size: 19px; line-height: 1; }
.shelf-link:hover { color: rgba(30,26,22,1); border-color: rgba(30,26,22,.55); }
body.single .shelf-link { top: calc(6px + env(safe-area-inset-top)); left: 10px; padding: 3px 10px 4px; font-size: 13px; background: rgba(255,255,255,.35); }
body.single .credit { left: 80px; right: 12px; text-align: right; }

/* no mic (window.NO_MIC, a static deploy): no say-it button, no R hint */
.no-mic .act.say, .no-mic .mic-only { display: none; }

/* the rude and sweet words: how it is said, brushed in the section colour */
.feel { left: 80px; bottom: 200px; width: 190px; display: flex; flex-direction: column; gap: 6px; }
.feel b { font: 400 34px/1 'Yuji Syuku', serif; color: var(--c); filter: url(#brush); }
.feel i { font: italic 17px 'EB Garamond', serif; color: var(--sumi-2); letter-spacing: .03em; }
.ex-mood { margin: 2px 0 2px; font: italic 13.5px/1.3 'EB Garamond', serif; color: var(--sumi-3); }