:root{--k-bg:#121016;--k-raised:#1c1922;--k-fg:#f3eef8;--k-soft:#b6a9c7;--k-primary:#e11d74;--k-second:#f5b700;--k-border:#2e2a36;--k-rad:16px;--k-page:1080px;--k-f1:'Merriweather',system-ui,sans-serif;--k-text-font:'Work 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-bg);color:var(--k-fg);font:16px/1.78 var(--k-text-font);color-scheme:dark}
img{max-width:100%;height:auto} a{color:var(--k-primary);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-fg)}
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.75em 0 .6em} h3{font-size:1.15rem;margin:1.6em 0 .4em}
p,ul,ol{margin:0 0 1.25em}
.din4fr{max-width:var(--k-page);margin:0 auto;padding:0 1rem} .di3929{max-width:var(--k-page);margin:0 auto;padding:1.2rem 1rem 3rem}
.diwwr6{position:absolute;left:-9999px} .diwwr6:focus{left:1rem;top:1rem;background:var(--k-raised);padding:.5rem;z-index:99}
.din193{max-width:var(--k-page);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 1rem;flex-wrap:wrap}
.di8sfd{display:flex;align-items:center;gap:.6rem;font:800 1.15rem var(--k-f1);color:var(--k-fg);text-decoration:none}
.didu8s{display:flex;gap:1rem;flex-wrap:wrap;align-items:center} .didu8s a{color:var(--k-fg);text-decoration:none;font-weight:600;font-size:.95rem}
.didgkd{background:transparent;padding-top:.8rem} .din193{background:var(--k-raised);border:1px solid var(--k-border);border-radius:999px;padding:.5rem 1.1rem}  
.dii1w0{margin:1rem 0 1.4rem} .di6qzp{font-size:1.12rem;max-width:46em;color:var(--k-soft)} .dii1w0{background:var(--k-raised);border:1px solid var(--k-border);padding:2rem 1.6rem;border-radius:var(--k-rad)}
.did7hq{margin:1.4rem 0 2rem}
.dic64b{margin:1.4em 0;padding:.9em 1.1em;background:var(--k-raised);border-left:4px solid var(--k-second);border-radius:0 var(--k-rad) var(--k-rad) 0}
.di6420{margin:1.2em 0;padding:.9em 1.1em;font-family:ui-monospace,Consolas,monospace;background:var(--k-raised);border:1px dashed var(--k-primary);border-radius:var(--k-rad);overflow-x:auto}
.divgsp{margin:1.2em 0;overflow-x:auto;border:1px solid var(--k-border);border-radius:var(--k-rad);background:var(--k-raised)}
.dihx3n{width:100%;border-collapse:collapse;font-size:.95em;font-variant-numeric:tabular-nums} .dihx3n th,.dihx3n td{padding:.5em .75em;border-bottom:1px solid var(--k-border);text-align:left}
.dihx3n thead th{background:color-mix(in srgb,var(--k-border) 60%,var(--k-raised))}
ol.di9x4x{padding-left:1.3em} ol.di9x4x>li{margin:.5em 0}
.di73m1{margin:1.6em 0;text-align:center} .di73m1 img{width:100%;max-width:720px;border-radius:var(--k-rad);border:1px solid var(--k-border);background:#fff} .di73m1 figcaption{font-size:.9em;color:var(--k-soft)}
.diqrva{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem;margin:1.2em 0}
.diidfe{display:block;padding:1.1rem;background:var(--k-raised);border-radius:var(--k-rad);border:1px solid var(--k-border);color:var(--k-fg);text-decoration:none}
.diidfe b{display:block;font-family:var(--k-f1);margin-bottom:.35rem} .diidfe span{color:var(--k-soft);font-size:.92rem} .diidfe:hover{border-color:var(--k-primary)}
.diidfe--img{padding:0;overflow:hidden;display:flex;flex-direction:column;transition:transform .2s ease,box-shadow .2s ease} .diidfe--img:hover{transform:translateY(-3px);box-shadow:0 10px 24px color-mix(in srgb,var(--k-fg) 14%,transparent)}
.dickyt{display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover} .di0w2v{display:block;padding:1rem 1.1rem 1.1rem} .di0w2v>span{display:block}
.dimdw5 a,.dii51z,.dim97m{background:none!important}
.diawkz{display:block;margin-top:.6rem;font-size:.8rem;font-weight:700;letter-spacing:.04em;color:var(--k-primary)}
.diqrva--feat{grid-template-columns:repeat(2,minmax(0,1fr))} .diqrva--feat>.diidfe:first-child{grid-column:1/-1;display:grid;grid-template-columns:1.3fr 1fr;align-items:center} .diqrva--feat>.diidfe:first-child b{font-size:1.35rem}
.dimdw5{display:grid;gap:1rem;margin:1.2em 0} .dii51z{display:grid;grid-template-columns:240px 1fr;gap:1.1rem;align-items:center;background:var(--k-raised);border:1px solid var(--k-border);border-radius:var(--k-rad);overflow:hidden;color:var(--k-fg);text-decoration:none}
.dii51z .dickyt{height:100%;aspect-ratio:auto;min-height:126px} .dii51z b{display:block;font-family:var(--k-f1);font-size:1.12rem;margin-bottom:.3rem} .dii51z .di0w2v>span{color:var(--k-soft);font-size:.93rem} .dii51z:hover{border-color:var(--k-primary)}
.dimdw5--min{list-style:none;padding:0;counter-reset:bl;gap:0} .dimdw5--min li{counter-increment:bl;border-top:1px solid var(--k-border)} .dimdw5--min li:last-child{border-bottom:1px solid var(--k-border)}
.dimdw5--min a{display:grid;grid-template-columns:4.2rem 1fr;column-gap:1rem;padding:1.1rem .2rem;color:var(--k-fg);text-decoration:none} .dimdw5--min a::before{content:counter(bl,decimal-leading-zero);grid-row:1/4;font:800 2.4rem/1 var(--k-f1);color:var(--k-primary)}
.dimdw5--min b{font-family:var(--k-f1);font-size:1.15rem} .dimdw5--min span{color:var(--k-soft);font-size:.93rem} .dimdw5--min a:hover b{color:var(--k-primary)}
.dii3un--overlay{position:relative;margin:.6rem 0 1.6rem;border-radius:var(--k-rad);overflow:hidden} .dii3un--overlay>img{display:block;width:100%;height:auto;min-height:300px;object-fit:cover}
.di7k18{position:absolute;inset:auto 0 0 0;padding:4rem 1.6rem 1.4rem;background:linear-gradient(transparent,color-mix(in srgb,#000 72%,transparent))} .di7k18 h1,.di7k18 .dikr2v,.di7k18 .dim97m{color:#fff}
.dii3un--band{background:var(--k-primary);color:#fff;padding:2.2rem 1.6rem;border-radius:var(--k-rad)} .dii3un--band h1,.dii3un--band .dikr2v,.dii3un--band .dim97m{color:#fff}
.dii3un--split{display:grid;grid-template-columns:1.1fr 1fr;gap:1.6rem;align-items:center} .dii3un--split .dik99u{margin:0}
.dig79d--chips ol{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.45rem} .dig79d--chips li{margin:0} .dig79d--chips a{display:inline-block;padding:.3rem .75rem;border:1px solid var(--k-border);border-radius:999px;background:var(--k-bg);text-decoration:none;font-size:.88rem}
.dig79d--rail{background:none;border:0;border-left:3px solid var(--k-second);border-radius:0;padding:.2rem 0 .2rem 1rem}
.di0gdx--globe summary{display:flex;align-items:center;gap:.35rem} .diud2u{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.8rem} .diud2u a{padding:.25rem .7rem;border:1px solid var(--k-border);border-radius:999px;text-decoration:none} .diud2u a[aria-current]{background:var(--k-primary);border-color:var(--k-primary);color:#fff}
@media (max-width:700px){.diqrva--feat{grid-template-columns:1fr} .diqrva--feat>.diidfe:first-child{display:flex} .dii51z{grid-template-columns:1fr} .dii51z .dickyt{min-height:0;aspect-ratio:1200/630} .dii3un--split{grid-template-columns:1fr} .di7k18{position:static;background:var(--k-primary);padding:1.2rem} .dii3un--overlay>img{min-height:0}}
.ditvjm{max-width:48rem;margin:0 auto} .dii3un{margin:.6rem 0 1.2rem} .dii3un h1{font-size:clamp(2rem,5vw,3rem);line-height:1.12;letter-spacing:-.01em}
.dim97m{display:inline-block;font-size:.78rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--k-primary);text-decoration:none}
.didrf7{color:var(--k-soft);font-size:.9rem;margin:2rem 0 0} .diqjgh{font-style:italic;color:var(--k-soft)} .dikr2v{color:var(--k-soft);font-size:.92rem;margin:0} .dik99u{margin:0 0 1.6rem} .dik99u img{display:block;width:100%;height:auto;border-radius:var(--k-rad)}
.ditvjm .di6qzp{font-size:1.2rem;color:var(--k-fg)} .ditvjm .di6qzp::first-letter{font-family:var(--k-f1);font-size:3.1em;float:left;line-height:.9;margin:.06em .1em 0 0;color:var(--k-primary)}
.ditvjm .dig79d--post{position:static!important;top:auto!important;z-index:auto;margin:0 0 1.8rem;padding:1rem 1.2rem;background:var(--k-raised);border:1px solid var(--k-border);border-left:4px solid var(--k-primary);border-radius:var(--k-rad);font-size:.95rem}
.dig79d--post ol{margin:.4rem 0 0;padding-left:1.2rem;columns:1} .dig79d--post li{margin:.2rem 0}
.ditvjm h3{color:var(--k-primary)} .ditvjm blockquote{margin:1.4em 0;padding:.4em 1.2em;border-left:4px solid var(--k-second);font-size:1.1em}
.dirwyc details{border-bottom:1px solid var(--k-border);padding:.7rem 0} .dirwyc summary{cursor:pointer;font-weight:700;font-family:var(--k-f1)}
.dij38a{font-size:.88rem;color:var(--k-soft);margin:.4rem 0 1rem} .dij38a a{color:var(--k-soft)}
.dibutb{margin:2.4rem 0;padding:1.4rem;background:var(--k-raised);border-radius:var(--k-rad);border:1px solid var(--k-border);text-align:center}
.diaxzc{display:inline-block;padding:.7em 1.4em;background:var(--k-primary);color:#fff;border-radius:999px;font-weight:700;text-decoration:none}
.dii0pz{border-top:1px solid var(--k-border);margin-top:3rem;padding:1.6rem 0 2.4rem;font-size:.9rem;color:var(--k-soft);background:var(--k-raised)}
.dii0pz nav{display:flex;flex-wrap:wrap;gap:.5rem 1.2rem} .dii0pz a{color:var(--k-soft)} .dii0pz{text-align:center} .dii0pz nav{justify-content:center}

.dig79d{margin:1.2rem 0;padding:.8rem 1rem;background:var(--k-raised);border-radius:var(--k-rad);border:1px solid var(--k-border)} .dig79d ol{margin:.3rem 0 0;padding-left:1.2rem;columns:2;column-gap:2rem} @media(max-width:640px){.dig79d ol{columns:1}}
.di0gdx{position:relative} .di0gdx summary{cursor:pointer;list-style:none;padding:.25rem .6rem;border:1px solid var(--k-border);border-radius:999px;font-size:.85rem}
.di6fgb{position:absolute;right:0;top:120%;background:var(--k-raised);border:1px solid var(--k-border);border-radius:10px;padding:.4rem;display:grid;min-width:9rem;z-index:40}
.di6fgb a{padding:.3rem .5rem;text-decoration:none;color:var(--k-fg)} .di6fgb a[aria-current]{font-weight:700;color:var(--k-primary)}
.dijsw3{display:flex;gap:.35rem;font-size:.8rem;font-weight:700} .dijsw3 a{text-decoration:none;color:var(--k-soft);padding:.1rem .3rem;border-radius:4px} .dijsw3 a[aria-current]{color:var(--k-primary);background:color-mix(in srgb,var(--k-primary) 12%,transparent)}
[data-unit]{margin:1rem auto;text-align:center;overflow:hidden;max-width:100%} [data-unit]:empty{margin:0}
[data-unit="mobile_sticky"]{position:fixed;left:0;right:0;bottom:0;margin:0;z-index:50;background:var(--k-raised)}
[data-unit="sidebar_left"],[data-unit="sidebar_right"]{position:fixed;top:110px;width:160px;margin:0;z-index:20} [data-unit="sidebar_left"]{left:12px} [data-unit="sidebar_right"]{right:12px}
@media (max-width:1499px){[data-unit="sidebar_left"],[data-unit="sidebar_right"]{display:none}}
.dietw8{float:right;border:0;background:transparent;font-size:1.2rem;cursor:pointer;color:var(--k-soft)}
.diaxzc{border-radius:999px}
.divgsp{border:0;border-top:3px solid var(--k-primary);border-radius:0;background:transparent} .dihx3n thead th{background:transparent;text-transform:uppercase;font-size:.78rem;letter-spacing:.06em}
.diwwgc a:not(.diaxzc):not(.diidfe){text-decoration-thickness:2px}
@media (max-width:640px){.din193{gap:.5rem} .didu8s{gap:.8rem}}

/* Difficult Person Test — tool styles. Colours, radius and fonts come only from the site tokens:
   --k-bg --k-raised --k-fg --k-soft --k-primary --k-second --k-border --k-rad --k-f1 --k-text-font.
   "You" = primary (magenta on the stage palette), comparison = accent (amber). */

.dpt-container {
    --dpt-soft: color-mix(in srgb, var(--k-primary) 10%, var(--k-raised));
    --dpt-soft2: color-mix(in srgb, var(--k-primary) 18%, var(--k-raised));
    --dpt-btn-bg: color-mix(in srgb, var(--k-primary) 78%, var(--k-fg));
    --dpt-focus: color-mix(in srgb, var(--k-primary) 70%, var(--k-fg));
    color: var(--k-fg);
    font-family: var(--k-text-font);
    color-scheme: inherit;
    line-height: 1.55;
    max-width: 100%;
    position: relative;
    outline: none;
}
.dpt-container *, .dpt-container *::before, .dpt-container *::after { box-sizing: border-box; }
.dpt-container [hidden] { display: none !important; }
.dpt-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.dpt-container h2, .dpt-container h3 { font-family: var(--k-f1); color: var(--k-fg); line-height: 1.25; }
.dpt-container a { color: var(--k-fg); text-decoration-color: var(--k-primary); text-underline-offset: 3px; }
.dpt-container :focus-visible { outline: 3px solid var(--dpt-focus); outline-offset: 2px; }
.dpt-swatches { position: absolute; width: 0; height: 0; overflow: hidden; visibility: hidden; }
.dpt-swatches [data-k="bg"] { color: var(--k-bg); }
.dpt-swatches [data-k="surf"] { color: var(--k-raised); }
.dpt-swatches [data-k="ink"] { color: var(--k-fg); }
.dpt-swatches [data-k="muted"] { color: var(--k-soft); }
.dpt-swatches [data-k="prim"] { color: var(--k-primary); }
.dpt-swatches [data-k="acc"] { color: var(--k-second); }
.dpt-swatches [data-k="line"] { color: var(--k-border); }
.dpt-swatches [data-k="fd"] { font-family: var(--k-f1); }

/* ---------------------------------------------------------------- buttons */
.dpt-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
    min-height: 46px; padding: .6rem 1.25rem; border-radius: var(--k-rad);
    font: 600 1rem/1.2 var(--k-text-font); cursor: pointer; border: 2px solid transparent;
    text-decoration: none; text-align: center; transition: background-color .15s, border-color .15s, transform .1s;
}
.dpt-btn:active:not(:disabled) { transform: translateY(1px); }
.dpt-btn:disabled { opacity: .45; cursor: not-allowed; }
.dpt-btn-primary { background: var(--dpt-btn-bg); color: var(--k-bg); }
.dpt-btn-primary:hover:not(:disabled) { background: color-mix(in srgb, var(--k-primary) 64%, var(--k-fg)); }
.dpt-btn-secondary { background: var(--k-raised); color: var(--k-fg); border-color: var(--k-border); }
.dpt-btn-secondary:hover:not(:disabled) { border-color: var(--k-primary); background: var(--dpt-soft); }
.dpt-btn-ghost { background: transparent; color: var(--k-fg); text-decoration: underline; text-decoration-color: var(--k-primary); text-underline-offset: 4px; }
.dpt-btn-ghost:hover { background: var(--dpt-soft); }

/* ---------------------------------------------------------------- start */
.dpt-start-head { display: grid; grid-template-columns: 112px 1fr; gap: 1.2rem; align-items: center; margin-bottom: 1.2rem; }
.dpt-start-art { width: 112px; height: 112px; overflow: visible; }
.dpt-art-ring { fill: none; stroke: var(--k-border); stroke-width: 1.5; }
.dpt-art-you { fill: color-mix(in srgb, var(--k-primary) 30%, transparent); stroke: var(--k-primary); stroke-width: 2.5; stroke-linejoin: round; }
.dpt-art-them { fill: none; stroke: var(--k-second); stroke-width: 2.5; stroke-dasharray: 6 5; stroke-linejoin: round; }
.dpt-lede { font-size: 1.12rem; margin: 0 0 .5rem; }
.dpt-meta { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0; }
.dpt-meta li { font-size: .88rem; color: var(--k-soft); border: 1px solid var(--k-border); border-radius: 999px; padding: .15rem .7rem; background: var(--k-raised); }

.dpt-modes, .dpt-rels { border: 0; margin: 0 0 1rem; padding: 0; min-width: 0; }
.dpt-legend-q { font-family: var(--k-f1); font-weight: 700; font-size: 1.05rem; margin-bottom: .55rem; padding: 0; }
.dpt-optional { font-family: var(--k-text-font); font-weight: 400; font-size: .88rem; color: var(--k-soft); }
.dpt-modes { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.dpt-modes .dpt-legend-q { grid-column: 1 / -1; float: left; width: 100%; }
.dpt-mode { position: relative; display: block; cursor: pointer; }
.dpt-mode input, .dpt-chip input, .dpt-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.dpt-mode-card {
    display: grid; grid-template-columns: 48px 1fr; grid-template-rows: auto auto; column-gap: .8rem; align-items: center;
    min-height: 84px; padding: .8rem 1rem; border: 2px solid var(--k-border); border-radius: var(--k-rad); background: var(--k-raised);
    transition: border-color .15s, background-color .15s;
}
.dpt-mode-card svg { grid-row: 1 / 3; width: 44px; height: 44px; fill: none; stroke: var(--k-soft); stroke-width: 2.2; stroke-linecap: round; }
.dpt-mode-name { font-weight: 700; }
.dpt-mode-sub { font-size: .88rem; color: var(--k-soft); }
.dpt-mode:hover .dpt-mode-card { border-color: color-mix(in srgb, var(--k-primary) 50%, var(--k-border)); }
.dpt-mode input:checked + .dpt-mode-card { border-color: var(--k-primary); background: var(--dpt-soft); }
.dpt-mode input:checked + .dpt-mode-card svg { stroke: var(--k-primary); }
.dpt-mode input:focus-visible + .dpt-mode-card, .dpt-chip input:focus-visible + span { outline: 3px solid var(--dpt-focus); outline-offset: 2px; }
.dpt-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.dpt-chip { position: relative; cursor: pointer; }
.dpt-chip span { display: inline-flex; align-items: center; min-height: 44px; padding: .35rem 1rem; border: 1.5px solid var(--k-border); border-radius: 999px; background: var(--k-raised); }
.dpt-chip input:checked + span { border-color: var(--k-primary); background: var(--dpt-soft2); font-weight: 600; }
.dpt-start-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: .4rem 0 .6rem; }
.dpt-btn-start { min-width: 12rem; font-size: 1.08rem; }
.dpt-progress-note { color: var(--k-soft); font-size: .92rem; margin: 0 0 .8rem; }
.dpt-last { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; padding: .8rem 1rem; margin: .8rem 0; border-radius: var(--k-rad); border: 1px dashed var(--k-border); background: var(--k-raised); }
.dpt-last-text { margin: 0; flex: 1 1 14rem; }
.dpt-disclaimer { margin: 1rem 0 .4rem; padding: .7rem 1rem; border-left: 4px solid var(--k-primary); background: var(--k-raised); border-radius: 0 var(--k-rad) var(--k-rad) 0; font-size: .95rem; }
.dpt-origin { font-size: .86rem; color: var(--k-soft); margin: .4rem 0 0; }

/* ---------------------------------------------------------------- quiz */
.dpt-progress { margin-bottom: 1rem; }
.dpt-progress-row { display: flex; align-items: center; gap: .6rem 1rem; flex-wrap: wrap; margin-bottom: .45rem; }
.dpt-progress-label { font-weight: 700; }
.dpt-progress-count { color: var(--k-soft); font-size: .92rem; margin-right: auto; }
.dpt-btn-exit { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--k-border); background: var(--k-raised); color: var(--k-fg); cursor: pointer; }
.dpt-btn-exit:hover { border-color: var(--k-primary); }
.dpt-progress-bar { height: 10px; border-radius: 999px; background: var(--k-border); overflow: hidden; }
.dpt-progress-fill { height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--k-primary), color-mix(in srgb, var(--k-primary) 60%, var(--k-second))); transition: width .3s ease; }
.dpt-q-card {
    position: relative; min-height: 9rem; display: flex; align-items: center; padding: 1.6rem 1.4rem 1.6rem 4.6rem; margin-bottom: 1rem;
    background: var(--k-raised); border: 1px solid var(--k-border); border-radius: var(--k-rad); overflow: hidden;
}
.dpt-q-card::after {
    content: ""; position: absolute; right: -28px; bottom: -28px; width: 120px; height: 120px; opacity: .5;
    background: color-mix(in srgb, var(--k-primary) 14%, transparent);
    clip-path: polygon(50% 0, 89% 19%, 98% 61%, 72% 95%, 28% 95%, 2% 61%, 11% 19%);
}
.dpt-q-num { position: absolute; left: 1.1rem; top: 1.3rem; font: 700 1.6rem/1 var(--k-f1); color: var(--k-primary); }
.dpt-question-text { margin: 0; font: 600 clamp(1.15rem, 2.6vw, 1.4rem)/1.4 var(--k-f1); position: relative; z-index: 1; }
.dpt-answers { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; margin-bottom: 1rem; }
.dpt-opt {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: .5rem;
    min-height: 96px; padding: .8rem .4rem; text-align: center; cursor: pointer;
    border: 2px solid var(--k-border); border-radius: var(--k-rad); background: var(--k-raised); transition: border-color .15s, background-color .15s;
}
.dpt-opt:hover { border-color: color-mix(in srgb, var(--k-primary) 55%, var(--k-border)); }
.dpt-opt-dot { display: block; border-radius: 50%; border: 2.5px solid var(--k-soft); transition: background-color .15s, border-color .15s, transform .15s; }
.dpt-o1 .dpt-opt-dot, .dpt-o5 .dpt-opt-dot { width: 30px; height: 30px; }
.dpt-o2 .dpt-opt-dot, .dpt-o4 .dpt-opt-dot { width: 24px; height: 24px; margin-top: 3px; }
.dpt-o3 .dpt-opt-dot { width: 18px; height: 18px; margin-top: 6px; }
.dpt-opt-label { font-size: .9rem; line-height: 1.25; overflow-wrap: anywhere; }
.dpt-opt input:checked ~ .dpt-opt-dot { background: var(--k-primary); border-color: var(--k-primary); transform: scale(1.08); }
.dpt-opt input:checked ~ .dpt-opt-label { font-weight: 700; }
.dpt-opt:has(input:checked), .dpt-opt.dpt-sel { border-color: var(--k-primary); background: var(--dpt-soft); }
.dpt-opt:has(input:focus-visible) { outline: 3px solid var(--dpt-focus); outline-offset: 2px; }
.dpt-nav { display: flex; justify-content: space-between; gap: .6rem; }
.dpt-nav .dpt-btn { min-width: 8rem; }
.dpt-quiz-msg { min-height: 1.4em; margin: .5rem 0 0; color: var(--k-fg); font-weight: 600; }
.dpt-keyboard-hint { font-size: .82rem; color: var(--k-soft); margin: .2rem 0 0; }
.dpt-keyboard-hint kbd { font: 600 .78rem/1 var(--k-text-font); padding: .15rem .4rem; border: 1px solid var(--k-border); border-bottom-width: 2px; border-radius: 4px; background: var(--k-raised); color: var(--k-fg); }

/* ---------------------------------------------------------------- result */
.dpt-res-mode { margin: 0; text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; font-weight: 700; color: var(--k-soft); }
.dpt-res-title { margin: .2rem 0 .8rem; font-size: clamp(1.5rem, 3.4vw, 2rem); outline: none; }
.dpt-warn { padding: .8rem 1rem; border-radius: var(--k-rad); border: 1.5px dashed var(--k-second); background: color-mix(in srgb, var(--k-second) 10%, var(--k-raised)); margin: 0 0 1rem; }
.dpt-top-title { margin: 0 0 .5rem; font-weight: 700; color: var(--k-soft); font-size: .92rem; }
.dpt-top-row { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.dpt-top-card {
    position: relative; display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "rank name pct" "rank band band" "def def def";
    gap: .2rem .8rem; align-items: center; padding: 1rem 1.1rem; border-radius: var(--k-rad);
    background: linear-gradient(135deg, var(--dpt-soft2), var(--k-raised) 70%); border: 1px solid var(--k-border);
}
.dpt-top-rank { grid-area: rank; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; font: 700 1.1rem/1 var(--k-f1); color: var(--k-bg); background: var(--dpt-btn-bg); clip-path: polygon(50% 0, 89% 19%, 98% 61%, 72% 95%, 28% 95%, 2% 61%, 11% 19%); }
.dpt-top-name { grid-area: name; font: 700 1.2rem/1.2 var(--k-f1); }
.dpt-top-pct { grid-area: pct; font: 700 1.7rem/1 var(--k-f1); }
.dpt-top-card .dpt-band { grid-area: band; justify-self: start; }
.dpt-top-def { grid-area: def; color: var(--k-soft); font-size: .92rem; }
.dpt-top-flat { margin: 0; padding: .8rem 1rem; border: 1px solid var(--k-border); border-radius: var(--k-rad); background: var(--k-raised); }

.dpt-res-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 1.2rem; align-items: start; margin: 1.2rem 0; }
.dpt-radar-wrap { margin: 0; padding: .6rem; background: var(--k-raised); border: 1px solid var(--k-border); border-radius: var(--k-rad); min-width: 0; }
.dpt-radar { display: block; width: 100%; height: auto; overflow: hidden; }
.dpt-r-ring { fill: none; stroke: var(--k-border); stroke-width: 1.2; }
.dpt-r-ring-100 { stroke-width: 1.8; }
.dpt-r-ring-25 { fill: color-mix(in srgb, var(--k-border) 30%, transparent); }
.dpt-r-axis { stroke: var(--k-border); stroke-width: 1; }
.dpt-r-tick { fill: var(--k-soft); font: 11px var(--k-text-font); }
.dpt-r-label { font-family: var(--k-text-font); font-size: 15px; }
.dpt-r-name { fill: var(--k-fg); font-weight: 700; }
.dpt-r-val { fill: var(--k-soft); }
.dpt-shape-you { fill: color-mix(in srgb, var(--k-primary) 30%, transparent); stroke: var(--k-primary); stroke-width: 3; stroke-linejoin: round; transform-origin: 280px 222px; }
.dpt-shape-code { fill: color-mix(in srgb, var(--k-second) 10%, transparent); stroke: var(--k-second); stroke-width: 3; stroke-dasharray: 9 7; stroke-linejoin: round; }
.dpt-vertex-you { fill: var(--k-primary); stroke: var(--k-raised); stroke-width: 2; }
.dpt-vertex-code { fill: var(--k-second); stroke: var(--k-raised); stroke-width: 2; }
.dpt-grow { animation: dpt-grow .6s cubic-bezier(.2, .8, .2, 1); }
@keyframes dpt-grow { from { transform: scale(.2); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.dpt-legend { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; font-size: .86rem; padding: .3rem .4rem 0; }
.dpt-key { display: inline-flex; align-items: center; gap: .45rem; }
.dpt-key::before { content: ""; width: 26px; height: 0; border-top: 3px solid var(--k-primary); }
.dpt-key-code::before { border-top: 3px dashed var(--k-second); }

.dpt-overall { padding: 1.1rem 1.2rem; background: var(--k-raised); border: 1px solid var(--k-border); border-radius: var(--k-rad); display: grid; grid-template-columns: auto 1fr; gap: .3rem .8rem; align-items: center; }
.dpt-overall-label { grid-column: 1 / -1; text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; font-weight: 700; color: var(--k-soft); }
.dpt-overall-pct { font: 700 3rem/1 var(--k-f1); }
.dpt-overall-band { justify-self: start; }
.dpt-overall .dpt-meter, .dpt-overall p, .dpt-bandkey { grid-column: 1 / -1; }
.dpt-overall-text { margin: .4rem 0 0; }
.dpt-overall-note { margin: 0; color: var(--k-soft); font-size: .9rem; }
.dpt-bandkey { list-style: none; margin: .5rem 0 0; padding: .6rem 0 0; border-top: 1px solid var(--k-border); display: grid; grid-template-columns: 1fr 1fr; gap: .3rem .8rem; font-size: .85rem; color: var(--k-soft); }
.dpt-bandkey li { display: flex; align-items: center; gap: .4rem; }
.dpt-bandkey i { width: 14px; height: 14px; border-radius: 4px; flex: none; }
.dpt-bandkey .dpt-b-low i, .dpt-f-low { background: color-mix(in srgb, var(--k-primary) 35%, var(--k-border)); }
.dpt-bandkey .dpt-b-some i, .dpt-f-some { background: color-mix(in srgb, var(--k-primary) 58%, var(--k-border)); }
.dpt-bandkey .dpt-b-noticeable i, .dpt-f-noticeable { background: color-mix(in srgb, var(--k-primary) 80%, var(--k-border)); }
.dpt-bandkey .dpt-b-strong i, .dpt-f-strong { background: var(--k-primary); }

.dpt-band { display: inline-flex; align-items: center; gap: .35rem; padding: .1rem .6rem; border-radius: 999px; font-size: .8rem; font-weight: 700; border: 1.5px solid var(--k-border); color: var(--k-fg); background: var(--k-raised); white-space: nowrap; }
.dpt-band::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--k-primary) 35%, var(--k-border)); }
.dpt-band.dpt-b-some::before { background: color-mix(in srgb, var(--k-primary) 58%, var(--k-border)); }
.dpt-band.dpt-b-noticeable { border-color: color-mix(in srgb, var(--k-primary) 50%, var(--k-border)); }
.dpt-band.dpt-b-noticeable::before { background: color-mix(in srgb, var(--k-primary) 80%, var(--k-border)); }
.dpt-band.dpt-b-strong { border-color: var(--k-primary); }
.dpt-band.dpt-b-strong::before { background: var(--k-primary); }

.dpt-meter { height: 10px; border-radius: 999px; background: color-mix(in srgb, var(--k-border) 70%, var(--k-bg)); overflow: hidden; }
.dpt-meter-fill { display: block; height: 100%; border-radius: inherit; transition: width .5s ease; }

.dpt-res-disclaimer { padding: .7rem 1rem; border-left: 4px solid var(--k-primary); background: var(--k-raised); border-radius: 0 var(--k-rad) var(--k-rad) 0; font-size: .92rem; margin: 0 0 1.2rem; }
.dpt-h3 { font-size: 1.25rem; margin: 1.6rem 0 .7rem; }
.dpt-traits { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.dpt-trait { padding: 1rem 1.1rem; background: var(--k-raised); border: 1px solid var(--k-border); border-radius: var(--k-rad); min-width: 0; }
.dpt-trait.dpt-tb-strong { border-color: color-mix(in srgb, var(--k-primary) 60%, var(--k-border)); }
.dpt-trait-head { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem .6rem; margin-bottom: .45rem; }
.dpt-trait-name { font: 700 1.08rem/1.2 var(--k-f1); margin-right: auto; }
.dpt-trait-pct { font: 700 1.2rem/1 var(--k-f1); }
.dpt-trait-def { margin: .5rem 0 0; color: var(--k-soft); font-size: .9rem; }
.dpt-mixed { margin: .6rem 0 0; padding: .45rem .7rem; font-size: .88rem; border-radius: calc(var(--k-rad) / 2); border: 1px dashed var(--k-second); background: color-mix(in srgb, var(--k-second) 8%, var(--k-raised)); }
.dpt-sub { margin: .7rem 0 .2rem; font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; color: var(--k-soft); }
.dpt-driver-list { margin: 0; padding-left: 1.1rem; font-size: .9rem; }
.dpt-driver { margin: .15rem 0; }
.dpt-driver-none { margin: 0; font-size: .9rem; color: var(--k-soft); }
.dpt-tip { margin-top: .4rem; padding-top: .1rem; border-top: 1px solid var(--k-border); }
.dpt-tip-text { margin: 0; font-size: .95rem; }

.dpt-how { margin: 1.2rem 0; border: 1px solid var(--k-border); border-radius: var(--k-rad); background: var(--k-raised); }
.dpt-how summary { cursor: pointer; padding: .8rem 1.1rem; font-weight: 700; font-family: var(--k-f1); min-height: 44px; }
.dpt-how-body { padding: 0 1.1rem .8rem; font-size: .95rem; }
.dpt-formula { font: 600 1rem/1.4 var(--k-f1); padding: .6rem .9rem; border-radius: calc(var(--k-rad) / 2); background: var(--dpt-soft); overflow-wrap: anywhere; }

.dpt-compare { margin: 1.2rem 0; padding: 1.1rem 1.2rem; border: 1px solid var(--k-border); border-radius: var(--k-rad); background: var(--k-raised); }
.dpt-compare .dpt-h3 { margin-top: 0; }
.dpt-compare-intro { margin: 0 0 .8rem; font-size: .95rem; }
.dpt-code-row { margin-bottom: .7rem; }
.dpt-code-label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .25rem; }
.dpt-code-line { display: flex; gap: .5rem; flex-wrap: wrap; }
.dpt-code-line input {
    flex: 1 1 16rem; min-width: 0; min-height: 46px; padding: .5rem .7rem; border-radius: var(--k-rad); border: 1.5px solid var(--k-border);
    background: var(--k-bg); color: var(--k-fg); font: 500 .92rem/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .02em;
}
.dpt-code-line input:focus { border-color: var(--k-primary); }
.dpt-compare-msg { min-height: 1.4em; margin: .2rem 0 .4rem; font-size: .92rem; }
.dpt-compare-msg.dpt-error { font-weight: 700; padding-left: .6rem; border-left: 3px solid var(--k-second); }
.dpt-table-wrap { overflow-x: auto; border: 1px solid var(--k-border); border-radius: var(--k-rad); }
.dpt-cmp-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.dpt-cmp-table th, .dpt-cmp-table td { padding: .5rem .7rem; text-align: left; border-bottom: 1px solid var(--k-border); }
.dpt-cmp-table thead th { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--k-soft); }
.dpt-cmp-table td { font-variant-numeric: tabular-nums; }
.dpt-cmp-table tbody tr:last-child > * { border-bottom: 0; }
.dpt-th-this::before, .dpt-th-code::before { content: ""; display: inline-block; vertical-align: middle; width: 14px; margin-right: .35rem; border-top: 3px solid var(--k-primary); }
.dpt-th-code::before { border-top-style: dashed; border-top-color: var(--k-second); }
.dpt-td-diff { font-weight: 700; }
.dpt-gaps { margin: .7rem 0 .3rem; font-weight: 600; }

.dpt-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.2rem 0 .6rem; }
.dpt-copy-box { display: block; }
.dpt-copy-fallback { width: 100%; padding: .6rem; border-radius: var(--k-rad); border: 1.5px solid var(--k-border); background: var(--k-bg); color: var(--k-fg); font: .88rem/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.dpt-status { min-height: 1.4em; margin: .3rem 0 0; font-size: .92rem; color: var(--k-fg); }

/* ---------------------------------------------------------------- small screens */
@media (max-width: 760px) {
    .dpt-res-grid, .dpt-traits, .dpt-top-row { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .dpt-start-head { grid-template-columns: 72px 1fr; gap: .9rem; }
    .dpt-start-art { width: 72px; height: 72px; }
    .dpt-modes { grid-template-columns: minmax(0, 1fr); }
    .dpt-answers { grid-template-columns: minmax(0, 1fr); gap: .45rem; }
    .dpt-opt { flex-direction: row; min-height: 52px; padding: .55rem 1rem; text-align: left; justify-content: flex-start; }
    .dpt-opt-dot, .dpt-o1 .dpt-opt-dot, .dpt-o2 .dpt-opt-dot, .dpt-o3 .dpt-opt-dot, .dpt-o4 .dpt-opt-dot, .dpt-o5 .dpt-opt-dot { width: 22px; height: 22px; margin: 0; flex: none; }
    .dpt-opt-label { font-size: 1rem; }
    .dpt-q-card { min-height: 7.5rem; padding: 1.2rem 1rem 1.2rem 3.6rem; }
    .dpt-q-num { left: .9rem; top: 1.1rem; font-size: 1.3rem; }
    .dpt-nav .dpt-btn { flex: 1 1 0; min-width: 0; }
    .dpt-keyboard-hint { display: none; }
    .dpt-actions .dpt-btn { flex: 1 1 100%; }
    .dpt-overall-pct { font-size: 2.4rem; }
    .dpt-bandkey { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
    .dpt-container *, .dpt-container *::before, .dpt-container *::after { transition: none !important; animation: none !important; }
}

/* design: sites/<d>/design/site.css */
/* difficultpersontest.org — "Backstage dressing-room mirror"
   a dark plum dressing room lit by vanity bulbs and one follow-spot: velvet mirror-top header with a bulb row,
   a seven-sided vanity mirror on the first screen, glow spike-tape marks on headings, a running order,
   call-board notes, cue lines, cue sheets, mirror-station guides and a footlit stage apron footer. */

:root{
  --d-bulb:color-mix(in srgb,var(--k-second) 40%,#fff);
  --d-bulbs:radial-gradient(circle,var(--d-bulb) 0 2.4px,var(--k-second) 3.4px,color-mix(in srgb,var(--k-second) 28%,transparent) 5px,transparent 10px);
  --d-link:color-mix(in srgb,var(--k-primary) 60%,#fff);
  --d-glass:color-mix(in srgb,var(--k-raised) 82%,var(--k-primary));
}
body{background:var(--k-bg);background-image:
  radial-gradient(70% 520px at 50% -140px,color-mix(in srgb,var(--k-second) 9%,transparent),transparent 72%),
  radial-gradient(900px 600px at 50% 0,color-mix(in srgb,var(--k-primary) 7%,transparent),transparent 70%);
  background-repeat:no-repeat}
::selection{background:color-mix(in srgb,var(--k-primary) 45%,transparent);color:var(--k-fg)}

/* ---------- header: the velvet top of the vanity mirror ---------- */
.didgkd{position:relative;border-bottom:0;padding-bottom:22px;background:
  repeating-linear-gradient(90deg,transparent 0 22px,color-mix(in srgb,#000 22%,transparent) 30px,transparent 38px,color-mix(in srgb,var(--k-primary) 6%,transparent) 46px,transparent 54px),
  linear-gradient(color-mix(in srgb,var(--k-primary) 16%,var(--k-raised)),color-mix(in srgb,var(--k-primary) 8%,var(--k-bg)))}
.didgkd::after{content:'';position:absolute;left:0;right:0;bottom:0;height:22px;pointer-events:none;
  background:var(--d-bulbs) 0 50%/34px 22px repeat-x,linear-gradient(color-mix(in srgb,var(--k-border) 90%,#000),color-mix(in srgb,var(--k-border) 60%,var(--k-bg)));
  border-top:1px solid color-mix(in srgb,var(--k-second) 22%,transparent);box-shadow:0 10px 26px -10px color-mix(in srgb,var(--k-second) 30%,transparent)}
.din193{gap:.6rem 1.4rem;padding-top:.95rem;padding-bottom:.95rem}
.di8sfd{font-size:1.12rem;letter-spacing:-.005em}
.di8sfd svg{filter:drop-shadow(0 0 10px color-mix(in srgb,var(--k-primary) 45%,transparent))}
.didu8s{gap:.4rem 1.5rem;margin-left:auto}
.didu8s>a{position:relative;padding:.3rem 0;color:color-mix(in srgb,var(--k-fg) 86%,var(--k-soft));transition:color .15s}
.didu8s>a:hover{color:var(--k-fg);text-decoration:underline;text-decoration-color:var(--k-second);text-underline-offset:6px}
.didu8s>a[aria-current]{color:var(--k-fg)}
.didu8s>a[aria-current]::after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:2px;border-radius:2px;background:var(--k-second);box-shadow:0 0 10px var(--k-second)}
/* languages: little lamp plates on the mirror frame */
.dijsw3{gap:.3rem;font-family:var(--k-text-font)}
.dijsw3 a{min-width:2.05rem;text-align:center;padding:.22rem .3rem;border-radius:999px;border:1px solid color-mix(in srgb,var(--k-soft) 40%,transparent);color:var(--k-soft);font-size:.72rem;letter-spacing:.08em;transition:color .15s,border-color .15s,background .15s}
.dijsw3 a:hover{color:var(--k-fg);border-color:var(--k-second)}
.dijsw3 a[aria-current]{background:var(--k-second);border-color:var(--k-second);color:var(--k-bg);box-shadow:0 0 12px color-mix(in srgb,var(--k-second) 55%,transparent)}

/* ---------- page frame ---------- */
.di3929{padding-top:1.9rem}
.dij38a{font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--k-soft)}
.dij38a a{color:var(--k-fg);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--k-second) 50%,transparent)}
.dij38a a:hover{border-bottom-color:var(--k-second)}
.di3929>h1{font-size:clamp(2.2rem,5.4vw,3.3rem);margin:.15em 0 .45em;padding-bottom:.6rem;background:
  linear-gradient(90deg,var(--k-primary),var(--k-second) 40%,transparent) 0 100%/min(18rem,70%) 2px no-repeat}
.di3929>p a,.diwwgc a:not(.diaxzc):not(.diidfe):not(.dii51z),.dic64b a,.dig79d a,.ditvjm a:not(.dim97m):not(.diaxzc),.di73m1 a{color:var(--d-link);text-decoration-color:color-mix(in srgb,var(--d-link) 50%,transparent);text-decoration-thickness:1px;text-underline-offset:3px}
.di3929>p a:hover,.diwwgc a:not(.diaxzc):not(.diidfe):not(.dii51z):hover,.dic64b a:hover,.dig79d a:hover,.ditvjm a:not(.dim97m):not(.diaxzc):hover{text-decoration-color:var(--k-second);text-decoration-thickness:2px}
strong{color:var(--k-fg)}

/* ---------- first screen: the seven-sided vanity mirror ---------- */
.dii1w0{position:relative;margin:.4rem 0 1.8rem;padding:2.8rem clamp(1.4rem,30vw,330px) 2.8rem 2.2rem;min-height:310px;border-radius:var(--k-rad);
  background:
    linear-gradient(118deg,transparent 38%,color-mix(in srgb,#fff 5%,transparent) 46%,transparent 54%),
    radial-gradient(120% 140% at 0 0,var(--d-glass),var(--k-raised) 60%);
  border:1px solid var(--k-border);box-shadow:inset 0 0 0 6px color-mix(in srgb,var(--k-border) 70%,var(--k-bg)),0 24px 50px -36px color-mix(in srgb,var(--k-second) 60%,transparent)}
.dii1w0::before{content:'';position:absolute;left:22px;right:22px;top:-11px;height:22px;pointer-events:none;background:var(--d-bulbs) 50% 50%/40px 22px repeat-x}
.dii1w0::after{content:'';position:absolute;right:clamp(.8rem,3vw,2.2rem);top:50%;width:min(290px,27vw);aspect-ratio:1;transform:translateY(-50%);pointer-events:none;
  background:url(/assets/img/d-mirror.svg) center/contain no-repeat;filter:drop-shadow(0 0 30px color-mix(in srgb,var(--k-second) 18%,transparent))}
.dii1w0 h1{font-size:clamp(2rem,4.4vw,3rem);line-height:1.13;margin-top:.1em}
.dii1w0 .di6qzp{color:color-mix(in srgb,var(--k-fg) 78%,var(--k-soft));max-width:38em}

/* the tool sits on the dressing table: outer spacing only */
.did7hq{margin:2rem 0 2.4rem}

/* ---------- section headings: a T of glow spike tape on the floor ---------- */
.diwwgc>h2,.ditvjm .diwwgc>h2{position:relative;padding-top:1.15rem}
.diwwgc>h2::before{content:'';position:absolute;left:0;top:0;width:1.7rem;height:.8rem;pointer-events:none;
  background:linear-gradient(var(--k-second),var(--k-second)) 0 0/100% 4px no-repeat,linear-gradient(var(--k-primary),var(--k-primary)) 50% 0/4px 100% no-repeat;
  filter:drop-shadow(0 0 5px color-mix(in srgb,var(--k-second) 55%,transparent))}
.diwwgc h3{font-size:1.18rem}
.diwwgc ul>li::marker{color:var(--k-second)}
.diwwgc ul>li{padding-left:.15rem;margin:.35em 0}

/* ---------- contents: the running order ---------- */
.dig79d:not(.dig79d--post){position:relative;margin:2rem 0 1.8rem;padding:1.15rem 1.4rem 1rem;background:color-mix(in srgb,var(--k-raised) 80%,var(--k-bg));border:1px solid var(--k-border);border-radius:var(--k-rad)}
.dig79d>strong{display:inline-block;font:700 .74rem/1.4 var(--k-text-font);letter-spacing:.16em;text-transform:uppercase;color:var(--k-second);padding-bottom:.35rem;border-bottom:1px dashed color-mix(in srgb,var(--k-second) 45%,transparent);margin-bottom:.3rem}
.dig79d li{margin:.32rem 0}
.dig79d li::marker{color:var(--k-second);font-weight:700;font-variant-numeric:tabular-nums}
.dig79d a{text-decoration:none}
.dig79d a:hover{text-decoration:underline}

/* ---------- call-board notes, cue lines ---------- */
.dic64b{position:relative;margin:1.8em 0;padding:1.15em 1.25em .95em;background:color-mix(in srgb,var(--k-raised) 94%,var(--k-second));border:1px solid color-mix(in srgb,var(--k-second) 18%,var(--k-border));border-left:1px solid color-mix(in srgb,var(--k-second) 18%,var(--k-border));border-radius:4px var(--k-rad) var(--k-rad) var(--k-rad);color:var(--k-fg)}
.dic64b::before{content:'';position:absolute;left:18px;top:-9px;width:62px;height:16px;transform:rotate(-4deg);pointer-events:none;background:color-mix(in srgb,var(--k-primary) 70%,transparent);border-radius:2px;
  box-shadow:0 2px 6px color-mix(in srgb,#000 40%,transparent)}
.dic64b p:last-child{margin-bottom:0}
.di6420{position:relative;margin:1.5em 0;padding:.95em 1.15em .95em 2.6em;background:color-mix(in srgb,var(--k-bg) 70%,var(--k-raised));border:1px solid var(--k-border);border-radius:var(--k-rad);color:var(--k-fg);line-height:1.7}
.di6420::before{content:'';position:absolute;left:1em;top:1.25em;width:.7em;height:.7em;border-radius:50%;background:var(--k-second);box-shadow:0 0 0 3px color-mix(in srgb,var(--k-second) 22%,transparent),0 0 14px var(--k-second)}

/* ---------- tables: the cue sheet ---------- */
.divgsp{border:1px solid var(--k-border);border-top:3px solid var(--k-second);border-radius:4px 4px var(--k-rad) var(--k-rad);background:color-mix(in srgb,var(--k-raised) 90%,var(--k-bg))}
.dihx3n caption{caption-side:top;text-align:left;padding:.75em .9em .5em;font-size:.86rem;color:var(--k-soft)}
.dihx3n thead th{background:color-mix(in srgb,var(--k-primary) 14%,var(--k-raised));color:var(--k-second);font-family:var(--k-text-font);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;border-bottom:1px solid color-mix(in srgb,var(--k-second) 35%,var(--k-border))}
.dihx3n th,.dihx3n td{border-left:0;border-right:0;padding:.62em .9em}
.dihx3n tbody td:first-child{font-weight:600}
.dihx3n tbody tr{transition:background .15s}
.dihx3n tbody tr:hover{background:color-mix(in srgb,var(--k-primary) 9%,transparent)}
.dihx3n tbody tr:last-child td{border-bottom:0}

/* ---------- figures in a thin mirror frame ---------- */
.di73m1 img{background:var(--k-raised);border:1px solid var(--k-border);box-shadow:inset 0 0 0 4px var(--k-bg)}
.di73m1 figcaption{margin-top:.5rem;font-size:.86rem}

/* ---------- guides: mirror stations with a bulb strip ---------- */
.dimdw5{gap:1.4rem}
.dii51z{position:relative;overflow:visible;background:color-mix(in srgb,var(--k-raised) 92%,var(--k-primary));border:1px solid var(--k-border);border-radius:var(--k-rad);transition:border-color .2s,box-shadow .2s}
.dii51z::before{content:'';position:absolute;left:18px;width:180px;top:-8px;height:16px;pointer-events:none;background:var(--d-bulbs) 0 50%/30px 16px repeat-x;opacity:.55;transition:opacity .2s}
.dii51z:hover{border-color:color-mix(in srgb,var(--k-second) 55%,var(--k-border));box-shadow:0 14px 34px -22px color-mix(in srgb,var(--k-second) 60%,transparent)}
.dii51z:hover::before{opacity:1}
.dii51z .dickyt{border-radius:var(--k-rad) 0 0 var(--k-rad)}
.dii51z b{font-size:1.16rem;line-height:1.3}
.dii51z:hover b{color:var(--d-link)}
.diawkz{color:var(--k-second);font-weight:600;letter-spacing:.1em;text-transform:uppercase;font-size:.72rem}

/* ---------- FAQ: a heptagon lamp lights up when an answer opens ---------- */
.dirwyc details{position:relative;margin:.65rem 0;padding:.25rem 1.15rem;background:color-mix(in srgb,var(--k-raised) 85%,var(--k-bg));border:1px solid var(--k-border);border-radius:var(--k-rad);transition:border-color .2s}
.dirwyc details[open]{border-color:color-mix(in srgb,var(--k-second) 45%,var(--k-border))}
.dirwyc summary{list-style:none;position:relative;padding:.75rem 0 .75rem 2rem;font-size:1.02rem}
.dirwyc summary::-webkit-details-marker{display:none}
.dirwyc summary::before{content:'';position:absolute;left:0;top:50%;width:1.05rem;height:1.05rem;margin-top:-.53rem;
  clip-path:polygon(50% 0,89.1% 18.8%,98.7% 61.1%,71.7% 95%,28.3% 95%,1.3% 61.1%,10.9% 18.8%);background:color-mix(in srgb,var(--k-soft) 45%,var(--k-raised));transition:background .2s}
.dirwyc details[open]>summary::before{background:var(--k-second)}
.dirwyc summary:hover::before{background:var(--k-primary)}
.dirwyc details>p{margin:0 0 .9rem 2rem;color:color-mix(in srgb,var(--k-fg) 86%,var(--k-soft))}

/* ---------- call to action: the stage door ---------- */
.dibutb{position:relative;margin:2.8rem 0;padding:2rem 1.4rem;background:radial-gradient(80% 140% at 50% 0,color-mix(in srgb,var(--k-second) 10%,var(--k-raised)),var(--k-raised));border:1px solid var(--k-border);border-radius:var(--k-rad)}
.dibutb::before{content:'';position:absolute;left:50%;top:-8px;width:220px;margin-left:-110px;height:16px;pointer-events:none;background:var(--d-bulbs) 0 50%/31px 16px repeat-x}
.diaxzc{transition:box-shadow .2s,background .2s}
.diaxzc:hover{box-shadow:0 0 0 3px color-mix(in srgb,var(--k-primary) 30%,transparent),0 8px 24px -8px var(--k-primary)}

/* ---------- article: cover framed as a lit mirror ---------- */
.dii3un--overlay{border:1px solid var(--k-border);box-shadow:inset 0 0 0 1px var(--k-border),0 26px 50px -38px color-mix(in srgb,var(--k-second) 70%,transparent);overflow:hidden}
.dii3un--overlay::before{content:'';position:absolute;z-index:1;left:20px;right:20px;top:6px;height:16px;pointer-events:none;background:var(--d-bulbs) 50% 50%/36px 16px repeat-x}
.di7k18{background:linear-gradient(transparent,color-mix(in srgb,var(--k-bg) 92%,transparent) 62%)}
.dim97m{color:var(--k-second)!important;letter-spacing:.18em}
.dikr2v{color:color-mix(in srgb,var(--k-fg) 80%,var(--k-soft))}
.ditvjm .dig79d--post{background:color-mix(in srgb,var(--k-raised) 80%,var(--k-bg));border:1px solid var(--k-border);border-left:3px solid var(--k-second);border-radius:4px var(--k-rad) var(--k-rad) 4px}
.ditvjm h3{color:var(--d-link)}
.ditvjm .di6qzp{font-size:1.18rem;line-height:1.7}
.ditvjm .di6qzp::first-letter{color:var(--k-primary);text-shadow:0 0 18px color-mix(in srgb,var(--k-primary) 55%,transparent)}
.ditvjm>.diwwgc>p{max-width:44em}
.ditvjm em{color:color-mix(in srgb,var(--k-fg) 88%,var(--k-second))}
.ditvjm blockquote{border-left:3px solid var(--k-second);background:color-mix(in srgb,var(--k-raised) 70%,transparent);border-radius:0 var(--k-rad) var(--k-rad) 0;padding:.8em 1.2em}

/* ---------- footer: the stage apron with footlights ---------- */
.dii0pz{position:relative;margin-top:4rem;padding:2.8rem 0 2.6rem;border-top:0;color:var(--k-soft);background:
  repeating-linear-gradient(0deg,transparent 0 23px,color-mix(in srgb,#000 26%,transparent) 23px 24px),
  linear-gradient(color-mix(in srgb,var(--k-second) 7%,var(--k-raised)),color-mix(in srgb,var(--k-raised) 60%,var(--k-bg)) 70%)}
.dii0pz::before{content:'';position:absolute;left:0;right:0;top:0;height:20px;pointer-events:none;
  background:radial-gradient(18px 11px at 50% 0,var(--d-bulb) 0 30%,color-mix(in srgb,var(--k-second) 40%,transparent) 55%,transparent 100%) 0 0/70px 20px repeat-x,
  linear-gradient(color-mix(in srgb,var(--k-border) 80%,#000),transparent) 0 0/100% 4px no-repeat}
.di5vi8>p{font-family:var(--k-f1);color:var(--k-fg);font-size:.98rem}
.dii0pz nav{gap:.5rem 1.4rem}
.dii0pz a{color:var(--k-soft);text-decoration-color:color-mix(in srgb,var(--k-soft) 45%,transparent)}
.dii0pz a:hover{color:var(--k-fg);text-decoration-color:var(--k-second)}

/* ---------- small screens ---------- */
@media (max-width:760px){
  .dii1w0{padding:3.1rem 1.2rem 1.6rem;min-height:0}
  .dii1w0::after{width:88px;top:1.2rem;right:.9rem;transform:none}
  .dii1w0 h1{padding-right:84px}
  .din193{justify-content:space-between;row-gap:.45rem}
  .didu8s{margin-left:0}
  .dijsw3{width:100%;justify-content:flex-start;flex-wrap:wrap}
  .dii51z::before{width:120px}
  .dii51z .dickyt{border-radius:var(--k-rad) var(--k-rad) 0 0}
  .dirwyc details{padding:.15rem .9rem}
  .dirwyc details>p{margin-left:0}
  .dii3un--overlay::before{display:none}
}
@media (prefers-reduced-motion:reduce){
  .didu8s>a,.dijsw3 a,.dii51z,.dii51z::before,.dirwyc details,.dirwyc summary::before,.diaxzc,.dihx3n tbody tr{transition:none}
}