/* StemConsole base styles, shared by every content page (tool, guide, pricing, legal, blog, About, Developers, 404).
   Pages load it first, then site.css or blog.css for their own layout. Edit here, not per-page.
   The homepage as visitors see it (the practice room and the copy under it): the room's header, Archivo text,
   Montserrat headings, Space Mono only for small labels and readouts, #111 panels on #0a0a0a under the studio photo,
   a teal fill for the main action, one wide left-aligned column with a reading width for text.
   Pages load the stylesheets with ?v=<content hash>: after editing one run  node tests/page_css_tags.mjs --fix */
/* A traditional ampersand (Arial's) in each family, at exactly the weights the fonts link loads. A face at a weight the
   link does not load would take that weight over, and the rest of the text would draw in the next family (bold Space
   Mono in Courier): tests/page_css_tags.mjs keeps these in step with the fonts link. The homepage uses /ampersand.css. */
@font-face{font-family:"Archivo";src:local("Arial"),local("Helvetica"),local("Liberation Sans"),local("Roboto");font-style:normal;font-weight:400;unicode-range:U+0026;font-display:swap}
@font-face{font-family:"Archivo";src:local("Arial"),local("Helvetica"),local("Liberation Sans"),local("Roboto");font-style:normal;font-weight:500;unicode-range:U+0026;font-display:swap}
@font-face{font-family:"Archivo";src:local("Arial Bold"),local("Helvetica Bold"),local("Liberation Sans Bold"),local("Roboto Bold");font-style:normal;font-weight:600;unicode-range:U+0026;font-display:swap}
@font-face{font-family:"Montserrat";src:local("Arial"),local("Helvetica"),local("Liberation Sans"),local("Roboto");font-style:normal;font-weight:500;unicode-range:U+0026;font-display:swap}
@font-face{font-family:"Montserrat";src:local("Arial Bold"),local("Helvetica Bold"),local("Liberation Sans Bold"),local("Roboto Bold");font-style:normal;font-weight:600;unicode-range:U+0026;font-display:swap}
@font-face{font-family:"Montserrat";src:local("Arial Bold"),local("Helvetica Bold"),local("Liberation Sans Bold"),local("Roboto Bold");font-style:normal;font-weight:700;unicode-range:U+0026;font-display:swap}
@font-face{font-family:"Space Mono";src:local("Arial"),local("Helvetica"),local("Liberation Sans"),local("Roboto");font-style:normal;font-weight:400;unicode-range:U+0026;font-display:swap}
*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none!important}
button,input,select,textarea{font:inherit}
:root{color-scheme:dark;--teal:#2dd4bf;--teal-dark:#14b8a6;--teal-bright:#5eead4;--teal-glow:rgba(45,212,191,.08);--teal-soft:rgba(45,212,191,.08);--teal-border:rgba(45,212,191,.25);
--gold:#D4A84B;--gold-bright:#f5c451;--gold-border:rgba(212,168,75,.35);
--bg:#0a0a0a;--card:#111;--panel:rgba(17,17,17,.97);--well:#161616;--control:#1a1a1a;--line:#292929;--line2:#303030;--ink:#071512;
--text:#fff;--text2:#b2bcb8;--text-secondary:#aaa;--muted:#a0a0a0;--radius:12px;--radius-sm:8px;--shadow-card:0 1px 2px #0006,0 10px 28px #0005}
html{scroll-behavior:smooth;scroll-padding-top:100px}
body{position:relative;isolation:isolate;min-height:100vh;background:radial-gradient(1000px 560px at 50% -10%,rgba(45,212,191,.07),transparent 62%),var(--bg);
color:var(--text);font:400 15px/1.65 'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased}
/* The homepage's studio photo behind the top of the page, fading into the black. */
body::before{content:'';position:absolute;inset:0 0 auto;height:560px;z-index:-1;pointer-events:none;
background:linear-gradient(180deg,rgba(10,10,10,.6),rgba(10,10,10,.42) 30%,rgba(10,10,10,.86) 72%,var(--bg)),url('/assets/hero-studio.jpg') center 28%/cover no-repeat}
h1,h2,h3{font-family:'Montserrat',sans-serif;font-weight:600;color:var(--text)}
strong,b{font-weight:600}
strong{color:var(--text)}
p{color:var(--text2);font-size:15px;line-height:1.7;margin-bottom:12px}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
/* The header: the practice room's own, pinned. */
.bar{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(10,10,10,.78);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.09)}
.bar::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--teal),transparent)}
.bar-in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:84px;padding:0 max(24px,calc((100% - 1176px)/2))}
.brand{display:inline-flex;align-items:center;gap:12px;flex:none;min-height:44px;text-decoration:none}
.brand svg{width:36px;height:36px;flex:none}
.brand span{font:700 30px/1 'Montserrat',sans-serif;letter-spacing:-.5px;color:#fff;white-space:nowrap}
.brand b{font-weight:700;background:linear-gradient(120deg,var(--teal-bright),var(--teal));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
/* Buttons, in the console's two kinds. Primary: the Split song button, a teal fill (.cta, .bar-cta).
   Secondary: Split another song, dark with a grey-green edge (.cta-alt). Inline layout, not flex, so a label with
   markup in it (the trial's day count) keeps its spaces; the padding centres one line in the button's height. */
.cta,.bar-cta{display:inline-block;max-width:100%;border:1px solid var(--teal);background:var(--teal);color:var(--ink);
font-family:'Archivo',sans-serif;font-weight:600;text-align:center;text-decoration:none;cursor:pointer;box-shadow:0 6px 20px rgba(45,212,191,.18);transition:background-color .15s,border-color .15s,color .15s}
.cta{min-height:52px;padding:15px 26px;border-radius:var(--radius);font-size:16px;line-height:20px;letter-spacing:.2px}
.cta:not(.cta-alt)::before{content:'';display:inline-block;width:19px;height:19px;margin-right:10px;vertical-align:-4px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 12h4l2.5-7 3 14 3-9 2 6 1.5-4H22' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 12h4l2.5-7 3 14 3-9 2 6 1.5-4H22' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.bar-cta{flex:0 1 auto;min-width:0;min-height:44px;padding:12px 16px;border-radius:var(--radius-sm);font-size:14px;line-height:18px;white-space:nowrap}
.cta:hover,.bar-cta:hover{background:var(--teal-bright);border-color:var(--teal-bright)}
.cta.cta-alt{background:rgba(43,53,48,.48);border-color:#46524d;color:#f0f3ef;box-shadow:0 3px 8px #0004}
.cta.cta-alt:hover{background:#303d37;border-color:#71867c;color:#fff}
.cta:focus-visible,.bar-cta:focus-visible{outline:2px solid var(--teal-bright);outline-offset:3px}
.cta-pair{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:10px}
/* Space Mono only for small labels and readouts, and only in its regular weight (the one the pages load). */
.crumb{font:400 10.5px/1.4 'Space Mono',monospace;color:var(--text2);text-transform:uppercase;letter-spacing:1px;margin-bottom:14px}
.crumb a{display:inline-block;padding:10px 0;margin:-10px 0;color:var(--text2);text-decoration:none}
.crumb a:hover{color:var(--teal-bright)}
.crumb,.eyebrow,.sub{text-shadow:0 1px 6px #000c}
.eyebrow{font:400 10px/1.6 'Space Mono',monospace;color:var(--teal);letter-spacing:1.8px;text-transform:uppercase;margin:0 0 10px}
.trust{font:400 10px/1.6 'Space Mono',monospace;color:var(--teal);letter-spacing:1.8px;text-transform:uppercase}
.updated{font:400 10.5px/1.5 'Space Mono',monospace;color:var(--muted);letter-spacing:1px;text-transform:uppercase;margin-top:28px}
/* The page: the console's 1176px column, left-aligned, with the homepage copy's reading width for text. */
main{max-width:1240px;margin:0 auto;padding:124px 32px 40px}
h1{font-size:32px;font-weight:700;line-height:1.2;letter-spacing:-.7px;max-width:860px;text-wrap:balance;text-shadow:0 2px 12px #0008}
h2{font-size:22px;line-height:1.3;letter-spacing:-.4px;max-width:860px;margin:0 0 16px}
h3{font-size:16px;line-height:1.4;letter-spacing:-.2px}
:where(main,main>section:not(.kbf),article)>:where(p,ul,ol,h3){max-width:780px}
main section{margin-top:40px;padding-top:32px;border-top:1px solid var(--line)}
article>h2{max-width:none;margin-top:40px;padding-top:32px;border-top:1px solid var(--line)}
main p a,main li a,main td a,main details a{color:var(--teal-bright);text-decoration:none;border-bottom:1px solid rgba(45,212,191,.35);transition:color .2s,border-color .2s}
main p a:hover,main li a:hover,main td a:hover,main details a:hover{color:#8cf0df;border-bottom-color:var(--teal)}
/* FAQ: rows, as on the homepage. */
details{border-top:1px solid #2b302c;border-bottom:1px solid #2b302c;margin-bottom:-1px}
summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px;padding:14px 0;cursor:pointer;list-style:none;font:500 15px/1.5 'Archivo',sans-serif;color:#e2e9e4}
summary::-webkit-details-marker{display:none}
summary::after{content:'+';flex:none;color:var(--teal);font:400 18px/1 'Space Mono',monospace}
summary:hover{color:#fff}
details[open] summary{color:var(--teal-bright)}
details[open] summary::after{content:'\2212'}
main details p{max-width:780px;margin:0;padding:0 0 12px;font-size:14px;line-height:1.8;color:#afbdb5}
main details p:last-child{padding-bottom:18px}
/* Cards and panels */
.tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:18px}
@media(min-width:901px){.tools:is(:has(>:nth-child(4):last-child),:has(>:nth-child(7):last-child),:has(>:nth-child(8):last-child)){grid-template-columns:repeat(4,minmax(0,1fr))}}
.tool{display:block;min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:18px;text-decoration:none;transition:border-color .15s}
.tool:hover{border-color:rgba(45,212,191,.38)}
.tool h3{font-size:15px;line-height:1.35;color:var(--text);margin:0 0 6px}
.tool p{font-size:12.5px;line-height:1.5;color:var(--text-secondary);margin:0}
.cmp-wrap{max-width:860px;overflow-x:auto;margin:18px 0;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:2px 12px}
table.cmp{border-collapse:collapse;width:100%;font-size:13.5px;line-height:1.5;min-width:560px}
table.cmp th,table.cmp td{text-align:left;vertical-align:top;padding:11px 10px;border-bottom:1px solid var(--line);color:#c9cfcc}
table.cmp tr:last-child td{border-bottom:0}
table.cmp th{font:400 10.5px/1.4 'Space Mono',monospace;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
table.cmp td:first-child{color:var(--text);font-weight:600}
footer{border-top:1px solid var(--line);margin-top:64px}
.foot-in{max-width:1240px;margin:0 auto;padding:28px 32px;display:flex;flex-wrap:wrap;gap:14px 18px;justify-content:space-between;align-items:center}
.foot-links{display:flex;flex-wrap:wrap;gap:0 18px}
.foot-links a{display:inline-flex;align-items:center;justify-content:center;min-width:32px;min-height:32px;font:400 11px/1.3 'Space Mono',monospace;letter-spacing:.02em;color:#aaa;text-decoration:none}
.foot-links a:hover{color:var(--teal-bright)}
.foot-compare{align-items:center}
.foot-label{font:400 11px/1 'Space Mono',monospace;color:var(--teal);text-transform:uppercase;letter-spacing:1.4px;margin-right:2px}
.foot-by{color:var(--muted);font-size:12.5px}
.foot-by a{display:inline-block;padding:9px 0;margin:-9px 0;color:#cfd8d8;text-decoration:underline;text-decoration-color:rgba(45,212,191,.45);text-underline-offset:3px}
.foot-by a:hover{color:var(--teal)}
@media(max-width:900px){.tools{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){html{scroll-padding-top:80px}body::before{height:430px;background-position:center,44% 20%}.bar-in{min-height:64px;padding:0 16px;gap:12px}.brand{gap:8px}.brand svg{width:26px;height:26px}.brand span{font-size:22px}.bar-cta{min-height:40px;padding:11px 12px;font-size:13px;line-height:16px}main{padding:92px 16px 32px}.foot-in{padding:24px 16px}h1{font-size:28px}}
@media(max-width:640px){.tools{grid-template-columns:minmax(0,1fr)}}
/* Small phones: the room's sizes, and a long header button wraps before it would run off the screen. */
@media(max-width:420px){.bar-cta{white-space:normal}}
@media(max-width:360px){.bar-in{gap:10px}.brand{gap:6px}.brand svg{width:24px;height:24px}.brand span{font-size:18px}.bar-cta{padding:11px 10px;font-size:12px;line-height:16px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.cta,.bar-cta,.tool,main p a{transition:none}}