:root {
      --paper:    #F2F7EF;
      --paper-2:  #E3EFDD;
      --card:     #FBFDF8;
      --ink:      #14271B;
      --ink-soft: #364A3D;
      --muted:    #7B8C7E;
      --accent:   #138A5C;
      --accent-2: #7FB23E;
      --forest:   #0B5C2C;
      --line:     rgba(20,39,27,0.14);
      --line-2:   rgba(20,39,27,0.08);
      --radius:   4px;
      --display:  'Fraunces', Georgia, serif;
      --body:     'Hanken Grotesk', system-ui, sans-serif;
      --mono:     'Space Mono', ui-monospace, monospace;
      --deva:     'Tiro Devanagari Hindi', 'Hanken Grotesk', serif;
      --shadow:   0 18px 50px -28px rgba(20,39,27,0.45);
    }

    * { margin:0; padding:0; box-sizing:border-box; }
    html { scroll-behavior: smooth; }
    body {
      font-family: var(--body);
      background: var(--paper);
      color: var(--ink);
      min-height: 100vh;
      line-height: 1.55;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }
    body::before {
      content:""; position: fixed; inset: 0; pointer-events: none; z-index: 9998;
      opacity: .045; mix-blend-mode: multiply;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    }
    ::selection { background: var(--accent); color: var(--paper); }
    a { color: var(--accent); }

    /* ── Header ── */
    .header {
      background: #F0F4EC;
      backdrop-filter: blur(10px);
      border-bottom: 1px solid var(--line);
      padding: 0.8rem 1.6rem;
      position: sticky; top: 0; z-index:5;
    }
    .header-content { display:flex; align-items:center; gap:16px; max-width:1400px; margin:0 auto; }
    .header-left { display:flex; align-items:center; gap:14px; }
    .header-right { margin-left:auto; display:flex; align-items:center; gap:14px; }
    .nav-toggle, .share-btn {
      background:none; border:1px solid var(--line); width:42px; height:42px;
      border-radius:50%; font-size:1.02rem; cursor:pointer; color:var(--ink);
      display:grid; place-items:center; transition:all .25s ease;
    }
    .nav-toggle:hover { background:var(--ink); color:var(--paper); border-color:var(--ink); }
    .share-btn:hover { background:var(--accent); color:#fff; border-color:var(--accent); }
    .logo { display:flex; flex-direction:column; line-height:1.05; }
    .logo a { font-family: var(--display); font-weight:600; font-size:1.4rem; color:var(--forest); text-decoration:none; letter-spacing:-.01em; }
    .logo small { font-family: var(--mono); font-size:.56rem; letter-spacing:.26em; text-transform:uppercase; color:var(--accent); margin-top:2px; }
    .header-tag { font-family:var(--mono); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); display:none; }
    @media(min-width:840px){ .header-tag{ display:block; } }

    /* ── Side nav ── */
    .side-nav {
      position:fixed; top:0; left:-340px; width:320px; height:100vh;
      background:var(--card); border-right:1px solid var(--line);
      transition:left .35s cubic-bezier(.16,1,.3,1); z-index:1001; padding:1.8rem 0; overflow-y:auto;
    }
    .side-nav.open { left:0; }
    .side-nav-header { padding:0 1.8rem 1.4rem; margin-bottom:1rem; border-bottom:1px solid var(--line-2); display:flex; justify-content:space-between; align-items:center; }
    .side-nav .logo { font-family:var(--display); font-weight:600; font-size:1.15rem; color:var(--ink); flex-direction:row; align-items:center; gap:.5rem; }
    .close-nav { background:none; border:none; font-size:1.3rem; cursor:pointer; color:var(--accent); }
    .nav-links { list-style:none; }
    .nav-links a { display:flex; align-items:center; gap:.7rem; padding:.85rem 1.8rem; color:var(--ink-soft); text-decoration:none; font-weight:500; border-left:3px solid transparent; transition:all .2s ease; }
    .nav-links a i { color:var(--muted); width:18px; text-align:center; }
    .nav-links a:hover, .nav-links a.active { background:var(--paper-2); border-left-color:var(--accent); color:var(--ink); }
    .nav-links a:hover i, .nav-links a.active i { color:var(--accent); }
    .others { padding:1.4rem 1.8rem .4rem; font-family:var(--mono); font-size:.62rem; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); }
    .overlay { position:fixed; inset:0; background:rgba(20,39,27,0.4); z-index:1000; opacity:0; visibility:hidden; transition:all .3s ease; }
    .overlay.active { opacity:1; visibility:visible; }

    /* ── Hero ── */
    .hero-section { position:relative; padding:74px 28px 128px; background:linear-gradient(160deg,#E9F5E2 0%, var(--paper) 62%); border-bottom:1px solid var(--line); overflow:hidden; }
    .hero-inner { max-width:1180px; margin:0 auto; position:relative; z-index:2; }
    .hero-glyph { position:absolute; font-family:var(--deva); font-size:clamp(22rem,46vw,40rem); line-height:.8; color:var(--accent); opacity:.08; right:-3%; top:50%; transform:translateY(-50%); z-index:1; pointer-events:none; user-select:none; }
    .eyebrow { font-family:var(--mono); font-size:.7rem; letter-spacing:.3em; text-transform:uppercase; color:var(--accent); display:inline-flex; align-items:center; gap:.6rem; margin-bottom:1.3rem; }
    .eyebrow::before { content:""; width:34px; height:1px; background:var(--accent); display:inline-block; }
    .hero-section h1 { font-family:var(--display); font-optical-sizing:auto; font-weight:540; font-size:clamp(2.4rem,5.6vw,4.4rem); line-height:1.04; letter-spacing:-.02em; color:var(--ink); max-width:18ch; margin-bottom:.6rem; }
    .hero-section h1 em { font-style:italic; color:var(--accent); }
    .hero-deva { font-family:var(--deva); font-size:clamp(1.2rem,2.6vw,1.7rem); color:var(--ink-soft); margin-bottom:1.4rem; }
    .hero-section p.lead { max-width:60ch; font-size:1.08rem; color:var(--ink-soft); }
    .hero-rule { display:flex; gap:2.4rem; flex-wrap:wrap; margin-top:2.2rem; padding-top:1.5rem; border-top:1px solid var(--line); max-width:640px; }
    .hero-rule div { font-family:var(--mono); font-size:.7rem; letter-spacing:.05em; color:var(--muted); text-transform:uppercase; }
    .hero-rule div b { display:block; font-family:var(--display); font-size:1.6rem; font-weight:600; color:var(--ink); letter-spacing:normal; text-transform:none; }

    .reveal { opacity:0; transform:translateY(18px); animation:rise .8s cubic-bezier(.16,1,.3,1) forwards; }
    .d1{animation-delay:.05s}.d2{animation-delay:.15s}.d3{animation-delay:.25s}.d4{animation-delay:.35s}.d5{animation-delay:.45s}
    @keyframes rise { to { opacity:1; transform:none; } }

    /* ── Ad slots ── */
    .ad-slot { margin:0 auto 22px; text-align:center; width:100%; max-width:970px; overflow:hidden; min-height:0; }

    /* ── Layout ── */
    .main-part { max-width:1180px; margin:0 auto; padding:0 28px; }

    /* ── Composing desk ── */
    .input-section { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:1.8rem; margin:-84px auto 24px; max-width:1180px; position:relative; z-index:5; box-shadow:var(--shadow); }
    .input-section::before { content:"COMPOSE"; position:absolute; top:-10px; left:22px; background:var(--accent); color:var(--paper); font-family:var(--mono); font-size:.6rem; letter-spacing:.2em; padding:3px 10px; border-radius:2px; }
    .input-label { font-family:var(--mono); font-size:.64rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); margin-bottom:.55rem; display:block; }
    #inputText { width:100%; padding:1.1rem 1.2rem; border:1px solid var(--line); border-radius:var(--radius); background:var(--paper); font-family:var(--deva); font-size:1.3rem; color:var(--ink); resize:vertical; min-height:96px; transition:all .25s ease; }
    #inputText::placeholder { font-family:var(--body); color:var(--muted); font-size:1rem; }
    #inputText:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 4px rgba(19,138,92,0.13); }

    .controls { display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.1rem; align-items:center; }
    .controls.floating { position:fixed; top:3px; left:60%; transform:translateX(-50%); z-index:60; justify-content:center; background:rgba(251,253,248,.94); backdrop-filter:blur(14px); border:1px solid var(--line); border-radius:999px; padding:3px .8rem; box-shadow:var(--shadow); margin-top:0; }
    #controlsSpacer { display:none; }
    .control-group { display:flex; align-items:center; gap:.65rem; background:var(--paper); border:1px solid var(--line-2); padding:.5rem .9rem; border-radius:999px; }
    .control-group label { font-weight:600; font-size:.82rem; color:var(--ink-soft); display:flex; align-items:center; gap:.4rem; white-space:nowrap; }
    .control-group label i { color:var(--accent); }
    .control-group label span { font-family:var(--mono); color:var(--ink); }
    input[type="range"] { -webkit-appearance:none; appearance:none; width:120px; height:3px; border-radius:3px; background:var(--line); cursor:pointer; outline:none; }
    input[type="range"]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:16px; height:16px; border-radius:50%; background:var(--accent); border:2px solid var(--card); box-shadow:0 1px 4px rgba(0,0,0,.25); }
    input[type="range"]::-moz-range-thumb { width:16px; height:16px; border-radius:50%; background:var(--accent); border:2px solid var(--card); cursor:pointer; }
    .control-group input[type="color"] { width:30px; height:30px; padding:0; border:2px solid var(--card); border-radius:50%; cursor:pointer; box-shadow:0 0 0 1px var(--line); background:transparent; }
    .control-group input[type="color"]::-webkit-color-swatch-wrapper { padding:0; }
    .control-group input[type="color"]::-webkit-color-swatch { border:none; border-radius:50%; }

    /* ── Section heading ── */
    .grid-head { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin:8px 0 26px; padding-bottom:14px; border-bottom:1px solid var(--line); }
    .grid-head h2 { font-family:var(--display); font-weight:560; font-size:clamp(1.6rem,3.6vw,2.3rem); letter-spacing:-.01em; color:var(--ink); }
    .grid-head .count { font-family:var(--mono); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }

    /* ── Specimen cards ── */
    .fonts-grid { display:flex; flex-direction:column; gap:1.1rem; margin-bottom:2rem; }
    .font-card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); display:flex;flex-direction:column;overflow:auto; transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease; }
    .font-card:hover { border-color:var(--ink); box-shadow:var(--shadow); transform:translateY(-2px); }
    .spec-rail { border-right:1px solid var(--line-2); padding:10px; display:flex; flex-direction:row; gap:.5rem; background:linear-gradient(180deg,var(--paper-2),transparent); }
    .spec-no { font-family:var(--display); font-weight:600; font-size:2.4rem; line-height:1; color:var(--accent); }
    .spec-name { font-family:var(--display); font-weight:560; font-size:1.12rem; color:var(--ink); margin-top:.3rem; }
    .spec-tag { font-family:var(--mono); font-size:.58rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
    .spec-body { padding:1.4rem; display:flex; flex-direction:column; gap:1.1rem; }
    .preview-box { background:#fff; border:1px solid var(--line-2); border-radius:3px; padding:1.8rem; min-height:198px; display:flex; align-items:center; justify-content:center; text-align:center; word-break:break-word; box-shadow:inset 0 1px 2px rgba(0,0,0,.04); overflow:visible;white-space: pre-wrap;}
    .card-actions { display:flex; gap:.6rem; flex-wrap:wrap; justify-content:center;}
    .btn-download {  min-width:104px; background:transparent; color:var(--ink-soft); border:1px solid var(--line); padding:.65rem .9rem; border-radius:999px; font-family:var(--body); font-weight:600; cursor:pointer; transition:all .22s ease; font-size:.82rem; display:flex; align-items:center; justify-content:center; gap:.4rem; }
    .btn-download i { font-size:.8rem; }
    .btn-download:hover { background:var(--ink); color:var(--paper); border-color:var(--ink); }
    .btn-download.download-png:hover, .btn-download.edit-btn:hover { background:var(--accent); border-color:var(--accent); color:var(--paper); }
    .empty-state { border:1px dashed var(--line); border-radius:var(--radius); padding:3rem 1.5rem; text-align:center; color:var(--muted); font-family:var(--mono); font-size:.8rem; letter-spacing:.06em; }

    /* ── Pagination ── */
    .pagination { display:flex; justify-content:center; flex-wrap:wrap; gap:.45rem; margin:1rem 0 2.5rem; }
    .pagination a { min-width:42px; text-align:center; padding:.6rem .85rem; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); text-decoration:none; color:var(--ink-soft); font-family:var(--mono); font-size:.82rem; transition:all .2s ease; }
    .pagination a:hover, .pagination a.active { background:var(--ink); color:var(--paper); border-color:var(--ink); }
    .pagination a.active { background:var(--accent); border-color:var(--accent); }

    /* ── Article ── */
    .container { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:2.6rem; margin:30px auto; max-width:1080px; }
    .container h2 { font-family:var(--display); font-weight:560; font-size:1.7rem; color:var(--ink); margin-bottom:.9rem; letter-spacing:-.01em; border-left:4px solid var(--accent); padding-left:.7rem; }
    .container h3 { font-family:var(--display); font-weight:560; font-size:1.12rem; margin:1.2rem 0 .3rem; color:var(--ink); }
    .container p { color:var(--ink-soft); margin-bottom:.7rem; }
    .container strong { color:var(--forest); }
    .container section { margin-top:2.4rem; padding-top:1.8rem; border-top:1px solid var(--line-2); }
    .container section:first-of-type { margin-top:1.6rem; border-top:none; padding-top:0; }
    .container ol, .container ul { margin:.5rem 0 .5rem 1.3rem; color:var(--ink-soft); }
    .container ol li, .container ul li { margin-bottom:.55rem; }
    .feature-image-wrapper { border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin-bottom:.6rem; }
    .feature-image { display:block; width:100%; height:auto; }

    /* ── Feature grid ── */
    .features-header { text-align:center; max-width:780px; margin:0 auto 2.2rem; }
    .features-header h2 { display:inline-block; border-left:none; padding-left:0; }
    .features-header p { color:var(--ink-soft); }
    .heading-underline { width:60px; height:3px; background:var(--accent); border-radius:2px; margin:1.1rem auto 0; }
    .features-container { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
    .feature-card { background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:1.5rem; transition:all .25s ease; }
    .feature-card:hover { border-color:var(--ink); transform:translateY(-3px); box-shadow:var(--shadow); background:var(--card); }
    .icon-wrapper { width:46px; height:46px; border-radius:12px; display:grid; place-items:center; background:var(--paper-2); color:var(--accent); font-size:1.1rem; margin-bottom:1rem; }
    .feature-card h3 { font-family:var(--display); font-weight:560; font-size:1.1rem; margin:0 0 .35rem; color:var(--ink); }
    .feature-card p { color:var(--ink-soft); font-size:.92rem; margin:0; }
    @media(max-width:820px){ .features-container{ grid-template-columns:repeat(2,1fr); } }
    @media(max-width:560px){ .features-container{ grid-template-columns:1fr; } }

    /* ── Comments ── */
    .comment.container h2 { border-left:4px solid var(--accent); padding-left:.7rem; }
    .comment hr { border:none; border-top:1px solid var(--line-2); margin:1rem 0 1.4rem; }

    /* ── Footer ── */
    .site-footer { background:var(--ink); color:var(--paper); padding:3rem 20px 1.6rem; margin-top:3rem; }
    .footer-content-centered { max-width:900px; margin:0 auto; text-align:center; }
    .footer-logo-text { font-family:var(--display); font-size:1.5rem; font-weight:560; margin-bottom:1.3rem; }
    .footer-nav { display:flex; gap:2rem; flex-wrap:wrap; justify-content:center; margin-bottom:1.3rem; }
    .footer-nav a { color:rgba(242,247,239,.72); text-decoration:none; font-size:.92rem; transition:color .2s ease; }
    .footer-nav a:hover { color:var(--accent-2); }
    .footer-disclaimer p { font-family:var(--mono); font-size:.68rem; letter-spacing:.06em; color:rgba(242,247,239,.5); }
    .footer-divider { height:1px; background:rgba(242,247,239,.14); margin:1.4rem 0; }
    .footer-copyright p { font-family:var(--mono); font-size:.68rem; letter-spacing:.08em; color:rgba(242,247,239,.45); }

    /* ── Share modal ── */
    .custom-modal { position:fixed; inset:0; background:rgba(20,39,27,.55); z-index:2000; display:none; align-items:center; justify-content:center; padding:1rem; }
    .custom-modal.open { display:flex; }
    .custom-modal-content { background:var(--card); border:1px solid var(--line); border-radius:8px; max-width:440px; width:100%; box-shadow:var(--shadow); overflow:hidden; }
    .custom-modal-header { display:flex; justify-content:space-between; align-items:center; padding:1.1rem 1.3rem; border-bottom:1px solid var(--line-2); }
    .custom-modal-title { font-family:var(--display); font-weight:560; font-size:1.15rem; color:var(--ink); }
    .btn-close-modal { background:none; border:none; font-size:1.6rem; line-height:1; cursor:pointer; color:var(--muted); }
    .custom-modal-body { padding:1.4rem; text-align:center; }
    .custom-modal-body p { color:var(--ink-soft); margin:0 0 .6rem; }
    .social-share-icons { display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; margin:1rem 0; }
    .social-icon { width:42px; height:42px; border-radius:50%; display:grid; place-items:center; background:var(--paper-2); color:var(--ink); text-decoration:none; transition:all .2s ease; }
    .social-icon:hover { background:var(--accent); color:#fff; transform:translateY(-2px); }
    .input-group-custom { display:flex; gap:.5rem; margin-top:1rem; }
    .form-control-custom { flex:1; padding:.6rem .8rem; border:1px solid var(--line); border-radius:6px; font-family:var(--mono); font-size:.78rem; background:var(--paper); color:var(--ink); }
    .btn-copy-custom { background:var(--accent); color:#fff; border:none; border-radius:6px; padding:.6rem 1.1rem; font-family:var(--body); font-weight:600; cursor:pointer; }
    .btn-copy-custom:hover { background:var(--forest); }

    /* ── Floating char-map button ── */
    .btn-char-map { position:fixed; right:18px; bottom:18px; width:54px; height:54px; border-radius:50%; background:var(--accent); color:#fff; display:grid; place-items:center; font-size:1.2rem; cursor:pointer; box-shadow:var(--shadow); z-index:80; text-decoration:none; transition:all .25s ease; }
    .btn-char-map:hover { background:var(--forest); transform:translateY(-2px); }

    @media (max-width: 820px) {
      .font-card { grid-template-columns:1fr; }
      .spec-rail { border-right:none; border-bottom:1px solid var(--line-2); flex-direction:row; align-items:baseline; gap:1rem; }
      .spec-no { font-size:1.8rem; }
      .spec-name { margin-top:0; }
    }
    @media (max-width: 560px) {
      .hero-section { padding:54px 22px 108px; }
      .input-section, .container { padding:1.3rem; }
      .btn-download { min-width:0; }
      label.hd{display: none;}
      .controls.floating { position:fixed; top:68px; left:50%;}
    }