/* EchoFather liquid glass: translucent layers, optical edges and pointer-lit highlights.
   The existing spatial pointer drives light; no animation loop or extra library. */
:root {
  --glass-x: calc(50% + var(--px) * 38%);
  --glass-y: calc(12% + var(--py) * 24%);
  --glass-edge: rgba(207, 233, 222, .26);
  --glass-light: radial-gradient(ellipse at var(--glass-x) var(--glass-y), rgba(231, 246, 236, .16), transparent 62%);
  --glass-tint: linear-gradient(135deg, rgba(195, 226, 220, .10), rgba(255, 255, 255, .015) 42%, rgba(223, 189, 118, .07));
  --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, .23), inset 0 -1px 0 rgba(199, 227, 215, .055), 0 16px 42px rgba(0, 10, 15, .23);
}

/* Fixed chrome stays dimensionally stable while its light changes. */
.header {
  background: linear-gradient(100deg, #0c2931ee, #0b252dd9 55%, #142d2ce8);
  border-bottom-color: rgba(204, 233, 219, .13);
  box-shadow: inset 0 -1px 0 #ffffff03, 0 6px 32px #0013191a;
  -webkit-backdrop-filter: blur(24px) saturate(145%);
  backdrop-filter: blur(24px) saturate(145%);
}
.header nav {
  padding: 5px;
  gap: 2px;
  border: 1px solid var(--glass-edge);
  border-radius: 999px;
  background: var(--glass-light), var(--glass-tint), #24454b3b;
  box-shadow: inset 0 1px 0 #ffffff20, inset 0 -1px 0 #ffffff06, 0 7px 22px #00000019;
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
}
.header nav a {
  padding: 11px 13px;
  border-radius: 999px;
  color: #c0d2cf;
  transition: background .25s, box-shadow .25s, color .25s;
}
.header nav a::after { display: none; }
.header nav a:hover { background: #e1eae610; color: #fff4d6; }
.header nav a[aria-current] {
  color: #ffe6b0;
  background: linear-gradient(145deg, #edf3dc24, #dfbd7617 45%, #dfbd7625);
  box-shadow: inset 0 1px 0 #fff9d157, inset 0 0 0 1px #e8d4a524, 0 2px 9px #00000020;
}
.journey-bar {
  background: linear-gradient(100deg, #0a252ddf, #113139c9 55%, #0a252de8);
  border-top-color: #d1e3d526;
  box-shadow: inset 0 1px 0 #ffffff05, 0 -10px 40px #00131926;
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
}
.journey-progress {
  padding: 2px 17px;
  border: 1px solid #d8ebda25;
  border-radius: 999px;
  background: var(--glass-light), linear-gradient(135deg, #ffffff09, #ffffff02);
  box-shadow: inset 0 1px 0 #ffffff19, 0 5px 16px #00000013;
}

/* Floating glass reveals the scene behind it. */
.floating-note {
  isolation: isolate;
  border-radius: 19px;
  border: 1px solid #e4e6cc4d;
  background: var(--glass-light), var(--glass-tint), rgba(13, 47, 55, .40);
  box-shadow: var(--glass-shadow), inset 1px 0 0 #e4f3dc12, inset -1px 0 0 #d6ba7b15;
  -webkit-backdrop-filter: blur(20px) saturate(165%);
  backdrop-filter: blur(20px) saturate(165%);
  color: #c4d9d0;
}
.floating-note::before, .method-console::before, .art-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 3;
  background: linear-gradient(115deg, transparent 2%, #ffffff05 23%, #eaf2e415 24%, transparent 25%, transparent 76%, #ffefc008 100%);
  background-size: 180% 100%;
  background-position: calc(50% + var(--px) * 25%) center;
  opacity: .7;
}
.floating-note b { color: #faf7e9; }
.mini-icon { border-right-color: #f7e3af33; color: #f6d38c; }
.note-a { right: 2%; top: 6%; }
.note-b { left: 0; bottom: 7%; }
.orbit-one {
  border-color: #d9e8cf40;
  background: radial-gradient(ellipse at 18% 12%, #e0f3db0c, transparent 42%), linear-gradient(145deg, #ffffff05, transparent 50%, #dfbd7605);
  box-shadow: inset 1px 2px 0 #ffffff12, inset -1px -1px 0 #c1e4e015, 0 0 45px #b9dbba05;
}
.orbit-two { border-color: #e0c78520; box-shadow: inset 0 1px 0 #e0ebd909; }

/* Gold remains the primary action colour, with the finish of polished glass. */
.button { border-radius: 15px; }
.button.primary {
  background: radial-gradient(ellipse at var(--glass-x) 0%, #fff1c3a6, transparent 62%), linear-gradient(140deg, #e9cd8e, #d6b269 65%, #e4c587);
  border-color: #ffedba91;
  box-shadow: inset 0 1px 0 #fff7d4c4, inset 0 -1px 0 #9a713c50, 0 7px 24px #be9a4220;
  color: #102c30;
}
.button.primary:hover {
  background: radial-gradient(ellipse at var(--glass-x) 0%, #fff7d1cc, transparent 72%), linear-gradient(140deg, #f0d99c, #dfbd76);
  box-shadow: inset 0 1px 0 #fff9dd, 0 10px 29px #d6b16b30;
}
.button.dark { background: linear-gradient(135deg, #2f5a55, #183e42); border-color: #5a7e6b9c; box-shadow: inset 0 1px 0 #e3f1da28, 0 5px 15px #173a3e1a; }
.button.outline { border-color: #607b5e47; background: linear-gradient(140deg, #ffffff80, #ffffff15); box-shadow: inset 0 1px 0 #fff9; }
.circle-btn, .icon-btn {
  background: radial-gradient(ellipse at 28% 5%, #ffffff17, transparent 65%), #8ebbb70a;
  border-color: #cfe4c936;
  box-shadow: inset 0 1px 0 #ffffff20, inset 0 -1px 0 #ffffff04, 0 3px 12px #00000015;
}
.circle-btn:hover, .icon-btn:hover { background: linear-gradient(135deg, #e9edcc28, #dfbd760c); border-color: #dfd3a763; }
.circle-btn:disabled { box-shadow: none; }

.method-console {
  border-radius: 25px;
  border-color: var(--glass-edge);
  background: var(--glass-light), var(--glass-tint), rgba(10, 42, 50, .76);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
  backdrop-filter: blur(22px) saturate(145%);
}
.method-list details[open] i { background: linear-gradient(135deg, #e4efcf28, #dfbd7610); box-shadow: inset 0 1px 0 #fff5; }
.research-workbench { border-radius: 23px; border-color: #c2e1d638; background: #0b2b35d6; box-shadow: var(--glass-shadow); }
.research-detail { background: var(--glass-light), linear-gradient(145deg, #c8e2d70a, #ffffff02); }
.research-visual-footer { background: linear-gradient(125deg, #173d47d9, #08242fdf); }
.result-box { background: linear-gradient(130deg, #d8e7c80b, #ffffff03); border-radius: 0 12px 12px 0; }
.light-panel {
  border-radius: 24px;
  border-color: #fffdf2b3;
  background: linear-gradient(135deg, #fffdf2f5, #f0ede1f5 65%, #eaeaddf7);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 #f1efda8c, 0 24px 70px #00151e40;
}
.media-feature { border-radius: 22px; border-color: #fffbdcb3; background: linear-gradient(135deg, #fcf8eb, #efecdf 70%, #e7ebdd); box-shadow: inset 0 1px 0 #fff, 0 14px 45px #00000026; }
.media-pill { border-radius: 999px; background: #fff7; box-shadow: inset 0 1px 0 #fff; }
.media-symbol { background: var(--glass-light), #adcab50a; box-shadow: inset 0 1px 0 #ffffff20; border-color: #dfd4aa40; }
.art-frame {
  position: relative;
  border-radius: 24px;
  padding: 12px;
  border-color: #d9e6c347;
  background: var(--glass-light), var(--glass-tint), #173b3d70;
  box-shadow: var(--glass-shadow), 20px 24px 70px #0005;
  -webkit-backdrop-filter: blur(18px) saturate(145%);
  backdrop-filter: blur(18px) saturate(145%);
}
.art-frame>button, .art-frame img { border-radius: 13px; overflow: hidden; }
.expand-icon { background: linear-gradient(140deg, #e2e7c62e, #092b31c9); border-color: #f0dfb673; box-shadow: inset 0 1px 0 #fff5; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
dialog { border-radius: 25px; box-shadow: inset 0 1px 0 #fff8, 0 30px 120px #0008; }
.map-dialog { background: var(--glass-light), var(--glass-tint), #092831ed; border-color: #cddfd342; -webkit-backdrop-filter: blur(26px); backdrop-filter: blur(26px); }
.map-card { border-radius: 17px; border-color: #d8e9d62b; background: linear-gradient(135deg, #bad9cf15, #ffffff03), #173a4080; box-shadow: inset 0 1px 0 #ffffff17, 0 8px 20px #00101926; }
.map-card:hover { border-color: #e1d3a87a; box-shadow: inset 0 1px 0 #ffffff3b, 0 10px 26px #00101959; }
.image-dialog { background: linear-gradient(135deg, #173a3ce8, #061b23f7); border-color: #d8e5d13b; }

@media(max-width:1180px) {
  .header nav a { padding: 10px 10px; }
  .header-tools { gap: 8px; }
}
@media(max-width:980px) {
  .header nav { left: 16px; right: 16px; top: 78px; padding: 12px; border-radius: 22px; background: linear-gradient(135deg, #21454bed, #0a2931f5); box-shadow: var(--glass-shadow), 0 16px 38px #0006; }
  .header nav a { padding: 16px 12px; border-radius: 12px; }
  .journey-progress { padding: 2px 12px; }
  .note-a { right: 2%; top: 0; }
  .note-b { left: -1%; bottom: 0; }
}
@media(max-width:720px) {
  .header nav { top: 74px; }
  .header, .journey-bar { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
  .floating-note { border-radius: 15px; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
  .note-a { top: -3%; right: 0; }
  .note-b { bottom: -3%; left: 0; }
  .journey-progress { padding: 2px 8px; gap: 7px; }
  .button { border-radius: 13px; }
  .method-console, .light-panel, .research-workbench, .media-feature { border-radius: 20px; }
  .method-console, .art-frame, .map-dialog { -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* An opaque, still finish for simpler viewing or transparency preferences. */
body.simple { --glass-x: 50%; --glass-y: 10%; }
body.simple .floating-note { background: linear-gradient(135deg, #25454b, #103039); }
body.simple :is(.header, .header nav, .journey-bar, .floating-note, .method-console, .art-frame, .map-dialog, .expand-icon) { -webkit-backdrop-filter: none; backdrop-filter: none; }
@media(prefers-reduced-transparency:reduce) {
  :is(.header,.header nav,.journey-bar,.floating-note,.method-console,.art-frame,.map-dialog,.expand-icon) { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .floating-note,.method-console,.art-frame,.map-dialog,.header nav { background-color: #12343b; }
  .light-panel { background: #f4f0e6; }
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .floating-note { background-color: #15373eea; }
  .method-console, .map-dialog { background-color: #0c2c35; }
}