/* The Fart Lodge. Dark by default, including browsers using a light OS theme. */
:root {
  color-scheme: dark;
  --cream: #101510;
  --paper: #1c241d;
  --ink: #f2f5e9;
  --muted: #abb8a5;
  --berry: #d4f879;
  --pink: #ffa5c8;
  --green: #c1ed83;
  --line: #354435;
  --orange: #ffb47e;
  --shadow: 0 10px 28px #00000030, inset 0 1px 0 #ffffff08;
  font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
  background: var(--cream);
}
body { background: #101510; }
h1,h2,h3 { font-weight: 900; letter-spacing: -.055em; }
h1 { font-family: 'Arial Black', 'Segoe UI', sans-serif; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline-color: #ffa5c8; }
.sidebar { width: 235px; background: #151c15; border-color: #33412c; padding-top: 34px; }
.brand { color: #f4f7e8; font-size: 24px; letter-spacing: -1.2px; }
.brand-dot { color: #d4f879; font-weight: 800; }
.brand-icon { color: #182510; background: linear-gradient(145deg,#e3ff9d 2%,#b5db61 72%,#8cb94c); border-radius: 16px; box-shadow: inset 0 2px 1px #ffffffc0,inset 0 -3px 1px #547c3650,0 4px 0 #080c08; }
.side-label { color: #a6b88f; font-size: 9px; margin-top: 42px; }
nav { gap: 7px; }
nav a { color: #b1c1a6; font-size: 14px; border: 1px solid transparent; }
nav a b { font-weight: 700; }
nav a:hover { color: #f4f6e9; background: #263326; }
nav a.active { color: #d4f879; border-color: #627e3a; background: linear-gradient(140deg,#34472a,#253321); box-shadow: inset 0 1px 0 #d4f87922,0 3px 0 #090e09; }
.side-note { position: relative; overflow: hidden; background: #243021; border: 1px solid #4c6338; border-radius: 24px; transform: rotate(-3deg); margin-top: 36px; padding: 23px 12px; box-shadow: 0 5px 0 #0a0f0a; }
.side-note::after { content:'✦'; position:absolute; top:19px; right:19px; color:#ffb47e; font-size:17px; }
.side-note > span { font-size: 35px; }
.side-note p { color: #dfefca; font-size: 20px; line-height: 1.15; font-weight: 900; letter-spacing: -.05em; margin: 13px 0 18px; }
.side-note small { color: #b1c79a; font-size: 7px; letter-spacing: .1em; }
.install-button { color: #d4f879; font-size: 11px; }
.profile { border-color: var(--line); }
.profile strong { color: #f2f5e9; }
.profile small { font-size: 9px; }
.avatar { background: #3e4e2b; color: #d4f879; border: 1px solid #60723f; }
.icon-button { color: #b9c6ac; }
.icon-button:hover { color: #f5f9ed; background: #384533; }
.main-wrap { margin-left: 235px; width: calc(100% - 235px); background: radial-gradient(ellipse at 85% 0,#26352044,transparent 45%),#101510; }
.topbar { height: 86px; background: #131a13d9; border-color: #303c2c; }
.top-location { color: #b9c7aa; font-size: 12px; font-weight: 700; }
.top-location span { color: #ffa5c8; }
.trip-dates { color: #d0d8c5; background: #202a20; border-color: #3e4c35; }
.avatar-stack span { border-color: #151c15; background: #f0ba82; color: #35251a; }
.avatar-stack span:nth-child(2) { background:#d4f879; color:#283514; }
.avatar-stack span:nth-child(3) { background:#ffa5c8; color:#502337; }
.avatar-stack span:nth-child(4) { background:#c1b6ff; color:#38265d; }
main { padding-top: 35px; }
.page-heading { margin-bottom: 27px; }
.page-heading h1 { font-size: 39px; line-height: 1.1; margin: 4px 0 10px; }
.page-heading .eyebrow { color: #b2d58d; font-size: 9px; letter-spacing: .15em; margin-bottom: 12px; }
.page-heading p { color: #b0bea5; font-size: 13px; }
.tag { color:#d3e1c2; background:#263021; border:1px solid #4c5c3a; border-radius:9px; font-size:8px; padding:9px 12px; letter-spacing:.06em; }
.hero { isolation: isolate; min-height: 365px; padding: 38px; border-radius: 32px; border: 2px solid #506c35; background: radial-gradient(ellipse at 90% 95%,#729d304d,transparent 58%),linear-gradient(120deg,#1e2b1c 0%,#293d20 60%,#1d2b19); box-shadow: inset 0 2px 0 #b5df7c25,0 10px 0 #080d08,0 20px 40px #0003; }
.hero::before { content:''; position:absolute; width:270px; height:270px; right:-80px; top:-130px; border:40px solid #7f9c4721; border-radius:50%; z-index:-1; }
.hero-content { width: 60%; z-index: 3; }
.hero .eyebrow { font-size: 9px; color: #d5e8b9; letter-spacing:.13em; border-color:#667f42; background:#17241477; padding:9px 12px; margin-bottom:22px; border-radius:9px; }
.hero h1 { color:#f5f7e8; font-size:clamp(46px,5vw,72px); line-height:.99; font-weight:900; letter-spacing:-.065em; margin-bottom:20px; }
.hero h1 em { font:inherit; color:#d4f879; text-shadow: 0 5px 0 #08100666; }
.hero p { color:#c0d1ac; font-size:13px; line-height:1.8; max-width:355px; margin-bottom:24px; }
.button { font-weight: 800; border-radius: 14px; transition: transform .15s, box-shadow .15s; }
.primary,.hero .button { color:#1b2911; background:linear-gradient(165deg,#e4ff9e 0%,#cff16f 65%,#b5da53); box-shadow:inset 0 2px 0 #f5ffd5, inset 0 -2px 0 #7fa64155,0 4px 0 #080e08; border:1px solid #e0ffa0; }
.primary:hover,.hero .button:hover { box-shadow:inset 0 2px 0 #fff7,0 6px 0 #080e08,0 10px 25px #b5df7c18; }
.hero .button { min-height:46px; font-size:12px; padding:13px 20px; }
.secondary { color:#e0e8d5; background:#303d2b; border:1px solid #526145; box-shadow:inset 0 1px 0 #ffffff09; }
.text-button { color:#d4f879; }
.hero-spark { right:42%; top:40%; color:#ffb47e; font-size:35px; z-index:1; transform:rotate(10deg); }
.floating-note { right:25px; top:25px; bottom:auto; color:#271522; background:linear-gradient(155deg,#ffd6e4,#ff9bc4); border:2px solid #ffe0eb; border-radius:17px; padding:12px 17px; transform:rotate(9deg); box-shadow:0 6px 0 #0a110d55; font-size:10px; z-index:4; }
.floating-note span { font-size:25px; font-weight:900; line-height:1.1; letter-spacing:-.05em; margin-bottom:4px; }
.gas-scene { position:absolute; right:2%; bottom:3px; width:43%; height:92%; pointer-events:none; z-index:2; }
.gas-mascot { position:absolute; width:100%; height:100%; bottom:-5px; right:0; overflow:visible; filter:drop-shadow(0 14px 14px #08110755); }
.mascot-caption { position:absolute; bottom:35px; left:22%; color:#dcf2c0; font-size:8px; font-weight:800; letter-spacing:.12em; transform:rotate(-5deg); white-space:nowrap; }
.orbit { position:absolute; color:#ffd0a3; font-size:30px; z-index:3; }
.orbit-one { top:24%; left:7%; transform:rotate(12deg); }
.orbit-two { bottom:26%; right:0; font-size:19px; color:#ffa5c8; }
.gas-mini { position:absolute; font-size:31px; opacity:.75; }
.gas-mini-one { top:18%; left:38%; transform:rotate(-20deg); }
.gas-mini-two { bottom:15%; left:0; font-size:24px; }
.vent-button { position:absolute; right:31px; bottom:17px; z-index:5; padding:8px 12px; min-height:35px; color:#c4d9ab; border:1px solid #7c9c4e; background:#152611; border-radius:20px; font-size:9px; font-weight:800; box-shadow:inset 0 1px 0 #ffffff16; }
.vent-button:hover { color:#f0ffc7; background:#354b24; }
.venting .gas-mini-one { animation: let-it-rip 1.8s ease-out; }
.venting .gas-mini-two { animation: let-it-rip 1.8s .12s ease-out; }
.venting .puff-cloud { animation: cheeky-wobble .7s ease-in-out; transform-origin: 50% 50%; }
@keyframes let-it-rip { 0%{opacity:.8;transform:translate(0,0) scale(1)} 70%{opacity:.55} 100%{opacity:0;transform:translate(-100px,-45px) scale(2.3) rotate(-25deg)} }
@keyframes cheeky-wobble { 20%{transform:rotate(-7deg) scale(.95,1.06)} 50%{transform:rotate(5deg) scale(1.06,.94)} 75%{transform:rotate(-3deg)} }
.trip-strip { margin-top:25px; margin-bottom:32px; background:#1c251b; border-color:#3a4b32; border-radius:22px; padding:23px; box-shadow:var(--shadow); }
.strip-cell { border-color:#415037; }
.strip-cell strong { font-size:16px; font-weight:900; letter-spacing:-.025em; }
.strip-cell small { color:#b5c3a6; font-size:9px; line-height:1.4; }
.strip-icon { color:#f5c29b; background:#473528; box-shadow:inset 0 1px 0 #ffffff10; border-radius:13px; }
.strip-cell:nth-child(2) .strip-icon { color:#d4f879; background:#39482b; }
.strip-cell:nth-child(3) .strip-icon { color:#ffb1ce; background:#4a2b3b; }
.strip-cell:nth-child(4) .strip-icon { color:#d3c8ff; background:#373043; }
.section-heading { margin-bottom:17px; }
.section-heading h2 { font-size:23px; letter-spacing:-.04em; }
.card { background:linear-gradient(145deg,#232d20,#1b231b); border:1px solid #3c4c33; border-radius:24px; box-shadow:var(--shadow); }
.card-tint { background:linear-gradient(140deg,#302733,#211e27); border-color:#5f4258; }
.card h3 { font-size:19px; color:#f1f5e6; }
.card p { color:#b9c6ae; font-size:12px; }
.mini-heading h3 { font-size:18px; }
.mini-heading small { color:#b3c09f; }
.card-tint .mini-heading small { color:#ccadc8; }
.mini-row { border-color:#3c4a32; }
.mini-row strong { font-size:13px; }
.mini-row small { color:#b5c3a8; line-height:1.5; }
.mini-date { background:#3f3127; color:#ffd1a3; border:1px solid #72533a; border-radius:12px; }
.mini-date small { color:#ffd1a3; }
.quick-links { gap:14px; }
.quick-link { background:#30281e; border-color:#665036; border-radius:20px; box-shadow:inset 0 1px 0 #ffffff09,0 4px 0 #080d08; padding:18px 15px; }
.quick-link:nth-child(2) { background:#312230; border-color:#64435e; }
.quick-link:nth-child(3) { background:#23301f; border-color:#4c6538; }
.quick-link strong { font-size:12px; color:#f2eddc; }
.quick-link small { color:#c1b5a3; line-height:1.5; }
.quick-link:nth-child(2) small { color:#cfb1ca; }
.quick-link:nth-child(3) small { color:#b6cba5; }
.quick-link > b { color:#d4f879; }
footer { color:#9cae90; font-size:10px; }
footer span { color:#c2d4b1; }
.section-intro { color:#efcfaf; border-color:#705137; background:#32291f; border-radius:18px; }
.day-button { background:#1f291d; color:#b6c6a6; border:1px solid #435537; box-shadow:0 4px 0 #080d08,inset 0 1px 0 #ffffff08; border-radius:18px; }
.day-button strong { color:#eff5e0; font-size:25px; }
.day-button.active { color:#2d421b; background:linear-gradient(140deg,#e1ffa0,#bce365); border-color:#e7ffb4; box-shadow:inset 0 2px 0 #f9ffdf,0 4px 0 #080d08; }
.day-button.active strong { color:#203313; }
.plan { border:1px solid #425539; border-radius:23px; background:linear-gradient(135deg,#253021,#1c251a); box-shadow:var(--shadow); }
.plan-time { color:#d4f879; }
.plan h3 { font-size:21px; }
.plan p { color:#becbb2; }
.plan-place { color:#ffc18c; font-size:11px; }
.empty { background:#192117; border:1px dashed #596c46; border-radius:24px; }
.empty h3 { color:#e0edcd; font-size:23px; }
.empty p { color:#b8c7aa; }
.idea { background:linear-gradient(145deg,#3a3521,#272819); border:1px solid #776a38; border-radius:26px; box-shadow:inset 0 1px 0 #e9cf7833,0 6px 0 #080d08; min-height:240px; }
.idea:nth-child(3n+2) { background:linear-gradient(145deg,#432b40,#2b202c); border-color:#895778; }
.idea:nth-child(3n+3) { background:linear-gradient(145deg,#2d3c24,#1d2a1b); border-color:#607c43; }
.idea-tag { color:#ded09a; font-size:8px; }
.idea:nth-child(3n+2) .idea-tag { color:#e1b7d6; }
.idea:nth-child(3n+3) .idea-tag { color:#c7dfa5; }
.idea h3 { font-size:27px; color:#f6f7e5; }
.idea p { color:#c9c7ac; font-size:13px; }
.idea:nth-child(3n+2) p { color:#d0bbcf; }
.idea:nth-child(3n+3) p { color:#bfceae; }
.vote { color:#e1e8bf; background:#10170e80; border:1px solid #6c7746; font-weight:800; }
.vote.voted { color:#1a2910; background:#d4f879; border-color:#e5ffa6; }
.filter { color:#c2d0b5; background:#202b1e; border:1px solid #4a5c3d; }
.filter.active { color:#1d2c11; background:#d4f879; border-color:#edffc3; font-weight:800; }
.progress-card { background:#25351f; border-color:#526d3c; box-shadow:inset 0 1px 0 #d4f87912; }
.progress-copy strong { color:#e7f5ce; }
.progress-copy small { color:#bfd5a5; }
.progress-track { background:#10190c; border:1px solid #526b35; height:10px; }
.progress-track i { background:linear-gradient(90deg,#8cbc54,#d4f879); }
.checklist { background:#1e281c; border-color:#435637; }
.check-row { border-color:#384b2d; }
.check-toggle { background:#141e10; border-color:#647c4b; color:#17250c; }
.check-row.done .check-toggle { background:#d4f879; border-color:#e4ffa0; }
.check-row.done strong { color:#a5b398; }
.check-main strong { font-size:15px; }
.check-main small { color:#b2c3a2; }
.owner-pill { color:#d1e2ba; background:#33452a; border:1px solid #536c3c; }
.money-card { background:#202a1e; border-color:#445936; box-shadow:var(--shadow); }
.money-card:first-child { color:#18290e; background:linear-gradient(135deg,#deff98,#b9df68); border-color:#e3ffaa; box-shadow:inset 0 2px 0 #f1ffcf,0 5px 0 #070e07; }
.money-card:first-child small,.money-card:first-child p { color:#394f20; font-weight:700; }
.money-card:first-child strong { color:#192c0b; font-size:39px; }
.money-card small,.money-card p { color:#bdcdb0; }
.money-card strong { font-size:34px; }
.balance-card { background:#202a1e; border-color:#425535; border-radius:20px; }
.balance-card strong { font-size:13px; }
.balance-card b { font-size:23px; }
.balance-card small { color:#b9c9ab; }
.positive { color:#d4f879; }
.negative { color:#ffabc9; }
.transfer { border-color:#435436; }
.transfer strong { color:#d4f879; }
.expense-row { border-color:#3d5031; }
.expense-main strong { font-size:14px; }
.expense-main small { color:#bbcaad; line-height:1.6; }
.expense-amount { color:#edf8d7; }
.expense-list { margin-top:30px; }
.settlement-history { margin-top:22px; }
dialog { background:#1c281b; border:1px solid #607647; border-radius:28px; box-shadow:0 30px 100px #0009,inset 0 1px 0 #ffffff15; }
dialog::backdrop { background:#050b08b5; backdrop-filter:blur(9px); }
.dialog-heading h2 { color:#eff7df; font-size:30px; }
.eyebrow { color:#d4f879; }
label,legend { color:#c8d6b9; font-size:12px; }
input,textarea,select { background:#111b0f; border:1px solid #536c3f; color:#f0f7e5; border-radius:14px; font-size:15px; }
input::placeholder,textarea::placeholder { color:#99ad89; }
fieldset { border-color:#526940; }
fieldset input { accent-color:#d4f879; }
.error { color:#ffb0c8; }
.muted { color:#b5c7a4; }
.toast { color:#15220e; background:linear-gradient(140deg,#e4ffa7,#c5ed7a); border-color:#eeffc7; font-weight:800; box-shadow:0 7px 0 #06100466,0 12px 45px #0008; }
.join-screen { background:radial-gradient(ellipse at 8% 15%,#3a552940,transparent 48%),radial-gradient(ellipse at 90% 85%,#593b4c30,transparent 50%),#101510; }
.join-card { background:linear-gradient(140deg,#25301fe8,#172016f5); border:1px solid #607943; border-radius:34px; box-shadow:inset 0 2px 0 #d4f87925,0 13px 0 #080d08,0 30px 80px #0005; max-width:485px; padding:40px; }
.join-card h1 { color:#f0f7dc; font-size:43px; line-height:1.08; letter-spacing:-.06em; }
.join-card > p:not(.eyebrow) { color:#bfd1aa; font-size:13px; }
.join-card .eyebrow { color:#d4f879; }
.join-card label { font-size:12px; }
.join-card .primary { min-height:50px; font-size:14px; }
.join-foot { color:#c0d4a8!important; }
.join-foot span { color:#ffb0ce; }
.join-art span { filter:drop-shadow(0 10px 20px #0005); }
.join-art span:nth-child(2) { color:#d4f879; }
.small-logo { color:#d4f879; }
@media(min-width:1550px) {
  .hero { min-height:410px; padding:43px; }
  .hero h1 { font-size:85px; }
  .hero p { font-size:15px; }
}
@media(max-width:1180px) {
  .sidebar { width:205px; }
  .main-wrap { margin-left:205px; width:calc(100% - 205px); }
  .hero { min-height:350px; padding:30px; }
  .hero h1 { font-size:59px; }
  .hero-content { width:65%; }
  .hero p { max-width:295px; font-size:12px; }
  .gas-scene { right:-1%; width:44%; }
  .floating-note { right:16px; top:21px; padding:10px 13px; font-size:8px; }
  .floating-note span { font-size:24px; }
  .strip-cell strong { font-size:14px; }
  .quick-link strong { font-size:11px; }
  .quick-link small { font-size:9px; }
}
@media(max-width:900px) {
  .sidebar { width:180px; }
  .main-wrap { margin-left:180px; width:calc(100% - 180px); }
  .sidebar .brand { font-size:21px; }
  .hero h1 { font-size:52px; }
  .hero-content { width:76%; }
  .gas-scene { width:44%; height:77%; right:-5%; bottom:0; }
  .floating-note { top:20px; right:14px; }
  .vent-button { right:15px; bottom:15px; font-size:8px; padding:7px 9px; }
  .mascot-caption { display:none; }
  .hero p { max-width:245px; }
  .trip-strip { gap:22px 15px; }
  .side-note p { font-size:19px; }
  .side-note small { font-size:6px; }
  .page-heading h1 { font-size:33px; }
  .page-heading p { font-size:12px; }
}
@media(max-width:680px) {
  .sidebar { width:100%; background:#141e13f5; border-top:1px solid #556f3b; box-shadow:0 -8px 30px #0004; padding-top:7px; }
  .main-wrap { margin-left:0; width:100%; }
  .topbar { height:69px; background:#151e13; border-color:#34482a; }
  .small-logo { font-size:22px; font-weight:900; }
  .trip-dates { font-size:9px; }
  nav { gap:3px; }
  nav a { border-radius:12px; min-height:57px; padding:7px 0; }
  nav a span { font-size:22px; }
  nav a b { font-size:8px; }
  nav a.active { border-color:#698740; background:linear-gradient(145deg,#3e532d,#293c20); box-shadow:inset 0 1px 0 #d4f87922; }
  main { padding-top:27px; }
  .page-heading { align-items:flex-start; margin-bottom:24px; gap:12px; }
  .page-heading h1 { font-size:33px; }
  .page-heading p { font-size:12px; line-height:1.6; max-width:285px; }
  .page-heading .eyebrow { font-size:8px; margin-bottom:10px; }
  .page-heading > .button { font-size:10px; padding:12px; margin-top:25px; min-height:42px; }
  .hero { min-height:490px; padding:29px 24px; border-radius:29px; }
  .hero-content { width:100%; }
  .hero .eyebrow { font-size:7px; padding:8px 10px; margin-bottom:24px; }
  .hero h1 { font-size:59px; max-width:300px; line-height:1.01; margin-bottom:18px; }
  .hero p { font-size:12px; max-width:240px; margin-bottom:21px; line-height:1.8; }
  .hero .button { font-size:11px; padding:12px 15px; min-height:45px; }
  .gas-scene { width:52%; height:56%; right:-12px; bottom:-5px; opacity:.95; }
  .gas-mini-one { top:25%; left:45%; font-size:21px; }
  .gas-mini-two { font-size:19px; }
  .orbit-one { top:17%; left:4%; font-size:22px; }
  .orbit-two { right:14px; font-size:16px; }
  .floating-note { right:19px; top:auto; bottom:23px; z-index:4; padding:9px 12px; font-size:7px; border-radius:12px; transform:rotate(8deg); }
  .floating-note span { font-size:22px; }
  .vent-button { bottom:18px; left:24px; right:auto; font-size:8px; padding:7px 10px; min-height:34px; }
  .trip-strip { margin-top:22px; padding:22px 19px; gap:23px 9px; border-radius:23px; }
  .strip-cell { gap:10px; padding-left:13px; }
  .strip-cell strong { font-size:14px; }
  .strip-cell small { font-size:8px; max-width:120px; }
  .section-heading h2 { font-size:22px; }
  .section-heading .text-button { font-size:9px; text-align:right; max-width:110px; }
  .card { padding:23px 21px; }
  .mini-heading h3 { font-size:19px; }
  .quick-link { padding:18px; }
  .quick-link strong { font-size:13px; }
  .quick-link small { font-size:10px; }
  .day-button { border-radius:17px; }
  .day-button strong { font-size:25px; }
  .plan h3 { font-size:18px; }
  .idea { min-height:210px; padding:25px; }
  .idea h3 { font-size:29px; }
  .check-main strong { font-size:14px; }
  .check-main small { font-size:11px; }
  .check-toggle { min-width:27px; width:27px; height:27px; }
  .money-card:first-child strong { font-size:45px; }
  .money-card strong { font-size:29px; }
  .balance-card b { font-size:25px; }
  .expense-main strong { font-size:13px; }
  .expense-main small { font-size:10px; }
  .expense-row .item-actions .icon-button { min-width:30px; }
  .join-card { padding:34px 27px; border-radius:30px; }
  .join-card h1 { font-size:38px; }
  .join-card > p:not(.eyebrow) { font-size:12px; }
  .join-card input,.join-card select { font-size:16px; }
  dialog input,dialog textarea,dialog select { font-size:16px; }
  .join-art span:nth-child(1) { font-size:60px; top:-8px; left:0; }
  .join-art span:nth-child(3) { font-size:85px; right:-10px; bottom:0; }
}
@media(max-width:370px) {
  .hero { min-height:465px; padding-left:20px; padding-right:20px; }
  .hero h1 { font-size:52px; }
  .hero p { font-size:11px; max-width:205px; }
  .hero .button { padding:12px; font-size:10px; }
  .vent-button { left:20px; font-size:7px; }
  .floating-note { right:12px; bottom:20px; padding:8px 9px; }
  .trip-strip { padding:20px 15px; }
  .strip-cell { gap:8px; padding-left:10px; }
  .strip-cell strong { font-size:12px; }
  .page-heading h1 { font-size:29px; }
  .join-card h1 { font-size:33px; }
}
@media(prefers-reduced-motion:reduce) {
  .venting .gas-mini-one,.venting .gas-mini-two,.venting .puff-cloud { animation:none; }
}