:root {
  --page:#3b3b3b;
  --top:#1b1b1b;
  --nav:#383838;
  --subnav:#292929;
  --content:#131313;
  --panel:#292929;
  --input:#222;
  --footer:#050505;
  --text:#f1f1f1;
  --muted:#bdbdbd;
  --soft:#949494;
  --line:#3e3e3e;
  --cyan:#43bfd2;
  --cyan-dark:#06252b;
  --error:#ff9c9c;
  --success:#7ed8cb;
}

* {
  box-sizing:border-box;
}

html,body {
  min-height:100%;
}

body {
  margin:0;
  background:var(--page);
  color:var(--text);
  font-family:Arial,Helvetica,sans-serif;
  font-size:16px;
  line-height:1.45;
}

body.menu-open {
  overflow:hidden;
}

button,input {
  font:inherit;
}

a {
  color:var(--cyan);
  text-decoration:none;
}

a:hover {
  text-decoration:underline;
}

.site-shell {
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:var(--content);
}

.desktop-brand-row {
  position:relative;
  height:150px;
  background:#202020;
  border-top:2px solid #454545;
}

.desktop-brand-row::before,.desktop-brand-row::after {
  content:"";
  position:absolute;
  top:0;
  width:145px;
  height:145px;
  background:url("/web.png") top left / contain no-repeat;
  pointer-events:none;
}

.desktop-brand-row::before {
  left:0;
}

.desktop-brand-row::after {
  right:0;
  transform:scaleX(-1);
}

.wide-inner,.content-inner {
  width:min(1180px,calc(100% - 96px));
  margin:0 auto;
}

.desktop-brand-row .wide-inner {
  position:relative;
  height:100%;
  display:flex;
  align-items:flex-end;
  gap:20px;
}

.desktop-brand-row .brand-image {
  width:450px;
}

.header-pumpkin {
  display:block;
  width:100px;
  height:100px;
  object-fit:contain;
  align-self:center;
}

.brand {
  display:inline-flex;
  align-items:center;
  color:white;
  text-decoration:none;
}

.brand:hover {
  text-decoration:none;
}

.brand-image {
  display:block;
  width:320px;
  height:auto;
  object-fit:contain;
}

.desktop-nav {
  height:60px;
  background:var(--nav);
  border-bottom:1px solid #333;
}

.desktop-nav .wide-inner {
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.forum-nav,.desktop-login {
  color:#d0d0d0;
}

.forum-nav {
  align-self:flex-end;
  padding:0;
  font-weight:400;
  line-height:30px;
}

.desktop-nav .forum-icon {
  display:inline-flex;
  width:24px;
  margin-right:8px;
  vertical-align:middle;
}

.desktop-nav .forum-icon svg {
  width:24px;
  height:20px;
}

.forum-icon {
  margin-right:8px;
  font-size:1.15rem;
}

.chevron {
  display:inline-block;
  margin-left:8px;
  transform:rotate(45deg);
  width:7px;
  height:7px;
  border-right:2px solid #888;
  border-bottom:2px solid #888;
}

.desktop-login {
  font-size:1.05rem;
}

.account-nav {
  display:flex;
  align-items:center;
  gap:24px;
  white-space:nowrap;
}

.register-link {
  color:#d0d0d0;
}

.trend-row {
  height:32px;
  background:var(--subnav);
  border-bottom:1px solid var(--line);
}

.trend-row .wide-inner {
  height:100%;
  display:flex;
  align-items:center;
}

.trend-row a {
  color:var(--cyan);
  font-size:.875rem;
}

.mobile-header {
  display:none;
}

.menu-button {
  width:44px;
  height:44px;
  padding:6px;
  border:0;
  background:transparent;
  display:grid;
  align-content:center;
  gap:6px;
  cursor:pointer;
}

.menu-button span {
  display:block;
  width:31px;
  height:4px;
  background:var(--cyan);
  border-radius:1px;
}

.page-content {
  flex:1;
  width:100%;
  background:var(--content);
}

.content-inner {
  padding:14px 0 45px;
}

.announcement {
  display:flex;
  align-items:center;
  gap:clamp(16px,2vw,28px);
  margin-bottom:19px;
  padding:20px 24px;
  border:3px solid var(--cyan);
  border-radius:5px;
  background:var(--cyan-dark);
  line-height:1.5;
}

.announcement-frog {
  display:block;
  width:clamp(72px,7vw,100px);
  height:auto;
  flex:none;
}

.announcement-copy {
  min-width:0;
  margin:0;
  overflow-wrap:break-word;
}

.announcement-copy a {
  display:inline-block;
  font-weight:600;
}

.page-title {
  margin:0 0 15px;
  font-size:1.75rem;
  font-weight:400;
  line-height:1.25;
}

.form-intro {
  margin:-6px 0 18px;
  color:var(--muted);
}

.site-footer {
  background:var(--footer);
  color:#d0d0d0;
}

.site-footer .wide-inner {
  min-height:76px;
  padding:13px 0;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:start;
  gap:24px;
}

.language {
  white-space:nowrap;
}

.language span {
  margin-right:7px;
}

.footer-links {
  display:flex;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:4px 22px;
}

.footer-links a {
  color:#c8c8c8;
}

.copyright {
  grid-column:1/-1;
  margin-top:-2px;
  text-align:center;
  color:white;
  font-size:.78rem;
}

.heart {
  color:#ff354a;
}

[hidden] {
  display:none!important
}

html {
  scroll-padding-top:20px
}

body {
  line-height:1.65
}

button {
  font:inherit;
  cursor:pointer
}

a {
  text-decoration:underline;
  text-underline-offset:3px
}

a:focus-visible,button:focus-visible {
  outline:3px solid var(--cyan);
  outline-offset:4px
}

.skip-link {
  position:absolute;
  left:16px;
  top:8px;
  z-index:200;
  padding:10px 16px;
  background:#050505;
  transform:translateY(-160%)
}

.skip-link:focus {
  transform:none
}

.brand-image {
  max-width:100%
}

.desktop-nav a,.trend-row a,.footer-links a {
  display:inline-flex;
  align-items:center;
  min-height:44px
}

.desktop-nav {
  height:auto;
  min-height:60px
}

.desktop-nav .wide-inner {
  min-height:60px
}

.forum-nav {
  align-self:center
}

.trend-row {
  height:auto
}

.trend-row .wide-inner {
  flex-wrap:wrap;
  gap:4px 22px
}

.content-inner {
  padding-top:20px
}

.announcement p {
  margin:0
}

.announcement-frog {
  width:80px
}

.page-title {
  font-size:clamp(1.8rem,4vw,2.3rem)
}

h1 {
  margin:0 0 14px;
  font-size:clamp(1.5rem,3vw,2rem);
  line-height:1.25;
  font-weight:400
}

h2 {
  margin:0 0 12px;
  font-size:1.4rem;
  line-height:1.35
}

h3 {
  margin:22px 0 8px;
  font-size:1.08rem
}

p {
  margin:0 0 16px
}

p:last-child {
  margin-bottom:0
}

.lead {
  max-width:78ch;
  color:#d1d1d1;
  font-size:1.08rem
}

.review-note {
  color:var(--muted);
  font-size:.93rem
}

.page-toc {
  display:flex;
  flex-wrap:wrap;
  gap:4px 20px;
  margin:22px 0;
  padding:12px 18px;
  border:1px solid var(--line);
  border-radius:4px;
  background:#202020
}

.page-toc a {
  display:inline-flex;
  align-items:center;
  min-height:44px
}

.guide-section {
  margin:24px 0 0;
  padding:24px;
  background:#252525;
  border:1px solid var(--line);
  border-radius:4px
}

.status-section {
  border-left:4px solid var(--cyan)
}

.status-label {
  display:inline-block;
  padding:4px 12px;
  margin:0 0 16px;
  color:#fff;
  background:#3b3b3b;
  border:1px solid #777;
  border-radius:3px;
  font-weight:bold
}

.guide-section p,.guide-section li {
  max-width:82ch
}

ul,ol {
  margin:12px 0 18px;
  padding-left:24px
}

li {
  padding-left:4px;
  margin:8px 0
}

.actions {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin:18px 0
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:8px 18px;
  border:1px solid #25828f;
  border-radius:3px;
  background:#176e7a;
  color:#fff;
  text-decoration:none;
  font-weight:bold;
  overflow-wrap:anywhere
}

.button:hover {
  background:#247f8c
}

.button.secondary {
  background:transparent;
  color:var(--cyan)
}





.safety-note {
  padding:14px 18px;
  border-left:3px solid var(--cyan);
  background:#17272a
}

.faq-item {
  padding:18px 0;
  border-top:1px solid var(--line)
}

.faq-item:first-of-type {
  border-top:0;
  padding-top:0
}

.faq-item h3 {
  margin-top:0
}

.site-footer .wide-inner {
  display:block;
  padding:18px 0
}

.footer-links {
  justify-content:flex-start;
  gap:4px 24px
}

.copyright {
  margin:16px 0 0;
  text-align:left;
  color:#bdbdbd;
  font-size:.85rem
}

.drawer {
  position:fixed;
  inset:0 auto 0 0;
  width:min(85vw,410px);
  max-width:100%;
  height:100dvh;
  max-height:100%;
  margin:0;
  padding:0;
  border:0;
  border-right:1px solid var(--line);
  background:#272727;
  color:#cfcfcf
}

.drawer::backdrop {
  background:rgba(0,0,0,.65)
}

.drawer-title {
  min-height:73px;
  padding:12px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:#181818;
  border-bottom:1px solid #363636;
  font-size:1.5rem
}

.drawer-close {
  width:44px;
  height:44px;
  border:0;
  background:transparent;
  color:#ddd;
  font-size:2rem;
  line-height:1
}

.drawer-link {
  min-height:64px;
  padding:14px 20px;
  display:flex;
  align-items:center;
  color:#c8c8c8;
  border-bottom:1px solid #3a3a3a;
  text-decoration:none
}

.drawer-link:hover {
  background:#303030
}




@media(max-width:700px) {
  .desktop-brand-row,.desktop-nav,.trend-row {
    display:none
  }
  .mobile-header {
    min-height:72px;
    padding:8px;
    display:grid;
    grid-template-columns:44px 24px minmax(0,1fr) auto;
    gap:6px;
    align-items:center;
    background:var(--nav)
  }
  .mobile-header .brand {
    min-width:0
  }
  .mobile-header .brand-image {
    width:170px
  }
  .mobile-pumpkin {
    display:block;
    width:24px;
    height:24px;
    object-fit:contain
  }
  .mobile-header .account-nav {
    gap:4px
  }
  .mobile-header .account-nav a {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:44px;
    min-height:44px;
    padding:4px;
    font-size:.875rem;
    color:#d0d0d0;
    text-decoration:none
  }
  .mobile-header:has(.menu-button[hidden]) {
    grid-template-columns:24px minmax(0,1fr) auto
  }
  .mobile-header noscript {
    grid-column:1/-1
  }
  .page-content {
    position:relative
  }
  .page-content::before,.page-content::after {
    content:"";
    position:absolute;
    top:0;
    width:112px;
    height:112px;
    background:url('/web.png') top left/contain no-repeat;
    pointer-events:none
  }
  .page-content::before {
    left:0
  }
  .page-content::after {
    right:0;
    transform:scaleX(-1)
  }
  .content-inner {
    position:relative;
    z-index:1;
    width:100%;
    padding:16px 16px 32px
  }
  .wide-inner {
    width:calc(100% - 32px)
  }
  .announcement {
    align-items:flex-start;
    padding:16px 14px;
    gap:14px
  }
  .announcement-frog {
    width:52px
  }
  .guide-section {
    padding:20px 16px
  }
  .page-toc {
    gap:0 16px;
    padding:8px 12px
  }
  .actions {
    flex-direction:column;
    align-items:stretch
  }
  .button {
    text-align:center
  }
  .no-script-nav {
    display:flex;
    flex-wrap:wrap;
    gap:8px 16px
  }
  .no-script-nav a {
    min-height:44px;
    display:inline-flex;
    align-items:center
  }
}

.hero-eyebrow {
  margin:26px 0 12px;
  color:var(--cyan);
  font-size:.88rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.hero-actions {
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  margin:26px 0 10px;
}

.hero-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-height:64px;
  padding:14px 24px;
  border:1px solid var(--cyan);
  border-radius:16px;
  font-size:1.25rem;
  font-weight:700;
  line-height:1.35;
  text-decoration:none;
}

.hero-button svg {
  width:26px;
  height:26px;
  flex:none;
}

.hero-button-primary {
  background:#d43e70;
  border-color:#ed608f;
  color:white;
}

.hero-button-primary:hover {
  background:#bb305f;
  text-decoration:none;
}

.hero-button-secondary {
  background:#0b2430;
  color:white;
}

.hero-button-secondary:hover {
  background:#153543;
  text-decoration:none;
}

.hero-features {
  display:flex;
  flex-wrap:wrap;
  gap:16px 28px;
  padding:0;
  margin:22px 0;
  list-style:none;
}

.hero-features li {
  display:flex;
  align-items:center;
  gap:10px;
  padding:0;
  margin:0;
  font-size:.95rem;
  font-weight:600;
}

.hero-features svg {
  width:21px;
  height:21px;
  color:var(--cyan);
  flex:none;
}

.hero-features a {
  color:var(--muted);
  text-decoration:none;
}

@media(max-width:700px) {
  body {
    font-size:15px;
    line-height:1.55;
  }
  h1 {
    font-size:24px;
    line-height:1.3;
  }
  h2 {
    font-size:20px;
  }
  h3 {
    font-size:16px;
  }
  .lead {
    font-size:15px;
    line-height:1.6;
  }
  .announcement {
    font-size:14px;
  }
  .hero-eyebrow {
    font-size:11px;
    margin:20px 0 10px;
    letter-spacing:.1em;
  }
  .hero-actions {
    flex-direction:column;
    gap:10px;
    margin:20px 0 16px;
  }
  .hero-button {
    min-height:48px;
    padding:10px 16px;
    border-radius:12px;
    font-size:15px;
    gap:10px;
  }
  .hero-button svg {
    width:20px;
    height:20px;
  }
  .hero-features {
    flex-direction:column;
    gap:12px;
  }
  .hero-features li {
    font-size:14px;
  }
}

.registration-quick-guide {
  margin-top:32px;
}

.registration-quick-guide > h2 {
  margin-bottom:6px;
}

.quick-guide-intro {
  color:var(--muted);
  margin-bottom:20px;
}

.quick-guide-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}

.quick-guide-card {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  padding:24px;
  border:1px solid #30414a;
  border-radius:22px;
  background:#252525;
  min-width:0;
}

.quick-guide-icon {
  display:grid;
  place-items:center;
  width:56px;
  height:56px;
  margin-bottom:20px;
  border:1px solid #393939;
  border-radius:17px;
  background:#202020;
  color:var(--cyan);
}

.quick-guide-icon svg {
  width:30px;
  height:30px;
}

.quick-guide-card h3 {
  margin:0 0 12px;
  font-size:19px;
  line-height:1.35;
}

.quick-guide-card p {
  color:#b4c2ca;
  font-size:15px;
  line-height:1.65;
}

.quick-guide-card > a {
  display:inline-flex;
  align-items:center;
  min-height:44px;
  gap:6px;
  margin-top:auto;
  padding-top:10px;
  font-size:15px;
  font-weight:600;
  text-decoration:none;
}

.quick-guide-card > a:hover {
  text-decoration:underline;
}

@media(max-width:1000px) {
  .quick-guide-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:600px) {
  .quick-guide-grid {
    grid-template-columns:1fr;
    gap:12px;
  }
  .quick-guide-card {
    padding:20px;
    border-radius:18px;
  }
  .quick-guide-card h3 {
    font-size:18px;
  }
  .quick-guide-card p {
    font-size:14px;
  }
}

/* Header navigation follows the supplied desktop and mobile references. */
nav a,nav a:hover,nav a:focus-visible {
  text-decoration:none;
}

.desktop-nav .menu-items {
  justify-content:flex-start;
  gap:4px;
  min-height:64px;
  flex-wrap:wrap;
  padding:4px 0;
}

.menu-items a,.menu-items button {
  min-height:48px;
  padding:10px 16px;
  color:#d0d0d0;
  font-size:1rem;
  font-weight:600;
  line-height:1.4;
  text-decoration:none;
  white-space:nowrap;
  border:0;
  border-radius:12px;
  background:transparent;
}

.menu-items button:disabled {
  opacity:.65;
  cursor:default;
}

.menu-items a:hover {
  background:#292929;
  color:var(--cyan);
  text-decoration:none;
}

.menu-items .menu-active {
  background:#102c3b;
  color:white;
}

.drawer {
  inset:0 0 0 auto;
  border-right:0;
  border-left:1px solid var(--line);
}

.drawer .menu-items {
  display:flex;
  flex-direction:column;
  padding:12px;
  gap:4px;
}

.drawer .drawer-link {
  width:100%;
  min-height:52px;
  justify-content:flex-start;
  text-align:left;
}

@media(max-width:700px) {
  .mobile-header {
    grid-template-columns:24px minmax(0,1fr) 44px;
    gap:12px;
    padding:8px 16px;
  }
  .mobile-header .brand-image {
    width:170px;
  }
  .mobile-header .menu-button {
    justify-self:end;
  }
  .mobile-header:has(.menu-button[hidden]) {
    grid-template-columns:24px minmax(0,1fr);
  }
}

/* Responsive layout: comfortable reading widths and touch targets. */
.wide-inner,.content-inner {
  width:min(1180px,calc(100% - clamp(32px,8vw,96px)));
}

.content-inner {
  min-width:0;
}

.content-inner p,.content-inner li,.content-inner h1,
.content-inner h2,.content-inner h3,.footer-links a {
  overflow-wrap:anywhere;
}

.hero-button-primary {
  background:#cf3869;
}

.hero-features {
  gap:4px 28px;
}

.hero-features a {
  display:inline-flex;
  align-items:center;
  min-height:44px;
}

.quick-guide-card {
  padding:20px;
  border-radius:18px;
}

.quick-guide-icon {
  width:44px;
  height:44px;
  margin-bottom:16px;
  border-radius:13px;
}

.quick-guide-icon svg {
  width:25px;
  height:25px;
}

.quick-guide-card h3 {
  font-size:18px;
}

.quick-guide-card p {
  line-height:1.55;
}

section[id],article[id] {
  scroll-margin-top:20px;
}

@media(min-width:601px) and (max-width:1199px) {
  .quick-guide-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:900px) {
  .desktop-brand-row,.desktop-nav,.trend-row {
    display:none;
  }
  .mobile-header {
    min-height:68px;
    padding:8px clamp(16px,3vw,24px);
    display:grid;
    grid-template-columns:24px minmax(0,1fr) 44px;
    gap:12px;
    align-items:center;
    background:var(--nav);
  }
  .mobile-header .brand {
    min-width:0;
  }
  .mobile-header .brand-image {
    width:170px;
  }
  .mobile-pumpkin {
    display:block;
    width:24px;
    height:24px;
    object-fit:contain;
  }
  .mobile-header .menu-button {
    justify-self:end;
  }
  .mobile-header:has(.menu-button[hidden]) {
    grid-template-columns:24px minmax(0,1fr);
  }
  .mobile-header noscript {
    grid-column:1/-1;
  }
  .no-script-nav {
    display:flex;
    flex-wrap:wrap;
    gap:8px 16px;
  }
  .no-script-nav a {
    min-height:44px;
    display:inline-flex;
    align-items:center;
  }
}

@media(max-width:700px) {
  .content-inner {
    width:100%;
  }
  .hero-features {
    gap:0;
  }
}

@media(max-width:600px) {
  .quick-guide-card {
    display:grid;
    grid-template-columns:44px minmax(0,1fr);
    align-items:center;
    gap:12px;
    padding:18px;
  }
  .quick-guide-icon {
    grid-column:1;
    grid-row:1;
    margin:0;
  }
  .quick-guide-card h3 {
    grid-column:2;
    grid-row:1;
    margin:0;
    font-size:17px;
  }
  .quick-guide-card p {
    grid-column:1/-1;
    margin:0;
    font-size:14px;
  }
  .quick-guide-card > a {
    grid-column:1/-1;
    justify-self:start;
    margin:0;
    padding:0;
    font-size:14px;
  }
}

@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    scroll-behavior:auto!important;
    transition:none!important
  }
  .animated-decoration {
    visibility:hidden
  }
}

.registration-screenshot { margin: 24px 0; }
.registration-screenshot img { display: block; width: 100%; height: auto; border-radius: 8px; }
.registration-screenshot figcaption { margin-top: 10px; text-align: center; font-size: 14px; }