:host {
  --ink:#171719; --muted:#64666d; --line:rgba(20,22,28,.085); --blue:#1019ec;
  --glass:rgba(255,255,255,.48); --ease:cubic-bezier(.22,1,.36,1);
  display:block; container-type:inline-size; color:var(--ink); color-scheme:light;
  font-family:'ABC Oracle',Arial,sans-serif; font-size:14px; font-weight:400;
  -webkit-font-smoothing:antialiased;
}
* { box-sizing:border-box; }
h2,h3,p { margin:0; }
button { font:inherit; color:inherit; cursor:pointer; border:0; -webkit-tap-highlight-color:transparent; }
button:focus-visible { outline:2px solid var(--blue); outline-offset:3px; }
button:disabled { cursor:default; opacity:.5; }
svg { flex-shrink:0; vertical-align:middle; }

/* A clear outer pane; moving light sits behind it, not over the content. */
.demo-stage { position:relative; isolation:isolate; padding:12px 0 0; }
.demo-atmosphere { position:absolute; z-index:-1; inset:0 -6% 0; overflow:hidden; border-radius:42%; pointer-events:none; }
.demo-atmosphere::before,.demo-atmosphere::after {
  content:''; position:absolute; inset:6% 4%; border-radius:50%;
  background:radial-gradient(ellipse at 24% 24%,rgba(187,190,203,.24),transparent 55%),radial-gradient(ellipse at 76% 75%,rgba(161,167,188,.21),transparent 58%);
  filter:blur(28px); animation:glass-light 16s ease-in-out infinite alternate;
}
.demo-atmosphere::after { inset:12% -8% 7% 20%; background:linear-gradient(135deg,transparent 25%,rgba(255,255,255,.98) 45%,rgba(202,205,214,.18) 64%,transparent 80%); animation-delay:-8s; animation-direction:alternate-reverse; }
.app-surface {
  position:relative; width:100%; overflow:hidden; border-radius:32px;
  background:linear-gradient(145deg,rgba(255,255,255,.58),rgba(248,248,250,.28) 45%,rgba(250,250,252,.56));
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 0 0 1px rgba(35,38,48,.065),inset 0 1px 1px #fff,inset 0 -1px 1px rgba(255,255,255,.7),0 24px 50px -28px rgba(29,34,52,.22),0 5px 12px -8px rgba(29,34,52,.09);
  backdrop-filter:blur(28px) saturate(105%); -webkit-backdrop-filter:blur(28px) saturate(105%);
  line-height:1.4;
}
.app-page { position:relative; padding:26px 24px 23px; overflow:hidden; }
.page-content { position:relative; }
.page-ghost { position:absolute; top:26px; left:24px; right:24px; pointer-events:none; }
.app-header { margin-bottom:14px; }
.app-header h2 { font-size:30px; font-weight:400; line-height:1.12; letter-spacing:-1.1px; text-wrap:balance; }
.app-header h2:focus { outline:none; }
.connection { display:flex; align-items:center; gap:7px; color:var(--muted); font-size:12px; }
.connection-dot { width:5px; height:5px; border-radius:50%; background:var(--blue); box-shadow:0 0 0 4px rgba(16,25,236,.045); }
.voice-card { padding:14px 0 24px; text-align:center; }
.voice-visual { position:relative; display:grid; place-items:center; height:90px; }
.voice-visual::before { content:''; position:absolute; width:78%; height:65px; background:radial-gradient(ellipse,rgba(16,25,236,.065),transparent 68%); opacity:.65; transition:opacity 1s; }
.recording .voice-visual::before { opacity:1; }
.transcript { font-size:17px; font-weight:400; line-height:1.55; letter-spacing:-.25px; color:#5e6068; margin:0 0 22px; text-wrap:balance; }
.primary {
  display:flex; align-items:center; justify-content:center; gap:9px;
  width:fit-content; max-width:100%; min-height:44px; margin-inline:auto; padding:12px 18px;
  border:1px solid rgba(255,255,255,.92); border-radius:999px;
  background:rgba(255,255,255,.7); box-shadow:0 0 0 1px rgba(30,34,47,.07),0 5px 14px -8px rgba(25,28,40,.2),inset 0 1px 1px #fff;
  font-size:14px; font-weight:400; line-height:1.35; text-align:center;
  transition:background .3s,box-shadow .35s,transform .45s var(--ease);
}
.primary svg { color:var(--blue); }
.primary:active { transform:scale(.97); }
.primary:disabled { opacity:1; color:var(--muted); }
.group { position:relative; }
.nutrition-peek,.daily-total,.meal-review,.nutrition-report,.meal-list,.nutrient-list {
  border:1px solid rgba(255,255,255,.9); border-radius:20px;
  background:linear-gradient(135deg,rgba(255,255,255,.65),rgba(255,255,255,.28));
  box-shadow:0 2px 10px -7px rgba(22,26,38,.15),inset 0 1px 0 rgba(255,255,255,.8);
}
.nutrition-peek { padding:20px 18px 17px; }
.inline-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:14px; line-height:1.4; }
.meal-label { font-size:12px; color:var(--muted); }
.calories { display:flex; align-items:baseline; gap:7px; color:var(--muted); font-size:14px; margin:20px 0 22px; }
.calories strong { display:inline-block; color:var(--ink); font-size:48px; font-weight:400; line-height:1; letter-spacing:-2.5px; font-variant-numeric:tabular-nums; }
.calories.large strong { font-size:54px; }
.macros { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.macros>div { display:flex; flex-direction:column; gap:5px; }
.macros>div+div { border-left:1px solid var(--line); padding-left:13px; }
.macros strong { font-size:23px; font-weight:400; line-height:1.15; letter-spacing:-.65px; font-variant-numeric:tabular-nums; }
.macros small,.nutrient-list small { color:var(--muted); font-size:12px; font-weight:400; letter-spacing:0; }
.macros span { color:var(--muted); font-size:12px; }
.text-button { display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:44px; padding:17px 0 0; margin-top:20px; border-top:1px solid var(--line); background:transparent; font-size:14px; }
.text-button svg { color:#777982; transition:transform .4s var(--ease); }
.tabbar { position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:center; padding:6px; margin:0 20px 20px; border:1px solid rgba(255,255,255,.75); border-radius:999px; background:rgba(231,232,237,.38); box-shadow:inset 0 1px 2px rgba(20,24,38,.035); }
.tabbar button { z-index:1; display:flex; align-items:center; justify-content:center; gap:7px; padding:0 6px; border-radius:999px; background:transparent; color:var(--muted); min-height:43px; font-size:12px; transition:color .35s; }
.tabbar button[aria-current] { color:var(--ink); }
.tab-indicator { position:absolute; top:6px; bottom:6px; left:6px; width:calc((100% - 12px)/3); border:1px solid rgba(255,255,255,.95); border-radius:999px; background:rgba(255,255,255,.86); box-shadow:0 3px 8px -4px rgba(22,28,40,.18); transform:translateX(calc(var(--active-tab,0)*100%)); transition:transform .6s var(--ease); }
.section-title { display:flex; align-items:center; justify-content:space-between; margin:25px 2px 11px; }
.section-title h3 { color:var(--muted); font-size:14px; font-weight:400; }
.eyebrow { display:block; color:var(--muted); font-size:12px; }
.daily-total { display:grid; grid-template-columns:1fr auto; gap:0 8px; padding:20px 18px; margin-top:25px; }
.daily-total .calories { margin:17px 0 22px; }
.daily-total .macros { grid-column:1/-1; border-top:1px solid var(--line); padding-top:21px; }
.count-badge { align-self:start; color:var(--muted); font-size:12px; }
.meal-list { padding:0 17px; }
.meal-item+.meal-item { border-top:1px solid var(--line); }
.meal-row { display:flex; width:100%; align-items:center; text-align:left; gap:9px; padding:18px 0; background:transparent; }
.meal-info { flex:1; min-width:0; }
.meal-time { display:block; font-size:12px; color:var(--muted); margin-bottom:5px; }
.meal-info strong { display:block; font-size:14px; line-height:1.4; font-weight:400; }
.meal-cal { font-size:20px; font-weight:400; text-align:right; letter-spacing:-.5px; }
.meal-cal small { display:block; color:var(--muted); font-size:12px; margin-top:2px; letter-spacing:0; }
.meal-row>svg { color:#8a8d96; transition:transform .4s var(--ease); }
.meal-row[aria-expanded="true"]>svg { transform:rotate(90deg); }
.meal-expanded { padding:4px 0 18px; }
.reviewed { display:flex; align-items:center; gap:5px; color:var(--muted); font-size:12px; margin-top:16px; }
.add-meal { margin-top:24px; }
.meal-review { padding:21px 18px; }
.meal-review h3 { margin:13px 0 9px; font-size:26px; font-weight:400; letter-spacing:-.7px; line-height:1.2; }
.portion-description { color:var(--muted); font-size:14px; }
.meal-review .calories { margin:25px 0; }
.meal-review .macros { padding:21px 0 0; border-top:1px solid var(--line); }
.portion { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:23px 2px 0; }
.portion h3 { font-size:14px; font-weight:400; }
.portion p { color:var(--muted); font-size:12px; margin-top:6px; }
.stepper { display:flex; flex-shrink:0; align-items:center; gap:2px; border:1px solid rgba(255,255,255,.9); background:rgba(255,255,255,.6); box-shadow:0 0 0 1px var(--line); border-radius:999px; }
.stepper button { display:grid; place-items:center; width:36px; height:42px; border-radius:50%; color:var(--ink); background:transparent; }
.stepper output { min-width:21px; font-size:14px; text-align:center; font-variant-numeric:tabular-nums; }
.segmented { position:relative; display:flex; padding:4px; border:1px solid rgba(20,24,36,.04); background:rgba(225,227,233,.4); border-radius:999px; margin:23px 0; }
.segmented button { position:relative; width:50%; min-height:38px; border-radius:999px; background:transparent; color:var(--muted); font-size:14px; }
.segmented button[aria-pressed="true"] { color:var(--ink); }
.segment-indicator { position:absolute; top:4px; bottom:4px; left:4px; width:calc((100% - 8px)/2); border:1px solid white; border-radius:999px; background:rgba(255,255,255,.8); box-shadow:0 2px 6px -3px rgba(20,24,36,.14); transform:translateX(calc(var(--period,0)*100%)); }
.nutrition-report { padding:21px 18px 17px; }
.nutrition-report .calories { margin:18px 0 27px; }
.week-chart { display:flex; justify-content:space-between; gap:9px; }
.week-chart button { display:flex; flex:1; min-width:0; flex-direction:column; align-items:center; gap:11px; padding:0; border-radius:5px; background:transparent; color:var(--muted); font-size:12px; }
.bar-track { display:flex; align-items:flex-end; width:100%; max-width:25px; height:103px; border-radius:6px; background:rgba(35,40,55,.025); }
.bar-track i { display:block; width:100%; background:linear-gradient(0deg,rgba(70,75,95,.11),rgba(70,75,95,.23)); border-radius:6px; transform-origin:bottom; box-shadow:inset 0 1px 0 rgba(255,255,255,.6); transition:background .4s; }
.week-chart button[aria-pressed="true"] { color:var(--blue); }
.week-chart button[aria-pressed="true"] i { background:linear-gradient(0deg,#1019ec,#6670ff); box-shadow:inset 0 1px 0 #ffffff50,0 4px 10px -5px #1019ec70; }
.nutrient-list { padding:0 18px; }
.nutrient-list>div { display:flex; align-items:center; gap:10px; padding:16px 0; }
.nutrient-list>div+div { border-top:1px solid var(--line); }
.nutrient-name { flex:1; color:var(--muted); font-size:14px; }
.nutrient-dot { width:6px; height:6px; border-radius:50%; background:#262831; }
.nutrient-dot.carbs { background:#777b88; }
.nutrient-dot.fat { background:#b5b8c3; }
.nutrient-list strong { text-align:right; font-size:22px; letter-spacing:-.5px; font-weight:400; font-variant-numeric:tabular-nums; }

.wave-bars { display:flex; align-items:center; justify-content:center; gap:4px; height:57px; color:var(--blue); }
.wave-bars i { display:block; width:3px; height:var(--height); border-radius:5px; background:currentColor; transform:scaleY(.18); }
.voice-visual .wave-bars { width:100%; transform:scaleY(.55); transition:transform 1.4s var(--ease); }
.voice-visual .wave-bars i { animation:wave 1.7s ease-in-out var(--delay) infinite alternate; }
.recording .voice-visual .wave-bars { transform:scaleY(1.25); }
.audio-tile { display:grid; place-items:center; height:100%; padding:14px; }
.audio-tile .wave-bars { width:100%; gap:2px; height:48px; }
.audio-tile .wave-bars i { width:3px; height:40px; transform:scaleY(.075); }
@keyframes wave { from { transform:scaleY(.14); opacity:.55; } to { transform:scaleY(1); opacity:1; } }
@keyframes glass-light { from { transform:translate(-5%,-3%) rotate(-8deg); } to { transform:translate(5%,4%) rotate(8deg); } }
@keyframes pane-arrive { from { opacity:0; transform:translateY(24px) scale(.985); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes content-arrive { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
:host([data-revealed]) .app-surface { animation:pane-arrive 1.1s var(--ease) both; }
:host([data-entering]) .page-content>*,:host([data-entering]) .tabbar { animation:content-arrive .9s var(--ease) .12s backwards; }
:host([data-entering]) .page-content>:nth-child(n+3) { animation-delay:.2s; }
:host([data-entering]) .page-content>:nth-child(n+4) { animation-delay:.28s; }
:host([data-entering]) .bar-track i { animation:bar-arrive .9s var(--ease) calc(.25s + var(--bar-delay,0ms)) backwards; }
@keyframes bar-arrive { from { transform:scaleY(.08); } to { transform:scaleY(1); } }
:host([data-paused]) *, :host([data-paused]) *::before, :host([data-paused]) *::after { animation-play-state:paused!important; }
@media (hover:hover) and (pointer:fine) {
  .primary:hover { background:rgba(255,255,255,.98); box-shadow:0 0 0 1px rgba(16,25,236,.14),0 8px 20px -10px rgba(25,28,40,.25); transform:translateY(-2px); }
  .primary:disabled:hover { transform:none; }
  .text-button:hover,.meal-row:hover .meal-info strong,.tabbar button:hover,.stepper button:hover { color:var(--blue); }
  .text-button:hover svg { transform:translateX(3px); }
  .week-chart button:hover i { filter:brightness(.92); }
}
@media (max-width:420px) {
  .app-page { padding:25px 22px 22px; }
  .page-ghost { top:25px; left:22px; right:22px; }
}
@container (max-width:340px) {
  .app-page { padding-inline:17px; }
  .page-ghost { left:17px; right:17px; }
  .app-header h2 { font-size:28px; }
  .nutrition-peek,.daily-total,.meal-review,.nutrition-report { padding-inline:14px; }
  .macros { gap:6px; }
  .macros>div+div { padding-left:9px; }
  .macros strong { font-size:21px; }
  .portion { gap:6px; }
  .stepper button { width:31px; }
  .tabbar { margin-inline:15px; }
  .tabbar button { gap:4px; }
  .tabbar button svg { width:16px; }
  .inline-heading { align-items:flex-start; gap:8px; }
  .transcript { font-size:16px; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; }
  .voice-visual .wave-bars i { transform:scaleY(.45); }
}

/* Landscape frames for the app examples. */
:host(aspera-app-demo) { --scene:url('/media/app-cliff-background.png'); }
:host(aspera-app-demo[screen="audience"]) { --scene:url('/media/app-valley-background.png'); }
:host(aspera-app-demo[screen="questions"]) { --scene:url('/media/app-hillside-background.png'); }
:host(aspera-app-demo) .demo-stage { padding:0; margin:36px 0; }
:host(aspera-app-demo) .demo-atmosphere { inset:-36px; border-radius:64px; background-image:var(--scene); background-size:cover; background-position:center; }
:host(aspera-app-demo) .demo-atmosphere::before,
:host(aspera-app-demo) .demo-atmosphere::after { display:none; }
:host(aspera-app-demo) .app-surface {
  background:rgba(255,255,255,.96);
  aspect-ratio:9 / 19.5;
  display:flex;
  flex-direction:column;
}
:host(aspera-app-demo) .app-page {
  flex:1;
  min-height:0;
  overflow-y:auto;
  overscroll-behavior-y:contain;
}
:host(aspera-app-demo) .tabbar { flex-shrink:0; }
@media(max-width:767px) {
  :host(aspera-app-demo) .demo-stage { margin:24px; }
  :host(aspera-app-demo) .demo-atmosphere { inset:-24px; border-radius:48px; }
}