/* Feya app stylesheet: the design artifact's CSS (docs/shaping/app-redesign/artifact-*.html)
   with the site's self-hosted faces and palette (R4 in the shaping doc). */
@font-face{font-family:"Tenor";src:url("/welcome/assets/tenor.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Jost";src:url("/welcome/assets/jost-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Jost";src:url("/welcome/assets/jost-600.woff2") format("woff2");font-weight:600;font-display:swap}

:root{
  color-scheme:light;
  --bg:#f6eef9; --ink:#1F1635; --mute:#8d83ad; --soft:#b5abcd;
  --card:rgba(255,255,255,.72); --line:rgba(170,130,215,.2);
  --pink:#EE4D9B; --mag:#B03383; --lav:#b9a0f7; --tint:#f8e1f1; --ok:#2a8a63;
  --grad:linear-gradient(95deg,#eaa2c9 0%,#c66fd2 50%,#8c87e8 100%);
  --shadow:0 .625rem 1.875rem rgba(190,120,220,.13);
  --r:1.75rem; --topH:calc(4.125rem + env(safe-area-inset-top));
  --head:"Tenor","Optima","Helvetica Neue",system-ui,sans-serif;
  --font:"Jost","Century Gothic","Avenir Next",system-ui,sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0}
/* Sizes are in rem so phones can scale the whole UI from one root size (end of file). */
html{font-size:16px}
body{
  font-family:var(--font);color:var(--ink);font-size:1rem;line-height:1.35;
  background:
    radial-gradient(60% 40% at 15% 0%,rgba(255,190,235,.55),transparent 70%),
    radial-gradient(55% 45% at 100% 25%,rgba(200,180,255,.5),transparent 70%),
    radial-gradient(70% 50% at 40% 100%,rgba(255,200,240,.5),transparent 70%),
    var(--bg);
  -webkit-font-smoothing:antialiased;overflow:hidden;
}
button,input,select,textarea{font:inherit;color:inherit}
/* Screens are links, not buttons, in the server-rendered app. */
a{color:inherit;text-decoration:none}
[hidden]{display:none!important}
button{cursor:pointer;border:0;background:none;padding:0;text-align:inherit}
:focus-visible{outline:2px solid var(--mag);outline-offset:2px;border-radius:.75rem}
svg.i{width:1.375rem;height:1.375rem;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---------- shell ---------- */
.app{height:100dvh;display:grid;grid-template-rows:1fr auto;grid-template-areas:"col" "tabs"}
.col{grid-area:col;position:relative;min-height:0;display:flex;flex-direction:column}
.top{position:absolute;inset:0 0 auto 0;z-index:5;height:var(--topH);display:flex;align-items:center;gap:.5rem;padding:env(safe-area-inset-top) 1rem 0}
.top::before{content:"";position:absolute;inset:0 0 -.875rem;z-index:-1;background:rgba(247,239,251,.78);backdrop-filter:blur(1rem);-webkit-backdrop-filter:blur(1rem);-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent);opacity:0;transition:opacity .2s}
.top.solid::before{opacity:1}
.top .sp{flex:1}
.ib{width:2.5rem;height:2.5rem;border-radius:50%;display:grid;place-items:center;color:var(--ink);flex:none}
.ib.glass{background:var(--card);border:1px solid #fff;box-shadow:var(--shadow)}
.ib.on{background:var(--tint);color:var(--mag)}
.logo{display:block;height:3.375rem}.logo img{height:100%;display:block}
.logo.big{height:4.375rem;margin-top:.625rem}
.pill{display:flex;align-items:center;gap:.375rem;height:2.375rem;padding:0 .875rem;border-radius:1.1875rem;background:var(--card);border:1px solid #fff;box-shadow:var(--shadow);color:var(--mag);font-weight:500;font-size:.875rem}
.pill.on{background:var(--tint)}
.pill svg{width:1rem;height:1rem;fill:var(--mag);stroke:none}
main{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding-top:var(--topH)}
main.fixed{overflow:hidden}
.screen{max-width:35rem;margin:0 auto;padding:.25rem 1.125rem 1.75rem}
.tabs{grid-area:tabs;display:flex;justify-content:space-around;padding:.5rem .5rem calc(.5rem + env(safe-area-inset-bottom));background:rgba(255,255,255,.6);backdrop-filter:blur(1.125rem);-webkit-backdrop-filter:blur(1.125rem);border-top:1px solid #fff}
.tabs .brand,.tabs .extra{display:none}
.tab{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:5.5rem;padding:.25rem 0;font-size:.75rem;color:var(--ink);border-radius:.875rem}
.tab[aria-current="page"]{color:var(--mag)}
.tab[aria-current="page"] svg{fill:var(--mag);stroke:var(--mag)}

/* ---------- type ---------- */
h1{font-size:1.875rem;font-weight:500;letter-spacing:-.01em;margin:.375rem 0 2px}
h2{font-size:1rem;font-weight:500;margin:0}
.sub{color:var(--mute);font-size:.9375rem;margin:0}
.mute{color:var(--mute)} .small{font-size:.8125rem} .b5{font-weight:500}

/* ---------- parts ---------- */
.card{background:var(--card);border:1px solid #fff;border-radius:var(--r);box-shadow:var(--shadow);backdrop-filter:blur(.875rem);-webkit-backdrop-filter:blur(.875rem)}
.pad{padding:1rem}
.stack>*+*{margin-top:.875rem}
.btn{width:100%;height:3.625rem;padding:0 1.375rem;border-radius:1.8125rem;background:var(--grad);color:#fff;font-size:1.1875rem;display:flex;align-items:center;justify-content:center;gap:.625rem;box-shadow:inset 0 1.5px 0 rgba(255,255,255,.75),inset 0 -.375rem .875rem rgba(255,255,255,.18),0 .75rem 1.625rem rgba(226,110,215,.35);transition:transform .12s}
.btn:active{transform:scale(.985)}
.btn.ghost{background:linear-gradient(100deg,#fbd3f1,#f3c9f5);color:var(--mag);box-shadow:inset 0 1.5px 0 #fff,0 .5rem 1.25rem rgba(226,110,215,.18)}
.btn.sm{height:3rem;font-size:1rem}
.btn[disabled]{opacity:.6;cursor:default}
.btn .end{margin-left:auto}
.seg{display:flex;padding:.1875rem;border-radius:1rem;background:rgba(255,255,255,.6);border:1px solid #fff;box-shadow:var(--shadow)}
.seg button{flex:1;height:2.375rem;border-radius:.8125rem;font-size:.875rem;color:var(--mute);text-align:center}
.seg button[aria-selected="true"]{background:var(--tint);color:var(--mag);box-shadow:inset 0 1px 0 #fff}
.row{display:flex;align-items:center;gap:.75rem;width:100%;padding:.875rem 1rem}
.row .g{flex:1;min-width:0}
.rows .row+.row{border-top:1px solid var(--line)}
.chev{width:1.125rem!important;height:1.125rem!important;color:var(--ink);transition:transform .18s}
[aria-expanded="true"]>.chev{transform:rotate(90deg)}
.ava{width:3rem;height:3rem;border-radius:50%;flex:none;display:block;overflow:hidden;background:#f9d7f3;box-shadow:0 0 0 1.5px #fff,0 .25rem .75rem rgba(210,120,220,.28)}
.ava img{width:100%;height:100%;object-fit:cover;display:block}
.ava.s{width:2.25rem;height:2.25rem}.ava.l{width:4.5rem;height:4.5rem}
.ava.h1 img{filter:hue-rotate(-28deg)}.ava.h2 img{filter:hue-rotate(34deg)}.ava.h3 img{filter:hue-rotate(70deg) saturate(.9)}
.over{display:flex}.over .ava{margin-left:-.75rem}.over .ava:first-child{margin-left:0}
.field{display:flex;align-items:center;gap:.5rem;height:3.25rem;padding:0 .375rem 0 1rem;border-radius:1rem;background:rgba(255,255,255,.85);border:1px solid #fff;box-shadow:var(--shadow)}
.field span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
label.lb{display:block;font-size:.8125rem;color:var(--mute);margin:.875rem 2px .375rem}
select,input.txt{width:100%;height:3rem;border-radius:.875rem;border:1px solid #fff;background-color:rgba(255,255,255,.85);padding:0 .875rem;box-shadow:var(--shadow);outline:0}
select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%232b1a66' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.5rem;appearance:none;-webkit-appearance:none}
.badge{display:inline-flex;align-items:center;gap:.375rem;font-size:.78125rem;padding:.3125rem .625rem;border-radius:.625rem;background:#e2f7ee;color:var(--ok)}
.badge.wait{background:#f6e6fb;color:#9a5fc0}
.badge i,.dot{display:inline-block;width:.5rem;height:.5rem;border-radius:50%;background:#34c48b}
.badge.wait i{background:#c08be0}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.tile{padding:.875rem .625rem;text-align:center;display:flex;flex-direction:column;align-items:center;gap:.25rem}
.tile .plus{width:2.25rem;height:2.25rem;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--mag);box-shadow:var(--shadow);margin-bottom:2px}
.tile small{color:var(--mute);font-size:.75rem}
.reveal{animation:pop .2s ease-out}
@keyframes pop{from{opacity:0;transform:translateY(-.375rem)}}

/* home */
.hero{position:relative;height:min(54vh,29.375rem);min-height:20rem;margin:calc(-1*var(--topH)) -1.125rem -.375rem}
.hero .art{position:absolute;inset:0;background-size:cover;background-position:center 40%;-webkit-mask-image:linear-gradient(#000 78%,transparent);mask-image:linear-gradient(#000 78%,transparent)}
.hero p{position:absolute;left:1.5rem;bottom:1.375rem;margin:0;color:var(--mute);font-size:.90625rem;line-height:1.3;width:4.625rem}

/* ai */
.ai{height:100%;display:flex;flex-direction:column;max-width:45rem;margin:0 auto;padding:0 1.125rem}
.aihead{display:flex;gap:.75rem;align-items:center;padding:2px 0 .75rem}
.aihead h1{font-size:1.375rem;margin:0}
.msgs,.imgpane{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior-x:none;padding:.875rem 2px .75rem}
.msgs{display:flex;flex-direction:column;gap:.75rem}
.m{display:flex;gap:.5rem;align-items:flex-end;max-width:88%}
.m .b{padding:.75rem .875rem;border-radius:1.125rem;background:rgba(255,255,255,.85);border:1px solid #fff;box-shadow:var(--shadow);white-space:pre-wrap;overflow-wrap:anywhere;font-size:.9375rem}
.m.u{align-self:flex-end}
.m.u .b{background:linear-gradient(100deg,#f3d4f7,#ddd0fb)}
.sugs{display:flex;flex-wrap:wrap;gap:.5rem;padding-left:2.75rem}
.sug{padding:.5625rem .875rem;border-radius:1rem;background:rgba(255,255,255,.8);border:1px solid #fff;box-shadow:var(--shadow);font-size:.875rem;color:var(--mag)}
.composer{display:flex;gap:.625rem;align-items:center;padding:.375rem 0 .75rem}
.composer .in{flex:1;display:flex;align-items:center;height:3.25rem;border-radius:1.625rem;padding:0 .375rem 0 1.125rem;background:rgba(255,255,255,.9);border:1px solid #fff;box-shadow:var(--shadow)}
/* Fields stay at 1rem or more: iOS Safari zooms the whole page into any field
   under 1rem on focus and leaves it zoomed, so the AI screen pans sideways. */
.composer input{flex:1;min-width:0;border:0;outline:0;background:none;font-size:1rem}
input::placeholder,textarea::placeholder{color:var(--soft)}
.send{width:2.5rem;height:2.5rem;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.7);flex:none}
textarea{width:100%;min-height:6rem;resize:none;border:0;outline:0;background:none;font-size:1rem;line-height:1.4;display:block}
.ratios{display:grid;grid-template-columns:repeat(3,1fr);gap:.625rem}
.ratio{height:3.875rem;border-radius:1rem;background:rgba(255,255,255,.7);border:1px solid #fff;box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;font-size:.75rem;color:var(--mute)}
.ratio[aria-pressed="true"]{background:var(--tint);color:var(--mag)}
.ratio i{display:block;border:1.7px solid currentColor;border-radius:.25rem}
.recent{display:flex;gap:.625rem;overflow-x:auto;padding-bottom:.375rem}
.recent button{flex:none;border-radius:.875rem;overflow:hidden;box-shadow:var(--shadow)}
.recent img{height:8.75rem;display:block}
.result img{width:100%;display:block;border-radius:1rem}

/* community */
.me{display:flex;gap:.875rem;align-items:center}
.me .rank{font-size:1.375rem;font-weight:600;line-height:1.1}
.trio{display:grid;grid-template-columns:repeat(3,1fr)}
.trio>*{text-align:center;padding:.875rem .25rem}
.trio>*+*{border-left:1px solid var(--line)}
.trio b{display:block;font-size:1.25rem;font-weight:500}
.trio span{font-size:.78125rem;color:var(--mute)}
.acts{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.act{height:4.125rem;border-radius:1rem;background:rgba(255,255,255,.85);border:1px solid #fff;box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;font-size:.78125rem;color:var(--mag);text-align:center}
.act[aria-pressed="true"]{background:var(--tint)}
.qrwrap{display:flex;justify-content:center}
.qr{padding:.75rem;border-radius:1.125rem;background:#fff;box-shadow:var(--shadow)}
/* network.js draws the code as a viewBox-only SVG: without a size here it
   collapses to 0x0 and the card shows an empty white square. The SVG carries
   its own 4-module quiet zone, so it is drawn a little larger than the old img. */
.qr img,.qr canvas{display:block;width:10.5rem;height:10.5rem}
.qr svg{display:block;width:11.5rem;height:11.5rem}
/* Short screens (a phone on its side): shrink the code to fit between the top
   bar and the tab bar, never under 7.5rem so it still scans. The scroll
   margins make "centre it" mean the space between those bars. */
.qr svg{width:clamp(7.5rem,100vh - 12.5rem,11.5rem);height:clamp(7.5rem,100vh - 12.5rem,11.5rem);
  width:clamp(7.5rem,100svh - 12.5rem,11.5rem);height:clamp(7.5rem,100svh - 12.5rem,11.5rem)}
.qrwrap{scroll-margin-top:var(--topH);scroll-margin-bottom:6.25rem}
.lb-row{display:flex;align-items:center;gap:.75rem;padding:.625rem 1rem}
.lb-row+.lb-row{border-top:1px solid var(--line)}
.lb-row .n{min-width:1.625rem;color:var(--mute);font-size:.875rem}
.lb-row .g{flex:1;font-weight:500}
.lb-row .p{font-variant-numeric:tabular-nums;font-size:.875rem}
.lb-row.you{background:linear-gradient(100deg,#f8c4ee,#e3c9fa);border-radius:1.125rem;color:var(--mag);border:0;box-shadow:0 .625rem 1.5rem rgba(226,110,215,.28)}
.lb-row.you .n{color:var(--mag)}
.sticky{position:sticky;bottom:.625rem}
.info{display:flex;gap:.75rem;align-items:center;padding:.625rem 1rem}
.info .b5{display:block}

/* balance */
.bal{text-align:center;padding:2px 0 .375rem}
.bal h1{font-size:1.625rem}
.bal .num{font-size:4.75rem;font-weight:600;line-height:1;background:linear-gradient(180deg,#e436c4,#9c4fe0);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.faq p{margin:0;padding:0 1rem 1rem 3.125rem;color:var(--mute);font-size:.90625rem;line-height:1.5}

/* devices */
.dev{display:flex;gap:1rem;align-items:center;padding:1rem}
.lap{width:7rem;flex:none}
.lap .scr{aspect-ratio:16/10.5;border:.25rem solid #d4cde2;border-bottom-width:.3125rem;border-radius:.5625rem .5625rem .1875rem .1875rem;background-size:cover;background-position:center}
.lap .base{height:.4375rem;margin:0 -.5625rem;border-radius:2px 2px .625rem .625rem;background:linear-gradient(#e2dcee,#bfb6d3)}
.specs{display:flex;flex-wrap:wrap;gap:.25rem 1.125rem;padding:.75rem 1rem;border-top:1px solid var(--line);color:var(--mute);font-size:.8125rem;align-items:center}
.dashed{width:100%;height:3.625rem;border-radius:1.125rem;border:1.5px dashed rgba(178,58,166,.32);background:rgba(255,255,255,.5);color:var(--mag);display:flex;align-items:center;justify-content:center;gap:.625rem}
.note{display:flex;gap:.625rem;color:var(--mute);font-size:.8125rem;padding:0 .375rem}
.empty{padding:1.625rem 1.125rem;text-align:center;color:var(--mute);font-size:.90625rem}
/* leaderboard: rows reuse .lb-row; your own row keeps the design's pink pill.
   New sizes are rem so they follow the phone scale (#270) once it lands. */
.card.lb{padding:.375rem}
.card.lb .lb-row{border-radius:1rem}
.lb-row .ini{width:2rem;height:2rem;font-size:.75rem}
.lb-row .g{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-row .p small{font-size:.6875rem;color:var(--mute);font-weight:500;margin-left:2px}
.lb-row.you .p small{color:inherit;opacity:.8}
.lb-gap{text-align:center;color:var(--soft);letter-spacing:.2em;padding:2px 0 .25rem}
.lbnote{margin:0;padding:0 .375rem}
.lbnote a{color:var(--mag);font-weight:600}

/* overlays */
.toast{position:fixed;left:50%;bottom:calc(6rem + env(safe-area-inset-bottom));transform:translate(-50%,1.25rem);background:var(--ink);color:#fff;padding:.625rem 1.125rem;border-radius:1.25rem;font-size:.875rem;opacity:0;pointer-events:none;transition:.25s;z-index:50;white-space:nowrap}
.toast.on{opacity:1;transform:translate(-50%,0)}
.scrim{position:fixed;inset:0;background:rgba(60,30,110,.25);backdrop-filter:blur(.1875rem);-webkit-backdrop-filter:blur(.1875rem);z-index:40;display:flex;align-items:flex-end;justify-content:center}
.sheet{width:100%;max-width:35rem;max-height:88dvh;overflow-y:auto;background:#fdf8ff;border-radius:1.625rem 1.625rem 0 0;padding:.625rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom));box-shadow:0 -.625rem 2.5rem rgba(120,60,180,.2);animation:up .22s ease-out}
.sheet::before{content:"";display:block;width:2.5rem;height:.25rem;border-radius:2px;background:var(--line);margin:0 auto .875rem}
.sheet h3{margin:0 0 .625rem;font-size:1.25rem;font-weight:500}
.sheet p{color:var(--mute);line-height:1.5;margin:0 0 .75rem}
.sheet .opt{display:flex;align-items:center;gap:.75rem;width:100%;padding:.9375rem .25rem;border-top:1px solid var(--line)}
.sheet h3+.opt{border-top:0}
.sheet .btn{margin-top:.875rem}
.sheet img.full{width:100%;border-radius:1rem;display:block}
.sw{margin-left:auto;width:2.875rem;height:1.75rem;border-radius:.875rem;background:#e4daf0;position:relative;transition:.2s;flex:none}
.sw::after{content:"";position:absolute;top:.1875rem;left:.1875rem;width:1.375rem;height:1.375rem;border-radius:50%;background:#fff;box-shadow:0 2px .3125rem rgba(0,0,0,.15);transition:.2s}
.sw[aria-checked="true"]{background:var(--pink)}
.sw[aria-checked="true"]::after{left:1.3125rem}
@keyframes up{from{transform:translateY(1.875rem);opacity:0}}
.out{height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.125rem;padding:1.5rem;text-align:center}
.out .logo{height:7.5rem}.out .btn{max-width:20rem}


/* ================= v4: look matched to the live build ================= */
h1{font-family:var(--head);font-weight:800;letter-spacing:-.02em;font-size:1.875rem}
h2{font-family:var(--head);font-weight:800;letter-spacing:-.02em;font-size:1.4375rem}
.b5,.me .rank,.trio b,.bal .num,.sheet h3,.lb-row .g{font-family:var(--head);font-weight:700}
.b5{font-weight:700}
.btn{font-family:var(--head);font-weight:700;font-size:1.0625rem;box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 .75rem 1.625rem rgba(170,100,215,.32)}
.btn.ghost{background:linear-gradient(95deg,#f7dcee,#ebdcf8);color:#a5379f;box-shadow:inset 0 1px 0 #fff,0 .5rem 1.25rem rgba(170,100,215,.14)}
.pill{color:var(--ink);font-family:var(--head);font-weight:700;height:2.625rem;padding:0 1rem;border-radius:1.3125rem;font-size:.9375rem}
.pill svg{fill:var(--ink)}
.pill.on,.ib.on{background:#f6dff0;color:var(--ink)}
.ib.glass{width:2.625rem;height:2.625rem}
.seg{border-radius:1.25rem;padding:.25rem}.seg button{border-radius:1rem;height:2.5rem;font-weight:500}
.seg button[aria-selected="true"]{background:linear-gradient(180deg,#f7d9ec,#f8ecf9);color:#b23aa6;font-weight:600}
.screen{padding-bottom:8rem}
.seeall{color:var(--mute);font-weight:600;font-size:.9375rem}
.sec{display:flex;align-items:baseline;justify-content:space-between;margin-top:1.375rem}

/* keep long rows from widening the page */
.app{grid-template-columns:minmax(0,1fr)}
.col,main{min-width:0}
.modes{grid-template-columns:repeat(4,minmax(0,1fr))}
.duo{grid-template-columns:repeat(2,minmax(0,1fr))}

/* floating tab bar */
.tabs{position:fixed;left:.75rem;right:.75rem;bottom:calc(.625rem + env(safe-area-inset-bottom));z-index:6;padding:.5rem;gap:.375rem;border-radius:2.25rem;border:1px solid #fff;background:rgba(255,255,255,.84);box-shadow:0 1rem 2.5rem rgba(140,90,200,.22)}
.tab{flex:1;min-width:0;height:3.875rem;justify-content:center;gap:.25rem;border-radius:1.625rem;font-size:.8125rem;font-weight:500;color:#7d70a8}
.tab svg{width:1.5625rem;height:1.5625rem}
.tab[aria-current="page"]{background:linear-gradient(180deg,#f7d7ea,#f9eefa);color:#b23aa6;font-family:var(--head);font-weight:700}
.tab[aria-current="page"] svg{fill:none;stroke:currentColor}
.toast{bottom:calc(6.5rem + env(safe-area-inset-bottom))}

/* initials */
.ini{width:2.25rem;height:2.25rem;border-radius:50%;display:grid;place-items:center;flex:none;color:#fff;font-family:var(--head);font-weight:700;font-size:.8125rem;box-shadow:0 0 0 .15625rem #fff}
.ini.m{width:2.75rem;height:2.75rem;font-size:.9375rem}
.ini.plus{background:#fff;color:#a5379f;font-size:1.375rem;font-weight:600}
.over .ini{margin-left:-.625rem}.over .ini:first-child{margin-left:0}

/* home */
.hero{height:min(56vh,32.5rem);min-height:21.25rem;margin:calc(-1*var(--topH)) -1.125rem 0}
.screen.home{padding-top:0}
.hero .art{-webkit-mask-image:linear-gradient(#000 82%,transparent);mask-image:linear-gradient(#000 82%,transparent);background-position:center 45%}
.dome{position:absolute;inset:3% 7% 4%;border:1.5px solid rgba(255,255,255,.8);border-radius:46% 46% 20% 20% / 36% 36% 14% 14%;box-shadow:inset 0 0 3.125rem rgba(255,255,255,.22),0 0 1.875rem rgba(255,255,255,.25);pointer-events:none}
.dome::after{content:"";position:absolute;left:7%;right:7%;bottom:1.5%;height:14%;border-radius:50%;border:1.5px solid rgba(255,255,255,.8);background:rgba(255,255,255,.18)}
.cta{position:relative;display:flex;align-items:center;gap:.75rem;width:100%;margin-top:-1.375rem;padding:1rem 1.25rem 1rem 1.75rem;border-radius:2.125rem;background:var(--grad);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 .875rem 1.875rem rgba(160,100,215,.35);transition:transform .12s}
.cta:active{transform:scale(.985)}
.cta .g{flex:1}
.cta b{display:block;font-family:var(--head);font-weight:800;font-size:1.4375rem;letter-spacing:-.01em;line-height:1.15}
.cta small{font-size:.875rem;opacity:.92;font-weight:500}
.circ{width:3rem;height:3rem;border-radius:50%;border:1.5px solid rgba(255,255,255,.85);display:grid;place-items:center;flex:none}
.circ .chev{color:#fff}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;align-items:stretch}
.hc{display:flex;flex-direction:column;align-items:stretch;padding:1.125rem 1rem 1rem;min-width:0}
.hc .hh{display:flex;align-items:flex-start;gap:.375rem}
.hc .hh b{flex:1;font-family:var(--head);font-weight:800;font-size:1.125rem;letter-spacing:-.01em;line-height:1.2}
.hc .hh .chev{color:#6f5fa8;margin-top:.1875rem}
.hc .mute{font-size:.9375rem;margin-top:2px}
.hc .over{margin-top:auto;padding-top:1rem}
.hc .inner{margin-top:auto;display:flex;align-items:center;gap:.625rem;padding:.75rem;border-radius:1.125rem;background:rgba(236,230,248,.7)}
.hc .over+*,.hc .mute+.inner{margin-top:1rem}
.hc .inner b{display:block;font-family:var(--head);font-weight:700;font-size:.84375rem;line-height:1.25}
.hc .inner svg{width:1.875rem;height:1.875rem;color:#5c4d95}
.badge.amber{background:#f7ecd9;color:#8a6420;font-weight:600;margin-top:.25rem;padding:.1875rem .5625rem}
.badge.soon{background:#efe7fa;color:#7a63b8;font-weight:600;padding:2px .5rem;font-size:.6875rem}

/* AI hub */
.banner{height:12.5rem;margin:0 -1.125rem -2.125rem;background-size:cover;background-position:center 58%;-webkit-mask-image:linear-gradient(transparent,#000 18%,#000 70%,transparent);mask-image:linear-gradient(transparent,#000 18%,#000 70%,transparent)}
.ask{position:relative;padding:.875rem .875rem .875rem 1.375rem}
.ask .line{display:flex;align-items:center;gap:.625rem}
.ask input[type=text]{flex:1;min-width:0;height:3.625rem;border:0;outline:0;background:none;font-size:1.1875rem;font-weight:500}
.send{width:3.375rem;height:3.375rem;background:linear-gradient(135deg,#d97fce,#8f86e8);box-shadow:0 .5rem 1.125rem rgba(160,100,215,.35)}
.send svg{width:1.5rem;height:1.5rem}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.375rem}
.chip{display:inline-flex;align-items:center;gap:.5rem;height:2.625rem;padding:0 1rem;border-radius:1.3125rem;background:rgba(255,255,255,.75);border:1px solid #fff;color:#7d70a8;font-weight:500;font-size:1rem;cursor:pointer;max-width:100%}
.chip svg{width:1.125rem;height:1.125rem}
.chip[aria-pressed="true"]{background:linear-gradient(180deg,#f7d9ec,#f8ecf9);color:#b23aa6}
.chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.modes{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}
.mode{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:1rem .25rem .875rem;text-align:center;min-width:0}
.mode svg{width:1.875rem;height:1.875rem;color:#a44bb4;margin-bottom:.375rem}
.mode b{font-family:var(--head);font-weight:700;font-size:.90625rem}
.mode small{font-size:.6875rem;color:var(--mute);line-height:1.2}
.mode[aria-pressed="true"]{background:linear-gradient(180deg,#f8dcef,#fbf1fb)}
.mode .badge{position:absolute;top:.4375rem;right:.4375rem}
.mode{padding-top:1.625rem}
.hs{display:flex;gap:.625rem;overflow-x:auto;margin:.75rem -1.125rem 0;padding:2px 1.125rem .375rem;scrollbar-width:none}
.hs::-webkit-scrollbar{display:none}
.hs.wrap{flex-wrap:wrap;overflow:visible;margin-left:0;margin-right:0;padding-left:0;padding-right:0}
.sg{flex:none;height:2.875rem;padding:0 1.125rem;border-radius:1.4375rem;background:rgba(255,255,255,.75);border:1px solid #fff;box-shadow:var(--shadow);color:#6a5ca0;font-weight:500;font-size:.96875rem}
.rc{display:flex;align-items:center;gap:.875rem;width:100%;padding:.75rem 1rem .75rem .75rem;margin-top:.625rem}
.rc img,.rc .th{width:3.625rem;height:3.625rem;border-radius:1rem;object-fit:cover;flex:none;display:block}
.rc .g{flex:1;min-width:0}
.rc b{display:block;font-family:var(--head);font-weight:700;font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc small{color:var(--mute);font-size:.84375rem}

/* conversation */
.ai{padding-bottom:calc(5.75rem + env(safe-area-inset-bottom))}
.aihead h1{font-size:1.1875rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aihead>div{min-width:0}
.m .b img{display:block;max-width:100%;border-radius:.75rem}
.m .file{display:block;font-size:.78125rem;opacity:.75;margin-bottom:.25rem}
.composer{align-items:flex-end}
.composer .in{height:3.5rem;border-radius:1.75rem}
.composer .send{width:2.75rem;height:2.75rem}

/* ================= v5: completeness ================= */
.out h1{margin:0}.out .sub{max-width:20rem}.out form{width:100%;max-width:21.25rem}
.out .plus50,.sheet .plus50{font-family:var(--head);font-weight:800;font-size:4rem;line-height:1;background:linear-gradient(180deg,#e436c4,#8d55e0);-webkit-background-clip:text;background-clip:text;color:transparent}
.lnk{color:var(--mute);font-size:.90625rem;padding:.5rem;text-align:center;display:block;margin:0 auto}
.lnk.danger{color:#c2185b}
.meter{display:flex;align-items:center;gap:.625rem;width:100%;padding:.75rem .375rem 0;font-size:.8125rem;color:var(--mute)}
.meter .bar{flex:none;width:4rem;height:.375rem;border-radius:.1875rem;background:#e9def3;overflow:hidden}
.meter .bar i{display:block;height:100%;border-radius:.1875rem;background:var(--grad)}
.track{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:1rem .5rem .375rem;border-top:1px solid var(--line)}
.track span{position:relative;text-align:center;font-size:.6875rem;line-height:1.2;color:var(--soft);padding-top:1.125rem}
.track span::before{content:"";position:absolute;top:0;left:50%;width:.625rem;height:.625rem;margin-left:-.3125rem;border-radius:50%;background:#e4daf0;z-index:1}
.track span::after{content:"";position:absolute;top:.25rem;left:-50%;width:100%;height:2px;background:#e4daf0}
.track span:first-child::after{display:none}
.track span.on{color:var(--ink);font-weight:600}
.track span.on::before{background:#c25fcf;box-shadow:0 0 0 .25rem rgba(194,95,207,.18)}
.track span.on::after{background:#c25fcf}
.next{font-size:.84375rem;color:var(--mute);line-height:1.5;padding:0 1rem .875rem;margin:0}
.nextb{display:flex;align-items:center;gap:.375rem;width:100%;padding:.625rem 1rem .75rem;font-size:.84375rem;color:#a5379f;font-weight:600}
.dotn{position:absolute;top:.375rem;right:.375rem;width:.5625rem;height:.5625rem;border-radius:50%;background:#d35fb0;box-shadow:0 0 0 2px #fff}
.ib{position:relative}
.note-row{display:flex;gap:.75rem;align-items:center;padding:.75rem .25rem;border-top:1px solid var(--line)}
.sheet h3+.note-row{border-top:0}
.note-row .g{flex:1}
.bw{display:flex;flex-direction:column;align-items:flex-start;gap:.25rem;min-width:0}
.cp{font-size:.75rem;color:var(--mute);padding:2px .5rem;font-weight:500}
.sheet h4{font-family:var(--head);font-weight:700;font-size:.875rem;margin:1.125rem 0 0;color:var(--mute)}

/* ================= v6: invite on Home, models, community soon ================= */
.inv{padding:1.125rem 1rem 1rem}
.inv .hh{display:flex;align-items:center;gap:.5rem;margin-bottom:.75rem}
.inv .hh b{flex:1;font-family:var(--head);font-weight:800;font-size:1.125rem;letter-spacing:-.01em}
.inv .field{box-shadow:none;background:rgba(236,230,248,.6);margin-bottom:.625rem}
.badge.plus{background:#f7dcee;color:#a5379f;font-weight:600}
._x,.mrow i{flex:none;width:.5rem;height:.5rem;border-radius:50%;background:#e0489f}
.mrow{display:flex;align-items:center;gap:.75rem;width:100%;padding:.9375rem .25rem;border-top:1px solid var(--line);min-height:3.25rem}
.sheet h3+.mrow,.sheet p+.mrow{border-top:0}
.mrow .g{flex:1;font-weight:500}
.mrow small{display:block;color:var(--mute);font-weight:400;font-size:.8125rem}
.mrow[disabled]{opacity:.5;cursor:default}.mrow[disabled] i{background:#c9bfdc}
.mrow .ck{color:#a5379f}
.soonc{position:relative;text-align:left}
.soonc .badge{position:absolute;top:.875rem;right:.875rem}
.soonc svg{width:1.75rem;height:1.75rem;color:#a44bb4;margin-bottom:.5rem}

/* ================= v8: model pills as on feya-ai.com; invisible hit areas ================= */
.models{display:flex;gap:.5rem;overflow-x:auto;scrollbar-width:none;padding:2px 0 .5rem}
.models::-webkit-scrollbar{display:none}
.ask .models{margin:0 -.875rem 0 -1.375rem;padding-left:1.375rem;padding-right:.875rem}
.composer .models{margin:0 -1.125rem;padding-left:1.125rem;padding-right:1.125rem}
.mp{flex:none;display:inline-flex;align-items:center;gap:.5rem;height:2.375rem;padding:0 .875rem;border-radius:1.1875rem;background:rgba(255,255,255,.75);border:1.5px solid #fff;font-size:.875rem;font-weight:500;color:#6a5ca0;white-space:nowrap}
.mp i{width:.5rem;height:.5rem;border-radius:50%;background:#e0489f}
.mp[aria-pressed="true"]{border-color:#b23aa6;color:var(--ink);background:#fff}
.mp[disabled]{opacity:.5;cursor:default}.mp[disabled] i{background:#c9bfdc}
.seeall,.cp,.meter,.lnk,.nextb,.chip button,.mp{position:relative}
.ib::after,.seeall::after,.cp::after,.meter::after,.chip button::after,.mp::after{content:"";position:absolute;inset:-.5rem -.25rem}
.cp::after,.seeall::after{inset:-.75rem -.375rem}
button.opt .sw{pointer-events:none}
button.opt[aria-checked="true"] .sw{background:var(--pink)}
button.opt[aria-checked="true"] .sw::after{left:1.3125rem}
.sheet:focus{outline:0}

/* ---------- desktop ---------- */
@media (min-width:900px){
  :root{--topH:4.75rem}
  .app{grid-template-columns:15rem 1fr;grid-template-rows:1fr;grid-template-areas:"tabs col"}
  .tabs{flex-direction:column;justify-content:flex-start;gap:.25rem;padding:1.25rem .875rem;border-top:0;border-right:1px solid #fff}
  .tabs .brand{display:block;padding:0 .5rem 1.125rem}
  .tabs .extra{display:flex;flex-direction:column;gap:.25rem;margin-top:auto;padding-top:.875rem;border-top:1px solid var(--line)}
  .tab{flex-direction:row;gap:.75rem;font-size:.9375rem;padding:.75rem .875rem;min-width:0;width:100%}
  .tab[aria-current="page"]{background:var(--tint)}
  .top{padding:0 1.75rem}
  .top .logo{display:none}
  .screen{padding:.25rem 1.75rem 2.5rem}
  .screen.home{max-width:62.5rem;display:grid;grid-template-columns:1.15fr 1fr;gap:2.5rem;align-items:center;min-height:100%;padding-top:0}
  .hero{margin:0;height:33.75rem}
  .hero .art{-webkit-mask-image:radial-gradient(closest-side,#000 58%,transparent 100%);mask-image:radial-gradient(closest-side,#000 58%,transparent 100%)}
  .sheet{border-radius:1.625rem;margin-bottom:0}
  .scrim{align-items:center}
  .toast{bottom:2.5rem}
}
@media (min-width:900px){
  .app{grid-template-columns:15rem minmax(0,1fr)}
  .tabs{position:static;border-radius:0;box-shadow:none;border:0;border-right:1px solid #fff;padding:1.25rem .875rem;gap:.25rem;background:rgba(255,255,255,.6)}
  .tab{flex:none;height:auto;justify-content:flex-start;border-radius:1rem;font-size:.9375rem}
  .tab svg{width:1.375rem;height:1.375rem}
  .screen{padding-bottom:3rem}
  .ai{padding-bottom:0}
  .hero{margin:0;height:35rem}
  .hero .art{-webkit-mask-image:radial-gradient(closest-side,#000 60%,transparent 100%);mask-image:radial-gradient(closest-side,#000 60%,transparent 100%)}
  .dome{inset:8% 14% 8%}
  .cta{margin-top:0}
  .banner{margin:0 0 -2.125rem;border-radius:1.75rem}
  .hs{margin-left:0;margin-right:0;padding-left:0;padding-right:0}
  .toast{bottom:2.5rem}
}
/* ================= v9: motion + real desktop layout (mobile look unchanged) ================= */
/* --- motion --- */
@keyframes inPush{from{opacity:0;transform:translateX(1.625rem)}}
@keyframes inPop{from{opacity:0;transform:translateX(-1.625rem)}}
@keyframes inTab{from{opacity:0;transform:translateY(.625rem)}}
@keyframes fade{from{opacity:0}}
@keyframes popIn{from{opacity:0;transform:translateY(.625rem) scale(.97)}}
@keyframes flash{0%,60%{box-shadow:0 0 0 .1875rem rgba(178,58,166,.32),var(--shadow)}}
.in-push{animation:inPush .28s cubic-bezier(.2,.8,.2,1)}
.in-pop{animation:inPop .28s cubic-bezier(.2,.8,.2,1)}
.in-tab{animation:inTab .24s cubic-bezier(.2,.8,.2,1)}
.fadein{animation:fade .22s ease-out}
.m.pop{animation:popIn .26s cubic-bezier(.2,.8,.2,1)}
.scrim{animation:fade .2s ease-out}
.scrim.closing{opacity:0;transition:opacity .16s ease-in;pointer-events:none}
.scrim.closing .sheet{transform:translateY(1.5rem);transition:transform .16s ease-in}
.top .back{transition:width .22s ease,opacity .18s ease,margin .22s ease;overflow:hidden}
.top .back.gone{width:0;opacity:0;margin-right:-.5rem;pointer-events:none}
.logo{transition:height .26s cubic-bezier(.2,.8,.2,1),margin .26s}
.pill,.ib.glass,.tab,.chip,.mp,.sg,.seg button,.mode,.ratio,.act{transition:background-color .18s,color .18s,border-color .18s,box-shadow .18s,transform .12s}
button.card,.rc,.hc,.tile,.soonc{transition:transform .16s ease,box-shadow .18s ease}
button.card:active,.sg:active,.mp:active,.chip:active,.act:active{transform:scale(.98)}
.tabs .ind{position:absolute;left:.5rem;top:.5rem;bottom:.5rem;width:calc((100% - 1.75rem)/3);border-radius:1.625rem;background:linear-gradient(180deg,#f7d7ea,#f9eefa);transform:translateX(calc(var(--i,0)*(100% + .375rem)));transition:transform .32s cubic-bezier(.3,.85,.25,1),opacity .2s;pointer-events:none}
.tabs .ind.off{opacity:0}
.tab{position:relative;z-index:1}
.tab[aria-current="page"]{background:none}
@media (hover:hover){
  button.card:hover,.rc:hover{transform:translateY(-2px);box-shadow:0 1rem 2.25rem rgba(170,110,215,.2)}
  .rows .row:hover,.sheet .opt:hover,.mrow:not([disabled]):hover{background:rgba(255,255,255,.55)}
  .sg:hover,.chip:hover,.mp:not([disabled]):hover,.act:hover{background:#fff}
  .tab:hover{color:#a02f96}
  .pill:hover,.ib.glass:hover{box-shadow:0 .75rem 1.875rem rgba(170,110,215,.24)}
  .btn:hover,.cta:hover{filter:brightness(1.04)}
}
/* --- panes: one screen, several sections --- */
.pane:not(.active){display:none}
.w-only{display:none}
.segwrap{margin:.875rem 0}
.acts:not(.open),.circ-list:not(.open){display:none}
.circ-list{padding:0 1rem .875rem}
.nethead .sub,.bal{margin-bottom:0}
/* --- desktop --- */
@media (min-width:900px){
  .tabs .ind{display:none}
  .tab[aria-current="page"]{background:var(--tint)}
  .tab.sub[aria-current="page"]{background:none;color:#6f6398;font-family:var(--font);font-weight:500}
  .top .back.railed{width:0;opacity:0;margin-right:-.5rem;pointer-events:none}
  .sheet::before{display:none}
  .sheet{padding-top:1.5rem;animation:popIn .22s cubic-bezier(.2,.8,.2,1)}
  .scrim.closing .sheet{transform:scale(.98)}
}
@media (min-width:1100px){
  .screen.wide{max-width:62.5rem}
  .m-only{display:none!important}
  .w-only{display:block}
  .pane,.pane:not(.active){display:block}
  .acts,.acts:not(.open){display:grid}
  .circ-list,.circ-list:not(.open){display:block}
  .circ-head{pointer-events:none}.circ-head .chev{display:none}
  .net,.balg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.375rem 2rem;align-items:start}
  .nethead,.balg .bal{grid-column:1/-1}
  .net [data-pane="community"]{grid-row:span 2}
  .pane.flash>.card:first-of-type,.pane.flash>.field{animation:flash 1.4s ease-out}
  .lb-row.you.sticky{position:static}
  .hub{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:2.25rem;align-items:start}
  .hubR{position:sticky;top:0}
  .hubR .sec:first-child{margin-top:2.125rem}
  .acc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem 2rem;align-items:start}
  .acc>*{margin-top:0!important}
  .acc>.acchead{grid-column:1/-1}
  .acc>.btn{grid-column:2}
}
/* ================= v10: small-things polish ================= */
.ratio[aria-pressed="true"],.act[aria-pressed="true"]{background:linear-gradient(180deg,#f7d9ec,#f8ecf9);color:#a02f96}
/* home cards: one-line titles, tidy status box */
.hc{padding:1rem .875rem .875rem}
.hc .hh{position:relative;padding-right:1.125rem}
.hc .hh b{font-size:.96875rem;white-space:nowrap;letter-spacing:-.025em}
.hc .hh .chev{position:absolute;right:-.25rem;top:1px;margin:0}
.hc .mute{font-size:.875rem}
.hc .inner{flex-direction:column;align-items:flex-start;gap:.5rem;padding:.75rem}
.hc .inner .ir{display:flex;align-items:center;gap:.5rem;min-width:0;max-width:100%}
.hc .inner .ir b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.8125rem}
.hc .inner svg{width:1.375rem;height:1.375rem}
@media (max-width:479px){.hc .inner svg{display:none}}
.hc .inner .badge{margin:0;white-space:nowrap}
/* model pills fade out at the edge instead of being cut */
.models{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 2.5rem),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 2.5rem),transparent);padding-right:2.5rem!important}
/* chat: avatar sits at the top of the answer, Copy lines up with the bubble */
.m{align-items:flex-start}
.m .ava{margin-top:2px}
.cp{margin-left:.375rem}
/* leaderboard */
.lb-row .n{min-width:2.375rem;font-variant-numeric:tabular-nums}
.seg.sm{background:none;border:0;box-shadow:none;padding:0;gap:.5rem;justify-content:flex-start}
.seg.sm button{flex:0 0 auto;height:2.25rem;padding:0 1rem;border-radius:1.125rem;background:rgba(255,255,255,.6);border:1px solid #fff}
/* info rows: quiet icons instead of repeated fairy copies */
.ico{width:3rem;height:3rem;border-radius:50%;display:grid;place-items:center;flex:none;background:linear-gradient(135deg,#f8dff0,#eadffb);color:#9a4fb0}
/* device card */
.dev{padding:1.125rem 1.25rem}.lap{width:6.5rem;margin-left:.5rem}

/* ================= v11: lighter pages , one primary thing per block, the rest opens in place ================= */
:root{--shadow:0 .5rem 1.5rem rgba(190,120,220,.09)}
/* model bar: the model is a first-class, readable choice */
.mbar{display:flex;align-items:center;gap:.5rem;width:100%;min-height:2.75rem;padding:0 2px;border-bottom:1px solid var(--line);margin-bottom:.25rem}
.mbar .lbl{color:var(--mute);font-size:.8125rem}
.mbar>i{width:.5rem;height:.5rem;border-radius:50%;background:#d35fb0;flex:none}
.mbar b{flex:1;text-align:left;font-family:var(--head);font-weight:700;font-size:.9375rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mbar .chev,.hmodel .chev,.morebtn .chev{transform:rotate(90deg)}
.mbar[aria-expanded="true"] .chev,.hmodel[aria-expanded="true"] .chev,.morebtn[aria-expanded="true"] .chev{transform:rotate(-90deg)}
.mlist{margin:0 0 .375rem;border-bottom:1px solid var(--line)}
.mlist .mrow{padding:.75rem 2px;min-height:3rem}
.mlist .mrow:first-child{border-top:0}
.hmodel{display:inline-flex;align-items:center;gap:.375rem;min-height:1.75rem;font-size:.8125rem;color:var(--mute)}
.hmodel .chev{width:.8125rem!important;height:.8125rem!important}
.chat-models{margin:0 0 .5rem;padding:.25rem .875rem}
.chat-models .mlist{border:0;margin:0}
/* composer: one row; File and Image open from + */
.ask{padding:.625rem .75rem .5rem 1.125rem}
.ask .line{gap:.375rem}
.plusb{width:2.5rem;height:2.5rem;border-radius:50%;display:grid;place-items:center;flex:none;color:#6f6398;margin-left:-.5rem}
.plusb svg{transition:transform .2s}
.plusb[aria-expanded="true"] svg{transform:rotate(45deg)}
.composer .plusb{margin:0;background:var(--card);border:1px solid #fff;box-shadow:var(--shadow);width:3rem;height:3rem}
.composer{flex-direction:column;align-items:stretch;gap:.5rem}
.composer .rowc{display:flex;align-items:center;gap:.5rem}
.composer .rowc .in{min-width:0}
.meter{display:block;width:auto;margin-left:auto;padding:.25rem .375rem 2px;min-height:0;font-size:.75rem;color:var(--mute);text-align:right}
.banner{height:8.75rem}
@media (max-width:899px){.mode small{display:none}.mode{padding:1.5rem .25rem .75rem}.mode svg{margin-bottom:.25rem}}
/* home */
.hc .inner{background:none;padding:0;gap:.375rem}
.inv .btn{margin:0}
.morebtn{display:flex;align-items:center;justify-content:center;gap:.375rem;width:100%;min-height:2.5rem;margin-top:.25rem;font-size:.84375rem;color:var(--mute);font-weight:500}
.morebtn .chev{width:.875rem!important;height:.875rem!important}
.inv .field{margin:.375rem 0 0}
/* grouped answers */
.faqs .faq+.faq{border-top:1px solid var(--line)}
.faqs .faq p{padding-bottom:.875rem}
@media (min-width:1100px){.banner{height:10.625rem}}

/* phones: Home and AI fit the screen, no scrolling (Illya 2026-09-22).
   Home is a column where the hero takes whatever height the cards leave;
   the AI hub is tighter, and on short screens the Recent placeholder goes. */
@media (max-width:899px){
  .screen.home{display:flex;flex-direction:column;height:100%;padding-bottom:calc(6.25rem + env(safe-area-inset-bottom))}
  .screen.home .hero{flex:1 1 auto;height:auto;min-height:7.5rem}
  .screen.home>.stack{flex:none}
  .msgs .modes{margin-top:0}
  .mode{padding:1.375rem .25rem .75rem}
  .mode .badge{white-space:nowrap;font-size:.65625rem;padding:.1875rem .4375rem;top:.375rem;right:.375rem}
  .msgs .sec{margin-top:.75rem}
  .sg{height:2.5rem;padding:0 .9375rem;font-size:.9375rem}
  .hs.wrap{margin-top:.5rem;gap:.5rem}
  .card.empty.recent{padding:1.125rem 1rem}
}
@media (max-width:599px),(max-width:899px) and (max-height:760px){
  #hub .recent{display:none}
  .home .cta{padding:.75rem 1.125rem .75rem 1.5rem}
  .home .stack>*+*{margin-top:.625rem}
  .home .inv{padding:.875rem 1rem .625rem}.home .inv .hh{margin-bottom:.5rem}
  .home .hc{padding:.75rem .875rem .75rem}.home .hc .over{padding-top:.625rem}
}
@media (min-width:600px) and (max-width:899px) and (max-height:640px){
  .home .morebtn{display:none}
  #hub .sec{display:none}
  .sg{height:2.375rem}.hs.wrap{gap:.375rem}
}

/* home on desktop: the butterfly is the ground of the whole screen, behind the
   rail and the top bar, not a picture in a column (Illya 2026-09-22; the
   2026-09-08 direction: one continuous ground, the hero never trapped). */
@media (min-width:900px){
  .screen.home{position:static;max-width:none;display:flex;justify-content:flex-end;align-items:center;gap:0;min-height:100%;padding:1.5rem 3rem 2.5rem}
  /* The box runs 20vw past the left edge so the butterfly, centred in the image, lands in the space left of the cards rather than under them. */
  .screen.home .hero{position:fixed;inset:0 0 0 -20vw;z-index:0;margin:0;height:auto;min-height:0;pointer-events:none}
  .screen.home .hero .art{-webkit-mask-image:none;mask-image:none;background-position:center 50%}
  .screen.home>.stack{position:relative;z-index:1;flex:none;width:clamp(23.75rem,32vw,32.5rem)}
  .tabs{position:relative;z-index:2}
}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Tenor has a single weight: no synthesized bold on display type. */
/* ================= v4: look matched to the live build ================= */ h1,
h2,
.b5,.me .rank,.trio b,.bal .num,.sheet h3,.lb-row .g,
.btn,
.pill,
.tab[aria-current="page"],
/* initials */ .ini,
.cta b,
.hc .hh b,
.hc .inner b,
.mode b,
.rc b,
.out .plus50,
.sheet h4,
.inv .hh b,
.mbar b{font-weight:400;letter-spacing:-.01em}

/* ================= server-rendered chat (D4) ================= */
.note-cost{font-size:.75rem;color:var(--mute);margin:.25rem 0 0 .5rem}
.note-cost b{font-weight:600;color:var(--mag)}
.mbar>i.ready{background:#d35fb0}
.mbar>i.cold,.mrow.cold i,.mbar>i.loading,.mrow.loading i{background:#fff;border:1.5px solid #d35fb0}
.mbar>i.unavailable{background:#c9bfdc}
.mrow .ck{color:#a5379f;font-weight:600}
.composer .mbar{margin-bottom:0}
.composer .mlist{margin:0;padding:0 2px;max-height:40vh;overflow-y:auto}
.msgs .modes{margin-top:.5rem}
.msgs .sec{margin-top:1.125rem}
.msgs .sec .badge.soon{align-self:center}
.m .b img{display:block;max-width:min(32rem,100%);border-radius:.75rem}
.ai .msgs{padding-top:.5rem}

/* ================= devices (D5) ================= */
.pcode{display:block;width:100%;background:none;border:0;cursor:pointer;font-family:"SF Mono",ui-monospace,Menlo,monospace;font-size:2.125rem;letter-spacing:.14em;text-align:center;padding:.875rem 0 .25rem;color:var(--ink);font-variant-numeric:tabular-nums;user-select:all}
.pmeta{text-align:center;color:var(--mute);font-size:.8125rem;margin:0}
.help{font-size:.8125rem;color:var(--mute)}
.help summary{cursor:pointer;color:var(--mag);font-weight:500}
.help p{margin:.375rem 0 0;line-height:1.5}
.dev .g{flex:1;min-width:0}
.dev .b5{display:block;margin-bottom:.5rem;overflow:hidden;text-overflow:ellipsis}
.specs .ib.sm{width:1.875rem;height:1.875rem;color:var(--mute)}

/* ================= network (D6) ================= */
.seg a{flex:1;height:2.375rem;border-radius:.8125rem;font-size:.875rem;color:var(--mute);text-align:center;display:flex;align-items:center;justify-content:center}
.seg a[aria-selected="true"]{background:linear-gradient(180deg,#f7d9ec,#f8ecf9);color:#b23aa6;font-weight:600}
.seg.sm a{flex:0 0 auto;height:2.25rem;padding:0 1rem;border-radius:1.125rem;background:rgba(255,255,255,.6);border:1px solid #fff}
.trio a{display:block}
.mapwrap{padding:.375rem .625rem .75rem}
.mapwrap svg{display:block;width:100%;height:auto}
.mapwrap .land{fill:rgba(178,110,200,.28)}
.mapwrap .halo{fill:rgba(224,72,159,.18)}
.mapwrap .pin{fill:#e0489f;stroke:#fff;stroke-width:1.5}
.places{display:flex;flex-wrap:wrap;gap:.375rem;padding:0 1rem .875rem}
.places span{font-size:.75rem;color:var(--mute);background:rgba(255,255,255,.7);border:1px solid #fff;border-radius:.625rem;padding:.1875rem .5625rem}
.circ-list .row{padding:.5rem 0}
.circ-list .row .g{font-weight:500}
.me .rank .badge{vertical-align:middle}
.qrwrap[hidden]{display:none}

/* ================= your MAGIC (D7) ================= */
.bal .unit{font-family:var(--head);font-size:1.125rem;color:var(--mute);margin-top:2px}
.bal .dust{margin-top:.625rem;font-size:.9375rem;color:var(--mute)}
.bal .dust b{font-family:var(--head);font-weight:400;font-size:1.375rem;color:var(--ink)}
.faq .row{padding:.875rem 1rem}
.faq p{margin:0;padding:0 1rem 1rem 3.125rem;color:var(--mute);font-size:.90625rem;line-height:1.5}
.faq details>summary{list-style:none;cursor:pointer}
.faq details>summary::-webkit-details-marker{display:none}
.faq details[open] .chev{transform:rotate(90deg)}
.act-row{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem}
.act-row+.act-row{border-top:1px solid var(--line)}
.act-row .g{flex:1;min-width:0}
.act-row .g small{display:block;color:var(--mute);font-size:.78125rem}
.act-row .p{font-variant-numeric:tabular-nums;font-size:.875rem;color:var(--mag);font-weight:600;white-space:nowrap}
.act-row .p.mute{color:var(--mute);font-weight:500}
.act-row .badge{flex:none}

/* phone scale (Illya 2026-09-30): every phone shows the same screen. The design
   is drawn for an iPhone 15's Safari viewport (393 x 659); the root size is
   16px times the tighter of width/393 and height/659, so an SE shows the same
   content smaller and a Pro Max the same content larger. svh keeps the size
   still while Safari's toolbar slides; vh is the fallback before iOS 15.4.
   The block below it is the phone design itself: chrome and type a step
   under the tablet sizes. The screen-height rules above no longer hide
   sections on small phones; scaling makes the room instead. */
@media (max-width:599px){
  html{font-size:clamp(12px,min(4.0712vw,2.4279vh),18px);font-size:clamp(12px,min(4.0712vw,2.4279svh),18px)}
  /* Scaled or not, a field never drops under 16px (iOS focus zoom, see .composer input). */
  input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:max(16px,1rem)!important}
}
@media (max-width:599px){
  :root{--topH:calc(3.5rem + env(safe-area-inset-top))}
  .logo{height:2.75rem}
  .pill{height:2.25rem;padding:0 .8125rem;border-radius:1.125rem;font-size:.875rem}
  .pill svg{width:.875rem;height:.875rem}
  .ib.glass{width:2.25rem;height:2.25rem}
  .ib.glass svg{width:1.25rem;height:1.25rem}
  .tab{height:3.25rem;gap:2px;font-size:.75rem;border-radius:1.375rem}
  .tab svg{width:1.375rem;height:1.375rem}
  .tabs{border-radius:2rem}
  .screen{padding-bottom:6.875rem}
  .screen.home{padding-bottom:calc(5.625rem + env(safe-area-inset-bottom))}
  .ai{padding-bottom:calc(5.125rem + env(safe-area-inset-bottom))}
  .toast{bottom:calc(5.875rem + env(safe-area-inset-bottom))}
  h1{font-size:1.625rem}
  h2{font-size:1.25rem}
  .bal .num{font-size:4rem}
  .btn{height:3.125rem;font-size:1rem}
  .btn.sm{height:2.75rem;font-size:.9375rem}
  .seg button,.seg a{height:2.25rem;font-size:.84375rem}
  .row{padding:.75rem .875rem}
  .cta{padding:.75rem 1rem .75rem 1.375rem;border-radius:1.875rem}
  .cta b{font-size:1.25rem}
  .circ{width:2.625rem;height:2.625rem}
  .hc,.inv{padding:.875rem .875rem .75rem}
  .hc .hh b,.inv .hh b{font-size:1.03125rem}
  .hc .mute{font-size:.875rem}
  .mode{padding:1.25rem 2px .625rem}
  .mode svg{width:1.625rem;height:1.625rem}
  .mode b{font-size:.84375rem}
  .sg{height:2.375rem;padding:0 .875rem;font-size:.90625rem}
  .composer .in{height:3rem;border-radius:1.5rem}
  .composer .send{width:2.5rem;height:2.5rem}
  .composer .plusb{width:2.75rem;height:2.75rem}
  .faq .row{padding:.75rem .875rem}
}