:root{
  --ground:#F1F1F3; --ground-2:#E7E7EA;
  --surface:#FFFFFF; --surface-2:#F6F6F7; --line:#ECECEE; --line-2:#D6D6DA;
  --ink:#111111; --ink-2:#4A4A50; --ink-3:#86868D;
  --brand:#6C0EAF; --brand-ink:#FFFFFF; --brand-soft:#F4EBFB; --brand-line:#D9BEEE;
  --hot:#FF7A00; --hot-soft:#FFF1E3; --like:#E0336B; --x:#0F1419; --x-ink:#FFFFFF;
  --a:#6C0EAF; --b:#FF7A00;
  --xbg:#F2F5F8; --xline:#DCE3EA;
  --panel:#1E1726; --panel-ink:#EDE6F4; --panel-dim:#A79AB3; --panel-line:#352B40;
  --shadow:0 30px 60px -20px rgba(55,20,85,.35), 0 0 0 1px rgba(55,20,85,.08);
  --r:14px;
  --font:"Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN",system-ui,sans-serif;
  --round:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Noto Sans JP",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
/* 既定は白地・黒文字。ダークはアプリ内の太陽/月ボタンでだけ切り替える */
:root.dk{
  --ground:#141019; --ground-2:#1B1622;
  --surface:#17131C; --surface-2:#0F0C13; --line:#2A2331; --line-2:#3D3446;
  --ink:#F1EBF6; --ink-2:#C2B7CC; --ink-3:#8F849A;
  --brand:#B57BE8; --brand-ink:#1A0E24; --brand-soft:#2E2140; --brand-line:#4E3A66;
  --hot:#FF9A3D; --hot-soft:#3A2717; --like:#FF6B96; --x:#F1EBF6; --x-ink:#141019;
  --a:#B57BE8; --b:#FF9A3D;
  --xbg:#1C2128; --xline:#2D3540;
  --panel:#0E0B12; --panel-line:#2A2332;
  --shadow:0 30px 60px -20px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06);
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{background:var(--ground);color:var(--ink);font-family:var(--font);font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px}

.stage{min-height:100%;display:flex;justify-content:center;align-items:flex-start;gap:28px;padding:28px 16px}
.phone{width:390px;max-width:100%;height:min(820px,calc(100vh - 56px));min-height:600px;background:var(--surface-2);border-radius:34px;box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;position:relative;border:8px solid var(--surface)}
@media (max-width:520px){
  .stage{padding:0}
  .phone{width:100%;height:100vh;height:100dvh;border-radius:0;border:0;box-shadow:none;min-height:0}
}

/* app header */
.top{background:var(--surface);border-bottom:1px solid var(--line);padding:10px 14px 0;flex:none}
.brandrow{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-bottom:8px}
.logo{font-weight:800;font-size:18px;color:var(--ink);display:flex;align-items:center;gap:8px;white-space:nowrap}
.logo svg{width:26px;height:26px;border-radius:6px;flex:none}
.logo span{color:var(--brand);font-style:italic}
.topact{display:flex;align-items:center;gap:6px}
.dclose{display:none}
.themebtn{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:var(--ink-2);border:1px solid var(--line-2)}
.themebtn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round}
.prereg{font-size:12px;font-weight:700;background:var(--hot);color:#fff;border-radius:999px;padding:6px 12px}
.sample{font-size:10.5px;color:var(--ink-3);text-align:center;padding:3px 0 6px;letter-spacing:.04em}

/* app tabs (news) */
.apptabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;margin:0 -14px;padding:0 14px}
.apptabs::-webkit-scrollbar{display:none}
.apptab{flex:none;display:flex;align-items:center;gap:6px;padding:8px 10px 10px;font-size:13px;font-weight:700;color:var(--ink-3);border-bottom:3px solid transparent;white-space:nowrap}
.apptab img{width:18px;height:18px;border-radius:5px}
.apptab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--brand)}

.screen{flex:1;overflow-y:auto;scrollbar-width:none;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.pad{padding:14px}
.stack{display:flex;flex-direction:column;gap:10px}
.h2{font-size:16px;font-weight:700;margin:4px 0 2px;text-wrap:balance}
.sub{color:var(--ink-3);font-size:12px}

/* bottom nav */
.nav{flex:none;display:grid;grid-template-columns:repeat(5,1fr);background:var(--surface);border-top:1px solid var(--line);padding:6px 4px calc(8px + env(safe-area-inset-bottom,0px))}
.nav button{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10.5px;font-weight:700;color:var(--ink-3);padding:4px 0}
.nav svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nav button[aria-current="page"]{color:var(--brand)}

/* news */
.news{background:var(--surface);border-radius:var(--r);padding:12px;display:grid;grid-template-columns:1fr 76px;gap:6px 12px;text-align:left;width:100%;border:1px solid var(--line)}
.news .t{font-weight:700;font-size:14.5px;line-height:1.45;grid-column:1}
.news .thumb{grid-column:2;grid-row:1 / span 2;width:76px;height:76px;border-radius:10px;display:flex;flex-direction:column;gap:5px;align-items:center;justify-content:center;font-family:var(--round);font-weight:800;font-size:12px;color:#fff;text-align:center;line-height:1.25;padding:6px}
.news .meta{grid-column:1;display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--ink-3)}
.pick{grid-column:1 / -1;display:flex;gap:8px;align-items:flex-start;background:var(--surface-2);border-radius:10px;padding:8px 10px;font-size:12.5px;color:var(--ink-2)}
.pick .who{font-weight:700;color:var(--ink);white-space:nowrap}
.chip{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;border-radius:999px;padding:2px 8px;background:var(--brand-soft);color:var(--brand)}
.chip.hot{background:var(--hot-soft);color:var(--hot)}
.lead{background:var(--surface);border-radius:var(--r);overflow:hidden;border:1px solid var(--line);text-align:left;width:100%}
.lead .band{height:120px;display:flex;align-items:flex-end;padding:12px;color:#fff;font-family:var(--round);font-weight:800;font-size:20px;line-height:1.3}
.lead .body{padding:12px;display:flex;flex-direction:column;gap:6px}

/* avatars */
.av{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:13px;color:#fff}
.av.s{width:22px;height:22px;font-size:10px}
.av.l{width:76px;height:76px;font-size:26px}
img.av{object-fit:cover;background:var(--surface-2)}

/* SNS links */
.links{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.lk{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;overflow:hidden;border:1px solid var(--line)}
.lk svg{width:19px;height:19px;fill:#fff}
.lk img{width:100%;height:100%;object-fit:cover}
.lk.add{border:1.5px dashed var(--line-2);color:var(--ink-3);font-size:20px;font-weight:400}
.linkrow{display:grid;grid-template-columns:28px 1fr;gap:10px;align-items:center}
.linkrow .lk{width:28px;height:28px;border-radius:8px}
.linkrow .lk svg{width:14px;height:14px}
.mini-room{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line);width:100%;text-align:left}
.mini-room img{width:40px;height:40px;border-radius:10px;object-fit:cover}

/* in-app tool */
.toolbar{position:sticky;top:0;z-index:2;background:var(--surface);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;padding:10px 12px}
.toolbar .ti{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:15px}
.toolbar b{flex:1;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.toolbar .x{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);font-size:16px;color:var(--ink-2)}
.toolframe{width:100%;height:100%;border:0;display:block;background:#fff}
.toolhero{padding:22px 16px 16px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.toolhero .big{width:72px;height:72px;border-radius:20px;display:grid;place-items:center;font-size:34px}
.steps{display:flex;flex-direction:column;gap:8px;counter-reset:s}
.steps li{list-style:none;display:grid;grid-template-columns:24px 1fr;gap:10px;align-items:start;font-size:13px}
.steps li::before{counter-increment:s;content:counter(s);width:24px;height:24px;border-radius:50%;background:var(--brand-soft);color:var(--brand);font-weight:700;display:grid;place-items:center;font-size:12px}
.steps{padding:0;margin:0}

/* comments / threads */
.cm{display:flex;gap:10px;padding:12px 0;border-top:1px solid var(--line)}
.cm .main{flex:1;min-width:0}
.cm .name{font-weight:700;font-size:13px;display:flex;gap:6px;align-items:baseline;flex-wrap:wrap}
.cm .name small{color:var(--ink-3);font-weight:400;font-size:11px}
.cm .txt{font-size:13.5px;margin:2px 0 6px;overflow-wrap:anywhere}
.acts{display:flex;gap:16px;font-size:12px;color:var(--ink-3)}
.acts button{display:inline-flex;align-items:center;gap:4px}
.acts svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8}
.acts .liked{color:var(--like)}
.acts .liked svg{fill:currentColor}
.replies{margin-top:8px;padding-left:12px;border-left:2px solid var(--line)}
.replies .cm{border-top:0;padding:6px 0}

.detail-head{position:sticky;top:0;z-index:2;background:var(--surface);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px;padding:10px 12px}
.back{display:inline-flex;align-items:center;gap:2px;font-weight:700;color:var(--brand);font-size:13px}
.back svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.2}
.card{background:var(--surface);border-radius:var(--r);padding:14px;border:1px solid var(--line)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-weight:700;border-radius:10px;padding:10px 14px;font-size:13.5px}
.btn.pri{background:var(--brand);color:var(--brand-ink)}
.btn.ghost{background:var(--brand-soft);color:var(--brand)}
.btn.x{background:var(--x);color:var(--x-ink)}
.btn.x svg{width:14px;height:14px;fill:currentColor}
.btn.full{width:100%}
.compose{position:sticky;bottom:0;background:var(--surface);border-top:1px solid var(--line);padding:8px 12px;display:flex;gap:8px;align-items:center}
.compose input{flex:1;min-width:0;border:1px solid var(--line-2);background:var(--surface-2);border-radius:999px;padding:9px 14px}
.compose button{font-weight:700;color:var(--brand)}
.replying{font-size:11.5px;color:var(--brand);padding:6px 12px 0;background:var(--surface)}

/* rooms */
.room{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;text-align:left;width:100%}
.room .hd{height:92px;position:relative;background-size:cover;background-position:center}
.room .ic{position:absolute;left:12px;bottom:-20px;width:46px;height:46px;border-radius:12px;border:3px solid var(--surface);display:grid;place-items:center;font-size:20px;font-family:var(--round);font-weight:800;color:#fff;overflow:hidden;background-size:cover;background-position:center}
.room .bd{padding:12px 12px 12px;display:flex;flex-direction:column;gap:4px}
.room .row{display:flex;justify-content:space-between;align-items:center;gap:8px}
.join{font-size:12px;font-weight:700;border-radius:999px;padding:5px 12px;background:var(--brand);color:var(--brand-ink)}
.join.on{background:var(--brand-soft);color:var(--brand)}
.tags{display:flex;gap:6px;flex-wrap:wrap}

/* polls */
.poll{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px;display:flex;flex-direction:column;gap:10px}
.poll .q{font-weight:700;font-size:15px;line-height:1.45;text-wrap:balance}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.opt{border:2px solid var(--line-2);border-radius:12px;padding:12px 8px;font-weight:700;font-size:14px;text-align:center}
.opt.a{border-color:var(--a);color:var(--a)}
.opt.b{border-color:var(--b);color:var(--b)}
.bar{display:flex;height:34px;border-radius:10px;overflow:hidden;font-size:12.5px;font-weight:700;color:#fff}
.bar div{display:flex;align-items:center;padding:0 10px;white-space:nowrap;transition:width .5s ease}
.bar .a{background:var(--a)} .bar .b{background:var(--b);justify-content:flex-end}
.poll .foot{display:flex;justify-content:space-between;font-size:12px;color:var(--ink-3)}
.mine{font-size:11px;font-weight:700;color:var(--brand)}

/* tools */
.tools{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tool{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px;text-align:left;display:flex;flex-direction:column;gap:6px}
.tool .ti{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;font-size:20px}
.tool b{font-size:13.5px;line-height:1.4}
.tool span{font-size:11.5px;color:var(--ink-3);line-height:1.45}
.seg{display:flex;gap:6px;flex-wrap:wrap}
.seg button{font-size:12px;font-weight:700;padding:6px 12px;border-radius:999px;background:var(--surface);border:1px solid var(--line-2);color:var(--ink-2)}
.seg button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--surface)}

/* profile */
.prof{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.stats{display:flex;gap:22px;font-size:12px;color:var(--ink-3)}
.stats b{display:block;font-size:16px;color:var(--ink);font-variant-numeric:tabular-nums}
.person{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line)}
.person .main{flex:1;min-width:0}
.person .xid{font-size:11.5px;color:var(--ink-3)}
.xmini{width:30px;height:30px;border-radius:50%;background:var(--x);display:grid;place-items:center}
.xmini svg{width:13px;height:13px;fill:var(--x-ink)}

/* sheet */
.veil{position:absolute;inset:0;background:rgba(20,10,30,.45);display:flex;align-items:flex-end;z-index:20}
.sheet{background:var(--surface);width:100%;border-radius:20px 20px 0 0;padding:16px 16px calc(18px + env(safe-area-inset-bottom,0px));max-height:88%;overflow-y:auto;display:flex;flex-direction:column;gap:12px}
.sheet h3{margin:0;font-size:17px}
.field{display:flex;flex-direction:column;gap:4px;font-size:12.5px;font-weight:700;color:var(--ink-2)}
.field input,.field textarea{border:1px solid var(--line-2);background:var(--surface-2);border-radius:10px;padding:10px 12px;font-weight:400;color:var(--ink)}
.field textarea{min-height:70px;resize:vertical}
.check{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border:1px solid var(--line-2);border-radius:12px;font-size:13px}
.check input{margin-top:3px;accent-color:var(--brand)}
.check b{display:block}
.check small{color:var(--ink-3)}
.toast{position:absolute;left:50%;bottom:84px;transform:translateX(-50%);background:var(--ink);color:var(--surface);font-size:12.5px;font-weight:700;border-radius:999px;padding:8px 16px;z-index:30;white-space:nowrap}
/* 記事 / SNS フィルタ */
.kinds{display:flex;gap:6px;padding:8px 0 10px}
.kinds button{font-size:12px;font-weight:700;padding:5px 12px;border-radius:999px;border:1px solid var(--line-2);color:var(--ink-2);background:var(--surface)}
.kinds button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.apptabs+.kinds{border-top:1px solid var(--line)}

/* SNSで話題のポスト（Xの埋め込み風） */
.xpost{display:flex;flex-direction:column;gap:10px;background:var(--xbg);border:1px solid var(--xline);border-radius:18px;padding:12px 14px 12px;color:var(--ink);text-decoration:none;position:relative}
.xtag{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--ink-3);font-weight:700}
.xbadge{display:inline-flex;align-items:center;gap:5px;background:var(--x);color:var(--x-ink);border-radius:6px;padding:3px 8px 3px 6px;font-size:11px;letter-spacing:.02em}
.xbadge svg{width:11px;height:11px;fill:currentColor}
.xtag .chip{margin-left:auto}
.xh{display:flex;align-items:center;gap:10px}
.xh .av{width:40px;height:40px}
.xh .who{flex:1;min-width:0;font-size:12px;color:var(--ink-3);line-height:1.35}
.xh .who b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px;color:var(--ink)}
.xt{font-size:14.5px;line-height:1.65;white-space:pre-wrap;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;overflow:hidden}
.xm{display:flex;gap:16px;align-items:center;font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums;border-top:1px solid var(--xline);padding-top:9px}
.xm svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;vertical-align:-2px}
.xm .open{margin-left:auto;font-weight:700;color:var(--ink)}

/* アプリ内の記事リーダー */
.reader{padding:18px 16px 24px;background:var(--surface);font-size:15px;line-height:1.85;color:var(--ink)}
.reader h1{font-size:20px;line-height:1.45;margin:8px 0 14px;text-wrap:balance}
.reader h2{font-size:17px;line-height:1.5;margin:28px 0 8px;padding-top:14px;border-top:1px solid var(--line);text-wrap:balance}
.reader h3{font-size:15.5px;margin:20px 0 6px}
.reader p{margin:0 0 12px}
.reader ul,.reader ol{margin:0 0 12px;padding-left:1.3em}
.reader li{margin:2px 0}
.reader blockquote{margin:0 0 12px;padding:10px 12px;border-left:3px solid var(--brand-line);background:var(--surface-2);border-radius:0 8px 8px 0;font-size:13.5px;color:var(--ink-2)}
.reader .tbl{overflow-x:auto;margin:0 0 14px;border:1px solid var(--line);border-radius:10px}
.reader table{border-collapse:collapse;font-size:12.5px;line-height:1.55;min-width:100%}
.reader th,.reader td{padding:7px 9px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.reader th{background:var(--surface-2);font-weight:700;white-space:nowrap}
.reader .byline{display:flex;gap:6px;align-items:center;flex-wrap:wrap;font-size:12px;color:var(--ink-3)}
.artframe{display:block;width:100%;height:1400px;border:0;background:#fff}
.readbar{position:sticky;bottom:0;background:var(--surface);border-top:1px solid var(--line);padding:10px 12px;display:grid;grid-template-columns:1fr auto;gap:8px}
.gpt{background:var(--ink);color:var(--surface)}
.gpt svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8}

/* ChatGPTに質問するシート */
.qchips{display:flex;flex-wrap:wrap;gap:6px}
.qchips button{font-size:12.5px;padding:7px 11px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line-2);color:var(--ink);text-align:left}
.qchips button[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:var(--surface)}
.artref{display:flex;gap:10px;align-items:center;background:var(--surface-2);border-radius:12px;padding:10px 12px;font-size:12.5px}
.artref b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.flow{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;text-align:center;font-size:11px;color:var(--ink-3)}
.flow div{background:var(--surface-2);border-radius:10px;padding:8px 4px;line-height:1.4}
.flow div.on{background:var(--brand-soft);color:var(--brand);font-weight:700}
/* つくるタブ：ツール / アンバサダー */
.seg2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.seg2 button{padding:11px 6px;border-radius:12px;font-size:14px;font-weight:800;color:var(--ink-2);background:var(--surface);border:1.5px solid var(--line-2);display:flex;align-items:center;justify-content:center;gap:6px}
.seg2 button[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:var(--brand-ink);box-shadow:0 4px 12px -4px color-mix(in srgb,var(--brand) 60%,transparent)}
.cnt{font-size:10.5px;font-weight:800;background:var(--hot);color:#fff;border-radius:999px;padding:1px 7px}
.nav button{position:relative}
.nav .dot{position:absolute;top:3px;left:calc(50% + 8px);width:8px;height:8px;border-radius:50%;background:var(--hot);border:2px solid var(--surface)}
.ambban{display:flex;align-items:center;gap:12px;background:var(--hot-soft);border:1px solid color-mix(in srgb,var(--hot) 30%,transparent);border-radius:var(--r);padding:12px 14px;text-align:left;width:100%}
.ambban b{display:block;font-size:14px}
.ambban .sub{color:var(--ink-2)}
.ambban .yen{flex:none;width:40px;height:40px;border-radius:12px;background:var(--hot);color:#fff;display:grid;place-items:center;font-weight:800;font-size:18px}
.ambhero{background:var(--ink);color:var(--surface);border-radius:var(--r);padding:16px;display:flex;flex-direction:column;gap:10px}
.ambhero h3{margin:0;font-size:17px;line-height:1.45;text-wrap:balance}
.ambhero p{margin:0;font-size:12.5px;opacity:.8}
.ambsteps{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.ambsteps div{background:rgba(255,255,255,.1);border-radius:10px;padding:8px 4px;text-align:center;font-size:11px;line-height:1.35}
.ambsteps b{display:block;font-size:10px;opacity:.7;font-weight:700}
.camp{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px;display:flex;flex-direction:column;gap:10px;text-align:left;width:100%}
.camp .ctop{display:flex;align-items:center;gap:10px}
.appb{flex:none;width:40px;height:40px;border-radius:11px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:11px;line-height:1.1;text-align:center;overflow:hidden}
.appb img{width:100%;height:100%;object-fit:cover}
.camp .ctop .main{flex:1;min-width:0}
.camp .ctop .main b{display:block;font-size:14.5px;line-height:1.4}
.reward{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.reward strong{font-size:22px;font-weight:800;color:var(--hot);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.reward span{font-size:12px;color:var(--ink-3)}
.conds{display:flex;gap:6px;flex-wrap:wrap}
.conds span{font-size:11px;font-weight:700;border-radius:6px;padding:3px 8px;background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line)}
.conds span.age{background:var(--ink);color:var(--surface);border-color:var(--ink)}
.slots{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.slots i{flex:1;height:6px;border-radius:3px;background:var(--surface-2);overflow:hidden;display:block}
.slots i::after{content:"";display:block;height:100%;width:var(--w);background:var(--hot);border-radius:3px}
.status{font-size:11.5px;font-weight:700;color:var(--brand);background:var(--brand-soft);border-radius:8px;padding:6px 10px}
.sec h4{margin:0 0 6px;font-size:13.5px}
.sec ul{margin:0;padding-left:1.2em;font-size:13px;line-height:1.7}
.sec + .sec{border-top:1px solid var(--line);padding-top:12px}
.minitool{display:flex;align-items:center;gap:10px;padding:8px 0;width:100%;text-align:left;font-size:13px}
.minitool .ti{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;font-size:16px;flex:none}
/* TikTokで話題のショート */
.ttrow{display:flex;flex-direction:column;gap:8px}
.ttrow .hd{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700}
.ttrow .hd .sub{font-weight:400;margin-left:auto}
.ttscroll{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 -14px;padding:0 14px}
.ttscroll::-webkit-scrollbar{display:none}
.ttscroll .tt{flex:none;width:138px}
.ttgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tt{position:relative;aspect-ratio:9/16;max-width:100%;border-radius:14px;overflow:hidden;background:#111 center/cover no-repeat;text-align:left;color:#fff;display:block}
.tt::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35) 0,rgba(0,0,0,0) 28%,rgba(0,0,0,0) 50%,rgba(0,0,0,.8) 100%)}
.tt>*{position:absolute;z-index:1}
.ttbadge{top:8px;left:8px;display:inline-flex;align-items:center;gap:4px;background:rgba(0,0,0,.55);border-radius:6px;padding:3px 7px 3px 5px;font-size:10.5px;font-weight:700;letter-spacing:.02em}
.ttbadge svg,.ttlogo svg{width:11px;height:11px;fill:#fff}
.ttplay{top:50%;left:50%;transform:translate(-50%,-50%);width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.28);backdrop-filter:blur(4px);display:grid;place-items:center}
.ttplay::before{content:"";margin-left:4px;border-left:13px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent}
.ttcap{left:9px;right:9px;bottom:9px;display:flex;flex-direction:column;gap:3px;font-size:11.5px;line-height:1.4}
.ttcap p{margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ttcap span{font-size:11px;opacity:.9;font-variant-numeric:tabular-nums}
.ttlogo{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:6px;background:#000}
.ttview{background:#000;min-height:100%;display:flex;flex-direction:column}
.ttview .toolbar{background:#000;border-color:#222;color:#fff}
.ttview .toolbar .x{background:#222;color:#fff}
.ttstage{flex:1;display:flex;flex-direction:column;align-items:center;gap:12px;padding:12px 16px 20px;color:#fff}
.ttstage .tt{width:min(100%,280px)}
.ttstage iframe{width:min(100%,325px);aspect-ratio:9/16;border:0;border-radius:14px}
.ttmeta{width:min(100%,325px);font-size:13px;line-height:1.6}
.ttmeta b{display:block;margin-bottom:2px}
.ttgo{background:#fff;color:#000}
.ttgo svg{width:15px;height:15px;fill:currentColor}
.note{font-size:11.5px;color:var(--ink-3);background:var(--surface-2);border-radius:10px;padding:8px 10px}

/* 機能紹介ツアー */
.tour{position:absolute;inset:0;z-index:40}
.tour .veil2{position:absolute;inset:0;background:rgba(15,8,24,.72);transition:opacity .3s}
.tour.spotting .veil2{opacity:0}
.spot{position:absolute;border-radius:14px;box-shadow:0 0 0 9999px rgba(15,8,24,.72),0 0 0 3px #fff;transition:top .5s cubic-bezier(.3,.9,.3,1),left .5s cubic-bezier(.3,.9,.3,1),width .5s cubic-bezier(.3,.9,.3,1),height .5s cubic-bezier(.3,.9,.3,1),opacity .3s;pointer-events:none}
.spot::after{content:"";position:absolute;inset:-3px;border-radius:16px;border:3px solid #fff;animation:ring 1.6s ease-out infinite}
@keyframes ring{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.08)}}
.tip{position:absolute;left:16px;right:16px;background:var(--surface);color:var(--ink);border-radius:18px;padding:16px;box-shadow:0 20px 40px -10px rgba(0,0,0,.5);display:flex;flex-direction:column;gap:8px;animation:tipin .45s cubic-bezier(.3,1.3,.5,1) both}
@keyframes tipin{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
.tip .step{font-size:11px;font-weight:800;color:var(--brand);letter-spacing:.06em}
.tip h3{margin:0;font-size:17px;line-height:1.4;text-wrap:balance}
.tip p{margin:0;font-size:13px;color:var(--ink-2);line-height:1.6}
.tip .row{display:flex;align-items:center;gap:8px;margin-top:4px}
.tip .dots{display:flex;gap:5px;flex:1}
.tip .dots i{width:6px;height:6px;border-radius:3px;background:var(--line-2);transition:width .3s,background .3s}
.tip .dots i.on{width:18px;background:var(--brand)}
.tip .skip{font-size:12.5px;color:var(--ink-3);padding:8px}
.welcome{top:50%;transform:translateY(-50%);animation:none;text-align:center;align-items:center;padding:26px 20px 20px}
.welcome .mark{width:64px;height:64px;animation:bob 2.4s ease-in-out infinite}
.welcome .mark svg{width:100%;height:100%;border-radius:16px}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.welcome .feats{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:4px 0 6px}
.welcome .feats span{font-size:11.5px;font-weight:700;background:var(--brand-soft);color:var(--brand);border-radius:999px;padding:4px 10px;opacity:0;animation:tipin .4s ease both}
.nav button.pulse{animation:pulse 1.2s ease-in-out infinite}
.nav button.tourlit{z-index:41;background:var(--surface);color:var(--brand);border-radius:14px;box-shadow:0 0 0 2px var(--brand),0 0 18px 6px color-mix(in srgb,var(--brand) 55%,transparent)}
.tip .prev{font-size:13px;font-weight:700;color:var(--ink-2);padding:8px 6px}
.tip .prev[disabled]{visibility:hidden}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}
.screen.swiping{transition:none}
.screen.snap{transition:transform .22s ease,opacity .22s ease}
.replay{font-size:12.5px;color:var(--brand);font-weight:700;padding:6px;align-self:center}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ===== LP（説明＋事前登録）。作りは /shindan/app/ の診断LPと同じ。色は紫の濃淡でまとめ、診断のピンク・オレンジとは区別する =====
   アプリの試作（.phone の中）は上の変数を使うので、LP 側の色は --lp- で分けて衝突させない */
:root{
  --lp-ink:#221a38; --lp-ink2:#5a5078; --lp-line:#e6ddf8;
  --lp-p1:#6C0EAF; --lp-p2:#8b3dff; --lp-p3:#b98cff;
  --lp-card:rgba(255,255,255,.78); --lp-glass:rgba(255,255,255,.9);
  --lp-shadow:0 18px 50px -18px rgba(90,40,170,.35);
  --lp-round:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Hiragino Sans","Noto Sans JP",sans-serif;
}
html:has(body.lp){height:auto}
body.lp{height:auto;min-height:100vh;background:#f4f0ff;color:var(--lp-ink);overflow-x:hidden;font-size:15px;line-height:1.75}

/* 背景：ゆっくり動く色の玉 */
.lp-bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;
  background:radial-gradient(120% 80% at 50% 0%,#fff 0%,#f3eeff 55%,#ece6ff 100%)}
.lp-bg i{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;animation:lpfloat 18s ease-in-out infinite alternate}
.lp-bg .b1{width:420px;height:420px;left:-120px;top:-80px;background:#cbb3ff}
.lp-bg .b2{width:360px;height:360px;right:-120px;top:180px;background:#dcc6ff;animation-delay:-6s}
.lp-bg .b3{width:380px;height:380px;left:10%;bottom:-160px;background:#c3c3ff;animation-delay:-12s}
@keyframes lpfloat{to{transform:translate(40px,-30px) scale(1.12)}}

.lpwrap{position:relative;z-index:1;max-width:1140px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) 430px;gap:56px;padding:36px 24px 60px;align-items:start}
.lpcol{display:flex;flex-direction:column;gap:34px;min-width:0}
.lp .stage{position:sticky;top:24px;padding:0;min-height:0;display:block;z-index:2}
.lp .stage .phone{margin:0 auto;box-shadow:0 40px 80px -30px rgba(90,40,170,.55),0 0 0 1px rgba(90,40,170,.08)}

/* ヒーロー */
.lphero{text-align:left}
.lpmark{display:flex;align-items:center;gap:8px;margin:0 0 18px}
.lpmark img{display:block;border-radius:6px}
.lpmark b{font-size:18px;font-weight:800;white-space:nowrap;color:#313131}
.lpmark span{color:#6C0EAF;font-style:italic}
.lppill{display:inline-flex;align-items:center;gap:6px;margin:0 0 16px;padding:6px 14px;border-radius:999px;
  background:var(--lp-card);border:1px solid var(--lp-glass);box-shadow:0 6px 20px -10px rgba(90,40,170,.4);
  font-size:12.5px;font-weight:700;color:var(--lp-ink2);backdrop-filter:blur(8px)}
.lppill span{color:var(--lp-p2)}
.lph1{margin:0;font-family:var(--lp-round);font-weight:900;font-size:clamp(30px,3.4vw,40px);line-height:1.32;letter-spacing:.01em;word-break:keep-all;overflow-wrap:anywhere}
.lpgrad{background:linear-gradient(95deg,var(--lp-p1) 0%,var(--lp-p2) 60%,var(--lp-p3) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;padding:0 .04em}
.lplead{margin:14px 0 0;font-size:16px;color:var(--lp-ink2)}
.lplead b{color:var(--lp-ink)}

/* ロゴが流れる帯 */
.lpmarquee{margin:26px 0 26px;display:grid;gap:12px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.lprow{overflow:hidden}
.lptrack{display:flex;gap:10px;width:max-content;animation:lpmarq 50s linear infinite}
.lprev .lptrack{animation-direction:reverse;animation-duration:58s}
@keyframes lpmarq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.lplogo{display:flex;align-items:center;gap:8px;flex:none;padding:6px 14px 6px 6px;border-radius:999px;
  background:rgba(255,255,255,.85);border:1px solid var(--lp-glass);box-shadow:0 6px 18px -12px rgba(90,40,170,.45);
  font-size:13px;font-weight:700;white-space:nowrap}
.lplogo img{width:34px;height:34px;border-radius:10px;display:block;object-fit:cover}

/* ボタン */
.lpctas{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.lpcta{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:60px;
  padding:14px 30px;border:0;border-radius:999px;cursor:pointer;color:#fff;font-family:var(--lp-round);font-weight:900;font-size:18px;letter-spacing:.04em;
  background:linear-gradient(100deg,var(--lp-p1),var(--lp-p2));box-shadow:0 14px 34px -10px rgba(120,50,220,.6),inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .15s}
.lpcta::after{content:"";position:absolute;inset:-6px;border-radius:inherit;border:2px solid rgba(120,50,220,.3);animation:lppulse 2.2s ease-out infinite;pointer-events:none}
@keyframes lppulse{from{opacity:1;transform:scale(.96)}to{opacity:0;transform:scale(1.08)}}
.lpcta span{transition:transform .15s}
.lpcta-full{width:100%}
.lpghost{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:12px 26px;border-radius:999px;cursor:pointer;
  background:var(--lp-card);border:1.5px solid #dccdfa;color:var(--lp-p1);font-family:var(--lp-round);font-weight:900;font-size:16px;backdrop-filter:blur(8px)}
.lptry{margin:0;font-family:var(--lp-round);font-weight:900;font-size:15px;color:var(--lp-p1)}
.lpchips{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.lpchips li{padding:4px 12px;border-radius:999px;background:rgba(255,255,255,.6);border:1px solid var(--lp-glass);font-size:12.5px;font-weight:700;color:var(--lp-ink2)}

/* 見出し・カード */
.lph2{margin:0 0 4px;font-family:var(--lp-round);font-weight:900;font-size:22px}
.lph2 span{background:linear-gradient(transparent 62%,#e6d8ff 62%);padding:0 4px}
.lpsub{margin:0 0 16px;font-size:13.5px;color:var(--lp-ink2)}
.lpcard{background:var(--lp-card);border:1px solid var(--lp-glass);border-radius:24px;padding:26px 22px;box-shadow:var(--lp-shadow);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}

/* できること */
.lpfeats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.lpfeat{display:flex;align-items:center;gap:12px;width:100%;min-height:76px;padding:12px 14px 12px 12px;text-align:left;cursor:pointer;
  background:#fff;border:1.5px solid var(--lp-line);border-radius:18px;transition:transform .12s,border-color .12s,box-shadow .12s}
.lpfeat::after{content:"›";margin-left:auto;font-size:22px;color:#c2b3e3;transition:transform .12s;flex:none}
.lpem{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:14px;background:linear-gradient(135deg,#f3eaff,#ffeef6);font-size:22px}
.lpft{display:flex;flex-direction:column;min-width:0}
.lpft b{font-size:14.5px;line-height:1.45}
.lpft small{font-size:12px;color:var(--lp-ink2);line-height:1.6}

/* 事前登録 */
.lpform{border:2px solid transparent;background:linear-gradient(rgba(255,255,255,.92),rgba(255,255,255,.92)) padding-box,linear-gradient(120deg,var(--lp-p1),var(--lp-p2),var(--lp-p3)) border-box}
.lpform form{display:flex;flex-direction:column;gap:10px}
.lpwants{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.lpwants label{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;background:#fff;border:1.5px solid var(--lp-line);
  font-size:13px;font-weight:700;cursor:pointer;transition:all .12s;user-select:none}
.lpwants input{position:absolute;opacity:0;pointer-events:none}
.lpwants label::before{content:"＋";font-weight:900;color:#c2b3e3}
.lpwants label:has(input:checked){background:linear-gradient(100deg,var(--lp-p1),var(--lp-p2));border-color:transparent;color:#fff}
.lpwants label:has(input:checked)::before{content:"✓";color:#fff}
.lpwants label:has(input:focus-visible){outline:3px solid var(--lp-p1);outline-offset:2px}
.lpfield{font-size:13px;font-weight:700;color:var(--lp-ink2);margin-top:4px}
#lpMail{border:1.5px solid var(--lp-line);background:#fff;border-radius:16px;padding:14px 16px;font-size:16px;color:var(--lp-ink)}
#lpMail:focus{outline:none;border-color:var(--lp-p1);box-shadow:0 0 0 4px rgba(139,61,255,.14)}
.lpnote{margin:-2px 0 6px;font-size:11px;color:var(--lp-ink2)}
.lpdone{margin:4px 0 0;text-align:center;font-family:var(--lp-round);font-weight:900;color:var(--lp-p1)}

/* よくある質問 */
.lpqa{border-top:1px solid var(--lp-line);padding:14px 2px}
.lpqa:first-of-type{border-top:0}
.lpqa summary{font-weight:700;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:10px}
.lpqa summary::-webkit-details-marker{display:none}
.lpqa summary::after{content:"＋";color:var(--lp-p1);font-weight:900}
.lpqa[open] summary::after{content:"－"}
.lpqa p{margin:8px 0 0;color:var(--lp-ink2);font-size:13.5px;line-height:1.8}
.lpfoot{font-size:12px;color:var(--lp-ink2);text-align:center}
.lpfoot a{color:inherit}

/* スマホ：アプリを操作している録画（タップで実物のアプリへ） */
.lpvid{margin:24px auto 0;flex-direction:column;align-items:center;gap:10px;background:none;border:0;padding:0;cursor:pointer;width:100%}
.lpvid-frame{display:block;width:min(64vw,256px);aspect-ratio:480/1038;border-radius:34px;padding:7px;background:#fff;
  box-shadow:0 30px 60px -24px rgba(90,40,170,.55),0 0 0 1px rgba(90,40,170,.08);overflow:hidden}
.lpvid video{display:block;width:100%;height:100%;object-fit:cover;border-radius:27px;background:#f4f0ff}
.lpvid-tap{display:inline-flex;align-items:center;gap:8px;margin-top:4px;padding:11px 20px 11px 16px;border-radius:999px;
  background:linear-gradient(100deg,var(--lp-p1),var(--lp-p2));color:#fff;font-family:var(--lp-round);font-weight:900;font-size:15px;letter-spacing:.02em;
  box-shadow:0 12px 26px -10px rgba(120,50,220,.7)}
.lpvid-tap i{font-style:normal;font-size:24px;line-height:1;display:inline-block;animation:lppoint 1s ease-in-out infinite;transform-origin:50% 100%}
@keyframes lppoint{0%,100%{transform:translateY(2px)}50%{transform:translateY(-7px)}}

/* スマホ下の固定ボタン（ヒーローのボタンが見えなくなったら出す） */
.lpbar{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:50;gap:8px;
  padding:8px;border-radius:999px;background:rgba(255,255,255,.88);border:1px solid var(--lp-glass);box-shadow:0 14px 40px -12px rgba(90,40,170,.5);
  backdrop-filter:blur(12px);transform:translateY(140%);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.lpbar.show{transform:none}
.lpbar button{flex:1;min-height:48px;border-radius:999px;border:0;cursor:pointer;font-family:var(--lp-round);font-weight:900;font-size:15px}
.lpbar-try{background:linear-gradient(100deg,var(--lp-p1),var(--lp-p2));color:#fff}
.lpbar-reg{background:#fff;color:var(--lp-p1);border:1.5px solid #dccdfa!important}

.dclose{display:none}
.sp,.sp-flex{display:none}
@media (hover:hover){
  .lpmarquee:hover .lptrack{animation-play-state:paused}
  .lpcta:hover{transform:translateY(-2px)}
  .lpcta:hover span{transform:translateX(4px)}
  .lpfeat:hover{border-color:var(--lp-p1);box-shadow:0 10px 24px -14px rgba(139,61,255,.6);transform:translateY(-1px)}
  .lpfeat:hover::after{transform:translateX(3px);color:var(--lp-p1)}
  .lpwants label:hover{border-color:var(--lp-p1)}
}
.lpfeat:active{transform:scale(.98);border-color:var(--lp-p1)}
@media (prefers-reduced-motion:reduce){
  .lptrack{animation-duration:120s}
  .lprev .lptrack{animation-duration:140s}
  .lp-bg i,.lpcta::after{animation:none}
  .lpvid-tap i{animation-duration:1.6s}
}
@media (max-width:900px){
  .lpwrap{grid-template-columns:1fr;padding:26px 16px 96px;gap:0}
  .lpcol{gap:30px}
  .lphero{text-align:center}
  .lpmark{justify-content:center}
  .lph1{font-size:clamp(28px,8.4vw,40px);word-break:keep-all;overflow-wrap:anywhere}
  .lpmarquee{margin:24px -16px 26px}
  .lpctas{flex-direction:column;gap:10px}
  .lpcta,.lpghost{width:100%;max-width:360px}
  .lpchips{justify-content:center}
  .lph2,.lpsub{text-align:center}
  .lpfeats{grid-template-columns:1fr}
  .lpcard{padding:24px 18px}
  .pc{display:none}
  .sp{display:inline}
  .sp-flex{display:flex}
  .lp .stage{display:none}
  .lp .stage.open{display:block;position:fixed;inset:0;z-index:100;background:#f4f0ff}
  .lp .stage.open .phone{width:100%;height:100vh;height:100dvh;border:0;border-radius:0;box-shadow:none;min-height:0}
  .lpdemo .dclose{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--surface-2);color:var(--ink-2);font-size:18px;margin-right:4px;flex:none}
  html.lpdemo,html.lpdemo body{overflow:hidden}
  html.lpdemo .lpbar{display:none}
}
/* 事前登録済み：ボタンは押せないことが分かる見た目に */
.lpghost:disabled,.lpbar-reg:disabled,.lpcta:disabled{opacity:.55;cursor:default;box-shadow:none}
.lpform input:disabled{opacity:.6}