/* Sylence — The Notch, for the web.
   Mirrors lib/theme.dart on the Notch release: an Ink night field, Abyss
   surfaces, Mist text, one glow-teal action, amber for hearing safety only,
   and the spectrum band (teal → sky → periwinkle → violet) as the brand line.
   Sora for display, Inter for reading, JetBrains Mono for data and labels.

   Every font is served from this domain. Loading them from Google Fonts
   would send each reader's IP to a third party on a site that says it sends
   nothing anywhere, and the Content-Security-Policy blocks it besides.
   Subsets: Latin + Latin-1 + the few extras the pages use (thin space,
   dashes, quotes, arrows, the level-meter blocks, the check mark). */
@font-face{font-family:'Sora';src:url('/fonts/sora-600.woff2') format('woff2');font-weight:600;font-display:swap;font-style:normal}
@font-face{font-family:'Sora';src:url('/fonts/sora-700.woff2') format('woff2');font-weight:700;font-display:swap;font-style:normal}
@font-face{font-family:'Inter';src:url('/fonts/inter-400.woff2') format('woff2');font-weight:400;font-display:swap;font-style:normal}
@font-face{font-family:'Inter';src:url('/fonts/inter-600.woff2') format('woff2');font-weight:500 600;font-display:swap;font-style:normal}
@font-face{font-family:'JetBrains Mono';src:url('/fonts/jbmono-400.woff2') format('woff2');font-weight:400;font-display:swap;font-style:normal}
@font-face{font-family:'JetBrains Mono';src:url('/fonts/jbmono-500.woff2') format('woff2');font-weight:500;font-display:swap;font-style:normal}

:root {
  --bg:      #060B17;   /* Ink */
  --surface: #0F1624;   /* Abyss */
  --raised:  #171F30;
  --hair:    #263044;
  --tick:    #2E3748;
  --text:    #EEF2F7;   /* Mist */
  --mid:     #A1ACB9;   /* Slate */
  --muted:   #7D8898;
  --accent:  #5AE5CE;   /* Glow teal */
  --accent-ink: #00141E;
  --safety:  #EAB532;   /* Amber — hearing safety only */
  --spectrum: linear-gradient(90deg,#51E6CE,#59C5F5,#778FFA,#BE85F9);
  --disp: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  background:
    radial-gradient(1100px 700px at 10% -10%, rgba(40,72,120,.32), transparent 60%),
    radial-gradient(900px 700px at 110% 110%, rgba(70,45,120,.22), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  color: var(--mid);
  font-family: var(--body); font-weight: 400;
  max-width: 760px; margin: 0 auto; padding: 0 16px 96px;
  line-height: 1.7; font-size: 17px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
@media (min-width: 640px) { body { padding: 0 28px 96px; } }
h1, h2, h3 { color: var(--text); font-family: var(--disp); line-height: 1.15; }
h1 { font-size: clamp(32px, 6vw, 46px); font-weight: 700; letter-spacing: -.02em; margin: 0 0 .6em; text-wrap: balance; }
h2 { font-size: clamp(22px, 3.6vw, 27px); font-weight: 600; letter-spacing: -.01em; margin: 2.4em 0 .6em; }
h3 { font-size: 1.08rem; font-weight: 600; margin: 2em 0 .4em; }
p { margin: 0 0 1.1em; }
strong { color: var(--text); font-weight: 600; }
a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px;
    text-decoration-thickness: 1px; text-decoration-color: rgba(90,229,206,.45); }
a:hover { text-decoration-color: var(--accent); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
ul, ol { padding-left: 1.3em; } li { margin: .5em 0; }
li::marker { color: var(--accent); }
hr { border: 0; height: 1px; background: var(--hair); margin: 3.2em 0; }
code { font-family: var(--mono); font-size: .88em; color: var(--text);
       background: var(--raised); border-radius: 6px; padding: .1em .35em; }
.muted { color: var(--muted); font-size: .9em; }
.kicker { font-family: var(--mono); font-size: .72rem; letter-spacing: .2em;
          text-transform: uppercase; color: var(--accent); margin: 0 0 1.2em; }

/* The brand bar: the Arc and the wordmark, a door back to the matcher. */
.brand { display: flex; align-items: center; gap: 12px; padding: 22px 0 26px;
         margin: 0 0 34px; border-bottom: 1px solid var(--hair);
         text-decoration: none; color: var(--text); }
.brand svg { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 11px;
             background: #0D1230; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06); }
.brand span { font-family: var(--disp); font-weight: 700; font-size: 19px; letter-spacing: .01em; }
.brand::after { content: ''; flex: 1; }
.brand:hover span { color: #fff; }

/* One primary action: glow teal, a pill, never more than one per view. */
.cta { display: inline-flex; align-items: center; justify-content: center;
       margin: .6em 0 0; padding: 14px 24px; min-height: 52px;
       border-radius: 16px; background: var(--accent); color: var(--accent-ink);
       text-decoration: none; font-family: var(--body); font-weight: 600;
       font-size: 16px; letter-spacing: 0; text-transform: none;
       transition: background .18s, transform .12s; }
.cta:hover { background: #7DEFD8; }
.cta:active { transform: scale(.98); }
.note { border-left: 3px solid var(--hair); padding: 2px 0 2px 18px;
        color: var(--muted); font-size: .93em; }
nav.foot { margin-top: 4em; padding-top: 2em; border-top: 1px solid var(--hair);
           font-family: var(--mono); font-size: .74rem; letter-spacing: .08em;
           text-transform: uppercase; color: var(--muted); }
nav.foot a { display: inline-block; margin: 0 18px .7em 0; color: var(--mid);
             text-decoration: none; }
nav.foot a:hover { color: var(--accent); }
figure.spectrum { margin: 2em 0; padding: 20px 18px 16px; border: 1px solid var(--hair);
                  border-radius: 20px; background: linear-gradient(160deg,#121A2B,#0C1220); }
figure.spectrum svg { display: block; max-width: 100%; height: auto; }
figure.spectrum figcaption { font-family: var(--mono); font-size: .7rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: .8em; }
/* Arabic must never be letterspaced — joined letterforms. */
[dir="rtl"] { font-family: 'IBM Plex Sans Arabic', Tahoma, Arial, sans-serif; letter-spacing: 0; }
[dir="rtl"] ul, [dir="rtl"] ol { padding-left: 0; padding-right: 1.3em; }
[dir="rtl"] .note { border-left: 0; border-right: 3px solid var(--hair);
                    padding-left: 0; padding-right: 18px; }

/* The tool this whole page set exists to point at. */
.try { margin: 2.2em 0 2.8em; padding: 24px 22px; border: 1px solid var(--hair);
       border-radius: 22px; background: linear-gradient(160deg,#131B2D,#0D1321);
       position: relative; overflow: hidden; }
.try::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
               background: var(--spectrum); }
.try p { margin: 0 0 14px; color: var(--mid); }
.try .cta { margin: 0; }
.try .sub { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em;
            text-transform: uppercase; color: var(--muted); margin: 14px 0 0; }
@media (min-width: 1000px) { body { max-width: 820px; font-size: 18px; } }

/* The listening box on the /tinnitus-<n>-hz/ pages (hz-demo.js). Hidden
   controls until the script is live, so a crawler or a no-JS reader sees the
   noscript line and not buttons that do nothing. */
.hz { margin: 2.2em 0 2.8em; padding: 24px 22px; border: 1px solid var(--hair);
      border-radius: 22px; background: linear-gradient(160deg,#131B2D,#0D1321); }
.hz .hz-controls { display: none; }
.hz.live .hz-controls { display: block; }
.hz.live .hz-nojs { display: none; }
.hz .lbl { font-family: var(--mono); font-size: .7rem; letter-spacing: .16em;
           text-transform: uppercase; color: var(--muted); margin: 1.4em 0 .6em; }
.hz .lbl:first-child { margin-top: 0; }
.hz .row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.hz button { font-family: var(--mono); font-size: .78rem; letter-spacing: .06em;
             text-transform: uppercase; background: var(--raised); color: var(--text);
             border: 1px solid var(--hair); border-radius: 12px;
             padding: 12px 16px; min-height: 44px; cursor: pointer;
             transition: background .15s, border-color .15s; }
.hz button:hover:not(:disabled) { border-color: var(--accent); }
.hz button[aria-pressed="true"] { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.hz button:disabled { opacity: .35; cursor: default; }
.hz .hz-level { font-family: var(--mono); font-size: .78rem; color: var(--text);
                min-width: 3.5em; text-align: center; }
.hz .hz-status { font-family: var(--mono); font-size: .74rem; letter-spacing: .04em;
                 color: var(--muted); margin: 1.4em 0 0; min-height: 1.5em; }
.hz .hz-handoff { margin: 1.2em 0 0; }

/* The privacy policy's tables and long lists read as a document. */
table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: .92em; }
th, td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--hair); }
th { color: var(--text); font-family: var(--disp); font-weight: 600; }
.table-scroll { overflow-x: auto; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }