:root{--bg:#f4f6f9;--surface:#fff;--text:#1d2733;--muted:#556170;--line:#d5dce5;--hdr:56px;--side:280px;
--hint:#0b6e6a;--hint-soft:#e2f4f3;--warn:#8a5200;--warn-soft:#fff3dc;--ok:#1d7f4e;--ok-soft:#e5f5ec;--note:#4a5561;--note-soft:#eceff3;--ng:#b3261e;--ng-soft:#fde9e7;
--shadow:0 2px 10px rgba(20,35,60,.10);
--cat-msg:#1a5fb4;--cat-msg-bg:#1a5fb4;--cat-msg-soft:#e6effb;--cat-att:#17703c;--cat-att-bg:#17703c;--cat-att-soft:#e3f4ea;--cat-roku:#6b3fb0;--cat-roku-bg:#6b3fb0;--cat-roku-soft:#efe8fa;--cat-abs:#a84300;--cat-abs-bg:#a84300;--cat-abs-soft:#fdeee0;--cat-time:#0a6f6a;--cat-time-bg:#0a6f6a;--cat-time-soft:#e0f3f2;--cat-common:#3949ab;--cat-common-bg:#3949ab;--cat-common-soft:#e8eaf8;--cat-credit:#b3261e;--cat-credit-bg:#b3261e;--cat-credit-soft:#fde9e7;--cat-extra:#9c1f66;--cat-extra-bg:#9c1f66;--cat-extra-soft:#fbe8f2;--cat-new:#00698f;--cat-new-bg:#00698f;--cat-new-soft:#e0f2f9;
--brand:var(--cat-msg);--brand-d:var(--cat-msg);--brand-bg:var(--cat-msg-bg);--brand-soft:var(--cat-msg-soft)}
@media (prefers-color-scheme:dark){:root{--bg:#10151b;--surface:#18202a;--text:#e6ebf1;--muted:#b3bfcc;--line:#33404f;
--hint:#5fd6cf;--hint-soft:#12302f;--warn:#f0b95a;--warn-soft:#3a2d12;--ok:#6fd49c;--ok-soft:#14301f;--note:#c3ccd6;--note-soft:#222a33;--ng:#ff8a80;--ng-soft:#3d1a18;
--shadow:0 0 0 1px #33404f,0 4px 14px rgba(0,0,0,.55);
--cat-msg:#7db2f5;--cat-msg-bg:#2b64b0;--cat-msg-soft:#1b2c42;--cat-att:#6fd49c;--cat-att-bg:#1f7241;--cat-att-soft:#14301f;--cat-roku:#b79cf5;--cat-roku-bg:#6a45b0;--cat-roku-soft:#271f3d;--cat-abs:#ffa766;--cat-abs-bg:#a8480d;--cat-abs-soft:#3a2415;--cat-time:#5fd6cf;--cat-time-bg:#0f6f69;--cat-time-soft:#12302f;--cat-common:#9fa8ff;--cat-common-bg:#3f4fb0;--cat-common-soft:#1e2342;--cat-credit:#ff8a80;--cat-credit-bg:#b0372f;--cat-credit-soft:#3d1a18;--cat-extra:#f08ac0;--cat-extra-bg:#a1306f;--cat-extra-soft:#3a1a2c;--cat-new:#6cc8ec;--cat-new-bg:#00698f;--cat-new-soft:#12303d;}}
body[data-cat="msg"]{--brand:var(--cat-msg);--brand-d:var(--cat-msg);--brand-bg:var(--cat-msg-bg);--brand-soft:var(--cat-msg-soft)}
body[data-cat="att"]{--brand:var(--cat-att);--brand-d:var(--cat-att);--brand-bg:var(--cat-att-bg);--brand-soft:var(--cat-att-soft)}
body[data-cat="roku"]{--brand:var(--cat-roku);--brand-d:var(--cat-roku);--brand-bg:var(--cat-roku-bg);--brand-soft:var(--cat-roku-soft)}
body[data-cat="abs"]{--brand:var(--cat-abs);--brand-d:var(--cat-abs);--brand-bg:var(--cat-abs-bg);--brand-soft:var(--cat-abs-soft)}
body[data-cat="time"]{--brand:var(--cat-time);--brand-d:var(--cat-time);--brand-bg:var(--cat-time-bg);--brand-soft:var(--cat-time-soft)}
body[data-cat="common"]{--brand:var(--cat-common);--brand-d:var(--cat-common);--brand-bg:var(--cat-common-bg);--brand-soft:var(--cat-common-soft)}
body[data-cat="credit"]{--brand:var(--cat-credit);--brand-d:var(--cat-credit);--brand-bg:var(--cat-credit-bg);--brand-soft:var(--cat-credit-soft)}
body[data-cat="extra"]{--brand:var(--cat-extra);--brand-d:var(--cat-extra);--brand-bg:var(--cat-extra-bg);--brand-soft:var(--cat-extra-soft)}
body[data-cat="new"]{--brand:var(--cat-new);--brand-d:var(--cat-new);--brand-bg:var(--cat-new-bg);--brand-soft:var(--cat-new-soft)}
*{box-sizing:border-box}
html{scroll-padding-top:calc(var(--hdr) + 64px);scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.7 "Hiragino Sans","Yu Gothic UI","Meiryo",system-ui,sans-serif;overflow-x:hidden;-webkit-text-size-adjust:100%}
a{color:var(--brand)}
img{max-width:100%;height:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* ---- header / drawer ---- */
.hdr{position:fixed;top:0;left:0;right:0;height:var(--hdr);background:var(--surface);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px;padding:0 8px;z-index:40}
.hdr .ttl{font-weight:700;font-size:1rem;text-decoration:none;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.burger{width:48px;height:48px;border:0;background:none;color:var(--text);font-size:1.6rem;cursor:pointer;border-radius:8px}
.burger:focus-visible,.nav a:focus-visible,.nav button:focus-visible,.btn:focus-visible,.tab:focus-visible,.zoomable:focus-visible,.topbtn:focus-visible,summary:focus-visible,.toc2 a:focus-visible,.quick a:focus-visible,.tile:focus-visible{outline:3px solid var(--brand);outline-offset:2px}
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:48;opacity:0;visibility:hidden;transition:opacity .2s}
.scrim.on{opacity:1;visibility:visible}
.drawer{position:fixed;top:0;left:0;bottom:0;width:min(86vw,320px);background:var(--surface);z-index:50;overflow-y:auto;transform:translateX(-100%);visibility:hidden;transition:transform .22s,visibility .22s;display:flex;flex-direction:column;box-shadow:4px 0 18px rgba(0,0,0,.25)}
.drawer.open{transform:none;visibility:visible}
.drawer-top{display:flex;align-items:center;justify-content:space-between;padding:4px 8px 4px 16px;border-bottom:1px solid var(--line);min-height:var(--hdr)}
.drawer-top strong{font-size:1rem}
.close{width:48px;height:48px;border:0;background:none;color:var(--text);font-size:1.8rem;cursor:pointer;border-radius:8px}
.close:focus-visible{outline:3px solid var(--brand)}
.nav{list-style:none;margin:0;padding:8px 0}
.nav li{margin:0}
.nav a,.nav button.acc{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:48px;padding:6px 16px;color:var(--text);text-decoration:none;font:inherit;font-weight:600;background:none;border:0;text-align:left;cursor:pointer}
.nav a:hover,.nav button.acc:hover{background:var(--brand-soft)}
.nav [aria-current="page"]{background:var(--brand-soft);color:var(--brand-d);box-shadow:inset 4px 0 0 var(--brand)}
.nav .caret{transition:transform .2s;font-size:.8rem;color:var(--muted)}
.nav button[aria-expanded="true"] .caret{transform:rotate(180deg)}
.nav ul{list-style:none;margin:0;padding:0 0 4px;background:var(--bg)}
.nav ul[hidden]{display:none}
.nav ul a{font-weight:400;padding-left:32px;font-size:.95rem}
.soon{font-size:.72rem;font-weight:400;color:var(--muted);border:1px solid var(--line);border-radius:99px;padding:0 8px;margin-left:8px;white-space:nowrap}
.nav a.pending{color:var(--muted)}
main{padding:calc(var(--hdr) + 20px) 16px 64px;max-width:760px;margin:0 auto}
footer{border-top:1px solid var(--line);padding:20px 16px;text-align:center;color:var(--muted);font-size:.9rem}
@media (min-width:900px){
 .hdr,.scrim,.close{display:none}
 .drawer{transform:none;visibility:visible;width:var(--side);border-right:1px solid var(--line);transition:none;box-shadow:none}
 .drawer-top{padding:12px 16px}
 .drawer-top strong{font-size:1.05rem}
 body{padding-left:var(--side)}
 main{padding-top:32px;max-width:880px}
 html{scroll-padding-top:80px}
 .tabs{top:0!important}
}
/* ---- headings ---- */
h1{font-size:1.65rem;line-height:1.4;margin:.2em 0 .8em;padding-bottom:.35em;border-bottom:3px solid var(--brand)}
h2{font-size:1.3rem;line-height:1.4;margin:2.4em 0 .7em;padding-top:.8em;border-top:2px solid var(--line);position:relative}
h2::before{content:"";position:absolute;top:-2px;left:0;width:56px;height:2px;background:var(--brand)}
h3{font-size:1.05rem;margin:1.2em 0 .4em}
.lead{font-size:1.05rem;color:var(--muted)}
/* ---- cards / blocks ---- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px;margin:14px 0}
.card h3{margin-top:0}
.hero{background:linear-gradient(135deg,var(--brand-soft),var(--surface));border:1px solid var(--line);border-radius:16px;padding:22px 18px;margin-bottom:8px}
.tag{display:inline-block;font-size:.8rem;border-radius:99px;padding:1px 10px;background:var(--brand-soft);color:var(--brand-d);margin:0 6px 4px 0;font-weight:700}
.tag.new,.tag.newb{background:var(--warn-soft);color:var(--warn)}
.feat{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.feat li{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.feat b{display:block;font-size:1.05rem}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:8px 20px;border-radius:10px;background:var(--brand-bg);color:#fff;font:inherit;font-weight:700;text-decoration:none;border:0;cursor:pointer}
.btn.sub{background:var(--brand-soft);color:var(--brand-d);border:1px solid var(--brand)}
.btn.small{min-height:44px;padding:4px 14px;font-size:.95rem}
.steps{list-style:none;counter-reset:s;padding:0;margin:0}
.steps>li{counter-increment:s;position:relative;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 14px 14px 58px;margin:12px 0}
.steps>li::before{content:counter(s);position:absolute;left:14px;top:14px;width:32px;height:32px;border-radius:50%;background:var(--brand-bg);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center}
.steps.compact>li{padding-top:10px;padding-bottom:10px;margin:8px 0}
.steps.compact>li::before{top:10px}
@media (max-width:480px){.steps>li{padding-left:50px}.steps>li::before{left:10px}}
/* timeline steps (feature cards) */
.steps.tl>li{background:none;border:0;border-radius:0;padding:2px 0 14px 44px;margin:0}
.steps.tl>li::before{left:0;top:0;width:28px;height:28px;font-size:.9rem}
.steps.tl>li::after{content:"";position:absolute;left:13px;top:32px;bottom:2px;width:2px;background:var(--line)}
.steps.tl>li:last-child{padding-bottom:2px}
.steps.tl>li:last-child::after{display:none}
@media (max-width:480px){.steps.tl>li{padding-left:38px}}
.final{border:2px solid var(--ng);background:var(--ng-soft);border-radius:12px;padding:16px;margin:20px 0}
.final h3{margin:0 0 .4em;color:var(--ng)}
.note,.hint,.ok,.warn{border-radius:10px;padding:10px 14px;margin:12px 0;border-left:5px solid}
.hint{background:var(--hint-soft);border-color:var(--hint)}
.hint b:first-child{color:var(--hint)}
.note{background:var(--note-soft);border-color:var(--note);color:var(--text)}
.ok{background:var(--ok-soft);border-color:var(--ok)}
.warn{background:var(--warn-soft);border-color:var(--warn)}
.ph{border:1px dashed var(--line);border-radius:6px;padding:3px 10px;color:var(--muted);font-size:.8rem;margin:8px 0;background:transparent;text-align:left}
body.final .ph{display:none}
code.cp{background:var(--bg);border:1px solid var(--line);padding:2px 8px;border-radius:6px;font-size:1rem;word-break:break-all}
.cprow{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px}
kbd{display:inline-block;min-width:1.7em;padding:0 .5em;text-align:center;font:600 .88em/1.6 ui-monospace,Menlo,Consolas,monospace;background:var(--surface);color:var(--text);border:1px solid var(--line);border-bottom-width:3px;border-radius:6px}
.ui{display:inline-block;padding:0 .45em;border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;background:var(--surface);font-weight:600;font-size:.92em;line-height:1.5;box-decoration-break:clone}
/* tabs (underline) */
.tabs{position:sticky;top:var(--hdr);z-index:30;display:flex;gap:0;background:var(--bg);padding:0;margin:12px 0;border-bottom:1px solid var(--line)}
.tab{flex:1;min-height:48px;border:0;border-bottom:4px solid transparent;background:none;color:var(--muted);font:inherit;font-weight:700;cursor:pointer}
.tab[aria-selected="true"]{color:var(--brand-d);border-bottom-color:var(--brand)}
.panel[hidden]{display:none}
.shot{margin:12px 0;text-align:center}
.shot img{border:1px solid var(--line);border-radius:8px;cursor:zoom-in;max-height:360px;object-fit:contain}
.shot figcaption{font-size:.85rem;color:var(--muted)}
.lb{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:100;display:flex;align-items:center;justify-content:center;padding:12px;cursor:zoom-out}
.lb[hidden]{display:none}
.lb img{max-width:100%;max-height:100%;background:#fff}
/* ---- feature cards ---- */
.fcard{padding:0;overflow:hidden;margin:30px 0;box-shadow:var(--shadow)}
.fcard>header,.fcard>summary{background:var(--brand-bg);color:#fff;padding:12px 16px}
.fcard>header small{display:block;color:rgba(255,255,255,.88);font-size:.82rem}
.fcard>header h2,.fcard>summary h2{margin:2px 0 0;padding:0;border:0;font-size:1.2rem;color:#fff;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.fcard h2::before{display:none}
.fcard h2{border-top:0}
.fcard .no{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;min-width:2.2em;height:2.2em;border-radius:50%;background:#fff;color:var(--brand-bg);font-weight:800;font-size:.95rem}
.fcard>header .tag,.fcard>summary .tag{background:#fff;color:#7a4a00;margin:0}
.fcard .body{padding:6px 16px 16px}
.lbl{display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.05em;padding:1px 12px;border-radius:99px;margin:14px 0 6px}
.l-can{background:var(--ok-soft);color:var(--ok)}
.l-how{background:var(--brand-soft);color:var(--brand-d)}
.fcard .body>p{margin:.2em 0 .4em}
.screens{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;margin:12px 0 4px!important}
.screens .lbl-in{font-size:.78rem;color:var(--muted);margin-right:2px}
.screens .tag{background:transparent;border:1px solid var(--line);color:var(--text);font-weight:600;margin:0}
details.fcard>summary{list-style:none;cursor:pointer;min-height:48px;display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;position:relative;padding-right:40px}
details.fcard>summary::-webkit-details-marker{display:none}
details.fcard>summary::after{content:"▾";position:absolute;right:16px;top:12px;font-size:1.1rem;transition:transform .2s}
details.fcard[open]>summary::after{transform:rotate(180deg)}
details.fcard>summary .ttl{font-weight:800;font-size:1.05rem}
details.fcard>summary .sum{flex-basis:100%;font-size:.85rem;color:rgba(255,255,255,.92);line-height:1.5}
details.fcard{margin:14px 0}
/* TOC buttons */
.toc2{list-style:none;padding:0;margin:0 0 14px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.toc2 a{display:flex;align-items:center;min-height:48px;padding:6px 10px;background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--brand);border-radius:8px;color:var(--text);text-decoration:none;font-size:.9rem;font-weight:600;line-height:1.35}
@media (max-width:360px){.toc2{grid-template-columns:1fr}}
.pagetoc{background:var(--surface);border:1px solid var(--line);border-radius:10px;margin:14px 0;padding:0 14px}
.pagetoc summary{min-height:48px;display:flex;align-items:center;cursor:pointer;font-weight:700}
.pagetoc ol{margin:0 0 10px;padding-left:1.4em}
.pagetoc li{margin:4px 0}
.pagetoc a{display:inline-block;min-height:32px;line-height:32px}
/* top button */
.topbtn{position:fixed;right:14px;bottom:14px;width:48px;height:48px;border-radius:50%;border:0;background:var(--brand-bg);color:#fff;font-size:1.3rem;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.35);z-index:35;opacity:0;visibility:hidden;transition:opacity .2s}
.topbtn.on{opacity:1;visibility:visible}
/* pager / keys / lists */
.pager{display:grid;gap:12px;margin:28px 0}
.pager a{display:flex;align-items:center;min-height:56px;padding:8px 16px;background:var(--surface);border:1px solid var(--line);border-radius:12px;text-decoration:none;font-weight:700}
.pager a.next{justify-content:flex-end;text-align:right}
@media (min-width:600px){.pager{grid-template-columns:1fr 1fr}.pager a:only-child{grid-column:1/-1}}
.keys{list-style:none;margin:0;padding:0}
.keys li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:10px 0}
.keys .k{flex:0 0 auto}
.keys .d{flex:1 1 220px;font-weight:600}
/* ---- index ---- */
.cta{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 6px}
.cta .btn{flex:1 1 200px;min-height:52px;font-size:1.05rem}
.vpill{display:inline-block;font-size:.8rem;font-weight:700;padding:2px 12px;border-radius:99px;background:var(--ok-soft);color:var(--ok);border:1px solid var(--ok)}
details.vinfo{margin:6px 0 12px;font-size:.9rem;color:var(--muted)}
details.vinfo summary{cursor:pointer;min-height:40px;display:flex;align-items:center}
.quick{list-style:none;padding:0;margin:10px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.quick a{display:flex;align-items:center;min-height:52px;padding:6px 12px;background:var(--surface);border:1px solid var(--line);border-radius:10px;text-decoration:none;color:var(--text);font-weight:600;font-size:.92rem;line-height:1.35}
@media (min-width:700px){.quick{grid-template-columns:repeat(4,1fr)}}
.strip{display:flex;flex-wrap:wrap;gap:8px;margin:28px 0 0;padding:0;list-style:none}
.strip li{flex:1 1 200px;font-size:.88rem;color:var(--muted);background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:8px 12px}
.strip b{color:var(--text)}
.tiles{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tile{display:flex;align-items:center;gap:6px;min-height:64px;padding:8px 12px;background:var(--surface);border:1px solid var(--line);border-left:6px solid var(--c);border-radius:10px;text-decoration:none;color:var(--text)}
.tile .t{flex:1;min-width:0}
.tile b{display:block;color:var(--c);font-size:.95rem;line-height:1.35}
.tile span.s{display:block;font-size:.78rem;color:var(--muted);line-height:1.4}
.tile .ar{color:var(--muted);font-size:1.3rem}
@media (max-width:360px){.tiles{grid-template-columns:1fr}}
.c-msg{--c:var(--cat-msg)}.c-att{--c:var(--cat-att)}.c-roku{--c:var(--cat-roku)}.c-abs{--c:var(--cat-abs)}.c-time{--c:var(--cat-time)}.c-common{--c:var(--cat-common)}.c-credit{--c:var(--cat-credit)}.c-extra{--c:var(--cat-extra)}.c-new{--c:var(--cat-new)}
/* ---- changelog timeline ---- */
.tlog{position:relative;margin:6px 0 0 6px;padding-left:22px;border-left:2px solid var(--line)}
.tlog .item{position:relative;margin:0 0 18px}
.tlog .item::before{content:"";position:absolute;left:-30px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--brand-bg);border:2px solid var(--bg)}
.tlog h3{margin:0 0 4px;font-size:1rem}
.tlog ul{margin:0;padding-left:1.2em}
.tlog li{margin:.3em 0}
.card ul{margin:.3em 0;padding-left:1.4em}
.card ul li{margin:.5em 0;list-style:disc}
@media print{.hdr,.drawer,.scrim,.topbtn,.pagetoc{display:none!important}body{padding-left:0}main{padding-top:0;max-width:none}details.fcard>summary::after{display:none}}