:root {
  color-scheme: dark;
  --bg: #121212; --rail: #191919; --card: #202020; --raised: #2b2b2b; --field: #171717;
  --ink: #fffaf0; --muted: #c6c1b9; --line: #454341;
  --accent: #ff7c84; --solid: #c32136; --on-solid: #fffaf4; --good: #f2e2c5;
  --ad-bg: #2d2423; --user-bg: #3c2728;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body[data-theme="cream"], body[data-theme="paper"] {
  color-scheme: light;
  --bg:#f7f1e4; --rail:#eee3cc; --card:#fff9ed; --raised:#f0e5d3; --field:#fffdf8;
  --ink:#1e1c1a; --muted:#55504a; --line:#c5b8a4;
  --accent:#a31429; --solid:#b31b30; --on-solid:#fff; --good:#393330;
  --ad-bg:#f1e1ca; --user-bg:#f8e1dd;
}
body[data-theme="graphite"] { --bg:#242424; --rail:#2b2b2b; --card:#343434; --raised:#414141; --field:#222; --line:#5e5e5e; }
body[data-theme="paper"] { --bg:#f3f3f3; --rail:#e6e6e6; --card:#fff; --raised:#efefef; --field:#fff; --line:#bdbdbd; --ad-bg:#eee7e5; }
body[data-theme="midnight"] { --bg:#080808; --rail:#101010; --card:#171717; --raised:#242424; --field:#0b0b0b; --line:#3c3c3c; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink); min-height:100vh; }
button, input, select, textarea { font: inherit; }
button, a, select, summary { -webkit-tap-highlight-color: transparent; }
button { cursor:pointer; }
a { color:var(--accent); }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible { outline:2px solid var(--good); outline-offset:3px; }
h1,h2,h3,p { margin:0; }
p { line-height:1.55; }
h1 { font-size:clamp(30px,4vw,51px); letter-spacing:-.055em; line-height:1.04; }
h2 { font-size:23px; letter-spacing:-.035em; }
h3 { font-size:17px; letter-spacing:-.02em; }
small,.muted { color:var(--muted); }
code,pre,.mono { font-family: "SFMono-Regular", Consolas, monospace; }
code { color:var(--good); }
pre { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; }
.pixel { image-rendering:pixelated; object-fit:contain; vertical-align:middle; }
.startup { padding:36px; }
.skip { position:fixed; left:12px; top:-70px; z-index:99; padding:10px; background:var(--card); }
.skip:focus { top:12px; }
.layout { display:grid; grid-template-columns:224px minmax(0,1fr); min-height:100vh; }
.rail { background:var(--rail); border-right:1px solid var(--line); padding:22px 15px 17px; position:sticky; top:0; height:100dvh; display:flex; flex-direction:column; gap:24px; }
.logo { display:flex; align-items:center; gap:10px; color:var(--ink); font-weight:850; letter-spacing:-.055em; font-size:21px; text-decoration:none; }
.logoMark { display:grid; place-items:center; width:36px; height:36px; border-radius:11px; background:var(--solid); color:var(--on-solid); }
.logoMark svg { width:22px; height:22px; }
.nav { display:grid; gap:5px; }
.navLabel { padding:0 9px 7px; }
.kicker,.navLabel { font:700 10px/1.35 "SFMono-Regular",Consolas,monospace; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); }
.navLabel { color:var(--muted); }
.nav a { display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--muted); border:1px solid transparent; border-radius:9px; padding:9px; font-size:14px; font-weight:650; }
.nav a:hover,.nav a.active { background:var(--raised); color:var(--ink); border-color:var(--line); }
.nav a.active svg { color:var(--accent); }
.railEnd { margin-top:auto; display:grid; gap:12px; }
.usage { padding:12px; border:1px solid var(--line); border-radius:12px; background:var(--card); display:grid; gap:6px; }
progress { width:100%; accent-color:var(--accent); height:7px; }
.shell { min-width:0; }
.topbar { min-height:62px; display:flex; justify-content:space-between; align-items:center; gap:10px; padding:12px clamp(16px,4vw,43px); border-bottom:1px solid var(--line); }
.topbar small { display:flex; gap:8px; align-items:center; }
.dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--good); box-shadow:0 0 12px #fff1d05e; }
.top-actions,.row { display:flex; align-items:center; flex-wrap:wrap; gap:9px; }
.top-actions { justify-content:flex-end; }
.content { padding:clamp(18px,3.1vw,38px) clamp(16px,4vw,43px) 100px; max-width:1420px; margin:auto; display:grid; gap:22px; }
.auth-content { max-width:710px; }
[data-captcha-status]:empty { display:none; }
.hero { min-height:255px; padding:clamp(20px,4.2vw,46px); border:1px solid #754247; border-radius:21px; display:grid; grid-template-columns:minmax(0,1fr) minmax(145px,.42fr); align-items:center; gap:10px; overflow:hidden; background: radial-gradient(ellipse at 85% 23%,#772c34 0%,transparent 54%),linear-gradient(127deg,#331b1d,#1e1918 65%); }
.heroCopy,.stack { display:grid; gap:13px; }
.hero p { color:#ebdfd2; max-width:49ch; }
.heroArt { position:relative; min-height:175px; display:grid; place-items:center; isolation:isolate; }
.heroArt::before { content:""; position:absolute; inset:0 0 4px; background-image:linear-gradient(#ffbbb920 1px,transparent 1px),linear-gradient(90deg,#ffbbb920 1px,transparent 1px); background-size:18px 18px; mask-image:radial-gradient(ellipse,#000 25%,transparent 74%); z-index:-1; }
.heroArt img { width:min(152px,80%); filter:drop-shadow(0 10px 22px #0a0606b0); animation:float 5s ease-in-out infinite; }
.signal { position:absolute; right:1%; bottom:0; background:#2b1b1c; border:1px solid #925359; padding:5px 8px; border-radius:8px; color:#f5dcc7; font-size:10px; }
@keyframes float { 50% { transform:translateY(-7px); } }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; color:var(--ink); background:var(--raised); border:1px solid var(--line); border-radius:9px; padding:8px 12px; min-height:36px; font-size:13px; font-weight:750; text-decoration:none; }
.btn:hover { border-color:var(--accent); }
.btn:active { transform:translateY(1px); }
.btn.primary { color:var(--on-solid); background:var(--solid); border-color:var(--solid); }
.btn.danger { color:var(--accent); border-color:var(--accent); }
.btn:disabled { opacity:.55; cursor:default; }
svg { width:17px; height:17px; flex:none; }
.grid3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:15px; padding:17px; min-width:0; }
a.card { text-decoration:none; color:var(--ink); }
a.card:hover { border-color:var(--accent); transform:translateY(-2px); }
.card, .btn { transition:transform .16s ease,border-color .16s ease; }
.cardIcon { display:inline-grid; place-items:center; width:34px; height:34px; border:1px solid var(--line); background:var(--raised); border-radius:10px; color:var(--accent); }
.actionCard { display:grid; grid-template-columns:36px minmax(0,1fr) 15px; align-items:center; gap:9px; }
.actionCard small { display:block; margin-top:2px; font-size:12px; }
.sectionHead { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.twoCol { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(220px,1fr); gap:14px; }
.project { padding:12px 0; display:flex; justify-content:space-between; align-items:center; gap:12px; border-bottom:1px solid var(--line); }
.project:last-child { border-bottom:0; padding-bottom:2px; }
.project .row { min-width:0; }
.project strong { overflow-wrap:anywhere; }
.badge { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:750; color:var(--accent); border:1px solid var(--line); background:var(--raised); padding:4px 8px; border-radius:999px; }
.ad { background:var(--ad-bg); }
.ad .kicker { color:var(--accent); }
.event { display:grid; gap:3px; border-bottom:1px solid var(--line); padding:8px 0; font-size:13px; }
.event:last-child { border:0; }
.community { max-width:960px; }
.community-copy { white-space:pre-wrap; overflow-wrap:anywhere; }
.community-reply { margin-inline-start:1.4rem; padding-inline-start:1rem; border-inline-start:1px solid var(--line); }
.community .event .btn { justify-self:start; }
.community-media { display:block; max-width:min(100%,640px); max-height:380px; border-radius:10px; }
.community details[open] > * + * { margin-top:10px; }
[hidden] { display:none !important; }
.pageTitle { display:grid; gap:8px; }
.pageTitle p { color:var(--muted); }
.price { font-size:35px; font-weight:850; letter-spacing:-.06em; }
.price small { font-size:12px; letter-spacing:0; font-weight:500; }
.plan { display:flex; flex-direction:column; gap:13px; }
.plan.featured { border-color:var(--accent); background:linear-gradient(155deg,var(--ad-bg),var(--card) 75%); }
.plan ul { margin:0; padding:0 0 0 17px; color:var(--muted); font-size:14px; line-height:1.6; }
.plan .btn { margin-top:auto; }
label { color:var(--muted); font-size:13px; font-weight:650; display:grid; gap:6px; }
label.check { display:flex; align-items:center; gap:8px; }
input,select,textarea { background:var(--field); color:var(--ink); border:1px solid var(--line); border-radius:8px; padding:9px 10px; min-width:0; }
textarea { resize:vertical; width:100%; }
input[type="checkbox"],input[type="radio"] { accent-color:var(--accent); }
input[type="file"] { max-width:100%; }
.inlineForm { display:flex; align-items:flex-end; gap:9px; flex-wrap:wrap; }
.inlineForm label { flex:1; min-width:145px; }
.chat { min-height:430px; display:grid; grid-template-rows:auto minmax(185px,1fr) auto; gap:12px; }
.chatLog { display:grid; gap:14px; align-content:start; max-height:50vh; overflow:auto; padding:9px 4px; }
.message { display:flex; align-items:flex-start; gap:10px; }
.message.user { flex-direction:row-reverse; }
.message img { width:36px; }
.bubble { background:var(--raised); border-radius:12px; padding:10px 12px; min-width:0; max-width:86%; }
.message.user .bubble { background:var(--user-bg); }
.bubble p { white-space:pre-wrap; overflow-wrap:anywhere; font-size:14px; }
.bubble small { display:block; margin-bottom:4px; font-size:11px; }
.composer { display:grid; gap:8px; }
.editor { min-height:300px; font:13px/1.55 "SFMono-Regular",Consolas,monospace; }
.fileList { display:grid; align-content:start; gap:5px; max-height:330px; overflow:auto; }
.fileList button { text-align:left; overflow-wrap:anywhere; justify-content:flex-start; }
.console,.review { background:var(--field); border:1px solid var(--line); color:var(--good); padding:12px; border-radius:9px; max-height:270px; overflow:auto; font-size:13px; }
.review { color:var(--ink); }
.supportDock { position:fixed; z-index:5; right:19px; bottom:17px; display:grid; justify-items:end; gap:10px; }
.supportToggle { border:1px solid #9b5559; box-shadow:0 8px 26px #0008; border-radius:999px; padding:5px 13px 5px 6px; background:#351d20; color:#fff8ed; }
.supportToggle img { width:31px; }
.supportPanel { width:min(365px,calc(100vw - 32px)); display:grid; gap:10px; box-shadow:0 12px 40px #0009; }
.supportPanel .chatLog { max-height:33vh; }
.supportPanel textarea { min-height:65px; }
#toast { position:fixed; bottom:20px; left:50%; z-index:12; transform:translateX(-50%); max-width:calc(100vw - 30px); }
#toast:not(:empty) { padding:10px 15px; background:var(--raised); border:1px solid var(--accent); border-radius:10px; box-shadow:0 6px 30px #0007; }
dialog { background:var(--card); color:var(--ink); border:1px solid var(--accent); border-radius:16px; max-width:min(670px,calc(100vw - 28px)); max-height:85vh; padding:20px; }
dialog::backdrop { background:#070606bf; }
@media (max-width:960px) {
  .layout { grid-template-columns:172px minmax(0,1fr); }
  .rail { padding-inline:10px; }
  .grid3,.twoCol { grid-template-columns:1fr; }
  .grid3 .plan { min-height:0; }
}
@media (max-width:640px) {
  .layout { display:block; }
  .rail { height:auto; position:static; border-right:0; border-bottom:1px solid var(--line); gap:10px; padding:10px 13px; }
  .rail .nav { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; padding:2px; }
  .rail .nav a { padding:6px 4px; gap:5px; font-size:12px; }
  .rail .navLabel,.railEnd { display:none; }
  .hero { grid-template-columns:minmax(0,1fr) 68px; min-height:220px; }
  .heroArt { min-height:95px; }
  .signal { display:none; }
  .topbar { padding-inline:13px; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; } }
body[data-motion="off"] *,body[data-motion="off"] *::before,body[data-motion="off"] *::after { animation:none!important; transition:none!important; }

.hero h1 { color:#fffaf0; }
.hero .kicker { color:#ff9699; }
.hero .btn:not(.primary) { background:#2d2524; color:#fffaf0; border-color:#655451; }
.hero .btn:not(.primary):hover { border-color:#f08b92; }

.aboutHero .aboutIntro { max-width:64ch; }
.aboutDetails { grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width:640px) {
  .aboutDetails { grid-template-columns:1fr; }
}

.storeControls { display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center; }
.storeControls small { display:block; margin-top:4px; }
.billingToggle { display:flex; flex-wrap:wrap; gap:4px; padding:4px; margin:0; border:1px solid var(--line); border-radius:12px; background:var(--field); }
.billingToggle legend,.adTopics legend { padding-inline:4px; color:var(--muted); font-size:12px; }
.billingToggle label { display:flex; align-items:center; gap:5px; padding:6px 9px; border:1px solid transparent; border-radius:8px; cursor:pointer; }
.billingToggle input { accent-color:var(--solid); margin:0; }
.billingToggle label:has(input:checked) { background:var(--raised); border-color:var(--line); color:var(--ink); }
.plansGrid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.plan { padding:clamp(13px,1.6vw,19px); }
.plan.currentPlan { box-shadow:inset 0 0 0 1px var(--line); }
.plan.featured { box-shadow:inset 0 3px 0 var(--solid); }
.planNumbers { display:grid; gap:0; margin:0; padding:6px 0; border-block:1px solid var(--line); }
.planNumbers div { display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 8px; padding:5px 0; font-size:12px; }
.planNumbers dt { color:var(--muted); }
.planNumbers dd { margin:0; font-weight:750; font-variant-numeric:tabular-nums; }
.checkoutInfo { max-width:76ch; }
.adPlacement { display:grid; justify-items:start; gap:8px; }
.adPlacement .btn { margin-top:2px; }
.adTopics { display:grid; gap:7px; min-width:0; margin:0; border:1px solid var(--line); border-radius:9px; padding:10px; }
.adTopics[hidden] { display:none; }
.adTopics .check input { margin-inline:0; }
.chatTools { display:grid; gap:13px; }
.speedControl { display:grid; grid-template-columns:56px minmax(0,1fr); align-items:center; gap:12px; padding:10px 12px; background:var(--field); border:1px solid var(--line); border-radius:11px; }
.speedBody { display:grid; gap:5px; }
.speedBody output { color:var(--accent); font-size:12px; font-weight:750; }
.speedBody input { padding:0; width:100%; margin:0; accent-color:var(--solid); cursor:pointer; }
.speedBody input:disabled { cursor:default; }
.speedBody small { font-size:11px; line-height:1.35; }
.speedDial { position:relative; width:52px; height:52px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; background:conic-gradient(from 235deg,var(--solid),var(--accent) 54%,var(--raised) 54%); }
.speedDial::before { content:""; position:absolute; inset:4px; border:1px solid var(--line); border-radius:50%; background:var(--card); }
.speedDial span { position:relative; width:32px; height:32px; border-radius:50%; background:var(--raised); transform:rotate(var(--dial-angle,0deg)); transition:transform .18s ease; }
.speedDial span::before { content:""; position:absolute; width:3px; height:10px; top:3px; left:calc(50% - 1.5px); background:var(--accent); border-radius:3px; }
.speedDial[data-position="0"] { --dial-angle:-120deg; }
.speedDial[data-position="1"] { --dial-angle:-80deg; }
.speedDial[data-position="2"] { --dial-angle:-40deg; }
.speedDial[data-position="4"] { --dial-angle:40deg; }
.speedDial[data-position="5"] { --dial-angle:80deg; }
.speedDial[data-position="6"] { --dial-angle:120deg; }
.composeFooter { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:8px; }
.promptCount { color:var(--muted); font-size:12px; font-variant-numeric:tabular-nums; }
.promptCount[data-near="true"] { color:var(--accent); }
.promptCount[data-over="true"] { font-weight:750; }
textarea[aria-invalid="true"] { border-color:var(--accent); }
.supportGrid { display:grid; grid-template-columns:minmax(215px,.8fr) minmax(0,1.45fr); align-items:start; gap:14px; }
.caseList { display:grid; gap:7px; max-height:58vh; overflow:auto; padding:3px; }
.caseRow { display:grid; justify-items:start; gap:6px; min-width:0; padding:10px; color:var(--ink); background:var(--field); border:1px solid var(--line); border-radius:9px; text-align:left; }
.caseRow strong,.caseRow small { overflow-wrap:anywhere; }
.caseRow:hover,.caseRow[aria-pressed="true"] { border-color:var(--accent); background:var(--raised); }
.caseFields { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:end; gap:8px; }
.caseFields button { grid-column:1 / -1; justify-self:start; }
.badge[data-priority="high"] { border-color:var(--accent); }
.badge[data-priority="urgent"] { color:var(--on-solid); background:var(--solid); border-color:var(--solid); }
.supportPanel #buddyStatus { gap:5px; }
@media (max-width:1210px) {
  .plansGrid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:920px) {
  .supportGrid { grid-template-columns:1fr; }
  .caseList { max-height:36vh; }
}
@media (max-width:550px) {
  .plansGrid,.caseFields { grid-template-columns:1fr; }
}

.ownerFilter { align-items:end; }
.ownerFilter label:first-child { flex:1 1 230px; }
.account-results { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); gap:14px; padding:0; margin:0; list-style:none; }
.account-results li { overflow-wrap:anywhere; }
.account-results p { margin:3px 0 0; }
.account-results dl { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:0; }
.account-results dl div:first-child { grid-column:1/-1; }
.account-results dt { color:var(--muted); font-size:.85rem; }
.account-results dd { margin:2px 0 0; }
.featureReview { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(225px,100%),1fr)); gap:12px; }
.featureReview dt { font-weight:700; }
.featureReview dd { margin:3px 0 0; color:var(--muted); overflow-wrap:anywhere; }
.featureDetails { white-space:pre-wrap; overflow-wrap:anywhere; margin-top:10px; }
.ledgerTable { overflow-x:auto; }
.ledgerTable table { width:100%; border-collapse:collapse; text-align:left; }
.ledgerTable th,.ledgerTable td { padding:8px 10px; border-bottom:1px solid var(--line); white-space:nowrap; }