:root{
  --paper: #fffaf0;
  --ink: #111827;
  --accent: #f97316;
  --accent2: #0ea5e9;
}

body{background:radial-gradient(900px 420px at 10% 0%, rgba(249,115,22,.12), transparent 60%), radial-gradient(800px 420px at 90% 5%, rgba(14,165,233,.10), transparent 60%), var(--paper); color:var(--ink);}
.wrap{max-width: 1020px; margin: 0 auto; padding: 1rem;}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}

.top{position:sticky; top:0; z-index:10; background:rgba(255,250,240,.86); backdrop-filter: blur(10px); border-bottom:1px solid rgba(0,0,0,.06);}
#logo a{font-weight:900; color:var(--accent); text-decoration:none;}
.tagline{color:rgba(17,24,39,.65);}

.split{display:grid; grid-template-columns: 320px minmax(0, 1fr); gap:1rem; align-items:start;}
.split__aside{background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:16px; padding:1rem; position:sticky; top:86px;}
.split__main{background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:16px; padding:1.25rem;}
.chip{height:120px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-weight:800; background:linear-gradient(135deg, rgba(249,115,22,.14), rgba(14,165,233,.12)); border:1px solid rgba(0,0,0,.06);}
.hint{margin-top:.8rem; color:rgba(17,24,39,.65); font-size:.95rem;}

@media (max-width: 980px){
  .split{grid-template-columns: 1fr;}
  .split__aside{position:relative; top:auto;}
}

#footer{background:#fff; border-top:1px solid rgba(0,0,0,.06);}
#footer .container{max-width:1020px; margin:0 auto; padding:1.2rem;}