:root{
  color-scheme:light;
  --ui-bg:#fafaff;
  --ui-bg-soft:#f2edff;
  --ui-panel:#ffffff;
  --ui-panel-soft:#f7f3ff;
  --ui-text:#17132b;
  --ui-muted:#655b78;
  --ui-primary:#7c3aed;
  --ui-primary-dark:#5b21b6;
  --ui-blue:#38bdf8;
  --ui-gold:#f4c95d;
  --ui-border:#ded5f3;
  --ui-shadow:0 18px 45px rgba(76,29,149,.12);
  --ui-shadow-hover:0 22px 55px rgba(76,29,149,.2)
}
html[data-theme="dark"]{
  color-scheme:dark;
  --ui-bg:#17102b;
  --ui-bg-soft:#20163a;
  --ui-panel:#251a43;
  --ui-panel-soft:#2d2050;
  --ui-text:#fbf9ff;
  --ui-muted:#d3cae4;
  --ui-primary:#a78bfa;
  --ui-primary-dark:#8b5cf6;
  --ui-blue:#67d4ff;
  --ui-gold:#f6d77a;
  --ui-border:#4b3b6f;
  --ui-shadow:0 18px 48px rgba(3,0,12,.38);
  --ui-shadow-hover:0 22px 56px rgba(3,0,12,.52)
}
html{scroll-behavior:smooth}
body{
  background:
    radial-gradient(circle at 8% 8%,rgba(124,58,237,.12),transparent 28rem),
    radial-gradient(circle at 92% 14%,rgba(56,189,248,.12),transparent 25rem),
    linear-gradient(180deg,var(--ui-bg) 0%,var(--ui-bg-soft) 100%)!important;
  color:var(--ui-text)!important
}
main{background:transparent!important}
p,li,small,figcaption{color:var(--ui-muted)}
.site-header{
  background:rgba(250,250,255,.9)!important;
  border:1px solid rgba(222,213,243,.88)!important;
  border-radius:0 0 22px 22px;
  box-shadow:0 10px 35px rgba(76,29,149,.09)!important;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px)
}
.brand,.brand .gem{color:var(--ui-primary)!important}
.site-header nav a{color:var(--ui-text)!important}
.site-header nav a:hover{color:var(--ui-primary)!important}
.button,.round-link{
  color:#fff!important;
  border-color:transparent!important;
  background:linear-gradient(135deg,var(--ui-primary),var(--ui-primary-dark) 58%,#4338ca)!important;
  box-shadow:0 10px 24px rgba(124,58,237,.24)!important
}
.button:hover,.round-link:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(124,58,237,.34)!important
}
.text-link,a{transition:color .2s ease,transform .2s ease,box-shadow .2s ease}
.text-link,.card-meta a,.article-body a{color:var(--ui-primary)!important}
.kicker,.label{
  color:var(--ui-primary)!important;
  background:linear-gradient(90deg,rgba(124,58,237,.12),rgba(56,189,248,.11))!important;
  border-color:rgba(124,58,237,.18)!important
}
.hero,.index-hero,.article-hero{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 86% 14%,rgba(244,201,93,.2),transparent 18rem),
    radial-gradient(circle at 76% 70%,rgba(56,189,248,.18),transparent 20rem),
    linear-gradient(135deg,#fff 5%,#f2eaff 58%,#e8f8ff 100%)!important;
  border:1px solid var(--ui-border)!important;
  border-radius:28px!important;
  box-shadow:var(--ui-shadow)!important
}
.hero h1,.index-hero h1,.article-hero h1,
.section-heading h2,.steps h2,.article-body h2,.article-card h3,.article-list h2{
  color:var(--ui-text)!important
}
.hero-art .diamond{
  background:linear-gradient(145deg,#a78bfa,#7c3aed 48%,#38bdf8)!important;
  filter:drop-shadow(0 18px 24px rgba(76,29,149,.27))
}
.trust-strip,.article-card,.article-list article,.article-layout,.article-body section,
.mini-grid a,.utility-body>div,.note,.visual-table-wrap{
  background:rgba(255,255,255,.9)!important;
  color:var(--ui-text)!important;
  border-color:var(--ui-border)!important;
  box-shadow:var(--ui-shadow)!important
}
.article-card,.article-list article,.mini-grid a,.utility-body>div{
  border-radius:20px!important;
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease
}
.article-card:hover,.article-list article:hover,.mini-grid a:hover{
  transform:translateY(-4px);
  border-color:rgba(124,58,237,.42)!important;
  box-shadow:var(--ui-shadow-hover)!important
}
.article-card.featured{
  background:linear-gradient(145deg,#fff,#f3edff 60%,#eaf9ff)!important;
  border-color:rgba(124,58,237,.32)!important
}
.steps,.access-card{
  background:linear-gradient(135deg,#5b21b6,#7c3aed 55%,#2563eb)!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.2)!important;
  box-shadow:0 22px 55px rgba(76,29,149,.25)!important
}
.steps h2,.steps strong,.steps p,.steps li,.access-card h2,.access-card p,.access-card .label{
  color:#fff!important
}
.steps li,.access-card .button{border-color:rgba(255,255,255,.22)!important}
.access-card .button{
  background:#fff!important;
  color:#5b21b6!important;
  box-shadow:0 10px 25px rgba(20,7,45,.2)!important
}
.breadcrumbs{color:var(--ui-muted)!important}
footer{
  background:linear-gradient(180deg,#f1ebff,#e9e1ff)!important;
  color:var(--ui-text)!important;
  border-top:1px solid var(--ui-border)!important
}
footer p,footer a,.fineprint{color:var(--ui-muted)!important}
.site-tools{display:flex;align-items:center;gap:8px;margin-left:auto}
.site-search{position:relative;width:min(30vw,300px)}
.site-search input{
  box-sizing:border-box;width:100%;height:43px;
  border:1px solid var(--ui-border);border-radius:22px;
  background:var(--ui-panel);color:var(--ui-text);
  padding:0 40px 0 16px;font:inherit;
  box-shadow:0 7px 18px rgba(76,29,149,.08);
  outline:none
}
.site-search input:focus{
  border-color:var(--ui-primary);
  box-shadow:0 0 0 4px rgba(124,58,237,.13)
}
.site-search button{
  position:absolute;right:5px;top:5px;width:33px;height:33px;
  border:0;border-radius:50%;
  background:linear-gradient(135deg,var(--ui-primary),var(--ui-blue));
  color:#fff;cursor:pointer
}
.theme-toggle{
  width:43px;height:43px;border:1px solid var(--ui-border);border-radius:50%;
  background:var(--ui-panel);color:var(--ui-primary);cursor:pointer;font-size:18px;
  box-shadow:0 7px 18px rgba(76,29,149,.08)
}
.theme-toggle:hover{border-color:var(--ui-primary);transform:translateY(-1px)}
.search-panel[hidden]{display:none}
.search-panel{
  position:fixed;inset:0;z-index:100000;
  background:rgba(27,13,52,.62);padding:80px 16px 24px;
  overflow:auto;backdrop-filter:blur(10px)
}
.search-dialog{
  position:relative;width:min(760px,100%);margin:auto;
  border:1px solid var(--ui-border);border-radius:24px;
  background:var(--ui-panel);color:var(--ui-text);
  padding:24px;box-shadow:0 28px 80px rgba(25,8,55,.28)
}
.search-dialog input{
  box-sizing:border-box;width:100%;height:52px;
  border:1px solid var(--ui-border);border-radius:14px;
  background:var(--ui-panel-soft);color:var(--ui-text);
  padding:0 48px 0 16px;font:inherit;outline:none
}
.search-dialog input:focus{border-color:var(--ui-primary);box-shadow:0 0 0 4px rgba(124,58,237,.13)}
.search-close{
  position:absolute;right:30px;top:30px;width:38px;height:38px;
  border:0;background:transparent;color:var(--ui-text);font-size:24px;cursor:pointer
}
.search-results{display:grid;gap:10px;margin-top:18px}
.search-result{
  display:block;border:1px solid var(--ui-border);border-radius:14px;
  padding:15px;background:var(--ui-panel-soft);color:var(--ui-text);text-decoration:none
}
.search-result:hover{border-color:var(--ui-primary);transform:translateX(3px)}
.search-result strong{display:block;margin-bottom:5px;color:var(--ui-text)}
.search-result span{font-size:14px;color:var(--ui-muted)}
.search-empty{padding:20px 4px}.search-hint{font-size:13px;color:var(--ui-muted);margin:9px 2px 0}

html[data-theme="dark"] body{
  background:
    radial-gradient(circle at 10% 8%,rgba(139,92,246,.2),transparent 28rem),
    radial-gradient(circle at 90% 12%,rgba(56,189,248,.13),transparent 25rem),
    linear-gradient(180deg,var(--ui-bg),#120c22)!important;
  color:var(--ui-text)!important
}
html[data-theme="dark"] .site-header{
  background:rgba(23,16,43,.9)!important;
  border-color:var(--ui-border)!important
}
html[data-theme="dark"] .hero,
html[data-theme="dark"] .index-hero,
html[data-theme="dark"] .article-hero{
  background:
    radial-gradient(circle at 86% 14%,rgba(244,201,93,.14),transparent 18rem),
    radial-gradient(circle at 76% 70%,rgba(56,189,248,.13),transparent 20rem),
    linear-gradient(135deg,#251a43,#2f2054 58%,#18384f)!important
}
html[data-theme="dark"] .trust-strip,
html[data-theme="dark"] .article-card,
html[data-theme="dark"] .article-list article,
html[data-theme="dark"] .article-layout,
html[data-theme="dark"] .article-body,
html[data-theme="dark"] .article-body section,
html[data-theme="dark"] .mini-grid a,
html[data-theme="dark"] .utility-body>div,
html[data-theme="dark"] .note,
html[data-theme="dark"] .visual-table-wrap{
  background:var(--ui-panel)!important;
  color:var(--ui-text)!important;
  border-color:var(--ui-border)!important
}
html[data-theme="dark"] .article-card.featured{
  background:linear-gradient(145deg,#2a1d49,#35225d 62%,#18394f)!important
}
html[data-theme="dark"] p,
html[data-theme="dark"] li,
html[data-theme="dark"] small,
html[data-theme="dark"] figcaption{color:var(--ui-muted)!important}
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] strong{color:var(--ui-text)!important}
html[data-theme="dark"] footer{
  background:linear-gradient(180deg,#1c1332,#130d24)!important;
  border-color:var(--ui-border)!important
}
html[data-theme="dark"] footer p,
html[data-theme="dark"] footer a,
html[data-theme="dark"] .fineprint{color:var(--ui-muted)!important}

@media(max-width:900px){
  .site-header{flex-wrap:wrap;border-radius:0 0 18px 18px}
  .site-tools{order:3;width:100%;margin:8px 0 0}
  .site-search{width:auto;flex:1}
  .hero,.index-hero,.article-hero{border-radius:22px!important}
}
@media(max-width:560px){
  .site-tools{gap:6px}
  .site-search input{height:41px;font-size:14px}
  .theme-toggle{width:41px;height:41px}
  .hero,.index-hero,.article-hero{border-radius:18px!important}
  .article-card,.article-list article,.mini-grid a{border-radius:16px!important}
}


/* Final integrated layout fixes */
html,body{min-width:0}
body{overflow-x:hidden}
.site-header{
  width:min(100%,1200px)!important;max-width:1200px!important;height:auto!important;min-height:82px!important;
  margin:0 auto!important;padding:14px 28px!important;display:flex!important;align-items:center!important;
  justify-content:flex-start!important;gap:22px!important
}
.site-header .brand{flex:0 0 auto!important;white-space:nowrap}
.site-header nav{display:flex;align-items:center;gap:24px;margin-right:auto}
.site-header>.button.compact{flex:0 0 auto;white-space:nowrap}
.site-tools{display:flex;align-items:center;gap:8px;flex:0 1 330px;margin-left:auto}
.site-search{width:100%;min-width:170px}
main{width:min(100%,1200px)!important;max-width:1200px!important;margin:0 auto!important;padding:0 28px!important}
.hero{min-height:570px!important;padding:54px 38px!important;gap:35px!important;border-bottom:1px solid var(--ui-border)!important}
.hero-copy{min-width:0!important;padding-left:0!important}
.hero h1{
  font-size:clamp(42px,5.2vw,68px)!important;line-height:1.07!important;
  letter-spacing:-.035em!important;overflow-wrap:anywhere;margin:16px 0 22px!important
}
.hero-copy>p,.article-hero>p,.article-body p,.article-body li,.utility-body p{
  color:var(--ui-muted)!important;opacity:1!important
}
.hero-copy>p{font-size:clamp(16px,1.7vw,18px)!important;line-height:1.75!important}
.section{padding:84px 0!important}
.article-grid{gap:18px!important}
.article-card{background:var(--ui-panel)!important}
.article-card p{color:var(--ui-muted)!important}
.card-meta{border-color:var(--ui-border)!important}
.article-layout{min-width:0}
.article-hero{padding:52px 34px!important}
.article-hero h1{font-size:clamp(36px,5vw,60px)!important;overflow-wrap:anywhere}
.article-body{width:min(100%,760px)!important}
.article-body section{padding:0!important;background:transparent!important;box-shadow:none!important;border:0!important}
.search-dialog>label{display:block;margin:0 46px 12px 0;font-weight:800;color:var(--ui-text)}
.theme-icon::before{content:"☾"}
html[data-theme="dark"] .theme-icon::before{content:"☀"}
body.search-open{overflow:hidden}

@media(max-width:1050px){
  .site-header{gap:14px!important;padding:12px 20px!important}
  .site-header nav{gap:15px;font-size:13px}
  .site-tools{flex-basis:245px}
  .hero{padding:46px 30px!important}
}
@media(max-width:860px){
  .site-header{flex-wrap:wrap!important}
  .site-header nav{order:2;margin-left:auto!important;margin-right:0!important}
  .site-tools{order:3;flex:1 1 calc(100% - 150px);margin:0!important}
  .site-header>.button.compact{order:4}
  main{padding:0 18px!important}
  .hero{grid-template-columns:1fr!important;min-height:auto!important;padding:55px 25px 30px!important}
  .hero-art{height:275px!important}
  .section{padding:66px 0!important}
}
@media(max-width:620px){
  .site-header{padding:11px 14px!important;gap:10px!important}
  .site-header nav{display:none!important}
  .site-tools{order:3;flex:1 1 100%}
  .site-header>.button.compact{position:absolute;right:14px;top:11px}
  .site-header .brand{padding-right:145px}
  .site-search{min-width:0}
  main{padding:0 14px!important}
  .hero{padding:42px 20px 24px!important;border-radius:20px!important}
  .hero h1{font-size:clamp(36px,11vw,48px)!important}
  .hero-art{height:230px!important}
  .actions{align-items:stretch!important;flex-direction:column!important;gap:14px!important}
  .article-hero{padding:38px 20px!important}
  .article-hero h1{font-size:36px!important}
  .search-panel{padding:30px 10px!important}
  .search-dialog{padding:20px!important;border-radius:18px!important}
  .search-close{right:21px!important;top:20px!important}
}

/* Standard article presentation */
.article-layout{
  width:min(100%,900px)!important;
  margin:34px auto 76px!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important
}
.article-hero{
  width:100%!important;
  margin:0 0 34px!important;
  padding:48px clamp(22px,5vw,56px)!important;
  border:1px solid var(--ui-border)!important;
  border-radius:26px!important;
  box-shadow:0 18px 50px rgba(76,29,149,.09)!important
}
.article-body{
  width:min(100%,760px)!important;
  margin:0 auto!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important
}
.article-body>section{
  margin:0 0 34px!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important
}
.article-body h2{
  margin:42px 0 14px!important;
  font-size:clamp(25px,3vw,32px)!important;
  line-height:1.25!important
}
.article-body h3{
  margin:28px 0 10px!important;
  font-size:clamp(20px,2.4vw,24px)!important;
  line-height:1.3!important
}
.article-body p,
.article-body li{
  font-size:17px!important;
  line-height:1.82!important
}
.article-body p{margin:0 0 20px!important}
.article-body ul,
.article-body ol{margin:0 0 24px!important;padding-left:26px!important}
.article-body li{margin:0 0 9px!important;padding-left:3px!important}
.article-body .note{
  margin:28px 0!important;
  padding:20px 22px!important;
  border-left:4px solid var(--ui-primary)!important;
  border-radius:12px!important;
  background:var(--ui-panel-soft)!important;
  box-shadow:none!important
}
.article-body figure{
  margin:30px 0!important
}
.article-body figure img{
  display:block;
  width:100%;
  height:auto;
  border-radius:18px;
  border:1px solid var(--ui-border)
}
.article-body figcaption{
  margin-top:10px;
  text-align:center;
  font-size:14px;
  line-height:1.55
}
/* The only table retained is the side-by-side photo comparison. */
.device-table-wrap{
  margin:30px 0!important;
  overflow-x:auto!important;
  border:1px solid var(--ui-border)!important;
  border-radius:18px!important;
  background:var(--ui-panel)!important
}
.device-comparison-table{
  width:100%!important;
  min-width:620px!important;
  border-collapse:collapse!important
}
.device-comparison-table th,
.device-comparison-table td{
  padding:16px!important;
  border:1px solid var(--ui-border)!important;
  vertical-align:top!important
}
.device-comparison-table img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain
}
.device-mobile-cell img{
  width:min(100%,230px)!important;
  margin:0 auto!important
}

@media(max-width:620px){
  .article-layout{margin-top:22px!important;margin-bottom:52px!important}
  .article-hero{padding:34px 20px!important;border-radius:18px!important}
  .article-body p,.article-body li{font-size:16px!important;line-height:1.75!important}
  .article-body h2{margin-top:34px!important}
}