/* loreng.me: one radius system (pills for controls, 16px panels), one accent (coral). */
@font-face {
  font-family: 'Outfit';
  src: url('../assets/fonts/outfit.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  --accent: #ff7a59;
  --on-accent: #2a1610;
  --radius-panel: 16px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --z-label: 20; --z-chrome: 30; --z-sheet: 40; --z-loader: 60;
  font-family: 'Outfit', ui-sans-serif, system-ui, sans-serif;
}
/* The theme follows the room's real day/night (set from the window sky), not the OS setting. */
:root[data-theme='day'] {
  --bg: #e9e2f0; --bg2: #f6eee6; --surface: rgb(255 251 247 / 0.92); --surface-solid: #fffaf5;
  --text: #2a2236; --muted: #5d5170; --line: rgb(42 34 54 / 0.12); --shadow: 0 12px 40px rgb(74 52 98 / 0.18);
}
:root[data-theme='night'] {
  --bg: #1d1830; --bg2: #2b2147; --surface: rgb(40 32 62 / 0.9); --surface-solid: #2a2140;
  --text: #f6ece6; --muted: #c9bcd9; --line: rgb(246 236 230 / 0.14); --shadow: 0 12px 40px rgb(6 4 16 / 0.45);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body {
  min-height: 100dvh; overflow: hidden; color: var(--text);
  background: radial-gradient(120% 90% at 50% 40%, var(--bg2), var(--bg));
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; outline: none; }
#scene.hovering { cursor: pointer; }

.ico { display: inline-block; width: 1.05em; height: 1.05em; background: currentColor; flex: none;
  -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }

.i-arrow-up-right { --i: url('../assets/icons/arrow-up-right.svg'); }
.i-copy { --i: url('../assets/icons/copy.svg'); }
.i-check { --i: url('../assets/icons/check.svg'); }
.i-x { --i: url('../assets/icons/x.svg'); }
.i-list-bullets { --i: url('../assets/icons/list-bullets.svg'); }
.i-envelope-simple { --i: url('../assets/icons/envelope-simple.svg'); }
.i-hand-tap { --i: url('../assets/icons/hand-tap.svg'); }
.i-speaker-high { --i: url('../assets/icons/speaker-high.svg'); }
.i-speaker-slash { --i: url('../assets/icons/speaker-slash.svg'); }

/* ---------- chrome ---------- */
.chrome { position: fixed; z-index: var(--z-chrome); }
.top { top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center;
  padding: max(16px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left)); pointer-events: none; }
.top > * { pointer-events: auto; }
.wordmark { font-weight: 650; font-size: 20px; letter-spacing: -0.02em; color: var(--text); text-decoration: none; }
.pill { display: inline-flex; align-items: center; gap: 8px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface); color: var(--text); font: 500 15px/1 'Outfit', sans-serif; padding: 11px 16px;
  box-shadow: var(--shadow); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.top-actions { display: flex; gap: 10px; }
.icon-pill { padding: 11px 13px; }
button.pill { cursor: pointer; transition: transform .25s var(--ease), background .2s; }
button.pill:hover { transform: translateY(-1px); }
button.pill:active { transform: scale(0.97); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.hint { left: max(20px, env(safe-area-inset-left)); bottom: max(20px, env(safe-area-inset-bottom)); margin: 0;
  opacity: 0; transform: translateY(8px); transition: opacity .6s var(--ease), transform .6s var(--ease); pointer-events: none; }
.hint.show { opacity: 1; transform: none; }
.hint .ico { color: var(--accent); }

/* ---------- hover label ---------- */
.label { position: fixed; left: 0; top: 0; z-index: var(--z-label); pointer-events: none; min-width: 120px; max-width: 260px;
  display: grid; gap: 2px; padding: 10px 14px; border-radius: var(--radius-panel); background: var(--surface);
  border: 1px solid var(--line); box-shadow: var(--shadow); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transform: translate3d(var(--x, 0), var(--y, 0), 0); transition: opacity .15s; }
.label strong { font-weight: 600; font-size: 16px; }
.label .sub { color: var(--muted); font-size: 13.5px; }
.label .soon, .sheet .soon { font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--on-accent); background: #f2b84b;
  justify-self: start; border-radius: 999px; padding: 3px 9px; margin-top: 4px; }
.label:not(.is-soon) .soon { display: none; }
.label .sub:empty { display: none; }

/* ---------- mobile bottom sheet ---------- */
.sheet { position: fixed; z-index: var(--z-sheet); left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 18px; border-radius: var(--radius-panel);
  background: var(--surface-solid); border: 1px solid var(--line); box-shadow: var(--shadow);
  animation: sheet-in .35s var(--ease); }
.sheet-text { display: grid; gap: 2px; flex: 1; min-width: 0; }
.sheet-text strong { font-size: 17px; font-weight: 600; }
.sheet-text .sub { color: var(--muted); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheet:not(.is-soon) .soon, .sheet.is-soon .primary, .sheet.no-link .primary { display: none; }
.sheet.no-link:not(.is-soon) .soon { display: none; }
@keyframes sheet-in { from { transform: translateY(20px); opacity: 0; } }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; min-width: 44px;
  border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--text);
  font: 600 15px/1 'Outfit', sans-serif; padding: 0 16px; cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: transform .2s var(--ease), background .2s; }
.btn:active { transform: scale(0.97); }
.btn.primary { background: var(--accent); border-color: transparent; color: var(--on-accent); }
.btn.primary:hover { background: #ff8a6d; }
.btn.icon { padding: 0; width: 44px; }

/* ---------- dialogs ---------- */
dialog { width: min(440px, calc(100vw - 24px)); max-height: min(80dvh, 640px); border: 1px solid var(--line); padding: 0;
  border-radius: var(--radius-panel); background: var(--surface-solid); color: var(--text); box-shadow: var(--shadow); }
dialog[open] { animation: sheet-in .35s var(--ease); }
dialog::backdrop { background: rgb(20 14 34 / 0.45); backdrop-filter: blur(3px); }
.dlg-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 14px 6px 22px; }
.dlg-head h2 { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
#links-body { padding: 0 10px 14px; overflow: auto; }
#links-body h3 { font-size: 13px; font-weight: 600; color: var(--muted); margin: 14px 12px 4px; }
.link-list { list-style: none; margin: 0; padding: 0 10px 12px; display: grid; gap: 2px; }
#links-body .link-list { padding: 0; }
.link-list a, .link-list button, .link-list .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  min-height: 48px; padding: 8px 12px; border-radius: 12px; color: var(--text); text-decoration: none; background: none; border: 0;
  font: 500 16px/1.25 'Outfit', sans-serif; text-align: left; cursor: pointer; }
.link-list a:hover, .link-list button:hover { background: var(--line); }
.link-list .meta { color: var(--muted); font-size: 13.5px; font-weight: 400; display: block; }
.link-list .row { cursor: default; }
.link-list .tag { font-size: 12.5px; font-weight: 600; color: var(--on-accent); background: #f2b84b; border-radius: 999px; padding: 3px 9px; flex: none; }
.link-list .ico { color: var(--muted); }
/* bulleted popups (objects that hold several things): one dot per item */
.link-list.bullets .name::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  margin: 0 10px 0 1px; vertical-align: 0.12em; }
.link-list.bullets .meta { padding-left: 18px; }
.email-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px 22px 4px; }
.email-text { font-size: 18px; font-weight: 500; color: var(--text); word-break: break-all; flex: 1 1 180px; }
.status { min-height: 1.4em; margin: 4px 22px 18px; color: var(--muted); font-size: 14px; }

/* ---------- loader ---------- */
#loader { position: fixed; inset: 0; z-index: var(--z-loader); display: grid; place-content: center; justify-items: center; gap: 10px;
  background: radial-gradient(120% 90% at 50% 40%, var(--bg2), var(--bg)); transition: opacity .7s var(--ease), visibility .7s; }
#loader.done { opacity: 0; visibility: hidden; }
.loader-lantern { width: 46px; height: 62px; border-radius: 14px 14px 18px 18px; background: linear-gradient(#ffe9c6, #ffc27e);
  box-shadow: 0 0 40px 8px rgb(255 160 80 / 0.45); position: relative; animation: bob 2.4s ease-in-out infinite; }
.loader-lantern span { position: absolute; left: 50%; bottom: -7px; width: 22px; height: 7px; margin-left: -11px; border-radius: 4px; background: var(--accent); }
.loader-name { margin: 18px 0 0; font-size: 22px; font-weight: 650; letter-spacing: -0.02em; }
.loader-msg { margin: 0; color: var(--muted); font-size: 15px; }
.loader-bar { width: 140px; height: 4px; border-radius: 999px; background: var(--line); overflow: hidden; margin-top: 6px; }
.loader-bar i { display: block; height: 100%; width: var(--p, 10%); background: var(--accent); border-radius: inherit; transition: width .3s var(--ease); }
@keyframes bob { 50% { transform: translateY(-10px) rotate(2deg); } }

.noscript { position: fixed; inset: 0; display: grid; place-content: center; padding: 24px; text-align: center; z-index: 100; background: var(--bg); }
.webgl-fallback { position: fixed; inset: 0; display: grid; place-content: center; padding: 24px; text-align: center; }

@media (max-width: 640px) {
  .wordmark { font-size: 18px; }
  .pill { font-size: 14px; padding: 10px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .loader-lantern { animation: none; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .pill, .label { background: var(--surface-solid); backdrop-filter: none; -webkit-backdrop-filter: none; }
}