/* stamp119 phone app — Apple-style: quiet surfaces, one accent, big tight headings, springy motion.
   The page itself never scrolls (one question per screen); only the receipt/status screens scroll inside.
   Motion rules (apple-design / emil-design-eng skills): feedback on press, transform+opacity only,
   ease-out entrances under 300ms (drawers/sheets 320–340ms, within the 200–500ms modal range), exits faster than entrances. 「視差効果を減らす」でも動きは同じ。止めるのは揺れと小さな点滅だけ（富村 2026-09-27。この下の末尾の1か所）. */
:root{
  --bg:#fff6f3;--surface:#fff;--ink:#17201d;--ink-2:#3c4643;--muted:#66706c;--line:rgb(16 48 40 / .09);--line-2:rgb(16 48 40 / .16);
  --accent:#0a7c68;--accent-press:#07614f;--accent-soft:rgb(10 124 104 / .1);--accent-ring:rgb(10 124 104 / .35);
  /* keyboard focus: a solid 2px ring (6.4:1 on the pill, ~7:1 on white; WCAG 1.4.11 wants 3:1). One press depth for every button. */
  --focus-ring:#07614f;--press:.96;
  --bad:#c42b1c;--bad-bg:#fff2f0;--warn:#8a5a00;--warn-bg:#fff8e6;
  --r-lg:22px;--r-md:16px;--r-sm:12px;
  --ease-out:cubic-bezier(.23,1,.32,1);--ease-spring:cubic-bezier(.32,.72,0,1);--ease-in-out:cubic-bezier(.77,0,.175,1);
  --shadow-1:0 1px 2px rgb(0 0 0 / .04),0 2px 8px rgb(0 0 0 / .04);
  --shadow-2:0 2px 6px rgb(0 0 0 / .05),0 12px 32px rgb(0 0 0 / .08);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","IBM Plex Sans JP",sans-serif;
  color:var(--ink);-webkit-font-smoothing:antialiased;font-feature-settings:"palt";
;--pack:#6b3fb5;--pack-ink:#5b3399;--pack-soft:rgb(142 91 214 / .1);--pack-press:rgb(142 91 214 / .16)}
*{box-sizing:border-box}
[hidden]{display:none!important}
/* Japanese line breaking by the strict rules (kinsoku): 「ー」「ッ」「ャ」 and the like never start a line (the sample names broke
   「おじ／ー」) */
html{-webkit-tap-highlight-color:transparent;line-break:strict}
html,body{height:100%;margin:0;background:var(--bg);overscroll-behavior:none}
body{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto auto;height:100dvh;overflow:hidden;font-size:16px;line-height:1.55}
button,input,select,textarea{font:inherit;color:inherit}
button,a,label,.tile,[role=button]{touch-action:manipulation}
button,.tile,.primary,.secondary,.bottom-nav>*,.brand{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
button{cursor:pointer}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.tile:has(input:focus-visible){outline:2px solid var(--focus-ring);outline-offset:2px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- chrome: translucent header and tab bar (content never hides behind a hard strip) ---------- */
.app-header{position:relative;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:calc(env(safe-area-inset-top) + 6px) 10px 6px 16px;background:rgb(243 246 245 / .78);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);box-shadow:0 1px 0 var(--line)}
/* iPad・PC: one left edge — the logo starts where the 560px column's text starts (18px in), the right side ends at the column's */
@media (min-width:700px){.app-header{padding-left:max(16px,calc(50% - 262px));padding-right:max(10px,calc(50% - 273px))}}
.brand{display:flex;align-items:center;gap:9px;min-height:44px;color:var(--ink);text-decoration:none;font-weight:600;font-size:16px;letter-spacing:-.01em}
.brand-mark{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--ink);color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.02em}
.icon-button{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:var(--ink);transition:background-color 160ms var(--ease-out),transform 240ms var(--ease-out)}
/* the sheets' ✕ and ‹ are lucide's own SVGs (index.html) drawn with the bottom menu's line (2.4 on its 24px grid), a size up from
   the 22px glyph they were (富村「アイコンは線太く少し大きく押しやすく」); the button stays 44px */
.icon-button .ico{display:block;flex:none;width:24px;height:24px;stroke-width:2.4}
.icon-button:active{background:rgb(0 0 0 / .06);transform:scale(var(--press));transition-duration:160ms,90ms}
.icon-button{flex:none}
/* Every icon on the app's screens is lucide's own SVG (lucide-static 0.544.0, index.html; the icon font is gone — its last
   glyphs drew 1.1–1.8px lines beside the bottom menu's 2.7px, UI review r3). One line for all: the menu's 2.4 on the 24px
   grid. Its size is its font-size (1em), set where it sits: 24px beside a button's 17px words (2.4px lines), 22px beside the
   receipt's 15px ones, 26px in the 44px squares of ことば (22px in the smaller ones), 17–20px on the small lines of text and
   in the tray, 32–34px in the big round badges. */
.ico{display:block;flex:none;width:1em;height:1em;stroke-width:2.4}

.bottom-nav{position:relative;z-index:20;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));width:min(100% - 36px,524px);box-sizing:border-box;
  margin:0 auto max(10px,calc(env(safe-area-inset-bottom) + 4px));padding:3px;border-radius:30px;
  background:rgb(255 255 255 / .8);-webkit-backdrop-filter:saturate(180%) blur(22px);backdrop-filter:saturate(180%) blur(22px);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .8),0 0 0 1px rgb(16 48 40 / .07),0 12px 32px rgb(16 48 40 / .15),0 2px 6px rgb(16 48 40 / .07)}
/* bottom menu (2026-09-27, 富村「アイコンは線太く少し大きく押しやすく」「Apple風UI、動きがあって高級感」): a floating capsule, lucide's
   own SVG icons drawn thicker, bold labels, and a pill that springs to the page you are on */
.bottom-nav>:is(button,a){position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;min-height:54px;
  padding:0;border:0;border-radius:27px;background:none;color:var(--ink-2);font:inherit;font-size:12px;font-weight:700;line-height:1.2;letter-spacing:.02em;
  text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:color 200ms var(--ease-out),transform 240ms var(--ease-out)}
/* the press: down in 90ms, back in 240ms. .is-pressed (app.js, on pointerdown) because iPhone Safari does not always run :active */
.bottom-nav>:is(button,a):active,.bottom-nav>.is-pressed{transform:scale(var(--press));transition-duration:200ms,90ms}
.nav-ico{display:block;width:27px;height:27px;flex:none;stroke-width:2.4;transition:transform 300ms var(--ease-spring)}
.nav-label{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bottom-nav [aria-current=page]{color:var(--accent-press)}
.bottom-nav [aria-current=page] .nav-ico{transform:translateY(-1px) scale(1.04)}
/* the pill: 260ms (a tab is pressed tens of times a day; UI stays under 300ms). app.js setScreen moves it by its own
   transform (translateX(n × 100%)), not a variable on the capsule, which would restyle every tab (UI review r3 #6). */
.nav-pill{position:absolute;z-index:0;top:3px;bottom:3px;left:3px;width:calc((100% - 6px) / 5);border-radius:27px;background:var(--accent-soft);
  transition:transform 260ms var(--ease-spring),opacity 200ms var(--ease-out);pointer-events:none}
.bottom-nav:not([data-current]) .nav-pill{opacity:0}
.bottom-nav>:is(button,a):focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px}
/* Coming back (from display:none) the capsule and 戻る／次へ rise 16px and fade in instead of popping in one frame (UI review
   #6). Only once body.is-live is set (app.js, after the first frame), so a page load or a tab from /ideas never replays it;
   and not when the video was closed at once — by a key, or by the screen changing under it (body.at-once, app.js
   closeWorkshop: on a phone on its side the capsule made way for the video, and keyboard actions get no motion, so it is
   simply back). */
.bottom-nav,.action-bar{transition:opacity 200ms var(--ease-out),translate 240ms var(--ease-out)}
@starting-style{body.is-live:not(.at-once) :is(.bottom-nav,.action-bar){opacity:0;translate:0 16px}}
/* While 「戻る／次へ」 is out on the order (steps 2–5) the capsule hides (Apple's hidesBottomBarWhenPushed): the two never stack,
   and that bar takes the home indicator's room (.action-bar). The photo step keeps the capsule, a chosen photo too (富村の決定 ⑥,
   2026-09-28): there the bar is not shown at all (app.js goStep) and 「次へ ›」 sits beside the photo (.photo-next). It goes the
   way it comes back: down 16px and out in 160ms while the bar rises into the same place (UI review r3 #2: it vanished in one
   frame, and for that frame the bottom of the screen was empty). It leaves the layout at once (fixed where it was: nothing
   above it moves) and takes no taps on its way. At once with body.at-once (a key on 作る, 次へ or 戻る, or the video closed at
   once). :where() keeps the rule as light as .bottom-nav's own, so body.at-once wins. */
:where(body[data-screen=create]:has(#action-bar:not([hidden])):not(:has(#step-photo.is-video))) .bottom-nav{display:none;position:fixed;inset:auto 0 0;opacity:0;translate:0 16px;pointer-events:none;
  transition:opacity 160ms var(--ease-out),translate 160ms var(--ease-out),display 160ms allow-discrete}
body.at-once .bottom-nav{transition:none}
/* …and back on the photo step 戻る／次へ leaves the same way, down 16px and out in 160ms, fixed where it was and taking no taps,
   while the capsule rises into its place (it vanished in one frame) */
.action-bar[hidden]{position:fixed;inset:auto 0 0;opacity:0;translate:0 16px;pointer-events:none;
  transition:opacity 160ms var(--ease-out),translate 160ms var(--ease-out),display 160ms allow-discrete}
body.at-once .action-bar{transition:none}
/* 200% text on a phone (a 195px-wide page): the capsule takes the width and the labels tighten, so none is cut (WCAG 1.4.4) */
@media (max-width:260px){.bottom-nav{width:calc(100% - 12px)}.nav-label{font-size:10.5px;letter-spacing:-.02em}}
@media (max-width:180px){.bottom-nav{width:100%;border-radius:0}.nav-label{font-size:9.5px;letter-spacing:-.04em}} /* 「進み具合」 (4 kanji) fits a 38px cell */
@media (hover:hover) and (pointer:fine){.bottom-nav>:is(button,a):not([aria-current=page]):hover{color:var(--ink)}}

/* ---------- screens ---------- */
.app-main{min-height:0;overflow:hidden}
.screen{height:100%;display:flex;flex-direction:column;gap:12px;padding:14px 18px 10px;min-height:0}

/* the tray: one round slot per step; a decided step's choice flies in and stays there (photo, style, words, count) */
.stepper{display:flex;justify-content:center;flex:none}
.stepper ol{display:flex;align-items:center;gap:12px;margin:0;padding:0;list-style:none}
.stepper li{position:relative;display:grid}
.stepper li+li::before{content:"";position:absolute;right:100%;top:50%;width:12px;height:2px;margin-top:-1px;background:rgb(16 48 40 / .1);transition:background-color 280ms var(--ease-out)}
.stepper li.done+li::before{background:var(--accent)}
.slot{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;overflow:hidden;background:rgb(16 48 40 / .05);box-shadow:inset 0 0 0 1.5px rgb(16 48 40 / .1);
  color:var(--accent-press);transition:box-shadow 240ms var(--ease-out),background-color 240ms var(--ease-out)}
.slot img{width:100%;height:100%;object-fit:cover;background:#fff}
.slot .ico{font-size:20px}
.slot b{font-size:14px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.slot>*{transition:opacity 160ms var(--ease-out)}
.slot.arriving>*{opacity:0}
.stepper li.done .slot{background:#fff;box-shadow:inset 0 0 0 1.5px rgb(10 124 104 / .4)}
.stepper li.now .slot{background:#fff;box-shadow:inset 0 0 0 2px var(--accent),0 0 0 4px var(--accent-soft)}
.fly-ghost.fly-token{display:grid;place-items:center;background:var(--accent);color:#fff;font-size:22px;font-weight:700;letter-spacing:-.03em}
/* ことば's icon lifts off at its tile's size — 60% of its square (26px in 44px, 22px in 34–36px) — and shrinks with the flying
   square into its slot (34px: 20px, the slot's own icon) */
.fly-ghost.fly-token .ico{width:60%;height:60%}

#order-form{flex:1;min-height:0;display:flex;flex-direction:column}
.wstep{flex:1;min-height:0;display:flex;flex-direction:column;gap:12px}
/* a screen shorter than the step (a phone on its side, Safari's bars out): the step scrolls inside, so nothing is out of reach
   (WCAG 1.4.10). Where it fits nothing changes. Its box reaches the screen's edges (the content stays 18px in), so the style
   rail's cards still run edge to edge instead of being cut by the scroller. */
.wstep{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;margin-inline:-18px;padding-inline:18px}
.wstep::-webkit-scrollbar{display:none}
.step-title{margin:4px 0 0;font-size:29px;line-height:1.14;font-weight:700;letter-spacing:-.02em;outline:none}
.hint{margin:0;font-size:13px;color:var(--muted);line-height:1.6}
.message{margin:0;font-size:14px;color:var(--bad);font-weight:600}
.message:empty{display:none}
#status-message{color:var(--accent-press)}

/* direction-aware step change: forward slides in from the right, back from the left (same path in and out) */
.wstep[data-enter=fwd]{animation:step-in-fwd 240ms var(--ease-out) both}
.wstep[data-enter=back]{animation:step-in-back 240ms var(--ease-out) both}
@keyframes step-in-fwd{from{opacity:0;transform:translate3d(20px,0,0)}}
@keyframes step-in-back{from{opacity:0;transform:translate3d(-20px,0,0)}}
.wstep[data-enter] .tile{animation:tile-in 220ms var(--ease-out) both;animation-delay:calc(40ms + var(--i,0) * 30ms)}
@keyframes tile-in{from{opacity:0;transform:translate3d(0,8px,0) scale(.97)}}

/* notes / alerts (they drop in when they appear: app.js revealOnce, never again when a tab or the video gives the screen back) */
.note{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0;padding:12px 14px;border-radius:var(--r-md);font-size:14px;font-weight:600;line-height:1.55}
.note strong{width:100%;font-size:15px}
.note.ok{background:var(--accent-soft);color:var(--accent-press)}
.note.bad{background:var(--bad-bg);color:var(--bad);box-shadow:inset 0 0 0 1px rgb(196 43 28 / .18)}
.note.warn{background:var(--warn-bg);color:var(--warn);box-shadow:inset 0 0 0 1px rgb(138 90 0 / .16)}
.small-button{min-height:36px;padding:4px 16px;border:0;border-radius:99px;background:var(--ink);color:#fff;font-weight:600;font-size:14px;transition:transform 240ms var(--ease-out)}
.small-button:active{transform:scale(var(--press));transition-duration:90ms}

/* ---------- photo ---------- */
.photo-box{position:relative;flex:1;min-height:170px;display:grid;place-items:center;border-radius:var(--r-lg);background:var(--surface);
  box-shadow:var(--shadow-1),inset 0 0 0 1px var(--line);overflow:hidden;cursor:pointer;transition:transform 240ms var(--ease-out),box-shadow 200ms var(--ease-out)}
/* press exception: a big surface (the whole photo box) — .96 would pull its edges in ~7px, so it presses shallower */
.photo-box:active{transform:scale(.985);transition-duration:90ms,200ms}
.photo-box input{position:absolute;inset:0;opacity:0;cursor:pointer}
.photo-box span{display:grid;justify-items:center;gap:10px;color:var(--ink);font-weight:600;font-size:17px;letter-spacing:-.01em}
.photo-box .photo-box-icon{display:grid;place-items:center;width:68px;height:68px;border-radius:50%;background:var(--accent);color:#fff;
  box-shadow:0 8px 24px rgb(10 124 104 / .32)}
.photo-box-icon .ico{font-size:32px}
.photo-box img{width:100%;height:100%;object-fit:contain;pointer-events:none}
.photo-box.small{flex:none;height:150px}
/* the rules belong to the ways to pick a photo above them (12px), not to the menu under them: 10px more below (20px there;
   UI review r3) */
.photo-rule{display:grid;gap:5px;margin:0 0 10px;font-size:14px;font-weight:600;line-height:1.45}
/* where a rule wraps (a phone on its side, 200% text) it breaks between phrases (index.html <wbr>), never 「有名／人」 */
.photo-rule span{display:flex;align-items:center;gap:7px;word-break:keep-all;overflow-wrap:anywhere}
.photo-rule .ico{font-size:20px}
/* 320〜359px: both lines on one line each (「使えない：アニメ等のキャラクター・ロゴ・有名人」 otherwise drops 「人」) */
@media (max-width:359px){.photo-rule{font-size:13px;letter-spacing:-.02em}.photo-rule span{gap:5px}}
.rule-ok{color:var(--accent-press)}
.rule-ng{color:var(--bad)}

/* ---------- first step: two direct ways to pick the photo (Apple-style inset list) ---------- */
.step-sub{margin:-4px 0 0;font-size:15px;color:var(--ink-2);line-height:1.55}
.photo-stage{position:relative;flex:1 1 auto;min-height:0;display:grid;grid-template:minmax(0,1fr)/minmax(0,1fr);place-items:center;overflow:hidden}
/* only its sides are clipped: the stickers' soft shadow (18px under them) and the ✓ on a chosen photo (10px above it) reach
   past its top and bottom, and a clipped shadow drew a hard grey edge — a box — around the fan on short phones */
@supports (overflow-x:clip){.photo-stage{overflow-x:clip;overflow-y:visible}}
.photo-options,.sample-chip,.photo-rule,.step-sub{flex:none}
/* One fixed cell (Safari otherwise sized the column from the aspect ratio and pushed the fan right). Big screens get a bigger
   fan: up to 62% of the spot, and 92% of its width at most, so the tilted outer stickers are never cut at its sides. */
.photo-hero{position:relative;height:min(100%,max(230px,62cqh),92cqw / 1.45);max-width:100%;aspect-ratio:1.45;display:grid;place-items:center}
.photo-hero img{position:absolute;width:52%;height:auto;aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 10px 18px rgb(16 48 40 / .16))}
.photo-hero img:nth-child(1){left:0;top:12%;transform:rotate(-9deg)}
.photo-hero img:nth-child(2){left:24%;top:0;z-index:1;transform:rotate(2deg)}
.photo-hero img:nth-child(3){right:0;top:16%;transform:rotate(10deg)}
/* The fan rises once, the first time the page shows it: CSS, so it is there from the first paint (no flash before app.js
   runs), and under the opening it waits at its first frame until the black has gone (html.ro-boot, opening.js). app.js
   then marks it .settled, so a tab or the video giving the screen back never plays it again (display:none → shown
   restarts a CSS animation). Everything that appears later rises or drops in through app.js revealOnce (WAAPI). */
.photo-hero:not(.settled) img{animation:hero-in 300ms var(--ease-out) both}
.photo-hero:not(.settled) img:nth-child(1){animation-delay:40ms}
.photo-hero:not(.settled) img:nth-child(2){animation-delay:80ms}
.photo-hero:not(.settled) img:nth-child(3){animation-delay:120ms}
html.ro-boot .photo-hero img{animation-play-state:paused}
@keyframes hero-in{from{opacity:0;translate:0 10px;scale:.95}}
.photo-frame{position:absolute;inset:0;margin:0;display:flex;align-items:center;justify-content:center}
/* room for the ✓ on the photo's top-right corner (10px above it and past it), so it stays inside the spot: clear of the title
   on a short phone, and not cut at the side by a wide photo on an iPad */
.photo-frame{padding:10px 10px 0 0}
.photo-frame img{display:block;min-width:0;min-height:0;max-width:100%;max-height:100%;width:auto;height:auto;border-radius:var(--r-lg);object-fit:contain;box-shadow:var(--shadow-2)}
.photo-ok{position:absolute;top:0;left:0;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--accent);color:#fff;font-size:20px;
  box-shadow:0 0 0 3px var(--bg),0 4px 14px rgb(10 124 104 / .35)}
.photo-options{display:grid;border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-1),inset 0 0 0 1px var(--line);overflow:hidden}
.photo-option{position:relative;display:flex;align-items:center;gap:14px;min-height:68px;padding:10px 14px 10px 14px;cursor:pointer;transition:background-color 120ms var(--ease-out)}
.photo-option+.photo-option::before{content:"";position:absolute;top:0;left:72px;right:0;height:1px;background:var(--line)}
.photo-option:active{background:rgb(16 48 40 / .06)}
.photo-option input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.photo-option:has(input:focus-visible){outline:2px solid var(--focus-ring);outline-offset:-2px}
/* the photo step's icons are lucide's own SVGs (index.html), drawn as thick as the bottom menu's (.nav-ico 2.4) and a size up:
   26px in a 44px tile, › 20px, ✕ 18px, ✓ 20px (富村「アイコンは線太く少し大きく押しやすく」) */
#step-photo .ico{display:block;flex:none;width:1em;height:1em;stroke-width:2.4}
.photo-option-icon{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:13px;color:#fff;font-size:26px}
.photo-option-icon.camera{background:var(--accent)}
.photo-option-icon.album{background:var(--ink)}
.photo-option-text{display:grid;gap:1px;flex:1;min-width:0}
.photo-option-text b{font-size:17px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.photo-option-text small{font-size:13px;color:var(--muted)}
.photo-option .chev{color:rgb(16 48 40 / .35);font-size:20px}
@media (hover:hover) and (pointer:fine){.photo-option:hover{background:rgb(16 48 40 / .04)}}
@media (max-height:640px){.photo-option{min-height:58px}.photo-option-icon{width:38px;height:38px;border-radius:11px;font-size:23px}.photo-option+.photo-option::before{left:66px}.step-sub{font-size:14px}}
@media (max-height:600px){.step-sub{display:none}}
/* phones held upright up to ~740px tall (SE 320×568, iPhone 13 390×664, 430×739): rows like iOS Settings' — 52px, the 38px
   tile with 7px around it — so the fan gets their room (iPhone 13 with the limited-time banner out: 155×98 → 177×112px; UI
   review r3 #31); the whole 52px row is what is pressed. After the 640px rule, so an SE gets them too. */
@media (max-height:740px) and (orientation:portrait){.photo-option{min-height:52px;padding-block:7px}.photo-option-icon{width:38px;height:38px;border-radius:11px;font-size:23px}.photo-option+.photo-option::before{left:66px}}
/* a photo is chosen: the three ways fold into this one row (app.js usePhoto; pressed, they come back), so the photo gets their
   room — it was smaller than a stamp under them (iPhone 13 64×85 → 159×211px, SE 38×51 → 128×171px; UI review r3 #28) */
.secondary.photo-change{flex:none;align-self:center;min-height:44px;padding:0 20px;font-size:15px}
/* 「次へ ›」 beside the chosen photo (富村の決定 ⑥, 2026-09-28): on the photo step the capsule stays and 戻る／次へ is not shown
   (app.js goStep); choosing a photo still moves on by itself, and this is the way on when you come back. The same pill as
   「▶ 動画」 — 36px tall, the dark glass, 14px bold words, its white 28px circle (here after the words: 次へ then ›), 48px to
   press, the same press — at the photo's middle height, 14px from it, and photo and pill are centred as one group, as the fan
   and 「▶ 動画」 are. The photo keeps the rest of the width (its ✓ reaches 10px into the 14px gap), so the pill is never on it,
   on any width, on its side or with 200% text. Its name says where it goes (「次へ（絵のタッチを選ぶ）」, app.js labelPhotoNext). */
.photo-frame{gap:14px}
.photo-frame img{max-width:calc(100% - 94px)}
.photo-next{position:relative;flex:none;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 4px 0 14px;border:0;border-radius:99px;
  background:rgb(23 32 29 / .82);color:#fff;font:inherit;font-size:14px;font-weight:700;line-height:1;letter-spacing:.01em;white-space:nowrap;cursor:pointer;
  -webkit-backdrop-filter:saturate(180%) blur(12px);backdrop-filter:saturate(180%) blur(12px);box-shadow:0 3px 12px rgb(16 48 40 / .24);
  transition:transform 240ms var(--ease-out)}
.photo-next::before{content:"";position:absolute;inset:-4px -4px -8px}
.photo-next:active{transform:scale(var(--press));transition-duration:90ms}
.photo-next-icon{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:#fff;color:var(--ink)}
#step-photo .photo-next-icon .ico{font-size:20px;transition:transform 240ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.photo-next:hover .ico{transform:translateX(2px)}}

/* ---------- ワークショップ動画: a pill on the stickers; the player borrows their spot while it plays (app.js openWorkshop) ----------
   The stage is a size container: the pill sits in its top-right corner (the fan's emptiest corner) and shortens on narrow
   phones. It never goes: where the step is too short for it (text zoomed to 200%, a 195px-wide page) the stage keeps 48px —
   the 36px pill with 6px above and below; its 48px target reaches 2px into the gap under it — and the step scrolls inside
   instead (WCAG 1.4.10), so 「▶ 動画」 stays in reach (UI review r3; an SE with ?shop= and the banner fits without
   scrolling: the rows above). */
.photo-stage{container:stage/size;min-height:48px}
.video-pill{position:absolute;z-index:2;top:0;right:0;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px 0 4px;border:0;border-radius:99px;
  background:rgb(23 32 29 / .82);color:#fff;font:inherit;font-size:14px;font-weight:700;line-height:1;letter-spacing:.01em;white-space:nowrap;cursor:pointer;
  -webkit-backdrop-filter:saturate(180%) blur(12px);backdrop-filter:saturate(180%) blur(12px);box-shadow:0 3px 12px rgb(16 48 40 / .24);
  transition:transform 240ms var(--ease-out)}
/* 48px to press: the target reaches a little over the stickers, which are only a picture (nothing there to press) */
.video-pill::before{content:"";position:absolute;inset:-4px -4px -8px}
.video-pill:active{transform:scale(var(--press));transition-duration:90ms}
.video-pill-icon{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:#fff}
.video-pill-icon::before{content:"";margin-left:3px;border-left:9px solid var(--ink);border-block:5.5px solid transparent}
/* 「▶ 動画」 only where a long pill would cover the fan: a narrow spot, or a short one where the fan is small and the pill
   waits in the spot's far corner (its name stays in the aria-label) */
@container stage (max-width:330px){.video-pill-long{display:none}}
@container stage (max-height:139px){.video-pill-long{display:none}}
/* a tall spot: the pill sits on the fan's own top-right corner, not on the far corner of the spot */
@container stage (min-height:140px){.video-pill{top:max(0px,calc(50% - min(100cqh,max(230px,62cqh),92cqw / 1.45) / 2));
  right:max(0px,calc(50% - min(100cqh,max(230px,62cqh),92cqw / 1.45) * 1.45 / 2))}}
/* 浩樹さん 2026-09-28「以前の配置が良かった。画像はセンターで、動画ボタンは右上に。初めのように」: on phones too the fan stays
   centred and 「▶ 動画」 sits on its top-right corner (the rule above); the beside-the-fan layout (UI review r3 #18) is gone. */
.wstep.is-video :is(#photo-hero,#photo-frame,#video-pill,#shop-chip,#theme-chip,#idea-chip,#sample-chip){display:none!important}
.wstep.is-video .photo-stage{align-content:center;gap:6px}
/* opened from メニュー's 「動画を見る」 after a photo was chosen, 戻る/次へ would take the player's height: it waits until ✕ */
body:has(#step-photo.is-video) .action-bar{display:none}
/* the swipe rail of the top's videos takes the whole step while it is out (video-embed.css .vr; video-rail.js): the
   title, the photo choices, the notes, the step dots and the notices make way, so a square video gets most of the
   screen without any scrolling; ✕ gives them all back */
.wstep.is-video>:not(.photo-stage){display:none!important}
body:has(#step-photo.is-video) :is(.stepper,#kiosk-note,#form-alert,#precheck-warn,#launch-notice){display:none!important}
.wstep.is-video .photo-stage{flex:1 1 auto;min-height:0}
/* the rail reaches the screen's edges (its side cards peek from there), so nothing on its way clips it */
.wstep.is-video,.wstep.is-video .photo-stage{overflow:visible}
/* opening / closing the rail is one motion (app.js switchView), anchored to 「▶ 動画」 (--vt-origin: its centre): opening,
   the step settles back and fades (140ms) while the rail grows out of the pill (220ms); closing is the way back — the rail
   shrinks into the pill (180ms) while the step comes forward (220ms). The pill itself turns into the middle card (vr-hero:
   its box grows from the pill's to the card's, 300ms, the iOS sheet curve, rounded all the way — the pill's 18px radius is
   the card's 24px clamped) and the card back into the pill on ✕ (240ms) — UI review r3: the scale alone moved the rail
   3–6px, a plain crossfade. A short screen: the header and the capsule go and come back with it (below) while the main
   area takes their room (220ms). */
@supports (view-transition-name:none){
  .app-main{view-transition-name:stamp-main}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
  ::view-transition-old(stamp-main),::view-transition-new(stamp-main){transform-origin:var(--vt-origin,50% 50%)}
  ::view-transition-old(stamp-main){animation:140ms cubic-bezier(.23,1,.32,1) both vt-out}
  ::view-transition-new(stamp-main){animation:220ms cubic-bezier(.23,1,.32,1) both vt-in}
  html[data-vt=close]::view-transition-old(stamp-main){animation:180ms cubic-bezier(.23,1,.32,1) both vt-back-out}
  html[data-vt=close]::view-transition-new(stamp-main){animation:220ms cubic-bezier(.23,1,.32,1) both vt-back-in}
  ::view-transition-group(stamp-main){animation-duration:220ms;animation-timing-function:cubic-bezier(.32,.72,0,1)}
  ::view-transition-group(vr-hero){animation-duration:300ms;animation-timing-function:cubic-bezier(.32,.72,0,1);overflow:clip;border-radius:24px}
  html[data-vt=close]::view-transition-group(vr-hero){animation-duration:240ms}
  ::view-transition-old(vr-hero),::view-transition-new(vr-hero){height:100%;object-fit:cover}
}
@keyframes vt-out{to{opacity:0;transform:scale(.98)}}
@keyframes vt-in{from{opacity:0;transform:scale(.96)}}
@keyframes vt-back-out{to{opacity:0;transform:scale(.96)}}
@keyframes vt-back-in{from{opacity:0;transform:scale(.98)}}
@keyframes vt-head-out{to{opacity:0;transform:translate(0,-100%)}}
@keyframes vt-head-in{from{opacity:0;transform:translate(0,-100%)}}
/* a short screen with the rail out — a phone on its side, or 200% text on a phone held upright (UI review r3: there the
   header and the capsule left the card 42–134px) — the rail gets the whole screen height: the header and the bottom menu
   make way (like a pushed screen; ✕ or Esc closes it and brings them back; video-embed.css sizes the card).
   They go and come back with the switch (they vanished in one frame, and the header came back in one): the header slides up
   out of the way (180ms, the switch's picture of it: app-head) and back down (220ms); the capsule sinks 16px and fades as it
   goes (180ms; its display is held with allow-discrete, fixed where it was so the main area takes its room at once) and
   rises back by its own entrance (16px, 240ms, the chrome rules at the top of this file). Opened with a key, at once
   (body.at-once, app.js openWorkshop). (The capsule is not a picture of the switch too: WebKit crashed when both were.) */
@media (max-height:500px){
  body:has(#step-photo.is-video){grid-template-rows:minmax(0,1fr) auto auto}
  body:has(#step-photo.is-video) :is(.app-header,.bottom-nav){display:none}
  body:not(.at-once):has(#step-photo.is-video) :is(.bottom-nav){position:fixed;inset:auto 0 0;opacity:0;translate:0 16px;pointer-events:none;
    transition:opacity 180ms cubic-bezier(.23,1,.32,1),translate 180ms cubic-bezier(.23,1,.32,1),display 180ms allow-discrete}
  body:has(#step-photo.is-video) .screen{padding-block:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-bottom))}
  @supports (view-transition-name:none){
    html[data-vt] .app-header{view-transition-name:app-head}
    ::view-transition-old(app-head){animation:180ms cubic-bezier(.23,1,.32,1) both vt-head-out}
    ::view-transition-new(app-head){animation:220ms cubic-bezier(.23,1,.32,1) both vt-head-in}
  }
}
/* iPhone 「透明度を下げる」: 「▶ 動画」 and 「次へ ›」 are solid too, like the header and the capsule (the end of this file) */
@media (prefers-reduced-transparency:reduce){.video-pill{background:#17201d;-webkit-backdrop-filter:none;backdrop-filter:none}}
@media (prefers-reduced-transparency:reduce){.photo-next{background:#17201d;-webkit-backdrop-filter:none;backdrop-filter:none}}

/* ---------- 見本から選ぶ (sample picker) ---------- */
button.photo-option{width:100%;border:0;background:transparent;color:inherit;font:inherit;text-align:left}
.photo-option-icon.sample{background:#d9822b}
.sample-chip{display:flex;align-items:center;gap:8px;padding:0 0 0 6px;border-radius:99px;background:var(--accent-soft);color:var(--accent-press);font-size:13.5px;font-weight:600}
.sample-chip>img{flex:none;width:30px;height:30px;border-radius:50%;object-fit:cover;background:#fff;box-shadow:0 0 0 2px #fff,0 2px 6px rgb(16 48 40 / .15);transition:opacity 160ms var(--ease-out)}
/* while its copy flies in: gone at once (a fade-out left the same picture in two places), back in 160ms when it lands */
.sample-chip>img.arriving{opacity:0;transition:none}
.sample-chip span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sample-chip button{display:grid;place-items:center;flex:none;width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:inherit;font-size:18px;transition:background-color 120ms var(--ease-out)}
.sample-chip button:active{background:rgb(10 124 104 / .14)}
/* 期間限定テーマ: one warm banner on the photo step (orange = limited time, used nowhere else); tapping it becomes a chip */
.theme-banner{flex:none;display:flex;align-items:center;gap:12px;width:100%;min-height:58px;padding:7px 10px 7px 8px;border:0;border-radius:18px;color:var(--ink);font:inherit;text-align:left;cursor:pointer;
  background:linear-gradient(100deg,#fff4ea 0%,#fff 62%);box-shadow:var(--shadow-1),inset 0 0 0 1px rgb(217 96 47 / .2);transition:transform 240ms var(--ease-out)}
.theme-banner:active{transform:scale(var(--press));transition-duration:90ms}
.theme-thumbs{position:relative;flex:none;width:62px;height:44px}
.theme-thumbs img{position:absolute;top:1px;width:42px;height:42px;border-radius:12px;object-fit:contain;background:#fff;box-shadow:0 0 0 2px #fff,0 2px 8px rgb(16 48 40 / .14)}
.theme-thumbs img:first-child{left:0;rotate:-7deg}
.theme-thumbs img:last-child{left:20px;rotate:6deg}
.theme-text{display:grid;gap:1px;flex:1;min-width:0}
.theme-kicker{display:flex;flex-wrap:wrap;align-items:center;gap:2px 7px;font-size:12.5px;font-weight:600;line-height:1.3;color:#a4441c}
/* 「期間限定」: white on #a4441c = 6.14:1 (11.5px bold needs 4.5:1; the old #d9602f was 3.71:1). The kicker's own colour. */
.theme-kicker b{padding:1px 8px;border-radius:99px;background:#a4441c;color:#fff;font-size:11.5px;letter-spacing:.04em;flex:none;white-space:nowrap}
.theme-text strong{overflow:hidden;font-size:16.5px;font-weight:700;line-height:1.3;letter-spacing:-.01em;text-overflow:ellipsis;white-space:nowrap}
/* 200% text (a 195px-wide page): the banner gives its two thumbnails' room to its words, and the title wraps instead of
   being cut (「期間限定」 never breaks into a column; UI review r3) */
@media (max-width:260px){.theme-thumbs{display:none}.theme-text strong{white-space:normal}}
.theme-banner .chev{color:rgb(16 48 40 / .35);font-size:20px}
.theme-chip{background:rgb(217 96 47 / .11);color:#a4441c}
/* 修理の待ち時間（/?shop=）: a small welcome under the title, never a second banner */
.shop-chip{flex:none;display:flex;align-items:center;gap:6px;align-self:flex-start;max-width:100%;margin:-4px 0 0;padding:3px 11px 3px 9px;border-radius:99px;
  background:var(--accent-soft);color:var(--accent-press);font-size:13px;font-weight:600;line-height:1.35}
.shop-chip .ico{font-size:18px}
.shop-chip span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.theme-chip button:active{background:rgb(217 96 47 / .16)}
@media (hover:hover) and (pointer:fine){.theme-banner:hover{box-shadow:var(--shadow-2),inset 0 0 0 1px rgb(217 96 47 / .3)}}

/* 似せかた: an iOS segmented control; the white thumb slides to the chosen segment */
.seg{position:relative;flex:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;max-width:400px;margin:0 auto;padding:3px;border-radius:14px;background:rgb(16 48 40 / .07)}
.seg-thumb{position:absolute;top:3px;bottom:3px;left:3px;width:calc((100% - 6px) / 3);border-radius:11px;background:#fff;
  box-shadow:0 1px 2px rgb(0 0 0 / .06),0 3px 10px rgb(16 48 40 / .1);transition:transform 260ms var(--ease-spring)}
.seg:has(input[value=natural]:checked) .seg-thumb{transform:translateX(100%)}
.seg:has(input[value=chara]:checked) .seg-thumb{transform:translateX(200%)}
/* the words not chosen: --ink-2 (8.3:1 on the track; --muted was 4.14:1, under the 4.5:1 15px text needs — UI review r3 #36) */
.seg label{position:relative;display:grid;place-items:center;min-height:44px;padding:0 4px;border-radius:11px;cursor:pointer;font-size:15px;font-weight:600;color:var(--ink-2);white-space:nowrap;transition:color 200ms var(--ease-out)}
.seg label span{transition:transform 240ms var(--ease-out)}
.seg label:active span{transform:scale(var(--press));transition-duration:90ms}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label:has(input:checked){color:var(--ink)}
.seg label:has(input:focus-visible){outline:2px solid var(--focus-ring);outline-offset:-2px}
.wstep[data-enter] .seg{animation:tile-in 240ms var(--ease-out) 120ms both}
.wstep[data-step=plan] .seg{max-width:none}

/* おすそわけ: under the stickers rail on the private status screen */
.share-one{flex:none;align-self:center;min-height:48px;padding:0 24px;font-size:16px}
.share-one .ico{color:var(--accent)}
.share-one:disabled{opacity:.4;cursor:not-allowed;transform:none}

.sample-sheet[open]{display:flex;flex-direction:column;height:86dvh}
.sample-head{display:flex;align-items:center;gap:4px;margin:0 -6px 2px}
.sample-head h2{flex:1;margin:0;padding-left:6px;font-size:20px;letter-spacing:-.02em;outline:none;text-wrap:balance}
.sample-head #sample-back+h2{padding-left:0}
.sample-lead{margin:0 0 6px}
/* The list and the detail share one area: the detail covers the list, which keeps its scroll position underneath. */
.sample-body{position:relative;flex:1;min-height:0;margin:0 -18px}
/* 見本の一覧: every set, top to bottom. Its own scroll (momentum, no chaining to the page), 16px gutters. */
.sample-list{position:absolute;inset:0;display:grid;grid-template-columns:minmax(0,1fr);align-content:start;gap:14px;padding:6px 16px 24px;
  overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scroll-padding-block:8px}
.sample-list.is-covered{visibility:hidden}
.sample-card{display:grid;gap:8px;min-width:0;padding:10px 10px 8px;border-radius:22px;background:var(--bg);color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--line);animation:tile-in 260ms var(--ease-out) both;animation-delay:calc(var(--i,0) * 35ms)}
/* one page = 8 stickers (4×2); more pages swipe sideways inside the card */
.sample-pages{position:relative;display:grid;gap:6px;min-width:0}
.sample-pager{display:flex;gap:12px;min-width:0;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;border-radius:14px;outline-offset:2px}
.sample-pager::-webkit-scrollbar{display:none}
.sample-pager:focus-visible{outline:2px solid var(--focus-ring)}
.sample-page{flex:0 0 100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;min-width:0;scroll-snap-align:start;scroll-snap-stop:always}
.sample-page img{display:block;width:100%;height:auto;aspect-ratio:370/320;object-fit:contain;border-radius:12px;background:#fff;cursor:zoom-in;
  opacity:0;transition:opacity 220ms var(--ease-out),scale 240ms var(--ease-out);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-user-drag:none}
.sample-page img.is-loaded{opacity:1}
/* press exception: a small sticker thumbnail (~80px) — at .96 the press would barely show, so it presses deeper */
.sample-page img:active{scale:.94;transition-duration:220ms,90ms}
.sample-dots{display:flex;justify-content:center;align-items:center;gap:6px;height:8px}
.sample-dots i{width:6px;height:6px;border-radius:50%;background:rgb(16 48 40 / .18);transition:background-color 200ms var(--ease-out),transform 200ms var(--ease-out)}
.sample-dots i.on{background:var(--accent);transform:scale(1.3)}
.sample-nav{display:none}
@media (hover:hover) and (pointer:fine){
  .sample-nav{position:absolute;top:calc(50% - 25px);z-index:1;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;
    background:rgb(255 255 255 / .92);color:var(--ink);font-size:24px;box-shadow:0 1px 2px rgb(0 0 0 / .06),0 6px 16px rgb(16 48 40 / .14);
    opacity:0;transition:opacity 160ms var(--ease-out),transform 240ms var(--ease-out)}
  .sample-nav.prev{left:4px}.sample-nav.next{right:4px}
  .sample-pages:hover .sample-nav:not(:disabled){opacity:1}
  .sample-nav:active{transform:scale(var(--press));transition-duration:160ms,90ms}
  .sample-nav:disabled{pointer-events:none}
}
.sample-foot{display:flex;align-items:center;gap:10px;min-width:0;padding:0 2px 0 4px}
.sample-name{display:grid;flex:1;min-width:0;margin:0;line-height:1.35}
.sample-name b{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:15px;font-weight:700;color:var(--ink);overflow-wrap:anywhere}
.sample-name span{font-size:12.5px;font-weight:600;color:var(--muted)}
.sample-use{flex:none;min-height:44px;padding:0 16px;border:0;border-radius:99px;background:var(--accent);color:#fff;font-size:15px;font-weight:700;white-space:nowrap;
  box-shadow:0 4px 12px rgb(10 124 104 / .22);transition:transform 240ms var(--ease-out),background-color 160ms var(--ease-out)}
.sample-use:active{transform:scale(var(--press));background:var(--accent-press);transition-duration:90ms}
.sample-use:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.sample-viewonly{flex:none;padding:4px 12px;border-radius:99px;background:rgb(16 48 40 / .06);font-size:13px;font-weight:600;color:var(--muted)}
@media (hover:hover) and (pointer:fine){.sample-use:hover{background:var(--accent-press)}}
/* loading: a band of light crosses each card, left to right at the same speed as before (a card's width every 0.6s). It is a
   layer that slides (transform) — the card's background-position used to be repainted every frame, for as long as it loaded
   (UI review r4) — and linear, as a constant motion is. The card itself appears at once. */
.sample-card.skeleton{position:relative;display:block;height:228px;overflow:hidden;background:var(--bg);animation:none;box-shadow:none}
.sample-card.skeleton::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgb(255 255 255 / 0) 25%,#fff 50%,rgb(255 255 255 / 0) 75%);
  transform:translateX(-100%);animation:shimmer 1.2s linear infinite}
@keyframes shimmer{to{transform:translateX(100%)}}
.sample-detail{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;display:grid;gap:16px;align-content:start;padding:8px 18px 4px;background:var(--surface)}
.sample-images{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.sample-images img{width:100%;aspect-ratio:370/320;object-fit:contain;border-radius:10px;background:var(--bg);cursor:zoom-in;animation:tile-in 220ms var(--ease-out) both;transition:scale 240ms var(--ease-out)}
/* press exception: small sticker thumbnails, like the list's (.94) */
.sample-images img:active{scale:.94;transition-duration:90ms}
.sample-images img:nth-child(2){animation-delay:25ms}.sample-images img:nth-child(3){animation-delay:50ms}.sample-images img:nth-child(4){animation-delay:75ms}
.sample-images img:nth-child(5){animation-delay:100ms}.sample-images img:nth-child(6){animation-delay:125ms}.sample-images img:nth-child(7){animation-delay:150ms}.sample-images img:nth-child(8){animation-delay:175ms}
.sample-aspects{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;min-width:0;margin:0;padding:0;border:0}
.sample-aspects legend{padding:0 0 8px;font-size:15px;font-weight:700;color:var(--ink)}
.aspect{position:relative;display:grid;cursor:pointer}
.aspect input{position:absolute;opacity:0;pointer-events:none}
.aspect span{display:grid;justify-items:center;gap:2px;min-height:78px;align-content:center;padding:10px 6px;border-radius:14px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line-2);text-align:center;
  transition:box-shadow 160ms var(--ease-out),background-color 160ms var(--ease-out),transform 240ms var(--ease-out)}
.aspect span .ico{font-size:24px;color:var(--accent);margin-bottom:2px;transition:transform 220ms var(--ease-spring)}
.aspect input:checked+span .ico{transform:scale(1.12)}
.aspect input:disabled+span{opacity:.38;cursor:not-allowed}
.aspect b{font-size:16px;color:var(--ink)}
.aspect small{font-size:11.5px;color:var(--muted);line-height:1.3}
.aspect:active span{transform:scale(var(--press));transition-duration:160ms,160ms,90ms}
.aspect input:checked+span{box-shadow:inset 0 0 0 2px var(--accent);background:var(--accent-soft)}
.aspect input:focus-visible+span{outline:2px solid var(--focus-ring);outline-offset:2px}
#sample-apply{width:100%;flex:none}

/* ---------- choice tiles ---------- */
.grid{flex:1;min-height:0;display:grid;gap:9px}
.tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:0;padding:7px;
  border:0;border-radius:var(--r-md);background:var(--surface);box-shadow:var(--shadow-1),inset 0 0 0 1px var(--line);overflow:hidden;cursor:pointer;text-align:center;
  transition:transform 240ms var(--ease-out),box-shadow 220ms var(--ease-out),background-color 220ms var(--ease-out)}
.tile:active{transform:scale(var(--press));transition-duration:90ms,220ms,220ms}
.tile input{position:absolute;opacity:0;pointer-events:none}
.tile:has(input:checked),.tile[aria-pressed=true]{background:#fff;box-shadow:0 6px 20px rgb(10 124 104 / .16),inset 0 0 0 2px var(--accent)}
/* check badge pops in on the selected tile. The ✓ is lucide's check (lucide-static 0.544.0 icons/check.svg, its own path) drawn
   white on the badge: 16px with a 3 line on its 24px grid = 2px, as thick as the ✓ on a chosen photo (the font glyph was 1.1px) */
.tile::after{content:"";position:absolute;top:7px;right:7px;width:22px;height:22px;border-radius:50%;
  background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/16px no-repeat;
  opacity:0;transform:scale(.9);transition:opacity 150ms var(--ease-out),transform 200ms var(--ease-out)}
.tile:has(input:checked)::after,.tile[aria-pressed=true]::after{opacity:1;transform:scale(1)}
/* Windows' high contrast drops the chosen tile's ring (a box-shadow) and would paint the badge in the page's colour, hiding
   the white ✓ on a light theme: the badge keeps its own colours there, so the chosen tile stays marked */
@media (forced-colors:active){.tile::after{forced-color-adjust:none}}
.tile:has(input:disabled){opacity:.4;cursor:not-allowed}
/* 絵のタッチ: a swipe rail running edge to edge; the middle card is the selected style. A card is never taller than its spot
   (UI review r3: on 750×342 it was 68px tall and cut its picture and name): the spot is a size container, and a card's width
   is capped by its height — 14 + 12px padding, the picture (width − 20px) × 160/185, 8px, a 19.5px name — with the rail's
   28px padding, 4px and the 12px dots around it: width ≤ (spot height − 80px) × 185/160. Where there is room it changes
   nothing. */
.style-stage{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:4px;margin:0 -18px;container:style/size}
.wstep[data-enter] .style-stage{animation:tile-in 260ms var(--ease-out) both}
.style-rail{--cf-item:min(46%,calc((100cqh - 80px) * 1.1563));--cf-gap:10px;padding-block:14px}
.wstep[data-enter] .style-rail .tile{animation:none}
.style-rail .tile{gap:8px;padding:14px 10px 12px;border-radius:24px;
  transition:scale 240ms var(--ease-out),box-shadow 220ms var(--ease-out),background-color 220ms var(--ease-out)}
/* the app's one press on the rail's cards too (swipe.css .cf>*, on `scale`): down in 90ms, back in 240ms (it came back in 140) */
.style-rail .tile:active{transition-duration:90ms,220ms,220ms}
.style-rail img{width:100%;height:auto;aspect-ratio:185/160;object-fit:contain}
.style-rail span{font-size:15px;font-weight:600;white-space:nowrap;line-height:1.3;color:var(--ink)}
.style-rail .tile::after{width:26px;height:26px;background-size:18px;top:9px;right:9px}
@media (min-width:700px){.style-rail{--cf-item:min(30%,calc((100cqh - 80px) * 1.1563))}}
.word-grid{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr))}
.word-tile .word-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--bg);color:var(--ink);transition:background-color 220ms var(--ease-out),color 220ms var(--ease-out)}
.word-icon .ico{font-size:26px}
.word-tile[aria-pressed=true] .word-icon{background:var(--accent);color:#fff}
/* a name that wraps breaks between its words (index.html <wbr>: 「沖縄のおばー・／おじー」, never 「…お／じー」 — UI review r3 #41) */
.word-tile span{font-size:13px;font-weight:600;line-height:1.35;color:var(--ink);word-break:keep-all;overflow-wrap:anywhere}
.plan-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));max-height:360px}
.plan-tile{align-items:flex-start;justify-content:flex-end;padding:16px;text-align:left}
.plan-tile strong{font-size:32px;line-height:1;font-weight:700;letter-spacing:-.03em}
.plan-tile b{font-size:17px;font-weight:600;color:var(--accent)}
/* 「税込」 beside the price it belongs to (it was a line of fine print under the tiles; UI review r3 #33) */
.plan-tile .tax{margin-left:3px;font-size:11px;font-weight:600;color:var(--muted)}
.plan-tile small{font-size:12px;color:var(--muted)}
/* The count tiles get whatever height is left (short phones, the 似せかた control, the notes): they tighten by that height. */
.plan-grid{container:plans/size}
@container plans (max-height:229px){.plan-tile{gap:1px;padding:10px 12px}.plan-tile strong{font-size:24px}.plan-tile b{font-size:15.5px;line-height:1.3}.plan-tile small{font-size:11.5px;line-height:1.3}}
@container plans (max-height:169px){.plan-tile{padding:6px 10px}.plan-tile strong{font-size:22px}.plan-tile small{display:none}}
@container plans (max-height:119px){.plan-tile{flex-direction:row;align-items:center;justify-content:flex-start;gap:8px}
  /* in a row the ✓ would sit on the price (40枚 ¥2,980 on a phone on its side): the chosen count is marked by its ring alone */
  .plan-tile::after{display:none}}

/* ---------- send step ---------- */
.summary{display:flex;align-items:center;gap:12px;padding:10px;border-radius:var(--r-md);background:var(--surface);box-shadow:var(--shadow-1),inset 0 0 0 1px var(--line);font-size:13px;color:var(--ink-2);line-height:1.5}
.summary img{width:52px;height:52px;border-radius:10px;object-fit:cover;flex:none}
.field{display:grid;gap:6px;font-size:13px;font-weight:600;color:var(--muted);letter-spacing:.01em}
.field input,.field textarea{width:100%;min-height:50px;padding:12px 14px;border:0;border-radius:var(--r-sm);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line-2);
  font-size:17px;font-weight:500;color:var(--ink);transition:box-shadow 180ms var(--ease-out)}
/* the ring is a box-shadow; the transparent outline is what Windows' high contrast (forced-colors) paints instead */
.field input:focus,.field textarea:focus{outline:2px solid transparent;outline-offset:0;box-shadow:inset 0 0 0 2px var(--accent),0 0 0 4px var(--accent-soft)}
.field input[aria-invalid=true]{box-shadow:inset 0 0 0 2px var(--bad);animation:shake 280ms var(--ease-out)}
@keyframes shake{20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
.field-error{font-size:13px;font-weight:600;color:var(--bad)}
.field-error:empty{display:none}
/* the whole row's height is pressed to tick it (UI review r3 #34: the label was 22px tall, the row's 8px above and below were
   dead): no padding above or below, and the label stretches to it (52px at least) */
.consent-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 8px 0 14px;border-radius:var(--r-md);background:var(--surface);box-shadow:var(--shadow-1),inset 0 0 0 1px var(--line)}
.consent-row .check{align-self:stretch;align-items:center;min-height:52px}
/* 利用規約・プライバシー in the line of text under it: 44px to press, the words where they were */
.wstep[data-step=send] .hint a{display:inline-block;padding:12px 4px;margin:-12px -4px}
/* and in the consent sheet (a short phone hides that line: the max-height:600px rules) */
.consent-links{display:flex;flex-wrap:wrap;gap:0 18px;margin:4px 0 0;padding:0 2px}
.consent-links a{display:inline-flex;align-items:center;min-height:44px;font-size:14px;font-weight:600}
/* the text gives way (it scrolls inside) so the links and 同意する stay on a short screen — a phone on its side put
   同意する 19–95px under the bottom edge */
#consent-sheet[open]{display:flex;flex-direction:column}
#consent-sheet .consent-text{flex:0 1 auto;min-height:64px}
/* opened, the sheet starts at its title (index.html autofocus, like 見本's sheet): not on 利用規約, the first link, and no ring
   on 閉じる after a tap (Safari put it there) */
#consent-title{outline:none}
/* where it wraps (a phone on its side, half the width), it breaks between phrases (index.html <wbr>), never 「同／意する」 */
.consent-row .check span{word-break:keep-all;overflow-wrap:anywhere}
.check{display:flex;align-items:flex-start;gap:10px;font-size:14px;font-weight:600;line-height:1.5}
.check input{width:22px;height:22px;flex:none;margin:0;accent-color:var(--accent)}
/* 見本集のお知らせ (free plan only): one quiet line under the consent row */
.gallery-note{flex:none;display:flex;align-items:flex-start;gap:6px;margin:0;font-size:12px;font-weight:600;line-height:1.45;color:var(--muted)}
.gallery-note .ico{font-size:18px;color:var(--accent)}
.optout-row{display:flex;flex-wrap:wrap;align-items:center;column-gap:4px}
.optout-link{display:inline-flex;align-items:center;min-height:44px;padding:0 6px;margin:-8px -6px;border-radius:99px;font-weight:600;color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.optout-link:active{background:var(--accent-soft)}
.link-button{flex:none;min-height:44px;padding:0 10px;border:0;border-radius:99px;background:none;color:var(--accent);font-weight:600;transition:background-color 160ms var(--ease-out)}
.link-button:active{background:var(--accent-soft)}

/* ---------- buttons ---------- */
/* 戻る／次へ: whenever it is out, the capsule is hidden (see .bottom-nav), so this bar is the bottom one and keeps the home
   indicator's room itself */
.action-bar{display:flex;gap:10px;padding:10px 18px max(10px,env(safe-area-inset-bottom));background:rgb(243 246 245 / .82);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}
body[data-screen=status] .action-bar,body[data-screen=receipt] .action-bar{display:none}
/* The press, one for every button (UI review #7): down to var(--press) (.96) in 90ms, back in 240ms. app.css and
   video-embed.css keep to it; feel.js adds the touchstart listener iPhone Safari needs to show :active at all. Only two
   exceptions, each noted where it is: the big photo box (.985) and the small sticker thumbnails (.94). */
.primary,.secondary{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:54px;padding:0 22px;border-radius:99px;font-size:17px;font-weight:600;letter-spacing:-.01em;text-decoration:none;white-space:nowrap;
  transition:transform 240ms var(--ease-out),background-color 180ms var(--ease-out),box-shadow 200ms var(--ease-out),opacity 200ms}
.primary{flex:1;border:0;background:var(--accent);color:#fff;box-shadow:0 6px 18px rgb(10 124 104 / .28)}
.primary:active{transform:scale(var(--press));background:var(--accent-press);box-shadow:0 2px 8px rgb(10 124 104 / .24);transition-duration:90ms}
.primary:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}
/* an icon beside a button's words: 24px by its 17px words (2.4px lines, the bottom menu's weight) */
.primary .ico,.secondary .ico{font-size:24px}
/* ‹ 戻る: lucide's chevron is 6px wide in the middle of its 24px square; pulled in so it reads as one mark with its word */
#step-back .ico{margin:0 -4px 0 -8px}
#step-next .ico{transition:transform 220ms var(--ease-spring)}
.secondary{border:0;background:rgb(16 48 40 / .06);color:var(--ink)}
.secondary:active{transform:scale(var(--press));background:rgb(16 48 40 / .11);transition-duration:90ms}
@media (hover:hover) and (pointer:fine){
  .primary:hover:not(:disabled){background:var(--accent-press)}
  #step-next:hover:not(:disabled) .ico{transform:translateX(3px)}
  .secondary:hover{background:rgb(0 0 0 / .08)}
  .tile:hover{box-shadow:var(--shadow-2),inset 0 0 0 1px var(--line-2)}
  .icon-button:hover{background:rgb(0 0 0 / .05)}
}
#step-back{flex:0 0 104px}
.action-bar .primary{min-width:0}
@media (max-width:374px){#create-button{padding:0 12px;font-size:15.5px}#step-back{flex-basis:92px;padding:0 14px}}
/* phones up to ~740px tall (iPhone 13 390x664): the send step carries the free-plan gallery line too, so it tightens a little */
@media (max-height:740px){.wstep[data-step=send]{gap:8px}.summary{padding:6px 8px}.summary img{width:44px;height:44px}}
/* narrow, medium-height phones (Galaxy S9+ 320x658): the send step must still fit without scrolling */
@media (max-width:360px) and (max-height:700px){.wstep[data-step=send]{gap:8px}.wstep[data-step=send] .step-title{font-size:24px}.summary{padding:6px}.summary img{width:40px;height:40px}
  .wstep[data-step=send] .field input{min-height:44px;padding:8px 12px}}

/* ---------- status (email link) ---------- */
.status{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;gap:10px}
.status-head{display:flex;gap:12px;align-items:flex-start}
.status-head h1{margin:0;font-size:24px;line-height:1.25;letter-spacing:-.02em;outline:none}
.status-head p{margin:6px 0 0;font-size:15px;color:var(--ink-2)}
/* 制作中の点: a soft ring keeps going out from it, 9px past the dot as before, and never stops (「視差効果を減らす」 too). It is a
   disc behind the dot that grows and fades — transform and opacity only, so the ring is not repainted every frame (the old
   pulse moved box-shadow; UI review r3). isolation keeps the disc over the pale halo and under the dot (the same colour). */
.status-dot{position:relative;isolation:isolate;flex:none;width:12px;height:12px;margin-top:9px;border-radius:50%;background:#f3ae34;box-shadow:0 0 0 5px #fff1cf}
.status-dot::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:50%;background:rgb(243 174 52 / .35);animation:pulse 2s var(--ease-out) infinite;pointer-events:none}
@keyframes pulse{from{transform:scale(1);opacity:1}to{transform:scale(2.5);opacity:0}}
.progress{display:flex;align-items:center;gap:10px;padding:14px;border-radius:var(--r-md);background:var(--surface);box-shadow:var(--shadow-1),inset 0 0 0 1px var(--line);font-size:14px;font-weight:600;color:var(--accent-press)}
.spinner{width:18px;height:18px;border-radius:50%;border:2.5px solid var(--accent-soft);border-top-color:var(--accent);animation:spin .9s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}
.gallery-title{margin:6px 0 0;font-size:17px;letter-spacing:-.01em}
.previews{--cf-item:50%;--cf-gap:10px;flex:none;margin:0 -18px;padding-block:12px}
.previews img{width:100%;height:auto;aspect-ratio:370/320;object-fit:contain;border-radius:18px;background:#fff;box-shadow:var(--shadow-1),inset 0 0 0 1px var(--line)}
/* no pictures yet (waiting for the payment, being drawn): the empty row and its dots take no room (they left a 66px gap) */
#previews:empty,#previews:empty+#previews-dots{display:none}
.card{display:grid;gap:10px;padding:16px;border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-1),inset 0 0 0 1px var(--line)}
.card h2{margin:0;font-size:17px;letter-spacing:-.01em}
.card.attention{box-shadow:inset 0 0 0 2px rgb(196 43 28 / .3);background:#fffafa}
.rating{display:flex;flex-wrap:wrap;gap:6px}
.rating input{position:absolute;opacity:0}
.rating span{display:inline-flex;align-items:center;min-height:44px;padding:6px 14px;border-radius:99px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line-2);color:#b07800;font-weight:700;transition:box-shadow 160ms,background-color 160ms}
.rating input:checked+span{box-shadow:inset 0 0 0 2px var(--accent);background:var(--accent-soft)}
.status-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
/* two lines break between phrases (index.html <wbr>), never 「コ／ピー」 */
.status-actions .secondary{min-height:48px;padding:0 10px;font-size:14px;white-space:normal;line-height:1.3;word-break:keep-all;overflow-wrap:anywhere}
.status-actions #retry-status{grid-column:1/-1}
/* お試しの後の「16〜40枚でスタンプを作成する」: 一番上に横いっぱい（浩樹さん 2026-10-18「ボタンがない」） */
.status-actions #new-order.primary{grid-column:1/-1;order:-1;min-width:0;min-height:56px;padding:8px 18px;white-space:normal;line-height:1.3;word-break:keep-all;overflow-wrap:anywhere}
/* 進み具合 before anything was sent: one picture (blank sticker cards, 360px for 3x), one line that says what is missing,
   one button — no explanation (the メニュー has the how-to). A tab screen: it shows at once, nothing rises in. */
.status-empty{justify-content:center;align-items:center;gap:14px;text-align:center}
.status-empty img{width:120px;height:120px;object-fit:contain;filter:drop-shadow(0 10px 18px rgb(16 48 40 / .16))}
.status-empty h1{margin:0;font-size:20px;font-weight:700;line-height:1.4;letter-spacing:-.01em;outline:none}
.status-empty .primary{flex:none;min-width:200px;min-height:56px}
/* a phone on its side: a smaller picture, so 作る keeps its distance from the menu */
@media (max-height:430px){.status-empty{gap:8px}.status-empty img{width:72px;height:72px}}

/* ---------- アイデア (app.js showIdeas): the idea collection as a swipe rail, like the style step ----------
   The card in the middle is full size and the others shrink like the Dock (swipe.js coverflow); the middle one is used.
   A card is as big as the spot lets it be: its picture is square, so its width follows the spot's height (its name, its
   style × words and the dots take 126px). A short spot (a phone on its side) lays the card out sideways: picture left,
   words right. The cards are one height (the rail stretches them), with room for two lines of each. */
/* 「このアイデアで作る」 belongs to the cards, not to the menu: 22px above the menu (this screen's own bottom padding), more than
   the 8–18px to the dots on a phone (UI review r3: it was 14px, closer to the menu than to the dots) */
.ideas{gap:10px;padding-bottom:22px}
body[data-screen=ideas] .action-bar{display:none}
.ideas-stage{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:0;margin:0 -18px;container:ideas/size}
.ideas-rail{--cf-item:min(74%,calc(100cqh - 126px),400px);--cf-gap:12px;padding-block:10px}
.idea-tile{display:grid;align-content:start;gap:6px;padding:10px 10px 12px;border:0;border-radius:26px;background:var(--surface);color:var(--ink);font:inherit;text-align:left;
  box-shadow:var(--shadow-1),inset 0 0 0 1px var(--line)}
/* its corners follow the card's: 26px − the card's 10px padding = 16px */
.idea-art{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:2px;aspect-ratio:1;min-width:0;padding:8px;border-radius:16px;background:var(--bg)}
.idea-art:has(>img:only-child){grid-template-columns:minmax(0,1fr)}
.idea-art img{display:block;width:100%;height:100%;min-width:0;min-height:0;object-fit:contain}
/* lines break only at the phrase marks app.js puts in (<wbr>, app.js phrases) and at punctuation and spaces — the same in Safari
   and Chrome (auto-phrase was Chrome only: Safari broke 「おはよ／う」); a phrase too long for the card still wraps. An opening
   bracket stays with the letter after it (.keep: Safari's keep-all broke 「…の「／おはよう」) */
.idea-name,.idea-meta{display:-webkit-box;overflow:hidden;padding:0 2px;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:keep-all;overflow-wrap:anywhere;text-wrap:pretty}
.idea-tile .keep{white-space:nowrap}
.idea-name{font-size:17px;font-weight:700;line-height:1.3;letter-spacing:-.01em}
.idea-meta{font-size:13.5px;font-weight:600;line-height:1.45;color:var(--ink-2)}
.ideas>.primary{flex:none}
#ideas-message{text-align:center}
@media (hover:hover) and (pointer:fine){.idea-tile:hover{box-shadow:var(--shadow-2),inset 0 0 0 1px var(--line-2)}}
/* iPad and computers: the rail runs to the screen's edges (the title and the button keep the page's column), so the cards
   beside the middle one are whole, not cut at the column */
@media (min-width:700px){.ideas-stage{margin-inline:calc(50% - 50vw)}}
/* …and the card grows with the screen (it stopped at 400px, with ~230px empty above and below it on an iPad held upright):
   68% of the width, as tall as the spot allows, 486px at most (UI review r3). 486: each of its four pictures is then 224px
   (486 − 2×10 − 2×8 − 2, halved), 448 pixels on a 2x screen — what the smallest crop gives (the 640 files, app.js ideaPicture,
   are the stickers as cut, 448–520px on their longer side, never enlarged; at 520px 7 of today's drew at 95–99%, UI review r4) */
@media (min-width:700px){.ideas-rail{--cf-item:min(68%,calc(100cqh - 126px),486px)}}
/* loading: a small spinner, only if the ideas take longer than 400ms */
.ideas-stage.is-loading::after{content:"";position:absolute;top:calc(50% - 12px);left:calc(50% - 12px);width:24px;height:24px;box-sizing:border-box;border-radius:50%;
  border:2.5px solid var(--accent-soft);border-top-color:var(--accent);animation:spin .9s linear infinite,fade 200ms var(--ease-out) 400ms backwards}
@container ideas (max-height:300px){
  .ideas-rail{--cf-item:min(86%,calc(100cqh + 124px))}
  .idea-tile{grid-template-columns:calc(100cqh - 58px) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);column-gap:12px;align-items:start}
  .idea-art{grid-row:1/3}
  .idea-name{-webkit-line-clamp:3}
}
@media (orientation:landscape) and (max-height:430px){
  .ideas{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);grid-template-rows:auto minmax(0,1fr) auto;column-gap:18px;row-gap:8px}
  .ideas>.step-title{grid-area:1/1}
  #ideas-message{grid-area:2/1;align-self:start;text-align:left}
  .ideas>.primary{grid-area:3/1}
  .ideas-stage{grid-area:1/2/4/3;margin:0 -18px 0 0}
}
/* text at 200% on a phone (a 160–215px-wide page, or 160–195px tall on its side): the cards keep a real size and their words
   are all there, one under the other, and the screen scrolls to 「このアイデアで作る」 (they overlapped by 26–32px and ran out of
   the card, and on its side the button was under the menu; WCAG 1.4.4, UI review r3) */
@media (max-width:260px),(max-height:260px){
  .ideas{display:flex;overflow-y:auto}
  .ideas-stage{flex:none;height:340px;margin:0 -18px}
  .idea-tile{grid-template-columns:none;grid-template-rows:none;grid-auto-rows:auto}
  .idea-name,.idea-meta{display:block;-webkit-line-clamp:unset;overflow:visible}
}

/* ---------- receipt (after sending) ---------- */
.receipt{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;gap:14px;padding-bottom:20px}
.receipt>*{flex-shrink:0}
/* the sections rise in one after another (40ms apart) and the ✓ pops, the first time the receipt appears — once: app.js
   marks it .settled when another screen takes its place, so a tab back to it shows it at once (a CSS animation restarts on
   every display:none → shown; UI review r3). Sent with the CRT show over the page, they wait at their first frame until the
   show has gone (html.crt-open, crt-show.js), so the rise is what is seen as the page comes back. */
.receipt:not(.settled)>*{animation:rise 280ms var(--ease-out) both}
.receipt>*:nth-child(2){animation-delay:40ms}.receipt>*:nth-child(3){animation-delay:80ms}.receipt>*:nth-child(4){animation-delay:120ms}
.receipt>*:nth-child(5){animation-delay:160ms}.receipt>*:nth-child(6){animation-delay:200ms}.receipt>*:nth-child(n+7){animation-delay:240ms}
@keyframes rise{from{opacity:0;transform:translate3d(0,10px,0)}}
.receipt-hero{display:grid;justify-items:center;gap:10px;padding:10px 0 2px;text-align:center}
.receipt-badge{position:relative;isolation:isolate;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--accent);color:#fff;font-size:34px;
  box-shadow:0 10px 28px rgb(10 124 104 / .35)}
.receipt:not(.settled) .receipt-badge{animation:badge-pop 300ms var(--ease-out) both}
.receipt:not(.settled) .receipt-badge .ico{animation:check-in 200ms var(--ease-out) 120ms both}
@keyframes badge-pop{from{opacity:0;transform:scale(.9)}}
@keyframes check-in{from{opacity:0;transform:scale(.9)}}
/* while the preview is being drawn, a soft ring keeps going out from the ✓ (a status, not an entrance: it runs every time,
   「視差効果を減らす」 too). The same ring as before — 18px out from the badge, fading — drawn as a disc behind the ✓ that grows
   1 → 1.5625 (64 → 100px) and fades: transform and opacity only, so it is not repainted every frame (the old one moved
   box-shadow; UI review r3). isolation keeps it under the ✓ and over the badge's own shadow; on the badge it is the badge's
   own colour, so only the part outside shows. */
.receipt-badge[data-state=making]::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:50%;background:rgb(10 124 104 / .35);animation:ring 2.2s var(--ease-out) 600ms infinite;pointer-events:none}
html.crt-open .receipt:not(.settled)>*,html.crt-open .receipt:not(.settled) .receipt-badge,html.crt-open .receipt:not(.settled) .receipt-badge::after,html.crt-open .receipt:not(.settled) .receipt-badge .ico{animation-play-state:paused}
@keyframes ring{from{transform:scale(1);opacity:1}to{transform:scale(1.5625);opacity:0}}
.receipt-badge[data-state=photo_rejected],.receipt-badge[data-state=attention]{background:#d9602f;box-shadow:0 10px 28px rgb(217 96 47 / .3)}
.receipt-kicker{margin:0;font-size:13px;font-weight:600;color:var(--accent);letter-spacing:.02em}
.receipt-no{margin-left:6px;color:var(--muted);font-weight:500;font-variant-numeric:tabular-nums}
.receipt-hero h1{margin:2px 0 4px;font-size:30px;line-height:1.14;letter-spacing:-.025em;outline:none}
.receipt-hero p#receipt-lead{margin:0 auto;max-width:30em;font-size:15px;color:var(--ink-2);line-height:1.6}
.monitor{position:relative;display:grid;gap:4px;padding:14px 16px;border:0;border-radius:var(--r-lg);background:#050b08;color:#41ff7e;text-align:left;overflow:hidden;cursor:pointer;
  font-family:"VT323","DotGothic16",ui-monospace,monospace;box-shadow:var(--shadow-2),inset 0 0 30px rgb(0 0 0 / .9);transition:transform 240ms var(--ease-out)}
.monitor:active{transform:scale(var(--press));transition-duration:90ms}
.monitor::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(to bottom,rgb(0 0 0 / 0) 0 2px,rgb(0 0 0 / .35) 2px 3px)}
.monitor>*{text-shadow:0 0 6px currentColor}
.monitor-top{display:flex;justify-content:space-between;font-size:18px;color:#9dffc0}
.monitor-live{color:#ff5a76}
.monitor-live::before{content:"";display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:50%;background:#ff3355;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.monitor-line{font-size:19px;color:#fff}
.monitor-meter{display:flex;justify-content:space-between;gap:8px;font-size:18px;font-variant-numeric:tabular-nums}
.monitor-marquee{overflow:hidden;white-space:nowrap;font-size:17px;color:#ffe85a}
.monitor-marquee span{display:inline-block;padding-left:100%;animation:marquee 16s linear infinite}
@keyframes marquee{to{transform:translateX(-100%)}}
.monitor-cta{display:flex;align-items:center;gap:6px;font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans",sans-serif;font-size:13px;font-weight:600;color:#9dffc0;text-shadow:none}
.monitor-cta .ico{font-size:18px}
.monitor[data-state=ready]{color:#ffe85a}
.monitor[data-state=photo_rejected],.monitor[data-state=attention]{color:#ff6b81}
.receipt-qr{display:grid;justify-items:center;gap:10px;padding:20px 16px 16px;border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-1),inset 0 0 0 1px var(--line);text-align:center}
.receipt-qr h2{margin:0;font-size:19px;letter-spacing:-.015em}
.receipt-qr img{width:min(60vw,236px);height:auto;aspect-ratio:1;border-radius:14px;image-rendering:pixelated;box-shadow:inset 0 0 0 1px var(--line)}
.receipt-qr-note{margin:0;font-size:14px;color:var(--muted)}
.receipt-qr-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
.receipt-qr-actions .secondary{min-height:48px;padding:0 10px;font-size:15px}
.receipt-qr .primary{width:100%}
.receipt-card{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:0;border-radius:var(--r-lg);overflow:hidden;background:var(--line);box-shadow:var(--shadow-1),inset 0 0 0 1px var(--line)}
.receipt-card div{padding:12px 14px;background:var(--surface);min-width:0}
.receipt-card dt{font-size:12px;font-weight:600;color:var(--muted)}
.receipt-card dd{margin:2px 0 0;font-size:15px;font-weight:600;overflow-wrap:anywhere}
.receipt-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.receipt-actions .secondary{min-height:50px;padding:0 12px;font-size:15px}
/* by the receipt's 15px words the icons are 22px (2.2px lines) */
.receipt-qr-actions .ico,.receipt-actions .ico{font-size:22px}

/* ---------- メニュー + sheets: one sheet language — they rise from the bottom (340ms), follow the finger when pulled by the
   つまみ or the title, and leave the same way (240ms, or on at the finger's speed when a pull lets go; app.js pullToClose,
   handoff, sheetMotion, closeMenu). Esc closes at once. ---------- */
@keyframes fade{from{opacity:0}}
/* メニュー (the bottom menu's メニュー; UI review #3): grouped like iOS Settings — 見る・読む／共有／設定 — and the legal pages on
   one quiet line. As tall as its rows, up to 16px under the top; where even that is short (a phone on its side) it scrolls
   inside and fades out at the bottom so the rest is clearly there (.has-more, app.js). The veil is its own layer, so it can
   lighten with the pull while the sheet stays solid. */
.drawer{position:fixed;inset:0;z-index:1200;display:flex;align-items:flex-end;justify-content:center}
.drawer-veil{position:absolute;inset:0;background:rgb(0 0 0 / .3);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fade 200ms var(--ease-out) backwards}
.drawer-panel{position:relative;display:flex;flex-direction:column;width:min(100%,560px);max-height:calc(100dvh - max(16px,env(safe-area-inset-top) + 8px));
  border-radius:26px 26px 0 0;background:var(--bg);box-shadow:0 -10px 40px rgb(0 0 0 / .12);animation:sheet-in 340ms var(--ease-spring) both}
/* opened with a key: no motion (keyboard actions do not animate) */
.drawer.is-instant :is(.drawer-veil,.drawer-panel){animation:none}
/* on its way down it takes no taps: they go through to メニュー, which turns it back from where it is (app.js closeMenu) */
.drawer.is-closing{pointer-events:none}
.drawer-grab{flex:none;height:27px;touch-action:none;cursor:grab}
.drawer-grab::before{content:"";display:block;width:38px;height:5px;margin:10px auto 0;border-radius:99px;background:rgb(0 0 0 / .14)}
/* the title starts where the rows' words start (16px + 16px in), and ✕'s middle sits as far in from the right */
.drawer-head{flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 10px 6px 32px;touch-action:none}
.drawer-head h2{margin:0;font-size:20px;font-weight:700;line-height:1.3;letter-spacing:-.02em}
/* rows keep their full height when the screen is short (max-content: never squeezed into each other), and the list scrolls */
.drawer-body{flex:0 1 auto;min-height:0;display:grid;grid-auto-rows:max-content;align-content:start;gap:14px;padding:4px 16px max(16px,calc(env(safe-area-inset-bottom) + 8px));
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.drawer-side{display:contents}
.drawer-body.has-more{-webkit-mask-image:linear-gradient(#000 calc(100% - 40px),transparent);mask-image:linear-gradient(#000 calc(100% - 40px),transparent)}
.drawer-group{display:grid;border-radius:var(--r-md);background:var(--surface);box-shadow:var(--shadow-1),inset 0 0 0 1px var(--line);overflow:hidden}
.drawer-group>:is(a,button){position:relative;display:flex;align-items:center;min-height:50px;padding:0 16px;border:0;background:none;color:var(--ink);
  font:inherit;font-size:17px;font-weight:500;line-height:1.3;text-decoration:none;text-align:left;cursor:pointer;transition:background-color 140ms var(--ease-out);gap:12px}
/* each row's icon (UI review r3 #5; app.js menuIcons): lucide's SVG, white 18px (the 2.4 line) on a 30px colored square with
   9px corners, as the photo step shows its ways to choose — four colors, one per kind: 動画 orange, about the service teal,
   reading and sharing blue, the settings ink. A row that takes you to another screen or page ends in the photo step's ›. */
.menu-ico{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:9px;color:#fff;font-size:18px;background:var(--ink-2)}
.menu-ico.is-play{background:#d9822b}
.menu-ico:is(.is-info,.is-circle-help){background:var(--accent)}
.menu-ico:is(.is-book-open,.is-share-2){background:#2f6fd8}
.drawer-group .chev{margin-left:auto;color:rgb(16 48 40 / .35);font-size:20px}
/* 200% text on a phone (a 195px-wide page): the words get the row (the icons and › are decoration; the words name each row),
   so each row keeps to one or two lines */
@media (max-width:260px){.menu-ico,.drawer-group .chev{display:none}.drawer-group>:not([hidden])~:is(a,button)::before{left:16px}}
/* hairlines between the rows, from the words' edge (16px + the 30px icon + 12px; a hidden first row draws none) */
.drawer-group>:not([hidden])~:is(a,button)::before{content:"";position:absolute;top:0;left:58px;right:0;height:1px;background:var(--line)}
/* a list row answers the press by shading (like iOS), not by shrinking */
.drawer-group>:is(a,button):active{background:rgb(16 48 40 / .06)}
.drawer-group>:is(a,button):focus-visible{outline-offset:-3px;border-radius:14px}
.drawer-group>.switch-row .switch{margin-left:auto}
.drawer-legal{display:flex;flex-wrap:wrap;gap:0 14px;margin:-4px 0 0;padding:0 8px 0 16px}
.drawer-legal a{display:inline-flex;align-items:center;min-height:44px;font-size:13px;font-weight:600;color:var(--muted);text-decoration:none}
.drawer-legal a:active{color:var(--ink)}
@media (hover:hover) and (pointer:fine){.drawer-group>:is(a,button):hover{background:rgb(16 48 40 / .04)}.drawer-legal a:hover{color:var(--ink);text-decoration:underline}}
@media (max-height:640px){.drawer-group>:is(a,button){min-height:44px}}
/* 管理者ログイン (富村の決定 ⑧, 2026-09-28): it stays in the menu as the sheet's last row — the whole width to press, 44px tall like
   the legal links, its words as large as theirs (13px) and as quiet: grey on the sheet, no card, no icon; the row shades when
   pressed, as the list rows do. 10px up, so it reads as the legal line's neighbour (4px apart, 0 on a phone on its side). */
.drawer-admin{display:flex;align-items:center;min-height:44px;margin:-10px 0 0;padding:0 16px;border-radius:12px;color:var(--muted);font-size:13px;font-weight:600;
  text-decoration:none;transition:background-color 140ms var(--ease-out),color 140ms var(--ease-out)}
.drawer-admin:active{background:rgb(16 48 40 / .06);color:var(--ink)}
.drawer-admin:focus-visible{outline-offset:-3px}
@media (hover:hover) and (pointer:fine){.drawer-admin:hover{background:rgb(16 48 40 / .04);color:var(--ink)}}
/* a phone on its side: two columns (見る・読む | 共有・設定) and a slimmer top, so it fits without scrolling on most phones */
@media (orientation:landscape) and (max-height:500px){
  .drawer-body{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px;padding-bottom:max(8px,env(safe-area-inset-bottom))}
  .drawer-side{display:grid;grid-auto-rows:max-content;align-content:start;gap:10px}
  .drawer-legal,.drawer-admin{grid-column:1/-1}
  .drawer-grab{height:20px}.drawer-grab::before{margin-top:8px}
  .drawer-head{padding-bottom:0}
  /* each column 298px (not 258px) when the phone lets it: a row's icon and › leave its words 192px, so 「ワークショップの動画」
     stays on one line (UI review r3 #5) */
  .drawer-panel{width:min(100%,640px)}
}
.switch{position:relative;flex:none;width:51px;height:31px;border-radius:99px;background:rgb(120 120 128 / .18);transition:background-color 220ms var(--ease-out)}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 3px 8px rgb(0 0 0 / .15),0 1px 1px rgb(0 0 0 / .06);transition:transform 260ms var(--ease-spring)}
.switch-row[aria-checked=true] .switch{background:var(--accent)}
.switch-row[aria-checked=true] .switch::after{transform:translateX(20px)}
.sheet{width:100%;max-width:560px;max-height:86dvh;margin:auto auto 0;padding:10px 18px calc(env(safe-area-inset-bottom) + 18px);border:0;border-radius:26px 26px 0 0;color:var(--ink);background:var(--surface);
  box-shadow:0 -10px 40px rgb(0 0 0 / .12)}
.sheet::before{content:"";display:block;width:38px;height:5px;margin:0 auto 12px;border-radius:99px;background:rgb(0 0 0 / .14)}
/* つまみ: pull it (or the sheet's title) down and the sheet follows the finger 1:1; far or fast enough, it closes (app.js sheetMotion) */
.sheet-grab{position:absolute;z-index:3;top:0;left:0;right:0;height:28px;touch-action:none;cursor:grab}
.sheet h2{touch-action:none}
.sheet[open]{animation:sheet-in 340ms var(--ease-spring) both}
@keyframes sheet-in{from{transform:translate3d(0,100%,0)}}
/* the veil: fades in (backwards only — held by `both` its opacity never let go, and on Android it vanished in one frame while
   the sheet slid down, UI review #8); lightens with the pull (--pull 0–1, app.js), and fades out while the sheet leaves */
.sheet::backdrop{background:rgb(0 0 0 / .3);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:calc(1 - var(--pull,0) * .7);
  animation:fade 200ms var(--ease-out) backwards;transition:opacity 200ms var(--ease-out)}
.sheet.is-dragging::backdrop{transition:none}
.sheet.is-closing::backdrop{opacity:0}
/* on its way out a sheet takes no taps (its buttons are never pressed as it leaves) */
.sheet.is-closing,.sheet.is-closing::backdrop{pointer-events:none}
.sheet h2{margin:0 0 12px;font-size:21px;letter-spacing:-.02em}
.consent-text{max-height:52dvh;overflow-y:auto;overscroll-behavior:contain;padding:14px;border-radius:var(--r-md);background:var(--bg);font-size:14px;line-height:1.8;white-space:pre-wrap}
.sheet-actions{display:flex;gap:10px;margin-top:14px}
.sheet-actions .secondary{flex:0 0 112px}
.share-options{display:grid;gap:8px}
.share-options .secondary{min-height:50px;font-size:15px}
.review-sheet-form{display:grid;gap:12px}
.review-sheet-form h2{margin:0;font-size:21px}

/* small phones: tighten so every step still fits without scrolling */
@media (max-height:600px){
  #private-link-note,#status-style{display:none}
  .status-head h1{font-size:20px}
  .summary{padding:6px}.summary img{width:40px;height:40px}
  .field input{min-height:44px;padding:8px 12px}
  .wstep{gap:7px}
  .consent-row{padding:0 6px 0 12px}
  /* the fine print goes (利用規約・プライバシー are in the consent sheet too), but not a note on why sending is stopped (UI review r3 #35) */
  .wstep[data-step=send] .hint:not(#email-help){display:none}
  .wstep[data-step=send] .field{gap:3px}
}
@media (max-height:640px){
  .screen{gap:8px;padding-top:10px}
  .step-title{font-size:23px}
  .slot{width:30px;height:30px}.stepper ol{gap:10px}.stepper li+li::before{width:10px}
  .word-tile .word-icon{width:36px;height:36px}.word-icon .ico{font-size:22px}
  .primary,.secondary{min-height:48px}
  .bottom-nav>:is(button,a){min-height:48px;gap:2px}
  .nav-ico{width:25px;height:25px}
  .photo-box .photo-box-icon{width:56px;height:56px}.photo-box-icon .ico{font-size:27px}
  .plan-tile strong{font-size:26px}
  .theme-banner{min-height:48px;padding-block:4px;gap:10px}
  .theme-thumbs{width:54px;height:38px}
  .theme-thumbs img{width:36px;height:36px;border-radius:10px}
  .theme-thumbs img:last-child{left:18px}
  .theme-text strong{font-size:15.5px}
  .wstep[data-step=plan] .hint{font-size:12px;line-height:1.5}
}
@media (min-width:700px){
  .screen{width:100%;max-width:560px;margin:0 auto}
  .action-bar{justify-content:center}
  .action-bar>*{max-width:280px}
}
/* a phone on its side (≤430px tall): the photo step in two columns — title, fan and rules on the left; the limited-time
   banner and the three ways to pick a photo on the right (filling its height, 44px+ each; the step scrolls if even that
   does not fit) — so the fan and its ▶ keep room */
@media (orientation:landscape) and (max-height:430px){
  .screen{max-width:780px}
  #step-photo:not(.is-video){position:relative;padding-right:calc(50% + 26px)}
  #step-photo:not(.is-video)>#photo-options{position:absolute;top:0;right:18px;width:calc(50% - 26px);min-height:100%;grid-auto-rows:minmax(44px,1fr)}
  #create-panel{position:relative}
  #create-panel>#theme-banner{position:absolute;z-index:1;top:var(--banner-top,14px);right:18px;width:calc(50% - 26px)}
  #create-panel:has(>#theme-banner:not([hidden])) #step-photo:not(.is-video)>#photo-options{top:56px;min-height:calc(100% - 56px)}
  /* 「写真を変える」 where the three ways were, on the right, and the rules under it: the chosen photo gets the left column's
     whole height (667×320: 63×84 → 103×137px) */
  #step-photo:not(.is-video)>#photo-change{position:absolute;top:0;right:18px;width:calc(50% - 26px)}
  #create-panel:has(>#theme-banner:not([hidden])) #step-photo:not(.is-video)>#photo-change{top:56px}
  #step-photo:not(.is-video):has(>#photo-change:not([hidden]))>.photo-rule{position:absolute;top:56px;right:18px;width:calc(50% - 26px);margin:0}
  #create-panel:has(>#theme-banner:not([hidden])) #step-photo:not(.is-video):has(>#photo-change:not([hidden]))>.photo-rule{top:112px}
  #step-photo .photo-option{min-height:44px;padding-block:3px}
}
/* a phone on its side, continued: the header is compact (48px, like iOS's landscape bars; clear of the notch, its logo on the
   780px column's text edge) and the step tray moves into its middle, so the steps get the tray's row back — the photo step
   fits without scrolling down to 667×320 even with the limited-time banner, with a bigger fan and 「▶ 動画」 in view.
   The tray is still where a choice lands: fly() reads its live position. */
@media (orientation:landscape) and (max-height:430px){
  /* z-index:auto: the main area (its own stacking context, view-transition-name) then paints after the header, so the tray is on top */
  .app-header{z-index:auto;padding:calc(env(safe-area-inset-top) + 2px) max(10px,env(safe-area-inset-right)) 2px max(16px,env(safe-area-inset-left),calc(50% - 372px))}
  .stepper{position:fixed;z-index:21;top:calc(env(safe-area-inset-top) + 11px);left:50%;translate:-50% 0}
  .slot{width:26px;height:26px}.stepper ol{gap:8px}.stepper li+li::before{width:8px}
  .slot .ico{font-size:17px}.slot b{font-size:12px}
}
/* a phone on its side, the other steps (UI review r3 #6: on 750×342 the style cards were 68px tall and cut their pictures,
   the word tiles cut their icons, and お名前とメール scrolled 72–142px). Every step now fits from 667×320 up, no scrolling:
   - 絵のタッチ: the title and 似せかた on the left, the rail on the right with the step's whole height; slimmer card padding
     and a 14px name, so the card width cap is (spot height − 74px) × 185/160 (the cards are 127–208px wide there)
   - ことば: each tile lays its icon beside its words (a 3×3 grid of rows, 44px+ each)
   - 何枚: the four counts in one row (they tighten by height already: app.css plans); when 似せかた has moved here (an idea,
     a theme or a sample chose the style) it sits under them on the left with the fine print on the right
   - お名前とメール: two columns in reading order — title | summary, name | email, consent | the free-plan note */
@media (orientation:landscape) and (max-height:430px){
  .wstep[data-step=style]{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);align-content:stretch;column-gap:18px;row-gap:12px}
  .wstep[data-step=style]>.step-title{grid-area:1/1}
  .wstep[data-step=style]>#likeness{grid-area:2/1;align-self:start;max-width:none;margin:0}
  .wstep[data-step=style]>.style-stage{grid-area:1/2/3/3;margin:0 -18px 0 0}
  .style-rail{--cf-item:min(56%,calc((100cqh - 74px) * 1.1563))}
  .style-rail .tile{gap:4px;padding:10px 6px 8px}
  .style-rail span{font-size:14px}
  .word-grid{gap:5px}
  .word-tile{flex-direction:row;justify-content:flex-start;gap:10px;padding:4px 36px 4px 8px;text-align:left}
  .word-tile .word-icon{flex:none;width:34px;height:34px;border-radius:10px}.word-icon .ico{font-size:22px}
  .word-tile::after{top:calc(50% - 11px)}
  .wstep[data-step=plan]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto minmax(0,1fr);align-content:stretch;column-gap:14px;row-gap:7px}
  .wstep[data-step=plan]>*{grid-column:1/-1}
  .wstep[data-step=plan]>.plan-grid{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:minmax(0,1fr);max-height:none}
  .wstep[data-step=plan]>#likeness{grid-column:1;align-self:start;max-width:none;margin:0}
  .wstep[data-step=plan]:has(>#likeness)>.hint:not(#paid-plan-note){grid-column:2;grid-row:3}
  .wstep[data-step=send]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;column-gap:14px;row-gap:6px;
    grid-template-areas:"title summary" "name email" "consent note"}
  .wstep[data-step=send]>.step-title{grid-area:title;align-self:center;margin:0}
  .wstep[data-step=send]>.summary{grid-area:summary}
  .wstep[data-step=send]>.field:has(#buyer-name){grid-area:name}
  .wstep[data-step=send]>.field:has(#email){grid-area:email}
  .wstep[data-step=send]>.consent-row{grid-area:consent}
  .wstep[data-step=send]>#gallery-note{grid-area:note;align-self:center}
  /* the notes that come and go take a whole row of their own, after (no empty rows, whose gaps would add up) */
  .wstep[data-step=send]>#form-message{grid-column:1/-1}
  /* why sending is stopped (it stays on a short screen now, UI review r3 #35): under the title, in the room the summary's height
     leaves there, so the step still fits (667×320: it scrolled 26px as a row of its own) */
  .wstep[data-step=send]>#email-help{grid-area:title;align-self:end}
  .wstep[data-step=send]:has(>#email-help:not([hidden]))>.step-title{align-self:start}
}
/* 200% text on a phone (iPhone Safari's aA at 200%: a page 195px wide on an iPhone 13, 160px on an SE; UI review r3 #29: the
   style card was 20×26px, the words and the counts ran out of their tiles, 次へ out of its button). The steps keep their size
   and scroll inside (.wstep overflow-y:auto) instead of squeezing, and words keep their size (smaller words would take back
   the zoom; only the bar's button goes 17 → 15px, so 「無料で8枚の見本を作る」 is two lines, not four): a fixed 230px spot for
   the style rail, the words and the counts two to a row that grow with their text, 似せかた stacked (its thumb slides down
   instead of across), the consent row's 内容を読む under its words, ‹ alone for 戻る, and titles, names and the button break
   between words (<wbr>, keep-all). The header's name too: 「写真でLINE／スタンプ」 or 「写真で／LINEスタンプ」, never 「…スタン／プ」. */
@media (max-width:260px){
  .style-stage{flex:none;height:230px}
  .style-rail .tile{padding-inline:6px}
  .style-rail span{white-space:normal;word-break:keep-all;overflow-wrap:anywhere}
  .word-grid,.plan-grid{flex:none;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;grid-auto-rows:minmax(64px,auto);max-height:none}
  .plan-grid{grid-auto-rows:minmax(88px,auto);container-type:normal}
  .plan-tile{padding:12px 10px}
  /* a narrow word tile's ✓ reaches its icon: a white ring keeps the two apart, like a badge on an app icon */
  .word-tile::after{box-shadow:0 0 0 2px #fff}
  .seg{grid-template-columns:minmax(0,1fr)}
  .seg-thumb{right:3px;bottom:auto;width:auto;height:calc((100% - 6px) / 3)}
  .seg:has(input[value=natural]:checked) .seg-thumb{transform:translateY(100%)}
  .seg:has(input[value=chara]:checked) .seg-thumb{transform:translateY(200%)}
  .consent-row{flex-wrap:wrap}
  .step-title{word-break:keep-all;overflow-wrap:anywhere}
  .action-bar>*{min-width:0}
  .action-bar .primary{white-space:normal;text-wrap:balance;line-height:1.2;font-size:15px;padding-inline:10px}
  /* ‹ alone, like iOS's back button when its title has no room (its name is still 「戻る」) */
  .action-bar #step-back{flex:none;gap:0;padding-inline:10px;font-size:0}
  .action-bar #step-back .ico{margin:0;font-size:24px}
  .brand>span:not(.brand-mark){word-break:auto-phrase;text-wrap:balance}
}
/* …and an SE's 160px: the counts one to a row, 次へ as its word alone, and the step tray's five slots fit its 124px */
@media (max-width:180px){
  .plan-grid{grid-template-columns:minmax(0,1fr)}
  #step-next .ico{display:none}
  /* 「無料で8枚の見本を作る」 takes four short lines here: a rounded box, not a capsule whose curve would cut them */
  .action-bar .primary{border-radius:18px}
  .slot{width:22px;height:22px}.stepper ol{gap:3px}.stepper li+li::before{width:3px}
  .slot .ico{font-size:18px}.slot b{font-size:11px}
}
@media (prefers-reduced-transparency:reduce){
  .app-header,.action-bar,.drawer-panel{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none}
  .bottom-nav{background:var(--surface);-webkit-backdrop-filter:none;backdrop-filter:none}
  /* the veils behind the menu and the sheets: the same shade, no blur */
  .drawer-veil,.sheet::backdrop{-webkit-backdrop-filter:none;backdrop-filter:none}
}
/* Windows' high contrast (forced-colors: the page's colors give way to the system's two or three; UI review r3 #3): what shows
   a state by a fill alone gets an outline in the system's colors — the tab you are on (the pill), the chosen 似せかた, 操作音 on
   or off (a hollow switch with its knob at the left, or filled with its knob at the right) — and the ▶ drawn with borders
   keeps its see-through sides (it became a square). The switch's knob sits inside the 2px outline. */
@media (forced-colors:active){
  .nav-pill{border:2px solid Highlight}
  .seg-thumb{border:2px solid Highlight}
  .switch{border:2px solid CanvasText}
  .switch::after{forced-color-adjust:none;top:0;left:0;background:CanvasText;box-shadow:none}
  .switch-row[aria-checked=true] .switch{forced-color-adjust:none;background:Highlight;border-color:Highlight}
  .switch-row[aria-checked=true] .switch::after{background:HighlightText}
  .video-pill{border:2px solid ButtonText}
  .video-pill-icon::before{forced-color-adjust:none;border-left-color:CanvasText}
  .photo-next{border:2px solid ButtonText}
}
/* 「視差効果を減らす」（富村 2026-09-27）: 動きは同じ（すべり・飛ぶ・ポップ・動画のレール・押したときの縮み・入場。長さも変えない）。
   揺れと小さな点滅だけ止める — 入力ミスの横揺れと、受付画面の LIVE の点（赤い枠と文字は残る）。凍結した CRT 演出と同じ考え。
   この1か所だけ（test/motion-and-nav.test.mjs が中身まで検査する）。 */
@media (prefers-reduced-motion:reduce){.field input[aria-invalid=true]{animation:none}.monitor-live::before{animation:none}}
/* 動画は今の画面の上に重ねる層（浩樹さん 2026-09-28）: the page stays faintly visible behind a frosted light veil; the rail
   sizes itself to this layer (a size container named stage, like the photo stage it used to borrow). */
.video-layer{position:fixed;inset:0;z-index:980;container:stage/size;box-sizing:border-box;
  padding:max(12px,env(safe-area-inset-top)) 0 max(12px,env(safe-area-inset-bottom));
  background:rgb(243 246 245 / .8);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2)}
.video-layer[hidden]{display:none}
body.video-open{overflow:hidden}
@media (prefers-reduced-transparency:reduce){.video-layer{background:#fff6f3;-webkit-backdrop-filter:none;backdrop-filter:none}}
.video-layer>.vr{top:max(12px,env(safe-area-inset-top));bottom:max(12px,env(safe-area-inset-bottom))}
/* real stickers scattered behind the videos, softly (the veil above them keeps the rail readable) */
.vl-stickers{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.vl-stickers>img{position:absolute;width:calc(clamp(72px,18vmin,140px) * var(--s,1));height:auto;aspect-ratio:1;object-fit:contain;opacity:.55;
  transform:translate(-50%,-50%) rotate(var(--r,0deg));filter:drop-shadow(0 4px 10px rgb(16 48 40 / .12))}
.video-layer{isolation:isolate}
/* 浩樹さん 2026-09-28「動画ボタンがスタンプに近すぎ。写真を選ぶと同じ並びの右に」: 「▶ 動画」 sits on the title's row, at its right
   end and centred on it (a control goes beside what it belongs to: the step), never on the pictures. */
.photo-head{display:flex;align-items:center;justify-content:flex-end;gap:12px;min-width:0}
.photo-head>.step-title{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* 浩樹さん「写真をえらぶは削除」: read out, not shown */
.photo-head>.video-pill{position:relative;inset:auto;top:auto;right:auto;left:auto;flex:none;margin:0}
.photo-head{margin:6px 0 2px}
.photo-head .video-pill-long{display:none}
/* 浩樹さん 2026-09-28「白い丸では意味がない。1 2 3 4 5 と番号を入れて色を変えて、順番だと分かるように」: an empty slot shows its
   step's number — the step you are on is solid green with a white number, the ones ahead are light grey. */
.stepper ol{counter-reset:step}
.stepper li{counter-increment:step}
.slot:empty::before{content:counter(step);font-size:15px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;color:rgb(16 48 40 / .45)}
.stepper li.now .slot:empty{background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.stepper li.now .slot:empty::before{color:#fff}
.stepper li.done .slot:empty{background:var(--accent-soft)}
.stepper li.done .slot:empty::before{color:var(--accent-press)}
/* 浩樹さん 2026-09-28「上下入れ替えて」: the limited-time banner sits above the step circles, and only on the photo step */
#create-panel:has(#step-photo[hidden])>#theme-banner,#create-panel:has(#step-photo.is-video)>#theme-banner{display:none!important}
/* The fan the finger turns (sticker-fan.js, 浩樹さん 2026-09-28): every card stands on the middle one's spot and turns
   around one point far below it, so the middle stands straight and the others lean out and sink along an arc */
.photo-hero.is-fan{touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.photo-hero.is-fan:active{cursor:grabbing}
.photo-hero.is-fan img{left:24%;right:auto;top:4%;transform-origin:50% 310%;will-change:transform}
/* on a standing screen the fan's outer cards run to the screen's edges (not cut 18px in) */
@media (orientation:portrait){.photo-stage:has(>.photo-hero.is-fan:not([hidden])){margin-inline:-18px}}
/* a short standing phone (iPhone SE 320×568): the rows and the ▶ 動画 row give height to the fan (it was 58px tall there) */
@media (max-height:600px) and (orientation:portrait){
  #step-photo .photo-option{min-height:46px;padding-block:3px}
  #step-photo .photo-rule{margin-bottom:0;gap:3px}
  #step-photo .photo-head{margin:0}
  #step-photo .photo-head>.video-pill{min-height:34px}
}
/* The three ways to pick a photo as three big tiles side by side (浩樹さん 2026-09-28「ボタンなので横並び・大きなアイコンで
   一目で」): like the iPhone share sheet — each its own white card, a big colored icon, its name under it in two short lines.
   Plain cards, not stickers, so they never blur into the fan above. The whole tile is the target (well over 44pt). */
.photo-options{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;background:none;box-shadow:none;overflow:visible;border-radius:0}
.photo-options>.photo-option{flex-direction:column;justify-content:center;gap:8px;min-height:0;padding:14px 6px 12px;border-radius:22px;background:var(--surface);
  box-shadow:var(--shadow-1),inset 0 0 0 1px var(--line);text-align:center;transition:transform 240ms var(--ease-out),background-color 120ms var(--ease-out)}
.photo-options>.photo-option+.photo-option::before{display:none}
.photo-options>.photo-option:active{transform:scale(var(--press));transition-duration:90ms;background:#fff}
#photo-options .chev{display:none}
.photo-options .photo-option-icon{width:60px;height:60px;border-radius:18px;font-size:32px;box-shadow:0 6px 14px -6px rgb(16 48 40 / .45)}
.photo-options .photo-option-text{flex:none;justify-items:center}
.photo-options .photo-option-text b{font-size:15px;font-weight:700;line-height:1.25;word-break:keep-all;overflow-wrap:anywhere}
/* every name gets two lines' room, so the three icons and names line up whether a name wraps or not */
.photo-options .photo-option-text b{display:block;min-height:2.5em}
.photo-options>.photo-option:has(input:focus-visible),.photo-options>button.photo-option:focus-visible{outline:2.5px solid var(--focus-ring);outline-offset:2px}
@media (hover:hover) and (pointer:fine){.photo-options>.photo-option:hover{background:#fff;box-shadow:var(--shadow-2),inset 0 0 0 1px var(--line)}}
/* short screens: a smaller icon, same layout */
@media (max-height:740px) and (orientation:portrait){.photo-options>.photo-option{padding:11px 4px 10px;gap:6px}.photo-options .photo-option-icon{width:52px;height:52px;border-radius:16px;font-size:28px}}
@media (max-height:600px) and (orientation:portrait){#step-photo .photo-options>.photo-option{min-height:0;padding:9px 4px 8px}.photo-options .photo-option-icon{width:46px;height:46px;border-radius:14px;font-size:26px}.photo-options .photo-option-text b{font-size:14px}}
@media (max-width:340px){.photo-options{gap:8px}.photo-options .photo-option-text b{font-size:13.5px}}
/* a phone on its side: the three tiles fill the right column's height, side by side */
@media (orientation:landscape) and (max-height:430px){#step-photo:not(.is-video)>#photo-options{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:1fr}#step-photo .photo-options>.photo-option{min-height:0;padding-block:8px}}
/* 浩樹さん 2026-09-28「アイコンを大きくして中に文字を入れて」「アイコンも作って」: each tile is one big square holding a
   picture that says what it does (gpt-image-2.5: a camera, a phone full of photos, sample stickers) and its name under it,
   on a pale wash of its own color (green 撮る, grey 選ぶ, orange 見本) so the picture and the words both read. */
.photo-options>.photo-option{aspect-ratio:auto;gap:4px;padding:10px 4px 11px;border-radius:24px;box-shadow:var(--shadow-1),inset 0 0 0 1px rgb(16 48 40 / .07)}
.photo-options>.photo-option:has(.camera){background:linear-gradient(180deg,#f2faf7,#dcefe8)}
.photo-options>.photo-option:has(.album){background:linear-gradient(180deg,#f6f7f8,#e3e7ea)}
.photo-options>.photo-option:has(.sample){background:linear-gradient(180deg,#fff7ee,#fbe4cc)}
.photo-options>.photo-option:active{transform:scale(var(--press));transition-duration:90ms;filter:brightness(.97)}
@media (hover:hover) and (pointer:fine){.photo-options>.photo-option:hover{filter:brightness(1.03)}}
.photo-options .photo-option-icon{flex:none;width:100%;height:auto;background:none;box-shadow:none;border-radius:0;display:grid;place-items:center}
.photo-options .photo-option-icon img{display:block;width:min(66%,100px);height:auto;aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 4px 6px rgb(16 48 40 / .18))}
.photo-options .photo-option-text b{min-height:0;color:var(--ink);font-size:16px;font-weight:800}
.photo-options>.photo-option:has(input:focus-visible),.photo-options>button.photo-option:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px}
@media (max-height:600px) and (orientation:portrait){#step-photo .photo-options>.photo-option{padding:6px 4px 8px}.photo-options .photo-option-icon img{width:64%}.photo-options .photo-option-text b{font-size:14.5px}}
@media (max-width:340px){.photo-options .photo-option-text b{font-size:14px}}
@media (orientation:landscape) and (max-height:430px){#step-photo .photo-options>.photo-option{justify-content:center}.photo-options .photo-option-icon img{width:min(72%,110px)}}
/* 浩樹さん 2026-09-28「見本から選ぶはフル画面に」: the sample sheet covers the whole screen (no gap above it), clear of the
   notch; it still closes by ✕ or a pull down from its top */
.sheet.sample-sheet{width:100%;max-width:none;height:100dvh;max-height:none;margin:0;border-radius:0;padding-top:calc(env(safe-area-inset-top) + 8px);padding-inline:max(18px,env(safe-area-inset-left)) max(18px,env(safe-area-inset-right))}
.sample-sheet[open]{height:100dvh}
.sample-sheet>.sheet-grab{top:env(safe-area-inset-top)}
/* 「QRで紹介」（浩樹さん 2026-09-28）: the bottom menu's 紹介 opens the whole-screen character with the QR (share-qr.js) */
.share-layer{position:fixed;inset:0;z-index:1200;overflow:hidden;background:#e6f2ee;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.share-layer[hidden]{display:none}
body.share-open{overflow:hidden}
.share-bg{position:absolute;inset:-48px;background:center/cover no-repeat;filter:blur(30px) saturate(1.15);opacity:.75}
/* a standing phone: the picture fills the screen (its sides give way, the phone and the face stay); anything wider: all of it */
.share-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 55%;pointer-events:none}
@media (min-aspect-ratio:3/4){.share-art{object-fit:contain}}
.share-bubble{position:absolute;top:calc(env(safe-area-inset-top) + 12px);left:64px;right:64px;margin:0 auto;max-width:420px;padding:10px 14px;border-radius:20px;
  background:rgb(255 255 255 / .94);color:var(--ink);font-size:15px;font-weight:700;line-height:1.55;text-align:center;word-break:keep-all;overflow-wrap:anywhere;box-shadow:0 10px 24px -12px rgb(16 48 40 / .5)}
.share-bubble::after{content:"";position:absolute;left:50%;bottom:-8px;width:16px;height:16px;margin-left:-8px;background:inherit;border-radius:0 0 4px 0;transform:rotate(45deg)}
.share-close,.share-voice{position:absolute;top:calc(env(safe-area-inset-top) + 10px);display:grid;place-items:center;width:48px;height:48px;border:0;border-radius:50%;
  background:rgb(255 255 255 / .8);color:var(--ink);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 4px 12px -6px rgb(16 48 40 / .5);cursor:pointer;transition:transform 240ms var(--ease-out)}
.share-close{right:max(10px,env(safe-area-inset-right))}
.share-voice{left:max(10px,env(safe-area-inset-left))}
.share-close .ico,.share-voice .ico{width:24px;height:24px;stroke-width:2.4}
.share-close:active,.share-voice:active{transform:scale(var(--press));transition-duration:90ms}
.share-close:focus-visible,.share-voice:focus-visible,.share-send:focus-visible{outline:2.5px solid var(--focus-ring);outline-offset:2px}
.share-bar{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom) + 14px);display:grid;justify-items:center;gap:8px;padding:0 16px}
.share-note{margin:0;padding:4px 12px;border-radius:99px;background:rgb(255 255 255 / .8);color:var(--ink);font-size:13.5px;font-weight:700;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.share-send{display:inline-flex;align-items:center;gap:8px;min-height:52px;padding:0 24px;border:0;border-radius:99px;background:var(--accent);color:#fff;font:inherit;font-size:17px;font-weight:800;
  box-shadow:0 10px 22px -10px rgb(10 124 104 / .9);cursor:pointer;transition:transform 240ms var(--ease-out)}
.share-send .ico{width:22px;height:22px;stroke-width:2.4}
.share-send:active{transform:scale(var(--press));transition-duration:90ms}
.share-toast{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom) + 130px);margin:0;padding:8px 14px;border-radius:12px;background:rgb(16 32 28 / .88);color:#fff;font-size:14px;font-weight:700;
  translate:-50% 8px;opacity:0;transition:opacity 200ms var(--ease-out),translate 200ms var(--ease-out);pointer-events:none;white-space:nowrap}
.share-toast.is-on{opacity:1;translate:-50% 0}
@media (prefers-reduced-transparency:reduce){.share-close,.share-voice,.share-note{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}}
.share-bubble{white-space:pre-line}
/* a phone on its side (the whole picture, in the middle): the bubble on the left, the buttons on the right, both clear of the QR */
@media (orientation:landscape) and (max-height:500px){
  .share-bubble{top:50%;left:max(16px,env(safe-area-inset-left));right:auto;width:min(240px,calc(50% - 150px));margin:0;translate:0 -50%}
  .share-bubble::after{left:auto;right:-7px;bottom:auto;top:50%;margin:-8px 0 0;border-radius:0 4px 0 0}
  .share-bar{left:auto;right:max(16px,env(safe-area-inset-right));bottom:50%;translate:0 50%;width:min(240px,calc(50% - 150px));padding:0}
  .share-note{text-align:center}
}
@media (max-height:640px) and (orientation:portrait){.share-note{display:none}}
/* 「シェアする」 on a computer (no share sheet): the places to post, in a row above the button */
.share-more{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:520px}
.share-more[hidden]{display:none}
.share-to{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:0;border-radius:99px;background:rgb(255 255 255 / .92);color:var(--ink);font:inherit;font-size:15px;font-weight:800;text-decoration:none;
  box-shadow:0 6px 14px -8px rgb(16 48 40 / .5);cursor:pointer;transition:transform 240ms var(--ease-out)}
.share-to:active{transform:scale(var(--press));transition-duration:90ms}
.share-to:focus-visible{outline:2.5px solid var(--focus-ring);outline-offset:2px}
/* a wide screen (the whole picture in the middle): the buttons stand in the empty room on the right, clear of the QR */
@media (min-aspect-ratio:3/4) and (min-width:700px){
  .share-bar{left:auto;right:max(24px,env(safe-area-inset-right));bottom:50%;translate:0 50%;width:min(280px,calc(50% - 30vh * .5 - 40px));padding:0}
  .share-more{flex-direction:column;align-items:stretch}
  .share-to{justify-content:center}
}
/* こだわり設定（premium.js・有料のセットの時だけの段）: four rows like the iPhone's Settings; each opens a whole-screen picker */
.premium-rows{flex:none;display:grid;border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-1),inset 0 0 0 1px var(--line);overflow:hidden}
.premium-row{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:64px;padding:10px 12px 10px 14px;border:0;background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:background-color 120ms var(--ease-out)}
.premium-row+.premium-row::before{content:"";position:absolute;top:0;left:62px;right:0;height:1px;background:var(--line)}
.premium-row:active{background:rgb(16 48 40 / .06)}
.premium-row:focus-visible{outline:2.5px solid var(--focus-ring);outline-offset:-2.5px}
.premium-row-icon{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:10px;background:var(--tint,var(--accent));color:#fff}
.premium-row-icon .ico{width:21px;height:21px;stroke-width:2.4}
.premium-row-text{display:grid;flex:1;min-width:0}
.premium-row-text b{font-size:17px;font-weight:700}
.premium-row-text small{font-size:12.5px;color:var(--muted)}
.premium-row-value{flex:0 1 auto;max-width:42%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px;color:var(--muted)}
.premium-row-value.is-set{color:var(--accent);font-weight:700}
.premium-row-chev{display:grid;flex:none;color:rgb(16 48 40 / .35)}
.premium-row-chev .ico{width:20px;height:20px;stroke-width:2.4}
.premium-reset{align-self:center}
.premium-layer{position:fixed;inset:0;z-index:1200;display:flex;flex-direction:column;background:var(--bg,#fff6f3);padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left)}
.premium-layer[hidden]{display:none}
body.premium-open{overflow:hidden}
.premium-head{display:grid;grid-template-columns:48px minmax(0,1fr) 48px;align-items:center;gap:4px;padding:6px 8px 2px}
.premium-head h2{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;font-size:18px;font-weight:800;letter-spacing:-.01em}
.premium-back,.premium-close{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:var(--ink);cursor:pointer;transition:transform 240ms var(--ease-out)}
.premium-back{grid-column:1}
.premium-head h2{grid-column:2}
.premium-back:active,.premium-close:active{transform:scale(var(--press));transition-duration:90ms}
.premium-back .ico,.premium-close .ico{width:24px;height:24px;stroke-width:2.4}
.premium-close{grid-column:3}
.premium-search{display:flex;align-items:center;gap:8px;margin:6px 16px 0;padding:0 12px;min-height:44px;border-radius:12px;background:rgb(118 118 128 / .12);color:var(--muted)}
.premium-search .ico{width:18px;height:18px;stroke-width:2.4}
.premium-search input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font:inherit;font-size:16px;outline:none}
.premium-chips{display:flex;gap:8px;padding:10px 16px;overflow-x:auto;scrollbar-width:none;flex:none}
.premium-chips::-webkit-scrollbar{display:none}
.premium-chips[hidden]{display:none}
.premium-chip{flex:none;min-height:44px;padding:0 15px;border:0;border-radius:99px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);font:inherit;font-size:14.5px;font-weight:700;white-space:nowrap;cursor:pointer;transition:transform 240ms var(--ease-out),background-color 160ms var(--ease-out)}
.premium-chip[aria-selected=true]{background:var(--ink);box-shadow:none;color:#fff}
.premium-chip:active{transform:scale(var(--press));transition-duration:90ms}
.premium-list{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:2px 16px calc(env(safe-area-inset-bottom) + 20px)}
.premium-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:600px){.premium-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:900px){.premium-grid{grid-template-columns:repeat(4,minmax(0,1fr));max-width:960px;margin:0 auto}}
.premium-card{position:relative;display:grid;align-content:center;gap:2px;min-height:78px;padding:12px 14px;border:0;border-radius:16px;background:var(--surface);box-shadow:var(--shadow-1),inset 0 0 0 1px var(--line);color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:transform 240ms var(--ease-out),box-shadow 160ms var(--ease-out)}
.premium-card:active{transform:scale(var(--press));transition-duration:90ms}
.premium-card:focus-visible{outline:2.5px solid var(--focus-ring);outline-offset:2px}
.premium-card img{width:56px;height:56px;border-radius:12px;object-fit:cover;margin-bottom:4px}
.premium-card b{font-size:16px;font-weight:800;line-height:1.3}
.premium-card small{font-size:12.5px;color:var(--muted)}
.premium-card .premium-card-note{color:#b45309}
.premium-card.is-on{box-shadow:inset 0 0 0 2.5px var(--accent),var(--shadow-1);background:#f2faf7}
.premium-card.is-auto{background:linear-gradient(180deg,#f2faf7,#e3f1ec)}
.premium-card-check{position:absolute;top:8px;right:8px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--accent);color:#fff}
.premium-card-check .ico{width:15px;height:15px;stroke-width:3}
.premium-empty{margin:24px 0;text-align:center;color:var(--muted);font-size:15px}
.premium-scene{margin:4px 0 12px;color:var(--muted);font-size:14px}
.premium-phrases{display:flex;flex-wrap:wrap;gap:8px}
.premium-phrase{min-height:44px;padding:0 16px;border:0;border-radius:99px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line),var(--shadow-1);color:var(--ink);font:inherit;font-size:16px;font-weight:700;cursor:pointer;transition:transform 240ms var(--ease-out),background-color 160ms var(--ease-out)}
.premium-phrase.is-on{background:var(--accent);box-shadow:none;color:#fff}
.premium-phrase:active{transform:scale(var(--press));transition-duration:90ms}
.premium-groups,.premium-chosen{display:grid;border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-1),inset 0 0 0 1px var(--line);overflow:hidden}
.premium-group{position:relative;display:flex;align-items:center;gap:10px;width:100%;min-height:60px;padding:8px 12px 8px 16px;border:0;background:transparent;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.premium-group+.premium-group::before,.premium-chosen-row+.premium-chosen-row::before{content:"";position:absolute;top:0;left:16px;right:0;height:1px;background:var(--line)}
.premium-group:active{background:rgb(16 48 40 / .06)}
.premium-group-text{display:grid;flex:1;min-width:0}
.premium-group-text b{font-size:16.5px;font-weight:700}
.premium-group-text small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;color:var(--muted)}
.premium-group-n{flex:none;font-size:14px;color:var(--muted)}
.premium-group-n.is-set{color:var(--accent);font-weight:800}
.premium-chosen-row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto 44px;align-items:center;gap:8px;min-height:60px;padding:6px 6px 6px 16px}
.premium-chosen-row b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:16.5px}
.premium-pose{display:inline-flex;align-items:center;gap:4px;min-height:40px;padding:0 12px;border:0;border-radius:99px;background:rgb(142 91 214 / .12);color:#6b3fb5;font:inherit;font-size:13.5px;font-weight:800;cursor:pointer}
.premium-pose .ico{width:17px;height:17px;stroke-width:2.4}
.premium-remove{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:var(--muted);cursor:pointer}
.premium-remove .ico{width:20px;height:20px;stroke-width:2.4}
.premium-pose:active,.premium-remove:active{transform:scale(var(--press));transition-duration:90ms}
.premium-foot{display:flex;align-items:center;gap:12px;padding:10px 16px calc(env(safe-area-inset-bottom) + 10px);background:rgb(255 255 255 / .92);box-shadow:0 -1px 0 var(--line);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.premium-foot[hidden]{display:none}
.premium-count{flex:1;min-width:0;font-size:14px;font-weight:700;color:var(--ink-2)}
.premium-done{flex:none;min-height:48px;padding:0 26px;border:0;border-radius:99px;background:var(--accent);color:#fff;font:inherit;font-size:17px;font-weight:800;cursor:pointer;transition:transform 240ms var(--ease-out)}
.premium-done:active{transform:scale(var(--press));transition-duration:90ms}
.premium-toast{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom) + 84px);margin:0;padding:8px 14px;border-radius:12px;background:rgb(16 32 28 / .88);color:#fff;font-size:14px;font-weight:700;translate:-50% 8px;opacity:0;transition:opacity 200ms var(--ease-out),translate 200ms var(--ease-out);pointer-events:none;white-space:nowrap}
.premium-toast.is-on{opacity:1;translate:-50% 0}
/* a phone on its side: the four rows in two columns, so all of them sit above 戻る／次へ */
@media (orientation:landscape) and (max-height:500px){
  .premium-rows{grid-template-columns:repeat(2,minmax(0,1fr))}
  .premium-row{min-height:58px;padding-block:6px}
  .premium-row:nth-child(2)::before{display:none}
  .premium-row:nth-child(even){box-shadow:inset 1px 0 0 var(--line)}
}
/* ことばパック（word-packs.js）: the アイデア screen's other half — a segmented switch, then search, kinds and cards. Folded in: UI review
   packs r1 (#n: line-50's three reviewers; Nn: the supervisor). */
/* the switch: one white thumb that slides to the side chosen (#30), 44px to press (#21) */
.ideas-switch{position:relative;flex:none;display:grid;grid-template-columns:1fr 1fr;padding:3px;border-radius:14px;background:rgb(118 118 128 / .12)}
.ideas-switch[hidden]{display:none}
.ideas-switch::before{content:"";position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:11px;background:#fff;box-shadow:0 3px 8px -2px rgb(16 48 40 / .18),0 0 0 .5px rgb(16 48 40 / .06);transition:translate 260ms var(--ease-spring)}
.ideas-switch.is-instant::before{transition:none}
.ideas-switch.is-packs::before{translate:100% 0}
.ideas-switch>button{position:relative;min-height:44px;border:0;border-radius:11px;background:transparent;color:var(--ink-2);font:inherit;font-size:15px;font-weight:700;cursor:pointer;transition:color 200ms var(--ease-out),transform 240ms var(--ease-out)}
.ideas-switch>button[aria-selected=true]{color:var(--ink)}
.ideas-switch>button:active{transform:scale(var(--press));transition-duration:90ms}
.ideas-count{position:absolute;top:-11px;right:-6px;z-index:1;display:inline-flex;align-items:baseline;gap:1px;padding:3px 8px 4px;border-radius:999px;background:linear-gradient(135deg,#ff6a3d,#ff2e63);color:#fff;font-size:14px;font-weight:900;line-height:1;font-variant-numeric:tabular-nums;box-shadow:0 4px 10px -3px rgb(255 46 99 / .55),0 0 0 2px #fff;rotate:6deg;pointer-events:none}
.ideas-count small{font-size:10px;font-weight:800}
.ideas-switch>button:focus-visible{outline:2px solid var(--focus-ring);outline-offset:1px}
.ideas:is(.is-packs,.has-styles)>:is(.ideas-stage,#ideas-message,#ideas-use){display:none}
.packs-pane{flex:1;min-height:0;display:flex;flex-direction:column;gap:8px}
.packs-pane[hidden]{display:none}
/* the switch says which side is shown: the big title saying it again goes (監督 N6), kept for screen readers */
.ideas.has-switch>.step-title{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* the search and the kinds: one band (sticky on a short screen, below; UI review packs r4 見直し2) */
.packs-band{flex:none;display:flex;flex-direction:column;gap:8px}
/* a card reached by Tab stays clear of the band and the bottom menu (r5 F). On the cards only: padding on the whole pane made the
   browser treat the search field in the stuck band as hidden and send the list 60px (to 0) on every letter typed (r5 動き) */
.packs-card{scroll-margin:8px 0 96px}
.packs-band{transition:box-shadow 160ms var(--ease-out)}
.packs-band.is-stuck{position:relative;z-index:3;box-shadow:0 6px 8px -6px rgb(16 48 40 / .12)} /* also on a tall screen, where the list scrolls on its own (r5 新4) */
.packs-search{flex:none;cursor:text;display:flex;align-items:center;gap:8px;min-height:44px;padding:0 4px 0 12px;border-radius:12px;background:rgb(118 118 128 / .12);color:var(--muted)}
.packs-search:focus-within,.premium-search:focus-within{outline:2px solid var(--focus-ring);outline-offset:2px} /* #7 */
.packs-search>span .ico{width:18px;height:18px;stroke-width:2.4}
.packs-search input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font:inherit;font-size:16px;outline:none}
.packs-search input::-webkit-search-cancel-button{display:none}
.packs-search input::placeholder,.premium-search input::placeholder{color:#5a635f;opacity:1} /* #22: 4.98:1 */
/* N5: ✕ only while there are letters; empties the field and keeps the keyboard */
.packs-clear{display:grid;place-items:center;flex:none;width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:var(--muted);cursor:pointer}
.packs-clear[hidden]{display:none}
.packs-clear .ico{width:18px;height:18px;stroke-width:2.4}
.packs-chips{flex:none;display:flex;gap:8px;margin:0 -18px;padding:2px 18px;overflow-x:auto;scrollbar-width:none}
.packs-chips::-webkit-scrollbar{display:none}
.packs-chips[hidden]{display:none}
/* #5: a mouse cannot swipe a row sideways — there the kinds wrap onto lines */
@media (hover:hover) and (pointer:fine) and (min-height:501px){.packs-chips,.premium-chips{flex-wrap:wrap;overflow-x:visible}}
.packs-chip{position:relative;flex:none;display:inline-flex;align-items:center;gap:5px;min-height:44px;padding:0 14px;border:0;border-radius:99px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);font:inherit;font-size:14.5px;font-weight:700;white-space:nowrap;cursor:pointer;transition:transform 240ms var(--ease-out),background-color 160ms var(--ease-out),color 160ms var(--ease-out)}
.packs-chip small{font-size:13px;font-weight:700;color:var(--muted)}
.packs-chip[aria-pressed=true]{background:var(--ink);box-shadow:none;color:#fff}
.packs-chip[aria-pressed=true] small{color:rgb(255 255 255 / .72)}
.packs-chip[aria-disabled=true]{opacity:.45;cursor:default} /* N3: nothing for this search */
.packs-chip:active:not([aria-disabled=true]){transform:scale(var(--press));transition-duration:90ms}
.packs-chip:focus-visible,.packs-card:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
/* 職業別's row: a size quieter (36px to see, 44px to press #21), chosen in the same ink as the kinds (#24), a shade lighter */
.packs-jobs .packs-chip{min-height:36px;margin-block:4px;font-size:13.5px;background:rgb(255 255 255 / .7)}
.packs-jobs .packs-chip::before{content:"";position:absolute;inset:-4px 0}
.packs-jobs .packs-chip[aria-pressed=true]{background:var(--ink-2);color:#fff}
/* 職業別's own row, plainly under it (浩樹さん 2026-09-29「大項目と中項目の違いがわからない」): a tinted tray the width of the
   list with its heading, its chips white on it and the one chosen in the app's green — never the kinds' black */
.packs-jobs:not([hidden]){margin:2px 0 0;padding:6px 10px 6px 12px;border-radius:14px;background:var(--accent-soft);align-items:center}
.packs-jobs::before{content:"職業を選ぶ";flex:none;padding-right:2px;font-size:12px;font-weight:800;color:var(--accent-press);white-space:nowrap}
.packs-jobs .packs-chip{background:#fff;box-shadow:inset 0 0 0 1px var(--accent-ring)}
.packs-jobs .packs-chip[aria-pressed=true]{background:var(--accent);box-shadow:none}
/* a set's number: small and quiet, in the corner of its picture */
.packs-card{position:relative}
.packs-no{position:absolute;top:8px;left:10px;z-index:1;font-size:10.5px;font-weight:700;line-height:1;color:var(--muted);font-variant-numeric:tabular-nums;pointer-events:none}
.packs-sheet-no{margin-right:6px;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
.packs-list{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;margin:0 -18px;padding:4px 18px 12px;scrollbar-width:none}
.packs-list::-webkit-scrollbar{display:none}
.packs-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (min-width:600px){.packs-grid{grid-template-columns:repeat(3,minmax(0,1fr))}} /* three at most (#4) */
.packs-card{display:flex;flex-direction:column;align-items:stretch;gap:4px;min-height:0;padding:12px 12px 10px;border:0;border-radius:18px;background:var(--surface);box-shadow:var(--shadow-1),inset 0 0 0 1px var(--line);color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:transform 240ms var(--ease-out)}
.packs-card:active{transform:scale(var(--press));transition-duration:90ms}
/* #3: a name breaks between its parts only (keep-all, a <wbr> after each ・ from word-packs.js) */
.packs-card{container-type:inline-size}
/* (r6 §7.6: no content-visibility:auto — its 150px stand-in made the cards jump going back up; word-packs.js makes them 24 at a time) */
.ideas:is(.is-packs,.has-styles),.packs-list{overflow-anchor:none} /* 監督 条件2: a search moves nothing by itself; word-packs.js keepPlace does */
.packs-card>b{font-size:clamp(13px,calc(100cqw / var(--len,1) - .2px),16px);font-weight:800;line-height:1.3;word-break:keep-all;overflow-wrap:anywhere;text-wrap:balance}
.packs-scene{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;color:var(--muted)}
@media (max-width:359px){.packs-scene{display:none}}
@media (min-width:360px) and (max-width:430px){.packs-scene{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal;word-break:keep-all;overflow-wrap:anywhere}} /* 監督 N2: between words only (word-packs.js breakWords) */
.packs-lines{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px;max-height:60px;overflow:hidden} /* two rows of lines at most: the cards stay one height */
.packs-lines:has(mark,.is-yomi){max-height:none} /* what the search found is always seen (#20, r3 #7) */
/* the lines: the app's green, not a colour of their own (#25) */
.packs-line{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:3px 8px;border-radius:99px;background:var(--accent-soft);color:var(--accent-press);font-size:13px;font-weight:700}
.packs-line:is(:has(mark),.is-yomi){white-space:normal;word-break:keep-all;overflow-wrap:anywhere;border-radius:12px} /* #20: what the search found is never hidden under … */
.packs-line mark{white-space:nowrap} /* r2 #8: nor broken inside */
/* a line or a scene shown on one line (nowrap, …): its word breaks (word-packs.js breakWords <wbr>) are off — Chromium breaks at a
   <wbr> even under nowrap (a card's pill went to two lines, r2 #7) */
.packs-line:not(:has(mark)):not(.is-yomi) wbr{display:none}
@media (max-width:359px),(min-width:431px){.packs-scene wbr{display:none}}
.packs-n{margin-top:auto;font-size:13px;font-weight:700;color:var(--accent);white-space:nowrap}
.packs-n.is-yomi{white-space:normal;word-break:keep-all;overflow-wrap:anywhere}
.packs-pane mark,.packs-sheet mark{background:rgb(255 214 10 / .55);color:inherit;border-radius:3px;padding:0 1px}
/* found once more with the ways people type it (word-packs.js; r6 §7.1): said above the list, quietly */
.packs-used{margin:0 0 8px;color:var(--muted);font-size:13.5px;font-weight:600;word-break:keep-all;overflow-wrap:anywhere;line-break:strict}
.packs-used[hidden]{display:none}
.packs-empty{display:grid;justify-items:center;gap:10px;margin:28px 0;text-align:center;color:var(--muted);font-size:15px}
.packs-empty p{margin:0}
.packs-suggest{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
/* the sheet is the menu's (.drawer…: rises 340ms, the つまみ 27px to pull, is-closing, is-instant, the veil without blur when
   transparency is reduced #31); here only what is its own */
.packs-panel{outline:none}
.packs-sheet.is-closing .drawer-veil{pointer-events:auto}
.packs-head{padding:0 10px 6px 20px;align-items:flex-start}
.packs-head>div{flex:1;min-width:0}
.packs-head h2{font-size:22px;font-weight:800;word-break:keep-all;overflow-wrap:anywhere;text-wrap:balance}
.packs-sheet-scene{margin:2px 0 0;color:var(--muted);font-size:14px}
/* the 40 lines: a quiet two-column list, not buttons (they are read here and chosen when ordering; #19); the keys scroll it (#14) */
.packs-phrases{flex:0 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;margin:4px 16px 0;padding:0;border-radius:var(--r-md);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.packs-phrases:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.packs-phrases ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:0;padding:0;list-style:none}
.packs-phrases li{padding:10px 12px;font-size:15px;font-weight:600;line-height:1.35;word-break:keep-all;overflow-wrap:anywhere;text-wrap:pretty;box-shadow:inset 0 -1px 0 var(--line),inset -1px 0 0 var(--line)}
/* one column on a phone held upright (two made a long line break anywhere: 101 of 9,720 lines at 390; r5 新1), 14px under 360px;
   strict: a small kana or ー never starts a line */
@media (max-width:430px){.packs-phrases ul{grid-template-columns:minmax(0,1fr)}}
@media (max-width:359px){.packs-phrases li{font-size:14px}}
.packs-phrases li,.packs-line,.packs-scene{line-break:strict}
.packs-phrases li.is-hit{background:rgb(255 214 10 / .18)}
.packs-foot{flex:none;display:grid;gap:8px;padding:10px 16px max(12px,calc(env(safe-area-inset-bottom) + 8px))}
.packs-note{margin:0;text-align:center;color:var(--muted);font-size:13.5px;word-break:keep-all;overflow-wrap:anywhere;text-wrap:balance}
.packs-keep{white-space:nowrap}
.packs-note .packs-what{display:block}
.packs-warn{display:block;margin-top:2px;color:var(--warn);font-size:14px;font-weight:800}
.packs-use{display:inline-flex;align-items:center;justify-content:center;gap:8px}
.packs-use[hidden]{display:none}
.packs-use .ico{width:22px;height:22px;stroke-width:2.4}
/* the app's short word at the bottom (app.js showToast), with one action at most */
.app-toast{position:fixed;left:0;right:0;bottom:calc(env(safe-area-inset-bottom) + 96px);z-index:1300;display:flex;align-items:center;gap:6px;width:max-content;max-width:calc(100% - 32px);margin-inline:auto;padding:6px 6px 6px 16px;border-radius:14px;
  background:rgb(16 32 28 / .92);color:#fff;font-size:14px;font-weight:700;line-height:1.4;translate:0 12px;opacity:0;pointer-events:none;transition:opacity 200ms var(--ease-out),translate 240ms var(--ease-out)}
.app-toast{visibility:hidden;transition:opacity 200ms var(--ease-out),translate 240ms var(--ease-out),visibility 0s linear 240ms}
.app-toast.is-on{opacity:1;translate:0 0;visibility:visible;transition:opacity 200ms var(--ease-out),translate 240ms var(--ease-out),visibility 0s}
.app-toast>span{min-width:0;word-break:keep-all;overflow-wrap:anywhere}
.app-toast .nowrap{white-space:nowrap}
.app-toast{padding-right:16px}
.pack-chip{background:var(--pack-soft);color:var(--pack-ink)}
#pack-chip .pack-chip-ico{display:grid;place-items:center;flex:0 0 30px;width:30px;height:30px;border-radius:50%;background:#fff;color:var(--pack);font-size:17px;box-shadow:0 2px 6px rgb(16 48 40 / .12)}
.pack-chip-set{white-space:nowrap}
#pack-chip #pack-chip-text{flex:1;min-width:0;white-space:normal;word-break:keep-all;overflow-wrap:anywhere;line-height:1.3;padding-block:4px}
.pack-chip button:active{background:var(--pack-press)}
.wstep.is-video #pack-chip{display:none!important}
/* #1 N2: a short screen (a phone on its side, an SE or a 360×740 Android, the keyboard up; one row of lines on a card): the pane scrolls as one — the switch, the search and the kinds
   go up with it and the cards get the room; the field in use folds the title and the switch away */
@media (max-height:820px){
  .ideas:is(.is-packs,.has-styles){overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
  .ideas:is(.is-packs,.has-styles) .packs-pane{flex:none}
  .ideas:is(.is-packs,.has-styles) .packs-list{flex:none;overflow:visible;min-height:0}
}
@media (max-height:820px) and (pointer:coarse){body:has(.ideas.is-packs.is-searching) .bottom-nav{display:none}}
@media (orientation:landscape) and (max-height:500px){
  .ideas>.step-title{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  /* on its side: the switch scrolls away; the band is the search and the kinds side by side, the trades under them */
  .ideas:is(.is-packs,.has-styles){display:flex;flex-direction:column}
  .ideas:is(.is-packs,.has-styles) .packs-band{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);column-gap:10px;row-gap:0;align-items:center}
  .ideas:is(.is-packs,.has-styles) .packs-chips:not(.packs-jobs){margin:0 -18px 0 0;padding:2px 18px 2px 0}
  .ideas:is(.is-packs,.has-styles) .packs-jobs{grid-column:1/-1}
  .ideas:is(.is-packs,.has-styles) .packs-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .packs-card{min-height:112px}
  .packs-lines:not(:has(mark,.is-yomi)){max-height:26px} /* one row of lines on its side: a whole row of cards is seen at first (r4 #24) */
  .packs-phrases ul{grid-template-columns:repeat(2,minmax(0,1fr))} /* two on its side (three were too narrow for a long line; r5 新1) */
}
@media (orientation:landscape) and (max-height:430px){
  .ideas:not(.is-packs,.has-styles){grid-template-rows:auto auto minmax(0,1fr) auto}
  .ideas:not(.is-packs,.has-styles)>.ideas-switch{grid-area:1/1}
  .ideas:not(.is-packs,.has-styles)>#ideas-message{grid-area:3/1}
  .ideas:not(.is-packs,.has-styles)>.primary{grid-area:4/1}
  .ideas:not(.is-packs,.has-styles)>.ideas-stage{grid-area:1/2/5/3}
}
/* the sheet's lines that go in carry a small ✓ (UI review packs N6); a card's line found by its reading is tinted whole (N4) */
.packs-phrases li{position:relative;padding-left:28px}
.packs-in{position:absolute;left:8px;top:12px;display:grid;color:var(--accent)}
.packs-in .ico{width:15px;height:15px;stroke-width:2.4}
.packs-line.is-yomi{background:rgb(255 214 10 / .35);color:var(--ink);text-decoration:underline dotted 1.5px;text-underline-offset:3px}
.packs-yomi{display:inline-block;margin-left:4px;padding:0 4px;border-radius:4px;background:rgb(16 48 40 / .08);font-size:12px;font-weight:800;line-height:1.4;white-space:nowrap;text-decoration:none;vertical-align:1px}
/* N1: at the real iPhone Safari heights (390×664, 375×548; an iPad on its side too) the pane scrolls as one — the search and the
   kinds stay at its top (sticky, on the page's colour so the cards pass under them), however far the list is sent */
@media (max-height:820px){
  /* one opaque band the whole width, square at its edges (nothing shows through at its corners or between its rows; r4 #4 #19),
     with a thin shadow under it only while the cards pass under it (word-packs.js paintStuck) */
  .ideas:is(.is-packs,.has-styles) .packs-band{position:sticky;top:0;z-index:3;margin:0 -18px;padding:4px 18px;background:var(--bg);transition:box-shadow 160ms var(--ease-out)}
  .ideas:is(.is-packs,.has-styles) .packs-band.is-stuck{box-shadow:0 6px 8px -6px rgb(16 48 40 / .12)}
  /* the pane scrolls with the band stuck at its top: a card stops below the band and the screen's padding (10–14px) above it */
  .ideas:is(.is-packs,.has-styles) .packs-card{scroll-margin-top:calc(var(--band-h,104px) + 14px + 8px)}
  /* stuck, it sits the screen's padding (10–14px) below its top: that strip is the band's too, so no card shows above it */
  .ideas:is(.is-packs,.has-styles) .packs-band.is-stuck::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:16px;background:var(--bg)}
}
/* ---- ことばパック 6回目（設計図 packs-r6-spec.md）---- */
/* 40文 one or two across (r6 §4, 浩樹さん 2026-09-29 決定2): a row over the box of lines — 「40文」 on the left, the switch on the right —
   never in the title's row (there it pushed the titles into more lines). The switch is the アイデア switch made small: a grey groove,
   two 44×44 buttons, a white thumb that slides (a key moves it at once: is-instant) */
/* under 360px: one across only (7 letters to a line broke words), so no switch — 「40文」 stays */
/* the scene under the title breaks between its words (word-packs.js breakWords; r6 §4.1) */
.packs-sheet-scene{word-break:keep-all;overflow-wrap:anywhere;line-break:strict;text-wrap:pretty}
/* two across in a box narrower than 480px (a phone held upright): 14px, 24px on the left for the ✓, 10px on the right (r6 §4.3) —
   measured on the box, not the screen */
.packs-phrases{container-type:inline-size}
.packs-phrases[data-cols="1"] ul{grid-template-columns:minmax(0,1fr)}
.packs-phrases[data-cols="2"] ul{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:360px){
  @container (max-width:479px){
    .packs-phrases[data-cols="2"] li{font-size:14px;padding-left:24px;padding-right:10px}
    .packs-phrases[data-cols="2"] .packs-in{left:6px}
  }
}
@media (min-width:431px){
  @container (max-width:479px){
    .packs-phrases:not([data-cols]) li{font-size:14px;padding-left:24px;padding-right:10px}
    .packs-phrases:not([data-cols]) .packs-in{left:6px}
  }
}
@media (max-width:359px){.packs-phrases[data-cols] ul{grid-template-columns:minmax(0,1fr)}}
/* ことばパックのカード: one across under 360px (a line of 7 letters in a pill broke words; r6 §7.4) */
@media (max-width:359px){.ideas:is(.is-packs,.has-styles) .packs-grid{grid-template-columns:minmax(0,1fr)}}
/* the sheet's note (r6 §7.5): the ✓ is the list's own check, 1em, the app's green */
.packs-tick{display:inline-grid;vertical-align:-.15em;color:var(--accent)}
.packs-tick .ico{width:1em;height:1em;stroke-width:2.4}
/* 見本の名前と題: between phrases only (app.js phrased's <wbr>; r6 §7.11) */
.sample-name b,.sample-head h2{word-break:keep-all;overflow-wrap:anywhere;line-break:strict}
/* こだわりの選ぶ画面のカード: between words only (premium.js <wbr>), one across under 360px (r6 §7.12) */
.premium-card b,.premium-card small{word-break:keep-all;overflow-wrap:anywhere;line-break:strict}
@media (max-width:359px){.premium-grid{grid-template-columns:minmax(0,1fr)}}
/* words put in by app.js phrased() where a line may break only between phrases (the receipt's 『ご本人専用ページ』 line; r6 §3.7 M2) */
.keep-phrases{word-break:keep-all;overflow-wrap:anywhere;line-break:strict}
/* ---- ことばパックの組の絵（浩樹さん 2026-09-29「絵をアプリに入れて」・一覧 doc.nextcode.ltd/stamp119-r7 の形）----
   a card is the group's picture in a square well and its name under it: three across on a phone, two under 360px (a name's
   longest word, 8 letters, fits a third of 320 only at 10px); five on a phone on its side. The scene and the sample lines are
   the sheet's. The well is square before its picture comes (word-packs.js artFor), so nothing moves when it does. */
.ideas:is(.is-packs,.has-styles) .packs-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
@media (max-width:359px){.ideas:is(.is-packs,.has-styles) .packs-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (orientation:landscape) and (max-height:500px){.ideas:is(.is-packs,.has-styles) .packs-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.packs-card{min-height:0}}
.packs-card{gap:3px;padding:6px 6px 8px;border-radius:16px}
.packs-art{position:relative;display:block;aspect-ratio:1;border-radius:11px;background:var(--bg);overflow:hidden}
.packs-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity 200ms var(--ease-out);-webkit-user-drag:none;user-select:none}
.packs-art img.is-in{opacity:1}
.packs-card>b{margin:3px 2px 0;font-size:clamp(10.5px,calc((100cqw - 8px) / var(--len,1)),15px);line-height:1.3} /* its 2px sides and a search mark's 2px are left out (a 7-letter name broke in Chromium at 390) */
.packs-card>.packs-n{margin:0 2px;font-size:12.5px;line-height:1.3}
.packs-n.is-wrap{white-space:normal;word-break:keep-all;overflow-wrap:anywhere}
/* the sheet: the same picture beside its name (480) */
.packs-head{align-items:center}
.packs-head-art{flex:none;width:76px}
.packs-head-art .packs-art{border-radius:14px}
@media (max-width:359px){.packs-head-art{width:60px}}

/* 画風（浩樹さん 2026-09-30）: style-list.js — the アイデア side is the 100 styles, drawn as ことばパック's cards */
.ideas:not(.has-styles)>.styles-pane,.ideas.is-packs>.styles-pane{display:none}
.styles-big{flex:1 1 auto;min-height:0;display:grid;place-items:center;padding:4px 16px}
.styles-big img{width:min(100%,56dvh,420px);height:auto;aspect-ratio:1;object-fit:contain;border-radius:18px;background:var(--bg)}
.styles-sheet .packs-close{font-size:18px;font-weight:700}
/* 管理画面で足した組（お知らせ中）: カードの右上に小さく NEW */
.packs-new{position:absolute;top:6px;right:8px;z-index:1;padding:2px 7px;border-radius:99px;background:#d9602f;color:#fff;font-size:10.5px;font-weight:800;line-height:1.4;letter-spacing:.04em;pointer-events:none}
/* トップのお知らせの帯: 期間限定テーマと、新しいことばパックが順に入れ替わる（中身だけが横に流れる） */
.theme-banner .theme-slide{display:flex;align-items:center;gap:inherit;flex:1;min-width:0}
.theme-banner.is-pack .theme-kicker{color:#0b6e56}
.theme-banner.is-pack .theme-kicker b{background:#0b6e56}
.theme-banner.is-pack .theme-thumbs img:last-child{display:none}
.theme-dots{display:flex;gap:4px;flex:none;align-self:flex-end;margin:0 0 3px}
.theme-dots i{width:5px;height:5px;border-radius:50%;background:rgb(16 48 40 / .18);transition:background-color .2s,width .2s}
.theme-dots i.is-on{width:12px;border-radius:3px;background:rgb(16 48 40 / .55)}
.theme-banner{touch-action:pan-y}
.theme-banner.is-pack .theme-thumbs{width:44px}.theme-banner.is-pack .theme-thumbs img:first-child{rotate:-4deg}
/* カタログの上の帯（検索・種類）は透ける（浩樹さん 2026-09-30「メニューボタンの背景も半透明に・下に画像が入り込んでも違和感なく・透けて見える感じ」）:
   どの高さでも画面ごと送り、帯は上に貼りつく。帯はすりガラス（色72%＋ぼかし）、チップも少し透ける */
.ideas:is(.is-packs,.has-styles){overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
.ideas:is(.is-packs,.has-styles) .packs-pane{flex:none}
.ideas:is(.is-packs,.has-styles) .packs-list{flex:none;overflow:visible;min-height:0}
.ideas:is(.is-packs,.has-styles) .packs-band{position:sticky;top:0;z-index:3;margin:0 -18px;padding:4px 18px 8px;background:color-mix(in srgb,var(--bg) 80%,transparent);-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6)}
.ideas:is(.is-packs,.has-styles) .packs-band::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:16px;background:color-mix(in srgb,var(--bg) 80%,transparent);-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6)}
.ideas:is(.is-packs,.has-styles) .packs-band .packs-chip:not([aria-pressed=true]){background:rgb(255 255 255 / .62)}
/* カタログの「選んだもの」と案内（浩樹さん 2026-09-30）: style-list.js */
.cat-tray{flex:none;margin:10px 0 4px;padding:10px 12px 12px;border-radius:18px;background:var(--surface);box-shadow:var(--shadow-1),inset 0 0 0 1px var(--line)}
.cat-tray-title{margin:0 0 8px;font-size:13px;font-weight:800;color:var(--muted)}
.cat-slots{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cat-slot{display:flex;align-items:center;gap:8px;min-height:60px;padding:6px 8px;border:0;border-radius:14px;background:var(--bg);color:var(--ink);font:inherit;text-align:left;cursor:pointer;box-shadow:inset 0 0 0 2px transparent;transition:box-shadow 200ms var(--ease-out),transform 200ms var(--ease-out)}
.cat-slot:active{transform:scale(var(--press));transition-duration:90ms}
.cat-slot:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.cat-slot:not(.is-set){box-shadow:inset 0 0 0 2px var(--accent-ring)}
.cat-slot.is-set{box-shadow:inset 0 0 0 2px var(--accent)}
.cat-slot-art{position:relative;flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:var(--accent-soft);overflow:hidden}
.cat-slot-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff}
.cat-slot-n{font-size:20px;font-weight:900;color:var(--accent-press)}
.cat-slot-text{min-width:0;display:grid;gap:1px}
.cat-slot-text small{font-size:12px;font-weight:800;color:var(--muted)}
.cat-slot-text b{font-size:14px;font-weight:800;line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.cat-slot:not(.is-set) .cat-slot-text b{color:var(--muted);font-weight:700}
.cat-go{width:100%;margin-top:10px;min-height:52px;font-size:17px}
.cat-slot{position:relative}
.cat-slot:not(.is-set)::after{content:"";position:absolute;left:4px;top:50%;width:54px;height:54px;margin-top:-27px;border-radius:15px;background:var(--accent-soft);z-index:-1;animation:cat-breathe 2.4s ease-in-out infinite}
.cat-slot{isolation:isolate}
@keyframes cat-breathe{0%,100%{opacity:0;transform:scale(.85)}50%{opacity:1;transform:scale(1.08)}}
.cat-fly{position:fixed;z-index:1300;object-fit:contain;border-radius:12px;pointer-events:none;transform-origin:center;filter:drop-shadow(0 10px 18px rgb(16 48 40 / .25))}
.cat-coach{position:fixed;inset:0;z-index:1250;display:grid;place-items:center;padding:20px;background:rgb(16 24 20 / .38);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.cat-coach-card{width:min(100%,380px);display:grid;gap:12px;padding:22px 20px 18px;border-radius:24px;background:var(--surface);box-shadow:0 24px 48px -12px rgb(0 0 0 / .35);text-align:center}
.cat-coach-title{margin:0;font-size:21px;font-weight:900;line-height:1.35;word-break:keep-all;overflow-wrap:anywhere}
.cat-coach-text{margin:0;font-size:16px;line-height:1.6;color:var(--ink-2);word-break:keep-all;overflow-wrap:anywhere}
.cat-coach-go{min-height:56px;font-size:18px}
.cat-coach-other{min-height:44px;border:0;background:none;color:var(--muted);font:inherit;font-size:15px;font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
/* 下のメニューの「カタログ」を目立たせる（浩樹さん 2026-09-30「色をマゼンタに・丸に・すこし上にはみ出るように」）: アイコンをマゼンタの丸にして、
   帯の上に半分はみ出させる（白い縁で帯から浮かせる）。押せる範囲はボタン全体のまま */
.bottom-nav>#nav-ideas{color:#c8006f}
.bottom-nav>#nav-ideas .nav-ico{box-sizing:border-box;width:54px;height:54px;margin-top:-26px;padding:13px;border-radius:50%;background:linear-gradient(150deg,#ff4fae 0%,#e6007e 55%,#c2006b 100%);color:#fff;stroke-width:2.5;
  box-shadow:0 0 0 4px #fff,0 10px 20px -6px rgb(214 0 120 / .6),inset 0 1px 0 rgb(255 255 255 / .35)}
.bottom-nav>#nav-ideas[aria-current=page] .nav-ico{transform:translateY(-2px) scale(1.04)}
.bottom-nav>#nav-ideas .nav-label{font-weight:800}
/* シートの下の2つのボタン（浩樹さん 2026-09-30「選び直すボタンもつけて」）: 選び直す（白）｜「〇〇」で決定（緑・広い） */
.packs-btns{display:grid;grid-template-columns:minmax(104px,auto) 1fr;gap:10px}
.packs-btns .packs-again{min-height:52px;padding:0 16px;font-size:16px;font-weight:800}
.packs-btns:has(.packs-use[hidden]){grid-template-columns:1fr}
/* 作るの画面の「画風：〇〇」の札（ことばパックの札の下）: 見本の絵つき */
.style-chip-art{overflow:hidden;padding:0}
.style-chip-art img{width:100%;height:100%;object-fit:contain;background:#fff;border-radius:inherit}
#style-chip .style-chip-art{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border-radius:10px;background:#fff;box-shadow:0 2px 6px rgb(16 48 40 / .12)}
#style-chip #style-chip-text{flex:1;min-width:0;white-space:normal;word-break:keep-all;overflow-wrap:anywhere;line-height:1.3;padding-block:4px}
.wstep.is-video #style-chip{display:none!important}
/* 画風を選ぶ（作る画面の段・浩樹さん 2026-09-30）: カタログの画風と同じ一覧。選んだ画風のカードに緑の枠とチェック */
.style-step-pane{width:100%;margin-top:8px}
.style-step-pane .packs-card.is-picked{box-shadow:0 0 0 3px var(--accent,#2f7a63)}
.style-step-pane .packs-card.is-picked::after{content:"✓";position:absolute;top:6px;right:6px;width:26px;height:26px;border-radius:50%;background:var(--accent,#2f7a63);color:#fff;font-weight:900;font-size:15px;line-height:26px;text-align:center}
/* ことば・画風の札は横に並べる（浩樹さん 2026-09-30「上下ではなくて左右に」）: 片方だけの時は1つで行いっぱい */
.choice-chips{display:flex;gap:8px;min-width:0}
.choice-chips>.sample-chip{flex:1 1 0;min-width:0}
.choice-chips:not(:has(>.sample-chip:not([hidden]))){display:none}
.choice-chips .pack-chip-text,.choice-chips #pack-chip-text{font-size:13px}
.stepper li.preset .slot{box-shadow:inset 0 0 0 2px var(--accent)}
/* 段の丸の下の名前（浩樹さん 2026-09-30）: 写真・画風・ことば・枚数・こだわり・確認。いまの段は濃く、横長の低い画面では出さない */
.stepper ol{padding-bottom:16px}
.dot-label{position:absolute;top:100%;left:50%;translate:-50% 3px;font-size:10.5px;font-weight:800;line-height:1.2;white-space:nowrap;color:var(--muted);pointer-events:none}
.stepper li.now .dot-label{color:var(--accent-press)}
@media (orientation:landscape) and (max-height:430px){.stepper ol{padding-bottom:0}.dot-label{display:none}}
/* 動画のボタンは赤（浩樹さん 2026-09-30「赤がYouTubeを連想させる・グレーを赤にして」）: 赤い帯・白い丸・赤い三角 */
.video-pill{background:#e62117;color:#fff;box-shadow:0 6px 16px -6px rgb(230 33 23 / .6)}
.video-pill-icon::before{border-left-color:#e62117}
@media (prefers-reduced-transparency:reduce){.video-pill{background:#e62117}}
/* 札を押すとカタログのその側が開く: 押せる見た目（押すと少し縮む・右に ›） */
.sample-chip.is-link{cursor:pointer;transition:transform 200ms var(--ease-out)}
.sample-chip.is-link:active{transform:scale(var(--press));transition-duration:90ms}
.sample-chip.is-link [role=button]:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:6px}
/* 札の並びは 画風｜ことば（浩樹さん 2026-09-30「左右入れ替えて」: 手順の順と同じ） */
.choice-chips>#style-chip{order:-1}
/* 案内の手順は 1. 2. 3. と左にそろえる（浩樹さん 2026-09-30「見やすく整列して」） */
.cat-coach-list{margin:0 auto;padding:0;list-style:none;counter-reset:coach;display:grid;gap:10px;text-align:left;justify-self:center}
.cat-coach-list li{counter-increment:coach;display:grid;grid-template-columns:30px 1fr;align-items:center;gap:10px;font-size:17px;font-weight:800;line-height:1.4;color:var(--ink)}
.cat-coach-list li::before{content:counter(coach);display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;font-size:16px;font-weight:900}
.tester-note{margin:4px 0 0;padding:8px 12px;border-radius:12px;background:rgb(230 0 126 / .08);color:#a3005a;font-size:13.5px;font-weight:800;line-height:1.5}
/* 「この／〇〇 画風と／〇〇 ことばパック／で作ります。」（浩樹さん 2026-09-30「選んだものをしっかりと」） */
.cat-coach-picks{display:grid;gap:8px;text-align:left}
.cat-coach-lead{margin:0;font-size:17px;font-weight:800;color:var(--ink-2)}
.cat-coach-pick{display:grid;grid-template-columns:56px minmax(0,1fr);grid-template-rows:auto auto;column-gap:12px;align-items:center;padding:8px 12px 8px 8px;border-radius:16px;background:var(--accent-soft);box-shadow:inset 0 0 0 2px var(--accent-ring)}
.cat-coach-pick-art{grid-row:1/3;width:56px;height:56px;border-radius:12px;overflow:hidden;background:#fff}
.cat-coach-pick-art img{width:100%;height:100%;object-fit:contain}
.cat-coach-pick b{align-self:end;font-size:20px;font-weight:900;line-height:1.25;color:var(--ink);word-break:keep-all;overflow-wrap:anywhere}
.cat-coach-pick-tail{align-self:start;font-size:14px;font-weight:800;color:var(--accent-press)}
/* 段の丸は押せる（浩樹さん 2026-09-30「1〜6もボタン化」）: 押すと縮む。済み・いま・次の段・カタログの絵が押せる */
.stepper li{cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.stepper li .slot{transition:transform 200ms var(--ease-out),box-shadow 240ms var(--ease-out),background-color 240ms var(--ease-out)}
.stepper li:active .slot{transform:scale(var(--press));transition-duration:90ms}
.stepper li::after{content:"";position:absolute;inset:-6px -4px -18px}