/* Pinteza shell: tokens, fonts, sticky nav, edition picker, footer. Loaded on every page.
   Values come from the 2026-11 Claude Design handoff (design/Pinteza Homepage.html). */
@font-face{font-family:Oxanium;src:url(/fonts/oxanium-medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Oxanium;src:url(/fonts/oxanium-semibold.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Oxanium;src:url(/fonts/oxanium-bold.woff2) format("woff2");font-weight:700 900;font-display:swap}
@font-face{font-family:Inter;src:url(/fonts/inter-regular.woff2) format("woff2");font-weight:400 500;font-display:swap}
@font-face{font-family:Inter;src:url(/fonts/inter-semibold.woff2) format("woff2");font-weight:600 900;font-display:swap}
@font-face{font-family:Lora;src:url(/fonts/lora-regular.woff2) format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:Lora;src:url(/fonts/lora-italic.woff2) format("woff2");font-weight:400 700;font-style:italic;font-display:swap}
/* Metric-matched fallbacks, so the swap to the real fonts does not move the layout. */
@font-face{font-family:"Inter Fallback";src:local("Arial"),local("Roboto"),local("Helvetica");size-adjust:104%;ascent-override:90.2%;descent-override:22.5%;line-gap-override:0%}
@font-face{font-family:"Oxanium Fallback";src:local("Arial Bold"),local("Arial"),local("Roboto"),local("Helvetica");size-adjust:93%;ascent-override:79%;descent-override:21%;line-gap-override:0%}
:root{
  --hbg:#0b1014;--hs1:#10171e;--hln:#1c2630;--htx:#eef2f5;--hmu:#9aa5b1;--g:#3dd68c;--y:#f5c842;--teal:#18493b;
  --ease:cubic-bezier(.2,.8,.25,1);--spring:cubic-bezier(.34,1.56,.64,1);
  --fd:Oxanium,"Oxanium Fallback",sans-serif;--ft:Inter,"Inter Fallback",system-ui,-apple-system,"Segoe UI",sans-serif;--fs:Lora,Georgia,"Times New Roman",serif;
  --focus:#7fd79f;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:clip;scroll-behavior:smooth;scroll-padding-top:70px;-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--hbg)}
body{margin:0;background:var(--hbg);color:var(--htx);font:400 16px/1.5 var(--ft);overflow-x:clip;-webkit-font-smoothing:antialiased}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.zz,.zz *{animation-play-state:paused!important}
.eye{display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px 10px;font:600 12.5px/1.2 var(--fd);letter-spacing:.18em;text-transform:uppercase;color:var(--y)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ── sticky nav ── */
nav.top{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 28px;background:rgba(11,16,20,.95);border-bottom:1px solid var(--hln)}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;min-width:0;color:inherit}
.brand img{height:24px;width:auto;display:block}
.brand .tag{font:600 11.5px/1 var(--fd);letter-spacing:.16em;text-transform:uppercase;color:var(--hmu);padding-left:14px;border-left:1px solid #2a3440;white-space:nowrap}
.top .r{display:flex;align-items:center;gap:18px}
.top .r>a{font:600 14px/1 var(--ft);color:var(--hmu);text-decoration:none;white-space:nowrap;transition:color .15s}
.top .r>a:hover{color:var(--htx)}
.top .r>a.get{color:#06140b;background:var(--g);padding:11px 16px;border-radius:10px;transition:background .15s}
.top .r>a.get:hover{background:#5fe3a3;color:#06140b}

/* ── edition picker: a native <details>, so it works with no JS; shell.js adds Esc, arrows and search ── */
.langpick{position:relative}
.lp-btn{display:flex;align-items:center;gap:7px;height:38px;padding:0 12px;border-radius:10px;border:1px solid #26313c;background:var(--hs1);color:var(--htx);font:600 13px/1 var(--fd);letter-spacing:.06em;cursor:pointer;transition:border-color .2s;list-style:none;user-select:none;-webkit-user-select:none}
.lp-btn::-webkit-details-marker{display:none}
.lp-btn:hover,.langpick[open] .lp-btn{border-color:var(--g)}
.lp-btn svg{width:16px;height:16px}
.lp-btn .ch{width:12px;height:12px;transition:transform .2s var(--ease)}
.langpick[open] .lp-btn .ch{transform:rotate(180deg)}
.lp-panel{position:absolute;right:0;top:calc(100% + 10px);z-index:50;width:310px;padding:8px;border-radius:16px;background:#0f151b;border:1px solid #26313c;box-shadow:0 30px 60px -20px #000;transform-origin:top right;animation:lpin .18s var(--ease)}
@keyframes lpin{from{opacity:0;transform:translateY(-6px) scale(.97)}}
.lp-head{padding:10px 10px 12px}
.lp-head b{display:block;font:700 12px/1 var(--fd);letter-spacing:.16em;text-transform:uppercase;color:var(--y)}
.lp-head span{display:block;font-size:12.5px;line-height:1.4;color:var(--hmu);margin-top:7px}
.lp-q{display:block;width:100%;height:40px;margin:0 0 6px;padding:0 12px;border-radius:10px;border:1px solid #26313c;background:#0a0e12;color:var(--htx);font:500 16px var(--ft)}
.lp-q[hidden]{display:none}
.lp-list{list-style:none;display:grid;gap:2px;max-height:min(56vh,420px);overflow:auto;margin:0;padding:0}
.lp-list a{display:grid;grid-template-columns:36px minmax(0,1fr) 18px;align-items:center;gap:12px;padding:9px 10px;border-radius:12px;color:var(--htx);text-decoration:none}
.lp-list a:hover,.lp-list a:focus-visible{background:#16202a;outline:none}
.lp-code{display:grid;place-items:center;width:36px;height:38px;border-radius:8px;border:1.5px solid #2c3743;font:700 12px/1 var(--fd);letter-spacing:.04em}
.lp-list a[aria-current] .lp-code{background:var(--g);border-color:var(--g);color:#06140b}
.lp-nm{font-weight:600;font-size:14.5px;line-height:1.2}
.lp-nm small{display:block;font-weight:400;font-size:12.5px;color:var(--hmu);margin-top:2px}
.lp-list svg{width:18px;height:18px;color:var(--g);opacity:0}
.lp-list a[aria-current] svg{opacity:1}
.lp-foot{margin:6px 4px 2px;padding:10px 6px 6px;border-top:1px solid var(--hln);font-size:12.5px;color:var(--hmu)}

/* ── footer ── */
footer.ft{border-top:1px solid var(--hln);max-width:1240px;margin:0 auto;padding:44px 28px 30px;color:var(--hmu);font-size:13.5px}
footer.ft a{color:var(--hmu);text-decoration:none}
footer.ft a:hover{color:var(--htx)}
.ft-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:40px 64px;align-items:start}
.ft-brand img{height:26px;width:auto;display:block}
.ft-brand p{margin:12px 0 0;max-width:34ch;line-height:1.5}
.ft-links{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:20px;line-height:1.4}
.ft-links a{font-weight:600;white-space:nowrap}
.ft-ed b{display:block;font:600 12px/1 var(--fd);letter-spacing:.18em;text-transform:uppercase;color:var(--y)}
.ft-ed>p{margin:8px 0 0;line-height:1.45}
.ft-eds{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px;margin:16px 0 0;padding:0}
.ft-eds a{display:grid;grid-template-columns:40px minmax(0,1fr) 16px;align-items:center;gap:12px;padding:10px 12px 10px 10px;border-radius:14px;border:1px solid var(--hln);background:rgba(16,23,30,.5);color:var(--htx);transition:border-color .2s,background .2s,transform .2s var(--spring)}
.ft-eds a:hover{border-color:#2f3d4a;background:#121b23;transform:translateY(-2px);color:var(--htx)}
.ft-eds .lp-code{width:40px;height:42px;font-size:13px}
.ft-eds a[aria-current]{border-color:rgba(61,214,140,.45);background:linear-gradient(90deg,rgba(61,214,140,.12),rgba(16,23,30,.6))}
.ft-eds a[aria-current] .lp-code{background:var(--g);border-color:var(--g);color:#06140b}
.ft-eds .nm{font-weight:600;font-size:14.5px;line-height:1.2}
.ft-eds .nm small{display:block;font-weight:400;font-size:12.5px;color:var(--hmu);margin-top:3px}
.ft-eds svg{width:16px;height:16px;color:var(--g);opacity:0}
.ft-eds a[aria-current] svg{opacity:1}
.ft-eds .soon{display:grid;place-items:center;padding:10px 12px;border-radius:14px;border:1px dashed #2a3540;color:var(--hmu);font-size:13px;text-align:center;min-height:64px}
.ft-bot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px 20px;margin-top:36px;padding-top:20px;border-top:1px solid var(--hln);font-size:12.5px}
footer.ft a.studio{color:var(--htx);font-weight:600;text-decoration:underline;text-decoration-color:rgba(61,214,140,.5);text-underline-offset:3px}
footer.ft a.studio:hover{color:var(--g);text-decoration-color:var(--g)}
.soc{list-style:none;display:flex;gap:8px;margin:0;padding:0}
.soc a{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;border:1px solid var(--hln);background:rgba(16,23,30,.5);color:var(--hmu);transition:color .2s,border-color .2s,background .2s,transform .2s var(--spring)}
footer.ft .soc a:hover{color:#06140b;background:var(--g);border-color:var(--g);transform:translateY(-3px)}
.soc svg{width:19px;height:19px}
@media (max-width:1100px){.brand .tag{display:none}}
@media (max-width:960px){
  nav.top{padding:10px 14px}
  .top .r{gap:8px}
  .top .r>a:not(.get){display:none}
  .top .r>a.get{padding:10px 13px;font-size:13.5px}
  .lp-panel{position:fixed;left:12px;right:12px;top:60px;width:auto}
}
@media (max-width:860px){
  .ft-bot{flex-direction:column-reverse;align-items:flex-start}
  .soc a{width:46px;height:46px}
  .ft-top{grid-template-columns:minmax(0,1fr)}
  footer.ft{padding:36px 16px 26px}
  .ft-eds{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:340px){.top .r>a.get{padding:10px 10px;font-size:12.5px}.lp-btn{padding:0 8px;gap:4px}.brand img{height:20px}}
.ft-legal{margin:14px 0 0;font-size:12px;line-height:1.5;color:#7c8794;max-width:90ch}