.d-strip{display:flex;justify-content:space-between;align-items:center;gap:14px;background:var(--ink);color:#fff;padding:10px 14px 7px;font-family:var(--slab);font-weight:600;font-size:14px;letter-spacing:.07em;text-transform:uppercase;line-height:1.1}
.d-strip-note{color:var(--yellow);text-align:right;min-width:0}
.d-wiring{height:10px;background:linear-gradient(90deg,var(--yellow) 0 25%,var(--blue) 25% 50%,var(--green) 50% 75%,var(--violet) 75%);border-bottom:var(--rule) solid var(--ink)}

.d-card{background:var(--paper);border:3px solid var(--ink);box-shadow:10px 10px 0 rgba(20,23,26,.16)}
.d-card-body{display:grid;grid-template-columns:240px minmax(0,1fr) minmax(0,1.2fr);grid-template-areas:"poster id versions" "poster keys versions"}
.d-card-poster{grid-area:poster;border:0;border-right:var(--rule) solid var(--ink);display:flex;flex-direction:column;min-width:0}
.d-card-poster .slot-fill{flex:1 0 auto}
.d-card-id{grid-area:id;padding:16px 22px 4px;min-width:0}
.d-card-id .facts-list{max-width:none}
.d-card-keys{grid-area:keys;align-self:start;padding:14px 22px 18px;min-width:0}
.d-card-versions{grid-area:versions;border-left:1px solid var(--hair);padding:16px 22px 18px;min-width:0}
.d-plates{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:var(--rule) solid var(--ink)}
.d-plates li{position:relative;padding:14px 12px 9px;min-width:0}
.d-plates li + li{border-left:1px solid var(--hair)}
.d-plates li::before{content:"";position:absolute;left:12px;top:-2px;width:34px;height:7px;background:var(--tone)}
.d-plate-name{display:block;font-family:var(--slab);font-weight:700;font-size:13.5px;letter-spacing:.06em;text-transform:uppercase;line-height:1.2;color:var(--grey);hyphens:manual;overflow-wrap:anywhere}
.d-plate-value{display:block;margin-top:4px;font-family:var(--slab);font-weight:800;font-size:22px;line-height:1.05}
.d-plate-value.unknown{font-family:var(--sans);font-weight:400;font-size:16px;line-height:1.3}
.d-chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px}
.d-chips .chip{min-height:36px;font-size:16px;padding:8px 11px 6px}

.d-versions-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 16px;margin-bottom:10px}
.d-axis,.d-vrow{display:grid;grid-template-columns:128px minmax(0,1fr) 104px;column-gap:14px;align-items:center}
.d-axis-marks{grid-column:2;position:relative;height:40px;margin-inline:12px}
.d-axis-marks li{position:absolute;left:var(--at);transform:translateX(-50%);font-family:var(--slab);font-weight:700;font-size:14.5px;line-height:1;white-space:nowrap;font-variant-numeric:tabular-nums}
.d-axis-marks li::after{content:"";position:absolute;left:50%;top:15px;width:2px;margin-left:-1px;background:var(--ink)}
.d-axis-marks .is-up{top:2px}
.d-axis-marks .is-up::after{height:23px}
.d-axis-marks .is-down{top:20px}
.d-axis-marks .is-down::after{height:5px}
.d-vrows{border-top:var(--rule) solid var(--ink)}
.d-vrow{padding:9px 0 8px;border-bottom:1px solid var(--hair)}
.d-vrow:last-child{border-bottom:var(--rule) solid var(--ink)}
.d-vname{font-family:var(--slab);font-size:18px;line-height:1.2;min-width:0}
.d-bar{position:relative;display:block;height:16px;margin-inline:12px;box-shadow:0 0 0 2px var(--ink);background:linear-gradient(var(--tone),var(--tone)) left/var(--fill,0%) 100% no-repeat,#fff}
.d-bar::before{content:"";position:absolute;inset:0;opacity:.4;background:linear-gradient(var(--ink),var(--ink)) 8.43% 0/1.5px 100% no-repeat,linear-gradient(var(--ink),var(--ink)) 30.36% 0/1.5px 100% no-repeat,linear-gradient(var(--ink),var(--ink)) 58.93% 0/1.5px 100% no-repeat,linear-gradient(var(--ink),var(--ink)) 80.36% 0/1.5px 100% no-repeat,linear-gradient(var(--ink),var(--ink)) 94.36% 0/1.5px 100% no-repeat}
.d-bar.is-known::after{content:"";position:absolute;left:var(--fill);top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;background:var(--paper);border:var(--rule) solid var(--ink)}
.d-bar.is-unknown{background:repeating-linear-gradient(135deg,var(--hair) 0 1.5px,transparent 1.5px 7px),#fff}
.d-vvalue{font-family:var(--slab);font-weight:700;font-size:20px;line-height:1.1;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.d-vvalue.unknown{font-family:var(--sans);font-weight:400;font-size:15.5px}
.d-versions-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;margin-top:14px}

.d-demo-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 32px;align-items:start}
.d-state{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.d-demo,.d-scene,.d-quiz{background:var(--paper);border:3px solid var(--ink)}
.d-demo-stage{display:grid;min-height:330px}
.d-demo-stage > *{grid-area:1/1;min-width:0}
.d-demo-stage .slot-fill{aspect-ratio:auto;height:100%}
.d-veil{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:12px;padding:22px 24px;background:rgba(242,243,240,.94)}
.d-veil[hidden],.d-live[hidden]{display:none}
.d-veil .d-veil-title{max-width:none;display:flex;align-items:center;gap:12px;font-family:var(--slab);font-weight:800;font-size:27px;line-height:1.05}
.d-veil-title img{width:44px;height:44px;flex:none}
.d-veil-title span{padding-top:4px}
.d-veil p{font-size:16px;line-height:1.45;max-width:44ch}
.d-demo.is-live .d-nojs{display:none}
.d-check{display:inline-flex;align-items:center;gap:10px;min-height:44px;cursor:pointer;font-weight:700;font-size:16.5px;line-height:1.3}
.d-check input,.d-opt input{position:absolute;opacity:0;width:1px;height:1px}
.d-check-box{position:relative;width:24px;height:24px;flex:none;border:var(--rule) solid var(--ink);background:#fff}
.d-check-box::after{content:"";position:absolute;inset:3px;background:var(--ink);opacity:0;transition:opacity var(--t-snap) linear}
.d-check input:checked + .d-check-box{background:var(--tone)}
.d-check input:checked + .d-check-box::after{opacity:1}
.d-check input:focus-visible + .d-check-box,.d-opt input:focus-visible + .d-opt-box{outline:3px solid var(--ink);outline-offset:2px;box-shadow:0 0 0 2px #fff,0 0 0 9px var(--yellow)}
.page-game .btn[disabled],.page-game .btn[disabled]:hover{background:var(--shade);color:var(--grey);border-color:var(--grey);cursor:not-allowed;transform:none;box-shadow:none}
.page-game .btn[disabled]::after,.page-game .btn[disabled]:hover::after{width:16px;opacity:.6}
.d-live{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:22px;text-align:center;background:var(--ink);color:#fff}
.d-live .plate{color:var(--ink)}
.d-demo-foot{border-top:var(--rule) solid var(--ink);padding:9px 14px 8px}

.d-scene-body{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.d-scene-stage{border:0;border-right:var(--rule) solid var(--ink);display:flex;flex-direction:column;min-width:0}
.d-scene-stage .slot-fill{flex:1 0 auto}
.d-scene-side{display:flex;flex-direction:column;gap:16px;padding:20px 22px 18px;min-width:0}
.d-scene-steps{display:grid;gap:16px;flex:1;align-content:start}
.d-scene-steps li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:6px 12px;align-items:start}
.d-scene-steps li[hidden]{display:none}
.d-scene-steps h3{font-family:var(--slab);font-weight:700;font-size:25px;line-height:1.05;padding-top:6px}
.d-scene-steps p{grid-column:2;font-size:16.5px;line-height:1.5}
.d-scene-nav{display:none;flex-wrap:wrap;align-items:center;gap:8px;border-top:2px dashed var(--ink);padding-top:14px}
.d-scene.is-live .d-scene-nav,.d-quiz.is-live .d-quiz-foot{display:flex}
.d-scene-go{display:flex;gap:8px;margin-left:auto}
.d-step{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;border:var(--rule) solid var(--ink);background:var(--paper);font-family:var(--slab);font-weight:800;font-size:19px;line-height:1;padding:3px 6px 0;cursor:pointer;transition:background-color var(--t-snap) linear}
.d-step:hover{background:var(--tint)}
.d-step[aria-pressed="true"]{background:var(--tone);color:var(--on-tone)}

.d-quiz-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.d-q{padding:20px 22px 20px;min-width:0}
.d-q + .d-q{border-left:1px solid var(--hair)}
.d-q fieldset{border:0;margin:0;padding:0;min-width:0}
.d-q legend{padding:0;margin-bottom:14px;width:100%}
.d-q-ask{display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;align-items:start;font-family:var(--slab);font-weight:700;font-size:23px;line-height:1.1}
.d-q-ask > span:last-child{padding-top:6px}
.d-opts{display:grid;gap:8px}
.d-opt{display:flex;align-items:center;gap:12px;min-height:48px;border:var(--rule) solid var(--ink);background:#fff;padding:8px 12px 6px;cursor:pointer;font-weight:700;line-height:1.25;transition:background-color var(--t-snap) linear}
.d-opt:hover{background:var(--tint)}
.d-opt-box{width:18px;height:18px;flex:none;border-radius:50%;border:var(--rule) solid var(--ink);background:var(--paper)}
.d-opt input:checked + .d-opt-box{background:var(--ink)}
.d-opt-mark{margin-left:auto;font-family:var(--slab);font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase;line-height:1;padding-top:2px;white-space:nowrap}
.d-opt.is-key,.d-opt.is-key:hover{background:var(--tint)}
.d-opt.is-key .d-opt-box{background:var(--tone)}
.d-opt.is-miss,.d-opt.is-miss:hover{background:repeating-linear-gradient(135deg,var(--shade) 0 2px,#fff 2px 8px)}
.d-q.is-answered .d-opt{cursor:default}
.d-q-key{margin-top:14px;font-size:16px;line-height:1.5}
.d-quiz.is-live .d-q:not(.is-answered) .d-q-key{display:none}
.d-quiz-foot{display:none;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 20px;border-top:2px dashed var(--ink);padding:8px 22px}

.d-sym{display:flex;align-items:center;gap:14px}
.d-sym-shot{display:block;width:56px;flex:none;border:var(--rule) solid var(--ink);--ratio:1/1}
.d-sym-name{font-family:var(--slab);font-weight:700;font-size:21px;line-height:1.1;padding-top:3px}
.d-table .ref{white-space:nowrap}
.d-offers td:last-child{text-align:right;padding-right:0}

.d-similar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}

@media (max-width:1280px){
  .d-card-body{grid-template-columns:220px minmax(0,1fr) minmax(0,1fr);grid-template-areas:"poster id keys" "poster versions versions"}
  .d-card-keys{align-self:start;padding:18px 22px 12px 4px}
  .d-card-versions{border-left:0;border-top:1px solid var(--hair)}
}
@media (max-width:1020px){
  .d-demo-pair{grid-template-columns:minmax(0,1fr)}
  .d-scene-body{grid-template-columns:minmax(0,1fr)}
  .d-scene-stage{border-right:0;border-bottom:var(--rule) solid var(--ink)}
  .d-quiz-list{grid-template-columns:minmax(0,1fr)}
  .d-q + .d-q{border-left:0;border-top:1px solid var(--hair)}
  .d-similar{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .d-card-body{grid-template-columns:180px minmax(0,1fr);grid-template-areas:"poster id" "poster keys" "versions versions"}
  .d-card-keys{padding:6px 22px 16px}
  .d-card-versions{border-top:var(--rule) solid var(--ink)}
}
@media (max-width:760px){
  .d-card{box-shadow:5px 5px 0 rgba(20,23,26,.16)}
  .d-strip{font-size:13px;padding:8px 12px 5px}
  .d-card .d-strip-note{display:none}
  .d-card-body{grid-template-columns:118px minmax(0,1fr);grid-template-areas:"poster id" "keys keys" "versions versions"}
  .d-card-poster figcaption{padding:6px 8px 4px;font-size:13px}
  .d-card-poster figcaption strong{font-size:14px}
  .d-card-poster figcaption span{display:none}
  .d-card-id{padding:8px 12px 8px}
  .d-card-id .facts-list div{display:block;padding:3px 0}
  .d-card-id .facts-list div::before{display:none}
  .d-card-id .facts-list dt{display:block;font-size:13.5px;line-height:1.2}
  .d-card-id .facts-list dd{text-align:left;font-size:17px}
  .d-card-keys{padding:14px 12px 14px;border-top:var(--rule) solid var(--ink)}
  .d-plates li{padding:12px 8px 8px}
  .d-plates li::before{left:8px}
  .d-plate-name{font-size:12.5px;letter-spacing:.03em}
  .d-plate-value.unknown{font-size:15px}
  .d-card-versions{padding:14px 12px 16px}
  .d-axis,.d-vrow{grid-template-columns:minmax(0,1fr) auto}
  .d-axis-marks{grid-column:1/-1;margin-inline:26px 22px}
  .d-bar{grid-column:1/-1;order:3;margin:8px 22px 2px 26px}
  .d-versions-foot .btn{width:100%}
  .d-veil{padding:18px 16px}
  .d-veil .d-veil-title{font-size:23px}
  .d-veil .btn{width:100%}
  .d-scene-side{padding:16px 14px 14px}
  .d-scene-steps h3{font-size:22px}
  .d-scene-go{margin-left:0;width:100%}
  .d-scene-go .btn{flex:1}
  .d-q{padding:16px 14px 16px}
  .d-q-ask{font-size:21px}
  .d-quiz-foot{padding:8px 14px}
  .d-table,.d-table tbody{display:block;width:100%}
  .d-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .d-table tr{display:grid;grid-template-columns:repeat(var(--cols,2),minmax(0,1fr));gap:8px 12px;padding:14px 0 12px;border-bottom:1px solid var(--hair)}
  .d-table tr:last-child{border-bottom:0}
  .d-table tbody th,.d-table td{display:block;border-bottom:0;padding:0;min-width:0}
  .d-table tbody th,.d-table .d-full{grid-column:1/-1}
  .d-table td[data-label]::before{content:attr(data-label);display:block;color:var(--grey);font-family:var(--sans);font-weight:400;font-size:14px;line-height:1.3}
  .d-offers td:last-child{text-align:left}
  .d-similar{gap:10px}
  .d-similar .slot-note,.d-similar .teaser-line{display:none}
  .d-similar .teaser-text{padding:9px 9px 9px}
  .d-similar .teaser-title{font-size:19px;overflow-wrap:anywhere}
}
@media (pointer:coarse),(max-width:760px){
  .d-vname .ref,.d-table .ref,.d-card-id .ref{position:relative}
  .d-vname .ref::after,.d-table .ref::after,.d-card-id .ref::after{content:"";position:absolute;left:0;right:0;top:-10px;bottom:-10px}
  .d-chips .chip{min-height:44px}
}
.page-game .marks{align-content:start}