:root { color-scheme: dark; --ink: #f4f3ef; --muted: #a6a8ad; --line: #2a2d33; --accent: #64d7c5; font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; color: var(--ink); background: radial-gradient(circle at 80% 20%, #18353c 0, transparent 25rem), #0a0c10; font-size: 16px; }
header { height: 78px; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(22px, 6vw, 88px); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 13px; text-decoration: none; font-weight: 700; letter-spacing: .09em; font-size: 13px; }
.brand .mark { display: grid; place-items: center; width: 36px; height: 36px; color: #0a0c10; background: var(--ink); border-radius: 50%; letter-spacing: 0; flex-shrink: 0; }
.brand-name { white-space: nowrap; }
[hidden]{display:none!important}
.module-layout{min-width:0}.module-content{min-width:0}
html[data-authenticated="true"] .module-layout{display:grid;grid-template-columns:210px minmax(0,1fr);gap:36px;align-items:start;padding-top:32px}
.module-sidebar{position:sticky;top:24px;padding:24px 18px;background:var(--surface);border:1px solid var(--line);border-radius:14px}
.module-sidebar .sidebar-label{font-size:12px;color:var(--muted);font-weight:700;letter-spacing:.1em;margin:0 0 12px}
.module-links{display:flex;flex-direction:column;gap:6px}.module-links a{padding:10px 8px;color:var(--muted);text-decoration:none;font-size:14px;border-radius:7px}.module-links a:hover{color:var(--ink);background:var(--surface-raised)}
.module-admin{border-top:1px solid var(--line);padding-top:20px;margin-top:20px}.module-action{display:block;margin:8px 0;padding:12px;border:1px solid var(--line);border-radius:9px;color:var(--accent);text-decoration:none;font-size:14px;font-weight:650}.module-action:hover{border-color:var(--accent)}
.module-editor{padding:32px 0 60px}.module-editor>h1{font-size:clamp(30px,5vw,50px);margin:8px 0 28px}.module-editor .control-card{margin-bottom:20px;min-width:0}.module-editor .essay-editor{grid-column:auto}.module-editor .control-card>form:not(#collector-config){display:grid;gap:14px}.module-editor input:not([type=checkbox]),.module-editor textarea{min-width:0;max-width:100%;padding:12px;border:1px solid var(--line);border-radius:8px;background:var(--input-bg);color:var(--ink);font:inherit}.module-editor button{justify-self:start}.module-editor .task-status{white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;line-height:1.7;color:var(--muted)}
@media(max-width:900px){html[data-authenticated="true"] .module-layout{grid-template-columns:1fr;gap:16px}.module-sidebar{position:static}.module-sidebar .module-links{flex-direction:row;flex-wrap:wrap}.module-sidebar .module-admin{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.module-sidebar .module-admin .sidebar-label{margin:0}}
nav { display: flex; gap: 28px; }
nav a { color: var(--muted); text-decoration: none; font-size: 14px; }
nav a:hover { color: var(--ink); }
main { width: min(1280px, calc(100% - 44px)); margin: auto; }
.hero { padding: clamp(74px, 12vw, 170px) 0 clamp(72px, 10vw, 130px); }
.eyebrow { color: var(--accent); font-size: 12px; letter-spacing: .18em; font-weight: 750; }
h1 { max-width: 1000px; margin: 20px 0 28px; font-size: clamp(56px, 10vw, 132px); letter-spacing: -.065em; line-height: .91; }
h1 em { color: transparent; -webkit-text-stroke: 1.5px #d7d8da; font-style: normal; }
.intro { max-width: 650px; color: var(--muted); font-size: clamp(17px, 2vw, 21px); line-height: 1.85; }
.actions { display: flex; align-items: center; flex-wrap: wrap; gap: 22px; margin-top: 42px; }
.actions a { text-decoration: none; font-weight: 650; }
.primary { padding: 14px 22px; border-radius: 8px; color: #07100f; background: var(--accent); }
.secondary { color: var(--muted); }
.system-card { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.system-card > div { padding: 40px 34px 48px 0; }
.system-card > div + div { border-left: 1px solid var(--line); padding-left: 34px; }
.system-card .number { color: var(--accent); font: 700 12px ui-monospace, monospace; }
.system-card h2 { margin: 22px 0 12px; font-size: 30px; }
.system-card p:last-child { color: var(--muted); line-height: 1.7; max-width: 270px; }
footer { display: flex; justify-content: space-between; padding: 36px clamp(22px, 6vw, 88px); color: #73777f; font-size: 13px; }
.portal-head { padding: clamp(68px, 10vw, 132px) 0 46px; }
.portal-head h1 { max-width: 1080px; margin-bottom: 0; font-size: clamp(48px, 8vw, 104px); }
.portal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.portal-card { min-height: 260px; display: flex; flex-direction: column; padding: clamp(26px, 4vw, 44px); color: var(--ink); background: #11141a; border: 1px solid var(--line); border-radius: 14px; text-decoration: none; transition: transform .18s ease, border-color .18s ease; }
.portal-card:hover { transform: translateY(-3px); border-color: #4a535e; }
.portal-card.primary-card { background: linear-gradient(145deg, #153c3b, #111c20 65%); border-color: #2f5d58; }
.portal-card > span { color: var(--accent); font: 700 12px ui-monospace, monospace; letter-spacing: .12em; }
.portal-card h2 { margin: 28px 0 12px; font-size: clamp(28px, 4vw, 42px); }
.portal-card p { max-width: 430px; color: var(--muted); line-height: 1.75; }
.portal-card strong { margin-top: auto; font-size: 14px; }
.recent-essays { display: grid; grid-template-columns: .7fr 1.3fr; gap: 50px; padding: 110px 0; }
.recent-essays h2 { margin: 12px 0; font-size: 38px; }
.essay-row { display: flex; justify-content: space-between; gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.essay-row small { color: var(--muted); }
.empty-public { color: var(--muted); line-height: 1.75; }
.essay-index { max-width: 900px; padding: clamp(66px, 10vw, 120px) 0; }
.essay-index > h1 { margin: 16px 0 58px; font-size: clamp(50px, 8vw, 90px); }
.essay-list { border-top: 1px solid var(--line); }
.essay-list-item { display: block; padding: 30px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.essay-list-item small { color: var(--accent); }
.essay-list-item h2 { margin: 10px 0; font-size: 30px; }
.essay-list-item p { color: var(--muted); line-height: 1.7; }
.empty-essays { padding: 54px 0; color: var(--muted); }
.public-article { max-width: 820px; padding: 64px 0 120px; }
.back { color: var(--muted); text-decoration: none; }
.public-article header { height: auto; display: block; padding: 70px 0 32px; border-bottom: 1px solid var(--line); }
.public-article header p { color: var(--accent); }
.public-article h1 { margin: 12px 0; font-size: clamp(44px, 7vw, 76px); line-height: 1.08; }
.article-body { padding-top: 34px; color: #d6d7d8; line-height: 1.9; }
.article-body h1:first-child { display: none; }
.article-body h2, .article-body h3 { margin-top: 2em; color: var(--ink); }
.article-body a { color: #83dacc; text-underline-offset: 4px; }
.article-body pre { overflow: auto; padding: 20px; border: 1px solid var(--line); border-radius: 10px; background: #07090c; }
.article-body code { padding: .12em .35em; border-radius: 4px; background: #20242b; }
.article-body blockquote { margin: 1.5em 0; padding-left: 20px; border-left: 3px solid var(--accent); color: var(--muted); }
@media (max-width: 720px) {
  header { height: 68px; }
  .site-header { height: auto; min-height: 78px; flex-wrap: wrap; gap: 16px; padding-top: 14px; padding-bottom: 14px; }
  .site-header .site-nav { width: 100%; overflow-x: auto; align-items: center; padding-bottom: 4px; }
  .site-header .site-nav a { white-space: nowrap; }
  h1 { font-size: clamp(54px, 18vw, 86px); }
  .system-card { grid-template-columns: 1fr; }
  .system-card > div, .system-card > div + div { padding: 30px 0; border-left: 0; border-top: 1px solid var(--line); }
  .system-card > div:first-child { border-top: 0; }
  .portal-grid, .recent-essays { grid-template-columns: 1fr; }
  .portal-card { min-height: 230px; }
  .recent-essays { gap: 20px; padding: 76px 0; }
  footer { gap: 16px; flex-direction: column; }
}
 .control-hero{padding:clamp(64px,10vw,130px) 0 55px;max-width:850px}.control-hero h1{font-size:clamp(52px,9vw,100px);margin:14px 0 18px;letter-spacing:-.06em}.control-hero>p:last-child{color:var(--muted);font-size:18px;line-height:1.8;max-width:680px}.control-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding-bottom:40px}.control-card{display:flex;flex-direction:column;min-height:260px;padding:28px;border:1px solid var(--line);background:linear-gradient(145deg,#151a24,#10141b);border-radius:16px}.control-card h2{font-size:32px;margin:18px 0 10px}.control-card p{color:var(--muted);line-height:1.75;flex:1}.control-card a,.control-note a{color:var(--accent);text-decoration:none;font-weight:700}.control-card small{color:var(--muted);margin-top:12px}.control-note{padding:30px;border:1px solid var(--line);border-radius:16px;background:#121821;margin-bottom:80px}.control-note h2{margin-top:0}.control-note p{color:var(--muted);line-height:1.8}.learning-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding-bottom:35px}.learning-grid article{padding:28px;border:1px solid var(--line);border-radius:15px;background:#121821;min-height:210px}.learning-grid article>span{color:var(--accent);font-size:12px;letter-spacing:.16em}.learning-grid h2{font-size:28px;margin:14px 0}.learning-grid ul{padding-left:20px;color:var(--muted);line-height:1.9}.control-promo{padding:28px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(120deg,#14231f,#121821);margin:30px 0}.control-promo h2{margin:8px 0}.control-promo p{color:var(--muted)}.control-promo a{color:var(--accent);font-weight:700;text-decoration:none}@media(max-width:760px){.control-grid,.learning-grid{grid-template-columns:1fr}}
.photo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:24px}.photo-grid img{width:100%;height:auto;display:block;border-radius:8px}.photo-grid figure{margin:0}.photo-grid figcaption{padding:12px 0;color:var(--muted)}.photo-card{color:inherit;text-decoration:none}.photo-card img{aspect-ratio:4/3;object-fit:cover}
/* Private essay editor */
.essay-editor{grid-column:span 2}
.essay-editor form{display:grid;gap:10px}
.essay-editor input,.essay-editor textarea{width:100%;background:#10141c;color:inherit;border:1px solid #303847;border-radius:8px;padding:11px;font:inherit}
.essay-content{width:100%;min-height:280px;max-height:70vh;overflow:auto;background:#10141c;color:inherit;border:1px solid #303847;border-radius:8px;padding:16px;font:inherit;line-height:1.8}
.essay-content:empty:before{content:attr(data-placeholder);opacity:.5;pointer-events:none}
.essay-content:focus{outline:2px solid #69a7ff;border-color:transparent}
.essay-content h2{font-size:1.5rem}.essay-content blockquote{border-left:3px solid #69a7ff;padding-left:14px;opacity:.8}
.essay-content img{display:block;max-width:100%;max-height:480px;object-fit:contain;margin:12px 0}
.essay-content.preview-mode{background:#0d1118}
.source-settings{grid-column:1/-1;min-height:0}.source-settings form{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.source-settings fieldset{min-width:0;border:1px solid var(--line);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:12px}.source-settings legend{padding:0 7px;color:var(--accent);font-weight:700}.source-settings label{display:flex;flex-direction:column;gap:6px;color:var(--muted);font-size:14px}.source-settings input:not([type=checkbox]),.source-settings select,.source-settings textarea{width:100%;background:var(--input-bg);color:inherit;border:1px solid var(--line);border-radius:8px;padding:10px;font:inherit}.source-settings label:has(input[type=checkbox]),.source-settings .checkbox-row label{display:flex;flex-direction:row;align-items:center;gap:8px}.source-settings .checkbox-row{display:flex;flex-wrap:wrap;gap:12px}.source-settings button{justify-self:start}.source-settings .editor-status{grid-column:1/-1;margin:0}.source-settings small{line-height:1.6}
@media(max-width:900px){.source-settings form{grid-template-columns:1fr}}
.essay-editor textarea{min-height:260px;resize:vertical;line-height:1.7}
.editor-toolbar{display:flex;gap:6px;flex-wrap:wrap}
.editor-toolbar button{min-width:34px;padding:7px 10px;border:1px solid #3a4352;border-radius:6px;background:#1b2230;color:inherit;cursor:pointer}
.essay-preview{white-space:pre-wrap;border:1px solid #303847;border-radius:8px;padding:14px;line-height:1.7;background:#0d1118}
.essay-editor form>button{justify-self:start}
.editor-status{min-height:1.4em;color:#56e0d0;font-size:.9rem}
.article-body h1,.article-body h2,.article-body h3{color:var(--ink);line-height:1.4;margin:2em 0 .8em}
.article-body p{line-height:1.9;margin:1.15em 0}
.article-body img{display:block;max-width:100%;height:auto;margin:1.5em auto;border-radius:10px}
.article-body figure{margin:2em 0}.article-body figcaption{text-align:center;color:var(--muted);font-size:.92em}
.article-body blockquote{margin:1.5em 0;padding:.35em 1.2em;border-left:3px solid var(--accent);color:var(--muted);background:rgba(255,255,255,.035)}
.article-body ul,.article-body ol{padding-left:1.6em;line-height:1.9}.article-body li{padding:.2em 0}
.article-body table{width:100%;border-collapse:collapse;margin:1.5em 0}.article-body th,.article-body td{padding:.65em;border:1px solid var(--line);text-align:left}
.article-body hr{border:0;border-top:1px solid var(--line);margin:2.5em 0}
@media(max-width:700px){.essay-editor{grid-column:auto}}
.umo-editor-frame{display:block;width:100%;height:min(82vh,920px);min-height:620px;border:1px solid var(--line);border-radius:12px;background:#fff}
@media(max-width:700px){.umo-editor-frame{height:76vh;min-height:520px}}

/* Site-wide appearance: dark by default, with an accessible light theme. */
:root {
  --page-bg: #0a0c10;
  --surface: #11141a;
  --surface-raised: #151a24;
  --input-bg: #10141c;
  --hero-glow: #18353c;
  --code-bg: #07090c;
}
:root[data-theme="light"] {
  color-scheme: light;
  --ink: #1f2937;
  --muted: #5f6d7b;
  --line: #d8e0e8;
  --accent: #087e73;
  --page-bg: #f5f7fa;
  --surface: #ffffff;
  --surface-raised: #edf2f6;
  --input-bg: #ffffff;
  --hero-glow: #dff2ee;
  --code-bg: #e9eef3;
}
body {
  background: radial-gradient(circle at 80% 20%, var(--hero-glow) 0, transparent 25rem), var(--page-bg);
}
.brand .mark { color: var(--page-bg); }
footer { color: var(--muted); }
.portal-card { background: var(--surface); }
.control-card,.control-note,.learning-grid article,.control-promo { background: var(--surface-raised); }
.article-body { color: var(--ink); }
.article-body a { color: var(--accent); }
.article-body pre { background: var(--code-bg); }
.article-body code { background: var(--surface-raised); }
.essay-editor input,.essay-editor textarea,.essay-content,.essay-preview {
  background: var(--input-bg);
  color: var(--ink);
  border-color: var(--line);
}
.umo-editor-frame { background: var(--surface); border-color: var(--line); }
.theme-toggle {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 12px;
  color: var(--ink);
  background: var(--surface);
  font: inherit;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
}
.theme-toggle:hover { border-color: var(--accent); }
:root[data-theme="light"] h1 em { -webkit-text-stroke-color: var(--muted); }
:root[data-theme="light"] .portal-card.primary-card {
  background: linear-gradient(145deg, #e3f5f1, #ffffff 68%);
  border-color: #b9dcd4;
}
.login-page{min-height:100vh;display:grid;place-items:center;padding:32px 18px}.login-wrap{width:min(100%,460px);display:grid;justify-items:center;gap:24px}.login-brand{display:flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none;font-size:13px;font-weight:750;letter-spacing:.08em}.login-brand:first-letter{font-size:22px;color:var(--accent)}.login-card{width:100%;padding:clamp(26px,6vw,44px);border:1px solid var(--line);border-radius:20px;background:var(--surface-raised);box-shadow:0 24px 70px #0002}.login-card h1{margin:8px 0 12px;font-size:clamp(32px,7vw,44px);letter-spacing:-.04em}.login-intro,.login-footnote{color:var(--muted);line-height:1.7}.login-card form{display:grid;gap:18px;margin-top:26px}.login-card label{display:grid;gap:8px;color:var(--muted);font-size:14px}.login-card input{width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:10px;background:var(--input-bg);color:var(--ink);font:inherit}.login-card input:focus{outline:2px solid var(--accent);outline-offset:1px}.login-card button{width:100%;padding:13px;border:0;border-radius:10px;background:var(--accent);color:#fff;font:inherit;font-weight:700;cursor:pointer}.login-message{min-height:1.5em;margin:10px 0;color:var(--muted)}.login-message[data-state="error"]{color:#d05050}.login-message[data-state="success"]{color:var(--accent)}.login-footnote{margin:18px 0 0;font-size:12px}.login-home{color:var(--muted);text-decoration:none;font-size:14px}
@media (max-width: 720px) {
  nav { gap: 12px; }
  .theme-toggle { padding: 7px 9px; font-size: 12px; }
}