:root {
  --cream: #fffaf2;
  --lavender: #f3edff;
  --ink: #372c45;
  --muted: #786b86;
  --pink: #ff4f9a;
  --pink-soft: #ffd8e9;
  --aqua: #49cfd5;
  --yellow: #ffd65a;
  --owned: #9eea73;
  --owned-deep: #43812d;
  --t2g-panel: #111815;
  --t2g-green: #8dfc8d;
  --t2g-line: rgba(141, 252, 141, 0.45);
  --card-shadow: 0 12px 30px rgba(106, 67, 112, 0.12);
  --radius-lg: 28px;
  --radius-md: 18px;
}

* { box-sizing: border-box; }

body {
  min-width: 320px;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 10%, rgba(255, 215, 235, 0.85), transparent 20rem),
    radial-gradient(circle at 84% 6%, rgba(196, 244, 242, 0.75), transparent 19rem),
    var(--cream);
  font-family: "Trebuchet MS", "Arial Rounded MT Bold", ui-rounded, system-ui, sans-serif;
}

button, input, select { font: inherit; }

.site-shell {
  width: min(1440px, calc(100% - 32px));
  margin: 16px auto 36px;
}

.t2g-credit {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border: 1px solid var(--t2g-line);
  color: var(--t2g-green);
  background: var(--t2g-panel);
  box-shadow: inset 0 1px 0 rgba(141, 252, 141, 0.12), 0 4px 12px rgba(32, 75, 39, 0.16);
  font-family: Consolas, "Courier New", monospace;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.t2g-credit::before {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--t2g-green);
  box-shadow: 0 0 10px var(--t2g-green);
  content: "";
}

.site-header {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) auto minmax(150px, 1fr);
  align-items: center;
  gap: 24px;
  min-height: 78px;
  padding: 0 22px;
  border: 1px solid rgba(120, 86, 130, 0.12);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.66);
  box-shadow: 0 7px 24px rgba(106, 67, 112, 0.08);
  backdrop-filter: blur(12px);
}

.wordmark {
  color: var(--pink);
  font-size: 1.85rem;
  font-weight: 900;
  letter-spacing: -0.07em;
  line-height: 1;
}

.wordmark span { color: #a66be0; }

.main-nav { display: flex; gap: 4px; padding: 5px; border: 1px solid rgba(120, 86, 130, .11); border-radius: 999px; background: rgba(250, 247, 255, .84); }
.main-nav a { padding: 8px 11px; border-radius: 999px; color: var(--muted); font-size: 0.78rem; font-weight: 900; text-decoration: none; }
.main-nav a:hover, .main-nav .is-active { color: var(--pink); background: #fff; box-shadow: 0 2px 8px rgba(106, 67, 112, .1); }

.sign-in, .hero-button {
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: var(--pink);
  box-shadow: 0 8px 18px rgba(255, 79, 154, 0.24);
  cursor: pointer;
  font-weight: 900;
}

.sign-in { justify-self: end; padding: 10px 18px; }

.hero {
  position: relative;
  display: grid;
  min-height: 610px;
  padding: 82px 7% 68px;
  overflow: hidden;
  border-radius: 0 0 42px 42px;
  background: linear-gradient(130deg, rgba(252, 221, 238, .72), rgba(244, 237, 255, .74) 52%, rgba(234, 250, 248, .78));
  isolation: isolate;
}

.hero::before { position: absolute; inset: 0; z-index: -1; opacity: .42; background-image: linear-gradient(rgba(180, 129, 184, .13) 1px, transparent 1px), linear-gradient(90deg, rgba(180, 129, 184, .13) 1px, transparent 1px); background-size: 34px 34px; content: ""; }
.hero-copy { display: grid; justify-items: center; align-self: center; max-width: 740px; margin: auto; text-align: center; }.hero-copy .eyebrow { padding: 6px 11px; border-radius: 999px; color: #a66be0; background: rgba(255,255,255,.68); box-shadow: 0 3px 12px rgba(99, 55, 114, .08); }

.eyebrow { margin: 0 0 12px; color: #a66be0; font-size: 0.74rem; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; }

h1 {
  display: grid;
  margin: 0 0 13px;
  color: var(--pink);
  font-size: clamp(4rem, 8vw, 7.75rem);
  font-weight: 900;
  letter-spacing: -0.095em;
  line-height: .78;
  text-shadow: 0 4px 0 #fff, 0 9px 20px rgba(255, 79, 154, .19);
}

h1 span { margin-bottom: 7px; font-size: .54em; letter-spacing: -.07em; }

.t2g-credit {
  display: inline-block;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  text-shadow: 0 0 9px rgba(141, 252, 141, 0.32);
}

.t2g-credit::before { display: none; }

.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; }
.hero-button { display: inline-flex; gap: 14px; align-items: center; padding: 14px 20px; text-decoration: none; }
.secondary-button { color: #75558a; background: rgba(255,255,255,.86); box-shadow: 0 7px 18px rgba(106, 67, 112, .12); }
.hero-tagline { display: flex; gap: 11px; align-self: end; justify-self: center; margin: 23px 0 0; padding: 8px 13px; border: 1px solid rgba(120, 86, 130, .12); border-radius: 999px; color: #8b758f; background: rgba(255,255,255,.62); font-size: .72rem; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.hero-tagline b { color: var(--pink); }
.hero-orbit { position: absolute; display: grid; place-items: center; width: 140px; aspect-ratio: 1; border: 9px solid rgba(255,255,255,.82); border-radius: 50%; background: linear-gradient(145deg, #fff, #fff0f6); box-shadow: 0 17px 30px rgba(89, 58, 103, .14); transform: rotate(-7deg); }.hero-orbit span { font-size: 3.35rem; filter: drop-shadow(0 5px 4px rgba(77, 52, 80, .13)); }.hero-orbit i { position: absolute; bottom: 12px; padding: 3px 6px; border-radius: 999px; color: #836a86; background: rgba(255,255,255,.84); font-size: .55rem; font-style: normal; font-weight: 900; letter-spacing: .08em; }.orbit-capsule { top: 52px; left: 5%; }.orbit-room { top: 85px; right: 6%; background: linear-gradient(145deg, #fff, #eafff6); transform: rotate(8deg); }.orbit-craft { bottom: 65px; left: 12%; background: linear-gradient(145deg, #fff, #fff7db); transform: rotate(9deg); }.orbit-camera { right: 15%; bottom: 58px; background: linear-gradient(145deg, #fff, #f1ebff); transform: rotate(-10deg); }

.explore-section, .collection-section { padding: 0 7% 78px; }
.explore-section { margin-top: -27px; position: relative; z-index: 2; }
.section-title h2, .collection-heading h2 { margin: 0; font-size: clamp(2rem, 4vw, 3.3rem); letter-spacing: -0.065em; line-height: .95; }
.explore-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 0; padding: 12px; border-radius: 24px; background: rgba(255,255,255,.72); box-shadow: 0 14px 34px rgba(106, 67, 112, .13); backdrop-filter: blur(12px); }
.explore-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 13px; min-height: 92px; padding: 16px; border: 2px solid var(--card-color); border-radius: 16px; background: rgba(255,255,255,.88); box-shadow: none; color: var(--ink); text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; }
.explore-card:hover { transform: translateY(-4px) rotate(-.4deg); box-shadow: 0 16px 30px rgba(106, 67, 112, .16); }.explore-card strong, .explore-card small { display: block; }.explore-card small { margin-top: 3px; color: var(--muted); font-size: .76rem; }.explore-card b { color: var(--card-color); font-size: 1.35rem; }.card-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: color-mix(in srgb, var(--card-color) 20%, white); font-size: 1.55rem; }.card-pink { --card-color: var(--pink); }.card-aqua { --card-color: var(--aqua); }.card-yellow { --card-color: #efa900; }.card-purple { --card-color: #ad78df; }

.collection-section { padding-bottom: 92px; }.collection-panel { padding: 20px; border: 1px solid rgba(120, 86, 130, .13); border-radius: 25px; background: rgba(255,255,255,.66); box-shadow: var(--card-shadow); }.collection-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 2px 3px 18px; }.collection-heading h2 { font-size: clamp(1.7rem, 3vw, 2.55rem); }.progress-pill { padding: 9px 13px; border-radius: 999px; color: var(--owned-deep); background: #e2f9d2; font-size: .82rem; font-weight: 900; }.collection-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 15px; padding: 7px; border: 1px solid rgba(120, 86, 130, .14); border-radius: 15px; background: #f7f4fb; color: var(--muted); font-size: .86rem; }.collection-tabs { display: flex; gap: 5px; overflow: auto; }.collection-toolbar button { padding: 8px 10px; border: 0; border-radius: 10px; color: var(--muted); background: transparent; cursor: pointer; white-space: nowrap; }.collection-toolbar .is-selected { color: var(--pink); background: #fff; box-shadow: 0 2px 7px rgba(106, 67, 112, .1); font-weight: 900; }.view-control { border: 1px solid rgba(120, 86, 130, .12) !important; background: #fff !important; }.collection-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 13px; }.collectible { position: relative; min-height: 204px; padding: 12px; border: 1px solid rgba(120, 86, 130, .15); border-radius: 16px; background: rgba(255,255,255,.9); box-shadow: 0 5px 13px rgba(106, 67, 112, .06); }.collectible.owned { border: 2px solid var(--owned); background: #f4ffed; }.collectible-art { display: grid; place-items: center; height: 122px; margin-bottom: 10px; border-radius: 12px; background: linear-gradient(145deg, #fff0f6, #f3ecff); font-size: 3.6rem; }.collectible:nth-child(3n) .collectible-art { background: linear-gradient(145deg, #e3fff3, #eefaff); }.collectible strong, .collectible small { display: block; }.collectible strong { font-size: .9rem; }.collectible small { margin-top: 2px; color: var(--muted); font-size: .7rem; }.collectible em { position: absolute; right: 9px; bottom: 9px; padding: 4px 7px; border-radius: 999px; color: var(--owned-deep); background: #d8f6c7; font-size: .65rem; font-style: normal; font-weight: 900; text-transform: uppercase; }

.collectible, .kit-tile { width: 100%; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }.collectible:hover, .kit-tile:hover { transform: translateY(-3px); box-shadow: 0 13px 22px rgba(106, 67, 112, .13); }.kit-explorer { margin: 0 7% 92px; padding: 18px; border: 1px solid rgba(120, 86, 130, .14); border-radius: 25px; background: rgba(255,255,255,.72); box-shadow: var(--card-shadow); }.explorer-bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid rgba(120, 86, 130, .12); }.back-button, .explorer-close { border: 0; color: var(--muted); background: transparent; font-weight: 900; cursor: pointer; }.back-button { justify-self: start; }.explorer-close { justify-self: end; font-size: 1.6rem; line-height: 1; }.explorer-path { color: #92789a; font-family: Consolas, "Courier New", monospace; font-size: .7rem; letter-spacing: .07em; }.explorer-path b { color: var(--pink); }.kit-explorer-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 22px 4px 16px; }.kit-explorer-heading h2 { margin: 0; font-size: clamp(2rem, 4vw, 3.25rem); letter-spacing: -.07em; }.kit-filter-row { display: flex; align-items: center; gap: 6px; margin-bottom: 16px; padding: 7px; border-radius: 15px; background: #f7f4fb; }.kit-filter-row button { padding: 8px 11px; border: 0; border-radius: 10px; color: var(--muted); background: transparent; font-weight: 800; cursor: pointer; }.kit-filter-row .is-selected { color: var(--pink); background: #fff; box-shadow: 0 2px 7px rgba(106, 67, 112, .1); }.kit-filter-row span { margin-left: auto; padding-right: 8px; color: var(--muted); font-size: .78rem; font-weight: 800; }.kit-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 13px; }.kit-tile { position: relative; min-height: 225px; padding: 12px; border: 1px solid rgba(120, 86, 130, .15); border-radius: 16px; background: #fff; box-shadow: 0 5px 13px rgba(106, 67, 112, .06); transition: transform .18s ease, box-shadow .18s ease; }.kit-tile.owned { border: 2px solid var(--owned); background: #f4ffed; }.kit-art, .dialog-art { display: grid; place-items: center; height: 138px; margin-bottom: 11px; border-radius: 12px; background: linear-gradient(145deg, #fff0f6, #f1eaff); font-size: 4.2rem; }.kit-tile:nth-child(2n) .kit-art { background: linear-gradient(145deg, #ebfff5, #eafaff); }.kit-tile strong, .kit-tile small { display: block; }.kit-tile strong { font-size: .88rem; }.kit-tile small { margin-top: 3px; color: var(--muted); font-size: .68rem; }.kit-tile em { position: absolute; right: 9px; bottom: 9px; padding: 4px 7px; border-radius: 999px; color: var(--owned-deep); background: #d8f6c7; font-size: .62rem; font-style: normal; font-weight: 900; text-transform: uppercase; }.kit-dialog { width: min(620px, calc(100% - 30px)); padding: 18px; border: 0; border-radius: 25px; color: var(--ink); background: #fffafc; box-shadow: 0 24px 70px rgba(47, 27, 55, .3); }.kit-dialog::backdrop { background: rgba(48, 29, 59, .35); backdrop-filter: blur(4px); }.dialog-close { float: right; border: 0; color: var(--muted); background: transparent; font-size: 1.65rem; cursor: pointer; }.dialog-art { float: left; width: 180px; height: 180px; margin: 4px 21px 8px 0; }.dialog-copy { min-height: 190px; padding: 15px 3px 8px; }.dialog-kicker { color: #a66be0; font-size: .72rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }.dialog-copy h2 { margin: 7px 0; font-size: 2rem; letter-spacing: -.06em; }.dialog-copy p { color: var(--muted); line-height: 1.45; }.owned-toggle { padding: 10px 12px; border: 1px solid var(--owned); border-radius: 12px; color: var(--owned-deep); background: #e9fbdc; font-weight: 900; cursor: pointer; }

.account-dialog, .profile-dialog { width: min(510px, calc(100% - 30px)); padding: 24px; border: 0; border-radius: 25px; color: var(--ink); background: #fffafc; box-shadow: 0 24px 70px rgba(47, 27, 55, .3); }.account-dialog::backdrop, .profile-dialog::backdrop { background: rgba(48, 29, 59, .35); backdrop-filter: blur(4px); }.account-tabs { display: inline-flex; gap: 4px; margin-bottom: 22px; padding: 5px; border-radius: 999px; background: #f2edf7; }.account-tabs button { padding: 9px 13px; border: 0; border-radius: 999px; color: var(--muted); background: transparent; font-weight: 900; cursor: pointer; }.account-tabs .is-selected { color: var(--pink); background: #fff; box-shadow: 0 2px 8px rgba(106, 67, 112, .1); }.auth-view h2, .profile-dialog h2 { margin: 7px 0 20px; font-size: 2rem; letter-spacing: -.06em; }.account-form, .profile-form { display: grid; gap: 14px; }.account-form label, .profile-form > label { display: grid; gap: 6px; color: #715d78; font-size: .78rem; font-weight: 900; }.account-form input, .profile-form input, .profile-form textarea { width: 100%; padding: 12px; border: 1px solid rgba(120, 86, 130, .2); border-radius: 12px; outline-color: var(--pink); color: var(--ink); background: #fff; font: inherit; }.profile-form textarea { min-height: 96px; resize: vertical; }.account-form .hero-button, .profile-form .hero-button { justify-content: center; margin-top: 5px; }.form-message { min-height: 1.1em; margin: -4px 0 0; color: var(--owned-deep); font-size: .82rem; font-weight: 800; }.form-message.is-error { color: #ca3b62; }.avatar-picker { display: flex !important; align-items: center; gap: 13px; padding: 11px; border: 1px dashed rgba(120, 86, 130, .28); border-radius: 15px; cursor: pointer; }.avatar-picker small { display: block; margin-top: 3px; color: var(--muted); font-weight: 500; }.avatar-picker input { display: block; width: auto; margin-top: 7px; padding: 0; border: 0; background: transparent; font-size: .7rem; }.avatar-preview { display: grid; flex: 0 0 62px; place-items: center; width: 62px; height: 62px; border-radius: 50%; color: #fff; background-color: var(--pink); background-position: center; background-size: cover; font-size: 1.5rem; font-weight: 900; }.logout-button { justify-self: start; padding: 0; border: 0; color: #a34f67; background: transparent; font-weight: 900; cursor: pointer; }.sign-in.is-profile { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 860px) {
  .site-header { grid-template-columns: 1fr auto; }.main-nav { display: none; }
  .hero { padding-top: 76px; }.hero-orbit { width: 104px; border-width: 6px; }.hero-orbit span { font-size: 2.45rem; }.orbit-capsule { left: 1%; }.orbit-room { right: 1%; }.orbit-craft { left: 4%; }.orbit-camera { right: 4%; }
  .explore-grid { grid-template-columns: repeat(2, 1fr); }.collection-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 500px) {
  .site-shell { width: min(100% - 20px, 1440px); margin-top: 10px; }.site-header { min-height: 65px; padding: 0 13px; }.wordmark { font-size: 1.45rem; }
  .sign-in { padding: 8px 13px; font-size: 0.82rem; }.hero { min-height: 560px; padding: 110px 5% 45px; }.hero-orbit { width: 72px; border-width: 4px; }.hero-orbit span { font-size: 1.65rem; }.hero-orbit i { display: none; }.orbit-capsule { top: 22px; left: 2%; }.orbit-room { top: 32px; right: 2%; }.orbit-craft { bottom: 23px; left: 4%; }.orbit-camera { right: 3%; bottom: 28px; }
  .explore-section, .collection-section { padding-right: 6%; padding-left: 6%; }.explore-grid { grid-template-columns: 1fr; }.collection-heading { align-items: start; flex-direction: column; }.collection-grid { grid-template-columns: repeat(2, 1fr); }.collectible { min-height: 182px; }.collectible-art { height: 103px; font-size: 3rem; }
}