/* ============================================================
   Feature page — page-specific styles.
   Reuses the shared system (tokens.css + styles.css): .wrap, .btn,
   .capsule, .section, .hero-cta, .faq, .cta, .testi-* , header, footer.
   Only the Feature-page components live here, all prefixed `fx-`.
   ============================================================ */

/* ---------- hero ---------- */
.fx-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--cta-bg) 0%, #fff 100%);
  padding: 44px 0 72px;
}
.fx-hero .wrap { position: relative; }
.fx-hero-scene { margin: 0 auto 8px; width: min(540px, 64%); image-rendering: pixelated; }
.fx-hero-copy { max-width: 780px; margin-inline: auto; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 22px; }
.fx-hero-copy h1 { font-size: clamp(34px, 6vw, 56px); font-weight: 700; color: var(--ink); line-height: 1.14; }
.fx-hero-copy .fx-sub { font-size: 16px; font-weight: 500; color: var(--muted); max-width: 620px; }
.fx-hero .hero-cta { margin-top: 6px; }

/* decorative chat bubbles */
.fx-bubble { position: absolute; display: none; background: #fff; border-radius: 20px;
  box-shadow: var(--shadow-card); padding: 13px 17px; z-index: 2; }
.fx-bubble i { display: block; width: 32px; height: 6px; border-radius: 3px; background: #d7dbe0; }
.fx-bubble i + i { margin-top: 6px; width: 20px; }
.fx-bubble::after { content: ""; position: absolute; bottom: -7px; width: 14px; height: 14px;
  background: #fff; border-radius: 3px; transform: rotate(45deg); }
.fx-bubble.l { left: 6%; top: 30px; } .fx-bubble.l::after { left: 22px; }
.fx-bubble.r { right: 6%; top: 30px; } .fx-bubble.r::after { right: 22px; }
@media (min-width: 1024px) { .fx-bubble { display: block; } }

/* ---------- feature section ---------- */
.fx-feature { position: relative; overflow: hidden; }
.fx-feature .wrap { position: relative; }
.fx-wm {
  position: absolute; top: -0.30em; left: -8px; z-index: 0;
  font-family: var(--font); font-weight: 700; line-height: 1;
  font-size: clamp(130px, 22vw, 320px); color: var(--surface);
  pointer-events: none; user-select: none;
}
.fx-wm.right { left: auto; right: -8px; }
/* reverse sections (04, 05): watermark sits behind the text column on the right */
.fx-feature.reverse .fx-wm { left: 56%; right: auto; }

.fx-grid { position: relative; z-index: 1; display: grid; gap: 40px; align-items: center; }
@media (min-width: 1024px) {
  /* image column locked at 557 (never cropped/squeezed); text column shrinks to
     fit so 557+557 no longer overflows the wrap at 1024–1240 (was cutting the
     image off via body overflow-x:clip). */
  .fx-grid { grid-template-columns: minmax(0, 557px) 557px; justify-content: space-between; }
  .fx-feature.reverse .fx-grid { grid-template-columns: 557px minmax(0, 557px); }
  .fx-feature.reverse .fx-col-text { order: 2; }
  .fx-feature.reverse .fx-col-media { order: 1; }
}
.fx-col-text { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.fx-title { font-size: clamp(26px, 3.4vw, 40px); font-weight: 700; color: var(--ink); line-height: 1.15; }
.fx-lead { font-size: 16px; font-weight: 500; color: var(--muted); max-width: 557px; }

/* accordion / feature bullets — first row active (mint), rest collapsed */
.fx-acc { width: 100%; display: flex; flex-direction: column; gap: 16px; margin-top: 8px; }
.fx-acc-item { background: #f7f7f7; border-radius: var(--r-lg); padding: 16px;
  display: flex; flex-direction: column; gap: 8px; transition: background .2s ease; }
.fx-acc-item.active { background: var(--cta-bg); }
.fx-acc-item:not(.active) { cursor: pointer; }
.fx-acc-item:not(.active):hover { background: #f0f1f2; }
.fx-acc-head { display: flex; align-items: center; gap: 16px; }
.fx-acc-head .ic { width: 16px; height: 16px; flex: 0 0 16px; color: var(--ink); font-size: 12px; line-height: 16px; }
.fx-acc-head .t { font-size: 16px; font-weight: 500; color: var(--ink); }
.fx-acc-desc { padding-left: 32px; }
.fx-acc-desc p { font-size: 16px; color: var(--muted); }
.fx-acc-item:not(.active) .fx-acc-desc { display: none; }

/* media column */
.fx-col-media { display: flex; justify-content: center; }
.fx-card-img { width: 100%; max-width: 557px; border-radius: var(--r-xl); }

/* accordion-driven card set: images stacked, active one cross-fades in */
.fx-cards { position: relative; width: 100%; max-width: 557px; aspect-ratio: 557 / 500; }
.fx-cards .fx-card-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; opacity: 0; transition: opacity .45s ease; max-width: none;
}
.fx-cards .fx-card-img.is-active { opacity: 1; }

/* centered feature (03 share-screen, 06 member cards) */
.fx-feature.center .fx-head { text-align: center; max-width: 720px; margin: 0 auto 32px;
  display: flex; flex-direction: column; align-items: center; gap: 16px; position: relative; z-index: 1; }
.fx-feature.center .fx-title { text-align: center; }

/* share-screen mock (blueprint, per Figma) + live meeting overlay accents */
.fx-share-wrap { position: relative; width: 100%; max-width: 1360px; margin: 0 auto; z-index: 1; }
.fx-share { width: 100%; display: block; border-radius: var(--r-lg); }

/* --- large screens (>=1440): a real "shared screen" video plays in the mock,
   with the 3 centre tiles re-drawn on top so they aren't covered --- */
.fx-screenvid {
  position: absolute; left: 22%; top: 12%; width: 52%; height: 72%;
  overflow: hidden; border-radius: 6px; display: none; background: #11131a;
}
.fx-screenvid video { width: 100%; height: 100%; object-fit: cover; display: block; }
.fx-retile {
  position: absolute; left: var(--l); top: var(--t); width: var(--w); height: var(--h);
  border-radius: 9px; object-fit: cover; display: none;
  box-shadow: 0 8px 18px rgba(20,24,40,.22);
}
@media (min-width: 1440px) { .fx-screenvid, .fx-retile { display: block; } }

/* annotation cursor gliding over the shared screen (screen-share review feel) */
.fx-pen {
  position: absolute; top: 0; left: 0; width: 16px; height: 16px; z-index: 3;
  border-radius: 50% 50% 50% 2px; background: var(--green);
  box-shadow: 0 0 0 4px rgba(88,214,141,.28), 0 4px 10px rgba(20,24,40,.3);
  animation: fxPen 7s ease-in-out infinite;
}
@keyframes fxPen {
  0%   { transform: translate(60%, 40%) rotate(-35deg); }
  25%  { transform: translate(340%, 120%) rotate(-35deg); }
  50%  { transform: translate(700%, 260%) rotate(-35deg); }
  75%  { transform: translate(300%, 360%) rotate(-35deg); }
  100% { transform: translate(60%, 40%) rotate(-35deg); }
}

/* overlay layer sits over the flat mock; children positioned by % of the mock */
.fx-meet { position: absolute; inset: 0; pointer-events: none; }

/* per-participant tile hotspot (rects map the 6 tiles in feat-share.png 1360x720) */
.fx-tile {
  position: absolute; left: var(--l); top: var(--t); width: var(--w); height: var(--h);
  border-radius: 10px; transition: box-shadow .3s ease;
}
/* A. speaking ring — each tile lights up on its OWN random schedule (JS) */
.fx-tile.speaking { box-shadow: 0 0 0 3px var(--green), 0 0 20px 3px rgba(88,214,141,.55); }
/* B. live presence dot on every tile */
.fx-tile .fx-live { position: absolute; top: 7px; left: 7px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--green); box-shadow: 0 0 0 2px #fff; }
.fx-tile .fx-live::after { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--green); animation: fxDot 2s ease-out infinite; }
@keyframes fxDot { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(3.2); opacity: 0; } }
/* waveform — shows only while that tile is "speaking" */
.fx-wave { position: absolute; bottom: 7px; right: 7px; display: flex; align-items: flex-end;
  gap: 2px; height: 14px; opacity: 0; transition: opacity .25s ease; }
.fx-wave i { width: 3px; height: 40%; border-radius: 2px; background: var(--green); box-shadow: 0 0 0 1px rgba(0,0,0,.15); }
.fx-tile.speaking .fx-wave { opacity: 1; }
.fx-tile.speaking .fx-wave i { animation: fxWave .7s ease-in-out infinite; }
.fx-tile.speaking .fx-wave i:nth-child(2) { animation-delay: .12s; }
.fx-tile.speaking .fx-wave i:nth-child(3) { animation-delay: .24s; }
.fx-tile.speaking .fx-wave i:nth-child(4) { animation-delay: .06s; }
@keyframes fxWave { 0%, 100% { height: 30%; } 50% { height: 100%; } }

/* C. record button blink (positioned over the toolbar record icon) */
.fx-rec { position: absolute; left: 51.6%; top: 89%; width: 12px; height: 12px;
  border-radius: 50%; background: #ff4136; box-shadow: 0 0 8px 1px rgba(255,65,54,.7);
  animation: fxRec 1.3s ease-in-out infinite; }
@keyframes fxRec { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

@media (prefers-reduced-motion: reduce) {
  .fx-tile.speaking { box-shadow: 0 0 0 3px var(--green); }
  .fx-tile .fx-live::after, .fx-rec, .fx-pen,
  .fx-tile.speaking .fx-wave i { animation: none; }
  .fx-screenvid video { display: none; }
}

/* member cards row — illustration card (gray bg baked into image), caption below (per Figma) */
/* head→cards vertical gap: .fx-head margin-bottom (32px) + this margin-top (24px)
   = 56px, a touch more breathing room than the section head alone.
   wider column gap (40px) so the pixel avatars that bleed to card edges
   don't read as touching across cards */
.fx-member-row { display: grid; gap: 40px; margin-top: 24px; position: relative; z-index: 1; }
@media (min-width: 768px) { .fx-member-row { grid-template-columns: repeat(3, 1fr); } }
.fx-member { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.fx-member-img { width: 100%; display: block;
  transition: transform .3s cubic-bezier(.22,.61,.36,1), filter .3s ease; }
.fx-member h3 { font-size: 18px; font-weight: 600; color: var(--ink); margin-top: 16px; transition: color .25s ease; }
.fx-member p { font-size: 15px; color: var(--muted); margin-top: 8px; }
/* hover: card lifts with a shape-hugging shadow, title turns green */
.fx-member:hover .fx-member-img { transform: translateY(-8px); filter: drop-shadow(0 16px 26px rgba(20,24,40,.14)); }
.fx-member:hover h3 { color: var(--green); }
@media (hover: none) { .fx-member:hover .fx-member-img { transform: none; filter: none; } }
@media (prefers-reduced-motion: reduce) { .fx-member:hover .fx-member-img { transform: none; } }

/* CTA image (feature page uses the pixel map) */
.fx-feature-cta .cta-right { background: var(--cta-bg); }

/* ---- testimonials: static 3-column staggered grid (per Figma) ---- */
.fx-testi { position: relative; display: grid; gap: 24px; margin-top: 40px; text-align: left; }
@media (min-width: 640px)  { .fx-testi { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .fx-testi { grid-template-columns: repeat(3, 1fr); } }
.fx-testi-col { display: flex; flex-direction: column; gap: 24px; }
.fx-tcard {
  background: #fff; border: 1px solid var(--border); border-radius: var(--r-xl);
  padding: 24px; display: flex; flex-direction: column; gap: 16px; box-shadow: var(--shadow-soft);
}
.fx-tcard .fx-stars { color: var(--star); font-size: 16px; letter-spacing: 2px; line-height: 1; }
.fx-tcard blockquote { font-size: 15px; line-height: 1.55; color: var(--muted); }
/* equalise the upper cards so the bottom "Daniel Kim" card lines up across all 3 columns */
@media (min-width: 1024px) { .fx-testi-col .fx-tcard:not(:last-child) blockquote { min-height: 70px; } }
.fx-tcard blockquote b { color: var(--ink-2); font-weight: 600; }
.fx-tcard figcaption { display: flex; align-items: center; gap: 12px; }
.fx-tcard figcaption img { width: 44px; height: 44px; border-radius: 50%; flex: 0 0 44px; object-fit: cover; }
.fx-tcard .who { display: flex; flex-direction: column; gap: 2px; }
.fx-tcard .who b { font-size: 14px; font-weight: 600; color: var(--ink-2); }
.fx-tcard .who .role { font-size: 13px; color: var(--muted); }
/* bottom row melts away like Figma — fade each column's LAST card equally
   (columns are height-aligned above, so all 3 fade identically) */
@media (min-width: 1024px) {
  .fx-testi-col .fx-tcard:last-child {
    -webkit-mask-image: linear-gradient(180deg, #000 8%, rgba(0,0,0,.18) 96%);
            mask-image: linear-gradient(180deg, #000 8%, rgba(0,0,0,.18) 96%);
  }
}

/* ============ §03 Meetings — live screen-share meeting window (ported from meeting-preview) ============ */
.mtg{position:relative;z-index:1;width:100%;
  --mint:#38e0b0;--mint-2:#12c79a;--mtg-ink:#0e1420;--mtg-line:rgba(255,255,255,.08);
  --mtg-white:#f4f7fb;--mtg-radius:22px;--mtg-code:'SF Mono','JetBrains Mono','Fira Code',ui-monospace,monospace;
  background:linear-gradient(160deg,#7ff0cf 0%,#63e6c0 55%,#57e2ba 100%);
  border-radius:34px;padding:clamp(34px,5vw,72px) clamp(70px,10vw,150px);
  box-shadow:0 40px 90px -40px rgba(20,120,95,.45);}
.mtg .stage{position:relative;z-index:2;width:100%;perspective:1600px}
.mtg .win{position:relative;border-radius:var(--mtg-radius);overflow:hidden;background:var(--mtg-ink);
  box-shadow:0 40px 90px -30px rgba(12,30,50,.5);
  border:1px solid rgba(255,255,255,.06);animation:mtgFloat 9s ease-in-out infinite}
.mtg .bar{display:flex;align-items:center;gap:14px;padding:15px 20px;background:#161d2b;border-bottom:1px solid var(--mtg-line)}
.mtg .room{display:flex;align-items:center;gap:14px;color:var(--mtg-white);font-weight:600;font-size:15px}
.mtg .room .rdiv{width:1px;height:20px;background:rgba(255,255,255,.16)}
.mtg .room .count{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:#d3dcea;background:rgba(255,255,255,.06);padding:6px 10px;border-radius:10px}
.mtg .room .count svg{width:15px;height:15px;color:#9fb0c6}
.mtg .room .count .chev{width:13px;height:13px}
.mtg .bar .spacer{flex:1}
.mtg .bar-icons{display:flex;gap:8px}
.mtg .icobtn{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:transparent;border:1px solid rgba(255,255,255,.13);color:#b9c4d6;cursor:pointer;transition:.2s}
.mtg .icobtn:hover{background:rgba(255,255,255,.08)}
.mtg .icobtn svg{width:17px;height:17px}
.mtg .screen{position:relative;aspect-ratio:16/9;background:#0b0f18;overflow:hidden}
.mtg .present{position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:6;display:flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;background:rgba(10,15,24,.7);backdrop-filter:blur(8px);border:1px solid var(--mtg-line);color:var(--mtg-white);font-size:12.5px;font-weight:600}
.mtg .present b{color:var(--mint)}
.mtg .present .ss{width:15px;height:15px;color:var(--mint)}
.mtg .app{position:absolute;inset:44px 26px 26px;border-radius:14px;overflow:hidden;background:#12161f;box-shadow:0 20px 50px -20px rgba(0,0,0,.6);display:flex;flex-direction:column;border:1px solid rgba(255,255,255,.06)}
.mtg .app-bar{display:flex;align-items:center;gap:10px;padding:9px 13px;background:#1b202b;border-bottom:1px solid var(--mtg-line)}
.mtg .app-bar .u{flex:1;height:24px;border-radius:7px;background:#0e1119;display:flex;align-items:center;padding:0 11px;color:#7d8aa0;font-size:11.5px;font-family:var(--mtg-code);gap:7px}
.mtg .app-bar .u svg{width:12px;height:12px;color:#5fd7b3}
.mtg .app-body{flex:1;display:flex;min-height:0}
.mtg .editor{width:47%;background:#0e1219;border-right:1px solid var(--mtg-line);display:flex;flex-direction:column}
.mtg .mtg-tabs{display:flex;gap:2px;padding:8px 10px 0;background:#12161f}
.mtg .mtg-tabs span{font-family:var(--mtg-code);font-size:11px;color:#7d8aa0;padding:6px 12px;border-radius:8px 8px 0 0}
.mtg .mtg-tabs span.on{background:#0e1219;color:var(--mint)}
.mtg .code{flex:1;padding:14px 4px 14px 0;font-family:var(--mtg-code);font-size:12.5px;line-height:1.85;overflow:hidden}
.mtg .code .ln{display:flex;white-space:pre}
.mtg .code .g{width:34px;text-align:right;padding-right:14px;color:#3c4558;flex:none;user-select:none}
.mtg .code .ctok{color:#c9d3e3}
.mtg .kw{color:#c792ea}.mtg .tagn{color:#f07178}.mtg .attr{color:#ffcb6b}.mtg .str{color:#c3e88d}.mtg .pr{color:#82aaff}.mtg .com{color:#546178}
.mtg .caret{display:inline-block;width:7px;height:15px;background:var(--mint);vertical-align:-3px;margin-left:1px;animation:mtgBlink 1s steps(1) infinite}
.mtg .estatus{display:flex;align-items:center;gap:14px;padding:6px 13px;background:#12c79a;color:#04261d;font-family:var(--mtg-code);font-size:10.5px;font-weight:600}
.mtg .estatus .br{display:flex;align-items:center;gap:5px}
.mtg .estatus svg{width:11px;height:11px}
.mtg .estatus .sp{flex:1}
.mtg .prev{flex:1;background:#f5f8fc;position:relative;overflow:hidden}
.mtg .prev-top{height:26px;background:#fff;border-bottom:1px solid #e6ecf3;display:flex;align-items:center;gap:6px;padding:0 12px}
.mtg .prev-top i{width:8px;height:8px;border-radius:50%;background:#dfe6ef}
.mtg .prev-top i:first-child{background:#12c79a}
.mtg .prev-body{padding:20px 22px}
.mtg .rp{opacity:0;transform:translateY(14px);animation:mtgRise .6s forwards}
.mtg .rp .pill{display:inline-block;font-size:9px;font-weight:700;color:#0a8f6e;background:#d4f7ec;padding:4px 9px;border-radius:99px}
.mtg .rp h3{font-size:17px;color:#111a26;margin:11px 0 8px;line-height:1.2;font-weight:800;letter-spacing:-.01em}
.mtg .rp p{font-size:10.5px;color:#6b7688;line-height:1.55;max-width:230px}
.mtg .rp.btns{display:flex;gap:8px;margin-top:13px}
.mtg .rp.btns b{font-size:10px;font-weight:700;padding:8px 14px;border-radius:9px}
.mtg .rp.btns b.pri{background:#12c79a;color:#04261d}
.mtg .rp.btns b.sec{background:#e9eef5;color:#3a475a}
.mtg .rp.cards{display:flex;gap:9px;margin-top:18px}
.mtg .rp.cards div{flex:1;height:52px;border-radius:11px;background:linear-gradient(135deg,#e8fdf6,#d6f0ff);border:1px solid #d4ece4}
.mtg .rp.cards div:nth-child(2){background:linear-gradient(135deg,#fff2e0,#ffe3ea)}
.mtg .rp.cards div:nth-child(3){background:linear-gradient(135deg,#eae3ff,#e0ecff)}
.mtg .cursor{position:absolute;width:20px;height:20px;z-index:8;pointer-events:none;animation:mtgCursor 11s ease-in-out infinite}
.mtg .cursor svg{filter:drop-shadow(0 2px 3px rgba(0,0,0,.4))}
.mtg .cursor::after{content:"Sarah";position:absolute;left:16px;top:14px;font-size:10px;font-weight:700;color:#fff;background:var(--mint-2);padding:2px 7px;border-radius:6px;white-space:nowrap}
.mtg .tile{position:absolute;z-index:7;border-radius:14px;overflow:hidden;aspect-ratio:4/3;border:2px solid rgba(255,255,255,.14);box-shadow:0 16px 34px -14px rgba(0,0,0,.6);background:#222 center/cover no-repeat;animation:mtgBreathe 7s ease-in-out infinite}
.mtg .tile .cam{width:100%;height:100%;object-fit:cover;object-position:center 22%;display:block}
.mtg .tile .nm{position:absolute;left:8px;bottom:8px;display:flex;align-items:center;gap:6px;padding:4px 9px;border-radius:8px;background:rgba(10,15,24,.72);backdrop-filter:blur(4px);color:#fff;font-size:11px;font-weight:600}
.mtg .tile .nm .mic{width:12px;height:12px;color:#8fe9cd}
.mtg .tile .nm .mic.off{color:#ff7784}
.mtg .tile.speaking{border-color:var(--mint);box-shadow:0 0 0 3px rgba(56,224,176,.55),0 16px 34px -14px rgba(0,0,0,.6)}
.mtg .wave{position:absolute;right:8px;bottom:9px;display:none;align-items:flex-end;gap:2px;height:14px}
.mtg .tile.speaking .wave{display:flex}
.mtg .wave i{width:3px;background:var(--mint);border-radius:2px;height:5px;animation:mtgWv .7s ease-in-out infinite}
.mtg .wave i:nth-child(2){animation-delay:.12s}.mtg .wave i:nth-child(3){animation-delay:.24s}.mtg .wave i:nth-child(4){animation-delay:.36s}
.mtg .t2{width:19%;top:22%;right:4.5%}
.mtg .tile.self{width:19%;left:4.5%;bottom:16%;border-color:var(--mint)}
.mtg .react{position:absolute;bottom:20%;left:50%;font-size:26px;z-index:9;opacity:0;pointer-events:none}
.mtg .react.go{animation:mtgFloatUp 2.6s ease-out forwards}
.mtg .controls{display:flex;align-items:center;justify-content:center;gap:12px;padding:16px;background:linear-gradient(180deg,#141a26,#10151f);border-top:1px solid var(--mtg-line)}
.mtg .cbtn{height:48px;border-radius:14px;display:inline-flex;align-items:center;gap:8px;padding:0 15px;cursor:pointer;transition:.2s;color:#c6d0e0;background:rgba(255,255,255,.07)}
.mtg .cbtn:hover{background:rgba(255,255,255,.13);transform:translateY(-2px)}
.mtg .cbtn svg{width:22px;height:22px}
.mtg .cbtn .chev{width:14px;height:14px;opacity:.85}
.mtg .cbtn.green{background:#2e5749;color:#5fe0b6}
.mtg .cbtn.green:hover{background:#356354}
.mtg .cbtn.green .chev{color:#9fc3b4}
.mtg .cbtn.blue{background:#2f6bff;color:#fff}
.mtg .cbtn.blue:hover{background:#3f78ff}
.mtg .cbtn.round{width:48px;justify-content:center;padding:0}
.mtg .cbtn.ghost{background:transparent;color:#e2e9f3}
.mtg .cbtn.ghost:hover{background:rgba(255,255,255,.08)}
.mtg .cbtn.ghost .chev{color:#9fb0c6}
.mtg .cdiv{width:1px;height:30px;background:rgba(255,255,255,.16);margin:0 4px}
@keyframes mtgFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes mtgBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.012)}}
@keyframes mtgWv{0%,100%{height:5px}50%{height:14px}}
@keyframes mtgBlink{0%,100%{opacity:1}50%{opacity:0}}
@keyframes mtgRise{to{opacity:1;transform:none}}
@keyframes mtgFloatUp{0%{opacity:0;transform:translateY(0) scale(.6)}15%{opacity:1;transform:translateY(-30px) scale(1.1)}100%{opacity:0;transform:translateY(-180px) scale(1)}}
@keyframes mtgCursor{0%{left:60%;top:30%}22%{left:74%;top:52%}44%{left:64%;top:80%}66%{left:30%;top:48%}88%{left:33%;top:26%}100%{left:60%;top:30%}}
@media(prefers-reduced-motion:reduce){
  .mtg *{animation:none!important}
  .mtg .code .ln{opacity:1!important}
}
@media(max-width:640px){
  .mtg{padding:22px 14px 46px;border-radius:22px}
  .mtg .screen{aspect-ratio:3/4}
  .mtg .app{inset:38px 10px 10px}
  .mtg .app-body{flex-direction:column}
  .mtg .editor{width:100%;height:46%;border-right:0;border-bottom:1px solid var(--mtg-line)}
  .mtg .prev{height:54%}
  .mtg .code{font-size:10px;line-height:1.7}
  .mtg .code .g{width:24px;padding-right:8px}
  .mtg .prev-body{padding:14px 15px}.mtg .rp h3{font-size:14px}.mtg .rp p{font-size:9px}
  .mtg .present{font-size:10.5px;padding:5px 10px;max-width:82%;text-align:center}
  .mtg .app-bar .u{font-size:9.5px}
  .mtg .t2{width:32%;top:7%;right:-2%}
  .mtg .tile.self{width:32%;bottom:20%;left:-2%}
  .mtg .tile .nm{font-size:9px;padding:3px 6px}
  .mtg .controls{gap:6px;padding:12px 6px}
  .mtg .cbtn{height:42px;padding:0 10px}.mtg .cbtn svg{width:19px;height:19px}.mtg .cbtn.round{width:42px}
  .mtg .bar{padding:12px 12px}.mtg .room{font-size:13px;gap:10px}.mtg .icobtn{width:32px;height:32px}
}