/* MAKI OS — Design System (P0)  ·  Tron / cyberpunk / anime-AI-OS */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&family=Inter:wght@400;500;600;700&display=swap');
:root{
  --bg0:#040507; --bg1:#070A0F; --bg2:#090B12; --bg3:#0d1019;
  --pink:#FF2D7A; --cyan:#00E7FF; --purple:#9D72FF; --gold:#FFC94D; --green:#00FF94; --danger:#FF4B6E;
  --txt:#EAF0F7; --txt-dim:#8A94A6; --txt-faint:#5A6376;
  --line:rgba(255,255,255,.07); --line-bright:rgba(255,255,255,.13);
  --glass:rgba(255,255,255,.025); --glass2:rgba(255,255,255,.04);
  --pink-glow:0 0 24px rgba(255,45,122,.45); --cyan-glow:0 0 24px rgba(0,231,255,.4);
  --radius:16px; --radius-sm:11px; --head:'Orbitron',sans-serif; --body:'Inter',-apple-system,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--bg0);color:var(--txt);font-family:var(--body);font-size:14px;line-height:1.5;
  background-image:radial-gradient(1200px 600px at 80% -10%,rgba(255,45,122,.06),transparent 60%),
   radial-gradient(900px 500px at 10% 110%,rgba(0,231,255,.05),transparent 60%);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
::-webkit-scrollbar{width:9px;height:9px}::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:9px}
.head{font-family:var(--head);letter-spacing:.06em}
.dim{color:var(--txt-dim)} .faint{color:var(--txt-faint)} .up{text-transform:uppercase}
.pink{color:var(--pink)} .cyan{color:var(--cyan)} .green{color:var(--green)} .gold{color:var(--gold)} .purple{color:var(--purple)}

/* layout */
.os{display:grid;grid-template-columns:248px 1fr;min-height:100vh}
.os.has-ctx{grid-template-columns:248px 1fr 332px}
.sidebar{background:linear-gradient(180deg,var(--bg2),var(--bg1));border-right:1px solid var(--line);
  padding:22px 16px;display:flex;flex-direction:column;gap:6px;position:sticky;top:0;height:100vh;overflow:auto}
.brand{display:flex;flex-direction:column;gap:2px;padding:4px 8px 18px}
.brand .logo{font-family:var(--head);font-weight:900;font-size:26px;color:var(--pink);
  text-shadow:var(--pink-glow);letter-spacing:.12em}
.brand .sub{font-family:var(--head);font-size:10px;letter-spacing:.34em;color:var(--txt-dim)}
.nav-item{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:var(--radius-sm);
  color:var(--txt-dim);font-weight:500;cursor:pointer;border:1px solid transparent;transition:.16s}
.nav-item .ic{width:18px;text-align:center;opacity:.85}
.nav-item:hover{color:var(--txt);background:var(--glass)}
.nav-item.active{color:#fff;background:linear-gradient(90deg,rgba(255,45,122,.22),rgba(255,45,122,.04));
  border-color:rgba(255,45,122,.4);box-shadow:inset 0 0 18px rgba(255,45,122,.12)}
.nav-sec{font-family:var(--head);font-size:9.5px;letter-spacing:.28em;color:var(--txt-faint);padding:16px 12px 6px}
.usercard{margin-top:auto;display:flex;align-items:center;gap:11px;padding:11px;border:1px solid var(--line);
  border-radius:var(--radius-sm);background:var(--glass)}
.usercard .av{width:38px;height:38px;border-radius:11px;background:
  conic-gradient(from 210deg,var(--pink),var(--purple),var(--cyan),var(--pink));position:relative}
.usercard .av::after{content:'';position:absolute;inset:2px;border-radius:9px;background:var(--bg2)}
.pill{display:inline-block;font-family:var(--head);font-size:9px;letter-spacing:.1em;padding:3px 8px;border-radius:6px;
  background:rgba(255,45,122,.16);color:var(--pink);border:1px solid rgba(255,45,122,.4)}

.main{padding:18px 22px 26px;overflow:auto;min-width:0}
.topbar{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.search{flex:1;display:flex;align-items:center;gap:10px;background:var(--glass);border:1px solid var(--line);
  border-radius:12px;padding:11px 15px;color:var(--txt-dim)}
.search input{flex:1;background:none;border:0;color:var(--txt);font-family:var(--body);font-size:14px;outline:none}
.kbd{font-family:var(--head);font-size:10px;color:var(--txt-faint);border:1px solid var(--line-bright);border-radius:6px;padding:2px 7px}
.iconbtn{width:40px;height:40px;display:grid;place-items:center;border-radius:11px;border:1px solid var(--line);
  background:var(--glass);color:var(--txt-dim);cursor:pointer;transition:.16s}
.iconbtn:hover{color:#fff;border-color:var(--line-bright)}

.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 16px;border-radius:11px;font-weight:600;
  font-size:13px;cursor:pointer;border:1px solid var(--line-bright);background:var(--glass2);color:var(--txt);transition:.16s}
.btn:hover{border-color:var(--cyan);box-shadow:var(--cyan-glow)}
.btn-primary{background:linear-gradient(95deg,var(--pink),#ff5c97);border-color:transparent;color:#fff;box-shadow:var(--pink-glow)}
.btn-primary:hover{filter:brightness(1.08);box-shadow:0 0 30px rgba(255,45,122,.6)}
.btn.sm{padding:8px 12px;font-size:12px}

/* cards / glass */
.card{background:linear-gradient(180deg,var(--glass2),var(--glass));border:1px solid var(--line);
  border-radius:var(--radius);padding:18px;position:relative;backdrop-filter:blur(8px)}
.card.glow::before{content:'';position:absolute;inset:0;border-radius:var(--radius);padding:1px;
  background:linear-gradient(120deg,rgba(255,45,122,.5),transparent 40%,rgba(0,231,255,.4));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.55;pointer-events:none}
.card-title{font-family:var(--head);font-size:11px;letter-spacing:.18em;color:var(--txt-dim);text-transform:uppercase;
  display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.grid{display:grid;gap:16px}
.g6{grid-template-columns:repeat(6,1fr)} .g3{grid-template-columns:repeat(3,1fr)} .g2{grid-template-columns:2fr 1fr}
.row{display:flex;gap:16px;flex-wrap:wrap}

/* hero */
.hero{position:relative;overflow:hidden;border-radius:var(--radius);padding:34px;
  background:radial-gradient(700px 300px at 88% 30%,rgba(255,45,122,.22),transparent 60%),linear-gradient(120deg,var(--bg2),var(--bg1));
  border:1px solid var(--line)}
.hero h1{font-family:var(--head);font-weight:900;font-size:40px;line-height:1.05;letter-spacing:.02em}
.hero h1 .glowtxt{background:linear-gradient(90deg,var(--pink),#ff7eb0);-webkit-background-clip:text;background-clip:text;
  color:transparent;text-shadow:0 0 40px rgba(255,45,122,.5)}
.hero .sub{color:var(--txt-dim);margin:10px 0 22px;font-size:15px}
.core{position:absolute;right:40px;top:50%;transform:translateY(-50%);width:230px;height:230px;border-radius:50%;
  background:radial-gradient(circle at 50% 45%,rgba(255,45,122,.9),rgba(157,114,255,.4) 40%,transparent 68%);
  filter:blur(2px);animation:pulse 4s ease-in-out infinite}
.core::after{content:'';position:absolute;inset:18%;border-radius:50%;border:1px solid rgba(0,231,255,.4);
  box-shadow:inset 0 0 40px rgba(0,231,255,.25);animation:spin 14s linear infinite}
@keyframes pulse{0%,100%{transform:translateY(-50%) scale(1);opacity:.9}50%{transform:translateY(-50%) scale(1.06);opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}

/* stat tile */
.tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.tile{background:linear-gradient(180deg,var(--glass2),var(--glass));border:1px solid var(--line);border-radius:14px;padding:15px}
.tile .lbl{font-family:var(--head);font-size:9.5px;letter-spacing:.16em;color:var(--txt-dim);text-transform:uppercase}
.tile .val{font-size:26px;font-weight:700;margin:8px 0 2px;font-family:var(--head)}
.tile .delta{font-size:12px;font-weight:600}
.tile .spark{height:30px;margin-top:8px;display:flex;align-items:flex-end;gap:2px}
.tile .spark i{flex:1;background:linear-gradient(180deg,var(--pink),rgba(255,45,122,.15));border-radius:2px;min-height:3px;display:block}

/* bars / status */
.statrow{display:flex;align-items:center;gap:12px;margin:13px 0}
.statrow .ic{width:20px;color:var(--txt-dim)} .statrow .nm{width:74px;font-size:12px;color:var(--txt-dim);font-family:var(--head);letter-spacing:.08em}
.bar{flex:1;height:6px;border-radius:6px;background:rgba(255,255,255,.06);overflow:hidden}
.bar i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--cyan),var(--green))}
.statrow .pc{width:42px;text-align:right;font-size:12px;font-weight:600}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;background:var(--green);box-shadow:0 0 8px var(--green)}
.dot.warn{background:var(--gold);box-shadow:0 0 8px var(--gold)} .dot.off{background:var(--txt-faint);box-shadow:none}

/* donut */
.donut{width:130px;height:130px;border-radius:50%;display:grid;place-items:center;position:relative;
  background:conic-gradient(var(--pink) calc(var(--p,0)*1%),rgba(255,255,255,.06) 0)}
.donut::before{content:'';position:absolute;inset:13px;border-radius:50%;background:var(--bg2)}
.donut .c{position:relative;text-align:center}.donut .c b{font-family:var(--head);font-size:24px}

/* list rows */
.lrow{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.lrow:last-child{border-bottom:0}
.lrow .ico{width:34px;height:34px;border-radius:9px;background:var(--glass2);display:grid;place-items:center;color:var(--cyan);flex:none}
.lrow .t{flex:1;min-width:0}.lrow .t b{font-weight:600;font-size:13px}.lrow .t span{display:block;font-size:11px;color:var(--txt-faint)}
.lrow .meta{font-size:11px;color:var(--txt-faint);white-space:nowrap}

/* table */
table.mk{width:100%;border-collapse:collapse;font-size:13px}
table.mk th{font-family:var(--head);font-size:10px;letter-spacing:.12em;color:var(--txt-faint);text-transform:uppercase;text-align:left;padding:9px 10px;border-bottom:1px solid var(--line)}
table.mk td{padding:11px 10px;border-bottom:1px solid var(--line)}
table.mk tr:hover td{background:var(--glass)}
.tag{font-family:var(--head);font-size:9.5px;letter-spacing:.08em;padding:3px 9px;border-radius:6px;border:1px solid var(--line-bright);color:var(--cyan);text-transform:uppercase}

/* terminal / footer */
.terminal{font-family:var(--head);font-size:12px;letter-spacing:.06em;color:var(--green);
  background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:13px 16px}
.terminal .p{color:var(--txt-faint)}
.foot{display:flex;align-items:center;gap:26px;color:var(--txt-dim);font-size:12px}
.foot b{color:var(--txt);font-family:var(--head)}

/* auth banner */
.authbar{display:none;align-items:center;gap:12px;background:rgba(255,201,77,.08);border:1px solid rgba(255,201,77,.35);
  border-radius:12px;padding:12px 16px;margin-bottom:16px;color:var(--gold);font-size:13px}
.authbar.show{display:flex}
.authbar input{flex:1;background:var(--bg2);border:1px solid var(--line-bright);border-radius:9px;padding:9px 12px;color:var(--txt);outline:none;font-family:var(--body)}

.live{display:inline-flex;align-items:center;gap:6px;font-family:var(--head);font-size:10px;letter-spacing:.14em;color:var(--green)}
.live .dot{animation:blink 1.4s infinite}@keyframes blink{50%{opacity:.3}}
.muted-note{font-size:11px;color:var(--txt-faint);font-style:italic}

@media(max-width:1200px){.os,.os.has-ctx{grid-template-columns:1fr}.sidebar{display:none}.tiles{grid-template-columns:repeat(3,1fr)}.g6{grid-template-columns:repeat(3,1fr)}.g2{grid-template-columns:1fr}.core{display:none}}
@media(max-width:640px){.tiles,.g6,.g3{grid-template-columns:repeat(2,1fr)}.hero h1{font-size:30px}}

/* ── Match the site brand font (Syne) + mockup components ───────────────── */
@font-face{font-family:'Syne';src:url('/assets/fonts/Syne-ExtraBold.ttf') format('truetype');font-weight:800;font-display:swap}
@font-face{font-family:'Syne';src:url('/assets/fonts/Syne-Bold.ttf') format('truetype');font-weight:700;font-display:swap}
.brand .logo{font-family:'Syne',sans-serif !important;font-weight:800;letter-spacing:-1px;font-size:30px}
.logo-syne{font-family:'Syne',sans-serif;font-weight:800;letter-spacing:-1px}

/* topbar avatar + icons */
.av-sm{width:38px;height:38px;border-radius:50%;background:conic-gradient(from 210deg,var(--pink),var(--purple),var(--cyan),var(--pink));position:relative;overflow:hidden}
.av-sm img{width:100%;height:100%;object-fit:cover}

/* hero core image */
.hero .corewrap{position:absolute;right:0;top:0;bottom:0;width:46%;overflow:hidden;border-top-right-radius:var(--radius);border-bottom-right-radius:var(--radius);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 40%);mask-image:linear-gradient(90deg,transparent,#000 40%)}
.hero .corewrap img{width:100%;height:100%;object-fit:cover;object-position:center 20%;opacity:.92}
.hero .corewrap::after{content:'';position:absolute;inset:0;background:radial-gradient(420px 320px at 78% 38%,rgba(255,45,122,.32),transparent 62%)}
.hero .inner{position:relative;z-index:2;max-width:62%}

/* tile delta + sparkline color variants */
.tile .delta.up{color:var(--green)} .tile .delta.flat{color:var(--txt-faint)}
.tile.t-pink .spark i{background:linear-gradient(180deg,var(--pink),rgba(255,45,122,.12))}
.tile.t-cyan .spark i{background:linear-gradient(180deg,var(--cyan),rgba(0,231,255,.12))}
.tile.t-purple .spark i{background:linear-gradient(180deg,var(--purple),rgba(157,114,255,.12))}
.tile.t-gold .spark i{background:linear-gradient(180deg,var(--gold),rgba(255,201,77,.12))}
.tile.t-green .spark i{background:linear-gradient(180deg,var(--green),rgba(0,255,148,.12))}
.tile .spark.line{align-items:stretch}
.tile .spark.line svg{width:100%;height:30px}

/* live stream panel */
.stream{position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--line);aspect-ratio:16/9;background:linear-gradient(135deg,#2a0e16,#0b0d14)}
.stream .ph{position:absolute;inset:0;background:radial-gradient(300px 200px at 70% 30%,rgba(255,45,122,.4),transparent 60%),repeating-linear-gradient(115deg,rgba(255,255,255,.02) 0 8px,transparent 8px 16px)}
.stream .live-badge{position:absolute;top:10px;left:10px;background:var(--danger);color:#fff;font-family:var(--head);font-size:9px;letter-spacing:.1em;padding:3px 8px;border-radius:5px}
.stream .views{position:absolute;top:10px;right:10px;font-size:11px;color:#fff;background:rgba(0,0,0,.45);padding:3px 8px;border-radius:6px}
.stream .cap{position:absolute;left:12px;bottom:12px;right:12px}
.stream .cap b{display:block;font-family:var(--head);font-size:13px;letter-spacing:.04em}
.golive{display:flex;align-items:center;justify-content:space-between;margin-top:12px}
.gobtn{background:linear-gradient(95deg,var(--pink),#ff5c97);border:0;color:#fff;font-family:var(--head);font-size:11px;letter-spacing:.08em;padding:9px 16px;border-radius:9px;box-shadow:var(--pink-glow);cursor:pointer}

/* market rows */
.mkt .lrow .ico{color:var(--pink)} .delta-pos{color:var(--green);font-size:12px;font-weight:600}
.coin{font-family:var(--head);font-size:9px;color:var(--txt-faint);letter-spacing:.06em}

/* footer / terminal / radar */
.osfoot{display:grid;grid-template-columns:1.4fr auto auto auto auto;gap:24px;align-items:center;margin-top:18px;
  border-top:1px solid var(--line);padding-top:16px}
.osfoot .stat .l{font-family:var(--head);font-size:9px;letter-spacing:.16em;color:var(--txt-faint)}
.osfoot .stat .v{font-family:var(--head);font-size:14px;margin-top:3px}
.radar{width:64px;height:64px;border-radius:50%;border:1px solid rgba(255,45,122,.3);position:relative;overflow:hidden;justify-self:end}
.radar::before{content:'';position:absolute;inset:0;background:conic-gradient(from 0deg,rgba(255,45,122,.5),transparent 32%);animation:spin 3s linear infinite}
.radar::after{content:'';position:absolute;inset:42%;border-radius:50%;background:var(--pink);box-shadow:0 0 10px var(--pink)}
@media(max-width:1200px){.osfoot{grid-template-columns:1fr 1fr;gap:14px}.radar{display:none}}

/* ── /os precision fixes: kill right-side cut-off + match mockup ─────────── */
.os{grid-template-columns:248px minmax(0,1fr) !important}
.main{min-width:0}
.dash{display:grid;grid-template-columns:minmax(0,1fr) 332px;gap:16px;align-items:start}
.dash>*{min-width:0}
@media(max-width:1200px){.dash{grid-template-columns:1fr}}

/* left menu -> mockup proportions */
.brand{padding:6px 8px 22px}
.brand .sub{font-size:10.5px;letter-spacing:.36em;margin-top:3px}
.nav-item{font-size:14.5px;padding:12px 14px;gap:13px;border-radius:13px}
.nav-item .ic{font-size:15px;width:20px}
.nav-item.active{color:#fff;background:linear-gradient(90deg,rgba(255,45,122,.20),rgba(255,45,122,.03));
  border-color:rgba(255,45,122,.55);box-shadow:0 0 0 1px rgba(255,45,122,.14),inset 0 0 22px rgba(255,45,122,.14),0 0 20px rgba(255,45,122,.10)}

/* banner -> mockup (heavy Syne title, taller hero, character glow) */
.hero{padding:40px 42px;min-height:300px}
.hero h1{font-family:'Syne',sans-serif !important;font-weight:800;font-size:48px;letter-spacing:0;line-height:1.02}
.hero h1 .glowtxt{font-family:'Syne',sans-serif !important}
.hero .corewrap{width:42%}
.hero .corewrap img{object-position:center 8%}
.hero .inner{max-width:60%}

/* ── RESPONSIVE OVERHAUL (final, authoritative) — fixes mobile crush + desktop overflow ── */
html,body{max-width:100%;overflow-x:hidden}
img{max-width:100%;height:auto}
.os{grid-template-columns:240px minmax(0,1fr) !important}
.main{min-width:0;overflow:visible}
.dash{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start}
.dash>*{min-width:0}
.topbar{flex-wrap:wrap}
/* banner: wide + short like the mockup (was too tall) */
.hero{min-height:0;padding:30px 34px}
.hero h1{font-size:42px;line-height:1.02}
.hero .inner{max-width:58%}
.hero .corewrap{width:40%}
.hero .row{gap:10px}
.hero .btn{padding:9px 13px;font-size:12.5px}
/* tablet + mobile (incl. phone landscape): single column, sidebar hidden, rail stacks below */
@media(max-width:1200px){
  .os{grid-template-columns:1fr !important}
  .sidebar{display:none}
  .dash{grid-template-columns:1fr !important}
  .hero .inner{max-width:62%}
}
@media(max-width:760px){
  .hero{padding:22px}
  .hero h1{font-size:30px}
  .hero .inner{max-width:80%}
  .hero .corewrap{width:46%;opacity:.55}
  .tiles,.g6,.g3{grid-template-columns:repeat(2,1fr) !important}
  .osfoot{grid-template-columns:1fr 1fr}
  .topbar .btn-primary{order:5}
}

/* ── mobile polish for /os web page (phone portrait + landscape) ── */
@media(max-width:760px){
  .main{padding:14px}
  .topbar{gap:8px}
  .topbar .search{min-width:0;flex:1 1 100%;order:1}
  .topbar .btn-primary{order:2}
  .topbar .iconbtn{order:3}
  .topbar .av-sm{order:4;margin-left:auto}
  .hero{padding:20px;min-height:0}
  .hero .corewrap{width:62%;opacity:.28}
  .hero .inner{max-width:100%;position:relative;z-index:2}
  .hero h1{font-size:26px}
  .hero .row{gap:8px}
  .hero .btn{font-size:12px;padding:8px 11px}
  .dash{gap:12px}
  .grid.g3{grid-template-columns:1fr !important}
  .grid.g6{grid-template-columns:repeat(2,1fr) !important}
  .tiles{grid-template-columns:repeat(2,1fr) !important;gap:10px}
  .osfoot{grid-template-columns:1fr !important;gap:10px}
  .radar{display:none}
  .donut{width:108px;height:108px}
  .card{padding:14px}
}
@media(max-width:430px){
  .hero h1{font-size:22px}
  .hero .corewrap{opacity:.2}
}

/* ════════ DESKTOP LAYOUT LOCK v2 — measured from mock (1536px) — >=1201px only ════════ */
@media(min-width:1201px){
  .os{grid-template-columns:210px minmax(0,1fr) !important}
  .dash{grid-template-columns:minmax(0,1fr) 308px !important;gap:16px !important;align-items:start !important}
  .dash>*{min-width:0 !important}
  .tiles{grid-template-columns:repeat(6,minmax(0,1fr)) !important;gap:12px !important}
  .grid.g6{grid-template-columns:repeat(6,minmax(0,1fr)) !important}
  .grid.g3{grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:16px !important}
  .tiles .tile{min-width:0 !important;overflow:hidden}
  .hero{min-height:196px !important;padding:24px 30px !important;display:flex !important;flex-direction:column !important;justify-content:center !important}
  .hero h1{font-size:46px !important;line-height:1.02 !important;margin:0 !important}
  .hero .sub{margin:7px 0 16px !important;font-size:15px !important}
  .hero .inner{max-width:72% !important}
  .hero .corewrap{width:40% !important}
  .sidebar{padding:16px 12px !important}
  .brand .logo{font-size:26px !important}
  .nav-item{padding:10px 12px !important;font-size:13px !important}
}

/* ════════ MOCK MATCH v3 — duplicate the mock's components/effects ════════ */
/* user card avatar (was hidden under an opaque ::after) */
.usercard .av{background:linear-gradient(135deg,#FF2D7A,#9D72FF) !important;overflow:visible !important}
.usercard .av::after{display:none !important}
.usercard .av img{position:absolute !important;inset:1px !important;width:calc(100% - 2px) !important;height:calc(100% - 2px) !important;min-width:0 !important;min-height:0 !important;object-fit:cover !important;object-position:center 16% !important;border-radius:10px !important;z-index:1}
.usercard .av::before{content:'';position:absolute;z-index:2;left:-3px;bottom:-3px;width:11px;height:11px;border-radius:50%;background:var(--green);border:2px solid var(--bg1);box-shadow:0 0 8px rgba(0,255,148,.7)}
/* GO LIVE one line */
.gobtn{white-space:nowrap !important;padding:9px 18px !important}
/* system status: CPU blue, rest green; + green activity graph */
#sys .statrow:nth-child(1) .bar i{background:linear-gradient(90deg,#2D9BFF,#00E7FF) !important}
#sys .statrow:nth-child(n+2) .bar i{background:linear-gradient(90deg,#00B86B,#00FF94) !important}
.sysgraph{display:block;width:100%;height:58px;margin-top:10px;opacity:.9}
/* recent projects -> image-thumbnail style placeholders (first card of the 3-up row) */
.grid.g3 > .card:first-child .lrow .ico{color:transparent;background-size:cover;background-position:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);background-image:linear-gradient(135deg,#3a1030,#10204a)}
.grid.g3 > .card:first-child .lrow:nth-child(3) .ico{background-image:linear-gradient(135deg,#4a1020,#241038)}
.grid.g3 > .card:first-child .lrow:nth-child(4) .ico{background-image:linear-gradient(135deg,#2a0a3a,#3a1020)}
.grid.g3 > .card:first-child .lrow:nth-child(5) .ico{background-image:linear-gradient(135deg,#10243a,#2a103a)}
.grid.g3 > .card:first-child .lrow:nth-child(6) .ico{background-image:linear-gradient(135deg,#1a0a2a,#3a1428)}
/* buttons: dark glass + thin border + white text (no cyan glow); primary stays pink */
.btn{background:rgba(255,255,255,.03);border:1px solid var(--line-bright);color:var(--txt);border-radius:10px}
.btn:hover{border-color:rgba(255,45,122,.5);box-shadow:none}
.btn-primary{background:linear-gradient(95deg,#FF2D7A,#FF5C97) !important;border-color:transparent !important;color:#fff !important}
/* hero action button icons -> per-button accent like the mock */
.hero .btn:nth-of-type(1) .ic{color:#FF2D7A} .hero .btn:nth-of-type(2) .ic{color:#00E7A0}
.hero .btn:nth-of-type(3) .ic{color:#2D9BFF} .hero .btn:nth-of-type(4) .ic{color:#9D72FF}
.hero .btn:nth-of-type(5) .ic{color:#FFC94D}

/* hero background + character treatment (desktop only) */
@media(min-width:1201px){
  .hero{background:
      radial-gradient(46% 130% at 84% 42%, rgba(255,45,122,.22), transparent 60%),
      linear-gradient(115deg,#0a0410 0%,#140711 52%,#1c0814 100%) !important}
  .hero::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.6;
    background-image:
      repeating-linear-gradient(0deg, rgba(255,90,150,.06) 0 1px, transparent 1px 34px),
      repeating-linear-gradient(90deg, rgba(255,90,150,.06) 0 1px, transparent 1px 34px);
    -webkit-mask-image:linear-gradient(90deg, transparent 22%, #000 78%);
    mask-image:linear-gradient(90deg, transparent 22%, #000 78%)}
  .hero .inner{position:relative;z-index:3}
  .hero .corewrap{width:42% !important;z-index:1;overflow:visible !important;background:none !important}
  .hero .corewrap img{position:relative;z-index:2;width:100% !important;height:100% !important;object-fit:contain !important;object-position:bottom right !important;opacity:1 !important}
  .hero .corewrap::after{display:none !important}
  .hero .corewrap::before{content:'';position:absolute;z-index:1;right:7%;top:0;width:208px;height:208px;border-radius:50%;
    background:radial-gradient(circle, rgba(255,45,122,0) 50%, rgba(255,45,122,.55) 58%, rgba(255,45,122,0) 70%)}
}

/* ════════ MOCK MATCH v4 — donut circle, quick-create outline, MAKI OS line, banner outline/grid/diagonal, icons ════════ */
/* Token Usage donut: never let flex shrink it horizontally (that caused the oval on narrower cards) */
.donut{flex:0 0 auto !important;aspect-ratio:1 !important}

/* Quick Create: outline button (pink border, dark interior, pink text + circled plus) — matches mock */
.topbar .btn-primary.qc{background:rgba(255,45,122,.05) !important;border:1.5px solid var(--pink) !important;color:var(--pink) !important;
  font-family:var(--head);text-transform:uppercase;letter-spacing:.08em;font-weight:700;
  box-shadow:0 0 16px rgba(255,45,122,.30), inset 0 0 10px rgba(255,45,122,.06) !important}
.topbar .btn-primary.qc:hover{background:rgba(255,45,122,.12) !important;box-shadow:0 0 26px rgba(255,45,122,.55) !important;filter:none !important}
.topbar .btn-primary.qc svg{stroke:var(--pink)}

/* MAKI OS line under the logo */
.brand{gap:3px !important}
.brand .osname{font-family:'Syne',sans-serif;font-weight:800;font-size:15px;letter-spacing:.13em;color:var(--txt);margin-top:6px;line-height:1}

/* nav line icons + active = pink */
.nav-item .ic{width:22px;height:18px;display:inline-flex;align-items:center;justify-content:center;opacity:.9}
.nav-item .ic svg{width:18px;height:18px;stroke:currentColor}
.nav-item.active{color:var(--pink) !important;background:rgba(255,45,122,.10) !important;border:1px solid rgba(255,45,122,.35);box-shadow:inset 3px 0 0 var(--pink)}
.nav-item.active .ic{opacity:1}

/* banner: red outline + much more visible grid + diagonal red/circuit edge (desktop) */
@media(min-width:1201px){
  .hero{border:1px solid rgba(255,45,122,.45) !important;
    box-shadow:0 0 0 1px rgba(255,45,122,.12), 0 0 38px rgba(255,45,122,.10) !important}
  .hero::before{opacity:1 !important;
    background-image:
      repeating-linear-gradient(0deg, rgba(255,95,150,.17) 0 1px, transparent 1px 30px),
      repeating-linear-gradient(90deg, rgba(255,95,150,.17) 0 1px, transparent 1px 30px),
      radial-gradient(circle at 70% 28%, rgba(255,70,135,.7) 0 1.5px, transparent 2.5px),
      radial-gradient(circle at 88% 52%, rgba(255,70,135,.6) 0 1.5px, transparent 2.5px),
      radial-gradient(circle at 60% 72%, rgba(255,70,135,.5) 0 1.5px, transparent 2.5px),
      radial-gradient(circle at 82% 80%, rgba(255,70,135,.5) 0 1.5px, transparent 2.5px) !important;
    -webkit-mask-image:linear-gradient(118deg, transparent 12%, #000 62%) !important;
    mask-image:linear-gradient(118deg, transparent 12%, #000 62%) !important}
}

/* ════════ MOCK MATCH v5 — icon sizing for tiles / activity / live-stream ════════ */
.tile .lbl svg{vertical-align:-2px;margin-right:5px;opacity:.9}
.lrow .ico svg{display:block}
.card .lrow .ico{display:flex;align-items:center;justify-content:center}
.iconbtn{display:inline-flex;align-items:center;justify-content:center}
.iconbtn svg{display:block;opacity:.85}

/* ════════════════════════════════════════════════════════════════════════
   MOBILE + iPAD PASS (authoritative — appended last)
   · Phone PORTRAIT (<=760, portrait)  -> bespoke .mobile-os mockup
   · iPad (portrait+landscape) & phone LANDSCAPE -> desktop 3-zone (.os)
   ════════════════════════════════════════════════════════════════════════ */

/* ---- keep the desktop/iPad 3-zone whenever we're NOT in phone-portrait ---- */
@media (max-width:1200px){
  .os, .os.has-ctx{grid-template-columns:200px minmax(0,1fr) !important}
  .sidebar{display:flex !important}
  .core{display:none}
}
/* iPad landscape / wide tablet: keep the right rail beside main */
@media (min-width:1081px) and (max-width:1200px){
  .os{grid-template-columns:208px minmax(0,1fr) !important}
  .dash{grid-template-columns:minmax(0,1fr) 300px !important}
}
/* iPad portrait + small landscape: sidebar stays, right rail stacks below main */
@media (min-width:761px) and (max-width:1080px){
  .dash{grid-template-columns:minmax(0,1fr) !important}
  .hero .inner{max-width:64% !important}
}
/* tighten sidebar nav a touch so 20 items fit on iPad height */
@media (max-width:1200px){
  .sidebar{padding:16px 11px !important}
  .nav-item{padding:9px 12px !important;font-size:13.5px !important}
}

/* ---- phone PORTRAIT: hand the screen to the bespoke mobile layout ---- */
.mobile-os{display:none}
@media (orientation:portrait) and (max-width:760px){
  .os{display:none !important}
  .mobile-os{display:block;max-width:560px;margin:0 auto;padding:14px 14px 156px}
}

/* ===== mobile: header ===== */
.mobile-os .mtop-row{display:flex;align-items:center;justify-content:space-between}
.mobile-os .mlogo{font-family:'Syne',sans-serif;font-weight:800;font-size:24px;letter-spacing:-.5px;color:var(--pink);text-shadow:var(--pink-glow)}
.mobile-os .mtop-actions{display:flex;align-items:center;gap:14px}
.mobile-os .mbell{position:relative;color:var(--txt-dim);display:inline-flex}
.mobile-os .mbell .dot{position:absolute;top:-1px;right:-1px;width:7px;height:7px;border-radius:50%;background:var(--pink);box-shadow:0 0 6px var(--pink)}
.mobile-os .mav{width:38px;height:38px;border-radius:50%;overflow:hidden;border:2px solid var(--pink);box-shadow:0 0 12px rgba(255,45,122,.5);flex:none}
.mobile-os .mav img{width:100%;height:100%;object-fit:cover;object-position:center 14%}
.mobile-os .mgreet{margin-top:13px;font-size:18px;font-weight:600;color:var(--txt)}
.mobile-os .mgreet b{font-weight:700;color:var(--txt)}
.mobile-os .mstatus{margin-top:3px;font-size:12px;color:var(--txt-dim);display:flex;align-items:center;gap:7px}
.mobile-os .mstatus .dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green)}

/* ===== mobile: hero ===== */
.mobile-os .mhero{position:relative;overflow:hidden;border-radius:18px;margin-top:14px;padding:20px;min-height:152px;
  border:1px solid rgba(255,45,122,.5);
  background:radial-gradient(120% 100% at 100% 28%,rgba(255,45,122,.26),transparent 60%),linear-gradient(120deg,#0b0410,#16080f);
  box-shadow:0 0 0 1px rgba(255,45,122,.12),0 0 30px rgba(255,45,122,.10)}
.mobile-os .mhero::before{content:'';position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:repeating-linear-gradient(0deg,rgba(255,95,150,.12) 0 1px,transparent 1px 26px),repeating-linear-gradient(90deg,rgba(255,95,150,.12) 0 1px,transparent 1px 26px);
  -webkit-mask-image:linear-gradient(90deg,transparent 24%,#000 80%);mask-image:linear-gradient(90deg,transparent 24%,#000 80%)}
.mobile-os .mhero-img{position:absolute;right:-4%;top:0;bottom:0;width:52%;z-index:1}
.mobile-os .mhero-img img{position:relative;z-index:2;width:100%;height:100%;object-fit:contain;object-position:bottom right}
.mobile-os .mhero-img::after{content:'';position:absolute;z-index:1;right:8%;top:10%;width:118px;height:118px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,45,122,0) 48%,rgba(255,45,122,.5) 56%,rgba(255,45,122,0) 70%)}
.mobile-os .mhero-in{position:relative;z-index:2;max-width:66%}
.mobile-os .mhero-in h1{font-family:'Syne',sans-serif;font-weight:800;font-size:26px;line-height:1.04;color:var(--txt)}
.mobile-os .mhero-in h1 span{background:linear-gradient(90deg,var(--pink),#ff7eb0);-webkit-background-clip:text;background-clip:text;color:transparent}
.mobile-os .mhero-in p{margin-top:8px;font-size:12.5px;color:var(--txt-dim)}

/* ===== mobile: action buttons ===== */
.mobile-os .mactions{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:14px}
.mobile-os .mactions button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:11px 3px;border-radius:13px;
  border:1px solid rgba(255,45,122,.3);background:rgba(255,45,122,.05);color:var(--txt);font-size:9px;font-weight:600;cursor:pointer;letter-spacing:.01em;line-height:1}
.mobile-os .mactions button svg{color:var(--pink)}

/* ===== mobile: generic card ===== */
.mobile-os .mcard{background:linear-gradient(180deg,var(--glass2),var(--glass));border:1px solid var(--line);border-radius:16px;padding:15px;margin-top:14px}
.mobile-os .mcard-h{display:flex;align-items:center;justify-content:space-between;font-family:var(--head);font-size:10.5px;letter-spacing:.16em;color:var(--txt-dim);text-transform:uppercase;margin-bottom:12px}
.mobile-os .mcard-h a{color:var(--pink);font-family:var(--body);font-size:11px;font-weight:600;letter-spacing:0;cursor:pointer}
.mobile-os .mcard-h .views{color:#fff;font-family:var(--body);font-size:11px;letter-spacing:0}

/* ===== mobile: running right now ===== */
.mobile-os .mrun .mrow{display:flex;align-items:center;gap:9px;padding:9px 0;border-bottom:1px solid var(--line)}
.mobile-os .mrun .mrow:last-child{border-bottom:0;padding-bottom:0}
.mobile-os .mrun .ic{width:30px;height:30px;border-radius:9px;background:var(--glass2);display:grid;place-items:center;flex:none}
.mobile-os .mrun .t{flex:1;min-width:0}
.mobile-os .mrun .t b{font-size:12px;font-weight:600;display:block;line-height:1.25}
.mobile-os .mrun .t span{font-size:10px;color:var(--txt-faint);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mobile-os .mrun .bar{width:50px;height:5px;border-radius:5px;background:rgba(255,255,255,.08);overflow:hidden;flex:none}
.mobile-os .mrun .bar i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,var(--c1),var(--c2))}
.mobile-os .mrun .pv{width:30px;text-align:right;font-size:11px;font-weight:700;flex:none}
.mobile-os .mrun .stt{width:62px;text-align:right;font-size:9.5px;font-weight:700;flex:none;white-space:nowrap}
.mobile-os .mrun .stt.green{color:var(--green)} .mobile-os .mrun .stt.pink{color:var(--danger)}
.mobile-os .mrun .stt.cyan{color:var(--cyan)} .mobile-os .mrun .stt.gold{color:var(--gold)}

/* ===== mobile: 3-up small cards ===== */
.mobile-os .mgrid3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.mobile-os .mgrid3 .mcard{margin-top:0;padding:11px 8px;text-align:center}
.mobile-os .ml{font-family:var(--head);font-size:8px;letter-spacing:.09em;color:var(--txt-dim);text-transform:uppercase;line-height:1.25;min-height:20px;margin-bottom:6px}
.mobile-os .mdonut{width:72px;height:72px;border-radius:50%;margin:2px auto 0;display:grid;place-items:center;position:relative;
  background:conic-gradient(var(--pink) 68%,rgba(255,255,255,.07) 0)}
.mobile-os .mdonut::before{content:'';position:absolute;inset:8px;border-radius:50%;background:var(--bg2)}
.mobile-os .mdonut b{position:relative;font-family:var(--head);font-size:15px;color:#fff}
.mobile-os .mc-sub{font-size:9px;color:var(--txt-faint);margin-top:7px}
.mobile-os .mc-num{font-family:var(--head);font-size:13px;margin-top:2px;color:var(--txt)}
.mobile-os .mc-faint{font-size:8.5px;color:var(--txt-faint);margin-top:2px}
.mobile-os .mc-faint b{font-family:var(--head);font-weight:400;font-size:9px}
.mobile-os .mbig{font-family:var(--head);font-size:22px;color:#fff;margin:6px 0 2px}
.mobile-os .mspark{height:30px;margin:4px 0}
.mobile-os .mc-row{display:flex;justify-content:space-between;gap:4px;font-size:8px;color:var(--txt-faint);margin-top:8px;text-align:left}
.mobile-os .mc-row b{display:block;font-family:var(--head);font-weight:400;font-size:11px;color:var(--txt);margin-top:1px}
.mobile-os .mbrain{height:54px;display:grid;place-items:center;margin:2px 0 4px}

/* ===== mobile: 2-up node + live ===== */
.mobile-os .mgrid2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.mobile-os .mgrid2 .mcard{margin-top:0;padding:13px}
.mobile-os .mnode .ndot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);display:inline-block}
.mobile-os .mnode-body{display:flex;gap:10px;align-items:center}
.mobile-os .mhex{flex:none;display:grid;place-items:center}
.mobile-os .mspecs{font-size:9.5px;color:var(--txt-dim);line-height:1.65;min-width:0}
.mobile-os .mspecs b{color:var(--txt);font-family:var(--head);font-size:11px;font-weight:400}
.mobile-os .mcr{margin-top:11px;text-align:center;font-size:10.5px;font-weight:700;color:var(--green);
  background:rgba(0,255,148,.08);border:1px solid rgba(0,255,148,.25);border-radius:9px;padding:7px}
.mobile-os .mlive-ph{position:relative;height:86px;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:linear-gradient(135deg,#2a0e16,#0b0d14)}
.mobile-os .mlive-ph img{width:100%;height:100%;object-fit:contain;object-position:center;opacity:.95}
.mobile-os .mlive-ph .lb{position:absolute;top:6px;left:6px;background:var(--danger);color:#fff;font-family:var(--head);font-size:8px;letter-spacing:.06em;padding:2px 6px;border-radius:4px}
.mobile-os .mlive-cap{margin-top:9px}
.mobile-os .mlive-cap b{display:block;font-family:var(--head);font-size:11px;letter-spacing:.03em;color:var(--txt)}
.mobile-os .mlive-cap .dim{font-size:10px;color:var(--txt-dim)}
.mobile-os .mgo{margin-top:10px;width:100%;background:linear-gradient(95deg,var(--pink),#ff5c97);border:0;color:#fff;font-family:var(--head);font-size:10px;letter-spacing:.08em;padding:9px;border-radius:9px;box-shadow:var(--pink-glow);cursor:pointer}

/* ===== mobile: listening bar (fixed) ===== */
.mobile-os .mlisten{position:fixed;left:12px;right:12px;bottom:12px;z-index:40;display:flex;align-items:center;gap:12px;padding:11px 15px;border-radius:16px;
  border:1px solid rgba(255,45,122,.45);background:linear-gradient(90deg,rgba(255,45,122,.14),rgba(16,8,14,.92));
  backdrop-filter:blur(10px);box-shadow:0 0 26px rgba(255,45,122,.25)}
.mobile-os .mstar{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle,#ff5c97,#FF2D7A);box-shadow:0 0 18px rgba(255,45,122,.6)}
.mobile-os .mlisten-t{min-width:0;flex:1}
.mobile-os .mlisten-t b{display:block;font-family:var(--head);font-size:12px;letter-spacing:.1em;color:var(--pink)}
.mobile-os .mlisten-t .s{font-size:11px;color:var(--txt-dim)}
.mobile-os .mwave{flex:none;opacity:.9}

/* ===== mobile: bottom tab bar (fixed) ===== */
.mobile-os .mnav{position:fixed;left:0;right:0;bottom:78px;z-index:41;height:66px;display:grid;grid-template-columns:repeat(5,1fr);align-items:center;
  background:rgba(7,10,15,.97);border-top:1px solid var(--line);backdrop-filter:blur(12px)}
.mobile-os .mnav a{display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--txt-faint);font-size:10px;font-weight:600;cursor:pointer}
.mobile-os .mnav a.active{color:var(--pink)}
.mobile-os .mnav .mid{position:relative}
.mobile-os .mnav .mid .cstar{position:absolute;top:-30px;left:50%;transform:translateX(-50%);width:56px;height:56px;border-radius:50%;
  display:grid;place-items:center;background:radial-gradient(circle,#ff5c97,#FF2D7A);box-shadow:0 0 24px rgba(255,45,122,.7);border:3px solid var(--bg0)}


/* mobile fix pass: donut/brain/cost/live/listening + hero icons */
.mobile-os .mbrain img{height:54px;width:auto;max-width:100%;object-fit:contain;filter:drop-shadow(0 0 10px rgba(255,45,122,.45))}
.mobile-os .mspark svg{display:block;width:100%;height:100%}
.mobile-os .mtbars{display:flex;align-items:flex-end;gap:2px;height:24px;margin-top:10px}
.mobile-os .mtbars i{flex:1;border-radius:1.5px;min-height:3px;background:linear-gradient(180deg,var(--pink),rgba(255,45,122,.45))}
.hero .btn .ic{display:inline-flex;align-items:center}
.hero .btn .ic svg{width:16px;height:16px;stroke:currentColor;vertical-align:-3px}
.hero .btn:nth-of-type(6) .ic{color:#00E7FF}.hero .btn:nth-of-type(7) .ic{color:#FF2D7A}

/* uploaded asset slots (set via /os-admin) */
.slotimg{display:inline-block;width:1.1em;height:1.1em;object-fit:contain;vertical-align:-2px}
.nav-item .slotimg{width:18px;height:18px}
.tile .head .slotimg{width:14px;height:14px;margin-right:3px}
.hero .btn .slotimg{width:16px;height:16px}
.mactions button .slotimg{width:18px;height:18px}
.mrun .slotimg{width:16px;height:16px}


/* desktop/iPad: Today's Cost + Memory Status cards (parity with mobile) */
.grid.gcards{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:760px){.grid.gcards{grid-template-columns:1fr}}
.costgraph{display:block;width:100%;height:70px;margin:12px 0 6px}
.memimg{width:112px;height:90px;object-fit:contain;border-radius:10px;flex:none;filter:drop-shadow(0 0 12px rgba(255,45,122,.42))}


/* token-usage bars (desktop/iPad) -> gradient increasing, matches mockup */
#tokenBars{display:flex;align-items:flex-end;gap:3px}
#tokenBars i{flex:1;display:block;min-height:3px;border-radius:2px;background:linear-gradient(180deg,var(--pink),rgba(255,45,122,.45))}

/* profile avatars -> pink glowing ring (top-right + bottom-left) */
.av-sm,.usercard .av{border:2px solid var(--pink) !important;box-shadow:0 0 14px rgba(255,45,122,.55) !important;background:#0a0c12 !important}
.usercard .av{border-radius:50% !important}
.usercard .av img{border-radius:50% !important;object-fit:cover}
.av-sm img{object-fit:cover}

/* "MAKI is listening" orb image (mobile) */
.mobile-os .mstar{background:none !important;box-shadow:none !important;overflow:visible}
.mobile-os .mstar img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 8px rgba(255,45,122,.6))}
.mobile-os .mnav .mid .cstar{background:none !important;box-shadow:none !important;border:none !important}
.mobile-os .mnav .mid .cstar img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 12px rgba(255,45,122,.7))}


/* "MAKI is listening" orb animation: spin +/-90deg back-and-forth + 25% center pulse */
@keyframes makiOrbSpin{0%{transform:rotate(0deg) scale(1)}25%{transform:rotate(90deg) scale(.75)}50%{transform:rotate(0deg) scale(1)}75%{transform:rotate(-90deg) scale(.75)}100%{transform:rotate(0deg) scale(1)}}
.mobile-os .mstar img,.mobile-os .mnav .mid .cstar img{transform-origin:center center;animation:makiOrbSpin 3.6s ease-in-out infinite;will-change:transform}

/* memory image fills its box edge-to-edge (touch the border) */
.memimg{width:112px;height:96px;object-fit:cover !important;border-radius:10px;filter:none !important}
.mobile-os .mbrain{height:auto !important;margin:2px -8px 6px !important;display:block}
.mobile-os .mbrain img{width:100% !important;height:84px !important;max-width:none !important;object-fit:cover !important;border-radius:8px !important;filter:none !important}


/* "MAKI IS LISTENING" equalizer waveform animation (mobile only) */
@keyframes makiWave{0%,100%{transform:scaleY(.28)}50%{transform:scaleY(1)}}
.mobile-os .mlisten .mwave svg rect{transform-box:fill-box;transform-origin:center center;animation:makiWave .9s ease-in-out infinite;will-change:transform}
.mobile-os .mlisten .mwave svg rect:nth-child(2n){animation-duration:1.05s}
.mobile-os .mlisten .mwave svg rect:nth-child(3n){animation-duration:1.2s}
.mobile-os .mlisten .mwave svg rect:nth-child(1){animation-delay:0s}
.mobile-os .mlisten .mwave svg rect:nth-child(2){animation-delay:0.3s}
.mobile-os .mlisten .mwave svg rect:nth-child(3){animation-delay:0.12s}
.mobile-os .mlisten .mwave svg rect:nth-child(4){animation-delay:0.45s}
.mobile-os .mlisten .mwave svg rect:nth-child(5){animation-delay:0.2s}
.mobile-os .mlisten .mwave svg rect:nth-child(6){animation-delay:0.55s}
.mobile-os .mlisten .mwave svg rect:nth-child(7){animation-delay:0.08s}
.mobile-os .mlisten .mwave svg rect:nth-child(8){animation-delay:0.38s}
.mobile-os .mlisten .mwave svg rect:nth-child(9){animation-delay:0.25s}
.mobile-os .mlisten .mwave svg rect:nth-child(10){animation-delay:0.5s}
.mobile-os .mlisten .mwave svg rect:nth-child(11){animation-delay:0.15s}
.mobile-os .mlisten .mwave svg rect:nth-child(12){animation-delay:0.42s}
.mobile-os .mlisten .mwave svg rect:nth-child(13){animation-delay:0.05s}
.mobile-os .mlisten .mwave svg rect:nth-child(14){animation-delay:0.33s}
.mobile-os .mlisten .mwave svg rect:nth-child(15){animation-delay:0.18s}