:root {
  --bg:#f5f5f7; --surface:#ffffff; --secondary-surface:#f0f0f4;
  --text:#1d1d1f; --muted:#585861; --faint:#63636e;
  --primary:#4545cf; --accent:#5856d6; --soft:#ededfb; --on-primary:#ffffff;
  --sheet:rgb(255 255 255 / 97%); --header-surface:rgb(255 255 255 / 82%);
  --line:rgb(60 60 67 / 10%); --input:#f1f1f5; --control-line:rgb(88 86 214 / 22%);
  --shadow:0 2px 6px rgb(20 20 40 / 3%),0 14px 26px -20px rgb(20 20 40 / 18%);
  --shadow-raised:0 5px 10px rgb(20 20 40 / 4%),0 18px 30px -20px rgb(20 20 40 / 22%);
  --feature-start:#ffffff; --feature-end:#eeedf9;
  --font:system-ui,sans-serif; --ease:cubic-bezier(.22,1,.36,1);
  --type-page:clamp(1.75rem,3vw,2rem); --type-section:1.25rem; --type-card:1.125rem;
  --type-body:1rem; --type-label:.875rem; --type-note:.75rem;
  --radius-card:12px; --radius-inset:8px;
  --rating-bg:#fff6e6; --rating-star:#9a6200;
  --tag-blue-bg:#eaf2ff; --tag-blue-text:#285ea8;
  --tag-violet-bg:#f0edff; --tag-violet-text:#6650a1;
  --tag-green-bg:#e6f6ef; --tag-green-text:#277553;
  --tag-amber-bg:#fff2da; --tag-amber-text:#8b5d15;
  --tag-rose-bg:#ffecf1; --tag-rose-text:#a74465;
  color-scheme:light;
}
.provider-logo img{width:100%;height:100%;object-fit:cover;display:block}
.provider-logo:has(img){padding:0;overflow:hidden;background:transparent}
.sitemap-sections{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.sitemap-sections .content-panel{border-radius:12px}
.sitemap-links{list-style:none;padding:0;margin:20px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 20px}
.sitemap-links a{display:flex;align-items:center;min-height:40px;padding:6px 0;color:var(--muted);font-size:.875rem}
.sitemap-links a:hover{color:var(--primary);text-decoration:underline;text-underline-offset:4px}
@media(max-width:680px){.sitemap-sections{grid-template-columns:1fr;gap:16px}.sitemap-links{gap:5px 18px}}
/* Software guides: device filters and authentic software identity. */
.platform-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:30px}
.platform-tab{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:9px 17px;background:var(--surface);color:var(--muted);border-radius:9px;box-shadow:inset 0 0 0 1px var(--line);font-size:.875rem;transition:background 180ms,color 180ms,box-shadow 180ms}
.platform-tab .icon{width:19px;height:19px}
.platform-tab:hover{background:var(--soft);color:var(--primary)}
.platform-tab[aria-pressed="true"]{background:var(--soft);color:var(--primary);font-weight:700;box-shadow:inset 0 0 0 1px var(--control-line)}
.software-library-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 16px}
.software-library-heading h2{font-size:1.0625rem}
.software-library-heading [role="status"]{font-size:.8125rem;color:var(--faint)}
.software-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.software-card{display:flex;flex-direction:column;gap:16px;min-width:0;min-height:298px;padding:24px;border-radius:12px;transition:transform 220ms var(--ease),box-shadow 220ms}
.software-card-heading{display:flex;align-items:center;gap:14px;min-height:62px}
.software-card-heading>div{min-width:0}
.software-card h3{font-size:1.0625rem;line-height:1.35}
.software-card h3 a:hover{color:var(--primary)}
.software-logo{display:inline-flex;align-items:center;justify-content:center;width:58px;height:58px;flex:0 0 58px;overflow:hidden;border-radius:12px;background:var(--surface);box-shadow:0 4px 9px -6px rgb(35 41 72 / 30%)}
.software-logo img{width:100%;height:100%;object-fit:contain;display:block}
.software-logo-placeholder{background:var(--soft);color:var(--primary);font-size:1.375rem;font-weight:700}
.software-kind{display:block;margin-top:5px;font-size:.75rem;color:var(--faint)}
.software-summary{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:46px;font-size:.875rem;line-height:1.65;color:var(--muted)}
.software-platforms{display:flex;flex-wrap:wrap;gap:5px;align-content:flex-start}
.software-card .software-platforms{min-height:44px}
.software-platforms span{padding:3px 8px;border-radius:5px;background:var(--secondary-surface);color:var(--muted);font-size:.6875rem;line-height:1.5;white-space:nowrap}
.software-card-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:10px}
.software-card-footer>span{font-size:.75rem;color:var(--faint);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.5}
.software-card-footer .button{flex-shrink:0}
.software-empty{padding:36px;text-align:center;border-radius:12px}.software-empty p{margin:10px 0 20px;color:var(--muted)}
.tutorial-preflight{display:grid;grid-template-columns:1fr 1fr;gap:22px 40px;align-items:start;padding:28px;margin-top:32px;border-radius:12px}
.tutorial-preflight h2{font-size:1.125rem;margin:5px 0 8px}.tutorial-preflight p,.tutorial-preflight li{font-size:.875rem;color:var(--muted)}
.tutorial-preflight ul{padding-left:20px;margin:0}.tutorial-preflight .text-link{font-size:.8125rem}
.software-article-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:24px 0 32px}
.software-article-title{display:flex;align-items:center;gap:18px;min-width:0}.software-article-title .software-logo{width:68px;height:68px;flex-basis:68px;border-radius:14px}
.software-article-title h1{font-size:clamp(1.3rem,2.3vw,1.75rem);margin-bottom:10px}.software-article-heading .button{flex-shrink:0}
.software-requirements{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:24px;border-radius:12px}.software-requirements span{font-size:.75rem;color:var(--primary);font-weight:700}.software-requirements p{font-size:.875rem;margin-top:8px;color:var(--muted)}
.tutorial-flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;padding:0 4px}.tutorial-flow span{display:flex;align-items:center;gap:8px;font-size:.8125rem;color:var(--muted)}.tutorial-flow b{display:grid;place-items:center;width:24px;height:24px;flex-shrink:0;border-radius:7px;background:var(--soft);color:var(--primary);font-size:.75rem}
.tutorial-step .instruction-list{padding-left:24px;color:var(--muted)}.tutorial-step .instruction-list li+li{margin-top:7px}
.tutorial-figure{margin:24px 0 0;padding:20px;background:var(--secondary-surface);border-radius:10px;text-align:center}
.tutorial-figure img{display:block;width:auto;height:auto;max-width:100%;max-height:540px;margin:0 auto;border-radius:7px;object-fit:contain}
.tutorial-figure figcaption{display:flex;flex-wrap:wrap;justify-content:center;gap:5px 12px;margin-top:14px;font-size:.75rem;color:var(--muted);line-height:1.65}
.figure-source{color:var(--primary);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}.tutorial-step-links{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:22px}.tutorial-step-links .source-link{margin:0}
@media(hover:hover)and(pointer:fine){.software-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-raised)}}
@media(max-width:1000px){.software-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){.platform-tabs{gap:7px;margin-bottom:24px}.platform-tab{padding:9px 12px;font-size:.8125rem}.software-grid{grid-template-columns:1fr;gap:14px}.software-card{padding:22px;min-height:282px}.software-card .software-platforms{min-height:24px}.tutorial-preflight{grid-template-columns:1fr;padding:22px;gap:18px}.software-article-heading{align-items:flex-start;flex-direction:column;gap:18px}.software-article-title{gap:14px}.software-article-title .software-logo{width:58px;height:58px;flex-basis:58px}.software-requirements{grid-template-columns:1fr;padding:22px;gap:18px}.tutorial-flow{grid-template-columns:1fr 1fr;gap:12px}.tutorial-figure{padding:12px}.tutorial-figure img{max-height:480px}}
html[data-theme="dark"] {
  --bg:#101014; --surface:#1e1e25; --secondary-surface:#292931;
  --text:#f5f5f7; --muted:#bdbdc7; --faint:#a1a1af;
  --primary:#b6b4ff; --accent:#aaa6ff; --soft:#303048; --on-primary:#ffffff;
  --sheet:rgb(30 30 37 / 98%); --header-surface:rgb(30 30 37 / 84%);
  --line:rgb(235 235 245 / 12%); --input:#292931; --control-line:rgb(182 180 255 / 25%);
  --shadow:0 12px 24px -18px rgb(0 0 0 / 50%); --shadow-raised:0 16px 26px -18px rgb(0 0 0 / 65%);
  --feature-start:#23232e; --feature-end:#303047;
  --rating-bg:#352b1c; --rating-star:#f5c16b;
  --tag-blue-bg:#1e304d; --tag-blue-text:#9fc5ff;
  --tag-violet-bg:#33294d; --tag-violet-text:#cab7ff;
  --tag-green-bg:#1d382d; --tag-green-text:#96dcba;
  --tag-amber-bg:#3e301d; --tag-amber-text:#f5cc87;
  --tag-rose-bg:#432735; --tag-rose-text:#f4b2cb;
  color-scheme:dark;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:112px; scrollbar-gutter:stable; }
body { margin:0; background:var(--bg); color:var(--text); font:400 var(--type-body)/1.65 var(--font); -webkit-font-smoothing:antialiased; }
h1,h2,h3,p { margin:0; }
h1,h2,h3,strong,b { font-weight:700; }
h1 { font-size:var(--type-page); letter-spacing:-.025em; line-height:1.25; }
h2 { font-size:var(--type-section); line-height:1.45; }
h3 { font-size:var(--type-card); line-height:1.45; }
h1,h2,h3 { overflow-wrap:anywhere; }
a { color:inherit; text-decoration:none; }
button,input,select { font:inherit; color:inherit; }
button { cursor:pointer; }
button,select { border:0; }
button,a,summary { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
button:disabled { cursor:not-allowed; opacity:.4; }
:is(button,a,input,select,summary):focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
[hidden] { display:none !important; }
.sr-only,.icon-defs { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.skip-link { position:fixed; left:20px; top:-80px; z-index:100; padding:12px 18px; border-radius:14px; background:var(--surface); box-shadow:var(--shadow); }
.skip-link:focus { top:12px; }
.icon { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.ambient { display:none; }
.glass { background:var(--surface); box-shadow:var(--shadow); }

/* Glass belongs to the navigation layer; reading surfaces stay quiet. */
.header { position:sticky; top:16px; z-index:30; max-width:1160px; margin:16px auto 0; border-radius:24px; background:var(--header-surface); backdrop-filter:blur(24px) saturate(140%); -webkit-backdrop-filter:blur(24px) saturate(140%); box-shadow:0 8px 30px -18px rgb(30 30 50 / 20%); transition:background 200ms,box-shadow 200ms; }
.header.is-scrolled { background:var(--sheet); box-shadow:var(--shadow); }
.header-inner { padding:10px 20px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { display:flex; align-items:center; gap:10px; font-size:1.0625rem; font-weight:700; line-height:1.3; white-space:nowrap; }
.brand-mark { width:40px; height:40px; display:grid; place-items:center; flex-shrink:0; background:transparent; filter:drop-shadow(0 3px 3px rgb(146 91 43 / 13%)); }
.brand-mark img { width:100%; height:100%; display:block; }
.nav { display:flex; align-items:center; gap:2px; padding:4px; background:rgb(118 118 128 / 7%); border-radius:15px; }
.nav a { display:flex; align-items:center; min-height:40px; padding:8px 14px; border-radius:11px; font-size:.875rem; color:var(--muted); white-space:nowrap; transition:background 180ms,color 180ms,box-shadow 180ms; }
.nav a:hover { color:var(--text); background:var(--secondary-surface); }
.nav a.active { background:var(--surface); color:var(--text); font-weight:700; box-shadow:0 2px 7px rgb(30 30 50 / 8%); }
.header-actions { display:flex; align-items:center; gap:8px; }
.icon-button { width:36px; height:36px; position:relative; display:inline-grid; place-items:center; border-radius:8px; background:transparent; color:var(--muted); transition:background 180ms,transform 180ms; }
.icon-button:hover { color:var(--primary); background:var(--soft); }
.menu-toggle { display:none; }
.mobile-tabs { display:none; }
.page,.footer { max-width:1160px; margin:auto; padding-inline:24px; }
.page { min-height:calc(100vh - 300px); padding-bottom:56px; }
.page-heading { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:40px 0 28px; }
.page-heading p { color:var(--muted); font-size:1rem; margin-top:10px; max-width:44em; line-height:1.65; }
.section-heading { display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:18px; }
.section-caption { color:var(--faint); font-size:.875rem; white-space:nowrap; }
.section-kicker { display:block; font-size:.75rem; font-weight:700; color:var(--primary); margin-bottom:8px; }
.muted { color:var(--muted); }
.text-link,.text-button { color:var(--primary); font-size:.875rem; background:transparent; padding:0; min-height:44px; display:inline-flex; align-items:center; border-radius:6px; }
.text-link:hover,.text-button:hover { text-decoration:underline; text-underline-offset:5px; }
.block-link { display:flex; margin-top:10px; }
.button { position:relative; display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:0 14px; min-height:36px; border-radius:8px; font-size:.8125rem; font-weight:700; white-space:nowrap; transition:transform 180ms var(--ease),background 180ms,box-shadow 180ms; }
.button::before,.icon-button::before { content:""; position:absolute; left:0; right:0; top:50%; height:max(100%,44px); transform:translateY(-50%); border-radius:inherit; }
.icon-button::before { left:50%; right:auto; width:44px; transform:translate(-50%,-50%); }
.button .icon { width:20px; height:20px; }
.button-primary { color:var(--on-primary); background:#5856d6; box-shadow:0 4px 12px rgb(88 86 214 / 16%); }
.button-primary:hover { background:#4846c2; box-shadow:0 6px 15px rgb(88 86 214 / 20%); }
.button-outline,.button-tonal { color:var(--primary); background:var(--soft); border:0; }
.button-outline:hover,.button-tonal:hover { background:var(--secondary-surface); }
.button-small { min-height:34px; padding-inline:12px; font-size:.8125rem; }
.button-group { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
:is(.button,.icon-button,.nav a):active { transform:scale(.97); }

/* App-like catalog and software library. */
.directory-content { min-width:0; }
.directory-tools { display:flex; align-items:center; gap:20px; padding:12px; border-radius:var(--radius-card); }
.search-box { display:flex; align-items:center; gap:10px; min-width:0; flex:1; padding:0 14px; border-radius:12px; background:var(--input); }
.search-box .icon { width:19px; height:19px; color:var(--faint); }
.search-box input { width:100%; min-width:0; border:0; outline:0; background:transparent; min-height:44px; font-size:1rem; }
.search-box input::placeholder { color:var(--faint); opacity:1; }
.search-box:focus-within { box-shadow:0 0 0 3px var(--accent); }
.results-controls { display:flex; align-items:center; gap:16px; flex-shrink:0; }
.results-controls select { max-width:120px; min-height:44px; background:transparent; color:var(--muted); font-size:.875rem; }
.view-switch { display:flex; gap:8px; padding:3px; border-radius:13px; background:var(--input); }
.view-switch .icon-button { width:36px; height:36px; border-radius:8px; }
.view-switch .icon { width:19px; height:19px; }
.view-switch .active { background:var(--surface); color:var(--primary); box-shadow:0 2px 6px rgb(30 30 50 / 8%); }
.directory-tools { margin-bottom:24px; }
.provider-grid,.tutorial-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.directory-content>.provider-grid:not(.list-view) { grid-template-columns:repeat(4,minmax(0,1fr)); }
.provider-card,.tutorial-card { padding:24px; border-radius:var(--radius-card); background:var(--surface); box-shadow:var(--shadow); min-width:0; transition:transform 220ms var(--ease),box-shadow 220ms; }
.provider-card {
  display:grid; grid-template-rows:52px 38px 26px 72px 22px 42px; gap:7px;
  padding:14px 16px; color:var(--text); position:relative; overflow:hidden; isolation:isolate; container-type:inline-size;
  border:1px solid var(--line);
  background:var(--surface);
  box-shadow:var(--shadow);
  transition:transform 220ms var(--ease),box-shadow 220ms,border-color 220ms;
}
.card-top { display:grid; grid-template-columns:52px minmax(0,1fr) auto; align-items:center; gap:8px; min-width:0; }
.card-top>.provider-logo { grid-column:1; grid-row:1; }
.provider-logo,.scene-icon { width:48px; height:48px; display:inline-grid; place-items:center; flex-shrink:0; border-radius:15px; color:#fff; background:linear-gradient(145deg,#7973f5,#504acc); box-shadow:inset 0 1px 1px #ffffff45,0 5px 10px -7px #5856d670; }
.provider-logo .icon,.scene-icon .icon { width:24px; height:24px; }
.provider-logo[data-color="rose"],.provider-logo[data-color="pink"] { background:linear-gradient(145deg,#ed87a8,#bf5078); }
.provider-logo[data-color="blue"] { background:linear-gradient(145deg,#5aa7ff,#2571ee); }
.provider-logo[data-color="mint"] { background:linear-gradient(145deg,#51c78c,#218a61); }
.provider-logo[data-color="indigo"] { background:linear-gradient(145deg,#6c93e7,#496cc0); }
.provider-logo[data-color="peach"] { background:linear-gradient(145deg,#ffb951,#d58514); }
.card-name { min-width:0; grid-column:2; grid-row:1; align-self:center; }
.card-name h2 { font-size:1rem; line-height:1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card-name h2 a { color:inherit; }
.card-name a:hover { color:var(--primary); }
.card-badge { grid-column:3; grid-row:1; align-self:start; justify-self:end; max-width:72px; padding:3px 6px; border-radius:6px; font-size:.625rem; color:var(--tag-blue-text); background:var(--tag-blue-bg); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card-rating { display:flex; align-items:center; gap:7px; min-width:0; white-space:nowrap; line-height:1.25; font-variant-numeric:tabular-nums; }
.rating-stars { position:relative; display:inline-block; color:var(--line); font-size:.875rem; letter-spacing:2px; line-height:1; }
.rating-stars-fill { position:absolute; inset:0 auto 0 0; overflow:hidden; color:var(--rating-star); }
.card-rating strong { font-size:1rem; color:var(--text); }
.card-rating .rating-scale,.rating-caption { font-size:.6875rem; color:var(--faint); }
.rating-caption { margin-left:auto; }
.provider-card .provider-logo { width:52px; height:52px; border-radius:10px; }
.card-description { color:var(--muted); margin:0; font-size:.8125rem; line-height:1.45; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:16px; }
.tags span { font-size:.75rem; padding:4px 8px; border-radius:8px; background:var(--secondary-surface); color:var(--muted); }
.tags span[data-tone="blue"] { background:var(--tag-blue-bg); color:var(--tag-blue-text); }
.tags span[data-tone="violet"] { background:var(--tag-violet-bg); color:var(--tag-violet-text); }
.tags span[data-tone="green"] { background:var(--tag-green-bg); color:var(--tag-green-text); }
.tags span[data-tone="amber"] { background:var(--tag-amber-bg); color:var(--tag-amber-text); }
.tags span[data-tone="rose"] { background:var(--tag-rose-bg); color:var(--tag-rose-text); }
.provider-card .card-labels { margin:0; flex-wrap:nowrap; align-content:flex-start; align-items:flex-start; overflow-x:auto; overflow-y:hidden; gap:4px; scrollbar-width:none; }
.provider-card .card-labels::-webkit-scrollbar { display:none; }
.provider-card .card-labels:focus-visible { outline:2px solid var(--primary); outline-offset:2px; border-radius:5px; }
.card-labels span { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.provider-card .card-labels span { flex-shrink:0; padding:2px 7px; font-size:.6875rem; border-radius:5px; line-height:18px; }
.card-services { min-width:0; display:flex; flex-direction:column; gap:6px; }
.service-caption { width:max-content; max-width:100%; font-size:.6875rem; line-height:14px; font-weight:700; color:var(--primary); }
@supports ((background-clip:text) or (-webkit-background-clip:text)) {
  .service-caption { background:linear-gradient(100deg,#168276 0%,#5260cf 48%,#be467b 100%); background-clip:text; -webkit-background-clip:text; color:transparent; }
  [data-theme="dark"] .service-caption { background-image:linear-gradient(100deg,#63dbc2 0%,#aaa6ff 48%,#f49fc9 100%); }
}
@media (forced-colors:active) { .service-caption { background:none; color:CanvasText; } }
.service-icons { display:flex; flex-wrap:wrap; align-content:start; gap:6px; width:100%; max-width:282px; padding:0; margin:0; list-style:none; }
.service-icons li { min-width:0; display:flex; justify-content:flex-start; }
.service-logo,.admin-service-logo { --service-size:24px; width:var(--service-size); height:var(--service-size); flex:0 0 var(--service-size); display:grid; place-items:center; position:relative; border-radius:6px; background:transparent; }
.card-services .service-icons { gap:4px; }
.card-services .service-logo { max-width:24px; }
.service-artwork { width:100%; height:100%; display:grid; place-items:center; overflow:hidden; border-radius:inherit; }
:is(.service-logo,.admin-service-logo) img { width:100%; height:100%; object-fit:contain; display:block; transform:scale(var(--service-scale,1)); }
/* Match the visible mark as well as the frame, without stretching official artwork. */
:is(.service-logo,.admin-service-logo)[data-service="prime-video"] { --service-scale:1.4; }
:is(.service-logo,.admin-service-logo)[data-service="max"] { --service-scale:1.25; }
:is(.service-logo,.admin-service-logo)[data-service="emby"] { --service-scale:1.1; }
:is(.service-logo,.admin-service-logo)[data-service="youtube"] { --service-scale:1.1; }
.service-tooltip { position:absolute; bottom:calc(100% + 7px); left:50%; transform:translateX(-50%); padding:5px 8px; border-radius:5px; background:var(--text); color:var(--bg); white-space:nowrap; font-size:.625rem; line-height:1.3; opacity:0; pointer-events:none; z-index:3; }
.service-logo:hover .service-tooltip,.service-logo:focus-visible .service-tooltip { opacity:1; }
.service-logo:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
.profile-services { display:flex; flex-direction:column; gap:9px; padding-top:18px; }
.profile-services .service-icons { max-width:300px; }
.card-footer { display:grid; grid-template-columns:minmax(78px,1fr) auto; align-items:center; gap:8px; padding-top:9px; border-top:1px solid var(--line); min-width:0; }
.card-price { display:flex; align-items:center; min-width:0; }
.card-price .price { font-size:1.125rem; line-height:1.2; color:var(--primary); white-space:normal; }
.provider-card .price small { color:var(--faint); font-size:.625rem; }
.provider-card .price small:first-child { color:var(--primary); font-size:.8125rem; }
.card-actions { display:flex; justify-content:flex-end; align-items:center; gap:6px; }
.provider-card .card-actions .button { min-width:0; min-height:32px; padding-inline:6px; border-radius:6px; font-size:.6875rem; }
.provider-card .button-review { color:var(--muted); background:transparent; border:1px solid var(--control-line); }
.provider-card .button-review:hover { color:var(--primary); background:var(--soft); }
.provider-card .button-review:disabled { opacity:.45; }
.provider-card .button-purchase { color:#fff; background:linear-gradient(110deg,#7467eb,#8970dd); box-shadow:0 5px 13px -7px rgb(153 119 255 / 60%); }
.provider-card .button-purchase:hover { background:linear-gradient(110deg,#8477f8,#9a7ce9); box-shadow:0 8px 17px -8px rgb(153 119 255 / 75%); }
@container (max-width:260px) {
  .card-top { gap:8px; }
  .card-badge { max-width:65px; font-size:.625rem; padding-inline:6px; }
  .rating-caption { font-size:.625rem; }
}
.price { font-size:1.5rem; font-weight:700; white-space:nowrap; font-variant-numeric:tabular-nums; }
.price small { color:var(--faint); font-size:.75rem; font-weight:400; }
.price small:first-child { color:var(--text); font-size:.875rem; margin-right:3px; }
.empty-state { border-radius:var(--radius-card); padding:52px 24px; text-align:center; }
.empty-state h2 { margin-top:18px; }
.empty-state p { color:var(--muted); margin:10px 0 24px; }
.list-view { grid-template-columns:1fr; }
.list-view .provider-card { grid-template-columns:minmax(180px,.9fr) minmax(0,1.3fr) 220px; grid-template-rows:64px 56px 82px; gap:10px 24px; align-items:center; }
.list-view .card-top { grid-column:1; grid-row:1; }
.list-view .card-rating { grid-column:1; grid-row:2; }
.list-view .card-description { grid-column:2; grid-row:1; }
.list-view .card-labels { grid-column:2; grid-row:2; height:56px; }
.list-view .card-services { grid-column:2; grid-row:3; }
.list-view .card-footer { grid-column:3; grid-row:1/4; height:100%; grid-template-columns:1fr; align-content:space-between; border-top:0; border-left:1px solid var(--line); padding:0 0 0 24px; }
.list-view .card-price { align-self:start; }
.tutorial-overview { display:grid; grid-template-columns:minmax(0,1fr) 296px; gap:28px; align-items:start; }
.tutorial-grid { gap:16px; }
.tutorial-card-top { display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.tutorial-card h3 { font-size:1.25rem; }
.tutorial-card .scene-icon { width:52px; height:52px; border-radius:16px; background:linear-gradient(145deg,#5aa7ff,#2571ee); }
.platform-macos .scene-icon { background:linear-gradient(145deg,#737a89,#3b4250); }
.platform-linux .scene-icon { background:linear-gradient(145deg,#ffb951,#d58514); }
.platform-android .scene-icon { background:linear-gradient(145deg,#51c78c,#218a61); }
.platform-ios .scene-icon { background:linear-gradient(145deg,#8e81ed,#6255c8); }
.step-count { margin-left:auto; align-self:flex-start; color:var(--faint); font-size:.75rem; padding-top:3px; white-space:nowrap; }
.client-name { font-size:.875rem; color:var(--faint); margin-top:3px; }
.tutorial-summary { color:var(--muted); font-size:1rem; min-height:3.2em; line-height:1.6; }
.tutorial-card-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:20px; }
.tutorial-meta { text-align:left; font-size:.75rem; color:var(--faint); max-width:55%; }
.platform-ios { grid-column:1/-1; background:linear-gradient(120deg,var(--feature-start),var(--feature-end)); }
.platform-ios .tutorial-summary { min-height:0; }
.preparation-panel { padding:26px; border-radius:var(--radius-card); position:sticky; top:110px; }
.preparation-list { list-style:none; counter-reset:prepare; padding:0; margin:24px 0; }
.preparation-list li { position:relative; padding-left:36px; counter-increment:prepare; }
.preparation-list li+li { margin-top:24px; }
.preparation-list li::before { content:counter(prepare); position:absolute; left:0; top:0; width:24px; height:24px; border-radius:50%; color:var(--primary); background:var(--soft); font-size:.75rem; font-weight:700; display:grid; place-items:center; }
.preparation-list strong { font-size:.875rem; }
.preparation-list p { color:var(--muted); font-size:.875rem; line-height:1.65; margin-top:5px; }
.preparation-panel .note-box { padding:16px; background:var(--secondary-surface); }
.preparation-panel .note-box h3,.preparation-panel .note-box p { font-size:.875rem; }
.preparation-panel>.text-link { margin-top:14px; }

/* Reading pages use a separate chapter rail and continuous, roomy sheets. */
.workspace { display:grid; grid-template-columns:200px minmax(0,1fr); gap:32px; align-items:start; }
.workspace-main { min-width:0; }
.sidebar { position:sticky; top:110px; min-width:0; }
.section-nav { display:flex; flex-direction:column; gap:3px; border-radius:var(--radius-card); padding:16px 10px; background:var(--surface); box-shadow:none; }
.section-nav h2 { font-size:.75rem; padding:4px 12px 10px; color:var(--faint); font-weight:400; }
.section-nav a { display:flex; align-items:center; min-height:44px; padding:10px 12px; border-radius:11px; font-size:.875rem; color:var(--muted); transition:background 180ms,color 180ms; }
.section-nav a:hover { background:var(--secondary-surface); color:var(--text); }
.section-nav a.active { background:var(--soft); color:var(--primary); font-weight:700; }
.sidebar-note { display:grid; justify-items:start; padding:20px 12px 0; font-size:.75rem; color:var(--faint); }
.sidebar-note .text-link { min-height:40px; font-size:.875rem; }
.reading-stack { display:grid; gap:20px; }
.breadcrumbs { display:flex; flex-wrap:wrap; gap:10px; font-size:.875rem; color:var(--faint); padding:30px 0 0; }
.breadcrumbs a:hover { color:var(--primary); }
.page-detail>.breadcrumbs { padding-bottom:24px; }
.profile-hero { padding:32px; border-radius:var(--radius-card); margin-bottom:32px; }
.profile-heading { display:flex; align-items:center; gap:20px; }
.profile-heading>.provider-logo { width:80px; height:80px; border-radius:16px; }
.profile-heading .icon { width:28px; height:28px; }
.profile-rating { font-size:.875rem; color:var(--faint); margin-top:8px; }
.profile-price { display:grid; justify-items:end; margin-left:auto; }
.profile-price>small { font-size:.75rem; color:var(--faint); margin-top:4px; }
.profile-description { color:var(--muted); margin-top:24px; }
.profile-actions { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px; margin-top:24px; }
.profile-actions .tags { margin:0; }
.content-panel { padding:32px; border-radius:var(--radius-card); }
.content-panel h2 { font-size:1.25rem; margin-bottom:16px; }
.content-panel>p { color:var(--muted); line-height:1.85; max-width:46em; }
.content-panel>p+p { margin-top:14px; }
.content-panel>.text-link,.content-panel>.button { margin-top:18px; }
.detail-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 32px; margin:24px 0 0; }
.detail-facts dt { color:var(--faint); font-size:.875rem; margin-bottom:7px; }
.detail-facts dd { margin:0; overflow-wrap:anywhere; }
.note-box { background:var(--soft); padding:20px; border-radius:var(--radius-inset); margin-top:24px; }
.note-box h3 { font-size:1rem; }
.note-box p { color:var(--muted); margin-top:7px; font-size:1rem; line-height:1.75; }
.guide-chapter { scroll-margin-top:0; }
.chapter-number { display:block; font-size:.75rem; font-weight:700; color:var(--primary); margin-bottom:10px; }
.tutorial-intro { display:flex; align-items:center; gap:18px; border-radius:var(--radius-card); padding:22px 28px; }
.tutorial-intro p { font-size:1rem; color:var(--text); }
.tutorial-intro span:not(.scene-icon) { display:block; font-size:.75rem; color:var(--faint); margin-top:7px; }
.instruction-list { padding-left:22px; margin:20px 0 0; color:var(--muted); }
.instruction-list li+li { margin-top:9px; }
pre { margin:20px 0 0; padding:18px 20px; border-radius:14px; overflow:auto; background:var(--secondary-surface); color:var(--text); font-size:.875rem; line-height:1.8; max-width:100%; }
code { font-family:monospace; }
.step-source { display:inline-block; margin-top:20px; font-size:.75rem; }
.plan-guide { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:24px 0 0; }
.plan-guide>div { padding:20px; border-radius:var(--radius-inset); background:var(--secondary-surface); }
.plan-guide dt { font-weight:700; }
.plan-guide dd { margin:8px 0 0; color:var(--muted); }
.article-end { display:flex; flex-wrap:wrap; align-items:center; gap:24px; }
.source-note { color:var(--faint); font-size:.75rem; line-height:1.85; margin-top:22px; overflow-wrap:anywhere; }
.reading-stack>.source-note { margin-top:0; }
.source-link { display:inline; color:var(--primary); text-decoration:underline; text-underline-offset:4px; border-radius:3px; }
.source-note .source-link { margin:0 4px; }
.faq-list { display:grid; gap:12px; align-content:start; }
.faq-list details { overflow:hidden; border-radius:var(--radius-card); }
.faq-list summary { cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:24px; font-size:1rem; font-weight:700; line-height:1.65; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary .icon { width:18px; height:18px; color:var(--faint); transition:rotate 220ms; }
.faq-list details[open] summary .icon { rotate:90deg; }
.faq-list details[data-expanded="false"] summary .icon { rotate:0deg; }
.faq-answer { padding:0 24px 24px; font-size:1rem; color:var(--muted); line-height:1.85; }
.faq-answer>.source-link { display:inline-block; font-size:.75rem; margin-top:14px; }

/* A grouped list keeps the review index easy to scan. */
.review-index-layout { gap:18px; min-width:0; }
.review-context { display:flex; align-items:center; gap:16px; padding:18px 22px; border-radius:var(--radius-card); box-shadow:none; }
.review-context p { color:var(--muted); font-size:.875rem; line-height:1.65; }
.review-status { flex-shrink:0; display:inline-block; font-size:.75rem; color:var(--primary); padding:5px 10px; border-radius:8px; background:var(--soft); }
.review-index-nav { display:flex; align-items:center; gap:14px; padding:0 4px; min-width:0; }
.review-nav-label { color:var(--faint); font-size:.875rem; flex-shrink:0; }
.review-index-links { display:flex; align-items:center; gap:6px; min-width:0; overflow-x:auto; padding:6px 2px; scrollbar-width:none; }
.review-index-links::-webkit-scrollbar { display:none; }
.review-index-links a { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:8px 13px; border-radius:12px; white-space:nowrap; flex-shrink:0; font-size:.875rem; color:var(--muted); transition:color 180ms,background 180ms; }
.review-index-links a:hover { background:var(--surface); color:var(--text); }
.review-index-links a.active { color:var(--primary); font-weight:700; background:var(--soft); }
.review-list { display:grid; border-radius:var(--radius-card); overflow:hidden; }
.review-row { display:grid; grid-template-columns:182px minmax(0,1fr) 88px; align-items:center; height:8.75rem; min-height:8.75rem; max-height:8.75rem; gap:24px; padding:22px 28px; scroll-margin-top:0; transition:background 180ms; }
.review-row+.review-row { border-top:1px solid var(--line); }
.review-row:hover,.review-row:focus-within { background:var(--secondary-surface); }
.review-row-identity { display:flex; align-items:center; gap:14px; min-width:0; }
.review-row-content { min-width:0; }
.review-row-identity h2 { min-width:0; font-size:1.125rem; line-height:1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.review-row-identity .provider-logo { width:56px; height:56px; border-radius:12px; }
.review-row-summary { color:var(--muted); font-size:1rem; line-height:1.65; min-height:3.3em; max-height:3.3em; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden; overflow-wrap:anywhere; }
.review-row-tags { display:flex; align-items:center; flex-wrap:nowrap; gap:6px; height:28px; margin-top:10px; min-width:0; overflow:hidden; }
.review-row-tags span { display:block; min-width:0; max-width:12rem; padding:4px 8px; border-radius:7px; color:var(--faint); font-size:.75rem; line-height:1.5; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; background:var(--secondary-surface); }
.review-row-actions { display:flex; align-items:center; justify-content:flex-end; min-width:0; }
.review-row-actions .text-link { flex-shrink:0; white-space:nowrap; }
.review-methods { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 32px; margin:24px 0 0; }
.review-methods dt { font-weight:700; }
.review-methods dd { margin:7px 0 0; color:var(--muted); line-height:1.85; }
.review-verdict { padding:28px 32px; border-radius:var(--radius-card); background:linear-gradient(120deg,var(--feature-start),var(--feature-end)); }
.review-verdict-heading { display:flex; align-items:center; gap:16px; }
.review-verdict>p { margin-top:20px; font-size:1.0625rem; color:var(--text); line-height:1.85; }
.facts-wide { grid-column:1/-1; }
.review-checklist { padding-left:24px; margin:20px 0; color:var(--muted); line-height:1.85; }
.review-checklist li { padding-left:4px; }
.review-checklist li+li { margin-top:14px; }
.review-testing { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:24px 0; }
.review-testing>div { padding:18px; background:var(--secondary-surface); border-radius:var(--radius-inset); }
.review-testing dt { color:var(--muted); font-size:.875rem; }
.review-testing dd { margin:6px 0 0; color:var(--faint); font-size:.875rem; }
.not-found { display:grid; justify-items:center; text-align:center; gap:20px; padding:80px 0; }
.not-found p { color:var(--muted); }
.footer { padding-top:24px; padding-bottom:30px; }
.footer-main { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:24px; padding-top:24px; border-top:1px solid var(--line); }
.footer-main nav { display:flex; flex-wrap:wrap; gap:20px; font-size:.875rem; color:var(--muted); }
.footer-main nav a { display:inline-flex; align-items:center; min-height:44px; }
.footer-main nav a:hover,.footer-main nav a[aria-current="page"] { color:var(--primary); }
.friend-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.friend-link { display:flex; align-items:center; gap:16px; min-width:0; padding:20px; border-radius:8px; background:var(--secondary-surface); transition:background 160ms ease,transform 160ms ease; }
.friend-link:hover { background:var(--soft); transform:translateY(-2px); }
.friend-link-icon { display:grid; place-items:center; width:44px; height:44px; flex-shrink:0; border-radius:8px; background:var(--soft); color:var(--primary); }
.friend-link strong { display:block; font-size:1rem; font-weight:700; overflow-wrap:anywhere; }
.friend-link small { display:block; color:var(--muted); font-size:.8125rem; margin-top:4px; overflow-wrap:anywhere; }
.friend-links-empty { margin:0; padding:28px 0; text-align:center; color:var(--muted); }
@media(max-width:600px) { .friend-links { grid-template-columns:1fr; } .friend-link { padding:16px; } }
.footer-bottom { display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-top:24px; font-size:.75rem; color:var(--faint); }

@media (hover:hover) and (pointer:fine) { .tutorial-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-raised); } .provider-card:hover { transform:translateY(-4px); border-color:rgb(166 159 243 / 45%); box-shadow:inset 0 1px rgb(255 255 255 / 8%),0 24px 34px -22px rgb(35 30 77 / 55%); } }
@media (max-width:1200px) { .header { margin-inline:16px; } }
@media (max-width:1099px) {
  .directory-content>.provider-grid:not(.list-view) { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:899px) {
  .directory-content>.provider-grid:not(.list-view) { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:1050px) {
  .tutorial-overview { grid-template-columns:minmax(0,1fr) 270px; gap:22px; }
  .tutorial-card,.preparation-panel { padding:22px; }
  .workspace { grid-template-columns:180px minmax(0,1fr); gap:24px; }
  .list-view .provider-card { grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); grid-template-rows:64px 56px 82px 48px; }
  .list-view .card-footer { grid-column:1/3; grid-row:4; grid-template-columns:minmax(0,1fr) auto; border-left:0; border-top:1px solid var(--line); padding:11px 0 0; align-content:normal; }
}
@media (max-width:900px) {
  .menu-toggle { display:inline-grid; }
  .header-actions { gap:8px; }
  .nav { display:none; position:absolute; left:0; right:0; top:76px; padding:10px; flex-direction:column; align-items:stretch; border-radius:20px; background:var(--sheet); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); box-shadow:var(--shadow-raised); }
  .nav.open { display:flex; }
  .nav a { min-height:46px; padding:11px 16px; border-radius:12px; }
  .nav a.active { box-shadow:none; color:var(--primary); background:var(--soft); }
  .tutorial-overview { grid-template-columns:1fr; }
  .preparation-panel { position:static; }
  .review-row { grid-template-columns:162px minmax(0,1fr) 80px; gap:18px; padding-inline:22px; }
  .plan-guide { grid-template-columns:1fr; }
  .content-panel { padding:26px; }
  .workspace .provider-grid { grid-template-columns:1fr; }
}
@media (max-width:680px) {
  .header { top:8px; margin:8px 12px 0; border-radius:20px; }
  .header-inner { padding:8px 12px; gap:8px; }
  .brand { font-size:1rem; gap:9px; }
  .brand-mark { width:38px; height:38px; border-radius:12px; }
  .page,.footer { padding-inline:20px; }
  .page-heading { padding:30px 0 24px; align-items:flex-start; gap:18px; flex-wrap:wrap; }
  .page-heading>div { flex:1; min-width:12rem; }
  .page-heading p { font-size:1rem; margin-top:9px; }
  .page-heading>.button { align-self:flex-start; }
  .workspace { grid-template-columns:1fr; gap:22px; }
  .sidebar { position:static; }
  .section-nav { flex-direction:row; flex-wrap:nowrap; overflow-x:auto; gap:4px; padding:8px; scrollbar-width:none; }
  .section-nav::-webkit-scrollbar { display:none; }
  .section-nav h2 { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
  .section-nav a { flex-shrink:0; white-space:nowrap; padding:9px 12px; }
  .sidebar-note { display:none; }
  .directory-tools { flex-wrap:wrap; gap:8px; padding:10px; }
  .search-box { flex-basis:100%; }
  .results-controls { width:100%; justify-content:space-between; padding-inline:8px; }
  .directory-content>.provider-grid:not(.list-view),.provider-grid { grid-template-columns:1fr; }
  .provider-card,.list-view .provider-card { padding:14px 16px; grid-template-columns:1fr; grid-template-rows:52px 38px 26px 72px 22px 42px; gap:7px; }
  .list-view .provider-card>div,.list-view .provider-card>p,.list-view .provider-card>dl { grid-column:auto; grid-row:auto; }
  .list-view .card-footer { height:auto; grid-template-columns:minmax(0,1fr) auto; border-left:0; padding:11px 0 0; }
  .breadcrumbs { padding-top:24px; }
  .profile-hero { padding:24px; border-radius:var(--radius-card); }
  .profile-heading { gap:16px; flex-wrap:wrap; }
  .profile-heading>.provider-logo { width:72px; height:72px; border-radius:14px; }
  .profile-price { margin-left:0; justify-items:start; width:100%; padding-top:8px; }
  .profile-actions { align-items:flex-start; }
  .content-panel { padding:24px; }
  .detail-facts { grid-template-columns:1fr; gap:22px; }
  .tutorial-intro { padding:22px; align-items:flex-start; gap:14px; }
  .review-index-nav { flex-direction:column; align-items:stretch; gap:0; padding:0; }
  .review-nav-label { padding-left:4px; }
  .review-row { grid-template-columns:minmax(0,1fr) auto; grid-template-rows:56px minmax(0,1fr); height:12.75rem; min-height:12.75rem; max-height:12.75rem; padding:22px; gap:14px; }
  .review-row-content { grid-column:1/-1; grid-row:2; align-self:start; }
  .review-row-actions { grid-column:2; grid-row:1; }
  .review-row-identity { gap:12px; }
  .review-row-identity h2 { font-size:1rem; }
  .review-row-identity .provider-logo { width:52px; height:52px; border-radius:11px; }
  .review-context { align-items:flex-start; gap:12px; padding:18px; }
  .review-context p { flex:1; min-width:0; }
  .review-verdict { padding:24px; }
  .review-methods,.review-testing { grid-template-columns:1fr; }
  .footer-main nav { gap:16px; }
}
@media (max-width:560px) {
  .tutorial-grid { grid-template-columns:1fr; }
  .platform-ios { grid-column:auto; }
  .tutorial-card { padding:22px; }
  .tutorial-summary { min-height:0; }
  .preparation-panel { padding:24px; }
  .tutorial-card-footer { margin-top:18px; }
}
@media (max-width:360px) {
  .page,.footer { padding-inline:16px; }
  .tutorial-card,.content-panel { padding:20px; }
  .review-row { padding:18px; }
  .tutorial-card-top { gap:12px; }
  .tutorial-card h3 { font-size:1.125rem; }
  .brand-mark { width:34px; height:34px; }
  .header-inner { padding-inline:10px; }
}
/* Phone browsing has its own flat cards and thumb-friendly navigation. */
@media (max-width:680px) {
  html { scroll-padding-top:72px; scroll-padding-bottom:88px; }
  .header { margin:8px 8px 0; border-radius:14px; }
  .header-inner { padding:6px 12px; }
  .header .brand { min-width:0; }
  .header .brand>span:last-child { min-width:0; overflow:hidden; text-overflow:ellipsis; }
  .header .header-actions { flex-shrink:0; }
  .brand-mark { width:34px; height:34px; }
  .header .nav,.header .menu-toggle { display:none; }
  .mobile-tabs {
    display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
    position:fixed; z-index:40; left:8px; right:8px; bottom:8px;
    padding:4px 4px calc(4px + env(safe-area-inset-bottom));
    border:1px solid var(--line); border-radius:14px; background:var(--sheet);
    box-shadow:0 5px 18px -9px rgb(40 35 80 / 20%);
  }
  .mobile-tabs a {
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    min-width:0; min-height:48px; gap:2px; border-radius:10px;
    color:var(--muted); font-size:.65625rem; line-height:1.4;
  }
  .mobile-tabs a .icon { width:20px; height:20px; }
  .mobile-tabs a.active { color:var(--primary); background:var(--soft); font-weight:700; }
  .mobile-tabs a:active { background:var(--soft); }
  .mobile-tabs a:focus-visible { outline-offset:-3px; }
  .footer { padding-bottom:calc(94px + env(safe-area-inset-bottom)); }
  body .ui-toast { bottom:calc(80px + env(safe-area-inset-bottom)); }
  .page-directory { padding-inline:12px; }
  .page-directory .page-heading { padding:12px 0 10px; gap:0; }
  .page-directory .page-heading h1 { font-size:1.375rem; line-height:28px; }
  .page-directory .page-heading p,.page-directory .page-heading>.button { display:none; }
  .page-directory .directory-tools {
    display:grid; grid-template-columns:minmax(0,1fr) auto;
    padding:0; gap:8px; margin-bottom:10px;
  }
  .page-directory .search-box { padding-inline:10px; gap:7px; }
  .page-directory .search-box input { font-size:1rem; }
  .page-directory .results-controls { width:auto; gap:4px; padding-inline:0; }
  .page-directory .results-controls select { width:88px; max-width:88px; padding-inline:4px; font-size:.75rem; }
  .page-directory #clear-category { min-height:44px; font-size:.6875rem; white-space:nowrap; }
  .page-directory .view-switch { display:none; }
  .provider-grid { gap:8px; }
  :is(.provider-card,.list-view .provider-card) {
    grid-template-columns:minmax(0,1fr) 5rem;
    grid-template-rows:minmax(2.5rem,auto) minmax(1.125rem,auto) minmax(1.375rem,auto) minmax(1.5rem,auto) minmax(2.75rem,auto);
    align-items:stretch; gap:4px 8px; min-height:182px; padding:8px 12px;
  }
  :is(.provider-card,.list-view .provider-card)>.card-top {
    grid-column:1/-1; grid-row:1;
    grid-template-columns:40px minmax(0,1fr) 5rem; gap:8px;
  }
  .provider-card .provider-logo { width:40px; height:40px; border-radius:9px; }
  .provider-card .card-name h2 { font-size:.9375rem; line-height:1.3; }
  .provider-card .card-badge { max-width:5rem; font-size:.625rem; padding:2px 6px; }
  :is(.provider-card,.list-view .provider-card)>.card-rating {
    grid-column:2; grid-row:1; align-self:end; justify-self:end;
    min-height:1.125rem; gap:4px; z-index:1;
  }
  .provider-card .rating-stars { width:12px; overflow:hidden; flex-shrink:0; font-size:.75rem; letter-spacing:0; }
  .provider-card .card-rating strong { font-size:.875rem; }
  .provider-card .card-rating .rating-scale { font-size:.625rem; }
  .provider-card .rating-caption { display:none; }
  :is(.provider-card,.list-view .provider-card)>.card-description {
    grid-column:1/-1; grid-row:2; font-size:.78125rem; line-height:1.125rem;
    -webkit-line-clamp:1; line-clamp:1;
  }
  :is(.provider-card,.list-view .provider-card)>.card-labels { grid-column:1/-1; grid-row:3; height:auto; min-height:1.375rem; }
  .provider-card .card-labels span { padding:2px 7px; font-size:.65625rem; line-height:1rem; }
  :is(.provider-card,.list-view .provider-card)>.card-services {
    grid-column:1/-1; grid-row:4; flex-direction:row; align-items:center; gap:6px; min-height:1.5rem;
  }
  .provider-card .service-caption { flex-shrink:0; font-size:.625rem; line-height:.75rem; }
  .provider-card .service-icons {
    display:flex; flex-wrap:nowrap; align-items:center; gap:4px;
    min-width:0; max-width:none; overflow-x:auto; overflow-y:hidden; scrollbar-width:none;
  }
  .provider-card .service-icons::-webkit-scrollbar { display:none; }
  .provider-card .service-icons li { flex:0 0 24px; }
  .provider-card .service-logo { width:24px; max-width:24px; }
  .provider-card .service-logo:focus-visible { outline-offset:-2px; }
  .provider-card .service-tooltip { display:none; }
  :is(.provider-card,.list-view .provider-card)>.card-footer {
    grid-column:1/-1; grid-row:5; display:flex; flex-wrap:wrap;
    align-content:normal; align-items:center; min-height:2.75rem; height:auto;
    border:0; padding:0; gap:8px;
  }
  .provider-card .card-price { align-self:center; flex:1 1 70px; }
  .provider-card .card-actions { gap:8px; flex-wrap:wrap; max-width:100%; margin-left:auto; }
  .provider-card .card-actions .button { min-height:2.75rem; padding-inline:10px; font-size:.75rem; white-space:normal; text-align:center; }
  .provider-card .card-actions .button::before { display:none; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { transition:none !important; animation:none !important; } :is(.provider-card,.tutorial-card):hover { transform:none; } }
@media (prefers-contrast:more) { :root { --line:rgb(60 60 67 / 30%); --faint:#51515c; } html[data-theme="dark"] { --line:rgb(235 235 245 / 35%); --faint:#cacad6; } .header,.nav { background:var(--surface); } .glass { outline:1px solid var(--line); } }
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) { .header,.nav { background:var(--surface); } }
.article-content{font-size:1rem;line-height:1.9;overflow-wrap:anywhere}.article-content> :first-child{margin-top:0}.article-content> :last-child{margin-bottom:0}.article-content h2{font-size:1.25rem;line-height:1.5;margin:32px 0 16px;font-weight:700}.article-content h3{font-size:1.0625rem;line-height:1.6;margin:24px 0 12px;font-weight:700}.article-content h4{font-size:1rem;margin:20px 0 10px}.article-content p{margin:0 0 16px}.article-content ul,.article-content ol{padding-left:1.5rem;margin:12px 0 20px}.article-content li{margin:4px 0}.article-content li p{margin:0}.article-content a{color:var(--primary);text-decoration:underline;text-underline-offset:3px}.article-content blockquote{border:0;border-left:3px solid var(--primary);background:var(--soft);padding:16px 20px;margin:20px 0;border-radius:0 8px 8px 0}.article-content blockquote> :last-child{margin-bottom:0}.article-content pre{white-space:pre-wrap;overflow-wrap:anywhere;padding:20px;background:var(--secondary-surface);border-radius:8px;font-size:.875rem;line-height:1.7;margin:20px 0}.article-content p code,.article-content li code{background:var(--soft);padding:2px 5px;border-radius:4px;font-size:.875em}.article-content hr{border:0;height:1px;background:var(--line);margin:28px 0}.article-image,.editor-image{margin:24px 0}.article-image img,.editor-image img{display:block;max-width:100%;height:auto;margin:auto;border-radius:8px}.article-image figcaption,.editor-image figcaption{font-size:.8125rem;color:var(--muted);line-height:1.6;text-align:center;margin-top:10px}.article-image-file{display:flex;flex-direction:column;gap:6px;background:var(--secondary-surface);padding:20px;border-radius:8px;font-weight:700;text-decoration:none!important}.article-image-file span{font-size:.8125rem;font-weight:400;color:var(--muted)}