/* Unpack Report — Keka review. Mac System 7 window chrome. */
:root{
  --desk:#c8c8c8; --plat:#dedede; --white:#fff; --ink:#000; --grey:#8c8c8c; --mid:#b4b4b4;
  --sel:#2a5bd7; --selbg:#d5deff;
  --display:"Pixelify Sans","Chicago","Geneva",monospace; --body:"Public Sans","Geneva","Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--body);font-size:16px;line-height:1.55;color:var(--ink);
  background-color:var(--desk);
  background-image:radial-gradient(#8f8f8f 0.6px,transparent 0.7px);background-size:4px 4px;}
a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{background:var(--ink);color:var(--white);text-decoration:none}
img{max-width:100%}
code{font-family:"Menlo","Courier New",monospace;font-size:.88em;background:var(--plat);border:1px solid var(--mid);padding:0 4px;overflow-wrap:anywhere}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.small{font-size:.85rem;color:#333}
hr{border:0;border-top:1px solid var(--ink);margin:8px 0}

/* ---------- menu bar */
.menubar{position:sticky;top:0;z-index:50;background:var(--white);border-bottom:1px solid var(--ink);box-shadow:0 1px 0 var(--white),0 2px 0 var(--ink);font-family:var(--display);font-size:1.02rem}
.menubar .wrap{display:flex;align-items:stretch;height:32px;gap:0}
.menubar .apple{display:flex;align-items:center;gap:8px;padding:0 14px 0 0;font-weight:700;text-decoration:none;white-space:nowrap}
.menubar .apple:hover{background:none;color:var(--ink)}
.logo{width:16px;height:16px;border:2px solid var(--ink);background:repeating-linear-gradient(180deg,var(--ink) 0 2px,transparent 2px 4px) top/100% 8px no-repeat,var(--white)}
.menubar nav{display:flex;min-width:0;overflow:hidden}
.menubar nav a{display:flex;align-items:center;padding:0 12px;text-decoration:none;white-space:nowrap}
.menubar nav a:hover,.menubar nav a.on{background:var(--ink);color:var(--white)}
.menubar .clock{margin-left:auto;display:flex;align-items:center;padding:0 4px;font-size:.9rem;white-space:nowrap;font-variant-numeric:tabular-nums}
.burger{display:none;margin-left:auto;font:inherit;background:var(--white);border:0;border-left:1px solid var(--ink);padding:0 14px;cursor:pointer}
.burger[aria-expanded=true]{background:var(--ink);color:var(--white)}
.drawer{display:none;position:absolute;top:32px;left:0;right:0;z-index:49;padding:8px 20px}
.drawer.open{display:block}
.drawer .cnt{display:flex;flex-direction:column;padding:6px 0}
.drawer .cnt a{padding:8px 14px;text-decoration:none;font-family:var(--display);font-size:1.05rem}
.drawer .cnt a:hover{background:var(--ink);color:var(--white)}
.drawer hr{margin:6px 14px}

/* ---------- alert strip */
.alert{background:var(--plat);border-bottom:1px solid var(--ink);font-size:.8rem;padding:6px 0}
.alert .wrap{display:flex;gap:8px;align-items:center}
.alert .wrap::before{content:"";flex:0 0 auto;width:12px;height:12px;border:1px solid var(--ink);background:repeating-linear-gradient(45deg,var(--ink) 0 1px,transparent 1px 3px)}

/* ---------- windows */
.win{background:var(--white);border:1px solid var(--ink);box-shadow:2px 2px 0 var(--ink);margin:0 0 22px;min-width:0}
.win .tb{display:flex;align-items:center;gap:8px;height:22px;padding:0 4px;border-bottom:1px solid var(--ink);
  background:repeating-linear-gradient(180deg,var(--ink) 0 1px,var(--white) 1px 3px);}
.win .tb b{font-family:var(--display);font-weight:700;font-size:.98rem;background:var(--white);padding:0 8px;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:80%;margin:0 auto}
.win .tb .box{width:11px;height:11px;border:1px solid var(--ink);background:var(--white);flex:0 0 auto}
.win .tb .box.zoom{background:linear-gradient(var(--ink),var(--ink)) 2px 2px/5px 5px no-repeat,var(--white)}
.win .cnt{padding:18px 20px}
.win.small .cnt{padding:8px}
.desk{padding:26px 0 10px}

/* ---------- title card (page head) */
.titlecard{border:1px solid var(--ink);background:var(--white);box-shadow:2px 2px 0 var(--ink);padding:22px 24px 18px;margin-bottom:22px;
  display:grid;grid-template-columns:1fr;gap:6px}
.crumbs{font-size:.8rem;font-family:var(--display)}
h1{font-family:var(--display);font-weight:700;font-size:clamp(1.9rem,4.4vw,3.1rem);line-height:1.08;margin:2px 0 6px;letter-spacing:-.01em}
.lede{font-size:1.1rem;max-width:72ch;margin:0}
.meta{display:flex;flex-wrap:wrap;gap:6px 20px;font-size:.8rem;margin-top:10px;padding-top:10px;border-top:1px dotted var(--ink)}

/* ---------- article grid */
.art{display:grid;grid-template-columns:200px minmax(0,1fr) 280px;gap:22px;align-items:start}
.art>*{min-width:0}
.toc{position:sticky;top:44px;margin:0}
.toc ol{list-style:none;margin:0;padding:6px 0}
.toc li a{display:block;padding:5px 12px;font-size:.86rem;text-decoration:none;border-left:3px solid transparent}
.toc li a:hover{background:var(--plat);color:var(--ink)}
.toc li a.on{border-left-color:var(--sel);background:var(--selbg)}
.side{position:sticky;top:44px}
.side .win{margin-bottom:16px}
.side .cnt{padding:12px 14px}
.win.body .cnt{padding:22px 28px 26px}
.win.body h2{font-family:var(--display);font-size:1.55rem;font-weight:700;margin:32px 0 10px;padding-top:14px;border-top:1px solid var(--ink);line-height:1.15}
.win.body h2.first{margin-top:0;padding-top:0;border-top:0}
.win.body h3{font-family:var(--display);font-size:1.18rem;margin:18px 0 6px}
.win.body h3.first{margin-top:0}
.win.body p{margin:0 0 12px}
.win.body ul,.win.body ol{padding-left:22px;margin:0 0 12px}
.win.body li{margin-bottom:5px}

/* score */
.score{display:flex;align-items:baseline;gap:6px;font-family:var(--display)}
.score b{font-size:2.8rem;line-height:1}
.score span{font-size:1rem}
.bars{list-style:none;margin:10px 0 0;padding:0;font-size:.78rem}
.bars li{display:grid;grid-template-columns:1fr 84px 28px;gap:8px;align-items:center;margin-bottom:5px}
.bars i{display:block;height:9px;border:1px solid var(--ink);background:var(--white)}
.bars i b{display:block;height:100%;background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 3px)}
.bars .num{text-align:right;font-variant-numeric:tabular-nums}
.kv{list-style:none;margin:0;padding:0;font-size:.84rem}
.kv li{display:grid;grid-template-columns:96px 1fr;gap:10px;padding:5px 0;border-bottom:1px dotted var(--mid)}
.kv li:last-child{border-bottom:0}
.kv li span:first-child{color:#444}
.kv li span{overflow-wrap:anywhere}

/* dialog box */
.dialog{display:flex;gap:16px;align-items:flex-start;border:2px solid var(--ink);outline:1px solid var(--ink);outline-offset:2px;padding:16px 18px;margin:16px 0 20px;background:var(--white)}
.dialog>div{min-width:0}
.dialog .ico{flex:0 0 auto;width:34px;height:34px;border:2px solid var(--ink);border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:1.3rem}
.dialog p{margin:8px 0 0!important}
.chk{display:inline-flex;gap:6px;margin:8px 0 0;vertical-align:middle;max-width:100%}
.chk input{font:inherit;font-family:"Menlo","Courier New",monospace;width:120px;max-width:40vw;padding:5px 8px;border:1px solid var(--ink);background:var(--white)}
.chk input:focus{outline:2px solid var(--sel);outline-offset:1px}
.btn,.chk button{font:inherit;font-family:var(--display);font-weight:700;padding:5px 16px;border:1px solid var(--ink);background:var(--white);cursor:pointer;border-radius:6px;box-shadow:0 0 0 1px var(--white),0 0 0 2px var(--ink)}
.btn.primary,.chk button{box-shadow:0 0 0 2px var(--white),0 0 0 4px var(--ink)}
.btn:hover,.chk button:hover{background:var(--ink);color:var(--white)}
.out.ok{background:var(--selbg);padding:8px 10px;border-left:3px solid var(--sel)}
.out.bad{background:var(--plat);padding:8px 10px;border-left:3px solid var(--ink)}

/* pros / cons */
.pros{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--ink);margin:16px 0 24px}
.pros>div{padding:14px 16px;min-width:0}
.pros>div+div{border-left:1px solid var(--ink)}
.pros h4{margin:0 0 8px;font-family:var(--display);font-size:1rem}
.pros ul{padding-left:18px;margin:0;font-size:.92rem}
.pros>div:first-child h4::before{content:"✓ ";}
.pros>div:last-child h4::before{content:"✗ ";}
.note{border:1px solid var(--ink);background:var(--plat);padding:12px 14px;margin:14px 0;font-size:.92rem}
.steps{list-style:none;counter-reset:s;padding:0!important;margin:0 0 12px!important}
.steps li{position:relative;padding:8px 0 8px 40px;border-bottom:1px dotted var(--mid)}
.steps li::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:9px;width:26px;height:26px;border:1px solid var(--ink);display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:.9rem;background:var(--white)}
.steps li b{display:block;font-family:var(--display);font-size:1.05rem}
.steps li p{margin:2px 0 0!important;font-size:.94rem}
.verdict{border:2px solid var(--ink);outline:1px solid var(--ink);outline-offset:2px;padding:18px 20px;margin:24px 0 14px;background:var(--white)}
.verdict h3{margin:0 0 6px!important;font-size:1.4rem!important}
.verdict p{margin:0!important}

/* tables */
.table-wrap{overflow-x:auto;margin:0 0 14px;border:1px solid var(--ink)}
table{border-collapse:collapse;width:100%;font-size:.88rem;background:var(--white)}
th,td{padding:7px 10px;border-bottom:1px solid var(--mid);border-right:1px solid var(--mid);text-align:left;vertical-align:top}
th:last-child,td:last-child{border-right:0}
tbody tr:last-child td{border-bottom:0}
th{font-family:var(--display);font-weight:700;background:var(--plat);border-bottom:1px solid var(--ink);white-space:nowrap}
th[data-sort]{cursor:pointer;user-select:none;padding-right:22px;position:relative}
th[data-sort]::after{content:"◇";position:absolute;right:7px;top:7px;font-size:.75rem}
th[data-sort].asc::after{content:"▲"} th[data-sort].desc::after{content:"▼"}
td.yes::before{content:"● ";color:var(--sel)} td.no{color:#555} td.no::before{content:"○ "}
tbody tr:hover td{background:#f2f2f2}
.win.body table{margin:8px 0 12px}

/* tabs */
.tabs{margin:8px 0 18px;border:1px solid var(--ink)}
.tl{display:flex;flex-wrap:wrap;gap:0;background:var(--plat);border-bottom:1px solid var(--ink)}
.tl button{font:inherit;font-family:var(--display);font-weight:700;font-size:.9rem;padding:8px 14px;border:0;border-right:1px solid var(--ink);background:transparent;cursor:pointer;flex:0 0 auto}
.tl button:hover{background:#eee}
.tl button.on{background:var(--white);margin-bottom:-1px;border-bottom:1px solid var(--white)}
.tp{display:none;padding:16px 18px}
.tp.on{display:block}

/* faq */
.faq details{border-bottom:1px dotted var(--ink)}
.faq summary{cursor:pointer;padding:10px 0 10px 22px;font-family:var(--display);font-weight:700;font-size:1.02rem;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"▸";position:absolute;left:0;top:10px}
.faq details[open] summary::before{content:"▾"}
.faq p{margin:0 0 12px 22px!important;font-size:.95rem}

/* form */
.f{margin-bottom:14px}
.f label{display:block;font-family:var(--display);font-size:.9rem;margin-bottom:4px}
.f input,.f select,.f textarea{width:100%;font:inherit;padding:7px 9px;border:1px solid var(--ink);background:var(--white);border-radius:0}
.f textarea{min-height:130px;resize:vertical}
.f input:focus,.f select:focus,.f textarea:focus{outline:2px solid var(--sel);outline-offset:1px}
.btns{display:flex;gap:14px;margin:8px 0 6px}

/* legal */
.win.legal{max-width:820px}
.win.legal h2{font-family:var(--display);font-size:1.25rem;margin:20px 0 6px}

/* footer */
.foot{padding:10px 0 40px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.3fr;gap:20px;font-size:.86rem}
.foot-grid>*{min-width:0}
.foot-grid h4{font-family:var(--display);margin:0 0 6px;font-size:.95rem}
.foot-grid ul{list-style:none;margin:0;padding:0}
.foot-grid li{margin-bottom:4px;overflow-wrap:anywhere}
.foot-grid p{margin:0}
.status{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;border-top:1px solid var(--ink);padding:6px 20px;font-size:.78rem;background:var(--plat);font-family:var(--display)}

/* ---------- responsive */
@media (max-width:1280px){.menubar .clock{display:none}}
@media (max-width:1100px){.art{grid-template-columns:180px minmax(0,1fr)}.side{grid-column:1/-1;position:static;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.foot-grid{grid-template-columns:1fr 1fr}.menubar nav a{padding:0 9px}}
@media (max-width:900px){.menubar nav,.menubar .clock{display:none}.burger{display:block}.art{grid-template-columns:1fr}.toc{position:static}.side{grid-template-columns:1fr 1fr}.win.body .cnt{padding:18px 18px 22px}}
@media (max-width:640px){.pros{grid-template-columns:1fr}.pros>div+div{border-left:0;border-top:1px solid var(--ink)}.side{grid-template-columns:1fr}.foot-grid{grid-template-columns:1fr}.titlecard{padding:16px}.win.body .cnt{padding:14px 14px 18px}.win.body h2{font-size:1.35rem}.tl button{flex:1 1 auto;border-bottom:1px solid var(--ink)}.tl button.on{margin-bottom:0}.chk{display:flex;width:100%}.chk input{flex:1;width:auto;max-width:none;min-width:0}.dialog{flex-direction:column;gap:10px;align-items:stretch}.bars li{grid-template-columns:1fr 70px 26px}.status{padding:6px 12px}}
@media print{.menubar,.drawer,.alert,.toc,.foot{display:none}.win{box-shadow:none}}

/* ---------- download page */
.dlpage{max-width:720px;padding-top:14px}
.dlwin{margin-bottom:14px}
.dlwin .cnt{padding:26px 28px 22px}
.dlhead{display:flex;gap:18px;align-items:flex-start;margin-bottom:22px}
.dlhead>div{min-width:0}
.dlicon{flex:0 0 auto;width:64px;height:64px;border:2px solid var(--ink);background:var(--white);display:flex;flex-direction:column;justify-content:center;gap:6px;padding:0 10px;box-shadow:3px 3px 0 var(--ink)}
.dlicon span{display:block;height:6px;background:var(--ink)}
.dlicon span:nth-child(2){width:70%}
.dlicon span:nth-child(3){width:45%}
.dlhead h1{margin:0 0 6px;font-size:clamp(1.8rem,4vw,2.5rem)}
.dlhead .lede{font-size:1rem}
.dlbtns{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0 0 22px}
.dlbtns>*{min-width:0}
.btn.big{display:flex;flex-direction:column;align-items:flex-start;text-decoration:none;padding:12px 16px;font-size:1.15rem;line-height:1.15}
.btn.big small{display:block;font-family:var(--body);font-weight:400;font-size:.78rem;margin-top:4px;opacity:.85}
.btn.big:hover{background:var(--ink);color:var(--white)}
.dlkv{font-size:.9rem;margin-bottom:14px}
.dlkv li{grid-template-columns:110px 1fr}
.dlnote{text-align:left;padding:0 4px}
@media (max-width:640px){.dlbtns{grid-template-columns:1fr}.dlhead{flex-direction:column;gap:12px}.dlwin .cnt{padding:18px 16px}.dlkv li{grid-template-columns:90px 1fr}}