.experience-top-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 10px;
}

.experience-top-nav button,
.experience-admin-upper button,
.experience-admin-sub button,
.experience-board-tabs button,
.experience-tool-tabs button {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
}

.experience-top-nav button {
  padding: 8px 9px;
  color: #4f5561;
  font-size: 13px;
  font-weight: 700;
}

.experience-top-nav button.active { color: #191d27; }
.experience-mobile-nav { display: none; }

.category-rail .experience-category-button {
  flex: 0 0 auto;
}

.experience-admin-nav {
  margin: 18px 0 16px;
  border-bottom: 1px solid #e2e5ea;
}

.experience-admin-upper,
.experience-admin-sub {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}

.experience-admin-upper { min-height: 45px; }
.experience-admin-sub {
  min-height: 39px;
  border-top: 1px solid #edf0f3;
  background: #f8f9fb;
}
.experience-admin-sub:empty { display: none; }
.experience-admin-upper::-webkit-scrollbar,
.experience-admin-sub::-webkit-scrollbar { display: none; }

.experience-admin-upper button {
  flex: 0 0 auto;
  padding: 12px 13px 11px;
  border-bottom: 2px solid transparent;
  color: #656c78;
  font-size: 14px;
  font-weight: 800;
}

.experience-admin-upper button.active {
  color: #171b23;
  border-bottom-color: #2563eb;
}

.experience-admin-sub button {
  flex: 0 0 auto;
  margin: 6px 0;
  padding: 6px 11px;
  border-radius: 5px;
  color: #68717e;
  font-size: 13px;
  font-weight: 700;
}

.experience-admin-sub button.active {
  background: #e8f0ff;
  color: #1d4ed8;
}

.admin-tabs.experience-source-tabs { display: none; }

.experience-admin-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 14px 0;
  padding: 14px 0;
  border-bottom: 1px solid #e8ebef;
  color: #535b68;
  font-size: 14px;
}

.experience-admin-note strong { color: #1e2633; }
.experience-admin-note button,
.experience-primary,
.experience-board-compose button,
.experience-form button {
  min-height: 38px;
  border: 0;
  border-radius: 5px;
  background: #2563eb;
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  padding: 0 14px;
}

body.experience-route-active { overflow: hidden; }
body.experience-route-active #root .page-stack { visibility: hidden; pointer-events: none; }
body[data-experience-route="community"] #root .app-shell,
body[data-experience-route="compat"] #root .app-shell,
body[data-experience-route="fortune"] #root .app-shell { background: #fff !important; color: #20242c !important; }
body[data-experience-route="community"] #root .site-header,
body[data-experience-route="compat"] #root .site-header,
body[data-experience-route="fortune"] #root .site-header,
body[data-experience-route="community"] #root .category-rail,
body[data-experience-route="compat"] #root .category-rail,
body[data-experience-route="fortune"] #root .category-rail,
body[data-experience-route="community"] #root .mobile-bottom-nav,
body[data-experience-route="compat"] #root .mobile-bottom-nav,
body[data-experience-route="fortune"] #root .mobile-bottom-nav { border-color: #e5e8ed !important; background: rgba(255, 255, 255, .96) !important; color: #20242c !important; }
body[data-experience-route="community"] #root .site-header button,
body[data-experience-route="compat"] #root .site-header button,
body[data-experience-route="fortune"] #root .site-header button,
body[data-experience-route="community"] #root .category-rail button,
body[data-experience-route="compat"] #root .category-rail button,
body[data-experience-route="fortune"] #root .category-rail button,
body[data-experience-route="community"] #root .mobile-bottom-nav button,
body[data-experience-route="compat"] #root .mobile-bottom-nav button,
body[data-experience-route="fortune"] #root .mobile-bottom-nav button { color: #20242c !important; }
body[data-experience-route] #root .category-rail button { border-color: #dbe0e5 !important; background: #fff !important; color: #20242c !important; }
body[data-experience-route] #root .category-rail button.active { border-color: #12161c !important; background: #12161c !important; color: #fff !important; }
.experience-route-layer {
  position: fixed;
  z-index: 20;
  container-name: experience-route;
  container-type: inline-size;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #fff;
  color: #20242c;
  scrollbar-gutter: stable;
}
.experience-route-layer[hidden] { display: none; }
.experience-route-layer[data-theme="dark"] { background: #070a0f; color: #f7f8fb; }
.experience-route-layer[data-theme="dark"] .experience-page { color: #f7f8fb; }
.experience-route-layer[data-theme="dark"] .experience-page-header,
.experience-route-layer[data-theme="dark"] .experience-board-tabs,
.experience-route-layer[data-theme="dark"] .experience-board-toolbar,
.experience-route-layer[data-theme="dark"] .experience-board-mobile-list,
.experience-route-layer[data-theme="dark"] .experience-board-mobile-list > li,
.experience-route-layer[data-theme="dark"] .experience-post-detail { border-color: #273040; }
.experience-route-layer[data-theme="dark"] .experience-board-tabs button { color: #9aa4b2; }
.experience-route-layer[data-theme="dark"] .experience-board-tabs button.active { color: #f7f8fb; }
.experience-route-layer[data-theme="dark"] .experience-board-mobile-list > li,
.experience-route-layer[data-theme="dark"] .experience-post-detail { background: #0c1119; }
.experience-route-layer[data-theme="dark"] .experience-board-mobile-list > li.notice { background: #111925; }
.experience-route-layer[data-theme="dark"] .experience-mobile-post,
.experience-route-layer[data-theme="dark"] .experience-mobile-subject strong,
.experience-route-layer[data-theme="dark"] .experience-post-detail h2 { color: #f2f5f9; }
.experience-route-layer[data-theme="dark"] .experience-board-compose { background: #0d131c; }

.experience-page {
  width: min(1040px, calc(100% - 32px));
  margin: 36px auto 72px;
  color: #20242c;
}

.experience-route-header {
  display: flex;
  align-items: center;
  min-height: 58px;
  padding: 0 max(16px, calc((100% - 1040px) / 2));
  box-sizing: border-box;
  border-bottom: 1px solid #e2e5ea;
  background: #fff;
}
.experience-route-brand {
  margin-right: 23px;
  border: 0;
  background: transparent;
  color: #20242c;
  cursor: pointer;
  font: inherit;
  font-size: 16px;
  font-weight: 900;
}
.experience-route-links { display: flex; align-items: center; gap: 3px; overflow-x: auto; }
.experience-route-links button {
  flex: 0 0 auto;
  border: 0;
  background: transparent;
  color: #626b78;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  padding: 8px 9px;
}
.experience-route-links button.active { color: #1d4ed8; }

.experience-page-header {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 20px;
  padding-bottom: 18px;
  border-bottom: 2px solid #20242c;
}

.experience-kicker {
  margin: 0 0 7px;
  color: #606a78;
  font-size: 12px;
  font-weight: 800;
}

.experience-page h1 {
  margin: 0;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: 0;
}

.experience-page-header p:last-child {
  margin: 0;
  color: #68717e;
  font-size: 13px;
}

.experience-board-tabs,
.experience-tool-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid #dfe3e8;
}

.experience-board-tabs { margin-top: 24px; }
.experience-tool-tabs { margin: 28px 0 0; }

.experience-board-tabs button,
.experience-tool-tabs button {
  padding: 12px 17px 11px;
  border-bottom: 2px solid transparent;
  color: #68717e;
  font-size: 14px;
  font-weight: 800;
}

.experience-board-tabs button.active,
.experience-tool-tabs button.active {
  color: #1f2937;
  border-bottom-color: #2563eb;
}

.experience-board-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 0;
  color: #7a828e;
  font-size: 12px;
}

.experience-board-table { display: none; width: 100%; border-collapse: collapse; table-layout: fixed; }
.experience-board-table th,
.experience-board-table td {
  border-bottom: 1px solid #e7eaee;
  padding: 12px 10px;
  text-align: center;
  font-size: 13px;
}
.experience-board-table th { border-top: 1px solid #98a0aa; color: #505865; font-weight: 800; }
.experience-board-table td.title { text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.experience-board-table tr[data-post-id] { cursor: pointer; }
.experience-board-table tr[data-post-id]:hover td { background: #f7f8fa; }
.experience-board-table tr.notice td { background: #fafbfc; color: #3563b4; font-weight: 700; }
.experience-board-author span,
.experience-board-author small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.experience-board-author small { margin-top: 2px; color: #a0a6af; font-size: 10px; font-weight: 500; }
.experience-board-empty { padding: 48px 0; text-align: center; color: #7a828e; border-bottom: 1px solid #e7eaee; }
.experience-board-mobile-list { display: block; margin: 0; padding: 0; border-top: 1px solid #d7dce3; list-style: none; }
.experience-board-mobile-list > li { border-bottom: 1px solid #e4e7eb; background: #fff; }
.experience-board-mobile-list > li.notice { background: #f7f9fc; }
.experience-mobile-post { display: block; width: 100%; min-height: 67px; box-sizing: border-box; border: 0; border-radius: 0; padding: 10px 12px 9px; background: transparent; color: #20242c; cursor: pointer; font: inherit; text-align: left; }
.experience-mobile-post:active { background: #f1f4f8; }
.experience-mobile-subject { display: flex; min-width: 0; align-items: center; gap: 6px; }
.experience-mobile-subject strong { min-width: 0; overflow: hidden; font-size: 14px; font-weight: 700; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.experience-mobile-badge { flex: 0 0 auto; border: 1px solid #6d8fd4; border-radius: 2px; padding: 1px 4px; color: #365fa9; font-size: 10px; font-weight: 800; line-height: 1.35; }
.experience-mobile-meta { display: flex; min-width: 0; align-items: center; gap: 6px; margin-top: 6px; color: #8a929d; font-size: 11px; line-height: 1.25; }
.experience-mobile-meta > * + *::before { content: "·"; margin-right: 6px; color: #c2c7ce; }
.experience-mobile-author { max-width: 34%; overflow: hidden; color: #68717d; text-overflow: ellipsis; white-space: nowrap; }
.experience-mobile-ip { flex: 0 0 auto; color: #a2a8b1; font-size: 10px; }
.experience-mobile-empty { padding: 54px 12px; color: #8a929d; font-size: 13px; text-align: center; }

.experience-board-compose { display: none; padding: 20px 0; border-bottom: 1px solid #dfe3e8; }
.experience-board-compose.open { display: block; }
.experience-board-compose-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.experience-board-compose-header strong { color: #252b35; font-size: 14px; }
.experience-board-compose-header span { color: #8a929e; font-size: 11px; }
.experience-board-compose input,
.experience-board-compose textarea,
.experience-form input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #d9dde3;
  border-radius: 4px;
  background: #fff;
  color: #20242c;
  font: inherit;
  font-size: 14px;
}
.experience-board-compose input { height: 40px; margin-bottom: 8px; padding: 0 11px; }
.experience-board-compose textarea { min-height: 150px; margin-bottom: 10px; padding: 11px; resize: vertical; }
.experience-board-password { display: grid; grid-template-columns: 74px minmax(0, 240px); align-items: center; gap: 8px; margin-bottom: 12px; color: #5f6874; font-size: 12px; font-weight: 700; }
.experience-board-password[hidden] { display: none; }
.experience-board-password input { margin: 0; }
.experience-board-compose-actions { display: flex; justify-content: flex-end; gap: 8px; }
.experience-board-compose button.secondary { background: #edf0f4; color: #4c5663; }

.experience-post-detail {
  margin: 0;
  padding: 20px 16px;
  border-bottom: 1px solid #dfe3e8;
  background: #fbfcfd;
}
.experience-post-detail h2 { margin: 0 0 8px; font-size: 17px; }
.experience-post-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.experience-post-heading > div:first-child { min-width: 0; }
.experience-post-meta { display: flex; align-items: center; gap: 7px; color: #77808d; font-size: 12px; }
.experience-post-author { color: #525b67; font-weight: 800; }
.experience-post-ip { color: #a3a9b2; font-size: 10px; }
.experience-post-actions { display: flex; flex: 0 0 auto; gap: 5px; }
.experience-post-actions button { min-width: 48px; height: 30px; border: 1px solid #ccd2da; border-radius: 3px; background: #fff; color: #4f5865; font-size: 11px; font-weight: 800; }
.experience-post-actions button.danger { border-color: #f1c1bd; color: #d53f35; }
.experience-post-body { margin: 18px 0 0; white-space: pre-wrap; line-height: 1.8; font-size: 14px; }

.experience-password-dialog { width: min(360px, calc(100vw - 32px)); box-sizing: border-box; padding: 22px; border: 1px solid #d9dde3; border-radius: 6px; background: #fff; color: #20242c; box-shadow: 0 18px 55px rgba(12, 18, 28, .24); }
.experience-password-dialog::backdrop { background: rgba(19, 24, 33, .42); }
.experience-password-dialog h2 { margin: 0 0 8px; font-size: 17px; }
.experience-password-dialog p { margin: 0 0 15px; color: #737c88; font-size: 12px; line-height: 1.5; }
.experience-password-dialog input { width: 100%; height: 40px; box-sizing: border-box; padding: 0 11px; border: 1px solid #ccd2da; border-radius: 4px; font: inherit; font-size: 14px; }
.experience-password-dialog-actions { display: flex; justify-content: flex-end; gap: 7px; margin-top: 14px; }
.experience-password-dialog-actions button { height: 34px; padding: 0 14px; border-radius: 3px; background: #20242c; color: #fff; font-size: 12px; font-weight: 800; }
.experience-password-dialog-actions button.secondary { background: #edf0f4; color: #4c5663; }

.experience-tool-wrap { padding: 30px 0; }
.experience-tool-intro { max-width: 650px; margin: 0 0 22px; color: #66707d; line-height: 1.65; font-size: 14px; }
.experience-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; max-width: 660px; }
.experience-form label { display: grid; gap: 7px; color: #3c4552; font-size: 13px; font-weight: 800; }
.experience-form input { height: 42px; padding: 0 11px; }
.experience-form button { align-self: end; width: max-content; }
.experience-form.single { grid-template-columns: 1fr; max-width: 420px; }

.experience-result {
  display: none;
  max-width: 760px;
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid #dfe3e8;
}
.experience-result.open { display: block; }
.experience-score-row { display: flex; align-items: baseline; gap: 10px; }
.experience-score-row strong { font-size: 42px; line-height: 1; color: #1d4ed8; }
.experience-score-row span { color: #6c7581; font-size: 14px; font-weight: 700; }
.experience-result h2 { margin: 13px 0 8px; font-size: 21px; }
.experience-result p { margin: 0; color: #505966; line-height: 1.72; font-size: 14px; }
.experience-result-actions { display: flex; gap: 8px; margin-top: 18px; }
.experience-result-actions button { min-height: 35px; border: 1px solid #d6dbe2; border-radius: 4px; background: #fff; color: #4d5663; cursor: pointer; font: inherit; font-size: 13px; font-weight: 800; padding: 0 11px; }

.experience-name-stage {
  display: none;
  min-height: 150px;
  max-width: 760px;
  margin-top: 30px;
  padding: 28px 16px;
  box-sizing: border-box;
  border: 1px solid #d9dde3;
  background: #fffefa;
  color: #20242c;
  font-family: Gungsuh, "궁서", serif;
  font-size: clamp(26px, 6vw, 48px);
  line-height: 1.55;
}
.experience-name-stage.open { display: block; }
.experience-name-stage.writing::after { content: "|"; animation: experience-blink 0.8s step-end infinite; }
@keyframes experience-blink { 50% { opacity: 0; } }

.experience-pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 22px 0; }
.experience-pillar { padding: 13px 10px; border: 1px solid #e0e4e9; background: #fbfcfe; text-align: center; }
.experience-pillar span { display: block; margin-bottom: 7px; color: #737c89; font-size: 12px; font-weight: 800; }
.experience-pillar strong { font-family: serif; font-size: 23px; letter-spacing: 0; }
.experience-element-bars { display: grid; gap: 8px; margin-top: 20px; }
.experience-element-bar { display: grid; grid-template-columns: 40px 1fr 26px; align-items: center; gap: 8px; color: #5d6673; font-size: 12px; font-weight: 700; }
.experience-element-track { height: 9px; overflow: hidden; background: #e8ebef; border-radius: 99px; }
.experience-element-track i { display: block; height: 100%; border-radius: inherit; background: #3b82f6; }
.experience-disclaimer { margin-top: 20px !important; color: #7b8490 !important; font-size: 12px !important; }

.experience-fortune-card { max-width: 720px; padding: 26px 0; border-bottom: 1px solid #dfe3e8; }
.experience-fortune-card h2 { margin: 0 0 10px; font-size: 23px; }
.experience-fortune-card dl { display: grid; grid-template-columns: 90px 1fr; gap: 10px 16px; margin: 22px 0 0; font-size: 14px; }
.experience-fortune-card dt { color: #77808d; font-weight: 800; }
.experience-fortune-card dd { margin: 0; color: #38414d; line-height: 1.6; }

/* Relationship playground and daily fortune */
.experience-route-layer[data-theme="light"] {
  background: #fff;
  color: #20242c;
}

.experience-route-layer[data-theme="compat"],
.experience-route-layer[data-theme="fortune"] {
  background: #f6f8fb;
  color: #20242c;
}

.experience-playground-page {
  width: min(1120px, calc(100% - 28px));
  margin-top: 22px;
}

.experience-playground-page .experience-page-header {
  align-items: center;
  border-bottom: 0;
  padding: 12px 4px 18px;
}

.experience-playground-page .experience-page-header h1 { font-size: 30px; }
.experience-playground-page .experience-kicker { color: #4f6d73; }

.experience-compat-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 10px;
  padding: 0;
  border: 0;
}

.experience-compat-tabs button {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 10px;
  min-height: 64px;
  box-sizing: border-box;
  padding: 10px 13px;
  border: 1px solid #dfe5e9;
  border-radius: 8px;
  background: #fff;
  color: #53606b;
  text-align: left;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.experience-compat-tabs button:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(37, 52, 65, .09); }
.experience-compat-tabs button.active { border-color: #238a83; color: #173d3a; box-shadow: 0 0 0 2px rgba(35, 138, 131, .12); }
.experience-tool-tab-icon {
  grid-row: 1 / 3;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  align-self: center;
  border-radius: 50%;
  background: #eaf7f4;
  color: #147c74;
  font-size: 15px;
  font-weight: 900;
}
.experience-compat-tabs strong { align-self: end; font-size: 14px; }
.experience-compat-tabs small { align-self: start; color: #8a949e; font-size: 10px; font-weight: 700; }

.experience-tool-scene {
  --tool-accent: #168a7f;
  --tool-soft: #e9f7f4;
  position: relative;
  min-height: 640px;
  box-sizing: border-box;
  padding: 38px clamp(20px, 5vw, 62px) 64px;
  overflow: hidden;
  border: 1px solid rgba(67, 86, 92, .13);
  border-radius: 8px;
  background-color: #f7faf9;
  background-position: center top;
  background-size: cover;
  box-shadow: 0 18px 48px rgba(24, 39, 48, .11);
}

.experience-tool-scene[data-tool="saju"] { --tool-accent: #168a7f; --tool-soft: #e8f7f2; background-image: url('/assets/playground/compat-saju-bg.webp'); }
.experience-tool-scene[data-tool="star"] { --tool-accent: #6658df; --tool-soft: #eeecff; background-image: url('/assets/playground/compat-star-bg.webp'); color: #fff; }
.experience-tool-scene[data-tool="name"] { --tool-accent: #ec655d; --tool-soft: #fff0ec; background-image: url('/assets/playground/compat-name-bg.webp'); }
.experience-fortune-scene { --tool-accent: #ef775f; --tool-soft: #fff1e8; background-image: url('/assets/playground/fortune-bg.webp'); }

.experience-tool-intro-card {
  max-width: 620px;
  margin-bottom: 22px;
  color: #25313b;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .7);
}
.experience-tool-scene[data-tool="star"] .experience-tool-intro-card { color: #fff; text-shadow: 0 2px 12px rgba(12, 13, 67, .55); }
.experience-tool-badge {
  display: inline-block;
  margin-bottom: 8px;
  color: var(--tool-accent);
  font-size: 11px;
  font-weight: 900;
}
.experience-tool-scene[data-tool="star"] .experience-tool-badge { color: #ffe47c; }
.experience-tool-intro-card h2 { margin: 0 0 8px; font-size: 25px; line-height: 1.25; }
.experience-tool-intro-card p { max-width: 560px; margin: 0; font-size: 13px; line-height: 1.65; }

.experience-input-panel {
  width: min(660px, 100%);
  box-sizing: border-box;
  padding: 18px;
  border: 1px solid rgba(60, 78, 91, .13);
  border-radius: 8px;
  background: rgba(255, 255, 255, .94);
  color: #29333d;
  box-shadow: 0 12px 34px rgba(27, 42, 51, .13);
  backdrop-filter: blur(10px);
}
.experience-compat-form { max-width: none; }
.experience-field { display: grid; gap: 7px; color: #374552; font-size: 12px; font-weight: 800; }
.experience-field small { color: #9099a3; font-size: 10px; font-weight: 600; }
.experience-form select {
  width: 100%;
  height: 42px;
  box-sizing: border-box;
  border: 1px solid #d9dde3;
  border-radius: 4px;
  background: #fff;
  color: #20242c;
  font: inherit;
  font-size: 14px;
  padding: 0 11px;
}
.experience-form .experience-submit { background: var(--tool-accent); }

.experience-result-v2 {
  width: min(860px, 100%);
  max-width: none;
  box-sizing: border-box;
  margin-top: 34px;
  padding: 28px;
  border: 1px solid rgba(60, 78, 91, .14);
  border-radius: 8px;
  background: rgba(255, 255, 255, .96);
  color: #25313b;
  box-shadow: 0 16px 42px rgba(27, 42, 51, .14);
  backdrop-filter: blur(12px);
}
.experience-score-hero { display: grid; grid-template-columns: 108px minmax(0, 1fr); align-items: center; gap: 22px; }
.experience-score-gauge {
  display: grid;
  width: 104px;
  height: 104px;
  box-sizing: border-box;
  place-content: center;
  border: 8px solid var(--tool-soft);
  border-top-color: var(--tool-accent);
  border-right-color: var(--tool-accent);
  border-radius: 50%;
  background: #fff;
  color: var(--tool-accent);
  text-align: center;
}
.experience-score-gauge strong { font-size: 34px; line-height: 1; }
.experience-score-gauge span { margin-top: 3px; color: #7c8791; font-size: 10px; font-weight: 800; }
.experience-score-copy > span { color: var(--tool-accent); font-size: 11px; font-weight: 900; }
.experience-score-copy h2 { margin: 6px 0 7px; font-size: 23px; line-height: 1.35; }
.experience-result-v2 .experience-score-copy p { color: #65717b; font-size: 13px; }

.experience-metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 22px;
  margin-top: 28px;
  border-top: 1px solid #e4e8eb;
}
.experience-metric { padding: 17px 0; border-bottom: 1px solid #e4e8eb; }
.experience-metric > div:first-child { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; font-size: 12px; }
.experience-metric > div:first-child span { color: var(--tool-accent); font-weight: 900; }
.experience-metric-track { height: 6px; overflow: hidden; border-radius: 6px; background: #e9edf0; }
.experience-metric-track i { display: block; height: 100%; border-radius: inherit; background: var(--tool-accent); }
.experience-result-v2 .experience-metric p { margin-top: 7px; color: #8a939c; font-size: 10px; }

.experience-insight-list { display: grid; margin-top: 26px; border-top: 1px solid #dfe4e8; }
.experience-insight { padding: 18px 0; border-bottom: 1px solid #dfe4e8; }
.experience-insight > span { color: var(--tool-accent); font-size: 10px; font-weight: 900; }
.experience-insight h3 { margin: 5px 0 6px; font-size: 15px; }
.experience-result-v2 .experience-insight p,
.experience-fortune-card-v2 .experience-insight p { color: #5c6771; font-size: 13px; line-height: 1.65; }
.experience-section-title { margin: 30px 0 12px; font-size: 16px; }
.experience-result-v2 .experience-result-actions { border-top: 1px solid #e4e8eb; padding-top: 17px; }
.experience-result-actions button.secondary { background: #f5f7f8; }

.experience-pillar-group { margin-top: 14px; }
.experience-pillar-group h3 { margin: 0 0 8px; color: #63707a; font-size: 12px; }
.experience-result-v2 .experience-pillars { margin: 0 0 16px; }
.experience-result-v2 .experience-pillar { border-radius: 6px; background: #fbfdfc; }
.experience-result-v2 .experience-element-bars { margin-top: 0; }
.experience-result-v2 .experience-element-track i { background: var(--tool-accent); }

.experience-name-stage-v2 {
  width: min(660px, 100%);
  min-height: 0;
  box-sizing: border-box;
  margin-top: 20px;
  padding: 20px;
  border: 1px solid rgba(60, 78, 91, .13);
  border-radius: 8px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 12px 30px rgba(27, 42, 51, .12);
  font-family: inherit;
}
.experience-name-pair { display: flex; justify-content: center; gap: 6px; margin-bottom: 18px; }
.experience-name-pair span { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; color: #fff; font-size: 18px; font-weight: 900; }
.experience-name-pair span.left { background: #ef6d62; }
.experience-name-pair span.right { background: #19a6aa; }
.experience-name-math { display: grid; gap: 6px; color: #64717b; font-size: 12px; }
.experience-name-math > div { display: flex; justify-content: center; gap: 8px; }
.experience-name-math span { display: grid; width: 22px; height: 22px; place-items: center; border-bottom: 1px solid #d7dde1; }

.experience-fortune-input { width: min(760px, 100%); }
.experience-fortune-form { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; }
.experience-fortune-card-v2 {
  width: min(900px, 100%);
  max-width: none;
  box-sizing: border-box;
  margin-top: 34px;
  padding: 30px;
  border: 1px solid rgba(60, 78, 91, .14);
  border-radius: 8px;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 16px 42px rgba(27, 42, 51, .14);
  backdrop-filter: blur(12px);
}
.experience-fortune-card-v2[hidden] { display: none; }
.experience-fortune-header { position: relative; padding-right: 82px; }
.experience-fortune-date { color: #75818b; font-size: 11px; font-weight: 800; }
.experience-fortune-grade {
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  width: 62px;
  height: 62px;
  place-items: center;
  border-radius: 50%;
  background: #ffede3;
  color: #db624c;
  font-size: 18px;
  font-weight: 900;
}
.experience-fortune-card-v2 .experience-fortune-header h2 { margin: 9px 0 8px; font-size: 24px; }
.experience-fortune-header p { margin: 0; color: #59656f; font-size: 14px; line-height: 1.65; }
.experience-fortune-scores { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; margin-top: 26px; overflow: hidden; border: 1px solid #e7e4df; border-radius: 6px; background: #e7e4df; }
.experience-fortune-scores > div { display: grid; gap: 6px; padding: 13px 7px; background: #fffaf6; text-align: center; }
.experience-fortune-scores span { color: #78828c; font-size: 10px; font-weight: 800; }
.experience-fortune-scores strong { color: #e26751; font-size: 22px; }
.experience-fortune-card-v2 .experience-insight-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px; }
.experience-fortune-timeline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid #e2e6e9; border-bottom: 1px solid #e2e6e9; }
.experience-fortune-timeline > div { padding: 16px 14px; border-right: 1px solid #e2e6e9; }
.experience-fortune-timeline > div:last-child { border-right: 0; }
.experience-fortune-timeline span { display: block; color: #7a858e; font-size: 10px; font-weight: 800; }
.experience-fortune-timeline strong { display: block; margin: 4px 0; color: #e26751; font-size: 18px; }
.experience-fortune-timeline p { margin: 0; color: #68747e; font-size: 11px; line-height: 1.5; }
.experience-lucky-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.experience-lucky-grid > div { padding: 13px; border-radius: 6px; background: #fff5ec; }
.experience-lucky-grid span { display: block; margin-bottom: 5px; color: #a17062; font-size: 10px; font-weight: 800; }
.experience-lucky-grid strong { color: #533e37; font-size: 13px; }
.experience-fortune-card-v2 .experience-result-actions { border-top: 1px solid #e4e8eb; padding-top: 17px; }

.experience-tool-tabs button:focus-visible,
.experience-form input:focus-visible,
.experience-form select:focus-visible,
.experience-form button:focus-visible,
.experience-result-actions button:focus-visible { outline: 3px solid rgba(37, 99, 235, .3); outline-offset: 2px; }

@container experience-route (max-width: 620px) {
  .experience-playground-page { width: 100%; margin-top: 0; }
  .experience-playground-page .experience-page-header {
    min-height: 54px;
    box-sizing: border-box;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid #e5e8eb;
    background: #fff;
  }
  .experience-playground-page .experience-page-header > div { min-width: 0; }
  .experience-playground-page .experience-kicker,
  .experience-playground-page .experience-page-header p:last-child { display: none; }
  .experience-playground-page .experience-page-header h1 {
    overflow: hidden;
    margin: 0;
    font-size: 19px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .experience-compat-tabs { gap: 5px; margin: 0; padding: 8px; background: #f5f7f8; }
  .experience-compat-tabs button {
    grid-template-columns: 28px minmax(0, 1fr);
    min-width: 0;
    min-height: 50px;
    column-gap: 7px;
    padding: 7px;
  }
  .experience-tool-tab-icon { width: 28px; height: 28px; font-size: 12px; }
  .experience-compat-tabs strong {
    overflow: hidden;
    font-size: 12px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .experience-compat-tabs small { display: none; }
  .experience-tool-scene {
    min-height: 610px;
    padding: 28px 14px 50px;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
    background-position: center top;
  }
  .experience-tool-intro-card { margin-bottom: 18px; }
  .experience-tool-intro-card h2 { font-size: 21px; }
  .experience-tool-intro-card p { font-size: 12px; }
  .experience-input-panel { width: 100%; padding: 14px; }
  .experience-playground-page .experience-form { grid-template-columns: minmax(0, 1fr); max-width: none; }
  .experience-playground-page .experience-form input,
  .experience-playground-page .experience-form select { min-width: 0; }
  .experience-playground-page .experience-form button { width: 100%; }
  .experience-result-v2,
  .experience-fortune-card-v2 { width: 100%; padding: 19px 16px; }
  .experience-score-hero { grid-template-columns: 76px minmax(0, 1fr); gap: 14px; }
  .experience-score-gauge { width: 74px; height: 74px; border-width: 6px; }
  .experience-score-gauge strong { font-size: 25px; }
  .experience-score-copy h2 { font-size: 17px; }
  .experience-result-v2 .experience-score-copy p { font-size: 11px; }
  .experience-metric-grid { grid-template-columns: 1fr; }
  .experience-insight { padding: 15px 0; }
  .experience-name-stage-v2 { width: 100%; padding: 16px 10px; }
  .experience-name-pair { gap: 4px; }
  .experience-name-pair span { width: 32px; height: 32px; font-size: 15px; }
  .experience-name-math > div { gap: 5px; }
  .experience-fortune-header { padding-right: 58px; }
  .experience-fortune-grade { width: 50px; height: 50px; font-size: 15px; }
  .experience-fortune-card-v2 .experience-fortune-header h2 { font-size: 19px; }
  .experience-fortune-scores strong { font-size: 17px; }
  .experience-fortune-scores > div { padding: 11px 3px; }
  .experience-fortune-card-v2 .experience-insight-list { grid-template-columns: 1fr; }
  .experience-fortune-timeline > div { padding: 13px 8px; }
  .experience-lucky-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .experience-top-nav { display: none; }
  .category-rail { overflow-x: auto; scrollbar-width: none; }
  .category-rail::-webkit-scrollbar { display: none; }
  .experience-mobile-nav {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    padding: 7px 12px 8px;
    border-top: 1px solid #edf0f3;
    border-bottom: 1px solid #e4e7eb;
    background: #fff;
  }
  .experience-mobile-nav button {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    color: #5e6774;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    padding: 6px 9px;
  }
  .experience-mobile-nav button.active { color: #1d4ed8; }
  .experience-page { width: 100%; margin: 0 0 82px; }
  .experience-page-header { min-height: 55px; box-sizing: border-box; align-items: center; padding: 11px 12px 10px; border-bottom-width: 1px; }
  .experience-page-header > div { min-width: 0; }
  .experience-kicker,
  .experience-page-header p:last-child { display: none; }
  .experience-page h1 { overflow: hidden; margin: 0; font-size: 19px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
  .experience-board-tabs { gap: 0; margin-top: 0; padding: 0 6px; overflow-x: auto; scrollbar-width: none; }
  .experience-board-tabs::-webkit-scrollbar { display: none; }
  .experience-board-tabs button { flex: 1 0 auto; min-width: 88px; padding: 11px 12px 9px; font-size: 13px; }
  .experience-board-toolbar { min-height: 45px; box-sizing: border-box; padding: 7px 12px; border-bottom: 1px solid #e5e8ed; }
  .experience-board-toolbar .experience-primary { min-height: 31px; border-radius: 3px; padding: 0 11px; font-size: 12px; }
  .experience-board-table { display: none; }
  .experience-board-mobile-list { display: block; border-top: 1px solid #d7dce3; }
  .experience-board-mobile-list > li { border-bottom: 1px solid #e4e7eb; background: #fff; }
  .experience-board-mobile-list > li.notice { background: #f7f9fc; }
  .experience-mobile-post { display: block; width: 100%; min-height: 67px; box-sizing: border-box; border: 0; border-radius: 0; padding: 10px 12px 9px; background: transparent; color: #20242c; cursor: pointer; font: inherit; text-align: left; }
  .experience-mobile-post:active { background: #f1f4f8; }
  .experience-mobile-subject { display: flex; min-width: 0; align-items: center; gap: 6px; }
  .experience-mobile-subject strong { min-width: 0; overflow: hidden; font-size: 14px; font-weight: 700; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
  .experience-mobile-badge { flex: 0 0 auto; border: 1px solid #6d8fd4; border-radius: 2px; padding: 1px 4px; color: #365fa9; font-size: 10px; font-weight: 800; line-height: 1.35; }
  .experience-mobile-meta { display: flex; min-width: 0; align-items: center; gap: 6px; margin-top: 6px; color: #8a929d; font-size: 11px; line-height: 1.25; }
  .experience-mobile-meta > * + *::before { content: "·"; margin-right: 6px; color: #c2c7ce; }
  .experience-mobile-author { max-width: 34%; overflow: hidden; color: #68717d; text-overflow: ellipsis; white-space: nowrap; }
  .experience-mobile-ip { flex: 0 0 auto; color: #a2a8b1; font-size: 10px; }
  .experience-mobile-empty { padding: 54px 12px; color: #8a929d; font-size: 13px; text-align: center; }
  .experience-board-compose { padding: 15px 12px 16px; background: #f8f9fb; }
  .experience-board-compose-header { align-items: flex-start; flex-direction: column; gap: 4px; }
  .experience-board-password { grid-template-columns: 1fr; }
  .experience-post-detail { padding: 17px 12px 19px; border-top: 1px solid #d7dce3; background: #fff; }
  .experience-post-detail h2 { font-size: 16px; line-height: 1.45; }
  .experience-post-heading { flex-direction: column; gap: 12px; }
  .experience-post-meta { flex-wrap: wrap; }
  .experience-form { grid-template-columns: 1fr; }
  .experience-form button { width: 100%; }
  .experience-pillars { gap: 5px; }
  .experience-pillar { padding: 10px 5px; }
  .experience-pillar strong { font-size: 19px; }
  .experience-admin-note { align-items: flex-start; flex-direction: column; }
  .experience-playground-page { width: 100%; margin-top: 0; }
  .experience-playground-page .experience-page-header { padding: 11px 12px 10px; border-bottom: 1px solid #e5e8eb; background: #fff; }
  .experience-playground-page .experience-page-header h1 { font-size: 19px; }
  .experience-compat-tabs { gap: 5px; margin: 0; padding: 8px; background: #f5f7f8; }
  .experience-compat-tabs button { grid-template-columns: 28px minmax(0, 1fr); min-height: 49px; gap: 7px; padding: 7px; }
  .experience-tool-tab-icon { width: 28px; height: 28px; font-size: 12px; }
  .experience-compat-tabs strong { font-size: 11px; line-height: 1.25; }
  .experience-compat-tabs small { display: none; }
  .experience-tool-scene { min-height: 610px; padding: 28px 14px 50px; border-right: 0; border-left: 0; border-radius: 0; background-position: center top; }
  .experience-tool-intro-card { margin-bottom: 18px; }
  .experience-tool-intro-card h2 { font-size: 21px; }
  .experience-tool-intro-card p { font-size: 12px; }
  .experience-input-panel { padding: 14px; }
  .experience-result-v2,
  .experience-fortune-card-v2 { padding: 19px 16px; }
  .experience-score-hero { grid-template-columns: 76px minmax(0, 1fr); gap: 14px; }
  .experience-score-gauge { width: 74px; height: 74px; border-width: 6px; }
  .experience-score-gauge strong { font-size: 25px; }
  .experience-score-copy h2 { font-size: 17px; }
  .experience-result-v2 .experience-score-copy p { font-size: 11px; }
  .experience-metric-grid { grid-template-columns: 1fr; }
  .experience-insight { padding: 15px 0; }
  .experience-name-stage-v2 { padding: 16px 10px; }
  .experience-name-pair { gap: 4px; }
  .experience-name-pair span { width: 32px; height: 32px; font-size: 15px; }
  .experience-name-math > div { gap: 5px; }
  .experience-fortune-header { padding-right: 58px; }
  .experience-fortune-grade { width: 50px; height: 50px; font-size: 15px; }
  .experience-fortune-card-v2 .experience-fortune-header h2 { font-size: 19px; }
  .experience-fortune-scores strong { font-size: 17px; }
  .experience-fortune-scores > div { padding: 11px 3px; }
  .experience-fortune-card-v2 .experience-insight-list { grid-template-columns: 1fr; }
  .experience-fortune-timeline > div { padding: 13px 8px; }
  .experience-lucky-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}