/* Twin Editor — four colour themes (夜空 / 白 / 目にやさしい / 若葉) chosen by data-theme on <html>; all text pairs meet WCAG AA. */
@font-face{font-family:"Cormorant Garamond";src:url(/static/fonts/cormorant-garamond-latin.woff2) format("woff2");font-weight:300 700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
/* ==== theme tokens: every colour of the site is defined here and only here (a test checks) ==== */
/* theme:base (the same in every theme) */
:root{
  --radius:14px;
  --serif:"Cormorant Garamond","Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;
  --sans:"Noto Sans JP","Hiragino Sans","Yu Gothic UI",Meiryo,system-ui,sans-serif;
  --num:"Chakra Petch","Noto Sans JP",ui-monospace,SFMono-Regular,Menlo,monospace;
  --google-bg:#ffffff;--google-ink:#1f1f1f;--google-line:#dadce0;
  --mock-bg:#232323;--mock-line:#3d3d44;--mock-muted:#bdbdbd;--mock-ui:#000000a6;--mock-safe:#e9cf9acc;
  --scrim:#00000080;--sheet-shadow:#00000066;--tabbar-h:65px;
  /* シンクロ率 card (ホーム): always dark, the same in every theme (gold = 本人, cyan = AI) */
  --sync-bg:#07080f;--sync-bg2:#0c0f1c;--sync-stage-1:#141a33;--sync-stage-2:#06070d;--sync-ink:#e8ecff;--sync-muted:#8c96c0;
  --sync-gold:#f3d9a4;--sync-cyan:#5fe8ff;--sync-gold-hi:#ffe8be;--sync-cyan-hi:#a0f6ff;--sync-up:#5fe8ff;
  --sync-grid:#5fe8ff12;--sync-scanline:#0000002e;--sync-line:#1d2540;--sync-track:#1d2540;--sync-glow:#5fe8ff8c;--sync-hud:#07080feb;--sync-hud-0:#07080f00;
  --sync-btn-ink:#07080f;--sync-tab-on:#5fe8ff26;--sync-focus:#ff4fd8;
  /* ロゴの色: どの画面の色でも同じ (2026-10-20 天池さん: 色の切り替えは背景などのベースの色だけ。ボタンとロゴは変えない) */
  --logo-1:#f6e6bf;--logo-2:#e9cf9a;--logo-3:#a9d4ff;--logo-4:#dcefff;--logo-w1:#e9cf9a;--logo-w2:#a9d4ff;
  --sync-mask:radial-gradient(closest-side,#000 78%,#0000 100%);
  --sw-night-bg:#0b1226;--sw-night-accent:#e9cf9a;--sw-white-bg:#ffffff;--sw-white-accent:#8fcaf9;--sw-soft-bg:#efe8da;--sw-soft-accent:#d9b97a;--sw-leaf-bg:#eef7dc;--sw-leaf-accent:#9fdc5a;
}
/* theme:night 夜空 — night sky, gold (left twin) and ice blue (right twin) */
:root,:root[data-theme=night]{
  color-scheme:dark;
  --bg:#070b18;--bg2:#0b1226;--card:#0f1830;--card2:#131e3a;--ink:#eef1f7;--muted:#aab4c8;--line:#24304f;
  --gold:#e9cf9a;--gold-2:#f6e6bf;--ice:#a9d4ff;--ice-2:#dcefff;--on-accent:#0b1020;
  --grad:linear-gradient(90deg,#e9cf9a,#a9d4ff);
  --ok:#8fe0b0;--ok-bg:#0f2a20;--ok-line:#1d4a37;--err:#ffaba0;--err-bg:#2f1418;--err-line:#5a232a;--info:#a9d4ff;--info-bg:#0f2142;--info-line:#1f3a68;
  --warn:#f3dca6;--warn-bg:#2a2210;--warn-line:#5a4820;
  --me:#1d3558;--me-line:#2c4c7a;--bot:#131e3a;
  --header-bg:rgba(7,11,24,.86);--sky-glow:#13204a;--card-glow:#1b2a55;
  --btn-ring:#ffffff14;--btn-glow:#a9d4ff80;--accent-soft:#e9cf9a44;--swatch-line:#ffffff55;
  --title-grad:linear-gradient(90deg,#e9cf9a,#a9d4ff);--accent-line:#e9cf9a;--accent-icon:#e9cf9a;--btn-shine:#ffffff00;--ghost-bg:transparent;--ghost-line:#24304f;--tl-tel:#e9cf9a;--tl-se:#a9d4ff;
  --checker:#8883;
  --tl-raw:#4a5577;--tl-gap:#1a2240;--tl-zoom:#d8b4ff;--tl-bgm:#7fb7e8;--tl-mark:#ffcf6e;
  --logo-edge:none;--sync-art:block;--sync-aspect:16/11;--sync-hud-pos:absolute;--sync-hud-fill:linear-gradient(to top,#07080fd9,#07080f00);--sync-num-glow:0 0 14px #5fe8ff8c;--sync-stage-bg:none;--glass:rgba(15,24,48,.5);--emblem-night:block;--emblem-white:none;--emblem-soft:none;--emblem-leaf:none;--emblem-shadow:transparent;
  --word-1:#e9cf9a;--word-2:#a9d4ff;--word-weight:0;
  --star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-10 -10 20 20'%3E%3Cpath fill='%23e9cf9a' d='M0-10C1.2-1.2 1.2-1.2 10 0C1.2 1.2 1.2 1.2 0 10C-1.2 1.2-1.2 1.2-10 0C-1.2-1.2-1.2-1.2 0-10Z'/%3E%3C/svg%3E");
}
/* theme:white 白 — bright and clean; deeper gold / blue so every text pair passes WCAG AA on white */
:root[data-theme=white]{
  color-scheme:light;
  --bg:#f6f7fa;--bg2:#ffffff;--card:#ffffff;--card2:#edf1f7;--ink:#141a2b;--muted:#4f5a70;--line:#d6dce8;
  --gold:#1f5aa0;--gold-2:#1b3f73;--ice:#1d5fa8;--ice-2:#154a85;--on-accent:#0b1020;
  --grad:linear-gradient(90deg,#e9cf9a,#a9d4ff);
  --ok:#1c6b40;--ok-bg:#e6f4ec;--ok-line:#a9d8bd;--err:#a3261c;--err-bg:#fdecea;--err-line:#f0b9b2;--info:#1d5fa8;--info-bg:#e8f1fb;--info-line:#b3cdea;
  --warn:#6b4a0e;--warn-bg:#fbf3df;--warn-line:#e6d29e;
  --me:#e3eefb;--me-line:#b3cdea;--bot:#f1f3f7;
  --header-bg:rgba(255,255,255,.9);--sky-glow:#e6edfb;--card-glow:#fbf1d8;
  --btn-ring:#0d1b3624;--btn-glow:#a9d4ff80;--accent-soft:#e9b84a40;--swatch-line:#00000033;
  --title-grad:linear-gradient(90deg,#1b3f73,#2f7bd0);--accent-line:#e9cf9a;--accent-icon:#c08a1c;--btn-shine:#ffffff00;--ghost-bg:#ffffff;--ghost-line:#c9d3e3;--tl-tel:#e9cf9a;--tl-se:#a9d4ff;
  --checker:#0000001a;
  --tl-raw:#a9b4cc;--tl-gap:#e3e7ef;--tl-zoom:#8b5cc7;--tl-bgm:#3b82c4;--tl-mark:#f0a92e;
  --logo-edge:drop-shadow(0 0 .7px #0d1b36b3) drop-shadow(0 1px 2px #0d1b3659);--sync-art:none;--sync-aspect:auto;--sync-hud-pos:static;--sync-hud-fill:none;--sync-num-glow:none;--sync-stage-bg:none;--glass:rgba(255,255,255,.72);--emblem-night:none;--emblem-white:block;--emblem-soft:none;--emblem-leaf:none;--emblem-shadow:#1d3a6a26;
  --word-1:#6b4a0e;--word-2:#154a85;--word-weight:.7;
  --star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-10 -10 20 20'%3E%3Cpath fill='%23e9cf9a' d='M0-10C1.2-1.2 1.2-1.2 10 0C1.2 1.2 1.2 1.2 0 10C-1.2 1.2-1.2 1.2-10 0C-1.2-1.2-1.2-1.2 0-10Z'/%3E%3C/svg%3E");
}
/* theme:soft 目にやさしい — warm paper, dark warm grey text, muted accents, no pure white or black */
:root[data-theme=soft]{
  color-scheme:light;
  --bg:#efe8da;--bg2:#f6f0e3;--card:#f7f1e5;--card2:#ebe2d0;--ink:#3a342c;--muted:#6a6052;--line:#d9ceb8;
  --gold:#3a5673;--gold-2:#334a63;--ice:#3f6584;--ice-2:#2f4f69;--on-accent:#0b1020;
  --grad:linear-gradient(90deg,#e9cf9a,#a9d4ff);
  --ok:#3d6b4a;--ok-bg:#e3eadb;--ok-line:#b9cdb0;--err:#9a3d2f;--err-bg:#f5e1d8;--err-line:#e0b5a6;--info:#3f6584;--info-bg:#e2e6e4;--info-line:#b7c6cc;
  --warn:#6e5320;--warn-bg:#f2e6c8;--warn-line:#dcc896;
  --me:#e4e2d2;--me-line:#c9c3a8;--bot:#f2ebdd;
  --header-bg:rgba(239,232,218,.92);--sky-glow:#f5eedf;--card-glow:#efe3c9;
  --btn-ring:#3a342c26;--btn-glow:#a9d4ff80;--accent-soft:#d9b97a40;--swatch-line:#3a342c40;
  --title-grad:linear-gradient(90deg,#3a4f68,#55809f);--accent-line:#e9cf9a;--accent-icon:#a8782a;--btn-shine:#ffffff00;--ghost-bg:#fbf6ec;--ghost-line:#d3c4a6;--tl-tel:#e9cf9a;--tl-se:#a9d4ff;
  --checker:#5a4a3022;
  --tl-raw:#b3a892;--tl-gap:#e5dccb;--tl-zoom:#8c6fa6;--tl-bgm:#7f9fbb;--tl-mark:#d9a548;
  --logo-edge:drop-shadow(0 0 .7px #3a342cb3) drop-shadow(0 1px 2px #3a342c59);--sync-art:none;--sync-aspect:auto;--sync-hud-pos:static;--sync-hud-fill:none;--sync-num-glow:none;--sync-stage-bg:none;--glass:rgba(247,241,229,.74);--emblem-night:none;--emblem-white:none;--emblem-soft:block;--emblem-leaf:none;--emblem-shadow:#4a381a2b;
  --word-1:#5e4720;--word-2:#2f4f69;--word-weight:.7;
  --star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-10 -10 20 20'%3E%3Cpath fill='%23e9cf9a' d='M0-10C1.2-1.2 1.2-1.2 10 0C1.2 1.2 1.2 1.2 0 10C-1.2 1.2-1.2 1.2-10 0C-1.2-1.2-1.2-1.2 0-10Z'/%3E%3C/svg%3E");
}
/* theme:leaf 若葉 — fresh young leaves: pale yellow-green paper, deeper pale green cards, dark green-grey text, lime → mint → sky buttons */
:root[data-theme=leaf]{
  color-scheme:light;
  --bg:#f2f8e4;--bg2:#fafdf3;--card:#e9f3d8;--card2:#dcebc4;--ink:#22352a;--muted:#4a5f4e;--line:#c8dcaa;
  --gold:#2c6630;--gold-2:#22502a;--ice:#1c6684;--ice-2:#14506a;--on-accent:#0b1020;
  --grad:linear-gradient(90deg,#e9cf9a,#a9d4ff);
  --ok:#17603a;--ok-bg:#f8fff2;--ok-line:#3f9a62;--err:#a3261c;--err-bg:#fdecea;--err-line:#f0b9b2;--info:#1c5f86;--info-bg:#e3f1f8;--info-line:#a6cde2;
  --warn:#6b4a0e;--warn-bg:#fbf3d6;--warn-line:#e3cf94;
  --me:#d8ecc8;--me-line:#b2d39a;--bot:#eef6e1;
  --header-bg:rgba(242,248,228,.92);--sky-glow:#e2f4c8;--card-glow:#f3fbdc;
  --btn-ring:#22352a24;--btn-glow:#a9d4ff80;--accent-soft:#9fd36a4d;--swatch-line:#22352a40;
  --title-grad:linear-gradient(90deg,#2a6a22,#1c7088);--accent-line:#e9cf9a;--accent-icon:#4e9a26;--btn-shine:#ffffff00;--ghost-bg:#fafdf3;--ghost-line:#bfd59e;--tl-tel:#e9cf9a;--tl-se:#a9d4ff;
  --checker:#2a4a2022;
  --tl-raw:#adc29a;--tl-gap:#dfead0;--tl-zoom:#8a6cc2;--tl-bgm:#4c98c6;--tl-mark:#eaa636;
  --logo-edge:drop-shadow(0 0 .7px #22352ab3) drop-shadow(0 1px 2px #22352a59);--sync-art:none;--sync-aspect:auto;--sync-hud-pos:static;--sync-hud-fill:none;--sync-num-glow:none;--sync-stage-bg:none;--glass:rgba(233,243,216,.74);--emblem-night:none;--emblem-white:none;--emblem-soft:none;--emblem-leaf:block;--emblem-shadow:#2f5a2a26;
  --word-1:#3a6a1a;--word-2:#1c6684;--word-weight:.7;
  --star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-10 -10 20 20'%3E%3Cpath fill='%23e9cf9a' d='M0-10C1.2-1.2 1.2-1.2 10 0C1.2 1.2 1.2 1.2 0 10C-1.2 1.2-1.2 1.2-10 0C-1.2-1.2-1.2-1.2 0-10Z'/%3E%3C/svg%3E");
}
/* theme:auto-light — no choice yet and the device is in light mode: the 白 tokens (a test keeps them equal) */
@media (prefers-color-scheme:light){
:root:not([data-theme]){
  color-scheme:light;
  --bg:#f6f7fa;--bg2:#ffffff;--card:#ffffff;--card2:#edf1f7;--ink:#141a2b;--muted:#4f5a70;--line:#d6dce8;
  --gold:#1f5aa0;--gold-2:#1b3f73;--ice:#1d5fa8;--ice-2:#154a85;--on-accent:#0b1020;
  --grad:linear-gradient(90deg,#e9cf9a,#a9d4ff);
  --ok:#1c6b40;--ok-bg:#e6f4ec;--ok-line:#a9d8bd;--err:#a3261c;--err-bg:#fdecea;--err-line:#f0b9b2;--info:#1d5fa8;--info-bg:#e8f1fb;--info-line:#b3cdea;
  --warn:#6b4a0e;--warn-bg:#fbf3df;--warn-line:#e6d29e;
  --me:#e3eefb;--me-line:#b3cdea;--bot:#f1f3f7;
  --header-bg:rgba(255,255,255,.9);--sky-glow:#e6edfb;--card-glow:#fbf1d8;
  --btn-ring:#0d1b3624;--btn-glow:#a9d4ff80;--accent-soft:#e9b84a40;--swatch-line:#00000033;
  --title-grad:linear-gradient(90deg,#1b3f73,#2f7bd0);--accent-line:#e9cf9a;--accent-icon:#c08a1c;--btn-shine:#ffffff00;--ghost-bg:#ffffff;--ghost-line:#c9d3e3;--tl-tel:#e9cf9a;--tl-se:#a9d4ff;
  --checker:#0000001a;
  --tl-raw:#a9b4cc;--tl-gap:#e3e7ef;--tl-zoom:#8b5cc7;--tl-bgm:#3b82c4;--tl-mark:#f0a92e;
  --logo-edge:drop-shadow(0 0 .7px #0d1b36b3) drop-shadow(0 1px 2px #0d1b3659);--sync-art:none;--sync-aspect:auto;--sync-hud-pos:static;--sync-hud-fill:none;--sync-num-glow:none;--sync-stage-bg:none;--glass:rgba(255,255,255,.72);--emblem-night:none;--emblem-white:block;--emblem-soft:none;--emblem-leaf:none;--emblem-shadow:#1d3a6a26;
  --word-1:#6b4a0e;--word-2:#154a85;--word-weight:.7;
  --star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-10 -10 20 20'%3E%3Cpath fill='%23e9cf9a' d='M0-10C1.2-1.2 1.2-1.2 10 0C1.2 1.2 1.2 1.2 0 10C-1.2 1.2-1.2 1.2-10 0C-1.2-1.2-1.2-1.2 0-10Z'/%3E%3C/svg%3E");
}
}
/* ==== end of theme tokens ==== */
*{box-sizing:border-box}
body{margin:0;color:var(--ink);font:16px/1.8 var(--sans);
  background:var(--bg) radial-gradient(1200px 600px at 75% -10%,var(--sky-glow) 0,transparent 60%) no-repeat;
  -webkit-font-smoothing:antialiased}
a{color:var(--ice)}
a:hover{color:var(--ice-2)}
:focus-visible{outline:2px solid var(--ice);outline-offset:2px}
.wrap{max-width:1040px;margin:0 auto;padding:0 16px}
.top{background:var(--header-bg);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.top .wrap{display:flex;align-items:center;gap:16px;min-height:64px;flex-wrap:wrap}
.logo{display:flex;align-items:center;text-decoration:none;border-radius:10px;padding:5px 0}
/* header lockup (inline SVG from src/lockup.ts): mark + wordmark in the logo's own gold / ice (every theme), no badge behind it */
.lockup{display:block;height:30px;width:auto;filter:var(--logo-edge)}
.lockup .g1{stop-color:var(--logo-1)}.lockup .g2{stop-color:var(--logo-2)}.lockup .g3{stop-color:var(--logo-3)}.lockup .g4{stop-color:var(--logo-4)}
.lockup .w1{stop-color:var(--logo-w1)}.lockup .w2{stop-color:var(--logo-w2)}.lockup .word{stroke-width:var(--word-weight)}
.beta{font-size:11px;font-weight:700;background:var(--grad);color:var(--on-accent);border-radius:6px;padding:0 6px;margin-left:8px;line-height:18px}
.nav{display:flex;gap:4px;flex-wrap:wrap;margin-left:auto;align-items:center}
.nav a{text-decoration:none;padding:6px 10px;border-radius:8px;color:var(--muted);font-size:14px}
.nav a.on,.nav a:hover{background:var(--card2);color:var(--ink)}
.nav a.btn{color:var(--on-accent)}
.logout{margin:0}
main.wrap{padding-top:28px;padding-bottom:56px;min-height:70vh}
h1,h2{font-family:var(--serif);font-weight:500;font-variant-numeric:lining-nums;letter-spacing:.02em;color:var(--gold-2);background:var(--title-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
h1{font-size:28px;line-height:1.45;margin:8px 0 18px}
h2{font-size:24px;line-height:1.4;margin:40px 0 14px}
h3{font-size:16px;margin:16px 0 8px;color:var(--gold-2)}
.muted{color:var(--muted);font-size:14px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin:12px 0}
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.btn,button.btn{display:inline-block;background:var(--accent-line);background-image:var(--grad);color:var(--on-accent);border:0;border-radius:999px;padding:10px 22px;font:inherit;font-weight:700;text-decoration:none;cursor:pointer;box-shadow:inset 0 1px 0 var(--btn-shine),0 0 0 1px var(--btn-ring),0 6px 24px -10px var(--btn-glow);transition:filter .15s}
.btn:hover,button.btn:hover{filter:brightness(1.08);color:var(--on-accent)}
.btn.small{padding:4px 14px;font-size:14px}
.btn.ghost{background:var(--ghost-bg);color:var(--ink);border:1px solid var(--ghost-line);box-shadow:none}
.btn.ghost:hover{border-color:var(--ice);color:var(--ink)}
button.link{background:none;border:0;color:var(--muted);cursor:pointer;font:inherit;font-size:14px}
button.link:hover{color:var(--ink)}
input[type=text],input[type=email],input[type=url],textarea,select{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg2);color:var(--ink);font:inherit}
input:focus,textarea:focus,select:focus{border-color:var(--ice);outline:none}
textarea{min-height:90px}
label{display:block;font-weight:700;margin:12px 0 4px}
code{background:var(--card2);border-radius:6px;padding:1px 6px;font-size:.92em}
.flash{border-radius:10px;padding:10px 14px;margin:0 0 12px;border:1px solid transparent}
.flash.ok{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-line)}.flash.error{background:var(--err-bg);color:var(--err);border-color:var(--err-line)}.flash.info{background:var(--info-bg);color:var(--info);border-color:var(--info-line)}
/* landing hero: one emblem per theme (only the shown one loads). 夜空: the master, its black melts into the sky with
   "screen". 白 / 目にやさしい / 若葉: transparent cut-outs re-inked for light paper (scripts/brand-cutout.py), on the page itself */
.hero{display:grid;grid-template-columns:1.15fr 1fr;gap:24px;align-items:center;padding:24px 0 8px}
.hero h1{font-size:32px;line-height:1.55}
.hero .lead{font-size:18px;color:var(--muted)}
.eyebrow{margin:0;font-size:14px;letter-spacing:.08em;color:var(--gold)}
.eyebrow::before{content:"";display:inline-block;width:12px;height:12px;margin-right:8px;background:var(--star) center/contain no-repeat;vertical-align:-1px}
.cta{display:flex;gap:10px;flex-wrap:wrap}
.emblem{display:block;max-width:420px;width:100%;justify-self:center}
.emblem img{width:100%;height:auto}
.emblem .e-night{display:var(--emblem-night);mix-blend-mode:screen}.emblem .e-white{display:var(--emblem-white)}.emblem .e-soft{display:var(--emblem-soft)}.emblem .e-leaf{display:var(--emblem-leaf)}
.emblem .e-white,.emblem .e-soft,.emblem .e-leaf{filter:var(--logo-edge) drop-shadow(0 10px 22px var(--emblem-shadow))}
.steps{counter-reset:s;list-style:none;padding:0}
.steps li{counter-increment:s;padding:8px 0 8px 48px;position:relative}
.steps li::before{content:counter(s);position:absolute;left:0;top:8px;width:32px;height:32px;border-radius:50%;background:var(--grad);color:var(--on-accent);text-align:center;line-height:32px;font-weight:700;font-family:var(--serif);font-size:18px;font-variant-numeric:lining-nums}
.price{font-size:22px;line-height:1.5;font-weight:700;color:var(--ink)}
.plan{position:relative}
.plan h3{font-family:var(--serif);font-size:20px;font-weight:500}
.plan.current{border-color:var(--accent-line);box-shadow:0 0 0 1px var(--accent-line)}
.price small.tax,.yearly small.tax{display:block;font-size:12px;font-weight:400;color:var(--muted)}
.yearly{font-size:14px;margin:4px 0 8px}
.badge{display:inline-block;font-size:12px;font-weight:700;background:var(--grad);color:var(--on-accent);border-radius:6px;padding:0 6px}
.flash.banner a{color:inherit;font-weight:700}
.meter{height:14px;background:var(--bg2);border:1px solid var(--line);border-radius:7px;overflow:hidden}
.meter span{display:block;height:100%;background:var(--grad)}
table{width:100%;border-collapse:collapse;font-size:14px}
.card:has(table){overflow-x:auto}
th,td{text-align:left;padding:8px;border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--gold-2);font-weight:700}
.tag{display:inline-block;background:var(--card2);border:1px solid var(--line);border-radius:999px;padding:0 10px;font-size:13px;margin:2px}
.preview{background:repeating-conic-gradient(var(--checker) 0 25%,transparent 0 50%) 0 0/20px 20px;border-radius:10px;width:100%;max-width:480px;display:block}
.chat{display:flex;flex-direction:column;gap:10px;padding:12px;background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius);min-height:300px;max-height:60vh;overflow-y:auto}
.bubble{max-width:78%;padding:10px 14px;border-radius:18px;white-space:pre-wrap;word-break:break-word}
.bubble.user{align-self:flex-end;background:var(--me);border:1px solid var(--me-line);border-bottom-right-radius:4px}
.bubble.assistant{align-self:flex-start;background:var(--bot);border:1px solid var(--line);border-bottom-left-radius:4px}
.bubble ul{margin:6px 0 0;padding-left:18px;font-size:14px}
.bubble time{display:block;font-size:11px;color:var(--muted);margin-top:4px}
.bubble .applies{display:flex;align-items:center;gap:6px;margin:8px 0 0;padding-top:6px;border-top:1px solid var(--line);font-size:13px;color:var(--muted);white-space:normal}
.bubble .applies .icon{width:16px;height:16px;flex:none;color:var(--accent-icon)}
.chat-form{display:flex;gap:8px;margin-top:10px}
.chat-form textarea{min-height:48px;flex:1}
.draft{background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn-line);border-radius:10px;padding:10px 14px;margin-bottom:12px}
.legal h2{font-size:20px}
.legal table th{width:30%;white-space:nowrap}
.secret{font-family:ui-monospace,Menlo,Consolas,monospace;background:var(--bg2);border:1px solid var(--line);padding:10px;border-radius:8px;word-break:break-all;user-select:all}
.foot{border-top:1px solid var(--line);padding:24px 0;font-size:13px}
.foot a{margin-right:14px;color:var(--muted)}
.foot a:hover{color:var(--ink)}
.foot p::before{content:"";display:inline-block;width:10px;height:10px;margin-right:6px;background:var(--star) center/contain no-repeat;opacity:.8}
@media (max-width:760px){.hero{grid-template-columns:1fr}.emblem{order:-1;max-width:min(64vw,280px)}.hero h1{font-size:25px}.hero .lead{font-size:16px}.nav{margin-left:0}}
@media (prefers-reduced-motion:reduce){.btn{transition:none}}
.narrow{max-width:480px}
.meter span.w0{width:0%}.meter span.w5{width:5%}.meter span.w10{width:10%}.meter span.w15{width:15%}.meter span.w20{width:20%}.meter span.w25{width:25%}.meter span.w30{width:30%}.meter span.w35{width:35%}.meter span.w40{width:40%}.meter span.w45{width:45%}.meter span.w50{width:50%}.meter span.w55{width:55%}.meter span.w60{width:60%}.meter span.w65{width:65%}.meter span.w70{width:70%}.meter span.w75{width:75%}.meter span.w80{width:80%}.meter span.w85{width:85%}.meter span.w90{width:90%}.meter span.w95{width:95%}.meter span.w100{width:100%}
.meter.small{height:6px;margin-top:4px}
/* landing: steps as cards, before/after, plan comparison, FAQ, final call to action */
.grid.three{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.grid.two{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.step-no{margin:0;width:36px;height:36px;border-radius:50%;background:var(--grad);color:var(--on-accent);text-align:center;line-height:36px;font-weight:700;font-family:var(--serif);font-size:20px;font-variant-numeric:lining-nums}
.ba ul{margin:0;padding-left:20px}
.ba li{margin:4px 0}
.ba .before{border-style:dashed}
.ba .before li{color:var(--muted)}
.ba .after{border-color:var(--accent-line);box-shadow:0 0 0 1px var(--accent-soft),0 10px 40px -24px var(--ice)}
.scroll-x{overflow-x:auto}
.compare{min-width:640px}
.compare thead th{font-family:var(--serif);font-size:16px}
.compare tbody th{white-space:nowrap;color:var(--muted);font-weight:400}
.faq details{padding:0}
.faq summary{cursor:pointer;padding:14px 20px;font-weight:700;color:var(--ink);list-style:none;position:relative;padding-right:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:20px;top:10px;font-size:22px;color:var(--gold)}
.faq details[open] summary::after{content:"−"}
.faq details p{margin:0;padding:0 20px 16px;color:var(--muted)}
.final-cta{text-align:center;margin-top:48px;padding:32px 20px;background:var(--card) radial-gradient(600px 200px at 50% 0,var(--card-glow) 0,transparent 70%) no-repeat}
.final-cta .cta{justify-content:center}
.picks{display:flex;flex-direction:column;gap:8px;margin:8px 0 16px}
.pick{display:flex;gap:12px;align-items:center;padding:8px;border:1px solid var(--line);border-radius:10px;background:var(--bg2);cursor:pointer}
.pick input{width:20px;height:20px;flex:none;margin:0}
.pick img{width:160px;height:90px;object-fit:cover;border-radius:6px;flex:none;background:var(--card2)}
.pick span{min-width:0;word-break:break-word}
.pick small{display:block;color:var(--muted)}
.check{display:flex;gap:8px;align-items:center;margin:8px 0}
.check input{width:auto;margin:0}
@media (max-width:560px){.pick img{width:96px;height:54px}}
/* はじめかた (onboarding) */
.hidden{display:none!important}
.btn.big{font-size:18px;padding:14px 28px}
.onb{list-style:none;padding:0;display:flex;flex-direction:column;gap:16px}
.onb-step{display:flex;gap:16px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 20px}
.onb-step h2{margin:0 0 8px;font-size:20px}
.onb-step>div{flex:1;min-width:0}
.onb-step .check{flex:none;width:34px;height:34px;border-radius:50%;border:2px solid var(--line);color:transparent;text-align:center;line-height:30px;font-weight:700}
.onb-step.done .check{background:var(--grad);border-color:transparent;color:var(--on-accent)}
.onb-step.done{border-color:var(--ok-line)}
.code-big{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:32px;letter-spacing:.12em;text-align:center;margin:12px 0}
.btn.google{background:var(--google-bg);color:var(--google-ink);border:1px solid var(--google-line)}
.or{text-align:center;margin:12px 0}
/* review 2026-10: phones and 4-column price cards */
body{word-break:auto-phrase;overflow-wrap:break-word}
.nowrap{white-space:nowrap}
.plan .price{font-size:19px}
.scroll-hint{display:none;margin:0 0 4px;font-size:12px}
@media (max-width:600px){
.scroll-hint{display:block}
.card:has(table) table:not(.kv):not(.compare){min-width:520px}
.legal table,.legal tbody,.legal tr,.legal th,.legal td,table.kv,table.kv tbody,table.kv tr,table.kv th,table.kv td{display:block;width:auto;white-space:normal}
.legal tr,table.kv tr{border-bottom:1px solid var(--line);padding:6px 0}
.legal th,.legal td,table.kv th,table.kv td{border-bottom:0;padding:2px 0}
}
/* polish 2026-10-16: data tables stack into cards on phones, compact app nav, centred step checks */
.onb-step .check{display:flex;align-items:center;justify-content:center;margin:0;line-height:1;font-size:18px}
.foot a{display:inline-block;white-space:nowrap;margin-bottom:4px}
a.card.link-card{display:block;text-decoration:none;color:inherit;transition:border-color .15s}
a.card.link-card:hover{border-color:var(--ice)}
a.card.link-card h3{text-decoration:underline;text-underline-offset:3px}
.more{margin:8px 0 0;color:var(--ice);font-size:14px;font-weight:700}
.actions{display:flex;flex-wrap:wrap;gap:6px}
td form{margin:0}
.swatch{display:inline-block;vertical-align:-2px;margin-right:3px}
.swatch rect{stroke:var(--swatch-line)}
.small-list{margin:0;padding-left:18px}
.learned li{margin:4px 0}
@media (max-width:600px){
.top .wrap{padding-top:10px;padding-bottom:6px;row-gap:6px}
.top .tools{order:1;margin-left:auto}
.top .nav.app{order:2;width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.top .nav.app a{text-align:center;padding:6px 4px;font-size:13px;background:var(--card)}
.top .nav.app a.on{background:var(--card2);box-shadow:inset 0 0 0 1px var(--line)}
h1 span.muted{display:block;font-size:15px}
table.rows,table.rows tbody,table.rows tr,table.rows td{display:block;width:auto;min-width:0!important}
table.rows thead{display:none}
table.rows tr{border-bottom:1px solid var(--line);padding:10px 0}
table.rows tr:last-child{border-bottom:0}
table.rows td{border:0;padding:2px 0;display:grid;grid-template-columns:7.5em 1fr;gap:8px}
table.rows td:not([data-label]){display:block}
table.rows td[data-label]::before{content:attr(data-label);color:var(--muted);font-size:13px}
table.rows td:empty{display:none}
.chat-form{flex-direction:column}
.bubble{max-width:92%}
}
/* ---------- intuitive 2026-10-16: icons, pills, one next action, meters, stepper, LP visuals ---------- */
.icon{width:1.2em;height:1.2em;flex:none;vertical-align:-.22em}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px}
.btn.small{min-height:32px}
.btn.big{min-height:54px}
.btn.ghost{color:var(--ink)}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--ice);outline-offset:3px;border-radius:8px}
.pill{display:inline-flex;align-items:center;gap:4px;border-radius:999px;padding:1px 10px;font-size:13px;font-weight:700;line-height:1.7;white-space:nowrap;border:1px solid transparent}
.pill .icon{width:14px;height:14px}
.pill.ok{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-line)}
.pill.run{background:var(--info-bg);color:var(--info);border-color:var(--info-line)}
.pill.fail{background:var(--err-bg);color:var(--err);border-color:var(--err-line)}
.pill.plan{background:var(--card2);color:var(--gold-2);border-color:var(--line)}
.kicker{margin:0 0 6px;font-size:13px;font-weight:700;letter-spacing:.12em;color:var(--gold)}
.kicker::before{content:"";display:inline-block;width:11px;height:11px;margin-right:6px;background:var(--star) center/contain no-repeat;vertical-align:-1px}
details.more>summary{cursor:pointer;color:var(--ice);font-size:14px;font-weight:700;list-style:none;display:inline-flex;align-items:center;gap:4px;padding:4px 0}
details.more>summary::-webkit-details-marker{display:none}
details.more>summary::before{content:"+";font-size:18px;line-height:1;width:1em;text-align:center}
details.more[open]>summary::before{content:"−"}
details.more>:not(summary){margin-top:6px}
/* ホーム: 「次にやること」 (one primary action), remaining minutes, quiet shortcuts, job list with pills */
.next{border-color:var(--accent-line);box-shadow:0 0 0 1px var(--accent-soft),0 18px 50px -30px var(--ice);padding:24px;background:var(--card) radial-gradient(500px 160px at 0 0,var(--card-glow) 0,transparent 70%) no-repeat}
.next-body{display:flex;gap:18px;align-items:flex-start}
.next-body>div{flex:1;min-width:0}
.next-icon{flex:none;width:56px;height:56px;border-radius:50%;background:var(--grad);color:var(--on-accent);display:flex;align-items:center;justify-content:center}
.next-icon .icon{width:28px;height:28px;stroke-width:2}
.next h1,.next h2{margin:0 0 4px;font-size:24px}
.next p{margin:4px 0 12px}
.next .meter{margin:8px 0}
.next form{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:8px 0}
.next form input[type=url]{flex:1 1 280px}
.next-sub{display:flex;gap:16px;flex-wrap:wrap;font-size:14px;margin-top:6px}
.mock-panel{display:inline-flex;flex-direction:column;gap:6px;background:var(--mock-bg);border:1px solid var(--mock-line);border-radius:10px;padding:10px 12px;min-width:240px;max-width:100%}
.mock-panel small{color:var(--mock-muted);font-size:12px}
.mock-panel b{display:block;text-align:center;border-radius:6px;padding:8px;background:var(--grad);color:var(--on-accent);font-size:15px}
.home-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:14px;margin-top:14px}
.home-grid>.card{margin:0}
.minutes .big-num{font-size:34px;line-height:1.2;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)}
.minutes .row{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.minutes .meter{height:12px;margin:10px 0 6px}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tile{display:flex;align-items:center;gap:10px;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);text-decoration:none;font-weight:700;font-size:15px;min-height:56px}
.tile .icon{color:var(--accent-icon);width:22px;height:22px}
.tile:hover{border-color:var(--ice);color:var(--ink)}
.jobs{list-style:none;margin:0;padding:0}
.jobs li{border-bottom:1px solid var(--line)}
.jobs li:last-child{border-bottom:0}
.jobs a{display:grid;grid-template-columns:28px 1fr auto;gap:4px 12px;align-items:center;padding:12px 4px;color:var(--ink);text-decoration:none}
.jobs a:hover{background:var(--card2)}
.jobs .icon{color:var(--muted)}
.jobs .what{font-weight:700}
.jobs .when{color:var(--muted);font-size:13px;font-weight:400;margin-left:8px}
.jobs .why{grid-column:2/4;color:var(--err);font-size:13px}
.jobs .meter{grid-column:2/4;height:6px}
/* はじめかた: stepper + one open step */
.stepper{list-style:none;padding:0;margin:0 0 18px;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;counter-reset:st}
.stepper li{counter-increment:st;display:flex;align-items:center;gap:8px;padding:10px;border-radius:12px;background:var(--card);border:1px solid var(--line);color:var(--muted);font-size:14px;font-weight:700;min-width:0}
.stepper li::before{content:counter(st);flex:none;width:28px;height:28px;border-radius:50%;border:2px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700}
.stepper li.on{border-color:var(--accent-line);color:var(--ink);box-shadow:0 0 0 1px var(--accent-soft)}
.stepper li.on::before{background:var(--grad);border-color:transparent;color:var(--on-accent)}
.stepper li.done{color:var(--ok)}
.stepper li.done::before{content:"✓";background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok);font-family:var(--sans);font-size:14px}
details.onb-step{display:block;padding:0}
details.onb-step>summary{display:flex;align-items:center;gap:14px;padding:16px 20px;cursor:pointer;list-style:none}
details.onb-step>summary::-webkit-details-marker{display:none}
details.onb-step>summary h2{margin:0;font-size:20px}
details.onb-step>summary .state{margin-left:auto}
details.onb-step>.body{padding:0 20px 20px 68px}
details.onb-step[open]{border-color:var(--accent-line);box-shadow:0 0 0 1px var(--accent-soft)}
details.onb-step.done[open]{border-color:var(--ok-line);box-shadow:none}
details.onb-step:not([open]):not(.done) h2{opacity:.75}
.howto{list-style:none;padding:0;margin:12px 0;display:grid;gap:8px}
.howto li{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;background:var(--bg2);border:1px solid var(--line);border-radius:10px;font-size:15px}
.howto li .n{flex:none;width:24px;height:24px;border-radius:50%;background:var(--grad);color:var(--on-accent);font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center}
.howto kbd{font:inherit;font-weight:700;color:var(--gold-2);background:var(--card2);border:1px solid var(--line);border-radius:6px;padding:0 6px;white-space:nowrap}
.done-line{color:var(--ok);font-weight:700;display:flex;gap:6px;align-items:center}
/* LP */
.hero h1{font-size:40px;line-height:1.4}
.hero .lead{margin:8px 0 18px}
.tl{margin:8px 0 0;padding:18px 20px}
.tl-grid{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;align-items:center}
.tl-head{grid-column:1/3;display:flex;align-items:center;gap:8px;font-weight:700;margin-top:6px}
.tl-head .icon{color:var(--accent-icon)}
.tl-head small{color:var(--muted);font-weight:400}
.tl-label{font-size:13px;color:var(--muted);white-space:nowrap;display:flex;gap:6px;align-items:center}
.tl-label .icon{width:15px;height:15px}
.tl svg.track{display:block;width:100%;height:22px}
.tl-arrow{grid-column:1/3;text-align:center;color:var(--accent-icon);margin:2px 0}
.tl-arrow .icon{transform:rotate(90deg);width:22px;height:22px}
.tl .raw{fill:var(--tl-raw)}.tl .gap{fill:var(--tl-gap)}.tl .tel{fill:var(--tl-tel)}.tl .se{fill:var(--tl-se)}.tl .zm{fill:var(--tl-zoom)}.tl .bgm{fill:var(--tl-bgm)}.tl .mk{fill:var(--tl-mark)}
.icon-steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;counter-reset:is}
.icon-steps li{counter-increment:is;text-align:center;padding:22px 14px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);position:relative}
.icon-steps li::before{content:counter(is);position:absolute;top:10px;left:14px;font-family:var(--serif);font-size:20px;color:var(--gold)}
.icon-steps .big-icon{width:64px;height:64px;margin:0 auto 10px;border-radius:50%;background:var(--card2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--accent-icon)}
.icon-steps .big-icon .icon{width:30px;height:30px}
.icon-steps strong{display:block;font-size:17px}
.icon-steps span{display:block;color:var(--muted);font-size:14px;margin-top:2px}
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:12px 0}
.chips li{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:var(--card);border:1px solid var(--line);font-size:14px}
.chips .icon{color:var(--accent-icon);width:16px;height:16px}
.feature{display:flex;gap:12px;align-items:flex-start}
.feature .icon{color:var(--accent-icon);width:28px;height:28px;margin-top:2px}
.feature h3{margin:0 0 2px}
.feature p{margin:0}
.plan .minutes-line{font-size:15px;margin:6px 0}
.plan .minutes-line strong{font-size:22px;color:var(--gold-2)}
.plan ul.facts{list-style:none;padding:0;margin:8px 0;color:var(--muted);font-size:14px}
.plan ul.facts li{display:flex;gap:6px;align-items:center}
.plan ul.facts .icon{width:15px;height:15px;color:var(--ice)}
/* job page */
.job-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.job-head .big-msg{font-size:18px;font-weight:700}
/* key/value lists that read at a glance */
.facts-kv{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:8px 0}
.facts-kv dt{color:var(--muted);font-size:14px}
.facts-kv dd{margin:0;font-weight:700}
@media (max-width:760px){
.home-grid{grid-template-columns:1fr}
.hero h1{font-size:30px}
.icon-steps{grid-template-columns:1fr}
.icon-steps li{display:grid;grid-template-columns:56px 1fr;gap:4px 14px;text-align:left;align-items:center;padding:14px}
.icon-steps li::before{display:none}
.icon-steps .big-icon{grid-row:1/3;width:52px;height:52px;margin:0}
}
@media (max-width:600px){
.next{padding:18px}
.next-body{flex-direction:column;gap:10px}
.next-icon{width:46px;height:46px}
.next h1,.next h2{font-size:21px}
.next .btn{width:100%}
.stepper li{flex-direction:column;text-align:center;gap:4px;font-size:12px;padding:8px 4px}
details.onb-step>summary{padding:14px}
details.onb-step>.body{padding:0 14px 16px}
.tl{padding:14px}
.tl-head{flex-wrap:wrap;row-gap:0}
.tl-head small{flex-basis:100%;margin-left:30px}

.final-cta .btn{width:100%}
}
/* ---------- 画面の色: header switch (small) and the settings page picker (big) ---------- */
.top .tools{display:flex;align-items:center;gap:10px}
.tool-link{color:var(--muted);font-size:14px;text-decoration:none;padding:6px 4px;border-radius:8px}
.tool-link:hover,.tool-link.on{color:var(--ink)}
.theme-switch{display:flex;gap:2px;align-items:center;margin:0;padding:2px;border:1px solid var(--line);border-radius:999px;background:var(--card)}
.theme-switch button,.theme-pick button{display:inline-flex;align-items:center;gap:5px;background:none;border:0;border-radius:999px;padding:2px 9px 2px 4px;font:inherit;font-size:12px;line-height:1.5;color:var(--muted);cursor:pointer;min-height:28px;white-space:nowrap}
.theme-switch button:hover{color:var(--ink);background:var(--card2)}
.theme-switch button[aria-pressed=true]{color:var(--ink);background:var(--card2);box-shadow:inset 0 0 0 1px var(--accent-line)}
.sw{flex:none;width:18px;height:18px;border-radius:50%;border:1px solid var(--swatch-line)}
.sw.night{background:linear-gradient(135deg,var(--sw-night-bg) 55%,var(--sw-night-accent) 55%)}
.sw.white{background:linear-gradient(135deg,var(--sw-white-bg) 55%,var(--sw-white-accent) 55%)}
.sw.soft{background:linear-gradient(135deg,var(--sw-soft-bg) 55%,var(--sw-soft-accent) 55%)}
.sw.leaf{background:linear-gradient(135deg,var(--sw-leaf-bg) 55%,var(--sw-leaf-accent) 55%)}
.sw.auto{background:linear-gradient(90deg,var(--sw-night-bg) 50%,var(--sw-white-bg) 50%)}
/* no choice yet: the header shows which colours the device picked */
@media (prefers-color-scheme:dark){:root:not([data-theme]) .theme-switch button[value=night]{color:var(--ink);background:var(--card2)}}
@media (prefers-color-scheme:light){:root:not([data-theme]) .theme-switch button[value=white]{color:var(--ink);background:var(--card2)}}
.theme-pick{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:8px 0}
.theme-pick button{flex-direction:column;gap:8px;padding:14px 10px;border-radius:12px;border:1px solid var(--line);background:var(--bg2);color:var(--ink);font-size:15px;font-weight:700}
.theme-pick button:hover{border-color:var(--ice)}
.theme-pick button[aria-pressed=true]{border-color:var(--accent-line);box-shadow:0 0 0 2px var(--accent-line)}
.theme-pick button[aria-pressed=true] .lbl::before{content:"✓ "}
.theme-pick .sw{width:44px;height:44px}
@media (max-width:760px){.theme-switch .lbl{font-size:11px}.theme-switch button{padding:2px 7px 2px 3px;gap:4px}.theme-switch .sw{width:16px;height:16px}}
/* phones: four swatches only (the name stays for screen readers and in the button's title), so the header never scrolls sideways */
@media (max-width:600px){.theme-switch .lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.theme-switch button{padding:3px;min-width:30px;min-height:30px;justify-content:center}.theme-switch .sw{width:20px;height:20px}}
.card-h{margin:0 0 6px;font-size:20px}
/* logged in: logo + colour switch / 設定 / ログアウト on the first row, the page tabs on their own row below */
@media (min-width:601px){
.top .nav.app+.tools{order:1;margin-left:auto}
.top .nav.app{order:2;width:100%;margin:0 0 6px -10px}
.top .wrap:has(.nav.app){row-gap:0;padding-top:8px}
}
/* Shorts: 長い動画用 / ショート用 on the style page, 縦型の完成イメージ (9:16 + YouTube's covered areas), candidates on the job page */
.format-nav{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 4px}
.format-nav a{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border:1px solid var(--line);border-radius:999px;background:var(--card2);color:var(--ink);text-decoration:none;font-size:14px}
.format-nav a:hover{border-color:var(--ice)}
.short-wrap{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.short-wrap>.grid{flex:1 1 280px;min-width:0}
.short-mock{margin:12px 0;flex:none;width:224px;max-width:100%}
.short-screen{position:relative;width:216px;height:384px;border-radius:18px;overflow:hidden;background:var(--mock-bg);border:4px solid var(--mock-line)}
.short-ui{position:absolute;display:flex;align-items:center;justify-content:center;text-align:center;font-size:10px;line-height:1.3;color:var(--mock-muted);background:var(--mock-ui)}
.short-ui.top{top:0;left:0;right:0;height:10%}
.short-ui.bottom{bottom:0;left:0;right:0;height:25%}
.short-ui.right{top:10%;bottom:25%;right:0;width:16%}
.short-safe{position:absolute;top:10%;bottom:25%;left:6%;right:16%;border:1px dashed var(--mock-safe);border-radius:4px}
.short-telop{position:absolute;top:0;left:0;width:100%;height:100%}
.short-mock figcaption{font-size:12px;margin-top:6px}
.picks-h{font-size:15px;margin:14px 0 4px}
@media (max-width:560px){.short-wrap{flex-direction:column}.short-mock{margin:12px auto}}
/* ---------- 営業ツール (/admin/sales, owner only) ---------- */
.sales-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.sales-tabs a{padding:6px 14px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);text-decoration:none;font-size:14px}
.sales-tabs a.on{background:var(--card2);border-color:var(--ice);font-weight:700}
.sales-tabs a.back{margin-left:auto;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0}
.chips a{padding:2px 12px;border:1px solid var(--line);border-radius:999px;color:var(--muted);text-decoration:none;font-size:13px}
.chips a.on{color:var(--ink);border-color:var(--ice);background:var(--card2)}
.pill.stage-candidate{background:var(--card2);color:var(--muted);border-color:var(--line)}
.pill.stage-contacted{background:var(--info-bg);color:var(--info);border-color:var(--info-line)}
.pill.stage-trial{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-line)}
.pill.stage-paid{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-line)}
.pill.stage-declined{background:transparent;color:var(--muted);border-color:var(--line)}
.pill.stage-due{background:var(--err-bg);color:var(--err);border-color:var(--err-line)}
.due-box{border-color:var(--err-line);background:var(--err-bg)}
.due-box .card-h,.due-date{color:var(--err)}
.due-date{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
tr.due td{background:var(--err-bg)}
.score{display:inline-block;min-width:2.4em;text-align:center;font-weight:700;color:var(--gold-2);font-size:18px}
.score.big{font-size:34px;min-width:0}
.score.big small{font-size:14px;margin-left:2px;color:var(--muted)}
.lead-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 8px}
.err-text{color:var(--err);font-size:13px}
.paste textarea{min-height:70px}
.copy-row{display:flex;gap:8px;align-items:center}
.copy-row input{flex:1;min-width:0}
.btn.copied{filter:brightness(1.12)}
.tpl{border-top:1px solid var(--line);padding-top:10px;margin-top:10px}
.tpl h3{margin:0 0 6px;font-size:16px}
.tpl textarea{min-height:330px;font-size:14px;line-height:1.7}
.tpl-edit textarea{min-height:190px;font-size:14px;line-height:1.7}
.tpl-edit label{display:block;margin:8px 0 4px;font-weight:700}
.form-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 10px}
.form-row label{min-width:8em;font-weight:700}
.form-row select,.form-row input{flex:1 1 200px;width:auto}
input[type=date]{padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg2);color:var(--ink);font:inherit}
form.inline{display:inline-block;margin:6px 8px 6px 0}
.grid.stats .card{margin:0}
.grid.stats .price{font-size:26px;margin:4px 0}
table.leads td{vertical-align:top}
.compare-sales th[scope=row]{text-align:left;white-space:nowrap}
@media (max-width:600px){.sales-tabs a{font-size:13px;padding:5px 10px}.sales-tabs a.back{margin-left:0}.copy-row{flex-direction:column;align-items:stretch}tr.due td{background:transparent}tr.due{background:var(--err-bg)}}
/* ---------- phase 5: edit dictionary (あなたの編集のくせ) and 分身度 ---------- */
.dict-lines{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.dict-line{margin:0}
.dict-line.locked{border-color:var(--accent-line)}
.dict-rule{margin:0 0 4px;font-size:16px;line-height:1.6;overflow-wrap:anywhere}
.dict-arrow{color:var(--accent-icon);font-weight:700;margin:0 4px}
.small{font-size:13px}
.dict-line p.small{margin:2px 0}
details.dict-fix>summary{cursor:pointer;display:inline-block;margin-top:6px;padding:3px 12px;border:1px solid var(--ghost-line);border-radius:999px;background:var(--ghost-bg);color:var(--ink);font-size:13px;font-weight:700;list-style:none}
details.dict-fix>summary::-webkit-details-marker{display:none}
details.dict-fix[open]>summary{border-color:var(--accent-line)}
details.dict-fix form{margin-top:8px}
details.dict-fix fieldset{border:1px solid var(--line);border-radius:10px;padding:8px 12px;margin:0 0 8px;min-width:0}
details.dict-fix legend{font-weight:700;padding:0 4px;font-size:14px}
label.radio{display:flex;gap:8px;align-items:flex-start;margin:6px 0;font-size:14px;overflow-wrap:anywhere}
label.radio input{margin-top:4px;flex:none}
.twin h2{display:flex;flex-wrap:wrap;align-items:baseline;gap:10px}
.twin h2 .price{font-size:28px;margin:0}
.twin .meter{margin:6px 0 10px}
table.twin-items td:nth-child(2){font-weight:700;text-align:right;white-space:nowrap}
.twin-history{list-style:none;padding:0;margin:0;display:grid;gap:4px}
.twin-history li{display:grid;grid-template-columns:7em 4.5em 1fr;align-items:center;gap:8px}
@media (max-width:600px){.twin-history li{grid-template-columns:6em 4em 1fr}table.twin-items td.muted{font-size:12px}}
/* ---------- phones 2026-10-18: thin top bar (logo + メニュー), main pages in a tab bar at the bottom, full-width main buttons ---------- */
.menu,.phone-login,.tabbar{display:none}
@media (max-width:600px){
.top{position:static;backdrop-filter:none}
.top .wrap{flex-wrap:nowrap;gap:8px;min-height:56px;padding-top:6px;padding-bottom:6px}
.top .nav,.top .nav.app,.top .tools{display:none}
.lockup{height:26px}
.logo{flex:none}
.top .phone-login{display:inline-flex;margin-left:auto;min-height:44px;padding:0 14px;white-space:nowrap}
.menu{display:block;margin-left:auto}
.phone-login+.menu{margin-left:0}
.menu-btn{display:flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);font-size:14px;font-weight:700;cursor:pointer;list-style:none;white-space:nowrap}
.menu-btn::-webkit-details-marker{display:none}
.menu[open] .menu-btn{border-color:var(--accent-line)}
.menu[open]::before{content:"";position:fixed;inset:0;background:var(--scrim);z-index:15}
.menu-panel{position:fixed;left:0;right:0;bottom:0;z-index:30;max-height:80vh;overflow-y:auto;background:var(--card);border-top:1px solid var(--line);border-radius:18px 18px 0 0;padding:10px 16px calc(16px + env(safe-area-inset-bottom));box-shadow:0 -12px 40px -12px var(--sheet-shadow)}
body:has(.tabbar) .menu-panel{bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom));border-radius:18px 18px 0 0;padding-bottom:16px}
.menu-head{display:flex;align-items:center;justify-content:space-between;margin:0 0 4px}
.menu-head b{color:var(--gold-2)}
.menu-close{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin-right:-10px;border:0;border-radius:999px;background:none;color:var(--muted);cursor:pointer}
.menu-list{list-style:none;margin:0;padding:0}
.menu-list li{border-bottom:1px solid var(--line)}
.menu-list a,.menu-list .menu-item{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:0 6px;color:var(--ink);text-decoration:none;font:inherit;font-weight:700;background:none;border:0;cursor:pointer;text-align:left}
.menu-list a.on{color:var(--gold-2)}
.menu-list .icon{color:var(--accent-icon);width:22px;height:22px}
.menu-list .menu-item{color:var(--muted)}
.menu-label{margin:14px 0 6px;color:var(--muted);font-size:13px}
.theme-switch.in-menu{display:grid;grid-template-columns:1fr 1fr;gap:6px;border:0;padding:0;background:none;border-radius:0}
.theme-switch.in-menu button{justify-content:flex-start;gap:10px;min-height:48px;padding:0 12px;border:1px solid var(--line);border-radius:12px;background:var(--bg2);color:var(--ink);font-size:14px}
.theme-switch.in-menu button[aria-pressed=true]{box-shadow:0 0 0 2px var(--accent-line)}
.theme-switch.in-menu .lbl{position:static;width:auto;height:auto;overflow:visible;clip-path:none}
.theme-switch.in-menu .sw{width:24px;height:24px}
.theme-switch.in-menu .lbl{font-size:14px}
html.menu-open .tabbar a.on{color:var(--muted)}html.menu-open .tabbar a.on .icon{color:inherit}html.menu-open .tabbar a.on span{border-bottom-color:transparent}
html.menu-open .tabbar [data-open-menu]{color:var(--ink)}html.menu-open .tabbar [data-open-menu] .icon{color:var(--accent-icon)}html.menu-open .tabbar [data-open-menu] span{border-bottom:2px solid var(--accent-line)}
html.menu-open{overflow:hidden}
.tabbar{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--card);border-top:1px solid var(--line);padding:0 4px env(safe-area-inset-bottom);box-shadow:0 -6px 24px -12px var(--sheet-shadow)}
.tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:calc(var(--tabbar-h) - 1px);color:var(--muted);text-decoration:none;font-size:11px;font-weight:700;line-height:1.3;white-space:nowrap;border-radius:12px}
.tabbar .icon{width:24px;height:24px}
.tabbar a.on{color:var(--ink)}
.tabbar a.on .icon{color:var(--accent-icon)}
.tabbar a.on span{border-bottom:2px solid var(--accent-line)}
body:has(.tabbar){padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom))}
/* ホーム: チャンネル / プラン are already in the tab bar */
.tiles a[href="/app/style"],.tiles a[href="/app/billing"]{display:none}
/* the one main button of a screen: full width, easy to hit */
main .btn:not(.small){width:100%;margin:4px 0}
main table .btn:not(.small){width:auto}
main .btn.small{min-height:44px}
/* 最近の処理: date + time on one line under the title, the status pill always at the right edge */
.jobs a{grid-template-columns:28px minmax(0,1fr) auto}
.jobs .when{display:block;margin-left:0;white-space:nowrap}
.jobs .job-pill{justify-self:end;align-self:start}
/* tables stacked as cards: values start at the left, pills keep their size, long URLs wrap inside the card */
table.rows td{text-align:left}
table.rows td>*{min-width:0}
table.rows td>.pill,table.rows td>.due-date{justify-self:start}
table.rows td a,table.rows td .err,table.rows td small{overflow-wrap:anywhere}
/* number cards two per row instead of one tall column */
.grid.stats{grid-template-columns:1fr 1fr;gap:10px}
.grid.stats .card{padding:14px}
.grid.stats .price{font-size:22px}
}
/* phones: logged out the bar holds logo + ログイン + メニュー */
@media (max-width:420px){.top .wrap:has(.phone-login){gap:6px}.top .wrap:has(.phone-login) .lockup{height:22px}.top .wrap:has(.phone-login) .beta{display:none}}
/* ---------- phones are for checking, editing is in Premiere on a PC (2026-10-18) ---------- */
.phone-only,.phone-note{display:none}
@media (max-width:600px){
.pc-only{display:none}
.phone-only{display:block}
.on-pc{margin-top:6px}
.on-pc strong{display:inline-flex;align-items:center;gap:6px}
.on-pc .icon{width:20px;height:20px;color:var(--accent-icon)}
.copy-done{margin:4px 0 0;overflow-wrap:anywhere}
.phone-note{display:flex;align-items:flex-start;gap:6px;margin:12px 0 0;padding:8px 4px 8px 12px;border:1px solid var(--line);border-radius:12px;background:var(--card);font-size:14px;line-height:1.6}
.phone-note[hidden]{display:none}
.phone-note p{display:flex;gap:8px;align-items:flex-start;margin:0;padding-top:4px;flex:1;min-width:0}
.phone-note p .icon{width:20px;height:20px;flex:none;color:var(--accent-icon)}
.phone-note-close{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;margin:-4px 0;border:0;border-radius:999px;background:none;color:var(--muted);cursor:pointer}
.phone-note-close .icon{width:20px;height:20px}
}
/* 社内お試し版 (TWIN_ENV=trial): a thin notice on top of every page, 「気づいたことを送る」, /trial, /admin/trial */
.trial-bar{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;padding:4px 16px;font-size:13px;line-height:1.5;background:var(--warn-bg);color:var(--warn);border-bottom:1px solid var(--warn-line);text-align:center}
.trial-bar .icon{width:14px;height:14px;flex:none}
.trial-bar a{color:var(--warn);text-decoration:underline}
.trial-fb{position:fixed;right:16px;bottom:16px;z-index:40;max-width:calc(100vw - 32px)}
.trial-fb>summary{list-style:none;cursor:pointer;box-shadow:0 4px 14px var(--sheet-shadow)}
.trial-fb>summary::-webkit-details-marker{display:none}
.trial-fb[open]>summary{margin-left:auto;display:flex;width:max-content}
.trial-fb form{margin-top:8px;width:min(360px,calc(100vw - 32px));box-shadow:0 8px 24px var(--sheet-shadow)}
.trial-fb textarea{width:100%;box-sizing:border-box}
.trial-steps{list-style:none;padding:0;margin:12px 0;display:grid;gap:10px}
.trial-steps h2{margin:4px 0 6px;font-size:18px}
.trial-steps p{margin:4px 0}
.copy-src{width:100%;box-sizing:border-box;font-size:14px}
pre.cmd{white-space:pre-wrap;word-break:break-all;background:var(--card2);border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:12px}
.voices{display:grid;gap:10px}
.voice.done{opacity:.72}
.voice-text{white-space:pre-wrap;font-size:16px;margin:6px 0}
@media (max-width:600px){.trial-fb{bottom:calc(var(--tabbar-h) + 12px);right:12px}.trial-bar{font-size:12px}}
/* ==== 編集者とのシンクロ率 (ホームの一番上): always dark. The two heads, grid, scan lines, number and bars stand still;
   only the synapses above the heads move (canvas .sync-fx, drawn by static/sync.js) ==== */
.sync{position:relative;margin:0 0 22px;padding:18px 20px 16px;border-radius:var(--radius);color:var(--sync-ink);background:var(--sync-bg2);border:1px solid var(--sync-line)}
.sync-defs{position:absolute;width:0;height:0;overflow:hidden}
.g-me{stop-color:var(--sync-gold)}.g-ai{stop-color:var(--sync-cyan)}
.sync-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sync-title{margin:0;font:700 17px/1.3 var(--sans);letter-spacing:.04em;color:var(--sync-ink);background:none;-webkit-text-fill-color:currentColor;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.sync-kicker{font:600 11px/1 var(--num);letter-spacing:.2em;color:var(--sync-cyan)}
.sync-help{margin-left:auto;position:relative}
.sync-help summary{list-style:none;cursor:pointer;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font:700 14px/1 var(--sans);color:var(--sync-cyan);border:1px solid var(--sync-line)}
.sync-help summary::-webkit-details-marker{display:none}
.sync-help summary:focus-visible{outline:2px solid var(--sync-focus);outline-offset:2px}
.sync-help-body{position:absolute;right:0;top:32px;z-index:3;width:min(380px,calc(100vw - 48px));padding:12px 14px;border-radius:10px;background:var(--sync-bg);border:1px solid var(--sync-line);font-size:13px;line-height:1.7;color:var(--sync-ink)}
.sync-help-body p{margin:0 0 6px}.sync-help-body p:last-child{margin:0}
.sync-sample{display:inline-block;font:400 11px/1.4 var(--sans);padding:1px 8px;border-radius:999px;border:1px solid var(--sync-line);color:var(--sync-muted);white-space:nowrap}
.sync-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0 0}
.sync-tabs button{font:600 13px/1.2 var(--sans);color:var(--sync-muted);background:transparent;border:1px solid var(--sync-line);border-radius:999px;padding:7px 12px;cursor:pointer;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sync-tabs button[aria-selected=true]{color:var(--sync-ink);background:var(--sync-tab-on);border-color:var(--sync-cyan)}
.sync-tabs button:focus-visible{outline:2px solid var(--sync-focus);outline-offset:2px}
.sync-panel{margin-top:12px}
.sync-panel[hidden]{display:none}
.sync-ch{margin:0 0 8px;display:flex;align-items:center;gap:6px;color:var(--sync-muted);font-size:13px}
.sync-ch svg{width:16px;height:16px}
.sync-body{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:22px;align-items:center}
/* the picture: night radial + grid + the heads + scan lines (all still), the synapse canvas on top, the number over its lower edge */
.sync-stage{position:relative;overflow:hidden;isolation:isolate;aspect-ratio:16/11;border-radius:12px;border:1px solid var(--sync-line);background:radial-gradient(70% 70% at 50% 45%,var(--sync-stage-1),var(--sync-stage-2))}
.sync-stage::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(var(--sync-grid) 1px,transparent 1px),linear-gradient(90deg,var(--sync-grid) 1px,transparent 1px);background-size:4.1667% 6.0606%}
.sync-stage::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:repeating-linear-gradient(0deg,var(--sync-scanline) 0 1px,transparent 1px 3px)}
.sync-heads{position:absolute;left:50%;top:36%;width:52.25%;height:auto;transform:translateX(-50%);mix-blend-mode:screen;pointer-events:none;user-select:none}
.sync-fx{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1}
.sync-panel[data-state=before] .sync-heads{opacity:.7}
.sync-hud{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:12px 16px;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;background:linear-gradient(to top,var(--sync-hud),var(--sync-hud-0))}
.sync-read{display:flex;flex-direction:column;gap:4px;min-width:0}
.sync-label{font:600 11px/1 var(--sans);letter-spacing:.18em;color:var(--sync-cyan)}
.sync-num{font:700 clamp(32px,6vw,50px)/1 var(--num);color:var(--sync-ink);font-variant-numeric:tabular-nums;text-shadow:0 0 12px var(--sync-glow)}
.sync-num small{font-size:.45em;margin-left:2px}
.sync-num.is-small{font:700 22px/1.2 var(--sans);letter-spacing:.06em;text-shadow:none}
.sync-dash{font:600 14px/1 var(--num);color:var(--sync-muted)}
.sync-hud-side{display:grid;gap:4px;justify-items:end}
.sync-rise{font:600 14px/1 var(--num);color:var(--sync-up)}
.sync-side{min-width:0}
.sync-items{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.sync-items li{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:2px 10px;font-size:12px;min-width:0}
.it-name{color:var(--sync-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.it-val{font:600 13px/1 var(--num);color:var(--sync-ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.sync-bar{grid-column:1/-1;width:100%;height:4px;display:block}
.bar-bg{fill:var(--sync-track)}.bar-fill{fill:url(#sync-bar-grad)}
.sync-meter{margin:0 0 8px;height:6px;background:var(--sync-track);border-color:var(--sync-line)}
.sync-meter span{background:linear-gradient(90deg,var(--sync-gold),var(--sync-cyan))}
.sync-note{margin:8px 0 0;font-size:13px;color:var(--sync-muted)}
.sync-note b{color:var(--sync-ink)}
.sync .btn.sync-btn{background:var(--sync-cyan);color:var(--sync-btn-ink);box-shadow:none}
.sync .btn.sync-btn svg{width:18px;height:18px}
.sync .btn.sync-btn:focus-visible{outline:2px solid var(--sync-focus);outline-offset:2px}
.sync-foot{margin:12px 0 0;font-size:12px;color:var(--sync-muted)}
@media (max-width:760px){
  .sync{padding:14px 14px 12px;margin-bottom:16px}
  .sync-body{grid-template-columns:1fr;gap:14px}
  .sync-items{grid-template-columns:1fr 1fr;gap:10px 16px}
  .it-name{white-space:normal}
  .sync-hud{padding:10px 12px}
  .sync .btn.sync-btn{width:100%}
}
/* reduced motion: sync.js draws one still frame; nothing in the card is animated */
@media (prefers-reduced-motion:reduce){
  .sync *,.sync::before,.sync::after{animation:none!important;transition:none!important}
}

/* 元の素材の音声を付ける (動画を選び直す > 詳しい設定) */
.raw-audio .raw-row{display:flex;flex-direction:column;gap:4px;margin:10px 0;font-size:.92rem}
.raw-audio .raw-row input[type=file]{max-width:100%}
/* 過去の編集から覚える: the recommended (exact) way to teach a channel; learned videos say where they came from */
.tag.ok{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-line)}
.past-how{border-color:var(--ok-line)}
.past-how h3{margin-top:0}
.past-how.small{padding:10px 14px}
.past-how.small p{margin:4px 0}
.onb-or{font-size:16px;margin:18px 0 6px}
/* シンクロ率: an item that is not measured yet says why (it is left out of the number) */
.sync-items li.not-yet .it-val{color:var(--sync-muted);font:500 11px/1.2 var(--num)}
.it-note{grid-column:1/-1;color:var(--sync-muted);font-size:10.5px;line-height:1.4}
.past-how kbd{white-space:normal}

/* ---------- トップページ(2026-10-20): 星空と光の粒の背景(static/space.js)、枠を減らして大きな文字と余白で見せる ---------- */
#space{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
/* 粒はいちばん後ろ、文字はその上(ページの背景の塗り方に左右されないよう、順番をはっきり決める) */
body.space main.wrap,body.space .foot{position:relative;z-index:1}
body.space{background:var(--bg)}
body.space main.wrap{max-width:none;padding:0}
body.space .foot{border-top:0;background:transparent}
.top.guest{background:transparent;border-bottom:0;backdrop-filter:none}
.top.guest .wrap{max-width:960px;margin-top:12px;border:1px solid var(--line);border-radius:999px;background:var(--header-bg);backdrop-filter:blur(14px);padding-left:20px;padding-right:12px;min-height:56px}
.sp{max-width:1040px;margin:0 auto;padding:120px 20px 96px;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;position:relative}
.sp h1,.sp h2{font-family:var(--sans);font-weight:300;letter-spacing:.03em;background:none;-webkit-text-fill-color:currentColor;color:var(--ink)}
.sp h1{font-size:clamp(38px,6.4vw,76px);line-height:1.22;margin:10px 0 22px}
.sp h2{font-size:clamp(28px,4.2vw,50px);line-height:1.3;margin:8px 0 22px}
.sp .lead{font-size:clamp(16px,1.6vw,19px);line-height:1.9;color:var(--muted);max-width:620px}
.sp-no{display:flex;align-items:center;gap:12px;margin:0;font-size:12px;letter-spacing:.18em;color:var(--muted)}
.sp-no span{font-family:var(--num);color:var(--ink)}
.sp-no span::after{content:"";display:inline-block;width:28px;height:1px;margin-left:12px;vertical-align:middle;background:var(--line)}
.sp-hero{text-align:center;align-items:center}
.sp-hero h1,.sp-hero .lead,.sp-final h2{text-shadow:0 2px 24px var(--bg),0 0 2px var(--bg)}
.sp-hero .lead{margin-left:auto;margin-right:auto}
.sp-hero .cta,.sp-final .cta{justify-content:center;gap:12px;flex-wrap:wrap}
.sp .small-note{font-size:13px}
.sp p,.sp dd,.sp dt,.sp li,.sp h2,.sp-no{text-shadow:0 1px 10px var(--bg),0 0 2px var(--bg)}
.sp .card{background:var(--glass)}
.sp-points{list-style:none;padding:0;margin:18px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:4px 28px}
.sp-points li{display:flex;align-items:center;gap:10px;padding:12px 0;border-top:1px solid var(--line);color:var(--ink)}
.sp-points .ic{color:var(--accent-icon)}
.sp-twin{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;align-items:center}
.sp-gauge{justify-self:center;display:flex;flex-direction:column;align-items:center;gap:6px;padding:26px 34px;border:1px solid var(--line);border-radius:18px;background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.sp-gauge strong{font-family:var(--num);font-size:clamp(56px,7vw,88px);line-height:1;font-weight:600;background:var(--title-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.sp-gauge small{font-size:.45em}
.sp-gauge-label{font-size:11px;letter-spacing:.16em;color:var(--muted)}
.sp-gauge-sub{font-size:12px;color:var(--muted)}
.sp-facts{margin:22px 0 0;display:grid;gap:0}
.sp-facts div{padding:16px 0;border-top:1px solid var(--line)}
.sp-facts dt{font-weight:700;color:var(--ink);display:flex;align-items:center;gap:8px}
.sp-facts dd{margin:6px 0 0;color:var(--muted);font-size:15px;line-height:1.8}
.sp-facts-4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));column-gap:28px;margin-top:36px}
.sp-steps{list-style:none;padding:0;margin:10px 0 18px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
.sp-steps li{display:flex;flex-direction:column;gap:6px;padding-top:16px;border-top:1px solid var(--line)}
.sp-steps .n{font-family:var(--num);font-size:34px;font-weight:600;line-height:1;background:var(--title-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.sp-steps strong{color:var(--ink);font-size:17px}
.sp-steps span:last-child{color:var(--muted);font-size:14px}
.sp-final{text-align:center;align-items:center}
.sp-sync{width:min(680px,92vw);margin:0 auto 4px;aspect-ratio:16/11}
.sp-sync .sync-heads,.sp-sync .sync-fx{display:block}
body.space .final-cta{background:none;margin-top:0}
@media (max-width:760px){
  .sp{padding:96px 16px 72px;min-height:auto}
  .sp-hero{min-height:88vh;min-height:88svh}
  .sp-twin{grid-template-columns:1fr;gap:24px}
  .sp-steps{grid-template-columns:1fr;gap:16px}
  .top.guest .wrap{margin-top:8px;border-radius:18px}
}

/* ---------- シンクロ率(2026-10-20 天池さん「枠とか要らない」): 枠と背景の箱をやめ、ページの色の上に大きな数字で。
   夜空では二人の顔と点の絵を、ふちをぼかして残す。明るい画面では絵を出さず、数字と項目だけ ---------- */
.sync{background:none;border:0;padding:0;border-radius:0;color:var(--ink);margin-bottom:28px}
.sync-title{color:var(--ink)}
.sync-kicker,.sync-label{color:var(--ice)}
.sync-help summary{color:var(--ice);border-color:var(--line)}
.sync-help-body{background:var(--card);border-color:var(--line);color:var(--ink)}
.sync-sample{border-color:var(--line);color:var(--muted)}
.sync-tabs button{color:var(--muted);border-color:var(--line)}
.sync-tabs button[aria-selected=true]{color:var(--ink);background:var(--card2);border-color:var(--ice)}
.sync-ch,.it-name,.sync-dash,.sync-note,.sync-foot,.it-note,.sync-items li.not-yet .it-val{color:var(--muted)}
.sync-note b,.it-val{color:var(--ink)}
.sync-num{color:var(--ink);text-shadow:var(--sync-num-glow)}
.bar-bg{fill:var(--line)}
.sync-meter{background:var(--card2);border-color:var(--line)}
.sync-stage{border:0;border-radius:0;aspect-ratio:var(--sync-aspect);background:var(--sync-stage-bg);overflow:visible}
.sync-stage::before,.sync-stage::after{display:none}
.sync-heads,.sync-fx{display:var(--sync-art);-webkit-mask-image:var(--sync-mask);mask-image:var(--sync-mask)}
.sync-hud{position:var(--sync-hud-pos);background:var(--sync-hud-fill);padding-left:0;padding-right:0}
.sync-num{font-size:clamp(44px,7vw,72px)}
.sync-rise{color:var(--ice)}
.sp-steps .n,.sp-gauge strong{text-shadow:none}
.sp .btn,.sp .pill,.sp .badge{text-shadow:none}
.sp-sync{background:none}
/* よくある質問 → 最後の申し込み: 余白を詰める(2026-10-20 天池さん「余白ありすぎ」) */
#faq.sp{padding-bottom:24px;min-height:auto}
.sp-final.sp{padding-top:8px;padding-bottom:56px;min-height:auto}
.sp-final .sp-sync{width:min(560px,90vw);margin-top:-24px;margin-bottom:-36px}
.sp-final h2{margin-top:0}

/* シンクロ率を真ん中に(2026-10-20 天池さん「枠なくせない?中央に持ってきたい」): 見出し → 二人の頭とシナプス → 数字 → 項目・説明・ボタン の順に縦に並べる。
   背景の光の箱と、数字の下の暗い帯はなし */
.sync{text-align:center}
.sync-head{justify-content:center}
.sync-help{margin-left:6px}
.sync-tabs,.sync-ch{justify-content:center}
.sync-body{grid-template-columns:minmax(0,1fr);justify-items:center;gap:6px}
.sync-stage{width:min(640px,100%)}
.sync-hud{position:static;justify-content:center;align-items:center;gap:16px;background:none;padding:0;margin-top:max(-100px,-15vw);position:relative;z-index:3}
.sync-read{align-items:center}
.sync-hud-side{justify-items:center}
.sync-side{width:min(640px,100%)}
.sync-items{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px 22px;text-align:left;margin-top:10px}
.sync-note,.sync-foot{text-align:center}
.sync .btn.sync-btn{margin:0 auto}

/* ---------- ログイン後の画面をトップと同じ見た目に(2026-10-21 天池さん): 浮いた丸いヘッダー、細い文字の見出し、
   枠線のないガラスのカード、番号は線と数字だけ。ツールなので、動く背景は使わず落ち着いた夜空のまま ---------- */
body.app .top{background:transparent;border-bottom:0;backdrop-filter:none;-webkit-backdrop-filter:none;padding:0 12px}
body.app .top .wrap{max-width:1072px;margin-top:12px;border:1px solid var(--line);border-radius:999px;background:var(--header-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding-left:20px;padding-right:12px;min-height:56px;flex-wrap:nowrap;gap:12px}
body.app .top .nav.app{order:0;width:auto;margin:0 0 0 auto;flex-wrap:nowrap;gap:2px}
body.app .top .nav.app+.tools{order:0;margin-left:8px}
body.app .top .nav.app a{border-radius:999px;padding:7px 10px;white-space:nowrap}
body.app .top .nav.app a.on{background:var(--card2);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
body.app .top .wrap:has(.nav.app){row-gap:0;padding-top:0}
body.app .top .theme-switch .lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
body.app .top .theme-switch button{padding:3px;min-width:28px;justify-content:center}
body.app .top .tools{gap:6px}
body.app .top .tool-link,body.app .top .logout button{white-space:nowrap}
body.app main.wrap{padding-top:40px}
body.app h1,body.app h2{font-family:var(--sans);font-weight:300;letter-spacing:.03em;background:none;-webkit-text-fill-color:currentColor;color:var(--ink)}
body.app h1{font-size:clamp(26px,3vw,34px);line-height:1.35;margin:4px 0 20px}
body.app h2{font-size:clamp(21px,2.2vw,25px);margin:44px 0 14px}
body.app h2.card-h,body.app .next h1,body.app .next h2{font-size:clamp(20px,2vw,24px);margin-top:0}
body.app h3{color:var(--ink)}
body.app th{color:var(--muted);font-weight:400;font-size:13px;letter-spacing:.04em}
body.app .card,body.app .tile{border-color:transparent;background:var(--card);border-radius:18px}
body.app .card{padding:24px}
body.app .card.plan{padding:20px}
body.app .tile:hover{border-color:var(--line)}
body.app .next{border-color:transparent;box-shadow:none;background:var(--card) radial-gradient(520px 180px at 0 0,var(--card-glow) 0,transparent 70%) no-repeat}
body.app .plan.current{border-color:var(--accent-line);box-shadow:none}
body.app .plan h3{font-family:var(--sans);font-weight:300;font-size:21px}
body.app .howto{gap:0}
body.app .howto li{background:none;border:0;border-radius:0;border-top:1px solid var(--line);padding:14px 0;align-items:center}
body.app .howto li:last-child{border-bottom:1px solid var(--line)}
body.app .howto li .n{width:auto;height:auto;background:var(--title-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-family:var(--num);font-size:22px;font-weight:600;min-width:1.4em}
body.app .foot{border-top:0;background:transparent}
@media (max-width:1080px) and (min-width:601px){
body.app .top .wrap{flex-wrap:wrap;border-radius:22px;padding-top:6px;padding-bottom:4px}
body.app .top .nav.app{order:2;width:100%;margin:0 0 4px -10px}
body.app .top .nav.app+.tools{order:1;margin-left:auto}
}
@media (max-width:600px){
body.app .top .wrap{margin-top:8px;border-radius:18px;padding-left:14px;padding-right:8px}
body.app main.wrap{padding-top:20px}
body.app .card{padding:18px}
}