:root{
  color-scheme:light dark;
  --bg:#fffbfe;
  --surface:#fffbfe;
  --surface-2:#f3edf7;
  --surface-3:#eaddff;
  --text:#1d1b20;
  --muted:#49454f;
  --outline:#79747e;
  --outline-soft:#cac4d0;
  --primary:#6750a4;
  --primary-soft:#e8def8;
  --secondary:#625b71;
  --danger:#b3261e;
  --danger-soft:#f9dedc;
  --max:1080px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  background:
    radial-gradient(circle at 90% 0%,rgba(103,80,164,.09),transparent 34rem),
    linear-gradient(180deg,#fffbfe 0%,#f7f2f8 100%);
  color:var(--text);
  font:16px/1.65 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
::selection{background:var(--primary);color:#fff}
::-moz-selection{background:var(--primary);color:#fff}
a{color:var(--primary);text-decoration:none;transition:color .2s ease,background-color .2s ease,border-color .2s ease,transform .2s ease}
a:hover{color:var(--primary);text-decoration:underline}
a:focus-visible,.links a:focus-visible{outline:3px solid color-mix(in srgb,var(--primary) 48%,transparent);outline-offset:3px;border-radius:10px}

.wrap{max-width:var(--max);margin:auto;padding:18px 18px 64px}

::selection{
  background:var(--primary);
  color:var(--surface);
}
::-moz-selection{
  background:var(--primary);
  color:var(--surface);
}
a{
  color:var(--primary);
  text-decoration-color:color-mix(in srgb,var(--primary) 55%,transparent);
  text-underline-offset:3px;
}
a:hover{
  color:var(--primary);
  text-decoration-color:var(--primary);
}
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid color-mix(in srgb,var(--primary) 55%,transparent);
  outline-offset:3px;
  border-radius:8px;
}
.links a{
  color:var(--text);
  transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease;
}
.links a:hover{
  color:var(--primary);
  border-color:color-mix(in srgb,var(--primary) 45%,var(--outline-soft));
  transform:translateY(-1px);
}
.top{
  position:sticky;top:10px;z-index:10;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:10px 12px;
  background:color-mix(in srgb,var(--surface) 90%,transparent);
  border:1px solid color-mix(in srgb,var(--outline-soft) 72%,transparent);
  border-radius:22px;
  box-shadow:0 5px 18px rgba(31,25,35,.06);
  backdrop-filter:blur(16px);
}
.brand{
  display:flex;align-items:center;gap:11px;
  color:var(--text);font-weight:800;letter-spacing:-.02em;
}
.brand::before{
  content:"";
  display:block;
  width:42px;height:42px;flex:0 0 42px;
  border-radius:13px;
  background-image:url("/file_0000000088cc81fa8f34145aeb33080a.png");
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  box-shadow:0 5px 12px rgba(103,80,164,.18);
}
.brand small{display:block;color:var(--muted);font-size:11px;font-weight:600;letter-spacing:.01em}
.pill{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 12px;border-radius:999px;
  background:var(--primary-soft);color:var(--primary);
  font-size:11px;font-weight:800;letter-spacing:.07em;
}
.hero{
  margin-top:16px;
  padding:30px;
  border:1px solid var(--outline-soft);
  border-radius:30px;
  background:linear-gradient(135deg,var(--surface) 0%,var(--surface-2) 100%);
}
.eyebrow{margin:0 0 8px;color:var(--primary);font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.hero h1{display:flex;align-items:center;gap:14px;margin:0 0 12px;font-size:clamp(36px,7vw,62px);line-height:1.03;letter-spacing:-.05em}
.hero h1::before{content:"";display:inline-block;width:clamp(46px,7vw,68px);height:clamp(46px,7vw,68px);flex:0 0 clamp(46px,7vw,68px);border-radius:18px;background-image:url("https://i.ibb.co/G41TFVWY/1000122825-png.png");background-size:cover;background-position:center;background-repeat:no-repeat;box-shadow:0 6px 18px rgba(103,80,164,.18);animation:ritavSoftFloat 4s ease-in-out infinite}

.hero p{max-width:820px;margin:0;color:var(--muted);font-size:18px}
.meta{margin-top:12px!important;font-size:13px!important}
.links{
  display:flex;flex-wrap:wrap;gap:8px;margin-top:22px
}
.links a{
  padding:9px 13px;border:1px solid var(--outline-soft);
  border-radius:999px;background:var(--surface);
  color:var(--text);font-size:13px;font-weight:750
}
.links a:hover{background:var(--surface-3);text-decoration:none}
.grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:12px;margin:14px 0
}
.card{
  padding:20px;border:1px solid var(--outline-soft);
  border-radius:22px;background:var(--surface);
  box-shadow:0 4px 16px rgba(31,25,35,.045)
}
.card h3{margin:0 0 7px;font-size:18px;letter-spacing:-.015em}
.card p{margin:0;color:var(--muted)}
.section{
  padding:24px;margin:14px 0;
  border:1px solid var(--outline-soft);
  border-radius:24px;
  background:var(--surface)
}
.section h2{margin:0 0 9px;font-size:24px;line-height:1.2;letter-spacing:-.025em}
.section h3{margin:20px 0 7px}
.section p,.section li{color:var(--muted)}
.section ul{padding-left:23px}
.notice{
  border-color:color-mix(in srgb,var(--primary) 32%,var(--outline-soft));
  background:var(--primary-soft)
}
.warning{
  border-color:color-mix(in srgb,var(--danger) 35%,var(--outline-soft));
  background:var(--danger-soft)
}

@keyframes ritavFadeUp{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes ritavSoftFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-3px)}
}
.hero,.section,.card{
  animation:ritavFadeUp .55s ease both;
}
.card:nth-child(2){animation-delay:.06s}
.card:nth-child(3){animation-delay:.12s}
.card:nth-child(4){animation-delay:.18s}
.brand::before{animation:ritavSoftFloat 4s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;scroll-behavior:auto!important}
}

.footer{
  margin-top:26px;padding:22px 4px 0;
  border-top:1px solid var(--outline-soft);
  color:var(--muted);font-size:13px
}
.toc{columns:2;column-gap:34px}
.toc a{display:block;margin:5px 0}
.status-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.status{
  display:inline-flex;padding:8px 12px;border-radius:12px;
  background:var(--surface);border:1px solid var(--outline-soft);
  color:var(--muted);font-size:12px;font-weight:700
}
.callout{
  display:flex;align-items:flex-start;gap:12px;
  padding:15px 16px;margin-top:16px;border-radius:18px;
  background:var(--surface-2);border:1px solid var(--outline-soft)
}
.callout strong{color:var(--text)}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#141218;--surface:#1d1b20;--surface-2:#211f26;--surface-3:#4a4458;
    --text:#e6e1e5;--muted:#cac4d0;--outline:#938f99;--outline-soft:#49454f;
    --primary:#d0bcff;--primary-soft:#332b41;--secondary:#cbc3d0;
    --danger:#ffb4ab;--danger-soft:#3b2021
  }
  body{
    background:
      radial-gradient(circle at 90% 0%,rgba(208,188,255,.09),transparent 34rem),
      linear-gradient(180deg,#141218 0%,#18161b 100%)
  }
  .top{box-shadow:0 5px 18px rgba(0,0,0,.28)}
  .brand::before{box-shadow:0 5px 18px rgba(0,0,0,.35)}
  .notice{color:var(--text)}
}
@media(max-width:640px){
  .wrap{padding:12px 12px 42px}
  .top{position:relative;top:auto;align-items:flex-start}
  .hero{padding:23px 19px;border-radius:24px}
  .hero h1{font-size:43px}
  .section{padding:20px;border-radius:20px}
  .toc{columns:1}
}