:root{
    --bg:#0F1419;
    --panel:#161B22;
    --panel-raised:#1B222B;
    --border:#2A3138;
    --text:#E6E8EB;
    --muted:#8B95A1;
    --dot:#1c232c;
    --knob-1:#2b333d;
    --knob-2:#171c22;
    --knob-border:#3a434d;
    --shadow:rgba(0,0,0,.4);
    --error:#F26D6D;
    --error-dim:#4a2a2a;

    /* module A: CSV / JSON */
    --a1:#F2A65A;
    --a1-dim:#5a4730;
    --a2:#4FD1C5;
    --a2-dim:#274744;

    /* module B: Markdown / HTML */
    --b1:#8C7AE6;
    --b1-dim:#3a3460;
    --b2:#E0825A;
    --b2-dim:#4a3326;

    /* module C: YAML / JSON */
    --c1:#7CB77D;
    --c1-dim:#2f4a30;
    --c2:#5B9BD5;
    --c2-dim:#243d54;

    /* module D: Query String / JSON */
    --d1:#E0688C;
    --d1-dim:#4a2733;
    --d2:#D9A84E;
    --d2-dim:#4a3d1f;

    /* module E: Base64 / Text */
    --e1:#4DB6E0;
    --e1-dim:#1f3f4a;
    --e2:#C77DE0;
    --e2-dim:#4a2f4a;

    /* module F: JSON5 / JSON */
    --f1:#D46A6A;
    --f1-dim:#4a2020;
    --f2:#9BC53D;
    --f2-dim:#33421a;

    /* module G: URL Encode / Decode */
    --g1:#E4A340;
    --g1-dim:#4a3a1a;
    --g2:#5C7AEA;
    --g2-dim:#22284a;

    /* module H: Timestamp / Date */
    --h1:#EF7B45;
    --h1-dim:#4a2a1a;
    --h2:#4FA98C;
    --h2-dim:#1f3d35;

    --mono:'JetBrains Mono', monospace;
    --sans:'Inter', sans-serif;
    color-scheme: dark;
  }
  html.light-theme, body.light-theme{
    --bg:#F0F2F5;
    --panel:#FFFFFF;
    --panel-raised:#F6F7F9;
    --border:#D8DEE4;
    --text:#1A2028;
    --muted:#5C6672;
    --dot:#dfe3e8;
    --knob-1:#FFFFFF;
    --knob-2:#E4E8EC;
    --knob-border:#C7CED6;
    --shadow:rgba(20,30,40,.12);
    --error:#C23B3B;
    --error-dim:#F6D9D9;

    --a1:#C97A2B;
    --a1-dim:#F0D6B5;
    --a2:#1C8F84;
    --a2-dim:#C7EAE6;

    --b1:#6A53D6;
    --b1-dim:#DCD5F7;
    --b2:#C45A30;
    --b2-dim:#F4DCCB;

    --c1:#3F8A46;
    --c1-dim:#D3EAD4;
    --c2:#2E6DA4;
    --c2-dim:#D2E3F2;

    --d1:#C24571;
    --d1-dim:#F6D8E2;
    --d2:#B3841F;
    --d2-dim:#F3E4C4;

    --e1:#1E7A9E;
    --e1-dim:#CFEAF4;
    --e2:#8B3FA8;
    --e2-dim:#F0DCF4;

    --f1:#B33F3F;
    --f1-dim:#F5DEDE;
    --f2:#6B8F1D;
    --f2-dim:#E4EFD0;

    --g1:#B87A1A;
    --g1-dim:#F6E7CC;
    --g2:#3C56C9;
    --g2-dim:#DCE1FA;

    --h1:#C25A2C;
    --h1-dim:#F6DCC9;
    --h2:#2F7A66;
    --h2-dim:#CFEAE0;
    color-scheme: light;
  }
  *{box-sizing:border-box;}
  body{
    margin:0;
    background:
      radial-gradient(circle at 1px 1px, var(--dot) 1px, transparent 0) 0 0/22px 22px,
      var(--bg);
    color:var(--text);
    font-family:var(--sans);
    min-height:100vh;
    -webkit-font-smoothing:antialiased;
    transition:background-color .2s ease, color .2s ease;
  }
  .wrap{max-width:1320px;margin:0 auto;padding:36px 24px 64px;}

  /* ---------- Header / rack selector ---------- */
  header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:20px;flex-wrap:wrap;}
  .brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit;}
  .brand-mark{
    width:40px;height:40px;border:1px solid var(--border);border-radius:6px;
    display:flex;align-items:center;justify-content:center;background:var(--panel);
    font-family:var(--mono);font-size:11px;color:var(--muted);position:relative;overflow:hidden;flex-shrink:0;
  }
  .brand-mark::before{content:"";position:absolute;inset:0;background:
    linear-gradient(90deg, var(--a1) 0%, var(--a2) 33%, var(--b1) 66%, var(--b2) 100%);
    opacity:.18;}
  h1{font-family:var(--mono);font-weight:700;font-size:1.35rem;letter-spacing:-0.01em;margin:0;}
  .tagline{font-size:.8rem;color:var(--muted);margin-top:4px;font-family:var(--mono);}

  .theme-toggle{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.68rem;color:var(--muted);}
  .theme-rocker{
    width:46px;height:24px;border-radius:12px;
    background:var(--panel-raised);border:1px solid var(--border);
    position:relative;cursor:pointer;padding:0;
    transition:background-color .2s ease;
  }
  .theme-rocker .rocker-knob{
    position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;
    background:linear-gradient(160deg,var(--knob-1),var(--knob-2));
    border:1px solid var(--knob-border);
    transition:left .2s cubic-bezier(.4,0,.2,1);
    display:flex;align-items:center;justify-content:center;font-size:10px;line-height:1;
  }
  body.light-theme .theme-rocker .rocker-knob{left:24px;}

  .rack{
    display:flex;gap:4px;border-bottom:1px solid var(--border);padding-bottom:0;
    flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
    scrollbar-width:auto;scrollbar-color:var(--muted) transparent;
  }
  .rack::-webkit-scrollbar{height:7px;}
  .rack::-webkit-scrollbar-track{background:transparent;}
  .rack::-webkit-scrollbar-thumb{background:var(--muted);border-radius:4px;}
  .module-btn{
    font-family:var(--mono);font-size:.7rem;font-weight:600;letter-spacing:.01em;
    background:var(--panel);color:var(--muted);border:1px solid var(--border);border-bottom:none;
    border-radius:8px 8px 0 0;padding:10px 11px 12px;cursor:pointer;
    position:relative;top:1px;transition:color .15s ease, background .15s ease;
    display:flex;align-items:center;gap:6px;
    white-space:nowrap;flex-shrink:0;
    text-decoration:none;
  }
  .module-btn:visited{color:var(--muted);}
  .module-btn .jack{width:7px;height:7px;border-radius:50%;background:var(--border);transition:background .15s ease,box-shadow .15s ease;}
  .module-btn:hover{color:var(--text);}
  .module-btn.active{
    color:var(--text);background:var(--panel);
    border-color:var(--border);
    border-bottom:1px solid var(--panel);
  }
  .module-btn[data-mod="csv"].active .jack{background:var(--a1);box-shadow:0 0 8px var(--a1);}
  .module-btn[data-mod="yaml"].active .jack{background:var(--c1);box-shadow:0 0 8px var(--c1);}
  .module-btn[data-mod="query"].active .jack{background:var(--d1);box-shadow:0 0 8px var(--d1);}
  .module-btn[data-mod="json5"].active .jack{background:var(--f1);box-shadow:0 0 8px var(--f1);}
  .module-btn[data-mod="md"].active .jack{background:var(--b1);box-shadow:0 0 8px var(--b1);}
  .module-btn[data-mod="urlenc"].active .jack{background:var(--g1);box-shadow:0 0 8px var(--g1);}
  .module-btn[data-mod="base64"].active .jack{background:var(--e1);box-shadow:0 0 8px var(--e1);}
  .module-btn[data-mod="timestamp"].active .jack{background:var(--h1);box-shadow:0 0 8px var(--h1);}

  /* ---------- Shared tool chrome ---------- */
  .tool-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:22px 0 8px;flex-wrap:wrap;}
  .tool-title{font-family:var(--mono);font-weight:700;font-size:1.15rem;margin:0;}
  .tool-title .arrow{color:var(--muted);font-weight:400;margin:0 6px;}
  .status-strip{font-family:var(--mono);font-size:.72rem;color:var(--muted);display:flex;gap:16px;}
  .status-strip span b{color:var(--text);font-weight:600;}

  .board{margin-top:16px;display:grid;grid-template-columns:1fr 96px 1fr;gap:18px;align-items:stretch;}
  @media (max-width:880px){
    .board{grid-template-columns:1fr;}
    .center-col{flex-direction:row !important;justify-content:center;padding:8px 0;}
    .connector{display:none;}
  }

  .pane{background:var(--panel);border:1px solid var(--border);border-radius:10px;display:flex;flex-direction:column;overflow:hidden;min-height:440px;}
  .pane-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--border);background:var(--panel-raised);flex-wrap:wrap;gap:8px;}
  .pane-title{font-family:var(--mono);font-weight:600;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;display:flex;align-items:center;gap:8px;}
  .dot{width:7px;height:7px;border-radius:50%;}
  .pane-actions{display:flex;gap:6px;flex-wrap:wrap;}

  button{font-family:var(--sans);font-size:.74rem;font-weight:600;background:transparent;color:var(--muted);border:1px solid var(--border);border-radius:6px;padding:6px 10px;cursor:pointer;transition:all .15s ease;}
  button:hover{color:var(--text);border-color:var(--knob-border);background:var(--panel-raised);}
  button:active{transform:translateY(1px);}
  button.active{color:var(--text);background:var(--panel-raised);border-color:var(--knob-border);}

  .seg{display:flex;border:1px solid var(--border);border-radius:6px;overflow:hidden;}
  .seg button{border:none;border-radius:0;}
  .seg button + button{border-left:1px solid var(--border);}

  textarea{flex:1;width:100%;resize:none;border:none;outline:none;background:transparent;color:var(--text);font-family:var(--mono);font-size:.82rem;line-height:1.55;padding:14px;}
  textarea::placeholder{color:var(--muted);opacity:.55;}
  .preview-frame{flex:1;width:100%;border:none;background:transparent;}

  .drop-hint{font-family:var(--mono);font-size:.68rem;color:var(--muted);padding:8px 14px;border-top:1px solid var(--border);background:var(--panel-raised);display:flex;justify-content:space-between;}
  .related-links{margin:28px 0 0;padding-top:16px;border-top:1px solid var(--border);font-family:var(--mono);font-size:.72rem;color:var(--muted);max-width:820px;}
  .related-links a{color:var(--muted);text-decoration:underline;text-underline-offset:2px;}
  .related-links a:hover{color:var(--text);}
  .breadcrumb{font-family:var(--sans);font-size:.78rem;color:var(--muted);margin:20px 0 18px;}
  .breadcrumb a{color:var(--muted);text-decoration:none;}
  .breadcrumb a:hover{color:var(--text);}
  .breadcrumb .sep{margin:0 6px;opacity:.6;}
  .pane.drag-over{outline:2px dashed var(--muted);outline-offset:-2px;}

  .error-bar{display:none;font-family:var(--mono);font-size:.72rem;color:var(--error);background:var(--error-dim);padding:8px 14px;border-top:1px solid #5c2f2f;}
  .error-bar.show{display:block;}

  .center-col{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;position:relative;}
  .connector{position:absolute;top:50%;left:0;right:0;height:2px;transform:translateY(-50%);z-index:0;}
  .switch-housing{position:relative;z-index:1;width:84px;height:148px;background:var(--panel);border:1px solid var(--border);border-radius:42px;display:flex;flex-direction:column;align-items:center;padding:10px 0;box-shadow:inset 0 2px 6px var(--shadow);}
  .switch-end-label{font-family:var(--mono);font-size:.6rem;color:var(--muted);letter-spacing:.05em;}
  .switch-track{flex:1;width:46px;border-radius:23px;background:var(--panel-raised);border:1px solid var(--border);margin:8px 0;position:relative;cursor:pointer;}
  .switch-knob{position:absolute;left:50%;transform:translateX(-50%);width:36px;height:36px;border-radius:50%;background:linear-gradient(160deg,var(--knob-1),var(--knob-2));border:1px solid var(--knob-border);top:4px;transition:top .25s cubic-bezier(.4,0,.2,1), box-shadow .25s ease;display:flex;align-items:center;justify-content:center;}
  .switch-knob::after{content:"";width:14px;height:14px;border-radius:50%;transition:background .25s ease, box-shadow .25s ease;}
  .switch-track.right-mode .switch-knob{top:calc(100% - 40px);}

  .convert-btn{position:relative;z-index:1;font-family:var(--mono);font-weight:600;font-size:.74rem;letter-spacing:.04em;text-transform:uppercase;color:var(--bg);border:none;border-radius:7px;padding:10px 14px;cursor:pointer;width:84px;transition:transform .12s ease, box-shadow .25s ease, background .25s ease;}
  .convert-btn:hover{transform:translateY(-1px);}
  .convert-btn:active{transform:translateY(0);}

  .pulse-dot{position:absolute;top:50%;width:6px;height:6px;border-radius:50%;transform:translateY(-50%);opacity:0;z-index:0;}

  footer{margin-top:32px;font-family:var(--mono);font-size:.72rem;color:var(--muted);border-top:1px solid var(--border);padding-top:20px;}
  .footer-privacy{
    text-align:center;margin-bottom:14px;
    display:flex;align-items:center;justify-content:center;gap:8px;
  }
  .footer-privacy .privacy-dot{width:6px;height:6px;border-radius:50%;background:var(--a2);box-shadow:0 0 6px var(--a2);flex-shrink:0;}
  .footer-privacy strong{color:var(--text);font-weight:600;}
  .footer-legal{max-width:720px;margin:0 auto;}
  .footer-legal summary{
    text-align:center;cursor:pointer;color:var(--muted);list-style:none;
    font-size:.68rem;letter-spacing:.03em;text-transform:uppercase;
    padding:4px 0;transition:color .15s ease;
  }
  .footer-legal summary::-webkit-details-marker{display:none;}
  .footer-legal summary:hover{color:var(--text);}
  .footer-legal summary::after{content:" ▾";}
  .footer-legal[open] summary::after{content:" ▴";}
  .footer-legal-body{
    margin-top:14px;padding:14px 18px;background:var(--panel-raised);
    border:1px solid var(--border);border-radius:8px;
    font-size:.68rem;line-height:1.7;color:var(--muted);
  }
  .footer-legal-body p{margin:0 0 10px;}
  .footer-legal-body p:last-child{margin-bottom:0;}
  .footer-legal-body .legal-label{color:var(--text);font-weight:600;}
  .footer-legal-body a{color:var(--muted);text-decoration:underline;text-underline-offset:2px;}
  .footer-legal-body a:hover{color:var(--text);}
  .footer-bottom{text-align:center;margin-top:16px;opacity:.6;font-size:.66rem;}
  .footer-bottom a{color:inherit;text-decoration:underline;text-underline-offset:2px;}
  .footer-bottom a:hover{opacity:1;}

  /* module info / FAQ content */
  .module-info{margin:32px 0 8px;max-width:820px;}
  .info-section{margin-bottom:26px;}
  .module-info h3{font-family:var(--mono);font-weight:700;font-size:.95rem;color:var(--text);margin:0 0 10px;letter-spacing:-0.01em;}
  .module-info p{font-size:.85rem;line-height:1.7;color:var(--muted);margin:0 0 12px;}
  .module-info p:last-child{margin-bottom:0;}
  .faq-item{border:1px solid var(--border);border-radius:8px;margin-bottom:8px;overflow:hidden;background:var(--panel);}
  .faq-item summary{
    padding:12px 16px;cursor:pointer;font-family:var(--sans);font-weight:600;font-size:.83rem;color:var(--text);
    list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;
  }
  .faq-item summary::-webkit-details-marker{display:none;}
  .faq-item summary::after{content:"+";color:var(--muted);font-weight:400;font-size:1rem;flex-shrink:0;}
  .faq-item[open] summary::after{content:"–";}
  .faq-item summary:hover{background:var(--panel-raised);}
  .faq-answer{padding:0 16px 14px;font-size:.83rem;line-height:1.7;color:var(--muted);}
  .faq-answer:first-child{padding-top:0;}

  ::selection{background:#3a434d;}
  textarea:focus-visible, button:focus-visible{outline:2px solid var(--text);outline-offset:1px;}

  /* module A colors */
  #modCsv .pane.left-pane .dot{background:var(--a1);box-shadow:0 0 8px var(--a1);}
  #modCsv .pane.right-pane .dot{background:var(--a2);box-shadow:0 0 8px var(--a2);}
  #modCsv .a-label{color:var(--a1);}
  #modCsv .b-label{color:var(--a2);}
  #modCsv .connector{background:linear-gradient(90deg,var(--a1-dim),var(--border) 40%,var(--border) 60%,var(--a2-dim));}
  #modCsv .switch-knob::after{background:var(--a1);box-shadow:0 0 10px var(--a1);}
  #modCsv .switch-track.right-mode .switch-knob::after{background:var(--a2);box-shadow:0 0 10px var(--a2);}
  #modCsv .convert-btn{background:linear-gradient(180deg,#f5c98a,var(--a1));box-shadow:0 4px 14px rgba(242,166,90,.25);}
  #modCsv .convert-btn.right-mode{background:linear-gradient(180deg,#8fe9e0,var(--a2));box-shadow:0 4px 14px rgba(79,209,197,.25);}
  #modCsv .pane.drag-over.left-pane{outline-color:var(--a1);}
  #modCsv .pane.drag-over.right-pane{outline-color:var(--a2);}

  /* module B colors */
  #modMd .pane.left-pane .dot{background:var(--b1);box-shadow:0 0 8px var(--b1);}
  #modMd .pane.right-pane .dot{background:var(--b2);box-shadow:0 0 8px var(--b2);}
  #modMd .a-label{color:var(--b1);}
  #modMd .b-label{color:var(--b2);}
  #modMd .connector{background:linear-gradient(90deg,var(--b1-dim),var(--border) 40%,var(--border) 60%,var(--b2-dim));}
  #modMd .switch-knob::after{background:var(--b1);box-shadow:0 0 10px var(--b1);}
  #modMd .switch-track.right-mode .switch-knob::after{background:var(--b2);box-shadow:0 0 10px var(--b2);}
  #modMd .convert-btn{background:linear-gradient(180deg,#b3a3f0,var(--b1));box-shadow:0 4px 14px rgba(140,122,230,.25);}
  #modMd .convert-btn.right-mode{background:linear-gradient(180deg,#f0ad8a,var(--b2));box-shadow:0 4px 14px rgba(224,130,90,.25);}
  #modMd .pane.drag-over.left-pane{outline-color:var(--b1);}
  #modMd .pane.drag-over.right-pane{outline-color:var(--b2);}

  /* module C colors */
  #modYaml .pane.left-pane .dot{background:var(--c1);box-shadow:0 0 8px var(--c1);}
  #modYaml .pane.right-pane .dot{background:var(--c2);box-shadow:0 0 8px var(--c2);}
  #modYaml .a-label{color:var(--c1);}
  #modYaml .b-label{color:var(--c2);}
  #modYaml .connector{background:linear-gradient(90deg,var(--c1-dim),var(--border) 40%,var(--border) 60%,var(--c2-dim));}
  #modYaml .switch-knob::after{background:var(--c1);box-shadow:0 0 10px var(--c1);}
  #modYaml .switch-track.right-mode .switch-knob::after{background:var(--c2);box-shadow:0 0 10px var(--c2);}
  #modYaml .convert-btn{background:linear-gradient(180deg,#aedbaf,var(--c1));box-shadow:0 4px 14px rgba(124,183,125,.25);}
  #modYaml .convert-btn.right-mode{background:linear-gradient(180deg,#a3cdf0,var(--c2));box-shadow:0 4px 14px rgba(91,155,213,.25);}
  #modYaml .pane.drag-over.left-pane{outline-color:var(--c1);}
  #modYaml .pane.drag-over.right-pane{outline-color:var(--c2);}

  /* module D colors */
  #modQuery .pane.left-pane .dot{background:var(--d1);box-shadow:0 0 8px var(--d1);}
  #modQuery .pane.right-pane .dot{background:var(--d2);box-shadow:0 0 8px var(--d2);}
  #modQuery .a-label{color:var(--d1);}
  #modQuery .b-label{color:var(--d2);}
  #modQuery .connector{background:linear-gradient(90deg,var(--d1-dim),var(--border) 40%,var(--border) 60%,var(--d2-dim));}
  #modQuery .switch-knob::after{background:var(--d1);box-shadow:0 0 10px var(--d1);}
  #modQuery .switch-track.right-mode .switch-knob::after{background:var(--d2);box-shadow:0 0 10px var(--d2);}
  #modQuery .convert-btn{background:linear-gradient(180deg,#f0a8c0,var(--d1));box-shadow:0 4px 14px rgba(224,104,140,.25);}
  #modQuery .convert-btn.right-mode{background:linear-gradient(180deg,#eecd8f,var(--d2));box-shadow:0 4px 14px rgba(217,168,78,.25);}
  #modQuery .pane.drag-over.left-pane{outline-color:var(--d1);}
  #modQuery .pane.drag-over.right-pane{outline-color:var(--d2);}

  /* module E colors */
  #modBase64 .pane.left-pane .dot{background:var(--e1);box-shadow:0 0 8px var(--e1);}
  #modBase64 .pane.right-pane .dot{background:var(--e2);box-shadow:0 0 8px var(--e2);}
  #modBase64 .a-label{color:var(--e1);}
  #modBase64 .b-label{color:var(--e2);}
  #modBase64 .connector{background:linear-gradient(90deg,var(--e1-dim),var(--border) 40%,var(--border) 60%,var(--e2-dim));}
  #modBase64 .switch-knob::after{background:var(--e1);box-shadow:0 0 10px var(--e1);}
  #modBase64 .switch-track.right-mode .switch-knob::after{background:var(--e2);box-shadow:0 0 10px var(--e2);}
  #modBase64 .convert-btn{background:linear-gradient(180deg,#a3ddf0,var(--e1));box-shadow:0 4px 14px rgba(77,182,224,.25);}
  #modBase64 .convert-btn.right-mode{background:linear-gradient(180deg,#e4bdf0,var(--e2));box-shadow:0 4px 14px rgba(199,125,224,.25);}
  #modBase64 .pane.drag-over.left-pane{outline-color:var(--e1);}
  #modBase64 .pane.drag-over.right-pane{outline-color:var(--e2);}

  /* module F colors */
  #modJson5 .pane.left-pane .dot{background:var(--f1);box-shadow:0 0 8px var(--f1);}
  #modJson5 .pane.right-pane .dot{background:var(--f2);box-shadow:0 0 8px var(--f2);}
  #modJson5 .a-label{color:var(--f1);}
  #modJson5 .b-label{color:var(--f2);}
  #modJson5 .connector{background:linear-gradient(90deg,var(--f1-dim),var(--border) 40%,var(--border) 60%,var(--f2-dim));}
  #modJson5 .switch-knob::after{background:var(--f1);box-shadow:0 0 10px var(--f1);}
  #modJson5 .switch-track.right-mode .switch-knob::after{background:var(--f2);box-shadow:0 0 10px var(--f2);}
  #modJson5 .convert-btn{background:linear-gradient(180deg,#eeaaaa,var(--f1));box-shadow:0 4px 14px rgba(212,106,106,.25);}
  #modJson5 .convert-btn.right-mode{background:linear-gradient(180deg,#d3e89e,var(--f2));box-shadow:0 4px 14px rgba(155,197,61,.25);}
  #modJson5 .pane.drag-over.left-pane{outline-color:var(--f1);}
  #modJson5 .pane.drag-over.right-pane{outline-color:var(--f2);}

  /* module G colors */
  #modUrlEnc .pane.left-pane .dot{background:var(--g1);box-shadow:0 0 8px var(--g1);}
  #modUrlEnc .pane.right-pane .dot{background:var(--g2);box-shadow:0 0 8px var(--g2);}
  #modUrlEnc .a-label{color:var(--g1);}
  #modUrlEnc .b-label{color:var(--g2);}
  #modUrlEnc .connector{background:linear-gradient(90deg,var(--g1-dim),var(--border) 40%,var(--border) 60%,var(--g2-dim));}
  #modUrlEnc .switch-knob::after{background:var(--g1);box-shadow:0 0 10px var(--g1);}
  #modUrlEnc .switch-track.right-mode .switch-knob::after{background:var(--g2);box-shadow:0 0 10px var(--g2);}
  #modUrlEnc .convert-btn{background:linear-gradient(180deg,#f0cf8f,var(--g1));box-shadow:0 4px 14px rgba(228,163,64,.25);}
  #modUrlEnc .convert-btn.right-mode{background:linear-gradient(180deg,#a8b9f5,var(--g2));box-shadow:0 4px 14px rgba(92,122,234,.25);}
  #modUrlEnc .pane.drag-over.left-pane{outline-color:var(--g1);}
  #modUrlEnc .pane.drag-over.right-pane{outline-color:var(--g2);}

  /* module H colors */
  #modTimestamp .pane.left-pane .dot{background:var(--h1);box-shadow:0 0 8px var(--h1);}
  #modTimestamp .pane.right-pane .dot{background:var(--h2);box-shadow:0 0 8px var(--h2);}
  #modTimestamp .a-label{color:var(--h1);}
  #modTimestamp .b-label{color:var(--h2);}
  #modTimestamp .connector{background:linear-gradient(90deg,var(--h1-dim),var(--border) 40%,var(--border) 60%,var(--h2-dim));}
  #modTimestamp .switch-knob::after{background:var(--h1);box-shadow:0 0 10px var(--h1);}
  #modTimestamp .switch-track.right-mode .switch-knob::after{background:var(--h2);box-shadow:0 0 10px var(--h2);}
  #modTimestamp .convert-btn{background:linear-gradient(180deg,#f7bd97,var(--h1));box-shadow:0 4px 14px rgba(239,123,69,.25);}
  #modTimestamp .convert-btn.right-mode{background:linear-gradient(180deg,#a8ddc9,var(--h2));box-shadow:0 4px 14px rgba(79,169,140,.25);}
  #modTimestamp .pane.drag-over.left-pane{outline-color:var(--h1);}
  #modTimestamp .pane.drag-over.right-pane{outline-color:var(--h2);}

  @media (prefers-reduced-motion: reduce){
    .switch-knob, .convert-btn, .pulse-dot, .rocker-knob{transition:none;animation:none;}
  }

  /* ---------- Homepage hero + card grid ---------- */
  .hero{max-width:760px;margin:8px 0 4px;}
  .hero p{font-size:.92rem;line-height:1.7;color:var(--muted);margin:0;}
  .section-heading{
    font-family:var(--mono);font-weight:700;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;
    color:var(--muted);margin:32px 0 0;
  }
  .card-grid{
    display:grid;grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
    gap:16px;margin-top:16px;
  }
  .conv-card{
    background:var(--panel);border:1px solid var(--border);border-radius:10px;
    padding:18px;text-decoration:none;color:var(--text);
    display:flex;flex-direction:column;gap:10px;
    transition:border-color .15s ease, transform .15s ease, background .15s ease;
  }
  .conv-card:hover{border-color:var(--knob-border);transform:translateY(-2px);background:var(--panel-raised);}
  .conv-card:visited{color:var(--text);}
  .card-dot-row{display:flex;align-items:center;gap:8px;}
  .card-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;}
  .conv-card h3{font-family:var(--mono);font-size:.92rem;font-weight:700;margin:0;letter-spacing:-0.01em;}
  .conv-card p{font-size:.8rem;color:var(--muted);line-height:1.55;margin:0;}