:root{
    --app-bg:#121212;
    --panel:#1b1b1b;
    /* Use page background for “secondary” surfaces (chips/pills/headers) to match the app suite */
    --panel-2:#121212;
    --stroke:#24242a;
    --stroke-2:#30303a;
    --chrome-text:#e8e8ec;
    --accent:#6aa3ff;
    --muted:#b6b6c3;
  }
  *{box-sizing:border-box} html,body{height:100%}
  body{margin:0;background:var(--app-bg);color:var(--chrome-text);font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;line-height:1.55}
  .app{display:grid;grid-template-rows:auto 1fr auto;height:100svh}
  .topbar{display:flex;column-gap:10px;row-gap:5px;align-items:center;justify-content:space-between;padding:6px 10px;border-bottom:1px solid var(--stroke);background:var(--panel);flex-wrap:wrap}
  .brand{display:flex;align-items:center;gap:10px;flex:0 0 auto}
  .topbar .logo{width:30px;height:30px;flex:0 0 30px;border-radius:10px;display:block}
  .brandTitle{font-weight:700;letter-spacing:.18em;font-size:12px;color:var(--chrome-text);text-transform:uppercase;white-space:nowrap}
  .ver{color:#888;font-size:11px;margin-left:6px;white-space:nowrap;text-transform: uppercase;letter-spacing: 1px}
  @media (max-width: 420px){
  .ver{ letter-spacing: .8px; }
}

  .topbar .group{display:flex;gap:8px;align-items:center;flex-wrap:wrap;min-width:0}
  .main{display:grid;grid-template-columns:1fr 380px;gap:16px;padding:16px;min-height:0;min-width:0}
  @media (max-width:980px){.main{grid-template-columns:1fr}}
  .panel{background:var(--panel);border:1px solid var(--stroke);border-radius:16px;box-shadow:0 16px 60px rgba(0,0,0,.45);min-height:0;min-width:0}
  /* Keep the canvas padding fixed; scroll the sample content *inside* the canvas panel */
  .panel.canvas{display:flex;flex-direction:column;overflow:hidden;background:var(--panel)}
  .hdr{padding:12px 14px;border-bottom:1px solid var(--stroke);background:var(--panel-2);border-top-left-radius:16px;border-top-right-radius:16px;font-weight:600;letter-spacing:.2px}
  .body{padding:14px}
  .btn,.select,.input{background:#121212;color:var(--chrome-text);border:1px solid var(--stroke-2);border-radius:12px;padding:6px 10px;outline:none}

  /* Dropdown option readability (helps group headers avoid clipping) */
  select option{padding:6px 10px;line-height:1.35}
  select option.fh-group-label{font-style:italic;font-weight:700;opacity:.9}

  /* === FONT DROPDOWNS (custom, to avoid native optgroup clipping) === */
  .fh-dd{position:relative;display:inline-flex;align-items:center}
  .fh-dd-native{display:none}
  .fh-dd-btn{cursor:pointer;min-width:190px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  @media (max-width: 980px){
    .fh-dd-btn{min-width:160px}
  }
  .fh-dd-pop{position:absolute;top:calc(100% + 8px);left:0;z-index:9999;min-width:320px;max-width:420px;
    background:#0f0f12;border:1px solid var(--stroke-2);border-radius:14px;box-shadow:0 18px 70px rgba(0,0,0,.55);
    padding:6px
  }
  .fh-dd-list{max-height:360px;overflow:auto;padding:2px}
  .fh-dd-item{display:flex;align-items:center;gap:10px;width:100%;background:transparent;border:0;color:var(--chrome-text);
    padding:8px 10px;border-radius:10px;text-align:left;cursor:pointer;font-size:14px
  }
  .fh-dd-item:hover{background:rgba(106,163,255,.12)}
  .fh-dd-item[aria-selected="true"]{background:rgba(106,163,255,.18)}
  .fh-dd-header{padding:10px 10px 6px 10px;font-weight:800;font-style:italic;color:var(--accent);opacity:1;
    letter-spacing:.02em
  }
  .fh-dd-sep{height:1px;background:var(--stroke);margin:6px 8px}

  #pairingSelect{max-width:240px}
  #titleFontSelect,#bodyFontSelect{max-width:190px}
  @media (max-width: 980px){
    #pairingSelect{max-width:180px}
    #titleFontSelect,#bodyFontSelect{max-width:160px}
  }

  .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--panel-2);border:1px solid var(--stroke-2);color:var(--chrome-text);padding:7px 10px;border-radius:12px;cursor:pointer}
  .btn.primary{background:#474747;border-color:var(--stroke-2)}

  #h1CapsBtn{padding:7px 10px;font-size:12px;letter-spacing:.06em}
  #h1CapsBtn[aria-pressed="true"]{background:var(--chrome-text);color:#0f0f12;border-color:var(--chrome-text)}

  .pill{padding:6px 10px;border:1px solid var(--stroke-2);border-radius:999px;background:var(--panel-2);font-size:12px;--text:#e8e8ec;--accent:#6aa3ff;--font-heading:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;--font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;--h1-color:var(--text);--h2-color:var(--text);--h3-color:var(--text);--p-color:var(--text);--btn-bg:var(--accent);--btn-text:#0F0F12;--size-h1:2.4rem;--size-h2:1.9rem;--size-h3:1.5rem;--size-h4:1.25rem;--size-p:1rem;--size-small:.9rem;--h1-scale:1;--h1-weight:700;--h2-weight:700;--h3-weight:600}
  .canvas{padding:18px;min-height:0}
  .sample{background:var(--bg);color:var(--text);border:1px solid var(--stroke);border-radius:14px;padding:24px;flex:1;min-height:0;overflow:auto}
  .H1,.H2,.H3,.H4{font-family:var(--font-heading);line-height:1.15;margin:0 0 .5em}
  .H1{font-size:calc(var(--size-h1) * var(--h1-scale, 1));font-weight:var(--h1-weight,700);color:var(--h1-color);text-transform:var(--h1-transform, none)}
  .H2{font-size:var(--size-h2);font-weight:var(--h2-weight,700);color:var(--h2-color)}
  .H3{font-size:var(--size-h3);font-weight:var(--h3-weight,600);color:var(--h3-color)}
  .H4{font-size:var(--size-h4);font-weight:600}
  p{font-family:var(--font-body);font-size:var(--size-p);margin:.9em 0;color:var(--p-color)}
  small{font-size:var(--size-small);color:color-mix(in oklab,var(--text) 70%, black)}
  .badge{display:inline-block;padding:6px 10px;border:1px solid var(--stroke-2);border-radius:999px;background:#121212;margin-bottom:14px;color:#e8e8ec}
  .cta{display:inline-block;padding:10px 14px;border:1px solid var(--stroke-2);border-radius:12px;background:var(--panel-2);color:var(--text);text-decoration:none;margin-right:8px}
  .cta.primary{border-color:var(--btn-bg);background:var(--btn-bg);color:var(--btn-text)}
  .sidebar{display:flex;flex-direction:column;min-height:0;min-width:0}
  .sidebar .body{overflow:auto;overflow-x:hidden;max-height:calc(100svh - 200px)}
  .section-title{display:flex;align-items:center;justify-content:space-between;margin:14px 0 6px}
  .grid{display:grid;grid-template-columns:1fr;gap:10px}
  .pair-card{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--stroke-2);border-radius:12px;background:var(--panel);cursor:pointer}
  .pair-card:hover{border-color:var(--accent)}
  .pairing-grid{display:grid;grid-template-columns:1fr;gap:10px;margin-top:10px}
  .font-card{border:1px solid var(--stroke-2);border-radius:12px;background:var(--panel);padding:10px;cursor:pointer}
  .font-card:hover{border-color:var(--accent)}
  .font-head{font-weight:700;font-size:1.05rem;line-height:1.2}
  .font-body{opacity:.9;font-size:.92rem}
  .bottombar{border-top:1px solid var(--stroke);background:var(--panel-2);padding:6px 10px}
  .palettes-strip{display:flex;gap:10px}
  /* Prevent page-level horizontal scrolling; only strips scroll horizontally */
  html, body { overflow-x: hidden; }

  /* === SCROLL CONTAINMENT (prevent whole-page horizontal scroll) === */
  html, body { max-width: 100vw; }
  body { overflow-x: hidden; }
  .app, .app > * { min-width: 0; }
  .bottombar { min-width: 0; overflow-x: hidden; }
  .swatch-strip-wrap, .themes-strip-wrap { min-width: 0; }
  .swatch-strip-wrap { padding-top: 2px; }
  .themes-strip-wrap { padding-top: 4px; }

  /* Make horizontal scrollers behave consistently */
  .swatch-strip-wrap, .themes-strip-wrap {
    overflow-x: scroll; /* ensure scrollable even when OS hides indicators */
    scrollbar-width: thin;
  }
  .swatch-strip-wrap::-webkit-scrollbar,
  .themes-strip-wrap::-webkit-scrollbar { height: 10px; }
  .swatch-strip-wrap::-webkit-scrollbar-thumb,
  .themes-strip-wrap::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 999px; }
  .swatch-strip-wrap::-webkit-scrollbar-track,
  .themes-strip-wrap::-webkit-scrollbar-track { background: rgba(0,0,0,.18); border-radius: 999px; }

/* Swatches: wrap provides the scrolling viewport */
  .swatch-strip-wrap{width:100%;max-width:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;padding-bottom:14px;max-height:calc(22px*2 + 8px + 14px);scrollbar-gutter:stable both-edges}
  .swatch-strip-wrap.one-row{max-height:calc(22px + 14px)}
  .swatch-strip{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,22px);grid-auto-columns:22px;gap:8px;align-content:start;width:max-content;padding:0}
  .swatch-strip.one-row{grid-template-rows:repeat(1,22px)}

  /* Themes: wrap provides the scrolling viewport */
  .themes-strip-wrap{width:100%;max-width:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;padding-bottom:6px;scrollbar-gutter:stable both-edges}
  .themes-strip-wrap .palettes-strip{display:flex;gap:10px;width:max-content;padding:0;margin:0}

  .palette-chip{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:3px 10px;border:1px solid var(--stroke-2);border-radius:12px;background:var(--panel);cursor:pointer;margin-bottom:6px}
  .palette-chip:hover{border-color:var(--accent)}
  .miniswatch{width:34px;height:20px;border-radius:6px;border:1px solid var(--stroke-2);display:grid;grid-template-columns:1fr 1fr;overflow:hidden}
  .miniswatch .bg{background:#222}.miniswatch .text{background:#eee}


/* Consume text role vars with sensible fallbacks */
/* IMPORTANT: keep these aligned with the sidebar + swatch system (they write --h1-color, etc.) */
#scope .H1 { color: var(--h1-color, var(--text)); }
#scope .H2 { color: var(--h2-color, var(--text)); }
#scope .H3 { color: var(--h3-color, var(--text)); }
#scope p    { color: var(--p-color,  var(--text)); }


#scope .fh-palette{display:grid;gap:12px;margin-top:12px}
#scope .fh-band {
  display: grid;
  grid-template-columns: 2fr 2fr 1fr 1fr 1fr 1fr;
  height: 54px;
    margin-top: 12px;
border-radius: 0px;
  overflow: hidden;
  border: 1px solid var(--stroke,#2a2a2f);
}
#scope .fh-bar{position:relative;cursor:pointer}
#scope .fh-center{
  position:absolute;inset:0;display:grid;place-items:center;
  font:600 12px/1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.3px;user-select:none
}
#scope .fh-label{
  position:absolute;left:8px;bottom:6px;
  font:500 11px/1 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  opacity:.85;text-shadow:0 1px 1px rgba(0,0,0,.35)
}
/* Hide the old Canvas Colors group if present */
.group-canvas{display:none!important}
/* Keep base-bar chip labels readable */
.palette-chip, .palette-chip * { color:#ffffff !important; }
.palette-chip .miniswatch { border:1px solid rgba(0,0,0,.35); }

/* Active target highlight for swatch assignment */
#scope .fh-bar.is-active{outline:2px solid #ffffff; outline-offset:-2px}
.swatch-chip{width:22px;height:22px;border-radius:7px;border:1px solid var(--stroke-2);background:#222;cursor:pointer;box-shadow:0 6px 16px rgba(0,0,0,.25)}
.swatch-chip:hover{transform:translateY(-1px)}
.swatch-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

  /* === HUD / HELP OVERLAY === */
#fhHud{
    position:fixed; inset:0;
    display:none;
    background:rgba(0,0,0,.55);
    padding:18px;
    z-index:9999;
  }
  #fhHud.is-open{ display:flex; align-items:center; justify-content:center; }
  .fhHud-card{
    width:min(820px, 100%);
    max-height: min(86vh, 900px);
    overflow:auto;
    background:var(--panel);
    border:1px solid var(--stroke);
    border-radius:16px;
    box-shadow:0 20px 60px rgba(0,0,0,.45);
  }
  .fhHud-head{
    position:sticky; top:0;
    display:flex; align-items:center; justify-content:space-between;
    padding:12px 12px;
    background:var(--panel-2);
    border-bottom:1px solid var(--stroke);
  }
  .fhHud-title{ font-weight:800; letter-spacing:.2px; }
  .fhHud-body{ padding:14px 14px 16px; color:var(--chrome-text); }
  .fhHud-section{ padding:10px 0; border-bottom:1px solid var(--stroke); }
  .fhHud-section:last-child{ border-bottom:0; }
  .fhHud-h{ font-weight:800; margin-bottom:4px; }
  .fhHud-ul{ margin:0; padding-left:18px; }
  .fhHud-ul li{ margin:6px 0; line-height:1.35; color:var(--chrome-text); }
  .fhHud-note{
    margin-top:8px;
    padding:10px 10px;
    border-radius:12px;
    background:rgba(106,163,255,.12);
    border:1px solid rgba(106,163,255,.25);
    color:var(--chrome-text);
  }
  .fhHud-foot{ margin-top:10px; color:var(--muted); font-size:13px; }


.vsep {width: 1px;height: 18px;background: #575757;opacity: 1;display: inline-block;}
.pgLink{display:inline-flex;align-items:center;gap:8px;color:var(--chrome-text);text-decoration:none;max-width:460px}
.pgLink:hover{text-decoration:underline}
.pgLogo{width:24px;height:24px;border-radius:5px;flex:0 0 auto}
.pgLinkText{font-size:12px;color:var(--muted);line-height:1.2}
.pgInline{display:inline-flex;align-items:center;gap:6px;color:var(--chrome-text);text-decoration:none}
.pgInline:hover{text-decoration:underline}
.pgLogoSm{width:16px;height:16px;border-radius:4px;flex:0 0 auto}
/* === COPYRIGHT === */
.fh-copyright{
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid var(--line);
  font-size:12px;
  opacity:.75;
  text-align:center;
}

button:focus {
  outline: none;
}

button:focus-visible {
  outline: 2px solid #6aa3ff;
  outline-offset: 2px;
}


/* Mobile-only footer copyright (desktop stays in sidebar) */
.fh-copyright.mobileOnly{display:none}

  /* Safe-area padding for iOS (not destructive elsewhere) */
  .topbar{padding-top:calc(6px + env(safe-area-inset-top))}
  .bottombar{padding-bottom:calc(6px + env(safe-area-inset-bottom))}

  @media (max-width: 380px){
    .brandTitle{display:none}
    #pairingSelect{max-width:150px}
    #titleFontSelect,#bodyFontSelect{max-width:135px}
    .btn{padding:7px 9px}
  }

  /* === MOBILE (iPhone-safe) === */
  @media (max-width: 520px){
    /* Safe-area padding so bars don't collide with iOS notch/home indicator */
    .topbar{padding:4px 8px;padding-top:calc(4px + env(safe-area-inset-top));column-gap:8px;row-gap:5px}
    .bottombar{padding:6px 8px;padding-bottom:calc(6px + env(safe-area-inset-bottom))}

    /* Tighten brand + controls */
    .brand{gap:8px}
    .topbar .logo{width:28px;height:28px;flex:0 0 28px;border-radius:9px}
    .brandTitle{font-size:11px;letter-spacing:.14em}
    .topbar .group{gap:6px}

    /* Inputs */
    #pairingSelect{max-width:160px}
    #titleFontSelect,#bodyFontSelect{max-width:150px}

    /* Buttons/selects: keep tappable but compact */
    .btn,.select,.input{border-radius:12px}
    .btn{padding:7px 10px}

    /* Layout */
    /* Let the page grow on mobile (avoid fixed 100svh app height that can collapse the canvas) */
    .app{height:auto;min-height:100svh;grid-template-rows:auto auto auto}
    .main{min-height:auto}

    .main{padding:10px;gap:12px}
    .panel{border-radius:14px}
    .hdr{padding:10px 12px}
    .body{padding:12px}

    /* Canvas spacing */
    .canvas{padding:12px}
    .sample{padding:16px;border-radius:12px}

    /* Mobile: make the color band scroll horizontally inside the preview (so segments stay readable) */
    #scope .fh-palette{overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; padding-bottom:10px; max-width:100%}
    #scope .fh-band{min-width:640px}

    /* Keep sidebar usable (scroll inside sidebar). On mobile, let the preview grow with the page
       (no internal scrolling), so users can see the full composition at once. */
    .sidebar .body{max-height:56svh; overflow:auto; -webkit-overflow-scrolling:touch}

    /* Mobile preview: grows with the page (no internal scrolling), but keep
       overflow clipped so large type can't visually overlap the next panels. */
    .panel.canvas{display:block; overflow:hidden}
    .panel.canvas .sample{max-height:none; overflow:hidden; flex:none; min-height:auto}

    /* Bottom strips are compact */
    .swatch-strip-wrap{padding-bottom:14px}
    .themes-strip-wrap{padding-bottom:8px}
    .palette-chip{padding:3px 10px}

    /* Put copyright at the very bottom of the page on mobile */
    .sidebar .fh-copyright{display:none}
    .fh-copyright.mobileOnly{display:block}

    /* Mobile: keep the color band readable (hex strings can collide at small widths)
       Show hex only for the actively selected segment. */
    #scope .fh-bar{overflow:hidden}
    /* Mobile hex readout: pin near top + allow wrap so it fits narrow segments */
    #scope .fh-center{
      opacity:0;
      display:flex;
      align-items:flex-start;
      justify-content:center;
      padding:5px 4px 0;
      max-height:20px; /* keep it above the bottom label */
      font:700 9px/1.05 ui-monospace,Menlo,Consolas,monospace;
      letter-spacing:.1px;
      white-space:normal;
      word-break:break-all;
      text-align:center;
      overflow:hidden;
    }
    #scope .fh-bar.is-active .fh-center{opacity:1}
    #scope .fh-label{font-size:10px; left:6px; bottom:5px}
  }

  /* Extra-tight phones */
  @media (max-width: 380px){
    #pairingSelect{max-width:140px}
    #titleFontSelect,#bodyFontSelect{max-width:135px}
    .brandTitle{font-size:10px;letter-spacing:.12em}
    .btn{padding:7px 9px}
  }

/* === GENERATED CSS OUTPUT === */
#cssOut{
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
}