/*
 * Creator 1.0.4 — mobile-first design system.
 * Base = narrow screens. Layouts expand at 601 / 901 / 1101 / 1201px.
 * Native CSS/JS only. No external fonts, UI framework or animation runtime.
 * All selectors are scoped to Creator; WordPress/Cocoon admin screens are untouched.
 */
.creator-theme {
  --ink:#152536; --muted:#5b6877; --line:#dce5e8; --paper:#fff; --bg:#f5f8f8;
  --dark:#0b1422; --navy:var(--dark); --dark-2:#121f30; --dark-line:#2a3b50;
  --light-muted:#a9b8c9; --mint:#85ead2; --primary:#075e54; --teal:var(--primary);
  --blue:#94b9ff; --radius:12px; --shadow:0 14px 38px #142d4210; --max:1232px;
  --mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Noto Sans Mono CJK JP",monospace;
  --gutter:max(16px,env(safe-area-inset-left,0px),env(safe-area-inset-right,0px));
  --creator-header-height:65px; --creator-sticky-offset:0px;
  --creator-focus-offset:calc(var(--creator-header-height) + var(--creator-sticky-offset) + 20px);
  margin:0; color:var(--ink); background:var(--bg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans CJK JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  font-size:1rem; line-height:1.75; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  -webkit-text-size-adjust:100%; text-size-adjust:100%;
}
.creator-theme *, .creator-theme *::before, .creator-theme *::after { box-sizing:border-box; }
.creator-theme [hidden] { display:none!important; }
.creator-theme a { color:inherit; text-decoration:none; }
.creator-theme button, .creator-theme input, .creator-theme select, .creator-theme textarea { font:inherit; }
.creator-theme button, .creator-theme summary { cursor:pointer; }
.creator-theme button:disabled { cursor:default; }
.creator-theme :is(a,button,input,select,textarea,summary,[tabindex]) { scroll-margin-block:var(--creator-focus-offset) 100px; }
.creator-theme :is(a,button,input,select,textarea,summary,[tabindex]):focus-visible { outline:3px solid #2775b7; outline-offset:3px; }
.creator-theme :is(.site-header,.site-footer,.creator-panel) :focus-visible { outline-color:var(--mint); }
.creator-theme :is(h1,h2,h3,h4,h5,h6,p) { margin:0; }
.creator-theme :is(h1,h2,h3,h4,h5,h6) { font-weight:750; overflow-wrap:anywhere; word-break:normal; }
.creator-theme h1 { line-height:1.4; letter-spacing:-.03em; }
.creator-theme h2 { line-height:1.5; letter-spacing:-.025em; }
.creator-theme h3 { line-height:1.65; }
.creator-theme svg { display:inline-block; vertical-align:middle; flex-shrink:0; }
.creator-theme img { max-width:100%; height:auto; }
.creator-theme ::selection { background:#b6f4de; color:#122d32; }
.creator-theme .icon { width:20px; height:20px; flex:none; }
.creator-theme .container { width:min(var(--max),calc(100% - var(--gutter) * 2)); margin-inline:auto; }
.creator-theme #main { min-width:0; background:transparent; border:0; box-shadow:none; }
.creator-theme .section { padding-block:48px; }
.creator-theme .eyebrow { display:block; margin-bottom:12px; color:var(--primary); font-size:.6875rem; font-weight:800; line-height:1.5; letter-spacing:.14em; }
.creator-theme .eyebrow.light { color:var(--mint); }
.creator-theme .section-heading { display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:26px; }
.creator-theme .section-heading h2 { font-size:1.5625rem; }
.creator-theme .section-heading p { margin-top:10px; color:var(--muted); font-size:.875rem; }
.creator-theme .text-link { display:inline-flex; align-items:center; gap:9px; min-height:44px; font-size:.8125rem; font-weight:650; color:var(--primary); }
.creator-theme .text-link .icon { width:17px; height:17px; }
.creator-theme .button { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; max-width:100%; padding:12px 20px; border:1px solid transparent; border-radius:8px; font-size:.875rem; font-weight:700; line-height:1.65; text-align:center; white-space:normal; overflow-wrap:anywhere; transition:transform .2s,box-shadow .2s,background-color .2s; }
.creator-theme .button .icon { width:18px; height:18px; }
.creator-theme .button.mint { color:#102f2a; background:var(--mint); }
.creator-theme .button.primary { color:#fff; background:var(--primary); }
.creator-theme .button.ghost { color:#e7eef6; background:transparent; border-color:#61718a; }
.creator-theme .button.header-line { display:none; color:#e5f5ec; background:#182e29; border-color:#456c5b; }
.creator-theme .icon-button { display:inline-grid; place-items:center; width:44px; height:44px; padding:0; border:1px solid transparent; border-radius:8px; color:inherit; background:transparent; flex:none; }
.creator-theme .skip-link { position:fixed; top:8px; left:16px; z-index:100001; padding:12px 20px; color:#123; background:#fff; transform:translateY(-160%); }
.creator-theme .skip-link:focus { transform:none; }
.creator-theme .screen-reader-text, .creator-theme .creator-sr-only { position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
/* Header and navigation: touch controls are the default. */
.creator-theme .site-header { position:sticky; top:var(--creator-sticky-offset); width:100%; z-index:90; color:#fff; background:#0b1422f7; border-bottom:1px solid #ffffff13; -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
.creator-theme .header-inner { display:flex; align-items:center; justify-content:space-between; min-height:65px; gap:10px; padding-block:8px; }
.creator-theme .brand { display:inline-flex; align-items:center; gap:8px; min-height:44px; min-width:0; flex-shrink:0; }
.creator-theme .brand-mark { display:grid; place-items:center; width:33px; height:37px; color:var(--mint); border:1px solid #509f8c70; border-radius:8px; background:linear-gradient(140deg,#6ee6c718,#6ee6c700); flex:none; }
.creator-theme .brand-mark .icon { width:22px; height:22px; }
.creator-theme .brand-copy { display:flex; flex-direction:column; gap:4px; line-height:1.12; }
.creator-theme .brand-parent { color:#c5d4e3; font-size:.5rem; font-weight:600; letter-spacing:.065em; white-space:nowrap; }
.creator-theme .brand-name { color:#f3f8fd; font-size:1.25rem; font-weight:750; letter-spacing:.07em; white-space:nowrap; }
.creator-theme .brand-dot { color:var(--mint); }
.creator-theme .header-actions { display:flex; align-items:center; gap:3px; flex:none; }
.creator-theme .desktop-nav { display:none; }
.creator-theme .reading-progress { position:absolute; bottom:-1px; left:0; width:100%; height:2px; overflow:hidden; }
.creator-theme .reading-progress i { display:block; width:0; height:100%; background:var(--mint); }
.creator-theme.admin-bar { --creator-sticky-offset:var(--creator-mobile-admin-offset,46px); }
/* Home / code workspace */
.creator-theme .hero { position:relative; isolation:isolate; overflow:hidden; color:#f1f5fa; background:var(--dark); }
.creator-theme .hero::before { content:""; position:absolute; z-index:-1; inset:0; pointer-events:none; background:radial-gradient(ellipse at 85% 38%,#18736f25 0%,transparent 54%); }
.creator-theme .hero-grid-bg { position:absolute; z-index:-1; inset:0; pointer-events:none; background-image:linear-gradient(#ffffff03 1px,transparent 1px),linear-gradient(90deg,#ffffff03 1px,transparent 1px); background-size:48px 48px; mask-image:linear-gradient(90deg,transparent,#000); }
.creator-theme .hero-inner { display:grid; grid-template-columns:minmax(0,1fr); align-items:center; gap:40px; padding-block:44px; min-width:0; }
.creator-theme .hero-copy { min-width:0; }
.creator-theme .hero-copy .eyebrow { margin-bottom:20px; font-size:.6875rem; }
.creator-theme .hero h1 { font-size:clamp(2.5rem,10.8vw,2.75rem); font-weight:750; line-height:1.38; letter-spacing:-.045em; }
.creator-theme .hero h1 span { color:var(--mint); }
.creator-theme .hero-lead { margin-top:21px; font-size:1.0625rem; font-weight:600; line-height:1.8; }
.creator-theme .hero-description { margin-top:17px; font-size:.875rem; line-height:1.95; color:var(--light-muted); }
.creator-theme .hero-buttons { display:flex; flex-direction:column; gap:12px; margin-top:26px; }
.creator-theme .hero-benefits { display:flex; flex-wrap:wrap; gap:8px 12px; margin-top:18px; color:#b1c0cf; font-size:.6875rem; }
.creator-theme .hero-benefits>span { display:inline-flex; align-items:center; gap:5px; }
.creator-theme .hero-benefits .icon { width:14px; height:14px; color:var(--mint); }
.creator-theme .status-dot { display:inline-block; width:6px; height:6px; margin-right:8px; border-radius:50%; background:var(--mint); vertical-align:middle; }
.creator-theme .workspace { position:relative; min-width:0; width:100%; max-width:580px; margin-inline:auto; border:1px solid #365065; border-radius:13px; background:#101c2b; box-shadow:0 22px 60px #0003; }
.creator-theme .workspace::before { content:""; position:absolute; top:-1px; left:35%; width:30%; height:1px; background:linear-gradient(90deg,transparent,#9bf2dd,transparent); pointer-events:none; }
.creator-theme .workspace-title { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:43px; padding:12px; border-bottom:1px solid #ffffff0c; border-radius:12px 12px 0 0; background:#152635; color:#acc0ce; font:.5625rem/1.5 var(--mono); letter-spacing:.05em; }
.creator-theme .workspace-title>.icon { width:16px; height:16px; margin-left:auto; }
.creator-theme .window-dots { display:flex; gap:6px; flex:none; }
.creator-theme .window-dots i { display:block; width:7px; height:7px; border-radius:50%; background:#e87778; }
.creator-theme .window-dots i:nth-child(2) { background:#e5c77e; }
.creator-theme .window-dots i:nth-child(3) { background:#7cd6b0; }
.creator-theme .workspace-toolbar { display:flex; justify-content:space-between; align-items:center; gap:8px; min-width:0; padding:10px 12px; color:#bdcddb; border-bottom:1px solid #ffffff0b; background:#0c1b29; font:.625rem/1.5 var(--mono); }
.creator-theme .file-tab { display:flex; align-items:center; gap:8px; overflow-wrap:anywhere; }
.creator-theme .file-tab .icon { width:14px; height:14px; color:var(--mint); }
.creator-theme .file-type { color:#99b1c1; }
.creator-theme .editor-view { display:flex; gap:10px; padding:20px 12px; min-width:0; background:#0d1c2a; font:.6875rem/1.85 var(--mono); }
.creator-theme .editor-view pre { min-width:0; max-width:100%; margin:0; padding-bottom:6px; overflow-x:auto; border:0; background:transparent; color:#dbe4ee; font:inherit; white-space:pre; }
.creator-theme .line-numbers { flex:none; font:inherit; color:#8aa0b2; text-align:right; user-select:none; }
.creator-theme .syntax-muted { color:#a4b7c2; }
.creator-theme .syntax-purple { color:#c1abef; }
.creator-theme .syntax-blue { color:#94b9ff; }
.creator-theme .syntax-mint { color:var(--mint); }
.creator-theme .workspace-preview { padding:14px 12px 0; border-top:1px solid #243645; background:#0c1925; }
.creator-theme .preview-heading { display:flex; justify-content:space-between; gap:8px; margin-bottom:10px; color:#a0b5c4; font:.5625rem/1.5 var(--mono); letter-spacing:.02em; }
.creator-theme .chart-svg { display:block; width:100%; height:auto; }
.creator-theme .workspace-status { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:6px 10px; padding:10px 12px; border-top:1px solid #ffffff0c; border-radius:0 0 12px 12px; color:#a9bece; background:#102335; font:.5625rem/1.5 var(--mono); }
.creator-theme .workspace-status>span { display:flex; align-items:center; }
.creator-theme .workspace-status small { font-size:.5625rem; }
.creator-theme .workspace-label { position:absolute; right:8px; bottom:54px; display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid #588c7c; border-radius:10px; background:#173e39; color:#e2f7ef; box-shadow:0 10px 26px #0003; pointer-events:none; }
.creator-theme .workspace-label b { display:block; font-size:.6875rem; }
.creator-theme .workspace-label small { color:#bed5ce; font:.5625rem/1.5 var(--mono); }
.creator-theme .tech-strip { display:flex; align-items:center; flex-wrap:wrap; justify-content:space-between; gap:14px; padding-block:21px 25px; border-top:1px solid #ffffff0e; color:#b2c4d4; font:.625rem/1.6 var(--mono); letter-spacing:.05em; }
.creator-theme .tech-caption { width:100%; color:#afc0d0; font-size:.75rem; line-height:1.5; }
.creator-theme .tech-strip i { font-style:normal; color:#a2b5c4; }
/* Learning paths and article lists */
.creator-theme .roadmap-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:12px; }
.creator-theme .step-card { display:grid; grid-template-columns:54px minmax(0,1fr); align-items:start; gap:10px 16px; min-width:0; padding:20px; border:1px solid var(--line); border-radius:12px; background:#fff; }
.creator-theme .step-card.first-step { border-color:#8ec2b3; background:#f1faf7; }
.creator-theme .step-top { display:flex; flex-direction:column; align-items:flex-start; gap:12px; grid-column:1; grid-row:1/3; }
.creator-theme .step-num { color:#466c64; font:.625rem/1.5 var(--mono); letter-spacing:.05em; }
.creator-theme .step-num b { display:block; font-size:1.625rem; line-height:1.4; font-weight:500; }
.creator-theme .step-icon { display:grid; place-items:center; width:32px; height:32px; color:var(--primary); background:#eaf7f1; border:1px solid #cce2da; border-radius:9px; }
.creator-theme .step-main { min-width:0; }
.creator-theme .step-main small { color:var(--primary); font:.5625rem/1.5 var(--mono); letter-spacing:.03em; }
.creator-theme .step-main h3 { margin:6px 0 8px; font-size:1.0625rem; }
.creator-theme .step-main p { color:var(--muted); font-size:.8125rem; line-height:1.9; }
.creator-theme .step-main p br { display:none; }
.creator-theme .step-foot { display:flex; align-items:center; justify-content:space-between; grid-column:2; gap:8px; margin-top:auto; padding-top:10px; border-top:1px solid var(--line); color:var(--primary); font-size:.6875rem; }
.creator-theme .step-foot .icon { width:15px; height:15px; }
.creator-theme .articles-section { background:#eef4f3; border-block:1px solid #e5ecea; }
.creator-theme .article-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:16px; }
.creator-theme .article-card { min-width:0; overflow:hidden; border:1px solid var(--line); border-radius:12px; background:#fff; }
.creator-theme .article-card-link { display:grid; height:100%; grid-template-columns:88px minmax(0,1fr); }
.creator-theme .article-visual { position:relative; display:flex; flex-direction:column; justify-content:space-between; min-width:0; padding:14px 10px; background:linear-gradient(135deg,#0d2132,#183447); color:#9ddbcd; }
.creator-theme .visual-label { color:#a7cbd0; font:.5625rem/1.5 var(--mono); letter-spacing:.07em; }
.creator-theme .mini-code { overflow:hidden; font:.6875rem/1.5 var(--mono); }
.creator-theme .mini-code i { display:none; }
.creator-theme .article-card-body { display:flex; flex-direction:column; min-width:0; padding:16px; }
.creator-theme .article-meta { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px; margin-bottom:8px; color:var(--muted); font-size:.6875rem; }
.creator-theme .pill { display:inline-flex; padding:2px 6px; border:1px solid #d6e9e2; border-radius:4px; color:#155e50; background:#edf7f4; font-size:.625rem; }
.creator-theme .article-card :is(h2,h3) { margin:2px 0 8px; padding:0; border:0; background:none; color:var(--ink); font-size:.9375rem; font-weight:750; line-height:1.7; }
.creator-theme .article-card p { display:none; color:var(--muted); font-size:.8125rem; line-height:1.9; }
.creator-theme .article-card-foot { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:auto; padding-top:12px; color:var(--primary); font-size:.6875rem; }
.creator-theme #home-articles .article-card:first-child .article-card-link { display:flex; flex-direction:column; }
.creator-theme #home-articles .article-card:first-child .article-visual { height:142px; padding:18px 24px; }
.creator-theme #home-articles .article-card:first-child .mini-code { font-size:1.5rem; }
.creator-theme #home-articles .article-card:first-child .article-card-body { padding:22px; }
.creator-theme #home-articles .article-card:first-child h3 { font-size:1.125rem; }
.creator-theme #home-articles .article-card:first-child p { display:block; }
/* Build / concept / CTA */
.creator-theme .build-section { background:#0e1b2b; color:#f1f5fa; }
.creator-theme .build-section .section-heading p { color:#b5c3d2; }
.creator-theme .build-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:16px; }
.creator-theme .build-card { position:relative; overflow:hidden; padding:27px; border:1px solid #304459; border-radius:14px; background:#132335; }
.creator-theme .build-card.featured { border-color:#466c66; background:#132c31; }
.creator-theme .build-num { color:var(--mint); font:.75rem/1.5 var(--mono); }
.creator-theme .build-card h3 { margin:16px 0; font-size:1.375rem; }
.creator-theme .build-card p { color:#b6c5d4; font-size:.875rem; }
.creator-theme .build-terminal { margin-top:26px; padding-top:20px; border-top:1px solid #ffffff18; color:#a4c9c1; font:.6875rem/1.6 var(--mono); overflow-wrap:anywhere; }
.creator-theme .concept-grid { display:grid; grid-template-columns:minmax(0,1fr); align-items:center; gap:26px; }
.creator-theme .concept-grid h2 { font-size:1.75rem; }
.creator-theme .concept-grid p { margin-bottom:17px; color:var(--muted); font-size:.9375rem; }
.creator-theme .concept-points { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; margin-top:25px; padding-top:24px; border-top:1px solid var(--line); color:var(--primary); font:.6875rem/1.6 var(--mono); }
.creator-theme .concept-points small { display:block; margin-top:6px; color:var(--muted); font:.625rem/1.8 sans-serif; }
.creator-theme .concept-points b { color:#5f8178; font-weight:400; }
.creator-theme .line-section { padding-top:0; }
.creator-theme .line-card { display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; gap:23px; padding:27px; border-radius:16px; background:#0b2527; color:#fff; }
.creator-theme .line-card h2 { margin:6px 0 12px; font-size:1.5625rem; }
.creator-theme .line-card p { color:#b5c9c6; font-size:.875rem; }
.creator-theme .line-card>.button { width:100%; flex:none; font-size:.8125rem; }
/* Article: white reading surface, one column first. */
.creator-theme .article-hero { padding-block:20px 31px; color:#fff; background:radial-gradient(ellipse at 82% 50%,#183a4429,transparent 65%),#0b1422; }
.creator-theme .breadcrumbs { display:flex; align-items:center; flex-wrap:wrap; gap:4px 8px; margin:0 0 20px; padding:0; color:#b5c3d2; font-size:.6875rem; line-height:1.6; }
.creator-theme .breadcrumbs a { display:inline-flex; align-items:center; min-height:44px; min-width:44px; overflow-wrap:anywhere; }
.creator-theme .article-hero-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:0; align-items:center; }
.creator-theme .article-hero-grid>div { min-width:0; }
.creator-theme .article-hero .eyebrow { margin-bottom:12px; font-size:.625rem; letter-spacing:.12em; }
.creator-theme .article-hero h1 { max-width:100%; margin:0 0 16px; font-size:1.6875rem; line-height:1.56; letter-spacing:-.035em; text-wrap:pretty; }
.creator-theme .article-hero .article-intro { max-width:620px; color:#bacad9; font-size:.875rem; line-height:1.9; }
.creator-theme .article-header-meta { display:flex; flex-wrap:wrap; gap:8px 14px; margin-top:17px; color:#b1c1ce; font-size:.6875rem; }
.creator-theme .article-hero-code { display:none; min-width:0; overflow:hidden; border:1px solid #304759; border-radius:12px; background:#0e1e2b; }
.creator-theme .article-hero-code pre { margin:0; padding:28px; border:0; background:transparent; color:#d9e7f1; overflow-x:auto; font:.75rem/2 var(--mono); white-space:pre; }
.creator-theme .article-layout { display:grid; grid-template-columns:minmax(0,1fr); align-items:start; gap:0; padding-block:20px 36px; }
.creator-theme .article-main { min-width:0; padding:20px 16px; border:1px solid var(--line); border-radius:10px; background:#fff; }
.creator-theme .article-summary { margin-bottom:22px; padding:17px; border:1px solid #d4e8df; border-radius:9px; background:#eff8f4; }
.creator-theme .article-summary .eyebrow { margin-bottom:9px; font-size:.625rem; letter-spacing:.12em; }
.creator-theme .article-summary h2 { margin-bottom:8px; font-size:1.0625rem; }
.creator-theme .article-summary p, .creator-theme .article-summary li { color:#42655e; font-size:.875rem; line-height:1.95; }
.creator-theme .article-summary ul { margin:10px 0 0; padding-left:1.25em; }
.creator-theme .article-summary li+li { margin-top:5px; }
.creator-theme .mobile-toc { margin-bottom:28px; padding:0 16px; border:1px solid #cadfd8; border-radius:10px; background:#f7fbf9; }
.creator-theme .mobile-toc summary { display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:52px; padding-block:14px; color:#265c50; font-size:.875rem; font-weight:700; list-style:none; }
.creator-theme .mobile-toc summary::-webkit-details-marker { display:none; }
.creator-theme .mobile-toc summary::after { content:"+"; font:1.25rem/1 var(--mono); flex:none; }
.creator-theme .mobile-toc[open] summary::after { content:"−"; }
.creator-theme .mobile-toc .creator-toc-list { padding-bottom:14px; }
.creator-theme .creator-toc-list { display:grid; gap:2px; }
.creator-theme .creator-toc-list a { display:flex; align-items:center; min-height:44px; padding:9px 6px; border-bottom:1px solid #e5eeeb; border-radius:4px; color:#526772; font-size:.8125rem; line-height:1.75; overflow-wrap:anywhere; }
.creator-theme .creator-toc-list a[data-level=h3] { padding-left:18px; font-size:.75rem; }
.creator-theme .creator-toc-list a[aria-current=location] { color:var(--primary); background:#e7f3ed; font-weight:700; }
.creator-theme .article-body { min-width:0; max-width:100%; color:#334a57; overflow-wrap:anywhere; }
.creator-theme .article-body :is(h2,h3,h4,h5,h6) { position:static; height:auto; max-height:none; background:none; color:var(--ink); border:0; border-radius:0; padding:0; box-shadow:none; text-indent:0; overflow:visible; }
.creator-theme .article-body :is(h2,h3,h4,h5,h6)::before, .creator-theme .article-body :is(h2,h3,h4,h5,h6)::after { content:none; }
.creator-theme .article-body h2 { margin:36px 0 20px; padding-bottom:12px; border-bottom:1px solid #c8e0d8; font-size:1.3125rem; line-height:1.65; }
.creator-theme .article-body h3 { margin:28px 0 16px; font-size:1.125rem; line-height:1.7; }
.creator-theme .article-body :is(h4,h5,h6) { margin:26px 0 14px; font-size:1rem; line-height:1.8; }
.creator-theme .article-body :is(p,li,dt,dd) { color:#334a57; font-size:1rem; line-height:1.95; }
.creator-theme .article-body p { margin-bottom:22px; }
.creator-theme .article-body :is(ul,ol) { margin:20px 0 26px; padding-left:1.5em; }
.creator-theme .article-body li+li { margin-top:8px; }
.creator-theme .article-body :is(ul,ol) :is(ul,ol) { margin-block:10px; }
.creator-theme .article-body a:not(.button):not(.wp-block-button__link):not(.blogcard-wrap):not(.internal-blogcard) { color:#075e54; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.creator-theme .article-body blockquote { margin:24px 0; padding:18px; border:0; border-left:3px solid var(--primary); border-radius:0 7px 7px 0; background:#eef7f4; }
.creator-theme .article-body blockquote::before, .creator-theme .article-body blockquote::after { content:none; }
.creator-theme .article-body blockquote p { margin:0; font-size:.9375rem; }
.creator-theme .article-body :is(h2,h3,h4,h5,h6,[id]) { scroll-margin-top:var(--creator-focus-offset); }
.creator-theme :is(#roadmap,#articles,#build,#concept) { scroll-margin-top:var(--creator-focus-offset); }
.creator-theme .article-body :is(img,video,iframe,embed,object) { max-width:100%; }
.creator-theme .article-body img, .creator-theme .article-body video { height:auto; }
.creator-theme .article-body iframe { width:100%; height:auto; min-height:0; aspect-ratio:16/9; border:0; }
.creator-theme .article-body :is(figure,.alignfull,.alignwide) { max-width:100%; margin-inline:0; }
.creator-theme .article-body figcaption { margin-top:10px; color:var(--muted); font-size:.8125rem; text-align:center; }
.creator-theme .article-body .wp-block-columns { gap:24px; }
.creator-theme .article-body .wp-block-columns:not(.is-not-stacked-on-mobile) { flex-wrap:wrap!important; }
.creator-theme .article-body .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column { flex-basis:100%!important; min-width:0; }
/* Code and tables: horizontal scrolling is confined to the content, never the page. */
.creator-theme .article-body pre { max-width:100%; min-width:0; margin:24px 0; padding:20px 14px; overflow:auto; overscroll-behavior-x:contain; border:1px solid #29414e; border-radius:10px; background:#081822; color:#dce9ee; font:.875rem/1.85 var(--mono); letter-spacing:0; tab-size:2; white-space:pre; word-break:normal; overflow-wrap:normal; -webkit-overflow-scrolling:touch; scrollbar-width:thin; scrollbar-color:#668796 #0b1e29; }
.creator-theme .article-body pre::before, .creator-theme .article-body pre::after { content:none; }
.creator-theme .article-body pre code { display:block; width:max-content; min-width:100%; max-width:none; margin:0; padding:0; border:0; border-radius:0; background:transparent; color:inherit; font:inherit; white-space:inherit; word-break:normal; overflow-wrap:normal; }
.creator-theme .article-body :not(pre)>code { display:inline; padding:.12em .35em; border:1px solid #d6e3e4; border-radius:5px; color:#0b6456; background:#eef5f4; font-family:var(--mono); font-size:.9em; font-weight:600; overflow-wrap:anywhere; }
.creator-theme .article-body pre::selection, .creator-theme .article-body pre *::selection { background:#315b56; color:#fff; }
.creator-theme .creator-code-wrap { position:relative; min-width:0; max-width:100%; margin:24px 0; border:1px solid #29414e; border-radius:10px; background:#081822; box-shadow:0 8px 24px #0818220a; }
.creator-theme .article-body .creator-code-wrap>pre { margin:0; border:0; border-radius:0 0 9px 9px; }
.creator-theme .creator-code-toolbar { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:4px 8px; min-height:50px; padding:3px 4px 3px 14px; border-bottom:1px solid #223945; border-radius:9px 9px 0 0; background:#0d202c; color:#b1c4cf; }
.creator-theme .creator-code-label { display:flex; align-items:center; gap:14px; min-width:0; font:600 .625rem/1.4 var(--mono); letter-spacing:.1em; }
.creator-theme .creator-code-copy { position:static; min-width:66px; min-height:44px; padding:8px 10px; border:1px solid #567482; border-radius:6px; background:#132a36; color:#d2e1e7; font:600 .6875rem/1.5 var(--mono); }
.creator-theme .creator-code-copy:focus-visible { outline:3px solid var(--mint); outline-offset:2px; }
.creator-theme .creator-code-copy.is-copied { color:#081822; background:var(--mint); border-color:var(--mint); }
.creator-theme .creator-code-copy.is-error { color:#fff; background:#774135; border-color:#d29c8e; }
.creator-theme .creator-scroll-hint { margin:0; padding:8px 14px; border-top:1px solid #27434e; border-radius:0 0 9px 9px; color:#bacdd7; font-size:.75rem; line-height:1.6; background:#0d202c; }
.creator-theme .article-body :is(.creator-table-wrap,.wp-block-table,.scrollable-table,.table-wrap) { max-width:100%; margin:26px 0; overflow-x:auto; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; scrollbar-width:thin; scrollbar-color:#668796 #edf3f1; }
.creator-theme .article-body table { width:100%; min-width:0; table-layout:fixed; border:1px solid var(--line); border-collapse:collapse; font-size:.875rem; }
.creator-theme .article-body th { background:#143d35; color:#fff; font-weight:600; text-align:left; }
.creator-theme .article-body :is(th,td) { min-width:7em; padding:11px 12px; border:1px solid var(--line); font-size:.875rem; line-height:1.85; overflow-wrap:anywhere; }
.creator-theme .article-body tr:nth-child(even) td { background:#f5faf8; }
.creator-theme .article-body .creator-table-wrap>table { margin:0; }
.creator-theme .article-body table caption { color:var(--muted); text-align:left; padding-block:8px; }
.creator-theme .article-body .syntaxhighlighter :is(table,td) { min-width:0; }
.creator-theme .article-sidebar { display:none; }
/* Next / related / article CTA */
.creator-theme .next-learning { margin-top:34px; padding-top:26px; border-top:1px solid var(--line); }
.creator-theme .next-learning .eyebrow { font-size:.625rem; }
.creator-theme .next-learning h2 { margin:8px 0 18px; font-size:1.375rem; }
.creator-theme .next-card { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:5px 16px; padding:19px; border:1px solid #cfe5dc; border-radius:12px; background:#f3f9f7; }
.creator-theme .next-card :is(span,h3) { grid-column:1; }
.creator-theme .next-card .icon { grid-column:2; grid-row:1/3; align-self:center; }
.creator-theme .next-card span { color:var(--primary); font:.6875rem/1.6 var(--mono); }
.creator-theme .next-card h3 { font-size:1rem; }
.creator-theme .related-section { margin-top:34px; }
.creator-theme .related-section .section-heading { margin-bottom:18px; }
.creator-theme .related-section .section-heading h2 { font-size:1.375rem; }
.creator-theme .related-section .eyebrow { margin-bottom:8px; font-size:.625rem; }
.creator-theme .related-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:12px; }
.creator-theme .related-card { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:2px 12px; min-width:0; padding:16px; border:1px solid var(--line); border-radius:10px; background:#fff; }
.creator-theme .related-card :is(span,h3) { grid-column:1; }
.creator-theme .related-card span { color:var(--primary); font:.625rem/1.5 var(--mono); }
.creator-theme .related-card h3 { margin-top:4px; font-size:.9375rem; line-height:1.8; }
.creator-theme .related-card>.icon { grid-column:2; grid-row:1/3; align-self:center; }
.creator-theme .article-line-cta { display:flex; flex-direction:column; align-items:flex-start; gap:18px; margin-top:32px; padding:22px; border-radius:12px; background:#122f2d; color:#fff; }
.creator-theme .article-line-cta h2 { margin:6px 0 9px; font-size:1.3125rem; }
.creator-theme .article-line-cta .eyebrow { margin:0; font-size:.625rem; }
.creator-theme .article-line-cta p { color:#b5c9c6; font-size:.875rem; }
.creator-theme .article-line-cta .button { width:100%; font-size:.8125rem; padding:12px; }
/* Footer and optional floating CTA. Hidden when the viewport/keyboard cannot spare the room. */
.creator-theme .site-footer { padding-bottom:calc(24px + env(safe-area-inset-bottom,0px)); color:#b4c4d0; background:#0b1422; }
.creator-theme .site-footer .footer-inner { display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; gap:28px; padding-block:36px 26px; }
.creator-theme .footer-brand p { margin-top:14px; color:#b1c1ce; font-size:.8125rem; }
.creator-theme .footer-nav { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px 20px; width:100%; }
.creator-theme .footer-nav a { display:flex; align-items:center; min-height:44px; min-width:44px; padding-block:8px; color:#bfcdd8; font-size:.8125rem; overflow-wrap:anywhere; }
.creator-theme .footer-bottom { display:flex; flex-direction:column; gap:8px; padding-block:20px; border-top:1px solid #ffffff14; color:#a9bccb; font-size:.6875rem; }
.creator-theme .footer-bottom small { font-size:inherit; }
.creator-theme .creator-floating-cta { display:none; position:fixed; bottom:calc(12px + env(safe-area-inset-bottom,0px)); left:var(--gutter); right:var(--gutter); z-index:80; justify-content:center; align-items:center; gap:12px; min-height:48px; padding:12px 20px; border:1px solid #4a9e8b; border-radius:999px; background:var(--mint); color:#102f2a; box-shadow:0 8px 28px #0b142225; font-size:.9375rem; font-weight:700; }
.creator-theme .creator-floating-cta.is-visible:not(.is-hidden) { display:flex; }
.creator-theme.creator-modal-open .creator-floating-cta, .creator-theme.creator-input-active .creator-floating-cta, .creator-theme.creator-short-viewport .creator-floating-cta { display:none; }
/* Overlays: a scrollable panel, fixed background, safe-area gutters. */
.creator-theme .creator-overlay { position:fixed; inset:0; z-index:100000; display:flex; justify-content:flex-end; background:#020811b8; overscroll-behavior:contain; }
.creator-theme .creator-panel { position:relative; width:min(440px,100%); height:100%; max-height:100vh; max-height:100dvh; overflow-y:auto; overscroll-behavior-y:contain; padding:max(24px,env(safe-area-inset-top,0px)) max(24px,env(safe-area-inset-right,0px)) max(24px,env(safe-area-inset-bottom,0px)); background:#0f2130; color:#eaf4f6; }
.creator-theme .creator-panel-title { min-height:48px; padding-top:8px; padding-right:54px; margin-bottom:24px; color:#a8c9cb; font:.75rem/1.8 var(--mono); letter-spacing:.16em; }
.creator-theme .creator-overlay-close { position:absolute; top:max(16px,env(safe-area-inset-top,0px)); right:max(16px,env(safe-area-inset-right,0px)); }
.creator-theme .creator-panel>a:not(.button) { display:flex; align-items:center; min-height:52px; padding-block:15px; border-bottom:1px solid #ffffff18; font-size:1rem; }
.creator-theme .creator-panel>.button { width:100%; margin-top:28px; }
.creator-theme .creator-search-panel { width:min(520px,100%); }
.creator-theme .creator-search-form { display:flex; flex-direction:column; gap:12px; width:100%; }
.creator-theme .creator-search-form input[type=search] { min-width:0; width:100%; min-height:48px; padding:12px 14px; border:1px solid #6e8794; border-radius:8px; background:#fff; color:#152536; font-size:1rem; line-height:1.5; -webkit-appearance:none; }
.creator-theme .creator-search-form .button { width:100%; flex:none; }
.creator-theme .creator-search-help { color:#c3d3dc; font-size:.875rem; margin-top:18px; }
.creator-theme .creator-nojs-nav { display:grid; gap:8px; padding:20px var(--gutter); background:#122b31; color:#fff; }
.creator-theme .creator-nojs-nav a { display:flex; align-items:center; min-height:44px; text-decoration:underline; }
/* Archives, empty states and native forms */
.creator-theme #main.creator-index { padding-block:40px 56px; min-height:55vh; }
.creator-theme .creator-index h1 { font-size:1.75rem; }
.creator-theme .creator-index-intro { color:var(--muted); font-size:.9375rem; }
.creator-theme .creator-category-nav { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 26px; }
.creator-theme .creator-category-nav a { display:flex; align-items:center; justify-content:center; min-height:44px; padding:9px 13px; border:1px solid #c7d9d2; border-radius:8px; color:var(--primary); background:#fff; font-size:.8125rem; }
.creator-theme .creator-empty { padding:28px 22px; border:1px solid var(--line); border-radius:12px; background:#fff; }
.creator-theme .creator-empty h2 { font-size:1.25rem; margin-bottom:12px; }
.creator-theme .creator-empty p { margin-bottom:22px; color:var(--muted); }
.creator-theme .creator-empty .creator-search-form { margin-bottom:20px; }
.creator-theme .creator-pagination { margin-top:32px; }
.creator-theme .creator-pagination .nav-links, .creator-theme .page-links { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:8px; }
.creator-theme .creator-pagination .page-numbers, .creator-theme .page-links a, .creator-theme .page-links .post-page-numbers { display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; padding:10px 14px; border:1px solid #c7d9d2; border-radius:8px; color:var(--primary); background:#fff; font-size:.875rem; }
.creator-theme .creator-pagination .current, .creator-theme .page-links .current { color:#fff; background:var(--primary); border-color:var(--primary); }
.creator-theme .creator-pagination .dots { background:transparent; border-color:transparent; }
.creator-theme .creator-page-layout { max-width:900px; margin-block:24px 48px; padding:22px 18px; border:1px solid var(--line); border-radius:12px; background:#fff; }
.creator-theme :is(.article-body,.article-main) :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]),textarea,select) { max-width:100%; min-width:0; min-height:44px; padding:10px 12px; border:1px solid #667e74; border-radius:7px; font-size:1rem; color:var(--ink); background:#fff; }
.creator-theme :is(.article-body,.article-main) textarea { width:100%; resize:vertical; }
.creator-theme :is(.article-body,.article-main) :is(input[type=submit],button[type=submit]) { min-height:48px; background:var(--primary); color:#fff; cursor:pointer; }
.creator-theme :is(.article-body,.article-main) label { display:inline-block; padding-block:6px; }
.creator-theme .comment-form label { min-height:44px; }
.creator-theme .comment-form :is(input[type=checkbox],input[type=radio]) { min-width:20px; min-height:20px; accent-color:var(--primary); }
.creator-theme .comment-form-cookies-consent { display:flex; align-items:center; gap:12px; }
.creator-theme .comment-form p { margin-bottom:18px; }
.creator-theme #comments { margin-top:36px; padding-top:24px; border-top:1px solid var(--line); overflow-wrap:anywhere; }
.creator-theme #comments :is(h2,h3) { font-size:1.25rem; }
.creator-theme .desktop-only { display:none; }
.creator-theme .mobile-only { display:initial; }
.creator-theme .hover-card { transition:transform .2s,box-shadow .2s,border-color .2s; }
/* Wider surfaces: progressive enhancement, never desktop-first max-width patches. */
@media (min-width:601px) {
  .creator-theme { --gutter:max(24px,env(safe-area-inset-left,0px),env(safe-area-inset-right,0px)); --creator-header-height:70px; }
  .creator-theme.admin-bar { --creator-sticky-offset:46px; }
  .creator-theme .header-inner { min-height:70px; gap:18px; }
  .creator-theme .brand { gap:11px; }
  .creator-theme .brand-mark { width:39px; height:43px; border-radius:10px; }
  .creator-theme .brand-mark .icon { width:25px; height:25px; }
  .creator-theme .brand-parent { font-size:.5625rem; letter-spacing:.12em; }
  .creator-theme .brand-name { font-size:1.4375rem; letter-spacing:.08em; }
  .creator-theme .header-actions { gap:10px; }
  .creator-theme .section { padding-block:64px; }
  .creator-theme .section-heading { flex-direction:row; align-items:center; gap:24px; margin-bottom:30px; }
  .creator-theme .section-heading h2 { font-size:1.75rem; }
  .creator-theme .hero-inner { padding-block:60px; gap:46px; }
  .creator-theme .hero h1 { font-size:3.25rem; }
  .creator-theme .hero-lead { font-size:1.25rem; }
  .creator-theme .hero-buttons { flex-direction:row; flex-wrap:wrap; }
  .creator-theme .editor-view { padding:23px 18px; gap:18px; font-size:.75rem; }
  .creator-theme .workspace-title { padding-inline:18px; letter-spacing:.11em; }
  .creator-theme .workspace-toolbar { padding-inline:17px; }
  .creator-theme .workspace-preview { padding-inline:18px; }
  .creator-theme .workspace-label { padding:13px 18px; bottom:48px; }
  .creator-theme .workspace-label b { font-size:.75rem; }
  .creator-theme .tech-strip { font-size:.75rem; }
  .creator-theme .roadmap-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
  .creator-theme .step-card { display:flex; flex-direction:column; gap:24px; padding:24px; }
  .creator-theme .step-top { flex-direction:row; justify-content:space-between; align-items:center; width:100%; }
  .creator-theme .step-foot { width:100%; }
  .creator-theme .article-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
  .creator-theme .article-card-link { display:flex; flex-direction:column; }
  .creator-theme .article-visual, .creator-theme #home-articles .article-card:first-child .article-visual { height:155px; flex:none; padding:18px 24px; }
  .creator-theme .mini-code { font-size:1.5rem; }
  .creator-theme .article-card-body { padding:22px; flex:1; }
  .creator-theme .article-card :is(h2,h3) { margin:8px 0 10px; font-size:1.0625rem; }
  .creator-theme .article-card p { display:block; }
  .creator-theme .article-card-foot { padding-top:22px; }
  .creator-theme .concept-grid h2 { font-size:1.9375rem; }
  .creator-theme .concept-points { font-size:.75rem; }
  .creator-theme .line-section { padding-top:0; }
  .creator-theme .line-card { padding:34px; }
  .creator-theme .line-card h2 { font-size:1.875rem; }
  .creator-theme .line-card>.button { width:auto; }
  .creator-theme .article-hero { padding-block:30px 44px; }
  .creator-theme .breadcrumbs { margin-bottom:26px; font-size:.75rem; }
  .creator-theme .article-hero h1 { font-size:2.1875rem; line-height:1.48; text-wrap:balance; }
  .creator-theme .article-hero .eyebrow { font-size:.6875rem; }
  .creator-theme .article-layout { padding-block:32px 56px; }
  .creator-theme .article-main { padding:32px; border-radius:12px; }
  .creator-theme .article-summary { padding:22px 24px; margin-bottom:30px; }
  .creator-theme .article-summary h2 { font-size:1.1875rem; }
  .creator-theme .article-body h2 { font-size:1.5rem; margin-block:42px 20px; padding-bottom:14px; }
  .creator-theme .article-body h3 { font-size:1.1875rem; margin-top:30px; }
  .creator-theme .article-body pre { padding:20px 22px; }
  .creator-theme .related-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .creator-theme .related-card { display:flex; flex-direction:column; align-items:flex-start; padding:18px; }
  .creator-theme .related-card h3 { font-size:.875rem; margin-block:8px 12px; }
  .creator-theme .related-card>.icon { align-self:flex-start; margin-top:auto; }
  .creator-theme .next-learning { margin-top:44px; padding-top:27px; }
  .creator-theme .next-learning h2 { font-size:1.5625rem; }
  .creator-theme .next-card { padding:24px; }
  .creator-theme .next-card h3 { font-size:1.1875rem; }
  .creator-theme .article-line-cta { padding:28px; gap:20px; margin-top:37px; }
  .creator-theme .article-line-cta h2 { font-size:1.5625rem; }
  .creator-theme .article-line-cta .button { width:auto; }
  .creator-theme .footer-nav { grid-template-columns:repeat(2,minmax(0,1fr)); max-width:520px; }
  .creator-theme .footer-bottom { flex-direction:row; justify-content:space-between; }
  .creator-theme .creator-search-form { flex-direction:row; }
  .creator-theme .creator-search-form .button { width:auto; }
  .creator-theme .creator-page-layout { padding:36px; margin-block:40px 64px; }
  .creator-theme .creator-index h1 { font-size:2.1875rem; }
  .creator-theme .desktop-only { display:initial; }
  .creator-theme .mobile-only { display:none; }
}
@media (min-width:783px) { .creator-theme.admin-bar { --creator-sticky-offset:32px; } }
@media (min-width:901px) {
  .creator-theme { --gutter:max(32px,env(safe-area-inset-left,0px),env(safe-area-inset-right,0px)); --creator-header-height:80px; }
  .creator-theme .header-inner { min-height:80px; }
  .creator-theme .section { padding-block:80px; }
  .creator-theme .hero-inner { grid-template-columns:minmax(0,1.04fr) minmax(0,1fr); gap:40px; padding-block:64px 72px; min-height:592px; }
  .creator-theme .hero h1 { font-size:clamp(3rem,4.75vw,4.3125rem); }
  .creator-theme .hero-description { font-size:.875rem; }
  .creator-theme .workspace { margin-bottom:30px; transform:translateY(8px); }
  .creator-theme .tech-strip { flex-wrap:nowrap; gap:24px; }
  .creator-theme .tech-caption { width:auto; flex:none; }
  .creator-theme .roadmap-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .creator-theme .article-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
  .creator-theme .build-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
  .creator-theme .build-card { padding:28px; }
  .creator-theme .build-card h3 { font-size:1.4375rem; }
  .creator-theme .concept-grid { grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:50px; }
  .creator-theme .line-section { padding-top:0; }
  .creator-theme .line-card { flex-direction:row; align-items:center; gap:32px; padding:40px; }
  .creator-theme .line-card>.button { max-width:45%; }
  .creator-theme .article-hero { padding-block:34px 49px; }
  .creator-theme .article-hero-grid { grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); gap:30px; }
  .creator-theme .article-hero-code { display:block; }
  .creator-theme .article-hero-code pre { padding:24px 16px; font-size:.6875rem; }
  .creator-theme .article-layout { grid-template-columns:minmax(0,1fr) 250px; gap:26px; padding-block:40px 64px; }
  .creator-theme .article-main { padding:28px; }
  .creator-theme .mobile-toc { display:none; }
  .creator-theme .article-sidebar { display:flex; flex-direction:column; gap:18px; min-width:0; align-self:start; position:relative; top:auto; max-height:none; overflow:visible; overscroll-behavior:auto; padding:3px; }
  .creator-theme .toc-card { padding:22px; border:1px solid var(--line); border-radius:12px; background:#fff; }
  .creator-theme .toc-card h3 { font-size:1rem; margin-bottom:12px; }
  .creator-theme .article-sidebar .eyebrow { font-size:.625rem; margin-bottom:8px; }
  .creator-theme .creator-toc-list a { font-size:.75rem; }
  .creator-theme .creator-toc-list a[data-level=h3] { font-size:.6875rem; }
  .creator-theme .toc-progress { margin-top:16px; }
  .creator-theme .toc-progress span { color:#586f7a; font:.625rem/1.5 var(--mono); }
  .creator-theme .toc-progress i { display:block; height:3px; margin-top:6px; border-radius:99px; background:#e6eeee; }
  .creator-theme .toc-progress b { display:block; width:0; height:100%; border-radius:inherit; background:var(--primary); }
  .creator-theme .sidebar-guide { padding:22px; border:1px solid #d5e7de; border-radius:12px; background:#edf7f3; }
  .creator-theme .sidebar-guide small { color:var(--primary); font:.625rem/1.5 var(--mono); }
  .creator-theme .sidebar-guide h3 { margin:5px 0 8px; font-size:1.1875rem; }
  .creator-theme .sidebar-guide p { color:#516873; font-size:.8125rem; }
  .creator-theme .sidebar-guide .text-link { margin-top:10px; gap:7px; font-size:.75rem; }
  .creator-theme .sidebar-line { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 10px; padding:23px; border:1px solid #31574d; border-radius:12px; color:#eff7f1; background:#14312c; line-height:1.8; }
  .creator-theme .sidebar-line small, .creator-theme .sidebar-line strong { grid-column:1; }
  .creator-theme .sidebar-line small { color:#acd9c1; font-size:.625rem; }
  .creator-theme .sidebar-line strong { font-size:.875rem; }
  .creator-theme .sidebar-line .icon { grid-column:2; grid-row:1/3; align-self:center; color:var(--mint); }
  .creator-theme .site-footer .footer-inner { flex-direction:row; padding-block:48px 34px; }
  .creator-theme .footer-nav { width:auto; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px 28px; }
  .creator-theme .creator-floating-cta, .creator-theme .creator-floating-cta.is-visible:not(.is-hidden) { display:none; }
  .creator-theme .article-body .wp-block-columns:not(.is-not-stacked-on-mobile) { flex-wrap:nowrap!important; }
  .creator-theme .article-body .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column { flex-basis:0!important; }
}
@media (min-width:1101px) {
  .creator-theme { --gutter:max(48px,env(safe-area-inset-left,0px),env(safe-area-inset-right,0px)); }
  .creator-theme .header-inner { gap:24px; }
  .creator-theme .desktop-nav { display:flex; align-items:center; gap:18px; margin-left:auto; }
  .creator-theme .desktop-nav>a { display:flex; align-items:center; min-height:44px; color:#c5d2e0; font-size:.75rem; white-space:nowrap; }
  .creator-theme .menu-button { display:none; }
  .creator-theme .button.header-line { display:inline-flex; min-height:44px; padding:8px 12px; font-size:.75rem; }
  .creator-theme .roadmap-grid { grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px; }
  .creator-theme .step-card { padding:25px 20px; }
  .creator-theme .step-main h3 { font-size:1rem; }
  .creator-theme .step-main p { font-size:.75rem; }
}
@media (min-width:1201px) {
  .creator-theme .desktop-nav { gap:22px; }
  .creator-theme .hero-inner { gap:70px; padding-block:72px 86px; }
  .creator-theme .build-card { padding:32px; }
  .creator-theme .concept-grid { gap:70px; }
  .creator-theme .line-card { padding:46px 48px; }
  .creator-theme .article-hero-grid { gap:64px; }
  .creator-theme .article-hero h1 { font-size:2.625rem; }
  .creator-theme .article-hero-code pre { padding:28px; font-size:.75rem; }
  .creator-theme .article-layout { grid-template-columns:minmax(0,1fr) 280px; gap:46px; }
  .creator-theme .article-main { padding:38px 40px; }
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .creator-theme .hover-card:hover { transform:translateY(-4px); box-shadow:var(--shadow); border-color:#86b6a6; }
  .creator-theme .button:hover { transform:translateY(-2px); box-shadow:0 5px 18px #00000018; }
  .creator-theme .text-link:hover { text-decoration:underline; text-underline-offset:5px; }
  .creator-theme .icon-button:hover { background:#ffffff12; }
  .creator-theme .desktop-nav>a:hover { color:var(--mint); }
  .creator-theme .creator-code-copy:hover { border-color:var(--mint); background:#183a3c; color:var(--mint); }
}
@media (prefers-reduced-motion:reduce) {
  .creator-theme *, .creator-theme *::before, .creator-theme *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}
@media (forced-colors:active) {
  .creator-theme .button, .creator-theme .creator-code-copy, .creator-theme .icon-button { border:1px solid ButtonText; }
  .creator-theme .creator-toc-list a[aria-current] { outline:1px solid Highlight; }
}
@media print {
  .creator-theme { color:#111; background:#fff; }
  .creator-theme .site-header, .creator-theme .site-footer, .creator-theme .article-sidebar,
  .creator-theme .mobile-toc, .creator-theme .creator-floating-cta, .creator-theme .creator-overlay,
  .creator-theme .creator-code-toolbar, .creator-theme .creator-scroll-hint,
  .creator-theme .article-line-cta, .creator-theme .article-hero-code, .creator-theme .skip-link { display:none!important; }
  .creator-theme .container { width:100%; }
  .creator-theme .article-hero { color:#111; background:#fff; padding-block:16px; }
  .creator-theme .article-hero :is(.article-intro,.eyebrow,.breadcrumbs,.article-header-meta) { color:#333; }
  .creator-theme .article-layout { display:block; padding:0; }
  .creator-theme .article-main { padding:0; border:0; }
  .creator-theme .article-body pre { color:#111; background:#fff; white-space:pre-wrap; overflow-wrap:anywhere; border:1px solid #aaa; box-shadow:none; }
  .creator-theme .article-body pre code { width:auto; min-width:0; white-space:inherit; overflow-wrap:anywhere; }
  .creator-theme .creator-code-wrap { box-shadow:none; }
  .creator-theme .article-body h2, .creator-theme .article-body h3 { break-after:avoid; }
}
.creator-theme .header-inner { flex-wrap:wrap; }
.creator-theme .desktop-nav { flex-wrap:wrap; min-width:0; }

/* No-JS tables reflow; enhanced wrappers retain readable column widths. */
.creator-theme .article-body :is(.creator-table-wrap,.wp-block-table,.scrollable-table,.table-wrap) > table { table-layout:auto; }
.creator-theme .article-body .syntaxhighlighter table { table-layout:auto; }
.creator-theme .creator-404 h1 { font-size:clamp(1.75rem,5vw,2.625rem); margin-bottom:20px; }
.creator-theme .creator-404 .creator-empty { max-width:760px; }

/* v1.0.6 Related-site buttons: footer + mobile menu */
.creator-theme .footer-links-area { width:100%; display:grid; gap:22px; }
.creator-theme .footer-external-actions { display:grid; grid-template-columns:minmax(0,1fr); gap:10px; width:100%; }
.creator-theme .footer-external-button { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px; min-height:66px; padding:12px 14px; border:1px solid #ffffff1f; border-radius:12px; background:#ffffff08; color:#e7f2f4; transition:transform .2s ease,border-color .2s ease,background .2s ease; }
.creator-theme .footer-external-button:hover { transform:translateY(-2px); border-color:#77cdb9; background:#ffffff0d; }
.creator-theme .footer-external-button:focus-visible { outline:3px solid var(--mint); outline-offset:3px; }
.creator-theme .footer-external-icon { display:grid; place-items:center; width:38px; height:38px; border-radius:10px; background:#ffffff0d; color:#82d7c3; }
.creator-theme .footer-external-button>span:nth-child(2) { min-width:0; display:flex; flex-direction:column; gap:1px; }
.creator-theme .footer-external-button small { color:#8fafbd; font:600 .625rem/1.4 var(--mono); letter-spacing:.1em; }
.creator-theme .footer-external-button strong { color:#f4fafb; font-size:.8125rem; line-height:1.45; overflow-wrap:anywhere; }
.creator-theme .footer-external-button>.icon { width:18px; height:18px; color:#79ccb8; }
.creator-theme .footer-youtube .footer-external-icon { color:#ff7f7f; }
.creator-theme .footer-project .footer-external-icon { color:#86d8c5; }

.creator-theme .creator-menu-external { display:grid; gap:10px; margin-top:24px; padding-top:20px; border-top:1px solid #ffffff18; }
.creator-theme .creator-menu-external-button { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px; min-height:64px; padding:11px 12px; border:1px solid #ffffff1f; border-radius:10px; background:#ffffff08; color:#eef7f8; }
.creator-theme .creator-menu-external-button:hover { border-color:#70c9b4; background:#ffffff0e; }
.creator-theme .creator-menu-external-button:focus-visible { outline:3px solid var(--mint); outline-offset:2px; }
.creator-theme .creator-menu-external-icon { display:grid; place-items:center; width:38px; height:38px; border-radius:9px; background:#ffffff0d; color:#7fd1bd; }
.creator-theme .creator-menu-external-button.is-youtube .creator-menu-external-icon { color:#ff8585; }
.creator-theme .creator-menu-external-button>span:nth-child(2) { min-width:0; display:flex; flex-direction:column; gap:2px; }
.creator-theme .creator-menu-external-button small { color:#91abb8; font:600 .625rem/1.4 var(--mono); letter-spacing:.1em; }
.creator-theme .creator-menu-external-button strong { color:#f3f9fa; font-size:.875rem; line-height:1.45; overflow-wrap:anywhere; }
.creator-theme .creator-menu-external-button>.icon { width:17px; height:17px; color:#75cbb7; }
.creator-theme .creator-menu-external + .button.mint { margin-top:16px; }

@media (min-width:720px) {
  .creator-theme .footer-external-actions { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (min-width:1040px) {
  .creator-theme .footer-links-area { width:min(650px,58vw); }
  .creator-theme .footer-nav { max-width:none; }
}
@media (prefers-reduced-motion:reduce) {
  .creator-theme .footer-external-button { transition:none; }
}


/* Footer legal / site policy */
.creator-theme .footer-legal { padding-block:4px 28px; }
.creator-theme .footer-legal-heading { display:flex; align-items:baseline; gap:10px; margin-bottom:12px; }
.creator-theme .footer-legal-kicker { color:#78cdb9; font:600 .625rem/1.4 var(--mono); letter-spacing:.12em; }
.creator-theme .footer-legal-heading h2 { margin:0; color:#eef7f8; font-size:.9375rem; line-height:1.5; }
.creator-theme .footer-legal-grid { display:grid; gap:8px; }
.creator-theme .footer-legal-item { border:1px solid #ffffff17; border-radius:12px; background:#ffffff06; overflow:hidden; }
.creator-theme .footer-legal-item summary { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:48px; padding:11px 14px; color:#dbe9ed; font-size:.8125rem; font-weight:700; cursor:pointer; list-style:none; transition:background .2s ease,color .2s ease; }
.creator-theme .footer-legal-item summary::-webkit-details-marker { display:none; }
.creator-theme .footer-legal-item summary:hover { background:#ffffff08; color:#fff; }
.creator-theme .footer-legal-item summary:focus-visible { outline:3px solid var(--mint); outline-offset:-3px; }
.creator-theme .footer-legal-toggle { flex:0 0 auto; color:#72c9b4; font:500 1.125rem/1 var(--mono); transition:transform .2s ease; }
.creator-theme .footer-legal-item[open] .footer-legal-toggle { transform:rotate(45deg); }
.creator-theme .footer-legal-content { padding:0 14px 14px; border-top:1px solid #ffffff10; }
.creator-theme .footer-legal-content p { margin:12px 0 0; color:#aebfc9; font-size:.75rem; line-height:1.9; letter-spacing:.01em; overflow-wrap:anywhere; }
@media (min-width:768px) {
  .creator-theme .footer-legal { padding-block:2px 32px; }
  .creator-theme .footer-legal-grid { grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; }
  .creator-theme .footer-legal-content p { font-size:.78125rem; }
}
@media (prefers-reduced-motion:reduce) {
  .creator-theme .footer-legal-item summary,
  .creator-theme .footer-legal-toggle { transition:none; }
}


/* v1.0.9 Creator free tools */
.creator-theme .tools-section { background:#f4f8f7; }
.creator-theme .tools-grid { display:grid; grid-template-columns:minmax(0,1fr); gap:16px; }
.creator-theme .tool-card { display:flex; flex-direction:column; min-width:0; min-height:100%; padding:22px; overflow:hidden; border:1px solid #d5e4df; border-radius:16px; background:#fff; color:var(--text); box-shadow:0 8px 28px #102c2710; }
.creator-theme .tool-card-top { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.creator-theme .tool-icon { display:grid; place-items:center; width:46px; height:46px; flex:0 0 auto; border:1px solid #c9e2da; border-radius:13px; background:#ecf7f3; color:#236c5c; }
.creator-theme .tool-icon .icon { width:23px; height:23px; }
.creator-theme .tool-status { display:inline-flex; align-items:center; gap:7px; color:#52736c; font:600 .625rem/1.4 var(--mono); letter-spacing:.1em; }
.creator-theme .tool-status i { width:7px; height:7px; border-radius:50%; background:var(--mint); box-shadow:0 0 0 4px #70d8be1c; }
.creator-theme .tool-card-copy { padding-top:22px; }
.creator-theme .tool-card-copy small { display:block; margin-bottom:8px; color:#638079; font:600 .625rem/1.5 var(--mono); letter-spacing:.11em; }
.creator-theme .tool-card h3 { margin:0 0 12px; color:#102a32; font-size:1.35rem; line-height:1.45; letter-spacing:-.02em; }
.creator-theme .tool-card p { margin:0; color:#61757e; font-size:.875rem; line-height:1.9; }
.creator-theme .tool-preview { display:flex; align-items:center; gap:8px; min-height:58px; margin-top:22px; padding:13px 14px; overflow:hidden; border:1px solid #d9e7e3; border-radius:11px; background:#0f202c; color:#b9c9d1; font:.625rem/1.4 var(--mono); white-space:nowrap; }
.creator-theme .tool-preview b { padding:5px 8px; border:1px solid #31515d; border-radius:7px; color:#d7e8eb; font-weight:500; }
.creator-theme .tool-preview span { color:#74d8c0; }
.creator-theme .tool-preview i { color:#67838d; font-style:normal; }
.creator-theme .converter-preview { justify-content:center; gap:16px; font-size:.75rem; }
.creator-theme .converter-preview span { min-width:72px; padding:7px 10px; border:1px solid #31515d; border-radius:8px; text-align:center; }
.creator-theme .converter-preview i { color:#9ccfc3; font-size:1rem; }
.creator-theme .pine-preview { justify-content:center; gap:9px; }
.creator-theme .pine-preview b { color:#e7f6f2; }

.creator-theme .tool-card-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:auto; padding-top:20px; color:#176c59; font-size:.8125rem; font-weight:700; }
.creator-theme .tool-card-foot .icon { width:18px; height:18px; flex:none; }
.creator-theme .tool-card:focus-visible { outline:3px solid var(--mint); outline-offset:4px; }
.creator-theme .sidebar-tools { padding:20px; border:1px solid #d4e5df; border-radius:12px; background:#f8fbfa; }
.creator-theme .sidebar-tools h3 { margin:0 0 12px; font-size:1rem; }
.creator-theme .sidebar-tools>a { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:44px; padding:9px 0; border-top:1px solid #dfeae6; color:#2a5c53; font-size:.75rem; font-weight:700; }
.creator-theme .sidebar-tools>a>span { display:flex; align-items:center; gap:8px; min-width:0; }
.creator-theme .sidebar-tools>a .icon { width:16px; height:16px; flex:none; }
.creator-theme .sidebar-tools>a>.icon { color:#66958b; }
@media (min-width:720px) {
  .creator-theme .tools-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
  .creator-theme .tool-card { padding:28px; }
  .creator-theme .tool-card h3 { font-size:1.5rem; }
}
@media (min-width:1101px) {
  .creator-theme .tools-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
  .creator-theme .tool-card { padding:26px; }
  .creator-theme .tool-card h3 { font-size:1.4rem; }
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .creator-theme .tool-card:hover .tool-icon { transform:translateY(-2px) rotate(-2deg); }
  .creator-theme .tool-icon { transition:transform .2s ease; }
  .creator-theme .sidebar-tools>a:hover { color:#0d725c; }
}
@media (prefers-reduced-motion:reduce) {
  .creator-theme .tool-icon { transition:none; }
}