:root{
    --bg:#07090E; --bg-2:#0A0D14; --panel:#0E121B;
    --line:rgba(233,228,216,.09); --line-2:rgba(233,228,216,.17); --hair:rgba(233,228,216,.055);
    --text:#ECEAE2; --dim:#9AA2AE; --faint:#626B78;
    --gold:#CBA45E; --gold-hi:#E7CB92; --ice:#82B4FF;
    --on-gold:#0A0D13;
    --maxw:720px; --gutter:clamp(22px,5vw,64px);
    --mincho:"Zen Old Mincho","Hiragino Mincho ProN",serif;
    --jp:"Zen Kaku Gothic New",system-ui,"Hiragino Kaku Gothic ProN",sans-serif;
    --serif:"Fraunces","Zen Old Mincho",Georgia,serif;
    --mono:"Space Mono",ui-monospace,monospace;
    --ease:cubic-bezier(.22,.68,.16,1);
  }
  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--jp); font-size:16px; line-height:1.9; -webkit-font-smoothing:antialiased; letter-spacing:.01em;
    background-image:radial-gradient(60% 40% at 82% -5%,rgba(203,164,94,.08),transparent 60%),radial-gradient(50% 40% at 5% 8%,rgba(130,180,255,.05),transparent 60%); background-attachment:fixed; }
  a{ color:inherit; text-decoration:none; }
  .wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter); }

  /* header */
  header.hd{ position:sticky; top:0; z-index:20; background:color-mix(in srgb,var(--bg) 78%,transparent); backdrop-filter:blur(14px) saturate(1.3); -webkit-backdrop-filter:blur(14px) saturate(1.3); border-bottom:1px solid var(--line); }
  header.hd .row{ max-width:1160px; margin:0 auto; padding:0 var(--gutter); height:70px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
  .brand{ display:flex; align-items:center; }
  .brand img{ height:24px; width:auto; display:block; }
  .hd nav{ display:flex; align-items:center; gap:24px; }
  .hd a.back{ font-family:var(--mono); font-size:12px; letter-spacing:.08em; color:var(--dim); transition:color .25s; }
  .hd a.back:hover{ color:var(--text); }
  .hd a.back .ar{ color:var(--gold); }
  .cta-btn{ font-family:var(--jp); font-weight:700; font-size:13px; padding:10px 18px; border-radius:3px; background:linear-gradient(180deg,var(--gold-hi),var(--gold)); color:var(--on-gold); white-space:nowrap; transition:transform .3s var(--ease),box-shadow .3s; }
  .cta-btn:hover{ transform:translateY(-2px); box-shadow:0 10px 30px -12px rgba(203,164,94,.6); }
  @media(max-width:560px){ .hd a.back{ display:none; } }

  /* article head */
  .post{ padding:clamp(48px,8vw,96px) 0 clamp(30px,5vw,54px); }
  .eyebrow{ font-family:var(--mono); font-size:11.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--gold); display:inline-flex; align-items:center; gap:.8em; }
  .eyebrow::before{ content:""; width:34px; height:1px; background:linear-gradient(90deg,var(--gold),transparent); }
  h1{ font-family:var(--mincho); font-weight:900; font-size:clamp(29px,5.4vw,50px); line-height:1.32; letter-spacing:.01em; margin:26px 0 0; text-wrap:balance; }
  .meta{ margin-top:26px; padding-top:22px; border-top:1px solid var(--line); font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--faint); display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
  .meta span{ color:var(--line-2); }

  /* body */
  .lead{ font-family:var(--mincho); font-weight:600; font-size:clamp(17px,2.4vw,20px); line-height:1.95; color:var(--text); margin:40px 0 0; }
  .body{ margin-top:14px; }
  .body h2{ font-family:var(--mincho); font-weight:700; font-size:clamp(19px,2.8vw,25px); line-height:1.5; margin:52px 0 0; letter-spacing:.01em; padding-left:16px; border-left:2px solid var(--gold); }
  .body p{ margin:18px 0 0; color:#DBD8CE; }
  .body strong{ color:var(--text); font-weight:700; }
  .g{ color:var(--gold-hi); }

  /* use-cases */
  .uses{ margin:26px 0 0; display:flex; flex-direction:column; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:6px; overflow:hidden; }
  .uses .u{ background:linear-gradient(180deg,var(--panel),var(--bg-2)); padding:22px 24px; }
  .uses .u .t{ font-family:var(--jp); font-weight:700; font-size:15.5px; color:var(--text); display:flex; align-items:baseline; gap:12px; }
  .uses .u .t .k{ font-family:var(--mono); font-size:12px; color:var(--gold); flex:none; }
  .uses .u p{ margin:8px 0 0 0; font-size:14px; color:var(--dim); line-height:1.8; }

  /* callout */
  .callout{ margin:34px 0 0; border:1px solid var(--line-2); border-radius:6px; background:radial-gradient(120% 120% at 100% 0%,rgba(203,164,94,.08),transparent 55%),linear-gradient(180deg,var(--panel),var(--bg-2)); padding:26px 26px 28px; }
  .callout h3{ font-family:var(--mincho); font-weight:700; font-size:17px; margin:0; color:var(--gold-hi); }
  .callout p{ margin:14px 0 0; font-size:14.5px; color:#D6D3C9; line-height:1.9; }

  /* signoff */
  .signoff{ margin:46px 0 0; padding:26px 0 0; border-top:1px solid var(--line); font-family:var(--mincho); font-size:16px; line-height:1.95; color:var(--dim); }
  .signoff b{ color:var(--text); font-weight:600; }

  /* cta band */
  .cta{ margin-top:clamp(40px,7vw,80px); border-top:1px solid var(--line); background:var(--bg-2); position:relative; overflow:hidden; text-align:center; }
  .cta::before{ content:""; position:absolute; inset:0; background:radial-gradient(60% 130% at 50% 100%,rgba(203,164,94,.14),transparent 60%); }
  .cta .wrap{ position:relative; padding:clamp(56px,8vw,92px) var(--gutter); }
  .cta h2{ font-family:var(--mincho); font-weight:900; font-size:clamp(23px,4vw,38px); line-height:1.4; margin:0; }
  .cta p{ color:var(--dim); margin:18px auto 0; max-width:40ch; font-size:15px; }
  .cta .big{ font-family:var(--serif); font-style:italic; font-weight:300; font-size:clamp(18px,2.6vw,26px); color:var(--gold); margin-top:14px; }
  .cta .cta-btn{ display:inline-block; margin-top:30px; padding:15px 30px; font-size:15px; }
  .cta .cta-btn .ar{ margin-left:6px; }

  /* footer */
  footer.ft{ border-top:1px solid var(--line); background:var(--bg); }
  footer.ft .row{ max-width:1160px; margin:0 auto; padding:34px var(--gutter); display:flex; flex-wrap:wrap; gap:16px 28px; align-items:center; justify-content:space-between; }
  footer.ft img{ height:24px; }
  footer.ft .cp{ font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; color:var(--faint); }
  footer.ft nav{ display:flex; gap:22px; font-size:13px; color:var(--dim); }
  footer.ft nav a:hover{ color:var(--gold); }

  :focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:2px; }
  @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} *{transition:none!important;} }