/* ============================================================
   TERMINAL NINE — guide page additions (loads after ../styles.css)
   ============================================================ */

.guide-main{
  max-width:1100px; margin:0 auto;
  padding:clamp(48px,8vh,90px) clamp(16px,4vw,44px) clamp(40px,6vh,70px);
}

.gd-hero{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,360px);
  gap:clamp(26px,5vw,64px); align-items:center;
  margin-bottom:clamp(44px,7vh,80px);
}
.gd-kicker{
  font-family:var(--font-chrome); font-size:clamp(8px,1.5vw,10px); letter-spacing:.26em;
  color:var(--amber); margin-bottom:22px;
  text-shadow:0 0 10px rgba(255,176,0,.35);
}
.gd-title{
  font-family:var(--font-chrome); font-weight:700;
  font-size:clamp(26px,6vw,54px); line-height:1.08; letter-spacing:.04em;
  color:var(--green);
  text-shadow:0 0 12px rgba(51,255,102,.6), 0 0 55px rgba(51,255,102,.25);
}
.gd-lead{
  margin-top:24px; max-width:36em;
  font-size:clamp(19px,2.4vw,23px); color:var(--green-body);
  text-shadow:var(--glow-soft);
}
.gd-terminal{
  position:relative;
  min-height:250px;
  border:18px solid var(--bezel);
  border-radius:24px / 30px;
  background:
    radial-gradient(ellipse 92% 80% at 50% 44%, rgba(51,255,102,.09), rgba(2,12,6,.92) 62%, #010402 100%);
  box-shadow:
    inset 0 0 48px rgba(0,0,0,.8),
    inset 0 0 0 1px rgba(51,255,102,.15),
    0 24px 70px rgba(0,0,0,.55);
  overflow:hidden;
}
.gd-terminal::before{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.24) 0 1px, transparent 1px 3px);
  pointer-events:none;
}
.gd-terminal pre{
  position:relative; z-index:1;
  padding:34px 26px 26px;
  color:var(--green); text-shadow:var(--glow);
  font-family:var(--font-term); font-size:24px; line-height:1.12;
  white-space:pre-wrap;
}
.gd-led{
  position:absolute; top:11px; right:14px; z-index:2;
  width:10px; height:10px; border-radius:50%; background:var(--green);
  box-shadow:0 0 12px var(--green), 0 0 28px rgba(51,255,102,.45);
}

.gd-block{
  position:relative;
  padding:clamp(28px,4.5vh,44px) 0;
  border-top:1px solid var(--green-line);
  max-width:900px;
}
.gd-block h2{
  font-family:var(--font-chrome); font-weight:700;
  font-size:clamp(13px,2.4vw,18px); letter-spacing:.12em; line-height:1.4;
  color:var(--green-hi); text-shadow:var(--glow-soft);
  margin-bottom:18px;
}
.gd-no{ color:var(--amber); margin-right:10px; text-shadow:0 0 10px rgba(255,176,0,.35); }
.gd-block p{
  color:var(--green-body); font-size:clamp(18px,2.2vw,20px); line-height:1.5;
  max-width:60em;
}
.gd-block p + p{ margin-top:14px; }
.gd-block em{ font-style:normal; color:var(--green-hi); }
.gd-block b{ color:var(--green-hi); font-weight:400; }

.gd-block code{
  font-family:var(--font-term); font-size:.95em;
  color:var(--green-hi);
  background:rgba(51,255,102,.08);
  border:1px solid rgba(51,255,102,.18);
  border-radius:3px; padding:1px 6px;
  white-space:nowrap;
}

.gd-list{ list-style:none; display:flex; flex-direction:column; gap:12px; }
.gd-list li{
  color:var(--green-body); font-size:clamp(18px,2.2vw,20px); line-height:1.5;
  padding:12px 16px;
  border:1px solid var(--green-line); border-left:3px solid var(--green-dim);
  border-radius:4px;
  background:linear-gradient(180deg, rgba(51,255,102,.04), rgba(51,255,102,.01));
}

.gd-swatches{
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px; margin-bottom:22px;
}
.gd-swatch{
  border:1px solid var(--green-line); border-radius:6px;
  padding:12px; text-align:center;
  background:rgba(2,8,4,.5);
}
.gd-swatch .chip{
  display:block; height:44px; border-radius:4px; margin-bottom:10px;
  border:1px solid rgba(51,255,102,.22);
}
.gd-swatch:first-child .chip{
  background:#020503!important;
  background-image:
    repeating-linear-gradient(135deg, rgba(51,255,102,.18) 0 1px, transparent 1px 9px)!important;
}
.gd-swatch b{
  display:block; font-family:var(--font-term); font-weight:400; font-size:18px;
  color:var(--green-hi); letter-spacing:.04em;
}
.gd-swatch i{
  display:block; margin-top:4px; font-style:normal;
  font-family:var(--font-chrome); font-size:7.5px; letter-spacing:.16em;
  color:var(--green-dim); line-height:1.7;
}

.gd-quote{
  margin:18px 0;
  padding:20px 24px;
  border:1px dashed rgba(51,255,102,.35); border-radius:6px;
  background:rgba(51,255,102,.035);
  color:var(--green-hi); font-size:clamp(18px,2.2vw,20px); line-height:1.5;
  text-shadow:var(--glow-soft);
}

@media (max-width:420px){
  .gd-block code{ white-space:normal; word-break:break-word; }
}

@media (max-width:900px){
  .guide-main{ max-width:860px; }
  .gd-hero{ grid-template-columns:1fr; }
  .gd-terminal{ min-height:220px; }
  .gd-swatches{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:520px){
  .gd-terminal{ border-width:12px; border-radius:18px / 24px; }
  .gd-terminal pre{ font-size:20px; padding:28px 18px 20px; }
  .gd-swatches{ grid-template-columns:1fr; }
}