/* Base for the five directions: theme through custom properties (--d-bg --d-fg --d-accent --d-card --d-line --d-radius --d-font --d-head), nothing visual beyond a11y + the preview flow. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
body{margin:0;background:var(--d-bg,#111);color:var(--d-fg,#fff);font-family:var(--d-font,system-ui,sans-serif);line-height:1.5;overflow-x:hidden}
img,video,canvas,svg{max-width:100%;display:block}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;background:#fff;color:#000;padding:10px 14px;border-radius:8px;z-index:3000;font-weight:700}.skip:focus{top:calc(var(--rv-h,0px) + 8px)}
:focus-visible{outline:3px solid var(--d-focus,var(--d-accent,#ffb347));outline-offset:3px}
a{color:inherit}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}.reveal.in{opacity:1;transform:none}
.no-js .reveal{opacity:1;transform:none}
.dbtn{appearance:none;border:0;cursor:pointer;font:inherit;font-weight:700;padding:.85em 1.4em;border-radius:var(--d-radius,999px);background:var(--d-accent,#ffb347);color:var(--d-on-accent,#111);min-height:48px;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:.5em;transition:transform .15s,filter .15s}
.dbtn:hover{filter:brightness(1.08);transform:translateY(-1px)}.dbtn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.dbtn.ghost{background:transparent;color:var(--d-fg,#fff);box-shadow:inset 0 0 0 2px currentColor}
/* preview flow */
.dflow-form{display:grid;gap:.5rem}.dflow-label{font-weight:700}
.dflow-row{display:flex;gap:.6rem;flex-wrap:wrap}
.dflow-row input{flex:1 1 240px;min-height:52px;padding:0 1rem;font:inherit;font-size:1.05rem;border-radius:var(--d-radius-in,12px);border:2px solid var(--d-line,rgba(255,255,255,.35));background:var(--d-input,rgba(255,255,255,.08));color:var(--d-fg,#fff)}
.dflow-row input::placeholder{color:inherit;opacity:.6}
.dflow-row input[aria-invalid=true]{border-color:#ff6b6b}
.dflow-say{min-height:1.5em;margin:.6rem 0 0;font-size:.95rem}.dflow-say.err{color:var(--d-err,#ff8c8c);font-weight:600}
.dflow-cands{display:grid;gap:.5rem;margin-top:.5rem}
.dflow-cand{text-align:left;font:inherit;padding:.7rem 1rem;border-radius:12px;border:2px solid var(--d-line,rgba(255,255,255,.3));background:var(--d-card,rgba(255,255,255,.06));color:inherit;cursor:pointer;display:grid}
.dflow-cand small{opacity:.75}.dflow-cand:hover:not(:disabled){border-color:var(--d-accent)}.dflow-cand:disabled{opacity:.5}
.dflow-pin{margin-top:.6rem;display:grid;gap:.6rem}.dflow-pinimg{width:100%;max-height:320px;object-fit:cover;border-radius:12px;border:2px solid var(--d-line,rgba(255,255,255,.3))}
.dflow-btns{display:flex;gap:.6rem;flex-wrap:wrap}
.dflow-prog{margin-top:.8rem}.dflow-track{height:10px;border-radius:99px;background:rgba(255,255,255,.18);overflow:hidden}.dflow-track i{display:block;height:100%;width:0;background:var(--d-accent);transition:width .6s}
.dflow-stage{margin:.5rem 0 0;font-size:.95rem;opacity:.9}
.dflow-ex{margin:.8rem 0 0;font-size:.9rem;opacity:.9;display:flex;gap:.4rem;flex-wrap:wrap;align-items:center}
.dflow-chip{font:inherit;font-size:.88rem;padding:.35rem .8rem;border-radius:99px;border:1px solid var(--d-line,rgba(255,255,255,.4));background:transparent;color:inherit;cursor:pointer;min-height:36px}.dflow-chip:hover{background:var(--d-card,rgba(255,255,255,.12))}
.dlang{display:flex;gap:.8rem;flex-wrap:wrap;font-size:.85rem;opacity:.85}.dlang a{padding:.3rem 0}
@media (max-width:560px){.dbtn{width:100%}.dflow-row .dbtn{width:100%}}
[hidden]{display:none!important}