:root{
  --bg:#f6f7f9; --surface:#ffffff; --fg:#1c2129; --muted:#5b6574; --line:#dde2e8;
  --run:#3d6fd6; --wait:#c98a1f; --wait-bg:#fbf1de; --ok:#2f9a5c; --code-bg:#eef1f5; --step-line:#c9d6f3; --on-run:#ffffff;
  --list-bg:#e2eafb; --list-fg:#2a54b0; --list-tint:#f5f8fe; --sess-bg:#f8ead0; --sess-fg:#87560a; --sess-tint:#fdf9f1;
  --sans:"Yu Gothic UI","Hiragino Sans","Meiryo",system-ui,sans-serif; --mono:Consolas,"Cascadia Mono",ui-monospace,monospace;
}
@media (prefers-color-scheme: dark){:root{
  --bg:#14171c; --surface:#1c2028; --fg:#e7eaef; --muted:#a2abb8; --line:#2d343e;
  --run:#7ea3f0; --wait:#e8b260; --wait-bg:#3a2c15; --ok:#5cc98a; --code-bg:#262c36; --step-line:#34476e; --on-run:#14171c;
  --list-bg:#233352; --list-fg:#a6c0f7; --list-tint:#1d2431; --sess-bg:#3d2e14; --sess-fg:#f0c47e; --sess-tint:#252219; color-scheme:dark}}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:16px;line-height:1.8}
.wrap{max-width:820px;margin:0 auto;padding:28px max(16px,env(safe-area-inset-right)) 72px max(16px,env(safe-area-inset-left))}
h1{font-size:28px;margin:0 0 4px;line-height:1.4}
h2{font-size:21px;margin:48px 0 12px;padding-top:8px;border-top:2px solid var(--line);line-height:1.5}
h3{font-size:17px;margin:28px 0 8px}
p{margin:0 0 12px}
.lead{color:var(--muted);margin-bottom:20px}
ol,ul{margin:0 0 14px;padding-left:1.5em}
li{margin:4px 0}
code{font-family:var(--mono);font-size:.92em;background:var(--code-bg);padding:1px 5px;border-radius:4px;word-break:break-all}
figure{margin:16px 0 20px}
figure img{width:100%;max-width:760px;height:auto;display:block;border-radius:14px}
figcaption{font-size:14px;color:var(--muted);margin-top:6px}
.toc{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 18px;margin:18px 0}
.toc ol{margin:0;columns:2;column-gap:28px}
@media (max-width:560px){.toc ol{columns:1}}
.toc a{color:inherit}
.steps{counter-reset:s;list-style:none;padding:0}
.steps>li{counter-increment:s;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px 6px;position:relative;margin:12px 0 12px 36px}
.steps>li::before{content:counter(s);position:absolute;left:-36px;top:16px;width:24px;height:24px;border-radius:50%;background:var(--run);color:var(--on-run);font-size:13px;font-weight:700;text-align:center;line-height:24px}
.steps>li:not(:last-child)::after{content:"";position:absolute;left:-25px;top:44px;bottom:-24px;width:2px;border-radius:1px;background:var(--step-line)}
.steps>li>b:first-child{display:block;font-size:17px;margin-bottom:4px}
.tbl{overflow-x:auto;margin:10px 0 18px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:15px;line-height:1.65}
th,td{text-align:left;vertical-align:top;padding:9px 12px;border-bottom:1px solid var(--line)}
th{background:var(--code-bg);white-space:nowrap}
tr:last-child td{border-bottom:0}
td.k{white-space:nowrap;font-weight:600}
.note{background:var(--wait-bg);border-radius:10px;padding:10px 14px;margin:10px 0 16px;font-size:15px}
details{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:0 14px;margin:10px 0 16px}
summary{cursor:pointer;padding:10px 0;font-weight:600}
.muted{color:var(--muted);font-size:14px}
a{color:var(--run)}
@media (max-width:560px){
  table.stack,table.stack tbody,table.stack tr,table.stack td{display:block;width:auto}
  table.stack tr:first-child{display:none}
  table.stack tr{border-bottom:1px solid var(--line);padding:4px 0 8px}
  table.stack tr:last-child{border-bottom:0}
  table.stack td{border:0;padding:3px 14px}
  table.stack td:first-child{padding-top:10px;font-weight:700;white-space:normal}
  table.stack td[data-label]::before{content:attr(data-label) "：";font-weight:600;color:var(--muted)}
}
.views{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:14px 0 6px}
.view{margin:0}
.view figcaption{margin:0 0 6px}
.vsub{display:block;font-size:13px;color:var(--muted);line-height:1.6;margin-top:3px}
.view img{border-radius:0}
.vtag{display:inline-block;font-size:13px;font-weight:700;line-height:1.7;padding:0 10px;border-radius:999px;white-space:nowrap}
.v-list{background:var(--list-bg);color:var(--list-fg)}
.v-sess{background:var(--sess-bg);color:var(--sess-fg)}
.quick td.c-list{background:var(--list-tint)}
.quick td.c-sess{background:var(--sess-tint)}
.quick td p{margin:0 0 3px;display:flex;gap:8px;align-items:baseline}
.quick td p:last-child{margin-bottom:0}
.quick i{font-style:normal;flex:none;width:2.6em;text-align:center;font-size:12px;font-weight:600;line-height:1.8;border-radius:4px;background:var(--surface);color:var(--muted);border:1px solid var(--line)}
@media (max-width:560px){
  .views{grid-template-columns:1fr;gap:12px}
  .quick td.c-list,.quick td.c-sess{margin:6px 10px;padding:8px 10px;border-radius:8px}
  .quick td.c-list::before,.quick td.c-sess::before{display:block;width:max-content;font-size:12px;font-weight:700;line-height:1.7;padding:0 9px;border-radius:999px;margin-bottom:4px}
  .quick td.c-list::before{content:var(--tag-list);background:var(--list-bg);color:var(--list-fg)}
  .quick td.c-sess::before{content:var(--tag-sess);background:var(--sess-bg);color:var(--sess-fg)}
}
.marks{list-style:none;padding:0;margin:4px 0 12px;counter-reset:m}
.marks>li{counter-increment:m;position:relative;padding-left:32px;margin:7px 0}
.marks>li::before{content:counter(m);position:absolute;left:0;top:3px;width:23px;height:23px;border-radius:50%;background:#ff7a1a;color:#fff;font-size:13px;font-weight:700;text-align:center;line-height:23px}
@media (max-width:560px){.steps>li{margin-left:32px}.steps>li::before{left:-32px}.steps>li:not(:last-child)::after{left:-21px}.steps>li figure{margin-left:-10px;margin-right:-10px}}
.flow{display:grid;gap:10px;margin:12px 0 18px}
.fl{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px 14px}
.fl p{margin:0 0 10px}
.fn{display:block;font-size:17px;margin-bottom:2px}
.fl img{width:100%;height:auto;display:block;border-radius:8px}
:root:lang(ja){--tag-list:"待ちの一覧";--tag-sess:"セッションの画面"}
:root:lang(en){--tag-list:"Waiting list";--tag-sess:"Session screen"}
.langs{float:right;font-size:14px;margin-top:6px}
:root:lang(en){--sans:"Segoe UI","Yu Gothic UI",system-ui,sans-serif}
:root:lang(en) .quick i{width:3.5em}
img.w420{max-width:420px}img.w480{max-width:480px}img.w560{max-width:560px}