.dm-ctl { display: inline-flex; gap: 8px; }
.dm-play, .dm-btn { font: inherit; font-size: 15px; min-height: 44px; padding: 0 20px; border-radius: 999px; cursor: pointer; border: 1px solid var(--rk-ink); }
.dm-play { background: var(--rk-ink); color: #fff; font-weight: 550; min-width: 96px; }
.dm-play:hover { background: #24303f; }
.dm-btn { background: transparent; color: var(--rk-ink); border-color: rgba(11, 19, 34, .22); }
.dm-btn:hover:not(:disabled) { border-color: var(--rk-ink); }
.dm-btn:disabled { opacity: .4; cursor: default; }
.pp-bar { justify-content: flex-start; }
.pp-bar .pp-seg { margin-left: 4px; }
.pp-bar .pp-tag { margin-left: auto; }
.dm-pane-b { padding: 4px 28px 26px; }


.dm-docs { padding: 6px 28px 26px; display: grid; gap: 12px; }
.dm-doc { background: #fff; border-radius: 12px; padding: 16px 18px 18px; border: 1px solid transparent; transition: opacity .4s, border-color .4s; }
.dm-doc h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 15.5px; font-weight: 550; margin: 0 0 6px; letter-spacing: 0; }
.dm-doc h3 small { font-size: 13px; font-weight: 400; color: var(--rk-grey); }
.dm-doc h3 em { margin-left: auto; font-style: normal; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: #ececea; color: var(--rk-grey); }
.dm-doc h3 em.ok { background: var(--auto-bg); color: var(--auto); }
.dm-doc p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--rk-ink); }
.dm-doc.is-out { opacity: .45; }
.dm-doc.is-out h3 > span:first-child { text-decoration: line-through; text-decoration-thickness: 1.5px; }
.dm-doc.is-win { border-color: var(--acc); box-shadow: 0 0 0 3px rgba(52, 80, 122, .12); }
.dm-read { padding: 6px 28px 26px; }
.dm-step { display: flex; justify-content: space-between; font-size: 13px; color: var(--rk-grey); margin-bottom: 8px; }
.dm-clue { margin: 0 0 18px; font-size: 18px; line-height: 1.45; color: var(--rk-ink); min-height: 3.2em; }
.dm-opts li { grid-template-columns: minmax(0, 12rem) minmax(0, 1fr) 2.8rem; font-size: 14px; }
.dm-opts li.gone { opacity: .35; }
.dm-result { margin-top: 20px; padding: 16px 18px; background: #fff; border-radius: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.dm-result b { font-size: 18px; font-weight: 550; letter-spacing: -.01em; }
.dm-result p { flex-basis: 100%; margin: 4px 0 0; font-size: 15px; line-height: 1.5; color: var(--rk-grey); }
.dm-result.is-person { box-shadow: inset 3px 0 0 var(--person); }


.dm-list { list-style: none; margin: 0; padding: 4px 28px 22px; display: grid; gap: 10px; }
.dm-scroll { max-height: 640px; overflow: auto; }
.dm-empty { color: var(--rk-grey); font-size: 15.5px; padding: 18px 0; }
.dm-act { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; background: #fff; border-radius: 12px; padding: 16px 18px; animation: dm-in .45s ease both; }
@keyframes dm-in { from { opacity: 0; transform: translateY(8px); } }
.dm-act-t { grid-column: 1 / 2; display: flex; gap: 12px; }
.dm-act-t p { margin: 0; font-size: 16px; line-height: 1.45; color: var(--rk-ink); }
.dm-n { flex: none; width: 24px; height: 24px; border-radius: 50%; background: #ececea; font-size: 12.5px; display: inline-grid; place-items: center; color: var(--rk-grey); }
.dm-why { grid-column: 1 / 2; margin: 0 0 0 36px; font-size: 14px; line-height: 1.45; color: var(--rk-grey); }
.dm-3 { grid-column: 1 / 2; margin: 8px 0 0 36px; display: grid; gap: 6px; }
.dm-seg3 { display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: rgba(11, 19, 34, .08); gap: 2px; }
.dm-seg3 i { display: block; height: 100%; }
.dm-seg3 .k0 { background: #5f9a7e; } .dm-seg3 .k1 { background: #d4a02c; } .dm-seg3 .k2 { background: #c4553d; }
.dm-3t { display: flex; flex-wrap: wrap; gap: 2px 18px; font-size: 12.5px; color: var(--rk-grey); }
.dm-3t .win { color: var(--rk-ink); font-weight: 600; }
.dm-chip { grid-column: 2 / 3; grid-row: 1 / 2; align-self: start; font-size: 12.5px; font-weight: 600; padding: 3px 11px; border-radius: 999px; white-space: nowrap; }
.dm-chip.is-allow { background: var(--auto-bg); color: var(--auto); }
.dm-chip.is-ask { background: var(--person-bg); color: var(--person); }
.dm-chip.is-block { background: #f6e1db; color: var(--slip); }
.dm-act.is-block { box-shadow: inset 3px 0 0 var(--slip); }
.dm-act.is-ask { box-shadow: inset 3px 0 0 #c9a45a; }

.dm-msg { background: #fff; border-radius: 12px; padding: 13px 16px; display: grid; gap: 3px; animation: dm-in .4s ease both; }
.dm-msg-t { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 14px; font-size: 15px; }
.dm-msg-t span { font-size: 12.5px; color: var(--rk-grey); }
.dm-snip { margin: 0; font-size: 14px; line-height: 1.45; color: var(--rk-grey); }
.dm-msg-r { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 4px; }
.dm-lab { font-size: 14px; font-weight: 600; }
.dm-wrong { font-size: 13px; font-weight: 550; color: var(--slip); }
.dm-msg.is-person { box-shadow: inset 3px 0 0 #c9a45a; }
.dm-msg.is-slip { box-shadow: inset 3px 0 0 var(--slip); }


.dm-ask { margin: 0; padding: 4px 28px 8px; font-size: 18px; line-height: 1.45; color: var(--rk-ink); }
.dm-cols { padding: 8px 28px 26px; display: grid; gap: 14px; }
.dm-col { background: #fff; border-radius: 12px; padding: 14px 18px 16px; animation: dm-in .45s ease both; }
.dm-col h3 { font-size: 13.5px; font-weight: 500; margin: 0 0 8px; color: var(--rk-grey); letter-spacing: 0; }
.dm-fl { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.dm-fl li { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) 2.8rem; align-items: center; gap: 12px; font-size: 14px; color: var(--rk-grey); }
.dm-fl li.pick { color: var(--rk-ink); font-weight: 550; }
.dm-fl li.unsure .pp-track i { background: #c9a45a; }
.dm-log { list-style: none; margin: 0; padding: 4px 28px 26px; display: grid; gap: 8px; }
.dm-log li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: 15px; background: #fff; border-radius: 12px; padding: 12px 16px; animation: dm-in .4s ease both; }
.dm-log li > span:first-child { color: var(--rk-grey); font-size: 13px; min-width: 4.2em; }
.dm-log li b { font-weight: 550; flex: 1 1 8rem; }
.dm-log li.dm-empty { background: none; padding: 12px 0; }
.dm-log .dm-result { display: block; }
.dm-log .dm-result p { margin: 6px 0 0; }


.dm-inv { list-style: none; margin: 0; padding: 4px 28px 26px; display: grid; gap: 8px; }
.dm-inv li { display: grid; grid-template-columns: 5.2rem minmax(0, 1fr) auto; gap: 10px; align-items: baseline; font-size: 14.5px; background: #fff; border-radius: 10px; padding: 10px 14px; }
.dm-inv li span:nth-child(2) { color: var(--rk-grey); }
.dm-led { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; background: #fff; border-radius: 12px; padding: 14px 18px; animation: dm-in .45s ease both; }
.dm-led-l { grid-column: 1 / 2; display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 14px; }
.dm-led-l b { font-weight: 600; letter-spacing: .01em; }
.dm-led-m { grid-column: 1 / 2; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 16px; }
.dm-led-m b { font-weight: 550; }
.dm-arrow { color: var(--rk-grey); }
.dm-alt { font-size: 13px; color: #8a6514; }
.dm-led .dm-why { grid-column: 1 / 2; margin: 0; }
.dm-led .pp-route { grid-column: 2 / 3; grid-row: 1 / 3; align-self: start; }
.dm-led.is-person { box-shadow: inset 3px 0 0 #c9a45a; }
.dm-stats-wrap { padding: 0 28px 28px; }
.dm-stats-wrap .cut-stats { margin-top: 18px; }


.dm-index { width: var(--w); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 14px; padding-bottom: 8px; }
.dm-card { display: flex; flex-direction: column; gap: 8px; background: var(--pane); border-radius: 14px; padding: 24px 26px 26px; text-decoration: none; color: var(--rk-ink); transition: background .2s; }
.dm-card:hover { background: #e8e8e5; }
.dm-card small { font-size: 12.5px; font-weight: 600; letter-spacing: .02em; color: var(--rk-grey); }
.dm-card h2 { font-size: 22px; font-weight: 500; letter-spacing: -.02em; margin: 0; line-height: 1.2; }
.dm-card p { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--rk-grey); }
.dm-card span { margin-top: auto; padding-top: 10px; font-size: 14.5px; font-weight: 550; }

@media (max-width: 760px) {
    .dm-act { grid-template-columns: minmax(0, 1fr); }
  .dm-chip { grid-column: 1; grid-row: auto; justify-self: start; margin-left: 36px; }
  .dm-led { grid-template-columns: minmax(0, 1fr); }
  .dm-led .pp-route { grid-column: 1; grid-row: auto; justify-self: start; }
  .dm-opts li, .dm-fl li { grid-template-columns: minmax(0, 8rem) minmax(0, 1fr) 2.6rem; }
}
@media (prefers-reduced-motion: reduce) { .dm-act, .dm-msg, .dm-col, .dm-led, .dm-log li { animation: none; } }

.dm-ask { margin: 0 0 14px; font-size: 16px; line-height: 1.45; color: var(--rk-ink); }
.dm-pane-b .dm-ask { font-weight: 550; padding: 0; }
.dm-pol { margin: 0; padding-left: 1.2em; display: grid; gap: 10px; font-size: 15.5px; line-height: 1.5; color: var(--rk-ink); }
@media (min-width: 901px) { .dm-grid-12 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }

.dm-fl li.pick .pp-track i { background: var(--acc); }
.dm-fl li.unsure .pp-track i { background: #c9a45a; }


.pp-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }