@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Albert+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap");

      :root {
        --teal-050: #eaf6f6;
        --teal-100: #d3ecec;
        --teal-200: #a7d9da;
        --teal-300: #6fc0c3;
        --teal-400: #33a7ac;
        --teal-500: #0c8289;
        --teal-600: #025f64;
        --teal-700: #054d52;
        --teal-800: #063e42;
        --teal-850: #063337;
        --teal-900: #05282c;
        --teal-950: #031d20;

        --bg: var(--teal-950);
        --bg-raised: var(--teal-900);
        --panel: var(--teal-850);
        --hairline: #0d4247;
        --hairline-soft: #0a373c;
        --text: #e8f4f4;
        --text-dim: #9dc4c5;
        --text-faint: #6fa0a2;
        --accent: #35b6bc;
        --accent-soft: #7fd2d6;

        --font-display: "Fraunces", Georgia, serif;
        --font-body: "Albert Sans", system-ui, sans-serif;

        --measure: 44rem;
        --wide: 72rem;
      }

      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      html {
        scroll-behavior: smooth;
        scroll-padding-top: 1.5rem;
      }

      body {
        background: var(--bg);
        color: var(--text);
        font-family: var(--font-body);
        font-size: 1.0625rem;
        line-height: 1.7;
        -webkit-font-smoothing: antialiased;
      }

      h1, h2, h3 {
        font-family: var(--font-display);
        font-weight: 600;
        line-height: 1.15;
        letter-spacing: 0;
        color: var(--text);
      }

      a { color: var(--accent-soft); }

      img, iframe { max-width: 100%; }

      .zujon-cojubo {
        max-width: var(--wide);
        margin: 0 auto;
        padding: 0 1.25rem;
      }

      .zujon-jozo {
        position: absolute;
        left: -999px;
        top: 0;
        background: var(--accent);
        color: var(--teal-950);
        padding: 0.5rem 1rem;
        z-index: 100;
      }
      .zujon-jozo:focus { left: 0.5rem; top: 0.5rem; }

      .zujon-viko {
        border-bottom: 1px solid var(--hairline-soft);
        background: var(--bg-raised);
        font-size: 0.8125rem;
        letter-spacing: 0.04em;
        color: var(--text-faint);
        text-align: center;
        padding: 0.45rem 1rem;
      }
      .zujon-viko strong { color: var(--accent-soft); font-weight: 600; }

      .zujon-cetor {
        border-bottom: 1px solid var(--hairline-soft);
        padding: 1.6rem 1rem 0;
        text-align: center;
      }
      .zujon-jehazu {
        display: inline-flex;
        align-items: center;
        gap: 0.65rem;
        text-decoration: none;
      }
      .zujon-jehazu svg { width: 2.4rem; height: 2.4rem; }
      .zujon-jehazu-gomicen {
        font-family: var(--font-display);
        font-size: 1.75rem;
        font-weight: 700;
        color: var(--text);
        letter-spacing: -0.01em;
      }
      .zujon-jehazu-gomicen em {
        font-style: normal;
        color: var(--accent);
      }
      .zujon-jehazu-regi {
        display: block;
        font-family: var(--font-body);
        font-size: 0.72rem;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.22em;
        color: var(--text-faint);
        margin-top: 0.2rem;
      }
      .zujon-nudet {
        margin-top: 1.1rem;
        display: flex;
        justify-content: center;
        gap: 0.25rem 2.2rem;
        flex-wrap: wrap;
        overflow-x: auto;
      }
      .zujon-nudet a {
        display: inline-block;
        padding: 0.65rem 0;
        font-size: 0.85rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.14em;
        text-decoration: none;
        color: var(--text-dim);
        border-bottom: 2px solid transparent;
        white-space: nowrap;
      }
      .zujon-nudet a:hover {
        color: var(--accent-soft);
        border-bottom-color: var(--accent);
      }

      .zujon-fonan {
        padding: 3.5rem 0 4.5rem;
        text-align: left;
        background:
          radial-gradient(60rem 26rem at 50% -8rem, rgba(12, 130, 137, 0.22), transparent 70%),
          var(--bg);
      }
      .zujon-fonan-zevu {
        display: grid;
        grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
        gap: 3.2rem;
        align-items: center;
      }
      .zujon-meke {
        display: inline-block;
        font-size: 0.78rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.24em;
        color: var(--accent);
        border: 1px solid var(--hairline);
        border-radius: 999px;
        padding: 0.35rem 1.1rem;
        margin-bottom: 1.5rem;
      }
      .zujon-fonan h1 {
        font-size: clamp(2rem, 3.6vw, 3.1rem);
        margin: 0 0 1.4rem;
      }
      .zujon-fonan h1 em {
        font-style: italic;
        color: var(--accent-soft);
      }
      .zujon-migar {
        max-width: var(--measure);
        margin: 0 0 0.9rem;
        color: var(--text-dim);
        font-size: 1.1rem;
      }

      .zujon-gemo {
        border: 1px solid var(--hairline);
        border-radius: 1rem;
        overflow: hidden;
        background: #ffffff;
      }
      .zujon-gemo-gulin {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        padding: 0.7rem 1.2rem;
        background: var(--teal-600);
        color: #f2fbfb;
        font-size: 0.82rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.12em;
      }
      .zujon-gemo-gulin span:last-child {
        color: var(--teal-100);
        font-weight: 500;
        letter-spacing: 0.06em;
        text-transform: none;
      }
      .zujon-gemo-momo { overflow: hidden; }

      .zujon-pefepu {
        list-style: none;
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 0 3.2rem;
        margin-top: 2.2rem;
        padding-top: 1.8rem;
        border-top: 1px solid var(--hairline-soft);
      }
      .zujon-pefepu li {
        padding: 0.4rem 0;
      }
      .zujon-pefepu b {
        display: block;
        font-family: var(--font-display);
        font-size: 1.9rem;
        font-weight: 700;
        color: var(--accent-soft);
      }
      .zujon-pefepu span {
        font-size: 0.82rem;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        color: var(--text-faint);
      }
      .zujon-dufize {
        list-style: none;
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 0.6rem 1.8rem;
        margin-top: 1.4rem;
        font-size: 0.9rem;
        color: var(--text-dim);
      }
      .zujon-dufize li::before {
        content: "✓";
        color: var(--accent);
        font-weight: 700;
        margin-right: 0.45rem;
      }

      .zujon-muna {
        border-top: 1px solid var(--hairline-soft);
        padding: 4.2rem 0;
      }
      .zujon-muna-davagil { background: var(--bg-raised); }
      .zujon-mopi {
        display: block;
        font-family: var(--font-display);
        font-style: italic;
        font-size: 1.05rem;
        color: var(--accent);
        margin-bottom: 0.6rem;
      }
      .zujon-muna h2 {
        font-size: clamp(1.6rem, 3.4vw, 2.4rem);
        margin-bottom: 1.6rem;
      }
      .zujon-demukus {
        max-width: var(--measure);
      }
      .zujon-demukus p + p { margin-top: 1rem; }
      .zujon-demukus p { color: var(--text-dim); }
      .zujon-demukus strong { color: var(--text); }
      .zujon-demukus h3 {
        font-size: 1.3rem;
        margin: 2.2rem 0 0.8rem;
      }
      .zujon-demukus ul {
        margin: 1rem 0 0 1.2rem;
        color: var(--text-dim);
      }
      .zujon-demukus ul li { padding: 0.15rem 0; }
      .zujon-demukus ul li::marker { color: var(--accent); }

      .zujon-jofi {
        border: 1px solid var(--hairline);
        border-radius: 0.85rem;
        background: var(--panel);
        padding: 1.8rem;
        margin-top: 2.2rem;
      }
      .zujon-jofi h3 { font-size: 1.3rem; margin-bottom: 0.8rem; }
      .zujon-jofi p { color: var(--text-dim); }
      .zujon-jofi p + p { margin-top: 0.9rem; }
      .zujon-jofi code {
        font-family: ui-monospace, "Cascadia Mono", monospace;
        color: var(--accent-soft);
        background: var(--teal-900);
        border: 1px solid var(--hairline-soft);
        border-radius: 0.3rem;
        padding: 0.1rem 0.45rem;
      }

      .zujon-gevis {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 0.9rem;
        margin-top: 1.4rem;
        padding: 1.1rem 1.3rem;
        border-left: 3px solid var(--accent);
        background: var(--teal-900);
        border-radius: 0 0.6rem 0.6rem 0;
        font-size: 0.95rem;
        color: var(--text-dim);
      }
      .zujon-gevis::before {
        content: "!";
        font-family: var(--font-display);
        font-weight: 700;
        font-size: 1.3rem;
        color: var(--accent);
        line-height: 1.2;
      }
      .zujon-gevis strong { color: var(--text); }

      .zujon-holocen {
        overflow-x: auto;
        border: 1px solid var(--hairline);
        border-radius: 0.85rem;
        margin: 2rem 0;
      }
      table.zujon-lagi {
        width: 100%;
        border-collapse: collapse;
        font-size: 0.95rem;
        min-width: 34rem;
      }
      .zujon-lagi th {
        text-align: left;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.14em;
        color: var(--accent-soft);
        background: var(--teal-900);
        padding: 0.85rem 1rem;
        border-bottom: 1px solid var(--hairline);
      }
      .zujon-lagi td {
        padding: 0.85rem 1rem;
        border-bottom: 1px solid var(--hairline-soft);
        color: var(--text-dim);
        vertical-align: top;
      }
      .zujon-lagi tr:last-child td { border-bottom: 0; }
      .zujon-lagi td:first-child { color: var(--text); font-weight: 600; }
      .zujon-lagi .zujon-nito { color: var(--accent); font-weight: 700; }
      .zujon-lagi tr.zujon-bomi td {
        background: var(--teal-800);
        color: var(--text);
        font-weight: 700;
      }
      .zujon-lagi tr.zujon-bomi td:last-child { color: var(--accent-soft); font-size: 1.05rem; }
      .zujon-lagi-pojine { min-width: 0; }
      .zujon-lagi-pojine td:last-child { text-align: right; color: var(--text); font-weight: 600; }
      .zujon-lagi-pojine td:first-child { font-weight: 400; color: var(--text-dim); }

      .zujon-homufa { margin-top: 2.4rem; }
      .zujon-sakit {
        display: grid;
        grid-template-columns: 4.2rem 1fr;
        gap: 1.4rem;
        padding: 1.9rem 0;
        border-top: 1px solid var(--hairline-soft);
      }
      .zujon-sakit:last-child { border-bottom: 1px solid var(--hairline-soft); }
      .zujon-sakit-gujosa {
        font-family: var(--font-display);
        font-style: italic;
        font-size: 2.6rem;
        font-weight: 500;
        color: var(--teal-400);
        line-height: 1;
      }
      .zujon-sakit h3 { font-size: 1.25rem; margin-bottom: 0.6rem; }
      .zujon-sakit p, .zujon-sakit li { color: var(--text-dim); }
      .zujon-sakit ol, .zujon-sakit ul {
        margin: 0.8rem 0 0.8rem 1.2rem;
      }
      .zujon-sakit ol li, .zujon-sakit ul li { padding: 0.15rem 0; }
      .zujon-sakit ol li::marker, .zujon-sakit ul li::marker { color: var(--accent); font-weight: 700; }

      .zujon-sokoze {
        list-style: none;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.1rem;
        margin-top: 2.4rem;
        counter-reset: mistake;
      }
      .zujon-sokoze li {
        counter-increment: mistake;
        border: 1px solid var(--hairline);
        border-radius: 0.85rem;
        background: var(--panel);
        padding: 1.4rem 1.5rem;
      }
      .zujon-sokoze li::before {
        content: "Mistake " counter(mistake, decimal-leading-zero);
        display: block;
        font-size: 0.72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.2em;
        color: var(--accent);
        margin-bottom: 0.55rem;
      }
      .zujon-sokoze b {
        display: block;
        color: var(--text);
        font-size: 1.02rem;
        margin-bottom: 0.35rem;
      }
      .zujon-sokoze p { font-size: 0.95rem; color: var(--text-dim); }

      .zujon-bamo {
        list-style: none;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.7rem 2.2rem;
        margin: 2rem 0 1.6rem;
        max-width: 56rem;
      }
      .zujon-bamo li {
        position: relative;
        padding: 0.55rem 0 0.55rem 1.8rem;
        border-bottom: 1px dashed var(--hairline);
        color: var(--text-dim);
      }
      .zujon-bamo li::before {
        content: "→";
        position: absolute;
        left: 0;
        color: var(--accent);
        font-weight: 700;
      }

      .zujon-rivo {
        max-width: 50rem;
        margin-top: 1rem;
        border-top: 1px solid var(--hairline);
      }
      .zujon-rivo details {
        border-bottom: 1px solid var(--hairline);
      }
      .zujon-rivo summary {
        cursor: pointer;
        list-style: none;
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 1.5rem;
        padding: 1.15rem 0.2rem;
        font-family: var(--font-display);
        font-size: 1.12rem;
        font-weight: 600;
        color: var(--text);
      }
      .zujon-rivo summary::-webkit-details-marker { display: none; }
      .zujon-rivo summary::after {
        content: "+";
        font-family: var(--font-body);
        font-weight: 400;
        font-size: 1.5rem;
        color: var(--accent);
        line-height: 1;
        flex-shrink: 0;
      }
      .zujon-rivo details[open] summary::after { content: "−"; }
      .zujon-rivo details[open] summary { color: var(--accent-soft); }
      .zujon-rivo details p {
        padding: 0 0.2rem 1.3rem;
        color: var(--text-dim);
        max-width: var(--measure);
      }

      .zujon-kejere {
        border-top: 1px solid var(--hairline);
        background:
          radial-gradient(46rem 20rem at 50% 120%, rgba(12, 130, 137, 0.28), transparent 70%),
          var(--bg-raised);
        padding: 4.2rem 0;
        text-align: center;
      }
      .zujon-kejere h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); margin-bottom: 1.2rem; }
      .zujon-kejere p {
        max-width: var(--measure);
        margin: 0 auto 0.9rem;
        color: var(--text-dim);
      }
      .zujon-kejere strong { color: var(--text); }
      .zujon-huvo {
        display: inline-block;
        margin-top: 1.4rem;
        background: var(--accent);
        color: var(--teal-950);
        font-weight: 700;
        text-decoration: none;
        border-radius: 999px;
        padding: 0.9rem 2.4rem;
        font-size: 1.02rem;
      }
      .zujon-huvo:hover { background: var(--accent-soft); }

      .zujon-ruba {
        background: var(--teal-050);
        color: var(--teal-900);
        padding: 3.4rem 0 2rem;
      }
      .zujon-ruba-zevu {
        display: grid;
        grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
        gap: 2.5rem;
        padding-bottom: 2.4rem;
        border-bottom: 1px solid var(--teal-200);
      }
      .zujon-ruba .zujon-jehazu-gomicen { color: var(--teal-900); font-size: 1.45rem; }
      .zujon-ruba .zujon-jehazu-gomicen em { color: var(--teal-600); }
      .zujon-ruba p { font-size: 0.92rem; color: var(--teal-700); margin-top: 0.9rem; max-width: 30rem; }
      .zujon-ruba h3 {
        font-family: var(--font-body);
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.18em;
        color: var(--teal-600);
        margin-bottom: 1rem;
      }
      .zujon-ruba ul { list-style: none; }
      .zujon-ruba ul li { padding: 0.25rem 0; }
      .zujon-ruba ul a {
        color: var(--teal-800);
        text-decoration: none;
        font-size: 0.95rem;
      }
      .zujon-ruba ul a:hover { color: var(--teal-500); text-decoration: underline; }
      .zujon-ruba-zefi {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 0.8rem 2rem;
        padding-top: 1.6rem;
        font-size: 0.85rem;
        color: var(--teal-700);
      }
      .zujon-ruba-zefi a { color: var(--teal-700); text-decoration: none; margin-left: 1.4rem; }
      .zujon-ruba-zefi a:first-child { margin-left: 0; }
      .zujon-ruba-zefi a:hover { color: var(--teal-500); }
      .zujon-dogu {
        font-size: 0.82rem !important;
        color: var(--teal-600) !important;
        border-left: 3px solid var(--teal-300);
        padding-left: 0.9rem;
      }

      @media (max-width: 760px) {
        .zujon-fonan { padding: 2.5rem 0 3.2rem; }
        .zujon-fonan-zevu { grid-template-columns: 1fr; gap: 2.4rem; }
        .zujon-nudet { gap: 0.25rem 1.3rem; justify-content: flex-start; }
        .zujon-cetor { text-align: left; padding-left: 1.25rem; }
        .zujon-pefepu { gap: 1rem 2rem; }
        .zujon-pefepu b { font-size: 1.5rem; }
        .zujon-muna { padding: 3rem 0; }
        .zujon-sokoze { grid-template-columns: 1fr; }
        .zujon-bamo { grid-template-columns: 1fr; }
        .zujon-sakit { grid-template-columns: 2.6rem 1fr; gap: 1rem; }
        .zujon-sakit-gujosa { font-size: 1.9rem; }
        .zujon-ruba-zevu { grid-template-columns: 1fr; gap: 1.8rem; }
        .zujon-gemo { margin-left: -1.25rem; margin-right: -1.25rem; border-radius: 0; border-left: 0; border-right: 0; }
      }