/* したがきのミ— 見た目
   design/画面案.html（Designer作 2026-09-18）から、そのまま取り出したもの。
   色・角丸・余白は したがきのタネ（build.py / mock_Y1-1）を踏襲している。 */
/* 難しさの向きが、ふつうの教材と逆。
     いちばん下＝じぶんで書く（土）／いちばん上＝5つからえらぶ
   だから「かたちを下げる」は負けではなく、土に戻るだけ。
   画面に「段」「レベル」という上下の言葉を出さないこと（design/文言案.md §0）。 */
:root{
  --bg:#fbf6ea; --card:#ffffff; --ink:#26302b; --mut:#6b726d; --line:#e7dfcd;
  --acc:#2f6f4f; --acc-2:#e2efe7; --acc-ink:#ffffff;
  --ask:#7a4fa3; --ask-2:#f1e9fa;
  --sun:#f2b233; --sun-2:#fff1cf; --sun-3:#fde8b8;
  --soil:#b98a4f; --soil-2:#f0e3d0;
  --fs:19px;
  --head:"Zen Maru Gothic","Hiragino Maru Gothic ProN","BIZ UDPGothic",system-ui,sans-serif;
  --body:"Noto Sans JP","Hiragino Sans","Yu Gothic UI",system-ui,sans-serif;
  /* 声を送る（右端のタブ）。下のボタンの帯にかぶらない高さに出す */
  --vtab-bg:var(--acc); --vtab-fg:var(--acc-ink); --vtab-bottom:120px;
}
html[data-th="white"]{--bg:#ffffff;--line:#e3e5ea;--soil-2:#f2efe9}
html[data-th="dark"]{--bg:#171a18;--card:#222723;--ink:#eef1ec;--mut:#a9b0aa;--line:#353b36;
  --acc:#7fc9a3;--acc-2:#1f2d25;--acc-ink:#10231a;--ask:#c9a6ef;--ask-2:#2a2233;
  --sun:#f2c15a;--sun-2:#3a3020;--sun-3:#4a3d24;--soil:#8a6b45;--soil-2:#2b2620}
html[data-fs="s"]{--fs:17px} html[data-fs="m"]{--fs:19px} html[data-fs="l"]{--fs:23px}
html[data-ruby="off"] rt{display:none}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:var(--fs);line-height:1.9;
  -webkit-text-size-adjust:100%;overflow-wrap:anywhere}
button,textarea,input{font:inherit;color:inherit}
svg{width:1.15em;height:1.15em;flex:none}   /* 既定の大きさ。個別に指定した svg はそちらが勝つ */
ruby{ruby-position:over}
rt{font-size:.5em;color:var(--mut);font-weight:400;letter-spacing:0}
.hide{display:none!important}
h1,h2,h3,.big{font-family:var(--head);font-weight:900;line-height:1.55;margin:0}
h1{font-size:1.44em} h2{font-size:1.16em} h3{font-size:1em}
.lead{color:var(--mut);font-size:.88em;margin:.25em 0 .9em;line-height:1.8}
.gap{height:14px} .gap-s{height:8px}

/* ---------- 骨組み ---------- */
.app{min-height:100vh;display:flex;flex-direction:column}
.top{position:sticky;top:0;z-index:30;background:var(--bg);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:.6em;padding:.5em .9em}
.iconbtn{flex:none;width:46px;height:46px;border-radius:14px;border:2px solid var(--line);
  background:var(--card);display:grid;place-items:center;cursor:pointer;color:var(--mut)}
.iconbtn svg{width:24px;height:24px}
.road{flex:1;min-width:0;text-align:center}
.dots{display:flex;justify-content:space-between;align-items:center;position:relative;max-width:16em;margin:0 auto}
.dots::before{content:"";position:absolute;left:.5em;right:.5em;top:50%;height:3px;margin-top:-1.5px;
  background:var(--line);border-radius:3px}
.dot{position:relative;z-index:1;width:.95em;height:.95em;border-radius:50%;background:var(--bg);border:2.5px solid var(--line)}
.dot.done{background:var(--acc);border-color:var(--acc)}
.dot.now{width:1.5em;height:1.5em;border:3px solid var(--acc);background:var(--acc-2);box-shadow:0 0 0 4px var(--bg)}
.roadname{margin:.15em 0 0;font-size:.82em;font-weight:700;color:var(--acc);font-family:var(--head)}

.wrap{flex:1;width:100%;max-width:1180px;margin:0 auto;padding:1em 1.1em 8.5em;display:block}
.nav{position:fixed;left:0;right:0;bottom:0;z-index:30;
  background:linear-gradient(to top,var(--bg) 72%,transparent);
  padding:.8em 1em calc(.8em + env(safe-area-inset-bottom))}
.navin{max-width:1180px;margin:0 auto;display:flex;gap:.6em;align-items:stretch}
.back{flex:none;min-width:5.2em;border-radius:18px;border:2px solid var(--line);background:var(--card);
  font-weight:700;font-size:.82em;color:var(--mut);cursor:pointer}
.next{flex:1;max-width:34em;margin-left:auto;min-height:62px;border:0;border-radius:18px;
  background:var(--acc);color:var(--acc-ink);font-family:var(--head);font-weight:900;font-size:1.18em;
  letter-spacing:.06em;cursor:pointer;box-shadow:0 5px 0 rgba(0,0,0,.18);
  display:flex;align-items:center;justify-content:center;gap:.4em}
.next:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(0,0,0,.18)}
.next[disabled]{opacity:.45;box-shadow:none;cursor:default}
.next svg{width:1.05em;height:1.05em}
.next.pulse{animation:pulse 1.7s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 5px 0 rgba(0,0,0,.18),0 0 0 9px color-mix(in srgb,var(--acc) 22%,transparent)}}
@media (prefers-reduced-motion:reduce){.next.pulse{animation:none}}

/* ---------- 二段組（広い画面）／上下（狭い画面） ---------- */
@media (min-width:900px){
  body.two .wrap{display:grid;grid-template-columns:minmax(0,40fr) minmax(0,60fr);gap:1.5em;align-items:start}
  body.two .leftcol{position:sticky;top:5.2em;max-height:calc(100vh - 13em);overflow-y:auto;
    overscroll-behavior:contain;padding:3px 6px 3px 3px;scrollbar-width:thin}
  body.two .leftcol::-webkit-scrollbar{width:9px}
  body.two .leftcol::-webkit-scrollbar-thumb{background:var(--line);border-radius:9px}
  .narrowonly{display:none!important}
}
@media (max-width:899px){ .wideonly{display:none!important} }

/* ---------- カード ---------- */
.card{background:var(--card);border:2px solid var(--line);border-radius:22px;padding:1em 1.1em}
.card+.card{margin-top:.9em}
.cardhead{display:flex;align-items:center;gap:.5em;margin:0 0 .5em}
.cardhead .ttl{font-family:var(--head);font-weight:900;font-size:.94em;color:var(--acc)}
.cardhead .sp{margin-left:auto}

/* ---------- じぶんの文章 ---------- */
.mytext{font-size:1.06em;line-height:2.3;margin:.2em 0 0}
.sent{border-radius:6px;padding:.05em 0;transition:background .45s ease,box-shadow .45s ease}
.sent.glow{background:var(--sun-2);box-shadow:0 0 0 5px var(--sun-2);
  border-bottom:3px solid var(--sun);animation:glowin 1.5s ease-in-out 2}
.sent.glow-ok{background:var(--acc-2);box-shadow:0 0 0 5px var(--acc-2);border-bottom:3px solid var(--acc)}
@keyframes glowin{0%,100%{background:var(--sun-2)}50%{background:var(--sun-3)}}
@media (prefers-reduced-motion:reduce){.sent.glow{animation:none}}
.mynote{font-size:.78em;color:var(--mut);margin:.8em 0 0;display:flex;gap:.4em;align-items:flex-start}
.mynote svg{width:18px;height:18px;flex:none;margin-top:.25em;color:var(--sun)}

/* 狭い画面：じぶんの文章はたたむ */
.foldbtn{width:100%;display:flex;align-items:center;gap:.5em;background:var(--card);border:2px solid var(--line);
  border-radius:18px;padding:.7em .9em;cursor:pointer;font-family:var(--head);font-weight:900;font-size:.92em;
  color:var(--acc);text-align:left}
.foldbtn .arw{margin-left:auto;transition:transform .2s;color:var(--mut)}
.foldbtn[aria-expanded="true"] .arw{transform:rotate(180deg)}
.foldbtn.callme{border-color:var(--sun);background:var(--sun-2);color:var(--ink);animation:callme 1.4s ease-in-out 2}
@keyframes callme{50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--sun) 28%,transparent)}}

/* ---------- 書く ---------- */
.writebox{width:100%;min-height:11em;padding:.8em .9em;border-radius:18px;border:2.5px solid var(--line);
  background:var(--card);color:var(--ink);line-height:2.1;font-size:1.04em;resize:vertical}
.writebox:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 4px var(--acc-2)}
.starters{display:flex;flex-wrap:wrap;gap:.5em;margin-top:.6em}
.starter{min-height:48px;padding:0 1em;border-radius:999px;border:2px solid var(--line);background:var(--card);
  color:var(--ink);font-weight:700;font-size:.86em;cursor:pointer}
.starter:hover{border-color:var(--acc);color:var(--acc)}

/* ---------- 待つ ---------- */
.wait{max-width:36em;margin:0 auto;text-align:center;padding:1.2em 0 0}
.waitart{width:150px;height:150px;margin:0 auto}
.waitart .seed{animation:bob 2.6s ease-in-out infinite}
.waitart .halo{transform-origin:75px 120px;animation:halo 2.6s ease-out infinite}
@keyframes halo{0%{transform:scale(.55);opacity:.5}70%,100%{transform:scale(1.5);opacity:0}}
.waitart .leafA{transform-origin:75px 118px;animation:sprout .8s cubic-bezier(.3,1.5,.5,1) 3.5s both}
.waitart .leafB{transform-origin:75px 108px;animation:sprout .8s cubic-bezier(.3,1.5,.5,1) 7.5s both}
.waitart .bud{transform-origin:75px 74px;animation:sprout .8s cubic-bezier(.3,1.5,.5,1) 11s both}
.waitart .stem{stroke-dasharray:70;stroke-dashoffset:70;animation:draw 11s linear .8s forwards}
@keyframes bob{50%{transform:translateY(-4px)}}
@keyframes sprout{from{transform:scale(.1);opacity:0}}
@keyframes draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.waitart *{animation:none!important;stroke-dashoffset:0!important}}
.waitmsg{font-family:var(--head);font-weight:900;font-size:1.2em;color:var(--acc);min-height:2.4em;margin:.5em 0 0}
.bar{height:12px;border-radius:999px;background:var(--line);overflow:hidden;margin:.7em auto 0;max-width:22em}
.bar i{display:block;height:100%;width:0;border-radius:999px;background:var(--acc);transition:width .4s linear}
.waitread{margin-top:1.4em;text-align:left}
.waitskip{background:none;border:0;color:var(--mut);text-decoration:underline;cursor:pointer;font-size:.8em;padding:.8em}

/* ---------- 問い ---------- */
.ask{background:var(--ask-2);border:3px solid var(--ask);border-radius:24px;padding:.9em 1.05em}
.askhead{display:flex;align-items:center;gap:.5em;color:var(--ask);font-family:var(--head);font-weight:900;font-size:.9em}
.askhead svg{width:30px;height:30px;flex:none}
.askq{font-family:var(--head);font-weight:900;font-size:1.2em;line-height:1.7;margin:.35em 0 0}
.asknote{font-size:.8em;color:var(--mut);margin:.45em 0 0}

/* ---------- 段（かたち）のはしご ---------- */
.solve{margin-top:.9em}
.forms{background:var(--card);border:2px solid var(--line);border-radius:22px;padding:.8em .9em}
.formshead{display:flex;align-items:center;gap:.5em;font-family:var(--head);font-weight:900;font-size:.86em;color:var(--mut)}
.formshead b{color:var(--ink)}
.ladder{list-style:none;margin:.5em 0 0;padding:0;position:relative}
.ladder li{position:relative}
.rung{position:relative;display:flex;align-items:center;gap:.6em;width:100%;text-align:left;
  background:none;border:0;padding:.18em .1em;cursor:pointer;color:var(--mut);font-size:.88em;font-weight:700}
.rung .pip{position:relative;z-index:1;flex:none;width:2.4em;height:2.4em;border-radius:50%;
  border:2.5px solid var(--line);background:var(--card);display:grid;place-items:center;
  font-family:var(--head);font-weight:900;font-size:.82em;color:var(--mut)}
/* はしごの縦線。pip の中に描くので、大きさが変わってもズレない */
.rung .pip::before{content:"";position:absolute;left:50%;margin-left:-1.5px;width:3px;
  top:-.85em;bottom:-.85em;background:var(--line);border-radius:3px;z-index:-1}
.ladder li:first-child .pip::before{top:50%}
.ladder li:last-child .pip::before{bottom:50%}
.rung .rname{line-height:1.5}
.rung:hover .pip{border-color:var(--acc)}
.rung.on{color:var(--ink)}
.rung.on .pip{border-color:var(--acc);background:var(--acc-2);color:var(--acc);
  width:2.7em;height:2.7em;box-shadow:0 0 0 4px var(--card)}
.rung.on .rname{font-family:var(--head);font-weight:900;font-size:1.06em;color:var(--acc)}
.rung.cleared .pip{background:var(--acc);border-color:var(--acc);color:#fff}
.rung.ground{margin-top:.15em;padding-top:.5em}
.rung.ground .pip{border-color:var(--soil);color:var(--soil);background:var(--soil-2)}
.rung.ground.on .pip{background:var(--acc-2);border-color:var(--acc);color:var(--acc)}
.rung.ground .rname small{display:block;font-size:.72em;font-weight:700;color:var(--soil)}
.soilbar{height:.55em;border-radius:0 0 12px 12px;background:repeating-linear-gradient(90deg,var(--soil-2) 0 8px,var(--soil) 8px 10px);
  opacity:.55;margin:.1em -.9em -.85em}
.updown{display:flex;gap:.5em;margin-top:.75em}
.ud{flex:1;min-height:52px;border-radius:16px;border:2.5px solid var(--line);background:var(--card);
  cursor:pointer;font-weight:700;font-size:.85em;display:flex;align-items:center;justify-content:center;gap:.35em;
  line-height:1.35;padding:.3em .5em;color:var(--ink)}
.ud svg{width:20px;height:20px;flex:none;color:var(--acc)}
.ud:hover{border-color:var(--acc)}
.ud[disabled]{opacity:.35;cursor:default}
.ud[disabled] svg{color:var(--mut)}
.formstip{font-size:.76em;color:var(--mut);margin:.6em 0 0;line-height:1.7}
/* 広い画面：はしごは設問の左に立てたまま。上下がいつでも目に入る位置にする */
@media (min-width:1080px){
  body.two .solve{display:grid;grid-template-columns:11em minmax(0,1fr);gap:1em;align-items:start}
  body.two .forms{position:sticky;top:5.4em;padding:.7em .55em}
  body.two .formshead{display:none}
  body.two .ladder{margin-top:.1em}
  body.two .ladder::before{left:calc(1.1em - 1.5px)}
  body.two .rung{font-size:.8em;gap:.45em}
  body.two .rung .pip{width:2.2em;height:2.2em}
  body.two .rung.on .pip{width:2.5em;height:2.5em}
  body.two .rung.ground .rname small{font-size:.66em}
  body.two .updown{flex-direction:column;gap:.4em}
  body.two .ud{min-height:44px;font-size:.74em}
  body.two .formstip{display:none}
  body.two .qcard{margin-top:0}
  body.two .soilbar{margin:.1em -.55em -.7em}
}

/* かたちを変えたときの一言 */
.swapnote{margin:.8em 0 0;padding:.6em .9em;border-radius:14px;background:var(--acc-2);color:var(--acc);
  font-size:.84em;font-weight:700;display:flex;gap:.45em;align-items:center;animation:fadein .35s ease both}
.swapnote svg{width:20px;height:20px;flex:none}
@keyframes fadein{from{opacity:0;transform:translateY(-4px)}}

/* ---------- えらぶ ---------- */
.qcard{margin-top:.9em}
.qzone>:first-child{margin-top:0}
.opts{display:flex;flex-direction:column;gap:.6em}
.opt{display:flex;gap:.7em;align-items:center;text-align:left;min-height:64px;padding:.6em .85em;
  border-radius:18px;border:2.5px solid var(--line);background:var(--card);cursor:pointer;line-height:1.7;
  color:var(--ink);transition:border-color .2s,background .2s,opacity .3s}
.opt .n{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:var(--acc-2);color:var(--acc);font-weight:900;font-family:var(--head);font-size:.85em}
.opt:hover{border-color:var(--acc)}
.opt.tried{border-style:dashed;opacity:.5;cursor:default}
.opt.tried .n{background:var(--line);color:var(--mut)}
.opt.chosen{border-color:var(--acc);background:var(--acc-2)}
.opt.chosen .n{background:var(--acc);color:var(--acc-ink)}
.opt[disabled]{cursor:default}
.opt .mark{margin-left:auto;flex:none;font-size:.78em;font-weight:700;color:var(--mut)}

/* ---------- さしもどし ---------- */
.backcard{margin-top:.85em;padding:.85em 1em;border-radius:20px;background:var(--sun-2);border:2.5px solid var(--sun);
  display:flex;gap:.7em;align-items:flex-start;animation:fadein .4s ease both}
.backcard svg.pt{width:30px;height:30px;flex:none;color:var(--sun)}
/* 矢印は「じぶんの文章」のほうを指す。広い画面は左、狭い画面は上 */
@media (max-width:899px){ .backcard svg.pt{transform:rotate(90deg)} }
.backcard .bt{font-family:var(--head);font-weight:900;font-size:1.02em;line-height:1.6;margin:0}
.backcard .bs{font-size:.82em;color:var(--mut);margin:.3em 0 0;line-height:1.7}
.okcard{margin-top:.85em;padding:.85em 1em;border-radius:20px;background:var(--acc-2);border:2.5px solid var(--acc);
  animation:fadein .4s ease both}
.okcard .bt{font-family:var(--head);font-weight:900;font-size:1.05em;color:var(--acc);margin:0}
.okcard .bs{font-size:.84em;color:var(--mut);margin:.35em 0 0;line-height:1.75}

/* 段を下げる提案 */
.propose{margin-top:.85em;padding:.9em 1em;border-radius:20px;background:var(--card);border:2.5px dashed var(--acc);
  animation:fadein .4s ease both}
.propose .pt{font-family:var(--head);font-weight:900;font-size:1.02em;line-height:1.6;margin:0}
.propose .ps{font-size:.8em;color:var(--mut);margin:.3em 0 .7em;line-height:1.7}
.prow{display:flex;gap:.5em;flex-wrap:wrap}
.pbtn{flex:1;min-width:9em;min-height:54px;border-radius:16px;border:2.5px solid var(--acc);background:var(--acc);
  color:var(--acc-ink);font-family:var(--head);font-weight:900;font-size:.95em;cursor:pointer;padding:.3em .6em}
.pbtn.ghost{background:var(--card);color:var(--acc)}

/* ---------- うめる ---------- */
.fillsent{background:var(--card);border:2.5px solid var(--line);border-radius:18px;padding:.9em 1em;
  line-height:2.6;font-size:1.1em;font-family:var(--head);font-weight:700}
.hole{display:inline-flex;align-items:center;justify-content:center;min-width:5.4em;min-height:48px;
  margin:0 .18em;padding:0 .6em;border-radius:12px;border:2.5px dashed var(--acc);background:var(--bg);
  font-weight:700;cursor:pointer;vertical-align:middle;line-height:1.3;color:var(--mut)}
.hole.active{border-style:solid;box-shadow:0 0 0 4px var(--acc-2)}
.hole.filled{border-style:solid;background:var(--acc-2);color:var(--ink)}
.hole.tried{border-style:dashed;border-color:var(--sun);background:var(--sun-2);color:var(--ink)}
.bank{margin-top:.8em;background:var(--card);border:2px solid var(--line);border-radius:20px;padding:.7em .85em}
.banklabel{font-size:.78em;color:var(--mut);margin:0 0 .45em}
.chips{display:flex;flex-wrap:wrap;gap:.5em}
.chip{min-height:50px;padding:0 1.1em;border-radius:999px;border:2.5px solid var(--acc);background:var(--card);
  color:var(--acc);font-weight:700;font-family:var(--head);cursor:pointer}
.chip.used{opacity:.4}

/* ---------- じぶんで書く ---------- */
.freehint{margin:0 0 .7em;padding:.7em .9em;border-radius:16px;background:var(--soil-2);
  font-size:.86em;line-height:1.8;display:flex;gap:.5em;align-items:flex-start}
.freehint svg{width:22px;height:22px;flex:none;color:var(--soil)}
.freebox{width:100%;min-height:6.5em;padding:.75em .85em;border-radius:18px;border:2.5px solid var(--line);
  background:var(--card);color:var(--ink);line-height:2.1;resize:vertical}
.freebox:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 4px var(--acc-2)}
.freeno{font-size:.78em;color:var(--mut);margin:.5em 0 0}
.doneb{margin-top:.7em;min-height:56px;width:100%;border-radius:18px;border:2.5px solid var(--acc);
  background:var(--card);color:var(--acc);font-family:var(--head);font-weight:900;font-size:1.02em;cursor:pointer}
.doneb[disabled]{opacity:.4;cursor:default}

/* ---------- おわり ---------- */
.end{max-width:38em;margin:0 auto;text-align:center}
.plant{width:160px;height:160px;margin:0 auto}
.plant .grow{transform-origin:80px 142px;animation:grow .9s cubic-bezier(.3,1.4,.5,1) both}
@keyframes grow{from{transform:scale(.2);opacity:0}}
@media (prefers-reduced-motion:reduce){.plant .grow{animation:none}}
.endlist{text-align:left;display:flex;flex-direction:column;gap:.6em;margin-top:1em}
.item{background:var(--card);border:2px solid var(--line);border-radius:18px;padding:.7em .95em;line-height:1.8}
.item small{display:block;color:var(--mut);font-size:.72em;font-weight:700;margin-bottom:.1em}
.item.key{background:var(--acc-2);border-color:var(--acc)}
.badge{display:inline-flex;align-items:center;gap:.4em;padding:.25em .9em;border-radius:999px;
  background:var(--acc-2);color:var(--acc);font-family:var(--head);font-weight:900;font-size:.85em;margin-top:.3em}
.savebtn{margin-top:1.1em;width:100%;min-height:58px;border-radius:18px;border:2.5px solid var(--acc);
  background:var(--card);color:var(--acc);font-family:var(--head);font-weight:900;font-size:1.02em;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:.4em}
.savebtn svg{width:22px;height:22px}
.savehow{font-size:.78em;color:var(--mut);margin:.7em 0 0;line-height:1.8;text-align:left;
  padding:.7em .9em;border:2px dashed var(--line);border-radius:14px}

/* ---------- 設定シート ---------- */
.sheet{position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.35);display:flex;align-items:flex-end;justify-content:center}
.sheetin{width:100%;max-width:760px;background:var(--bg);border-radius:24px 24px 0 0;padding:1.1em 1em 1.6em;
  max-height:88vh;overflow-y:auto}
.setrow{margin:.8em 0}
.setrow p{margin:0 0 .35em;font-weight:700;font-size:.88em}
.seg{display:flex;gap:.5em;flex-wrap:wrap}
.seg button{min-height:46px;min-width:60px;padding:0 .9em;border-radius:14px;border:2px solid var(--line);
  background:var(--card);cursor:pointer;font-weight:700}
.seg button[aria-pressed="true"]{border-color:var(--acc);background:var(--acc);color:var(--acc-ink)}
.devbox{margin-top:1.2em;padding:.8em .9em;border:2px dashed var(--line);border-radius:16px}
.devbox p{margin:0 0 .5em;font-size:.8em;color:var(--mut)}

/* ---------- 印刷（PDF） ---------- */
.printout{display:none}
@media print{
  .top,.nav,.sheet,.forms,.starters,.waitskip,.devbox,.foldbtn{display:none!important}
  .app{display:none!important}
  .printout{display:block;font-size:11pt;line-height:1.8;color:#000}
  .printout h1{font-size:15pt;margin:0 0 .4em}
  .printout .pmeta{font-size:9pt;color:#555;margin:0 0 1em}
  .printout .pblock{margin:0 0 1em;padding:.6em .8em;border:1px solid #999;border-radius:6px}
  .printout .pl{font-size:8.5pt;color:#555;font-weight:700;display:block;margin-bottom:.2em}
  .printout .pkey{background:#fdf0cf}
  @page{margin:16mm}
}

/* ---------- 呼ばれたい名前（2026-09-26） ---------- */
.namebox{display:flex;align-items:center;flex-wrap:wrap;gap:.4em .8em;margin:0 0 1em;font-weight:700}
.namebox small{margin-left:.6em;font-weight:500;font-size:.8em;color:var(--mut)}
.namebox input{flex:1 1 9em;max-width:14em;min-height:44px;padding:.3em .8em;border-radius:14px;border:2.5px solid var(--line);
  background:var(--card);color:var(--ink);font:inherit}
.namebox input:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 4px var(--acc-2)}

/* ---------- おためし版（2026-09-26）：はじめに（保護者の同意）／使い切り ---------- */
.otameshi{display:inline-block;margin:0 0 .8em;padding:.1em .8em;border-radius:999px;background:var(--sun-2);
  color:var(--ink);font-size:.82em;font-weight:700}
.doui{max-width:40em;margin:0 auto;font-size:.9em}
.doui .kicker{color:var(--acc);font-weight:700;margin:0}
.doui h1{font-size:1.2em;margin:.2em 0 .8em}
.doui .card{margin-bottom:.9em}
.doui .card h2{font-size:1em;color:var(--acc);margin:0 0 .3em}
.doui .card p{margin:0 0 .8em}
.doui label.f{display:block;font-weight:700;margin:.2em 0 .3em}
.doui input[type=text]{width:100%;min-height:48px;padding:.3em .8em;border-radius:14px;border:2.5px solid var(--line);
  background:var(--card);color:var(--ink);margin-bottom:.9em}
.doui input[type=text]:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 4px var(--acc-2)}
.doui .check{display:flex;gap:.6em;align-items:flex-start;margin:.2em 0 1em}
.doui .check input{width:1.3em;height:1.3em;margin-top:.35em;flex:none}
.doui .err{color:#b3261e;margin:.6em 0 0;min-height:1em}
.otona{text-align:left;margin-top:1.4em;font-size:.9em}
.otona h2{color:var(--acc);margin-bottom:.4em}
.otona h3{margin:1.4em 0 .3em}
.otona p{margin:0 0 .6em}
a.kiribtn{display:flex;align-items:center;justify-content:center;text-decoration:none;max-width:none;margin:.6em 0 0;width:100%}
.doui .next{width:100%;margin-left:0}

/* 入口の絵（えんぴつ → 問い → 実）。印刷には出さない */
.scene{display:block;width:168px;height:auto;margin:0 0 .4em}
@media print{.scene{display:none!important}}