.dtf[data-dtf-theme="adipart1"] {
  --dtf-surface: #fff;
  --dtf-border: #e2e8f0;
  --dtf-border-hover: #c2d3e4;
  --dtf-text: #0f2444;
  --dtf-text-muted: #93a2b5;
  --dtf-back-from: #14315b;
  --dtf-back-to: #0b1b33;
  --dtf-back-glow: rgb(22 163 106 / .45);
  --dtf-on-back: #e5edf5;
  --dtf-back-label: #6fd6a8;
  --dtf-accent: #16a36a;
  --dtf-on-accent: #fff;
  --dtf-primary: #14315b;
  --dtf-on-primary: #fff;
  --dtf-locked-from: rgb(244 247 251 / .6);
  --dtf-locked-to: rgb(244 247 251 / .95);
  --dtf-font-display: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --dtf-font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
}

.dtf[data-dtf-theme="dtt"] {
  --dtf-surface: #fff;
  --dtf-border: #d1d5db;
  --dtf-border-hover: #9cc3ec;
  --dtf-text: #1e293b;
  --dtf-text-muted: #64748b;
  --dtf-back-from: #c43d00;
  --dtf-back-to: #963000;
  --dtf-back-glow: rgb(255 255 255 / .08);
  --dtf-on-back: #fff;
  --dtf-back-label: #ffe3d3;
  --dtf-accent: #ff4f00;
  --dtf-on-accent: #fff;
  --dtf-primary: #c43d00;
  --dtf-on-primary: #fff;
  --dtf-locked-from: rgb(240 245 250 / .6);
  --dtf-locked-to: rgb(240 245 250 / .95);
  --dtf-font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  --dtf-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

.dtf[data-dtf-theme="passfast"] {
  --dtf-surface: #fff;
  --dtf-border: #dcdcdc;
  --dtf-border-hover: #fdc400;
  --dtf-text: #383838;
  --dtf-text-muted: #767394;
  --dtf-back-from: #4d4d4d;
  --dtf-back-to: #2b2c27;
  --dtf-back-glow: rgb(253 196 0 / .30);
  --dtf-on-back: #f5f5f5;
  --dtf-back-label: #fdc400;
  --dtf-accent: #fdc400;
  --dtf-on-accent: #2b2c27;
  --dtf-primary: #fdc400;
  --dtf-on-primary: #2b2c27;
  --dtf-locked-from: rgb(245 245 245 / .6);
  --dtf-locked-to: rgb(245 245 245 / .95);
  --dtf-font-display: "Montserrat", ui-sans-serif, system-ui, sans-serif;
  --dtf-font-body: var(--dtf-font-display);
}

.dtf {
  --dtf-card-h: 240px;
  min-width: 0;
  border-top: 0;
  color: var(--dtf-text);
  font-family: var(--dtf-font-body);
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: normal;
  text-align: left;
}

:root .dtf[data-dtf-set] { margin-block-end: 48px; }
.dtf.dtf-titled-first { padding-top: 24px; }
.dtf.dtf-titled-later { border-top: 1px solid var(--dtf-border); padding-top: 32px; }

.dtf *, .dtf *::before, .dtf *::after { box-sizing: border-box; }
.dtf-layout { width: 100%; container-type: inline-size; }
.dtf [hidden] { display: none !important; }
.dtf > h2.dtf-title { margin: 0 0 12px; padding: 0; border: 0; background: none; color: var(--dtf-text); font: 700 18px/1.3 var(--dtf-font-display); letter-spacing: normal; text-transform: none; text-align: center; }
.dtf-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; margin: 0 0 20px; color: var(--dtf-text-muted); }
.dtf-hint { display: inline-flex; align-items: center; }
.dtf-bar svg { width: 16px; height: 16px; margin-right: 6px; color: var(--dtf-accent); }
.dtf-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }

@container (min-width: 560px) {
  .dtf-grid { --dtf-card-h: 260px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (min-width: 880px) { .dtf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (min-width: 1024px) { .dtf-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  @container (max-width: 879px) {
    .dtf-grid { --dtf-card-h: 260px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
}

.dtf-card { display: block; width: 100%; height: var(--dtf-card-h); padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: center; cursor: pointer; perspective: 1200px; -webkit-tap-highlight-color: transparent; }
.dtf .dtf-card:focus:not(:focus-visible) { outline: none; box-shadow: none; }
.dtf-card:focus-visible { outline: 3px solid var(--dtf-accent); outline-offset: 3px; border-radius: 18px; }
.dtf-inner { position: relative; display: grid; height: 100%; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.dtf-card.is-flipped .dtf-inner { transform: rotateY(180deg); }
.dtf-face { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 0; min-height: 0; padding: 24px 20px 20px; border-radius: 18px; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
.dtf-face.is-scroll { overflow-y: auto; }
.dtf-front { position: relative; justify-content: center; padding-bottom: 40px; border: 1px solid var(--dtf-border); background: var(--dtf-surface); color: var(--dtf-text); box-shadow: 0 1px 2px rgb(15 36 68 / .06), 0 1px 3px rgb(15 36 68 / .07); transition: box-shadow .2s, transform .2s, border-color .2s; }
.dtf-card:hover .dtf-front { transform: translateY(-2px); border-color: var(--dtf-border-hover); box-shadow: 0 6px 14px rgb(15 36 68 / .07), 0 12px 28px rgb(15 36 68 / .07); }
.dtf-q { flex: 0 1 auto; min-height: 0; max-width: 100%; overflow: hidden; font-family: var(--dtf-font-display); font-size: 16px; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.dtf-q.is-scroll { overflow-y: auto; overscroll-behavior: contain; }
.dtf-front.is-picture { padding: 24px 20px 40px; }
.dtf-picture, .dtf-glyph { display: block; flex: none; aspect-ratio: 1; object-fit: contain; object-position: center; background: var(--dtf-surface); }
.dtf-picture { width: min(160px, 100%); height: auto; max-height: 100%; }
.dtf-glyph { width: 100%; height: auto; flex: 1 1 0; min-height: 72px; max-height: 160px; aspect-ratio: auto; }
.dtf-front .dtf-glyph ~ .dtf-q { font-size: 14px; }
.dtf-tap { position: absolute; right: 0; bottom: 12px; left: 0; display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--dtf-text-muted); font-family: var(--dtf-font-display); font-size: 11px; font-weight: 700; line-height: 1; letter-spacing: .08em; text-transform: uppercase; }
.dtf-tap svg { width: 13px; height: 13px; }
.dtf-back { position: relative; justify-content: flex-start; padding-top: 24px; transform: rotateY(180deg); color: var(--dtf-on-back); background: radial-gradient(420px 220px at 80% -10%, var(--dtf-back-glow), transparent 60%), linear-gradient(150deg, var(--dtf-back-from), var(--dtf-back-to)); }
.dtf-answer { display: flex; flex: 1; flex-direction: column; align-items: center; gap: 10px; width: 100%; min-height: 0; }
.dtf-label { color: var(--dtf-back-label); font-family: var(--dtf-font-display); font-size: 11px; font-weight: 700; line-height: 1; letter-spacing: .08em; text-transform: uppercase; }
.dtf-a { font-family: var(--dtf-font-body); font-size: 15px; font-weight: 400; line-height: 1.45; overflow-wrap: anywhere; }
.dtf-apic { display: block; flex: none; width: min(120px, 100%); height: auto; aspect-ratio: 1; object-fit: contain; object-position: center; padding: 8px; border-radius: 12px; background: var(--dtf-surface); }
.dtf-back.has-bar { padding-bottom: 64px; }
.dtf-bar-actions { position: absolute; inset: auto 0 0; display: flex; height: 48px; border-top: 1px solid rgb(255 255 255 / .16); }
.dtf .dtf-bar-actions .dtf-act { flex: 1 1 0; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 0; color: var(--dtf-back-label); font-family: var(--dtf-font-display); font-size: 13px; font-weight: 600; white-space: nowrap; text-decoration: none; background: none; border: 0; border-radius: 0; box-shadow: none; cursor: pointer; }
.dtf .dtf-bar-actions .dtf-act:is(:hover, :focus, :active, :visited) { color: var(--dtf-back-label); text-decoration: none; box-shadow: none; }
.dtf-bar-actions .dtf-act + .dtf-act { border-left: 1px solid rgb(255 255 255 / .16); }
.dtf-bar-actions .dtf-act:hover { background: rgb(255 255 255 / .07); }
.dtf .dtf-bar-actions .dtf-act:focus:not(:focus-visible) { outline: none; box-shadow: none; }
.dtf-bar-actions .dtf-act:focus-visible { outline: 2px solid var(--dtf-back-label); outline-offset: -4px; border-radius: 10px; }
.dtf-bar-actions svg { width: 16px; height: 16px; flex: none; }

.dtf-dialog-wrap { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; padding: 16px; background: rgb(15 23 42 / .55); }
.dtf-dialog-wrap.open { display: flex; animation: dtf-fade .2s ease; }
.dtf-dialog-wrap.closing { display: flex; animation: dtf-fade-out .2s ease forwards; }
.dtf-dialog { display: flex; flex-direction: column; width: min(560px, 100%); max-height: min(80vh, 640px); overflow: hidden; border-radius: 18px; background: var(--dtf-surface); color: var(--dtf-text); box-shadow: 0 20px 50px rgb(15 23 42 / .3); }
.dtf-dialog header { display: flex; align-items: center; gap: 10px; flex: none; padding: 16px 20px 12px; border-bottom: 1px solid var(--dtf-border); }
.dtf-dialog header .dtf-label { color: var(--dtf-text-muted); }
.dtf-dialog header svg { width: 18px; height: 18px; color: var(--dtf-accent); }
.dtf-dcontent { flex: 1 1 auto; min-height: 0; overflow: auto; padding-bottom: 16px; overscroll-behavior: contain; }
.dtf-dialog .dtf-dpic { display: block; width: calc(100% - 40px); height: auto; max-height: 240px; object-fit: contain; margin: 16px 20px 0; padding: 8px; background: var(--dtf-surface); border: 1px solid var(--dtf-border); border-radius: 12px; }
.dtf-dq { padding: 16px 20px 0; font-family: var(--dtf-font-display); font-size: 17px; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere; }
.dtf-da { margin: 12px 20px 0; padding: 10px 14px; border-left: 3px solid var(--dtf-accent); border-radius: 0 12px 12px 0; background: rgb(0 0 0 / .03); font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; }
.dtf-da b { display: block; margin-bottom: 2px; color: var(--dtf-text-muted); font-family: var(--dtf-font-display); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.dtf-dialog .dtf-da .dtf-apic { width: 72px; height: 72px; margin: 4px 0; padding: 4px; border: 1px solid var(--dtf-border); }
.dtf-dbody { padding: 14px 20px 0; font-size: 15px; line-height: 1.6; }
.dtf-dbody p { max-width: 62ch; margin: 0 0 12px; overflow-wrap: anywhere; }
.dtf-dbody p:last-child { margin-bottom: 0; }
.dtf-dialog footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: none; padding: 14px 20px 18px; border-top: 1px solid var(--dtf-border); }
.dtf .dtf-dialog footer a.dtf-learn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--dtf-text); font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; box-shadow: none; }
.dtf .dtf-dialog footer a.dtf-learn:is(:hover, :focus, :active, :visited) { color: var(--dtf-text); text-decoration: underline; box-shadow: none; }
.dtf-dialog footer .dtf-learn svg { width: 15px; height: 15px; }
.dtf-dialog footer .dtf-btn { margin-left: auto; }
.dtf .dtf-dialog .dtf-btn { min-height: 44px; padding: 10px 16px; border: 1px solid var(--dtf-border); border-radius: 12px; background: var(--dtf-surface); color: var(--dtf-text); font: 600 14px/1.4 var(--dtf-font-display); text-decoration: none; box-shadow: none; cursor: pointer; }
.dtf .dtf-dialog .dtf-btn:is(:hover, :focus, :active) { border-color: var(--dtf-border); border-radius: 12px; background: var(--dtf-surface); color: var(--dtf-text); text-decoration: none; box-shadow: none; }
.dtf-dialog .dtf-btn:focus-visible, .dtf-dialog footer .dtf-learn:focus-visible { outline: 2px solid var(--dtf-accent); outline-offset: 2px; }
.dtf-locked { position:relative; overflow:hidden; border-radius:18px; border:1px solid var(--dtf-border); }
.dtf-ghosts { position:absolute; inset:0; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:24px; filter:blur(5px); opacity:.55; }
.dtf-ghosts div { border-radius:18px; border:1px solid var(--dtf-border); background:var(--dtf-surface); min-height:150px; }
.dtf-ghosts div::before { content:""; display:block; margin:48px auto 0; width:60%; height:12px; border-radius:6px; background:var(--dtf-border); box-shadow:0 22px 0 var(--dtf-border); }
.dtf-lockpanel { position:relative; min-height:300px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:32px; background:linear-gradient(var(--dtf-locked-from), var(--dtf-locked-to)); }
.dtf-lockicon { display:grid; place-items:center; width:52px; height:52px; border-radius:12px; background:var(--dtf-back-from); color:var(--dtf-back-label); margin-bottom:12px; }
.dtf-lockicon svg { width:26px; height:26px; }
.dtf .dtf-lockpanel h3 { margin:0 0 8px; color:var(--dtf-text); font-family:var(--dtf-font-display); font-size:20px; font-weight:700; line-height:1.3; text-transform:none; }
.dtf-lockpanel p { margin:0 0 16px; max-width:48ch; font-size:15px; }
.dtf-actions { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.dtf .dtf-btn { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 20px; border-radius:12px; font:inherit; font-weight:600; font-size:15px; text-decoration:none; border:1px solid transparent; box-shadow:none; cursor:pointer; }
.dtf a.dtf-btn:is(:hover, :focus, :active, :visited) { border-radius:12px; box-shadow:none; }
.dtf.dtf a.dtf-btn, .dtf.dtf a.dtf-btn:is(:hover, :focus, :active, :visited), .dtf.dtf a.dtf-act, .dtf.dtf a.dtf-act:is(:hover, :focus, :active, :visited) { text-decoration:none; }
.dtf .dtf-btn-primary, .dtf a.dtf-btn-primary:is(:hover, :focus, :active, :visited) { background:var(--dtf-accent); color:var(--dtf-on-accent); }
.dtf .dtf-btn-secondary, .dtf a.dtf-btn-secondary:is(:hover, :focus, :active, :visited) { background:var(--dtf-surface); color:var(--dtf-text); border-color:var(--dtf-border); }
.dtf-pages { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:24px 0 0; }
.dtf-pages .dtf-btn { min-width:44px; padding:0 14px; transition:background-color .15s ease, border-color .15s ease, color .15s ease; }
.dtf .dtf-pages .dtf-btn[aria-current="page"], .dtf .dtf-pages a.dtf-btn[aria-current="page"]:is(:hover, :focus, :active, :visited) { background:var(--dtf-primary); border-color:var(--dtf-primary); color:var(--dtf-on-primary); font-weight:700; cursor:default; }
.dtf .dtf-pages a.dtf-btn:not([aria-current="page"]):hover { background:var(--dtf-primary); border-color:var(--dtf-primary); color:var(--dtf-on-primary); }
.dtf-pages .dtf-btn:focus-visible { outline:2px solid var(--dtf-accent); outline-offset:2px; }
.dtf-lockpanel .dtf-btn:focus-visible { outline:2px solid var(--dtf-accent); outline-offset:2px; }
@media (max-width: 559px) {
  .dtf-dialog-wrap { align-items: flex-end; padding: 0; }
  .dtf-dialog { width: 100%; max-height: 85vh; border-radius: 18px 18px 0 0; animation: dtf-up .25s ease; }
  .dtf-dialog-wrap.closing { animation-duration: .25s; }
  .dtf-dialog-wrap.closing .dtf-dialog { animation: dtf-down .25s ease forwards; }
}
@keyframes dtf-up { from { transform: translateY(40px); } to { transform: none; } }
@keyframes dtf-down { from { transform: none; } to { transform: translateY(40px); } }
@keyframes dtf-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes dtf-fade-out { from { opacity: 1; } to { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .dtf-inner, .dtf-front { transition: none; }
  .dtf-dialog-wrap.open, .dtf-dialog, .dtf-dialog-wrap.closing, .dtf-dialog-wrap.closing .dtf-dialog { animation: none; }
}