/* ── Reset & Base ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 15px; -webkit-font-smoothing: antialiased; } [hidden] { display: none !important; } /* Light is the default theme. Dark keeps the validated palette. The theme is set with data-theme on (see index.html and js/app.js). */ :root { color-scheme: light; --bg: #F5F3EE; --surface: #FFFFFF; --surface-raised: #EFECE4; --hover: #E8E4DA; --sidebar-bg: #FBFAF7; --border: #E6E1D6; --border-light: #D5CFC1; --accent: #2F6CB5; --accent-hover: #275C9C; --accent-dim: rgba(47,108,181,0.09); --text: #1E2128; --text-muted: #545A67; --text-subtle: #666C79; --success: #22775A; --success-solid: #22775A; --accent-solid: #2F6CB5; --accent-text: #2F6CB5; --accent-solid-hover: #275C9C; --success-dim: rgba(38,128,90,0.12); --warning: #B7791F; --danger: #C0392B; --badge-bg: rgba(30,33,40,0.07); --badge-req-bg: rgba(47,108,181,0.12); --chip-on: #1E4E8A; --swatch-border: rgba(0,0,0,0.08); --code-text: #2A3140; --backdrop: rgba(30,26,18,0.45); --toast-bg: #262A33; --toast-text: #F4F2EC; --shadow-sm: 0 1px 2px rgba(30,25,15,0.05); --shadow-md: 0 8px 28px rgba(30,25,15,0.14); --radius: 8px; --radius-lg: 12px; --transition: 0.15s ease; } :root[data-theme="dark"] { color-scheme: dark; --bg: #0F1117; --surface: #1E2230; --surface-raised: #2A3045; --hover: #313852; --sidebar-bg: #1E2230; --border: #2A3250; --border-light: #3A4468; --accent: #4A90D9; --accent-hover: #5AA0E8; --accent-dim: rgba(74,144,217,0.15); --text: #E8EDF5; --text-muted: #8B99B8; --text-subtle: #8794B2; --success: #3DAD7F; --success-solid: #2A8560; --accent-solid: #3A78BE; --accent-text: #78B0EE; --accent-solid-hover: #326AAA; --success-dim: rgba(61,173,127,0.15); --warning: #E5A244; --danger: #E8706F; --badge-bg: rgba(107,122,153,0.14); --badge-req-bg: rgba(74,144,217,0.2); --chip-on: #fff; --swatch-border: rgba(255,255,255,0.08); --code-text: #C9D4EA; --backdrop: rgba(5,7,12,0.72); --toast-bg: #2A3045; --toast-text: #E8EDF5; --shadow-sm: none; --shadow-md: none; } body { font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; line-height: 1.5; } .skip-link { position: absolute; left: 12px; top: -48px; z-index: 100; background: var(--accent-solid); color: #fff; padding: 8px 14px; border-radius: var(--radius); text-decoration: none; font-size: 13px; } .skip-link:focus { top: 8px; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } #step-heading:focus, #main:focus { outline: none; } /* ── App shell: sidebar workflow + workspace ── */ .app-shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "sidebar header" "sidebar main"; min-height: 100vh; } #sidebar { grid-area: sidebar; position: sticky; top: 0; align-self: start; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; gap: 22px; padding: 22px 14px 20px; background: var(--sidebar-bg); border-right: 1px solid var(--border); } .sb-brand { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 700; letter-spacing: -0.3px; padding: 0 8px; } .sb-project { display: flex; flex-direction: column; gap: 2px; padding: 0 8px; min-width: 0; } .sb-label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase; color: var(--text-subtle); } .sb-project strong { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #topbar { grid-area: header; position: sticky; top: 0; z-index: 20; min-height: 56px; background: var(--bg); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 12px; padding: 8px 24px; } .topbar-brand { font-size: 15px; font-weight: 700; letter-spacing: -0.3px; display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .topbar-brand-icon { width: 24px; height: 24px; background: var(--accent-solid); border-radius: 6px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: #fff; } .topbar-project { display: flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: 13px; min-width: 0; } .topbar-sep { color: var(--text-subtle); } #project-name-display { color: var(--text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46vw; } .topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-shrink: 0; } /* The sidebar carries the SiteForge identity on desktop, so the header stays minimal. */ @media (min-width: 861px) { .topbar-brand, .topbar-project { display: none; } } .theme-toggle { display: inline-flex; padding: 2px; gap: 2px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); } .theme-btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border: 0; border-radius: 999px; background: transparent; color: var(--text-muted); font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; transition: background var(--transition), color var(--transition); } .theme-btn svg { width: 14px; height: 14px; flex-shrink: 0; } .theme-btn:hover { color: var(--text); } .theme-btn[aria-pressed="true"] { background: var(--accent-dim); color: var(--text); font-weight: 600; } /* ── Buttons ── */ .btn-ghost, .btn-secondary, .btn-primary, .btn-cta, .btn-link, .choice, .chip, .seg, .prog-step { font-family: inherit; cursor: pointer; transition: all var(--transition); } .btn-ghost { background: transparent; border: 1px solid var(--border); color: var(--text-muted); padding: 6px 12px; border-radius: var(--radius); font-size: 12px; } .btn-ghost:hover { border-color: var(--border-light); color: var(--text); } .btn-primary { background: var(--accent-solid); color: #fff; border: none; padding: 11px 24px; border-radius: var(--radius); font-size: 14px; font-weight: 600; } .btn-primary:hover { background: var(--accent-solid-hover); } .btn-secondary { background: var(--surface-raised); color: var(--text); border: 1px solid var(--border); padding: 11px 20px; border-radius: var(--radius); font-size: 14px; } .btn-secondary:hover { border-color: var(--border-light); background: var(--hover); } .btn-cta { display: block; width: 100%; background: var(--accent-solid); color: #fff; border: none; padding: 18px 24px; border-radius: var(--radius-lg); font-size: 16px; font-weight: 700; letter-spacing: 0.6px; } .btn-cta:hover { background: var(--accent-solid-hover); } .btn-cta.copied { background: var(--success); } .btn-link { background: none; border: none; color: var(--text-muted); font-size: 13px; text-decoration: underline; padding: 8px 4px; } .btn-link:hover { color: var(--text); } /* ── Workflow (Choose → Describe → Style → AI → Create) ── */ #progress { padding: 0; border: 0; background: none; } #progress-list { list-style: none; display: flex; flex-direction: column; gap: 2px; } .prog-item { min-width: 0; } .prog-step { width: 100%; display: flex; align-items: center; gap: 12px; padding: 9px 10px; background: transparent; border: 0; border-radius: var(--radius); color: var(--text-muted); font-family: inherit; font-size: 14px; text-align: left; } .prog-step:disabled { cursor: default; color: var(--text-muted); } .prog-step:not(:disabled):not(.active):hover { background: var(--hover); color: var(--text); } .prog-num { width: 24px; height: 24px; flex-shrink: 0; border-radius: 7px; border: 1px solid var(--border-light); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: var(--text-subtle); font-variant-numeric: tabular-nums; } .prog-step.done { color: var(--text); } .prog-step.done .prog-num { background: var(--success-dim); border-color: transparent; color: var(--success); } .prog-step.active { background: var(--accent-dim); color: var(--text); font-weight: 600; } .prog-step.active .prog-num { background: var(--accent-solid); border-color: var(--accent-solid); color: #fff; } .prog-step.current { font-weight: 600; background: var(--success-dim); } /* ── Layout ── */ #main { grid-area: main; width: 100%; max-width: 760px; justify-self: center; padding: 36px 20px 80px; } .step-head { margin-bottom: 28px; } .step-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; } .step-eyebrow.ready { color: var(--success); } .step-title { font-size: 30px; font-weight: 700; letter-spacing: -0.6px; line-height: 1.2; margin-bottom: 10px; } .step-sub { font-size: 15px; color: var(--text-muted); line-height: 1.6; max-width: 600px; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; margin-bottom: 20px; box-shadow: var(--shadow-sm); } .section-label { font-size: 11px; font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase; color: var(--text-subtle); margin-bottom: 14px; } /* ── Choice cards ── */ .choice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 8px; } .choice { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 18px; min-height: 76px; } .choice:hover { border-color: var(--border-light); background: var(--surface-raised); } .choice.selected { border-color: var(--accent); background: var(--accent-dim); box-shadow: 0 0 0 1px var(--accent); } .choice-name { font-size: 15px; font-weight: 600; } .choice-desc { font-size: 12.5px; color: var(--text-muted); line-height: 1.45; } .style-choice { padding: 14px; } .swatch { display: block; width: 100%; height: 64px; border-radius: 6px; padding: 10px 12px; margin-bottom: 8px; position: relative; border: 1px solid var(--swatch-border); } .swatch-bar { display: block; height: 6px; width: 70%; border-radius: 3px; margin-bottom: 6px; } .swatch-bar.short { width: 45%; height: 4px; opacity: 0.55; } .swatch-btn { display: block; height: 10px; width: 34px; border-radius: 3px; margin-top: 9px; } /* ── Segmented start choice ── */ .seg-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .seg { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; text-align: left; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; } .seg:hover { border-color: var(--border-light); } .seg.selected { border-color: var(--accent); background: var(--accent-dim); } .seg-name { font-size: 13.5px; font-weight: 600; } .seg-desc { font-size: 12px; color: var(--text-muted); line-height: 1.4; } /* ── Forms ── */ .field { margin-bottom: 18px; } .card .field:last-child { margin-bottom: 0; } .label { display: block; font-size: 13.5px; font-weight: 600; color: var(--text); margin-bottom: 6px; } .hint { font-size: 12.5px; color: var(--text-muted); margin-bottom: 8px; } .badge { display: inline-block; font-size: 10px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; padding: 2px 7px; border-radius: 4px; margin-left: 6px; vertical-align: 1px; background: var(--badge-bg); color: var(--text-muted); } .badge-required { background: var(--badge-req-bg); color: var(--accent-text); } .input { width: 100%; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); padding: 11px 13px; font-family: inherit; font-size: 14px; line-height: 1.5; transition: border-color var(--transition); } textarea.input { resize: vertical; min-height: 70px; } .input::placeholder { color: var(--text-subtle); } .input:focus { outline: none; border-color: var(--accent); } .input.invalid { border-color: var(--danger); } .field-error { color: var(--danger); font-size: 12.5px; margin-top: 6px; } .choice-grid + .field-error, .chip-group + .field-error, details + .field-error { margin-top: 12px; } /* ── Details / disclosure ── */ details summary { cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--text-muted); padding: 10px 0; list-style: none; user-select: none; } details summary::-webkit-details-marker { display: none; } details summary::before { content: '+'; display: inline-block; width: 18px; color: var(--accent); font-weight: 700; } details[open] > summary::before { content: '\2212'; } details summary:hover { color: var(--text); } .more { margin-top: 14px; } .card .more { border-top: 1px solid var(--border); margin-top: 18px; padding-top: 6px; } .more > .field, .more > .chip-group, .more > .hint, .more > .prompt-area { margin-top: 12px; } .help { margin: 22px 0 0; } .help-list { margin: 4px 0 0 34px; color: var(--text-muted); font-size: 13.5px; line-height: 1.8; } /* ── AI platform chips ── */ .chip-group { margin-bottom: 20px; } .chip-group:last-child { margin-bottom: 0; } .chip-group-label { font-size: 12.5px; font-weight: 600; color: var(--text); margin-bottom: 10px; } .chip-group-label span { font-weight: 400; color: var(--text-muted); } .chips { display: flex; flex-wrap: wrap; gap: 8px; } .chip { color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 999px; padding: 8px 15px; font-size: 13.5px; } .chip:hover { border-color: var(--border-light); background: var(--surface-raised); } .chip.selected { border-color: var(--accent); background: var(--accent-dim); color: var(--chip-on); font-weight: 600; } .platform-note { margin-top: 16px; font-size: 13.5px; color: var(--text-muted); min-height: 22px; line-height: 1.55; } /* ── Navigation row ── */ .nav-row { display: flex; justify-content: space-between; align-items: center; margin-top: 28px; gap: 12px; } /* ── Create / result ── */ .summary { margin-bottom: 20px; } .sum-row { display: flex; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--border); align-items: baseline; } .sum-row:first-child { padding-top: 0; } .sum-row:last-child { border-bottom: none; padding-bottom: 0; } .sum-row dt { width: 110px; flex-shrink: 0; font-size: 11px; font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase; color: var(--text-subtle); } .sum-row dd { font-size: 15px; font-weight: 500; overflow-wrap: anywhere; } .fineprint { text-align: center; font-size: 12.5px; color: var(--text-subtle); margin-top: 14px; } .res-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; } .res-chip { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 14px; display: flex; flex-direction: column; min-width: 0; max-width: 100%; } .res-chip span { font-size: 10px; font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase; color: var(--text-subtle); } .res-chip strong { font-size: 14px; font-weight: 600; overflow-wrap: anywhere; } .res-secondary { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; gap: 12px; flex-wrap: wrap; } .prompt-area { font-family: "SFMono-Regular", Consolas, "Courier New", monospace; font-size: 12.5px; line-height: 1.6; min-height: 320px; color: var(--code-text); } .view-prompt { margin-top: 18px; } .next-card { margin-top: 24px; } .next-list { list-style: none; display: flex; flex-direction: column; gap: 12px; } .next-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--text-muted); line-height: 1.55; } .step-badge { width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; background: var(--accent-dim); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; margin-top: 1px; } /* ── Welcome back ── */ .welcome-card { display: flex; flex-direction: column; gap: 4px; } .welcome-name { font-size: 18px; font-weight: 600; overflow-wrap: anywhere; } .welcome-meta { font-size: 13px; color: var(--text-muted); } .welcome-actions { display: flex; gap: 12px; flex-wrap: wrap; } /* ── Modal ── */ .modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 20px; } .modal-backdrop { position: absolute; inset: 0; background: var(--backdrop); } .modal-box { position: relative; max-width: 420px; width: 100%; background: var(--surface); border: 1px solid var(--border-light); border-radius: var(--radius-lg); padding: 26px; box-shadow: var(--shadow-md); } .modal-box h2 { font-size: 18px; margin-bottom: 8px; } .modal-box p { font-size: 14px; color: var(--text-muted); margin-bottom: 22px; } .modal-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; } /* ── Toast ── */ #toast { position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 16px); background: var(--toast-bg); color: var(--toast-text); border: 1px solid var(--border-light); border-radius: var(--radius); padding: 11px 18px; font-size: 13.5px; box-shadow: var(--shadow-md); display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px); opacity: 0; pointer-events: none; transition: all 0.2s ease; z-index: 60; } #toast.show { opacity: 1; transform: translate(-50%, 0); } .toast-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); flex-shrink: 0; } /* ── Responsive ── */ @media (max-width: 640px) { #topbar { padding: 8px 16px; } #main { padding: 26px 16px 72px; } .step-title { font-size: 25px; } .choice-grid { grid-template-columns: 1fr; } .style-choice .swatch { height: 52px; } .seg-row { grid-template-columns: 1fr; } .card { padding: 18px; } .sum-row { flex-direction: column; gap: 2px; } .sum-row dt { width: auto; } .nav-row .btn-primary, .nav-row .btn-secondary { padding: 12px 20px; } .welcome-actions > * { width: 100%; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } } /* ── Choice chips inside forms (voice / action) ── */ .field .chips { margin-top: 2px; } .custom-row { margin-top: 10px; } .not-sure { margin-bottom: 16px; color: var(--text); font-size: 13.5px; } /* ── Result: COPY / PASTE / BUILD ── */ .how-steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; } .how-step { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px; display: flex; flex-direction: column; gap: 6px; min-width: 0; } .how-num { width: 24px; height: 24px; border-radius: 50%; background: var(--accent-dim); color: var(--accent-text); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; } .how-label { font-size: 12px; font-weight: 700; letter-spacing: 1px; color: var(--text); } .how-text { font-size: 13px; color: var(--text-muted); line-height: 1.5; overflow-wrap: anywhere; } .fineprint.left { text-align: left; margin-top: 22px; } @media (max-width: 640px) { /* Compact rows so the Copy button stays near the headline */ .how-steps { grid-template-columns: 1fr; gap: 8px; margin-bottom: 14px; } .how-step { display: grid; grid-template-columns: 24px 1fr; column-gap: 12px; row-gap: 2px; padding: 10px 14px; align-items: start; } .how-num { grid-row: 1 / span 2; margin-top: 1px; } .how-label { font-size: 11px; } .how-text { font-size: 12.5px; line-height: 1.4; } .result-head { margin-bottom: 16px; } .result-head .step-title { font-size: 23px; margin-bottom: 8px; } .result-head .step-sub { font-size: 14px; } .res-chips { gap: 8px; margin-bottom: 14px; } .res-chip { padding: 6px 10px; } } /* ── Visuals (optional image addresses) ── */ .visuals { border-top: 1px solid var(--border); padding-top: 18px; margin-top: 4px; } .visuals-q { font-size: 14px; color: var(--text); margin: 2px 0 12px; } .asset-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; } .asset-row { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; display: flex; flex-direction: column; gap: 8px; } .asset-top { display: flex; gap: 10px; align-items: center; } .asset-select { flex: 1; min-width: 0; padding: 9px 11px; font-size: 13.5px; background: var(--surface); } .asset-remove { flex-shrink: 0; padding: 8px 6px; } .btn-add { background: transparent; color: var(--accent); border: 1px dashed var(--border-light); border-radius: var(--radius); padding: 10px 14px; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: all var(--transition); margin-bottom: 10px; } .btn-add:hover { border-color: var(--accent); background: var(--accent-dim); } .asset-list:empty { display: none; } /* ── Step 4: website builder (primary) and optional creative tools (secondary) ── */ .section-help { font-size: 13.5px; color: var(--text-muted); margin: -4px 0 12px; } .builder-card { border-color: var(--border-light); } .builder-card .section-label { color: var(--text); font-size: 12px; margin-bottom: 8px; } .builder-card .badge { margin-left: 8px; } .more-ai { margin-top: 6px; } .creative-card { margin-top: 26px; padding: 18px 20px; border: 1px dashed var(--border); border-radius: var(--radius-lg); background: transparent; } .creative-card .section-label { margin-bottom: 6px; } .creative-card .section-help { margin-top: 0; } .creative-card .chip-group { margin-bottom: 14px; } .creative-card .chip { padding: 6px 12px; font-size: 13px; } .creative-card .chip-group-label { font-size: 11.5px; letter-spacing: 0.6px; text-transform: uppercase; color: var(--text-subtle); font-weight: 600; margin-bottom: 8px; } .creative-note:empty { display: none; } .creative-note { margin-top: 4px; } /* ── Result: optional creative instructions ── */ .creative-result { margin-top: 22px; padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); } .creative-result .section-label { margin-bottom: 8px; } .creative-result-text { font-size: 13.5px; color: var(--text-muted); line-height: 1.55; margin-bottom: 12px; } .btn-wide { width: 100%; padding: 13px 16px; font-weight: 600; letter-spacing: 0.4px; } .btn-wide.copied { background: var(--success-solid); border-color: var(--success-solid); color: #fff; } .view-creative { margin-top: 10px; } /* ── Creative assets: copy one image at a time, and the replace-your-images note ── */ .creative-assets { margin-bottom: 12px; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .creative-assets-title { font-size: 12px; font-weight: 600; color: var(--text); padding: 10px 12px; background: var(--surface-raised); } .creative-assets-title span { font-weight: 400; color: var(--text-muted); margin-left: 6px; } .creative-asset { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; border-top: 1px solid var(--border); } .creative-asset-text { display: flex; flex-direction: column; min-width: 0; } .creative-asset-text strong { font-size: 13px; font-weight: 600; } .creative-asset-text span { font-size: 12px; color: var(--text-muted); overflow-wrap: anywhere; } .btn-mini { flex-shrink: 0; font-family: inherit; cursor: pointer; transition: all var(--transition); background: var(--surface-raised); color: var(--text); border: 1px solid var(--border-light); border-radius: var(--radius); padding: 6px 14px; font-size: 12.5px; font-weight: 600; } .btn-mini:hover { background: var(--hover); } .btn-mini.copied { background: var(--success-solid); border-color: var(--success-solid); color: #fff; } .thin-tip { font-size: 13px; color: var(--text-muted); line-height: 1.55; margin: 14px 0 0; padding: 10px 12px; border-left: 3px solid var(--accent); background: var(--surface); border-radius: 0 var(--radius) var(--radius) 0; } .thin-help { margin: -6px 0 20px; padding: 12px 14px; border-left: 3px solid var(--accent); background: var(--accent-dim); border-radius: 0 var(--radius) var(--radius) 0; } .thin-help:focus { outline: none; box-shadow: 0 0 0 2px var(--accent); } .thin-help strong { display: block; font-size: 14px; font-weight: 600; margin-bottom: 4px; } .thin-help p { font-size: 13px; color: var(--text-muted); line-height: 1.55; margin: 0; } /* ── Result: how to use it / add images / edit basics ── */ .guide { margin-top: 20px; } .guide-title { font-size: 11px; font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; } .guide .how-steps { margin-bottom: 12px; } .guide .how-steps.four { grid-template-columns: repeat(2, 1fr); } .guide-line { font-size: 13.5px; color: var(--text-muted); line-height: 1.6; margin-bottom: 8px; } .guide code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12.5px; background: var(--bg); padding: 1px 6px; border-radius: 4px; overflow-wrap: anywhere; } .guide-list { list-style: none; counter-reset: g; margin: 0 0 12px; display: grid; gap: 8px; } .guide-list li { counter-increment: g; display: grid; grid-template-columns: 26px 1fr; column-gap: 12px; align-items: start; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px; } .guide-list li::before { content: counter(g); grid-row: 1 / span 2; width: 24px; height: 24px; border-radius: 50%; background: var(--accent-dim); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; } .guide-list strong { font-size: 13.5px; font-weight: 600; } .guide-list span { font-size: 13px; color: var(--text-muted); line-height: 1.45; overflow-wrap: anywhere; } .guide .make-own-map { list-style: none; margin: 0 0 8px; font-size: 13px; } .guide .make-own-map li { padding: 3px 0; overflow-wrap: anywhere; } .guide .make-own-map span { color: var(--text-muted); margin: 0 4px; } .guide .hint { margin-bottom: 0; } .edit-examples { display: grid; gap: 8px; } .edit-example { display: flex; flex-direction: column; gap: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px; font-size: 13px; color: var(--text-muted); overflow-wrap: anywhere; } .edit-tag { font-size: 10.5px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: var(--text); } .creative-plan-note { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; margin: 8px 0 14px; } @media (max-width: 640px) { .guide .how-steps.four { grid-template-columns: 1fr; } } /* ── Small screens: compact workflow bar (same list, laid out as a row) ── */ @media (max-width: 860px) { .app-shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr; grid-template-areas: "header" "sidebar" "main"; } #sidebar { position: static; height: auto; overflow: visible; flex-direction: row; gap: 0; padding: 8px 10px; border-right: 0; border-bottom: 1px solid var(--border); } .sb-brand, .sb-project { display: none; } .no-progress #sidebar { display: none; } #progress { width: 100%; } #progress-list { flex-direction: row; gap: 4px; } .prog-item { flex: 1 1 0; } .prog-step { flex-direction: column; justify-content: center; gap: 4px; padding: 6px 2px; text-align: center; font-size: 11px; line-height: 1.2; } .prog-num { width: 22px; height: 22px; } #topbar { padding: 8px 16px; } } @media (max-width: 560px) { .theme-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .theme-btn { min-width: 38px; min-height: 36px; padding: 0 10px; justify-content: center; } #btn-new-project { min-height: 40px; padding-left: 12px; padding-right: 12px; } .topbar-right { gap: 8px; } #topbar { gap: 8px; } /* The project name drops to its own line so it stays readable. */ #topbar { flex-wrap: wrap; position: static; row-gap: 2px; } .topbar-project { order: 3; flex-basis: 100%; margin-top: -2px; } .topbar-sep { display: none; } #project-name-display { max-width: 100%; } }