/* 2026 rebrand: this file's own palette now aliases straight through to ghil-tokens.css so the site chrome (suitebar, skip link, demo/guide headers, the case-story dialog, wiki) picks up the Editorial-Warm palette and the Instrument Serif / Public Sans / JetBrains Mono typefaces without every selector below needing to be rewritten. ghil-tokens.css MUST be linked before this file in . Korean fallback faces are kept here for the unlinked, noindex KO archive (guides/ko, wiki-ko); the EN faces load via per page, never via @import, which is render-blocking. */ @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700&family=Noto+Serif+KR:wght@600;700;900&display=swap'); :root { --gh-ink: var(--ink, #14110C); --gh-ink-2: var(--ink-2, #33302A); --gh-ink-3: var(--ink-2, #33302A); --gh-paper: var(--paper, #F4F0E6); --gh-paper-2: var(--paper-2, #FAF7EF); --gh-white: var(--card, #FFFDF7); --gh-text: var(--ink-2, #33302A); --gh-muted: var(--muted, #6E6A60); --gh-line: var(--rule, #D8D2C2); --gh-line-dark: rgba(244, 240, 230, .14); --gh-gold: var(--gold-on, #E0B860); --gh-gold-deep: var(--gold, #9A6B14); --gh-teal: var(--teal-on, #5FBFA4); --gh-teal-deep: var(--teal, #0C6B5A); --gh-blue: var(--teal, #0C6B5A); --gh-red: var(--red, #96322C); --gh-shadow: 0 18px 55px rgba(20, 17, 12, .10); --gh-shadow-soft: 0 8px 28px rgba(20, 17, 12, .08); --gh-radius: 12px; --gh-sans: var(--sans, 'Public Sans', 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif); --gh-serif: var(--display, 'Instrument Serif', 'Noto Serif KR', Georgia, serif); --gh-mono: var(--mono, 'JetBrains Mono', Consolas, monospace); } * { box-sizing: border-box; } body[data-ghil-page] { font-family: var(--gh-sans) !important; color: var(--gh-text); background: var(--gh-paper) !important; letter-spacing: -.01em; } body[data-ghil-page] :focus-visible { outline: 3px solid rgba(52, 197, 170, .48) !important; outline-offset: 3px; } .ghil-skip-link { position: fixed; left: 16px; top: -64px; z-index: 9999; padding: 10px 14px; border-radius: 8px; background: var(--gh-gold); color: var(--gh-ink); font: 700 12px/1 var(--gh-sans); transition: top .18s ease; } .ghil-skip-link:focus { top: 12px; } .ghil-suitebar { min-height: 38px; flex: 0 0 38px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 22px; padding: 0 20px; color: rgba(255, 254, 250, .72); background: linear-gradient(90deg, rgba(52,197,170,.08), transparent 35%), var(--gh-ink); border-bottom: 1px solid var(--gh-line-dark); font-family: var(--gh-mono); font-size: 10px; letter-spacing: .12em; position: relative; z-index: 100; } .ghil-suitebar::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 112px; height: 1px; background: linear-gradient(90deg, var(--gh-gold), var(--gh-teal)); } .ghil-suitebar a { text-decoration: none; } .ghil-suitebar__brand { color: var(--gh-white); font-weight: 600; letter-spacing: .2em; white-space: nowrap; } .ghil-suitebar__brand em { color: var(--gh-gold); font-style: normal; } .ghil-suitebar__trail { color: rgba(255,255,255,.4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ghil-suitebar__nav { display: flex; align-items: center; gap: 18px; } .ghil-suitebar__nav a { color: rgba(255,255,255,.58); transition: color .16s ease; white-space: nowrap; } .ghil-suitebar__nav a:hover, .ghil-suitebar__nav a[aria-current='page'] { color: var(--gh-teal); } .ghil-suitebar__nav .ghil-guide-cta { color: var(--gh-ink); background: var(--gh-gold); padding: 5px 9px; border-radius: 4px; font-weight: 600; } .ghil-suitebar__nav .ghil-guide-cta:hover { color: var(--gh-ink); background: #efc46f; } /* ------------------------- Home / editorial landing ------------------------- */ body.ghil-home { --ink: var(--gh-ink); --ink-2: var(--gh-ink-2); --ink-3: var(--gh-ink-3); --paper: #f1eee6; --paper-dim: rgba(241,238,230,.70); --paper-faint: rgba(241,238,230,.45); --gold: var(--gh-gold); --gold-soft: rgba(219,168,76,.14); --teal: var(--gh-teal); --teal-soft: rgba(52,197,170,.13); --line: rgba(241,238,230,.12); --serif: var(--gh-serif); --sans: var(--gh-sans); --mono: var(--gh-mono); background: radial-gradient(circle at 79% 7%, rgba(44,110,158,.20), transparent 31rem), linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px), var(--gh-ink) !important; background-size: auto, 48px 48px, 48px 48px, auto; color: var(--paper) !important; } body.ghil-home nav { padding: 16px max(24px, calc((100vw - 1180px)/2)); background: rgba(8,17,31,.82); box-shadow: 0 10px 36px rgba(0,0,0,.16); } body.ghil-home .wordmark { font-size: 13px; letter-spacing: .24em; } body.ghil-home .nav-links { font-family: var(--gh-mono); font-size: 10px; letter-spacing: .07em; text-transform: uppercase; } body.ghil-home .hero { min-height: 92vh; position: relative; isolation: isolate; } body.ghil-home .hero::before { content: 'DECISION SYSTEM / 01'; position: absolute; right: 40px; top: 46%; transform: rotate(90deg) translateX(50%); transform-origin: right top; color: rgba(241,238,230,.28); font: 500 9px/1 var(--gh-mono); letter-spacing: .22em; } body.ghil-home .hero::after { content: ''; position: absolute; z-index: -1; width: min(42vw, 560px); aspect-ratio: 1; right: -5%; top: 20%; border: 1px solid rgba(52,197,170,.14); border-radius: 50%; box-shadow: inset 0 0 0 46px rgba(52,197,170,.018), inset 0 0 0 47px rgba(52,197,170,.07), inset 0 0 0 126px rgba(44,110,158,.018), inset 0 0 0 127px rgba(44,110,158,.08); } body.ghil-home .eyebrow, body.ghil-home .sec-label { font-weight: 600; } body.ghil-home h1 { max-width: 970px; letter-spacing: -.045em; text-wrap: balance; } body.ghil-home .hero-sub { font-size: 16px; line-height: 1.85; max-width: 710px; } body.ghil-home .btn { border-radius: 5px; font-weight: 600; box-shadow: 0 10px 28px rgba(0,0,0,.14); } body.ghil-home .btn-gold { box-shadow: 0 12px 34px rgba(219,168,76,.18); } body.ghil-home .ticker-wrap { background: rgba(13,25,43,.84); } body.ghil-home .proof-rail { width: min(calc(100% - 80px), 1180px); margin: -34px auto 58px; display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); background: rgba(13,25,43,.76); backdrop-filter: blur(14px); box-shadow: 0 24px 70px rgba(0,0,0,.18); position: relative; z-index: 2; } body.ghil-home .proof-rail > div { display: flex; align-items: baseline; gap: 16px; padding: 22px 26px; border-right: 1px solid var(--line); } body.ghil-home .proof-rail > div:last-child { border-right: 0; } body.ghil-home .proof-rail strong { color: var(--gh-gold); font: 600 24px/1 var(--gh-mono); } body.ghil-home .proof-rail span { color: var(--paper-dim); font: 500 10px/1.45 var(--gh-mono); letter-spacing: .07em; text-transform: uppercase; } body.ghil-home section { position: relative; } body.ghil-home section::before { content: ''; position: absolute; top: 72px; left: 40px; width: 32px; height: 1px; background: var(--gh-gold); } body.ghil-home .module { position: relative; overflow: hidden; border-radius: 14px; background: linear-gradient(135deg, rgba(19,36,58,.92), rgba(13,25,43,.94)); box-shadow: 0 26px 70px rgba(0,0,0,.18); } body.ghil-home .module::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: linear-gradient(var(--gh-gold), var(--gh-teal)); opacity: .8; } body.ghil-home .module-info { padding: 48px; } body.ghil-home .module-num { font-weight: 600; } body.ghil-home .module-info h3 { font-size: 26px; } body.ghil-home .chip { border-radius: 999px; background: rgba(8,17,31,.5); } body.ghil-home .demo-link { border-radius: 8px; } body.ghil-home .demo-link .launch { font-weight: 600; } body.ghil-home .guide-link { color: var(--paper-faint); border-color: var(--line); margin-left: 12px; font-family: var(--gh-mono); text-transform: uppercase; letter-spacing: .08em; } body.ghil-home .guide-link:hover { color: var(--gh-teal); border-color: rgba(52,197,170,.45); background: rgba(52,197,170,.08); } body.ghil-home .record-card { position: relative; min-height: 245px; } body.ghil-home .record-card::after { content: '↗'; position: absolute; right: 26px; top: 25px; color: rgba(219,168,76,.42); font: 18px var(--gh-mono); } /* ------------------------- Interactive simulators -------------------------- */ body[data-ghil-page='demo'] { background: #e8e8e2 !important; } body[data-ghil-page='demo'] > .ghil-app-header { min-height: 68px !important; height: auto !important; padding: 10px 18px !important; background: radial-gradient(circle at 73% -180%, rgba(52,197,170,.30), transparent 38%), linear-gradient(105deg, var(--gh-ink-2), var(--gh-ink)) !important; border-color: var(--gh-line-dark) !important; color: var(--gh-white) !important; box-shadow: 0 10px 32px rgba(8,17,31,.18) !important; } body[data-ghil-page='demo'] > .ghil-app-header > div:first-child > div:first-child { background: rgba(255,255,255,.08) !important; border: 1px solid rgba(255,255,255,.15); color: var(--gh-gold) !important; border-radius: 8px !important; } body[data-ghil-page='demo'] > .ghil-app-header h1 { color: var(--gh-white) !important; font-size: 15px !important; letter-spacing: -.02em; } body[data-ghil-page='demo'] > .ghil-app-header p, body[data-ghil-page='demo'] > .ghil-app-header [id*='kpi'], body[data-ghil-page='demo'] > .ghil-app-header [id*='status'] { color: rgba(255,255,255,.55) !important; } body[data-ghil-page='demo'] > .ghil-app-header button { border-radius: 6px !important; border-color: rgba(255,255,255,.20) !important; box-shadow: none !important; font-family: var(--gh-sans); } body[data-ghil-page='demo'] > .ghil-app-header button.bg-white { background: rgba(255,255,255,.08) !important; color: var(--gh-white) !important; } body[data-ghil-page='demo'] > .ghil-app-header button.bg-slate-900 { background: var(--gh-gold) !important; color: var(--gh-ink) !important; } body[data-ghil-page='demo'] > .ghil-app-header button.bg-emerald-600 { background: var(--gh-teal-deep) !important; } body[data-ghil-page='demo'] > .ghil-app-note { height: auto !important; min-height: 34px; padding: 7px 18px !important; background: #dfe9e5 !important; border-color: #bfd1ca !important; color: #23463f !important; font-family: var(--gh-sans); line-height: 1.45; } body[data-ghil-page='demo'] .ghil-workspace { background: #e8e8e2 !important; } body[data-ghil-page='demo'] .ghil-workspace > aside { background: #f0efe9 !important; border-color: #cfcec6 !important; } body[data-ghil-page='demo'] .ghil-workspace > main { background: #e8e8e2; } body[data-ghil-page='demo'] .card, body[data-ghil-page='demo'] .kpi, body[data-ghil-page='demo'] .leaf { background: var(--gh-white) !important; border-color: #d5d4cc !important; border-radius: 10px !important; box-shadow: 0 1px 0 rgba(255,255,255,.8), 0 6px 18px rgba(8,17,31,.035); } body[data-ghil-page='demo'] .sec-title { color: #536071 !important; font-family: var(--gh-mono); font-weight: 600 !important; letter-spacing: .08em !important; } body[data-ghil-page='demo'] .kpi .val { color: var(--gh-ink) !important; font-family: var(--gh-mono); letter-spacing: -.04em; } body[data-ghil-page='demo'] input, body[data-ghil-page='demo'] select, body[data-ghil-page='demo'] textarea { border-color: #c8c8c0 !important; border-radius: 6px !important; } body[data-ghil-page='demo'] input[type='range'] { accent-color: var(--gh-teal-deep) !important; } body[data-ghil-page='demo'] table { font-variant-numeric: tabular-nums; } body[data-ghil-page='demo'] .tbl th { background: #efeee8 !important; color: #526071 !important; } body[data-ghil-page='demo'] .cs::-webkit-scrollbar-track { background: #e3e2dc; } body[data-ghil-page='demo'] .cs::-webkit-scrollbar-thumb { background: #aaa9a1; } body[data-ghil-page='demo'] #map { filter: saturate(.84) contrast(1.02); } /* ------------------------- Demo use-case stories -------------------------- */ body[data-ghil-page='demo'] .ghil-case-trigger { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; background: rgba(255,255,255,.08) !important; color: var(--gh-white) !important; border: 1px solid rgba(255,255,255,.24) !important; white-space: nowrap; font: 700 12px/1 var(--gh-sans); } body[data-ghil-page='demo'] .ghil-case-trigger:hover { background: rgba(255,255,255,.15) !important; } body.ghil-case-open { overflow: hidden !important; } .ghil-case-layer { position: fixed; inset: 0; z-index: 5000; display: grid; place-items: center; padding: 24px; background: rgba(5,13,25,.76); backdrop-filter: blur(9px); } .ghil-case-layer[hidden] { display: none; } .ghil-case-dialog { width: min(1080px, 100%); max-height: calc(100vh - 48px); overflow: auto; background: linear-gradient(90deg, rgba(8,17,31,.028) 1px, transparent 1px), var(--gh-paper); background-size: 64px 64px; border: 1px solid rgba(255,255,255,.22); border-radius: 16px; box-shadow: 0 34px 90px rgba(0,0,0,.34); color: var(--gh-text); outline: none; } .ghil-case-head { position: relative; padding: 34px 72px 30px 38px; background: radial-gradient(circle at 82% -30%, rgba(52,197,170,.20), transparent 19rem), linear-gradient(120deg, var(--gh-ink-2), var(--gh-ink)); color: var(--gh-white); border-radius: 15px 15px 0 0; } .ghil-case-kicker { display: block; margin-bottom: 12px; color: var(--gh-teal); font: 600 10px/1.4 var(--gh-mono); letter-spacing: .13em; text-transform: uppercase; } .ghil-case-head h2 { max-width: 800px; margin: 0 0 10px; color: var(--gh-white); font: 500 clamp(26px, 3.1vw, 42px)/1.04 var(--gh-serif); letter-spacing: -.04em; } .ghil-case-head p { margin: 0; color: rgba(255,255,255,.62); font: 500 12px/1.5 var(--gh-sans); } .ghil-case-head p strong { color: var(--gh-gold); } .ghil-case-close { position: absolute; top: 22px; right: 24px; width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; background: rgba(255,255,255,.06); color: var(--gh-white); font: 300 27px/1 var(--gh-sans); } .ghil-case-close:hover { background: rgba(255,255,255,.14); } .ghil-case-metrics { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--gh-line); background: rgba(255,254,250,.92); } .ghil-case-metric { padding: 21px 28px; border-right: 1px solid var(--gh-line); } .ghil-case-metric:last-child { border-right: 0; } .ghil-case-metric strong { display: block; color: var(--gh-ink); font: 600 24px/1.05 var(--gh-mono); letter-spacing: -.05em; } .ghil-case-metric span { display: block; margin-top: 6px; color: var(--gh-muted); font: 600 9px/1.4 var(--gh-mono); letter-spacing: .09em; text-transform: uppercase; } .ghil-case-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; padding: 16px 38px 8px; } .ghil-case-chapter { padding: 24px 28px 25px 0; border-bottom: 1px solid var(--gh-line); } .ghil-case-chapter:nth-child(odd) { padding-right: 32px; border-right: 1px solid var(--gh-line); } .ghil-case-chapter:nth-child(even) { padding-left: 32px; } .ghil-case-chapter p { margin: 0 0 9px; color: var(--gh-teal-deep); font: 600 10px/1.3 var(--gh-mono); letter-spacing: .1em; text-transform: uppercase; } .ghil-case-chapter div { color: #344050; font: 450 13px/1.66 var(--gh-sans); } .ghil-case-try { margin: 22px 38px 0; padding: 20px 22px; border-left: 3px solid var(--gh-gold); background: #f3ead7; } .ghil-case-try span { color: var(--gh-gold-deep); font: 650 10px/1.3 var(--gh-mono); letter-spacing: .1em; text-transform: uppercase; } .ghil-case-try p { margin: 7px 0 0; color: var(--gh-ink); font: 550 13px/1.55 var(--gh-sans); } .ghil-case-foot { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 38px 32px; } .ghil-case-foot p { max-width: 730px; margin: 0; color: var(--gh-muted); font: 450 10px/1.55 var(--gh-sans); } .ghil-case-foot__actions { display: flex; flex: 0 0 auto; align-items: center; gap: 10px; } .ghil-case-foot__actions a { padding: 10px 4px; color: var(--gh-teal-deep); border-bottom: 1px solid rgba(15,117,104,.3); font: 700 11px/1 var(--gh-sans); text-decoration: none; white-space: nowrap; } .ghil-case-foot__actions a:hover { color: var(--gh-ink); border-color: var(--gh-gold); } .ghil-case-return { flex: 0 0 auto; padding: 11px 18px; border: 0; border-radius: 6px; background: var(--gh-ink); color: var(--gh-white); font: 700 11px/1 var(--gh-sans); } .ghil-case-return:hover { background: var(--gh-teal-deep); } /* ----------------------------- User guides -------------------------------- */ body[data-ghil-page='guide'] { background: linear-gradient(90deg, rgba(8,17,31,.025) 1px, transparent 1px), var(--gh-paper) !important; background-size: 64px 64px !important; } body[data-ghil-page='guide'] > .ghil-guide-header { top: 0; background: linear-gradient(100deg, var(--gh-ink-2), var(--gh-ink)) !important; border-bottom: 1px solid var(--gh-line-dark); box-shadow: 0 12px 34px rgba(8,17,31,.12) !important; } body[data-ghil-page='guide'] > .ghil-guide-header > div { max-width: 1180px !important; padding-top: 14px !important; padding-bottom: 14px !important; } body[data-ghil-page='guide'] > .ghil-guide-header a:first-child { background: rgba(255,255,255,.08) !important; border: 1px solid rgba(255,255,255,.13); } body[data-ghil-page='guide'] > .ghil-guide-main { max-width: 1040px !important; padding-top: 40px !important; padding-bottom: 64px !important; } body[data-ghil-page='guide'] .card { background: rgba(255,254,250,.96) !important; border-color: var(--gh-line) !important; border-radius: 13px !important; box-shadow: var(--gh-shadow-soft); } body[data-ghil-page='guide'] h2 { color: var(--gh-ink) !important; letter-spacing: -.035em; } body[data-ghil-page='guide'] .sec { color: var(--gh-teal-deep) !important; font-family: var(--gh-mono); } body[data-ghil-page='guide'] .step-n { background: var(--gh-ink) !important; color: var(--gh-gold) !important; } body[data-ghil-page='guide'] .uc { border-left-color: var(--gh-teal-deep) !important; background: #e8f3ef !important; } body[data-ghil-page='guide'] .pit { border-left-color: var(--gh-red) !important; background: #f8ece9 !important; } body[data-ghil-page='guide'] code { background: #e9e8e2 !important; color: var(--gh-ink) !important; } body[data-ghil-page='guide'] .dt th { background: #eeede7 !important; } body[data-ghil-page='guide'] table.dt { display: block; max-width: 100%; overflow-x: auto; } body[data-ghil-page='guide'] footer { color: #76808c !important; border-color: var(--gh-line) !important; } body[data-ghil-page='guide'] .lang { font-family: var(--gh-mono); } /* ---------------------------- Wiki / reference ----------------------------- */ body.ghil-wiki { --side: var(--gh-ink); --side-hover: var(--gh-ink-3); --side-line: rgba(255,255,255,.12); --side-ink: #ece9df; --side-dim: #9da8b6; --cream: var(--gh-paper); --card: var(--gh-white); --ink: var(--gh-text); --muted: var(--gh-muted); --line: var(--gh-line); --gold: var(--gh-gold-deep); --gold-soft: #f4e8cc; --green: var(--gh-teal-deep); --hl: #f3dca5; --serif: var(--gh-serif); --mono: var(--gh-mono); font-family: var(--gh-sans) !important; } body.ghil-wiki #sidebar { width: 310px; background: radial-gradient(circle at -30% 0, rgba(52,197,170,.22), transparent 18rem), var(--gh-ink) !important; border-right: 1px solid rgba(255,255,255,.08); } body.ghil-wiki .brand { padding: 28px 22px 22px; } body.ghil-wiki .logo { font-family: var(--gh-mono); letter-spacing: .18em; font-size: 16px; } body.ghil-wiki .edition-link { border-radius: 5px; font-weight: 600; } body.ghil-wiki .page-link { border-left-width: 2px; } body.ghil-wiki .page-link.active { border-left-color: var(--gh-teal); background: rgba(52,197,170,.10); } body.ghil-wiki #content { margin-left: 310px; max-width: 1210px; padding: 42px 58px 100px; } body.ghil-wiki .topbar { padding-bottom: 18px; border-bottom: 1px solid var(--gh-line); } body.ghil-wiki #searchBox { background: var(--gh-white); border-radius: 7px; box-shadow: 0 5px 16px rgba(8,17,31,.04); } body.ghil-wiki .page-title { font-family: var(--gh-serif); letter-spacing: -.04em; font-size: 38px; } body.ghil-wiki article { border-radius: 14px; padding: 38px 44px 44px; box-shadow: var(--gh-shadow-soft); } body.ghil-wiki article h3 { color: var(--gh-teal-deep); font-family: var(--gh-sans); letter-spacing: -.02em; } body.ghil-wiki .stat { background: #fbfaf6; border-radius: 9px; } body.ghil-wiki .sr-item { box-shadow: 0 5px 16px rgba(8,17,31,.04); } @media (max-width: 980px) { .ghil-suitebar { grid-template-columns: auto 1fr; gap: 14px; padding: 0 14px; } .ghil-suitebar__trail { display: none; } .ghil-suitebar__nav { justify-self: end; gap: 12px; } body[data-ghil-page='demo'] { height: auto !important; min-height: 100vh; overflow: auto !important; } body[data-ghil-page='demo'] > .ghil-app-header { align-items: flex-start !important; flex-wrap: wrap; gap: 10px; } body[data-ghil-page='demo'] > .ghil-app-header > div:last-child { width: 100%; overflow-x: auto; padding-bottom: 2px; } body[data-ghil-page='demo'] .ghil-workspace { display: block !important; overflow: visible !important; } body[data-ghil-page='demo'] .ghil-workspace > aside { width: 100% !important; max-height: none !important; overflow: visible !important; border-right: 0 !important; border-bottom: 1px solid #cfcec6; } body[data-ghil-page='demo'] .ghil-workspace > main { overflow: visible !important; } body[data-ghil-page='demo'] #map { height: 62vh !important; min-height: 420px; } body.ghil-wiki #sidebar { width: 310px; } body.ghil-wiki #content { margin-left: 0; padding: 28px 22px 80px; } } @media (max-width: 680px) { .ghil-suitebar { min-height: 42px; flex-basis: 42px; } .ghil-suitebar__nav a:not(.ghil-guide-cta):nth-child(-n+2) { display: none; } body.ghil-home nav { padding: 12px 16px; } body.ghil-home .nav-links { gap: 12px; } body.ghil-home .hero::before, body.ghil-home .hero::after { display: none; } body.ghil-home .proof-rail { width: calc(100% - 32px); grid-template-columns: 1fr; margin: -20px auto 34px; } body.ghil-home .proof-rail > div { border-right: 0; border-bottom: 1px solid var(--line); padding: 15px 18px; } body.ghil-home .proof-rail > div:last-child { border-bottom: 0; } body.ghil-home section::before { left: 22px; top: 54px; } body.ghil-home .module-info { padding: 34px 28px 30px; } body.ghil-home .module-demos { padding: 18px; } body.ghil-home .demo-link { align-items: flex-start; } body[data-ghil-page='demo'] > .ghil-app-header { padding: 10px 12px !important; } body[data-ghil-page='demo'] > .ghil-app-header h1 { font-size: 13px !important; } body[data-ghil-page='demo'] > .ghil-app-header p { display: none; } body[data-ghil-page='demo'] > .ghil-app-note { align-items: flex-start !important; padding: 8px 12px !important; } body[data-ghil-page='demo'] .ghil-workspace > main { padding: 10px !important; } .ghil-case-layer { align-items: stretch; padding: 0; } .ghil-case-dialog { width: 100%; max-height: 100vh; border: 0; border-radius: 0; } .ghil-case-head { padding: 28px 52px 24px 20px; border-radius: 0; } .ghil-case-head h2 { font-size: 27px; } .ghil-case-close { top: 16px; right: 14px; } .ghil-case-metrics { grid-template-columns: 1fr; } .ghil-case-metric { padding: 15px 20px; border-right: 0; border-bottom: 1px solid var(--gh-line); } .ghil-case-metric:last-child { border-bottom: 0; } .ghil-case-body { grid-template-columns: 1fr; padding: 10px 20px 0; } .ghil-case-chapter, .ghil-case-chapter:nth-child(odd), .ghil-case-chapter:nth-child(even) { padding: 20px 0; border-right: 0; } .ghil-case-try { margin: 18px 20px 0; } .ghil-case-foot { align-items: stretch; flex-direction: column; padding: 22px 20px 30px; } .ghil-case-foot__actions { align-items: stretch; flex-direction: column; } .ghil-case-foot__actions a { text-align: center; } .ghil-case-return { width: 100%; } body[data-ghil-page='demo'] .grid.grid-cols-2, body[data-ghil-page='demo'] .grid.grid-cols-3, body[data-ghil-page='demo'] .grid.grid-cols-4 { grid-template-columns: 1fr !important; } body[data-ghil-page='guide'] > .ghil-guide-header > div { padding-left: 16px !important; padding-right: 16px !important; } body[data-ghil-page='guide'] > .ghil-guide-main { padding: 24px 14px 50px !important; } body[data-ghil-page='guide'] .card { padding: 18px !important; } body[data-ghil-page='guide'] .grid.grid-cols-3 { grid-template-columns: 1fr !important; } body.ghil-wiki article { padding: 26px 20px 32px; } body.ghil-wiki .page-title { font-size: 30px; } } /* Mobile usability pass. Everything here is intentionally scoped below the desktop breakpoint so the approved desktop composition remains unchanged. */ @media (max-width: 767px) { .ghil-suitebar { min-height: 48px; flex-basis: 48px; gap: 8px; padding: 0 10px; font-size: 12px; letter-spacing: .08em; } .ghil-suitebar__nav { gap: 6px; } .ghil-suitebar__nav a { display: inline-flex; min-height: 44px; align-items: center; } .ghil-suitebar__nav .ghil-guide-cta { padding: 7px 9px; } body[data-ghil-page='demo'] .ghil-workspace > main { width: 100%; min-width: 0; } body[data-ghil-page='demo'] .overflow-auto { width: 100%; min-width: 0; max-width: 100%; } body[data-ghil-page='demo'] table { font-size: 12px !important; } body[data-ghil-page='demo'] .kpi .lbl, body[data-ghil-page='demo'] .kpi .sub, body[data-ghil-page='demo'] .sec-title, body[data-ghil-page='demo'] .badge { font-size: 12px !important; } body[data-ghil-page='demo'] [class~='text-[8px]'], body[data-ghil-page='demo'] [class~='text-[9px]'], body[data-ghil-page='demo'] [class~='text-[9.5px]'], body[data-ghil-page='demo'] [class~='text-[10px]'], body[data-ghil-page='demo'] [class~='text-[10.5px]'], body[data-ghil-page='demo'] [class~='text-[11px]'], body[data-ghil-page='demo'] [class~='text-[11.5px]'] { font-size: 12px !important; } body[data-ghil-page='demo'] .text-slate-400 { color: #64748b !important; } body[data-ghil-page='demo'] button { min-height: 44px; } body[data-ghil-page='demo'] input:not([type='range']), body[data-ghil-page='demo'] select, body[data-ghil-page='demo'] textarea { min-height: 44px; font-size: 16px !important; } body[data-ghil-page='demo'] input:not([type='range'])[class], body[data-ghil-page='demo'] select[class], body[data-ghil-page='demo'] textarea[class] { font-size: 16px !important; } body[data-ghil-page='demo'] input[type='range'] { min-height: 44px; height: 44px !important; } body[data-ghil-page='demo'] .ghil-map-toolbar { height: auto !important; min-height: 44px; flex-wrap: wrap; align-items: center; padding-top: 8px !important; padding-bottom: 8px !important; } body[data-ghil-page='demo'] .ghil-map-toolbar #nbtns { min-width: 0; flex: 1 1 auto; flex-wrap: wrap; } body[data-ghil-page='demo'] .ghil-map-toolbar #map-caption { flex: 1 0 100%; margin-left: 0 !important; } body[data-ghil-page='demo'] .cts-driver-row { display: grid !important; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px 10px; padding: 10px 0 !important; border-bottom: 1px solid #e2e8f0; } body[data-ghil-page='demo'] .cts-driver-name, body[data-ghil-page='demo'] .cts-driver-value, body[data-ghil-page='demo'] .cts-driver-share, body[data-ghil-page='demo'] .cts-driver-note { width: auto !important; min-width: 0 !important; } body[data-ghil-page='demo'] .cts-driver-bar, body[data-ghil-page='demo'] .cts-driver-note { grid-column: 1 / -1; } body[data-ghil-page='demo'] .cts-driver-note { color: #64748b !important; font-size: 12px !important; line-height: 1.5; } body[data-ghil-page='demo'] .leaflet-marker-icon > div, body[data-ghil-page='demo'] .leaflet-tooltip { font-size: 12px !important; } body[data-ghil-page='demo'] .leaflet-control-zoom a { width: 44px !important; height: 44px !important; line-height: 44px !important; } .ghil-case-close, .ghil-case-return, .ghil-case-foot__actions a, body[data-ghil-page='demo'] .ghil-case-trigger { min-height: 44px; } .ghil-case-metric span, .ghil-case-kicker, .ghil-case-chapter p, .ghil-case-try span, .ghil-case-foot p { font-size: 12px; } body[data-ghil-page='guide'] [class~='text-[9px]'], body[data-ghil-page='guide'] [class~='text-[9.5px]'], body[data-ghil-page='guide'] [class~='text-[10px]'], body[data-ghil-page='guide'] [class~='text-[10.5px]'], body[data-ghil-page='guide'] [class~='text-[11px]'], body[data-ghil-page='guide'] [class~='text-[11.5px]'] { font-size: 12px !important; } body[data-ghil-page='guide'] .sec, body[data-ghil-page='guide'] th { font-size: 12px !important; } body[data-ghil-page='guide'] .ghil-guide-main .text-slate-400, body[data-ghil-page='guide'] > footer { color: #64748b !important; } body[data-ghil-page='guide'] > footer { font-size: 12px !important; } body[data-ghil-page='guide'] .ghil-guide-header a, body[data-ghil-page='guide'] .ghil-guide-header button { min-height: 44px; } body.ghil-wiki #searchBox { min-height: 44px; font-size: 16px; } body.ghil-wiki .mobile-menu-button, body.ghil-wiki .cat-title, body.ghil-wiki .next-prev a { min-height: 44px; } body.ghil-wiki .next-prev a { display: inline-flex; align-items: center; } body.ghil-wiki .en-sub, body.ghil-wiki .eyebrow, body.ghil-wiki .crumb, body.ghil-wiki .lab-en, body.ghil-wiki .sr-snip { color: #566274; font-size: 12px; } body.ghil-wiki #sidebar .logo-sub, body.ghil-wiki #sidebar .p-head, body.ghil-wiki #sidebar .p-row .en, body.ghil-wiki #sidebar .page-link { color: #b9bdb4; } body.ghil-wiki #sidebar .logo-sub, body.ghil-wiki #sidebar .p-head, body.ghil-wiki #sidebar .p-row .en { font-size: 12px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } @media print { .ghil-suitebar, .ghil-skip-link { display: none !important; } body[data-ghil-page] { background: #fff !important; } body[data-ghil-page='guide'] .card { box-shadow: none; break-inside: avoid; } }