:root{
  --bg:#0b0a09; --bg2:#1a1613; --ink:#f3ebdb; --ink2:#d8cdb8; --muted:#a3988a;
  --gold:#c9a24a; --gold2:#e7cd7d; --gold-dim:rgba(201,162,74,.28); --line:rgba(231,205,125,.22);
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif; --sans:Inter,-apple-system,system-ui,sans-serif;
  --col:760px;
}
*{box-sizing:border-box} html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow:hidden;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
button{font-family:inherit}
/* ---------- strati ---------- */
#pano{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;background:var(--bg);opacity:0;transition:opacity 1.2s ease}
body.in-church #pano{opacity:1}
#veil{position:fixed;inset:0;pointer-events:none;background:
  linear-gradient(180deg,rgba(11,10,9,.62) 0%,rgba(11,10,9,0) 24%,rgba(11,10,9,0) 45%,rgba(11,10,9,.55) 68%,rgba(11,10,9,.94) 100%);opacity:0;transition:opacity 1.2s}
body.in-church #veil{opacity:1}
body.dark #veil{background:rgba(6,5,4,.55)}
#marks{position:fixed;inset:0;pointer-events:none;z-index:3}
.mark{position:absolute;left:0;top:0;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;opacity:0;transition:opacity .6s;
  background:radial-gradient(circle,rgba(231,205,125,.42) 0%,rgba(231,205,125,.12) 45%,transparent 70%)}
.mark::before{content:"";position:absolute;inset:14px;border-radius:50%;border:1.5px solid rgba(231,205,125,.85);animation:ring 2.2s ease-out infinite}
.mark.on{opacity:1}
.mark .lbl{position:absolute;top:66px;left:50%;transform:translateX(-50%);white-space:nowrap;font:500 11px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold2);text-shadow:0 1px 8px #000}
.mark.edge{width:30px;height:30px;margin:-15px 0 0 -15px;background:none}
.mark.edge::before{inset:0;border:0;animation:none;background:radial-gradient(circle,rgba(231,205,125,.95),rgba(231,205,125,.15) 60%,transparent 70%)}
.mark.edge .lbl{display:none}
.mark.edge::after{content:"";position:absolute;left:50%;top:50%;width:0;height:0;border:7px solid transparent;border-left:12px solid var(--gold2);transform:translate(4px,-7px) rotate(var(--ang));transform-origin:-4px 7px}
@keyframes ring{0%{transform:scale(.6);opacity:1}100%{transform:scale(1.8);opacity:0}}
#orb{position:fixed;z-index:4;width:150px;height:150px;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none;transition:top .9s cubic-bezier(.4,0,.2,1),width .9s,height .9s;filter:drop-shadow(0 0 22px rgba(231,205,125,.25))}
#orb.nogl{background:radial-gradient(circle,rgba(231,205,125,.7),rgba(201,162,74,.25) 40%,transparent 62%);border-radius:50%}
body.on-landing #orb{top:calc(36% + 0px);width:230px;height:230px}
body.in-church #orb{top:calc(100dvh - var(--orb-bottom,300px));width:120px;height:120px}
body.hide-orb #orb{opacity:0;transition:opacity .8s}
#app{position:fixed;inset:0;z-index:5;pointer-events:none}
#app > *{pointer-events:auto}
.screen{position:absolute;inset:0;display:flex;flex-direction:column;animation:fade .6s ease both}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- landing ---------- */
.landing{justify-content:flex-end;align-items:center;text-align:center;padding:max(28px,env(safe-area-inset-top)) 26px calc(26px + env(safe-area-inset-bottom));background:transparent}
body.on-landing{background:radial-gradient(900px 520px at 50% 34%,rgba(201,162,74,.14),transparent 60%),var(--bg)}
.landing .eyebrow{position:absolute;top:max(22px,env(safe-area-inset-top));left:0;right:0}
.eyebrow{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.landing .body{max-width:420px;animation:rise 1s .2s ease both}
h1{font-family:var(--serif);font-weight:500;font-size:52px;line-height:.98;margin:0 0 12px;letter-spacing:-.01em}
.tagline{font-family:var(--serif);font-style:italic;font-size:22px;color:var(--ink2);margin:0 auto 26px;max-width:340px;line-height:1.25}
.langs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:22px}
.chip{border:1px solid var(--line);background:rgba(11,10,9,.35);color:var(--ink2);border-radius:999px;padding:9px 15px;font:500 13px var(--sans);cursor:pointer;transition:.2s;backdrop-filter:blur(8px)}
.chip:hover{border-color:var(--gold)} .chip.on{background:var(--gold);color:#1a1409;border-color:var(--gold)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:999px;padding:17px 30px;font:600 15px var(--sans);cursor:pointer;transition:.2s;
  background:linear-gradient(180deg,var(--gold2),var(--gold));color:#1a1409;box-shadow:0 10px 30px rgba(201,162,74,.28)}
.btn:hover{transform:translateY(-1px);box-shadow:0 14px 34px rgba(201,162,74,.38)} .btn:disabled{opacity:.5;cursor:default;transform:none}
.foot{font-size:11.5px;color:var(--muted);line-height:1.5;margin-top:22px;max-width:460px}

/* ---------- tappa ---------- */
.top{position:absolute;top:max(12px,env(safe-area-inset-top));left:12px;right:12px;display:flex;align-items:center;gap:8px;z-index:6}
.top .mid{flex:1;text-align:center;min-width:0}
.top .mid .eyebrow{color:var(--gold2);opacity:.95;text-shadow:0 1px 8px rgba(0,0,0,.8);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top .mid .name{font-family:var(--serif);font-size:19px;line-height:1.05;margin-top:3px;text-shadow:0 1px 10px rgba(0,0,0,.9);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.icon{width:40px;height:40px;flex:none;border-radius:50%;border:1px solid rgba(255,255,255,.16);background:rgba(11,10,9,.42);backdrop-filter:blur(10px);color:var(--ink);display:grid;place-items:center;cursor:pointer;font-size:15px;transition:.2s}
.icon.on{border-color:var(--gold);color:var(--gold2);box-shadow:0 0 0 3px rgba(201,162,74,.15)}
.icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.dots{display:flex;gap:5px;justify-content:center;margin-top:6px}.dot{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.3)}.dot.on{background:var(--gold2);width:16px;border-radius:3px}

.title-card{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:30px;pointer-events:none;z-index:7;animation:card 4.2s ease both}
.title-card .eyebrow{color:var(--gold2)}
.title-card h2{font-family:var(--serif);font-weight:500;font-size:44px;line-height:1;margin:8px 0 6px;text-shadow:0 2px 24px rgba(0,0,0,.9)}
.title-card .sub{font-family:var(--serif);font-style:italic;font-size:22px;color:var(--ink2)}
.title-card .quote{font-family:var(--serif);font-style:italic;font-size:24px;line-height:1.3;max-width:520px;margin:18px auto 0;color:var(--ink);text-shadow:0 2px 20px rgba(0,0,0,.95)}
.title-card .quote small{display:block;font-style:normal;font-family:var(--sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold2);margin-top:12px}
@keyframes card{0%{opacity:0;transform:translateY(8px)}12%{opacity:1;transform:none}80%{opacity:1}100%{opacity:0}}
.title-card.long{animation-duration:7s}

.bottom{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:stretch;padding:0 14px calc(10px + env(safe-area-inset-bottom));z-index:6}
.column{width:100%;max-width:var(--col);margin:0 auto;display:flex;flex-direction:column;gap:10px}
.caption{min-height:112px;text-align:center;padding:0 8px}
.caption .you{font:500 12.5px var(--sans);color:var(--muted);margin-bottom:8px;animation:fade .4s both}
.caption .you b{color:var(--ink2);font-weight:500}
.caption .say{font-family:var(--serif);font-size:clamp(21px,2.6vh + 8px,28px);line-height:1.25;color:var(--ink);text-shadow:0 1px 14px rgba(0,0,0,.9);animation:rise .5s ease both;text-wrap:balance}
.caption .say.think{color:var(--gold2);font-style:italic;font-size:19px;opacity:.9}
.caption .say.err{color:#e9a08a;font-size:17px;font-family:var(--sans)}
.caption .tools{display:flex;gap:16px;justify-content:center;margin-top:8px}
.caption .tools button{background:none;border:0;color:var(--muted);font:500 11.5px var(--sans);letter-spacing:.06em;cursor:pointer;padding:4px 2px}
.caption .tools button:hover{color:var(--gold2)}
.sugg{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 4px;scrollbar-width:none;justify-content:flex-start}.sugg::-webkit-scrollbar{display:none}
.sugg .chip{white-space:nowrap;flex:none;font-size:12.5px;padding:8px 13px}
@media(min-width:700px){.sugg{justify-content:center;flex-wrap:wrap}}
.compose{display:flex;gap:8px;align-items:center}
.compose input{flex:1;min-width:0;border:1px solid var(--line);background:rgba(20,17,14,.72);backdrop-filter:blur(12px);color:var(--ink);border-radius:999px;padding:14px 18px;font:15px var(--sans);outline:none}
.compose input:focus{border-color:var(--gold)} .compose input:disabled{opacity:.5}
.compose .send,.compose .mic{width:50px;height:50px;border-radius:50%;flex:none;padding:0;font-size:18px}
.compose .mic{border:1px solid var(--line);background:rgba(20,17,14,.72);backdrop-filter:blur(12px);color:var(--gold2);display:grid;place-items:center;cursor:pointer;position:relative;touch-action:none;user-select:none;-webkit-user-select:none;transition:.2s}
.compose .mic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.compose .mic.listening{background:var(--gold);color:#1a1409;border-color:var(--gold);transform:scale(1.08)}
.compose .mic.listening::before{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(231,205,125,.7);animation:ring 1.2s ease-out infinite}
.compose .mic.busy{opacity:.55}
.compose .mic:disabled{opacity:.35;cursor:default}
.hint{text-align:center;font:500 11px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);min-height:14px}
.hint.on{color:var(--gold2)}
.nav{display:flex;justify-content:space-between;align-items:center;padding:0 4px}
.link{background:none;border:0;color:var(--muted);font:500 13px var(--sans);cursor:pointer;padding:6px 4px;text-shadow:0 1px 6px #000}.link:hover{color:var(--gold2)}
.link.gold{color:var(--gold2)}

/* ---------- silenzio ---------- */
.silence{position:absolute;inset:0;display:grid;place-items:center;padding:24px;z-index:8;animation:fade 2.2s ease both}
.silence .card{text-align:center;max-width:420px;width:100%}
.silence .rule{width:38px;height:1px;background:var(--gold);margin:0 auto 20px;opacity:.9}
.silence h3{font-family:var(--serif);font-weight:500;font-size:44px;margin:0 0 6px;line-height:1}
.silence p{font-family:var(--serif);font-style:italic;font-size:22px;color:var(--ink2);margin:0 0 26px}
.badge-card{position:relative;margin:0 auto;max-width:360px;padding:22px 20px 18px;border-radius:14px;background:linear-gradient(180deg,#f6efe1,#e9dfc9);color:#1d1710;text-align:left;box-shadow:0 30px 80px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.2) inset;animation:rise 1.4s 1.2s ease both}
.badge-card::before{content:"";position:absolute;top:-30px;left:50%;width:12px;height:36px;margin-left:-6px;background:linear-gradient(180deg,transparent,#3a2f21 40%);border-radius:0 0 6px 6px}
.badge-card .clip{position:absolute;top:-8px;left:50%;width:44px;height:16px;margin-left:-22px;border-radius:8px;background:#2a2118}
.badge-card .org{font:600 10px var(--sans);letter-spacing:.2em;text-transform:uppercase;color:#7a5b1d;display:flex;justify-content:space-between}
.badge-card .who{display:flex;gap:14px;align-items:center;margin:16px 0 10px}
.badge-card .av{width:60px;height:60px;border-radius:50%;flex:none;display:grid;place-items:center;font-family:var(--serif);font-size:30px;color:#f6efe1;background:linear-gradient(180deg,#8c6a2a,#5a4318)}
.badge-card b{display:block;font:600 22px var(--serif)}
.badge-card small{display:block;color:#5c4d3a;font-size:12.5px;line-height:1.45}
.badge-card .role{border-top:1px solid rgba(0,0,0,.12);padding-top:10px;font-size:12.5px;color:#4a3d2c;line-height:1.45}
.silence .after{margin-top:22px;font:500 12px var(--sans);letter-spacing:.06em;color:var(--muted);animation:fade 1s 2.4s both}
.screen.silenced .caption,.screen.silenced .compose,.screen.silenced .sugg,.screen.silenced .hint{display:none}
.silence{top:70px;bottom:60px;padding-bottom:0}

/* ---------- fine ---------- */
.end{justify-content:center;align-items:center;text-align:center;padding:40px 30px;background:var(--bg)}
.end .book{width:130px;height:184px;margin:0 auto 28px;border-radius:4px 10px 10px 4px;background:linear-gradient(135deg,#2a241d,#171310);border:1px solid var(--line);box-shadow:-6px 0 0 -2px #0b0a09,-10px 0 0 -4px var(--gold-dim),0 24px 60px rgba(0,0,0,.7);display:grid;place-items:center}
.end .book span{font-family:var(--serif);color:var(--gold2);font-size:13px;line-height:1.25;padding:12px;text-align:center}
.end h2{font-family:var(--serif);font-weight:500;font-size:40px;line-height:1.02;margin:0 0 10px}
.end p{color:var(--ink2);font-family:var(--serif);font-style:italic;font-size:21px;margin:0 auto 26px;max-width:380px}

/* ---------- pannelli ---------- */
.panel{position:absolute;inset:0;z-index:20;background:rgba(11,10,9,.9);backdrop-filter:blur(14px);padding:max(22px,env(safe-area-inset-top)) 22px calc(22px + env(safe-area-inset-bottom));overflow-y:auto;animation:fade .3s ease both}
.panel .inner{max-width:var(--col);margin:0 auto}
.panel .close{position:absolute;top:max(14px,env(safe-area-inset-top));right:14px}
.panel h3{font-family:var(--serif);font-weight:500;font-size:32px;margin:6px 0 4px}
.panel h4{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold2);margin:24px 0 8px}
.panel ul{margin:0;padding:0 0 0 18px;color:var(--ink2);font-size:14.5px;line-height:1.55}.panel li{margin:6px 0}
.tag{display:inline-block;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;padding:2px 6px;border-radius:4px;margin-right:8px;border:1px solid var(--line);color:var(--gold2)}
.tag.libro{background:rgba(201,162,74,.16)}.tag.audio{color:var(--ink2)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:14px;color:var(--ink2)}.kv b{color:var(--ink);font-weight:500}
.transcript .msg{margin:14px 0;max-width:92%}
.transcript .msg .who{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:0 0 5px 2px}
.transcript .msg .bubble{padding:12px 16px;border-radius:16px;line-height:1.45;font-size:15.5px;white-space:pre-wrap;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
.transcript .msg.guide .bubble{font-family:var(--serif);font-size:19px;line-height:1.32;border-left:2px solid var(--gold);border-top-left-radius:6px}
.transcript .msg.user{margin-left:auto}.transcript .msg.user .bubble{background:rgba(201,162,74,.14);border:1px solid var(--gold-dim);border-top-right-radius:6px}
.toast{position:fixed;left:50%;bottom:calc(120px + env(safe-area-inset-bottom));transform:translateX(-50%);background:rgba(20,17,14,.85);border:1px solid var(--line);color:var(--ink2);padding:10px 16px;border-radius:999px;font:500 13px var(--sans);z-index:30;animation:fade .3s both;backdrop-filter:blur(10px)}