/* ============================================================
   GLASS — the look, in one place, for the website and the note editor
   (both load this last). Real glass, the way a game's menus do it, from
   a few cheap layers and no script:
   - Something to see through: soft glows in the accent (the colour
     someone picked), the brand's orange and pink, fixed behind the page,
     so a card picks up their colour as it scrolls over them.
   - Thin glass: about half see-through, blurred and saturated behind,
     so the colour comes through as a tint and never as shapes.
   - A lit rim: bright along the top and left edge, faint along the
     bottom and right, as light catches a pane's edge (inset shadows).
   - A specular sheen: a soft highlight in the top-left corner, fading.
   - A whisper of frost: a fine grain (a tiny tiled noise SVG), so it
     reads as frosted glass and not as a see-through rectangle.
   Dark: smoked glass, the rim and sheen dimmer, the glows deeper.
   Menus and what's read over things are thicker glass; text holds 4.5:1
   on every one, over the brightest glow. Asked for less transparency (or
   Windows high contrast, or printing): plain, solid.
============================================================ */
:root{
  --glass:        color-mix(in srgb, var(--accent) 3%, rgba(255,255,255,.66));   /* cards, bars: one tint (a breath of your colour) wherever they sit */
  --glass-strong: rgba(255,255,255,.80);             /* menus, popovers: what you read over things */
  --glass-app:    rgba(255,255,255,.86);             /* the editor's page */
  --glass-line:   rgba(40,22,70,.10);                /* the hairline round it */
  --glass-edge:   rgba(255,255,255,.95);             /* the light along its top */
  --glass-rim:    inset 1px 1px 0 rgba(255,255,255,.9), inset -1px -1px 0 rgba(255,255,255,.28), inset 0 0 0 1px rgba(255,255,255,.22);
  --glass-sheen:  radial-gradient(130% 85% at 0% 0%, rgba(255,255,255,.62), rgba(255,255,255,0) 52%),
                  linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0) 38%);
  --glass-grain:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --glass-blur:   saturate(125%) blur(26px);   /* (gently: the glows behind colour every panel alike, not each its own) */
  --glass-lift:   0 1px 2px rgba(40,22,70,.05), 0 14px 36px -16px rgba(40,22,70,.26);
  --glass-lift-hi:0 2px 6px rgba(40,22,70,.08), 0 26px 64px -20px rgba(40,22,70,.36);
  --bevel:        inset 0 1px 0 rgba(255,255,255,.30), inset 0 -1px 0 rgba(0,0,0,.10);   /* a button's edge: light above, shade below */
  --ambient:
    radial-gradient(78vw 42vw at 46% -10%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%),   /* (across the top: every panel under it alike) */
    radial-gradient(42vw 34vw at 102% 8%, color-mix(in srgb, var(--grad-a) 14%, transparent), transparent 70%),
    radial-gradient(46vw 40vw at 88% 72%, color-mix(in srgb, var(--grad-b) 9%, transparent), transparent 70%),
    radial-gradient(64vw 46vw at 22% 108%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 70%);
}
:root[data-theme="dark"]{
  --glass:        color-mix(in srgb, var(--accent) 6%, rgba(30,24,42,.68));
  --glass-strong: rgba(24,19,32,.82);
  --glass-app:    rgba(21,17,28,.84);
  --glass-line:   rgba(255,255,255,.08);
  --glass-edge:   rgba(255,255,255,.10);
  --glass-rim:    inset 1px 1px 0 rgba(255,255,255,.16), inset -1px -1px 0 rgba(255,255,255,.035), inset 0 0 0 1px rgba(255,255,255,.05);
  --glass-sheen:  radial-gradient(130% 85% at 0% 0%, rgba(255,255,255,.10), rgba(255,255,255,0) 52%),
                  linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0) 38%);
  --glass-grain:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --glass-blur:   saturate(110%) blur(28px);
  --glass-lift:   0 1px 2px rgba(0,0,0,.35), 0 16px 40px -16px rgba(0,0,0,.7);
  --glass-lift-hi:0 2px 8px rgba(0,0,0,.4), 0 30px 74px -20px rgba(0,0,0,.8);
  --bevel:        inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(0,0,0,.25);
  --ambient:
    radial-gradient(78vw 42vw at 46% -10%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 70%),
    radial-gradient(42vw 34vw at 102% 8%, color-mix(in srgb, var(--grad-a) 12%, transparent), transparent 70%),
    radial-gradient(46vw 40vw at 88% 72%, color-mix(in srgb, var(--grad-b) 10%, transparent), transparent 70%),
    radial-gradient(64vw 46vw at 22% 108%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%);
}

/* ---------- scrollbars: slim glass, everywhere ----------
   Drawn the way Windows 11 draws its own, in the glass's colors:
   - at rest, a slim pill, evenly inset, with quiet chevron arrows at
     each end (a hint of the person's color in it);
   - the pointer over the scrolling area: the pill fills out, the arrows
     sharpen; over the pill itself (or dragging it): fuller still, in the
     person's color; over an arrow: a soft rounded ground under it;
   - the bar's own width never changes (only what's drawn in it), so the
     words beside it never move; the pill is never shorter than 28 px,
     however long the page, so it's always easy to grab.
   Chrome, Edge and Safari draw it this way. Firefox, which only lets a
   page choose the width and colors, gets the slim version in the same
   colors (and no arrows). Phones keep their own overlay scrollbars. */
:root{
  --sb-size:14px;
  --sb-thumb:       color-mix(in srgb, var(--accent, #7a2cf5) 12%, rgba(40,22,70,.26));
  --sb-thumb-near:  color-mix(in srgb, var(--accent, #7a2cf5) 18%, rgba(40,22,70,.36));
  --sb-thumb-on:    color-mix(in srgb, var(--accent, #7a2cf5) 70%, rgba(40,22,70,.5));
  --sb-rail:        rgba(40,22,70,.045);
  --sb-press:       rgba(40,22,70,.08);
  --sb-up:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M4.25 8.5 7 5.75 9.75 8.5' fill='none' stroke='rgb(40,22,70)' stroke-opacity='0.32' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --sb-up-near:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M4.25 8.5 7 5.75 9.75 8.5' fill='none' stroke='rgb(40,22,70)' stroke-opacity='0.55' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --sb-up-on:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M4.25 8.5 7 5.75 9.75 8.5' fill='none' stroke='rgb(40,22,70)' stroke-opacity='0.85' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --sb-down:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M4.25 5.5 7 8.25 9.75 5.5' fill='none' stroke='rgb(40,22,70)' stroke-opacity='0.32' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --sb-down-near:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M4.25 5.5 7 8.25 9.75 5.5' fill='none' stroke='rgb(40,22,70)' stroke-opacity='0.55' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --sb-down-on:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M4.25 5.5 7 8.25 9.75 5.5' fill='none' stroke='rgb(40,22,70)' stroke-opacity='0.85' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --sb-left:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M8.5 4.25 5.75 7 8.5 9.75' fill='none' stroke='rgb(40,22,70)' stroke-opacity='0.32' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --sb-left-near:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M8.5 4.25 5.75 7 8.5 9.75' fill='none' stroke='rgb(40,22,70)' stroke-opacity='0.55' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --sb-left-on:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M8.5 4.25 5.75 7 8.5 9.75' fill='none' stroke='rgb(40,22,70)' stroke-opacity='0.85' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --sb-right:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M5.5 4.25 8.25 7 5.5 9.75' fill='none' stroke='rgb(40,22,70)' stroke-opacity='0.32' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --sb-right-near:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M5.5 4.25 8.25 7 5.5 9.75' fill='none' stroke='rgb(40,22,70)' stroke-opacity='0.55' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --sb-right-on:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M5.5 4.25 8.25 7 5.5 9.75' fill='none' stroke='rgb(40,22,70)' stroke-opacity='0.85' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
:root[data-theme="dark"]{
  --sb-thumb:       color-mix(in srgb, var(--accent, #7a2cf5) 18%, rgba(255,255,255,.2));
  --sb-thumb-near:  color-mix(in srgb, var(--accent, #7a2cf5) 26%, rgba(255,255,255,.3));
  --sb-thumb-on:    color-mix(in srgb, var(--accent, #7a2cf5) 70%, rgba(255,255,255,.45));
  --sb-rail:        rgba(255,255,255,.045);
  --sb-press:       rgba(255,255,255,.09);
  --sb-up:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M4.25 8.5 7 5.75 9.75 8.5' fill='none' stroke='rgb(245,243,248)' stroke-opacity='0.34' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --sb-up-near:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M4.25 8.5 7 5.75 9.75 8.5' fill='none' stroke='rgb(245,243,248)' stroke-opacity='0.6' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --sb-up-on:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M4.25 8.5 7 5.75 9.75 8.5' fill='none' stroke='rgb(245,243,248)' stroke-opacity='0.9' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --sb-down:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M4.25 5.5 7 8.25 9.75 5.5' fill='none' stroke='rgb(245,243,248)' stroke-opacity='0.34' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --sb-down-near:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M4.25 5.5 7 8.25 9.75 5.5' fill='none' stroke='rgb(245,243,248)' stroke-opacity='0.6' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --sb-down-on:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M4.25 5.5 7 8.25 9.75 5.5' fill='none' stroke='rgb(245,243,248)' stroke-opacity='0.9' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --sb-left:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M8.5 4.25 5.75 7 8.5 9.75' fill='none' stroke='rgb(245,243,248)' stroke-opacity='0.34' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --sb-left-near:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M8.5 4.25 5.75 7 8.5 9.75' fill='none' stroke='rgb(245,243,248)' stroke-opacity='0.6' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --sb-left-on:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M8.5 4.25 5.75 7 8.5 9.75' fill='none' stroke='rgb(245,243,248)' stroke-opacity='0.9' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --sb-right:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M5.5 4.25 8.25 7 5.5 9.75' fill='none' stroke='rgb(245,243,248)' stroke-opacity='0.34' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --sb-right-near:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M5.5 4.25 8.25 7 5.5 9.75' fill='none' stroke='rgb(245,243,248)' stroke-opacity='0.6' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --sb-right-on:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M5.5 4.25 8.25 7 5.5 9.75' fill='none' stroke='rgb(245,243,248)' stroke-opacity='0.9' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
@supports selector(::-webkit-scrollbar){
  ::-webkit-scrollbar{width:var(--sb-size);height:var(--sb-size);background:transparent;}
  ::-webkit-scrollbar-corner{background:transparent;}
  /* the rail: clear at rest, a faint groove with the pointer over the scrolling area */
  ::-webkit-scrollbar-track{background:transparent;border-radius:999px;}
  :hover::-webkit-scrollbar-track{background:var(--sb-rail);}
  /* the pill: 6 px at rest, 8 with the pointer near, 10 under it; always 4 px clear of the arrows */
  ::-webkit-scrollbar-thumb{min-height:28px;min-width:28px;border-radius:999px;border:4px solid transparent;background-clip:padding-box;background-color:var(--sb-thumb);}
  :hover::-webkit-scrollbar-thumb{border-width:3px;background-color:var(--sb-thumb-near);}
  ::-webkit-scrollbar-thumb:hover,::-webkit-scrollbar-thumb:active{border-width:2px;background-color:var(--sb-thumb-on);}
  /* the arrows: one at each end (never the doubled pairs), a chevron each */
  ::-webkit-scrollbar-button{display:block;width:var(--sb-size);height:var(--sb-size);border-radius:5px;background-color:transparent;background-repeat:no-repeat;background-position:center;background-size:14px 14px;}
  ::-webkit-scrollbar-button:vertical:start:increment,::-webkit-scrollbar-button:vertical:end:decrement,
  ::-webkit-scrollbar-button:horizontal:start:increment,::-webkit-scrollbar-button:horizontal:end:decrement{display:none;}
  ::-webkit-scrollbar-button:vertical:start:decrement{background-image:var(--sb-up);}
  ::-webkit-scrollbar-button:vertical:end:increment{background-image:var(--sb-down);}
  ::-webkit-scrollbar-button:horizontal:start:decrement{background-image:var(--sb-left);}
  ::-webkit-scrollbar-button:horizontal:end:increment{background-image:var(--sb-right);}
  :hover::-webkit-scrollbar-button:vertical:start:decrement{background-image:var(--sb-up-near);}
  :hover::-webkit-scrollbar-button:vertical:end:increment{background-image:var(--sb-down-near);}
  :hover::-webkit-scrollbar-button:horizontal:start:decrement{background-image:var(--sb-left-near);}
  :hover::-webkit-scrollbar-button:horizontal:end:increment{background-image:var(--sb-right-near);}
  ::-webkit-scrollbar-button:vertical:start:decrement:hover{background-image:var(--sb-up-on);background-color:var(--sb-rail);}
  ::-webkit-scrollbar-button:vertical:end:increment:hover{background-image:var(--sb-down-on);background-color:var(--sb-rail);}
  ::-webkit-scrollbar-button:horizontal:start:decrement:hover{background-image:var(--sb-left-on);background-color:var(--sb-rail);}
  ::-webkit-scrollbar-button:horizontal:end:increment:hover{background-image:var(--sb-right-on);background-color:var(--sb-rail);}
  ::-webkit-scrollbar-button:active{background-color:var(--sb-press);}
}
@supports not selector(::-webkit-scrollbar){
  html,body,*{scrollbar-width:thin;scrollbar-color:var(--sb-thumb-near) transparent;}
}
@media (forced-colors: active){
  ::-webkit-scrollbar-thumb{background:ButtonText;}
}

/* the glow behind everything (fixed: it stays put as the page scrolls) */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--ambient);}

/* ---------- the website (site.css) ---------- */
.topbar{
  background:color-mix(in srgb, var(--glass) 92%, transparent);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border-bottom:1px solid var(--glass-line);
  box-shadow:inset 0 -1px 0 var(--glass-edge), 0 6px 24px -18px rgba(40,22,70,.35);
}
.card,.plan,.faq details,.compare-card,.pick,.kpi-sum,.kpi-card,.usage-card,.steps li,.founder,.about,.tile{
  background:var(--glass-sheen), var(--glass-grain), var(--glass);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border-color:var(--glass-line);
  box-shadow:var(--glass-rim), var(--glass-lift);
}
/* the home page's many panels sit over the soft glow alone, where a blur shows nothing: the same glass without it,
   so a long page scrolls as lightly on a phone as it did */
.steps li,.founder,.about,.tile{-webkit-backdrop-filter:none;backdrop-filter:none;}
.plan.featured,.compare-hero,.compare-card.is-zuno{
  box-shadow:var(--glass-rim), var(--glass-lift-hi);
}
/* the features band: a wash, not a wall, so the glow (and the glass on it) carries on through it */
.section.alt{background:color-mix(in srgb, var(--surface) 38%, transparent);border-color:var(--glass-line);}
footer.site{background:transparent;border-top-color:var(--glass-line);}
dialog.install-help{
  background:var(--glass-sheen), var(--glass-grain), var(--glass-strong);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border:1px solid var(--glass-line);box-shadow:var(--glass-rim), var(--glass-lift-hi);
}
/* buttons: a crisp bevel (light along the top, shade along the bottom), the Aero edge */
.btn{box-shadow:var(--bevel), 0 1px 2px rgba(40,22,70,.06);}
.btn:not(.primary){background-image:var(--glass-sheen);}
.btn.primary{box-shadow:inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(0,0,0,.14), 0 6px 18px -8px color-mix(in srgb, var(--accent) 60%, transparent);}
input[type=text],input[type=email],input[type=number],input[type=search],select,textarea{
  box-shadow:inset 0 1px 2px rgba(40,22,70,.06);
}

/* ---------- the note editor (index.html) ---------- */
/* The frosted blur is a layer of its own behind the page, not on #app
   itself: an element with a backdrop-filter becomes the frame for
   everything "fixed to the screen" inside it, so the share sheet pinned to
   the bottom of the screen landed at the bottom of a long note instead. */
#app{
  position:relative;
  background:transparent;   /* (its glass is on the layer behind it, ::before, so the music's glow can sit between the two: app.js THE GLOW) */
  box-shadow:0 0 0 1px var(--glass-line), 0 30px 80px -40px rgba(40,22,70,.25);
}
#app::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--glass-app);
  -webkit-backdrop-filter:saturate(140%) blur(28px);backdrop-filter:saturate(140%) blur(28px);
}
.md-editor{
  background:var(--glass-sheen), var(--glass-grain), var(--glass-strong);
  border-color:var(--glass-line);
  box-shadow:var(--glass-rim), var(--glass-lift);
}
.md-toolbar{
  background:var(--glass-sheen), color-mix(in srgb, var(--glass) 70%, transparent);
  border-bottom-color:var(--glass-line);
}
.filebar{
  background:var(--glass-sheen), var(--glass-grain), var(--glass);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border-color:var(--glass-line);
  box-shadow:var(--glass-rim), 0 1px 2px rgba(40,22,70,.05);
}
.titlebar{border-bottom-color:var(--glass-line);}
.popover,.menu,.tpl-menu,.gate-card,.zp-card,.person-card{
  background:var(--glass-sheen), var(--glass-grain), var(--glass-strong);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  border-color:var(--glass-line);
  box-shadow:var(--glass-rim), var(--glass-lift-hi);
}
.person-card{background:var(--glass-sheen), var(--glass-grain), color-mix(in srgb, var(--surface) 92%, transparent);}   /* hung over the header's words: thicker glass */
.toast,.upload-toast{
  background:color-mix(in srgb, var(--toast-bg) 82%, transparent);
  -webkit-backdrop-filter:saturate(160%) blur(16px);backdrop-filter:saturate(160%) blur(16px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), var(--glass-lift-hi);
}
.btn.btn-primary,.tool-save{box-shadow:inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(0,0,0,.14), 0 4px 14px -6px color-mix(in srgb, var(--accent) 55%, transparent);}
.tail-tab{
  background:var(--glass-sheen), var(--glass-grain), var(--glass-strong);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  box-shadow:var(--glass-rim), 0 4px 14px -6px rgba(40,22,70,.25);
}

/* ---------- plain and solid when asked (or no blur to be had) ---------- */
@media (prefers-reduced-transparency: reduce){
  :root,:root[data-theme="dark"]{ --glass:var(--surface); --glass-strong:var(--surface); --glass-app:var(--surface); --ambient:none; }
  :root,:root[data-theme="dark"]{ --glass-grain:none; --glass-sheen:linear-gradient(transparent, transparent); }
  .topbar,.card,.plan,.filebar,.popover,.menu,.tpl-menu,.gate-card,.zp-card,.person-card,#app,.toast,.upload-toast,.tail-tab,dialog.install-help,.faq details,.compare-card,.pick,.kpi-sum,.kpi-card,.usage-card,.steps li,.founder,.about,.tile{ -webkit-backdrop-filter:none;backdrop-filter:none; }
  .section.alt{background:var(--surface);}
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  :root,:root[data-theme="dark"]{ --glass:var(--surface); --glass-strong:var(--surface); --glass-app:var(--surface); }
}
@media (forced-colors: active){ body::before{display:none;} }
@media print{ body::before{display:none;} #app,.card,.plan,.tile,.steps li,.founder,.about{background:#fff!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;} }