@charset "UTF-8";
/* ============================================================
   Dark theme layer - loaded after styles.css / showcase.css.
   Page black + two static glows, glass nav, gradient display type.
   Ambient glows are intentionally static: no looping animation.
   ============================================================ */

:root{
  --bg:#07080a;
  --bg-raise:#0c0e13;
  --indigo:#3b3bff;
  --warm:#ff6a2b;
  --text:#f2f4f8;
  --text-dim:#9aa0ae;
  --text-faint:#6d7382;
  --glass:rgba(255,255,255,.055);
  --glass-strong:rgba(255,255,255,.085);
  --hair:rgba(255,255,255,.08);
  --hair-soft:rgba(255,255,255,.055);
  --geist:"Geist","Inter","Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  --spring-exit:cubic-bezier(.32,.72,0,1);
  color-scheme:dark;
}

html{background:var(--bg);scroll-padding-top:112px}
/* body must stay transparent: it is not a stacking context, so an opaque
   body background would paint over the z-index:-2 backdrop layers. */
body{
  background:transparent;
  color:var(--text);
  font-family:var(--geist);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* ---------- Backdrop: two static blobs + hairline grid ---------- */
.bg-field{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden;background:var(--bg)}
.bg-blob{position:absolute;border-radius:50%;filter:blur(110px)}
.bg-blob.indigo{
  width:min(1120px,110vw);height:min(1120px,110vw);
  top:-46vh;left:-28vw;
  background:radial-gradient(circle at 50% 50%,rgba(59,59,255,.42),rgba(59,59,255,.12) 46%,transparent 70%);
}
.bg-blob.warm{
  width:min(980px,96vw);height:min(980px,96vw);
  top:-30vh;right:-24vw;
  background:radial-gradient(circle at 50% 50%,rgba(255,106,43,.34),rgba(255,106,43,.09) 48%,transparent 72%);
}
.bg-blob.deep{
  width:min(900px,90vw);height:min(900px,90vw);
  top:52vh;left:34vw;
  background:radial-gradient(circle at 50% 50%,rgba(59,59,255,.16),transparent 68%);
  filter:blur(140px);
}
.bg-grid{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(to right,rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(ellipse 120% 72% at 50% 0%,#000 8%,transparent 68%);
  -webkit-mask-image:radial-gradient(ellipse 120% 72% at 50% 0%,#000 8%,transparent 68%);
}
.bg-vignette{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 90% 60% at 50% 46%,transparent 40%,rgba(7,8,10,.72) 100%);
}

/* ============================================================
   NAVIGATION - glass pill + one shared morphing dropdown
   ============================================================ */
.header{
  position:fixed;top:0;left:0;right:0;z-index:60;
  background:none;backdrop-filter:none;-webkit-backdrop-filter:none;
  transition:background .3s ease;
}
.header.is-stuck{background:linear-gradient(to bottom,rgba(7,8,10,.86),rgba(7,8,10,0))}
.header .nav{
  position:relative;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding-block:18px;gap:24px;
}
.header .brand{
  justify-self:start;font-family:var(--geist);font-size:19px;font-weight:600;
  letter-spacing:-.022em;color:var(--text);gap:10px;
}

/* --- centred glass pill --- */
.navbar{
  justify-self:center;position:relative;
  display:flex;align-items:center;gap:2px;padding:5px;
  border-radius:999px;
  background:var(--glass);
  border:1px solid var(--hair);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 10px 32px rgba(0,0,0,.4);
}
.nav-item{
  position:relative;z-index:2;
  display:inline-flex;align-items:center;gap:6px;
  padding:10px 16px;border-radius:999px;border:0;background:none;
  font-family:var(--geist);font-size:14.5px;font-weight:450;letter-spacing:-.01em;
  color:rgba(242,244,248,.78);
  transition:color .18s ease;
  white-space:nowrap;
}
.nav-item:hover,.nav-item[aria-expanded="true"]{color:#fff}
.nav-item .chev{
  width:13px;height:13px;stroke:currentColor;stroke-width:2;fill:none;
  opacity:.55;transition:transform .26s var(--spring-exit),opacity .2s;
}
.nav-item[aria-expanded="true"] .chev{transform:rotate(180deg);opacity:.9}

/* soft highlight pill that glides under the hovered item (spring-driven) */
.nav-glow{
  position:absolute;top:5px;left:0;z-index:1;
  height:calc(100% - 10px);border-radius:999px;
  background:rgba(255,255,255,.085);
  opacity:0;pointer-events:none;
  transition:opacity .2s ease;
  will-change:transform,width;
}
.navbar.is-lit .nav-glow{opacity:1}

/* --- right cluster --- */
.nav-end{justify-self:end;display:flex;align-items:center;gap:8px}
.nav-signin{
  padding:10px 14px;border-radius:999px;
  font-size:14.5px;font-weight:450;letter-spacing:-.01em;color:rgba(242,244,248,.78);
  transition:color .18s,background .18s;white-space:nowrap;
}
.nav-signin:hover{color:#fff;background:rgba(255,255,255,.06)}
.nav-cta{
  display:inline-flex;align-items:center;gap:8px;
  min-height:0;padding:11px 20px;border-radius:999px;
  background:#fff;border:1px solid #fff;color:#07080a;
  font-family:var(--geist);font-size:14.5px;font-weight:550;letter-spacing:-.012em;
  box-shadow:0 2px 14px rgba(255,255,255,.18);
  transition:transform .2s var(--spring-exit),box-shadow .2s,background .2s;
  white-space:nowrap;
}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 6px 24px rgba(255,255,255,.26);background:#fff}
.nav-cta .icon{width:15px;height:15px;stroke-width:2}

/* --- the single shared dropdown --- */
.nav-drop{
  position:absolute;top:calc(100% - 2px);left:0;z-index:50;
  border-radius:18px;
  background:linear-gradient(180deg,rgba(23,26,34,.93),rgba(13,15,20,.95));
  border:1px solid var(--hair);
  box-shadow:
    0 1px 0 rgba(255,255,255,.07) inset,
    0 24px 60px -12px rgba(0,0,0,.72),
    0 8px 24px -8px rgba(0,0,0,.6);
  backdrop-filter:blur(24px) saturate(160%);
  -webkit-backdrop-filter:blur(24px) saturate(160%);
  opacity:0;visibility:hidden;
  transform-origin:top center;
  will-change:transform,width,height,opacity;
  pointer-events:none;
}
.nav-drop.is-open{opacity:1;visibility:visible;pointer-events:auto}
.nav-drop-caret{
  position:absolute;top:-6px;left:0;width:12px;height:12px;
  background:rgba(22,24,31,.92);
  border-left:1px solid var(--hair);border-top:1px solid var(--hair);
  transform:rotate(45deg);border-radius:3px 0 0 0;
  pointer-events:none;z-index:2;
}
.nav-drop-clip{position:relative;width:100%;height:100%;overflow:hidden;border-radius:18px}
.nav-panel{
  position:absolute;top:0;left:0;
  padding:18px;
  opacity:0;pointer-events:none;
  will-change:transform,opacity;
}
.nav-panel.is-current{opacity:1;pointer-events:auto}
.nav-measure{position:absolute;visibility:hidden;pointer-events:none;top:0;left:-9999px;opacity:0}

/* panel content */
.np-grid{display:grid;gap:4px}
.np-grid.cols-2{grid-template-columns:repeat(2,268px)}
.np-grid.cols-1{grid-template-columns:304px}
.np-link{
  display:flex;gap:12px;align-items:flex-start;
  padding:11px 12px;border-radius:12px;
  transition:background .16s ease;
}
.np-link:hover{background:rgba(255,255,255,.06)}
.np-ico{
  flex:0 0 32px;height:32px;border-radius:9px;
  display:grid;place-items:center;
  background:rgba(255,255,255,.06);
  border:1px solid var(--hair-soft);
  font-size:12px;font-weight:600;color:var(--warm);
}
.np-ico svg{width:16px;height:16px;stroke:var(--warm);fill:none;stroke-width:1.7}
.np-tx strong{
  display:block;font-size:14px;font-weight:550;letter-spacing:-.012em;
  color:var(--text);line-height:1.35;
}
.np-tx span{
  display:block;margin-top:3px;font-size:12.5px;line-height:1.5;
  color:var(--text-faint);letter-spacing:-.004em;
}
.np-head{
  padding:2px 12px 10px;font-size:11px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-faint);
}
.np-foot{
  margin-top:12px;padding:12px 14px 2px;
  border-top:1px solid var(--hair-soft);
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  font-size:12.5px;color:var(--text-faint);
}
.np-foot a{color:var(--warm);font-weight:500}
.np-foot a:hover{text-decoration:underline}

/* ghost cursor for the idle tour */
.nav-ghost{
  position:fixed;z-index:70;width:17px;height:23px;
  pointer-events:none;opacity:0;
  transition:opacity .35s ease;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.6));
}
.nav-ghost.is-on{opacity:.92}
.nav-ghost svg{width:100%;height:100%}

/* mobile */
@media (max-width:1040px){
  .header .nav{grid-template-columns:auto 1fr;gap:12px}
  .navbar{justify-self:start;order:3;grid-column:1/-1;overflow-x:auto;scrollbar-width:none}
  .navbar::-webkit-scrollbar{display:none}
  .nav-end{order:2}
  .nav-signin{display:none}
}
/* Below tablet the widest panel no longer fits: nav items jump to the
   section instead (handled in nav-glass.js). */
@media (max-width:820px){
  .nav-drop{display:none !important}
  .nav-item .chev{display:none}
}

/* ============================================================
   HERO
   ============================================================ */
.hero{padding-top:148px}
.hero .eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  padding:7px 14px 7px 7px;border-radius:999px;
  background:var(--glass);border:1px solid var(--hair);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  font-size:13.5px;font-weight:450;letter-spacing:-.008em;color:rgba(242,244,248,.82);
  text-transform:none;
}
.hero .eyebrow span{
  display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;
  background:var(--warm);color:#0a0a0a;font-size:11.5px;font-weight:650;letter-spacing:.01em;
}
#hero-title{
  font-family:var(--geist);
  font-weight:620;
  letter-spacing:-.055em;
  line-height:.94;
  background:linear-gradient(170deg,#ffffff 8%,#f2f4f8 34%,#a7adbb 76%,#7b8292 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  padding-bottom:.08em;
}
#hero-title .underlined{
  color:transparent;background:none;
  box-shadow:inset 0 -.1em 0 rgba(255,106,43,.55);
  text-decoration:none;
}
.hero .intro{color:var(--text-dim);font-size:18px;line-height:1.6;letter-spacing:-.011em}
.hero-actions .button{font-family:var(--geist);font-weight:550;letter-spacing:-.012em}
.hero-art img{
  filter:brightness(.72) saturate(.9) contrast(1.05);
  mask-image:radial-gradient(ellipse 80% 80% at 50% 45%,#000 48%,transparent 88%);
  -webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 45%,#000 48%,transparent 88%);
}
.hero-facts{color:var(--text-faint);border-color:var(--hair-soft)}

/* ============================================================
   SHARED SURFACES - turn the light cards into glass
   ============================================================ */
.button{
  font-family:var(--geist);font-weight:550;letter-spacing:-.012em;
  box-shadow:0 2px 14px rgba(255,255,255,.1);
}
.button:hover{box-shadow:0 6px 24px rgba(255,255,255,.18)}
.button.orange{background:var(--warm);border-color:var(--warm);color:#0a0a0a;box-shadow:0 4px 20px rgba(255,106,43,.3)}
.text-link{color:var(--text-dim)}
.text-link:hover{color:var(--warm)}

h1,h2,h3,h4{font-family:var(--geist);letter-spacing:-.034em}
h2{font-weight:600}
.section-index{color:var(--text-faint);letter-spacing:.08em}
.section-intro,.course-note,.art-note{color:var(--text-dim)}

.example,.day,.tool-item,.case-panel,.course-example,.toolkit,.invitation,.examples-cta,
.live-demo,.reason-list article,.join-info,.faq-list details{
  background:rgba(255,255,255,.035);
  border:1px solid var(--hair-soft);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
}
.example:hover,.tool-item:hover,.faq-list details:hover{
  background:rgba(255,255,255,.06);
  border-color:var(--hair);
}
.example-result,.reason-compare,.case-problem,.course-example-flow{
  background:rgba(0,0,0,.28);
  border:1px solid var(--hair-soft);
}
.demo-chip{background:rgba(255,255,255,.07);border:1px solid var(--hair-soft);color:var(--text)}
.demo-chip.accent{background:rgba(255,106,43,.16);border-color:rgba(255,106,43,.34);color:#ffb892}
.case-tab{color:var(--text-dim);border:1px solid var(--hair-soft);background:rgba(255,255,255,.03)}
.case-tab.is-active{background:#fff;color:#07080a;border-color:#fff}
.join{background:rgba(255,255,255,.03);border-top:1px solid var(--hair-soft);border-bottom:1px solid var(--hair-soft)}
.tool-mark{background:rgba(255,255,255,.07);border:1px solid var(--hair-soft)}
.tool-mark img{filter:brightness(0) invert(1);opacity:.88}
.cover-tools img{filter:brightness(0) invert(1);opacity:.8}
.footer{border-top:1px solid var(--hair-soft);color:var(--text-faint)}
dialog{background:rgba(16,18,24,.92);border:1px solid var(--hair);color:var(--text);backdrop-filter:blur(24px)}
dialog::backdrop{background:rgba(5,6,8,.72);backdrop-filter:blur(4px)}
textarea{background:rgba(0,0,0,.35);border:1px solid var(--hair-soft);color:var(--text)}

@media (prefers-reduced-motion:reduce){html:not(.motion-on) .nav-drop,html:not(.motion-on) .nav-glow,html:not(.motion-on) .nav-panel{transition:none !important}html:not(.motion-on) .nav-ghost{display:none !important}
}