/* Aurora is local to marked pages, including the shared application header. */
body:has(.aurora-page),
.aurora-page {
  --profile-bg:#eeedf8;
  --profile-surface:#f0f0fc;
  --profile-raised:#ffffff;
  --profile-ink:#273250;
  --profile-muted:#5c6780;
  --profile-accent:#6551b6;
  --profile-on-accent:#ffffff;
  --profile-glow:#b4deed;
  --profile-second:#deb9e8;
  --profile-shadow:#384b7d24;
  --profile-edge:#ffffffcf;
  --profile-landscape-tone:#cbc2ec;
  --profile-landscape:url('/assets/backgrounds/horizonte-light.jpg');
  color-scheme:light;
}

body:has(.aurora-page[data-profile-palette="rose"]),
.aurora-page[data-profile-palette="rose"] {
  --profile-bg:#f8eaf1;
  --profile-surface:#fbf0f7;
  --profile-raised:#fffafd;
  --profile-ink:#432b44;
  --profile-muted:#775d76;
  --profile-accent:#9a3e7b;
  --profile-on-accent:#ffffff;
  --profile-glow:#e0c7f4;
  --profile-second:#f0bad5;
  --profile-shadow:#682c6321;
  --profile-edge:#fffdfbd9;
  --profile-landscape-tone:#ecc3de;
}

body:has(.aurora-page[data-profile-palette="midnight"]),
.aurora-page[data-profile-palette="midnight"] {
  --profile-bg:#10223a;
  --profile-surface:#1b2f4b;
  --profile-raised:#243d59;
  --profile-ink:#f0f7ff;
  --profile-muted:#b8cce2;
  --profile-accent:#b6cfff;
  --profile-on-accent:#152e51;
  --profile-glow:#6acfd3;
  --profile-second:#a69bde;
  --profile-shadow:#02091b66;
  --profile-edge:#e1f6ff29;
  --profile-landscape-tone:#243b62;
  --profile-landscape:url('/assets/backgrounds/horizonte-dark-blue.jpg');
  color-scheme:dark;
}

body:has(.aurora-page) {
  --bg:var(--profile-bg);
  --paper:var(--profile-raised);
  --text:var(--profile-ink);
  --muted:var(--profile-muted);
  --red:var(--profile-accent);
  --gold:var(--profile-accent);
  --line:color-mix(in srgb,var(--profile-muted) 18%,transparent);
  --edge:var(--profile-edge);
  --glass:var(--profile-raised);
  --shadow:0 10px 30px var(--profile-shadow);
  --highlight:var(--profile-edge);
  --highlight-side:var(--profile-edge);
  --soft-surface:var(--profile-surface);
  --control:var(--profile-surface);
  --control-hover:color-mix(in srgb,var(--profile-accent) 9%,var(--profile-raised));
  --control-border:color-mix(in srgb,var(--profile-accent) 25%,var(--profile-raised));
  --field:var(--profile-raised);
  --placeholder:var(--profile-muted);
  --hover:color-mix(in srgb,var(--profile-accent) 7%,transparent);
  --avatar:var(--profile-surface);
  --avatar-text:var(--profile-accent);
  background:var(--profile-landscape-tone) var(--profile-landscape) center bottom / cover fixed no-repeat;
  background-blend-mode:luminosity;
  color:var(--profile-ink);
  font-family:Jakarta,system-ui,sans-serif;
}

body:has(.aurora-page) .top {
  z-index:5;
  background:var(--profile-raised);
  border-bottom:0;
  box-shadow:0 1px 0 var(--profile-edge),0 6px 20px var(--profile-shadow);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

body:has(.aurora-page) .top-inner {
  width:min(1100px,100%);
  min-height:72px;
  padding:14px 31px;
  gap:22px;
}

body:has(.aurora-page) .brand {
  flex:0 0 auto;
  gap:8px;
  color:var(--profile-accent);
  font-size:27px;
  letter-spacing:-1.3px;
}

body:has(.aurora-page) .brand-wordmark {
  flex-direction:row;
  align-items:baseline;
  gap:8px;
}

body:has(.aurora-page) .brand small {
  color:var(--profile-muted);
}

body:has(.aurora-page) .brand-icon {
  width:29px;
  height:29px;
  border:0;
  border-radius:11px;
  background:linear-gradient(145deg,var(--profile-accent),color-mix(in srgb,var(--profile-accent) 60%,var(--profile-second)));
  box-shadow:inset 0 1px 1px #ffffff88,0 4px 9px var(--profile-shadow);
}

body:has(.aurora-page) .profile-global-nav {
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:5px;
  min-width:0;
  margin-left:auto;
  flex-wrap:wrap;
}

body:has(.aurora-page) .profile-global-nav > * {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:38px;
  padding:8px 12px;
  border-radius:30px;
  color:var(--profile-muted);
  font-size:12px;
  line-height:1.4;
}

body:has(.aurora-page) .profile-global-nav a:hover {
  color:var(--profile-accent);
  background:var(--profile-surface);
}

body:has(.aurora-page) .profile-global-nav [aria-current] {
  color:var(--profile-accent);
  background:var(--profile-surface);
  box-shadow:inset 0 1px 1px var(--profile-edge),0 3px 10px var(--profile-shadow);
}

body:has(.aurora-page) .top-actions {
  flex:0 0 auto;
  gap:12px;
}

body:has(.aurora-page) .account {
  gap:10px;
  color:var(--profile-muted);
}

body:has(.aurora-page) .account > a > span:last-child:not(.avatar) {
  max-width:110px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

body:has(.aurora-page) .account .avatar {
  display:inline-grid;
  width:30px;
  height:30px;
  border:0;
  border-radius:50%;
  box-shadow:0 0 0 3px var(--profile-raised),0 2px 7px var(--profile-shadow);
}

body:has(.aurora-page) .account .quiet {
  min-height:38px;
  border-radius:20px;
}

body:has(.aurora-page) .app-shell.profile-shell {
  display:block;
  width:min(1100px,100%);
  min-width:0;
  margin:0 auto;
}

body:has(.aurora-page) .profile-shell > main.wrap {
  width:100%;
  min-width:0;
  padding:24px 31px 28px;
}

.profile-page {
  min-width:0;
  color:var(--profile-ink);
  font-size:14px;
  line-height:1.5;
}

.profile-page [hidden] {
  display:none !important;
}

.profile-page :is(h1,h2,h3,p,figure,fieldset) {
  margin:0;
}

.profile-page :is(h1,h2,h3) {
  color:inherit;
}

.profile-page img {
  display:block;
  max-width:100%;
  user-select:none;
  -webkit-user-drag:none;
}

.profile-page :is(button,input,summary) {
  font:inherit;
}

.profile-page :is(button,summary,a,input):focus-visible {
  outline:2px solid var(--profile-accent);
  outline-offset:4px;
}

.profile-page .profile-summary {
  position:relative;
  z-index:3;
  min-width:0;
  border-radius:26px;
  background:var(--profile-raised);
  box-shadow:inset 0 1px 1px var(--profile-edge),0 10px 30px var(--profile-shadow);
}

.profile-page .profile-cover {
  height:160px;
  overflow:hidden;
  border-radius:26px 26px 0 0;
  background:var(--profile-surface);
  box-shadow:inset 0 -8px 16px var(--profile-shadow);
}

.profile-page .profile-cover img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 51%;
}

.profile-page .profile-head {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px 18px;
  padding:0 24px 10px;
  margin-top:-19px;
}

.profile-page .identity {
  flex:1 1 230px;
  min-width:0;
  gap:15px;
}

.profile-page .identity > div {
  min-width:0;
  padding-top:12px;
}

.profile-page .identity h1 {
  margin:0;
  color:var(--profile-ink);
  font-size:29px;
  font-weight:500;
  letter-spacing:-1px;
  line-height:1.2;
}

.profile-page .identity .handle {
  margin-top:4px;
  color:var(--profile-muted);
  font-size:12px;
  overflow-wrap:anywhere;
}

.profile-page .avatar.large {
  width:76px;
  height:76px;
  border:4px solid var(--profile-raised);
  border-radius:25px;
  background:var(--profile-surface);
  color:var(--profile-accent);
  box-shadow:0 7px 13px var(--profile-shadow);
  font-size:26px;
}

.profile-page .avatar.large img {
  border-radius:19px;
}

.profile-page .profile-head > .actions {
  flex:0 1 auto;
  min-width:0;
  margin-top:17px;
  gap:8px;
}

.profile-page .profile-head .button,
.profile-page .profile-appearance > summary,
.profile-page .palette-save {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:40px;
  padding:10px 14px;
  border:1px solid var(--profile-edge);
  border-radius:30px;
  background:var(--profile-surface);
  color:var(--profile-accent);
  box-shadow:inset 0 1px 0 var(--profile-edge),0 4px 10px var(--profile-shadow);
  font-size:12px;
  font-weight:400;
  line-height:1.4;
}

.profile-page .profile-head .button:hover,
.profile-page .profile-appearance > summary:hover,
.profile-page .palette-save:hover {
  background:color-mix(in srgb,var(--profile-accent) 8%,var(--profile-raised));
}

.profile-page .profile-head .button.primary {
  background:var(--profile-accent);
  color:var(--profile-on-accent);
}

.profile-page .profile-appearance {
  position:relative;
  min-width:0;
}

.profile-page .profile-appearance > summary {
  list-style:none;
}

.profile-page .profile-appearance > summary::-webkit-details-marker {
  display:none;
}

.profile-page .profile-palette-form {
  position:absolute;
  right:0;
  top:calc(100% + 10px);
  z-index:6;
  width:290px;
  max-width:calc(100vw - 42px);
  padding:17px;
  border:1px solid var(--profile-edge);
  border-radius:20px;
  background:var(--profile-raised);
  box-shadow:0 14px 35px var(--profile-shadow);
}

.profile-page .profile-palette-form fieldset {
  min-width:0;
  padding:0;
  border:0;
}

.profile-page .profile-palette-form legend {
  width:100%;
  margin-bottom:13px;
  padding:0;
  color:var(--profile-ink);
  font-size:12px;
  font-weight:500;
}

.profile-page .profile-palette-options {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}

.profile-page .profile-palette-option {
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  min-width:0;
  padding:12px 5px 10px;
  border:2px solid transparent;
  border-radius:13px;
  background:var(--profile-surface);
  color:var(--profile-ink);
  font-size:11px;
  text-align:center;
  overflow-wrap:anywhere;
  cursor:pointer;
}

.profile-page .profile-palette-option:has(input:checked) {
  border-color:var(--profile-accent);
}

.profile-page .profile-palette-option:has(input:focus-visible) {
  outline:2px solid var(--profile-accent);
  outline-offset:3px;
}

.profile-page .profile-palette-option input {
  position:absolute;
  top:4px;
  right:4px;
  width:16px;
  height:16px;
  margin:0;
  accent-color:var(--profile-accent);
}

.profile-page .profile-palette-option input:focus-visible {
  outline:none;
}

.profile-page .profile-palette-swatch {
  display:block;
  width:38px;
  height:38px;
  border-radius:50%;
  box-shadow:inset 0 2px 2px #ffffff75,0 4px 6px #172e4d20;
}

.profile-page .swatch-opal {
  background:linear-gradient(135deg,#e9e9fb 50%,#8775ce 51%);
}

.profile-page .swatch-rose {
  background:linear-gradient(135deg,#f7e5ef 50%,#c66f9c 51%);
}

.profile-page .swatch-midnight {
  background:linear-gradient(135deg,#1b2f4b 50%,#6ba3c8 51%);
}

.profile-page [data-palette-notice] {
  margin-top:12px;
  color:var(--profile-muted);
  font-size:11px;
  overflow-wrap:anywhere;
}

.profile-page [data-palette-notice]:empty {
  display:none;
}

.profile-page .palette-save {
  width:100%;
  margin-top:12px;
}

.profile-page .is-enhanced .palette-save,
.profile-page.is-enhanced .palette-save {
  display:none;
}

.profile-page .profile-nav {
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:5px 11px;
  padding:4px 23px 14px;
  color:var(--profile-muted);
}

.profile-page .profile-nav > * {
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-width:0;
  padding:7px 11px;
  border:0;
  border-radius:18px;
  background:transparent;
  box-shadow:none;
  color:var(--profile-muted);
  font-size:12px;
  line-height:1.4;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

.profile-page .profile-nav a:hover,
.profile-page .profile-nav [aria-current] {
  background:var(--profile-surface);
  color:var(--profile-accent);
}

.profile-page .profile-nav [aria-disabled] {
  cursor:default;
}

.profile-page .coming-soon {
  padding:2px 6px;
  border-radius:10px;
  background:var(--profile-surface);
  font-size:10px;
  white-space:nowrap;
}

.profile-page .profile-body {
  display:grid;
  grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);
  align-items:start;
  gap:20px;
  min-width:0;
  margin-top:22px;
}

.profile-page .profile-section {
  min-width:0;
  border:1px solid var(--profile-edge);
  border-radius:24px;
  background:linear-gradient(145deg,var(--profile-raised),var(--profile-surface));
  box-shadow:inset 0 1px 0 var(--profile-edge),0 8px 22px var(--profile-shadow);
}

.profile-page .profile-section + .profile-section {
  margin-top:0;
}

.profile-page .section-line {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-width:0;
  border:0;
  padding:0;
}

.profile-page .profile-pins {
  padding:21px 23px 25px;
}

.profile-page .profile-pins h2 {
  font-size:20px;
  font-weight:500;
  letter-spacing:-.4px;
}

.profile-page .count {
  flex:0 0 auto;
  color:var(--profile-muted);
  font-size:11px;
}

.profile-page .pin-list {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));
  align-items:start;
  gap:18px;
  margin-top:22px;
  padding:0;
}

.profile-page .pin-tile {
  min-width:0;
}

.profile-page .pin-card {
  position:relative;
  display:block;
  min-width:0;
  min-height:0;
  padding:0;
  border:0;
  border-radius:18px;
  background:transparent;
  box-shadow:none;
  text-align:center;
  transition:none;
}

.profile-page .pin-card:hover {
  --lift:-3px;
  --zoom:1.035;
  --shine:.25;
  border:0;
  background:transparent;
  box-shadow:none;
}

.profile-page .pin-trigger {
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
  min-width:0;
  padding:10px 5px 12px;
  border:0;
  border-radius:18px;
  background:transparent;
  color:var(--profile-ink);
  text-align:center;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

.profile-page .pin-object {
  position:relative;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  width:109px;
  height:109px;
  margin:16px 0 35px;
  border:0;
  border-radius:50%;
  background:conic-gradient(from 30deg,var(--profile-second),#ffffff,var(--profile-glow),var(--profile-accent),#ffffff,var(--profile-second));
  color:var(--profile-on-accent);
  box-shadow:0 6px 0 color-mix(in srgb,var(--profile-accent) 75%,#152a4c),0 15px 11px var(--profile-shadow),inset 0 2px 3px #ffffff99;
  filter:none;
  transform:perspective(850px) translateY(var(--lift,0px)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(var(--zoom,1));
  transition:transform 160ms ease-out;
  pointer-events:none;
}

.profile-page .pin-object::before {
  content:'';
  position:absolute;
  inset:6px;
  border-radius:50%;
  background:radial-gradient(circle at 30% 20%,color-mix(in srgb,var(--profile-accent) 60%,var(--profile-second)),var(--profile-accent));
  box-shadow:inset 0 1px 4px #ffffff77,inset 0 -3px 6px #00000044;
}

.profile-page .pin-object .icon {
  position:relative;
  width:44px;
  height:44px;
  fill:color-mix(in srgb,var(--profile-on-accent) 20%,transparent);
  filter:drop-shadow(0 2px 1px #00000055);
}

.profile-page .pin-object:is(.ratto,.royal_mouse) {
  width:140px;
  height:140px;
  margin:0 0 20px;
  background:transparent;
  box-shadow:none;
  filter:drop-shadow(0 13px 8px var(--profile-shadow));
}

.profile-page .pin-object:is(.ratto,.royal_mouse)::before {
  content:none;
}

.profile-page .pin-object:is(.ratto,.royal_mouse) img {
  width:100%;
  height:100%;
  object-fit:contain;
}

.profile-page .pin-object::after {
  background:radial-gradient(ellipse at var(--light-x,35%) var(--light-y,25%),#ffffffbb,transparent 70%),linear-gradient(118deg,transparent 35%,#ffffff66 48%,transparent 60%);
}

.profile-page .pin-card:hover .pin-object {
  filter:none;
}

.profile-page .pin-card:hover .pin-object:is(.ratto,.royal_mouse) {
  filter:drop-shadow(0 13px 8px var(--profile-shadow));
}

.profile-page .pin-trigger strong {
  display:block;
  max-width:100%;
  font-size:14px;
  font-weight:500;
  line-height:1.45;
  overflow-wrap:anywhere;
}

.profile-page .pin-description {
  display:block;
  position:absolute;
  z-index:4;
  top:100%;
  bottom:auto;
  left:50%;
  width:min(220px,calc(100vw - 48px));
  max-width:100%;
  margin:0;
  padding:10px 12px;
  border:1px solid color-mix(in srgb,var(--profile-accent) 24%,var(--profile-raised));
  border-radius:13px;
  background:var(--profile-raised);
  color:var(--profile-ink);
  box-shadow:0 8px 20px var(--profile-shadow);
  font-size:12px;
  line-height:1.5;
  white-space:normal;
  overflow-wrap:anywhere;
  text-align:center;
  transform:translateX(-50%);
  visibility:hidden;
  opacity:0;
  pointer-events:none;
}

.profile-page .pin-card:is(:focus-within,.is-open) .pin-description {
  visibility:visible;
  opacity:1;
  pointer-events:auto;
}

.profile-page .pin-card.tooltip-dismissed .pin-description {
  visibility:hidden;
  opacity:0;
  pointer-events:none;
}

.profile-page .profile-side {
  display:grid;
  gap:17px;
  min-width:0;
}

.profile-page .species-section {
  min-width:0;
  margin:0;
  padding:17px;
  border:1px solid transparent;
  border-radius:24px;
  background:transparent;
  box-shadow:none;
}

.profile-page .species-section h2,
.profile-page .profile-music h2 {
  display:flex;
  align-items:center;
  gap:7px;
  font-size:12px;
  font-weight:400;
  line-height:1.5;
  overflow-wrap:anywhere;
}

.profile-page .species-section h2 {
  color:var(--profile-ink);
}

.profile-page .rat-portrait {
  max-width:none;
  margin:14px 0 0;
  perspective:850px;
  touch-action:pan-y;
}

.profile-page .rat-portrait-frame {
  position:relative;
  height:320px;
  margin:0;
  padding:0;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--profile-accent) 35%,var(--profile-raised));
  border-radius:22px;
  background:var(--profile-raised);
  box-shadow:0 7px 15px var(--profile-shadow);
  transform:perspective(850px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform 160ms ease-out;
  pointer-events:none;
}

.profile-page .rat-portrait-frame img {
  display:block;
  width:100%;
  height:100%;
  border:0;
  border-radius:0;
  background:#fffaf0;
  object-fit:cover;
  object-position:54% 0%;
  transform:scale(1.15);
  transform-origin:54% 0%;
  transition:transform 240ms ease-out;
}

.profile-page .rat-portrait-frame::after {
  background:radial-gradient(circle at var(--light-x,30%) var(--light-y,15%),#ffffff30,transparent 65%);
  mix-blend-mode:normal;
  opacity:0;
  transition:opacity 150ms ease-out;
  pointer-events:none;
}

.profile-page .profile-music {
  padding:17px;
}

.profile-page .profile-music h2 {
  color:var(--profile-muted);
}

.profile-page .profile-music-edit {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  min-height:32px;
  padding:5px 11px;
  border:1px solid var(--profile-edge);
  border-radius:999px;
  background:var(--profile-raised);
  color:var(--profile-accent);
  font-size:11px;
  font-weight:500;
  text-decoration:none;
}

.profile-page .profile-music-edit:hover {
  background:color-mix(in srgb,var(--profile-accent) 8%,var(--profile-raised));
}

.profile-page .song {
  display:grid;
  grid-template-columns:64px minmax(0,1fr);
  align-items:center;
  gap:4px 13px;
  min-width:0;
  margin-top:13px;
  padding:14px;
  border:0;
  border-radius:16px;
  background:var(--song-bg,#315576);
  color:var(--song-text,#ffffff);
  box-shadow:inset 0 1px 0 #ffffff65,0 6px 13px var(--profile-shadow);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

.profile-page .song:hover {
  background:var(--song-bg,#315576);
}

.profile-page .song .record {
  grid-column:1;
  grid-row:1 / span 2;
  display:grid;
  place-items:center;
  width:64px;
  height:64px;
  min-width:0;
  border-radius:5px;
  overflow:hidden;
  background:color-mix(in srgb,currentColor 12%,transparent);
  color:inherit;
  box-shadow:0 3px 7px #00000022;
}

.profile-page .song .record.song-cover {
  background:transparent;
}

.profile-page .song .record img {
  width:64px;
  height:64px;
  object-fit:cover;
}

.profile-page .song-info {
  grid-column:2;
  align-self:end;
  min-width:0;
  gap:3px;
}

.profile-page .song-info strong {
  font-size:14px;
  font-weight:500;
  line-height:1.4;
}

.profile-page .song-info > span {
  color:inherit;
  font-size:12px;
  line-height:1.4;
}

.profile-page .song .listen {
  grid-column:2;
  justify-self:start;
  align-self:start;
  min-width:0;
  gap:5px;
  margin-top:2px;
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  color:inherit;
  font-size:11px;
  overflow-wrap:anywhere;
}

.profile-page .song .listen .icon {
  display:inline-block;
  width:12px;
  height:12px;
}

.profile-page .empty {
  padding:22px 0 5px;
  color:var(--profile-muted);
}

.profile-page .profile-footer {
  display:flex;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  margin-top:23px;
  padding:0;
  border:0;
  color:var(--profile-muted);
  font-size:11px;
}

body:has(.aurora-page) > .footer {
  width:min(1038px,calc(100% - 62px));
  color:var(--profile-muted);
  border-color:color-mix(in srgb,var(--profile-muted) 16%,transparent);
}

/* The directory shares Aurora's materials without the profile's cover or grid. */
.people-page {
  width:100%;
  max-width:900px;
  min-width:0;
  margin:0 auto;
  color:var(--profile-ink);
  font-size:14px;
  line-height:1.5;
}

.people-page :is(a,button,input):focus-visible {
  outline:2px solid var(--profile-accent);
  outline-offset:4px;
}

.people-page .page-heading {
  min-width:0;
  margin:0 0 20px;
  padding:8px 4px 0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

.people-page .page-heading .eyebrow {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 9px;
  border:1px solid var(--profile-edge);
  border-radius:20px;
  background:var(--profile-surface);
  color:var(--profile-accent);
  box-shadow:inset 0 1px 0 var(--profile-edge),0 3px 9px var(--profile-shadow);
  font-size:10px;
  font-weight:500;
  letter-spacing:.07em;
}

.people-page .page-heading h1 {
  margin:13px 0 7px;
  color:var(--profile-ink);
  font-size:32px;
  font-weight:500;
  line-height:1.2;
  letter-spacing:-1px;
}

.people-page .page-heading > p:last-child {
  max-width:48ch;
  color:var(--profile-muted);
  font-size:13px;
  overflow-wrap:anywhere;
}

.people-page .search {
  display:flex;
  align-items:center;
  gap:7px;
  width:100%;
  max-width:620px;
  min-width:0;
  margin:0 0 24px;
  padding:7px;
  border:1px solid var(--profile-edge);
  border-radius:29px;
  background:linear-gradient(145deg,var(--profile-raised),var(--profile-surface));
  box-shadow:inset 0 1px 0 var(--profile-edge),0 8px 22px var(--profile-shadow);
}

.people-page .search input {
  flex:1 1 0;
  width:0;
  min-width:0;
  min-height:44px;
  margin:0;
  padding:10px 14px;
  border:1px solid transparent;
  border-radius:22px;
  background:transparent;
  color:var(--profile-ink);
  font:inherit;
  font-size:14px;
  line-height:1.4;
}

.people-page .search input::placeholder {
  color:var(--profile-muted);
  opacity:1;
}

.people-page .search input:focus-visible {
  outline-offset:0;
  background:var(--profile-raised);
}

.people-page .search .button.primary {
  flex:0 0 auto;
  min-height:44px;
  margin:0;
  padding:10px 20px;
  border:1px solid color-mix(in srgb,var(--profile-on-accent) 18%,transparent);
  border-radius:23px;
  background:var(--profile-accent);
  color:var(--profile-on-accent);
  box-shadow:inset 0 1px 0 #ffffff44,0 4px 10px var(--profile-shadow);
  font-size:12px;
  line-height:1.4;
}

.people-page .search .button.primary:hover {
  background:color-mix(in srgb,var(--profile-accent) 92%,var(--profile-ink));
}

.people-page .notice {
  margin:0 0 18px;
  border-radius:16px;
  overflow-wrap:anywhere;
}

.people-page .card.results {
  min-width:0;
  padding:23px;
  border:1px solid var(--profile-edge);
  border-radius:26px;
  background:linear-gradient(145deg,var(--profile-raised),var(--profile-surface));
  box-shadow:inset 0 1px 0 var(--profile-edge),0 8px 22px var(--profile-shadow);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

.people-page .results > .section-line {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-width:0;
  margin:0;
  padding:0 2px;
}

.people-page .results h2 {
  margin:0;
  color:var(--profile-ink);
  font-size:20px;
  font-weight:500;
  letter-spacing:-.4px;
  line-height:1.35;
}

.people-page .results .count {
  flex:0 0 auto;
  padding:4px 9px;
  border-radius:15px;
  background:var(--profile-surface);
  color:var(--profile-muted);
  font-size:11px;
  font-variant-numeric:tabular-nums;
}

.people-page .people-list {
  display:grid;
  gap:6px;
  min-width:0;
  margin:17px 0 0;
  padding:0;
  list-style:none;
}

.people-page .person {
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:nowrap;
  gap:14px;
  min-width:0;
  padding:12px;
  border:1px solid transparent;
  border-radius:18px;
  background:transparent;
}

.people-page .person:has(a:focus-visible) {
  border-color:var(--profile-edge);
  background:var(--profile-surface);
  box-shadow:inset 0 1px 0 var(--profile-edge);
}

.people-page .person-link {
  display:flex;
  align-items:center;
  flex:1 1 auto;
  gap:13px;
  min-width:0;
  border-radius:10px;
}

.people-page .person .avatar {
  flex:0 0 auto;
  width:46px;
  height:46px;
  border:3px solid var(--profile-raised);
  border-radius:16px;
  background:var(--profile-surface);
  color:var(--profile-accent);
  box-shadow:0 4px 9px var(--profile-shadow);
}

.people-page .person .avatar img {
  border-radius:12px;
}

.people-page .person-text {
  display:grid;
  gap:3px;
  min-width:0;
}

.people-page .person-text strong {
  color:var(--profile-ink);
  font-size:14px;
  font-weight:500;
  line-height:1.4;
  overflow-wrap:anywhere;
}

.people-page .person-link:hover strong {
  color:var(--profile-accent);
}

.people-page .person-text small {
  color:var(--profile-muted);
  font-size:12px;
  line-height:1.4;
  overflow-wrap:anywhere;
}

.people-page .person > .actions {
  flex:0 0 auto;
  min-width:0;
  margin:0;
}

.people-page .person .actions .quiet {
  display:grid;
  place-items:center;
  width:40px;
  min-width:40px;
  height:40px;
  min-height:40px;
  padding:0;
  border:1px solid var(--profile-edge);
  border-radius:50%;
  background:var(--profile-raised);
  color:var(--profile-accent);
  box-shadow:inset 0 1px 0 var(--profile-edge),0 3px 8px var(--profile-shadow);
}

.people-page .person .actions .quiet:hover {
  background:color-mix(in srgb,var(--profile-accent) 9%,var(--profile-raised));
}

.people-page .results .empty {
  padding:22px 2px 4px;
  color:var(--profile-muted);
  font-size:13px;
  overflow-wrap:anywhere;
}

@media (hover:hover) {
  .people-page .person:hover {
    border-color:var(--profile-edge);
    background:var(--profile-surface);
    box-shadow:inset 0 1px 0 var(--profile-edge);
  }

  .profile-page .pin-card:hover:not(.tooltip-dismissed) .pin-description {
    visibility:visible;
    opacity:1;
    pointer-events:auto;
  }
}

@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  .profile-page .rat-portrait:hover .rat-portrait-frame img {
    transform:scale(1.205);
  }

  .profile-page .rat-portrait:hover .rat-portrait-frame::after {
    opacity:1;
  }
}

@media (max-width:1000px) {
  body:has(.aurora-page) .top-inner {
    gap:14px;
  }

  body:has(.aurora-page) .brand-wordmark {
    flex-direction:column;
    gap:3px;
  }

  body:has(.aurora-page) .account > a > span:last-child:not(.avatar) {
    display:none;
  }

  body:has(.aurora-page) .profile-global-nav > * {
    padding-inline:10px;
  }
}

@media (max-width:760px) {
  body:has(.aurora-page) .top-inner {
    flex-wrap:wrap;
    justify-content:space-between;
    padding:14px 19px;
    gap:12px;
  }

  body:has(.aurora-page) .profile-global-nav {
    order:3;
    justify-content:center;
    width:100%;
    margin:0;
  }

  body:has(.aurora-page) .top-actions {
    margin-left:auto;
  }

  body:has(.aurora-page) .profile-shell > main.wrap {
    padding:19px;
  }

  .profile-page .profile-body {
    grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
    gap:15px;
  }

  .profile-page .profile-pins {
    padding:18px 14px;
  }

  .profile-page .pin-list {
    grid-template-columns:repeat(auto-fit,minmax(min(100%,112px),1fr));
    gap:10px;
  }

  .profile-page .pin-object {
    width:93px;
    height:93px;
    margin:11px 0 26px;
  }

  .profile-page .pin-object:is(.ratto,.royal_mouse) {
    width:115px;
    height:115px;
    margin:0 0 15px;
  }

  .profile-page .song {
    grid-template-columns:54px minmax(0,1fr);
    gap:4px 10px;
    padding:12px;
  }

  .profile-page .song .record,
  .profile-page .song .record img {
    width:54px;
    height:54px;
  }

  body:has(.aurora-page) > .footer {
    width:calc(100% - 38px);
  }
}

@media (max-width:600px) {
  .people-page .page-heading {
    padding-top:4px;
  }

  .people-page .page-heading h1 {
    font-size:28px;
  }

  .people-page .search {
    margin-bottom:18px;
  }

  .people-page .card.results {
    padding:19px 14px;
    border-radius:22px;
  }

  .people-page .person {
    gap:9px;
    padding:10px 7px;
    border-radius:16px;
  }

  .people-page .person-link {
    gap:10px;
  }

  .profile-page .profile-head {
    padding:0 17px 12px;
    gap:12px;
  }

  .profile-page .identity {
    flex-basis:100%;
  }

  .profile-page .profile-head > .actions {
    width:100%;
    margin-top:0;
  }

  .profile-page .profile-appearance {
    position:static;
  }

  .profile-page .profile-palette-form {
    top:calc(100% + 6px);
    right:15px;
    left:15px;
    width:auto;
    max-width:none;
    padding:14px;
  }

  .profile-page .profile-body {
    grid-template-columns:minmax(0,1fr);
    gap:15px;
    margin-top:16px;
  }

  .profile-page .pin-list {
    margin-top:12px;
  }

  .profile-page .profile-side {
    gap:15px;
  }

  .profile-page .song {
    grid-template-columns:64px minmax(0,1fr);
    gap:4px 13px;
    padding:14px;
  }

  .profile-page .song .record,
  .profile-page .song .record img {
    width:64px;
    height:64px;
  }
}

@media (max-width:420px) {
  .people-page .page-heading {
    margin-bottom:17px;
  }

  .people-page .page-heading h1 {
    font-size:27px;
  }

  .people-page .search {
    gap:3px;
    padding:5px;
  }

  .people-page .search input {
    padding-inline:11px;
    font-size:16px;
  }

  .people-page .search .button.primary {
    padding-inline:15px;
  }

  .people-page .card.results {
    padding:17px 11px;
  }

  .people-page .results > .section-line {
    gap:8px;
    padding-inline:4px;
  }

  .people-page .results h2 {
    font-size:18px;
  }

  .people-page .people-list {
    margin-top:12px;
    gap:4px;
  }

  .people-page .person {
    padding:10px 5px;
    gap:8px;
  }

  .people-page .person-link {
    gap:9px;
  }

  .people-page .person .avatar {
    width:40px;
    height:40px;
    border-radius:14px;
  }

  .people-page .person-text strong {
    font-size:13px;
  }

  .people-page .person-text small {
    font-size:11px;
  }

  body:has(.aurora-page) .top-inner {
    padding:13px;
  }

  body:has(.aurora-page) .profile-global-nav {
    gap:3px;
  }

  body:has(.aurora-page) .profile-global-nav > * {
    padding:8px;
    gap:5px;
    font-size:11px;
  }

  body:has(.aurora-page) .profile-shell > main.wrap {
    padding:13px 13px 28px;
  }

  .profile-page .profile-summary {
    border-radius:22px;
  }

  .profile-page .profile-cover {
    height:140px;
    border-radius:22px 22px 0 0;
  }

  .profile-page .identity {
    gap:11px;
  }

  .profile-page .identity h1 {
    font-size:25px;
  }

  .profile-page .avatar.large {
    width:66px;
    height:66px;
    border-radius:22px;
  }

  .profile-page .avatar.large img {
    border-radius:17px;
  }

  .profile-page .profile-head .button,
  .profile-page .profile-appearance > summary {
    padding:9px 11px;
    font-size:11px;
  }

  .profile-page .profile-nav {
    padding:4px 10px 12px;
    gap:3px;
  }

  .profile-page .profile-nav > * {
    padding:7px 8px;
    gap:5px;
    font-size:11px;
  }

  .profile-page .pin-list {
    gap:6px;
  }

  .profile-page .pin-description {
    padding:9px 8px;
    font-size:11px;
  }

  .profile-page .species-section,
  .profile-page .profile-music {
    padding:14px;
  }

  body:has(.aurora-page) > .footer {
    width:calc(100% - 26px);
  }
}

@media (pointer:coarse) {
  .people-page .person .actions .quiet {
    width:44px;
    min-width:44px;
    height:44px;
    min-height:44px;
  }

  body:has(.aurora-page) .profile-global-nav > a,
  body:has(.aurora-page) .account .quiet,
  .profile-page .profile-nav > a,
  .profile-page .profile-appearance > summary,
  .profile-page .profile-music-edit,
  .profile-page .palette-save {
    min-height:44px;
  }
}

@media (prefers-reduced-motion:reduce) {
  .profile-page .pin-object,
  .profile-page .rat-portrait-frame {
    transform:none;
    transition:none;
  }

  .profile-page .rat-portrait-frame img {
    transform:scale(1.15);
    transition:none;
  }

  .profile-page .pin-object::after,
  .profile-page .rat-portrait-frame::after {
    opacity:0;
    transition:none;
  }
}
