:root {
  color-scheme:dark;
  --paper:#090b14;
  --panel:#161a2b;
  --ink:#fffaf2;
  --muted:#bbc1ce;
  --rule:#40475e;
  --focus:#7cecff;
  --active-color:#54d92b;
  --accent:var(--active-color);
  --display:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --utility:"Atkinson Hyperlegible",system-ui,sans-serif;
  font-family:var(--utility);
  background:var(--paper);
  color:var(--ink);
}
* { box-sizing:border-box; }
html,body { min-height:100%; }
body {
  margin:0;
  background:
    radial-gradient(circle at 50% 52%,color-mix(in srgb,var(--active-color) 15%,transparent) 0,transparent 35%),
    radial-gradient(circle at 15% 12%,rgba(0,157,255,.10),transparent 31%),
    linear-gradient(145deg,#0c1020 0%,var(--paper) 55%,#070912 100%);
  transition:background 220ms ease;
}
button,input { font:inherit; color:inherit; }
button,a,input { -webkit-tap-highlight-color:transparent; }
button:focus-visible,input:focus-visible,[tabindex]:focus-visible {
  outline:3px solid var(--focus);
  outline-offset:4px;
}
a { color:inherit; }
a:focus { outline:0; }
a:focus-visible {
  outline:0;
  text-decoration-line:underline;
  text-decoration-thickness:3px;
  text-decoration-color:var(--focus);
  text-underline-offset:5px;
  text-shadow:0 0 16px color-mix(in srgb,var(--focus) 58%,transparent);
}
[hidden] { display:none!important; }
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}
.skip {
  position:fixed;
  z-index:20;
  top:8px;
  left:8px;
  transform:translateY(-180%);
  padding:10px 12px;
  background:var(--ink);
  color:var(--paper);
}
.skip:focus { transform:none; }
.shell {
  min-height:100svh;
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  padding:24px 30px 18px;
}
.masthead {
  position:relative;
  z-index:8;
  display:grid;
  grid-template-columns:minmax(180px,1fr) minmax(240px,360px);
  align-items:start;
  gap:24px;
}
.identity h1 {
  margin:0;
  font-family:var(--display);
  font-size:clamp(24px,2.2vw,34px);
  font-weight:400;
  letter-spacing:-.04em;
}
.identity p {
  margin:5px 0 0;
  color:var(--muted);
  font-size:14px;
}
.finder { position:relative; }
.finder label {
  display:block;
  margin-bottom:6px;
  color:var(--muted);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.finder input {
  width:100%;
  min-height:44px;
  border:0;
  border-bottom:1px solid var(--rule);
  border-radius:0;
  padding:8px 2px;
  background:transparent;
  font-family:var(--display);
  font-size:18px;
}
.finder input::placeholder { color:#7f8798; }
.finder input:focus-visible {
  outline:0;
  border-color:var(--accent);
  box-shadow:0 3px 0 color-mix(in srgb,var(--accent) 72%,transparent);
}
.results {
  position:absolute;
  inset:calc(100% + 6px) 0 auto;
  z-index:10;
  max-height:min(420px,60vh);
  overflow:auto;
  padding:6px;
  border:1px solid var(--rule);
  background:rgba(12,15,27,.97);
  box-shadow:0 20px 60px rgba(0,0,0,.52),0 0 28px color-mix(in srgb,var(--active-color) 10%,transparent);
}
.result {
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px;
  min-height:48px;
  padding:10px;
  text-decoration:none;
}
.result:hover,.result:focus-visible {
  outline:0;
  background:color-mix(in srgb,var(--result-color,var(--accent)) 15%,var(--panel));
  box-shadow:inset 4px 0 var(--result-color,var(--accent));
}
.result strong { font-family:var(--display); font-weight:400; }
.result span { color:var(--muted); font-size:12px; align-self:center; text-align:right; }
.empty-result { margin:0; padding:12px 10px; color:var(--muted); }
.rose-stage {
  min-height:0;
  display:grid;
  place-items:center;
}
.rose-frame {
  container-type:inline-size;
  position:relative;
  width:min(78vw,calc(100svh - 154px),900px);
  aspect-ratio:1;
}
#wheel { display:block; width:100%; height:100%; overflow:visible; }
.petal { cursor:pointer; }
.petal:focus { outline:0; }
.petal-path {
  fill:color-mix(in srgb,var(--color) 16%,var(--paper));
  stroke:var(--color);
  stroke-width:2.5;
  vector-effect:non-scaling-stroke;
  transition:fill 150ms ease,opacity 150ms ease,stroke-width 150ms ease;
}
.petal-label {
  fill:var(--ink);
  font-family:var(--display);
  font-weight:400;
  letter-spacing:-.025em;
  text-anchor:middle;
  pointer-events:none;
}
.petal-meta {
  fill:var(--muted);
  font-family:var(--utility);
  font-size:11px;
  letter-spacing:.06em;
  text-anchor:middle;
  text-transform:uppercase;
  pointer-events:none;
}
.petal-art-disc {
  fill:#0b0e18;
  stroke:color-mix(in srgb,var(--color) 78%,white);
  stroke-width:2.5;
  vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 5px 9px rgba(0,0,0,.45));
  pointer-events:none;
}
.petal-art {
  clip-path:circle(50% at 50% 50%);
  opacity:.82;
  filter:saturate(.72) contrast(1.04) brightness(.9);
  pointer-events:none;
  transition:opacity 150ms ease,filter 150ms ease;
}
.petal-monogram {
  fill:color-mix(in srgb,var(--color) 55%,white);
  font-family:var(--display);
  font-weight:700;
  text-anchor:middle;
  pointer-events:none;
}
.petal:hover .petal-art,.petal:focus-visible .petal-art,.petal.is-selected .petal-art {
  opacity:1;
  filter:saturate(1.08) contrast(1.06) brightness(1);
}
.petal:hover .petal-art-disc,.petal:focus-visible .petal-art-disc,.petal.is-selected .petal-art-disc {
  stroke-width:4;
}
.petal:hover .petal-path,.petal:focus-visible .petal-path,.petal.is-selected .petal-path {
  fill:color-mix(in srgb,var(--color) 42%,var(--paper));
  stroke-width:4;
}
.petal:focus-visible { outline:none; }
.petal.is-muted { opacity:.28; }
.petal.is-entering { animation:petalIn 300ms cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(var(--i) * 22ms); }
@keyframes petalIn {
  from { opacity:0; transform:scale(.92); }
  to { opacity:1; transform:scale(1); }
}
.hub {
  position:absolute;
  left:50%;
  top:50%;
  width:27%;
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  display:block;
  padding:0;
  border-radius:50%;
  text-align:center;
  cursor:pointer;
  appearance:none;
}
.hub > * { pointer-events:none; }
.hub:focus { outline:0; }
.hub:focus-visible {
  outline:3px solid var(--focus);
  outline-offset:5px;
}
.hub.at-root { cursor:default; }
footer {
  display:flex;
  justify-content:flex-end;
  color:var(--muted);
  font-size:12px;
}
footer a { text-underline-offset:4px; }
#failure {
  position:fixed;
  inset:0;
  display:grid;
  place-content:center;
  text-align:center;
  background:var(--paper);
}
#failure button {
  min-height:44px;
  border:1px solid var(--rule);
  background:var(--panel);
}

/* Bright, dimensional rose refinement */
.identity h1 {
  color:#fff;
  text-shadow:0 0 28px color-mix(in srgb,var(--active-color) 24%,transparent);
}
.identity p,.finder label { color:#c5cad6; }
.finder input { border-color:color-mix(in srgb,var(--active-color) 48%,var(--rule)); }
.rose-frame::before {
  content:"";
  position:absolute;
  inset:16%;
  z-index:-1;
  border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--active-color) 22%,transparent),transparent 66%);
  filter:blur(24px);
  opacity:.9;
}
.petal-path {
  fill:color-mix(in srgb,var(--color) 29%,#101526);
  stroke:color-mix(in srgb,var(--color) 88%,white);
  stroke-width:2.75;
  filter:drop-shadow(0 8px 11px color-mix(in srgb,var(--color) 23%,transparent));
}
.petal-label {
  fill:#fffaf2;
  paint-order:stroke fill;
  stroke:rgba(5,7,13,.58);
  stroke-width:2px;
  text-shadow:0 2px 10px rgba(0,0,0,.7);
}
.petal-meta {
  fill:color-mix(in srgb,var(--color) 35%,#fff);
  paint-order:stroke fill;
  stroke:rgba(5,7,13,.7);
  stroke-width:2px;
}
.petal:hover .petal-path,.petal.is-selected .petal-path {
  fill:color-mix(in srgb,var(--color) 41%,#11162a);
  stroke-width:4;
  filter:drop-shadow(0 10px 18px color-mix(in srgb,var(--color) 42%,transparent));
}
.petal:focus-visible { outline:0; }
.petal:focus-visible .petal-path {
  fill:color-mix(in srgb,var(--color) 43%,#11162a);
  stroke:color-mix(in srgb,var(--color) 76%,white);
  stroke-width:5;
  filter:drop-shadow(0 0 8px color-mix(in srgb,var(--color) 92%,white)) drop-shadow(0 12px 20px color-mix(in srgb,var(--color) 46%,transparent));
}
.hub {
  --hub-color:#54d92b;
  isolation:isolate;
  overflow:hidden;
  padding:11px;
  border:3px solid transparent;
  background:
    linear-gradient(#0a0d18,#0a0d18) padding-box,
    linear-gradient(135deg,color-mix(in srgb,var(--hub-color) 55%,white),var(--hub-color) 48%,color-mix(in srgb,var(--hub-color) 60%,#063c66)) border-box;
  box-shadow:
    0 22px 58px rgba(0,0,0,.65),
    0 0 34px color-mix(in srgb,var(--hub-color) 38%,transparent),
    inset 0 0 24px rgba(255,255,255,.08);
}
.hub-portrait {
  position:absolute;
  inset:3px;
  z-index:0;
  overflow:hidden;
  border-radius:50%;
}
.hub-avatar {
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
}
.hub::after {
  content:"";
  position:absolute;
  inset:3px;
  z-index:1;
  border-radius:50%;
  background:
    linear-gradient(180deg,rgba(5,7,14,.02) 6%,rgba(5,7,14,.08) 40%,rgba(5,7,14,.86) 96%),
    radial-gradient(circle at 50% 50%,transparent 25%,rgba(5,7,14,.28) 100%);
  pointer-events:none;
}
.hub-copy {
  position:absolute;
  z-index:2;
  inset:auto 4px 13%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  color:#fff;
  text-shadow:0 2px 8px #000;
}
#hub-title {
  max-width:90%;
  font-family:var(--display);
  font-size:clamp(13px,1.7vw,23px);
  font-weight:500;
  line-height:1.05;
  letter-spacing:-.025em;
}
.hub-back-label {
  font-size:clamp(10px,1vw,13px);
  line-height:1.2;
}
.hub:hover .hub-back-label { text-decoration:underline; text-underline-offset:3px; }
footer a:focus-visible { outline:0; box-shadow:0 3px 0 var(--focus); }
footer a { color:#d6dae3; }
footer a:hover { color:#fff; text-decoration-color:var(--active-color); }
.hub.at-root .hub-copy { visibility:hidden; }
.hub.at-root::after { background:none; }
.hub-avatar { filter:saturate(1.12) contrast(1.04); }
@media(max-width:700px) {
  .shell { padding:16px 14px 12px; }
  .masthead { grid-template-columns:1fr; gap:12px; }
  .identity { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
  .identity h1 { font-size:23px; white-space:nowrap; }
  .identity p { margin:0; font-size:12px; text-align:right; }
  .finder label { font-size:11px; margin-bottom:2px; }
  .finder input { font-size:16px; }
  .rose-stage { align-items:start; padding-top:clamp(20px,7vh,64px); }
  .rose-frame { width:min(100%,calc(100svh - 156px)); }
  .hub { width:30%; }
  .hub-copy { inset:auto 2px 12%; gap:2px; }
  #hub-title { font-size:clamp(11px,3.2vw,17px); }
  .hub-back-label { font-size:9px; }
}
@media(max-width:380px) {
  .identity p { display:none; }
  .rose-frame { width:min(100%,calc(100svh - 132px)); }
}
@media(prefers-reduced-motion:reduce) {
  body { transition:none; }
  .petal-path { transition:none; }
  .petal-art { transition:none; }
  .petal.is-entering { animation:none; }
}
@media(forced-colors:active) {
  .petal-path { fill:Canvas; stroke:LinkText; }
  .petal:hover .petal-path,.petal:focus-visible .petal-path { fill:Highlight; stroke:Highlight; }
  .petal-label { fill:CanvasText; }
  .petal-art-disc { fill:Canvas; stroke:LinkText; }
  .petal-art { display:none; }
  .petal-monogram { fill:CanvasText; visibility:visible!important; }
  .hub { border:2px solid CanvasText; }
}

@container (max-width:519px) {
  .destination .petal-art,.destination .petal-art-disc,.destination .petal-monogram { display:none; }
}