/* ---------- local fonts ---------- */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/instrument-serif-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/instrument-serif-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/instrument-serif-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/instrument-serif-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/inter-tight-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/inter-tight-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('assets/fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('assets/fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   Oh My Discord — shared styles
   Discord-inspired dark palette, blurple accents.
   ============================================================ */

:root{
  --bg: #1e1f22;            /* deep app background */
  --bg-2: #2b2d31;          /* panel */
  --bg-3: #313338;          /* raised surface */
  --ink: #f2f3f5;
  --ink-soft: #b5bac1;
  --ink-mute: #80848e;
  --rule: #3f4147;
  --accent: #5865f2;        /* blurple */
  --accent-hi: #7983f5;
  --accent-soft: #2a2e58;
  --warn-bg: #3a2f1c;
  --warn-ink: #f0c674;
  --warn-border: #5a4a26;
  --good: #23a559;
  --danger: #f23f43;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{
  background:var(--bg);
  color:var(--ink);
  font-family:"Inter Tight",system-ui,sans-serif;
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
body{
  background:
    radial-gradient(1100px 600px at 85% -10%, rgba(88,101,242,.18), transparent 60%),
    radial-gradient(900px 500px at -10% 30%, rgba(88,101,242,.10), transparent 60%),
    var(--bg);
  background-attachment:fixed;
  min-height:100vh;
}

a{color:var(--accent-hi);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px;color:#9aa2f7}
code,kbd,.mono{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.88em}
kbd{background:var(--bg-3);border:1px solid var(--rule);border-bottom-width:2px;border-radius:6px;padding:1px 6px;font-size:.82em;color:var(--ink)}
code,.mono{color:var(--ink)}

/* ---------- page shell ---------- */
.page{max-width:760px;margin:0 auto;padding:56px 28px 96px}
.page.wide{max-width:980px}

/* ---------- top strip / nav ---------- */
.topstrip{
  display:flex;align-items:center;justify-content:space-between;
  font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--ink-mute);
  letter-spacing:.04em;text-transform:uppercase;
  padding-bottom:48px;border-bottom:1px solid var(--rule);margin-bottom:56px;
  gap:16px;
}
.topstrip .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);display:inline-block;margin-right:8px;vertical-align:middle}
.topstrip a{color:var(--ink-soft);text-decoration:none}
.topstrip a:hover{color:var(--accent-hi)}
.topstrip .brand{display:flex;align-items:center;gap:0}

/* breadcrumb-style back link */
.back{
  display:inline-flex;align-items:center;gap:6px;
  font-family:"JetBrains Mono",monospace;font-size:12px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--ink-mute);text-decoration:none;
}
.back:hover{color:var(--accent-hi)}
.back::before{content:"←";font-family:"Inter Tight",sans-serif;font-size:14px}

/* ---------- hero / display ---------- */
h1{font-family:"Inter Tight","Instrument Serif",serif;font-weight:600;font-size:clamp(48px,7vw,84px);line-height:1.02;letter-spacing:-.025em;margin-bottom:24px}
h1 em{font-style:italic;color:var(--accent-hi);font-weight:500}
.lede{font-size:21px;line-height:1.5;color:var(--ink-soft);max-width:58ch;margin-bottom:18px}
.lede strong{color:var(--ink);font-weight:600}

/* ---------- callout ---------- */
.callout{margin:40px 0 48px;background:var(--warn-bg);border:1px solid var(--warn-border);border-radius:14px;padding:18px 22px;display:flex;gap:14px;align-items:flex-start;color:var(--warn-ink)}
.callout .ico{flex:0 0 24px;height:24px;border-radius:50%;background:var(--warn-ink);color:#2a1f08;display:grid;place-items:center;font-family:"Instrument Serif",serif;font-style:italic;font-size:17px;margin-top:1px;font-weight:600}
.callout p strong, .callout p em{color:#ffe1a8}
.callout p{font-size:15.5px;line-height:1.5}

/* ---------- section heads ---------- */
h2{font-family:"Inter Tight","Instrument Serif",serif;font-weight:600;font-size:34px;letter-spacing:-.015em;margin:64px 0 8px;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
h2 .num{font-family:"JetBrains Mono",monospace;font-size:13px;color:var(--accent-hi);letter-spacing:.1em;font-weight:500;text-transform:uppercase}
.sec-sub{color:var(--ink-soft);margin-bottom:24px;max-width:60ch}

/* ---------- steps ---------- */
.steps{display:flex;flex-direction:column;gap:28px;margin-top:8px}
.step{display:grid;grid-template-columns:44px 1fr;gap:18px;align-items:flex-start}
.step .n{font-family:"Instrument Serif",serif;font-style:italic;font-size:38px;line-height:1;color:var(--accent-hi);text-align:right;padding-top:6px}
.step h3{font-family:"Inter Tight",sans-serif;font-weight:600;font-size:18px;margin-bottom:6px;letter-spacing:-.005em}
.step p{color:var(--ink-soft);font-size:16px;max-width:54ch}

/* ---------- permission illustration ---------- */
.illus{margin-top:14px;background:var(--bg-2);border:1px solid var(--rule);border-radius:12px;padding:14px 16px;box-shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 12px 32px -16px rgba(0,0,0,.6)}
.illus .hd{display:flex;align-items:center;justify-content:space-between;padding-bottom:10px;border-bottom:1px dashed var(--rule);margin-bottom:10px}
.illus .hd .t{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--ink-mute);text-transform:uppercase;letter-spacing:.08em}
.illus .hd .x{width:14px;height:14px;position:relative}
.illus .hd .x::before,.illus .hd .x::after{content:"";position:absolute;inset:6px 0;background:var(--ink-soft);height:1.5px;border-radius:1px}
.illus .hd .x::before{transform:rotate(45deg)}
.illus .hd .x::after{transform:rotate(-45deg)}

.perm{display:flex;align-items:center;justify-content:space-between;padding:9px 4px;border-bottom:1px solid var(--rule)}
.perm:last-child{border-bottom:none}
.perm .label{display:flex;flex-direction:column;gap:2px}
.perm .label .name{font-family:"Inter Tight",sans-serif;font-weight:500;font-size:14.5px}
.perm .label .desc{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--ink-mute);letter-spacing:.02em}
.perm.highlight .label .name{color:var(--accent-hi)}
.perm.highlight{background:var(--accent-soft);margin:0 -10px;padding:9px 14px;border-radius:8px;border-bottom-color:transparent;position:relative;border:1px solid #3b3f7a}
.perm.highlight::after{content:"this one";position:absolute;right:-2px;top:-12px;background:var(--accent);color:#fff;font-family:"JetBrains Mono",monospace;font-size:10px;text-transform:uppercase;letter-spacing:.08em;padding:3px 7px;border-radius:5px;transform:rotate(2deg);box-shadow:0 4px 10px -4px rgba(88,101,242,.6)}

/* ---------- toggle ---------- */
.toggle{flex:0 0 auto;width:38px;height:22px;border-radius:999px;background:#4a4d54;position:relative;transition:background .2s}
.toggle::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:left .2s;box-shadow:0 1px 3px rgba(0,0,0,.4)}
.toggle.on{background:var(--good)}
.toggle.on::after{left:18px}
.toggle.off-emphatic{background:var(--danger)}
.toggle.off-emphatic::after{left:2px}

/* ---------- side-by-side cards ---------- */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}
.card{background:var(--bg-2);border:1px solid var(--rule);border-radius:12px;padding:18px}
.card .tag{font-family:"JetBrains Mono",monospace;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-mute);margin-bottom:8px}
.card.bad{border-color:#5a2a2c}
.card.bad .tag{color:var(--danger)}
.card.good{border-color:#2c5239}
.card.good .tag{color:#3ec977}
.card h4{font-family:"Inter Tight",sans-serif;font-weight:600;font-size:20px;margin-bottom:6px;line-height:1.2;letter-spacing:-.01em}
.card p{font-size:14.5px;color:var(--ink-soft);line-height:1.5}

/* ---------- FAQ ---------- */
details{border-top:1px solid var(--rule);padding:18px 0}
details:last-of-type{border-bottom:1px solid var(--rule)}
details summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;font-weight:500;font-size:17px;gap:18px}
details summary::-webkit-details-marker{display:none}
details summary .plus{font-family:"Instrument Serif",serif;font-size:26px;color:var(--accent-hi);line-height:1;transition:transform .2s}
details[open] summary .plus{transform:rotate(45deg)}
details p{color:var(--ink-soft);margin-top:10px;max-width:60ch}

/* ---------- footer ---------- */
footer{margin-top:80px;padding-top:28px;border-top:1px solid var(--rule);display:flex;justify-content:space-between;font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--ink-mute);text-transform:uppercase;letter-spacing:.06em;flex-wrap:wrap;gap:12px}

/* ============================================================
   Index / landing-specific
   ============================================================ */

/* hero meta row */
.herometa{
  display:flex;align-items:center;gap:10px;
  font-family:"JetBrains Mono",monospace;font-size:12px;
  color:var(--ink-mute);text-transform:uppercase;letter-spacing:.08em;
  margin-bottom:20px;
}
.herometa .pill{
  background:var(--accent-soft);color:var(--accent-hi);
  border:1px solid #3b3f7a;border-radius:999px;
  padding:4px 10px;font-size:11px;
}

/* tutorial grid */
.tutgrid{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px;
}
.tutcard{
  display:flex;flex-direction:column;justify-content:space-between;
  background:var(--bg-2);border:1px solid var(--rule);border-radius:14px;
  padding:22px 22px 20px;min-height:200px;
  text-decoration:none;color:inherit;
  transition:border-color .15s, transform .15s, background .15s;
  position:relative;overflow:hidden;
}
.tutcard:hover{border-color:var(--accent);transform:translateY(-2px);background:#2f3137}
.tutcard.locked{cursor:default;opacity:.7}
.tutcard.locked:hover{transform:none;border-color:var(--rule);background:var(--bg-2)}
.tutcard .tag-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.tutcard .tag{
  font-family:"JetBrains Mono",monospace;font-size:11px;
  color:var(--ink-mute);text-transform:uppercase;letter-spacing:.08em;
}
.tutcard.active .tag{color:var(--accent-hi)}
.tutcard .status{
  font-family:"JetBrains Mono",monospace;font-size:10px;
  text-transform:uppercase;letter-spacing:.1em;
  padding:3px 8px;border-radius:999px;border:1px solid;
}
.tutcard.active .status{color:var(--good);border-color:#2c5239;background:#1e3527}
.tutcard.locked .status{color:var(--ink-mute);border-color:var(--rule);background:var(--bg-3)}
.tutcard h3{
  font-family:"Inter Tight",sans-serif;font-weight:600;
  font-size:22px;line-height:1.2;letter-spacing:-.01em;
  margin-bottom:8px;
}
.tutcard p{
  color:var(--ink-soft);font-size:14.5px;line-height:1.5;
}
.tutcard .cta{
  margin-top:18px;display:inline-flex;align-items:center;gap:6px;
  font-family:"JetBrains Mono",monospace;font-size:12px;
  text-transform:uppercase;letter-spacing:.06em;color:var(--accent-hi);
}
.tutcard .cta .arrow{transition:transform .15s}
.tutcard:hover .cta .arrow{transform:translateX(3px)}
.tutcard.locked .cta{color:var(--ink-mute)}

/* big numbered backdrop in card corner */
.tutcard .bignum{
  position:absolute;right:14px;bottom:-12px;
  font-family:"Instrument Serif",serif;font-style:italic;
  font-size:90px;line-height:1;color:rgba(121,131,245,.06);
  pointer-events:none;user-select:none;
}

/* short list of "things this covers" */
.bullets{
  display:flex;flex-direction:column;gap:8px;margin:20px 0 0;
  padding:0;list-style:none;
}
.bullets li{
  display:flex;gap:10px;align-items:flex-start;
  color:var(--ink-soft);font-size:15.5px;
}
.bullets li::before{
  content:"";flex:0 0 6px;width:6px;height:6px;border-radius:50%;
  background:var(--accent);margin-top:9px;
}

/* tiny inline "suggest a topic" prompt */
.suggest{
  margin-top:48px;background:var(--bg-2);border:1px dashed var(--rule);
  border-radius:14px;padding:20px 22px;
  display:flex;gap:14px;align-items:center;justify-content:space-between;
  flex-wrap:wrap;
}
.suggest p{color:var(--ink-soft);font-size:15px;max-width:48ch}
.suggest .tag{font-family:"JetBrains Mono",monospace;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--accent-hi);display:block;margin-bottom:4px}

/* ---------- responsive ---------- */
@media (max-width:540px){
  .page{padding:36px 20px 72px}
  h1{font-size:46px}
  .lede{font-size:18px}
  .grid2,.tutgrid{grid-template-columns:1fr}
  .step{grid-template-columns:32px 1fr;gap:12px}
  .step .n{font-size:30px}
  h2{font-size:28px}
  .topstrip span:last-child{display:none}
}