/* ============================================================================
   The palette is not invented for the page. Every colour below is a literal
   from adv_sampler/ui.cpp, and each one keeps the job it has on the device:
   teal is a loaded pad, accent is live, amber wants your attention, red stops.

   TYPE RULE, and it is the opposite of the obvious one. The machine face is
   RARE, not ambient. Monospace appears only where the machine itself is
   speaking: the panel, measured values, prices, the pad legend. Everything a
   person says - headlines, argument, answers - is set in the system sans. Mono
   everywhere would be a costume; mono in four places is a voice. For the same
   reason UPPERCASE is reserved entirely for the device's own display, so the
   only shouting on the page comes from the screen.
   ========================================================================== */
:root{
  --ink:#000000;          /* C_BG      */
  --panel:#0c0e11;
  --panel2:#12151a;
  --line:#20242b;
  --teal:#186c84;         /* C_LOADED  */
  --accent:#50c8a0;       /* C_ACCENT  */
  --amber:#ffd65c;        /* C_FLASH   */
  --stop:#963737;         /* C_STOP    */
  --txt:#ebeef2;          /* C_TEXT    */
  --dim:#989ca4;          /* C_DIM, lightened 17 Sep 2026. The device's own
                             #787e88 gave 4.73:1 on --panel: AA by 0.23, and it
                             is the colour of 28 rules of body text. Now 7.02:1. */

  /* Derived, and the reason a light theme is possible at all: everything that
     used to be a literal in a rule is a token here, so one block can flip the
     whole page. */
  --txt2:#cdd3da;                  /* secondary prose, the lead */
  --off:#16191d;                   /* an unlit pad, an empty block */
  --hair:rgba(255,255,255,.045);   /* the faintest rule we draw */
  --on-teal:#eef2f0;               /* text on a teal fill, light in both themes */
  --on-accent:#10201b;             /* text on an accent fill, flips */

  /* SYSTEM FONTS ONLY, and this is a legal constraint rather than a taste one.
     Hotlinking Google Fonts transmits the visitor's IP to Google and was ruled a
     DSGVO violation in Germany (LG Munchen I, 3 O 17493/20, Jan 2022). It is the
     most common Abmahnung trigger for small German sites. This page currently
     loads NOTHING from a third party, which is what makes the privacy policy
     short and true - do not add a webfont, an analytics tag or an embedded map
     without also rewriting that policy. */
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  --gut:clamp(18px,4vw,46px);
}
:root{color-scheme:dark}

/* ============================================================================
   LIGHT THEME
   Not an inversion. The device's colours are kept because they are the
   identity, but the two pale ones cannot survive a pale ground: mint and amber
   are darkened until they read as themselves at the same contrast the dark
   theme gives them. Teal and stop-red are already dark enough to stay put.
   The ground is a cold anodized grey rather than white, because the thing on
   the table is a grey object and white would glare beside the photographs.
   ========================================================================== */
:root[data-theme="light"]{
  color-scheme:light;
  --ink:#d5d8ce;
  --panel:#e4e7dd;
  --panel2:#edefe6;
  --line:#a9ae9f;
  --teal:#186c84;            /* unchanged: dark enough for a pale ground */
  --accent:#176149;          /* mint. THIS IS THE LINK COLOUR, a{color:var(--accent)}.
                                At #1d7a5c it was 3.64:1 on --ink, so every link on the
                                light theme failed AA. Now 5.12:1. */
  --amber:#6e520e;           /* was 3.61:1, now 5.06:1 */
  --stop:#9b3a22;
  --txt:#191c17;
  --txt2:#3b4038;
  --dim:#494d41;             /* was 4.85:1, now 6.01:1 */
  --off:#c2c6ba;
  --hair:rgba(0,0,0,.075);
  --on-accent:#eef2f0;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{transition:none!important} }
body{
  margin:0;background:var(--ink);color:var(--txt);
  font:16.5px/1.62 var(--sans);
  -webkit-font-smoothing:antialiased;
}
/* One measure for the whole page, and the instrument sets it. Text that ran
   wider than the thing it describes was most of the old page's drift. */
.wrap{max-width:1060px;margin:0 auto;padding:0 var(--gut)}

h1,h2,h3{font-family:var(--sans);margin:0}
h1{font-size:clamp(33px,5.6vw,60px);line-height:1.03;font-weight:800;letter-spacing:-.028em}
h2{font-size:clamp(22px,2.9vw,32px);line-height:1.12;font-weight:700;letter-spacing:-.021em}
h3{font-size:15px;line-height:1.3;font-weight:600;color:var(--txt);letter-spacing:-.005em}
p{margin:0 0 18px;max-width:62ch}
img{max-width:100%;height:auto;display:block}
figure{margin:0}
figcaption{margin-top:12px;color:var(--dim);font-size:14.5px;line-height:1.5}
a{color:var(--accent)}
.lead{font-size:clamp(17.5px,1.9vw,20px);line-height:1.52;color:var(--txt2);max-width:46ch}
.dimtext{color:var(--dim)}
.m{font-family:var(--mono)}

/* placeholders advertise the draft's own gaps */
.tbd{color:var(--amber);font-family:var(--mono);font-size:.85em;
     border-bottom:1px dotted rgba(255,214,92,.5);white-space:nowrap}
.tbd:empty{display:none}

/* --- masthead ------------------------------------------------------------- */
.top{display:flex;align-items:baseline;gap:11px;padding:26px 0 24px}
.top b{font-size:15px;font-weight:700;letter-spacing:-.01em}
.top span{font-size:13.5px;color:var(--dim)}
.themetoggle{margin-left:auto;background:transparent;border:1px solid var(--line);
             color:var(--dim);font:500 11px/1 var(--mono);letter-spacing:.12em;
             padding:8px 12px;cursor:pointer}
.themetoggle:hover{color:var(--accent);border-color:var(--accent)}

/* --- hero: the instrument is the argument, so it is the biggest thing here --
   It was capped at 480px, which was too small for the player's own layout: the
   title clipped to "WE" and the hint ran off both edges. It now takes the page
   measure. The cap is the measure itself, which is what keeps it an instrument
   rather than a billboard. */
.stage{position:relative;border:1px solid var(--line);overflow:hidden;
       background:var(--ink);transition:border-color .18s,box-shadow .18s}
/* While a file is over the PAGE, point at the only place a drop does anything.
   Without this a near miss navigates the browser to the file and the visitor
   loses the page they were reading. */
body.dragging .stage{border-color:var(--accent);box-shadow:0 0 0 3px rgba(80,200,160,.18)}
body.dragging .stagebar em{color:var(--amber)}
.stage iframe{display:block;width:100%;aspect-ratio:16/9;border:0}
.stagebar{display:flex;justify-content:space-between;align-items:center;gap:16px;
          padding:10px 14px;border-top:1px solid var(--line);background:var(--panel);
          font:400 12.5px/1 var(--mono);color:var(--dim);flex-wrap:wrap}
.stagebar em{font-style:normal;color:var(--accent)}

/* silhouette legend: sits with the instrument, which is what it explains */
.legend{margin:13px 0 0;font-size:13.5px;line-height:1.6;color:var(--dim)}
.legend .keys{font-family:var(--mono);font-size:12.5px;
              display:flex;gap:20px;flex-wrap:wrap;margin-bottom:6px}
.sil{display:inline-block;vertical-align:-2px;margin-right:8px}
.sil-pad{width:14px;height:16px;background:var(--teal)}
.sil-lvl{width:14px;height:7px;background:var(--accent)}
.sil-stop{width:14px;height:16px;background:var(--stop)}
.sil-off{width:14px;height:16px;background:var(--off)}

.herotext{padding:52px 0 0}
.herotext h1{max-width:16ch;margin-bottom:30px}
.herocols{display:grid;gap:26px}
@media (min-width:860px){ .herocols{grid-template-columns:1fr 1fr;gap:52px} }
.herocols p{max-width:44ch}

/* --- section rhythm ------------------------------------------------------- */
section{padding:78px 0 0}
section:last-of-type{padding-bottom:20px}
/* Two columns where the second one has something to say. Not a default: a
   section whose content is one argument stays one column. */
.two{display:grid;gap:30px}
@media (min-width:860px){ .two{grid-template-columns:1fr 1fr;gap:56px} }
/* The device draws its title at the left of a header bar and its live value at
   the right. Section headers do the same, and the value has to be a real one:
   where a section has no number worth stating, the bar simply carries the
   title. A label that exists only to sit above a heading is decoration. */
.rail{display:flex;align-items:baseline;justify-content:space-between;gap:26px;
      border-bottom:1px solid var(--line);padding-bottom:15px;margin:0 0 30px}
.rail .val{font:600 13px/1 var(--mono);color:var(--dim);white-space:nowrap}
/* Below this the value was stealing width from the heading and forcing it to
   three lines. It goes under instead, where it still reads as the row's value. */
@media (max-width:700px){
  .rail{flex-direction:column;align-items:flex-start;gap:7px}
  .buybox > summary{flex-direction:column;align-items:flex-start;gap:7px}
  .buybox > summary .val{margin-left:0}
}
.rail .val.good{color:var(--accent)}

/* --- device comparison: a table, not three cards -------------------------- */
.menu{display:grid;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
      margin-top:6px}
/* Facts true of all three span the whole table instead of being repeated in
   three columns, where a reader has to compare them to notice they are the
   same. 1 / -1 spans every column at any breakpoint, including the one-column
   layout, so this needs no media query of its own. */
.shared{grid-column:1/-1;border-top:1px solid var(--line);padding:22px 0 24px}
.shared h4{margin:0 0 12px;font:600 13px/1 var(--sans);color:var(--dim)}
.dev{padding:24px 26px 26px}
.dev h3{margin:0 0 14px}
/* Breakpoints come after the base rules on purpose. A shorthand `padding`
   declared later would out-order the longhand overrides below and quietly put
   the side padding back. */
@media (min-width:820px){
  .menu{grid-template-columns:repeat(3,1fr)}
  .dev + .dev{border-left:1px solid var(--line)}
  .dev:first-child{padding-left:0}
}
@media (max-width:819px){
  .dev + .dev{border-top:1px solid var(--line)}
  .dev{padding-left:0;padding-right:0}
}
.dev .price{font:600 26px/1.15 var(--mono);margin:0 0 16px;letter-spacing:-.02em}
.dev .price.free{color:var(--accent)}
.dev .price small{display:block;margin-top:6px;font-size:12.5px;color:var(--dim);
                  font-weight:400;font-family:var(--sans);letter-spacing:0}
.spec{list-style:none;margin:0;padding:0;font-size:14px}
.spec li{display:flex;gap:9px;padding:7px 0;border-top:1px solid var(--hair);
         color:var(--dim)}
.spec li:first-child{border-top:0}
.spec b{color:var(--txt);font-family:var(--mono);font-weight:500;font-size:13px;
        margin-left:auto;text-align:right}
.spec .warn b{color:var(--amber)}

/* --- steps: a real sequence, so numbered ---------------------------------- */
.steps{counter-reset:s;display:grid;border-top:1px solid var(--line);
       border-bottom:1px solid var(--line);margin-top:6px}
.step{padding:24px 26px 26px;counter-increment:s}
@media (min-width:820px){
  /* auto-fit, not repeat(3,1fr): the German page has four steps and a hard 3
     left the fourth alone on a second row with a left border leading nowhere.
     Count belongs to the content, not to the stylesheet. */
  .steps{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
  .step + .step{border-left:1px solid var(--line)}
  .step:first-child{padding-left:0}
}
@media (max-width:819px){
  .step + .step{border-top:1px solid var(--line)}
  .step{padding-left:0;padding-right:0}
}
.step::before{content:counter(s,decimal-leading-zero);display:block;
  font:500 12px/1 var(--mono);color:var(--dim);margin-bottom:13px}
.step h3{margin:0 0 7px}
.step p{margin:0;font-size:14.5px;color:var(--dim);max-width:none}

/* Where to buy: full width under the steps rather than crammed into step 01,
   because three shops times two devices does not fit a 300px column. One row
   per device, shops cheapest first, and the price is the link. Wraps instead
   of scrolling, so it survives a phone without a horizontal scroller. */
.shops{margin-top:26px}
.shops h4{margin:22px 0 14px;font:600 13px/1 var(--sans);color:var(--dim)}
.shoprow{display:grid;gap:6px 26px;padding:13px 0;border-top:1px solid var(--line)}
@media (min-width:700px){ .shoprow{grid-template-columns:215px 1fr;align-items:baseline} }
.shoprow > b{font-weight:600;font-size:15px;color:var(--txt)}
.shoprow .links{display:flex;flex-wrap:wrap;gap:10px 26px}
.shoprow a{text-decoration:none;font-size:14.5px;color:var(--dim);
           border-bottom:1px solid rgba(80,200,160,.35)}
.shoprow a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.shoprow a b{font-family:var(--mono);font-size:13.5px;color:var(--txt);font-weight:500;
             margin-left:7px}
/* A second fold, subordinate to the section's own heading, so its summary is a
   row rather than a rail. Same + / - grammar as the FAQ. */
.buybox{margin-top:30px;border-top:1px solid var(--line)}
.buybox > summary{display:flex;align-items:baseline;gap:24px;cursor:pointer;
                  padding:18px 0;list-style:none;font-size:15.5px;font-weight:600;
                  color:var(--txt);letter-spacing:-.01em}
.buybox > summary::-webkit-details-marker{display:none}
.buybox > summary .val{margin-left:auto;font:500 13px/1 var(--mono);color:var(--dim);
                       white-space:nowrap}
.buybox > summary .val::after{content:" +"}
.buybox[open] > summary{color:var(--accent)}
.buybox[open] > summary .val{color:var(--accent)}
.buybox[open] > summary .val::after{content:" \2212"}
.buybox > summary:hover{color:var(--accent)}
/* One rule between the two halves of the buy box, whichever way round they
   are. The German page puts the shops first, the English still puts the
   picks first, and a rule tied to either one is wrong on the other page.
   Tie it to the BOUNDARY instead and neither page can be wrong. */
.shops + .pick{border-top:1px solid var(--line);padding-top:26px}
.pick + .shops{border-top:1px solid var(--line)}
.pick{margin:0 0 22px}
.pick h5{margin:0 0 5px;font:600 15px/1.3 var(--sans);color:var(--txt);letter-spacing:-.01em}
.pick p{margin:0;font-size:14.5px;color:var(--dim);max-width:66ch}
.shops .note{margin:18px 0 0;font-size:13px;color:var(--dim);max-width:72ch}
.shops .note b{color:var(--txt);font-weight:600}

/* --- the panel: the page's one loud quiet moment -------------------------- */
.promise{border:1px solid var(--line);background:var(--panel);
         padding:clamp(26px,4vw,46px)}
#glcd{display:block;width:100%;max-width:520px;height:auto;
      image-rendering:pixelated;image-rendering:crisp-edges}

/* --- price block ---------------------------------------------------------- */
.pricelist{list-style:none;margin:0 0 26px;padding:0;font-size:15px}
.pricelist li{display:flex;gap:12px;padding:11px 0;border-top:1px solid var(--line);
              color:var(--dim)}
.pricelist li:first-child{border-top:0}
.pricelist b{margin-left:auto;color:var(--txt);font-family:var(--mono);font-weight:500;
             font-size:14px}
.pricelist b.free{color:var(--accent)}

/* --- limits: the device's own stop colour, doing the job it does there ----- */
.limits{list-style:none;margin:0;padding:0}
.limits li{position:relative;padding:15px 0 15px 26px;border-top:1px solid var(--line);
           font-size:15px;color:var(--dim)}
@media (min-width:860px){ .limits li{padding-right:32%} }
.limits li:first-child{border-top:0}
.limits li::before{content:"";position:absolute;left:0;top:19px;
                   width:12px;height:13px;background:var(--stop)}
.limits b{color:var(--txt);font-weight:600;font-size:15.5px;display:block;margin-bottom:3px}

/* --- the FAQ -------------------------------------------------------------
   Question left, answer right, because the pairing is the content. No
   competitor is named anywhere: these are the questions anyone who has owned a
   cheap sampler already has, and naming a rival would make this an advert about
   them rather than an answer about us. Each answer disposes of the worry in a
   few words, then says what happens instead. */
.faq{margin:0;padding:0}
.faq > div{display:grid;gap:5px;padding:19px 0;border-top:1px solid var(--line)}
@media (min-width:820px){
  .faq > div{grid-template-columns:1fr 1.3fr;gap:34px;align-items:baseline}
}
.faq dt{font-size:15.5px;font-weight:600;color:var(--txt);margin:0;letter-spacing:-.01em}
.faq dd{margin:0;color:var(--dim);font-size:15px;line-height:1.58}
.faq dd b{color:var(--txt);font-weight:600}

/* The SECTION is the disclosure, not each question. Eleven answers between the
   instrument and the price is a long way to scroll for someone who has already
   decided, so the whole block folds into its own header bar. Closed it reads as
   a section heading carrying a state, which is the grammar every other rail on
   this page already uses. The summary keeps its default display: overriding it
   is what breaks the toggle in some browsers, so the flex row is a div inside
   it instead. */
.faqbox > summary{cursor:pointer;list-style:none}
.faqbox > summary::-webkit-details-marker{display:none}
.faqbox > summary:hover h2{color:var(--accent)}
.faqbox > summary .val::after{content:" +";color:var(--dim)}
.faqbox[open] > summary .val::after{content:" \2212"}
.faqbox[open] > summary .val{color:var(--accent)}

/* --- footer --------------------------------------------------------------- */
footer{border-top:1px solid var(--line);padding:34px 0 64px;
       font-size:13.5px;line-height:1.9;color:var(--dim)}
footer a{color:var(--dim)}
footer a:hover{color:var(--accent)}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ============================================================================
   THE PAD LANGUAGE
   The instrument's own graphic system, used as the page's. Thirteen hard-edged
   blocks on a row, in the four states the device draws: empty, loaded, level,
   stop. Nothing here is decoration - a pad row is the page saying, in the
   machine's own vocabulary, that one thing has ended and another has begun.
   Sparse on purpose: a lit block should be an event, not a texture.
   ========================================================================== */
.pads{display:grid;grid-template-columns:repeat(13,1fr);gap:5px;margin:0 0 30px}
.pads i{display:block;height:13px;background:var(--off)}
.pads i.on{background:var(--teal)}
.pads i.lvl{background:var(--accent)}
.pads i.stop{background:var(--stop)}
.pads i.warn{background:var(--amber)}
/* The loud one. Used once, in the hero, where the page has to be wanted rather
   than read. Deliberately WIDER than it is tall: sitting directly under the
   instrument at pad proportions, it read as more pads and invited a tap that
   does nothing, which is the worst possible first interaction on a page whose
   pitch is "tap a pad". As a band it is the same language without the lie. */
.pads.big i{height:clamp(16px,2.4vw,28px)}
.pads.big{gap:clamp(4px,.7vw,8px);margin:0 0 clamp(32px,4.5vw,52px)}


/* The buy button is a pad. It is the one thing on the page you press. */
/* One shape, two jobs. .buy is the ONLY class ce-buy.js touches: it is the
   link that goes to Stripe, and script writes its href. .btn never gets an
   href from anywhere, so a navigation button can never be turned into a
   payment link by a selector that grew. Keep that split. */
.buy,.btn{display:inline-block;text-decoration:none;padding:20px 46px;
          font:700 17px var(--sans);letter-spacing:-.01em;
          border:1px solid transparent;transition:background .12s,border-color .12s,color .12s}
.buy,.btn.primary{background:var(--teal);color:var(--on-teal);border-color:var(--teal)}
.buy:hover,.buy:focus-visible,
.btn.primary:hover,.btn.primary:focus-visible{background:var(--accent);color:var(--on-accent);
                                              border-color:var(--accent)}
.buy:active,.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;color:var(--txt);border-color:var(--line)}
.btn.ghost:hover,.btn.ghost:focus-visible{color:var(--accent);border-color:var(--accent)}
.buy .mode{font-weight:400;font-size:12.5px;opacity:.75}

/* The head of a page that is not the landing page. */
.sechead{padding:22px 0 0}
.sechead h1{margin:0 0 20px}
.sechead .lead{margin-bottom:20px}

/* the cross-link to the hardware page. Indented only when it sits beside the
   button; on its own line it starts at the measure like everything else. */
.altlink{display:inline-block;font-size:14.5px;color:var(--dim)}
.buy + .altlink,
.btn + .altlink{margin-left:26px}
.altlink a{color:var(--dim);border-bottom:1px solid rgba(120,126,136,.5);
           text-decoration:none}
.altlink a:hover{color:var(--accent);border-bottom-color:var(--accent)}


/* --- moved out of seven inline copies, 16 Sep 2026 -------------------------
   The legal pages, the Impressum and the pack list each carried a 187-line
   copy of an OLDER stylesheet: mono headings, a 1180px measure, and about 55
   rules per page for markup those pages do not contain. Of everything in
   those blocks, only what follows was both used and missing here. */

/* A small label above a heading. Every page that has a heading uses one. */
.eyebrow{font:600 11px/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;
         color:var(--dim);margin:0 0 18px}

/* The first section on a page sits under the masthead, not under a rule. */
section:first-of-type{border-top:0}

/* The language switch, for pages that exist in German and English. It matches
   .themetoggle deliberately: both are utility controls in the same strip, and
   a reader should not have to learn two shapes for "change something here". */
.top .lang{margin-left:auto;background:transparent;border:1px solid var(--line);
           color:var(--dim);font:500 11px/1 var(--mono);letter-spacing:.12em;
           text-transform:uppercase;text-decoration:none;padding:8px 12px}
.top .lang:hover{color:var(--accent);border-color:var(--accent)}
/* When a page has both, the toggle keeps the right edge and the switch sits
   beside it rather than fighting it for the same margin-left:auto. */
.top .lang + .themetoggle{margin-left:10px}

/* --- reference documents ---------------------------------------------------
   The legal pages are scanned, not read: someone arrives looking for one
   section out of eight. Their section headings were mono uppercase labels in
   the old inline stylesheet and that was doing real work, which the general
   h3 (a card title, 15px sans) cannot do. This is the one place ce.css needs
   a variant rather than a value. Put class="doc" on the <section>. */
.doc h3{font:600 13px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
        color:var(--dim);margin-top:36px}
.doc h3:first-of-type{margin-top:44px}
.doc p{max-width:62ch}

/* A photograph in a figure. The hairline keeps an edge under the light theme,
   where a pale product shot would otherwise bleed into the page. */
figure.fig img.shot{display:block;width:100%;height:auto;
                    border:1px solid var(--line);background:var(--panel)}