/* miromí — painterly poster. Deep teal field, one great cloud, one small figure, bold lettering. */
@font-face{font-family:"Archivo Black";src:url(/fonts/archivo-black-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"DM Sans";src:url(/fonts/dm-sans-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"DM Sans";src:url(/fonts/dm-sans-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"DM Sans";src:url(/fonts/dm-sans-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --teal:#139794; --deep:#0c4a50; --leaf:#2f5a4e; --ink:#143a3b;
  --orange:#f37a35; --coral:#e2503c; --peach:#fbb78f; --cream:#f8e6c8; --paper:#fbf1dd; --gold:#e8a933;
  --rose:#ff70a0; --blue:#4096ff;
  --tabs:64px; --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
  --display:"Archivo Black","Arial Black",Impact,system-ui,sans-serif; --body:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.22,.8,.24,1);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:linear-gradient(#139794 0,#139794 55%,#2f5a4e 100%);color:var(--paper);font:500 16px/1.4 var(--body);touch-action:manipulation;overscroll-behavior:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;padding:0}
svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
[hidden]{display:none!important}
/* print-grain over everything: the poster is risograph, not glass */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:99;opacity:.16;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

/* ───────── stage: art + light, always aligned ───────── */
#stage{position:fixed;inset:0;overflow:hidden;background:linear-gradient(#139794 0,#139794 60%,#2f5a4e 100%)}
#scene{position:absolute;left:50%;top:0;transform:translateX(-50%);width:100%;height:100%;animation:float 9s ease-in-out infinite}
body.landscape #scene{top:0;transform:translateX(-50%)}   /* anchor to the top so the MIROMÍ title is never cropped; the foreground gives way instead */
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -6px}}
#bg{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;user-select:none;-webkit-user-drag:none}
#cloudmask{position:absolute;inset:0;-webkit-mask:url(/art/cloud-mask-portrait.png) center/100% 100% no-repeat;mask:url(/art/cloud-mask-portrait.png) center/100% 100% no-repeat}
body.landscape #cloudmask{-webkit-mask-image:url(/art/cloud-mask-landscape.png);mask-image:url(/art/cloud-mask-landscape.png)}
#tint{position:absolute;inset:0;mix-blend-mode:color;opacity:0;background:#ff70a0}
#glow{position:absolute;inset:0;width:100%;height:100%;mix-blend-mode:screen}
#halo{position:absolute;inset:0;width:100%;height:100%;mix-blend-mode:screen;pointer-events:none}

/* ───────── ui layer ───────── */
#ui{position:fixed;inset:0;pointer-events:none;z-index:25}
#ui>*{pointer-events:auto}
#top{position:absolute;top:calc(8px + var(--safe-t));left:12px;right:12px;display:flex;justify-content:space-between;align-items:center;pointer-events:none}
#top>*{pointer-events:auto}
.chip{background:rgba(12,74,80,.62);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:999px;padding:7px 14px;font-weight:700;font-size:14px;letter-spacing:.01em}
.flag{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:rgba(251,183,143,.9);color:var(--ink);border-radius:999px;padding:4px 10px}

#caption{position:absolute;left:14px;right:14px;top:calc((100% - var(--tabs) - var(--safe-b)) * .605);min-height:84px;max-height:30%;display:flex;align-items:center;justify-content:center;text-align:center;
  font:700 clamp(20px,5.6vw,26px)/1.28 var(--body);color:var(--paper);padding:14px 18px;border-radius:26px;
  background:rgba(12,60,64,.5);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease);pointer-events:none;text-shadow:0 1px 8px rgba(0,0,0,.25)}
#caption.on{opacity:1;transform:none}
#caption span{opacity:0;animation:word .45s var(--ease) forwards}
@keyframes word{from{opacity:0;filter:blur(4px)}to{opacity:1;filter:none}}
#heard{position:absolute;left:24px;right:24px;bottom:calc(var(--tabs) + var(--safe-b) + 112px);text-align:center;font-style:italic;font-weight:500;color:var(--cream);opacity:.9;min-height:24px;text-shadow:0 1px 6px rgba(0,0,0,.35)}

#dock{position:absolute;left:0;right:0;bottom:calc(var(--tabs) + var(--safe-b) + 6px);display:flex;justify-content:center;align-items:center;gap:26px}
.round{display:grid;place-items:center;border-radius:50%;background:var(--cream);color:var(--ink);box-shadow:0 6px 0 rgba(12,74,80,.35),0 12px 26px rgba(0,0,0,.25);transition:transform .15s var(--ease)}
.round:active{transform:translateY(3px);box-shadow:0 3px 0 rgba(12,74,80,.35)}
.round svg{width:46%;height:46%}
.round.lg{width:84px;height:84px}.round.sm{width:52px;height:52px;background:rgba(248,230,200,.9)}
.round.sm svg{width:54%;height:54%}
#mic.listening{background:var(--orange);color:#fff;animation:ring 1.4s ease-out infinite}
#mic.thinking{opacity:.85}
#mic.speaking{background:var(--peach)}
@keyframes ring{0%{box-shadow:0 6px 0 rgba(12,74,80,.35),0 0 0 0 rgba(243,122,53,.6)}100%{box-shadow:0 6px 0 rgba(12,74,80,.35),0 0 0 26px rgba(243,122,53,0)}}

#tabs{position:absolute;left:0;right:0;bottom:0;height:calc(var(--tabs) + var(--safe-b));padding-bottom:var(--safe-b);display:grid;grid-template-columns:repeat(4,1fr);background:rgba(10,52,56,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
#tabs button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:12px;font-weight:700;letter-spacing:.04em;opacity:.62;position:relative}
#tabs button.on{opacity:1;color:var(--peach)}
#tabs i{width:22px;height:6px;border-radius:6px;background:currentColor;opacity:.0;transition:opacity .2s}
#tabs button.on i{opacity:1}
#badge{position:absolute;top:8px;left:calc(50% + 14px);min-width:18px;height:18px;border-radius:9px;background:var(--coral);color:#fff;font-size:11px;display:grid;place-items:center;padding:0 5px}

/* composer */
#composer{position:absolute;left:10px;right:10px;bottom:calc(var(--tabs) + var(--safe-b) + 8px);background:rgba(251,241,221,.97);color:var(--ink);border-radius:24px;padding:10px;box-shadow:0 14px 40px rgba(0,0,0,.35);max-height:56%;display:flex;flex-direction:column;z-index:6}
#thread{overflow:auto;display:flex;flex-direction:column;gap:8px;padding:4px 4px 10px;max-height:34vh}
.msg{max-width:86%;padding:9px 13px;border-radius:18px;font-size:15.5px;line-height:1.35}
.msg.me{align-self:flex-end;background:var(--teal);color:#fff;border-bottom-right-radius:6px}
.msg.her{align-self:flex-start;background:#fff;border-bottom-left-radius:6px;box-shadow:0 1px 0 rgba(0,0,0,.08)}
#composer .row{display:flex;gap:8px}
#textin{flex:1;border:2px solid rgba(20,58,59,.18);border-radius:16px;padding:12px 14px;font:500 16px var(--body);background:#fff;color:var(--ink);outline:none}
#textin:focus{border-color:var(--teal)}
.send{width:48px;border-radius:16px;background:var(--orange);color:#fff;font-size:22px;font-weight:700}

/* bridge draft card */
#bridgecard{position:absolute;left:10px;right:10px;bottom:calc(var(--tabs) + var(--safe-b) + 112px);background:var(--paper);color:var(--ink);border-radius:24px;padding:16px;box-shadow:0 14px 40px rgba(0,0,0,.35);z-index:5}
#bridgecard h3{margin:0 0 4px;font:400 18px var(--display)}
#bridgecard p.s{margin:0 0 10px;font-size:13.5px;opacity:.75}
textarea.draft{width:100%;min-height:96px;border:2px solid rgba(20,58,59,.2);border-radius:14px;padding:10px 12px;font:500 15.5px/1.4 var(--body);background:#fff;color:var(--ink);resize:vertical;outline:none}

/* sheets & screens: cream paper panels */
#sheet,#screen{position:fixed;left:0;right:0;top:0;bottom:calc(var(--tabs) + var(--safe-b));z-index:20;overflow:auto;background:linear-gradient(180deg,rgba(12,74,80,.0) 0,rgba(12,74,80,.0) 0);padding:calc(56px + var(--safe-t)) 14px 24px;animation:rise .35s var(--ease)}
#screen{bottom:0;z-index:30;padding-bottom:calc(24px + var(--safe-b))}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.paper{background:var(--paper);color:var(--ink);border-radius:26px;padding:20px 18px;margin:0 auto 14px;max-width:560px;box-shadow:0 10px 30px rgba(0,0,0,.28)}
.paper h1,.paper h2{font-family:var(--display);font-weight:400;margin:0 0 6px;letter-spacing:.005em}
.paper h1{font-size:30px;line-height:1.05}.paper h2{font-size:21px}
.paper h3{margin:16px 0 6px;font-size:13px;letter-spacing:.09em;text-transform:uppercase;opacity:.6}
.paper p{margin:6px 0 10px}
.muted{opacity:.7;font-size:14px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--orange);color:#fff;font-weight:700;border-radius:16px;padding:13px 20px;box-shadow:0 4px 0 rgba(150,60,20,.5);margin:4px 6px 4px 0}
.btn:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(150,60,20,.5)}
.btn.alt{background:var(--teal);box-shadow:0 4px 0 rgba(8,80,80,.5)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:none;border:2px solid rgba(20,58,59,.25)}
.btn.block{display:flex;width:100%;margin:8px 0}
.btn.sm{padding:8px 13px;font-size:14px;border-radius:12px}
.field{display:block;margin:10px 0}
.field>span{display:block;font-size:13px;font-weight:700;margin-bottom:4px;opacity:.75}
input.in,select.in{width:100%;border:2px solid rgba(20,58,59,.18);border-radius:14px;padding:12px 14px;font:500 16px var(--body);background:#fff;color:var(--ink);outline:none}
input.in:focus,select.in:focus{border-color:var(--teal)}
.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg button{border:2px solid rgba(20,58,59,.2);border-radius:999px;padding:8px 14px;font-weight:700;font-size:14px;background:#fff}
.seg button.on{background:var(--teal);color:#fff;border-color:var(--teal)}
.row{display:flex;gap:10px;align-items:center}
.sp{flex:1}
.promise{background:#fff;border-radius:18px;padding:12px 14px;margin:8px 0;display:flex;gap:12px;align-items:flex-start;font-size:15px}
.promise b{display:block;font-size:15px}
.dot{width:12px;height:12px;border-radius:50%;flex:none;margin-top:6px;background:var(--peach)}
.person{display:flex;align-items:center;gap:12px;padding:10px 4px;border-bottom:1px solid rgba(20,58,59,.1)}
.person:last-child{border:0}
.orb{width:38px;height:38px;border-radius:50%;flex:none;background:radial-gradient(circle at 35% 30%,#fff3,#0000 60%),var(--c,#f3b27a);box-shadow:0 0 0 3px rgba(20,58,59,.08),0 0 16px var(--c,#f3b27a)}
.tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:3px 8px;border-radius:999px;background:rgba(20,58,59,.1);margin-right:6px}
.tag.priv{background:rgba(19,151,148,.16)}.tag.hh{background:rgba(243,122,53,.2)}
.mem{padding:11px 0;border-bottom:1px solid rgba(20,58,59,.1)}
.mem:last-child{border:0}
.mem .t{font-size:15.5px}
.mem .a{margin-top:7px;display:flex;gap:8px;flex-wrap:wrap}
.card-in{background:#fff;border-radius:18px;padding:12px 14px;margin:8px 0;border-left:6px solid var(--teal)}
.card-in.nudge{border-color:var(--rose)}.card-in.safety{border-color:var(--coral)}
.card-in .from{font-weight:700;font-size:13px;opacity:.7;margin-bottom:4px}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:260px;margin:12px auto}
.pad button{background:#fff;border-radius:16px;padding:16px 0;font:700 22px var(--body);box-shadow:0 3px 0 rgba(20,58,59,.18)}
.dots{display:flex;gap:12px;justify-content:center;margin:8px 0 2px}.dots i{width:14px;height:14px;border-radius:50%;border:2px solid var(--ink);opacity:.5}.dots i.f{background:var(--ink);opacity:1}
.switch{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:10px 0}
.switch button{width:52px;height:30px;border-radius:15px;background:rgba(20,58,59,.2);position:relative;flex:none;transition:background .2s}
.switch button::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;transition:transform .2s var(--ease);box-shadow:0 1px 3px rgba(0,0,0,.3)}
.switch button.on{background:var(--teal)}.switch button.on::after{transform:translateX(22px)}
.err{color:#b3261e;font-weight:700;font-size:14px;min-height:18px}

/* welcome art screen */
.hero{text-align:center;max-width:520px;margin:0 auto;padding-top:min(54vh,440px)}
.hero h1{font:400 clamp(38px,12vw,60px)/1 var(--display);color:var(--peach);margin:0 0 8px;text-shadow:0 3px 0 rgba(12,74,80,.45)}
.hero p{font-size:19px;margin:0 0 20px;text-shadow:0 1px 8px rgba(0,0,0,.35)}

/* settle ritual */
#ritual{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:0 24px calc(34px + var(--safe-b));background:linear-gradient(transparent 35%,rgba(10,52,56,.55));animation:rise .5s var(--ease)}
#ritual .big{font:400 clamp(30px,9vw,44px)/1 var(--display);color:var(--cream);text-shadow:0 2px 12px rgba(0,0,0,.4);margin-bottom:6px;min-height:46px}
#ritual .sub{font-size:17px;text-align:center;color:var(--cream);margin-bottom:18px;min-height:46px;text-shadow:0 1px 8px rgba(0,0,0,.4);max-width:420px}
#ritual .bar{width:min(320px,70vw);height:6px;border-radius:3px;background:rgba(255,255,255,.25);overflow:hidden;margin-bottom:20px}
#ritual .bar i{display:block;height:100%;width:0;background:var(--peach)}
#ritual .seg button{background:rgba(251,241,221,.95);color:var(--ink);border-color:transparent;padding:12px 18px}

#toast{position:fixed;left:50%;bottom:calc(var(--tabs) + var(--safe-b) + 150px);transform:translate(-50%,20px);background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:999px;font-weight:700;font-size:14px;opacity:0;transition:.3s var(--ease);z-index:60;pointer-events:none;max-width:90vw;text-align:center}
#toast.on{opacity:1;transform:translate(-50%,0)}

/* hub / wide screens */
body.landscape #caption{top:auto;bottom:calc(var(--tabs) + var(--safe-b) + 120px);max-width:760px;left:50%;right:auto;transform:translate(-50%,8px);width:calc(100% - 28px);font-size:clamp(22px,2.6vw,34px)}
body.landscape #caption.on{transform:translate(-50%,0)}
body.landscape #heard{bottom:calc(var(--tabs) + var(--safe-b) + 98px)}
body.hub #tabs{display:none}body.hub{--tabs:0px}
@media (prefers-reduced-motion:reduce){#scene{animation:none}#caption span{animation-duration:.01s}}

body.sheet-open #dock,body.sheet-open #caption,body.sheet-open #heard,body.sheet-open #bridgecard,body.sheet-open #composer{display:none!important}
body.sheet-open #modeflag{display:none}
#settle.offer{animation:ring 1.6s ease-out infinite;background:var(--peach)}
#composer .x{align-self:flex-end;font:700 24px/1 var(--body);width:34px;height:30px;border-radius:10px;opacity:.55;margin:-2px 0 0}
body.composing #dock,body.composing #heard{display:none}
#caption .cw{display:block;width:100%;text-align:center;overflow-wrap:anywhere}
body.ritual #dock,body.ritual #tabs,body.ritual #caption,body.ritual #heard,body.ritual #composer,body.ritual #bridgecard,body.ritual #top{display:none!important}

/* ───────── private-preview lock ───────── */
#gate{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:24px;background:radial-gradient(120% 90% at 50% 20%,rgba(19,151,148,.92),rgba(12,74,80,.97));transition:opacity .35s var(--ease)}
#gate.out{opacity:0;pointer-events:none}
.gbox{width:min(340px,100%);text-align:center}
.glogo{width:150px;max-width:55%;display:block;margin:0 auto 12px}
.gmsg{margin:0 0 22px;font-weight:700}
.gfp{width:104px;height:104px;border-radius:50%;padding:26px;color:#fff;background:var(--orange);box-shadow:0 6px 0 rgba(150,60,20,.5),0 0 40px rgba(255,112,160,.35);animation:gpulse 3s ease-in-out infinite}
.gfp:active{transform:translateY(3px);box-shadow:0 3px 0 rgba(150,60,20,.5)}
@keyframes gpulse{50%{box-shadow:0 6px 0 rgba(150,60,20,.5),0 0 60px rgba(64,150,255,.45)}}
.gsub{margin:14px 0 4px;opacity:.9;min-height:1.4em}
.gerr{margin:6px 0;color:var(--peach);min-height:1.4em;font-size:14px}
#gkeyf{display:flex;gap:8px;margin:8px 0}
#gkey{flex:1;min-width:0;font:inherit;padding:12px 14px;border-radius:14px;border:2px solid rgba(251,241,221,.35);background:rgba(0,0,0,.2);color:var(--paper)}
.gbtn{background:var(--orange);color:#fff;font-weight:700;border-radius:14px;padding:0 18px}
.glink{color:var(--cream);opacity:.8;text-decoration:underline;margin-top:6px}
body.gated #ui,body.gated #stage{filter:blur(6px)}

/* short landscape phones: compact welcome so nothing needs scrolling */
@media (orientation:landscape) and (max-height:520px){
  .hero{padding-top:30vh;max-width:640px}
  .hero h1{font-size:34px;margin-bottom:4px}
  .hero p{font-size:15px;margin-bottom:10px}
  .hero .btn.block{display:inline-flex;width:auto;min-width:210px;margin:4px 6px}
  .hero .muted{display:none}
}

/* on / off the record */
#top{gap:8px}
#top .chip.rec{display:inline-flex;align-items:center;gap:6px;margin-left:auto;font-size:13px}
#top .chip.rec svg{width:15px;height:15px}
#top .chip.rec.off{background:rgba(12,74,80,.72);color:var(--cream)}
#top .chip.rec.on{background:rgba(243,122,53,.9);color:#fff}

/* the turnable cloud: a real 3D draw that fades in while she speaks or is turned, over the painted one */
#cloud3d{position:absolute;opacity:0;visibility:hidden;pointer-events:none;image-rendering:auto;-webkit-mask:radial-gradient(closest-side,#000 80%,transparent 100%);mask:radial-gradient(closest-side,#000 80%,transparent 100%)}
#spin{position:absolute;touch-action:none;cursor:grab;-webkit-tap-highlight-color:transparent;z-index:3;border-radius:50%}
#spin:active{cursor:grabbing}

/* the painted cloud is out of the sky; the 3D one is her. Its old tint/glow layer is not needed when WebGL is drawing her. */
body.gl #cloudmask{display:none}
body.gl #cloud3d{opacity:1}