/* Quintaphon "Studio" shared layer: menu bar, footer, search popup and dark base for inner pages */
:root{
  --sx-ink:#07090d;--sx-panel:#0e1219;--sx-panel-2:#131925;--sx-line:rgba(255,255,255,.08);--sx-line-2:rgba(255,255,255,.14);
  --sx-text:#eef2f7;--sx-muted:#8a94a6;--sx-dim:#5b6577;--sx-mint:#2fe0ae;
  --sx-display:"Bricolage Grotesque",Inter,sans-serif;--sx-mono:"JetBrains Mono",ui-monospace,monospace;
  color-scheme:dark;
}
html{background:var(--sx-ink)}
body{background:var(--sx-ink)!important;color:var(--sx-text)}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(var(--sx-line) 1px,transparent 1px),linear-gradient(90deg,var(--sx-line) 1px,transparent 1px);
  background-size:72px 72px;-webkit-mask-image:radial-gradient(ellipse 80% 50% at 50% 0%,#000 25%,transparent 70%);mask-image:radial-gradient(ellipse 80% 50% at 50% 0%,#000 25%,transparent 70%);opacity:.5}
main{position:relative;z-index:1}
h1{font-family:var(--sx-display);letter-spacing:-.035em}
::selection{background:rgba(47,224,174,.3)}
a{text-underline-offset:3px}

/* menu bar */
header.sx-head{position:fixed;top:14px;left:0;right:0;width:auto;z-index:60;display:flex;justify-content:center;padding:0 12px;background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;height:auto}
.sx-nav{display:flex;align-items:center;gap:6px;line-height:1.2;letter-spacing:0;padding:6px 6px 6px 14px;border:1px solid var(--sx-line-2);border-radius:999px;background:rgba(14,18,25,.78);-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);box-shadow:0 10px 40px -10px rgba(0,0,0,.6);font-family:Inter,system-ui,sans-serif}
.sx-brand{display:flex;align-items:center;margin-right:10px}
.sx-brand img{height:24px;width:auto;display:block}
.sx-nav a.sx-l{font-size:.86rem;font-weight:500;line-height:1.2;color:var(--sx-muted);padding:8px 12px;border-radius:999px;text-decoration:none;text-transform:none;letter-spacing:0;transition:.15s}
.sx-nav a.sx-l:hover,.sx-nav a.sx-l.on{color:var(--sx-text);background:var(--sx-line)}
.sx-k{display:flex;align-items:center;gap:10px;font:500 .84rem/1.2 Inter,sans-serif;color:var(--sx-muted);background:var(--sx-panel-2);border:1px solid var(--sx-line);padding:7px 8px 7px 12px;border-radius:999px;cursor:pointer;margin-left:6px}
.sx-k kbd{font:500 .7rem var(--sx-mono);border:1px solid var(--sx-line-2);border-radius:6px;padding:1px 6px;color:var(--sx-text);background:none}
header.sx-head #mobile-menu-button{display:none;width:36px;height:36px;padding:0;border-radius:999px;border:1px solid var(--sx-line);background:var(--sx-panel-2);color:var(--sx-text);place-items:center;cursor:pointer}
header.sx-head #mobile-menu-button svg{display:block}
header.sx-head #mobile-menu{display:none;position:absolute;top:58px;left:12px;right:12px;flex-direction:column;gap:0;padding:8px;border:1px solid var(--sx-line-2);border-radius:18px;background:rgba(14,18,25,.97);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 30px 60px -20px #000}
header.sx-head #mobile-menu.active{display:flex}
header.sx-head #mobile-menu a{padding:12px 14px;border-radius:10px;color:var(--sx-text);text-decoration:none;font-size:1rem;font-weight:500}
header.sx-head #mobile-menu a:hover{background:var(--sx-line)}
@media(max-width:760px){.sx-nav a.sx-l{display:none}.sx-k span,.sx-k kbd{display:none}.sx-k{padding:9px}header.sx-head #mobile-menu-button{display:grid}}

/* footer */
footer.sx-foot{position:relative;z-index:1;background:none;border:0;padding:0;margin:80px auto 0;max-width:1240px;font-family:Inter,system-ui,sans-serif;overflow:hidden}
.sx-fin{border-top:1px solid var(--sx-line);margin:0 20px;padding-top:56px}
.sx-cols{display:grid;grid-template-columns:1.3fr repeat(4,1fr);gap:24px;font-size:.9rem}
.sx-cols p{color:var(--sx-muted);max-width:16rem;line-height:1.6;margin-top:14px;font-size:.9rem}
.sx-cols h4{font:500 .74rem var(--sx-mono);color:var(--sx-dim);text-transform:uppercase;letter-spacing:0;margin:0 0 14px}
.sx-cols ul{list-style:none;display:grid;gap:9px;margin:0;padding:0}
.sx-cols a{color:var(--sx-muted);text-decoration:none}.sx-cols a:hover{color:var(--sx-text)}
.sx-word{font:800 clamp(3rem,14vw,12.5rem)/.82 var(--sx-display);letter-spacing:-.06em;text-align:center;margin-top:50px;white-space:nowrap;user-select:none;
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,0) 85%);-webkit-background-clip:text;background-clip:text;color:transparent}
.sx-legal{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;border-top:1px solid var(--sx-line);padding:22px 0 30px;font:500 .74rem var(--sx-mono);color:var(--sx-dim)}
@media(max-width:860px){.sx-cols{grid-template-columns:1fr 1fr}.sx-cols>div:first-child{grid-column:span 2}}

/* search popup */
.sx-pal{position:fixed;inset:0;z-index:90;background:rgba(3,5,8,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:none;align-items:flex-start;justify-content:center;padding:12vh 16px}
.sx-pal.on{display:flex}
.sx-box{width:100%;max-width:620px;background:var(--sx-panel);border:1px solid var(--sx-line-2);border-radius:18px;overflow:hidden;box-shadow:0 40px 100px -20px #000;font-family:Inter,sans-serif}
.sx-box input{width:100%;font:500 1.05rem Inter,sans-serif;color:var(--sx-text);background:transparent;border:0;border-bottom:1px solid var(--sx-line);padding:18px 20px;outline:none;border-radius:0;box-shadow:none}
.sx-res{max-height:380px;overflow:auto;padding:8px}
.sx-res a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;font-size:.92rem;color:var(--sx-text);text-decoration:none}
.sx-res a.sel,.sx-res a:hover{background:var(--sx-panel-2)}
.sx-res img{width:28px;height:28px;border-radius:7px}
.sx-res small{margin-left:auto;font:500 .7rem var(--sx-mono);color:var(--sx-dim)}
.sx-res .none{padding:18px;color:var(--sx-muted)}

/* theme toggle + light theme */
.sx-tt{width:36px;height:36px;border-radius:999px;border:1px solid var(--sx-line);background:var(--sx-panel-2);color:var(--sx-text);display:grid;place-items:center;cursor:pointer;margin-left:4px;padding:0}
.sx-tt:hover{border-color:var(--sx-line-2)}
.sx-tt svg{display:block}.sx-tt .i-moon{display:none}html[data-theme="light"] .sx-tt .i-sun{display:none}html[data-theme="light"] .sx-tt .i-moon{display:block}
.lg-d{display:none!important}html[data-theme="light"] .lg-d{display:block!important}html[data-theme="light"] .lg-l{display:none!important}
html[data-theme="light"]{--sx-ink:#f6f7f9;--sx-panel:#ffffff;--sx-panel-2:#f1f4f7;--sx-line:rgba(16,24,40,.08);--sx-line-2:rgba(16,24,40,.15);
  --sx-text:#1a2238;--sx-muted:#556074;--sx-dim:#8a94a6;--sx-mint:#0f9e78;color-scheme:light}
html[data-theme="light"] body{background:var(--bg,#fcfcfc)!important}
html[data-theme="light"] body::before{opacity:.35}
html[data-theme="light"] .sx-nav{background:rgba(255,255,255,.8);box-shadow:0 10px 30px -14px rgba(16,24,40,.25)}
html[data-theme="light"] header.sx-head #mobile-menu{background:rgba(255,255,255,.97);box-shadow:0 30px 60px -20px rgba(16,24,40,.3)}
html[data-theme="light"] .sx-word{background:linear-gradient(180deg,rgba(16,24,40,.12),rgba(16,24,40,0) 85%);-webkit-background-clip:text;background-clip:text}
html[data-theme="light"] .sx-pal{background:rgba(16,24,40,.25)}
html[data-theme="light"] .sx-box{box-shadow:0 40px 100px -20px rgba(16,24,40,.45)}

/* framed page + in-frame scrollbar (desktop) */
:root{--qf-out:#15181e;--qf-line:rgba(255,255,255,.1);--qf-track:rgba(255,255,255,.07);--qf-thumb:rgba(255,255,255,.32);--qf-thumb-h:rgba(255,255,255,.55)}
html[data-theme="light"]{--qf-out:#e3e6eb;--qf-line:rgba(16,24,40,.12);--qf-track:rgba(16,24,40,.07);--qf-thumb:rgba(16,24,40,.28);--qf-thumb-h:rgba(16,24,40,.5)}
.qsb{display:none}
@media (min-width:768px){
  html{scrollbar-width:none}
  html::-webkit-scrollbar{width:0;height:0}
  html::after{content:"";position:fixed;inset:10px;border:1px solid var(--qf-line);border-radius:16px;box-shadow:0 0 0 40px var(--qf-out);pointer-events:none;z-index:1000}
  .qsb{display:block;position:fixed;right:22px;top:35vh;height:30vh;width:6px;border-radius:9px;background:var(--qf-track);z-index:1001;transition:opacity .2s}
  .qsb.off{opacity:0;pointer-events:none}
  .qsb i{position:absolute;left:0;right:0;top:0;min-height:24px;border-radius:9px;background:var(--qf-thumb);cursor:grab;transition:background .15s}
  .qsb:hover i,.qsb.drag i{background:var(--qf-thumb-h)}
  .qsb.drag i{cursor:grabbing}
  header.sx-head{top:22px}header.sx-head #mobile-menu{top:58px}
}

/* top fade under the header */
header.sx-head::before{content:"";position:absolute;left:0;right:0;top:-40px;height:150px;z-index:-1;pointer-events:none;background:linear-gradient(to bottom,var(--sx-fade) 0%,var(--sx-fade) 38%,color-mix(in srgb,var(--sx-fade) 85%,transparent) 52%,color-mix(in srgb,var(--sx-fade) 55%,transparent) 68%,color-mix(in srgb,var(--sx-fade) 22%,transparent) 84%,transparent 100%);opacity:0;transition:opacity .25s}
html.qs header.sx-head::before{opacity:1}
:root{--sx-fade:var(--sx-ink)}html[data-theme="light"]{--sx-fade:var(--bg,#fcfcfc)}

/* keep row hover inside the rounded list box */
.product-list-container{overflow:hidden}