:root{
      --bg:#0f1724;
      --card:#0b1220;
      --muted:#94a3b8;
      --accent1:#6ee7b7;
      --accent2:#7dd3fc;
      --glass: rgba(255,255,255,0.04);
      --radius:16px;
      --maxw:80%;
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      background:
        linear-gradient(180deg, #071226 0%, #07142a 3000%);
      color:#e6eef8;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      padding:48px 20px;
      display:flex;
      align-items:flex-start;
      justify-content:center;
      gap:24px;
      min-height:100vh;
    }

    .container{
      width:100%;
      max-width:var(--maxw);
    }

    #topblock {
      position:absolute;
      top: 20px;
      right: 20px;
      z-index: 1000;
    }

    #donntu {
      display: flex;
      flex-direction: row;
      align-items: flex-end;
      gap: 8px;
    }

    #donntu a {
      color: var(--accent2);
      text-decoration: none;
      font-size: 14px;
      font-weight: 500;
      padding: 8px 16px;
      border-radius: var(--radius);
      background: linear-gradient(135deg, rgba(125, 211, 252, 0.1), rgba(110, 231, 183, 0.05));
      border: 1px solid rgba(125, 211, 252, 0.2);
      backdrop-filter: blur(6px);
      transition: all 0.3s ease;
      text-align: right;
    }

    #donntu a:hover {
      background: linear-gradient(135deg, rgba(125, 211, 252, 0.2), rgba(110, 231, 183, 0.1));
      border-color: var(--accent2);
      color: white;
      text-shadow: 0 0 8px var(--accent2);
      transform: translateY(-1px);
      box-shadow: 0 4px 15px rgba(125, 211, 252, 0.3);
    }

    header{
      display:flex;
      align-items:center;
      gap:18px;
      margin-bottom:20px;
    }
    .avatar {
      width: 180px;
      height: 240px;
      border-radius: 14px;
      background: linear-gradient(135deg, var(--accent1), var(--accent2));
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      color: #022;
      font-size: 28px;
      box-shadow: 0 6px 30px rgba(50,75,120,0.25);
      padding: 4px;
      text-decoration: none;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      flex-shrink: 0;
    }

    .avatar:hover {
      box-shadow: 0 4px 40px rgba(50,75,120,0.4);
    }

    .avatar img {
      width: 100%;
      height: 100%;
      border-radius: 8px;
    }

    .title{
      display:flex;
      flex-direction:column;
      gap:6px;
    }

    h1{
      margin:0;
      font-size:24px;
      line-height:1;
      letter-spacing:0.2px;
      color:#f8fafc;
    }

    h2{
        margin: 0;
        font-size: 18px;
        line-height: 1;
        letter-spacing: 0.2px;
        color: #f8fafc;
    }

    h3{
      margin-bottom: 40px;
      font-size: 24px;
      line-height: 1;
      letter-spacing: 0.2px;
      text-align: center;
      color: #f8fafc;
    }

    h4{
      margin: 0;
      font-size: 16px;
      line-height: 1;
      letter-spacing: 0.2px;
      color: #f8fafc;
      font-weight:bold;
      text-indent: 2em; 
      text-align: justify; 
    }

    .abstract-text {
      font-size: 18px;
      text-align: justify; 
      line-height: 1.5;      
      margin-bottom: -8px;    
      text-indent: 2.5em;      
    }

    .abstract-text a{
      color: #f8fafc;
    }

    .subtitle{
      margin:0;
      color:var(--muted);
      font-size:18px;
    }
    .subtitle a{
      color:var(--muted);
      text-decoration:none;
    }
    .toc-list {
      counter-reset: item;
      padding-left: 28px;
      margin: 0;
      font-size: 16px;
      line-height: 1.6;
      
    }

    .toc-list > li {
      counter-increment: item;
      margin-bottom: 6px;
      font-weight: bold;
    }

    .toc-list > li::marker {
      content: counter(item) ". ";
      font-weight: bold;
      color: #f8fafc;
    }

    .toc-list ol {
      counter-reset: item; 
      padding-left: 12px;
      margin-top: 4px;
      font-weight: normal;
    }

    .toc-list ol > li {
      counter-increment: item;
      margin-bottom: 4px;
    }

    .toc-list ol > li::marker {
      content: counters(item, ".") " ";
      color: #f8fafc;
    }
    .toc-list ol ol {
      padding-left: 12px;
    }

    .toc-list ol ol > li {
      counter-increment: item;
    }

    .toc-list ol ol > li::marker {
      content: counters(item, ".") " ";
      color: #f8fafc;
    }
    .toc-list a {
      text-decoration: none;
      color: #f8fafc;
    }

    .toc-list a:hover {
      text-decoration: underline;
    }

    .toc-list li.no-num {
      counter-increment: none;
      list-style-type: none;  
      font-weight: bold;
    }

    .toc-list li.no-num::marker {
      content: "";
    }
    .toc-list li.no-num {
      counter-increment: none;   
      list-style-type: none;     
      margin-left: 0;            
      padding-left: 2ch;        
      text-indent: -6ch;       
    }

    .toc-list li.no-num::before {
      content: "";              
      display: inline-block;
      width: 2ch;                 
    }
    
    .main-nav {
      margin: 40px 0;
      font-size: 24px;
      text-align: center;
    }

    .main-nav ul {
      list-style: none;
      padding: 0;
      display: flex;
      justify-content: center;
      gap: 20px;
    }

    .main-nav a {
      display: inline-block;
      padding: 10px 20px;
      font-weight: 600;
      color: var(--accent1);
      text-decoration: none;
      border-radius: var(--radius);
      background: 
        linear-gradient(var(--card), var(--card)) padding-box,
        linear-gradient(135deg, var(--accent1), var(--accent2)) border-box;

      border: 2px solid transparent;
      transition: color 0.3s ease, text-shadow 0.3s ease, background 0.3s ease;
    }
    .main-nav a:hover {
      color: white;
      text-shadow: 0 0 8px var(--accent2);
    }

    .card{
      background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.07));
      border-radius: var(--radius);
      padding:20px;
      box-shadow: 0 8px 30px rgba(2,6,23,0.6);
      border: 1px solid rgba(255,255,255,0.04);
      backdrop-filter: blur(6px);
      max-width: 85%;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .content-card{
      background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.07));
      border-radius: var(--radius);
      padding:20px;
      box-shadow: 0 8px 30px rgba(2,6,23,0.6);
      border: 1px solid rgba(255,255,255,0.04);
      backdrop-filter: blur(6px);
      max-width: 75%;
      margin: 20px auto;
      display: flex;
      flex-direction: column;
    }

    .abstract-card{
      background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.07));
      border-radius: var(--radius);
      padding:20px;
      box-shadow: 0 8px 30px rgba(2,6,23,0.6);
      border: 1px solid rgba(255,255,255,0.04);
      backdrop-filter: blur(6px);
      max-width: 100%;
      margin: 20px auto;
      display: flex;
      flex-direction: column;
    }

    .abstract-card-margin{
      margin-top: 30px;
    }

    .abstract-card-margin-2{
      margin-top: 20px;
    }

    .abstract-card-margin-2 img{
      display: block;
      margin: 24pt auto 0pt auto;
      width: 40%;
    }
    .abstract-card-margin-2 .img-p {
      text-align: center;
      text-indent: 0cm;
      margin-bottom: 24pt;
    }

    .contact{
      display:flex;
      gap:12px;
      flex-wrap:wrap;
      margin-top:6px;
      font-size:13px;
      color:var(--muted);
    }

    .skills-heading{
        margin:0 0 6px 0; 
        font-size:16px; 
        color:#dff8ff;
        text-align: center;
    }

    .skills-table{
      width:100%;
      border-collapse:collapse;
      margin-top:18px;
      overflow:hidden;
      border-radius:12px;
      display:table;
    }

    .skills-table thead th{
      text-align:left;
      padding:16px 18px;
      font-size:14px;
      color:var(--accent2);
      background: linear-gradient(90deg, rgba(125,211,252,0.04), transparent 60%);
      border-bottom:1px solid rgba(255,255,255,0.03);
    }

    .skills-table tbody tr{
      border-bottom:1px dashed rgba(255,255,255,0.03);
      transition: background 160ms ease;
    }
    .skills-table tbody tr:hover{
      background: rgba(255,255,255,0.05);
    }
    .skills-table tbody tr:hover td:first-child {
      border-top-left-radius: var(--radius);
      border-bottom-left-radius: var(--radius);
    }

    .skills-table tbody tr:hover td:last-child {
      border-top-right-radius: var(--radius);
      border-bottom-right-radius: var(--radius);
    }
    .skills-table td{
      padding:10px;
      vertical-align:top;
      font-size:16px;
      color:#dbeafe;
    }

    .category{
      width:280px;
      font-weight:600;
      color:#c7e6ff;
      align-items: self-end;
      text-align: end;
      font-weight:bolder;
      align-content: center;
    }

    .skill-list{
      display:flex;
      flex-direction:column;
      gap:8px;
      list-style-position: inside;
      padding-left: 20px;
    }

   .skill-list-ol {
      counter-reset: item;
      padding-left: 40px;
    }

    .skill-list-ol a{
      color: #f8fafc;
    }

    .skill-list-ol > li {
      counter-increment: item;
      margin-bottom: 6px;
    }

    .skill-list-ol > li::marker {
      content: counter(item) ") "; 
      font-weight: bold;
    }

    .skill-list-ol ol {
      counter-reset: subitem;
      padding-left: 24px;
      margin-top: 6px;
    }

    .skill-list-ol ol > li {
      counter-increment: subitem;
      margin-bottom: 4px;
    }

    .skill-list-ol ol > li::marker {
      content: "*    ";
      font-size: 10px;
      font-weight: bold;
    }

    .skill-list-ol ul {
      list-style: none;   
      margin: 4px 0;
      padding-left: 18px;
    }

    .skill-list-ol ul li::before {
      content: "– ";        
      color: var(--muted); 
    }

    .numbers-skill-list{
      display:inline;
      font-size: 22px;
      font-weight: bolder;
      margin: 0;
      padding-right: 2px; 
    }

    .link-style{
      color:#dbeafe; /**color:var(--accent2);**/
      text-decoration: none; 
    }

    .contacts {
      list-style: none;     
      margin: 0;
      padding: 0;
      display: flex;           
      flex-wrap: wrap;        
      gap: 12px 20px; 
      padding-left: 20px;      
    }

    .contacts li a {
      text-decoration: none; 
      color: var(--accent2);   
      font-weight: 500;
    }

    .contacts li a:hover {
      text-decoration: underline; 
    }


    .chip{
      display:inline-block;
      padding:6px 10px;
      border-radius:999px;
      background:var(--glass);
      color:var(--muted);
      font-size:13px;
      border:1px solid rgba(255,255,255,0.02);
    }

    .badge-row{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin-top:8px;
    }

    .sakura-container {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      overflow: hidden;
      z-index: 0;
    }

    .petal {
      position: absolute;
      top: -5vh;
      background: pink;
      border-radius: 150% 0 150% 0;
      opacity: 0.8;
      animation: fall linear forwards;
    }

    .skull {
      position: absolute;
      top: -5vh;
      font-size: 40px;
      animation: fall linear forwards;
      opacity: 0.9;
    }


    .gost-table-container {
      display: flex;
      justify-content: center;
      margin-top: 16px;
      margin-bottom: 20px;
    }

    .gost-table-wrapper {
      width: 90%;
    }

    .gost-table-caption {
      display: flex;
      justify-content: flex-end;
      font-size: 16px;
      color: #f8fafc;
      margin-top: 20px;
      margin-bottom: 20px;
    }

    .gost-table {
      width: 100%;
      border-collapse: collapse;
      color: #e6eef8;
    }

    .gost-table th,
    .gost-table td {
      border: 1px solid #f8fafc;
      padding: 12px 16px;
      vertical-align: top;
      text-align: left;
    }

    .gost-table th {
      text-align: center;
      color:#f8fafc;
      font-weight: bold;
    }


    .gost-table tbody tr:hover {
      background: rgba(125,211,252,0.05);
    }
    

    .abstract-card h4{
      font-size: 1.5rem;
    }
    .site-footer {
      margin-top: 60px;
      padding: 30px 0 20px;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.02));
      backdrop-filter: blur(10px);
    }

    .footer-content {
      max-width: var(--maxw);
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 30px;
    }

    .footer-nav {
      text-align: center;
    }

    .footer-menu {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      justify-content: center;
      gap: 25px;
      flex-wrap: wrap;
    }

    .footer-menu a {
      display: inline-block;
      padding: 8px 16px;
      font-weight: 500;
      color: var(--accent1);
      text-decoration: none;
      border-radius: var(--radius);
      background: 
        linear-gradient(var(--card), var(--card)) padding-box,
        linear-gradient(135deg, var(--accent1), var(--accent2)) border-box;
      border: 1px solid transparent;
      transition: all 0.3s ease;
      font-size: 18px;
    }

    .footer-menu a:hover {
      color: white;
      text-shadow: 0 0 8px var(--accent2);
      transform: translateY(-2px);
      box-shadow: 0 4px 15px rgba(110, 231, 183, 0.3);
    }
    @keyframes fall {
      0% {
        transform: translateY(0) translateX(0) rotate(0deg);
      }
      50% {
        transform: translateY(50vh) translateX(20px) rotate(180deg);
      }
      100% {
        transform: translateY(110vh) translateX(-20px) rotate(360deg);
      }
    }
    @media (max-width:880px){
      .category{width:140px}
      .avatar{width: 120px; height: 180px;}
      .title{margin-top: 16px;}
      .title h1{font-size: 14px;}
      .subtitle{font-size: 14px;}
       #topblock {
        top: 10px;
        right: 10px;
      }
      
      #donntu a {
        padding: 6px 12px;
        font-size: 12px;
      }
      .main-nav ul {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        list-style: none;
        padding: 0;
        margin: 0;
        font-size: 12px;
      }
      h3{
        font-size: 16px;
      }
      .content-card{
        max-width: 100%;
      }
      .content-card h4{
        font-size: 12px;
        text-align: center;
      }
      .content-card .toc-list{
        font-size: 10px;
      }
      .abstract-card h4{
        font-size: 12px;
      }
      .abstract-card h3{
        font-size: 12px;
      }
      .article-list{
        font-size: 12px;
      }
      .article-info p{
        font-size: 10px;
      }
      .gost-section p{
        font-size: 12px;
      }
      .gost-table-container .gost-table-wrapper .gost-article-caption{
        font-size: 12px;
      }
      .abstract-text{
        font-size: 12px;
      }
      .abstract-card-margin-2 img{
        margin: 16pt auto 0pt auto;
      }
      .abstract-card-margin-2 .img-p {
        font-size: 12px;
        margin-bottom: 16pt;
      }
      .gost-table-caption{
        font-size: 12px;
      }
      .gost-table {
        width: 100%;
        font-size: 12px;
      }
      .gost-table th,
      .gost-table td {
        padding: 12px 12px;
      }
      
      .gost-section h4{
         font-size: 12px !important;
         text-indent: 1.5em !important;
      }
      .gost-section h2,h3{
         font-size: 12px !important;
      }
      .abstract-card h4{
        font-size: 1rem;
        text-indent: 1.2em !important;
      }
      .individual-div p{
        font-size: 12px;
      }
      .abstract-card .individual-p{
        font-size: 12px;
        text-indent: 0.75cm;
      }
      .abstract-card .individual-p .float-right{
        width: 180px;
      }
      .abstract-card .individual-p .sub-paragraph{
        text-indent: 0.75cm;
      }
      .abstract-card .story-title{
        font-size: 14px;
      }
      .abstract-card .story-text{
        font-size: 10px;
      }
      .abstract-card .story-button{
        font-size: 10px;
      }
      .footer-content {
        gap: 25px;
      }
      
      .footer-menu {
        gap: 15px;
      }
      
      .footer-menu a {
        padding: 6px 12px;
        font-size: 12px;
      }
    }


    @media (max-width:680px){
      :root{
        --radius:24px;
        --maxw:100%;
      }
      body{padding:24px}
      .skills-table{
        width:auto;
        display:table;
      }

      .skills-table thead th{
        padding:8px 9px;
        font-size:8px;
      }
      .skills-table td{
        padding:10px;
        vertical-align:top;
        font-size:9px;
        color:#dbeafe;
      }

      .avatar{width: 90px; height: 120px;}
      .title{margin-top: 16px;}
      .title h1{font-size: 8px;}
      .subtitle{font-size: 8px;}
       #topblock {
        top: 10px;
        right: 10px;
      }
      
      #donntu a {
        padding: 6px 12px;
        font-size: 6px;
      }
      .main-nav ul {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 10px;
        list-style: none;
        padding: 0;
        margin: 0;
        font-size: 12px;
      }
      .sakura-container{width: 0%;}
      .card{
        max-width: 100%;
      }
      .card .category{
        font-size: 12px;
        width: 100%;
        text-align: center;
      }
      .card .skill-list{
        font-size: 12px;
        width: 100%;
        padding: 4px;
      }
      .card .skill-list-ol{
        font-size: 12px;
        width: 100%;
        padding-left: 10px;
      }
       .card .skill-list-ol ol{
        padding-left: 10px;
       }
      .card .skill-list-ol ul{
        padding-left: 4px;
      }
      .contacts{
        padding-left:4px;
      }
      .mobile-center {
        text-align: center;
      }
      h3{
        font-size: 12px;
      }
      .content-card h4{
        font-size: 8px;
        text-align: center;
      }
      .content-card .toc-list{
        font-size: 8px;
      }
      .abstract-card h4{
        font-size: 8px;
      }
      .abstract-text{
        font-size:8px;
      }
      .abstract-card-margin-2 img{
        margin: 12pt auto 0pt auto;
      }
      .abstract-card-margin-2 .img-p {
        font-size: 8px;
        margin-bottom: 12pt;
      }
      .gost-table-caption{
        font-size: 8px;
      }
      .gost-table {
        font-size: 6px;
      }
      .skill-list-ol{
        padding-left: 0px;
      }
      .gost-table th,
      .gost-table td {
        padding: 12px 12px;
      }
      .formula{
        font-size: 8px;
      }
      
      .abstract-card h3{
        font-size: 8px;
      }
      .article-list{
        font-size: 8px;
      }
      .article-info{
        padding-left: 0px;
      }
      .article-info p{
        font-size:6px;
      }
      .gost-section p{
        font-size: 8px;
        text-indent: 1em !important;
      }
      .gost-section h3{
        font-size: 10px;
      }
      .gost-section h2{
        font-size: 8px;
      }
      .gost-section h4{
         font-size: 10px !important;
         text-indent: 1em !important;
      }
      .gost-section h2,h3{
         font-size: 10px !important;
      }

      .abstract-card h4{
        font-size: 0.7rem;
        text-indent: 0em !important;
      }
      .individual-div p{
        font-size: 8px;
      }
      .abstract-card .individual-p{
        font-size: 8px;
        text-indent: 0.25cm;
      }
      .abstract-card .individual-p .float-right{
        width: 90px;
      }
      .abstract-card .individual-p .sub-paragraph{
        text-indent: 0.25cm;
      }
      .abstract-card .story-title{
        font-size: 12px;
      }
      .abstract-card .story-text{
        font-size: 8px;
      }
      .abstract-card .story-button{
        font-size: 8px;
      }
      .site-footer {
        margin-top: 40px;
        padding: 20px 0 15px;
      }
      
      .footer-menu {
        flex-direction: column;
        gap: 10px;
      }
      
      .footer-menu a {
        font-size: 10px;
        padding: 8px 16px;
      }

      .story-card{
        width: 180px !important;
      }
    }

    footer{
      margin-top:18px;
      color:var(--muted);
      font-size:13px;
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:12px;
    }

    .tagline{
      display:inline-flex;
      gap:8px;
      align-items:center;
      color:var(--muted);
      font-size:13px;
    }

    a, button { outline-color: rgba(125,211,252,0.25); }

.article-list {
  list-style: none;
  counter-reset: item;
  padding-left: 0;
  margin: 0;
}

.article-list > li {
  counter-increment: item;
  margin-bottom: 10px;
  background: var(--glass);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius);
  padding: 10px 16px;
  transition: background 0.3s ease;
}

.article-list > li:hover {
  background: rgba(255,255,255,0.06);
}

.article-list a{
  color: #f8fafc;
  text-decoration: none;
}

.article-list summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--accent2);
  list-style: none;
}

.article-list summary a{
  color: var(--accent2);
}

.article-list summary::-webkit-details-marker {
  display: none;
}

.article-list summary::before {
  content: counter(item) ". ";
  color: var(--accent2);
  font-weight: bold;
}

.article-info {
  margin-top: 8px;
  padding-left: 16px;
  font-size: 15px;
  line-height: 1.5;
  color: #dbeafe;
}


.gost-section {
  font-family: "Times New Roman", Times, serif;
  font-size: 14pt;
  line-height: 1.5;
  color: #f8fafc;
  text-align: justify;
  margin: 0 auto;
  max-width: 90%;
  margin-top: 48pt;
}

.gost-topblock{
  text-align: left;
}

.gost-section a {
  text-decoration: none;
  color: #f8fafc;
}

.gost-section .udk {
  text-align: left;
  text-indent: 0cm;
}

.gost-section h2 {
  font-family: "Times New Roman", Times, serif;
  font-size: 14pt;
  font-weight: bold;
  text-align: center;
  text-indent: 0;
  margin-top: -12pt;
  margin-bottom: 12pt;
  color: #f8fafc;
}

.gost-section h4{
  font-family: "Times New Roman", Times, serif;
  font-size: 14pt;
  font-weight: bold;
  text-align: left;
  text-indent: 1.25cm;
  margin-top: 12pt;
  margin-bottom: 12pt;
  color: #f8fafc;
}

/* Основной текст с отступом 1.25 см */
.gost-section p {
  text-indent: 1.25cm;
  margin: 0 0 4pt 0;
  text-align: justify;
}

/* Списки — без отступа первой строки, стандартные маркеры */
.gost-section ul,
.gost-section ol {
  margin: 0 0 12pt 2cm;
  padding: 0;
  text-indent: 0;
}

/* Подписи и вспомогательные элементы */
.gost-section .caption {
  text-align: center;
  text-indent: 0;
  font-style: italic;
  margin-top: 6pt;
  margin-bottom: 12pt;
}

.gost-section img {
  margin: 16pt auto;
  width: 30%;
}

.gost-section .img-p {
  text-align: center;
  text-indent: 0cm;
  margin-bottom: 16pt;
}

.gost-section .hash-div {
  text-indent: 0cm;
  margin-bottom: 16pt;
  margin-top: 16pt;
}
.gost-section .hash-div .hash-p {
  text-align: center;
}
.gost-section .gost-article-caption{
  text-align: right;
  font-size: 14pt;
}

.gost-section .gost-p-table {
  text-indent: 0cm;
}

.formula {
    position: relative;
    text-align: center;
    margin: 1em 0;
}

.formula .mjx-chtml {
    display: inline-block;
}
.formula .mjx-chtml .mjx-mrow:last-child {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.mjx-chtml {
    white-space: normal !important;
}

.float-right {
  float: right;
  width: 280px;
  height: auto;
  margin: 0 0 1rem 1.5rem;
  border-radius: 8px;
}
.sub-paragraph {
  display: block;          /* делает из span "новую строку" */
  text-indent: 1.25cm;     /* отступ первой строки */
  margin-top: 0.6em;       /* небольшой отступ сверху */
}

.individual-div{
  font-size: 0.95rem;
  font-style: italic;
  text-align: right;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  max-width: 50%;
  margin-left: auto;
}

.individual-p {
  text-indent: 1.25cm;
  font-size: 1.1rem;
  margin: 0 0 4pt 0;
  line-height: 1.5;
  text-align: justify;
}

.individual-p a {
  color: #f8fafc;
}

.chapter-3-wrapper {
    position: relative;
    overflow: hidden; /* Создает новый контекст форматирования */
}
.story-card {
    float: right;               
    width: 250px;
    background: url("../ind/images/img.jpeg");
    background-size: cover; 
    background-position: center; 
    border-radius: 12px;
    padding: 1rem;
    margin: 0 0 1rem 1.5rem;    
    font-family: "Inter", sans-serif;
    align-items: center;
}

.story-title {
    text-align: center;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.6rem;
}

.story-text {
    font-size: 0.8rem;
    line-height: 1.5;
    margin-bottom: 1rem;
}

.story-button {
    display: block;     
    width: max-content;      
    margin: 0 auto;    
    text-decoration: none;
    text-align: center;
    background-color: var(--accent2);
    color: #fff;
    font-weight: 600;
    padding: 0.45rem 0.9rem;
    border-radius: 8px;
    transition: background-color 0.2s ease;
}
.chapter-6-card {
    width: 95%; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.15); 
    border-radius: 12px;  
    border: 1px solid #e0e0e0; 
    padding: 24px;
    margin: auto;
}

.video-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}

.video-player {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--accent2);
  box-shadow: 0 4px 20px rgba(125, 211, 252, 0.3);
  /* Скрываем все элементы управления */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin-bottom: 36px;
}


.video-player::-webkit-media-controls-play-button,
.video-player::-webkit-media-controls-volume-slider,
.video-player::-webkit-media-controls-timeline {
  filter: invert(1);
}


.video-player::-webkit-media-controls-volume-slider {
  display: none !important;
}

.video-player::-webkit-media-controls-mute-button {
  display: none !important;
}

.video-player::-webkit-media-controls-timeline {
  display: none !important;
}

.video-player::-webkit-media-controls-current-time-display {
  display: none !important;
}

.video-player::-webkit-media-controls-time-remaining-display {
  display: none !important;
}

.video-player::-webkit-media-controls-timeline-container {
  display: none !important;
}

.video-player::-webkit-media-controls-fullscreen-button {
  display: none !important;
}

/* Для Firefox */
.video-player::-moz-range-track {
  display: none !important;
}

.video-player::-moz-range-thumb {
  display: none !important;
}