@font-face { font-family: 'Crimson Pro'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/crimson-pro-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Crimson Pro'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/crimson-pro-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/inter-greek-ext.woff2) format('woff2'); unicode-range: U+1F00-1FFF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/inter-greek.woff2) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/inter-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/inter-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/inter-greek-ext.woff2) format('woff2'); unicode-range: U+1F00-1FFF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/inter-greek.woff2) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/inter-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/inter-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/inter-greek-ext.woff2) format('woff2'); unicode-range: U+1F00-1FFF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/inter-greek.woff2) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/inter-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/inter-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/inter-greek-ext.woff2) format('woff2'); unicode-range: U+1F00-1FFF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/inter-greek.woff2) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/inter-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/inter-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap; src: url(fonts/inter-greek-ext.woff2) format('woff2'); unicode-range: U+1F00-1FFF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap; src: url(fonts/inter-greek.woff2) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap; src: url(fonts/inter-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap; src: url(fonts/inter-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Literata'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/literata-greek-ext.woff2) format('woff2'); unicode-range: U+1F00-1FFF; }
@font-face { font-family: 'Literata'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/literata-greek.woff2) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: 'Literata'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/literata-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Literata'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/literata-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  --ink: #111; --grey: #626262; --rule: #d6d6d6; --paper: #fff;
  --frame: #0d0d0d; --signal: #ffd60a;
  --sans: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, Menlo, Consolas, "DejaVu Sans Mono", monospace;
  --g: clamp(16px, 4vw, 48px);
  --max: 1200px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { background: var(--paper); color: var(--ink); font: 16px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
.mono { font-family: var(--mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.grey { color: var(--grey); }
.k { background: var(--signal); padding: 0 .15em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.u { text-decoration: none; border-bottom: 2px solid var(--signal); }
.u:hover { background: var(--signal); }
.shell { max-width: var(--max); margin: 0 auto; padding: 0 var(--g); }

.mast { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 20px; padding-bottom: 20px; }
.mark { font-size: 21px; letter-spacing: -.02em; text-decoration: none; white-space: nowrap; }
.mark b { font-weight: 700; }
.mast nav { display: flex; gap: 24px; align-items: center; color: var(--grey); }
.mast nav a { text-decoration: none; }
.mast nav a:hover { color: var(--ink); }
.lang { white-space: nowrap; }
.lang a[aria-current] { color: var(--ink); border-bottom: 2px solid var(--signal); }
.btn { display: inline-block; background: var(--ink); color: #fff; border: 0; padding: 14px 22px; font: 700 16px/1.2 var(--sans); letter-spacing: -.01em; text-decoration: none; cursor: pointer; }
.btn:hover { background: #333; }
.btn.y { background: var(--signal); color: var(--ink); }
.btn.y:hover { background: #ffe14d; }
.btn.sm { padding: 10px 16px; font-size: 15px; }


h3 { font-size: 18px; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; margin-bottom: 2px; }

.row { display: grid; grid-template-columns: 220px 1fr; border-top: 2px solid var(--ink); padding: 14px 0 44px; scroll-margin-top: 16px; }
.row > .label small { display: block; color: var(--grey); text-transform: none; letter-spacing: 0; font: 13px/1.45 var(--sans); margin-top: 6px; padding-right: 24px; }


.row.solo { grid-template-columns: 1fr; }
.form { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 620px; }
.field { padding: 10px 0 14px; min-width: 0; }
fieldset.field { border: 0; }
.field > label, .field legend { display: block; margin-bottom: 8px; font-weight: 500; }
.field .opt { color: var(--grey); font-weight: 400; }
input[type=text], input[type=email], textarea {
  width: 100%; border: 1px solid #a8a8a8; border-radius: 0; padding: 11px 12px; font: 16px/1.4 var(--sans); color: var(--ink); background: #fff;
}
textarea { min-height: 96px; resize: vertical; }
input[type=text]:focus, input[type=email]:focus, textarea:focus { outline: 2px solid var(--signal); outline-offset: 1px; border-color: var(--signal); }
.pick input:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
::placeholder { color: #8a8a8a; }
.pair { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }
@media (max-width: 520px) { .pair { grid-template-columns: 1fr; } }
.picks { display: grid; gap: 0; }
.pick { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.pick input, .check input { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; flex: none; margin: 0; border: 1px solid var(--field-line); border-radius: 5px; background: transparent; cursor: pointer; }
.pick input:hover, .check input:hover { border-color: var(--grey); }
.pick input:checked, .check input:checked { border-color: var(--signal); background: var(--signal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.500 8.500l3 3L12.500 5' fill='none' stroke='%23111' stroke-width='2.200' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
.quote-head { max-width: 620px; padding: 14px 0 18px; }
.quote-head h2 { font-size: clamp(26px, 3.200vw, 36px); font-weight: 700; letter-spacing: -.03em; line-height: 1.1; margin-bottom: 8px; }
.pick span { display: inline-flex; align-items: center; gap: 8px; }
.pick svg { width: 18px; height: 18px; flex: none; }
.pick svg.tt { filter: drop-shadow(-1px -.6px 0 #25f4ee) drop-shadow(1px .6px 0 #fe2c55); }
.picks > input[type=text] { margin-top: 4px; }
.note { font-size: 14px; color: var(--grey); margin-top: 8px; }
.note a { color: var(--ink); }
.check { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--grey); margin-top: 8px; }
.check input { width: 16px; height: 16px; accent-color: var(--ink); }
.why { margin-top: 10px; font-size: 14px; color: var(--grey); }
.why summary { display: flex; align-items: center; gap: 7px; width: fit-content; cursor: pointer; list-style: none; }
.why summary::-webkit-details-marker { display: none; }
.why summary::before { content: ""; width: 18px; height: 18px; flex: none; background: var(--ink); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M128,24A104,104,0,1,0,232,128,104.110,104.110,0,0,0,128,24Zm0,168a12,12,0,1,1,12-12A12,12,0,0,1,128,192Zm8-48.720V144a8,8,0,0,1-16,0v-8a8,8,0,0,1,8-8c13.230,0,24-9,24-20s-10.770-20-24-20-24,9-24,20v4a8,8,0,0,1-16,0v-4c0-19.850,17.940-36,40-36s40,16.150,40,36C168,125.380,154.240,139.930,136,143.280Z'/%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 256 256'%3E%3Cpath d='M128,24A104,104,0,1,0,232,128,104.110,104.110,0,0,0,128,24Zm0,168a12,12,0,1,1,12-12A12,12,0,0,1,128,192Zm8-48.720V144a8,8,0,0,1-16,0v-8a8,8,0,0,1,8-8c13.230,0,24-9,24-20s-10.770-20-24-20-24,9-24,20v4a8,8,0,0,1-16,0v-4c0-19.850,17.940-36,40-36s40,16.150,40,36C168,125.380,154.240,139.930,136,143.280Z'/%3E%3C/svg%3E") center / contain no-repeat; }
.why summary::after { content: ""; width: 6px; height: 6px; margin-left: 2px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); opacity: .7; transition: transform .2s; }
.why[open] summary::after { transform: translateY(1px) rotate(-135deg); }
.why[open] summary::before { background: var(--signal); }
.why summary:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 4px; }
.why summary:hover { color: var(--ink); }
.why p { margin-top: 8px; max-width: 62ch; }
.send { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; padding-top: 24px; }
.status { margin-top: 16px; padding: 14px 16px; background: var(--signal); font-weight: 500; }
.status[hidden] { display: none; }
.hp { position: absolute; left: -9999px; }

.foot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 22px; padding-bottom: 28px; color: var(--grey); border-top: 1px solid var(--rule); }
.foot a { text-transform: none; }

@media (max-width: 900px) {
  .row { grid-template-columns: 1fr; gap: 14px; }
  .row > .label small { padding-right: 0; }
  .mast nav .hide-sm { display: none; }
}
@media (max-width: 640px) {
  .mast nav { gap: 14px; }
  .mast nav .btn { display: none; }
  .mark { font-size: 19px; }
  .send .btn { width: 100%; text-align: center; }
}
@media print {
  .mast nav, #quote { display: none; }
}


/* Dark direction: Candlelight + Cinema (approved 2026-11-14, MEDIA-17) */
:root {
  --paper: #0e0c0a; --ink: #ece4d6; --grey: #a1978a; --rule: rgba(236,228,214,.16);
  --field: #17140f; --field-line: #736a5e; --field-ph: #7d7467;
}
html, body { background: var(--paper); color: var(--ink); }

body { position: relative; }
.mast { position: relative; z-index: 5; color: #fff; max-width: none; padding-left: max(var(--g), calc((100vw - var(--max)) / 2 + var(--g))); padding-right: max(var(--g), calc((100vw - var(--max)) / 2 + var(--g))); }
.mast nav { color: rgba(255,255,255,.7); }
.mast nav a:hover { color: #fff; }
.lang a[aria-current] { color: #fff; }

.row { border-top: 1px solid var(--rule); }
.k { color: #111; }
.btn { background: var(--ink); color: #111; }
.btn:hover { background: #fff; }
input[type=text], input[type=email], textarea { background: transparent; border-color: var(--field-line); border-radius: 10px; color: var(--ink); }
.btn { border-radius: 10px; }
::placeholder { color: var(--field-ph); }
.check input { accent-color: var(--ink); }
.note a { color: var(--ink); }
.status { color: #111; }
.foot { border-top-color: var(--rule); }

:root { --paper: #0b0a08; --rule: rgba(236,228,214,.13); }

.btn, .btn.y { background: var(--signal); color: #111; }
.btn:hover, .btn.y:hover { background: #ffe14d; }
.u { border-bottom-color: var(--signal); }
.u:hover { background: var(--signal); color: #111; }
.k { background: none; color: var(--signal); padding: 0; }
.row { border-top: 1px solid var(--rule); padding-top: 18px; }

html, body { overflow-x: clip; }
.intro { position: relative; isolation: isolate; padding: 34px 0 30px; text-align: center; }
.intro::before, .intro::after { content: ""; position: absolute; left: calc(50% - 50vw); width: 100vw; pointer-events: none; }
.intro::before { z-index: -1; top: -170px; height: calc(100% + 230px); background: url("assets/hero-small.jpg") 50% 78% / cover no-repeat; filter: blur(46px) saturate(1.15) brightness(.5); -webkit-mask-image: linear-gradient(to bottom, #000 35%, rgba(0,0,0,.55) 68%, transparent 100%); mask-image: linear-gradient(to bottom, #000 35%, rgba(0,0,0,.55) 68%, transparent 100%); }
.intro::after { z-index: -2; top: calc(100% - 60px); height: 820px; background: url("assets/hero-small.jpg") 50% 30% / cover no-repeat; filter: blur(64px) saturate(1.1) brightness(.3); -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 20%, rgba(0,0,0,.5) 58%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, #000 20%, rgba(0,0,0,.5) 58%, transparent 100%); }
.h1wrap { position: relative; display: inline-block; max-width: 100%; margin: 14px 0; }
h1 { width: max-content; max-width: 100%; margin: 0 auto; font-size: clamp(27px, 5.6vw, 72px); font-weight: 500; line-height: 1.02; letter-spacing: -.04em; }
h1 > span { display: block; }
.deco-plane { display: inline-block; width: .74em; height: .74em; margin-right: .14em; vertical-align: .03em; color: var(--signal); }
.deco-cc { display: inline-block; width: .8em; height: .8em; margin-left: .14em; vertical-align: -.04em; color: var(--ink); }
@media (max-width: 620px) { .h1wrap { margin: 0; } }

#looks { grid-template-columns: 1fr; gap: 22px; border-top: 0; padding-top: 30px; }
.bento-row { grid-template-columns: 1fr; gap: 22px; }
.bn { --pad: 26px; --panel: #17140f; --edge: #3d362c; --card: #1b1814; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.bn .t { position: relative; min-width: 0; padding: var(--pad); display: flex; flex-direction: column; gap: 12px; overflow: hidden; background: var(--paper); }
.bn p { margin: 0; }
.bn .cp { font-size: 17px; line-height: 1.42; color: var(--grey); max-width: 34ch; }
.bn .cp b { color: var(--ink); font-weight: 600; }
.bn .tag { font: 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--signal); }
.bn .pic { margin-top: auto; padding-top: 10px; }
.bn .big, .bn .say { text-wrap: balance; }
.bn .tick { width: 15px; height: 15px; flex: none; color: var(--signal); }
.bn .lg { width: 15px; height: 15px; flex: none; }
.bn .lg.tt { filter: drop-shadow(-1px -.6px 0 #25f4ee) drop-shadow(1px .6px 0 #fe2c55); }
.bn .apps { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--grey); }
.bn .apps span { display: inline-flex; align-items: center; gap: 6px; transition: color .3s, opacity .3s, filter .3s; opacity: .5; filter: grayscale(1); }
.bn .apps.on span, .bn [data-app=fb] .apps [data-a=fb], .bn [data-app=ig] .apps [data-a=ig], .bn [data-app=yt] .apps [data-a=yt], .bn [data-app=shorts] .apps [data-a=shorts], .bn [data-app=tiktok] .apps [data-a=tiktok], .bn [data-app=reels] .apps [data-a=reels] { opacity: 1; filter: none; color: var(--ink); }
.bn .apps .globe { width: 15px; height: 15px; flex: none; }
.bn .avd { width: 34px; height: 34px; border-radius: 50%; flex: none; background: #2a1e0c url("assets/hero-small.jpg") 19.6% 100% / 520% auto no-repeat; }
.bn .avd svg { display: none; }
.bn .avd.alt { background-position: 70% 58%; }
.bn .post.s1 .avd.own { background-image: image-set(url("assets/candles-sm.avif") type("image/avif"), url("assets/candles-sm.jpg") type("image/jpeg")); background-position: 22% 24%; background-size: 460% auto; }
.bn .arow .avd:empty { background: rgba(236,228,214,.13); }
.bn .avd.ring { box-shadow: 0 0 0 2px var(--card), 0 0 0 3.5px #e1306c; }

.bn .sample-t { grid-column: span 4; }
.bn .stat-t { grid-column: span 2; }
@media (min-width: 901px) { .bn .stat-t .num { font-size: clamp(52px, 5vw, 72px); } }
.bn .stat-t { justify-content: center; }
.bn .cc-t, .bn .words-t, .bn .styles-t { grid-column: span 2; min-height: 430px; }
.bn .check-t { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 56px; padding-top: 34px; padding-bottom: 34px; }
.bn .check-t > .cp { flex: 1; max-width: 40ch; }
.bn .check-t > .pic { flex: 1.25; }

.bn .postwrap { container-type: inline-size; margin-top: auto; }
.bn .post { display: grid; height: calc(56.25cqw + 300px); background: var(--card); border: 1px solid var(--edge); border-bottom: 0; border-radius: 12px 12px 0 0; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,.5); }
.bn .page { grid-area: 1 / 1; min-width: 0; opacity: 0; visibility: hidden; transition: opacity .9s ease, visibility 0s linear .9s; }
.bn .burn-t[data-app=fb] .page[data-page=fb], .bn .burn-t[data-app=ig] .page[data-page=ig], .bn .burn-t[data-app=yt] .page[data-page=yt] { opacity: 1; visibility: visible; transition-delay: 0s; }
.bn .page :is(.appbar, .aside, .pmain > :not(.vid)) { transition: opacity .8s ease, border-color .8s ease; }
.bn .appbar { display: flex; align-items: center; gap: 9px; padding: 8px 14px; border-bottom: 1px solid var(--rule); font-size: 15px; letter-spacing: -.02em; }
.bn .appbar .lg { width: 24px; height: 24px; }
.bn .page[data-page=yt] .appbar .lg { height: 17px; }
.bn .appbar .search { flex: 0 1 260px; height: 26px; margin: 0 auto; border: 1px solid var(--edge); border-radius: 999px; background: rgba(236,228,214,.04); }
.bn .appbar .avd { width: 26px; height: 26px; }
.bn .appbar .ic { display: flex; gap: 14px; }
.bn .appbar .ic svg { width: 18px; height: 18px; }
.bn .pbody { display: grid; grid-template-columns: minmax(0, 1fr); }
.bn .aside { display: none; padding: 12px 14px; border-left: 1px solid var(--rule); }
.bn .aside small.mono { display: block; font-size: 9px; color: var(--grey); margin-bottom: 6px; }
.bn .arow { display: flex; align-items: center; gap: 9px; padding: 6px 0; font-size: 12px; }
.bn .arow .avd { width: 26px; height: 26px; }
.bn .arow b { font-weight: 600; line-height: 1.2; }
.bn .arow s, .bn .ayt s { display: block; flex: 1; height: 6px; border-radius: 3px; background: rgba(236,228,214,.13); }
.bn .arow em { font-style: normal; font-weight: 600; font-size: 11px; color: #5aa7ff; }
.bn .ayt { display: flex; gap: 9px; padding: 5px 0; }
.bn .ayt .thumb { width: 92px; aspect-ratio: 16 / 9; flex: none; border-radius: 6px; background: image-set(url("assets/candles-sm.avif") type("image/avif"), url("assets/candles-sm.jpg") type("image/jpeg")) 60% 55% / cover; }
.bn .ayt:nth-child(2) .thumb { background-image: image-set(url("assets/monk-sm.avif") type("image/avif"), url("assets/monk-sm.jpg") type("image/jpeg")); background-position: 30% 25%; } .bn .ayt:nth-child(3) .thumb { background-image: image-set(url("assets/priest-sm.avif") type("image/avif"), url("assets/priest-sm.jpg") type("image/jpeg")); background-position: 50% 20%; } .bn .ayt:nth-child(4) .thumb { background-position: 20% 35%; background-size: 220% auto; } .bn .ayt:nth-child(5) .thumb { background-image: image-set(url("assets/priest-sm.avif") type("image/avif"), url("assets/priest-sm.jpg") type("image/jpeg")); background-position: 15% 45%; background-size: 240% auto; }
.bn .ayt div { flex: 1; min-width: 0; display: grid; gap: 6px; align-content: start; padding-top: 3px; }
.bn .ayt b { font-size: 12px; font-weight: 600; line-height: 1.2; }
.bn .ayt small { font-size: 10px; color: var(--grey); }
.bn .ayt s { flex: none; } .bn .ayt s.sh { width: 60%; }
@container (min-width: 520px) {
  .bn .post { height: calc((100cqw - 34cqw - 2px) * .5625 + 290px); }
  .bn .pbody { grid-template-columns: minmax(0, 1fr) 34cqw; }
  .bn .aside { display: block; }
  .bn .upnext.inline { display: none; }
  .bn .ytc .yta { display: flex; }
}
.bn .ph { display: flex; align-items: center; gap: 10px; padding: 12px 14px 8px; }
.bn .ph b { display: block; font-size: 14px; font-weight: 600; line-height: 1.2; }
.bn .ph small { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--grey); white-space: nowrap; }
.bn .globe { width: 12px; height: 12px; }
.bn .ph > svg { width: 16px; height: 16px; margin-left: auto; color: var(--grey); }
.bn .ph.sm { padding: 8px 14px; }
.bn .ph.sm .avd { width: 26px; height: 26px; }
.bn .pt { margin: 0 14px 10px; font-size: 14px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.bn .vid { position: relative; container-type: inline-size; aspect-ratio: 16 / 9; color: #fff; background: #000; }
.bn .kb { position: absolute; inset: 0; overflow: hidden; }
.bn .kb i { position: absolute; inset: 0; background-size: cover; background-repeat: no-repeat; opacity: 0; transition: opacity 1.6s ease; }
.bn .kb i.on { opacity: 1; animation: bn-kb 11.5s cubic-bezier(.3,.05,.3,1) forwards; }
.bn .kb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(11,10,8,.42) 0%, rgba(11,10,8,0) 30%, rgba(11,10,8,.12) 50%, rgba(11,10,8,.86) 100%); }
@keyframes bn-kb { from { transform: scale(var(--z, 1.5)); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .bn .kb i { animation: none; transition: none; } }
.bn .vtc { position: absolute; top: 14px; left: 14px; font-size: 10px; color: rgba(255,255,255,.55); }
.bn .vtc b { color: var(--signal); font-weight: 400; }
.bn .vid { display: flex; flex-direction: column; }
.bn .shade { flex: 1; position: relative; z-index: 1; background: rgba(11,10,8,0); transition: background-color .8s ease; }
.bn .band { position: relative; z-index: 2; padding: 14px 6% 6.2%; }
.bn .cue2 { text-align: center; text-shadow: 0 0 8px rgba(0,0,0,.6), 0 1px 2px rgba(0,0,0,.8); transition: opacity .32s ease, transform .32s ease; text-wrap: balance; }
.bn .cue2.off { opacity: 0; transform: translateY(4px); }
.bn .cue2 .el { font-size: clamp(19px, 5.7cqw, 38px); font-weight: 500; line-height: 1.18; }
.bn .cue2 .el span { transition: color .16s ease; }
.bn .cue2 .el span.now { color: var(--signal); }
.bn .cue2 .en { margin-top: 6px; font-size: clamp(12px, 3cqw, 20px); color: var(--signal); }
.bn .prog { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(to right, var(--signal) 0 calc(var(--p, 0) * 100%), rgba(255,255,255,.22) 0); }
.bn .page[data-page=yt] .prog { background: linear-gradient(to right, #f03 0 calc(var(--p, 0) * 100%), rgba(255,255,255,.22) 0); }

.bn .pr { display: flex; justify-content: space-between; gap: 12px; padding: 9px 14px; font-size: 12px; color: var(--grey); border-bottom: 1px solid var(--rule); white-space: nowrap; }
.bn .pr svg { width: 13px; height: 13px; vertical-align: -2px; color: #e0566f; }
.bn .pr span + span { overflow: hidden; text-overflow: ellipsis; }
.bn .pa { display: grid; grid-template-columns: repeat(3, 1fr); padding: 9px 6px 11px; font-size: 13px; color: var(--grey); text-align: center; white-space: nowrap; }
.bn .pa svg { width: 15px; height: 15px; vertical-align: -3px; margin-right: 6px; }
.bn .next { border-top: 6px solid var(--paper); }
.bn .igrow { display: flex; gap: 14px; padding: 10px 14px 6px; }
.bn .igrow svg { width: 19px; height: 19px; }
.bn .igrow span { margin-left: auto; display: flex; }
.bn .igl { padding: 0 14px 4px; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bn .igl + .igl { padding-bottom: 10px; }
.bn .ytt { padding: 10px 14px 6px; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bn .ytc { display: flex; align-items: center; gap: 10px; padding: 2px 14px 10px; }
.bn .ytc .avd { width: 28px; height: 28px; }
.bn .ytc div { min-width: 0; }
.bn .ytc b { display: block; font-size: 13px; font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bn .ytc small { display: block; font-size: 11px; color: var(--grey); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bn .ytc u, .bn .yta { flex: none; }
.bn .ytc u, .bn .pcap u { text-decoration: none; font-weight: 600; border-radius: 999px; background: #fff; color: #111; }
.bn .ytc u { margin-left: 6px; font-size: 12px; padding: 6px 12px; white-space: nowrap; }
.bn .yta { display: none; margin-left: auto; gap: 6px; }
.bn .yta em { display: inline-flex; align-items: center; gap: 5px; font-style: normal; font-size: 12px; padding: 6px 11px; border-radius: 999px; background: rgba(236,228,214,.1); white-space: nowrap; }
.bn .yta svg { width: 13px; height: 13px; }
.bn .ytd { margin: 0 14px 10px; padding: 9px 12px; border-radius: 10px; background: rgba(236,228,214,.08); font-size: 12px; line-height: 1.4; }
.bn .ytd b { display: block; font-weight: 600; margin-bottom: 2px; }
.bn .ytd p { color: var(--grey); }
.bn .upnext { display: flex; gap: 10px; padding: 10px 14px; }
.bn .upnext .thumb { width: 86px; aspect-ratio: 16 / 9; flex: none; border-radius: 6px; background: image-set(url("assets/candles-sm.avif") type("image/avif"), url("assets/candles-sm.jpg") type("image/jpeg")) 60% 55% / cover; }
.bn .upnext b { display: block; font-size: 13px; font-weight: 600; }
.bn .upnext small { font-size: 11px; color: var(--grey); }

.bn .cc-t .pic { flex: 1; display: flex; margin-top: 6px; padding-top: 0; }
.bn .ytp .menu { margin: auto; }
.bn .ytp { position: relative; flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 12px 12px 10px; border: 1px solid var(--edge); background: linear-gradient(rgba(11,10,8,.72), rgba(11,10,8,.72)), image-set(url("assets/candles-sm.avif") type("image/avif"), url("assets/candles-sm.jpg") type("image/jpeg")) 30% 40% / cover; }
.bn .menu { width: min(100%, 230px); align-self: center; background: var(--panel); border: 1px solid var(--edge); border-radius: 10px; padding: 6px; box-shadow: 0 14px 34px rgba(0,0,0,.45); }
.bn .menu .mh { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px 8px; color: var(--grey); font-size: 13px; border-bottom: 1px solid var(--rule); margin-bottom: 4px; }
.bn .ccb { width: 23px; height: 19px; display: block; }
.bn .mh .ccb { width: 19px; height: 16px; opacity: .8; }
.bn .ccon { color: #fff; padding-bottom: 3px; border-bottom: 2.5px solid #f03; }
.bn .menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; background: none; border: 0; border-radius: 6px; color: var(--ink); font: 15px var(--sans); text-align: left; cursor: pointer; transition: background .15s; }
.bn .menu button:hover, .bn .menu button.hot { background: rgba(236,228,214,.1); }
.bn .menu button:focus-visible { outline: 2px solid var(--signal); outline-offset: -2px; }
.bn .menu button[aria-pressed=false] .tick { visibility: hidden; }
.bn .linebox { min-height: 62px; display: grid; place-items: center; }
.bn .line { text-align: center; background: rgba(0,0,0,.85); color: #fff; padding: 4px 9px; font-size: 14px; line-height: 1.3; text-wrap: balance; transition: opacity .2s; }
.bn .line.off { opacity: 0; }
.bn .ytbar { display: grid; grid-template-columns: 1fr auto; gap: 7px 12px; align-items: center; color: rgba(255,255,255,.7); }
.bn .ytbar i { grid-column: 1 / -1; height: 3px; background: linear-gradient(to right, #f03 0 calc(var(--p, 0) * 100%), rgba(236,228,214,.25) 0); position: relative; }
.bn .ytbar i::after { content: ""; position: absolute; left: calc(var(--p, 0) * 100%); top: -3.5px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #f03; }
.bn .ytbar span { font-size: 10px; }
.bn .cur { position: absolute; left: 0; top: 0; width: 20px; height: 20px; z-index: 3; pointer-events: none; opacity: 0; transform: translate(var(--x, 150px), var(--y, 190px)); transition: transform 1.2s cubic-bezier(.3,.1,.2,1), opacity .3s; filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
.bn .cur.show { opacity: 1; }
.bn .cur.press { transition-duration: .12s; transform: translate(var(--x), var(--y)) scale(.82); }

.bn .words-t .pic { align-self: center; }
.bn .phone { position: relative; width: 204px; aspect-ratio: 9 / 16; margin-bottom: calc(var(--pad) * -1 - 18px); border: 1px solid var(--edge); border-bottom: 0; border-radius: 24px 24px 0 0; overflow: hidden; background: #060504; color: #fff; --st: 15%; --sh: 51%; }
.bn [data-fmt=h] .phone { --st: 47%; --sh: 19%; }
.bn .pvid { position: absolute; left: 0; right: 0; top: 0; height: 100%; background: linear-gradient(rgba(11,10,8,.12), rgba(11,10,8,.3) 45%, rgba(11,10,8,.72)), image-set(url("assets/priest-sm.avif") type("image/avif"), url("assets/priest-sm.jpg") type("image/jpeg")) 50% 30% / auto 135%; transition: top .55s cubic-bezier(.3,.1,.2,1), height .55s cubic-bezier(.3,.1,.2,1); }
.bn [data-fmt=h] .pvid { top: 13%; height: 31.6%; background-position: 0 0, 50% 22%; background-size: auto, cover; }
.bn .words-t[data-app=shorts] [data-apps]:not([data-apps~=shorts]), .bn .words-t[data-app=tiktok] [data-apps]:not([data-apps~=tiktok]), .bn .words-t[data-app=reels] [data-apps]:not([data-apps~=reels]) { display: none; }
.bn .ptabs { position: absolute; top: 14px; left: 0; right: 0; display: flex; justify-content: center; gap: 12px; font-size: 10px; color: rgba(255,255,255,.55); }
.bn .ptabs b { color: #fff; font-weight: 600; border-bottom: 1.5px solid #fff; padding-bottom: 2px; }
.bn .pbar { position: absolute; top: 12px; left: 14px; right: 12px; display: flex; justify-content: space-between; align-items: center; font-size: 12px; }
.bn .pbar b { display: inline-flex; align-items: center; gap: 5px; }
.bn .pbar > svg { width: 14px; height: 14px; opacity: .85; }
.bn .rail { position: absolute; right: 9px; top: 36%; display: grid; gap: 10px; justify-items: center; color: rgba(255,255,255,.88); }
.bn .rail span { display: grid; justify-items: center; gap: 1px; }
.bn .rail svg { width: 19px; height: 19px; }
.bn .rail em { font: 7px var(--mono); font-style: normal; color: rgba(255,255,255,.6); }
.bn .rail .av { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid #fff; background: #2a1e0c url("assets/hero-small.jpg") 19.6% 100% / 520% auto no-repeat; }
.bn .rail .av svg { display: none; }
.bn .rail .down svg { transform: rotate(180deg); }
.bn .rail .disc { width: 20px; height: 20px; border-radius: 50%; background: conic-gradient(#333, #777, #333, #777, #333); border: 4px solid #1a1a1a; animation: bn-spin 4s linear infinite; }
@keyframes bn-spin { to { transform: rotate(360deg); } }
.bn .gap { position: absolute; left: 0; top: var(--st); height: var(--sh); transition: top .55s, height .55s; width: 34px; border-right: 1px dashed rgba(255,214,10,.3); background: repeating-linear-gradient(135deg, rgba(255,214,10,.14) 0 1px, transparent 1px 6px); }
.bn .safe { position: absolute; left: 40px; right: 40px; top: var(--st); height: var(--sh); transition: top .55s, height .55s; border: 1px dashed rgba(255,214,10,.6); border-radius: 4px; display: grid; place-items: end center; padding-bottom: 10px; transition: top .55s, height .55s, border-color .5s; }
.bn .safe small, .bn .gap { transition: opacity .5s, top .55s, height .55s; }
.bn [data-guides=off] .safe { border-color: transparent; }
.bn [data-guides=off] .safe small, .bn [data-guides=off] .gap { opacity: 0; }
.bn .safe small { position: absolute; top: -12px; left: 0; font-size: 7px; color: rgba(255,214,10,.8); }
.bn .pcap { position: absolute; left: 12px; right: 48px; top: 73%; display: grid; gap: 5px; font-size: 9px; }
.bn .pcap .who { display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.bn .pcap .avd { width: 15px; height: 15px; }
.bn .pcap u { font-size: 8px; padding: 2px 6px; }
.bn .pcap u.ol { background: none; color: #fff; border: 1px solid rgba(255,255,255,.7); border-radius: 4px; }
.bn .pcap s { height: 4px; border-radius: 2px; background: rgba(255,255,255,.28); }
.bn .pcap s:last-child { width: 60%; }
.bn .w { display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 0 .27em; font-weight: 800; font-size: 22px; line-height: 1.15; letter-spacing: -.02em; text-shadow: 0 0 1px #000, 0 2px 6px rgba(0,0,0,.9); transition: opacity .25s ease; }
.bn .w { font-size: 20px; }
:lang(el) .bn .w { font-size: 17px; }
.bn [data-fmt=h] .w { font-size: 15px; }
:lang(el) .bn [data-fmt=h] .w { font-size: 13.5px; }
.bn .w.out { opacity: 0; }
.bn .w span { padding: 0 .14em; margin: 0 -.14em; border-radius: 4px; white-space: nowrap; transition: background-color .18s ease, color .18s ease; }
.bn .w span.now { background: var(--signal); color: #111; text-shadow: none; }
@media (prefers-reduced-motion: reduce) { .bn .rail .disc { animation: none; } .bn .w, .bn .w span { transition: none; } }

.bn .styles-t { background: radial-gradient(95% 70% at 50% 60%, #3d2b14 0%, #1b140a 55%, var(--paper) 100%); }
.bn .styles-t { gap: 0; }
.bn .capwrap { flex: 1; min-height: 190px; padding-bottom: 46px; display: grid; place-items: center; }
.bn .stwho { display: grid; gap: 5px; font-size: 15px; color: var(--grey); }
.bn .cap { max-width: 100%; text-align: center; color: #fff; transition: opacity .25s ease; }
.bn .cap.out { opacity: 0; }
.bn .cw { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 .27em; font-weight: 600; font-size: 22px; line-height: 1.25; }
.bn .cw span { padding: 0 .14em; margin: 0 -.14em; border-radius: 4px; white-space: nowrap; transition: color .18s ease, background-color .18s ease; }
.bn .cap i, .bn .cap em { display: none; }
.bn [data-style=glass] .cap, .bn [data-style=glass2] .cap { padding: 11px 18px; background: rgba(6,8,12,.75); -webkit-backdrop-filter: blur(12px) saturate(140%); backdrop-filter: blur(12px) saturate(140%); border: 1px solid rgba(255,255,255,.14); border-radius: 15px; box-shadow: 0 6px 18px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08); }
.bn [data-style=glass] .cw .now, .bn [data-style=glass2] .cw .now, .bn [data-style=serif] .cw .now { color: #f1dca6; }
.bn [data-style=glass2] .cap i { display: block; width: 46px; height: 1px; margin: 7px auto 5px; background: rgba(255,255,255,.22); }
.bn [data-style=glass2] .cap em { display: block; font: 400 16px/1.25 "Literata", Georgia, serif; color: #f4ead6; }
.bn [data-style=serif] .cw { font: 600 31px/1.2 "Crimson Pro", Georgia, serif; text-shadow: 0 1px 2px rgba(0,0,0,.9), 0 0 7px rgba(0,0,0,.75), 0 0 16px rgba(0,0,0,.55); }
.bn [data-style=classic] .cw { font-size: 24px; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 2px 5px rgba(0,0,0,.8); }
.bn [data-style=classic] .cw .now { color: var(--signal); }
.bn [data-style=box] .cw { font-weight: 800; font-size: 26px; letter-spacing: -.02em; line-height: 1.15; text-shadow: 0 2px 6px rgba(0,0,0,.9); }
.bn [data-style=box] .cw .now { background: var(--signal); color: #111; text-shadow: none; }
.bn [data-style=custom] .cap { padding: 14px 20px 16px; border-top: 1px solid rgba(217,178,95,.45); border-bottom: 1px solid rgba(217,178,95,.45); }
.bn [data-style=custom] .cap::before { content: "\2626"; display: block; margin-bottom: 4px; font-size: 20px; line-height: 1; color: #c79a4a; }
.bn [data-style=custom] .cw { font: 600 30px/1.15 "Crimson Pro", Georgia, serif; letter-spacing: .01em; color: #e6c877; text-shadow: 0 1px 0 rgba(0,0,0,.6); }
.bn [data-style=custom] .cw .now { color: #e2543f; }
.bn [data-style=custom] .cap em { display: block; margin-top: 16px; font: 400 15px/1.35 var(--sans); color: var(--ink); }
.bn .stfoot { position: absolute; left: var(--pad); right: var(--pad); bottom: var(--pad); display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.bn .stl { font-size: 10px; color: var(--ink); }
.bn .dots { display: flex; gap: 6px; }
.bn .dots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.25); transition: background-color .3s; }
.bn .dots i.on { background: var(--signal); }
@media (prefers-reduced-motion: reduce) { .bn .cap, .bn .cw span { transition: none; } }
.bn .soft .post, .bn .soft .aside, .bn .soft .appbar { transition: background-color .8s ease, border-color .8s ease, box-shadow .8s ease; }

.bn .soft .vid { margin: 10px; z-index: 1; }
.bn .soft .band::after { content: ""; position: absolute; inset: -6px -6px 12px -6px; border-radius: 3px; opacity: 0; pointer-events: none; box-shadow: 0 0 0 2000px rgba(6,5,4,0); transition: opacity .6s ease, box-shadow .8s ease; }
.bn .soft.low.dim .band::after { opacity: 1; box-shadow: 0 0 0 2000px rgba(6,5,4,.8); }
@keyframes bn-band { 0%, 100% { transform: scale(.997, .985); opacity: .55; } 50% { transform: scale(1.004, 1.03); opacity: 1; } }

.bn .soft .band::before { content: ""; position: absolute; inset: -6px -6px 12px -6px; border: 1.5px solid var(--signal); border-radius: 3px; opacity: 0; pointer-events: none; transition: opacity .6s ease; }
.bn .soft.low.dim .band::before { opacity: 1; animation: bn-band 1.7s ease-in-out infinite; }
.bn .prog { transition: opacity .8s ease; }

@media (prefers-reduced-motion: reduce) { .bn .soft.low.dim .band::before { animation: none; } }

.bn .accent { background: var(--signal); color: #111; }
.bn .sample-t { text-decoration: none; justify-content: center; align-items: center; text-align: center; gap: 10px; }
.bn .big { font-size: clamp(32px, 3.600vw, 48px); font-weight: 600; line-height: .98; letter-spacing: -.045em; }
.bn .sample-t .big { opacity: 1; }
.bn .sample-t .big b { font-weight: inherit; }
.bn .fine { font-size: 14px; opacity: .62; margin-top: -2px; text-wrap: balance; }
.bn .stat-t .fine { color: var(--grey); opacity: 1; margin-top: 0; }
.bn .sample-t { min-height: 230px; }
.bn .sample-t .wm { position: absolute; left: 50%; top: 50%; width: 1500px; transform: translate(-50%, -50%) rotate(-45deg); display: grid; gap: 15px; font: 800 19px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; text-align: center; white-space: nowrap; color: #111; opacity: .03; pointer-events: none; user-select: none; }
.bn .sample-t .wm span { display: block; overflow: hidden; }
.bn .sample-t .wm span:nth-child(even) { text-indent: -5.5em; }
.bn .sample-t .big, .bn .sample-t .fine { position: relative; }

.bn .lead { font-size: 17px; color: var(--grey); }
.bn .num { font-size: clamp(58px, 6.6vw, 88px); font-weight: 800; line-height: .95; letter-spacing: -.05em; white-space: nowrap; margin: -6px 0 2px; }


.bn .check-t { justify-content: center; gap: 18px; }
.bn .check-t .pic { margin-top: 0; padding-top: 0; }
.bn .cl { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: baseline; padding: 11px 0; border-top: 1px solid var(--rule); font-size: 16px; line-height: 1.35; }
.bn .cl .n { font: 11px var(--mono); color: var(--signal); }
.bn .cl .tick { align-self: center; }
.bn .cl.dim .x, .bn .cl.dim .tick, .bn .cl.dim .n { color: var(--grey); }
.bn del { color: var(--grey); text-decoration-color: #c8553d; text-decoration-thickness: 2px; }
.bn ins { text-decoration: none; color: var(--signal); font-weight: 600; }


@media (max-width: 900px) {
  .bn { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bn .t { grid-column: span 1; grid-row: auto; }
  .bn .check-t { flex-direction: column; align-items: stretch; gap: 18px; padding-top: var(--pad); padding-bottom: var(--pad); }
  .bn .check-t > .cp { max-width: 34ch; }
  .bn .cc-t, .bn .words-t { min-height: 410px; } .bn .styles-t { min-height: 320px; }
  .bn .num { font-size: clamp(52px, 9vw, 76px); }
}
@media (max-width: 540px) {
  .bn { --pad: 20px; grid-template-columns: minmax(0, 1fr); }
  .bn .t { order: 0; }
  .bn .pa { font-size: 12px; } .bn .pa svg { margin-right: 4px; }
.bn .vtc { display: none; }
  .bn .cc-t { min-height: 0; }
  .bn .sample-t { min-height: 230px; }
  .bn .cp { max-width: none; }
  .bn .num { font-size: 64px; }
}

.bn.solo { position: relative; isolation: isolate; display: block; padding-top: 14px; border: 0; background: none; }
.bn.solo::after { content: ""; position: absolute; left: calc(50% - 50vw); width: 100vw; bottom: 0; height: 1px; background: rgba(236,228,214,.12); z-index: 2; }
.bn.solo .burn-t { padding: 0; background: none; overflow: visible; }
.bn.solo .postwrap { width: 100%; max-width: 980px; margin: 0 auto; }
@container (min-width: 520px) { .bn.solo .post { height: calc((100cqw - 34cqw - 2px) * .5625 + 215px); } }

.off, .off *, .off::before, .off::after, .off *::before, .off *::after { animation-play-state: paused !important; }
.mast nav .btn { font-family: var(--sans); text-transform: none; letter-spacing: -.01em; }
#f-notes { min-height: 0; }
input[aria-invalid=true], textarea[aria-invalid=true] { border-color: #e2543f; }
.demo-pause { position: absolute; z-index: 4; right: calc(50% - min(490px, 50%) + 12px); bottom: 12px; width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; background: rgba(11,10,8,.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: #fff; cursor: pointer; opacity: .75; transition: opacity .2s, border-color .2s; }
.demo-pause:hover, .demo-pause:focus-visible { opacity: 1; border-color: rgba(255,255,255,.5); }
.demo-pause:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.demo-pause svg { width: 12px; height: 12px; fill: currentColor; }
.demo-pause .i-play, .demo-pause.paused .i-pause { display: none; }
.demo-pause.paused .i-play { display: inline; }
.err { margin-top: 6px; font-size: 14px; color: #f08a76; }