:root{
  --paper:#F4F3FB;--surface:#FFFFFF;--ink:#17153A;--muted:#5E5B86;--line:#DAD7EF;
  --cobalt:#2B3AE8;--on-cobalt:#FFFFFF;--link:#2B3AE8;--butter:#FFD23F;--pink:#FF7AA8;--mint:#2FB67C;--violet:#9A7BFF;
  --brand:"Bricolage Grotesque",system-ui,sans-serif;--text:var(--brand);--lh:1.65;
  box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--paper:#15133A;--surface:#1E1C4A;--ink:#EEEDFF;--muted:#A8A5D6;--line:#34316A;--cobalt:#4452F0;--link:#9EA7FF;color-scheme:dark}
}
:root[data-theme="dark"]{--paper:#15133A;--surface:#1E1C4A;--ink:#EEEDFF;--muted:#A8A5D6;--line:#34316A;--cobalt:#4452F0;--link:#9EA7FF;color-scheme:dark}
:root[lang="ar"]{--text:"Readex Pro","Noto Sans Arabic",Tahoma,sans-serif;--lh:1.8}
:root[lang="ja"]{--text:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",Meiryo,sans-serif;--lh:1.9}
:root[lang="zh-CN"]{--text:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;--lh:1.85}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 7rem)}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--text);font-size:1rem;line-height:var(--lh);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit}
img,svg{max-width:100%}
:focus-visible{outline:3px solid var(--butter);outline-offset:2px}
.wrap{max-width:74rem;margin-inline:auto;padding-inline:clamp(1rem,4vw,2rem)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;inset-inline-start:1rem;top:-3rem;background:var(--butter);color:#17153A;padding:.5rem 1rem;z-index:10}
.skip:focus{top:calc(env(safe-area-inset-top,0px) + .5rem)}

/* header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--paper);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:.75rem 1rem;padding-block:.75rem;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:.6rem;text-decoration:none;margin-inline-end:auto;min-width:0}
.logo svg{width:28px;height:28px;flex:none}
.logo b{font-family:var(--brand);font-weight:800;font-size:1.3rem;letter-spacing:-.02em;white-space:nowrap}
:root[lang="ar"] .logo b,:root[lang="ja"] .logo b,:root[lang="zh-CN"] .logo b{font-family:var(--text);letter-spacing:0}
.logo span{color:var(--muted);font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:640px){.logo span{display:none}}
.langs{display:flex;gap:.2rem;background:var(--surface);border:1px solid var(--line);padding:.2rem;border-radius:.6rem;overflow-x:auto;max-width:100%}
.langs a{font-size:.88rem;text-decoration:none;padding:.3rem .65rem;border-radius:.4rem;white-space:nowrap}
.langs a[aria-current]{background:var(--cobalt);color:var(--on-cobalt)}
.langs a:not([aria-current]):hover{background:var(--line)}
.theme{font:inherit;border:1px solid var(--line);background:var(--surface);color:var(--ink);width:2.3rem;height:2.3rem;border-radius:.6rem;cursor:pointer;flex:none}
.plats{display:flex;gap:.5rem;padding-block:.1rem .75rem;overflow-x:auto;scrollbar-width:none}
.plats a{font-size:.88rem;display:flex;align-items:center;gap:.45rem;border:1px solid var(--line);text-decoration:none;padding:.25rem .8rem;border-radius:999px;white-space:nowrap}
.plats a[aria-current]{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.sq{width:.6rem;height:.6rem;background:var(--c,var(--muted));flex:none;display:inline-block}

/* lead */
.lead{--s:12px;margin-block:1.5rem 2rem;background-color:var(--cobalt);color:var(--on-cobalt);padding:clamp(1.5rem,5vw,3.5rem);position:relative;
  clip-path:polygon(0 var(--s),var(--s) var(--s),var(--s) 0,calc(100% - var(--s)) 0,calc(100% - var(--s)) var(--s),100% var(--s),100% calc(100% - var(--s)),calc(100% - var(--s)) calc(100% - var(--s)),calc(100% - var(--s)) 100%,var(--s) 100%,var(--s) calc(100% - var(--s)),0 calc(100% - var(--s)));
  background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:24px 24px;animation:boot .5s steps(6) both}
@keyframes boot{from{clip-path:inset(0 0 100% 0)}}
@media (prefers-reduced-motion:reduce){.lead{animation:none}}
.kicker{display:inline-block;background:var(--butter);color:#17153A;font-weight:700;font-size:.85rem;padding:.1rem .6rem;margin-bottom:1rem}
.lead h2{font-size:clamp(1.8rem,5vw,3.4rem);line-height:1.15;margin:0 0 1rem;font-weight:800;max-width:20ch;letter-spacing:-.015em}
:root[lang="ja"] .lead h2,:root[lang="zh-CN"] .lead h2{max-width:16em;letter-spacing:0;line-height:1.3}
:root[lang="ar"] .lead h2{letter-spacing:0;line-height:1.35}
.lead h2 a{text-decoration:none}
.lead h2 a:hover{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:6px}
.lead>p{font-size:clamp(1rem,1.8vw,1.2rem);max-width:55ch;margin:0 0 1.2rem;opacity:.92}
.lead .meta,.lead .meta .p,.lead .src,.lead .src a{color:var(--on-cobalt)}
.lead .meta{padding-inline-end:clamp(0px,10vw,7rem)}
.crystal{position:absolute;inset-inline-end:clamp(1rem,4vw,3rem);bottom:clamp(1rem,4vw,2.5rem);width:clamp(56px,9vw,96px)}
@media (max-width:600px){.crystal{display:none}.lead .meta{padding:0}}

/* lists */
.page-title{font-size:clamp(1.8rem,4vw,2.6rem);line-height:1.2;margin:2rem 0 .5rem}
.cols{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3rem);padding-block:1rem 3rem}
@media (max-width:860px){.cols{grid-template-columns:1fr}}
.sec{font-size:1.1rem;font-weight:700;margin:0 0 .5rem;padding-bottom:.5rem;border-bottom:2px solid var(--ink)}
.item{padding-block:1.2rem;border-bottom:1px solid var(--line);display:grid;gap:.35rem}
.item h3{margin:0;font-size:clamp(1.1rem,2.2vw,1.3rem);line-height:1.4;font-weight:700}
.item h3 a{text-decoration:none}
.item h3 a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.item p{margin:0;color:var(--muted);max-width:62ch}
.meta{display:flex;flex-wrap:wrap;gap:.3rem .9rem;align-items:center;font-size:.85rem;color:var(--muted)}
.meta .p{display:inline-flex;align-items:center;gap:.35rem;color:var(--ink);font-weight:600}
.src{font-size:.85rem;color:var(--muted)}
.src a{color:var(--link);font-weight:600}
.empty{padding:2rem 0;color:var(--muted)}
.rel{list-style:none;margin:0;padding:0}
.rel li{display:grid;grid-template-columns:4.4rem 1fr;gap:.8rem;padding-block:.8rem;border-bottom:1px solid var(--line);align-items:start}
.day{background:var(--surface);border:1px solid var(--line);text-align:center;padding:.3rem .2rem;font-size:.78rem;line-height:1.3;color:var(--muted);display:block}
.day b{display:block;font-size:1.05rem;color:var(--ink)}
.rel strong{display:block;font-weight:700;line-height:1.35}
.rel span{font-size:.85rem;color:var(--muted)}

/* article */
.crumbs{display:flex;gap:.5rem;font-size:.88rem;color:var(--muted);margin-top:1.5rem}
.crumbs a{text-decoration:none}.crumbs a:hover{text-decoration:underline}
.story{max-width:44rem;padding-block:1rem 2rem}
.story h1{font-size:clamp(1.8rem,4.6vw,2.9rem);line-height:1.18;margin:.6rem 0 1rem;font-weight:800;letter-spacing:-.01em}
:root[lang="ar"] .story h1,:root[lang="ja"] .story h1,:root[lang="zh-CN"] .story h1{letter-spacing:0;line-height:1.4}
.dek{font-size:1.2rem;color:var(--muted);margin:0 0 2rem;padding-inline-start:1rem;border-inline-start:4px solid var(--butter)}
.body{font-size:1.08rem}
.body p{margin:0 0 1.2em}
.body h2,.body h3{line-height:1.3;margin:1.8em 0 .6em}
.body a{color:var(--link)}
.body blockquote{margin:1.5em 0;padding-inline-start:1rem;border-inline-start:4px solid var(--cobalt);color:var(--muted)}
.faq,.sources{margin-top:2.5rem}
.faq h2,.sources h2{font-size:1.1rem;margin:0 0 .75rem}
.faq details{border-top:1px solid var(--line);padding:.8rem 0}
.faq summary{cursor:pointer;font-weight:600}
.faq details p{margin:.5rem 0 0;color:var(--muted)}
.sources{background:var(--surface);border:1px solid var(--line);padding:1.2rem 1.4rem}
.sources ul{margin:0 0 .75rem;padding-inline-start:1.2rem}
.sources a{color:var(--link);font-weight:600}
.sources p{margin:0;font-size:.9rem;color:var(--muted)}
.tags{list-style:none;padding:0;margin:1.5rem 0 0;display:flex;flex-wrap:wrap;gap:.4rem}
.tags li{font-size:.82rem;border:1px solid var(--line);padding:.1rem .6rem;color:var(--muted)}
.related{padding-bottom:3rem}
.related .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));column-gap:2rem}

/* footer + gate */
.foot{border-top:1px solid var(--line);padding-block:1.5rem;color:var(--muted);font-size:.9rem}
.foot p{margin:0 0 .5rem;max-width:70ch}
.foot .links{display:flex;flex-wrap:wrap;gap:1.2rem}
.gate main{padding-block:12vh}
.gate h1{font-family:var(--brand);font-size:clamp(2.4rem,7vw,4.5rem);margin:0 0 2rem;letter-spacing:-.03em}
.gate ul{list-style:none;padding:0;margin:0;display:grid;gap:.6rem;max-width:34rem}
.gate a{display:flex;flex-direction:column;gap:.2rem;text-decoration:none;border:1px solid var(--line);background:var(--surface);padding:1rem 1.2rem;font-weight:700;font-size:1.15rem}
.gate a:hover{border-color:var(--cobalt)}
.gate a span{font-weight:400;font-size:.9rem;color:var(--muted)}
.theme{display:grid;place-items:center}
.lead .sq{outline:1.5px solid rgba(255,255,255,.85)}
.related .item{align-content:start}
@media (max-width:640px){
  .bar{gap:.6rem}
  .logo{order:1}.theme{order:2}.langs{order:3;flex-basis:100%;justify-content:space-between}
}

/* sections */
:root{--red:#E5484D}
.secs{display:flex;gap:.2rem 1.4rem;padding-block:.1rem .6rem;overflow-x:auto;scrollbar-width:none}
.secs a{text-decoration:none;font-weight:700;font-size:1.02rem;padding-block:.25rem;border-bottom:3px solid transparent;white-space:nowrap}
.secs a[aria-current]{border-bottom-color:var(--c,var(--ink))}
.secs a:not([aria-current]):hover{border-bottom-color:var(--line)}
.page-title{border-inline-start:6px solid var(--c,var(--ink));padding-inline-start:.8rem}
.block{margin-bottom:2.2rem}
.sec-head{border-bottom-color:var(--c)}
.sec-head a{text-decoration:none}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:2rem}
.grid2 .item{align-content:start}
@media (max-width:640px){.grid2{grid-template-columns:1fr}}
.more{display:inline-block;margin-top:.8rem;font-weight:700;font-size:.92rem;color:var(--link)}
.secb{font-weight:700;color:var(--ink);padding-inline-start:.45rem;border-inline-start:3px solid var(--c)}
.lead .secb{color:var(--on-cobalt);border-color:var(--butter)}
.item.compact{padding-block:.8rem;gap:.2rem}
.item.compact h3{font-size:1rem}
aside .rel{margin-bottom:2rem}
.foot-secs{display:flex;flex-wrap:wrap;gap:1.2rem;margin-bottom:.8rem;font-weight:700}
.foot-secs a{text-decoration:none;color:var(--ink)}
@media (max-width:640px){.top{position:static}}
.gate a.suggest{border-color:var(--cobalt);border-width:2px}

/* promos */
.promo{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .7rem;border:1px dashed var(--line);background:var(--surface);padding:.7rem 1rem;margin:1rem 0;font-size:.95rem}
.promo-label{font-size:.72rem;font-weight:700;letter-spacing:.02em;color:var(--muted);border:1px solid var(--line);padding:0 .4rem}
.promo a{color:var(--link);font-weight:700}
.promo-bar{background:var(--butter);color:#17153A}
.promo-bar .promo{max-width:74rem;margin:0 auto;border:0;background:transparent;justify-content:center;padding:.45rem clamp(1rem,4vw,2rem)}
.promo-bar .promo a,.promo-bar .promo-label{color:#17153A;border-color:rgba(23,21,58,.3)}
.foot .promo{margin:0 0 1rem}