:root{
  --mc-bg:#fff; --mc-text:#0f172a; --mc-muted:#475569; --mc-muted-2:#64748b;
  --mc-border:#e5e7eb; --mc-soft:#f8fafc; --mc-chip:#f1f5f9;
  --mc-primary:#06b6d4; --mc-primary-600:#0891b2; --mc-focus:rgba(6,182,212,.25);
}
.ghm{max-width:min(1280px,96vw);margin:0 auto;padding:12px 16px 48px;min-height:100dvh}
.ghm *{box-sizing:border-box}

/* ---- North ---- */
.ghm-north{position:relative;z-index:5;background:var(--mc-bg)}
.ghm-north-bar{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center}
.ghm-north-cover{max-width:0;opacity:0;border-radius:10px;overflow:hidden;transform:translateY(-6px) scale(.96);
  transition:max-width .30s ease,opacity .25s ease,transform .25s ease}
.ghm-north-cover img{display:block;width:120px;height:auto;cursor:pointer}
.ghm-north-inner{display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center}
.ghm-title{margin:6px 0 2px;font-weight:800;font-size:clamp(28px,3.2vw,40px);line-height:1.2;cursor:pointer}
.ghm-meta{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;color:var(--mc-muted);font-size:14px}
.ghm-chips{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.ghm-chip{display:inline-block;padding:2px 8px;border:1px solid var(--mc-border);border-radius:999px;background:var(--mc-chip);font-size:12px}

/* Sticky when workspace open */
.ghm.ghm--play .ghm-north, .ghm.ghm--doc .ghm-north{
  position:sticky;top:0;padding:10px 0 8px;box-shadow:0 6px 16px rgba(2,6,23,.06)
}
.ghm--play .ghm-north-cover, .ghm--doc .ghm-north-cover{max-width:120px;opacity:1;transform:none}
.ghm--play .ghm-title, .ghm--doc .ghm-title{font-size:clamp(20px,2.2vw,28px)}

/* ---- Divider ---- */
.page-divider{position:relative;height:12px;margin:18px 0;border-radius:999px;overflow:hidden}
.page-divider::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,#06b6d4,#22d3ee,#a78bfa,#06b6d4);
  background-size:300% 100%;
  animation:divider-move 8s linear infinite;
}
@keyframes divider-move{from{background-position:0 0}to{background-position:300% 0}}

/* ---- Toolbar (hidden on cover) ---- */
.ghm-toolbar-wrap{ display:none; position:sticky; top:calc(var(--north-h, 140px) + 6px); z-index:30; background:transparent; margin-bottom:8px; }
.ghm--play .ghm-toolbar-wrap, .ghm--doc .ghm-toolbar-wrap{ display:block; }
.ghm-toolbar{
  display:flex; gap:8px; align-items:center; flex-wrap:wrap; row-gap:8px;
  padding:6px 8px;
  border-radius:10px; background:#fff; border:1px solid var(--mc-border);
  box-shadow:0 2px 10px rgba(2,6,23,.06);
}
.ghm-tool-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border:1px solid var(--mc-border);
  border-radius:8px; background:var(--mc-chip); cursor:pointer;
}
.ghm-tool-btn:hover{ background:#e6f7fb; border-color:var(--mc-primary) }
.ghm-tool-btn:focus{ outline:2px solid var(--mc-primary); outline-offset:2px }
.ghm-tool-btn svg{ width:20px; height:20px; fill:currentColor; color:#0f172a }

/* ---- Tool Studio label (requested) ---- */
.ghm-toolbar-label{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #0f172a;
  background:
    radial-gradient(120px 40px at 30% 30%, rgba(34,211,238,.25), transparent 60%),
    linear-gradient(180deg, #ecfeff 0%, #ffffff 70%);
  border: 1px solid rgba(6,182,212,.45);
  box-shadow:
    inset 0 0 0 1px rgba(34,211,238,.14),
    0 1px 8px rgba(2,6,23,.06);
  user-select:none;
  -webkit-user-select:none;
  white-space:nowrap;
}
.ghm-toolbar-label::before{
  content:"";
  width:10px; height:10px;
  border-radius:999px;
  background: linear-gradient(135deg, #22d3ee, #a78bfa);
  box-shadow: 0 0 0 3px rgba(6,182,212,.18);
}
.ghm-toolbar-label::after{
  content:"";
  width:1px;
  height:18px;
  background: rgba(148,163,184,.55);
  margin-left: 2px;
}
@media (max-width: 520px){
  .ghm-toolbar-label{
    padding: 5px 10px;
    font-size: 10px;
    letter-spacing: .10em;
  }
  .ghm-toolbar-label::after{ display:none; }
}

/* ---- Windows (draggable, resizable, header always on top) ---- */
.ghm-tool-window{
  position:fixed; left:16px;
  top:calc(var(--north-h,140px) + var(--toolbar-h,48px) + 8px);
  min-width:280px; width:360px; max-width:min(720px, calc(100vw - 32px));
  min-height:220px; height:min(62dvh, calc(100dvh - var(--north-h,140px) - var(--toolbar-h,48px) - 24px));
  max-height:calc(100dvh - var(--north-h,140px) - var(--toolbar-h,48px) - 24px);
  background:#fff; border:1px solid var(--mc-border); border-radius:12px;
  box-shadow:0 12px 30px rgba(2,6,23,.18);
  overflow:hidden; resize:both; z-index:1000;
}
.ghm-tool-window[hidden]{ display:none !important; }
.ghm-tool-header{
  position:relative; z-index:3;
  display:flex; align-items:center; justify-content:space-between;
  gap:8px; padding:6px 8px; background:#fafafa; border-bottom:1px solid var(--mc-border);
  cursor:move; user-select:none; -webkit-user-select:none; touch-action:none;
}
.ghm-tool-title{ font-weight:700; font-size:13px; margin:0 }
.ghm-tool-close{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; padding:0;
  background:transparent; border:1px solid var(--mc-border);
  border-radius:6px; cursor:pointer; color:#111;
}
.ghm-tool-close svg{ width:14px; height:14px; fill:currentColor }
.ghm-tool-close:hover{ background:#fee2e2; border-color:#fecaca; color:#dc2626 }
.ghm-tool-close:focus{ outline:2px solid #ef4444; outline-offset:2px }

.ghm-tool-body{ position:relative; z-index:1; display:flex; flex-direction:column; padding:0; height:calc(100% - 34px); overflow:hidden; }
.ghm-tool-canvas{ position:relative; z-index:1; flex:1 1 auto; min-height:0; }
.ghm-tool-controls{
  position:relative; z-index:2;
  flex:0 0 auto; display:flex; gap:8px; align-items:center; padding:8px 10px;
  border-top:1px solid var(--mc-border); background:#fff;
}

/* Ensure embedded ketcher iframe is clean */
.ghm-tool-window iframe.ketcher-frame{
  width:100%;
  height:100%;
  border:0;
  display:block;
  background:#fff;
}

/* ---- ChemCanvas tool window layout (Tool Studio) ---- */
.ghm-tool-window[data-tool="chemcanvas"]{
  width:min(980px, calc(100vw - 32px));
  max-width:calc(100vw - 32px);
}
.ghm-tool-window[data-tool="chemcanvas"] .ghm-tool-canvas{
  padding:0;
}
.ghm-tool-window[data-tool="chemcanvas"] .ccw{
  height:100%;
  display:grid;
  grid-template-columns: 1fr 340px;
  gap:0;
}
.ghm-tool-window[data-tool="chemcanvas"] .ccw-main{
  min-width:0;
  border-right:1px solid var(--mc-border);
  background:#fff;
}
.ghm-tool-window[data-tool="chemcanvas"] .ccw-side{
  min-width:0;
  background: var(--mc-soft);
  padding:10px;
  overflow:auto;
}
.ghm-tool-window[data-tool="chemcanvas"] .ccw-card{
  border:1px solid var(--mc-border);
  background:#fff;
  border-radius:12px;
  padding:10px;
  box-shadow: 0 6px 16px rgba(2,6,23,.06);
  margin-bottom:10px;
}
.ghm-tool-window[data-tool="chemcanvas"] .ccw-kicker{
  font-weight:950;
  letter-spacing:.10em;
  text-transform:uppercase;
  font-size:11px;
  color: color-mix(in srgb, var(--mc-primary) 70%, #334155);
  margin-bottom:6px;
}
.ghm-tool-window[data-tool="chemcanvas"] .ccw-sub{
  color: var(--mc-muted);
  font-size:13px;
  line-height:1.55;
}
.ghm-tool-window[data-tool="chemcanvas"] .ccw-label{
  display:block;
  font-weight:900;
  margin:0 0 6px;
}
.ghm-tool-window[data-tool="chemcanvas"] .ccw-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px;
}
.ghm-tool-window[data-tool="chemcanvas"] .ccw-hint{
  margin-top:8px;
  color: var(--mc-muted);
  font-size:12px;
  line-height:1.5;
}
.ghm-tool-window[data-tool="chemcanvas"] .ccw-status{
  font-size:12px;
  color: var(--mc-muted);
  min-height: 18px;
}
.ghm-tool-window[data-tool="chemcanvas"] .ccw-status[data-state="busy"]{ color:#92400e; }
.ghm-tool-window[data-tool="chemcanvas"] .ccw-status[data-state="ok"]{ color:#166534; }
.ghm-tool-window[data-tool="chemcanvas"] .ccw-status[data-state="err"]{ color:#991b1b; }

@media (max-width: 980px){
  .ghm-tool-window[data-tool="chemcanvas"] .ccw{
    grid-template-columns: 1fr;
  }
  .ghm-tool-window[data-tool="chemcanvas"] .ccw-main{
    border-right:0;
    border-bottom:1px solid var(--mc-border);
    min-height: 42dvh;
  }
}

@media (min-width: 981px) {
  :root[data-cc-panel-side="left"] .ghm-tool-window[data-tool="chemcanvas"] .ccw {
    grid-template-columns: 340px 1fr;
  }
  :root[data-cc-panel-side="left"] .ghm-tool-window[data-tool="chemcanvas"] .ccw-side {
    grid-column: 1;
  }
  :root[data-cc-panel-side="left"] .ghm-tool-window[data-tool="chemcanvas"] .ccw-main {
    grid-column: 2;
    border-right: none;
    border-left: 1px solid var(--mc-border);
  }
}


/* ---- Rail ---- */
.ghm-rail{position:relative;margin:18px 0 0;display:flex;gap:12px;align-items:stretch;min-height:clamp(480px,68dvh,100dvh)}
.ghm-panel{position:relative;border:1px solid var(--mc-border);background:#fff;border-radius:14px;overflow:hidden;flex:1 1 0;min-width:0;transition:flex-basis .35s cubic-bezier(.22,.61,.36,1)}
.ghm-panel-title{margin:0;padding:12px 0;text-align:center;font-weight:800;color:#0f172a;cursor:pointer}

/* --- STARTING LAYOUT: titles centered, bodies hidden; panel area is clickable --- */
.ghm.ghm--cover .ghm-panel { display:flex; align-items:center; justify-content:center; min-height:clamp(280px, 44vh, 520px); cursor:pointer; }
.ghm.ghm--cover .ghm-panel:focus { outline:2px solid var(--mc-primary); outline-offset:2px; }
.ghm.ghm--cover .ghm-panel-title{ font-size:clamp(22px,2.6vw,28px); }
.ghm.ghm--cover .ghm-panel-body{ display:none; }

/* Active panels in workspace */
/* Slightly widen docs when Playground is active to reduce aggressive wrapping */
.ghm--play .ghm-play{flex:1 1 64%} .ghm--play .ghm-doc{flex:0 0 34%}
.ghm--doc  .ghm-doc {flex:1 1 68%} .ghm--doc  .ghm-play{flex:0 0 30%}
.ghm--act{box-shadow:0 12px 30px rgba(2,6,23,.10)}

.ghm-rail-divider{width:6px;border-radius:999px;background:linear-gradient(180deg,var(--mc-primary),#22d3ee);flex:0 0 6px;align-self:stretch}

/* Panel bodies */
.ghm .ghm-panel-body{
  padding:14px 16px;
  height: calc(100dvh - var(--north-h, 140px) - 56px);
  overflow:auto; -webkit-overflow-scrolling:touch;
  word-break:normal;
}

/* Hero fade when in workspace */
.ghm-center{margin:10px 0 14px;display:flex;justify-content:center}
.ghm-cover{border-radius:16px;overflow:hidden;background:#f1f5f9;box-shadow:0 10px 20px rgba(2,6,23,.08);max-width:880px;width:100%}
.ghm-cover img{display:block;width:100%;height:auto}
.ghm.ghm--play .ghm-center, .ghm.ghm--doc .ghm-center{opacity:0;transform:translateY(-8px) scale(.98);height:0;overflow:hidden;pointer-events:none;transition:opacity .24s ease,transform .24s ease}

/* South links hidden in workspace */
.ghm-south{display:flex;gap:12px;justify-content:center;margin:12px 0 8px;flex-wrap:wrap}
.ghm-link{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border:1px solid var(--mc-border);border-radius:10px;background:var(--mc-chip);color:var(--mc-text);text-decoration:none}
.ghm-link:hover{background:#e6f7fb;border-color:var(--mc-primary);color:#0f172a}
.ghm.ghm--play .ghm-south, .ghm.ghm--doc .ghm-south{display:none}

/* Forms / buttons */
.pg-form{display:grid;gap:12px}
.input,.textarea{width:100%;padding:10px 12px;border:1px solid var(--mc-border);border-radius:10px;background:#fff;color:var(--mc-text);box-shadow:inset 0 0 0 1px #e2e8f0}
.input:focus,.textarea:focus{outline:2px solid var(--mc-primary);outline-offset:2px;box-shadow:0 0 0 3px var(--mc-focus);border-color:var(--mc-primary)}
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border:1px solid var(--mc-border);border-radius:10px;background:var(--mc-chip);color:#000}
.btn:hover{background:#e6f7fb;border-color:var(--mc-primary);color:#0f172a}
.btn-primary{background:var(--mc-primary);border-color:var(--mc-primary);color:#fff}

/* ------------------------------------------------------------------
   Documentation typography + colors (improved for narrow/right panel)
   ------------------------------------------------------------------ */
#ghm-doc .ghm-panel-body{
  --doc-fg: var(--mc-text);
  --doc-muted: var(--mc-muted);
  --doc-link: #0e7490;
  --doc-link-hover: var(--mc-primary-600);

  --doc-inline-code-bg: #f1f5f9;
  --doc-inline-code-fg: #0b1220;

  --doc-pre-bg: #0b1220;
  --doc-pre-fg: #e5e7eb;
  --doc-pre-border: rgba(148,163,184,.28);

  line-height:1.65;
  font-size:16px;
  color:var(--doc-fg);

  /* Avoid ugly breaks inside normal words; still protect against long tokens/URLs */
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* When Playground is active, docs are narrower: make typography more compact */
.ghm--play #ghm-doc .ghm-panel-body{
  font-size:14px;
  line-height:1.6;
  padding:12px 12px;
}

/* Headings */
#ghm-doc .ghm-panel-body h1{ margin:0.85em 0 0.45em; line-height:1.18; letter-spacing:-.01em; font-size:26px; color:var(--doc-fg); }
#ghm-doc .ghm-panel-body h2{ margin:0.85em 0 0.40em; line-height:1.22; letter-spacing:-.008em; font-size:20px; color:var(--doc-fg); }
#ghm-doc .ghm-panel-body h3{ margin:0.75em 0 0.35em; line-height:1.25; font-size:17px; color:var(--doc-fg); }
#ghm-doc .ghm-panel-body h4{ margin:0.70em 0 0.30em; line-height:1.25; font-size:15px; color:var(--doc-fg); }
#ghm-doc .ghm-panel-body h5{ margin:0.65em 0 0.25em; line-height:1.25; font-size:14px; color:var(--doc-fg); }
#ghm-doc .ghm-panel-body h6{ margin:0.60em 0 0.20em; line-height:1.25; font-size:13px; color:var(--doc-muted); }

.ghm--play #ghm-doc .ghm-panel-body h1{ font-size:20px; }
.ghm--play #ghm-doc .ghm-panel-body h2{ font-size:17px; }
.ghm--play #ghm-doc .ghm-panel-body h3{ font-size:15px; }

/* Paragraphs and lists */
#ghm-doc .ghm-panel-body p{ margin:0.55em 0 0.95em; color:var(--doc-fg); }
#ghm-doc .ghm-panel-body ul,#ghm-doc .ghm-panel-body ol{ margin:0.55em 0 1em 1.15em; color:var(--doc-fg); }
#ghm-doc .ghm-panel-body li{ margin:0.25em 0; }

/* Links */
#ghm-doc .ghm-panel-body a{
  color:var(--doc-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}
#ghm-doc .ghm-panel-body a:hover{ color:var(--doc-link-hover); }

/* Inline code (do not affect fenced blocks; see rule below) */
#ghm-doc .ghm-panel-body code{
  background: var(--doc-inline-code-bg);
  color: var(--doc-inline-code-fg);
  padding: .12em .35em;
  border-radius: 6px;
  font-size: .95em;
}

/* Fenced blocks */
#ghm-doc .ghm-panel-body pre{
  background: var(--doc-pre-bg);
  color: var(--doc-pre-fg);
  border: 1px solid var(--doc-pre-border);
  padding: 12px;
  border-radius: 10px;
  overflow:auto;
  white-space: pre;
  line-height: 1.5;
  font-size: 13px;
}
.ghm--play #ghm-doc .ghm-panel-body pre{
  padding: 10px;
  font-size: 12px;
}
#ghm-doc .ghm-panel-body pre code{
  background: transparent !important;
  color: inherit !important;
  padding: 0 !important;
  box-shadow: none !important;
  font-size: inherit !important;
}

/* Blockquotes */
#ghm-doc .ghm-panel-body blockquote{
  margin: 0.8em 0;
  padding: 10px 12px;
  border-left: 4px solid var(--mc-primary);
  background: color-mix(in srgb, var(--mc-primary) 8%, #fff);
  color: var(--doc-fg);
  border-radius: 10px;
}

/* Tables */
#ghm-doc .ghm-panel-body table {
  width: 100%;
  border-collapse: collapse;
  margin: .6em 0 1.1em;
  font-size: 14px;
}
.ghm--play #ghm-doc .ghm-panel-body table{ font-size: 12px; }
#ghm-doc .ghm-panel-body thead th {
  background: #f1f5f9;
  font-weight: 800;
}
#ghm-doc .ghm-panel-body th,
#ghm-doc .ghm-panel-body td {
  border: 1px solid var(--mc-border);
  padding: .5em .6em;
  vertical-align: top;
}
#ghm-doc .ghm-panel-body tbody tr:nth-child(odd){
  background: #fcfdff;
}

/* Fade reveal */
#ghm-doc .ghm-panel-body{scroll-behavior:smooth}
.mc-reveal{opacity:0;transform:translateY(8px);transition:opacity .38s ease,transform .38s cubic-bezier(.22,.61,.36,1)}
.mc-reveal.in{opacity:1;transform:none}

/* Responsive */
@media (max-width:980px){
  .ghm-toolbar-wrap{ position:static; }
  .ghm-tool-window{ left:12px; right:12px; width:auto; max-width:none }
  /* On small screens the panels stack; restore comfortable doc sizing */
  #ghm-doc .ghm-panel-body{ font-size:16px; padding:14px 16px; }
}
/* Buttons disabled */
.btn-disabled,
.btn-disabled[disabled] {
  opacity: .55;
  cursor: not-allowed;
}