:root{
  --bg:#fff6f1;--surface:#fffdfb;--surface2:#fbe8df;--text:#2a1f1b;--text2:#6b5750;--muted:#9a8479;
  --border:rgba(90,40,20,.14);--border2:rgba(90,40,20,.3);
  --accent:#c9502f;--accent-bg:#fbdccf;--green:#1f6f6a;--green-bg:#d9eeeb;--mark:#fbe19a;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#211815;--surface:#2b201c;--surface2:#382a24;--text:#f3e9e4;--text2:#c2aea5;--muted:#8f7a70;
  --border:rgba(255,230,220,.14);--border2:rgba(255,230,220,.3);
  --accent:#f09274;--accent-bg:#4d2c22;--green:#7fd0c8;--green-bg:#1f3b38;--mark:#6a5214;
}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.7 -apple-system,"Hiragino Sans","Noto Sans JP",sans-serif}
button{font:inherit;font-size:13px;font-weight:700;padding:9px 14px;color:inherit;background:transparent;border:.5px solid var(--border2);border-radius:8px;cursor:pointer}
button:hover{background:var(--surface2)}
.hero,main,.toolbar,footer{max-width:1000px;margin:0 auto;padding-left:16px;padding-right:16px}
.top{background:#4a2b21;color:#fbeee8;padding-bottom:20px;border-bottom:4px solid var(--accent)}
.hero{padding-top:32px}
.top .label{color:#f09274}
.top h1{color:#fff}
.top .lead{color:#e2cbc2}
.top .stat{background:rgba(255,255,255,.08);color:#d9c2b8}
.top .stat b{color:#f09274}
.top .tabs button{color:#e8d3ca;border-color:rgba(255,255,255,.28)}
.top .tabs button:hover{background:rgba(255,255,255,.1)}
.top .tabs button.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.label{font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--accent)}
h1{font-size:clamp(36px,7vw,72px);line-height:1.05;font-weight:500;margin:6px 0 12px}
.lead{color:var(--text2);margin:0 0 20px;font-size:16px}
.stats{display:flex;gap:12px;margin-bottom:16px}
.stat{background:var(--surface2);border-radius:8px;padding:8px 14px;font-size:13px;color:var(--text2)}
.stat b{display:block;font-size:28px;color:var(--text);font-weight:600}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.tabs button{font-size:13px;font-weight:700;padding:10px 14px;color:var(--text2)}
.tabs button.on{background:var(--accent-bg);color:var(--accent);border-color:var(--accent)}
.toolbar{position:sticky;top:0;z-index:5;background:var(--bg);display:flex;gap:16px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px;border-bottom:.5px solid var(--border)}
.grp{display:flex;align-items:center;gap:6px}
.lab{font-size:12px;color:var(--muted)}
.seg{display:inline-flex;border:.5px solid var(--border2);border-radius:8px;overflow:hidden}
.seg button{border:none;border-radius:0;font-size:13px;font-weight:700;padding:8px 12px}
.seg button.on{background:var(--accent-bg);color:var(--accent)}
main{padding-top:16px;padding-bottom:40px}
.sec-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--border2);border-left:6px solid var(--accent);border-radius:12px;padding:20px 24px;margin-bottom:16px}
.sec-head .sub{font-size:12px;color:var(--text2)}
.sec-head h2{margin:0;font-size:clamp(24px,4vw,31px);font-weight:500}
.steps{display:flex;gap:10px;flex-wrap:wrap;font-size:13px;color:var(--text2)}
.steps label{display:inline-flex;gap:4px;align-items:center;cursor:pointer}
.scene-head{display:flex;justify-content:space-between;align-items:center;margin:20px 0 8px}
.scene-head h3{margin:0;font-size:21px;font-weight:700}
.card{background:var(--surface);border:1px solid var(--border2);border-radius:12px;padding:18px 20px;box-shadow:0 2px 0 var(--border)}
.turn{display:flex;gap:8px;align-items:flex-start;margin-bottom:8px}
.turn:last-child{margin-bottom:0}
.av{width:32px;height:32px;border-radius:50%;font-size:14px;font-weight:600;display:flex;align-items:center;justify-content:center;flex:none;margin-top:6px}
.A .av{background:var(--accent-bg);color:var(--accent)}
.B .av{background:var(--green-bg);color:var(--green)}
.bub{flex:1;background:var(--surface2);border-radius:8px;padding:12px 16px;border:1.5px solid transparent;display:flex;justify-content:space-between;gap:8px;align-items:center;min-height:56px}
.bub.app{border-color:var(--accent);background:var(--accent-bg)}
.bub.me{border-color:var(--green)}
.bub .t{flex:1;font-size:clamp(18px,2.6vw,22.5px);line-height:1.45}
.mini{border:none;padding:4px 8px;font-size:16px;color:var(--text2)}
mark{background:var(--mark);color:inherit;border-radius:3px;padding:0 2px;cursor:pointer}
.bar{height:4px;background:var(--border);border-radius:2px;margin-top:6px;overflow:hidden}
.bar i{display:block;height:100%;width:0;background:var(--green)}
.who{font-size:12px;color:var(--muted)}
.peek{border:none;padding:0;font-size:12px;color:var(--accent)}
.drill-head{display:flex;justify-content:space-between;align-items:center;margin:28px 0 8px}
.drill-head h3{margin:0;font-size:21px;font-weight:700}
.badge{font-size:12px;background:var(--accent-bg);color:var(--accent);border-radius:8px;padding:2px 8px}
.frame{font-size:clamp(26px,4vw,36px);font-weight:500;line-height:1.3;margin:4px 0 12px}
.slot{color:var(--accent);border-bottom:2px solid var(--accent)}
.step-lab{font-size:12px;font-weight:700;color:var(--muted);margin-bottom:4px}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.chips button{font-size:15px;padding:8px 14px}
.chips button.on{background:var(--accent-bg);color:var(--accent);border-color:var(--accent)}
.own{border:.5px dashed var(--border2);border-radius:8px;padding:14px 16px;font-size:14px;color:var(--text2)}
.nav{display:flex;justify-content:space-between;margin-top:12px}
.hint{font-size:12px;color:var(--text2);margin-top:6px}
.guide{background:var(--surface2);border-radius:12px;padding:16px 20px;font-size:14px;color:var(--text2);margin-top:16px}
footer{color:var(--muted);font-size:12px;padding-bottom:32px}

.today{max-width:1000px;margin:20px auto 0;padding:0 16px}
.today .tl{background:var(--accent-bg);border:1px solid var(--border-a,var(--accent));border-radius:12px;padding:20px 24px}
.tl-top{display:flex;justify-content:space-between;font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--accent)}
.tl-text{font-size:clamp(28px,5vw,52px);line-height:1.2;font-weight:500;margin:10px 0 8px}
.tl-meta{font-size:14px;font-weight:700;color:var(--green);margin-bottom:14px}
.tl-btns{display:flex;gap:8px;flex-wrap:wrap}
.tl-btns .pri{background:var(--text);color:var(--bg);border-color:var(--text)}
button{white-space:nowrap}
@media (max-width:640px){
  .toolbar{flex-wrap:nowrap;overflow-x:auto;gap:10px;padding-top:6px;padding-bottom:6px;-webkit-overflow-scrolling:touch}
  .grp{flex:none}
  .grp .lab{display:none}
  .seg button{padding:7px 10px}
  .sec-head{padding:16px 18px}
  .scene-head{gap:8px}
  .scene-head h3{font-size:18px}
  .card{padding:14px}
  .tl-btns button{flex:1 1 auto}
}