:root {
        --bg-0: #05080c;
        --bg-1: #09131c;
        --bg-2: #102536;
        --surface: rgba(8, 16, 25, 0.72);
        --surface-strong: rgba(11, 22, 34, 0.88);
        --surface-soft: rgba(255, 255, 255, 0.055);
        --text: #f4f7ff;
        --muted: rgba(231, 239, 255, 0.78);
        --muted-strong: rgba(231, 239, 255, 0.92);
        --line: rgba(164, 205, 255, 0.18);
        --line-strong: rgba(164, 205, 255, 0.32);
        --accent: #7ce6ff;
        --accent-2: #8fb8ff;
        --accent-3: #ffd27d;
        --card-shadow: 0 22px 64px rgba(0, 0, 0, 0.28);
        --panel-shadow: 0 34px 120px rgba(2, 6, 14, 0.42);
        --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
        --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
      }
      * {
        box-sizing: border-box;
      }
      html {
        color-scheme: dark;
        scroll-behavior: smooth;
      }
      html[data-community-ready='0'] body {
        visibility: hidden;
      }
      body {
        margin: 0;
        min-height: 100vh;
        padding: 30px 16px 64px;
        font-family: "Instrument Sans", "Segoe UI Variable", "Segoe UI", sans-serif;
        color: var(--text);
        opacity: 0;
        transform: translateY(22px) scale(0.985);
        transition:
          opacity 560ms var(--ease-out),
          transform 900ms var(--ease-spring);
        background:
          radial-gradient(880px 540px at 12% 0%, rgba(124, 230, 255, 0.18) 0%, rgba(124, 230, 255, 0) 58%),
          radial-gradient(760px 560px at 100% 2%, rgba(255, 210, 125, 0.12) 0%, rgba(255, 210, 125, 0) 60%),
          radial-gradient(960px 760px at 50% 120%, rgba(143, 184, 255, 0.16) 0%, rgba(143, 184, 255, 0) 58%),
          linear-gradient(180deg, #071018 0%, var(--bg-1) 36%, var(--bg-0) 100%);
      }
      body::before,
      body::after {
        content: "";
        position: fixed;
        inset: auto;
        width: 40vw;
        height: 40vw;
        max-width: 520px;
        max-height: 520px;
        border-radius: 50%;
        pointer-events: none;
        filter: blur(18px);
        z-index: 0;
        opacity: 0.56;
        animation: ambientFloat 18s ease-in-out infinite alternate;
      }
      body::before {
        top: -14vw;
        left: -8vw;
        background: radial-gradient(circle, rgba(124, 230, 255, 0.18) 0%, rgba(124, 230, 255, 0) 72%);
      }
      body::after {
        right: -10vw;
        bottom: -18vw;
        background: radial-gradient(circle, rgba(143, 184, 255, 0.16) 0%, rgba(143, 184, 255, 0) 74%);
        animation-duration: 22s;
      }
      body.is-mounted {
        opacity: 1;
        transform: none;
      }
      a {
        color: #cae1ff;
        text-decoration: none;
        transition:
          color 220ms ease,
          opacity 220ms ease;
      }
      a:hover {
        color: #ffffff;
        text-decoration: none;
      }
      main {
        position: relative;
        z-index: 1;
        display: grid;
        gap: 24px;
        max-width: 1160px;
        margin: 0 auto;
      }
      main::before {
        content: "";
        position: absolute;
        inset: 120px 0 auto;
        height: 1px;
        background: linear-gradient(90deg, rgba(124, 230, 255, 0), rgba(124, 230, 255, 0.3), rgba(124, 230, 255, 0));
        opacity: 0.65;
        pointer-events: none;
      }
      .section-head {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 18px;
        margin-bottom: 18px;
      }
      .section-copy {
        display: grid;
        gap: 12px;
        max-width: 720px;
      }
      header.shell {
        position: sticky;
        top: 14px;
        z-index: 12;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        flex-wrap: wrap;
        padding: 14px 18px;
        border-radius: 24px;
        background: linear-gradient(180deg, rgba(12, 22, 34, 0.84) 0%, rgba(8, 14, 24, 0.78) 100%);
        border: 1px solid rgba(164, 205, 255, 0.15);
        box-shadow: 0 18px 52px rgba(0, 0, 0, 0.22);
        backdrop-filter: blur(22px);
      }
      .home {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        font-family: "Space Grotesk", "Segoe UI Variable", sans-serif;
        font-size: 18px;
        font-weight: 700;
        letter-spacing: -0.04em;
        color: var(--text);
        text-decoration: none;
      }
      .home::before {
        content: "";
        width: 12px;
        height: 12px;
        border-radius: 999px;
        background: linear-gradient(135deg, var(--accent) 0%, var(--accent-3) 100%);
        box-shadow: 0 0 22px rgba(124, 230, 255, 0.55);
        animation: pulseDot 2.8s ease-in-out infinite;
      }
      nav {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        font-size: 12px;
      }
      nav a {
        position: relative;
        padding: 8px 12px;
        border-radius: 999px;
        border: 1px solid transparent;
        color: rgba(219, 231, 255, 0.82);
        background: rgba(255, 255, 255, 0.03);
        transition:
          transform 260ms var(--ease-out),
          border-color 260ms ease,
          background 260ms ease,
          color 260ms ease,
          box-shadow 320ms ease;
      }
      nav a:hover,
      nav a:focus-visible {
        transform: translateY(-2px);
        border-color: rgba(124, 230, 255, 0.28);
        background: rgba(124, 230, 255, 0.08);
        box-shadow: 0 10px 28px rgba(4, 10, 18, 0.22);
      }
      nav a[aria-current='page'] {
        color: #fff;
        border-color: rgba(124, 230, 255, 0.34);
        background:
          linear-gradient(135deg, rgba(124, 230, 255, 0.16) 0%, rgba(143, 184, 255, 0.12) 100%);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 12px 28px rgba(5, 16, 28, 0.26);
      }
      .hero, section {
        position: relative;
        overflow: hidden;
        padding: 24px;
        border-radius: 28px;
        background:
          linear-gradient(180deg, rgba(13, 24, 36, 0.9) 0%, rgba(8, 15, 24, 0.82) 100%);
        border: 1px solid var(--line);
        box-shadow: var(--card-shadow);
        isolation: isolate;
      }
      .hero::after,
      section::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        border: 1px solid rgba(255, 255, 255, 0.03);
        pointer-events: none;
      }
      .hero::before,
      section::before {
        content: "";
        position: absolute;
        inset: 0 auto auto 0;
        width: 100%;
        height: 1px;
        background: linear-gradient(90deg, rgba(124, 230, 255, 0), rgba(124, 230, 255, 0.42), rgba(255, 210, 125, 0.18), rgba(124, 230, 255, 0));
        opacity: 0.86;
        pointer-events: none;
      }
      .hero {
        padding: 30px;
        background:
          radial-gradient(460px 320px at 84% 16%, rgba(124, 230, 255, 0.16) 0%, rgba(124, 230, 255, 0) 72%),
          radial-gradient(360px 260px at 0% 0%, rgba(255, 210, 125, 0.11) 0%, rgba(255, 210, 125, 0) 68%),
          linear-gradient(135deg, rgba(11, 26, 40, 0.96) 0%, rgba(8, 15, 24, 0.94) 64%, rgba(5, 10, 16, 0.96) 100%);
        box-shadow: var(--panel-shadow);
      }
      .feed-surface {
        background:
          radial-gradient(540px 360px at 100% 0%, rgba(124, 230, 255, 0.14) 0%, rgba(124, 230, 255, 0) 72%),
          linear-gradient(180deg, rgba(11, 23, 35, 0.94) 0%, rgba(8, 14, 24, 0.9) 100%);
        box-shadow: var(--panel-shadow);
      }
      .feed-controls {
        display: grid;
        gap: 14px;
        min-width: min(100%, 320px);
        justify-items: end;
      }
      .control-stack,
      .filter-stack {
        display: grid;
        gap: 10px;
        justify-items: end;
      }
      .filter-row {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 10px;
      }
      .sort-select {
        min-width: 196px;
      }
      .hero > * {
        position: relative;
        z-index: 1;
      }
      .hero::after {
        background:
          linear-gradient(120deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0) 36%),
          radial-gradient(420px 420px at 92% 18%, rgba(124, 230, 255, 0.1) 0%, rgba(124, 230, 255, 0) 72%);
      }
      .eyebrow, .pill {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 7px 12px;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        background: rgba(255, 255, 255, 0.055);
        color: #dfe8ff;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        backdrop-filter: blur(18px);
      }
      .eyebrow {
        margin-bottom: 16px;
        border-color: rgba(124, 230, 255, 0.24);
        background: rgba(124, 230, 255, 0.08);
        color: #e6fcff;
      }
      .eyebrow::before,
      .pill::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 999px;
        background: currentColor;
        box-shadow: 0 0 14px currentColor;
        opacity: 0.88;
      }
      .pill {
        color: rgba(241, 247, 255, 0.88);
      }
      h1, h2, h3, .home, .btn {
        font-family: "Space Grotesk", "Segoe UI Variable", sans-serif;
      }
      h1 {
        margin: 0;
        max-width: 10.5em;
        font-size: clamp(2.6rem, 6vw, 4.8rem);
        line-height: 0.96;
        letter-spacing: -0.06em;
        text-wrap: balance;
      }
      h2 {
        margin: 0 0 10px 0;
        font-size: clamp(1.45rem, 3vw, 2rem);
        letter-spacing: -0.04em;
      }
      h3 {
        margin: 0 0 10px 0;
        font-size: 1.18rem;
        letter-spacing: -0.03em;
      }
      p, li {
        color: var(--muted);
        line-height: 1.7;
      }
      p {
        margin: 0;
      }
      .hero-copy {
        display: grid;
        gap: 14px;
        max-width: 760px;
      }
      .meta,
      .help {
        font-size: 12px;
        color: rgba(234, 240, 255, 0.66);
      }
      .meta {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        width: fit-content;
        margin-top: 18px;
        padding: 10px 14px;
        border-radius: 999px;
        border: 1px solid rgba(164, 205, 255, 0.14);
        background: rgba(255, 255, 255, 0.04);
        backdrop-filter: blur(14px);
      }
      .hero-actions,
      .cta-row,
      .form-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-top: 20px;
      }
      .btn {
        position: relative;
        isolation: isolate;
        overflow: hidden;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 46px;
        padding: 11px 18px;
        border-radius: 16px;
        border: 1px solid rgba(164, 205, 255, 0.18);
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
        color: var(--text);
        text-decoration: none;
        font-size: 0.94rem;
        font-weight: 700;
        letter-spacing: -0.02em;
        box-shadow: 0 12px 30px rgba(4, 10, 18, 0.18);
        transition:
          transform 260ms var(--ease-out),
          border-color 260ms ease,
          box-shadow 320ms ease,
          background 320ms ease,
          filter 260ms ease;
      }
      .btn::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, rgba(124, 230, 255, 0.14) 0%, rgba(143, 184, 255, 0.06) 50%, rgba(255, 210, 125, 0.08) 100%);
        opacity: 0;
        transition: opacity 280ms ease;
        z-index: -1;
      }
      .btn:hover,
      .btn:focus-visible {
        transform: translateY(-2px);
        border-color: rgba(124, 230, 255, 0.28);
        box-shadow: 0 18px 36px rgba(4, 12, 24, 0.26);
        filter: saturate(1.08);
      }
      .btn:hover::before,
      .btn:focus-visible::before {
        opacity: 1;
      }
      .btn:active {
        transform: translateY(1px) scale(0.985);
      }
      .btn.primary {
        border-color: rgba(124, 230, 255, 0.34);
        background: linear-gradient(135deg, rgba(124, 230, 255, 0.18) 0%, rgba(143, 184, 255, 0.16) 52%, rgba(255, 210, 125, 0.14) 100%);
      }
      .btn.primary::before {
        opacity: 1;
      }
      .filter-chip {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 38px;
        padding: 8px 14px;
        border-radius: 999px;
        border: 1px solid rgba(164, 205, 255, 0.14);
        background: rgba(255, 255, 255, 0.035);
        color: rgba(231, 239, 255, 0.76);
        font: inherit;
        font-size: 0.84rem;
        cursor: pointer;
        transition:
          transform 240ms var(--ease-out),
          border-color 240ms ease,
          background 240ms ease,
          color 240ms ease,
          box-shadow 280ms ease;
      }
      .filter-chip:hover,
      .filter-chip:focus-visible {
        transform: translateY(-2px);
        border-color: rgba(124, 230, 255, 0.24);
        background: rgba(124, 230, 255, 0.07);
        color: #fff;
      }
      .filter-chip.is-active {
        border-color: rgba(124, 230, 255, 0.34);
        background: linear-gradient(135deg, rgba(124, 230, 255, 0.16) 0%, rgba(143, 184, 255, 0.12) 100%);
        color: #fff;
        box-shadow: 0 12px 26px rgba(6, 14, 26, 0.22);
      }
      .btn[disabled] {
        cursor: wait;
        opacity: 0.72;
        transform: none;
        box-shadow: none;
      }
      .grid {
        display: grid;
        gap: 16px;
      }
      .grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
      .grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .card {
        position: relative;
        overflow: hidden;
        padding: 18px;
        border-radius: 22px;
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.055) 0%, rgba(255, 255, 255, 0.03) 100%);
        border: 1px solid rgba(164, 205, 255, 0.12);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
        transition:
          transform 340ms var(--ease-out),
          border-color 340ms ease,
          background 340ms ease,
          box-shadow 380ms ease;
      }
      .card::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(140deg, rgba(124, 230, 255, 0.08) 0%, rgba(124, 230, 255, 0) 38%, rgba(255, 210, 125, 0.06) 100%);
        opacity: 0;
        transition: opacity 320ms ease;
        pointer-events: none;
      }
      .card:hover,
      .card:focus-within {
        transform: translateY(-4px);
        border-color: rgba(124, 230, 255, 0.22);
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.04) 100%);
        box-shadow: 0 20px 44px rgba(4, 10, 18, 0.24);
      }
      .card:hover::before,
      .card:focus-within::before {
        opacity: 1;
      }
      .card strong {
        display: block;
        margin-bottom: 8px;
        font-family: "Space Grotesk", "Segoe UI Variable", sans-serif;
        font-size: clamp(1.1rem, 2vw, 1.3rem);
        letter-spacing: -0.03em;
      }
      .hero .grid.four {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 860px;
      }
      .hero .grid.four .card {
        min-height: 100%;
      }
      .forum-surface {
        display: grid;
        gap: 18px;
      }
      .forum-layout {
        display: grid;
        grid-template-columns: minmax(300px, 0.94fr) minmax(0, 1.28fr);
        gap: 18px;
        align-items: start;
      }
      .forum-board,
      .forum-thread {
        display: grid;
        gap: 14px;
      }
      .forum-board-head,
      .thread-head,
      .thread-replies-head,
      .reply-card-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
      }
      .forum-mini-label {
        margin: 0 0 6px;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: rgba(222, 238, 255, 0.58);
      }
      .thread-head-actions {
        display: grid;
        justify-items: end;
        gap: 8px;
      }
      .thread-permalink {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 34px;
        padding: 7px 11px;
        border-radius: 999px;
        border: 1px solid rgba(164, 205, 255, 0.16);
        background: rgba(255, 255, 255, 0.04);
        color: #f5f9ff;
        font-size: 12px;
        font-weight: 700;
        white-space: nowrap;
      }
      .topic-count-pill {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 42px;
        min-height: 34px;
        padding: 6px 11px;
        border-radius: 999px;
        border: 1px solid rgba(164, 205, 255, 0.16);
        background: rgba(255, 255, 255, 0.04);
        color: #f5f9ff;
        font-size: 12px;
        font-weight: 700;
      }
      .topic-list,
      .reply-list {
        display: grid;
        gap: 12px;
      }
      .search-input {
        min-width: min(280px, 100%);
      }
      .topic-pagination {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding-top: 6px;
      }
      .topic-pagination .btn {
        min-width: 112px;
      }
      .topic-item {
        width: 100%;
        display: grid;
        gap: 10px;
        padding: 16px;
        border-radius: 20px;
        border: 1px solid rgba(164, 205, 255, 0.12);
        background: rgba(255, 255, 255, 0.03);
        color: inherit;
        text-align: left;
        font: inherit;
        cursor: pointer;
        transition:
          transform 220ms var(--ease-out),
          border-color 220ms ease,
          background 220ms ease,
          box-shadow 260ms ease;
      }
      .topic-item:hover,
      .topic-item:focus-visible {
        transform: translateY(-2px);
        border-color: rgba(124, 230, 255, 0.26);
        background: rgba(255, 255, 255, 0.05);
        box-shadow: 0 16px 28px rgba(4, 10, 18, 0.18);
      }
      .topic-item.is-active {
        border-color: rgba(124, 230, 255, 0.32);
        background:
          linear-gradient(180deg, rgba(124, 230, 255, 0.08) 0%, rgba(255, 255, 255, 0.04) 100%);
        box-shadow: 0 18px 34px rgba(4, 12, 24, 0.22);
      }
      .topic-item-top,
      .topic-item-bottom {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
      }
      .topic-title {
        margin: 0;
        font-family: "Space Grotesk", "Segoe UI Variable", sans-serif;
        font-size: 1.04rem;
        font-weight: 700;
        letter-spacing: -0.03em;
        color: var(--text);
      }
      .topic-snippet,
      .thread-summary {
        color: var(--muted-strong);
      }
      .thread-loading {
        color: rgba(231, 239, 255, 0.72);
        font-size: 0.95rem;
      }
      .topic-meta,
      .thread-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 10px 14px;
        font-size: 12px;
        color: rgba(231, 239, 255, 0.62);
      }
      .thread-action-bar {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
      }
      .thread-action-bar .btn.is-active {
        border-color: rgba(124, 230, 255, 0.28);
        background: rgba(124, 230, 255, 0.1);
        color: #f6fcff;
      }
      .report-panel {
        display: grid;
        gap: 12px;
        padding: 16px;
        border-radius: 20px;
        border: 1px solid rgba(164, 205, 255, 0.12);
        background: rgba(255, 255, 255, 0.03);
      }
      .report-panel[hidden] {
        display: none !important;
      }
      .report-panel-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
      }
      .thread-empty,
      .empty-note {
        padding: 18px;
        border-radius: 18px;
        border: 1px dashed rgba(164, 205, 255, 0.16);
        background: rgba(255, 255, 255, 0.03);
      }
      .thread-title {
        margin: 0;
        font-size: clamp(1.8rem, 3.1vw, 2.45rem);
        line-height: 1.02;
        letter-spacing: -0.05em;
      }
      .author-profile {
        display: grid;
        gap: 14px;
        padding: 16px 18px;
        border-radius: 20px;
        border: 1px solid rgba(164, 205, 255, 0.12);
        background: rgba(255, 255, 255, 0.03);
      }
      .author-profile-head {
        display: flex;
        align-items: center;
        gap: 14px;
      }
      .author-avatar {
        width: 46px;
        height: 46px;
        border-radius: 16px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, rgba(124, 230, 255, 0.18) 0%, rgba(255, 210, 125, 0.2) 100%);
        color: #fff7ef;
        font-family: "Space Grotesk", "Pretendard Variable", sans-serif;
        font-size: 18px;
        font-weight: 800;
      }
      .author-profile-copy {
        display: grid;
        gap: 6px;
        min-width: 0;
      }
      .author-kicker {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: rgba(222, 238, 255, 0.58);
      }
      .author-name-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
      }
      .author-name {
        margin: 0;
        font-size: 1rem;
        font-weight: 700;
        color: var(--text);
      }
      .author-role {
        display: inline-flex;
        align-items: center;
        padding: 4px 8px;
        border-radius: 999px;
        border: 1px solid rgba(164, 205, 255, 0.16);
        background: rgba(255, 255, 255, 0.05);
        color: rgba(241, 247, 255, 0.84);
        font-size: 11px;
        font-weight: 700;
      }
      .author-metric-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
      }
      .author-metric {
        display: grid;
        gap: 6px;
        padding: 12px;
        border-radius: 16px;
        border: 1px solid rgba(164, 205, 255, 0.1);
        background: rgba(255, 255, 255, 0.03);
      }
      .author-metric strong {
        font-size: 1rem;
        color: var(--text);
      }
      .author-metric span,
      .author-profile-foot {
        font-size: 12px;
        color: rgba(231, 239, 255, 0.66);
      }
      .author-thread-shell {
        display: grid;
        gap: 10px;
      }
      .author-tagline {
        margin: 0;
        font-size: 13px;
        color: rgba(235, 243, 255, 0.88);
      }
      .author-bio {
        margin: 0;
        font-size: 13px;
        color: rgba(231, 239, 255, 0.7);
      }
      .author-profile-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }
      .author-profile-meta span {
        display: inline-flex;
        align-items: center;
        padding: 5px 9px;
        border-radius: 999px;
        border: 1px solid rgba(164, 205, 255, 0.12);
        background: rgba(255, 255, 255, 0.04);
        font-size: 11px;
        color: rgba(231, 239, 255, 0.7);
      }
      .author-link-row {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }
      .author-link-row a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 8px 10px;
        border-radius: 999px;
        border: 1px solid rgba(164, 205, 255, 0.12);
        background: rgba(255, 255, 255, 0.04);
        color: #f5f9ff;
        font-size: 12px;
        font-weight: 700;
      }
      .member-focus {
        display: grid;
        gap: 14px;
        margin-bottom: 18px;
        padding: 18px;
        border-radius: 22px;
        border: 1px solid var(--line);
        background: #fffdfa;
      }
      .member-focus-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 14px;
      }
      .member-focus-copy {
        display: grid;
        gap: 10px;
      }
      .member-focus-copy h2,
      .member-focus-copy p {
        margin: 0;
      }
      .member-focus-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
      }
      .member-focus-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.05fr) minmax(240px, 0.95fr);
        gap: 14px;
      }
      .member-focus-panel {
        display: grid;
        gap: 10px;
        padding: 14px;
        border-radius: 18px;
        border: 1px solid var(--line);
        background: #fff;
      }
      .member-focus-panel h3,
      .member-focus-panel p {
        margin: 0;
      }
      .member-focus-replies {
        display: grid;
        gap: 8px;
      }
      .member-focus-reply {
        display: grid;
        gap: 4px;
        padding: 10px 12px;
        border-radius: 14px;
        border: 1px solid var(--line);
        background: #fffdfa;
      }
      .member-focus-reply strong {
        color: var(--text);
        font-size: 13px;
      }
      .member-focus-reply span,
      .member-focus-reply p {
        margin: 0;
        font-size: 12px;
        color: #6d7884;
      }
      .author-thread-list {
        display: grid;
        gap: 8px;
      }
      .author-thread-link {
        width: 100%;
        display: grid;
        gap: 4px;
        padding: 10px 12px;
        border-radius: 14px;
        border: 1px solid rgba(164, 205, 255, 0.1);
        background: rgba(255, 255, 255, 0.03);
        color: inherit;
        text-align: left;
        font: inherit;
        cursor: pointer;
        transition:
          transform 180ms ease,
          border-color 180ms ease,
          box-shadow 180ms ease,
          background 180ms ease;
      }
      .author-thread-link:hover,
      .author-thread-link:focus-visible {
        transform: translateY(-1px);
        border-color: rgba(164, 205, 255, 0.18);
        background: rgba(255, 255, 255, 0.06);
      }
      .author-thread-link strong {
        color: var(--text);
        font-size: 13px;
        line-height: 1.4;
      }
      .author-thread-link span,
      .author-profile-note {
        font-size: 12px;
        color: rgba(231, 239, 255, 0.66);
      }
      .thread-body {
        display: grid;
        gap: 12px;
        padding: 18px;
        border-radius: 20px;
        border: 1px solid rgba(164, 205, 255, 0.12);
        background: rgba(255, 255, 255, 0.03);
      }
      .thread-body p {
        margin: 0;
        color: rgba(233, 241, 255, 0.88);
      }
      .reply-card {
        display: grid;
        gap: 10px;
        padding: 16px;
        border-radius: 18px;
        border: 1px solid rgba(164, 205, 255, 0.12);
        background: rgba(255, 255, 255, 0.03);
      }
      .reply-card-foot {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
      }
      .reply-card-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }
      .reply-card-actions .btn {
        padding: 7px 10px;
        font-size: 12px;
      }
      .reply-card p {
        margin: 0;
        color: rgba(235, 242, 255, 0.86);
      }
      .reply-form-shell {
        display: grid;
        gap: 14px;
        padding-top: 4px;
      }
      .reply-form-shell form {
        gap: 12px;
      }
      .feed-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
      }
      .feed-empty {
        margin-bottom: 16px;
      }
      .post-card {
        display: grid;
        gap: 14px;
      }
      .post-card.is-filtered {
        opacity: 0;
        transform: translateY(18px) scale(0.985);
        pointer-events: none;
      }
      .post-card-top,
      .post-card-bottom {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
      }
      .post-badges {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }
      .post-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 10px;
        border-radius: 999px;
        border: 1px solid rgba(164, 205, 255, 0.14);
        background: rgba(255, 255, 255, 0.04);
        color: rgba(241, 247, 255, 0.88);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }
      .post-badge::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 999px;
        background: currentColor;
        box-shadow: 0 0 10px currentColor;
        opacity: 0.82;
      }
      .post-badge.featured {
        color: #fff1c4;
        border-color: rgba(255, 210, 125, 0.2);
        background: rgba(255, 210, 125, 0.08);
      }
      .post-badge.approved {
        color: #d9fff0;
        border-color: rgba(124, 255, 214, 0.24);
        background: rgba(124, 255, 214, 0.08);
      }
      .post-stamp,
      .post-author {
        font-size: 12px;
        color: rgba(231, 239, 255, 0.62);
      }
      .post-summary {
        color: var(--muted-strong);
      }
      .post-toggle {
        min-width: 122px;
      }
      .post-expand-shell {
        margin-top: 2px;
        overflow: hidden;
        opacity: 1;
        will-change: height, opacity;
      }
      .post-expand-inner {
        overflow: hidden;
      }
      .post-expand-content {
        padding: 16px;
        border-radius: 18px;
        border: 1px solid rgba(164, 205, 255, 0.12);
        background: rgba(255, 255, 255, 0.03);
      }
      .post-expand-content p + p {
        margin-top: 10px;
      }
      .form-shell {
        display: grid;
        grid-template-columns: minmax(0, 1.18fr) minmax(290px, 0.82fr);
        gap: 18px;
        align-items: start;
      }
      .side-stack {
        display: grid;
        gap: 18px;
      }
      .account-shell {
        display: grid;
        gap: 16px;
      }
      .account-status-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
      }
      .account-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        border-radius: 999px;
        border: 1px solid rgba(124, 230, 255, 0.18);
        background: rgba(124, 230, 255, 0.08);
        color: #dffbff;
        font-size: 12px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }
      .account-id {
        word-break: break-all;
      }
      .account-summary-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
      }
      .account-summary-item {
        padding: 14px;
        border-radius: 18px;
        border: 1px solid rgba(164, 205, 255, 0.08);
        background: rgba(255, 255, 255, 0.03);
      }
      .account-summary-item strong {
        display: block;
        margin-top: 6px;
        font-size: 18px;
      }
      .account-inline-note {
        font-size: 12px;
        color: var(--muted);
      }
      form {
        display: grid;
        gap: 14px;
      }
      .field-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
      }
      label {
        display: grid;
        gap: 8px;
        padding: 14px;
        border-radius: 20px;
        border: 1px solid rgba(164, 205, 255, 0.1);
        background: rgba(255, 255, 255, 0.03);
        font-size: 13px;
        color: var(--muted-strong);
        transition:
          transform 240ms var(--ease-out),
          border-color 240ms ease,
          background 240ms ease,
          box-shadow 280ms ease;
      }
      label:focus-within {
        transform: translateY(-2px);
        border-color: rgba(124, 230, 255, 0.24);
        background: rgba(124, 230, 255, 0.05);
        box-shadow: 0 14px 30px rgba(4, 12, 22, 0.2);
      }
      input,
      select,
      textarea {
        width: 100%;
        min-width: 0;
        padding: 13px 14px;
        border-radius: 16px;
        border: 1px solid rgba(164, 205, 255, 0.12);
        background: rgba(3, 8, 14, 0.48);
        color: var(--text);
        font: inherit;
        transition:
          transform 220ms ease,
          border-color 220ms ease,
          background 220ms ease,
          box-shadow 220ms ease;
      }
      input::placeholder,
      textarea::placeholder {
        color: rgba(234, 240, 255, 0.46);
      }
      textarea {
        min-height: 200px;
        resize: vertical;
      }
      input:hover,
      select:hover,
      textarea:hover {
        border-color: rgba(164, 205, 255, 0.22);
      }
      input:focus,
      select:focus,
      textarea:focus {
        outline: none;
        transform: translateY(-1px);
        border-color: rgba(124, 230, 255, 0.3);
        background: rgba(4, 10, 16, 0.68);
        box-shadow: 0 0 0 4px rgba(124, 230, 255, 0.08);
      }
      .hidden-hp {
        position: absolute;
        left: -9999px;
        width: 1px;
        height: 1px;
        opacity: 0;
        pointer-events: none;
        padding: 0;
        border: 0;
        background: transparent;
      }
      .help {
        padding: 0 2px;
      }
      .captcha-shell {
        display: grid;
        gap: 10px;
        margin-top: 14px;
        padding: 14px;
        border-radius: 18px;
        border: 1px solid rgba(164, 205, 255, 0.14);
        background: rgba(255, 255, 255, 0.03);
      }
      .captcha-shell[hidden] {
        display: none;
      }
      .captcha-mount {
        min-height: 65px;
      }
      .status {
        min-width: min(100%, 320px);
        min-height: 46px;
        padding: 11px 14px;
        border-radius: 16px;
        border: 1px solid transparent;
        background: rgba(255, 255, 255, 0.03);
        opacity: 0;
        transform: translateY(8px) scale(0.98);
        transition:
          opacity 240ms ease,
          transform 320ms var(--ease-out),
          border-color 260ms ease,
          background 260ms ease,
          color 260ms ease;
      }
      .status:not(:empty) {
        opacity: 1;
        transform: none;
      }
      .status[data-state='success'] {
        color: #dcfff3;
        border-color: rgba(124, 255, 214, 0.2);
        background: rgba(25, 92, 72, 0.18);
      }
      .status[data-state='error'] {
        color: #ffdcdc;
        border-color: rgba(255, 140, 140, 0.22);
        background: rgba(118, 34, 46, 0.2);
      }
      .ad-unit {
        margin-top: 18px;
        padding: 16px;
        border-radius: 22px;
        border: 1px dashed rgba(164, 205, 255, 0.16);
        background: rgba(255, 255, 255, 0.03);
        transition:
          transform 280ms var(--ease-out),
          border-color 280ms ease,
          background 280ms ease;
      }
      .ad-unit:hover {
        transform: translateY(-2px);
        border-color: rgba(124, 230, 255, 0.22);
        background: rgba(255, 255, 255, 0.04);
      }
      ol,
      ul {
        margin: 12px 0 0;
        padding-left: 18px;
      }
      li + li {
        margin-top: 8px;
      }
      html {
        color-scheme: light;
      }
      :root {
        --bg-0: #f2ede3;
        --bg-1: #f7f4ee;
        --bg-2: #efe7d9;
        --surface: #fffdfa;
        --surface-strong: #ffffff;
        --surface-soft: #f7f1e7;
        --text: #1f2730;
        --muted: #5f6975;
        --muted-strong: #49525c;
        --line: #e6dccd;
        --line-strong: #d6c8b1;
        --accent: #d97745;
        --accent-2: #36607f;
        --accent-3: #eab35d;
        --card-shadow: 0 14px 36px rgba(44, 54, 66, 0.08);
        --panel-shadow: 0 18px 44px rgba(44, 54, 66, 0.1);
      }
      body {
        background:
          radial-gradient(720px 360px at 0% 0%, rgba(217, 119, 69, 0.08) 0%, rgba(217, 119, 69, 0) 72%),
          radial-gradient(680px 420px at 100% 0%, rgba(54, 96, 127, 0.08) 0%, rgba(54, 96, 127, 0) 76%),
          linear-gradient(180deg, #f8f4ed 0%, #f1eadf 100%);
      }
      body::before,
      body::after,
      main::before,
      .hero::before,
      .hero::after,
      section::before,
      section::after {
        display: none;
      }
      a {
        color: #294b64;
      }
      a:hover {
        color: #152534;
      }
      header.shell {
        top: 10px;
        background: rgba(255, 253, 250, 0.94);
        border: 1px solid var(--line);
        box-shadow: 0 10px 28px rgba(44, 54, 66, 0.08);
        backdrop-filter: blur(10px);
      }
      .home {
        color: var(--text);
      }
      .home::before {
        background: linear-gradient(135deg, var(--accent) 0%, var(--accent-3) 100%);
        box-shadow: 0 0 12px rgba(217, 119, 69, 0.28);
      }
      nav a {
        color: #5e6b77;
        background: #faf6ef;
      }
      nav a:hover,
      nav a:focus-visible {
        border-color: #dfd1bd;
        background: #fffdfa;
        box-shadow: 0 8px 20px rgba(44, 54, 66, 0.06);
      }
      nav a[aria-current='page'] {
        color: #1f2730;
        border-color: #d5c3aa;
        background: #fff;
        box-shadow: 0 10px 22px rgba(44, 54, 66, 0.06);
      }
      .feed-surface,
      section,
      .card,
      .forum-board,
      .forum-thread {
        background: var(--surface-strong);
        border-color: var(--line);
        box-shadow: var(--card-shadow);
      }
      .feed-surface {
        padding: 28px;
      }
      .eyebrow,
      .pill,
      .board-label {
        color: #7d593e;
        background: #fbf3e7;
        border: 1px solid #edd9bf;
        box-shadow: none;
      }
      .eyebrow::before,
      .pill::before {
        box-shadow: none;
      }
      .board-label {
        display: inline-flex;
        align-items: center;
        padding: 5px 10px;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }
      .portal-hero {
        display: grid;
        gap: 18px;
        padding-bottom: 22px;
        border-bottom: 1px solid var(--line);
        margin-bottom: 20px;
      }
      .portal-hero h1 {
        max-width: 14em;
        font-size: clamp(2rem, 4vw, 3.3rem);
        line-height: 1.04;
        color: var(--text);
      }
      .portal-stats {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
      }
      .portal-stat {
        min-width: 132px;
        padding: 14px 16px;
        border-radius: 18px;
        background: #faf6ef;
        border: 1px solid var(--line);
      }
      .portal-stat strong {
        display: block;
        font-family: "Space Grotesk", "Pretendard Variable", "Noto Sans KR", sans-serif;
        font-size: 1.45rem;
        color: var(--text);
      }
      .portal-stat span {
        display: block;
        margin-top: 4px;
        font-size: 12px;
        color: var(--muted);
      }
      .portal-grid {
        display: grid;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: 16px;
      }
      .board-panel {
        grid-column: span 4;
        padding: 18px;
        border-radius: 22px;
        border: 1px solid var(--line);
        background: #fffdfa;
        box-shadow: var(--card-shadow);
      }
      .board-panel-wide {
        grid-column: span 8;
      }
      .board-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 14px;
      }
      .board-head h2 {
        margin: 8px 0 0;
        font-size: 1.35rem;
      }
      .board-more {
        padding: 8px 12px;
        border-radius: 999px;
        border: 1px solid var(--line);
        background: #f8f2e8;
        color: var(--text);
        font: inherit;
        cursor: pointer;
        transition:
          transform 180ms ease,
          background 180ms ease,
          border-color 180ms ease;
      }
      .board-more:hover,
      .board-more:focus-visible {
        transform: translateY(-1px);
        background: #fff;
        border-color: #d9c7ad;
      }
      .story-card-grid,
      .story-list,
      .reply-ticker {
        display: grid;
        gap: 10px;
      }
      .story-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
      }
      .story-card,
      .story-link,
      .reply-ticker-item {
        width: 100%;
        display: grid;
        gap: 6px;
        padding: 14px;
        border-radius: 18px;
        border: 1px solid var(--line);
        background: #fff;
        color: inherit;
        text-align: left;
        font: inherit;
        cursor: pointer;
        transition:
          transform 180ms ease,
          border-color 180ms ease,
          box-shadow 180ms ease,
          background 180ms ease;
      }
      .story-link,
      .reply-ticker-item {
        padding: 12px 14px;
      }
      .story-card:hover,
      .story-card:focus-visible,
      .story-link:hover,
      .story-link:focus-visible,
      .reply-ticker-item:hover,
      .reply-ticker-item:focus-visible,
      .member-item:hover,
      .member-item:focus-visible,
      .topic-item:hover,
      .topic-item:focus-visible {
        transform: translateY(-1px);
        border-color: #d7c4ab;
        box-shadow: 0 10px 24px rgba(44, 54, 66, 0.07);
      }
      .story-topline {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
      }
      .story-status {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: #a35a37;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
      }
      .story-flags {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 6px;
      }
      .story-flag {
        display: inline-flex;
        align-items: center;
        padding: 4px 8px;
        border-radius: 999px;
        border: 1px solid #ead7be;
        background: #fbf4ea;
        color: #7c6149;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
      }
      .story-flag.featured {
        border-color: #efcfab;
        background: #fcf0df;
        color: #94612f;
      }
      .story-flag.approved {
        border-color: #d7eadf;
        background: #eef8f3;
        color: #2d6b5b;
      }
      .story-flag.anon {
        border-color: #ddd7ef;
        background: #f3effb;
        color: #64508e;
      }
      .story-flag.hot {
        border-color: #efc59e;
        background: #fcede0;
        color: #9e5f2d;
      }
      .story-flag.fresh {
        border-color: #d0e3ea;
        background: #eef7f9;
        color: #366c78;
      }
      .story-title,
      .reply-ticker-title {
        margin: 0;
        font-family: "Pretendard Variable", "Noto Sans KR", "Segoe UI", sans-serif;
        font-size: 15px;
        font-weight: 700;
        line-height: 1.45;
        color: var(--text);
      }
      .story-snippet,
      .reply-ticker-body {
        margin: 0;
        font-size: 13px;
        line-height: 1.55;
        color: var(--muted);
      }
      .story-meta,
      .reply-ticker-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 12px;
        font-size: 12px;
        color: #7b8691;
      }
      .story-meta span,
      .reply-ticker-meta span {
        position: relative;
      }
      .story-meta span + span::before,
      .reply-ticker-meta span + span::before {
        content: "·";
        position: absolute;
        left: -8px;
        color: #b9b1a2;
      }
      .story-empty {
        padding: 12px 0;
        color: var(--muted);
        font-size: 13px;
      }
      .member-list {
        display: grid;
        gap: 10px;
      }
      .member-item {
        width: 100%;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: 12px;
        padding: 12px 14px;
        border-radius: 18px;
        border: 1px solid var(--line);
        background: #fff;
        color: inherit;
        text-align: left;
        font: inherit;
        cursor: pointer;
        transition:
          transform 180ms ease,
          border-color 180ms ease,
          box-shadow 180ms ease,
          background 180ms ease;
      }
      .member-rank {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border-radius: 999px;
        background: #f7efe2;
        border: 1px solid #e8d7c2;
        color: #916643;
        font-size: 13px;
        font-weight: 800;
      }
      .member-main {
        min-width: 0;
        display: grid;
        gap: 6px;
      }
      .member-name-row {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
      }
      .member-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 14px;
        color: var(--text);
      }
      .member-badge {
        display: inline-flex;
        align-items: center;
        padding: 3px 7px;
        border-radius: 999px;
        border: 1px solid #d8e9df;
        background: #eef8f2;
        color: #2d6b5b;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.05em;
        text-transform: uppercase;
      }
      .member-metrics {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 12px;
        font-size: 12px;
        color: #71808d;
      }
      .member-score {
        min-width: 62px;
        display: grid;
        justify-items: end;
        gap: 2px;
        color: #7a6346;
      }
      .member-score strong {
        font-size: 18px;
        line-height: 1;
        color: var(--text);
      }
      .member-score span {
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
      }
      .checkline {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        border-radius: 16px;
        border: 1px solid var(--line);
        background: #fffdfa;
      }
      .checkline input[type='checkbox'] {
        width: 16px;
        height: 16px;
        accent-color: #cf7443;
        flex: 0 0 auto;
      }
      .checkline span {
        margin: 0;
      }
      .portal-thread-shell {
        margin-top: 22px;
        padding-top: 22px;
        border-top: 1px solid var(--line);
      }
      .thread-shell-grid {
        display: grid;
        grid-template-columns: minmax(300px, 360px) minmax(0, 1fr);
        gap: 16px;
      }
      .story-thread-head {
        margin-bottom: 16px;
      }
      .forum-board,
      .forum-thread {
        padding: 18px;
      }
      .topic-item,
      .reply-card,
      .thread-body,
      .thread-empty,
      .empty-note,
      .report-panel,
      label,
      .status,
      .post-expand-content {
        background: #fffdfa;
        border-color: var(--line);
        box-shadow: none;
      }
      .search-input,
      .author-link-row a,
      .thread-action-bar .btn.is-active {
        border-color: var(--line);
        background: #fffdfa;
        color: var(--text);
      }
      .author-profile-meta span {
        border-color: #e0d4c3;
        background: #faf5ed;
        color: #5f6975;
      }
      .author-bio,
      .author-tagline,
      .reply-card p {
        color: #5f6975;
      }
      .topic-item.is-active {
        background: #f8f2e8;
        border-color: #dcc7ab;
        box-shadow: none;
      }
      .post-badge {
        color: #53606d;
        border-color: #e0d4c3;
        background: #faf5ed;
      }
      .post-badge.featured {
        color: #8f5c27;
        border-color: #ecd1a8;
        background: #fbf0dc;
      }
      .post-badge.approved {
        color: #2d6b5b;
        border-color: #cfe5db;
        background: #edf8f3;
      }
      .thread-permalink,
      .author-profile,
      .author-metric {
        background: #fffdfa;
        border-color: var(--line);
        box-shadow: none;
      }
      .author-avatar {
        background: linear-gradient(135deg, #f4e4cd 0%, #f7eadb 100%);
        color: #7d593e;
      }
      .author-kicker,
      .author-profile-foot {
        color: #6d7884;
      }
      .author-role {
        color: #5d6472;
        border-color: #ddd2c1;
        background: #faf5ed;
      }
      .author-thread-link {
        background: #fffdfa;
        border-color: var(--line);
      }
      .author-thread-link span,
      .author-profile-note {
        color: #6d7884;
      }
      .thread-title {
        color: var(--text);
      }
      .thread-body p,
      .reply-card p {
        color: var(--text);
      }
      input,
      select,
      textarea {
        border-color: var(--line);
        background: #fff;
        color: var(--text);
      }
      input::placeholder,
      textarea::placeholder {
        color: #8d96a1;
      }
      input:focus,
      select:focus,
      textarea:focus {
        border-color: #d08b67;
        background: #fff;
        box-shadow: 0 0 0 4px rgba(217, 119, 69, 0.08);
      }
      .btn {
        border-color: #dccbb5;
        background: #fff;
        color: var(--text);
      }
      .btn.primary {
        background: linear-gradient(180deg, #de8452 0%, #cf7443 100%);
        border-color: #c76e3e;
        color: #fff9f4;
      }
      .btn:hover,
      .btn:focus-visible {
        background: #fffdfa;
      }
      .btn.primary:hover,
      .btn.primary:focus-visible {
        background: linear-gradient(180deg, #e28d5c 0%, #d37a49 100%);
      }
      .filter-chip {
        border-color: var(--line);
        background: #faf5ed;
        color: #5f6975;
      }
      .filter-chip.is-active {
        background: #fff;
        color: var(--text);
        border-color: #d8c4a9;
      }
      .help,
      .post-stamp,
      .post-author,
      .topic-meta,
      .thread-meta {
        color: #6d7884;
      }
      @media (max-width: 980px) {
        .portal-grid,
        .thread-shell-grid {
          grid-template-columns: 1fr 1fr;
        }
        .board-panel,
        .board-panel-wide {
          grid-column: span 1;
        }
        .story-card-grid {
          grid-template-columns: 1fr;
        }
      }
      @media (max-width: 760px) {
        .feed-surface,
        .forum-board,
        .forum-thread,
        .board-panel {
          padding: 16px;
        }
        .portal-grid,
        .thread-shell-grid {
          grid-template-columns: 1fr;
        }
        .portal-stats {
          flex-direction: column;
        }
        .story-card-grid {
          grid-template-columns: 1fr;
        }
        .author-metric-grid {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .member-focus-grid {
          grid-template-columns: 1fr;
        }
        .story-topline {
          flex-direction: column;
          align-items: stretch;
        }
        .thread-head-actions {
          justify-items: start;
        }
        .member-item {
          grid-template-columns: 1fr;
        }
        .story-flags,
        .member-score {
          justify-content: flex-start;
          justify-items: start;
        }
        .board-head,
        .story-thread-head {
          flex-direction: column;
          align-items: stretch;
        }
      }
      [data-reveal] {
        opacity: 0;
        transform: translateY(28px) scale(0.985);
        filter: blur(10px);
        transition:
          opacity 620ms var(--ease-out) var(--reveal-delay, 0ms),
          transform 760ms var(--ease-spring) var(--reveal-delay, 0ms),
          filter 540ms ease var(--reveal-delay, 0ms);
        will-change: opacity, transform, filter;
      }
      [data-reveal].is-visible {
        opacity: 1;
        transform: none;
        filter: none;
      }
      @keyframes ambientFloat {
        0% {
          transform: translate3d(0, 0, 0) scale(1);
        }
        100% {
          transform: translate3d(0, 24px, 0) scale(1.08);
        }
      }
      @keyframes pulseDot {
        0%, 100% {
          transform: scale(1);
          opacity: 0.9;
        }
        50% {
          transform: scale(1.12);
          opacity: 1;
        }
      }
      @media (max-width: 980px) {
        .grid.four,
        .grid.three,
        .grid.two,
        .form-shell,
        .feed-grid,
        .forum-layout {
          grid-template-columns: 1fr 1fr;
        }
        .hero .grid.four {
          grid-template-columns: 1fr 1fr;
        }
        .section-head,
        .feed-controls,
        .filter-stack {
          align-items: stretch;
          justify-items: stretch;
        }
        .section-head {
          flex-direction: column;
        }
        .filter-row {
          justify-content: flex-start;
        }
      }
      @media (max-width: 760px) {
        body {
          padding: 18px 12px 44px;
        }
        main {
          gap: 18px;
        }
        header.shell,
        .hero,
        section {
          padding: 18px;
          border-radius: 22px;
        }
        .meta {
          width: 100%;
          border-radius: 18px;
        }
        .grid.four,
        .grid.three,
        .grid.two,
        .feed-grid,
        .form-shell,
        .forum-layout,
        .field-row,
        .hero .grid.four {
          grid-template-columns: 1fr;
        }
        .post-card-top,
        .post-card-bottom,
        .topic-item-top,
        .topic-item-bottom,
        .thread-head,
        .thread-replies-head,
        .reply-card-head,
        .section-head {
          flex-direction: column;
          align-items: stretch;
        }
        .author-metric-grid {
          grid-template-columns: 1fr;
        }
        .account-summary-grid {
          grid-template-columns: 1fr;
        }
        .member-focus-head,
        .member-focus-actions {
          flex-direction: column;
          align-items: stretch;
        }
        .hero-actions,
        .cta-row,
        .form-actions {
          flex-direction: column;
          align-items: stretch;
        }
        .filter-row {
          justify-content: flex-start;
        }
        .btn,
        .status,
        .filter-chip {
          width: 100%;
        }
      }
      @media (prefers-reduced-motion: reduce) {
        html {
          scroll-behavior: auto;
        }
        *,
        *::before,
        *::after {
          animation: none !important;
          transition-duration: 1ms !important;
          transition-delay: 0ms !important;
        }
        body {
          opacity: 1;
          transform: none;
        }
        [data-reveal] {
          opacity: 1;
          transform: none;
          filter: none;
        }
      }