@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/ChakraPetch-500.woff2') format('woff2');}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/ChakraPetch-600.woff2') format('woff2');}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/ChakraPetch-700.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/IBMPlexSans-400.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/IBMPlexSans-500.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/IBMPlexSans-600.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/JetBrainsMono-400.woff2') format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/JetBrainsMono-600.woff2') format('woff2');}
/* ShadowNode Guides — shared stylesheet */

:root {
  --bg: #0a0a0f; --bg-raise: #12121c; --bg-card: #15151f;
  --line: #26263a; --text: #e8e8f2; --text-dim: #9a9ab0;
  --violet: #a855f7; --violet-soft: rgba(168,85,247,.14);
  --amber: #f59e0b; --green: #34d399;
  --mono: 'JetBrains Mono', monospace; --display: 'Chakra Petch', sans-serif; --body: 'IBM Plex Sans', sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg); color: var(--text); font-family: var(--body); line-height: 1.7;
  background-image:
    radial-gradient(ellipse 90% 40% at 50% -5%, rgba(168,85,247,.13), transparent 60%),
    linear-gradient(rgba(168,85,247,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168,85,247,.03) 1px, transparent 1px);
  background-size: 100% 100%, 44px 44px, 44px 44px;
}
a { color: inherit; }

.draft-banner {
  background: rgba(245,158,11,.1); border-bottom: 1px solid rgba(245,158,11,.35);
  color: var(--amber); font-family: var(--mono); font-size: .78rem; text-align: center;
  padding: .55rem 1rem; letter-spacing: .06em;
}

header.site {
  display: flex; align-items: center; gap: .7rem;
  padding: 1.1rem clamp(1.2rem,5vw,3rem); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 10;
  background: rgba(10,10,15,.82); backdrop-filter: blur(12px);
}
.logo-mark { width: 30px; height: 30px; flex: none; border-radius: 8px; object-fit: cover; border: 1px solid var(--line); box-shadow: 0 0 18px rgba(168,85,247,.4); display: block; }
header.site .brand { font-family: var(--display); font-weight: 700; letter-spacing: .14em; font-size: 1.02rem; text-decoration: none; }
header.site .brand em { color: var(--violet); font-style: normal; }
header.site nav { margin-left: auto; font-family: var(--mono); font-size: .8rem; display: flex; gap: 1.3rem; }
header.site nav a { color: var(--text-dim); text-decoration: none; }
header.site nav a:hover { color: var(--violet); }

.container { max-width: 1040px; margin: 0 auto; padding: clamp(2rem,5vw,3.5rem) clamp(1.2rem,4vw,2rem) 6rem; }

.kicker { font-family: var(--mono); font-size: .78rem; color: var(--violet); letter-spacing: .18em; text-transform: uppercase; }
.kicker::before { content: "// "; opacity: .6; }
h1 { font-family: var(--display); font-weight: 700; font-size: clamp(1.9rem,4.5vw,2.9rem); line-height: 1.15; margin: .45rem 0 1rem; }
h1 .hl { color: var(--violet); text-shadow: 0 0 26px rgba(168,85,247,.5); }
.lede { color: var(--text-dim); font-size: 1.06rem; max-width: 62ch; }
.meta-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.3rem; }
.chip { font-family: var(--mono); font-size: .72rem; letter-spacing: .04em; border: 1px solid var(--line); border-radius: 999px; padding: .3rem .8rem; color: var(--text-dim); background: var(--bg-raise); }
.chip b { color: var(--green); font-weight: 600; }

h2.sec { font-family: var(--display); font-weight: 600; font-size: 1.5rem; margin: 3.4rem 0 .4rem; }
h2.sec::before { content: ""; display: inline-block; width: 8px; height: 22px; background: var(--violet); border-radius: 3px; vertical-align: -3px; margin-right: .7rem; box-shadow: 0 0 12px rgba(168,85,247,.5); }
.sec-lede { color: var(--text-dim); margin-bottom: .6rem; }
code { font-family: var(--mono); font-size: .88em; background: var(--violet-soft); color: #c99aff; padding: .12em .45em; border-radius: 6px; }

/* wizard walkthrough: screenshot + help side by side, alternating */
.walk { display: grid; gap: 1.8rem; margin-top: 1.8rem; }
.walk-step { display: grid; grid-template-columns: 1.35fr 1fr; gap: 1.6rem; align-items: center; }
.walk-step:nth-child(even) .shot { order: 2; }
.walk-step .body { min-width: 0; }
.step-badge { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--mono); font-size: .72rem; color: var(--violet); letter-spacing: .1em; text-transform: uppercase; margin-bottom: .5rem; }
.step-badge .no { width: 24px; height: 24px; border-radius: 50%; background: var(--violet-soft); border: 1px solid var(--violet); display: grid; place-items: center; font-weight: 600; color: var(--violet); }
.walk-step h3 { font-family: var(--display); font-weight: 600; font-size: 1.22rem; margin-bottom: .5rem; }
.walk-step p { color: var(--text-dim); font-size: .96rem; }
.walk-step .note { margin-top: .8rem; font-size: .86rem; padding: .6rem .8rem; border-radius: 9px; border: 1px solid rgba(52,211,153,.3); background: rgba(52,211,153,.06); color: #a7e9d0; }
.walk-step .note.warn { border-color: rgba(245,158,11,.35); background: rgba(245,158,11,.07); color: #fbd38d; }

figure.shot { margin: 0; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-card); overflow: hidden; box-shadow: 0 22px 60px -30px rgba(0,0,0,.9); }
figure.shot .bar { display: flex; align-items: center; gap: .45rem; padding: .55rem .85rem; border-bottom: 1px solid var(--line); }
figure.shot .bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
figure.shot .bar i:first-child { background: rgba(168,85,247,.8); }
figure.shot .bar span { font-family: var(--mono); font-size: .68rem; color: var(--text-dim); margin-left: .4rem; }
figure.shot img { display: block; width: 100%; height: auto; cursor: zoom-in; }

.callout { margin: 1.6rem 0; padding: .95rem 1.1rem; border-radius: 12px; font-size: .95rem; border: 1px solid; display: flex; gap: .7rem; }
.callout.warn { border-color: rgba(245,158,11,.4); background: rgba(245,158,11,.07); color: #fbd38d; }
.callout.tip { border-color: rgba(52,211,153,.35); background: rgba(52,211,153,.06); color: #a7e9d0; }
.callout .ico { flex: none; }

.trouble { margin-top: 2rem; }
.trouble .row { border: 1px solid var(--line); border-radius: 12px; background: var(--bg-raise); padding: .9rem 1.1rem; margin-bottom: .6rem; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.5fr); gap: 1rem; }
.trouble .q { font-weight: 600; font-size: .93rem; }
.trouble .a { color: var(--text-dim); font-size: .93rem; }

/* index hub cards */
.hub { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 1.1rem; margin-top: 2.2rem; }
.hub a { text-decoration: none; border: 1px solid var(--line); border-radius: 16px; background: var(--bg-card); padding: 1.4rem; display: block; transition: transform .18s, border-color .18s, box-shadow .18s; }
.hub a:hover { transform: translateY(-4px); border-color: var(--violet); box-shadow: 0 20px 50px -24px rgba(168,85,247,.5); }
.hub .ic { font-size: 1.7rem; margin-bottom: .7rem; }
.hub h3 { font-family: var(--display); font-weight: 600; font-size: 1.15rem; margin-bottom: .35rem; }
.hub p { color: var(--text-dim); font-size: .9rem; }
.hub .go { margin-top: .9rem; font-family: var(--mono); font-size: .78rem; color: var(--violet); }

.lb { position: fixed; inset: 0; background: rgba(5,5,10,.93); display: none; place-items: center; z-index: 50; cursor: zoom-out; padding: 2.5vh 2.5vw; }
.lb.open { display: grid; }
.lb img { max-width: 100%; max-height: 100%; border-radius: 10px; border: 1px solid var(--line); }

footer.site { border-top: 1px solid var(--line); padding: 1.6rem clamp(1.2rem,5vw,3rem); font-family: var(--mono); font-size: .75rem; color: var(--text-dim); display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; }
footer.site b { color: var(--violet); font-weight: 600; }

.rv { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } }

@media (max-width: 760px) {
  .walk-step { grid-template-columns: 1fr; }
  .walk-step:nth-child(even) .shot { order: 0; }
  .trouble .row { grid-template-columns: 1fr; gap: .3rem; }
}