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

      :root {
        --bg: #080b10;
        --bg2: #0d1117;
        --bg3: #111820;
        --gold: #c8a96e;
        --gold2: #e8c98a;
        --gold-dim: rgba(200, 169, 110, 0.15);
        --teal: #4dd9c0;
        --teal-dim: rgba(77, 217, 192, 0.1);
        --text: #e8e2d6;
        --text-dim: #b8b2a8;
        --border: rgba(200, 169, 110, 0.18);
        --border2: rgba(255, 255, 255, 0.06);
      }

      html {
        scroll-behavior: smooth;
      }

      body {
        background: var(--bg);
        color: var(--text);
        font-family: "JetBrains Mono", monospace;
        font-size: 13px;
        line-height: 1.7;
        min-height: 100vh;
      }

      /* Grid background */
      body::before {
        content: "";
        position: fixed;
        inset: 0;
        background-image:
          linear-gradient(rgba(200, 169, 110, 0.03) 1px, transparent 1px),
          linear-gradient(90deg, rgba(200, 169, 110, 0.03) 1px, transparent 1px);
        background-size: 48px 48px;
        pointer-events: none;
        z-index: 0;
      }

      /* NAV */
      nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 100;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px 48px;
        background: rgba(8, 11, 16, 0.85);
        backdrop-filter: blur(16px);
        border-bottom: 1px solid var(--border2);
      }

      .nav-logo {
        font-family: "Syne", sans-serif;
        font-weight: 800;
        font-size: 16px;
        letter-spacing: 0.1em;
        color: var(--gold);
        text-transform: uppercase;
        text-decoration: none;
        display: flex;
        align-items: center;
        gap: 10px;
      }

      .nav-back-btn {
        background: transparent;
        color: var(--text-dim);
        border: 1px solid var(--border);
        padding: 10px 24px;
        font-family: "JetBrains Mono", monospace;
        font-size: 11px;
        letter-spacing: 0.15em;
        text-transform: uppercase;
        cursor: pointer;
        text-decoration: none;
        transition:
          border-color 0.2s,
          color 0.2s;
      }

      .nav-back-btn:hover {
        border-color: var(--gold);
        color: var(--gold);
      }

      /* MAIN */
      main {
        position: relative;
        z-index: 1;
        max-width: 900px;
        margin: 0 auto;
        padding: 148px 48px 100px;
      }

      .page-tag {
        font-size: 10px;
        letter-spacing: 0.3em;
        text-transform: uppercase;
        color: var(--teal);
        margin-bottom: 20px;
      }

      h1 {
        font-family: "Cormorant Garamond", serif;
        font-weight: 300;
        font-size: clamp(36px, 5vw, 64px);
        line-height: 1.05;
        color: var(--text);
        margin-bottom: 16px;
        text-wrap: balance;
      }

      h1 em {
        font-style: italic;
        color: var(--gold);
      }

      .divider {
        width: 48px;
        height: 1px;
        background: var(--gold);
        margin-bottom: 32px;
      }

      .page-sub {
        color: var(--text-dim);
        font-size: 13px;
        line-height: 1.8;
        max-width: 600px;
        margin-bottom: 48px;
      }

      /* TOOL CARD */
      .tool-card {
        background: var(--bg2);
        border: 1px solid var(--border2);
        border-radius: 4px;
        padding: 40px;
      }

      /* TYPE SELECTOR */
      .type-label {
        font-size: 10px;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: var(--text-dim);
        margin-bottom: 12px;
      }

      .type-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 32px;
      }

      .type-btn {
        padding: 8px 18px;
        font-family: "JetBrains Mono", monospace;
        font-size: 11px;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        border-radius: 2px;
        border: 1px solid var(--border2);
        background: transparent;
        color: var(--text-dim);
        cursor: pointer;
        transition: all 0.2s;
      }

      .type-btn:hover {
        border-color: var(--gold);
        color: var(--gold);
      }

      .type-btn.active {
        border-color: var(--gold);
        background: var(--gold-dim);
        color: var(--gold);
      }

      /* INPUT */
      .input-label {
        font-size: 10px;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: var(--text-dim);
        margin-bottom: 12px;
      }

      textarea {
        width: 100%;
        height: 130px;
        padding: 14px 16px;
        font-family: "JetBrains Mono", monospace;
        font-size: 12px;
        line-height: 1.7;
        background: var(--bg3);
        color: var(--text);
        border: 1px solid var(--border2);
        border-radius: 2px;
        resize: vertical;
        transition: border-color 0.2s;
      }

      textarea:focus {
        outline: none;
        border-color: var(--gold);
      }

      textarea::placeholder {
        color: var(--text-dim);
        opacity: 0.6;
      }

      .input-hint {
        font-size: 11px;
        color: var(--text-dim);
        margin-top: 8px;
        opacity: 0.7;
      }

      /* GENERATE BUTTON */
      .generate-btn {
        margin-top: 24px;
        padding: 12px 32px;
        font-family: "Syne", sans-serif;
        font-weight: 700;
        font-size: 11px;
        letter-spacing: 0.15em;
        text-transform: uppercase;
        background: var(--gold);
        color: var(--bg);
        border: none;
        border-radius: 2px;
        cursor: pointer;
        transition:
          background 0.2s,
          opacity 0.2s;
      }

      .generate-btn:hover {
        background: var(--gold2);
      }
      .generate-btn:disabled {
        opacity: 0.5;
        cursor: not-allowed;
      }

      /* STATUS */
      .status {
        margin-top: 16px;
        font-size: 11px;
        letter-spacing: 0.1em;
        color: var(--teal);
        display: none;
      }

      .status.error {
        color: #e07070;
      }

      /* DIAGRAM OUTPUT */
      .diagram-output {
        margin-top: 40px;
        display: none;
      }

      .output-label {
        font-size: 10px;
        letter-spacing: 0.2em;
        text-transform: uppercase;
        color: var(--text-dim);
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }

      .diagram-frame {
        background: #ffffff;
        border-radius: 2px;
        padding: 32px;
        overflow-x: auto;
      }

      .diagram-frame svg {
        max-width: 100%;
        height: auto;
        display: block;
        margin: 0 auto;
      }

      /* CODE BLOCK */
      .code-toggle {
        margin-top: 16px;
        font-size: 11px;
        color: var(--text-dim);
        cursor: pointer;
        letter-spacing: 0.05em;
        background: none;
        border: none;
        font-family: "JetBrains Mono", monospace;
        padding: 0;
        display: flex;
        align-items: center;
        gap: 6px;
      }

      .code-toggle:hover {
        color: var(--gold);
      }

      .code-block {
        display: none;
        margin-top: 12px;
        padding: 16px;
        background: var(--bg3);
        border: 1px solid var(--border2);
        border-radius: 2px;
        font-size: 11px;
        line-height: 1.7;
        color: var(--text-dim);
        white-space: pre-wrap;
        overflow-x: auto;
      }

      /* COPY BUTTON */
      .copy-btn {
        font-family: "JetBrains Mono", monospace;
        font-size: 10px;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        background: transparent;
        border: 1px solid var(--border2);
        color: var(--text-dim);
        padding: 4px 10px;
        border-radius: 2px;
        cursor: pointer;
        transition: all 0.2s;
      }

      .copy-btn:hover {
        border-color: var(--gold);
        color: var(--gold);
      }

      /* FOOTER */
      footer {
        position: relative;
        z-index: 1;
        text-align: center;
        padding: 32px 48px;
        border-top: 1px solid var(--border2);
        font-size: 11px;
        color: var(--text-dim);
        letter-spacing: 0.05em;
      }

      footer a {
        color: var(--gold);
        text-decoration: none;
      }

      footer a:hover {
        text-decoration: underline;
      }

      @media (max-width: 700px) {
        nav {
          padding: 16px 24px;
        }
        main {
          padding: 120px 24px 80px;
        }
        .tool-card {
          padding: 24px;
        }
      }