:root {
  --bg: #f5f4ef;
  --panel: #fffdf8;
  --ink: #17211f;
  --muted: #68716e;
  --line: #d9dedb;
  --accent: #1d6157;
  --accent-2: #d8eee8;
  --warm: #f2dfbb;
  --shadow: 0 18px 45px rgba(23,33,31,.10);
  --radius: 24px;
  --font-scale: 1;
}
* { box-sizing: border-box; }
html { font-size: calc(16px * var(--font-scale)); }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 85% 10%, rgba(216,238,232,.7), transparent 25rem),
    linear-gradient(180deg, #fbfaf6 0%, var(--bg) 100%);
}
button, textarea { font: inherit; }
button { cursor: pointer; }
.skip-link { position: fixed; left: 1rem; top: -4rem; z-index: 20; background: #fff; padding: .75rem 1rem; }
.skip-link:focus { top: 1rem; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.topbar {
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  max-width:1200px; margin:auto; padding:1.4rem 1.5rem;
}
.brand { font-size:1.25rem; font-weight:800; letter-spacing:-.02em; }
.eyebrow { margin:0 0 .35rem; color:var(--accent); font-size:.76rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }
.top-actions { display:flex; gap:.5rem; }
.ghost, .text-button {
  border:1px solid var(--line); background:rgba(255,255,255,.7); color:var(--ink);
  border-radius:999px; padding:.65rem .95rem;
}
.text-button { color:var(--accent); border:0; background:transparent; font-weight:700; }
main { max-width:1200px; margin:auto; padding:1rem 1.5rem 4rem; }
.hero {
  display:grid; grid-template-columns:1.05fr .95fr; gap:2.5rem; align-items:center;
  min-height:420px; padding:3.5rem; border:1px solid rgba(29,97,87,.15);
  border-radius:36px; background:linear-gradient(135deg, rgba(255,253,248,.95), rgba(230,244,239,.88)); box-shadow:var(--shadow);
}
h1 { margin:.2rem 0 1rem; font-size:clamp(2.7rem, 7vw, 5.8rem); line-height:.91; letter-spacing:-.065em; max-width:760px; }
h2 { margin:.15rem 0; font-size:clamp(1.7rem,3vw,2.5rem); letter-spacing:-.035em; }
h3 { margin:.2rem 0 .5rem; }
.lede { max-width:650px; color:var(--muted); font-size:1.15rem; line-height:1.6; }
.ask-box { background:rgba(255,255,255,.92); padding:1rem; border-radius:28px; border:1px solid var(--line); box-shadow:0 12px 30px rgba(23,33,31,.08); }
textarea { width:100%; resize:vertical; min-height:120px; border:0; outline:0; background:transparent; padding:1rem; color:var(--ink); font-size:1.05rem; }
.ask-actions { display:flex; flex-wrap:wrap; gap:.55rem; padding:.4rem; }
.mode { border:1px solid var(--line); background:#fff; border-radius:999px; padding:.75rem 1rem; font-weight:700; }
.mode.primary { background:var(--accent); color:#fff; border-color:var(--accent); }
.mode.subtle { background:var(--accent-2); border-color:transparent; }
.mode.deep-mode { border-style:dashed; }
.mode.deep-mode.active { background:var(--warm); border-style:solid; }
.advisor-workspace {
  margin:1.5rem 0 3.5rem; border:1px solid rgba(29,97,87,.18); border-radius:32px;
  background:rgba(255,253,248,.97); box-shadow:var(--shadow); overflow:hidden;
}
.advisor-workspace[hidden] { display:none; }
.advisor-workspace-head {
  display:flex; align-items:flex-start; justify-content:space-between; gap:1rem;
  padding:2rem 2rem 1.25rem; border-bottom:1px solid var(--line);
}
.advisor-transcript { padding:1.5rem 2rem 2rem; }
.advisor-turn { max-width:860px; margin:0 auto 1.5rem; }
.advisor-turn.user { background:var(--accent-2); border-radius:18px; padding:1rem 1.15rem; }
.advisor-turn.assistant { padding:.25rem 0; }
.advisor-answer { line-height:1.72; font-size:1.04rem; }
.advisor-answer h3 { margin:1.6rem 0 .65rem; font-size:1.25rem; }
.advisor-answer p { margin:.75rem 0; }
.advisor-answer ul, .advisor-answer ol { padding-left:1.4rem; line-height:1.7; }
.advisor-answer table { width:100%; border-collapse:collapse; margin:1rem 0; font-size:.94rem; }
.advisor-answer th, .advisor-answer td { text-align:left; vertical-align:top; padding:.65rem; border:1px solid var(--line); }
.advisor-answer th { background:#eef4f1; }
.advisor-answer code { background:#eef1ef; padding:.1rem .3rem; border-radius:5px; }
.advisor-meta { color:var(--muted); font-size:.78rem; margin-top:1.1rem; padding-top:.85rem; border-top:1px solid var(--line); }
.advisor-followup { border-top:1px solid var(--line); padding:1rem 1.5rem 1.25rem; background:#fafbf8; }
.advisor-followup textarea { min-height:84px; background:#fff; border:1px solid var(--line); border-radius:18px; }
.advisor-thinking { color:var(--muted); padding:1rem 0; }
.status-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin:1.3rem 0 3.5rem; overflow:hidden; border-radius:20px; border:1px solid var(--line); background:var(--line); }
.status-strip article { background:rgba(255,255,255,.82); padding:1rem 1.2rem; }
.status-strip span { display:block; color:var(--muted); font-size:.8rem; margin-bottom:.25rem; }
.section { margin:4rem 0; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:1rem; margin-bottom:1.5rem; }
.pillar-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.pillar {
  min-height:185px; border:1px solid var(--line); border-radius:var(--radius); padding:1.35rem;
  background:var(--panel); transition:transform .2s ease, box-shadow .2s ease; text-align:left;
}
.pillar:hover, .pillar:focus-visible { transform:translateY(-3px); box-shadow:var(--shadow); }
.pillar-icon { font-size:2rem; display:block; margin-bottom:1rem; }
.pillar p, .task-card p { color:var(--muted); line-height:1.5; }
.task-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.task-card { border:1px solid var(--line); border-radius:var(--radius); background:#fff; padding:1.35rem; }
.task-meta { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:.8rem; }
.chip { display:inline-flex; padding:.35rem .6rem; border-radius:999px; background:var(--accent-2); color:var(--accent); font-size:.76rem; font-weight:800; }
.task-card button { margin-top:.6rem; border:0; border-radius:999px; padding:.7rem .95rem; background:var(--ink); color:#fff; font-weight:700; }
dialog { width:min(760px, calc(100% - 2rem)); border:0; border-radius:28px; padding:2rem; box-shadow:0 30px 100px rgba(0,0,0,.24); color:var(--ink); }
dialog::backdrop { background:rgba(12,25,22,.48); backdrop-filter:blur(4px); }
.dialog-close { position:absolute; right:1rem; top:1rem; width:2.25rem; height:2.25rem; border:0; border-radius:50%; background:#edf1ef; font-size:1.5rem; }
.task-step { display:grid; grid-template-columns:34px 1fr; gap:.8rem; margin:1rem 0; }
.step-num { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:var(--accent); color:#fff; font-weight:800; }

.guided-head { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }
.task-progress { height:9px; background:#e7ece9; border-radius:999px; overflow:hidden; margin:1.2rem 0 1.5rem; }
.task-progress span { display:block; height:100%; background:var(--accent); border-radius:999px; transition:width .2s ease; }
.guided-step-card {
  display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:start;
  padding:1.3rem; border:1px solid var(--line); border-radius:20px; background:#fff;
}
.guided-step-number {
  width:42px; height:42px; border-radius:50%; display:grid; place-items:center;
  background:var(--accent); color:#fff; font-weight:800; font-size:1.05rem;
}
.guided-step-card h3 { margin:.2rem 0; font-size:1.2rem; line-height:1.45; }
.guided-actions { display:flex; flex-wrap:wrap; gap:.6rem; margin:1rem 0 1.4rem; }
.guided-actions .mode:disabled { opacity:.4; cursor:not-allowed; }
.task-learning { margin-top:1.2rem; padding:1.2rem; border-radius:20px; background:#f4f8f6; border:1px solid #dce8e3; }
.task-learning-head { display:flex; justify-content:space-between; gap:1rem; }
.task-ask-form { display:flex; gap:.65rem; align-items:flex-end; margin-top:.8rem; }
.task-ask-form textarea { min-height:72px; background:#fff; border:1px solid var(--line); border-radius:16px; }
.task-ask-form .mode { flex:0 0 auto; }
.task-ai-panel:empty { display:none; }
.task-ai-panel { margin-top:1rem; padding:1rem; border-radius:16px; background:#fff; border:1px solid var(--line); }
.task-ai-answer { line-height:1.65; }
.task-ai-answer p { margin:.65rem 0; }
.task-ai-answer ul, .task-ai-answer ol { padding-left:1.4rem; }
.task-ai-thinking { color:var(--muted); }
.task-details { margin-top:1rem; }
.task-details summary { cursor:pointer; color:var(--accent); font-weight:700; }
.completion-choices { display:grid; gap:.65rem; margin:1.2rem 0; }

.source-box, .boundary-box { margin-top:1rem; padding:1rem; border-radius:16px; background:#f4f7f5; }
.boundary-box { background:#fff6e7; }
.setting-row { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1rem 0; border-bottom:1px solid var(--line); }
.setting-row select, .setting-row input { padding:.55rem; border:1px solid var(--line); border-radius:10px; }
footer { display:flex; flex-wrap:wrap; gap:.6rem 1rem; justify-content:center; padding:2rem 1rem 3rem; color:var(--muted); text-align:center; }
footer strong { color:var(--ink); }
.high-contrast { --bg:#fff; --panel:#fff; --ink:#000; --muted:#222; --line:#111; --accent:#003c32; --accent-2:#d9fff8; }
.simple .pillar p, .simple .status-strip, .simple .task-meta { display:none; }
@media (max-width:900px) {
  .hero { grid-template-columns:1fr; padding:2rem; }
  .pillar-grid { grid-template-columns:repeat(2,1fr); }
  .task-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:620px) {
  .topbar, .section-heading { align-items:flex-start; flex-direction:column; }
  .top-actions { width:100%; }
  .hero { padding:1.35rem; border-radius:26px; }
  .pillar-grid, .task-grid, .status-strip { grid-template-columns:1fr; }
  .mode { flex:1 1 calc(50% - .55rem); }
}