/* Tiara4D */

/* THEME: bg=#230812 accent=#E7B06A */
:root{
--burg:#3A0B19;
--burg2:#4A1023;
--rose:#D48A96;
--gold:#E7B06A;
--cream:#F7EEF1;
--ink:#F3E8EC;
--mut:#C7AFB7;
--line:rgba(231,176,106,.28);
--soft:rgba(255,255,255,.06);
--bg0:#230812;
--bg1:#16050C;
--panel:rgba(18,6,11,.72);
--panel2:rgba(25,7,14,.72);
--glow:rgba(255,140,186,.18);
--glow2:rgba(231,176,106,.22);
--shadow:0 14px 40px rgba(0,0,0,.55);
--shadow2:0 8px 20px rgba(0,0,0,.45);
--ring:0 0 0 1px rgba(231,176,106,.22) inset,0 0 0 1px rgba(0,0,0,.25);
--serif:Georgia,"Times New Roman",serif;
--sans:system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
font:16px/1.8 var(--sans);
background:
radial-gradient(1200px 720px at 12% 8%, rgba(255,140,186,.10) 0%, rgba(255,140,186,0) 55%),
radial-gradient(900px 520px at 88% 18%, rgba(231,176,106,.12) 0%, rgba(231,176,106,0) 58%),
radial-gradient(900px 520px at 50% 120%, rgba(124,25,52,.22) 0%, rgba(124,25,52,0) 62%),
repeating-radial-gradient(circle at 50% 40%, rgba(255,255,255,.03) 0 2px, rgba(0,0,0,0) 2px 8px),
linear-gradient(180deg, var(--bg0), var(--bg1));
color:var(--ink);
text-rendering:optimizeLegibility;
}
h1,h2,h3{
font-family:var(--serif);
line-height:1.32;
color:var(--ink);
letter-spacing:.2px;
text-shadow:0 1px 0 rgba(0,0,0,.45), 0 0 18px rgba(255,140,186,.10);
}
a{color:#FFC2D3;text-decoration:none}
a:hover{text-decoration:underline}

.wrap{max-width:1100px;margin:0 auto;padding:0 20px}

header.site{
background:
linear-gradient(180deg, rgba(58,11,25,.92), rgba(22,5,12,.92)),
repeating-linear-gradient(90deg, rgba(231,176,106,.08) 0 2px, rgba(0,0,0,0) 2px 12px);
border-bottom:1px solid rgba(231,176,106,.45);
position:sticky;top:0;z-index:40;
box-shadow:0 10px 28px rgba(0,0,0,.55);
backdrop-filter:saturate(115%) blur(6px);
}
header.site::before{
content:"";
position:absolute;left:0;right:0;top:0;height:3px;
background:linear-gradient(90deg, rgba(231,176,106,0), rgba(231,176,106,.85), rgba(255,140,186,.55), rgba(231,176,106,.85), rgba(231,176,106,0));
filter:drop-shadow(0 0 10px rgba(231,176,106,.25));
pointer-events:none;
}
header.site::after{
content:"";
position:absolute;left:0;right:0;bottom:0;height:1px;
background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.10), rgba(255,255,255,0));
pointer-events:none;
}
.hbar{display:flex;align-items:center;gap:16px;padding:11px 0;position:relative}
.logo{display:flex;align-items:center;gap:11px}
.logo .dia{
width:26px;height:26px;
background:
linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,0) 40%),
linear-gradient(135deg, #F3D9A8, #E7B06A 55%, #B97A38);
transform:rotate(45deg);
border-radius:6px;
box-shadow:
0 10px 18px rgba(0,0,0,.45),
0 0 0 1px rgba(231,176,106,.55) inset,
0 0 18px rgba(231,176,106,.18);
position:relative;
}
.logo .dia::after{
content:"";
position:absolute;inset:4px;
border-radius:5px;
background:
linear-gradient(135deg, rgba(0,0,0,.28), rgba(0,0,0,0) 55%),
repeating-linear-gradient(45deg, rgba(255,255,255,.12) 0 2px, rgba(255,255,255,0) 2px 7px);
opacity:.55;
}
.wordmark{
color:var(--ink);
font-family:var(--serif);
font-size:20px;
font-weight:700;
letter-spacing:1px;
text-shadow:0 1px 0 rgba(0,0,0,.5), 0 0 18px rgba(231,176,106,.14);
}
.wordmark b{color:var(--gold);text-shadow:0 0 14px rgba(231,176,106,.22),0 1px 0 rgba(0,0,0,.55)}

nav.main{margin-left:auto;display:flex;flex-wrap:wrap;gap:4px}
nav.main a{
color:rgba(247,238,241,.88);
font-size:14px;
padding:7px 12px;
border-radius:10px;
background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
border:1px solid rgba(231,176,106,.14);
box-shadow:0 6px 14px rgba(0,0,0,.25);
position:relative;
}
nav.main a::before{
content:"";
position:absolute;inset:-1px;
border-radius:10px;
background:linear-gradient(135deg, rgba(231,176,106,.30), rgba(255,140,186,.10), rgba(231,176,106,.22));
opacity:0;
transition:opacity .18s ease;
pointer-events:none;
}
nav.main a:hover{
color:#1A060D;
background:linear-gradient(180deg, #F6D6E0, #E7B06A);
border-color:rgba(231,176,106,.85);
text-decoration:none;
box-shadow:0 10px 22px rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.15) inset, 0 0 20px rgba(231,176,106,.18);
}
nav.main a:hover::before{opacity:1}

main{padding:0 0 60px}

.hero{
background:
radial-gradient(900px 380px at 85% -20%, rgba(255,140,186,.22) 0%, rgba(58,11,25,.0) 55%),
radial-gradient(1000px 520px at 20% 10%, rgba(231,176,106,.18) 0%, rgba(231,176,106,0) 60%),
repeating-radial-gradient(circle at 35% 20%, rgba(255,255,255,.03) 0 2px, rgba(0,0,0,0) 2px 9px),
linear-gradient(180deg, rgba(58,11,25,.96), rgba(22,5,12,.96));
color:var(--ink);
padding:52px 0 40px;
border-bottom:1px solid rgba(231,176,106,.55);
position:relative;
overflow:hidden;
box-shadow:0 18px 44px rgba(0,0,0,.48) inset;
}
.hero::before{
content:"";
position:absolute;left:-18%;right:-18%;top:-58%;
height:220px;
background:
repeating-linear-gradient(90deg, rgba(231,176,106,.14) 0 2px, rgba(0,0,0,0) 2px 14px);
transform:skewY(-7deg);
opacity:.35;
pointer-events:none;
}
.hero::after{
content:"";
position:absolute;left:18px;right:18px;bottom:14px;
height:1px;
background:linear-gradient(90deg, rgba(231,176,106,0), rgba(231,176,106,.70), rgba(255,140,186,.35), rgba(231,176,106,.70), rgba(231,176,106,0));
filter:drop-shadow(0 0 12px rgba(231,176,106,.18));
pointer-events:none;
}
.hero .kick{
font-size:12px;
letter-spacing:3px;
color:var(--gold);
margin-bottom:14px;
text-transform:uppercase;
text-shadow:0 0 16px rgba(231,176,106,.18),0 1px 0 rgba(0,0,0,.55);
}
.hero h1{color:#FFF7FA;font-size:32px;max-width:840px}
.hero .lede{max-width:800px;margin-top:14px;color:rgba(247,238,241,.86)}

.abstrip{
display:grid;
grid-template-columns:1fr 44px 1fr;
gap:0;
margin-top:22px;
max-width:640px;
align-items:stretch;
}
.abstrip .col{
background:
linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03)),
radial-gradient(220px 140px at 10% 0%, rgba(255,140,186,.12) 0%, rgba(255,140,186,0) 65%);
border:1px solid rgba(231,176,106,.35);
border-radius:12px;
padding:12px 16px;
font-size:13.5px;
color:rgba(247,238,241,.86);
box-shadow:var(--shadow2);
position:relative;
}
.abstrip .col::before{
content:"";
position:absolute;inset:10px;
border-radius:10px;
box-shadow:0 0 0 1px rgba(255,255,255,.06) inset;
pointer-events:none;
}
.abstrip .vs{
display:grid;place-items:center;
color:var(--gold);
font-family:var(--serif);
font-style:italic;
font-size:19px;
text-shadow:0 0 16px rgba(231,176,106,.22), 0 1px 0 rgba(0,0,0,.55);
}
.abstrip .vs::before{
content:"";
width:2px;height:100%;
background:linear-gradient(180deg, rgba(231,176,106,0), rgba(231,176,106,.55), rgba(231,176,106,0));
border-radius:2px;
}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:26px;align-items:center}
.hero-fig img{
width:100%;height:auto;
border-radius:14px;
border:1px solid rgba(231,176,106,.35);
box-shadow:0 16px 34px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.25) inset, 0 0 26px rgba(255,140,186,.10);
background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,0));
}

.dim{
background:
linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03)),
radial-gradient(520px 220px at 20% 0%, rgba(231,176,106,.10) 0%, rgba(231,176,106,0) 60%),
linear-gradient(180deg, rgba(25,7,14,.75), rgba(18,6,11,.82));
border:1px solid rgba(231,176,106,.22);
border-radius:14px;
padding:22px 26px;
margin:16px 0;
border-left:6px solid rgba(255,140,186,.55);
box-shadow:var(--shadow);
position:relative;
}
.dim::before,.dim::after{
content:"";
position:absolute;
width:18px;height:18px;
border:2px solid rgba(231,176,106,.55);
opacity:.75;
pointer-events:none;
}
.dim::before{left:10px;top:10px;border-right:none;border-bottom:none;transform:skewX(-8deg)}
.dim::after{right:10px;bottom:10px;border-left:none;border-top:none;transform:skewX(-8deg)}
.dim h2{font-size:21px;margin-bottom:8px;display:flex;align-items:center;gap:10px}
.dim .dno{
flex:0 0 auto;width:30px;height:30px;border-radius:50%;
background:
radial-gradient(circle at 30% 25%, rgba(255,255,255,.20), rgba(255,255,255,0) 55%),
linear-gradient(180deg, rgba(231,176,106,.22), rgba(231,176,106,0)),
linear-gradient(180deg, rgba(58,11,25,.98), rgba(22,5,12,.98));
color:var(--gold);
display:grid;place-items:center;
font-size:13px;
font-family:var(--serif);
box-shadow:0 10px 18px rgba(0,0,0,.55), 0 0 0 1px rgba(231,176,106,.45) inset, 0 0 18px rgba(231,176,106,.16);
}
.dim :is(p,ul,ol,table){margin:8px 0}
.dim table{width:100%;border-collapse:collapse;font-size:14.5px;display:block;overflow-x:auto}
.dim th{
background:
linear-gradient(180deg, rgba(231,176,106,.22), rgba(231,176,106,0)),
linear-gradient(180deg, rgba(58,11,25,.92), rgba(22,5,12,.92));
color:#FFF3F7;
text-align:left;
padding:7px 10px;
border-bottom:1px solid rgba(231,176,106,.25);
}
.dim td{
padding:7px 10px;
border:1px solid rgba(231,176,106,.20);
color:rgba(247,238,241,.88);
background:rgba(255,255,255,.02);
}

.score{display:flex;align-items:center;gap:10px;margin:8px 0}
.score .lbl{width:170px;flex:0 0 auto;font-size:13.5px;color:rgba(199,175,183,.95)}
.score .bar{
flex:1;height:9px;
background:rgba(255,255,255,.07);
border-radius:999px;
overflow:hidden;
box-shadow:0 0 0 1px rgba(231,176,106,.18) inset, 0 10px 18px rgba(0,0,0,.25);
}
.score .bar i{
display:block;height:100%;
background:
linear-gradient(90deg, rgba(255,140,186,.92), rgba(231,176,106,.92)),
repeating-linear-gradient(90deg, rgba(255,255,255,.18) 0 6px, rgba(255,255,255,0) 6px 12px);
border-radius:999px;
box-shadow:0 0 16px rgba(255,140,186,.16);
}

.crumbs{font-size:13px;color:rgba(199,175,183,.95);margin:20px 0 14px}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.crumbs li+li::before{content:"\2022 ";color:var(--gold);text-shadow:0 0 12px rgba(231,176,106,.18)}

.art-head{
background:
linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03)),
radial-gradient(520px 220px at 15% 0%, rgba(255,140,186,.14) 0%, rgba(255,140,186,0) 58%),
linear-gradient(180deg, rgba(25,7,14,.72), rgba(18,6,11,.82));
border:1px solid rgba(231,176,106,.22);
border-radius:14px;
border-top:5px solid rgba(231,176,106,.75);
padding:24px 28px;
margin-bottom:8px;
box-shadow:var(--shadow);
position:relative;
overflow:hidden;
}
.art-head::before{
content:"";
position:absolute;left:-20%;right:-20%;top:-56%;
height:200px;
background:
repeating-linear-gradient(90deg, rgba(231,176,106,.12) 0 2px, rgba(0,0,0,0) 2px 14px);
transform:skewY(-7deg);
opacity:.30;
pointer-events:none;
}
.art-head::after{
content:"";
position:absolute;left:18px;right:18px;bottom:12px;height:1px;
background:linear-gradient(90deg, rgba(231,176,106,0), rgba(231,176,106,.55), rgba(255,140,186,.28), rgba(231,176,106,.55), rgba(231,176,106,0));
pointer-events:none;
}
.art-head h1{
font-size:28px;
color:#FFF6FA;
text-shadow:0 1px 0 rgba(0,0,0,.55), 0 0 18px rgba(255,140,186,.12), 0 0 18px rgba(231,176,106,.10);
}
.art-meta{font-size:13px;color:rgba(199,175,183,.95);margin-top:8px}

.toc{
background:
linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
linear-gradient(180deg, rgba(25,7,14,.70), rgba(18,6,11,.82));
border:1px solid rgba(231,176,106,.18);
border-radius:14px;
padding:16px 20px;
margin:16px 0;
box-shadow:var(--shadow2);
position:relative;
}
.toc::before,.toc::after{
content:"";
position:absolute;
width:16px;height:16px;
border:2px solid rgba(231,176,106,.45);
opacity:.7;
pointer-events:none;
}
.toc::before{left:10px;top:10px;border-right:none;border-bottom:none}
.toc::after{right:10px;bottom:10px;border-left:none;border-top:none}
.toc h2{
font-size:14px;
letter-spacing:2px;
color:#FFB8C8;
text-transform:uppercase;
text-shadow:0 0 14px rgba(255,140,186,.14);
}
.toc ol{margin:8px 0 0 18px;font-size:14.5px}
.toc a{color:rgba(247,238,241,.88)}
.toc a:hover{color:#1A060D;text-decoration:none;background:linear-gradient(180deg, rgba(255,140,186,.25), rgba(231,176,106,.25));border-radius:8px}

.fig-main{
margin:20px 0;border-radius:14px;overflow:hidden;
border:1px solid rgba(231,176,106,.18);
background:
linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)),
linear-gradient(180deg, rgba(25,7,14,.72), rgba(18,6,11,.82));
box-shadow:var(--shadow);
}
.fig-main img{display:block;width:100%;height:auto}
.fig-main figcaption{
font-size:13px;color:rgba(199,175,183,.95);
padding:9px 14px;
border-top:1px solid rgba(231,176,106,.18);
background:linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,0));
}

.sect{
background:
linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03)),
radial-gradient(520px 220px at 12% 0%, rgba(231,176,106,.10) 0%, rgba(231,176,106,0) 60%),
linear-gradient(180deg, rgba(25,7,14,.70), rgba(18,6,11,.84));
border:1px solid rgba(231,176,106,.20);
border-radius:14px;
padding:24px 28px;
margin:18px 0;
box-shadow:var(--shadow);
position:relative;
}
.sect::before,.sect::after{
content:"";
position:absolute;
width:18px;height:18px;
border:2px solid rgba(231,176,106,.50);
opacity:.75;
pointer-events:none;
}
.sect::before{left:10px;top:10px;border-right:none;border-bottom:none;transform:skewX(-8deg)}
.sect::after{right:10px;bottom:10px;border-left:none;border-top:none;transform:skewX(-8deg)}
.sect h2{font-size:21px;margin-bottom:8px;color:#FFF4F8}
.sect h2::after{
content:"";
display:block;
width:56px;height:3px;
background:linear-gradient(90deg, rgba(231,176,106,0), rgba(231,176,106,.95), rgba(255,140,186,.55));
margin-top:6px;
border-radius:3px;
box-shadow:0 0 16px rgba(231,176,106,.18);
}
.sect h3{
font-size:17.5px;
color:#FFC2D3;
margin:12px 0 4px;
text-shadow:0 0 14px rgba(255,140,186,.12),0 1px 0 rgba(0,0,0,.55);
}
.sect :is(p,ul,ol,table){margin:8px 0}
.sect table{width:100%;border-collapse:collapse;font-size:14.5px;display:block;overflow-x:auto}
.sect th{
background:
linear-gradient(180deg, rgba(231,176,106,.22), rgba(231,176,106,0)),
linear-gradient(180deg, rgba(58,11,25,.92), rgba(22,5,12,.92));
color:#FFF3F7;
text-align:left;
padding:7px 10px;
border-bottom:1px solid rgba(231,176,106,.25);
}
.sect td{
padding:7px 10px;
border:1px solid rgba(231,176,106,.18);
color:rgba(247,238,241,.88);
background:rgba(255,255,255,.02);
}

.callout{
background:
linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03)),
radial-gradient(320px 180px at 0% 0%, rgba(255,140,186,.14) 0%, rgba(255,140,186,0) 55%),
linear-gradient(180deg, rgba(25,7,14,.60), rgba(18,6,11,.82));
border:1px solid rgba(231,176,106,.20);
border-left:5px solid rgba(231,176,106,.80);
border-radius:10px;
padding:12px 16px;
margin:10px 0;
font-size:15px;
color:rgba(247,238,241,.90);
box-shadow:var(--shadow2);
}
.callout::before{
content:"";
display:inline-block;
width:10px;height:10px;
margin-right:10px;
border-radius:2px;
background:linear-gradient(135deg, rgba(231,176,106,.95), rgba(255,140,186,.35));
box-shadow:0 0 12px rgba(231,176,106,.18);
transform:rotate(45deg);
vertical-align:middle;
}

.faq details{
background:
linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
linear-gradient(180deg, rgba(25,7,14,.70), rgba(18,6,11,.84));
border:1px solid rgba(231,176,106,.18);
border-radius:12px;
margin:10px 0;
padding:4px 18px;
box-shadow:var(--shadow2);
}
.faq summary{
cursor:pointer;
font-weight:600;
padding:12px 0;
color:#FFF1F6;
text-shadow:0 1px 0 rgba(0,0,0,.55),0 0 14px rgba(255,140,186,.10);
}
.faq summary::marker{color:var(--gold)}
.faq-a{color:rgba(199,175,183,.98);padding-bottom:12px}

.related{
background:
radial-gradient(520px 220px at 20% 0%, rgba(231,176,106,.16) 0%, rgba(231,176,106,0) 60%),
linear-gradient(180deg, rgba(58,11,25,.92), rgba(22,5,12,.92));
border-radius:14px;
padding:20px 26px;
margin:22px 0;
color:rgba(247,238,241,.82);
border:1px solid rgba(231,176,106,.18);
box-shadow:var(--shadow);
position:relative;
overflow:hidden;
}
.related::before{
content:"";
position:absolute;left:-20%;right:-20%;top:-60%;
height:210px;
background:repeating-linear-gradient(90deg, rgba(231,176,106,.12) 0 2px, rgba(0,0,0,0) 2px 14px);
transform:skewY(-7deg);
opacity:.28;
pointer-events:none;
}
.related h2{color:#FFF6FA;font-size:17px}
.related ul{list-style:none}
.related li{margin:7px 0;padding-left:22px;position:relative}
.related li::before{content:"\2666";position:absolute;left:0;color:var(--gold);text-shadow:0 0 14px rgba(231,176,106,.18)}

.rg-strip{
background:
linear-gradient(180deg, rgba(255,140,186,.10), rgba(231,176,106,.06)),
linear-gradient(180deg, rgba(25,7,14,.62), rgba(18,6,11,.86));
border:1.5px solid rgba(255,140,186,.28);
border-radius:12px;
padding:14px 18px;
margin:20px 0;
color:rgba(247,238,241,.88);
font-size:14.5px;
box-shadow:var(--shadow2);
position:relative;
}
.rg-strip::before{
content:"";
position:absolute;inset:-1px;
border-radius:12px;
box-shadow:0 0 0 1px rgba(231,176,106,.16) inset, 0 0 22px rgba(255,140,186,.08);
pointer-events:none;
}

footer.site{
background:
linear-gradient(180deg, rgba(22,5,12,.92), rgba(10,3,7,.98)),
repeating-linear-gradient(90deg, rgba(231,176,106,.08) 0 2px, rgba(0,0,0,0) 2px 14px);
color:rgba(247,238,241,.82);
padding:36px 0 24px;
font-size:14px;
border-top:1px solid rgba(231,176,106,.22);
position:relative;
box-shadow:0 -18px 44px rgba(0,0,0,.55);
}
footer.site::before{
content:"";
position:absolute;left:0;right:0;top:0;height:2px;
background:linear-gradient(90deg, rgba(231,176,106,0), rgba(231,176,106,.75), rgba(255,140,186,.35), rgba(231,176,106,.75), rgba(231,176,106,0));
filter:drop-shadow(0 0 12px rgba(231,176,106,.18));
pointer-events:none;
}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:26px}
footer.site h2{
font-size:13px;
letter-spacing:2px;
color:var(--gold);
margin-bottom:10px;
text-transform:uppercase;
text-shadow:0 0 14px rgba(231,176,106,.16);
}
footer.site ul{list-style:none}
footer.site li{margin:6px 0}
footer.site a{color:rgba(247,238,241,.82)}
footer.site a:hover{color:#1A060D;text-decoration:none;background:linear-gradient(180deg, rgba(255,140,186,.25), rgba(231,176,106,.25));border-radius:8px}

.fbadges{
display:flex;
gap:14px;
align-items:center;
margin-top:20px;
padding-top:16px;
border-top:1px solid rgba(231,176,106,.22);
flex-wrap:wrap;
}
.badge18{
border:2px solid rgba(231,176,106,.85);
color:var(--gold);
font-weight:800;
border-radius:8px;
padding:2px 10px;
background:linear-gradient(180deg, rgba(231,176,106,.14), rgba(231,176,106,0));
box-shadow:0 10px 18px rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.2) inset, 0 0 18px rgba(231,176,106,.14);
}
.legal{font-size:12.5px;color:rgba(199,175,183,.88);margin-top:12px}

@media(max-width:900px){
.hero-grid{grid-template-columns:1fr}
.fgrid{grid-template-columns:1fr 1fr}
.abstrip{grid-template-columns:1fr;gap:8px}
.abstrip .vs{padding:2px 0}
.abstrip .vs::before{width:100%;height:2px}
}
@media(max-width:640px){
.fgrid{grid-template-columns:1fr}
.hero h1{font-size:25px}
.art-head h1{font-size:23px}
.score .lbl{width:120px}
}