@import "forikolo-colors.css";



html, body {
     height: 100 % ;
     margin: 0;
     font-family : system-ui, Roboto, Arial;
     background: var(--bg);
     color: var(--chalk)
}
.logo {
  background-image: url(cropped-forikolo_logo_t-w.png);

  background-repeat: no-repeat;
  background-position: center;
  min-height: 66px;
}

.container {
     max-width : 1100px;
     margin: 24px auto;
     padding: 40px;
     display: grid;
     gap: 48px
}
 .poster {
     background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(0, 0, 0, 0.08)), #0b1220;
     border-radius : 14px;
     padding: 40px;
     box-shadow : 0 8px 28px rgba(0, 0, 0, 0.6);
}
 h1 {
     font-size : 2.4rem;
     margin: 0 0 16px;
     color: var(--chalk)
}
 .subtitle {
     color: var(--muted);
     margin-bottom : 28px;
     font-size : 1.2rem
}
 .row {
     display: flex;
     gap: 24px;
     align-items : flex-start
}
 .col{
    flex : 1
}
.section {
     padding: 18px 0;
     border-top : 1px dashed rgba(255, 255, 255, 0.1)
}
 .big {
     font-weight : 700;
     font-size : 1.5rem;
     margin-bottom : 8px
}
 .kbd {
     background: rgba(255, 255, 255, 0.04);
     padding: 6px 10px;
     border-radius : 8px;
     font-weight : 600;
     font-size : 1.1rem
}
 .diagram {
     background: linear-gradient(180deg, rgba(255, 255, 255, 0.01), rgba(255, 255, 255, 0.02));
     border-radius : 10px;
     padding: 20px;
     margin-top : 12px;
     text-align : center
}
.example {
     margin-top : 10px;
     color: var(--muted);
     font-size : 1.1rem
}
.example::before {
  content: "📚";
  margin-left: -1em;
}
.task {
  margin-top : 9px;
  color: var(--accent);
  font-size : 1.1rem
}
.task::before {
  content: "📝";
  margin-left: -1em;
  display: inline-block;
}
 table {
     width: 100 % ;
     border-collapse : collapse;
     margin-top : 12px;
     font-size : 1.1rem
}
 td, th {
     padding: 10px 12px;
     border-bottom : 1px dashed rgba(255, 255, 255, 0.1);
     text-align : left
}
 th {
     color: var(--accent);
     font-weight : 700
}
 .tip {
     background: linear-gradient(90deg, rgba(255, 209, 102, 0.1), rgba(255, 209, 102, 0.06));
     padding: 16px;
     border-radius : 10px;
     color: var(--chalk);
     margin-top : 12px;
     font-size : 1.1rem
}
 .svg {
     width: 100 % ;
     height: 280px
}
 .small-svg{
    height : 160px
}
 g {
  stroke: #f8f8f4;
}

@media print {
     body {
         background: white;
         color: black
    }
     .poster {
         background: white;
         color: black;
         box-shadow : none
    }
     .tip {
         background: #fff3cc
    }
}
 @media(max-width : 900px) {
     .row {
         flex-direction : column
    }
}