:root{
  --bg:#f7f9f8;--fg:#151a1b;--mut:#5a6768;--side:#eef2f1;--hair:#d6dcdb;--chip:#dce2e1;
  --box:#eef2f1;--boxline:#d6dcdb;--brass:#8c6013;--mark:#e0ac4f;--steel:#245a64;
  --tip:#e3eef0;--note:#f6ecd8;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#161b1c;--fg:#e3e9e8;--mut:#93a09f;--side:#1d2425;--hair:#2c3637;--chip:#263031;
  --box:#1d2425;--boxline:#2c3637;--brass:#e0ac4f;--steel:#79b4bf;
  --tip:#1b2d31;--note:#33291a;
  color-scheme:dark;
}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.55 -apple-system,BlinkMacSystemFont,system-ui,sans-serif}
a{color:var(--brass);text-decoration:none}
a:hover{text-decoration:underline}


.page{padding:20px 16px 48px;max-width:760px;min-width:0}
body.app .page{padding-top:12px;padding-bottom:calc(32px + env(safe-area-inset-bottom,0px))}
.page h1{font-size:28px;line-height:1.2;margin:0 0 6px;letter-spacing:-.01em;text-wrap:balance}
.page h2{font-size:19px;margin:24px 0 6px}
.page p,.page li{max-width:66ch}
.crumb{font-size:13px;color:var(--mut);margin-bottom:4px}
.ld{font-size:17px;color:var(--mut);margin:0 0 16px}
ol.steps{padding-left:24px}ol.steps li{margin:6px 0}
.box{border-radius:12px;padding:10px 14px;margin:14px 0;max-width:66ch;font-size:15px}
.box.tip{background:var(--tip)}.box.note{background:var(--note)}
.box b:first-child{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.05em;margin-bottom:2px}
.seealso{border-top:1px solid var(--hair);margin-top:24px;padding-top:10px}
.seealso .h{font-size:12px;color:var(--mut);font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.seealso a{display:block;margin:4px 0}
.pn{display:flex;justify-content:space-between;gap:16px;margin-top:20px;font-size:15px}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-top:8px}
.tile{display:block;background:var(--box);border:1px solid var(--boxline);border-radius:14px;padding:12px 14px;color:var(--fg)}
.tile:hover{border-color:var(--brass);text-decoration:none}
.tile b{display:block;color:var(--brass)}.tile span{font-size:14px;color:var(--mut)}


.plat{display:inline-flex;background:var(--chip);border-radius:9px;padding:2px;margin:0 0 14px}
.plat button{font:inherit;font-size:14px;border:0;background:none;color:var(--fg);padding:4px 16px;border-radius:7px;cursor:pointer}
.plat button.on{background:var(--bg);box-shadow:0 1px 3px rgba(0,0,0,.2);font-weight:600}

[data-p].off{display:none!important}


.glance{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-start}
.shot{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--boxline);box-shadow:0 6px 22px rgba(0,0,0,.18);line-height:0;max-width:100%}
.shot img{display:block;max-width:100%;height:auto}
.shot.iphone img{width:260px}.shot.ipad img{width:560px}
.mk{position:absolute;width:24px;height:24px;border-radius:50%;background:var(--mark);color:#1b1407;font-weight:800;font-size:13px;line-height:1;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px #0c1011,0 2px 8px rgba(0,0,0,.4);transform:translate(-50%,-50%);transition:transform .12s;cursor:pointer}
.mk.hot{transform:translate(-50%,-50%) scale(1.3);background:#fff}
.picture{margin:6px 0 16px}
.picture .shot{display:inline-block}
.legend{list-style:none;padding:0;margin:0;flex:1 1 280px;min-width:0}
.legend li{display:flex;gap:10px;padding:6px 8px;border-radius:9px;cursor:pointer;font-size:15px}
.legend li .n{flex:none;width:22px;height:22px;border-radius:50%;background:var(--mark);color:#1b1407;font-weight:800;font-size:12px;display:flex;align-items:center;justify-content:center;margin-top:1px}
.legend li.hot{background:color-mix(in srgb,var(--mark) 24%,transparent)}


body.web .top{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:14px;padding:10px 16px;padding-top:calc(10px + env(safe-area-inset-top,0px));background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--hair)}
.top .brand{font-weight:800;color:var(--fg)}.top .guide{color:var(--mut)}
.toc-toggle{margin-left:auto;font:inherit;font-size:14px;border:1px solid var(--hair);background:var(--side);color:var(--fg);border-radius:8px;padding:4px 10px;cursor:pointer}
.layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:24px;max-width:1120px;margin:0 auto;padding:0 16px}
.toc{position:sticky;top:64px;align-self:start;max-height:calc(100vh - 80px);overflow:auto;padding:16px 0}
.toc .search{width:100%;font:inherit;font-size:14px;border:1px solid var(--hair);background:var(--side);color:var(--fg);border-radius:9px;padding:6px 10px;margin-bottom:8px}
.toc .sh{font-size:12px;color:var(--mut);font-weight:600;text-transform:uppercase;letter-spacing:.05em;padding:12px 8px 3px}
.toc .it{display:block;padding:4px 8px;border-radius:8px;color:var(--fg);font-size:15px}
.toc .it.sub{padding-left:16px}
.toc .it:hover{background:var(--side);text-decoration:none}
.toc .it.sel{background:color-mix(in srgb,var(--mark) 26%,transparent);font-weight:600}
.toc .it.miss{display:none}
.toc .sh.miss{display:none}
body.web .page{padding-left:0;padding-right:0}
@media (min-width:821px){.toc-toggle{display:none}}
@media (max-width:820px){
  .layout{grid-template-columns:minmax(0,1fr);gap:0}
  .toc{display:none;position:static;max-height:none;border-bottom:1px solid var(--hair)}
  .toc.open{display:block}
}
.mk-glance-iphone-1{left:9.5%;top:8.8%}
.mk-glance-iphone-2{left:86%;top:8.8%}
.mk-glance-iphone-3{left:34%;top:14.7%}
.mk-glance-iphone-4{left:17%;top:26%}
.mk-glance-iphone-5{left:62%;top:35%}
.mk-glance-iphone-6{left:13%;top:86.5%}
.mk-glance-iphone-7{left:57%;top:87%}
.mk-glance-iphone-8{left:90.6%;top:86.5%}
.mk-glance-ipad-1{left:4.7%;top:5.2%}
.mk-glance-ipad-2{left:92.4%;top:5.2%}
.mk-glance-ipad-3{left:8.7%;top:10.7%}
.mk-glance-ipad-4{left:6.4%;top:25%}
.mk-glance-ipad-5{left:68.7%;top:38.4%}
.mk-glance-ipad-6{left:4.2%;top:89.3%}
.mk-glance-ipad-7{left:52.9%;top:90.2%}
.mk-glance-ipad-8{left:97%;top:89.3%}