@font-face { font-family: "Bricolage"; src: url("/assets/fonts/BricolageGrotesque_700Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Bricolage"; src: url("/assets/fonts/BricolageGrotesque_800ExtraBold.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Jakarta"; src: url("/assets/fonts/PlusJakartaSans_400Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Jakarta"; src: url("/assets/fonts/PlusJakartaSans_600SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Jakarta"; src: url("/assets/fonts/PlusJakartaSans_700Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --violet: #7B3FF2;
  --violet-deep: #5B21D6;
  --violet-bright: #9D6BFF;
  --pink: #FF3D9A;
  --tangerine: #FF8A3D;
  --lime: #C6F432;
  --ink: #14101F;
  --lilac: #FBF9FF;
  --lilac-2: #EFE8FF;
  --ink-soft: #4D4560;
  --display: "Bricolage", "Avenir Next", system-ui, sans-serif;
  --body: "Jakarta", "Avenir Next", system-ui, sans-serif;
  --gutter: clamp(16px, 4vw, 56px);
  --ease: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; scrollbar-color: var(--violet) transparent; }
body { margin: 0; font: 400 17px/1.6 var(--body); color: var(--ink); background: var(--lilac); -webkit-font-smoothing: antialiased; overflow-wrap: break-word; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, figure, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
h1, h2, h3 { font-family: var(--display); font-weight: 800; line-height: 1.02; letter-spacing: -.03em; text-wrap: balance; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1.5px; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
::selection { background: var(--lime); color: var(--ink); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 4px; box-shadow: 0 0 0 3px var(--lime); }

.skip { position: absolute; inset-inline-start: 12px; top: -80px; z-index: 100; padding: 10px 16px; background: var(--ink); color: #fff; border-radius: 10px; }
.skip:focus { top: 12px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* The launch switch: copy for the other state stays out of the way. */
html[data-launch="prelaunch"] [data-when="live"],
html[data-launch="live"] [data-when="prelaunch"] { display: none !important; }

.brand { display: inline-flex; align-items: center; gap: 10px; font: 800 21px/1 var(--display); letter-spacing: -.02em; text-decoration: none; }
.brand img { width: 32px; height: 32px; border-radius: 9px; }

/* CTA */
.cta { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; max-width: 460px; width: 100%; }
.notify { width: 100%; }
.notify-row { display: flex; gap: 6px; padding: 6px; background: #fff; border: 2px solid var(--ink); border-radius: 999px; transition: box-shadow .25s; }
.notify-row:focus-within { box-shadow: 0 0 0 4px var(--focus-ring, rgba(123, 63, 242, .35)); }
.notify input { flex: 1; min-width: 0; padding-block: 10px; padding-inline: 18px 8px; border: 0; background: transparent; color: var(--ink); outline: 0; font-size: 16px; }
.notify input::placeholder { color: #6B6280; }
.notify button { flex: none; min-height: 46px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 700; font-size: 16px; white-space: nowrap; transition: transform .2s var(--ease), background .2s; }
.notify button:hover { background: var(--violet-deep); }
.notify button:active { transform: scale(.97); }
.notify button:disabled { opacity: .55; cursor: progress; }
.notify-msg { min-height: 0; margin-top: 8px; font-size: 15px; font-weight: 600; }
.notify-msg:empty { display: none; }
.notify.is-done .notify-row { display: none; }
.cta-note { font-size: 15px; line-height: 1.4; }

.store { display: inline-flex; align-items: center; gap: 12px; min-height: 60px; padding-block: 8px; padding-inline: 18px 24px; background: var(--ink); color: #fff; border-radius: 14px; text-decoration: none; transition: transform .2s var(--ease); }
.store:hover { transform: translateY(-2px); }
.store svg { width: 28px; height: 28px; flex: none; }
.store small { display: block; font-size: 12px; line-height: 1.1; }
.store strong { display: block; font: 700 23px/1.1 var(--display); letter-spacing: -.01em; }

/* Phone that holds a real app screen */
.phone { position: relative; width: var(--w, 280px); aspect-ratio: 1320 / 2868; padding: 2.6%; background: #0D0A14; border-radius: 13.5% / 6.4%; box-shadow: 0 2px 0 rgba(255, 255, 255, .14) inset, 0 28px 60px -18px rgba(20, 16, 31, .55); }
.phone img { width: 100%; height: 100%; object-fit: cover; border-radius: 11.5% / 5.4%; }

/* Pricing + FAQ share semantics across concepts; each concept styles the skin. */
.faq details { border-bottom: 1.5px solid currentColor; }
.faq summary { display: flex; justify-content: space-between; gap: 16px; padding: 18px 0; font: 700 clamp(19px, 2vw, 23px)/1.2 var(--display); cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 14px; height: 14px; margin-top: 6px; border-right: 2.5px solid; border-bottom: 2.5px solid; transform: rotate(45deg); transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: translateY(5px) rotate(-135deg); }
.faq details p { max-width: 68ch; padding-bottom: 20px; }
.faq a { font-weight: 600; }

.foot { padding: 28px var(--gutter) 32px; font-size: 14.5px; }
.foot-in { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.foot .legal { flex-basis: 100%; opacity: .78; }

/* Phone-only sticky CTA */
.dock { position: fixed; z-index: 40; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); display: none; }
@media (max-width: 760px) {
  .dock { display: block; transform: translateY(140%); transition: transform .4s var(--ease); }
  .dock.is-on { transform: none; }
  .dock a { display: flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 20px; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 700; text-decoration: none; box-shadow: 0 14px 30px -10px rgba(20, 16, 31, .6); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

body { background: var(--violet); color: #fff; --focus-ring: rgba(255, 255, 255, .85); }
.split { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 72px); padding-inline-end: clamp(20px, 5vw, 88px); }
.side { position: sticky; top: 0; height: 100svh; min-height: 620px; display: flex; flex-direction: column; justify-content: space-between; padding-block: 22px; padding-inline-start: var(--gutter); }
.side-mid { display: grid; gap: 20px; }
.side h1 { font-size: clamp(3.2rem, 6.5vw, 6rem); line-height: .92; letter-spacing: -.04em; }
.side-mid > p { max-width: 44ch; font-size: 19px; line-height: 1.42; }
.side-nav { display: flex; flex-wrap: wrap; gap: 6px 22px; font-weight: 700; font-size: 16px; }
.side-nav a { text-decoration: none; }
.side-nav a:hover { text-decoration: underline; }

.paper { --edge: 9px; position: relative; margin-top: 26px; padding: 34px clamp(20px, 3.2vw, 44px) 0; background: #fff; color: var(--ink); box-shadow: 0 30px 60px -30px rgba(20, 16, 31, .5); min-width: 0; }
/* Torn top edge, drawn as a repeating notch so it stays crisp at any width. */
.paper::before { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--edge) * -1); height: var(--edge); background: linear-gradient(135deg, transparent 50%, #fff 50%) 0 0 / 18px 18px repeat-x, linear-gradient(225deg, transparent 50%, #fff 50%) 0 0 / 18px 18px repeat-x; }
.head { text-align: center; padding-bottom: 20px; border-bottom: 2px dashed var(--ink); font-size: 15px; line-height: 1.5; }
.shop { font: 800 42px/1 var(--display); letter-spacing: -.03em; margin-bottom: 8px; }

.scan { padding: 22px 0 24px; border-bottom: 2px dashed var(--ink); }
.scan h2 { font-size: 30px; margin-bottom: 12px; }
.tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.tabs button { min-height: 44px; padding: 0 14px; border: 2px solid var(--ink); border-radius: 8px; background: #fff; font-weight: 700; font-size: 15px; transition: background .2s, color .2s; }
.tabs button:hover { background: var(--lilac-2); }
.tabs button[aria-selected="true"] { background: var(--ink); color: #fff; }
.scan-item { position: relative; display: grid; place-items: center; height: clamp(170px, 23vh, 240px); margin-top: 14px; overflow: hidden; background: #FFF1E6; border-radius: 10px; }
.scan-item img { position: absolute; inset: 6%; width: 88%; height: 88%; object-fit: contain; }
.beam { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--pink); box-shadow: 0 6px 18px 4px rgba(255, 61, 154, .55); opacity: 0; }
.is-scanning .beam { opacity: 1; animation: beam .95s var(--ease) both; }
@keyframes beam { from { transform: translateY(0); } to { transform: translateY(300px); } }

.result { margin-top: 14px; }
.line { font-weight: 700; font-size: 15px; }
.verdict { margin: 4px 0 10px; font: 800 clamp(24px, 2.6vw, 31px)/1.08 var(--display); letter-spacing: -.02em; }
.row-imgs { display: flex; gap: 8px; margin-bottom: 12px; }
.row-imgs[hidden] { display: none; }
.row-imgs img { width: 74px; height: 74px; padding: 6px; object-fit: contain; background: #F4F0FA; border-radius: 10px; }
.is-scanning .result > * { opacity: .25; }
.is-done .result > * { animation: print .45s var(--ease) backwards; }
.is-done .result > :nth-child(2) { animation-delay: .08s; }
.is-done .result > :nth-child(3) { animation-delay: .16s; }
.is-done .result > :nth-child(4) { animation-delay: .24s; }
.is-done .result > :nth-child(5) { animation-delay: .32s; }
@keyframes print { from { opacity: 0; transform: translateY(-8px); } }
.small { font-size: 14.5px; line-height: 1.45; color: var(--ink-soft); }
.center { text-align: center; }

.li { padding: 28px 0; border-bottom: 2px dashed var(--ink); overflow: hidden; }
.li h2 { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-size: clamp(30px, 3.2vw, 42px); margin-bottom: 10px; }
.qty { flex: none; font: 700 15px var(--body); letter-spacing: 0; }
.art { display: flex; justify-content: center; gap: 14px; margin: 22px 0 -96px; --w: clamp(200px, 19vw, 262px); }
.art-2 { --w: clamp(150px, 15vw, 218px); }
.extras { display: grid; gap: 7px; }
.extras li { display: flex; align-items: baseline; gap: 8px; }
.extras li span:first-child { font-weight: 600; }
.extras i { flex: 1; min-width: 16px; border-bottom: 2px dotted var(--ink); transform: translateY(-4px); }
.extras li span:last-child { flex: none; }
.prices { width: 100%; border-collapse: collapse; margin-bottom: 12px; }
.prices th, .prices td { padding: 10px 0; text-align: start; vertical-align: top; border-bottom: 1.5px solid var(--lilac-2); }
.prices tbody th { font-weight: 700; padding-inline-end: 16px; }
.prices small { display: block; font-weight: 400; font-size: 14.5px; color: var(--ink-soft); }
.prices td { text-align: end; font: 800 21px/1.3 var(--display); font-variant-numeric: tabular-nums; }
.paper .faq details { border-bottom: 1.5px solid var(--lilac-2); }
.paper .faq summary { font-size: 19px; padding: 13px 0; }

.last { display: grid; justify-items: center; gap: 12px; text-align: center; border-bottom: 0; }
.last h2 { font-size: clamp(38px, 4.4vw, 56px); margin: 0; }
.last .cta { align-items: center; }
.barcode { width: 100%; max-width: 340px; margin-top: 12px; }
.foot { margin: 0 calc(clamp(20px, 3.2vw, 44px) * -1); padding-inline: clamp(20px, 3.2vw, 44px); background: var(--ink); color: #fff; }

@media (max-width: 960px) {
  .split { grid-template-columns: 1fr; padding-inline-end: 0; gap: 0; }
  .side { position: static; height: auto; min-height: 0; gap: 30px; padding: 16px var(--gutter) 26px; }
  .side .langs ul { inset-inline-end: 0; }
  .side h1 { font-size: clamp(3rem, 14.5vw, 5.4rem); }
  .side-nav { display: none; }
  .paper { margin: 8px var(--gutter) 0; padding-inline: 18px; }
  .foot { margin: 0 -18px; padding-inline: 18px; padding-bottom: 96px; }
  .art { --w: min(52vw, 240px); }
  .art-2 { --w: min(38vw, 190px); }
}

/* Language menu */
.side-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.langs { position: relative; }
.langs summary { display: flex; align-items: center; gap: 8px; min-height: 44px; padding-inline: 8px; font-weight: 700; font-size: 16px; cursor: pointer; list-style: none; }
.langs summary::-webkit-details-marker { display: none; }
.langs summary svg { width: 20px; height: 20px; }
.langs ul { position: absolute; z-index: 20; top: 100%; inset-inline-end: 0; width: max-content; max-height: 70vh; overflow-y: auto; padding: 8px; background: #fff; color: var(--ink); border: 2px solid var(--ink); border-radius: 12px; columns: 2; column-gap: 8px; }
.langs a { display: block; padding: 8px 10px; border-radius: 8px; text-decoration: none; break-inside: avoid; }
.langs a:hover { background: var(--lilac-2); }
.langs a[aria-current] { font-weight: 700; background: var(--ink); color: #fff; }

/* Scripts the brand faces don't cover use the platform's own type, untracked. */
html:lang(ru) { --display: "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif; --body: "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif; }
html:lang(ar) { --display: "SF Arabic", "Geeza Pro", "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif; --body: "SF Arabic", "Geeza Pro", "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif; }
html:lang(ja) { --display: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif; --body: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif; }
html:lang(ko) { --display: "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif; --body: "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif; }
html:lang(ar) :is(h1, h2, h3, .shop, .verdict), html:lang(ja) :is(h1, h2, h3, .shop, .verdict), html:lang(ko) :is(h1, h2, h3, .shop, .verdict) { letter-spacing: 0; line-height: 1.22; }
html:lang(ru) :is(h1, h2, h3, .shop, .verdict) { letter-spacing: -.02em; line-height: 1.04; }
html:lang(ja) body { line-break: strict; }
html:lang(ko) h1, html:lang(ko) h2 { word-break: keep-all; }

.langs:not([open]) ul { display: none; }
.side-top .brand { flex: none; }
.langs summary span { max-width: 44vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.langs ul { max-width: calc(100vw - 32px); }
.faq summary { overflow: visible; }
@media (max-width: 400px) {
  .langs ul { columns: 1; }
  .langs summary span { max-width: 30vw; }
}

@media (max-width: 960px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .side, .paper { min-width: 0; }
}
.notify button { padding-inline: clamp(12px, 4vw, 22px); }
.extras li span:first-child { min-width: 0; }
.extras li span:last-child { max-width: 45%; text-align: end; }

.side-mid, .last { grid-template-columns: minmax(0, 1fr); }
.notify input { width: 0; }
.side .notify-row { max-width: 100%; }

.li h2 { flex-wrap: wrap; }
.langs { min-width: 0; }
@media (max-width: 350px) {
  .langs summary span { display: none; }
}

/* Scan block: printed on the paper itself */
.scan-item { background: none; border-radius: 0; margin-top: 10px; }
.line-check { position: absolute; inset-block-end: 2px; inset-inline-start: 0; padding: 2px 8px; background: var(--ink); color: #fff; font-weight: 700; font-size: 14.5px; opacity: 0; }
.is-scanning .line-check { opacity: 1; }
.verdict { margin-block: 8px 12px; }
.print { display: grid; gap: 4px; margin-bottom: 14px; }
.print[hidden] { display: none; }
.print li { display: flex; align-items: center; gap: 8px; min-height: 46px; font-weight: 600; }
.print i { flex: 1; min-width: 16px; border-bottom: 2px dotted var(--ink); }
.print img { flex: none; width: 46px; height: 46px; object-fit: contain; }
.line { margin-bottom: 2px; }
.is-scanning .result > * { opacity: .2; }

/* Display faces for scripts Bricolage doesn't cover: subset to this page's glyphs */
@font-face { font-family: "DisplayAr"; src: url("/assets/fonts/display-ar.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "DisplayRu"; src: url("/assets/fonts/display-ru.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "DisplayJa"; src: url("/assets/fonts/display-ja.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "DisplayKo"; src: url("/assets/fonts/display-ko.woff2") format("woff2"); font-weight: 800; font-display: swap; }
html:lang(ar) :is(h1, h2, h3, .verdict, .faq summary) { font-family: "DisplayAr", var(--display); }
html:lang(ru) :is(h1, h2, h3, .verdict, .faq summary) { font-family: "DisplayRu", var(--display); }
html:lang(ja) :is(h1, h2, h3, .verdict, .faq summary) { font-family: "DisplayJa", var(--display); }
html:lang(ko) :is(h1, h2, h3, .verdict, .faq summary) { font-family: "DisplayKo", var(--display); }

.phone { box-shadow: none; }
.li h2 .qty { margin-inline-start: auto; }
body { --focus-ring: rgba(20, 16, 31, .8); caret-color: var(--pink); }
.barcode { height: 60px; color: var(--ink); }
.barcode svg { display: block; width: 100%; height: 100%; }

@media (max-width: 960px) {
  .side-mid { gap: 14px; }
  .side { gap: 18px; padding-bottom: 18px; }
  .head { padding-bottom: 12px; font-size: 14.5px; }
  .head p:nth-child(3) { display: none; }
  .shop { font-size: 30px; margin-bottom: 2px; }
  .paper { padding-top: 16px; }
  .scan { padding-top: 14px; }
  .scan-item { height: 190px; }
}

html:lang(ja) .side h1 { font-size: clamp(2rem, 3.8vw, 3.5rem); word-break: keep-all; }
@media (max-width: 960px) {
  html:lang(ja) .side h1 { font-size: 9vw; }
}

.verdict { text-wrap: balance; }
.cta-note { text-wrap: pretty; }
html:lang(ja) :is(h2, .verdict), html:lang(ko) :is(h2, .verdict) { word-break: keep-all; }

/* The wordmark and prices stay Bricolage in every language */
.shop, .brand, .prices td, .store strong { font-family: "Bricolage", "Avenir Next", system-ui, sans-serif; letter-spacing: -.02em; }

.art-2:has(> .phone:only-child) { --w: clamp(200px, 19vw, 262px); }

.notify-row { flex-wrap: wrap; border-radius: 30px; }
.notify input { flex: 999 1 140px; }
.notify button { flex: 1 0 auto; }

.extras li { align-items: last baseline; }

/* Paper column: the receipt tears off above the footer */
.col { min-width: 0; }
.paper { margin-bottom: 30px; padding-bottom: 8px; }
.paper::after { content: ""; position: absolute; left: 0; right: 0; bottom: calc(var(--edge) * -1); height: var(--edge); background: linear-gradient(45deg, transparent 50%, #fff 50%) 0 100% / 18px 18px repeat-x, linear-gradient(315deg, transparent 50%, #fff 50%) 0 100% / 18px 18px repeat-x; }
.last { border-bottom: 0; }
.foot, .paper + .foot { margin: 0; padding-inline: 0; padding-block: 8px 28px; background: none; color: var(--ink); }
.foot .legal { opacity: 1; }
@media (max-width: 960px) {
  .foot, .paper + .foot { padding-inline: var(--gutter); padding-bottom: 96px; }
}

@media (max-width: 350px) {
  html:lang(ja) .li h2 { font-size: 25px; }
}

html:lang(ja) .cta-note { word-break: keep-all; }

@media (max-width: 760px) {
  .side h1 { font-size: clamp(2.5rem, 12.4vw, 3.6rem); }
  html:lang(ja) .side h1 { font-size: 9vw; }
  .side-mid > p { font-size: 16.5px; line-height: 1.36; }
  .scan h2 { font-size: 23px; margin-bottom: 8px; }
  .tabs { gap: 5px; }
  .tabs button { min-height: 44px; padding: 0 9px; font-size: 14px; }
  .scan-item { height: 176px; margin-top: 6px; }
}

.hp { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); opacity: 0; }
.notify-msg[data-state="error"] { padding: 8px 12px; background: var(--ink); color: #fff; }
.notify-msg[data-state="ok"] { font-weight: 700; }

/* The pill is the field: its ring shows focus, so the input inside draws none of its own. */
.notify input:focus, .notify input:focus-visible { outline: 0; box-shadow: none; }
.notify-row:focus-within { box-shadow: 0 0 0 3px var(--ink); }

/* App identity: violet ground and actions, lime for the one accent, lilac surfaces. */
:focus-visible { outline-color: #fff; box-shadow: 0 0 0 3px var(--ink); }
.paper :focus-visible { outline-color: var(--violet); box-shadow: 0 0 0 3px var(--lilac-2); }
.paper { color: var(--ink); background: var(--lilac); }
.paper::before { background: linear-gradient(135deg, transparent 50%, var(--lilac) 50%) 0 0 / 18px 18px repeat-x, linear-gradient(225deg, transparent 50%, var(--lilac) 50%) 0 0 / 18px 18px repeat-x; }
.paper::after { background: linear-gradient(45deg, transparent 50%, var(--lilac) 50%) 0 100% / 18px 18px repeat-x, linear-gradient(315deg, transparent 50%, var(--lilac) 50%) 0 100% / 18px 18px repeat-x; }
.langs ul { color: var(--ink); }
.langs a[aria-current] { background: var(--violet); }
.side .notify-row { border-color: #fff; }
.side .notify-row:focus-within { box-shadow: 0 0 0 3px var(--lime); }
.side .notify input, .paper .notify input { color: var(--ink); }
.side .notify button { background: var(--lime); color: var(--ink); }
.side .notify button:hover { background: #D4FF4F; }
.side .notify-msg[data-state="error"] { background: var(--ink); }
.paper .notify-row { border-color: var(--violet); }
.paper .notify-row:focus-within { box-shadow: 0 0 0 3px var(--lilac-2); }
.paper .notify button { background: var(--violet); }
.paper .notify button:hover { background: var(--violet-deep); }
.tabs button { border-color: var(--violet); color: var(--violet-deep); }
.tabs button[aria-selected="true"] { background: var(--violet); border-color: var(--violet); color: #fff; }
.line-check { background: var(--violet); }
.head, .scan, .li { border-bottom-color: var(--violet-bright); }
.print i, .extras i { border-bottom-color: var(--violet-bright); }
.barcode { color: var(--violet-deep); }
.prices th, .prices td, .paper .faq details { border-bottom-color: var(--lilac-2); }
.paper a { color: var(--violet-deep); }
.foot, .paper + .foot { color: #fff; }
.dock a { background: var(--violet); }
.store { background: var(--ink); color: #fff; }
.paper .store { color: #fff; }
::selection { background: var(--lime); color: var(--ink); }