:root{
  --bg:#07100f;
  --panel:#0c1a18;
  --text:#edf7f3;
  --muted:#9bb3ad;
  --line:#25433d;
  --green:#22e5a6;
  --amber:#f4b740;

  --sans:"IBM Plex Sans",sans-serif;
  --mono:"IBM Plex Mono",monospace;
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  min-height:100vh;

  background:
    radial-gradient(
      circle at 80% 0,
      #12332c55,
      transparent 32%
    ),
    var(--bg);

  color:var(--text);
  font-family:var(--sans);

  overflow-x:hidden;
}

button,
a,
input{
  font:inherit;
}


/* ============================================================
   APP LAYOUT
   ============================================================ */

.app-layout{
  display:flex;
  min-height:100vh;
}


/* ============================================================
   SIDEBAR
   ============================================================ */

.sidebar{
  width:258px;
  flex:0 0 258px;

  height:100vh;

  position:sticky;
  top:0;

  display:flex;
  flex-direction:column;

  padding:22px 16px;

  background:
    linear-gradient(
      180deg,
      #081312 0%,
      #06100f 100%
    );

  border-right:1px solid var(--line);

  box-shadow:
    12px 0 40px rgba(0,0,0,.16);

  z-index:20;
}


/* ============================================================
   BRAND
   ============================================================ */

.brand{
  display:flex;
  gap:13px;
  align-items:center;

  margin:0 8px 25px;

  color:var(--text);
  text-decoration:none;
}

.logo{
  border:3px solid var(--green);

  border-radius:9px;

  padding:7px;

  color:var(--green);

  font:700 21px var(--mono);

  box-shadow:
    0 0 16px #22e5a677,
    inset 0 0 10px #22e5a611;

  background:
    linear-gradient(
      145deg,
      #22e5a610,
      transparent
    );
}

.brand b{
  display:block;

  font:
    700 22px var(--mono);

  line-height:1.05;
}

.brand small,
.meta{
  font:12px var(--mono);
  color:var(--muted);
}


/* ============================================================
   NAVIGATION
   ============================================================ */

.primary-nav,
.task-nav{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.primary-nav button,
.task-nav button{
  display:block;

  width:100%;

  border:0;
  background:transparent;

  color:#c4d5d0;

  text-align:left;

  padding:12px;

  border-radius:8px;

  cursor:pointer;

  transition:.18s ease;
}

.primary-nav button:hover,
.primary-nav button.is-active{
  color:var(--green);

  background:
    linear-gradient(
      90deg,
      #0c3732,
      #0c373255
    );

  box-shadow:
    inset 2px 0 var(--green);
}

.primary-nav button:hover{
  transform:translateX(2px);
}

.nav-divider{
  border-top:1px solid var(--line);

  margin:17px 7px;
}

.nav-label{
  margin:3px 12px 8px;

  text-transform:uppercase;

  color:#a5c0b9;

  font:12px var(--mono);
}


/* ============================================================
   TERMINAL QUOTE
   ============================================================ */

.terminal-quote{
  margin-top:auto;

  border:1px solid var(--line);

  border-radius:8px;

  padding:17px;

  color:#a8bebb;

  font:14px/1.45 var(--mono);

  background:
    linear-gradient(
      145deg,
      #0c201d,
      #06110f
    );

  box-shadow:
    0 12px 30px rgba(0,0,0,.15);
}

.terminal-quote code{
  display:block;
  margin-top:12px;
}

.terminal-quote i{
  display:inline-block;

  width:8px;
  height:15px;

  background:var(--green);

  box-shadow:
    0 0 10px #22e5a666;

  animation:blink 1s step-end infinite;
}

@keyframes blink{
  50%{
    opacity:0;
  }
}


/* ============================================================
   MAIN
   ============================================================ */

.main-content{
  width:calc(100% - 258px);

  max-width:1500px;

  margin:auto;

  padding:0 38px;
}


/* ============================================================
   TOP BAR
   ============================================================ */

.topbar{
  height:62px;

  display:flex;

  justify-content:flex-end;

  align-items:center;
}

.top-actions{
  display:flex;
  gap:12px;
}

.icon-button,
.github-link,
.menu-button{
  border:1px solid var(--line);

  background:#0a1918;

  color:var(--text);

  border-radius:9px;

  padding:10px 14px;

  text-decoration:none;

  cursor:pointer;

  transition:.18s ease;
}

.icon-button:hover,
.github-link:hover,
.menu-button:hover{
  border-color:#22e5a677;

  background:#0c2723;

  box-shadow:
    0 0 18px #22e5a611;
}

.menu-button{
  display:none;
  margin-right:auto;
}


/* ============================================================
   VIEWS
   ============================================================ */

.view{
  display:none;
}

.view.is-active{
  display:block;
}

.page{
  max-width:1220px;

  margin:auto;

  padding-bottom:24px;
}


/* ============================================================
   HERO
   ============================================================ */

.hero{
  position:relative;

  overflow:hidden;

  border-radius:16px;

  min-height:345px;

  padding:30px 0 30px;

  /*
    IMAGE OVERLAY

    LEFT:
    Strong dark background for the text.

    MIDDLE:
    Smoothly fades away.

    RIGHT:
    Almost completely transparent so
    Tux, terminal blocks, plant and
    filesystem books remain visible.
  */

  background-image:

    linear-gradient(
      90deg,

      rgba(7,16,15,.98) 0%,

      rgba(7,16,15,.96) 15%,

      rgba(7,16,15,.88) 28%,

      rgba(7,16,15,.62) 40%,

      rgba(7,16,15,.30) 52%,

      rgba(7,16,15,.10) 64%,

      rgba(7,16,15,.015) 76%,

      rgba(7,16,15,0) 86%,

      rgba(7,16,15,0) 100%
    ),

    url("ChatGPT Image Sep 20, 2026, 12_24_45 AM.png");

  background-position:
    center center,
    right center;

  background-size:
    100% 100%,
    cover;

  background-repeat:
    no-repeat,
    no-repeat;

  box-shadow:
    inset 0 1px rgba(255,255,255,.025),
    inset 0 -70px 90px rgba(0,0,0,.20),
    0 20px 60px rgba(0,0,0,.12);
}


/* ============================================================
   HERO ATMOSPHERE
   ============================================================ */

.hero::before{
  content:"";

  position:absolute;

  inset:0;

  pointer-events:none;

  /*
    Very subtle green atmosphere.
    Kept weak so it doesn't darken Tux.
  */

  background:
    radial-gradient(
      circle at 76% 38%,
      rgba(34,229,166,.045),
      transparent 25%
    );

  mix-blend-mode:screen;
}


/* ============================================================
   HERO BOTTOM FADE
   ============================================================ */

.hero::after{
  content:"";

  position:absolute;

  left:0;
  right:0;
  bottom:0;

  height:65px;

  pointer-events:none;

  background:
    linear-gradient(
      to top,
      var(--bg) 0%,
      rgba(7,16,15,.50) 25%,
      transparent 100%
    );
}


/* ============================================================
   HERO CONTENT
   ============================================================ */

.hero>*{
  position:relative;
  z-index:2;
}

.eyebrow{
  margin:0 0 8px;

  color:var(--green);

  font:
    600 13px var(--mono);

  letter-spacing:.03em;

  text-shadow:
    0 0 12px #22e5a644;
}

.hero h1{
  max-width:760px;

  margin:0 0 7px;

  font:
    700 42px/1.12 var(--sans);

  letter-spacing:-.025em;

  text-shadow:
    0 4px 25px rgba(0,0,0,.55);
}

.accent{
  color:var(--green);

  text-shadow:
    0 0 20px #22e5a633;
}

.hero>p:not(.eyebrow){
  max-width:700px;

  margin:0;

  color:#b3c6c1;

  font:
    18px/1.45 var(--mono);

  text-shadow:
    0 2px 12px rgba(0,0,0,.65);
}


/* ============================================================
   SEARCH
   ============================================================ */

.search-row{
  display:flex;

  gap:10px;

  max-width:760px;

  margin-top:-105px;

  position:relative;

  z-index:5;

  margin-bottom:0;
}

.search-box{
  display:flex;

  align-items:center;

  gap:11px;

  flex:1;

  min-width:0;

  padding:0 14px;

  border:1px solid var(--green);

  border-radius:9px;

  background:
    rgba(5,21,18,.94);

  box-shadow:
    inset 0 0 20px #22e5a607,
    0 0 25px #22e5a60a;

  transition:.2s ease;
}

.search-box:focus-within{
  background:
    rgba(6,26,22,.97);

  box-shadow:
    0 0 0 2px #22e5a611,
    0 0 28px #22e5a61c;
}

.search-box input{
  width:100%;

  min-width:0;

  padding:16px 0;

  border:0;

  outline:0;

  background:transparent;

  color:var(--text);

  font:16px var(--mono);
}

.search-box input::placeholder{
  color:#78918b;
}

.primary{
  border:0;

  border-radius:9px;

  background:
    linear-gradient(
      135deg,
      #35f4b5,
      var(--green)
    );

  color:#05100d;

  font-weight:700;

  padding:0 23px;

  cursor:pointer;

  box-shadow:
    0 0 22px #22e5a629;

  transition:.15s ease;
}

.primary:hover{
  transform:translateY(-1px);

  box-shadow:
    0 0 30px #22e5a644;
}

.primary:active{
  transform:translateY(0);
}


/* ============================================================
   TRY / PILLS
   ============================================================ */

.try-row,
.pills,
.related-links{
  display:flex;

  gap:8px;

  flex-wrap:wrap;
}

.try-row{
  align-items:center;

  margin:10px 0 18px;

  position:relative;

  z-index:5;

  font:14px var(--mono);
}

.pill,
.related-links button,
.tag{
  border:1px solid var(--line);

  border-radius:99px;

  background:#0b1b1a;

  color:#cfe2dd;

  padding:6px 11px;

  font:12px var(--mono);

  cursor:pointer;

  transition:.18s ease;
}

.pill:hover,
.related-links button:hover,
.tag:hover{
  border-color:#22e5a677;

  color:var(--green);

  background:#0c302a;
}


/* ============================================================
   SECTION HEAD
   ============================================================ */

.section-head{
  margin:8px 0 11px;

  position:relative;

  z-index:4;
}

.section-head h2{
  margin:0;

  font-size:25px;
}


/* ============================================================
   RESULT CARD
   ============================================================ */

.result-card{
  margin:10px 0;

  padding:20px;

  border:1px solid var(--line);

  border-radius:11px;

  background:
    linear-gradient(
      140deg,
      #0d211e,
      #081514
    );

  box-shadow:
    0 15px 45px rgba(0,0,0,.20);

  transition:.2s ease;
}

.result-card:hover{
  border-color:#22e5a655;

  transform:translateY(-1px);
}

.result-header{
  display:flex;

  justify-content:space-between;

  gap:15px;
}

.result-header h2{
  margin:0;
}

.category{
  color:var(--green);

  font:12px var(--mono);
}


/* ============================================================
   COMMANDS
   ============================================================ */

.command-row,
.example-row{
  display:flex;

  gap:8px;

  align-items:center;
}

.main-command,
.example-command{
  display:block;

  flex:1;

  min-width:0;

  overflow:auto;

  margin:12px 0;

  padding:12px 14px;

  border:1px solid #1b4039;

  border-radius:7px;

  background:
    linear-gradient(
      90deg,
      #071918,
      #091d1a
    );

  color:#ecfbf6;

  font:15px var(--mono);
}

.example-command{
  margin:7px 0;

  padding:8px;

  font-size:12px;
}

.copy-btn,
.fav-btn,
.next-btn{
  border:1px solid var(--line);

  border-radius:6px;

  background:#102523;

  color:var(--text);

  padding:7px 10px;

  cursor:pointer;

  transition:.18s ease;
}

.copy-btn:hover,
.next-btn:hover{
  border-color:var(--green);

  background:#12312b;
}

.fav-btn{
  font-size:20px;

  color:var(--green);
}

.fav-btn.is-active{
  color:var(--amber);
}


/* ============================================================
   RESULT DETAILS
   ============================================================ */

.description,
.flag-list{
  color:#b8c9c5;
}

.flags,
.examples,
.related{
  margin-top:14px;
}

.note{
  color:#b7cced;
}


/* ============================================================
   EMPTY STATE
   ============================================================ */

.empty-state{
  padding:40px;

  border:1px dashed var(--line);

  border-radius:10px;

  text-align:center;

  color:var(--muted);

  background:
    rgba(7,18,16,.45);
}


/* ============================================================
   CATEGORY GRID
   ============================================================ */

.category-grid{
  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:14px;
}

.category-card{
  min-height:140px;

  padding:20px;

  border:1px solid var(--line);

  border-radius:9px;

  background:
    linear-gradient(
      145deg,
      #0c1a18,
      #081312
    );

  color:var(--text);

  text-align:left;

  cursor:pointer;

  box-shadow:
    0 8px 25px rgba(0,0,0,.15);

  transition:.18s ease;
}

.category-card:hover,
.category-card.is-active{
  border-color:var(--green);

  transform:translateY(-2px);

  box-shadow:
    0 12px 35px rgba(0,0,0,.22),
    0 0 20px #22e5a60d;
}

.category-card-name{
  display:block;

  font-size:18px;

  font-weight:700;
}

.category-card-count{
  display:block;

  margin-top:9px;

  color:var(--muted);

  font:12px var(--mono);
}

.category-detail{
  margin-top:22px;
}

.category-detail-title{
  color:var(--green);
}


/* ============================================================
   CHEAT SHEET
   ============================================================ */

.table-wrap{
  overflow:hidden;

  border:1px solid var(--line);

  border-radius:9px;

  background:#06110f;
}

.cheat-section h2{
  margin:0;

  padding:11px 15px;

  background:#09201c;

  color:var(--green);

  font:600 14px var(--mono);
}

.cheat-list{
  margin:0;

  padding:0;

  list-style:none;
}

.cheat-list li{
  display:grid;

  grid-template-columns:
    1.2fr 2fr;

  gap:15px;

  padding:10px 15px;

  border-top:1px solid var(--line);
}

.cheat-list code{
  color:#c9f5e4;
}


/* ============================================================
   PRACTICE
   ============================================================ */

.practice-card{
  max-width:760px;

  padding:22px;

  border:1px solid var(--green);

  border-radius:10px;

  background:
    linear-gradient(
      145deg,
      #0a231f,
      #071512
    );

  box-shadow:
    0 0 25px #22e5a60f;
}

.practice-score{
  color:var(--green);

  font:16px var(--mono);
}

.practice-description{
  font-size:20px;
}

.practice-options{
  display:grid;

  grid-template-columns:
    repeat(2,1fr);

  gap:12px;
}

.practice-option{
  padding:13px;

  border:1px solid var(--line);

  border-radius:7px;

  background:#0b1b1a;

  color:var(--text);

  text-align:left;

  font:14px var(--mono);

  cursor:pointer;

  transition:.18s ease;
}

.practice-option:hover{
  border-color:#22e5a655;

  transform:translateY(-1px);
}

.practice-option.is-correct{
  border-color:var(--green);

  background:#0b3c2d;
}

.practice-option.is-incorrect{
  border-color:#f27895;

  background:#3c1621;
}

.feedback-correct{
  color:var(--green);
}

.feedback-incorrect{
  color:#ff9aac;
}


/* ============================================================
   ABOUT
   ============================================================ */

.about-copy{
  max-width:650px;

  font-size:17px;

  line-height:1.5;

  color:#c4d4d0;
}

.terminal-callout{
  max-width:640px;

  margin:18px 0 28px;

  padding:15px;

  border:1px solid var(--green);

  border-radius:8px;

  background:#09231e;

  color:var(--green);

  font:15px var(--mono);
}

.about-grid{
  display:grid;

  grid-template-columns:
    1fr 1fr;

  gap:14px;
}

.about-card{
  padding:16px;

  border:1px solid var(--line);

  border-radius:8px;

  background:#0c1a18;
}

.badges{
  display:flex;

  gap:8px;

  flex-wrap:wrap;
}

.badges span{
  padding:8px;

  border:1px solid var(--line);

  border-radius:6px;

  font:12px var(--mono);
}


/* ============================================================
   FOOTER
   ============================================================ */

footer{
  display:flex;

  justify-content:space-between;

  margin-top:auto;

  padding:18px 0;

  border-top:1px solid var(--line);

  color:#92aaa3;

  font:12px var(--mono);
}


/* ============================================================
   LIGHT MODE
   ============================================================ */

body.light{
  --bg:#edf6f3;
  --panel:#fff;
  --text:#14211e;
  --muted:#51655f;
  --line:#b8d0c8;
}

body.light .sidebar,
body.light .main-command{
  background:#f7fffb;
}


/* ============================================================
   TABLET
   ============================================================ */

@media(max-width:1100px){

  .main-content{
    padding:0 26px;
  }

  .topbar{
    height:58px;
  }

  .hero{
    min-height:330px;

    padding:28px 0 25px;

    background-position:
      center,
      72% center;
  }

  .hero h1{
    max-width:650px;

    font-size:38px;
  }

  .search-row{
    margin-top:-90px;
  }

  .try-row{
    margin-top:10px;
    margin-bottom:16px;
  }

  .category-grid{
    grid-template-columns:
      repeat(2,1fr);
  }
}


/* ============================================================
   MOBILE
   ============================================================ */

@media(max-width:820px){

  .sidebar{
    position:fixed;

    z-index:50;

    translate:-100% 0;

    transition:
      translate .22s ease;

    box-shadow:
      20px 0 60px rgba(0,0,0,.45);
  }

  .sidebar.open{
    translate:0 0;
  }

  .main-content{
    width:100%;

    padding:0 18px;
  }

  .topbar{
    height:64px;
  }

  .menu-button{
    display:block;
  }

  .hero{

    min-height:340px;

    padding:28px 0 30px;

    background-image:

      /*
        Mobile gradient:
        dark on the LEFT,
        almost transparent on the RIGHT.
      */

      linear-gradient(
        90deg,

        rgba(7,16,15,.97) 0%,

        rgba(7,16,15,.91) 22%,

        rgba(7,16,15,.62) 42%,

        rgba(7,16,15,.22) 62%,

        rgba(7,16,15,.03) 78%,

        rgba(7,16,15,0) 100%
      ),

      url("ChatGPT Image Sep 20, 2026, 12_24_45 AM.png");

    background-position:
      center,
      74% center;

    background-size:
      100% 100%,
      cover;

    background-repeat:
      no-repeat,
      no-repeat;
  }

  .hero h1{
    max-width:600px;

    font-size:33px;
  }

  .hero>p:not(.eyebrow){
    font-size:16px;

    max-width:580px;
  }

  .search-row{
    margin-top:-75px;
  }

  .try-row{
    margin-top:9px;
    margin-bottom:17px;
  }

  .category-grid,
  .about-grid{
    grid-template-columns:1fr;
  }

  footer{
    flex-direction:column;

    gap:12px;
  }
}


/* ============================================================
   SMALL MOBILE
   ============================================================ */

@media(max-width:600px){

  .main-content{
    padding:0 13px;
  }

  .topbar{
    height:60px;
  }

  .hero{

    min-height:370px;

    padding:25px 0 28px;

    border-radius:12px;

    background-image:

      linear-gradient(
        90deg,

        rgba(7,16,15,.97) 0%,

        rgba(7,16,15,.90) 24%,

        rgba(7,16,15,.58) 45%,

        rgba(7,16,15,.20) 65%,

        rgba(7,16,15,.02) 82%,

        rgba(7,16,15,0) 100%
      ),

      url("ChatGPT Image Sep 20, 2026, 12_24_45 AM.png");

    background-position:
      center,
      78% center;
  }

  .hero h1{
    font-size:30px;

    line-height:1.13;
  }

  .hero>p:not(.eyebrow){
    font-size:14px;

    line-height:1.5;
  }

  .search-row{
    flex-direction:column;

    align-items:stretch;

    margin-top:-65px;
  }

  .search-box{
    width:100%;
  }

  .search-box input{
    font-size:14px;
  }

  .primary{
    min-height:48px;

    padding:13px;
  }

  .try-row{
    flex-direction:column;

    align-items:flex-start;

    margin-top:9px;
    margin-bottom:20px;
  }

  .pill{
    width:fit-content;
  }

  .practice-options{
    grid-template-columns:1fr;
  }

  .cheat-list li{
    grid-template-columns:1fr;
  }

  .result-header{
    flex-direction:column;
  }

  .command-row,
  .example-row{
    align-items:stretch;
  }
}


/* ============================================================
   VERY SMALL MOBILE
   ============================================================ */

@media(max-width:400px){

  .brand b{
    font-size:19px;
  }

  .logo{
    padding:6px;

    font-size:18px;
  }

  .hero{
    min-height:390px;
  }

  .hero h1{
    font-size:27px;
  }

  .eyebrow{
    font-size:11px;
  }

  .section-head h2{
    font-size:22px;
  }

  .search-row{
    margin-top:-55px;
  }
}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media(prefers-reduced-motion:reduce){

  *,
  *::before,
  *::after{

    scroll-behavior:auto !important;

    animation-duration:.01ms !important;

    animation-iteration-count:1 !important;

    transition-duration:.01ms !important;
  }
}