/* DS suite v4 "RAW" — contemporary brutalism for DS Desk, DS Biro and DS Studio (identical file in all three).
   Loaded after suite.css. No decoration, only structure: full-bleed colour slab hero, inverted ticker,
   razor rules, giant condensed variable type, bento tool grid, cut corners (no textures, no shadows).
   2026 CSS, all progressive: oklch(), light-dark(), color-mix(), container query units (cqi),
   corner-shape (notch), scroll-driven animations (view()/scroll()), @starting-style, field-sizing,
   text-wrap, @property. Browsers without a feature fall back to plain square corners and static layout. */

/* ---------- tokens ---------- */
:root {
  --r: 0px;
  --r-lg: 0px;
  --r-xl: 0px;
  --f-display: "Bricolage Grotesque", "Arial Narrow", Impact, sans-serif;
  --f-body: "Geist", "Manrope", system-ui, "Segoe UI", sans-serif;
  --f-mono: "Geist Mono", "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --black: #0a0a0a;
  --cream: #f1f0ea;
  --edge: color-mix(in oklch, var(--fg) 62%, transparent);
  --rule: 2px solid var(--fg);
  --cut: 22px;            /* size of the notched corner */
  --hl: var(--gold);
}
/* each tool owns one electric accent; --gold is the accent token used across the app styles */
html[data-app="biro"]   { --gold: oklch(0.89 0.25 148); --gold-text: oklch(0.89 0.25 148); --accent: oklch(0.89 0.25 148); }
html[data-app="studio"] { --gold: oklch(0.72 0.27 350); --gold-text: oklch(0.78 0.23 350); --accent: oklch(0.72 0.27 350); }
html[data-app="biro"][data-theme="light"]   { --gold-text: oklch(0.45 0.15 150); }
html[data-app="studio"][data-theme="light"] { --gold-text: oklch(0.5 0.24 350); }
html[data-theme="light"] { --edge: color-mix(in oklch, var(--fg) 70%, transparent); }
html { font-synthesis: none; font-optical-sizing: auto; }
body { font-family: var(--f-body); font-feature-settings: "ss01", "cv11"; }

/* ---------- squared by default, cut corners where it matters ---------- */
*, *::before, *::after { border-radius: 0 !important; }
.btn.is-busy::before, .status i { border-radius: 50% !important; }
@supports (corner-shape: notch) {
  .tool, .panel, .result, .pal-box, .suite-menu, .desk-only-box { border-top-right-radius: var(--cut) !important; corner-top-right-shape: notch; }
  .btn, .toast, .h1-b { border-bottom-right-radius: 12px !important; corner-bottom-right-shape: notch; }
  .search { border-top-right-radius: 18px !important; corner-top-right-shape: notch; }
  .ph-ico, .tool-ico, .drop-ico { border-top-left-radius: 10px !important; corner-top-left-shape: notch; }
}
:focus-visible { outline: 3px solid var(--gold); outline-offset: 0; }
::selection { background: var(--gold); color: var(--black); }
* { scrollbar-width: thin; scrollbar-color: var(--fg) transparent; }

/* ---------- floor: flat ---------- */
body { background: var(--bg); }
body::before, body::after { display: none; }
.aurora, .grid-bg { display: none !important; }

/* ---------- display type: condensed variable grotesque ---------- */
.hero h1, .ph-txt h1, .sec-head h2, .tool h3, .brand-word, .big-404, .hero-stats b, .suite-item strong,
.ticker-run, .foot::after, .tool::after, .desk-only-box h1, .privacy h2 {
  font-family: var(--f-display);
  font-weight: 800;
  font-stretch: 75% !important;
  text-transform: uppercase;
  letter-spacing: -.02em;
  line-height: .9;
}
.brand-word { font-size: 1.25rem; letter-spacing: -.01em; }
.brand-word b { background: var(--gold); color: var(--black); padding: .05em .22em 0; margin-right: .08em; }
.sec-kicker, .panel-title, .status, .crumb, .chip, .rail-link, .nav-link, .shelf-k, .foot-h, .pal-group, .opt > span, .mini, .tabs button, .seg button {
  font-family: var(--f-mono);
}

/* ---------- header ---------- */
#nav-root { background: var(--bg); border-bottom: var(--rule); -webkit-backdrop-filter: none; backdrop-filter: none; }
#nav-root::after { display: none; }
.nav-link { font-weight: 600; letter-spacing: .04em; border-bottom: 3px solid transparent; }
.nav-link.is-on { color: var(--fg); border-bottom-color: var(--gold); }
.nav-link:hover { color: var(--gold-text); }
.suite-btn, .find-btn, .icon-btn, .lang, .nav-home { border: 2px solid var(--fg); background: transparent; color: var(--fg); }
.suite-btn:hover, .find-btn:hover, .icon-btn:hover, .suite.is-open .suite-btn { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.lang-btn.is-on { background: var(--fg); color: var(--bg); }
.suite-menu { border: var(--rule); box-shadow: none; background: var(--bg); }
.suite-item { border: 0; }
.suite-item:hover, .suite-item.is-on { background: var(--gold); color: var(--black); }
.suite-item:hover small, .suite-item.is-on small, .suite-item:hover .suite-go, .suite-item:hover strong b { color: var(--black); }
.suite-ico { background: var(--fg); color: var(--bg); border: 0; }

/* ---------- buttons ---------- */
.btn { border: 2px solid var(--black); font-family: var(--f-mono); font-weight: 700; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; transition: background .15s, color .15s, transform .12s; }
.btn-gold { background: var(--gold); color: var(--black); box-shadow: none; }
.btn-gold:hover:not(:disabled) { background: var(--fg); color: var(--bg); border-color: var(--fg); transform: none; box-shadow: none; }
.btn-gold:active:not(:disabled) { transform: scale(.97); box-shadow: none; }
.btn-line { background: transparent; color: var(--fg); border-color: var(--fg); box-shadow: none; }
.btn-line:hover:not(:disabled) { background: var(--fg); color: var(--bg); border-color: var(--fg); transform: none; box-shadow: none; }
.mini { border: 2px solid var(--fg); background: transparent; color: var(--fg); font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.mini:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }

/* ---------- hero: full-bleed colour slab ---------- */
.hero { background: var(--gold); color: var(--black); border-bottom: 2px solid var(--black); padding-block: 2.2rem 3rem; }
@media (min-width: 1024px) { .hero { padding-block: 4rem 4.6rem; } }
.hero-copy { container-type: inline-size; }
.hero .status { border: 2px solid var(--black); background: transparent; color: var(--black); font-weight: 600; box-shadow: none; }
.hero .status i { background: var(--black); animation: none; }
.hero h1 { font-size: clamp(2.6rem, 17cqi, 8.6rem); margin-block: 1.4rem 1.3rem; overflow-wrap: anywhere; }
.hero h1 .h1-a { color: var(--black); display: block; }
.hero h1 .h1-b,
html[data-theme="light"] .hero h1 .h1-b {
  display: inline-block;
  margin-top: .1em;
  padding: .06em .14em 0;
  background: var(--black) !important;
  background-image: none !important;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: var(--gold) !important;
  border: 0;
  box-shadow: none;
  transform: none;
  animation: none;
}
.hero-lead { color: var(--black); opacity: 1; font-weight: 500; font-size: clamp(1rem, .95rem + .35vw, 1.2rem); line-height: 1.55; max-width: 34rem; border: 0; padding: 0; }
.search { background: var(--black); color: var(--cream); border: 2px solid var(--black); box-shadow: none; max-width: 36rem; }
.search:focus-within { border-color: var(--black); box-shadow: 0 0 0 4px var(--cream); transform: none; }
.search > svg { color: var(--gold); }
.search input { color: var(--cream); font-family: var(--f-mono); font-weight: 500 !important; }
.search input::placeholder { color: color-mix(in oklch, var(--cream) 55%, transparent); }
.search .search-kbd { background: transparent; color: var(--cream); border-color: color-mix(in oklch, var(--cream) 40%, transparent); }
.hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; max-width: 36rem; margin-top: 1.6rem; border: 0; border-top: 2px solid var(--black); background: transparent; }
.hero-stats span { border: 0; border-right: 2px solid var(--black); background: transparent; padding: .8rem .9rem .2rem 0; }
.hero-stats span + span { padding-left: .9rem; }
.hero-stats span:last-child { border-right: 0; }
.hero-stats b { color: var(--black); font-size: clamp(1.8rem, 1.2rem + 2vw, 3rem); }
.hero-stats small { color: var(--black); font-family: var(--f-mono); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; opacity: .85; }
.sheet, .sheet-1, .sheet-2, .sheet-3 { border: 2px solid var(--black) !important; box-shadow: 10px 10px 0 var(--black) !important; }
@supports (animation-timeline: scroll()) {
  .hero h1 { animation: hero-away linear both; animation-timeline: scroll(root); animation-range: 0 60vh; transform-origin: left top; }
  @keyframes hero-away { to { transform: translateY(-4vh) scale(.92); opacity: .15; } }
}

/* ---------- ticker: inverted, alternating solid / outline ---------- */
.ticker { background: var(--fg); color: var(--bg); border: 0; overflow: hidden; user-select: none; }
.ticker-lane { display: flex; width: max-content; animation: ticker 46s linear infinite; }
.ticker-run { flex: none; display: flex; align-items: center; gap: 1.4rem; padding: .55rem 1.4rem .6rem 0; font-size: clamp(1.7rem, 1.2rem + 2vw, 3rem); white-space: nowrap; }
.tk-w:nth-child(4n + 3) { color: transparent; -webkit-text-stroke: 1.5px var(--bg); }
.tk-s { font-family: var(--f-mono); font-size: .45em; color: var(--gold-text); }
html[data-theme="dark"] .tk-s, html:not([data-theme="light"]) .tk-s { color: var(--black); }
@keyframes ticker { to { transform: translateX(-50%); } }
.ticker:hover .ticker-lane { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .ticker-lane { animation: none; } }

/* ---------- sections, rail ---------- */
.sec + .sec { border-top: var(--rule); }
.sec-head h2 { font-size: clamp(2.6rem, 1rem + 7.2vw, 7.4rem); }
.sec-head h2 span { color: var(--gold-text); }
.sec-kicker { color: var(--fg); font-weight: 600; letter-spacing: .1em; }
.sec-kicker b { background: var(--fg); color: var(--bg); padding: .3rem .5rem; }
.sec-head p { color: var(--muted); font-size: 1rem; max-width: 26rem; }
.cat-rail { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; border-block: var(--rule); margin-top: 0; }
.rail-in { gap: 0; }
.rail-link { border: 0; border-right: 1px solid var(--line-2); background: transparent; color: var(--fg); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding-inline: 1rem; }
.rail-link:hover { background: var(--fg); color: var(--bg); }
.rail-link.is-on { background: var(--gold); color: var(--black); }
.rail-link.is-on b, .rail-link.is-on i { color: var(--black); }
.rail-link i { background: transparent; border: 1px solid currentColor; }
.shelf-chip { border: 2px solid var(--fg); background: transparent; box-shadow: none; }
.shelf-chip:hover { background: var(--gold); color: var(--black); border-color: var(--black); transform: none; box-shadow: none; }
.shelf-ico { background: var(--fg); color: var(--bg); }
.shelf-k { color: var(--fg); font-weight: 600; }

/* ---------- tool grid: bento ---------- */
.tools { gap: 0; border-top: 0; grid-auto-flow: dense; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); margin: 0; }
.tool {
  min-height: 200px;
  margin: 0 -1px -1px 0;
  padding: 1.15rem 1.2rem 1.1rem;
  border: 1px solid var(--edge);
  background: var(--bg);
  box-shadow: none;
  transition: background .18s, color .18s;
  animation: none;
}
.tool::before { display: none; }
.tool::after {
  content: attr(data-n);
  position: absolute;
  right: .8rem;
  bottom: .1rem;
  z-index: -1;
  font-size: 5.2rem;
  color: transparent;
  -webkit-text-stroke: 1.5px color-mix(in oklch, var(--fg) 28%, transparent);
  pointer-events: none;
  transition: -webkit-text-stroke-color .18s;
}
.tool:hover, .tool:focus-visible { background: var(--gold); color: var(--black); transform: none; box-shadow: none; border-color: var(--black); z-index: 2; }
.tool:hover::after { -webkit-text-stroke-color: color-mix(in oklch, var(--black) 40%, transparent); }
.tool:hover h3, .tool:hover p, .tool:hover .tool-foot, .tool:hover .fav-btn { color: var(--black); }
.tool h3 { font-size: 1.5rem; line-height: .92; padding-right: 2rem; transition: font-weight .25s; }
.tool:hover h3 { font-weight: 800; }
.tool p { color: var(--muted); font-size: .9rem; font-weight: 400; max-width: 22rem; }
.tool:hover p { opacity: .85; }
.tool-ico, .tool:hover .tool-ico { width: 42px; height: 42px; background: transparent; color: var(--fg); border: 2px solid currentColor; box-shadow: none; transform: none; }
.tool:hover .tool-ico { color: var(--black); }
.tool-ext, .tool-new { font-family: var(--f-mono); border: 1px solid currentColor; background: transparent; color: var(--muted); font-weight: 600; letter-spacing: .04em; }
.tool:hover .tool-ext { color: var(--black); border-color: var(--black); background: transparent; }
.tool-new { background: var(--gold); color: var(--black); border-color: var(--black); transform: none; }
.tool-foot { opacity: 1; transform: none; color: var(--fg); font-weight: 700; }
@media (pointer: fine) { .tool-foot { opacity: 0; transition: opacity .15s; } .tool:hover .tool-foot { opacity: 1; } }
.fav-btn { border: 0; background: transparent; color: var(--fg); }
.fav-btn:hover, .fav-btn.is-on { color: var(--gold-text); background: transparent; }
.tool:hover .fav-btn.is-on { color: var(--black); }
@media (min-width: 900px) {
  .tools { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tool:nth-child(7n + 1) { grid-column: span 2; }
  .tool:nth-child(7n + 1) h3 { font-size: 2.3rem; }
  .tool:nth-child(7n + 1)::after { font-size: 8rem; }
}
@media (min-width: 560px) and (max-width: 899px) { .tools { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559px) { .tools { grid-template-columns: minmax(0, 1fr); } .tool { min-height: 0; } }
@supports (animation-timeline: view()) {
  .tool { animation: wipe linear both; animation-timeline: view(); animation-range: entry 0% entry 35%; }
  @keyframes wipe { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
}

/* ---------- tool page ---------- */
.page-head { background: var(--gold); color: var(--black); border-bottom: 2px solid var(--black); }
.crumb, .crumb a { color: var(--black); font-weight: 600; }
.ph-ico { width: 84px; height: 84px; background: var(--black); color: var(--gold); border: 0; box-shadow: none; }
.ph-txt h1 { font-size: clamp(2.6rem, 1rem + 6.6vw, 6.8rem); color: var(--black); }
.ph-txt p { color: var(--black); opacity: 1; font-weight: 500; border: 0; padding: 0; }
.page-head .chip { border: 2px solid var(--black); background: transparent; color: var(--black); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.page-head .chip-gold { background: var(--black); color: var(--gold); }
.page-head .chip-btn:hover { background: var(--black); color: var(--gold); }
.page-head .fav-btn { color: var(--black); border: 2px solid var(--black); }
.page-head .fav-btn.is-on { background: var(--black); color: var(--gold); }
.work { padding-block: 2.4rem 4.5rem; }

/* ---------- panels, drop zone, forms ---------- */
.panel { background: var(--bg-2); border: 2px solid var(--fg); box-shadow: none; }
.panel::before { display: none; }
.panel-title { display: flex; align-items: center; gap: .6rem; width: 100%; padding: 0 0 .65rem; margin-bottom: 1.1rem; border-bottom: 2px solid var(--fg); background: transparent; color: var(--fg); font-weight: 700; letter-spacing: .12em; }
.panel-title b { background: var(--gold); color: var(--black); border: 0; box-shadow: none; width: 26px; height: 26px; }
.drop { border: 2px solid var(--fg); background: var(--bg); transition: background .15s, color .15s; position: relative; }
.drop::after { display: none; }
.drop::before { content: ""; position: absolute; inset: 10px; border: 1px dashed var(--line-2); pointer-events: none; transition: border-color .15s; }
.drop:hover, .drop.is-over { background: var(--gold); color: var(--black); transform: none; box-shadow: none; }
.drop:hover::before, .drop.is-over::before { border-color: var(--black); }
.drop:hover small, .drop.is-over small, .drop:hover .drop-t, .drop.is-over .drop-t { color: var(--black); }
.drop-ico { background: var(--fg); color: var(--bg); border: 0; box-shadow: none; }
.drop:hover .drop-ico { background: var(--black); color: var(--gold); }
.opt > span { color: var(--fg); font-weight: 600; letter-spacing: .08em; }
.opt input[type="text"], .opt input[type="number"], .opt input[type="password"], .opt input[type="date"], .opt input[type="email"], .opt input[type="time"], .opt input[type="month"], .opt input[type="url"], .opt input[type="tel"], .opt select, .opt textarea,
input[type="text"], input[type="number"], input[type="email"], input[type="url"], input[type="tel"], input[type="date"], textarea, select {
  border: 2px solid var(--edge);
  background: var(--bg);
  color: var(--fg);
  font-weight: 500;
  transition: border-color .12s, background .12s;
}
textarea { field-sizing: content; min-height: 5.5rem; max-height: 60vh; }
.opt input:focus, .opt select:focus, .opt textarea:focus, textarea:focus, select:focus, input:focus { outline: 3px solid var(--gold); outline-offset: 0; border-color: var(--fg); box-shadow: none; }
input[type="range"] { accent-color: var(--gold); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--gold); width: 1.15rem; height: 1.15rem; }
.seg { gap: 0; border: 2px solid var(--fg); background: transparent; }
.seg button { border: 0; border-right: 1px solid var(--fg); background: transparent; color: var(--fg); font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.seg button:last-child { border-right: 0; }
.seg button:hover { background: color-mix(in oklch, var(--gold) 40%, transparent); }
.seg button.is-on, .seg button[aria-pressed="true"], .seg button[aria-checked="true"] { background: var(--gold); color: var(--black); }
.tabs { border-bottom: 2px solid var(--fg); gap: 0; }
.tabs button, .tabs a { border: 2px solid var(--fg); border-bottom: 0; margin: 0 -2px 0 0; background: transparent; color: var(--fg); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.tabs .is-on, .tabs [aria-selected="true"] { background: var(--gold); color: var(--black); }
.note { border: 0; border-left: 8px solid var(--gold); background: var(--bg-3); font-weight: 500; }
.note.is-err { border-left-color: var(--red); }
.result { border: 2px solid var(--fg); border-left: 14px solid var(--ok); background: var(--bg-2); box-shadow: none; }
.result-ico { background: var(--ok); color: var(--black); border: 0; }
.file { border: 1px solid var(--edge); background: var(--bg); }
.file-badge { background: var(--fg); color: var(--bg); border: 0; font-family: var(--f-mono); font-weight: 700; }
.progress { height: 16px; border: 2px solid var(--fg); background: transparent; }
.progress span { background-color: var(--gold); background-image: repeating-linear-gradient(90deg, transparent 0 10px, var(--black) 10px 12px) !important; animation: none; }
.table-wrap { border: 2px solid var(--fg); background: var(--bg-2); }
table th { background: var(--fg); color: var(--bg); font-family: var(--f-mono); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.stage, .stage-wrap .stage { border: 2px solid var(--fg); box-shadow: none; }
.toast { border: 2px solid var(--black); background: var(--gold); color: var(--black); box-shadow: none; font-family: var(--f-mono); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.term { border: 2px solid var(--fg); box-shadow: none; }
.privacy .term-bar { background: var(--gold); color: var(--black); font-weight: 700; border-bottom: 2px solid var(--black); }
.term-bar i { background: var(--black) !important; width: 10px; height: 10px; }

/* ---------- palette ---------- */
.palette::backdrop { background: rgba(0, 0, 0, .78); -webkit-backdrop-filter: none; backdrop-filter: none; }
.pal-box { background: var(--bg); border: 2px solid var(--fg); box-shadow: none; }
.pal-top { border-bottom: 2px solid var(--fg); }
.pal-top input { font-family: var(--f-mono); font-weight: 500; }
.pal-item { border: 0; }
.pal-item.is-sel { background: var(--gold); color: var(--black); }
.pal-item.is-sel .pal-txt small, .pal-item.is-sel .pal-right { color: var(--black); }
.pal-item.is-sel .pal-ico { background: var(--black); color: var(--gold); }
.pal-ico { background: transparent; border: 1px solid var(--edge); color: var(--fg); }
.pal-group { color: var(--muted); font-weight: 600; }
.pal-foot { border-top: 2px solid var(--fg); }

/* ---------- phone dock: flush to the screen edge ---------- */
@media (max-width: 759px) {
  .dock { left: 0; right: 0; bottom: 0; width: 100%; transform: none; gap: 0; padding: 0 0 env(safe-area-inset-bottom); border: 0; border-top: 2px solid var(--fg); background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
  .dock-btn { border-right: 1px solid var(--line-2); font-family: var(--f-mono); font-weight: 600; text-transform: uppercase; min-height: 56px; }
  .dock-btn:last-child { border-right: 0; }
  .dock-btn.is-on { background: var(--gold); color: var(--black); }
  :root { --dock: 58px; }
  .hero-stats b { font-size: 1.7rem; }
  .tool h3 { font-size: 1.35rem; }
}

/* ---------- footer ---------- */
.foot { position: relative; overflow: hidden; margin-top: 0; background: var(--bg); border-top: var(--rule); isolation: isolate; }
.foot::before { display: none; }
.foot::after {
  content: "DESK";
  position: absolute;
  left: -.03em;
  bottom: -.2em;
  z-index: -1;
  font-size: clamp(7rem, 30vw, 28rem);
  line-height: .8;
  color: transparent;
  -webkit-text-stroke: 2px color-mix(in oklch, var(--fg) 24%, transparent);
  pointer-events: none;
}
html[data-app="biro"] .foot::after { content: "BIRO"; }
html[data-app="studio"] .foot::after { content: "STUDIO"; }
.foot-grid { padding-bottom: 7rem; }
.foot-h { background: transparent; color: var(--gold-text); padding: 0; font-weight: 600; letter-spacing: .14em; }
.foot-col a { font-weight: 600; }
.foot-col a:hover { background: transparent; color: var(--gold-text); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.foot-base { border-top: 2px solid var(--fg); font-family: var(--f-mono); }

/* ---------- desktop-only notice, 404 ---------- */
.desk-only-box { border: 2px solid var(--black); background: var(--gold); color: var(--black); box-shadow: none; }
.desk-only-box h1, .desk-only-box p { color: var(--black); }
.big-404 { color: transparent; -webkit-text-stroke: 3px var(--gold-text); font-size: clamp(7rem, 30vw, 20rem); }

/* ---------- route changes: instant wipe ---------- */
@supports (view-transition-name: x) {
  ::view-transition-old(root) { animation: vt-out .18s cubic-bezier(.7, 0, .84, 0) both; }
  ::view-transition-new(root) { animation: vt-in .26s cubic-bezier(.16, 1, .3, 1) both; }
}
@starting-style { .toast.show, .toast.is-on { opacity: 0; transform: translateY(12px); } }