@font-face {
  font-family: "Source Han Sans JP Normal";
  src: url("../assets/fonts/SourceHanSansJP-Normal-static.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  /* Theme-stable elevation ink: stays dark in BOTH themes so avatar drop shadows
     read as a soft shadow, never a white halo when --ink flips near-white (dark). */
  --shadow-ink: #14141a;
  --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  --ease-standard: cubic-bezier(.2, 0, 0, 1);
  --motion-fast: 120ms;
  --motion-control: 160ms;
  --motion-backdrop-in: 180ms;
  --motion-backdrop-out: 140ms;
  --motion-sheet-in: 340ms;
  --motion-sheet-out: 240ms;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --blue: #347df5;
  --purple: #8a76dc;
  --rose: #ef7b88;
  --mint: #75cdb4;
  --orange: #e9a75c;
  --green: #4cc48a;
}

html[lang="ja"] {
  --font: "Source Han Sans JP Normal", "Hiragino Sans", "Yu Gothic", sans-serif;
}

.app-shell[data-theme="light"] {
  --page: #f3f3f1;
  --page-soft: #e8e8e6;
  --panel: rgba(255, 255, 255, .86);
  --panel-solid: #ffffff;
  --panel-subtle: rgba(255, 255, 255, .62);
  --ink: #141416;
  --ink-soft: rgba(20, 20, 22, .62);
  --ink-muted: rgba(20, 20, 22, .38);
  --line: rgba(20, 20, 22, .08);
  --line-strong: rgba(20, 20, 22, .12);
  --shadow: 0 22px 70px rgba(40, 40, 40, .16);
  --card-shadow: 0 18px 50px rgba(40, 40, 40, .12), inset 0 1px 0 rgba(255, 255, 255, .95);
  --orbit-line: rgba(45, 47, 52, .18);
  --overlay: rgba(236, 236, 233, .62);
  --composer: rgba(255, 255, 255, .88);
  --composer-border: rgba(255, 255, 255, .9);
  --accent: var(--blue);
}

.app-shell[data-theme="dark"] {
  --page: #1f2020;
  --page-soft: #171818;
  --panel: rgba(28, 29, 29, .72);
  --panel-solid: #171818;
  --panel-subtle: rgba(255, 255, 255, .045);
  --ink: #f4f4f2;
  --ink-soft: rgba(244, 244, 242, .62);
  --ink-muted: rgba(244, 244, 242, .36);
  --line: rgba(255, 255, 255, .075);
  --line-strong: rgba(255, 255, 255, .12);
  --shadow: 0 24px 80px rgba(0, 0, 0, .45);
  --card-shadow: 0 26px 70px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .08);
  --orbit-line: rgba(255, 255, 255, .14);
  --overlay: rgba(0, 0, 0, .48);
  --composer: rgba(18, 18, 18, .82);
  --composer-border: rgba(255, 255, 255, .07);
  --accent: #63a0ff;
}

* {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  background: var(--page);
  font-family: var(--font);
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

button,
input,
textarea {
  font: inherit;
}

button {
  -webkit-tap-highlight-color: transparent;
  transition:
    transform var(--motion-control) var(--ease-out),
    background-color var(--motion-control) ease,
    border-color var(--motion-control) ease,
    color var(--motion-control) ease;
}

button:active {
  transform: scale(.97);
}

svg {
  display: block;
}

[hidden] {
  display: none !important;
}

.app-shell {
  --self-ring: #ffffff;
  position: relative;
  min-height: 100dvh;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 44%, color-mix(in srgb, var(--blue) 14%, transparent), transparent 18rem),
    linear-gradient(180deg, var(--page-soft), var(--page) 42%, var(--page-soft));
  transition: color 180ms ease;
}

.app-shell::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    linear-gradient(color-mix(in srgb, var(--ink) 4%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--ink) 3%, transparent) 1px, transparent 1px);
  background-size: 44px 44px;
  opacity: .22;
  mask-image: radial-gradient(circle at center, #000, transparent 72%);
  pointer-events: none;
}

.topbar {
  position: fixed;
  z-index: 20;
  top: calc(14px + var(--safe-top));
  left: 14px;
  right: 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}

.brand-lockup,
.topbar-actions,
.icon-button {
  pointer-events: auto;
}

.brand-lockup {
  width: min(100%, 310px);
  max-width: calc(100vw - 122px);
  display: inline-flex;
  align-items: center;
  min-width: 0;
  min-height: 46px;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel);
  box-shadow: var(--card-shadow);
  backdrop-filter: blur(22px);
}

.brand-lockup > div {
  min-width: 0;
}

.brand-lockup strong {
  display: block;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.1;
  font-weight: 760;
}

.brand-lockup span {
  display: block;
  max-width: 100%;
  overflow: hidden;
  margin-top: 2px;
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 560;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar-actions {
  display: flex;
  gap: 6px;
}

.icon-button {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 18px;
  color: var(--ink);
  background: var(--panel);
  box-shadow: var(--card-shadow);
  backdrop-filter: blur(22px);
  cursor: pointer;
}

.icon-button svg {
  width: 21px;
  height: 21px;
}

.icon-button path,
.icon-button circle {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.75;
}

.main-stage {
  position: relative;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: calc(92px + var(--safe-top)) 14px calc(86px + var(--safe-bottom));
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 220ms;
  animation-timing-function: var(--ease-standard);
}

::view-transition-old(root) {
  animation-name: rootFadeOut;
}

::view-transition-new(root) {
  animation-name: rootFadeIn;
}

@keyframes rootFadeOut {
  to {
    opacity: 0;
  }
}

@keyframes rootFadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
}

.toast {
  position: fixed;
  z-index: 60;
  left: 16px;
  right: 16px;
  top: calc(78px + var(--safe-top));
  bottom: auto;
  max-width: min(390px, calc(100vw - 32px));
  margin: 0 auto;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  background: color-mix(in srgb, var(--panel-solid) 86%, transparent);
  box-shadow: 0 18px 44px color-mix(in srgb, var(--ink) 14%, transparent);
  backdrop-filter: blur(22px);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.3;
  text-align: center;
  pointer-events: none;
}