:root{ --bg:#EDF0EF; --surface:#FFFFFF; --sunk:#F4F7F6; --ink:#15201C; --muted:#56665F; --faint:#88968F; --line:#D3DBD8; --line-strong:#B5C1BC; --accent:#0E6E55; --accent-ink:#FFFFFF; --accent-soft:#DCEFE7; --warn:#9A4A14; --warn-soft:#F6E5D7; --bar:#9CCBB9; --t-laptop:#3B5FA3; --t-desktop:#6B4FA0; --t-workstation:#0E7A5C; --t-server:#A0561A; --t-mini:#3E7F8F; --t-aio:#8A5A7A; --t-monitor:#8A6A1F; --side-w:340px; --top-h:60px; --top-bg:#111A17; --top-ink:#E9F1EE; --top-muted:#9FB2AB; --top-line:#33443E; --top-field:#0B110F; --top-accent:#6FD6B2; --top-accent-ink:#0B110F; --font-d:"Barlow Condensed","Arial Narrow",Arial,sans-serif; --font-b:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif; --font-m:"IBM Plex Mono",ui-monospace,"Cascadia Mono",Consolas,monospace; color-scheme:light; } /* Theme is chosen in Settings (Dark default, Light, or Auto = follow the device); the inline script in index.html stamps data-theme on before first paint. */ :root[data-theme="dark"]{ color-scheme:dark; --bg:#0F1513; --surface:#151D1A; --sunk:#1A2320; --ink:#E2EBE7; --muted:#9AA9A3; --faint:#6E7D77; --line:#25312D; --line-strong:#34433E; --accent:#45C39B; --accent-ink:#08130F; --accent-soft:#16352B; --warn:#E8935A; --warn-soft:#382317; --bar:#2E6B56; --t-laptop:#86A6E6; --t-desktop:#B39BE6; --t-workstation:#45C39B; --t-server:#E6A04A; --t-mini:#72C0D0; --t-aio:#D59BC2; --t-monitor:#E5C07B; } *{box-sizing:border-box} html,body{height:100%} body{margin:0;background:var(--bg);background-image:var(--bg-image,none);background-attachment:fixed;color:var(--ink);font:14px/1.5 var(--font-b);-webkit-text-size-adjust:100%} a{color:var(--accent)} button{font:inherit;color:inherit} :focus-visible{outline:2px solid var(--accent);outline-offset:2px} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .num{font-family:var(--font-m);font-variant-numeric:tabular-nums} /* top bar */ /* the bar is always dark, in both themes — never tie it to --ink, which flips to near-white in dark mode */ .top{position:sticky;top:0;z-index:20;height:var(--top-h);display:flex;align-items:center;gap:16px;padding-inline:16px;background:var(--top-grad,var(--top-bg));color:var(--top-ink);border-bottom:1px solid var(--top-line)} .brand{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none;font:600 22px/1 var(--font-d);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap} .brand b{color:var(--top-accent);font-weight:700} .brand-mark{width:22px;height:22px;border:2px solid var(--top-accent);border-radius:3px;position:relative;flex:none} .brand-mark::before{content:"";position:absolute;inset:4px;background:var(--top-accent);border-radius:1px} .search{flex:1;max-width:560px} .search input{width:100%;height:36px;border-radius:4px;border:1px solid var(--top-line);background:var(--top-field);color:var(--top-field-ink,var(--top-ink));padding:0 12px;font:14px var(--font-b)} .search input::placeholder{color:var(--top-muted)} .types{display:flex;gap:4px} .types button{background:transparent;border:1px solid var(--top-line);color:var(--top-muted);border-radius:999px;padding:5px 11px;font-size:12.5px;cursor:pointer;white-space:nowrap} .types button[aria-pressed="true"]{background:var(--top-accent);border-color:var(--top-accent);color:var(--top-field);font-weight:600} .nav-toggle{display:none;background:transparent;border:1px solid var(--top-line);color:var(--top-ink);border-radius:4px;padding:6px 10px;cursor:pointer} /* layout */ .shell{display:grid;grid-template-columns:var(--side-w) 6px minmax(0,1fr);height:calc(100% - var(--top-h))} .side{border-right:1px solid var(--line);background:var(--surface);display:flex;flex-direction:column;min-height:0} .side-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 12px;padding:10px 14px;border-bottom:1px solid var(--line);font-size:12px;color:var(--muted)} .only{display:flex;gap:5px;align-items:center;cursor:pointer} .tree{overflow-y:auto;flex:1;padding:6px 0 40px;overscroll-behavior:contain} .main{overflow-y:auto;min-width:0} #view{max-width:1180px;margin:0 auto;padding-inline:28px;padding-block:26px 80px} /* tree */ .v-btn,.l-btn{display:flex;align-items:center;gap:8px;width:100%;border:0;background:none;text-align:left;cursor:pointer;padding:6px 14px} .v-btn{font:600 16px/1.1 var(--font-d);text-transform:uppercase;letter-spacing:.04em;padding-block:9px} .v-btn:hover,.l-btn:hover{background:var(--sunk)} .caret{width:10px;flex:none;color:var(--faint);transition:transform .15s} [aria-expanded="true"]>.caret{transform:rotate(90deg)} .cnt{margin-left:auto;font:500 10.5px var(--font-m);color:var(--faint)} .l-btn{font-size:12.5px;font-weight:500;padding-left:26px} .s-btn{display:flex;align-items:center;gap:8px;width:100%;border:0;background:none;text-align:left;cursor:pointer;font:600 10px/1.2 var(--font-m);text-transform:uppercase;letter-spacing:.07em;color:var(--faint);padding:8px 14px 8px 34px} .s-btn:hover{background:var(--sunk)} .s-btn .caret{width:9px} .series{font:500 10px/1 var(--font-m);text-transform:uppercase;letter-spacing:.07em;color:var(--faint);padding:10px 14px 4px 44px} .m-link{display:flex;align-items:baseline;gap:8px;padding:4px 14px 4px 44px;color:var(--ink);text-decoration:none;font-size:12px;border-left:3px solid transparent} .m-link:hover{background:var(--sunk)} .m-link[aria-current="page"]{background:var(--accent-soft);border-left-color:var(--accent);font-weight:600} .m-link .yr{margin-left:auto;font:10.5px var(--font-m);color:var(--faint);flex:none} .m-link .full{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none;align-self:center} .m-link .nofull{width:6px;flex:none} .hits-v{font:600 12.5px var(--font-d);text-transform:uppercase;letter-spacing:.05em;color:var(--muted);padding:12px 14px 2px} .hits-l{font-size:11px;color:var(--faint);padding:2px 14px 2px 26px} .empty{padding:16px;color:var(--muted);font-size:13px} /* shared type */ .eyebrow{font:500 11.5px/1.2 var(--font-m);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)} .crumbs{display:flex;flex-wrap:wrap;gap:6px;font-size:12.5px;color:var(--muted)} .crumbs a{color:var(--muted)} h1{font:700 clamp(32px,4.4vw,50px)/1 var(--font-d);text-transform:uppercase;letter-spacing:.01em;margin:8px 0 10px;text-wrap:balance} h2{font:600 22px/1.1 var(--font-d);text-transform:uppercase;letter-spacing:.03em;margin:0;text-wrap:balance} h3{font:600 16px/1.2 var(--font-d);text-transform:uppercase;letter-spacing:.04em;margin:0} .lede{font-size:15.5px;max-width:78ch;margin:0} section.block{margin-top:34px;display:grid;gap:14px;grid-template-columns:minmax(0,1fr)} .sec-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 16px} .sec-head p{margin:0;color:var(--muted);font-size:13px;max-width:80ch} .chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px} .chip{font:500 12px/1 var(--font-b);padding:5px 9px;border-radius:3px;background:var(--sunk);border:1px solid var(--line);color:var(--muted)} .chip.type{border:0;color:#fff} .chip.type.laptop{background:var(--t-laptop)} .chip.type.desktop{background:var(--t-desktop)} .chip.type.workstation{background:var(--t-workstation)} .chip.type.server{background:var(--t-server)} .chip.type.mini{background:var(--t-mini)} .chip.type.aio{background:var(--t-aio)} .chip.type.monitor{background:var(--t-monitor)} :root[data-theme="dark"] .chip.type{color:#0B110F} /* facts */ .facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden} .fact{background:var(--surface);padding:12px 14px;display:grid;gap:4px;align-content:start} .fact dt{font:500 10.5px/1.2 var(--font-m);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)} .fact dd{margin:0;font-size:14px;font-weight:500} /* platform + notes */ .platform{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13.5px;padding:12px 14px;background:var(--surface);border:1px solid var(--line);border-radius:6px} .platform b{font-weight:600} .notes{margin:0;padding-left:18px;font-size:13.5px;display:grid;gap:4px} .gotchas{margin:0;padding:14px 16px 14px 34px;background:var(--warn-soft);border-radius:6px;display:grid;gap:6px;font-size:13.5px} .gotchas li::marker{color:var(--warn)} /* picks */ .picks{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px} .pick{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:14px;display:grid;gap:7px;align-content:start} .pick:first-child{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)} .pick .role{font:500 10.5px/1.2 var(--font-m);letter-spacing:.07em;text-transform:uppercase;color:var(--accent)} .pick .cpu{font:700 22px/1.05 var(--font-d);text-transform:uppercase} .pick .nums{display:flex;flex-wrap:wrap;gap:4px 12px;font:12px var(--font-m);color:var(--muted)} .pick p{margin:0;font-size:13px;color:var(--muted)} .auto-note{font-size:12px;color:var(--faint)} /* table */ .tbl-tools{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;font-size:13px;color:var(--muted)} .tbl-tools input[type=search]{height:32px;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);border-radius:4px;padding:0 10px;min-width:220px} .tbl-wrap{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:6px} table{border-collapse:collapse;width:100%;font-size:13px} thead th{position:sticky;top:0;background:var(--sunk);font:600 10.5px/1.2 var(--font-b);text-transform:uppercase;letter-spacing:.05em;color:var(--muted);text-align:left;padding:9px 8px;border-bottom:1px solid var(--line-strong);white-space:nowrap;cursor:pointer;user-select:none} thead th.n{text-align:right} thead th[aria-sort="ascending"]::after{content:" ▲";color:var(--accent)} thead th[aria-sort="descending"]::after{content:" ▼";color:var(--accent)} tbody td{padding:6px 8px;border-bottom:1px solid var(--line);white-space:nowrap} tbody tr:hover td{background:var(--sunk)} td.n{text-align:right;font-family:var(--font-m);font-variant-numeric:tabular-nums} td.cpu-name{font-weight:500} td.cpu-name .pm-name{display:block;font-size:11px;color:var(--faint);font-weight:400} td.note{white-space:normal;min-width:200px;font-size:12px;color:var(--muted)} .dim{color:var(--faint)} .val{display:flex;align-items:center;justify-content:flex-end;gap:8px} .val i{display:block;height:7px;background:var(--bar);border-radius:2px} tr.is-pick td:first-child{box-shadow:inset 3px 0 0 var(--accent)} /* specs */ .specs{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:12px} .spec{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:14px 16px} .spec dl{display:grid;grid-template-columns:minmax(110px,34%) 1fr;gap:6px 14px;margin:10px 0 0;font-size:13px} .spec dt{color:var(--muted)} .spec dd{margin:0} .sources{margin:0;padding-left:18px;font-size:13px;display:grid;gap:4px} .sources a{word-break:break-word} .stub{background:var(--surface);border:1px dashed var(--line-strong);border-radius:6px;padding:18px;display:grid;gap:8px;max-width:760px} /* home */ .hero{display:grid;gap:12px;border-bottom:2px solid var(--ink);padding-bottom:22px} .stats{display:flex;flex-wrap:wrap;gap:10px 28px;font:500 13px var(--font-m);color:var(--muted)} .stats b{font:700 26px/1 var(--font-d);color:var(--ink);display:block} .vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px} .vcard{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:14px 16px;display:grid;gap:6px;text-decoration:none;color:var(--ink)} .vcard:hover{border-color:var(--accent)} .vcard .vn{font:700 24px/1 var(--font-d);text-transform:uppercase} .vcard .vl{font-size:12.5px;color:var(--muted)} .dlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:6px 18px;margin:0;padding:0;list-style:none} .dlist a{display:flex;gap:8px;align-items:baseline;text-decoration:none;color:var(--ink);padding:6px 0;border-bottom:1px solid var(--line)} .dlist a:hover{color:var(--accent)} .dlist .v{font:500 11px var(--font-m);color:var(--faint);text-transform:uppercase;min-width:74px} .lines{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px} .line-card{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:14px 16px;display:grid;gap:4px} .line-card button{justify-self:start;border:0;background:none;padding:0;color:var(--accent);cursor:pointer;font-size:13px} .foot{margin-top:56px;padding-top:14px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)} @media (max-width: 1100px){ .types{display:none} } @media (max-width: 900px){ :root{--top-h:56px} .nav-toggle{display:block} .brand span:last-child{display:none} .shell{grid-template-columns:minmax(0,1fr)} .gutter{display:none} .side{position:fixed;top:var(--top-h);bottom:0;left:0;width:min(88vw,360px);z-index:30;transform:translateX(-100%);transition:transform .2s;box-shadow:4px 0 24px rgba(0,0,0,.2)} body.nav-open .side{transform:none} .scrim{position:fixed;inset:var(--top-h) 0 0 0;background:rgba(0,0,0,.35);z-index:25} #view{padding-inline:16px} .specs{grid-template-columns:minmax(0,1fr)} .spec dl{grid-template-columns:minmax(0,1fr)} .spec dt{margin-top:4px} } @media (prefers-reduced-motion: reduce){ *{transition:none!important} } /* photos + 3-D */ .look-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line)} .look-tabs button{border:0;background:none;padding:8px 14px;font:600 13px var(--font-b);color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px} .look-tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent)} .look-pane{display:grid;gap:10px} .photo-main{margin:0;display:grid;gap:6px} .photo-zoom{border:1px solid var(--line);border-radius:6px;background:#fff;padding:12px;cursor:zoom-in;display:flex;justify-content:center;align-items:center;height:min(52vh,440px)} .photo-zoom img{max-width:100%;max-height:100%;object-fit:contain} .photo-main figcaption{font-size:12px;color:var(--muted)} .thumbs{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px} .thumb{flex:none;width:96px;border:1px solid var(--line);border-radius:5px;background:#fff;padding:4px;cursor:pointer;display:grid;gap:3px;justify-items:center} .thumb img{width:86px;height:62px;object-fit:contain} .thumb span{font:500 10.5px var(--font-m);color:#5A6A65;text-transform:uppercase;letter-spacing:.04em} .thumb[aria-pressed="true"]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)} .v3d-bar{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;font-size:12.5px;color:var(--muted)} .v3d-bar button{border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);border-radius:4px;padding:4px 10px;cursor:pointer;font-size:12.5px} .v3d-bar button:hover{border-color:var(--accent)} .v3d-bar label{display:flex;gap:5px;align-items:center;margin-left:4px} .v3d-hint{margin-left:auto;color:var(--faint);font-size:12px} .v3d{position:relative;height:min(60vh,480px);border:1px solid var(--line);border-radius:6px;overflow:hidden;background:radial-gradient(ellipse at 50% 35%,var(--surface),var(--sunk))} .v3d canvas{display:block;touch-action:none} .v3d-labels{position:absolute;inset:0;pointer-events:none} .v3d-tag{pointer-events:auto;font:500 11px/1.2 var(--font-b);background:rgba(17,26,23,.86);color:#E9F1EE;border:1px solid var(--top-accent);border-radius:3px;padding:3px 6px;white-space:nowrap;cursor:pointer} .v3d-tag:hover{background:var(--accent);color:var(--accent-ink)} .spec.flash{animation:flash 1.6s ease-out} @keyframes flash{0%{box-shadow:0 0 0 3px var(--accent)}100%{box-shadow:0 0 0 0 transparent}} .lightbox{position:fixed;inset:0;z-index:50;background:rgba(8,12,11,.92);display:grid;grid-template-rows:1fr auto} .lb-stage{overflow:hidden;display:flex;align-items:center;justify-content:center;padding:24px} .lb-stage img{max-width:100%;max-height:100%;background:#fff;border-radius:4px;transform-origin:center;cursor:grab;touch-action:none;user-select:none} .lb-close{position:absolute;top:10px;right:14px;z-index:2;background:none;border:0;color:#fff;font-size:34px;line-height:1;cursor:pointer} .lb-bar{display:flex;gap:14px;align-items:center;justify-content:center;padding:10px 16px 16px;color:#cfd8d4;font-size:13px} .lb-bar a{color:#6FD6B2} .lb-bar button{background:none;border:1px solid #3a4944;color:#fff;border-radius:4px;width:34px;height:30px;font-size:18px;cursor:pointer} @media (max-width:900px){ .v3d-hint{display:none} } /* built-for + form-factor filters: in the top bar on wide screens, in the drawer on narrow ones */ .filters{display:flex;gap:10px;align-items:center} .filters label{display:flex;flex-direction:column;gap:2px;font:500 10px/1 var(--font-m);text-transform:uppercase;letter-spacing:.06em} .filters select{height:32px;border-radius:4px;padding:0 8px;font:13px var(--font-b);max-width:260px} .top-filters{margin-left:auto} .top-filters label{color:var(--top-muted)} .top-filters select{background:var(--top-field);color:var(--top-field-ink,var(--top-ink));border:1px solid var(--top-line)} .top-filters select:focus-visible{outline-color:var(--top-accent)} .side-filters{display:none;padding:10px 14px;border-bottom:1px solid var(--line);flex-wrap:wrap} .side-filters label{color:var(--muted);flex:1;min-width:140px} .side-filters select{background:var(--surface);color:var(--ink);border:1px solid var(--line-strong);width:100%;max-width:none} .clear{border:0;background:none;color:var(--accent);cursor:pointer;font-size:12px;padding:0} .built-for{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:10px} .built-for .eyebrow{margin-right:4px} .seg-chip{font:500 12px/1 var(--font-b);padding:5px 10px;border-radius:999px;border:1px solid var(--accent);background:var(--accent-soft);color:var(--ink);cursor:pointer} .seg-chip:hover{background:var(--accent);color:var(--accent-ink)} @media (max-width: 1100px){ .top-filters{display:none} .side-filters{display:flex} } .look-pane[hidden]{display:none} /* top-bar right: weather, clock, settings (same layout as the other Schema Networks tools) */ .search{max-width:440px} .topbar-right{display:flex;align-items:center;gap:14px;margin-left:16px;color:var(--top-muted);white-space:nowrap} .top-filters + .topbar-right{margin-left:16px} .weather{display:inline-flex;align-items:center;gap:6px;font-size:12.5px} .wx-icon{flex:none} .wx-now{font-variant-numeric:tabular-nums;color:var(--top-ink)} .wx-hilo{color:var(--top-muted);font-variant-numeric:tabular-nums} .clock{font:12.5px var(--font-m);font-variant-numeric:tabular-nums} .gear{display:grid;place-items:center;width:34px;height:34px;border-radius:4px;border:1px solid var(--top-line);background:transparent;color:var(--top-muted);cursor:pointer} .gear:hover{color:var(--top-accent);border-color:var(--top-accent)} @media (max-width:1560px) and (min-width:1101px){ .clock{display:none} } @media (max-width:760px){ .weather{display:none} } @media (max-width:620px){ .clock{display:none} } @media (max-width:1100px){ .topbar-right{margin-left:auto} } /* settings dialog */ .modal-scrim{position:fixed;inset:0;z-index:60;background:rgba(5,9,8,.55);display:grid;place-items:center;padding:16px} .modal{width:min(420px,100%);background:var(--surface);color:var(--ink);border:1px solid var(--line-strong);border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,.4)} .modal-head{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line)} .modal-head h2{font-size:20px} .modal-x{border:0;background:none;color:var(--muted);font-size:16px;cursor:pointer} .modal-body{padding:16px 18px;display:grid;gap:18px} .modal-label{font:500 11px var(--font-m);text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:8px} .modal-hint{margin:6px 0 0;font-size:12px;color:var(--faint)} .modal-foot{display:flex;justify-content:flex-end;padding:12px 18px;border-top:1px solid var(--line)} .modal-done{border:0;border-radius:4px;background:var(--accent);color:var(--accent-ink);font-weight:600;padding:7px 18px;cursor:pointer} .seg{display:inline-flex;border:1px solid var(--line-strong);border-radius:6px;overflow:hidden} .seg-btn{border:0;background:transparent;color:var(--muted);padding:7px 16px;cursor:pointer;font-size:13px} .seg-btn + .seg-btn{border-left:1px solid var(--line-strong)} .seg-btn:hover{color:var(--ink)} .seg-btn.on{background:var(--accent);color:var(--accent-ink);font-weight:600} /* tagline after the search box */ .tagline{font:italic 600 19px/1 var(--font-d);letter-spacing:.02em;color:var(--top-accent);white-space:nowrap} @media (max-width:700px){ .tagline{display:none} } /* maker tiers */ .tier-head{font:600 10px/1 var(--font-m);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);padding:14px 14px 6px;border-top:1px solid var(--line);margin-top:4px} .tree > .tier-head:first-child{border-top:0;margin-top:0} .tier-title{margin-top:8px;color:var(--accent)} /* draggable split between the model list and the page */ .gutter{cursor:col-resize;background:var(--line);position:relative;touch-action:none;outline-offset:-2px} .gutter::after{content:"";position:absolute;top:50%;left:1px;width:4px;height:36px;margin-top:-18px;border-radius:2px; background:repeating-linear-gradient(to bottom,var(--faint) 0 2px,transparent 2px 5px);opacity:.7} .gutter:hover,.gutter:focus-visible,body.resizing .gutter{background:var(--accent)} .gutter:hover::after,body.resizing .gutter::after{opacity:0} body.resizing{cursor:col-resize;user-select:none} body.resizing iframe,body.resizing canvas{pointer-events:none} .top-filters select{max-width:200px} /* colour theme picker (Settings) */ .palettes{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px} .pal{display:flex;align-items:center;gap:8px;padding:6px 8px;border:1px solid var(--line-strong);border-radius:6px;background:var(--surface);color:var(--ink);cursor:pointer;font-size:12.5px;text-align:left} .pal:hover{border-color:var(--accent)} .pal.on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);font-weight:600} .pal-sw{flex:none;width:30px;height:22px;border-radius:4px;display:flex;align-items:flex-end;gap:2px;padding:3px;border:1px solid rgba(128,128,128,.35)} .pal-sw i{display:block;flex:1;height:6px;border-radius:2px} .modal{max-height:calc(100vh - 32px);overflow-y:auto} .pal-note{margin:8px 0 0;font-size:12px;color:var(--faint)} .pal{flex-direction:row} .pal-sw{width:34px;height:24px} .palettes .pal-note{grid-column:1/-1} .search{min-width:180px} /* sections (Computers / Networking / Printers & Scanners / TVs & Conference Rooms) and favourites */ .sec-head{display:flex;align-items:center;gap:8px;width:100%;border:0;border-top:1px solid var(--line);background:var(--sunk);cursor:pointer;text-align:left; font:600 10.5px/1 var(--font-m);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);padding:11px 14px} .tree > .sec-head:first-child{border-top:0} .sec-head:hover{filter:brightness(1.08)} .fav-head{color:#d9a400} .favs{padding:2px 0 6px} .fav-row{display:flex;align-items:center} .fav-row .m-link{flex:1;min-width:0;padding-left:26px} .fav-row .m-link .dim{color:var(--faint);font-weight:500} .fav-x{border:0;background:none;color:var(--faint);cursor:pointer;font-size:15px;line-height:1;padding:2px 12px 2px 4px} .fav-x:hover{color:var(--ink)} .with-fav{display:flex;align-items:flex-start;gap:12px} .with-fav{margin:8px 0 10px} .with-fav h1{margin:0} .fav-btn{flex:none;border:1px solid var(--line);background:var(--card, transparent);color:var(--faint);border-radius:999px;cursor:pointer; font-size:20px;line-height:1;width:38px;height:38px;display:inline-grid;place-items:center;margin-top:2px} .fav-btn:hover{color:#d9a400;border-color:#d9a400} .fav-btn[aria-pressed="true"]{color:#d9a400;border-color:#d9a400;background:rgba(217,164,0,.12)} .line-sec{grid-column:1/-1;margin:14px 0 2px;color:var(--accent)} .cmp-link{font-style:italic;color:var(--accent)!important;padding-left:26px} .cmp-tools{flex-wrap:wrap;gap:10px 16px} /* HOT 100 (New) */ .hot-head{color:#FF5A1F} .hot-link{padding-left:14px} .hot-link .hot-n{flex:none;width:24px;text-align:right;font:600 10.5px var(--font-m);color:var(--faint)} .hot-link .dim{color:var(--faint);font-weight:500}