/* ============================================================ Finaz · cursos finales — base styles Per-course themes override via [data-theme] on . ============================================================ */ *,*::before,*::after{box-sizing:border-box} html,body,#root{margin:0;padding:0} html{height:100%} body{ min-height:100%; font-family:var(--font-sans); color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; letter-spacing:-0.005em; } a{color:inherit;text-decoration:none} button{font:inherit} em{font-style:italic} /* ===== utilities ===== */ .mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums} .serif{font-family:var(--font-serif)} .kicker{font:500 11px/1 var(--font-mono);text-transform:uppercase;letter-spacing:0.08em;color:var(--ink-quiet)} .muted{color:var(--ink-muted)} .center{display:flex;align-items:center;justify-content:center} /* ===== layout shell ===== */ .app-shell{ display:grid; grid-template-rows:auto 1fr; min-height:100vh; } .app-content{ width:100%;max-width:1280px;margin:0 auto; padding:32px 28px 96px; } /* ===== topbar ===== */ .topbar{ position:sticky;top:0;z-index:50; background:var(--bg-overlay); backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--rule); } .topbar-inner{ max-width:1280px;margin:0 auto; display:flex;align-items:center;gap:18px; padding:14px 28px; } .brand-cluster{display:flex;align-items:center;gap:10px;min-width:0} .brand-mark{ width:30px;height:30px;border-radius:7px; background:var(--accent-grad); display:flex;align-items:center;justify-content:center; color:var(--accent-on);font-weight:700;font-size:13px;letter-spacing:-0.02em; flex:0 0 auto; } .brand-text{font:600 14px var(--font-sans);letter-spacing:-0.015em;color:var(--ink-strong)} .brand-code{font:500 11px var(--font-mono);color:var(--ink-quiet);margin-left:6px} .crumbs{display:flex;align-items:center;gap:8px;font:500 12.5px var(--font-sans);min-width:0;overflow:hidden} .crumbs .sep{color:var(--ink-quiet)} .crumbs a{color:var(--ink-muted)} .crumbs a:hover{color:var(--ink-strong)} .crumbs .now{color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .topbar-right{margin-left:auto;display:flex;align-items:center;gap:10px} .tb-chip{ display:inline-flex;align-items:center;gap:6px; padding:6px 10px;border-radius:999px; background:var(--bg-elev-1);border:1px solid var(--rule); font:500 11.5px var(--font-mono);color:var(--ink-muted); } .tb-chip .dot{width:6px;height:6px;border-radius:999px;background:var(--accent);box-shadow:0 0 8px var(--accent-glow)} .tb-btn{ display:inline-flex;align-items:center;gap:6px; padding:7px 12px;border-radius:8px; background:transparent;border:1px solid var(--rule);color:var(--ink-muted); font:500 12.5px var(--font-sans);cursor:pointer;letter-spacing:-0.005em; transition:background var(--motion),border-color var(--motion),color var(--motion); } .tb-btn:hover{background:var(--bg-elev-1);color:var(--ink);border-color:var(--rule-strong)} .tb-btn.active{background:var(--bg-elev-1);color:var(--ink)} /* ===== hero / course home ===== */ .hero{margin:32px 0 56px} .hero-eyebrow{ display:inline-flex;align-items:center;gap:8px; font:500 10.5px var(--font-mono);color:var(--accent); text-transform:uppercase;letter-spacing:0.08em; padding:6px 11px;border-radius:999px; background:var(--accent-soft);border:1px solid var(--accent-border); margin-bottom:18px; } h1.hero-title{ font-family:var(--font-serif);font-weight:400;font-style:normal; font-size:clamp(34px,5vw,56px);line-height:1.05;letter-spacing:-0.022em; color:var(--ink-strong);margin:0 0 18px;max-width:920px; } .hero-sub{font-size:17px;line-height:1.55;color:var(--ink-muted);max-width:680px;margin:0 0 22px} .hero-promise{ margin:24px 0 0;padding:18px 22px; background:var(--bg-elev-1);border-left:3px solid var(--accent);border-radius:0 8px 8px 0; font:500 14.5px/1.55 var(--font-serif);color:var(--ink);max-width:760px; } .hero-stats{ display:flex;flex-wrap:wrap;gap:28px;margin:28px 0 0; padding-top:24px;border-top:1px solid var(--rule); } .hero-stat{display:flex;flex-direction:column;gap:4px} .hero-stat .n{font:600 22px var(--font-mono);color:var(--ink-strong);font-variant-numeric:tabular-nums} .hero-stat .l{font:500 11px var(--font-mono);color:var(--ink-quiet);text-transform:uppercase;letter-spacing:0.06em} .hero-cta{display:flex;gap:10px;margin-top:28px;flex-wrap:wrap} /* ===== buttons ===== */ .btn{ display:inline-flex;align-items:center;gap:8px; padding:10px 16px;border-radius:8px; font:500 13.5px var(--font-sans);letter-spacing:-0.005em; cursor:pointer;transition:all var(--motion); border:1px solid transparent; } .btn-primary{background:var(--accent);color:var(--accent-on);border-color:transparent} .btn-primary:hover{filter:brightness(1.08);transform:translateY(-1px)} .btn-secondary{background:var(--bg-elev-1);color:var(--ink);border-color:var(--rule)} .btn-secondary:hover{background:var(--bg-elev-2);border-color:var(--rule-strong)} .btn-ghost{background:transparent;color:var(--ink-muted);border-color:transparent} .btn-ghost:hover{background:var(--bg-elev-1);color:var(--ink)} .btn-arrow{display:inline-flex;transition:transform 200ms ease} .btn:hover .btn-arrow{transform:translateX(2px)} /* ===== module grid ===== */ .section{margin:40px 0} .section-head{display:flex;align-items:baseline;justify-content:space-between;margin:0 0 24px;gap:16px;flex-wrap:wrap} .section-head h2{font:500 24px/1.2 var(--font-serif);letter-spacing:-0.015em;color:var(--ink-strong);margin:0} .section-head .meta{font:500 12px var(--font-mono);color:var(--ink-quiet)} .mod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px} .mod-card{ background:var(--bg-card);border:1px solid var(--rule);border-radius:12px; padding:18px 20px;cursor:pointer; transition:transform var(--motion),border-color var(--motion),background var(--motion); display:flex;flex-direction:column;gap:10px; } .mod-card:hover{transform:translateY(-2px);border-color:var(--rule-strong);background:var(--bg-card-hover)} .mod-card.lock{opacity:0.6;cursor:not-allowed} .mod-card.lock:hover{transform:none} .mod-head{display:flex;align-items:center;justify-content:space-between;gap:10px} .mod-id{font:600 11px var(--font-mono);color:var(--ink-quiet);text-transform:uppercase;letter-spacing:0.06em} .mod-status{font:500 10.5px var(--font-mono);text-transform:uppercase;letter-spacing:0.06em;display:flex;align-items:center;gap:5px} .mod-status.done{color:var(--green)} .mod-status.now{color:var(--accent)} .mod-status.next{color:var(--ink-muted)} .mod-status.lock{color:var(--ink-quiet)} .mod-status .dot{width:6px;height:6px;border-radius:999px;background:currentColor} .mod-card h3{ font:500 17px/1.25 var(--font-serif);letter-spacing:-0.015em;color:var(--ink);margin:0 } .mod-card p{font:400 13.5px/1.5 var(--font-sans);color:var(--ink-muted);margin:0} .mod-progress{margin-top:auto;padding-top:12px} .mod-progress-bar{height:3px;background:var(--bg-elev-2);border-radius:999px;overflow:hidden;position:relative} .mod-progress-bar .fill{height:100%;background:var(--green);border-radius:999px;transition:width 300ms ease} .mod-progress-bar .fill.now{background:var(--accent)} .mod-progress-meta{display:flex;justify-content:space-between;font:500 11px var(--font-mono);color:var(--ink-quiet);margin-top:6px} /* ===== episode list ===== */ .ep-list{display:flex;flex-direction:column;gap:8px;margin:24px 0} .ep-row{ display:grid;grid-template-columns:54px 1fr auto auto;gap:14px;align-items:center; padding:14px 16px; border:1px solid var(--rule);border-radius:10px; background:var(--bg-card);cursor:pointer; transition:border-color var(--motion),background var(--motion),transform var(--motion); } .ep-row:hover{border-color:var(--rule-strong);background:var(--bg-card-hover);transform:translateY(-1px)} .ep-row.locked{opacity:0.55;cursor:not-allowed} .ep-row.locked:hover{transform:none} .ep-row.done{border-color:var(--green-border)} .ep-row.now{border-color:var(--accent)} .ep-id{font:500 12.5px var(--font-mono);color:var(--ink-muted);text-align:center} .ep-info h4{font:500 15px/1.3 var(--font-sans);color:var(--ink);margin:0 0 3px;letter-spacing:-0.005em} .ep-info .ep-meta{font:500 11px var(--font-mono);color:var(--ink-quiet);display:flex;gap:10px} .ep-info .ep-meta span{display:inline-flex;align-items:center;gap:4px} .ep-tag{ display:inline-block;padding:3px 8px;border-radius:5px; background:var(--bg-elev-2);color:var(--ink-muted); font:600 10.5px var(--font-mono);letter-spacing:0.04em;text-transform:uppercase } .ep-tag.gate{background:var(--amber-soft);color:var(--amber)} .ep-tag.calc{background:var(--accent-soft);color:var(--accent)} .ep-tag.case{background:var(--peer-soft);color:var(--peer)} .ep-cta{font:500 12.5px var(--font-mono);color:var(--ink-muted);display:flex;align-items:center;gap:6px;white-space:nowrap} .ep-status-icon{width:22px;height:22px;border-radius:999px;display:flex;align-items:center;justify-content:center;flex:0 0 auto} .ep-status-icon.done{background:var(--green);color:var(--accent-on)} .ep-status-icon.now{border:1.5px solid var(--accent);color:var(--accent)} .ep-status-icon.lock{border:1.5px solid var(--rule);color:var(--ink-quiet)} .ep-status-icon.next{border:1.5px solid var(--rule);color:var(--ink-quiet)} /* ===== episode player ===== */ .episode-shell{ display:grid;grid-template-columns:240px 1fr;gap:24px; margin-top:24px; } @media (max-width:920px){.episode-shell{grid-template-columns:1fr}} .ep-rail{ position:sticky;top:80px;align-self:start; background:var(--bg-card);border:1px solid var(--rule);border-radius:12px;padding:18px; } .ep-rail h5{font:500 11px var(--font-mono);text-transform:uppercase;letter-spacing:0.08em;color:var(--ink-quiet);margin:0 0 14px} .ep-rail .ep-meta-line{font:500 11.5px var(--font-mono);color:var(--ink-muted);margin-bottom:18px} .ep-step{ display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:8px; cursor:pointer;transition:background var(--motion); } .ep-step:hover{background:var(--bg-elev-1)} .ep-step.active{background:var(--bg-elev-2)} .ep-step .marker{ width:22px;height:22px;border-radius:999px;flex:0 0 auto; border:1.5px solid var(--rule); display:flex;align-items:center;justify-content:center; font:600 11px var(--font-mono);color:var(--ink-quiet); } .ep-step.done .marker{background:var(--green);border-color:var(--green);color:var(--accent-on)} .ep-step.active .marker{border-color:var(--accent);color:var(--accent)} .ep-step .lbl{font:500 13px var(--font-sans);color:var(--ink-muted)} .ep-step.active .lbl{color:var(--ink);font-weight:500} .ep-step.done .lbl{color:var(--ink)} .ep-main{min-width:0} .ep-stage{background:var(--bg-card);border:1px solid var(--rule);border-radius:14px;padding:28px 30px} .ep-stage-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 0 16px;flex-wrap:wrap} .ep-stage-head h2{font:400 22px/1.25 var(--font-serif);letter-spacing:-0.012em;color:var(--ink-strong);margin:0} .ep-stage-head .ep-kicker{font:500 11px var(--font-mono);text-transform:uppercase;letter-spacing:0.08em;color:var(--accent)} .big-q{ font:400 22px/1.4 var(--font-serif);color:var(--ink); padding:18px 22px;margin:18px 0; background:var(--bg-elev-1);border-left:3px solid var(--accent);border-radius:0 8px 8px 0; letter-spacing:-0.012em;font-style:italic; } .big-q em{font-style:normal;background:var(--accent-soft);color:var(--accent);padding:0 4px;border-radius:3px} .objective{padding:12px 16px;background:var(--bg-elev-1);border-radius:8px;font:500 13.5px/1.5 var(--font-sans);color:var(--ink-muted);margin-bottom:18px} .objective b{color:var(--ink);font-weight:500} /* voice script */ .voice-script{display:flex;flex-direction:column;gap:14px;margin:24px 0} .voice-line{ display:grid;grid-template-columns:54px 1fr;gap:14px;align-items:flex-start; padding:12px 14px;border-radius:10px;background:var(--bg-elev-1); border:1px solid var(--rule-quiet); transition:opacity 220ms ease,transform 220ms ease; } .voice-line.played{opacity:0.55} .voice-line.current{border-color:var(--accent);background:var(--accent-soft)} .voice-avatar{ width:36px;height:36px;border-radius:50%; display:flex;align-items:center;justify-content:center; font:600 12px var(--font-mono);color:var(--accent-on); background:var(--voice-bg,var(--accent));flex:0 0 auto; } .voice-avatar.sofia{background:var(--voice-sofia,#15803D)} .voice-avatar.mateo{background:var(--voice-mateo,#B45309)} .voice-avatar.tutor{background:var(--voice-tutor,#7C3AED)} .voice-avatar.ines{background:var(--voice-ines,#0F766E)} .voice-body{min-width:0} .voice-name{font:500 12px var(--font-mono);color:var(--ink-quiet);margin-bottom:3px;text-transform:uppercase;letter-spacing:0.04em} .voice-text{font:400 14.5px/1.55 var(--font-serif);color:var(--ink);margin:0} .voice-cue{font:400 11px var(--font-mono);color:var(--ink-quiet);font-style:italic;margin-top:4px;display:block} /* glossary inline */ .gloss{ display:inline;border-bottom:1px dotted var(--accent); cursor:help;color:var(--accent);font-weight:500; text-decoration:none;background:var(--accent-soft); padding:0 3px;border-radius:3px; } .gloss:hover{background:var(--accent);color:var(--accent-on)} .gloss::after{content:'i';display:inline-block;width:11px;height:11px;border-radius:999px;background:var(--accent);color:var(--accent-on);font:600 8px/11px var(--font-mono);text-align:center;margin-left:3px;vertical-align:middle} .gloss:hover::after{background:var(--accent-on);color:var(--accent)} /* popover */ .gloss-popover{ position:fixed;z-index:2000; width:360px;max-width:calc(100vw - 32px); background:var(--bg-card);border:1px solid var(--rule-strong); border-radius:12px;padding:16px 18px; box-shadow:0 16px 48px rgba(0,0,0,0.25),0 0 0 1px rgba(255,255,255,0.04); font:400 13.5px/1.5 var(--font-sans);color:var(--ink); animation:pop-in 140ms cubic-bezier(0.2,0.7,0.3,1); } @keyframes pop-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}} .gloss-pop-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:8px} .gloss-pop-term{font:500 16px var(--font-serif);color:var(--ink-strong);margin:0;letter-spacing:-0.01em} .gloss-pop-cat{font:500 10px var(--font-mono);color:var(--ink-quiet);text-transform:uppercase;letter-spacing:0.08em} .gloss-pop-def{color:var(--ink);margin-bottom:10px} .gloss-pop-row{margin:8px 0;padding-top:8px;border-top:1px solid var(--rule-quiet)} .gloss-pop-row .k{font:500 10px var(--font-mono);color:var(--ink-quiet);text-transform:uppercase;letter-spacing:0.06em;display:block;margin-bottom:4px} .gloss-pop-row .v{font-size:13px;color:var(--ink-muted)} .gloss-pop-row .v code{font:500 12.5px var(--font-mono);background:var(--bg-elev-2);padding:1px 5px;border-radius:4px} .gloss-pop-close{background:transparent;border:0;color:var(--ink-quiet);cursor:pointer;padding:0;line-height:1;font-size:18px} .gloss-pop-close:hover{color:var(--ink)} /* glossary drawer */ .gloss-drawer{ position:fixed;top:0;right:0;bottom:0;z-index:1900; width:min(440px,90vw); background:var(--bg-card);border-left:1px solid var(--rule); box-shadow:-16px 0 48px rgba(0,0,0,0.2); display:flex;flex-direction:column; transform:translateX(100%);transition:transform 220ms ease; } .gloss-drawer.open{transform:translateX(0)} .gloss-drawer-head{display:flex;align-items:center;gap:10px;padding:16px 20px;border-bottom:1px solid var(--rule)} .gloss-drawer-head h3{font:500 16px var(--font-serif);color:var(--ink-strong);margin:0;flex:1;letter-spacing:-0.01em} .gloss-drawer-search{width:100%;padding:10px 12px;border-radius:8px;border:1px solid var(--rule);background:var(--bg-elev-1);color:var(--ink);font:400 13px var(--font-sans)} .gloss-drawer-search:focus{outline:none;border-color:var(--accent)} .gloss-drawer-body{flex:1;overflow-y:auto;padding:8px 0} .gloss-drawer-item{padding:14px 20px;border-bottom:1px solid var(--rule-quiet);cursor:pointer} .gloss-drawer-item:hover{background:var(--bg-elev-1)} .gloss-drawer-item .term{font:500 14.5px/1.2 var(--font-serif);color:var(--ink);margin:0 0 4px;letter-spacing:-0.01em} .gloss-drawer-item .def{font:400 12.5px/1.5 var(--font-sans);color:var(--ink-muted);margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .gloss-drawer-cat{font:500 10px var(--font-mono);color:var(--ink-quiet);text-transform:uppercase;letter-spacing:0.06em;float:right} /* labs */ .lab-shell{margin:24px 0} .lab-head{display:flex;align-items:baseline;gap:12px;margin:0 0 16px;flex-wrap:wrap} .lab-head h3{font:500 18px var(--font-serif);color:var(--ink-strong);margin:0;letter-spacing:-0.01em} .lab-head .lab-tag{font:500 11px var(--font-mono);padding:4px 9px;border-radius:5px;background:var(--accent-soft);color:var(--accent);text-transform:uppercase;letter-spacing:0.06em} .lab-prompt{font:400 14.5px/1.55 var(--font-sans);color:var(--ink-muted);margin-bottom:16px} /* CASE-X two-empresa table */ .case-x{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:20px} @media (max-width:720px){.case-x{grid-template-columns:1fr}} .case-card{ background:var(--bg-card);border:1px solid var(--rule);border-radius:12px;padding:18px; cursor:pointer;transition:all var(--motion); } .case-card:hover{border-color:var(--rule-strong)} .case-card.selected{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 2px var(--accent-soft) inset} .case-card h4{font:500 16px var(--font-serif);color:var(--ink-strong);margin:0 0 4px;letter-spacing:-0.01em} .case-card .ticker{font:500 10.5px var(--font-mono);color:var(--ink-quiet);margin-bottom:14px;text-transform:uppercase;letter-spacing:0.06em} .case-card .drivers{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:14px 0 0} .case-card .driver{padding:8px 10px;background:var(--bg-elev-1);border-radius:6px} .case-card .driver .k{font:500 10px var(--font-mono);color:var(--ink-quiet);text-transform:uppercase;letter-spacing:0.06em} .case-card .driver .v{font:600 16px var(--font-mono);color:var(--ink);font-variant-numeric:tabular-nums} .case-card .driver.pos .v{color:var(--green)} .case-card .driver.neg .v{color:var(--red)} .lab-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px} .lab-feedback{ margin-top:18px;padding:16px 18px;border-radius:10px; background:var(--bg-elev-1);border-left:3px solid var(--accent); font:400 13.5px/1.55 var(--font-sans);color:var(--ink); } .lab-feedback.correct{border-color:var(--green);background:var(--green-soft)} .lab-feedback.partial{border-color:var(--amber);background:var(--amber-soft)} .lab-feedback h5{font:500 12px var(--font-mono);text-transform:uppercase;letter-spacing:0.06em;color:var(--ink-quiet);margin:0 0 8px} /* CALC lab */ .calc-grid{ display:grid;grid-template-columns:1fr 1fr;gap:24px; background:var(--bg-card);border:1px solid var(--rule);border-radius:12px;padding:20px; } @media (max-width:720px){.calc-grid{grid-template-columns:1fr}} .calc-inputs label{display:block;margin-bottom:14px} .calc-inputs .label-text{font:500 11.5px var(--font-mono);color:var(--ink-quiet);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:5px;display:block} .calc-inputs input[type="number"]{ width:100%;padding:9px 12px;border:1px solid var(--rule);background:var(--bg-elev-1);color:var(--ink); font:500 15px var(--font-mono);border-radius:7px;font-variant-numeric:tabular-nums } .calc-inputs input[type="number"]:focus{outline:none;border-color:var(--accent);background:var(--bg-card)} .calc-inputs input[type="range"]{width:100%} .calc-result{padding:20px;background:var(--bg-elev-2);border-radius:10px} .calc-result .formula{font:500 14px var(--font-mono);color:var(--ink-muted);margin-bottom:10px} .calc-result .formula code{background:var(--bg-card);padding:2px 6px;border-radius:4px;color:var(--ink)} .calc-result .answer{font:600 36px var(--font-mono);color:var(--accent);margin:8px 0;font-variant-numeric:tabular-nums} .calc-result .answer-unit{font:500 14px var(--font-sans);color:var(--ink-muted);margin-left:4px} .calc-result .compare{font:400 12.5px/1.55 var(--font-sans);color:var(--ink-muted);margin-top:10px;padding-top:10px;border-top:1px solid var(--rule-quiet)} /* Q-MAP */ .qmap{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:20px 0} @media (max-width:720px){.qmap{grid-template-columns:1fr}} .qmap-bin{ background:var(--bg-card);border:1.5px dashed var(--rule);border-radius:10px;padding:14px;min-height:120px; transition:border-color var(--motion),background var(--motion); } .qmap-bin.over{border-color:var(--accent);background:var(--accent-soft)} .qmap-bin h5{font:500 12px var(--font-mono);text-transform:uppercase;letter-spacing:0.06em;color:var(--ink-muted);margin:0 0 10px} .qmap-pool{display:flex;flex-wrap:wrap;gap:8px;padding:14px;background:var(--bg-elev-1);border-radius:10px;margin-bottom:14px;min-height:60px} .qmap-chip{ padding:7px 12px;background:var(--bg-card);border:1px solid var(--rule);border-radius:6px; font:500 13px var(--font-sans);color:var(--ink);cursor:grab; transition:transform var(--motion),box-shadow var(--motion); user-select:none; } .qmap-chip:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,0.08)} .qmap-chip.dragging{opacity:0.4} .qmap-chip.correct{border-color:var(--green);background:var(--green-soft);color:var(--green)} .qmap-chip.wrong{border-color:var(--red);background:var(--red-soft);color:var(--red)} /* GATE / multi-criteria */ .gate-rows{display:flex;flex-direction:column;gap:10px} .gate-row{ display:grid;grid-template-columns:1fr auto auto auto;gap:10px;align-items:center; padding:12px 16px;background:var(--bg-elev-1);border-radius:8px;border:1px solid var(--rule); } .gate-row .crit{font:500 13.5px var(--font-sans);color:var(--ink)} .gate-row button{ padding:6px 12px;border-radius:6px;font:500 12px var(--font-mono); background:transparent;border:1px solid var(--rule);color:var(--ink-muted);cursor:pointer; } .gate-row button.sel{background:var(--accent);color:var(--accent-on);border-color:var(--accent)} .gate-row button.sel.no{background:var(--red);border-color:var(--red);color:#fff} .gate-row button.sel.amb{background:var(--amber);border-color:var(--amber);color:#0f0c08} /* memo editor */ .memo{display:flex;flex-direction:column;gap:12px} .memo-textarea{ width:100%;min-height:200px;padding:14px 16px; background:var(--bg-elev-1);border:1px solid var(--rule);border-radius:10px; font:400 14.5px/1.6 var(--font-serif);color:var(--ink);resize:vertical;letter-spacing:-0.005em; } .memo-textarea:focus{outline:none;border-color:var(--accent);background:var(--bg-card)} .memo-meta{display:flex;justify-content:space-between;gap:14px;font:500 12px var(--font-mono);color:var(--ink-quiet);flex-wrap:wrap} .memo-meta .ok{color:var(--green)} .memo-meta .warn{color:var(--amber)} .memo-meta .bad{color:var(--red)} .memo-linter{padding:10px 14px;background:var(--amber-soft);border-radius:8px;font:400 12.5px/1.5 var(--font-sans);color:var(--amber);border-left:3px solid var(--amber)} /* nav between stages */ .stage-nav{ display:flex;justify-content:space-between;align-items:center;gap:10px; margin-top:28px;padding-top:20px;border-top:1px solid var(--rule); } /* tips ribbon */ .tip-ribbon{ padding:10px 14px;border-radius:8px;background:var(--bg-elev-2); font:400 12.5px/1.5 var(--font-sans);color:var(--ink-muted);margin:14px 0; border-left:3px solid var(--ink-quiet); } /* progress bar in topbar */ .tb-progress{display:flex;align-items:center;gap:8px} .tb-progress-bar{width:80px;height:4px;background:var(--bg-elev-2);border-radius:999px;overflow:hidden} .tb-progress-bar .fill{height:100%;background:var(--accent);transition:width 220ms ease;border-radius:999px} /* footer */ footer.site-foot{ margin:60px auto 0;padding:24px 28px;max-width:1280px; border-top:1px solid var(--rule); display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px; font:400 12px var(--font-mono);color:var(--ink-quiet); } /* responsive */ @media (max-width:640px){ .app-content{padding:24px 16px 64px} .topbar-inner{padding:12px 16px;gap:10px} .brand-text{display:none} .ep-stage{padding:22px 20px} }