:root {
  --ink: #e9fbff;
  --ink-soft: #a4c2ca;
  --pond: #157998;
  --fern: #67e4e5;
  --moss: #a7fff4;
  --paper: #071a28;
  --paper-deep: #0d2b3b;
  --rule: #2e7185;
  --coral: #ffba58;
  --white: #f5ffff;
  --shadow: 0 15px 30px rgba(0, 0, 0, .35);
}

* { box-sizing: border-box; }
body { background: #061521; color: var(--ink); font-family: "Arial Narrow", "Roboto Condensed", Inter, system-ui, sans-serif; letter-spacing: .01em; }
body::before { content: ""; position: fixed; inset: 0; z-index: -2; background: linear-gradient(rgba(102, 222, 238, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(102, 222, 238, .035) 1px, transparent 1px), radial-gradient(ellipse at 71% -8%, #14516a 0%, transparent 42%), linear-gradient(140deg, #0b2a3b, #061621 60%, #0b2534); background-size: 34px 34px, 34px 34px, auto, auto; }
body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 20; opacity: .13; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.13) 4px); mix-blend-mode: overlay; }
.aurora { display: none; }.shell { max-width: 1370px; padding: 22px 34px 58px; }
.topbar { height: 78px; margin-bottom: 39px; padding: 0 18px; background: rgba(6, 31, 45, .84); border: 1px solid rgba(103, 228, 229, .55); border-left: 5px solid var(--fern); border-bottom: 3px solid #164b60; clip-path: polygon(0 0, calc(100% - 19px) 0, 100% 19px, 100% 100%, 18px 100%, 0 calc(100% - 18px)); }
.brand { color: var(--white); gap: 11px; }.brand-mark { width: 37px; height: 37px; border-radius: 7px; background: #1189a6; color: #eaffff; font: 700 25px/1 system-ui; box-shadow: 0 0 16px rgba(103, 228, 229, .45); }.brand b { font: 800 14px/1 "Arial Narrow", sans-serif; letter-spacing: .12em; }.brand small { color: #80b3c0; font-size: 9px; letter-spacing: .17em; }
nav { gap: 3px; align-self: stretch; align-items: stretch; }nav a { display: flex; align-items: center; color: #bbd8df; border-radius: 0; padding: 0 19px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; border-left: 1px solid rgba(116, 192, 205, .17); }nav a:hover, nav a.active { color: #051b27; background: var(--fern); box-shadow: inset 0 -4px #168ba5; }.icon-button { color: var(--fern); border: 1px solid rgba(103, 228, 229, .42); border-radius: 4px; font-size: 22px; }.icon-button:hover { background: #16485b; }
.page.active { animation: hud-in .3s ease; }@keyframes hud-in { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }.masthead { grid-template-columns: minmax(0, 1.55fr) 330px; gap: 46px; min-height: 305px; padding: 28px 34px; background: linear-gradient(90deg, rgba(8, 39, 55, .9), rgba(8, 39, 55, .4)); border: 1px solid rgba(91, 196, 211, .32); border-top: 3px solid #2a9eb6; clip-path: polygon(0 0, calc(100% - 23px) 0, 100% 23px, 100% 100%, 24px 100%, 0 calc(100% - 24px)); }.eyebrow { color: var(--fern); font-size: 10px; letter-spacing: .15em; font-weight: 800; }
h1, h2 { font-family: "Arial Narrow", Impact, sans-serif; font-weight: 900; letter-spacing: .025em; text-transform: uppercase; }h1 { font-size: clamp(49px, 6vw, 82px); line-height: .86; margin-bottom: 23px; text-shadow: 4px 4px 0 #082635; }h1 em { color: var(--fern); font-style: normal; }h2 { font-size: 34px; letter-spacing: .05em; margin-bottom: 7px; }.lede { color: #b3d2d9; max-width: 640px; font-size: 15px; line-height: 1.6; }.actions { gap: 10px; }
.button { padding: 12px 17px; border-radius: 2px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; }.button.primary { background: var(--fern); color: #06202c; box-shadow: 0 4px 0 #167789, 0 0 15px rgba(103, 228, 229, .24); }.button.primary span { color: #073343; }.button.quiet { color: #d8f9ff; border-color: #4c96a8; background: rgba(12, 54, 69, .65); }.button.danger { color: #ffc8a2; border-color: #c8755c; background: rgba(129, 46, 31, .25); }
.field-note { transform: none; background: rgba(8, 40, 57, .94); border: 1px solid #53bfd0; box-shadow: 0 0 0 3px rgba(29, 115, 136, .22), var(--shadow); padding: 25px; font-family: inherit; }.field-note::after { border: 0; background: linear-gradient(135deg, rgba(103,228,229,.11), transparent 44%); }.pin { display: none; }.note-title { color: var(--fern); font: 800 11px/1 Arial,sans-serif; letter-spacing: .13em; text-transform: uppercase; }.field-note p:not(.note-title) { color: #c2e0e5; }.note-foot { color: #7bb6c2; }
.stats-grid { gap: 14px; border: 0; margin: 30px 0 41px; }.stats-grid article { padding: 20px 23px; background: rgba(9, 43, 59, .85); border: 1px solid #28788d; border-left: 4px solid var(--fern); clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%); }.stats-grid article + article { border-left: 4px solid var(--fern); padding-left: 23px; }.stat-label, .stat-tail { color: #97c2cc; text-transform: uppercase; font-size: 10px; letter-spacing: .1em; }.stats-grid strong { color: var(--white); font-family: Impact, sans-serif; font-size: 48px; text-shadow: 2px 2px #0c4355; }.section-heading { border-left: 4px solid var(--fern); padding-left: 13px; }.section-heading p:not(.eyebrow) { color: #9bc5ce; }.text-button { color: var(--fern); text-transform: uppercase; letter-spacing: .08em; font-size: 11px; }
.discovery-list { gap: 12px; }.discovery-card, .empty-state { background: rgba(9, 40, 55, .88); border: 1px solid #2d7185; box-shadow: none; }.discovery-card { min-height: 140px; border-top: 3px solid #43b9c7; }.card-date { color: var(--fern); }.lineage { color: #d9fbff; }.operator { color: #5ed9e0; }.child { color: #ffcf6b; }.card-note { color: #9fc7d0; border-color: rgba(117, 203, 215, .19); }
.privacy-chip { border: 1px solid #36aebd; background: rgba(19, 105, 120, .35); color: #b5ffff; text-transform: uppercase; letter-spacing: .08em; }.experiment-sheet { background: rgba(7, 34, 49, .94); border: 1px solid #2f8ea4; box-shadow: var(--shadow); border-top: 4px solid var(--fern); clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%); }.pal-picker > span, .record-details label { color: #a0ced6; text-transform: uppercase; font-size: 10px; letter-spacing: .1em; }select, input { color: var(--white); background: #0c2a3a; border-color: #357c8d; border-radius: 2px; }select:focus, input:focus { outline-color: var(--fern); }.picker-preview { color: #d7f8fb; }.picker-preview.empty { color: #6995a1; }.picker-preview .element-badges { color: #78b9c5; }.plus, .equals { color: var(--fern); }.equals { color: #ffc35b; }.record-details { border-color: rgba(95, 190, 204, .25); }.form-note { color: #8ab6c0; }
.journal-tools { background: rgba(7, 33, 47, .65); padding: 10px; border: 1px solid rgba(58, 139, 156, .5); }.search { border-color: #3a8898; border-radius: 2px; background: #0b2939; color: var(--fern); }.search input { color: var(--white); }.toggle-label, .count-label { color: #b6d8de; }.toggle-label input { accent-color: var(--fern); }.journal-entry { background: rgba(8, 40, 55, .88); border-color: #307589; border-left: 4px solid #3cc7d0; }.journal-entry time { color: #8bc0ca; }.journal-entry button { color: #ffbd91; }
.collection-count { color: #a4d7df; text-transform: uppercase; letter-spacing: .08em; }.collection-count span { color: var(--fern); font-family: Impact, sans-serif; }.collection-grid { grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 13px; }.pal-card { min-height: 210px; border: 2px solid #225d72; background: linear-gradient(180deg, rgba(19, 68, 88, .98), rgba(8, 34, 49, .98)); clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 13px 100%, 0 calc(100% - 13px)); box-shadow: inset 0 0 0 1px rgba(114, 223, 233, .13); }.pal-card::before { inset: 0; width: auto; height: auto; border-radius: 0; background: radial-gradient(circle at 50% 42%, rgba(70, 223, 228, .22), transparent 48%), linear-gradient(145deg, transparent 0 49%, rgba(102,228,229,.07) 50% 52%, transparent 53%); }.pal-card::after { content: ""; position: absolute; inset: 8px; z-index: 0; border: 1px solid rgba(103, 228, 229, .2); clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)); }.pal-card.owned { border-color: #59d9c8; background: linear-gradient(180deg, #155d6c, #0a384b); }.pal-card.owned::before { background: radial-gradient(circle at 50% 42%, rgba(102, 255, 218, .29), transparent 50%), linear-gradient(145deg, transparent 0 49%, rgba(125,255,233,.11) 50% 52%, transparent 53%); }.pal-card img { height: 150px; filter: drop-shadow(0 12px 8px rgba(0,0,0,.35)); }.pal-card:hover { transform: translateY(-5px); border-color: var(--fern); box-shadow: 0 0 0 1px var(--fern), 0 12px 22px rgba(0,0,0,.3); }.pal-card:hover img { transform: scale(1.09) translateY(-4px); }.pal-card > div { padding: 7px 8px; background: rgba(5, 25, 37, .8); border-top: 1px solid rgba(103, 228, 229, .25); }.pal-card h3 { color: #e7ffff; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }.ownership { width: 22px; height: 22px; top: 9px; right: 9px; border-color: #77bdc5; background: #0e4053; }.pal-card.owned .ownership { border-color: #8affdf; background: #59d9c8; box-shadow: inset 0 0 0 4px #0f4c5a; }
dialog { color: var(--ink); background: #0b2d3e; border-color: #54b6c6; border-top: 4px solid var(--fern); }.dialog-head { border-bottom: 1px solid rgba(102,228,229,.2); }
.app-message-dialog { width: min(420px, calc(100vw - 32px)); padding: 22px; border-radius: 14px; background: linear-gradient(145deg, #0c384a, #082a3a); box-shadow: 0 22px 48px rgba(0, 0, 0, .48), inset 0 1px rgba(225, 255, 255, .1); }.app-message-dialog .dialog-head { align-items: flex-start; padding-bottom: 14px; }.app-message-dialog .eyebrow { margin-bottom: 7px; }.app-message-dialog h2 { margin: 0; font-size: 25px; }.app-message-dialog > p { margin: 17px 0 0; color: #b7d9df; line-height: 1.5; }.app-message-dialog .dialog-actions { justify-content: flex-end; margin-top: 20px; }.app-message-dialog .button { min-width: 120px; }

/* Home: a command deck for a spoiler-free field researcher. The incubator scan
   is the page signature; the rest stays intentionally quiet and task-led. */
#home .home-command { position: relative; isolation: isolate; }
#home .home-command::before { content: ""; position: absolute; z-index: -1; inset: 42px 10% 0; background: radial-gradient(ellipse at 23% 24%, rgba(50, 210, 220, .14), transparent 37%), radial-gradient(ellipse at 80% 35%, rgba(255, 190, 89, .09), transparent 29%); filter: blur(12px); }
#home .masthead { position: relative; display: grid; grid-template-columns: minmax(0, 1.48fr) minmax(310px, .72fr); gap: 42px; min-height: 392px; padding: 47px 52px 62px; overflow: hidden; border: 1px solid rgba(103, 228, 229, .46); border-top: 4px solid #65e5e5; background: linear-gradient(113deg, rgba(8, 48, 65, .98), rgba(7, 35, 49, .93) 61%, rgba(12, 62, 75, .86)); box-shadow: inset 0 0 0 1px rgba(154, 249, 250, .07), 0 22px 45px rgba(0, 0, 0, .19); clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 27px 100%, 0 calc(100% - 27px)); }
#home .masthead::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(102, 228, 229, .065) 1px, transparent 1px), linear-gradient(rgba(102, 228, 229, .05) 1px, transparent 1px), linear-gradient(128deg, transparent 0 45%, rgba(127, 242, 241, .06) 45.2% 45.45%, transparent 45.7% 100%); background-size: 38px 38px, 38px 38px, auto; mask-image: linear-gradient(90deg, #000 0 72%, transparent 100%); }
#home .masthead::after { content: ""; position: absolute; width: 56%; height: 130%; right: -15%; top: -27%; pointer-events: none; border: 1px solid rgba(104, 228, 230, .13); border-radius: 50%; box-shadow: 0 0 0 34px rgba(104, 228, 230, .025), 0 0 0 70px rgba(104, 228, 230, .018); }
#home .home-hero-copy { position: relative; z-index: 1; align-self: center; max-width: 700px; }
#home .home-hero-copy .eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; color: #7df2e8; }
#home .home-hero-copy .eyebrow::before { content: ""; display: block; width: 28px; height: 2px; background: currentColor; box-shadow: 8px 5px 0 -1px rgba(125, 242, 232, .62); }
#home .home-hero-copy h1 { max-width: 760px; margin: 0; color: #ecffff; font-size: clamp(54px, 6.1vw, 90px); line-height: .84; letter-spacing: .035em; text-shadow: 5px 5px 0 rgba(3, 26, 37, .7); }
#home .home-hero-copy h1 em { color: #67e6e5; text-shadow: none; }
#home .home-hero-copy .lede { max-width: 605px; margin: 25px 0 0; color: #b8dbe0; font-size: 15px; line-height: 1.62; }
#home .home-hero-copy .actions { margin-top: 27px; }
#home .home-hero-copy .button { min-height: 47px; padding-inline: 20px; }
#home .home-status { display: flex; align-items: center; gap: 9px; margin-top: 32px; color: #82c7d1; font: 800 10px/1 Arial, sans-serif; letter-spacing: .13em; }
#home .home-status i { display: block; width: 5px; height: 5px; border-radius: 50%; background: #ffca63; box-shadow: 0 0 0 4px rgba(255, 202, 99, .12), 0 0 13px rgba(255, 202, 99, .9); }
#home .field-note { position: relative; z-index: 1; display: grid; grid-template-rows: 1fr auto; min-height: 292px; margin: 0; padding: 23px; overflow: hidden; transform: none; color: #d9fbff; border: 1px solid rgba(110, 229, 229, .62); border-left: 3px solid #ffca63; background: linear-gradient(150deg, rgba(15, 84, 94, .9), rgba(5, 34, 48, .96)); box-shadow: inset 0 0 28px rgba(103, 228, 229, .09), 0 14px 28px rgba(0, 0, 0, .2); clip-path: polygon(0 0, calc(100% - 17px) 0, 100% 17px, 100% 100%, 0 100%); }
#home .field-note::after { content: ""; position: absolute; inset: 9px; border: 1px solid rgba(132, 237, 236, .16); background: none; pointer-events: none; }
#home .home-scan { position: relative; display: grid; place-items: center; width: 148px; height: 148px; margin: 2px auto 9px; color: #f0fffd; border: 2px solid #71e7e3; border-radius: 50%; background: radial-gradient(circle, rgba(11, 91, 105, .95) 0 27%, rgba(14, 57, 72, .38) 28% 48%, transparent 49%), repeating-radial-gradient(circle, transparent 0 23px, rgba(109, 229, 227, .23) 24px 25px); box-shadow: 0 0 0 9px rgba(90, 218, 219, .06), 0 0 25px rgba(82, 225, 225, .24); }
#home .home-scan::before, #home .home-scan::after { content: ""; position: absolute; background: #ffca63; box-shadow: 0 0 10px rgba(255, 202, 99, .8); }
#home .home-scan::before { width: 4px; height: 4px; top: 13px; right: 25px; }
#home .home-scan::after { width: 3px; height: 3px; bottom: 21px; left: 18px; }
#home .home-scan span { display: grid; place-items: center; width: 54px; height: 54px; border: 1px solid rgba(227, 255, 255, .74); border-radius: 50%; background: #0c4052; font: 900 34px/1 Impact, "Arial Narrow", sans-serif; }
#home .home-note-copy { position: relative; z-index: 1; text-align: center; }
#home .note-title { margin: 0 0 10px; color: #73e8e7; font: 800 10px/1 Arial, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
#home .field-note p:not(.note-title) { margin: 0; color: #c0e5e8; font-size: 13px; line-height: 1.48; }
#home .note-foot { position: relative; z-index: 1; margin: 20px 0 0; padding-top: 11px; color: #85c2cb; border-top: 1px solid rgba(120, 224, 225, .2); font: 800 9px/1.3 Arial, sans-serif; letter-spacing: .11em; text-align: center; text-transform: uppercase; }
#home .stats-grid { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: -28px 30px 0; border: 1px solid rgba(93, 215, 221, .54); background: rgba(6, 37, 51, .95); box-shadow: 0 16px 28px rgba(0, 0, 0, .2); }
#home .stats-grid article, #home .stats-grid article + article { position: relative; min-height: 113px; padding: 20px 23px 17px; border: 0; border-left: 1px solid rgba(99, 219, 223, .2); background: transparent; clip-path: none; }
#home .stats-grid article:first-child { border-left: 0; }
#home .stats-grid article::after { content: ""; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: #62dfe0; opacity: .8; }
#home .stats-grid article:nth-child(2)::after { background: #ffca63; }
#home .stats-grid article:nth-child(3)::after { background: #7befaa; }
#home .stats-grid .stat-label { color: #8fbfc7; font-size: 10px; letter-spacing: .12em; }
#home .stats-grid strong { margin-top: 4px; color: #edffff; font: 900 48px/.9 Impact, "Arial Narrow", sans-serif; letter-spacing: .04em; text-shadow: none; }
#home .stats-grid .stat-tail { color: #699ca8; font-size: 11px; }
#home .recent-section { margin-top: 48px; padding: 28px; border: 1px solid rgba(81, 178, 194, .34); background: linear-gradient(115deg, rgba(7, 35, 49, .6), rgba(15, 61, 75, .34)); clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%); }
#home .recent-section .section-heading { margin-bottom: 20px; }
#home .recent-section .section-heading h2 { color: #ecffff; font-size: 30px; }
#home .recent-section .text-button { padding: 8px 10px; border: 1px solid rgba(101, 226, 228, .45); background: rgba(17, 90, 103, .28); }
#home .recent-section .discovery-list { gap: 11px; }
#home .recent-section .discovery-card { min-height: 138px; padding: 15px; border: 1px solid rgba(76, 169, 184, .55); border-top: 3px solid #45bdc9; background: rgba(6, 34, 48, .85); }
@media (prefers-reduced-motion: no-preference) { #home .home-scan { animation: home-scan-pulse 4.8s ease-in-out infinite; } } @keyframes home-scan-pulse { 50% { box-shadow: 0 0 0 15px rgba(90, 218, 219, .025), 0 0 31px rgba(82, 225, 225, .39); } }
@media (max-width: 850px) { #home .masthead { grid-template-columns: minmax(0, 1fr) 270px; gap: 24px; padding: 39px 31px 57px; } #home .field-note { min-height: 274px; padding: 18px; } #home .home-scan { width: 126px; height: 126px; } }
@media (max-width: 680px) { #home .masthead { grid-template-columns: 1fr; padding: 31px 21px 30px; clip-path: polygon(0 0, calc(100% - 17px) 0, 100% 17px, 100% 100%, 16px 100%, 0 calc(100% - 16px)); } #home .masthead::before { mask-image: none; } #home .home-hero-copy h1 { font-size: clamp(47px, 15vw, 70px); } #home .home-hero-copy .lede { font-size: 14px; } #home .home-hero-copy .actions { flex-wrap: wrap; } #home .home-hero-copy .button { flex: 1 1 185px; } #home .home-status { margin-top: 25px; } #home .field-note { grid-template-columns: 116px minmax(0, 1fr); grid-template-rows: 1fr auto; min-height: 0; padding: 17px; } #home .home-scan { width: 96px; height: 96px; margin: auto; } #home .home-scan span { width: 42px; height: 42px; font-size: 27px; } #home .home-note-copy { align-self: center; text-align: left; } #home .note-foot { grid-column: 1 / -1; margin-top: 12px; text-align: left; } #home .stats-grid { margin: 15px 0 0; } #home .stats-grid article, #home .stats-grid article + article { min-height: 98px; padding: 16px 11px 13px; } #home .stats-grid strong { font-size: 38px; } #home .stats-grid .stat-label, #home .stats-grid .stat-tail { font-size: 9px; } #home .recent-section { margin-top: 27px; padding: 20px 15px; } #home .recent-section .section-heading h2 { font-size: 26px; } }
@media (max-width: 760px) { .shell { padding: 12px 14px 42px; }.topbar { height: auto; padding: 12px; }.topbar nav { margin-top: 7px; }.topbar nav a { padding: 10px 9px; font-size: 10px; }.masthead { padding: 25px 20px; }.stats-grid { gap: 7px; }.stats-grid article, .stats-grid article + article { padding: 14px 11px; }.collection-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }.pal-card { min-height: 172px; }.pal-card img { height: 118px; }.journal-tools { flex-wrap: wrap; } }

/* Home: calm onboarding for a player building their own breeding knowledge. */
#home .home-command { isolation: isolate; }
#home .home-command::before { display: none; }
#home .masthead { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr); gap: 46px; min-height: 360px; padding: 45px 48px; overflow: visible; border: 1px solid rgba(102, 228, 229, .36); border-top: 3px solid #65d7d8; background: linear-gradient(105deg, rgba(8, 42, 57, .97), rgba(9, 48, 63, .92)); box-shadow: none; clip-path: polygon(0 0, calc(100% - 21px) 0, 100% 21px, 100% 100%, 20px 100%, 0 calc(100% - 20px)); }
#home .masthead::before, #home .masthead::after { display: none; }
#home .home-hero-copy { align-self: center; max-width: 670px; }
#home .home-hero-copy .eyebrow { margin: 0 0 17px; color: #7ee1df; font-size: 10px; letter-spacing: .13em; }
#home .home-hero-copy .eyebrow::before { width: 20px; height: 1px; box-shadow: none; }
#home .home-hero-copy h1 { margin: 0; color: #ecffff; font-size: clamp(47px, 5vw, 74px); line-height: .91; letter-spacing: .025em; text-shadow: none; }
#home .home-hero-copy h1 em { color: #8fe9e5; }
#home .home-hero-copy .lede { max-width: 600px; margin: 23px 0 0; color: #b7d7dc; font-size: 15px; line-height: 1.68; }
#home .home-hero-copy .actions { margin-top: 27px; }
#home .home-hero-copy .button { min-height: 46px; }
#home .first-experiment { align-self: stretch; margin: 0; padding: 24px 25px 22px; color: #d9f5f5; border: 1px solid rgba(102, 228, 229, .34); border-left: 3px solid #72ddda; background: rgba(5, 31, 44, .48); box-shadow: inset 0 1px rgba(208, 255, 254, .06); }
#home .first-experiment .panel-kicker { margin: 0 0 8px; color: #87dedd; font: 800 10px/1 Arial, sans-serif; letter-spacing: .13em; text-transform: uppercase; }
#home .first-experiment h2 { margin: 0 0 18px; color: #efffff; font-size: 25px; line-height: 1; letter-spacing: .04em; }
#home .first-steps { display: grid; gap: 13px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
#home .first-steps li { display: grid; grid-template-columns: 25px minmax(0, 1fr); gap: 11px; align-items: start; }
#home .first-steps li > span { display: grid; place-items: center; width: 23px; height: 23px; color: #062d3b; background: #83e5e2; font: 900 12px/1 Arial, sans-serif; }
#home .first-steps strong { display: block; color: #e7ffff; font-size: 13px; line-height: 1.2; }
#home .first-steps p { margin: 4px 0 0; color: #9dc7cf; font-size: 12px; line-height: 1.42; }
#home .first-tip { margin: 19px 0 0; padding: 12px 0 0 13px; color: #b8d8db; border-top: 1px solid rgba(106, 216, 218, .2); border-left: 2px solid #e0b369; font-size: 12px; line-height: 1.48; }
#home .first-tip b { color: #f2d297; }
#home .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 16px 0 0; border: 1px solid rgba(86, 182, 194, .35); background: rgba(7, 37, 51, .7); box-shadow: none; }
#home .stats-grid article, #home .stats-grid article + article { min-height: 100px; padding: 18px 21px 15px; border: 0; border-left: 1px solid rgba(91, 193, 204, .18); background: transparent; clip-path: none; }
#home .stats-grid article:first-child { border-left: 0; }
#home .stats-grid article::after { width: 3px; background: #64cfce; }
#home .stats-grid article:nth-child(2)::after { background: #d6b16a; }
#home .stats-grid article:nth-child(3)::after { background: #7dcbac; }
#home .stats-grid strong { color: #efffff; font-size: 42px; text-shadow: none; }
#home .home-guide { margin-top: 27px; padding: 27px 29px 29px; border: 1px solid rgba(80, 176, 190, .3); background: rgba(6, 34, 48, .4); }
#home .home-guide .section-heading { margin-bottom: 21px; }
#home .home-guide h2 { color: #ebffff; font-size: 29px; }
#home .guide-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
#home .guide-grid article { min-height: 187px; padding: 20px; border: 1px solid rgba(92, 185, 198, .32); background: rgba(11, 53, 68, .47); }
#home .guide-grid article:nth-child(2) { border-top-color: rgba(220, 181, 106, .75); }
#home .guide-label { display: block; margin-bottom: 15px; color: #76d8d7; font: 800 9px/1 Arial, sans-serif; letter-spacing: .13em; text-transform: uppercase; }
#home .guide-grid h3 { margin: 0; color: #eaffff; font: 800 17px/1.2 "Arial Narrow", Arial, sans-serif; letter-spacing: .015em; }
#home .guide-grid p { margin: 12px 0 0; color: #9fc7cd; font-size: 13px; line-height: 1.53; }
#home .recent-section { margin-top: 19px; padding: 27px 29px; border-color: rgba(80, 176, 190, .3); background: rgba(6, 34, 48, .35); clip-path: none; }
@media (max-width: 850px) { #home .masthead { grid-template-columns: minmax(0, 1fr) minmax(295px, .85fr); gap: 28px; padding: 36px 32px; } #home .first-experiment { padding: 21px 19px; } #home .guide-grid { gap: 10px; } #home .guide-grid article { padding: 17px; } }
@media (max-width: 680px) { #home .masthead { grid-template-columns: 1fr; gap: 28px; padding: 29px 21px; clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 15px, 100% 100%, 14px 100%, 0 calc(100% - 14px)); } #home .home-hero-copy h1 { font-size: clamp(43px, 14vw, 65px); } #home .first-experiment { padding: 20px 17px; } #home .stats-grid { margin-top: 13px; } #home .stats-grid article, #home .stats-grid article + article { min-height: 90px; padding: 14px 10px 12px; } #home .stats-grid strong { font-size: 36px; } #home .home-guide, #home .recent-section { margin-top: 17px; padding: 21px 16px; } #home .guide-grid { grid-template-columns: 1fr; gap: 10px; } #home .guide-grid article { min-height: 0; padding: 17px; } }

/* Home becomes a gentle field notebook: one quiet introduction, then a small
   sequence that explains the rhythm of the journal without asking for action. */
#home .home-command { padding: 5px; border-radius: 24px; background: radial-gradient(ellipse at 16% 0%, rgba(117, 226, 220, .12), transparent 42%), radial-gradient(ellipse at 90% 70%, rgba(240, 199, 113, .08), transparent 38%), rgba(5, 29, 41, .38); }
#home .home-command::before { display: block; inset: 7% 15%; opacity: .7; background: radial-gradient(ellipse at 20% 30%, rgba(103, 228, 229, .16), transparent 46%), radial-gradient(ellipse at 78% 62%, rgba(231, 190, 107, .11), transparent 45%); filter: blur(24px); }
#home .masthead { grid-template-columns: minmax(0, 1.05fr) minmax(300px, .85fr); gap: 38px; min-height: 0; padding: 42px 45px; overflow: hidden; border: 1px solid rgba(123, 224, 222, .33); border-radius: 20px; background: linear-gradient(132deg, rgba(10, 54, 68, .94), rgba(7, 39, 53, .91)); box-shadow: inset 0 1px rgba(234, 255, 255, .09), 0 15px 36px rgba(0, 0, 0, .14); clip-path: none; }
#home .masthead::before { display: block; opacity: .52; background: linear-gradient(90deg, rgba(125, 232, 229, .05) 1px, transparent 1px), linear-gradient(rgba(125, 232, 229, .04) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(90deg, #000 0 62%, transparent 100%); }
#home .masthead::after { display: block; width: 36%; height: 80%; right: 5%; top: 11%; border-color: rgba(137, 235, 231, .12); border-radius: 48% 52% 47% 53%; box-shadow: 0 0 0 22px rgba(109, 228, 225, .018); }
#home .home-hero-copy { align-self: center; }.home-hero-copy .actions { display: none; }
#home .home-hero-copy .eyebrow { margin-bottom: 14px; color: #92e7e1; }.home-hero-copy .eyebrow::before { width: 18px; height: 1px; background: #e2bc70; }
#home .home-hero-copy h1 { max-width: 590px; font-size: clamp(40px, 4.4vw, 64px); line-height: .95; letter-spacing: .018em; }.home-hero-copy h1 em { color: #b2efeb; }
#home .home-hero-copy .lede { max-width: 610px; margin-top: 20px; color: #bddce0; font-size: 14px; line-height: 1.68; }
#home .first-experiment { position: relative; padding: 24px 25px 22px; overflow: hidden; border: 1px solid rgba(133, 226, 221, .34); border-radius: 18px; border-left: 0; background: rgba(4, 30, 42, .42); box-shadow: inset 0 1px rgba(234, 255, 255, .07); }
#home .first-experiment::before { content: ""; position: absolute; left: 27px; top: 77px; bottom: 79px; width: 1px; background: linear-gradient(#8ce6e1, rgba(140, 230, 225, .16)); }
#home .first-experiment .panel-kicker { color: #9ee9e5; }.first-experiment h2 { margin-bottom: 19px; color: #efffff; font-size: 24px; letter-spacing: .02em; }
#home .first-steps { gap: 17px; }.first-steps li { grid-template-columns: 31px minmax(0, 1fr); gap: 13px; }.first-steps li > span { position: relative; z-index: 1; width: 28px; height: 28px; border: 1px solid rgba(140, 231, 226, .68); border-radius: 50%; color: #072f3c; background: #9ae8e2; box-shadow: 0 0 0 4px rgba(89, 210, 207, .07); }.first-steps li:nth-child(2) > span { color: #493914; border-color: rgba(236, 201, 117, .74); background: #f0d083; }.first-steps li:nth-child(3) > span { color: #123e38; border-color: rgba(128, 235, 181, .75); background: #a7ebc9; }
#home .first-steps strong { color: #e7ffff; font-size: 14px; }.first-steps p { margin-top: 5px; color: #a9ccd1; font-size: 12px; line-height: 1.48; }.first-tip { margin: 20px 0 0; padding: 12px 0 0 14px; color: #b3d5d9; border-left-color: #e4bd71; font-size: 12px; }.first-tip b { color: #f2d493; }
#home .stats-grid { margin: 17px 7px 0; overflow: hidden; border: 1px solid rgba(115, 208, 211, .26); border-radius: 16px; background: rgba(7, 39, 52, .54); }.stats-grid article, #home .stats-grid article + article { min-height: 94px; padding: 17px 20px 15px; }.stats-grid strong { color: #eaffff; font-size: 38px; }.stats-grid .stat-label { color: #8fbfc6; }.stats-grid .stat-tail { color: #6fa4ae; }
#home .home-guide { display: none; } #home .recent-section { margin-top: 27px; border-radius: 18px; background: rgba(7, 39, 52, .38); }.recent-section .text-button { display: none; }
@media (prefers-reduced-motion: no-preference) { #home .home-command::before { animation: home-ambient-breathe 10s ease-in-out infinite alternate; } #home .first-steps li { animation: home-step-arrive .7s both; } #home .first-steps li:nth-child(2) { animation-delay: .14s; } #home .first-steps li:nth-child(3) { animation-delay: .28s; } } @keyframes home-ambient-breathe { to { transform: scale(1.05) translate(1.2%, -1%); opacity: .95; } } @keyframes home-step-arrive { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) { #home .home-command { padding: 0; background: none; } #home .masthead { grid-template-columns: 1fr; gap: 27px; padding: 29px 22px; border-radius: 16px; } #home .masthead::after { display: none; } #home .first-experiment { padding: 21px 18px; border-radius: 15px; } #home .stats-grid { margin: 13px 0 0; border-radius: 13px; } #home .stats-grid article, #home .stats-grid article + article { min-height: 84px; padding: 14px 10px 12px; } #home .stats-grid strong { font-size: 33px; } #home .recent-section { margin-top: 19px; border-radius: 15px; } }


/* Navigation: a quiet glassy control bar, closer to a field journal than a HUD. */
.topbar { min-height: 76px; height: auto; gap: 10px; margin-bottom: 34px; padding: 9px 11px; background: linear-gradient(108deg, rgba(10, 48, 62, .9), rgba(8, 38, 53, .82)); border: 1px solid rgba(116, 218, 218, .36); border-radius: 19px; box-shadow: inset 0 1px rgba(234, 255, 255, .08), 0 12px 28px rgba(0, 13, 22, .16); clip-path: none; backdrop-filter: blur(14px); }
.topbar .brand { flex: 0 0 auto; gap: 10px; padding: 7px 13px 7px 8px; border: 1px solid rgba(130, 226, 223, .15); border-radius: 13px; background: rgba(3, 27, 39, .35); transition: background .28s ease, border-color .28s ease, transform .28s ease; }
.topbar .brand:hover { background: rgba(16, 82, 96, .42); border-color: rgba(133, 231, 226, .36); transform: translateY(-1px); }
.topbar .brand-mark { width: 38px; height: 38px; border-radius: 12px; background: linear-gradient(145deg, #37b7c8, #147e9d); color: #efffff; font: 800 22px/1 system-ui, sans-serif; box-shadow: 0 5px 13px rgba(13, 156, 184, .27), inset 0 1px rgba(255,255,255,.26); }
.topbar .brand b { display: block; color: #f0ffff; font: 800 15px/1 system-ui, sans-serif; letter-spacing: -.02em; text-transform: none; }
.topbar .brand small { margin-top: 4px; color: #91bfc8; font: 700 8px/1 system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.topbar nav { display: flex; flex: 1 1 auto; align-self: auto; align-items: center; gap: 3px; min-width: 0; padding: 3px; overflow-x: auto; scrollbar-width: none; border: 1px solid rgba(121, 210, 214, .12); border-radius: 14px; background: rgba(3, 26, 38, .25); }
.topbar nav::-webkit-scrollbar { display: none; }
.topbar nav a { flex: 0 0 auto; min-height: 42px; padding: 0 13px; color: #a9cbd1; border: 0; border-radius: 10px; background: transparent; font: 700 11px/1 system-ui, sans-serif; letter-spacing: .015em; text-transform: none; white-space: nowrap; transition: color .24s ease, background .24s ease, box-shadow .24s ease, transform .24s ease; }
.topbar nav a:hover { color: #e6ffff; background: rgba(105, 217, 217, .11); box-shadow: none; transform: translateY(-1px); }
.topbar nav a.active, .topbar nav a.active:hover { color: #083340; background: linear-gradient(135deg, #8ae8e2, #5ed4d5); box-shadow: 0 4px 11px rgba(56, 201, 202, .22), inset 0 1px rgba(255,255,255,.38); transform: none; }
.topbar .language-switch { display: flex; flex: 0 0 auto; gap: 2px; padding: 3px; border: 1px solid rgba(120, 218, 220, .28); border-radius: 11px; background: rgba(3, 26, 38, .36); }
.topbar .language-switch button { min-width: 29px; min-height: 31px; border-radius: 8px; transition: color .2s ease, background .2s ease, transform .2s ease; }
.topbar .language-switch button:hover { transform: translateY(-1px); }
.topbar .icon-button { flex: 0 0 auto; width: 39px; height: 39px; border: 1px solid rgba(124, 223, 221, .32); border-radius: 12px; background: rgba(5, 34, 47, .45); box-shadow: inset 0 1px rgba(255,255,255,.05); transition: background .24s ease, color .24s ease, border-color .24s ease, transform .24s ease; }
.topbar .icon-button:hover { color: #dffefe; background: rgba(25, 104, 120, .55); border-color: rgba(141, 234, 230, .62); transform: translateY(-1px) rotate(-4deg); }
@media (prefers-reduced-motion: no-preference) { .topbar { animation: topbar-settle .55s cubic-bezier(.2, .75, .35, 1) both; } .topbar .brand-mark { animation: brand-mark-breathe 5.5s ease-in-out infinite; } }
@keyframes topbar-settle { from { opacity: 0; transform: translateY(-7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes brand-mark-breathe { 50% { box-shadow: 0 5px 16px rgba(54, 211, 210, .39), inset 0 1px rgba(255,255,255,.3); } }
@media (max-width: 940px) { .topbar { flex-wrap: wrap; } .topbar nav { order: 3; width: 100%; } }
@media (max-width: 560px) { .topbar { gap: 7px; padding: 8px; border-radius: 15px; } .topbar .brand { padding: 6px 9px 6px 6px; } .topbar .brand-mark { width: 34px; height: 34px; border-radius: 10px; font-size: 20px; } .topbar .brand b { font-size: 14px; } .topbar .brand small { display: none; } .topbar nav a { min-height: 39px; padding: 0 11px; font-size: 10px; } .topbar .language-switch button { min-width: 27px; } }