/* ===================== Nexoria DocStudio — live studio ===================== */ :root { --bg: #0a0a0b; --panel: #0f0f12; --surface: #141418; --surface-2: #1a1a20; --border: #24242c; --border-hi: #32323c; --text: #ececf1; --text-dim: #a0a0ab; --text-mute: #6b6b76; --accent: #3b82f6; --accent-2: #60a5fa; --green: #10b981; --red: #ef4444; --amber: #f59e0b; --radius: 12px; --radius-sm: 8px; --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif; --mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace; } * { box-sizing: border-box; } html, body { margin: 0; height: 100%; } body { font-family: var(--font); background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; } /* ---------- Topbar ---------- */ .topbar { height: 56px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; border-bottom: 1px solid var(--border); background: var(--panel); position: sticky; top: 0; z-index: 20; } .brand { display: flex; align-items: baseline; gap: 10px; } .brand-mark { font-weight: 700; font-size: 16px; letter-spacing: -0.01em; } .brand-sub { font-size: 12px; color: var(--text-mute); } .topbar-actions { display: flex; align-items: center; gap: 12px; } .token-info { font-family: var(--mono); font-size: 11px; color: var(--text-mute); } /* ---------- Layout ---------- */ .layout { display: grid; grid-template-columns: 360px 1fr; height: calc(100vh - 56px); } .panel { border-right: 1px solid var(--border); background: var(--panel); padding: 20px; overflow-y: auto; } .stage { overflow-y: auto; padding: 40px; background: radial-gradient(1200px 600px at 50% -10%, #15151c 0%, var(--bg) 60%); } /* ---------- Form controls ---------- */ .field-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-mute); margin: 14px 0 6px; font-weight: 600; } .prompt, .text-input, .select { width: 100%; background: var(--surface); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius-sm); padding: 10px 12px; font-family: var(--font); font-size: 14px; outline: none; transition: border-color .15s, box-shadow .15s; } .prompt { resize: vertical; line-height: 1.5; } .text-input:focus, .prompt:focus, .select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(59,130,246,.18); } .select { appearance: none; cursor: pointer; } input.select[type=number] { cursor: text; } .row { display: flex; gap: 12px; } .col { flex: 1; } .opt-group { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); } .opt-title { margin: 0 0 4px; font-size: 13px; font-weight: 700; color: var(--text); } .hint { font-size: 11px; color: var(--text-mute); margin: 8px 0 0; } .seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .seg button { background: var(--surface); border: 1px solid var(--border); color: var(--text-dim); border-radius: var(--radius-sm); padding: 8px; font-size: 13px; cursor: pointer; transition: .15s; } .seg button:hover { border-color: var(--border-hi); } .seg button.active { background: rgba(59,130,246,.15); border-color: var(--accent); color: var(--text); } .theme-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .theme-card { border: 1px solid var(--border); border-radius: 10px; padding: 6px; cursor: pointer; background: var(--surface); transition: transform .15s, border-color .15s, box-shadow .15s; text-align: left; } .theme-card:hover { border-color: var(--border-hi); transform: translateY(-2px); } .theme-card.active { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(59,130,246,.18); } /* Mini rendered slide preview (real layout, not a flat swatch). */ .theme-thumb { aspect-ratio: 16/9; border-radius: 6px; padding: 9px 10px; overflow: hidden; display: flex; flex-direction: column; gap: 5px; position: relative; } .theme-thumb .tt-eyebrow { width: 34%; height: 6px; border-radius: 3px; } .theme-thumb .tt-title { width: 78%; height: 9px; border-radius: 3px; } .theme-thumb .tt-line { width: 88%; height: 5px; border-radius: 3px; opacity: .55; } .theme-thumb .tt-line.short { width: 60%; } .theme-thumb .tt-accent { position: absolute; left: 0; bottom: 0; height: 5px; width: 100%; } .theme-name { font-size: 11px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 6px 4px 2px; } .theme-card.active .theme-name { color: var(--text); } /* ---------- Buttons ---------- */ .btn { border: none; border-radius: var(--radius-sm); padding: 11px 16px; font-size: 14px; font-weight: 600; cursor: pointer; transition: transform .15s ease, background .15s, box-shadow .15s, border-color .15s, color .15s; font-family: var(--font); } .btn-primary { background: var(--accent); color: #fff; flex: 1; box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 6px 18px -6px rgba(59,130,246,.6); } .btn-primary:hover:not(:disabled) { background: #2f6fe0; transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,.1) inset, 0 10px 24px -6px rgba(59,130,246,.7); } .btn-primary:active:not(:disabled) { transform: translateY(0); } .btn-primary:disabled { opacity: .5; cursor: default; box-shadow: none; } .btn-ghost { background: var(--surface); color: var(--text-dim); border: 1px solid var(--border); } .btn-ghost:hover:not(:disabled) { border-color: var(--border-hi); color: var(--text); } .btn-ghost:disabled { opacity: .4; cursor: default; } .panel-actions { display: flex; gap: 8px; margin-top: 22px; } .progress { margin-top: 14px; } .progress-track { height: 5px; background: var(--surface-2); border-radius: 3px; overflow: hidden; } .progress-bar { height: 100%; width: 0; border-radius: 3px; transition: width .4s cubic-bezier(.22,.61,.36,1); background: linear-gradient(90deg, var(--accent), var(--accent-2)); box-shadow: 0 0 12px rgba(59,130,246,.6); position: relative; } .progress-bar::after { content: ""; position: absolute; inset: 0; border-radius: 3px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); background-size: 200% 100%; animation: progShine 1.4s linear infinite; } @keyframes progShine { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .progress-text { display: block; margin-top: 6px; font-size: 12px; color: var(--text-dim); font-variant-numeric: tabular-nums; } .hidden { display: none !important; } /* ---------- Empty state ---------- */ .empty-state { max-width: 460px; margin: 12vh auto 0; text-align: center; color: var(--text-dim); } .empty-icon { font-size: 40px; color: var(--accent); } .empty-state h2 { color: var(--text); font-weight: 700; margin: 16px 0 8px; } .empty-state p { line-height: 1.6; } /* ===================== Deck + slides ===================== */ .deck { max-width: 1000px; margin: 0 auto; display: flex; flex-direction: column; gap: 28px; } .slide-wrap { position: relative; } .slide-num { position: absolute; left: -34px; top: 8px; font-family: var(--mono); font-size: 12px; color: var(--text-mute); } .slide { aspect-ratio: 16 / 9; width: 100%; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); background: var(--slide-bg, #fff); color: var(--slide-fg, #1f2937); box-shadow: 0 8px 40px rgba(0,0,0,.45); position: relative; display: flex; flex-direction: column; padding: 4.2% 5%; container-type: inline-size; } /* Theme variables applied per-deck */ .deck.theme-dark { --slide-bg: #0e0e12; --slide-fg: #ececf1; --slide-dim:#9aa0ad; --slide-card:#17171d; --slide-border:#2a2a34; } .deck.theme-light { --slide-bg: #ffffff; --slide-fg: #1f2937; --slide-dim:#6b7280; --slide-card:#f7f8fa; --slide-border:#e5e7eb; } .slide { --acc: var(--deck-accent, #3b82f6); --primary: var(--deck-primary, #1a1a2e); } /* fluid type relative to slide width */ /* Type scale matched to the PPTX export proportions (≈ pt/960·100 cqw) so the preview shows the SAME amount of text the export does — no preview-only clipping. */ .slide .eyebrow { font-family: var(--mono); font-size: 1.55cqw; letter-spacing: .12em; text-transform: uppercase; color: var(--acc); font-weight: 700; } .slide .eyebrow-pill { display: inline-block; padding: .5cqw 1.3cqw; border-radius: 999px; background: color-mix(in srgb, var(--acc) 18%, transparent); } .slide h1.headline { font-size: 4.6cqw; line-height: 1.08; font-weight: 800; margin: 1.6cqw 0 0; letter-spacing: -0.02em; color: var(--slide-fg); } .slide h2.headline { font-size: 2.9cqw; line-height: 1.14; font-weight: 800; margin: .8cqw 0 0; letter-spacing: -0.02em; color: var(--slide-fg); max-height: 7cqw; overflow: hidden; } .slide .body { font-size: 1.7cqw; line-height: 1.5; color: var(--slide-fg); } .slide .dim { color: var(--slide-dim); } .slide-head { flex: 0 0 auto; } /* `safe center` keeps content centred when it fits but anchors it to the top (never bleeding up over the title) when it's too tall — mirrors the export's top-anchored content region. overflow:hidden clips any remaining bottom bleed. */ .slide-content { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: safe center; min-height: 0; overflow: hidden; margin-top: 2cqw; } /* Skeleton */ .slide.skeleton { background: var(--surface); border-color: var(--border); box-shadow: none; } .skeleton-inner { display: flex; flex-direction: column; gap: 2.4cqw; width: 100%; } .sk-bar { height: 3cqw; border-radius: 6px; background: linear-gradient(90deg,#18181f, #20202a, #18181f); background-size: 200% 100%; animation: shimmer 1.4s infinite; } .sk-bar.w40{width:40%}.sk-bar.w70{width:70%}.sk-bar.w90{width:90%}.sk-bar.w55{width:55%} @keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} } .slide.entering { animation: fadeUp .45s ease both; } @keyframes fadeUp { from{opacity:0; transform: translateY(10px)} to{opacity:1; transform:none} } .sk-label { position:absolute; bottom: 4%; left: 5%; font-size: 2.2cqw; color: var(--text-mute); font-family: var(--mono); } /* ---------- Cover ---------- */ .slide.cover { justify-content: center; } .slide.cover .title { font-size: 5.6cqw; font-weight: 800; line-height: 1.06; letter-spacing: -0.02em; } .slide.cover .sub { font-size: 2.3cqw; color: var(--slide-dim); margin-top: 2.2cqw; max-width: 80%; } .slide.cover .meta { font-family: var(--mono); font-size: 1.4cqw; color: var(--slide-dim); margin-top: 3.4cqw; } .slide.cover .accent-edge { position:absolute; left:0; top:18%; bottom:18%; width:.9cqw; background:var(--acc); border-radius:0 4px 4px 0; } .slide.cover .cover-kicker { margin-bottom: 2cqw; } .slide.cover .cover-kicker .eyebrow-pill { font-size: 1.4cqw; padding: .6cqw 1.4cqw; } /* ---------- Feature list (icon rows → cards for density) ---------- */ /* Rows share the content height equally (flex:1) and clamp text — mirrors the export's evenly-divided feature rows so any number of items always fits. */ .feat-rows { display: flex; flex-direction: column; gap: 1.4cqw; height: 100%; } .feat-row { display: flex; gap: 1.8cqw; align-items: center; flex: 1 1 0; min-height: 0; overflow: hidden; background: var(--slide-card); border: 1px solid var(--slide-border); border-radius: 12px; padding: 1.3cqw 2cqw; } .icon-badge { flex: 0 0 auto; width: 7cqw; height: 7cqw; border-radius: 50%; background: var(--acc); display: flex; align-items: center; justify-content: center; } .icon-badge img { width: 58%; height: 58%; } .feat-row .icon-badge { width: 4.6cqw; height: 4.6cqw; } .feat-row > div:last-child { min-width: 0; overflow: hidden; } .feat-row .ft { font-size: 1.8cqw; font-weight: 700; color: var(--slide-fg); overflow-wrap: break-word; } .feat-row .fx { font-size: 1.35cqw; color: var(--slide-dim); margin-top: .3cqw; line-height: 1.4; } /* ---------- Grid ---------- */ /* Rows divide the content height equally (grid-auto-rows:1fr) and cards fill their cell, with text clamped inside — mirrors the export's fixed-cell cards so all items always fit (no clipped rows, no bleed over the title). */ .grid { display: grid; gap: 1.8cqw; height: 100%; grid-auto-rows: 1fr; } .grid.c2 { grid-template-columns: repeat(2,1fr); } .grid.c3 { grid-template-columns: repeat(3,1fr); } .grid.c4 { grid-template-columns: repeat(4,1fr); } .gcard { background: var(--slide-card); border: 1px solid var(--slide-border); border-radius: 10px; padding: 1.6cqw; display: flex; flex-direction: column; gap: .7cqw; min-height: 0; overflow: hidden; justify-content: flex-start; } .gcard .icon-badge { width: 3.4cqw; height: 3.4cqw; flex: 0 0 auto; margin-bottom: .2cqw; } .gcard .gt { font-size: 1.6cqw; font-weight: 700; line-height: 1.18; flex: 0 0 auto; overflow-wrap: break-word; } /* flex:0 0 auto so the text claims its lines (never shrunk to 1 line by the short cell); the card's overflow:hidden then clips the surplus at the bottom — showing the maximum text that fits, like the export's shrink-to-fit box. */ .gcard .gx { font-size: 1.2cqw; color: var(--slide-dim); line-height: 1.42; flex: 0 0 auto; overflow: hidden; } /* ---------- Stat row (cards for weight/density) ---------- */ .stats { display: flex; gap: 2.4cqw; align-items: stretch; justify-content: center; height: 100%; } .stat { text-align: center; flex: 1; display: flex; flex-direction: column; justify-content: center; background: var(--slide-card); border: 1px solid var(--slide-border); border-top: 3px solid var(--acc); border-radius: 14px; padding: 2.4cqw 1.6cqw; } .stat .icon-badge { width: 5.4cqw; height: 5.4cqw; margin: 0 auto 1.4cqw; } .stat .val { font-size: 5.6cqw; font-weight: 800; color: var(--acc); line-height: 1; letter-spacing: -0.02em; } .stat .lbl { font-size: 1.5cqw; color: var(--slide-dim); margin-top: 1.2cqw; line-height: 1.4; } /* ---------- Single big KPI (1 stat / variant=single_kpi) ---------- */ .kpi-single { display: flex; gap: 3cqw; height: 100%; align-items: stretch; } .kpi-single .kpi-text { flex: 1; display: flex; flex-direction: column; justify-content: center; min-width: 0; } .kpi-single .kpi-val { font-size: 16cqw; font-weight: 800; color: var(--acc); line-height: .95; letter-spacing: -0.03em; } .kpi-single .kpi-lbl { font-size: 3.2cqw; font-weight: 700; color: var(--slide-fg); margin-top: 2cqw; line-height: 1.25; max-width: 90%; } .kpi-single .kpi-deco { flex: 0 0 40%; border-radius: 14px; } /* ---------- Comparison ---------- */ .cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4cqw; height: 100%; align-content: stretch; } .cmp.uvt.pos-left { grid-template-columns: 1.4fr 1fr; } .cmp.uvt.pos-right { grid-template-columns: 1fr 1.4fr; } .cmp-col { background: var(--slide-card); border: 1px solid var(--slide-border); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; } /* positive ("Wir"/Nexoria) column carries visual weight: accent-tinted + accent edge */ .cmp-col.positive { background: color-mix(in srgb, var(--acc) 14%, var(--slide-card)); border-color: var(--acc); } .cmp-head { padding: 1.5cqw 2cqw; font-size: 1.9cqw; font-weight: 700; color: #fff; } .cmp-head.positive { background: var(--green); } .cmp-head.negative { background: var(--red); } .cmp-head.neutral { background: var(--primary); } .cmp-items { padding: 2cqw; display: flex; flex-direction: column; gap: 1.2cqw; justify-content: safe center; flex: 1; overflow: hidden; } .cmp-item { display: flex; gap: 1.2cqw; font-size: 1.5cqw; line-height: 1.4; } .cmp-item .mk { font-weight: 800; flex: 0 0 auto; } .cmp-item.positive .mk { color: var(--green); } .cmp-item.negative .mk { color: var(--red); } .cmp-item.neutral .mk { color: var(--acc); } /* ---------- Timeline (connected filled step cards) ---------- */ .timeline { display: flex; gap: 2cqw; height: 100%; align-items: stretch; } .tstep { flex: 1; text-align: center; position: relative; overflow: hidden; background: var(--slide-card); border: 1px solid var(--slide-border); border-radius: 12px; padding: 2.4cqw 1.6cqw; display: flex; flex-direction: column; align-items: center; } .tstep-badge { width: 5.4cqw; height: 5.4cqw; border-radius: 50%; background: var(--acc); color: #fff; font-weight: 800; font-size: 2.6cqw; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.4cqw; } .tstep .tt { font-size: 1.9cqw; font-weight: 700; line-height: 1.18; color: var(--slide-fg); } .tstep .tx { font-size: 1.4cqw; color: var(--slide-dim); margin-top: .8cqw; line-height: 1.42; } /* connector behind the cards, visible in the gaps */ .tline { position: absolute; top: 5cqw; left: 50%; width: calc(100% + 2cqw); height: 2px; background: var(--acc); z-index: 0; } .tstep > * { position: relative; z-index: 1; } /* ---------- Concept graphics (napkin-style, vector) ---------- */ .cg-flow { display: flex; align-items: center; gap: 1cqw; height: 100%; justify-content: center; } .cg-step { flex: 1 1 0; min-width: 0; align-self: stretch; max-height: 70%; margin: auto 0; background: var(--slide-card); border: 1px solid var(--acc); border-radius: 12px; padding: 2cqw 1.6cqw; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: .8cqw; } .cg-step .cg-num { width: 4.6cqw; height: 4.6cqw; border-radius: 50%; background: var(--acc); color: #fff; font-weight: 800; font-size: 2.2cqw; display: flex; align-items: center; justify-content: center; } .cg-step .cg-sl { font-size: 2.3cqw; font-weight: 700; color: var(--slide-fg); } .cg-step .cg-st { font-size: 1.6cqw; color: var(--slide-dim); line-height: 1.35; } .cg-arrow { flex: 0 0 auto; color: var(--acc); font-size: 4cqw; font-weight: 800; } .cg-pyramid { display: flex; flex-direction: column; align-items: center; gap: 1cqw; height: 100%; justify-content: center; } .cg-band { display: flex; align-items: center; justify-content: center; text-align: center; flex: 1 1 0; min-height: 0; border: 1px solid var(--acc); border-radius: 10px; color: #fff; font-weight: 700; font-size: 2.4cqw; padding: 1cqw 2cqw; } .cg-cycle { position: relative; height: 100%; } .cg-cycle .cg-ring { position: absolute; left: 14%; top: 6%; width: 72%; height: 88%; border-radius: 50%; border: 2px solid var(--acc); } .cg-node { position: absolute; transform: translate(-50%,-50%); width: 26%; min-height: 14%; background: var(--slide-card); border: 1px solid var(--acc); border-radius: 10px; padding: 1.2cqw; text-align: center; display: flex; flex-direction: column; justify-content: center; } .cg-node .cg-nl { font-size: 2cqw; font-weight: 700; color: var(--slide-fg); } .cg-node .cg-nt { font-size: 1.4cqw; color: var(--slide-dim); margin-top: .4cqw; } .cg-matrix { display: grid; grid-template-columns: 4cqw 1fr; grid-template-rows: 1fr 3.6cqw; height: 100%; gap: .6cqw; } .cg-matrix .cg-grid { grid-column: 2; grid-row: 1; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 1cqw; } .cg-matrix .cg-cell { background: var(--slide-card); border: 1px solid var(--slide-border); border-radius: 10px; padding: 1.6cqw 2cqw; display: flex; flex-direction: column; gap: .8cqw; overflow: hidden; } .cg-matrix .cg-cell.q1 { background: color-mix(in srgb, var(--acc) 14%, var(--slide-card)); border-color: var(--acc); } .cg-matrix .cg-qitem { font-size: 1.9cqw; color: var(--slide-fg); position: relative; padding-left: 2cqw; } .cg-matrix .cg-qitem::before { content: "•"; position: absolute; left: 0; color: var(--acc); font-weight: 800; } .cg-matrix .cg-yax { grid-column: 1; grid-row: 1; writing-mode: vertical-rl; transform: rotate(180deg); font-size: 1.5cqw; color: var(--slide-dim); display: flex; align-items: center; justify-content: center; } .cg-matrix .cg-xax { grid-column: 2; grid-row: 2; font-size: 1.5cqw; color: var(--slide-dim); text-align: center; } /* concept_graphic — funnel (narrowing bands, reuses .cg-band) */ .cg-funnel { display: flex; flex-direction: column; align-items: center; gap: 1cqw; height: 100%; justify-content: center; } /* pillars — equal columns with accent cap */ .cg-pillars { display: flex; gap: 2cqw; height: 100%; align-items: stretch; justify-content: center; } .cg-pillar { flex: 1 1 0; min-width: 0; background: var(--slide-card); border: 1px solid var(--slide-border); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; } .cg-pillar .cg-cap { background: var(--acc); color: #fff; font-weight: 700; font-size: 1.7cqw; text-align: center; padding: 1.2cqw 1cqw; } .cg-pillar .cg-pbody { font-size: 1.35cqw; color: var(--slide-dim); line-height: 1.4; padding: 1.6cqw; text-align: center; } /* roadmap — milestones along a horizontal line, alternating above/below */ .cg-road { position: relative; height: 100%; display: flex; align-items: center; justify-content: space-around; } .cg-road .cg-roadline { position: absolute; left: 4%; right: 4%; top: 50%; height: .35cqw; background: var(--acc); border-radius: 4px; } .cg-mile { position: relative; flex: 1 1 0; display: flex; flex-direction: column; align-items: center; } .cg-mile .cg-mdot { width: 4cqw; height: 4cqw; border-radius: 50%; background: var(--acc); color: #fff; font-weight: 800; font-size: 1.9cqw; display: flex; align-items: center; justify-content: center; z-index: 1; border: .3cqw solid var(--slide-bg); } .cg-mile .cg-mlabel { position: absolute; width: 90%; text-align: center; } .cg-mile.above .cg-mlabel { bottom: calc(50% + 3cqw); } .cg-mile.below .cg-mlabel { top: calc(50% + 3cqw); } .cg-mile .cg-ml { font-size: 1.6cqw; font-weight: 700; color: var(--slide-fg); } .cg-mile .cg-mt { font-size: 1.25cqw; color: var(--slide-dim); line-height: 1.35; margin-top: .3cqw; } /* hub_spoke — central hub with spokes on a ring */ .cg-hub { position: relative; height: 100%; } .cg-hub .cg-hubc { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 2; width: 18%; aspect-ratio: 1; border-radius: 50%; background: var(--acc); color: #fff; font-weight: 700; font-size: 1.6cqw; display: flex; align-items: center; justify-content: center; text-align: center; padding: 1cqw; } .cg-hub .cg-spoke { position: absolute; transform: translate(-50%,-50%); width: 24%; min-height: 12%; background: var(--slide-card); border: 1px solid var(--acc); border-radius: 10px; padding: 1cqw 1.2cqw; text-align: center; } .cg-hub .cg-spoke .cg-nl { font-size: 1.5cqw; font-weight: 700; color: var(--slide-fg); } .cg-hub .cg-spoke .cg-nt { font-size: 1.2cqw; color: var(--slide-dim); margin-top: .3cqw; line-height: 1.3; } /* ===== concept_graphic — modern depth (gradients, soft shadow, glow) ===== */ /* surface cards get a subtle top-light gradient + drop shadow for depth */ .cg-step, .cg-node, .cg-hub .cg-spoke, .cg-pillar, .cg-matrix .cg-cell { background: linear-gradient(180deg, color-mix(in srgb, var(--slide-fg) 9%, var(--slide-card)), var(--slide-card)); box-shadow: 0 1.6cqw 3.4cqw -1.8cqw rgba(0,0,0,.5); } /* accent elements get an accent gradient + glow */ .cg-step .cg-num, .cg-road .cg-mdot, .cg-hub .cg-hubc, .cg-pillar .cg-cap { background: linear-gradient(160deg, color-mix(in srgb, var(--acc) 72%, #fff), color-mix(in srgb, var(--acc) 76%, #000)) !important; box-shadow: 0 0 1.4cqw color-mix(in srgb, var(--acc) 42%, transparent), 0 .5cqw 1.2cqw -.4cqw rgba(0,0,0,.4); } /* pyramid / funnel bands: depth shadow (gradient stays inline per-band) */ .cg-pyramid .cg-band, .cg-funnel .cg-band { box-shadow: 0 1cqw 2.2cqw -1.2cqw rgba(0,0,0,.6); border: 1px solid color-mix(in srgb, var(--acc) 40%, transparent); } /* roadmap line + cycle ring as gradient/glow accents */ .cg-road .cg-roadline { background: linear-gradient(90deg, color-mix(in srgb, var(--acc) 60%, transparent), var(--acc)) !important; box-shadow: 0 0 1.4cqw color-mix(in srgb, var(--acc) 45%, transparent); } .cg-cycle .cg-ring { box-shadow: 0 0 2.4cqw color-mix(in srgb, var(--acc) 30%, transparent); } .cg-pillar { overflow: hidden; } .cg-matrix .cg-cell.q1 { box-shadow: 0 0 2cqw color-mix(in srgb, var(--acc) 35%, transparent), 0 1.2cqw 2.6cqw -1.4cqw rgba(0,0,0,.65); } /* venn — overlapping translucent circles (screen blend brightens the overlap) */ .cg-venn { position: relative; height: 100%; } .cg-venn .cg-vc { position: absolute; transform: translate(-50%,-50%); width: 32cqw; height: 32cqw; border-radius: 50%; border: .2cqw solid; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 1.8cqw; font-weight: 700; color: #fff; mix-blend-mode: screen; padding: 2cqw; } .cg-venn .cg-vcenter { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 2; font-size: 1.4cqw; font-weight: 700; color: var(--slide-fg); text-align: center; } /* tree — levels stacked, root accent */ .cg-tree { display: flex; flex-direction: column; justify-content: space-around; height: 100%; gap: 2cqw; } .cg-trow { display: flex; justify-content: center; gap: 2.4cqw; } .cg-tnode { background: linear-gradient(180deg, color-mix(in srgb, var(--slide-fg) 9%, var(--slide-card)), var(--slide-card)); border: 1px solid var(--acc); border-radius: 10px; padding: 1.2cqw 2cqw; font-size: 1.5cqw; font-weight: 700; color: var(--slide-fg); box-shadow: 0 1.4cqw 3cqw -1.8cqw rgba(0,0,0,.5); } .cg-tnode.root { background: linear-gradient(160deg, color-mix(in srgb, var(--acc) 72%, #fff), color-mix(in srgb, var(--acc) 76%, #000)); color: #fff; border: none; box-shadow: 0 0 1.6cqw color-mix(in srgb, var(--acc) 45%, transparent); } /* bar_compare — horizontal value bars */ .cg-bars { display: flex; flex-direction: column; justify-content: center; gap: 1.6cqw; height: 100%; } .cg-brow { display: flex; align-items: center; gap: 1.6cqw; } .cg-brow .cg-blabel { flex: 0 0 24%; font-size: 1.5cqw; font-weight: 700; color: var(--slide-fg); text-align: right; } .cg-brow .cg-btrack { flex: 1; height: 3.4cqw; border-radius: 8px; background: var(--slide-card); border: 1px solid var(--slide-border); overflow: hidden; } .cg-brow .cg-bfill { height: 100%; border-radius: 8px; display: flex; align-items: center; justify-content: flex-end; padding: 0 1.2cqw; min-width: 6%; color: #fff; font-size: 1.4cqw; font-weight: 700; background: linear-gradient(90deg, color-mix(in srgb, var(--acc) 60%, #000), var(--acc)); box-shadow: 0 0 1.2cqw color-mix(in srgb, var(--acc) 40%, transparent); } /* ---------- Bullets ---------- */ .bullets { display: flex; flex-direction: column; gap: 1.4cqw; justify-content: safe center; height: 100%; } .bullets li { display: flex; gap: 1.4cqw; font-size: 1.9cqw; line-height: 1.45; list-style: none; } .bullets li::before { content: ""; flex: 0 0 auto; width: 1.1cqw; height: 1.1cqw; border-radius: 50%; background: var(--acc); margin-top: .7cqw; } .bullets { padding: 0; margin: 0; } /* ---------- Pricing (filled row blocks, light text — replaces zebra table) ---------- */ .pricing { display: flex; flex-direction: column; gap: 1cqw; height: 100%; } .pr-head { display: flex; gap: 1.2cqw; background: var(--acc); color: #fff; font-weight: 700; border-radius: 10px; padding: 1.2cqw 2cqw; font-size: 1.7cqw; flex: 0 0 auto; } .pr-head span:first-child { flex: 0 0 40%; } .pr-head span:last-child { flex: 1; } .pr-row { display: flex; gap: 1.2cqw; flex: 1 1 0; min-height: 0; overflow: hidden; background: var(--slide-card); border: 1px solid var(--slide-border); border-radius: 10px; align-items: stretch; } .pr-row .pr-l { flex: 0 0 40%; display: flex; align-items: center; padding: 1.4cqw 2cqw; font-weight: 700; font-size: 1.8cqw; color: var(--slide-fg); background: color-mix(in srgb, var(--acc) 16%, transparent); border-radius: 10px 0 0 10px; } .pr-row .pr-v { flex: 1; display: flex; align-items: center; padding: 1.4cqw 2cqw; font-size: 1.8cqw; color: var(--slide-fg); } /* ---------- Table (fallback, >2 columns) ---------- */ .tbl { width: 100%; border-collapse: collapse; font-size: 1.5cqw; } .tbl th { background: var(--primary); color: #fff; text-align: left; padding: 1.1cqw 1.2cqw; font-weight: 700; } .tbl td { padding: 1cqw 1.2cqw; border-bottom: 1px solid var(--slide-border); } .tbl tr:nth-child(even) td { background: var(--slide-card); } .tbl td.num, .tbl th.num { text-align: right; font-variant-numeric: tabular-nums; } /* ---------- Statement (full-bleed) ---------- */ .slide.statement { background: var(--primary); color: #fff; align-items: center; justify-content: center; text-align: center; padding: 0; } .slide.statement .stmt-body { position: relative; z-index: 2; padding: 6% 8%; } .slide.statement .quote { font-size: 4.4cqw; font-weight: 800; line-height: 1.2; max-width: 86%; margin: 0 auto; letter-spacing: -0.01em; } .slide.statement .attr { font-family: var(--mono); font-size: 1.6cqw; color: rgba(255,255,255,.6); margin-top: 2.6cqw; } /* ---------- Statement SPLIT (clean: text panel + contained image, no text-over-photo) ---------- */ .slide.statement-split { flex-direction: row; padding: 0; overflow: hidden; } .statement-split .stmt-panel { flex: 1; min-width: 0; background: var(--primary); color: #fff; padding: 6% 6.5%; display: flex; flex-direction: column; justify-content: center; position: relative; } .statement-split .stmt-qmark { font-size: 14cqw; line-height: .7; font-weight: 800; color: var(--acc); opacity: .9; height: 6cqw; } .statement-split .quote { font-size: 4.6cqw; font-weight: 800; line-height: 1.18; letter-spacing: -0.01em; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; } .statement-split .attr { font-family: var(--mono); font-size: 2.2cqw; color: rgba(255,255,255,.6); margin-top: 3cqw; } .statement-split .stmt-side { flex: 0 0 42%; position: relative; } .statement-split .stmt-side.deco { background: var(--slide-card); } .statement-split .img-target.stmt-side { background-size: cover; background-position: center; } /* ---------- content_text_image / image_feature — structured card-rows ---------- */ .if-points { display: flex; flex-direction: column; gap: 1.2cqw; height: 100%; justify-content: safe center; } .if-point { display: flex; align-items: center; gap: 1.6cqw; flex: 0 1 auto; min-height: 0; overflow: hidden; background: var(--slide-card); border: 1px solid var(--slide-border); border-radius: 10px; padding: 1.5cqw 2cqw; } .if-point .if-dot { flex: 0 0 auto; width: 1.4cqw; height: 1.4cqw; border-radius: 50%; background: var(--acc); } .if-point .if-tx { font-size: 1.6cqw; line-height: 1.4; color: var(--slide-fg); } /* ---------- Image slots (cover split, statement bg, image_feature) ---------- */ .img-target { background-size: cover; background-position: center; background-repeat: no-repeat; } .img-target .ph { position: absolute; inset: 0; background: linear-gradient(135deg, color-mix(in srgb, var(--acc) 35%, var(--primary)), var(--primary)); background-size: 200% 200%; animation: imgshim 2.2s ease-in-out infinite; } @keyframes imgshim { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} } .slide.cover.cover-split { flex-direction: row; padding: 0; } .cover-split .cover-text { flex: 1; padding: 5% 5.5%; display: flex; flex-direction: column; justify-content: center; } .cover-split .cover-img { flex: 0 0 44%; position: relative; } .cover-split .cover-text .title { font-size: 4.6cqw; } .slide.statement .stmt-img { position: absolute; inset: 0; z-index: 0; } .slide.statement .stmt-img.has-img::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(10,10,14,.55), rgba(10,10,14,.78)); } .slide.statement .stmt-img.stmt-photo:not(.has-img) { opacity: 0; } .slide.imgfeat .imgfeat-img { position: relative; } /* ---------- Decorative panel (fills empty image areas, on-brand, no AI image) ---------- */ .deco { position: relative; overflow: hidden; background: var(--slide-card); background-image: radial-gradient(circle at center, color-mix(in srgb, var(--slide-fg) 12%, transparent) 1.1px, transparent 1.6px); background-size: 15px 15px; } .deco-ring { position: absolute; border-radius: 50%; pointer-events: none; border: 2px solid color-mix(in srgb, var(--acc) 32%, transparent); } .deco-ring.r1 { width: 46cqw; height: 46cqw; right: -14cqw; top: -14cqw; } .deco-ring.r2 { width: 26cqw; height: 26cqw; left: -8cqw; bottom: -8cqw; border-color: color-mix(in srgb, var(--acc) 20%, transparent); } .deco-dot { position: absolute; border-radius: 50%; background: var(--acc); pointer-events: none; } .deco-dot.d1 { width: 2.4cqw; height: 2.4cqw; left: 12cqw; top: 16cqw; opacity: .8; } .deco-dot.d2 { width: 1.6cqw; height: 1.6cqw; right: 16cqw; bottom: 20cqw; opacity: .5; } .deco-center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } .deco-badge { width: 16cqw; height: 16cqw; box-shadow: 0 0 0 4cqw color-mix(in srgb, var(--acc) 14%, transparent); } .deco-badge img { width: 52%; height: 52%; } /* the imgfeat/cover image panel, when decorative, must still fill its column */ .imgfeat-img.deco, .cover-img.deco { display: block; } /* Statement/divider decorative background: subtle dot-grid + faint rings on the primary colour so these slides never look flat (text sits centred on top). */ .slide.statement .stmt-img.deco-soft { position: absolute; inset: 0; z-index: 0; opacity: 1; background: var(--primary); background-image: radial-gradient(circle, rgba(255,255,255,.07) 1px, transparent 1.5px); background-size: 18px 18px; } .slide.statement .deco-soft .deco-ring { border-color: rgba(255,255,255,.13); } .slide.statement .deco-soft .deco-dot { background: rgba(255,255,255,.22); } .slide.statement .deco-soft .deco-center { display: none; } .slide.statement .stmt-photo { z-index: 1; } /* ---------- CTA (visually rich, fills the canvas) ---------- */ .slide.cta { align-items: center; justify-content: center; text-align: center; position: relative; overflow: hidden; } .slide.cta .deco-ring.r1 { width: 50cqw; height: 50cqw; right: -18cqw; top: -16cqw; } .slide.cta .deco-ring.r2 { width: 34cqw; height: 34cqw; left: -12cqw; bottom: -14cqw; } .slide.cta .deco-dot.d1 { left: 16cqw; top: 22cqw; } .slide.cta .deco-dot.d2 { right: 18cqw; bottom: 24cqw; } .cta-inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 2cqw; padding: 0 6%; } .slide.cta .h { font-size: 6.2cqw; font-weight: 800; letter-spacing: -0.02em; line-height: 1.08; } .slide.cta .m { font-size: 2.9cqw; color: var(--slide-dim); max-width: 72%; margin: 0; line-height: 1.5; } /* structured contact bar: labeled mini-cards instead of a centred text block */ .cc-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.4cqw; margin-top: 2cqw; max-width: 86%; } .cc-grid.two .cc-card { flex: 0 0 calc(50% - 1.4cqw); } .cc-card { display: flex; flex-direction: column; gap: .3cqw; text-align: left; min-width: 0; background: var(--slide-card); border: 1px solid var(--slide-border); border-radius: 10px; padding: 1.4cqw 2cqw; } .cc-card .cc-l { font-family: var(--mono); font-size: 1.4cqw; letter-spacing: .06em; text-transform: uppercase; color: var(--acc); font-weight: 700; } .cc-card .cc-v { font-size: 2cqw; color: var(--slide-fg); } /* ---------- Agenda (numbered cards, fills area) ---------- */ .agenda-list { display: flex; flex-direction: column; gap: 1.6cqw; height: 100%; } .ag-row { display: flex; align-items: center; gap: 2.4cqw; flex: 1 1 0; min-height: 0; overflow: hidden; background: var(--slide-card); border: 1px solid var(--slide-border); border-radius: 12px; padding: 1.4cqw 2.6cqw; } .ag-row.active { border-color: var(--acc); box-shadow: inset 0 0 0 1px var(--acc); } .ag-num { flex: 0 0 auto; width: 6cqw; height: 6cqw; border-radius: 50%; background: var(--acc); color: #fff; font-weight: 800; font-size: 3cqw; display: flex; align-items: center; justify-content: center; } .ag-label { font-size: 3cqw; font-weight: 600; color: var(--slide-fg); overflow-wrap: anywhere; } /* ---------- Image feature ---------- */ .slide.imgfeat { flex-direction: row; padding: 0; } .imgfeat-text { flex: 1; padding: 4.5%; display: flex; flex-direction: column; justify-content: center; min-width: 0; overflow: hidden; } /* narrower column → smaller title that can use up to ~3 lines without clipping */ .slide.imgfeat .headline { font-size: 4cqw; max-height: 16cqw; } .slide.imgfeat .bullets li { font-size: 2.5cqw; } .imgfeat-img { flex: 0 0 46%; position: relative; } .imgfeat-img img { width:100%; height:100%; object-fit: cover; } .imgfeat-img .ph { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color: rgba(255,255,255,.7); font-size: 2.2cqw; padding: 8%; text-align:center; } .slide.error-slide { background: #1a1416; color: #f6c6c6; align-items:center; justify-content:center; } /* ===================== Wizard ===================== */ .screen { display: none; } .screen.active { display: block; animation: screenIn .4s cubic-bezier(.22,.61,.36,1) both; } @keyframes screenIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .btn-lg { padding: 13px 22px; font-size: 15px; } .btn.loading { opacity: .85; cursor: progress; animation: btnpulse 1.3s ease-in-out infinite; } @keyframes btnpulse { 0%,100%{ box-shadow: 0 0 0 0 rgba(59,130,246,.35);} 50%{ box-shadow: 0 0 0 6px rgba(59,130,246,0);} } .btn-sm { padding: 8px 14px; font-size: 13px; } .link-back { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 13px; padding: 0; } .link-back:hover { color: var(--text); } /* Step 1 */ /* NOTE: no unconditional `display` here — only `.screen-center.active` may show it. Otherwise `.screen-center{display:flex}` would override `.screen{display:none}` (same specificity, later rule wins) and the prompt screen would stay visible, stacking the next screen below it (user had to scroll down after "Weiter"). */ .screen-center { min-height: calc(100vh - 56px); align-items: center; justify-content: center; padding: 40px; background: radial-gradient(900px 460px at 50% 22%, rgba(59,130,246,.07), transparent 70%); } .screen-center.active { display: flex; } .hero { max-width: 680px; width: 100%; text-align: center; } .eyebrow-tag { display: inline-block; font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); background: rgba(59,130,246,.14); padding: 6px 14px; border-radius: 999px; } .hero-title { font-size: 42px; font-weight: 800; letter-spacing: -0.025em; margin: 16px 0 12px; line-height: 1.08; } .hero-sub { color: var(--text-dim); font-size: 16px; line-height: 1.65; max-width: 540px; margin: 0 auto 28px; } /* Type selector (Präsentation / Bericht) — Gamma-style format cards. */ .type-seg { display: flex; gap: 12px; justify-content: center; margin: 18px 0 4px; } .type-card { display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px 18px; min-width: 220px; position: relative; transition: transform .15s, border-color .15s, box-shadow .15s, background .15s; color: var(--text); } .type-card:hover { border-color: var(--border-hi); transform: translateY(-1px); } .type-card.active { border-color: var(--accent); background: rgba(59,130,246,.1); box-shadow: 0 0 0 3px rgba(59,130,246,.16); } .type-ic { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--text-dim); transition: .15s; } .type-card.active .type-ic { background: var(--accent); color: #fff; } .type-tx { display: flex; flex-direction: column; gap: 2px; } .type-t { font-size: 15px; font-weight: 700; } .type-d { font-size: 12px; color: var(--text-mute); } /* "Bald" (coming-soon) variant — visible, but not yet functional. */ .type-card.type-soon { opacity: .68; } .type-card.type-soon:hover { opacity: .85; border-color: var(--border-hi); } .soon-pill { position: absolute; top: -9px; right: 12px; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--amber); background: rgba(245,158,11,.16); border: 1px solid rgba(245,158,11,.4); border-radius: 999px; padding: 2px 8px; } /* Gamma-style prompt card: textarea + embedded footer (improve + action). */ .prompt-card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; text-align: left; box-shadow: 0 20px 60px -28px rgba(0,0,0,.8); overflow: hidden; transition: border-color .15s, box-shadow .15s; } .prompt-card:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(59,130,246,.18), 0 20px 60px -28px rgba(0,0,0,.8); } .hero-prompt { width: 100%; background: transparent; border: none; color: var(--text); padding: 18px 18px 4px; font-size: 16px; line-height: 1.65; resize: none; font-family: var(--font); display: block; transition: color .25s; position: relative; z-index: 1; } .hero-prompt:focus { outline: none; } .prompt-card-foot { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 12px 14px; position: relative; z-index: 2; } .foot-right { display: flex; align-items: center; gap: 12px; } .prompt-tip { font-size: 12px; color: var(--text-mute); display: flex; align-items: center; gap: 4px; } .prompt-tip kbd { font-family: var(--mono); font-size: 11px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; color: var(--text-dim); } .prompt-go { min-width: 120px; flex: 0 0 auto; } /* "Prompt verbessern" — AI rewrites the rough prompt into a crisp briefing. */ .btn-improve { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); border-radius: 9px; padding: 8px 13px; font-size: 13px; font-weight: 600; font-family: var(--font); transition: .15s; } .btn-improve:hover:not(:disabled) { border-color: var(--accent); color: var(--text); background: rgba(59,130,246,.1); } .btn-improve:disabled { cursor: default; } .btn-improve .imp-ic { color: var(--accent); font-size: 14px; line-height: 1; } .btn-improve.loading { color: var(--text-mute); } .btn-improve.loading .imp-ic { animation: impPulse .8s ease-in-out infinite; } @keyframes impPulse { 0%,100% { opacity: .35; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.15); } } /* ===== AI "reading & rewriting" animation (Step 1) ===== */ /* Rotating conic-gradient glow border — the signature 2025 "AI is thinking" rim. */ @property --ai-ang { syntax: ""; inherits: false; initial-value: 0deg; } .ai-border { position: absolute; inset: 0; border-radius: 16px; padding: 1.6px; z-index: 4; pointer-events: none; opacity: 0; transition: opacity .3s; background: conic-gradient(from var(--ai-ang), transparent 0deg, rgba(59,130,246,.0) 30deg, var(--accent) 80deg, #ffffff 120deg, var(--accent-2) 160deg, rgba(59,130,246,.0) 220deg, transparent 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; } .prompt-card.thinking { animation: cardGlowPulse 1.7s ease-in-out infinite; } @keyframes cardGlowPulse { 0%,100% { box-shadow: 0 0 0 1px rgba(59,130,246,.22), 0 0 30px -10px rgba(59,130,246,.4), 0 20px 60px -28px rgba(0,0,0,.8); } 50% { box-shadow: 0 0 0 1px rgba(96,165,250,.5), 0 0 54px -4px rgba(59,130,246,.65), 0 20px 60px -28px rgba(0,0,0,.8); } } .prompt-card.thinking .ai-border { opacity: 1; animation: aiSpin 1.5s linear infinite; } @keyframes aiSpin { to { --ai-ang: 360deg; } } /* The user's text dissolves into an unreadable, breathing blur while the AI works. Two chained animations: blur IN once (.5s), then breathe — handing over seamlessly (breathe's 0% == blurIn's end) so it never snaps back to readable. */ .scan-line { display: none; } /* retired: replaced by the blur-dissolve effect */ .prompt-card.thinking .hero-prompt { color: var(--text-dim); pointer-events: none; animation: promptBlurIn .5s ease forwards, promptBreathe 1.9s ease-in-out .5s infinite; } @keyframes promptBlurIn { from { filter: blur(0); opacity: 1; transform: scale(1); } to { filter: blur(7px); opacity: .46; transform: scale(1.02); } } @keyframes promptBreathe { 0%,100% { filter: blur(7px); opacity: .46; transform: scale(1.02); } 50% { filter: blur(10px); opacity: .36; transform: scale(1.028); } } /* Reveal overlay: the improved prompt materialises word-by-word out of blur. */ .prompt-fx { position: absolute; left: 0; right: 0; top: 0; bottom: 52px; z-index: 2; display: none; pointer-events: none; padding: 18px 18px 4px; font-size: 16px; line-height: 1.65; color: var(--text); font-family: var(--font); white-space: pre-wrap; overflow-wrap: break-word; overflow: hidden; } .prompt-card.revealing .prompt-fx { display: block; } .prompt-card.revealing .hero-prompt { color: transparent; caret-color: transparent; } .prompt-fx .w { display: inline-block; opacity: 0; filter: blur(8px); transform: translateY(6px); transition: opacity .42s ease, filter .42s ease, transform .42s ease, text-shadow .42s ease; will-change: opacity, filter, transform; } .prompt-fx .w.in { opacity: 1; filter: blur(0); transform: none; } .prompt-fx .w.glow { text-shadow: 0 0 16px rgba(147,197,253,.95); } /* Status / undo line under the card. */ .prompt-meta { min-height: 18px; margin: 14px 0 0; font-size: 12.5px; color: var(--text-mute); display: flex; gap: 10px; justify-content: center; align-items: center; } .prompt-meta .imp-status { color: var(--accent); } .prompt-meta .ok { color: var(--green); } .prompt-meta .undo { background: none; border: none; color: var(--accent); cursor: pointer; font-size: 12.5px; font-family: var(--font); padding: 0; } .prompt-meta .undo:hover { text-decoration: underline; } /* Step 2 */ .setup-grid { display: grid; grid-template-columns: 390px 1fr; min-height: calc(100vh - 56px); } .setup-panel { border-right: 1px solid var(--border); background: var(--panel); padding: 24px 24px 0; overflow-y: auto; max-height: calc(100vh - 56px); } .setup-h { font-size: 21px; font-weight: 800; margin: 12px 0 6px; letter-spacing: -0.01em; } .setup-main { padding: 36px 40px; overflow-y: auto; max-height: calc(100vh - 56px); } .seg-2 { grid-template-columns: 1fr 1fr; } /* Sticky generate CTA, fades the panel scroll behind it (Gamma keeps the action pinned). */ .setup-cta { position: sticky; bottom: 0; margin: 22px -24px 0; padding: 16px 24px 24px; background: linear-gradient(to top, var(--panel) 62%, transparent); } .setup-cta .btn-primary { width: 100%; } .cards-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; } .cards-header h3 { font-size: 16px; font-weight: 700; margin: 0; letter-spacing: -0.01em; } .outline-view { max-width: 780px; } .ol-loading { color: var(--text-dim); font-size: 14px; padding: 24px 0; animation: btnpulse 1.6s ease-in-out infinite; } .outline-preview h3 { font-size: 15px; margin: 0 0 14px; } .ol-chip { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 8px; } .ol-chip-head { display: flex; align-items: center; gap: 12px; } .ol-n { font-family: var(--mono); font-size: 12px; color: var(--text-mute); width: 18px; flex: 0 0 auto; } .ol-type { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); background: rgba(59,130,246,.14); padding: 3px 9px; border-radius: 999px; white-space: nowrap; flex: 0 0 auto; } .ol-title { font-size: 14px; color: var(--text); font-weight: 600; } .ol-points { margin: 2px 0 0 30px; padding: 0; display: flex; flex-direction: column; gap: 5px; } .ol-points li { list-style: none; position: relative; padding-left: 15px; font-size: 13px; color: var(--text-dim); line-height: 1.45; } .ol-points li::before { content: "•"; position: absolute; left: 2px; color: var(--accent); } /* ===== Card-by-card editor (modern 2025 look) ===== */ .card-row { display: flex; gap: 8px; align-items: flex-start; position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px 14px 14px 6px; margin-bottom: 10px; transition: border-color .15s, box-shadow .15s, transform .12s, opacity .15s; } .card-row:hover { border-color: var(--border-hi); box-shadow: 0 10px 30px -20px rgba(0,0,0,.9); } .card-row.dragging { opacity: .45; } .card-row.drop-before::before { content: ""; position: absolute; left: 10px; right: 10px; top: -6px; height: 2px; border-radius: 2px; background: var(--accent); box-shadow: 0 0 10px rgba(59,130,246,.8); } .card-grip { flex: 0 0 auto; width: 22px; align-self: stretch; display: flex; align-items: center; justify-content: center; color: var(--text-mute); cursor: grab; border-radius: 8px; transition: .15s; } .card-grip:hover { color: var(--text-dim); background: var(--surface-2); } .card-grip:active { cursor: grabbing; } .card-main { flex: 1; min-width: 0; } .card-row-head { display: flex; align-items: center; gap: 10px; } .card-n { font-family: var(--mono); font-size: 12px; color: var(--text-mute); min-width: 16px; flex: 0 0 auto; } /* Layout pill (styled native