:root{--k-paper:#f5f5f0;--k-card:#ffffff;--k-text:#111111;--k-muted:#555555;--k-brand:#111827;--k-second:#dc2626;--k-edge:#e2e2dc;--k-round:4px;--k-width:1200px;--k-f1:'Epilogue',system-ui,sans-serif;--k-f2:'Albert Sans',system-ui,sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:5rem} body{margin:0;background:var(--k-paper);color:var(--k-text);font:16px/1.65 var(--k-f2)}
img{max-width:100%;height:auto} a{color:var(--k-brand);text-underline-offset:3px}
input,select,textarea{max-width:100%;box-sizing:border-box}
input[type=date],input[type=time],input[type=datetime-local],input[type=month],input[type=week]{min-width:0;max-width:100%}
@supports (-webkit-touch-callout:none){input[type=date],input[type=time],input[type=datetime-local],input[type=month],input[type=week]{-webkit-appearance:none;appearance:none;min-height:2.75em} input::-webkit-date-and-time-value{text-align:left}}
h1,h2,h3{font-family:var(--k-f1);line-height:1.2;letter-spacing:-.01em;color:var(--k-text)}
h1{font-size:clamp(1.9rem,4.5vw,2.8rem);margin:.2em 0 .35em} h2{font-size:clamp(1.35rem,3vw,1.8rem);margin:2.20em 0 .6em} h3{font-size:1.15rem;margin:1.6em 0 .4em}
p,ul,ol{margin:0 0 1em}
.teeydn{max-width:var(--k-width);margin:0 auto;padding:0 1rem} .te9csx{max-width:var(--k-width);margin:0 auto;padding:1.2rem 1rem 3rem}
.tei4nz{position:absolute;left:-9999px} .tei4nz:focus{left:1rem;top:1rem;background:var(--k-card);padding:.5rem;z-index:99}
.tewzup{max-width:var(--k-width);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 1rem;flex-wrap:wrap}
.te6d7s{display:flex;align-items:center;gap:.6rem;font:800 1.15rem var(--k-f1);color:var(--k-text);text-decoration:none}
.teaqke{display:flex;gap:1rem;flex-wrap:wrap;align-items:center} .teaqke a{color:var(--k-text);text-decoration:none;font-weight:600;font-size:.95rem}
.tes1yp{background:var(--k-paper);border-bottom:1px solid var(--k-edge)} .tewzup{flex-direction:column;gap:.4rem;padding:.9rem 1rem}  .teaqke a{text-transform:uppercase;letter-spacing:.08em;font-size:.8rem}
.tei1i9{margin:1rem 0 1.4rem} .te880q{font-size:1.12rem;max-width:46em;color:var(--k-muted)} .tei1i9{background:var(--k-brand);color:#fff;padding:2.4rem 1.6rem;border-radius:var(--k-round)} .tei1i9 h1,.tei1i9 .te880q{color:#fff} .tei1i9 .te880q{opacity:.92}
.te33ip{margin:1.4rem 0 2rem}
.te4ziz{margin:1.4em 0;padding:.9em 1.1em;background:var(--k-card);border-left:4px solid var(--k-second);border-radius:0 var(--k-round) var(--k-round) 0}
.te5g5b{margin:1.2em 0;padding:.9em 1.1em;font-family:ui-monospace,Consolas,monospace;background:var(--k-card);border:1px dashed var(--k-brand);border-radius:var(--k-round);overflow-x:auto}
.tevbrd{margin:1.2em 0;overflow-x:auto;border:1px solid var(--k-edge);border-radius:var(--k-round);background:var(--k-card)}
.teg8pm{width:100%;border-collapse:collapse;font-size:.95em;font-variant-numeric:tabular-nums} .teg8pm th,.teg8pm td{padding:.5em .75em;border-bottom:1px solid var(--k-edge);text-align:left}
.teg8pm thead th{background:color-mix(in srgb,var(--k-edge) 60%,var(--k-card))}
ol.tesu8i{padding-left:1.3em} ol.tesu8i>li{margin:.5em 0}
.tezuk3{margin:1.6em 0;text-align:center} .tezuk3 img{width:100%;max-width:720px;border-radius:var(--k-round);border:1px solid var(--k-edge);background:#fff} .tezuk3 figcaption{font-size:.9em;color:var(--k-muted)}
.te3z8v{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem;margin:1.2em 0}
.tefecc{display:block;padding:1.1rem;background:var(--k-card);border-radius:var(--k-round);background:color-mix(in srgb,var(--k-edge) 45%,var(--k-card));border:1px solid transparent;color:var(--k-text);text-decoration:none}
.tefecc b{display:block;font-family:var(--k-f1);margin-bottom:.35rem} .tefecc span{color:var(--k-muted);font-size:.92rem} .tefecc:hover{border-color:var(--k-brand)}
.tefecc--img{padding:0;overflow:hidden;display:flex;flex-direction:column;transition:transform .2s ease,box-shadow .2s ease} .tefecc--img:hover{transform:translateY(-3px);box-shadow:0 10px 24px color-mix(in srgb,var(--k-text) 14%,transparent)}
.tefggb{display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover} .te0sve{display:block;padding:1rem 1.1rem 1.1rem} .te0sve>span{display:block}
.teqz4w a,.tenk02,.tecjww{background:none!important}
.tehcht{display:block;margin-top:.6rem;font-size:.8rem;font-weight:700;letter-spacing:.04em;color:var(--k-brand)}
.te3z8v--feat{grid-template-columns:repeat(2,minmax(0,1fr))} .te3z8v--feat>.tefecc:first-child{grid-column:1/-1;display:grid;grid-template-columns:1.3fr 1fr;align-items:center} .te3z8v--feat>.tefecc:first-child b{font-size:1.35rem}
.teqz4w{display:grid;gap:1rem;margin:1.2em 0} .tenk02{display:grid;grid-template-columns:240px 1fr;gap:1.1rem;align-items:center;background:var(--k-card);border:1px solid var(--k-edge);border-radius:var(--k-round);overflow:hidden;color:var(--k-text);text-decoration:none}
.tenk02 .tefggb{height:100%;aspect-ratio:auto;min-height:126px} .tenk02 b{display:block;font-family:var(--k-f1);font-size:1.12rem;margin-bottom:.3rem} .tenk02 .te0sve>span{color:var(--k-muted);font-size:.93rem} .tenk02:hover{border-color:var(--k-brand)}
.teqz4w--min{list-style:none;padding:0;counter-reset:bl;gap:0} .teqz4w--min li{counter-increment:bl;border-top:1px solid var(--k-edge)} .teqz4w--min li:last-child{border-bottom:1px solid var(--k-edge)}
.teqz4w--min a{display:grid;grid-template-columns:4.2rem 1fr;column-gap:1rem;padding:1.1rem .2rem;color:var(--k-text);text-decoration:none} .teqz4w--min a::before{content:counter(bl,decimal-leading-zero);grid-row:1/4;font:800 2.4rem/1 var(--k-f1);color:var(--k-brand)}
.teqz4w--min b{font-family:var(--k-f1);font-size:1.15rem} .teqz4w--min span{color:var(--k-muted);font-size:.93rem} .teqz4w--min a:hover b{color:var(--k-brand)}
.teysan--overlay{position:relative;margin:.6rem 0 1.6rem;border-radius:var(--k-round);overflow:hidden} .teysan--overlay>img{display:block;width:100%;height:auto;min-height:300px;object-fit:cover}
.teg82m{position:absolute;inset:auto 0 0 0;padding:4rem 1.6rem 1.4rem;background:linear-gradient(transparent,color-mix(in srgb,#000 72%,transparent))} .teg82m h1,.teg82m .te93wi,.teg82m .tecjww{color:#fff}
.teysan--band{background:var(--k-brand);color:#fff;padding:2.2rem 1.6rem;border-radius:var(--k-round)} .teysan--band h1,.teysan--band .te93wi,.teysan--band .tecjww{color:#fff}
.teysan--split{display:grid;grid-template-columns:1.1fr 1fr;gap:1.6rem;align-items:center} .teysan--split .tedjj5{margin:0}
.te864i--chips ol{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.45rem} .te864i--chips li{margin:0} .te864i--chips a{display:inline-block;padding:.3rem .75rem;border:1px solid var(--k-edge);border-radius:999px;background:var(--k-paper);text-decoration:none;font-size:.88rem}
.te864i--rail{background:none;border:0;border-left:3px solid var(--k-second);border-radius:0;padding:.2rem 0 .2rem 1rem}
.tehgif--globe summary{display:flex;align-items:center;gap:.35rem} .tey2bx{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.8rem} .tey2bx a{padding:.25rem .7rem;border:1px solid var(--k-edge);border-radius:999px;text-decoration:none} .tey2bx a[aria-current]{background:var(--k-brand);border-color:var(--k-brand);color:#fff}
@media (max-width:700px){.te3z8v--feat{grid-template-columns:1fr} .te3z8v--feat>.tefecc:first-child{display:flex} .tenk02{grid-template-columns:1fr} .tenk02 .tefggb{min-height:0;aspect-ratio:1200/630} .teysan--split{grid-template-columns:1fr} .teg82m{position:static;background:var(--k-brand);padding:1.2rem} .teysan--overlay>img{min-height:0}}
.te1e9y{max-width:48rem;margin:0 auto} .teysan{margin:.6rem 0 1.2rem} .teysan h1{font-size:clamp(2rem,5vw,3rem);line-height:1.12;letter-spacing:-.01em}
.tecjww{display:inline-block;font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--k-brand);text-decoration:none}
.teu7pk{color:var(--k-muted);font-size:.9rem;margin:2rem 0 0} .tey32e{font-style:italic;color:var(--k-muted)} .te93wi{color:var(--k-muted);font-size:.92rem;margin:0} .tedjj5{margin:0 0 1.6rem} .tedjj5 img{display:block;width:100%;height:auto;border-radius:var(--k-round)}
.te1e9y .te880q{font-size:1.2rem;color:var(--k-text)} .te1e9y .te880q::first-letter{font-family:var(--k-f1);font-size:3.1em;float:left;line-height:.9;margin:.06em .1em 0 0;color:var(--k-brand)}
.te1e9y .te864i--post{position:static!important;top:auto!important;z-index:auto;margin:0 0 1.8rem;padding:1rem 1.2rem;background:var(--k-card);border:1px solid var(--k-edge);border-left:4px solid var(--k-brand);border-radius:var(--k-round);font-size:.95rem}
.te864i--post ol{margin:.4rem 0 0;padding-left:1.2rem;columns:1} .te864i--post li{margin:.2rem 0}
.te1e9y h3{color:var(--k-brand)} .te1e9y blockquote{margin:1.4em 0;padding:.4em 1.2em;border-left:4px solid var(--k-second);font-size:1.1em}
.tepp0c h3{font-size:1.05rem;margin-top:1.3em}
.te116u{font-size:.88rem;color:var(--k-muted);margin:.4rem 0 1rem} .te116u a{color:var(--k-muted)}
.tempb7{margin:2.4rem 0;padding:1.4rem;background:var(--k-card);border-radius:var(--k-round);background:color-mix(in srgb,var(--k-edge) 45%,var(--k-card));border:1px solid transparent;text-align:center}
.te7z86{display:inline-block;padding:.7em 1.4em;background:var(--k-brand);color:#fff;border-radius:999px;font-weight:700;text-decoration:none}
.tenwfz{border-top:1px solid var(--k-edge);margin-top:3rem;padding:1.6rem 0 2.4rem;font-size:.9rem;color:var(--k-muted);background:var(--k-card)}
.tenwfz nav{display:flex;flex-wrap:wrap;gap:.5rem 1.2rem} .tenwfz a{color:var(--k-muted)} .tenwfz{background:var(--k-text);color:var(--k-paper)} .tenwfz a,.tenwfz p{color:var(--k-paper);opacity:.85}
.tebqmg>h2{border-top:2px solid var(--k-edge);padding-top:1rem}
.te864i{margin:1.2rem 0;padding:.8rem 1rem;background:var(--k-card);border-radius:var(--k-round);border:1px solid var(--k-edge)} .te864i ol{margin:.3rem 0 0;padding-left:1.2rem;columns:2;column-gap:2rem} @media(max-width:640px){.te864i ol{columns:1}}
.tehgif{position:relative} .tehgif summary{cursor:pointer;list-style:none;padding:.25rem .6rem;border:1px solid var(--k-edge);border-radius:999px;font-size:.85rem}
.tejxr3{position:absolute;right:0;top:120%;background:var(--k-card);border:1px solid var(--k-edge);border-radius:10px;padding:.4rem;display:grid;min-width:9rem;z-index:40}
.tejxr3 a{padding:.3rem .5rem;text-decoration:none;color:var(--k-text)} .tejxr3 a[aria-current]{font-weight:700;color:var(--k-brand)}
.te42s2{display:flex;gap:.35rem;font-size:.8rem;font-weight:700} .te42s2 a{text-decoration:none;color:var(--k-muted);padding:.1rem .3rem;border-radius:4px} .te42s2 a[aria-current]{color:var(--k-brand);background:color-mix(in srgb,var(--k-brand) 12%,transparent)}
[data-slot]{margin:1rem auto;text-align:center;overflow:hidden;max-width:100%} [data-slot]:empty{margin:0}
[data-slot="mobile_sticky"]{position:fixed;left:0;right:0;bottom:0;margin:0;z-index:50;background:var(--k-card)}
[data-slot="sidebar_left"],[data-slot="sidebar_right"]{position:fixed;top:110px;width:160px;margin:0;z-index:20} [data-slot="sidebar_left"]{left:12px} [data-slot="sidebar_right"]{right:12px}
@media (max-width:1499px){[data-slot="sidebar_left"],[data-slot="sidebar_right"]{display:none}}
.tets2d{float:right;border:0;background:transparent;font-size:1.2rem;cursor:pointer;color:var(--k-muted)}
.te7z86{border-radius:4px;text-transform:uppercase;letter-spacing:.06em;font-size:.85rem}
.tevbrd{border:0;border-top:3px solid var(--k-brand);border-radius:0;background:transparent} .teg8pm thead th{background:transparent;text-transform:uppercase;font-size:.78rem;letter-spacing:.06em}
.tebqmg>h2{font-size:clamp(1.25rem,2.6vw,1.6rem)} .tebqmg>h2::before{content:'';display:block;width:2rem;height:2px;background:var(--k-second);margin-bottom:.6rem}
.tebqmg a:not(.te7z86):not(.tefecc){text-decoration-thickness:2px}
.tei1i9--art{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2rem;align-items:center;text-align:left} .tei1i9--art .teu9ae{width:170px;height:170px;display:grid;place-items:center} .teu9ae svg{width:100%;height:100%;filter:drop-shadow(0 12px 24px color-mix(in srgb,var(--k-brand) 35%,transparent))} .teu9ae--ring{border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--k-second) 30%,transparent) 0 38%,transparent 39% 52%,color-mix(in srgb,var(--k-brand) 18%,transparent) 53% 66%,transparent 67%)} .teu9ae--ring svg{width:56%;height:56%} @media(max-width:700px){.tei1i9--art{grid-template-columns:1fr} .tei1i9--art .teu9ae{display:none}}
@media (max-width:640px){.tewzup{justify-content:center} .teaqke{justify-content:center}}

/* BDSM test — test-bdsm.com. Only site tokens: --k-paper --k-card --k-text --k-muted --k-brand --k-second --k-edge --k-round --k-f1 --k-f2.
   Mood: a quiet late-evening conversation — calm type, soft panels, the accent used only for markers and "talk first". */
.bt { color: var(--k-text); font-family: var(--k-f2); color-scheme: inherit; line-height: 1.55; max-width: 100%; overflow-wrap: anywhere; }
.bt *, .bt *::before, .bt *::after { box-sizing: border-box; }
.bt [hidden] { display: none !important; }
.bt-vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.bt button { font: inherit; color: inherit; }
.bt :focus-visible { outline: 2px solid var(--k-second); outline-offset: 2px; }
.bt-screen { animation: bt-in .28s ease both; }
@keyframes bt-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* buttons */
.bt-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 44px; padding: .55rem 1.1rem; border: 1px solid var(--k-edge); border-radius: var(--k-round); background: var(--k-card); color: var(--k-text); font-family: var(--k-f2); font-weight: 600; font-size: .95rem; cursor: pointer; text-decoration: none; transition: border-color .15s, background-color .15s, transform .15s; }
.bt-btn:hover { border-color: var(--k-text); }
.bt-btn:active { transform: translateY(1px); }
.bt .bt-btn--prim { background: var(--k-brand); border-color: var(--k-brand); color: var(--k-card); }
.bt .bt-btn--prim:hover { background: color-mix(in srgb, var(--k-brand) 86%, var(--k-text)); border-color: var(--k-brand); }
.bt-btn--ghost { background: transparent; }
.bt-link { background: none; border: 0; padding: .4rem .2rem; min-height: 44px; color: var(--k-muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-size: .85rem; }
.bt-link:hover { color: var(--k-text); }
.bt-small { font-size: .9rem; color: var(--k-muted); margin: .2rem 0 .8rem; }
.bt-h4 { font-family: var(--k-f1); font-size: 1.15rem; margin: 0 0 .35rem; color: var(--k-text); }

/* start */
.bt-start { text-align: center; padding: 1.4rem 0 .6rem; max-width: 40rem; margin: 0 auto; }
.bt-start__art { width: 168px; height: auto; display: block; margin: 0 auto .9rem; }
.bt-art__bub { fill: color-mix(in srgb, var(--k-brand) 8%, var(--k-card)); stroke: var(--k-text); stroke-width: 2; stroke-linejoin: round; }
.bt-art__bub--b { fill: var(--k-card); }
.bt-art__dot { fill: var(--k-muted); }
.bt-art__dot--r { fill: var(--k-second); }
.bt-art__line { stroke: var(--k-muted); stroke-width: 3; stroke-linecap: round; fill: none; }
.bt-lead { font-family: var(--k-f1); font-size: clamp(1.05rem, 2.6vw, 1.3rem); line-height: 1.45; margin: 0 0 1rem; }
.bt-meta { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; padding: 0; margin: 0 0 1rem; }
.bt-meta li { font-size: .85rem; padding: .25rem .75rem; border: 1px solid var(--k-edge); border-radius: 999px; color: var(--k-muted); background: var(--k-card); }
.bt-adult { font-weight: 600; margin: 0 0 1.1rem; }
.bt-partner { border: 1px dashed var(--k-brand); border-radius: var(--k-round); padding: .8rem 1rem; margin: 0 0 1rem; background: color-mix(in srgb, var(--k-brand) 6%, var(--k-card)); }
.bt-partner__t { margin: 0 0 .5rem; }
.bt-hashbad { color: var(--k-text); border-left: 3px solid var(--k-second); padding: .4rem .8rem; text-align: left; background: color-mix(in srgb, var(--k-second) 8%, var(--k-card)); margin: 0 0 1rem; }
.bt-note { min-height: 1.2em; margin: 0 0 .6rem; color: var(--k-muted); font-size: .9rem; }
.bt-note:empty { min-height: 0; margin: 0; }
.bt-start-btn { font-size: 1.05rem; padding: .7rem 1.8rem; }
.bt-how { color: var(--k-muted); font-size: .9rem; margin: .9rem 0 .4rem; }
.bt-disc { font-size: .82rem; color: var(--k-muted); margin: 1rem 0 0; }

/* quiz */
.bt-quiz { max-width: 38rem; margin: 0 auto; }
.bt-qhead { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.bt-count { font-size: .85rem; font-weight: 600; color: var(--k-muted); letter-spacing: .02em; }
.bt-prog { height: 6px; border-radius: 999px; background: var(--k-edge); overflow: hidden; margin: .5rem 0 .25rem; }
.bt-prog__fill { display: block; height: 100%; width: 0; background: var(--k-brand); border-radius: inherit; transition: width .25s ease; }
.bt-done { font-size: .8rem; color: var(--k-muted); margin: 0 0 .6rem; text-align: right; }
.bt-q { font-family: var(--k-f1); font-size: clamp(1.2rem, 3.4vw, 1.55rem); line-height: 1.35; margin: .8rem 0 1.1rem; min-height: 4.1em; }
.bt-opts { display: grid; gap: .5rem; }
.bt-opt { display: flex; align-items: center; gap: .8rem; width: 100%; min-height: 48px; padding: .55rem .9rem; border: 1px solid var(--k-edge); border-radius: var(--k-round); background: var(--k-card); text-align: left; cursor: pointer; transition: border-color .15s, background-color .15s; }
.bt-opt:hover { border-color: var(--k-text); }
.bt-opt__k { flex: 0 0 auto; display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; border: 1px solid var(--k-edge); font-size: .8rem; font-weight: 700; color: var(--k-muted); }
.bt-opt__l { font-weight: 500; }
.bt-opt[aria-checked="true"] { border-color: var(--k-brand); background: color-mix(in srgb, var(--k-brand) 10%, var(--k-card)); }
.bt-opt[aria-checked="true"] .bt-opt__k { background: var(--k-brand); border-color: var(--k-brand); color: var(--k-card); }
.bt-opt--skip { border-style: dashed; margin-top: .35rem; background: transparent; }
.bt-opt--skip .bt-opt__l { color: var(--k-muted); }
.bt-keys { font-size: .8rem; color: var(--k-muted); margin: .9rem 0 0; text-align: center; }
@media (hover: none) { .bt-keys { display: none; } }

/* result: role card */
.bt-rolecard { border: 1px solid var(--k-edge); border-radius: var(--k-round); background: var(--k-card); padding: 1.3rem 1.3rem 1rem; position: relative; }
.bt-rolecard::before { content: ""; position: absolute; left: 1.3rem; top: 0; width: 3rem; height: 3px; background: var(--k-second); border-radius: 0 0 3px 3px; }
.bt-kicker { font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: var(--k-muted); margin: 0 0 .2rem; font-weight: 600; }
.bt-role { font-family: var(--k-f1); font-size: clamp(1.8rem, 6vw, 2.6rem); line-height: 1.1; margin: 0 0 .5rem; outline: none; }
.bt-roledesc { margin: 0 0 1rem; max-width: 42rem; }
.bt-lean { margin: 0 0 .6rem; }
.bt-lean__svg { display: block; width: 100%; max-width: 30rem; height: auto; }
.bt-lean__zone { fill: color-mix(in srgb, var(--k-second) 12%, transparent); }
.bt-lean__track { stroke: var(--k-edge); stroke-width: 6; stroke-linecap: round; }
.bt-lean__mid { stroke: var(--k-muted); stroke-width: 1; stroke-dasharray: 3 3; }
.bt-lean__sw { fill: color-mix(in srgb, var(--k-second) 55%, transparent); }
.bt-lean__you circle { fill: var(--k-card); stroke: var(--k-text); stroke-width: 3; }
.bt-lean__you .bt-lean__core { fill: var(--k-second); stroke: none; }
.bt-lean__you { transition: transform .5s ease; }
.bt-lean__ends { display: flex; justify-content: space-between; gap: .5rem; max-width: 30rem; font-size: .8rem; color: var(--k-muted); }
.bt-lean__z { color: var(--k-second); }
.bt-roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin: .4rem 0 .9rem; max-width: 30rem; }
.bt-roles__i { border: 1px solid var(--k-edge); border-radius: var(--k-round); padding: .45rem .6rem; background: var(--k-paper); }
.bt-roles dt { font-size: .78rem; color: var(--k-muted); }
.bt-roles dd { margin: 0; font-family: var(--k-f1); font-size: 1.35rem; font-weight: 700; }
.bt-why { margin: 0 0 .3rem; }
.bt-why strong { font-weight: 700; }
.bt-why__t { font-variant-numeric: tabular-nums; }
.bt-why2, .bt-based { font-size: .88rem; color: var(--k-muted); margin: 0 0 .3rem; }
.bt-flags { list-style: none; padding: 0; margin: .6rem 0 0; display: grid; gap: .4rem; }
.bt-flag { border-left: 3px solid var(--k-second); background: color-mix(in srgb, var(--k-second) 8%, var(--k-card)); padding: .5rem .75rem; font-size: .92rem; border-radius: 0 var(--k-round) var(--k-round) 0; }

/* top interests */
.bt-top { margin: 1.4rem 0 .4rem; }
.bt-top__list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.bt-top__i { padding: .35rem .85rem; border-radius: 999px; background: color-mix(in srgb, var(--k-brand) 12%, var(--k-card)); border: 1px solid color-mix(in srgb, var(--k-brand) 35%, var(--k-edge)); font-weight: 600; }
.bt-top__none { margin: 0; color: var(--k-muted); }

/* radar */
.bt-radar { margin: 1rem 0 0; padding: 0; container-type: inline-size; }
.bt-radar__svg { display: block; width: 100%; max-width: 34rem; height: auto; margin: 0 auto; overflow: visible; }
.bt-radar__ring { fill: none; stroke: var(--k-edge); stroke-width: 1; }
.bt-radar__spoke { stroke: var(--k-edge); stroke-width: 1; }
.bt-radar__a { fill: color-mix(in srgb, var(--k-brand) 20%, transparent); stroke: var(--k-brand); stroke-width: 2.5; stroke-linejoin: round; transition: all .4s ease; }
.bt-radar__b { fill: color-mix(in srgb, var(--k-second) 10%, transparent); stroke: var(--k-second); stroke-width: 2; stroke-dasharray: 6 4; stroke-linejoin: round; }
.bt-radar__dot { fill: var(--k-brand); }
.bt-radar__dot--na { fill: var(--k-card); stroke: var(--k-muted); stroke-width: 1.5; }
.bt-radar__lab { fill: var(--k-muted); font-family: var(--k-f2); font-size: 14px; }
.bt-radar__legend { display: flex; justify-content: center; gap: 1.2rem; font-size: .85rem; color: var(--k-muted); margin-top: .3rem; }
.bt-key { display: inline-flex; align-items: center; gap: .4rem; }
.bt-key__sw { width: 1.3rem; height: .7rem; border-radius: 3px; border: 2px solid var(--k-brand); background: color-mix(in srgb, var(--k-brand) 20%, transparent); }
.bt-key--b .bt-key__sw { border: 2px dashed var(--k-second); background: color-mix(in srgb, var(--k-second) 10%, transparent); }
@media (max-width: 420px) { .bt-radar__lab { font-size: 18px; } }
@container (max-width: 420px) { .bt-radar__lab { font-size: 18px; } }

/* every scale */
.bt-scales { margin: 1.4rem 0 0; }
.bt-scales__list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: .45rem .9rem; }
.bt-sc--first { grid-column-start: 1; margin-top: .7rem; }
.bt-sc__b { display: block; width: 100%; text-align: left; background: transparent; border: 0; border-bottom: 1px solid var(--k-edge); padding: .45rem .1rem .55rem; cursor: pointer; min-height: 44px; }
.bt-sc__top { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.bt-sc__n { font-weight: 600; }
.bt-sc__n::after { content: " +"; color: var(--k-muted); font-weight: 400; }
.bt-sc__b[aria-expanded="true"] .bt-sc__n::after { content: " −"; }
.bt-sc__vals { display: inline-flex; gap: .5rem; align-items: baseline; font-variant-numeric: tabular-nums; }
.bt-sc__v { font-weight: 700; }
.bt-sc__pv { font-size: .8rem; color: var(--k-second); }
.bt-sc--top .bt-sc__n { color: var(--k-brand); }
.bt-sc--na .bt-sc__v { color: var(--k-muted); }
.bt-sc__bar { position: relative; display: block; height: 10px; margin-top: .35rem; border-radius: 999px; background: color-mix(in srgb, var(--k-edge) 70%, transparent); overflow: hidden; }
.bt-sc__fill { position: absolute; left: 0; top: 0; height: 6px; width: 0; background: var(--k-brand); border-radius: 999px; transition: width .45s ease; }
.bt-sc__fill--p { top: auto; bottom: 0; height: 3px; background: var(--k-second); }
.bt-sc__ex { margin: .45rem .1rem .3rem; font-size: .9rem; color: var(--k-text); }

/* actions + code */
.bt-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.4rem 0 .4rem; }
.bt-status { min-height: 1.4em; margin: .2rem 0; font-size: .9rem; color: var(--k-muted); }
.bt-copybox { width: 100%; min-height: 8rem; font: .85rem/1.45 var(--k-f2); color: var(--k-text); background: var(--k-paper); border: 1px solid var(--k-edge); border-radius: var(--k-round); padding: .6rem; }
.bt-sharedcta { margin: 1rem 0; }
.bt-code, .bt-compare, .bt-limits { margin: 1.2rem 0 0; padding: 1.1rem 1.2rem; border: 1px solid var(--k-edge); border-radius: var(--k-round); background: var(--k-card); }
.bt-code__v { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .95rem; letter-spacing: .08em; padding: .5rem .7rem; border: 1px dashed var(--k-edge); border-radius: var(--k-round); background: var(--k-paper); overflow-wrap: anywhere; margin: .3rem 0 .4rem; }

/* compare */
.bt-cmp__row { display: flex; gap: .5rem; flex-wrap: wrap; }
.bt-cmp__in { flex: 1 1 14rem; min-width: 0; min-height: 44px; padding: .5rem .75rem; border: 1px solid var(--k-edge); border-radius: var(--k-round); background: var(--k-paper); color: var(--k-text); font: inherit; color-scheme: inherit; }
.bt-cmp__in[aria-invalid="true"] { border-color: var(--k-second); }
.bt-cmp__err { color: var(--k-second); font-size: .9rem; margin: .4rem 0 0; min-height: 0; }
.bt-cmp__err:empty { display: none; }
.bt-cmp__list { list-style: none; padding: 0; margin: .9rem 0 .4rem; display: grid; gap: .45rem; }
.bt-cmp__i { border: 1px solid var(--k-edge); border-radius: var(--k-round); padding: .5rem .75rem; background: var(--k-paper); }
.bt-cmp__h { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .7rem; }
.bt-cmp__n { font-weight: 700; flex: 1 1 auto; }
.bt-cmp__fit { font-size: .85rem; color: var(--k-muted); font-variant-numeric: tabular-nums; }
.bt-cmp__v { font-size: .8rem; font-weight: 700; padding: .15rem .6rem; border-radius: 999px; border: 1px solid var(--k-edge); }
.bt-cmp__i[data-v="good_fit"] .bt-cmp__v { background: color-mix(in srgb, var(--k-brand) 14%, var(--k-card)); border-color: color-mix(in srgb, var(--k-brand) 40%, var(--k-edge)); }
.bt-cmp__i[data-v="talk_first"] .bt-cmp__v { background: color-mix(in srgb, var(--k-second) 12%, var(--k-card)); border-color: var(--k-second); color: var(--k-text); }
.bt-cmp__i[data-v="low_both"] .bt-cmp__v { color: var(--k-muted); }
.bt-cmp__d { margin: .25rem 0 0; font-size: .82rem; color: var(--k-muted); }
.bt-cmp__note { font-weight: 700; margin: .5rem 0 .2rem; }

/* yes / maybe / no */
.bt-limits__groups { display: grid; gap: 1rem; }
.bt-lg__h { font-family: var(--k-f1); font-size: 1rem; margin: 0 0 .3rem; }
.bt-lg__list { list-style: none; padding: 0; margin: 0; }
.bt-lim { display: flex; align-items: center; justify-content: space-between; gap: .4rem .8rem; flex-wrap: wrap; padding: .4rem 0; border-bottom: 1px solid var(--k-edge); }
.bt-lim__n { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .5rem; flex: 1 1 12rem; min-width: 0; }
.bt-lim__hint { font-size: .72rem; padding: .05rem .5rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--k-brand) 35%, var(--k-edge)); color: var(--k-muted); background: color-mix(in srgb, var(--k-brand) 6%, var(--k-card)); }
.bt-seg { display: inline-flex; border: 1px solid var(--k-edge); border-radius: var(--k-round); overflow: hidden; flex: 0 0 auto; }
.bt-seg__b { min-height: 44px; min-width: 4.2rem; padding: .3rem .6rem; border: 0; border-left: 1px solid var(--k-edge); background: var(--k-card); cursor: pointer; font-size: .85rem; font-weight: 600; color: var(--k-muted); }
.bt-seg__b:first-child { border-left: 0; }
.bt-seg__b[data-v="yes"][aria-checked="true"] { background: var(--k-brand); color: var(--k-card); }
.bt-seg__b[data-v="maybe"][aria-checked="true"] { background: color-mix(in srgb, var(--k-brand) 16%, var(--k-card)); color: var(--k-text); }
.bt-seg__b[data-v="no"][aria-checked="true"] { background: color-mix(in srgb, var(--k-second) 14%, var(--k-card)); color: var(--k-text); box-shadow: inset 0 -3px 0 var(--k-second); }
.bt-limits__acts { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }

@media (max-width: 480px) {
    .bt-rolecard, .bt-code, .bt-compare, .bt-limits { padding: 1rem .85rem; }
    .bt-lim { padding: .55rem 0; }
    .bt-seg { width: 100%; }
    .bt-seg__b { flex: 1 1 0; min-width: 0; }
    .bt-actions .bt-btn { flex: 1 1 40%; }
    .bt-roles dd { font-size: 1.15rem; }
}
@media (prefers-reduced-motion: reduce) {
    .bt-screen { animation: none; }
    .bt *, .bt *::before, .bt *::after { transition: none !important; }
}
@media print {
    body.bt-printing * { visibility: hidden; }
    body.bt-printing .bt-limits, body.bt-printing .bt-limits * { visibility: visible; }
    body.bt-printing .bt-limits { position: absolute; left: 0; top: 0; width: 100%; border: 0; }
    body.bt-printing .bt-limits__acts, body.bt-printing .bt-seg__b[aria-checked="false"] { display: none; }
    body.bt-printing .bt-seg { border: 0; }
    body.bt-printing .bt-seg__b[aria-checked="true"] { min-height: 0; background: none; color: var(--k-text); box-shadow: none; text-decoration: underline; }
}

/* design: sites/<d>/design/site.css */
/* Noren doorway of a quiet late-night bar — test-bdsm.com
   Sumi-ink noren on a wooden rod as the first screen, washi paper pages,
   wooden menu tags (fuda) for guides, one vermilion hanko seal used sparingly. */

/* washi paper: warm off-white with faint fibres */
body{background:var(--k-paper) url(/assets/img/d-washi.svg) 0 0/360px repeat}

/* header: the shop front above the doorway, brand centred like a signboard */
.tes1yp{background:color-mix(in srgb,var(--k-card) 55%,transparent);border-bottom:0;position:relative}
.tes1yp::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;
  background:linear-gradient(var(--k-edge),var(--k-edge)) 0 0/100% 1px no-repeat,linear-gradient(var(--k-edge),var(--k-edge)) 0 4px/100% 1px no-repeat}
.tewzup{padding:1.1rem 1rem .9rem;gap:.55rem}
.te6d7s{font-family:var(--k-f1);font-size:1.15rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--k-text);text-decoration:none;gap:.6rem}
.te6d7s svg{width:30px;height:30px}
.teaqke{gap:.3rem 1.4rem}
.teaqke>a{position:relative;padding:.25rem .1rem;color:var(--k-muted)}
.teaqke>a:hover{color:var(--k-text)}
.teaqke>a[aria-current]{color:var(--k-text)}
/* the current page is marked with a small seal dot under the word */
.teaqke>a[aria-current]::after{content:"";position:absolute;left:50%;bottom:-.35rem;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:var(--k-second)}

/* language: a small round lantern in the header */
.tehgif summary{border:1px solid color-mix(in srgb,var(--k-text) 22%,transparent);background:var(--k-card);color:var(--k-text);font-weight:600;letter-spacing:.06em;padding:.28rem .7rem;transition:border-color .2s ease}
.tehgif summary:hover,.tehgif[open] summary{border-color:var(--k-text)}
.tehgif summary::-webkit-details-marker{display:none}
.tejxr3{border-radius:var(--k-round);border-color:color-mix(in srgb,var(--k-text) 18%,transparent);padding:.35rem;box-shadow:0 12px 26px -16px color-mix(in srgb,var(--k-text) 55%,transparent);right:50%;transform:translateX(50%)}
.tejxr3 a{border-radius:3px;font-size:.92rem}
.tejxr3 a:hover{background:color-mix(in srgb,var(--k-brand) 7%,transparent)}
.tejxr3 a[aria-current]{position:relative;padding-left:1.3rem;color:var(--k-text)}
.tejxr3 a[aria-current]::before{content:"";position:absolute;left:.5rem;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--k-second)}

/* breadcrumbs: small caps on paper */
.te116u{font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--k-muted)}
.te116u a{color:var(--k-muted);text-decoration-color:color-mix(in srgb,var(--k-text) 25%,transparent)}
.te116u a:hover{color:var(--k-text)}

/* first screen: the noren — dyed cotton hanging from a dark rod, split by slits at the hem */
.tei1i9{position:relative;margin:2rem 0 2rem;padding:2.8rem 2.2rem 4.6rem;border-radius:0 0 2px 2px;
  background:url(/assets/img/d-crest.svg) right 1.2rem center/270px no-repeat,
    repeating-linear-gradient(0deg,color-mix(in srgb,var(--k-paper) 4%,transparent) 0 1px,transparent 1px 4px),
    linear-gradient(180deg,color-mix(in srgb,var(--k-brand) 88%,var(--k-text)) 0%,var(--k-brand) 55%,color-mix(in srgb,var(--k-brand) 92%,var(--k-paper)) 100%)}
/* the rod */
.tei1i9::before{content:"";position:absolute;left:-12px;right:-12px;top:-11px;height:12px;border-radius:6px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--k-text) 70%,var(--k-muted)) 0%,var(--k-text) 60%,color-mix(in srgb,var(--k-text) 80%,var(--k-paper)) 100%);
  box-shadow:0 3px 6px -3px color-mix(in srgb,var(--k-text) 60%,transparent)}
/* the slits that split the cloth into three panels, cut up from the hem */
.tei1i9::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3.1rem;pointer-events:none;
  background:linear-gradient(90deg,transparent calc(33.33% - 3px),var(--k-paper) calc(33.33% - 3px) calc(33.33% + 3px),transparent calc(33.33% + 3px) calc(66.66% - 3px),var(--k-paper) calc(66.66% - 3px) calc(66.66% + 3px),transparent calc(66.66% + 3px))}
.tei1i9>div:first-child{position:relative;z-index:1}
.tei1i9 h1{font-family:var(--k-f1);font-size:clamp(1.9rem,4.4vw,2.9rem);line-height:1.1;letter-spacing:-.015em;max-width:20ch;margin:0 0 .8rem}
.tei1i9 .te880q{opacity:1;color:color-mix(in srgb,var(--k-paper) 90%,var(--k-brand));max-width:60ch;font-size:1.04rem;line-height:1.65;margin:0}
/* the hanko seal stamped over the dyed crest */
.tei1i9--art .teu9ae{width:140px;height:140px;margin-right:1.9rem}
.teu9ae--ring{background:radial-gradient(circle,transparent 0 60%,color-mix(in srgb,var(--k-second) 85%,var(--k-paper)) 61% 63%,transparent 64%)}
.teu9ae--ring svg{width:74%;height:74%;filter:none;transform:rotate(-8deg)}
.teu9ae svg circle{fill:var(--k-second)}
.teu9ae svg path{stroke:var(--k-paper)}

/* the tool sits on the counter behind the curtain: only outer spacing */
.te33ip{margin:0 0 2rem}

/* contents: the handwritten menu board by the door */
.te864i{background:var(--k-card);border:1px solid var(--k-edge);border-top:3px solid var(--k-text);border-radius:0 0 var(--k-round) var(--k-round);padding:1rem 1.3rem 1.1rem}
.te864i>strong{display:block;font-family:var(--k-f1);font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--k-muted);margin-bottom:.4rem}
.te864i ol{counter-reset:m;list-style:none;padding-left:0}
.te864i li{counter-increment:m;position:relative;padding-left:2rem;margin:.18rem 0;break-inside:avoid}
.te864i li::before{content:counter(m,decimal-leading-zero);position:absolute;left:0;top:.12em;font-family:var(--k-f1);font-size:.78rem;font-weight:700;color:var(--k-muted);letter-spacing:.04em}
.te864i a{color:var(--k-text);text-decoration-color:color-mix(in srgb,var(--k-text) 25%,transparent)}
.te864i a:hover{text-decoration-color:var(--k-second)}

/* notes: a paper slip with a small vermilion seal in the corner */
.te4ziz{position:relative;background:var(--k-card);border:1px solid var(--k-edge);border-left:1px solid var(--k-edge);border-radius:var(--k-round);padding:1rem 1.2rem 1rem 3.2rem}
.te4ziz::before{content:"";position:absolute;left:1.05rem;top:1.15rem;width:16px;height:16px;border-radius:50%;
  background:radial-gradient(circle,var(--k-second) 0 38%,transparent 40% 58%,var(--k-second) 60% 74%,transparent 76%)}
.te4ziz p{margin:0}

/* sections: a thin rod with three hanging tabs, then the heading */
.tebqmg>h2{border-top:0;padding-top:1.6rem;position:relative;font-family:var(--k-f1);letter-spacing:-.01em}
.tebqmg>h2::before{position:absolute;left:0;top:0;width:3.4rem;height:10px;margin:0;
  background:linear-gradient(var(--k-text),var(--k-text)) 0 0/100% 2px no-repeat,
    linear-gradient(var(--k-text),var(--k-text)) 6px 0/8px 10px no-repeat,
    linear-gradient(var(--k-text),var(--k-text)) 23px 0/8px 10px no-repeat,
    linear-gradient(var(--k-second),var(--k-second)) 40px 0/8px 10px no-repeat}
.tebqmg>h2::after{content:"";position:absolute;left:4.2rem;right:0;top:0;height:1px;background:var(--k-edge)}
.tebqmg h3{font-family:var(--k-f1)}

/* links: ink with a quiet underline, the seal colour only on hover */
.te9csx a:not(.te7z86):not(.tefecc):not(.tecjww){color:var(--k-text);text-decoration-color:color-mix(in srgb,var(--k-text) 35%,transparent);transition:text-decoration-color .2s ease}
.te9csx a:not(.te7z86):not(.tefecc):not(.tecjww):hover{text-decoration-color:var(--k-second)}

/* lists and steps */
.tesu8i{counter-reset:s;list-style:none;padding-left:0}
.tesu8i>li{counter-increment:s;position:relative;padding-left:2.6rem;margin:.6rem 0}
.tesu8i>li::before{content:counter(s);position:absolute;left:0;top:.05em;width:1.75rem;height:1.75rem;border-radius:50%;border:1.5px solid var(--k-text);display:grid;place-items:center;font-family:var(--k-f1);font-size:.85rem;font-weight:700;line-height:1}
.tebqmg ul{padding-left:1.2rem}
.tebqmg ul>li::marker{color:var(--k-second)}

/* formula: a written receipt slip */
.te5g5b{background:var(--k-card);border:1px dashed color-mix(in srgb,var(--k-text) 35%,transparent);border-radius:var(--k-round);padding:.9rem 1.1rem;line-height:1.7}

/* tables: an evening drinks list, ruled with hairlines */
.tevbrd{background:var(--k-card);border:1px solid var(--k-edge);border-radius:var(--k-round);padding:.3rem .2rem}
.teg8pm caption{font-family:var(--k-f1);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--k-muted);padding:.6rem .8rem .4rem;text-align:left}
.teg8pm th{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--k-text);border-bottom:2px solid var(--k-text)}
.teg8pm td{border-bottom:1px dotted color-mix(in srgb,var(--k-text) 22%,transparent)}
.teg8pm tr:last-child td{border-bottom:0}
.teg8pm td:first-child{font-weight:600}

/* figures: pinned on paper */
.tezuk3{background:var(--k-card);border:1px solid var(--k-edge);border-radius:var(--k-round);padding:1rem}
.tezuk3 figcaption{font-size:.86rem;color:var(--k-muted);text-align:center;margin-top:.6rem}

/* guide cards: wooden menu tags (fuda) hanging on the wall, each with a cord hole */
.tefecc{position:relative;background:var(--k-card);border:1px solid var(--k-edge);border-radius:var(--k-round)}
.tefecc--img{transition:border-color .2s ease,transform .2s ease}
.tefecc--img:hover{transform:translateY(-2px);box-shadow:none;border-color:var(--k-text)}
.tefggb{border-bottom:1px solid var(--k-edge);background:color-mix(in srgb,var(--k-edge) 40%,var(--k-card))}
.te0sve{position:relative;padding:1.3rem 1.3rem 1.2rem!important}
.te0sve::before{content:"";position:absolute;right:1.1rem;top:1.15rem;width:9px;height:9px;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--k-text) 45%,transparent);background:var(--k-paper)}
.tefecc b{font-size:1.08rem;line-height:1.3;padding-right:1.4rem;color:var(--k-text)}
.tehcht{color:var(--k-muted);letter-spacing:.12em;text-transform:uppercase;font-size:.72rem}
.tefecc--img:hover .te0sve::before{background:var(--k-second);border-color:var(--k-second)}
.te3z8v--feat>.tefecc:first-child{background:var(--k-card)}
.te3z8v--feat>.tefecc:first-child .tefggb{border-bottom:0;border-right:1px solid var(--k-edge);height:100%}
.te3z8v--feat>.tefecc:first-child b{font-size:1.4rem}
@media (min-width:900px){.te3z8v--feat{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* FAQ: questions as small headed slips */
.tepp0c h3{position:relative;padding-left:1.4rem;font-family:var(--k-f1)}
.tepp0c h3::before{content:"";position:absolute;left:0;top:.45em;width:.6rem;height:2px;background:var(--k-text)}
.tepp0c h3+p{padding-left:1.4rem;color:color-mix(in srgb,var(--k-text) 88%,var(--k-muted))}

/* buttons: square, ink, like a lacquered tray */
.te7z86{background:var(--k-text);color:var(--k-paper);border-radius:var(--k-round);letter-spacing:.12em;transition:background-color .2s ease}
.te7z86:hover{background:color-mix(in srgb,var(--k-text) 82%,var(--k-second))}
.tempb7{background:transparent!important;border:0!important;text-align:center}

/* blog hub title */
.te9csx>h1{font-family:var(--k-f1);font-size:clamp(2.2rem,5vw,3.2rem);letter-spacing:-.02em;margin:.6rem 0 .4rem}
.te9csx>.te880q{max-width:62ch;color:color-mix(in srgb,var(--k-text) 85%,var(--k-muted))}

/* article: the title is a noren hung from its rod, the cover illustration hangs behind the slits */
.teysan--overlay{display:flex;flex-direction:column;border-radius:0;overflow:visible;margin-top:1.8rem}
.teysan--overlay>img{order:1;border:1px solid var(--k-edge);border-top:0;background:var(--k-card);min-height:0;border-radius:0 0 var(--k-round) var(--k-round)}
.teysan--overlay::before{content:"";position:absolute;left:-10px;right:-10px;top:-9px;height:10px;border-radius:5px;z-index:2;
  background:linear-gradient(180deg,color-mix(in srgb,var(--k-text) 70%,var(--k-muted)),var(--k-text))}
.teg82m{order:0;position:relative;inset:auto;padding:2.2rem 2rem 3.6rem;
  background:repeating-linear-gradient(0deg,color-mix(in srgb,var(--k-paper) 4%,transparent) 0 1px,transparent 1px 4px),var(--k-brand)}
.teg82m::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2.2rem;pointer-events:none;
  background:linear-gradient(90deg,transparent calc(33.33% - 3px),var(--k-paper) calc(33.33% - 3px) calc(33.33% + 3px),transparent calc(33.33% + 3px) calc(66.66% - 3px),var(--k-paper) calc(66.66% - 3px) calc(66.66% + 3px),transparent calc(66.66% + 3px))}
.teg82m .tecjww{letter-spacing:.2em;color:color-mix(in srgb,var(--k-paper) 88%,var(--k-brand))}
.teg82m .te93wi{color:color-mix(in srgb,var(--k-paper) 86%,var(--k-brand))}
.teg82m h1{font-family:var(--k-f1);text-wrap:balance;margin:.4rem 0 .7rem}
.te1e9y .te880q::first-letter{color:var(--k-second)}
.te1e9y .te880q{font-size:1.16rem;line-height:1.7}
.te1e9y p,.te1e9y li{line-height:1.75}
.te1e9y blockquote{border-left:0;position:relative;padding:.6em 1.2em .6em 2.6em;background:var(--k-card);border-radius:var(--k-round);border:1px solid var(--k-edge)}
.te1e9y blockquote::before{content:"";position:absolute;left:1rem;top:.95em;width:12px;height:12px;border-radius:50%;background:var(--k-second)}
/* article contents as wooden tags on a hook rail (in the flow, never sticky) */
.te1e9y .te864i--post{border-left:1px solid var(--k-edge);border-top:3px solid var(--k-text);border-radius:0 0 var(--k-round) var(--k-round)}
.te1e9y .te864i--post li{padding-left:0}
.te1e9y .te864i--post li::before{content:none}
.te864i--chips ol{gap:.5rem}
.te864i--chips a{border-radius:3px;border-color:color-mix(in srgb,var(--k-text) 18%,transparent);background:var(--k-paper);color:var(--k-text);transition:border-color .2s ease}
.te864i--chips a:hover{border-color:var(--k-text)}

/* footer: the dark wooden threshold of the bar */
.tenwfz{background:var(--k-text);color:var(--k-paper);border-top:0;position:relative;margin-top:4rem;padding-top:2.2rem}
.tenwfz::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--k-paper) 14%,var(--k-text)) 0 1px,transparent 1px 7px)}
.tenwfz a,.tenwfz p{opacity:1;color:color-mix(in srgb,var(--k-paper) 86%,var(--k-text))}
.tenwfz a:hover{color:var(--k-paper);text-decoration-color:var(--k-second)}
.tey9h9>p{font-family:var(--k-f1);letter-spacing:.04em}
.tey9h9>p::before{content:"";display:inline-block;vertical-align:-.1em;width:.75em;height:.75em;margin-right:.6em;border-radius:50%;background:var(--k-second)}

@media (max-width:720px){
  .tei1i9{padding:2rem 1.2rem 4.2rem;margin-top:1.6rem;background-position:right -80px bottom 2.6rem,0 0,0 0;background-size:190px,auto,auto}
  .tei1i9::before{left:-6px;right:-6px}
  .tei1i9 h1{font-size:1.8rem}
  .te3z8v--feat{grid-template-columns:1fr}
  .te3z8v--feat>.tefecc:first-child .tefggb{border-right:0;border-bottom:1px solid var(--k-edge);height:auto}
  .teg82m{padding:1.6rem 1.2rem 3.2rem}
  .teysan--overlay::before{left:-6px;right:-6px}
}
@media (prefers-reduced-motion:reduce){
  .tefecc--img,.te7z86,.tehgif summary,.te864i--chips a{transition:none}
  .tefecc--img:hover{transform:none}
}

@media(max-width:600px){.teg8pm th,.teg8pm td{padding:.55rem .5rem;font-size:.86rem;overflow-wrap:anywhere;hyphens:auto}.teg8pm th{letter-spacing:.06em;font-size:.7rem}}