/* GLYP features — one page, two skins, sharing the changelog's design tokens.
   [data-site=world] wears glyp.world's e-paper light chrome; [data-site=online]
   (and the pre-JS default) wears glyp.online's dark broadcast chrome. */
@font-face{font-family:'Silkscreen';font-style:normal;font-weight:400;src:url(fonts/silkscreen-400-latin.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Silkscreen';font-style:normal;font-weight:700;src:url(fonts/silkscreen-700-latin.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Pixelify Sans';font-style:normal;font-weight:400 700;src:url(fonts/pixelify-sans-latin.woff2) format('woff2');font-display:swap}

:root{
  color-scheme:dark;
  --paper:#111;--panel:#1a1a1c;--ink:#f5f5f2;--muted:#c8c8c2;--soft:#a7a7a0;
  --line:rgba(255,255,255,.16);--line2:rgba(255,255,255,.32);--accent:#5e5ce6;
  --tag-world:#4bc477;--tag-paint:#8a88ff;--tag-fleet:#ff6482;--tag-access:#e0a12b;
  --scan:rgba(23,23,23,.4);
  --sans:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --pixel:'Silkscreen',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --display:'Pixelify Sans',Inter,sans-serif;
  --pc1:3px;--pc2:6px;
  --pixel-corners:polygon(0 var(--pc2),var(--pc1) var(--pc2),var(--pc1) var(--pc1),var(--pc2) var(--pc1),var(--pc2) 0,calc(100% - var(--pc2)) 0,calc(100% - var(--pc2)) var(--pc1),calc(100% - var(--pc1)) var(--pc1),calc(100% - var(--pc1)) var(--pc2),100% var(--pc2),100% calc(100% - var(--pc2)),calc(100% - var(--pc1)) calc(100% - var(--pc2)),calc(100% - var(--pc1)) calc(100% - var(--pc1)),calc(100% - var(--pc2)) calc(100% - var(--pc1)),calc(100% - var(--pc2)) 100%,var(--pc2) 100%,var(--pc2) calc(100% - var(--pc1)),var(--pc1) calc(100% - var(--pc1)),var(--pc1) calc(100% - var(--pc2)),0 calc(100% - var(--pc2)))
}
:root[data-site=world]{
  color-scheme:light;
  --paper:#f4f4f0;--panel:#fffffc;--ink:#171717;--muted:#70736f;--soft:#a5a7a3;
  --line:rgba(23,23,23,.12);--line2:rgba(23,23,23,.26);--accent:#ff5c5c;
  --tag-world:#219b65;--tag-paint:#4a48c9;--tag-fleet:#d13c5e;--tag-access:#a9741a;
  --scan:rgba(23,23,23,.5)
}

*{box-sizing:border-box}
html,body{margin:0}
body{min-height:100dvh;background:var(--paper);color:var(--ink);font-family:var(--sans);transition:background .18s ease,color .18s ease}
body::after{content:"";position:fixed;inset:0;z-index:2000;pointer-events:none;background:linear-gradient(var(--scan) .5px,transparent .5px) 0 0/100% 3px,linear-gradient(90deg,var(--scan) .5px,transparent .5px) 0 0/3px 100%;opacity:.045}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2px dotted var(--accent);outline-offset:2px}

.feat{max-width:860px;margin:0 auto;padding:26px 22px max(40px,env(safe-area-inset-bottom))}
.feat-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-bottom:18px;border-bottom:1.5px solid var(--line2)}
.feat-brand{display:flex;align-items:center;gap:8px;color:var(--ink);text-decoration:none}
.feat-brand b{display:grid;place-items:center;width:30px;height:30px;background:var(--ink);color:var(--paper);font:400 21px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;clip-path:var(--pixel-corners)}
.feat-brand span{font:700 12px/1 var(--pixel)}
.feat-brand small{color:var(--soft);font:400 8px/1 var(--pixel)}
.feat-switch{display:flex;gap:5px}
.feat-switch button{padding:9px 12px;border:1.5px solid var(--line2);background:var(--panel);color:var(--muted);font:400 9px/1 var(--pixel);text-transform:uppercase;letter-spacing:.02em;cursor:pointer;clip-path:var(--pixel-corners)}
.feat-switch button:hover{color:var(--ink)}
.feat-switch button.active{background:var(--accent);border-color:var(--accent);color:#fff}
/* Pixelify Sans ships fi/fl ligatures that collapse into an unreadable glyph. */
.feat-lead,.card h3,.group-blurb{font-variant-ligatures:none;font-feature-settings:"liga" 0,"clig" 0}
.feat-lead{margin:18px 0 6px;color:var(--muted);font-family:var(--display);font-size:16px;line-height:1.5}

.group{margin-top:34px}
.group>h2{margin:0;color:var(--accent);font:700 13px/1 var(--pixel);letter-spacing:.05em}
.group>h2::before{content:"⠿ ";color:var(--soft)}
.group-blurb{margin:9px 0 0;color:var(--muted);font-family:var(--display);font-size:14px;line-height:1.5}
.cards{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.card{display:flex;flex-direction:column;padding:15px 16px;border:1.5px solid var(--line);background:var(--panel);clip-path:var(--pixel-corners)}
.card .tag{align-self:flex-start;margin-bottom:9px;padding:4px 7px 3px;font:400 8px/1 var(--pixel);text-transform:uppercase;letter-spacing:.04em;color:#fff;clip-path:var(--pixel-corners)}
.card.tag-world .tag{background:var(--tag-world)}
.card.tag-paint .tag{background:var(--tag-paint)}
.card.tag-fleet .tag{background:var(--tag-fleet)}
.card.tag-access .tag{background:var(--tag-access)}
.card h3{margin:0;font-family:var(--display);font-size:16px;font-weight:700;line-height:1.25}
.card p{margin:7px 0 0;color:var(--muted);font-size:12.5px;line-height:1.6}
.card .scope{margin-top:9px;color:var(--soft);font:400 8px/1 var(--pixel);text-transform:uppercase;letter-spacing:.03em}
.card .scope::before{content:"+ "}
.feat-empty{margin-top:30px;color:var(--soft);font-family:var(--pixel);font-size:10px}
.feat-foot{display:flex;justify-content:space-between;gap:14px;margin-top:40px;padding-top:14px;border-top:1.5px dotted var(--line2);color:var(--soft);font:400 8px/1.6 var(--pixel);text-transform:uppercase}
.feat-foot a{color:var(--muted);text-decoration:none;border-bottom:1px dotted var(--soft)}
.feat-foot a:hover{color:var(--ink)}
@media(max-width:520px){
  .feat{padding-inline:14px}
  .feat-head{flex-wrap:wrap}
  .cards{grid-template-columns:1fr}
  .feat-foot{flex-direction:column;gap:6px}
}
@media(prefers-reduced-motion:reduce){body{transition:none}}