/* Fontes do próprio site: nada é carregado do Google. */
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url('/fonts/dm-sans-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'DM Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url('/fonts/dm-sans-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Pixelify Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url('/fonts/pixelify-sans-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Pixelify Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url('/fonts/pixelify-sans-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}

  :root {
    --bg: #e6e6e8;
    --ink: #1d1d22;
    --mute: #86868e;
    --lcd: #cdeee8;
    --lcd-ink: #5a55b4;
    --lav: #a99be6;
    --lav-dark: #8a7bd8;
    --pix: "Pixelify Sans", "Courier New", monospace;
    --sans: "DM Sans", Arial, sans-serif;
    --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  }
  @property --b1 { syntax: "<color>"; inherits: true; initial-value: #FF6FB1; }
  @property --b2 { syntax: "<color>"; inherits: true; initial-value: #FFF466; }
  @property --b3 { syntax: "<color>"; inherits: true; initial-value: #7AD7F0; }
  @property --b4 { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
  @property --base { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
  :root { transition: --b1 .7s ease, --b2 .7s ease, --b3 .7s ease, --b4 .7s ease, --base .7s ease; }
  * { box-sizing: border-box; }
  html, body { margin: 0; min-height: 100%; }
  body {
    background: color-mix(in srgb, var(--base) 16%, #ececee); color: var(--ink); font-family: var(--sans);
    min-height: 100vh; position: relative; overflow-x: hidden;
  }
  .page { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; padding: 0 16px; }
  .skip { position: absolute; left: 16px; top: -60px; background: #fff; padding: 10px 14px; border-radius: 10px; z-index: 20; }
  .skip:focus { top: 12px; }
  .top { width: min(1000px, 100%); margin: 0 auto; display: flex; align-items: center; gap: 18px; padding: 22px 0 6px; }
  .wordmark { font-weight: 650; font-size: 24px; letter-spacing: -1.4px; color: var(--ink); text-decoration: none; white-space: nowrap; }
  .top-note { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #5d5d66; }
  .top-link { margin-left: auto; font-size: 13px; color: var(--ink); border-bottom: 1px solid currentColor; padding-bottom: 3px; text-decoration: none; }
  .foot { width: min(1000px, 100%); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; padding: 34px 0 30px; font-size: 13px; color: #3f3f48; }
  .foot a { color: inherit; }
  .foot p { margin: 0; }
  .foot .wordmark { font-size: 20px; }
  .foot nav { margin-left: auto; display: flex; gap: 20px; }
  .top a:focus-visible, .foot a:focus-visible, .skip:focus-visible { outline: 3px solid var(--lav-dark); outline-offset: 3px; border-radius: 4px; }
  .nojs { max-width: 520px; margin: 40px auto; padding: 24px; border-radius: 20px; background: rgba(255,255,255,.7); }
  /* manchas de gradiente com grão, no fundo */
  .blob { position: fixed; border-radius: 50%; filter: blur(70px); opacity: .75; pointer-events: none; z-index: 0; }
  .b1 { width: 46vmax; height: 46vmax; left: -14vmax; bottom: -16vmax; background: var(--b1); opacity: .6; }
  .b2 { width: 38vmax; height: 38vmax; right: -12vmax; top: -14vmax; background: var(--b2); opacity: .55; }
  .b3 { width: 16vmax; height: 16vmax; right: 18vmax; bottom: 6vmax; background: var(--b3); opacity: .7; }
  body::after { content: ""; position: fixed; inset: 0; background: var(--grain); opacity: .16; mix-blend-mode: multiply; pointer-events: none; z-index: 0; }

  .stage {
    position: relative; z-index: 1; width: min(1000px, 100%); margin: auto; padding: 18px 0;
    display: grid; grid-template-columns: minmax(300px, 380px) minmax(280px, 1fr);
    gap: 56px; align-items: center; justify-content: center;
  }

  /* ---------- aparelho ---------- */
  .device-wrap { display: flex; flex-direction: column; align-items: center; }
  .device {
    position: relative; width: min(360px, 100%);
    padding: 16px 20px 26px; border-radius: 46px;
    background: linear-gradient(150deg, rgba(150,222,246,.82), rgba(176,190,248,.8) 70%);
    border: 1.5px solid rgba(255,255,255,.75);
    box-shadow: 0 40px 70px -28px rgba(70,90,190,.55), 0 8px 18px -8px rgba(70,90,190,.3),
                inset 0 2px 0 rgba(255,255,255,.9), inset 0 -14px 30px rgba(110,140,255,.25);
    backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2);
  }
  .device::before { /* circuitos visíveis pela casca translúcida */
    content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: .35; pointer-events: none;
    background:
      linear-gradient(#6f86d8 1px, transparent 1px) 0 62% / 100% 38px,
      linear-gradient(90deg, #6f86d8 1px, transparent 1px) 18% 0 / 46px 100%;
    -webkit-mask: radial-gradient(ellipse at 50% 78%, #000 0 38%, transparent 70%);
            mask: radial-gradient(ellipse at 50% 78%, #000 0 38%, transparent 70%);
  }
  .screw { position: absolute; width: 11px; height: 11px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff, #b8c6ee 60%, #8fa0d8); box-shadow: 0 1px 2px rgba(50,60,140,.4); }
  .screw::after { content: ""; position: absolute; left: 2px; right: 2px; top: 50%; height: 1.5px; background: #7d8cc8; transform: rotate(40deg); }
  .s1 { left: 14px; top: 14px; } .s2 { right: 14px; top: 14px; } .s3 { left: 14px; bottom: 14px; } .s4 { right: 14px; bottom: 14px; }

  .cart { width: 66%; height: 40px; margin: 0 auto 14px; border-radius: 14px 14px 6px 6px;
    background: linear-gradient(rgba(214,220,252,.95), rgba(190,198,246,.9)); border: 1.5px solid rgba(255,255,255,.8);
    display: grid; place-items: center; box-shadow: inset 0 -3px 6px rgba(120,130,220,.25); }
  .cart i { display: block; width: 78%; height: 18px; border-radius: 7px; background: rgba(240,242,255,.9); border: 1.5px solid #8c93dd; }

  .bezel { background: #14183a; border-radius: 22px; padding: 11px;
    box-shadow: 0 0 0 4px rgba(122,132,244,.6), 0 0 0 5.5px rgba(255,255,255,.5), inset 0 0 0 2px #2b3274; }
  .lcd {
    position: relative; height: 216px; border-radius: 10px; padding: 8px 12px 8px;
    background: var(--lcd); color: var(--lcd-ink); font-family: var(--pix); display: flex; flex-direction: column;
    background-image: linear-gradient(rgba(70,70,170,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(70,70,170,.07) 1px, transparent 1px);
    background-size: 3px 3px; overflow: hidden;
  }
  .lcd::before, .lcd::after { content: ""; position: absolute; width: 10px; height: 10px; border: 2px solid var(--lcd-ink); opacity: .7; }
  .lcd::before { left: 6px; top: 6px; border-right: 0; border-bottom: 0; }
  .lcd::after { right: 6px; top: 6px; border-left: 0; border-bottom: 0; }
  .lcd.rolling { filter: brightness(1.03); }
  @keyframes flick { 50% { filter: brightness(1.06) contrast(.96); } }
  .lcd-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 17px; font-weight: 600; letter-spacing: .04em; padding: 4px 6px 4px; border-bottom: 2px dotted rgba(90,85,180,.45); margin-bottom: 4px; }
  .lcd-head small { font-size: 12px; font-weight: 500; border: 2px solid var(--lcd-ink); border-radius: 8px; padding: 0 7px; }
  .row { all: unset; box-sizing: border-box; display: grid; grid-template-columns: 14px 1fr auto; column-gap: 2px; align-items: start;
    width: 100%; flex: 1; padding: 3px 4px; cursor: pointer; }
  .row:focus-visible { outline: 2px dashed var(--lcd-ink); outline-offset: -2px; }
  .row .cur { visibility: hidden; width: 0; height: 0; margin-top: 5px; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent var(--lcd-ink); }
  .row.on .cur { visibility: visible; animation: blink 1s steps(2) infinite; }
  @keyframes blink { 50% { opacity: 0; } }
  .row .lab { font-size: 11.5px; font-weight: 500; letter-spacing: .1em; opacity: .85; line-height: 13px; grid-column: 2; }
  .row .val { grid-column: 2; font-size: 15px; font-weight: 500; line-height: 1.05; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
  .row .val .sw { display: inline-flex; gap: 3px; margin-left: 6px; vertical-align: -1px; }
  .row .val .sw i { display: inline-block; width: 10px; height: 10px; border: 1.5px solid var(--lcd-ink); }
  .row .lk { grid-column: 3; grid-row: 1 / span 2; font-size: 9px; border: 2px solid var(--lcd-ink); padding: 1px 4px; margin-top: 3px; display: none; letter-spacing: .08em; }
  .row.locked .lk { display: block; }
  .row { transition: background-color .25s ease; }
  .row.on { background: rgba(90,85,180,.12); }
  .lcd-foot { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 2px 4px 0; border-top: 2px dotted rgba(90,85,180,.45); margin-top: 4px; padding-top: 5px; }
  .lcd-foot .msg { flex: 1; text-align: center; letter-spacing: .08em; min-height: 14px; }
  .batt { display: inline-flex; gap: 2px; border: 2px solid var(--lcd-ink); padding: 1px 2px; }
  .batt i { width: 4px; height: 7px; background: var(--lcd-ink); }

  /* controles */
  .controls { position: relative; display: grid; grid-template-columns: 124px 1fr 124px; align-items: center; margin-top: 22px; padding: 0 2px; }
  .dpad { position: relative; width: 124px; height: 124px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.6), rgba(205,215,250,.45)); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.8), 0 6px 14px -6px rgba(70,90,190,.4); }
  .cross { position: absolute; inset: 12px; }
  .cross::before, .cross::after { content: ""; position: absolute; border-radius: 10px;
    background: linear-gradient(160deg, #b9adf2, var(--lav-dark)); box-shadow: inset 0 2px 0 rgba(255,255,255,.55), inset 0 -3px 4px rgba(70,50,170,.3), 0 3px 6px rgba(60,50,160,.35); }
  .cross::before { left: 0; right: 0; top: 33%; bottom: 33%; }
  .cross::after { top: 0; bottom: 0; left: 33%; right: 33%; }
  .dp { all: unset; position: absolute; z-index: 2; width: 34%; height: 34%; display: grid; place-items: center; cursor: pointer; color: #5a49b8; font-size: 12px; border-radius: 8px; }
  .dp { transition: background-color .2s; }
  .dp:active { background: rgba(60,40,160,.18); }
  .dp:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
  .dp.u { left: 33%; top: 0; } .dp.d { left: 33%; bottom: 0; } .dp.l { left: 0; top: 33%; } .dp.r { right: 0; top: 33%; }
  .mid { display: grid; justify-items: center; gap: 18px; }
  .spark { color: #6b5fd0; font-size: 26px; line-height: 1; text-shadow: 0 0 10px rgba(255,255,255,.9); }
  .speaker { width: 54px; height: 38px; background: radial-gradient(circle, #5e6fc2 1.6px, transparent 2px) 0 0 / 8px 8px; opacity: .7; }
  .ab { position: relative; width: 124px; height: 100px; }
  .round { all: unset; position: absolute; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
    font: 600 22px var(--sans); color: #5a49b8; background: radial-gradient(circle at 35% 28%, #cfc6fa, var(--lav-dark));
    box-shadow: inset 0 2px 0 rgba(255,255,255,.6), inset 0 -4px 6px rgba(70,50,170,.3), 0 5px 10px rgba(60,50,160,.4), 0 0 0 6px rgba(255,255,255,.28); transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s; }
  .round:active { transform: translateY(2px) scale(.97); }
  .round:focus-visible, .pill:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
  .round.a { right: 0; top: 0; } .round.b { left: 4px; bottom: 0; }
  .pills { display: flex; justify-content: center; gap: 18px; margin-top: 20px; }
  .pill { all: unset; cursor: pointer; font: 600 12px var(--sans); letter-spacing: .06em; color: #5a49b8; padding: 7px 20px; border-radius: 999px;
    background: linear-gradient(#c9bff8, var(--lav-dark)); box-shadow: inset 0 2px 0 rgba(255,255,255,.55), 0 3px 6px rgba(60,50,160,.35); }
  .pill { transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s; }
  .pill:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(60,40,160,.35); }

  /* ---------- cards no estilo do aparelho ---------- */
  .cards { display: grid; gap: 22px; width: 100%; max-width: 470px; }
  .gb { position: relative; padding: 12px 16px 16px; border-radius: 34px;
    background: linear-gradient(150deg, rgba(150,222,246,.82), rgba(176,190,248,.8) 70%);
    border: 1.5px solid rgba(255,255,255,.75);
    box-shadow: 0 30px 56px -28px rgba(70,90,190,.55), 0 6px 14px -8px rgba(70,90,190,.3),
                inset 0 2px 0 rgba(255,255,255,.9), inset 0 -12px 26px rgba(110,140,255,.25);
    backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2);
    transition: transform .6s cubic-bezier(.2,.8,.2,1), box-shadow .6s cubic-bezier(.2,.8,.2,1); }
  .gb:hover { transform: translateY(-3px); box-shadow: 0 38px 62px -28px rgba(70,90,190,.6), 0 8px 16px -8px rgba(70,90,190,.3), inset 0 2px 0 rgba(255,255,255,.9), inset 0 -12px 26px rgba(110,140,255,.25); }
  .gb::before { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: .3; pointer-events: none;
    background: linear-gradient(#6f86d8 1px, transparent 1px) 0 70% / 100% 34px, linear-gradient(90deg, #6f86d8 1px, transparent 1px) 80% 0 / 42px 100%;
    -webkit-mask: radial-gradient(ellipse at 85% 100%, #000 0 30%, transparent 70%); mask: radial-gradient(ellipse at 85% 100%, #000 0 30%, transparent 70%); }
  .gb .screw { width: 9px; height: 9px; }
  .gb .screw::after { left: 1.5px; right: 1.5px; height: 1.2px; }
  .gb .s1 { left: 11px; top: 11px; } .gb .s2 { right: 11px; top: 11px; } .gb .s3 { left: 11px; bottom: 11px; } .gb .s4 { right: 11px; bottom: 11px; }
  .gb-label { display: block; width: max-content; margin: 0 auto 10px; font: 600 10px var(--sans); letter-spacing: .18em; color: #5a49b8;
    padding: 5px 18px; border-radius: 999px; background: linear-gradient(rgba(224,220,253,.95), rgba(190,180,246,.9));
    box-shadow: inset 0 1.5px 0 rgba(255,255,255,.8), 0 2px 4px rgba(60,50,160,.25); }
  .gb.pop { animation: settle .8s cubic-bezier(.2,.8,.2,1) both; }
  @keyframes settle { 0% { transform: scale(.982); } 55% { transform: scale(1.01); } 100% { transform: scale(1); } }

  .lcd2 { height: auto; min-height: 168px; padding-bottom: 10px; }
  .lcd2 .lcd-foot { margin-top: auto; }
  .px-name { font-size: clamp(28px, 4.6vw, 42px); font-weight: 600; letter-spacing: .02em; line-height: 1.04; margin: 12px 4px 4px; word-break: break-word; }
  .px-name.sm { font-size: 22px; margin: 10px 4px 10px; }
  .px-cat { font-size: 16px; opacity: .85; margin: 0 4px 10px; }
  .px-tec { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 4px 12px; font-size: 13px; line-height: 1.2; }
  .px-pill { border: 2px solid var(--lcd-ink); border-radius: 8px; padding: 0 8px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
  .lcd2 .sp { position: absolute; right: 16px; top: 54px; font-size: 14px; opacity: .55; letter-spacing: 6px; writing-mode: vertical-rl; }
  .px-grad { position: relative; height: 104px; margin: 10px 4px 0; border: 3px solid var(--lcd-ink); overflow: hidden;
    background:
      radial-gradient(circle at 14% 22%, var(--b1) 0, transparent 62%),
      radial-gradient(circle at 88% 18%, var(--b2) 0, transparent 58%),
      radial-gradient(circle at 58% 100%, var(--b3) 0, transparent 64%),
      radial-gradient(circle at 10% 100%, var(--b4) 0, transparent 50%),
      var(--base); }
  .px-grad::after { content: ""; position: absolute; inset: 0; background: var(--grain); opacity: .45; mix-blend-mode: overlay; pointer-events: none; }
  .px-pal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0 4px 4px; }
  .px-pal div { display: grid; gap: 5px; justify-items: center; }
  .px-pal i { display: block; width: 100%; aspect-ratio: 1 / .66; border: 3px solid var(--lcd-ink); outline: 2px solid rgba(255,255,255,.55); outline-offset: -5px; image-rendering: pixelated;
    box-shadow: inset 5px 5px 0 rgba(255,255,255,.4), inset -5px -5px 0 rgba(20,20,80,.22); transition: background-color .22s ease; }
  .px-pal b { font-size: 11px; font-weight: 500; letter-spacing: .02em; }
  .px-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 1px; }
  .px-list li button { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 8px; padding: 3px 6px; cursor: pointer; font-size: 14px; transition: background-color .2s; }
  .px-list .h-open::before { content: ""; flex: none; width: 0; height: 0; border-style: solid; border-width: 4px 0 4px 6px; border-color: transparent transparent transparent var(--lcd-ink); visibility: hidden; }
  .px-list li button:hover, .px-list li button:focus-visible { background: rgba(90,85,180,.14); }
  .px-list li { display: flex; align-items: center; }
  .px-list .h-open:hover::before, .px-list .h-open:focus-visible::before { visibility: visible; }
  .px-list .h-open { flex: 1; min-width: 0; }
  .px-list .t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .px-list .dots { display: inline-flex; gap: 2px; }
  .px-list .dots i { width: 9px; height: 9px; border: 1.5px solid var(--lcd-ink); }
  .card-hist .lcd2 { min-height: 128px; }
  .px-empty { margin: 14px 6px 6px; font-size: 14px; opacity: .75; letter-spacing: .08em; }
  .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

  /* ---------- compartilhar ---------- */
  .share-open { all: unset; cursor: pointer; margin-top: 18px; font: 600 13px var(--sans); letter-spacing: .06em; color: #5a49b8; padding: 10px 22px; border-radius: 999px;
    background: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.9); box-shadow: 0 8px 20px -10px rgba(70,90,190,.45), inset 0 1px 0 #fff;
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s; }
  .share-open:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -12px rgba(70,90,190,.5), inset 0 1px 0 #fff; }
  .share-open:focus-visible, .share-act button:focus-visible, .fmt:focus-visible, .share-x:focus-visible { outline: 3px solid var(--lav-dark); outline-offset: 3px; }
  dialog.share { border: 0; padding: 0; background: transparent; width: min(1000px, 96vw); max-width: none; max-height: 96vh; overflow: visible; color: var(--ink); }
  dialog.share::backdrop { background: rgba(40,40,70,.38); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
  dialog.share[open] { animation: dlgin .4s cubic-bezier(.2,.8,.2,1); }
  @keyframes dlgin { from { opacity: 0; transform: translateY(12px) scale(.985); } }
  .share-in { border-radius: 36px; padding: 22px; display: grid; gap: 18px 24px; max-height: 94vh; overflow: auto;
    grid-template-columns: minmax(0, 1fr) 300px; grid-template-areas: "top top" "stage side";
    background: rgba(246,246,250,.88); border: 1px solid #fff; box-shadow: 0 40px 80px -30px rgba(0,0,0,.45), inset 0 1px 0 #fff;
    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
  .share-top { grid-area: top; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
  .share-top h2 { margin: 0; font-size: 22px; font-weight: 500; letter-spacing: -.02em; }
  .share-top p { margin: 4px 0 0; font-size: 13.5px; color: var(--mute); }
  .share-x { all: unset; flex: none; cursor: pointer; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.15); font-size: 14px; transition: transform .25s cubic-bezier(.2,.8,.2,1); }
  .share-x:hover { transform: rotate(90deg); }
  .stage-prev { grid-area: stage; display: grid; place-items: center; min-height: 320px; padding: 22px; border-radius: 26px; overflow: hidden;
    background: radial-gradient(circle at 20% 15%, rgba(255,45,138,.10), transparent 55%), radial-gradient(circle at 85% 90%, rgba(255,244,102,.22), transparent 50%), rgba(0,0,0,.045);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.05); }
  #cv { display: block; max-width: 100%; max-height: min(70vh, 680px); width: auto; height: auto; border-radius: 14px;
    box-shadow: 0 24px 50px -22px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.06); transition: opacity .25s ease; }
  #cv.loading { opacity: .35; }
  .share-side { grid-area: side; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
  .fmts { display: grid; gap: 8px; }
  .fmt { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-radius: 18px;
    background: rgba(255,255,255,.55); box-shadow: inset 0 0 0 1px rgba(0,0,0,.07); transition: background-color .25s, box-shadow .25s, transform .25s cubic-bezier(.2,.8,.2,1); }
  .fmt:hover { transform: translateY(-1px); background: rgba(255,255,255,.85); }
  .fmt i { flex: none; display: block; height: 38px; border-radius: 5px; background: linear-gradient(150deg, #98def5, #b0bcf8); box-shadow: inset 0 0 0 2px rgba(255,255,255,.7), 0 2px 6px rgba(70,90,190,.3); position: relative; }
  .fmt i::after { content: ""; position: absolute; inset: 22% 18%; border-radius: 2px; background: var(--lcd); box-shadow: 0 0 0 2px #14183a; }
  .fmt span { display: grid; gap: 1px; }
  .fmt b { font-size: 15px; font-weight: 600; }
  .fmt em { font-style: normal; font-size: 12.5px; color: var(--mute); }
  .fmt[aria-pressed="true"] { background: #fff; box-shadow: inset 0 0 0 2px var(--lav-dark), 0 8px 18px -10px rgba(90,70,200,.55); }
  .fmt[aria-pressed="true"] b { color: #4b3bb0; }
  .dims { margin: 2px 2px 0; font-size: 12.5px; color: var(--mute); line-height: 1.4; }
  .share-act { display: grid; gap: 8px; margin-top: auto; padding-top: 6px; }
  .share-act button { all: unset; box-sizing: border-box; cursor: pointer; text-align: center; padding: 13px 20px; border-radius: 999px; font: 600 14.5px var(--sans); background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.15);
    transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s; }
  .share-act button:hover { transform: translateY(-2px); box-shadow: 0 8px 16px -8px rgba(0,0,0,.3); }
  .share-act .go { background: linear-gradient(#cfc7fa, var(--lav-dark)); color: #2d1f7a; box-shadow: inset 0 1.5px 0 rgba(255,255,255,.6), 0 6px 14px rgba(60,50,160,.3); }
  .share-note { margin: 0; font-size: 13px; color: #4b3bb0; min-height: 18px; line-height: 1.35; }
  @media (max-width: 760px) {
    .share-in { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "stage" "side"; padding: 16px; gap: 14px; }
    .stage-prev { min-height: 0; padding: 14px; }
    #cv { max-height: 46vh; }
    .fmts { grid-template-columns: repeat(3, 1fr); }
    .fmt { flex-direction: column; gap: 6px; padding: 10px 6px; text-align: center; }
    .fmt i { height: 30px; }
    .share-act { grid-template-columns: 1fr 1fr; } .share-act .go { grid-column: 1 / -1; }
  }

  /* movimento suave no fundo e nos botões */
  .blob { will-change: transform; }
  .b1 { animation: drift1 26s ease-in-out infinite alternate; }
  .b2 { animation: drift2 30s ease-in-out infinite alternate; }
  .b3 { animation: drift3 22s ease-in-out infinite alternate; }
  @keyframes drift1 { to { transform: translate(7vmax, -6vmax) scale(1.1); } }
  @keyframes drift2 { to { transform: translate(-8vmax, 7vmax) scale(1.08); } }
  @keyframes drift3 { to { transform: translate(-6vmax, -5vmax) scale(1.25); } }

  @media (max-width: 860px) {
    .stage { grid-template-columns: minmax(0, 1fr); gap: 30px; justify-items: center; }
  }
  @media (prefers-reduced-motion: reduce) {
    .gb, .gb.pop, .blob, dialog.share[open] { animation: none !important; transition: none; } .row.on .cur { animation: none; }
  }

/* ---------- ícones desenhados (no lugar de glifos que viram emoji no iPhone) ---------- */
.ic { display: inline-block; width: 1em; height: 1em; fill: currentColor; flex: none; vertical-align: -.12em; }
.ic-heart { width: 15px; height: 13px; }
.ic-spark { width: 13px; height: 13px; }
.dp .ic { width: 11px; height: 11px; }
.spark .ic { width: 26px; height: 26px; filter: drop-shadow(0 0 6px rgba(255,255,255,.9)); }
.lcd-foot .msg { display: flex; justify-content: center; align-items: center; gap: 8px; }
.sp { display: grid; gap: 8px; }
.sp .ic { width: 13px; height: 13px; }
.share-open .ic, .share-x .ic { width: 14px; height: 14px; }
.share-open { display: inline-flex; align-items: center; gap: 8px; }
.ic-line { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: square; }
.h-fav { color: var(--lcd-ink); --sf: none; }
.h-fav[aria-pressed="true"] { --sf: currentColor; }
.h-fav .ic { width: 15px; height: 15px; }

/* ---------- paletas de 4 ou 5 cores ---------- */
.px-pal { grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 6px; }
.px-pal.n5 { gap: 5px; }
.px-pal b { font-size: 11px; letter-spacing: 0; }
.px-pal.n5 b { font-size: 9px; }
.px-pal .hs { opacity: .8; }

/* ---------- histórico ---------- */
.px-list { max-height: 232px; overflow-y: auto; margin: 8px 0 0; scrollbar-width: thin; scrollbar-color: var(--lcd-ink) transparent; }
.px-list li { gap: 2px; }
.px-list .h-fav { all: unset; box-sizing: border-box; cursor: pointer; display: grid; place-items: center; width: 28px; height: 28px; color: var(--lcd-ink); --sf: none; }
.px-list .h-fav[aria-pressed="true"] { --sf: currentColor; }
.px-list .h-fav:focus-visible { outline: 2px dashed var(--lcd-ink); outline-offset: -2px; }
.lcd-btn { all: unset; box-sizing: border-box; cursor: pointer; margin-left: auto; font: 500 12px var(--pix); letter-spacing: .08em; border: 2px solid var(--lcd-ink); border-radius: 8px; padding: 0 8px; transition: background-color .2s, color .2s; }
.lcd-btn:hover, .lcd-btn:focus-visible { background: var(--lcd-ink); color: var(--lcd); }
.lcd-btn[hidden] { display: none; }
.lcd-head .lcd-btn + small { margin-left: 8px; }
.lcd-head .lcd-btn { margin-right: 4px; }

/* ---------- janela de compartilhar: ícone do fechar ---------- */
.share-x { color: var(--ink); }
.share-act .hl { box-shadow: inset 0 0 0 1.5px rgba(90,70,200,.35), 0 1px 4px rgba(0,0,0,.1); }

/* ---------- telas pequenas (390 e 320 px) ---------- */
.device { --pad: clamp(92px, 30vw, 124px); }
.controls { grid-template-columns: var(--pad) minmax(0, 1fr) var(--pad); }
.dpad { width: var(--pad); height: var(--pad); }
.ab { width: var(--pad); height: calc(var(--pad) * .8); }
.round { width: calc(var(--pad) * .47); height: calc(var(--pad) * .47); font-size: calc(var(--pad) * .18); }
@media (max-width: 380px) {
  .device { padding: 14px 14px 22px; }
  .speaker { display: none; }
  .row .val { font-size: 14px; }
  .px-name { font-size: 26px; }
  .top-note { display: none; }
}
@media (max-width: 760px) {
  .page { padding: 0 12px; }
  .top-note { display: none; }
}
@media (max-width: 520px) { .px-pal.n5 .hs { display: none; } }
.lcd-foot .msg, .lcd-foot .msg > span { white-space: nowrap; }
.lcd-foot .msg { min-width: 0; overflow: hidden; }
@media (max-width: 560px) { .lcd2 .sp { display: none; } }
:root { font-variant-emoji: text; }

/* ---------- apresentação: telinha no estilo do aparelho ---------- */
.intro { width: min(360px, 100%); margin: 0 0 20px; }
.intro .bezel { box-shadow: 0 0 0 4px rgba(122,132,244,.6), 0 0 0 5.5px rgba(255,255,255,.5), inset 0 0 0 2px #2b3274, 0 18px 34px -18px rgba(70,90,190,.55); }
.intro-lcd { height: auto; min-height: 0; padding: 24px 22px 22px; display: block; }
.intro-lcd h1 { margin: 0 0 12px; padding-bottom: 12px; border-bottom: 2px dotted rgba(74,68,168,.5); font: 600 clamp(28px, 4.4vw, 36px)/1.05 var(--pix); letter-spacing: .01em; color: #4a44a8; }
.intro-lcd p { margin: 0; font: 500 15.5px/1.55 var(--sans); color: #26235e; }

/* ---------- como usar: quadro com fundo próprio, legível sobre qualquer cor ---------- */
.hint { width: min(360px, 100%); margin: 18px 0 0; padding: 16px 18px 14px; border-radius: 26px; text-align: left; color: #25252c;
  background: rgba(255,255,255,.86); border: 1px solid #fff; box-shadow: 0 18px 36px -22px rgba(0,0,0,.35), inset 0 1px 0 #fff;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.hint-t { margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #5a49b8; }
.hint ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.hint li { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: center; gap: 12px; font-size: 14px; line-height: 1.35; }
.hint .keys { display: flex; gap: 5px; }
.hint kbd { display: inline-grid; place-items: center; min-width: 30px; height: 28px; padding: 0 9px; border-radius: 9px; font: 700 11px/1 var(--sans); letter-spacing: .05em; color: #2d1f7a;
  background: linear-gradient(#d8d0fb, #b3a6ee); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.7), 0 2px 0 rgba(60,50,160,.4); }
.hint .k-ic { width: 30px; padding: 0; }
.hint .k-ic .ic { width: 11px; height: 11px; }
.hint-k { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid rgba(0,0,0,.1); font-size: 12.5px; line-height: 1.45; color: #4a4a54; }
@media (max-width: 380px) { .hint li { grid-template-columns: 82px minmax(0, 1fr); gap: 10px; font-size: 13.5px; } }
.share-act button:disabled { opacity: .5; cursor: progress; transform: none; box-shadow: none; }