/* 천희관 입력 화면 (2026-10-28) — 금성여자와 같은 흐름, 다른 얼굴.
   금성: 어두운 남색, 밑줄 입력, 큰 제목 + 쌓이는 줄.  천희관: 분홍 물 위에 뜬 흰 카드 한 장, 둥근 칸, 소희 얼굴과 말, 꽃잎 진행.
   색은 첫 화면과 같은 셋(먹 #46202d · 장미 #bf4a6f · 흰 판)에 버튼만 H-1 장미 그라데이션. */
.stage.asking .card, .stage.asking .taphint { display: none; }
.ask { --kb: 0px; position: absolute; inset: 0; z-index: 5; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
       padding: calc(env(safe-area-inset-top) + 20px) 18px calc(env(safe-area-inset-bottom) + 32px + var(--kb)); cursor: default;
       scrollbar-width: none; }
.ask::-webkit-scrollbar { display: none; }
.ask-in { max-width: 380px; margin: 0 auto; display: flex; flex-direction: column; align-items: center;
          transition: opacity .3s ease, filter .3s ease, translate .3s ease; animation: askIn .7s cubic-bezier(.2,.7,.2,1) backwards; }  /* backwards: 끝나면 filter 가 none 으로 돌아가야 안쪽 유리(backdrop-filter)가 뒤 물결을 본다 */
.ask-in.out { opacity: 0; filter: blur(5px); translate: 0 10px; }
@keyframes askIn { from { opacity: 0; filter: blur(6px); translate: 0 14px; } }

.ask-head { margin: 34px 0 18px; text-align: center; }
.ask-q { font: 700 21px/1.5 "Gowun Batang", serif; color: var(--ink); text-shadow: 0 1px 12px rgba(255,255,255,.8); word-break: keep-all; }

/* 카드 — 흰 판 한 장(불투명). 다 적은 칸은 위에 접혀 쌓이고, 지금 칸만 펼쳐진다 */
.ask-card { width: 100%; background: #fff; border-radius: 22px; padding: 4px 18px;
            box-shadow: 0 0 0 1px rgba(191,74,111,.07), 0 22px 44px -22px rgba(150,50,85,.42), 0 2px 6px -2px rgba(150,50,85,.08); }
.row { border-bottom: 1px solid rgba(70,32,45,.07); }
.row:last-child { border-bottom: 0; }
.row:empty { display: none; }
.row.done { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 2px; cursor: pointer;
            -webkit-tap-highlight-color: transparent; animation: fold .32s ease both; }
@keyframes fold { from { opacity: 0; } }
.row.done:focus-visible { outline: 2px solid rgba(191,74,111,.5); outline-offset: 2px; border-radius: 8px; }
.dl { font: 500 13px "Noto Sans KR", sans-serif; color: var(--sub); flex: none; }
.dv { font: 700 16px "Gowun Batang", serif; color: var(--ink); display: flex; align-items: center; gap: 10px; min-width: 0; text-align: right; word-break: keep-all; }
.dv::after { content: ""; flex: none; width: 6px; height: 6px; border-right: 1.5px solid rgba(191,74,111,.55); border-top: 1.5px solid rgba(191,74,111,.55); rotate: 45deg; }
.row.now { padding: 22px 2px 22px; }
.row.now.grow { animation: grow .42s cubic-bezier(.2,.7,.2,1) both; }
@keyframes grow { from { opacity: 0; translate: 0 8px; } }
.rq { font: 700 19px/1.45 "Gowun Batang", serif; color: var(--ink); text-align: center; word-break: keep-all; }
.rs { margin-top: 5px; font: 400 13.5px/1.5 "Noto Sans KR", sans-serif; color: var(--sub); text-align: center; }
.rb { margin-top: 16px; }

/* 글자 칸 — 둥근 연분홍 칸, 들어가면 장미 테가 번진다 (금성의 밑줄과 다르게) */
.fld input { width: 100%; height: 58px; border-radius: 15px; border: 1.5px solid rgba(191,74,111,.16); background: #fff7f9;
             text-align: center; font: 700 20px "Gowun Batang", serif; color: var(--ink); outline: none; -webkit-appearance: none; appearance: none;
             transition: border-color .2s ease, box-shadow .25s ease, background .2s ease; }
.fld input::placeholder { color: rgba(70,32,45,.25); font-weight: 400; }
.fld input:focus { border-color: rgba(196,80,122,.6); background: #fff; box-shadow: 0 0 0 5px rgba(232,145,173,.18); }

/* 다음 — 2장 「좋아」와 같은 H-1 장미 가로 그라데이션. 못 누를 때는 옅은 분홍 */
.nx { display: block; width: 100%; height: 54px; margin-top: 12px; border: 0; border-radius: 3px; cursor: pointer;
      background: linear-gradient(90deg, #c2477a 0%, #db6a8c 55%, #ee8f9a 100%); color: #fff;
      font: 700 17px "Gowun Batang", serif; letter-spacing: .12em; padding-left: .12em; text-shadow: 0 1px 2px rgba(100,20,50,.3);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 12px 22px -12px rgba(200,70,110,.7);
      transition: opacity .25s ease, filter .25s ease, transform .12s ease; -webkit-tap-highlight-color: transparent; }
.nx:disabled { opacity: .38; filter: saturate(.6); box-shadow: none; cursor: default; }
.nx:not(:disabled):active { transform: translateY(1px) scale(.99); }
.nx:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* 생일 — 양력·음력은 미끄러지는 알약, 숫자는 년·월·일 세 칸 */
.cal { position: relative; display: flex; width: 168px; margin: 0 auto 14px; padding: 3px; border-radius: 999px; background: #fbeef2; }
.cal .knob { position: absolute; top: 3px; left: 3px; width: calc(50% - 3px); height: calc(100% - 6px); border-radius: 999px; background: #fff;
             box-shadow: 0 2px 8px -2px rgba(191,74,111,.35); transition: translate .28s cubic-bezier(.2,.8,.2,1); }
.cal.lun .knob { translate: 100% 0; }
.cal button { position: relative; flex: 1; height: 34px; border: 0; background: none; cursor: pointer;
              font: 500 14.5px "Noto Sans KR", sans-serif; color: rgba(70,32,45,.45); transition: color .2s ease; }
.cal button.on { color: #b0405f; font-weight: 700; }
.dfld { position: relative; }
.dh { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; font-size: 16px; border: 0; caret-color: transparent; z-index: 1; }
.dbox { display: flex; align-items: baseline; justify-content: center; gap: 4px; height: 62px; padding-top: 14px; border-radius: 15px;
        border: 1.5px solid rgba(191,74,111,.16); background: #fff7f9; transition: border-color .2s ease, box-shadow .25s ease, background .2s ease; }
.dfld:focus-within .dbox { border-color: rgba(196,80,122,.6); background: #fff; box-shadow: 0 0 0 5px rgba(232,145,173,.18); }
.dbox.full { border-color: rgba(196,80,122,.6); }
.dbox.bad { border-color: #d0566f; box-shadow: 0 0 0 5px rgba(208,86,111,.12); }
.seg { position: relative; font: 700 24px "Gowun Batang", serif; letter-spacing: .06em; font-variant-numeric: tabular-nums; padding-bottom: 4px; }
.seg b { color: var(--ink); font-weight: 700; }
.seg i { color: rgba(70,32,45,.16); font-style: normal; }
.seg.now::after { content: ""; position: absolute; left: 0; right: .06em; bottom: 0; height: 2px; border-radius: 2px; background: #db6a8c; }
.dbox em { font: 500 13px "Noto Sans KR", sans-serif; font-style: normal; color: var(--sub); margin: 0 6px 0 2px; }
.dex { margin-top: 8px; font: 400 12.5px "Noto Sans KR", sans-serif; color: rgba(70,32,45,.45); text-align: center; }
.dk { display: block; margin: 16px auto 0; padding: 6px 4px; border: 0; background: none; cursor: pointer;
      font: 500 14px "Noto Sans KR", sans-serif; color: #b0405f; border-bottom: 1px solid rgba(191,74,111,.35); }
.dks { margin-top: 6px; font: 400 12.5px/1.6 "Noto Sans KR", sans-serif; color: rgba(70,32,45,.5); text-align: center; word-break: keep-all; }
.hint { display: none; margin-top: 10px; font: 500 13.5px/1.55 "Noto Sans KR", sans-serif; color: #c0394f; text-align: center; word-break: keep-all; }
.hint.on { display: block; animation: grow .3s ease both; }

/* 태어난 때 — 칸은 한 줄, 목록은 아래에서 올라오는 흰 시트 */
.pk { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 58px; border-radius: 15px; cursor: pointer;
      border: 1.5px dashed rgba(191,74,111,.3); background: #fff7f9; font: 700 17px "Gowun Batang", serif; color: rgba(70,32,45,.45); }
.pk.has { border-style: solid; color: var(--ink); }
.pk i { width: 7px; height: 7px; border-right: 1.6px solid #c4507a; border-bottom: 1.6px solid #c4507a; rotate: 45deg; translate: 0 -2px; }
.sh-dim { position: absolute; inset: 0; z-index: 6; background: rgba(70,32,45,.26); opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.sh-dim.on { opacity: 1; pointer-events: auto; }
.sh { position: absolute; left: 0; right: 0; bottom: 0; z-index: 7; max-height: 86%; overflow-y: auto; background: #fff; border-radius: 26px 26px 0 0;
      padding: 10px 18px calc(env(safe-area-inset-bottom) + 18px); box-shadow: 0 -14px 40px -14px rgba(120,40,70,.35);
      transform: translateY(104%); transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.sh.up { transform: none; }
.sh-bar { width: 38px; height: 4px; border-radius: 4px; background: rgba(70,32,45,.14); margin: 0 auto 14px; }
.sh-q { text-align: center; margin-bottom: 16px; }
.sh-q b { display: block; font: 700 18px "Gowun Batang", serif; color: var(--ink); }
.sh-q span { display: block; margin-top: 4px; font: 400 13px "Noto Sans KR", sans-serif; color: var(--sub); }
.hrs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hr { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: 58px; border-radius: 14px; cursor: pointer;
      border: 1px solid rgba(191,74,111,.14); background: #fff7f9; transition: background .2s ease, border-color .2s ease, transform .12s ease;
      -webkit-tap-highlight-color: transparent; }
.hr:active { transform: scale(.97); }
.hn { font: 700 16px "Gowun Batang", serif; color: var(--ink); }
.ht { font: 400 11.5px "Noto Sans KR", sans-serif; color: var(--sub); font-variant-numeric: tabular-nums; }
.hr.wide { grid-column: 1 / -1; flex-direction: row; gap: 10px; height: 52px; }
.hr.sel { background: linear-gradient(90deg, #c2477a, #ee8f9a); border-color: transparent; }
.hr.sel .hn, .hr.sel .ht { color: #fff; }

/* 사이 — 카드 안에 두 줄 타일 */
.rels { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rl { height: 58px; border-radius: 15px; cursor: pointer; border: 1.5px solid rgba(191,74,111,.14); background: #fff7f9;
      font: 700 16.5px "Gowun Batang", serif; color: var(--ink); transition: background .22s ease, color .22s ease, border-color .22s ease, transform .12s ease;
      -webkit-tap-highlight-color: transparent; }
.rl:active { transform: scale(.97); }
.rl.sel { background: linear-gradient(90deg, #c2477a, #ee8f9a); border-color: transparent; color: #fff; }

.ask-safe { margin-top: 16px; font: 400 12px "Noto Sans KR", sans-serif; color: rgba(70,32,45,.42); text-align: center; }

/* 다 적은 뒤 */
.ask-head.fin { margin-top: 28vh; }
.fin-s { margin-top: 10px; font: 400 14.5px "Gowun Batang", serif; color: var(--sub); }
.dots i { display: inline-block; width: 4px; height: 4px; margin-left: 4px; border-radius: 50%; background: #db6a8c; vertical-align: middle;
          animation: dot 1.2s ease-in-out infinite; }
.dots i:nth-child(2) { animation-delay: .2s; } .dots i:nth-child(3) { animation-delay: .4s; }
@keyframes dot { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.fin-note { margin-top: 40px; font: 500 12.5px "Noto Sans KR", sans-serif; color: rgba(70,32,45,.4); }

@media (max-height: 620px) {
  .ask-head { margin: 18px 0 14px; } .ask-q { font-size: 19px; }
  .row.now { padding: 16px 2px; } .rb { margin-top: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .ask-in, .row.now.grow, .row.done, .hint.on { animation: none; }
  .dots i { animation: none; opacity: .8; }
}
.row.now > .rb:first-child { margin-top: 0; }

/* ───── 카드 3안 (10/28 주익님 "흰색 말고 반투명·glass·다른 예쁜 것") — 소희 얼굴·꽃잎 진행은 뺐다 ─────
   1 우유 유리: 흰 우유를 탄 유리. 뒤 물결이 뿌옇게 비치고, 글자는 가장 또렷하다.
   2 맑은 유리: 거의 투명한 유리판. 가장자리 빛 테 + 왼쪽 위 반사 한 줄, 칸도 유리.
   3 장미 유리 조각: 카드 판 없이 지금 칸만 장미빛 유리로 뜨고, 적은 칸은 흰 유리 알약으로 접혀 쌓인다. */
.sk1 .ask-card, .sk2 .ask-card, .sk3 .row.now, .sk3 .row.done, .sk1 .sh, .sk2 .sh, .sk3 .sh {
  -webkit-backdrop-filter: var(--bf); backdrop-filter: var(--bf); }

/* 1 우유 유리 */
.sk1 .ask-card { --bf: blur(22px) saturate(1.5); background: rgba(255,249,251,.56); border: 1px solid rgba(255,255,255,.8);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 24px 48px -24px rgba(150,50,85,.38); }
.sk1 .row { border-bottom-color: rgba(191,74,111,.1); }
.sk1 .fld input, .sk1 .dbox, .sk1 .pk, .sk1 .rl, .sk1 .cal { background: rgba(255,255,255,.62); border-color: rgba(255,255,255,.95); }
.sk1 .fld input:focus, .sk1 .dfld:focus-within .dbox { background: rgba(255,255,255,.9); border-color: rgba(196,80,122,.55); }
.sk1 .pk { border-style: dashed; border-color: rgba(191,74,111,.3); }
.sk1 .sh { --bf: blur(26px) saturate(1.5); background: rgba(255,247,250,.78); }
.sk1 .hr { background: rgba(255,255,255,.66); border-color: rgba(255,255,255,.95); }

/* 2 맑은 유리 */
.sk2 .ask-card { --bf: blur(3px) saturate(1.7); position: relative; overflow: hidden; background: rgba(255,255,255,.07);
  border: 1.5px solid rgba(255,255,255,.85);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(255,255,255,.3), inset 1px 0 0 rgba(255,255,255,.35),
              0 20px 44px -26px rgba(150,50,85,.42); }
.sk2 .ask-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(128deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,0) 34%, rgba(255,255,255,0) 72%, rgba(255,255,255,.14) 100%); }
.sk2 .rows { position: relative; }
.sk2 .row { border-bottom-color: rgba(255,255,255,.5); }
.sk2 .fld input, .sk2 .dbox, .sk2 .pk, .sk2 .rl { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.9);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7); }
.sk2 .fld input:focus, .sk2 .dfld:focus-within .dbox { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.95);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 0 0 5px rgba(255,255,255,.28); }
.sk2 .dbox.full { border-color: rgba(255,255,255,.95); }
.sk2 .pk { border-style: dashed; }
/* 양력·음력 — 흰 알약은 튀고(10/28) 밑줄만 두면 버튼 같지 않아서: 유리 테 두른 알약 안에서 장미빛 유리 조각이 미끄러진다 */
.sk2 .cal { width: 168px; margin-bottom: 14px; padding: 3px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.9);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 4px 12px -6px rgba(150,50,85,.25); }
.sk2 .cal .knob { background: linear-gradient(90deg, rgba(219,106,140,.26), rgba(238,143,154,.22)); border: 1px solid rgba(219,106,140,.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6); box-sizing: border-box; }
.sk2 .cal button { height: 34px; color: rgba(70,32,45,.45); cursor: pointer; }
.sk2 .cal button.on { color: #a8385a; }
.sk2 .dl, .sk2 .rs, .sk2 .dex, .sk2 .dks { color: rgba(70,32,45,.62); }
.sk2 .seg i { color: rgba(70,32,45,.22); }
.sk2 .sh { --bf: blur(18px) saturate(1.4); background: rgba(255,240,245,.42); border-top: 1px solid rgba(255,255,255,.7); }
.sk2 .hr { background: rgba(255,255,255,.3); border-color: rgba(255,255,255,.7); }
.sk2 .sh-dim { background: rgba(70,32,45,.14); }

/* 3 떠 있는 칸 — 카드 판이 없다 */
.sk3 .ask-card { background: none; box-shadow: none; padding: 0; }
.sk3 .row { border: 0; }
.sk3 .row.done { --bf: blur(14px) saturate(1.4); margin-bottom: 8px; padding: 12px 20px; border-radius: 999px;
  background: rgba(255,255,255,.5); border: 1px solid rgba(255,255,255,.85); box-shadow: 0 8px 18px -12px rgba(150,50,85,.35); }
.sk3 .row.now { --bf: blur(18px) saturate(1.45); margin-top: 6px; padding: 24px 18px; border-radius: 26px;
  background: linear-gradient(160deg, rgba(236,128,160,.34) 0%, rgba(246,170,178,.26) 55%, rgba(255,205,190,.3) 100%);
  border: 1px solid rgba(255,255,255,.75);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), inset 0 0 30px rgba(255,255,255,.18), 0 26px 50px -24px rgba(194,71,122,.6); }
.sk3 .fld input, .sk3 .dbox, .sk3 .pk, .sk3 .rl { background: rgba(255,255,255,.72); border-color: rgba(255,255,255,1); }
.sk3 .fld input:focus, .sk3 .dfld:focus-within .dbox { background: #fff; border-color: rgba(196,80,122,.55); }
.sk3 .pk { border-style: dashed; border-color: rgba(191,74,111,.3); }
.sk3 .cal { background: rgba(255,255,255,.5); }
.sk3 .sh { --bf: blur(24px) saturate(1.5); background: rgba(255,246,249,.76); }
.sk3 .hr { background: rgba(255,255,255,.7); border-color: #fff; }
.sk3 .ask-safe { margin-top: 10px; }
.sk3 .rq { color: #3d1826; }
.sk3 .rs, .sk3 .dex, .sk3 .dks { color: rgba(70,32,45,.68); }
.sk3 .cal { background: rgba(255,255,255,.4); }

/* 사이 보기 = 손님 속말 한 문장씩 (10/28) — 문장이 길어 한 줄에 하나, 왼쪽 정렬. 기간은 두 줄 타일 + 마지막 넓은 칸 */
.rels.one { grid-template-columns: 1fr; gap: 8px; }
.rels.one .rl { height: auto; min-height: 52px; padding: 13px 18px; text-align: left; font-size: 15.5px; line-height: 1.45; word-break: keep-all; }
.rl.wide { grid-column: 1 / -1; }
.row.done .dv { font-size: 15px; line-height: 1.4; }
@media (max-height: 620px) { .rels.one .rl { min-height: 46px; padding: 10px 16px; font-size: 15px; } }

/* ───── 보기 버튼 3안 (10/29 "버튼이 잘 안 보일 수도") — 고른 칸(장미 그라데이션)은 셋 다 그대로 ─────
   1 흰 유리 채움: 밝기로 띄운다. 반투명 흰 판 + 아래 그림자 한 겹.
   2 장미 테두리: 판은 유리 그대로, 테두리만 장미색으로 또렷하게.
   3 장미 물 + 화살표: 옅은 장미빛을 깔고, 한 줄 보기 오른쪽에 › 를 둬 '누르는 것'을 알린다. */
.bt1 .rl { background: rgba(255,255,255,.8); border: 1px solid rgba(255,255,255,1);
  box-shadow: inset 0 1px 0 #fff, 0 8px 16px -10px rgba(150,50,85,.45); }
.bt2 .rl { background: rgba(255,255,255,.14); border: 1.5px solid rgba(196,80,122,.7);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6); color: #7a2a45; }
.bt3 .rl { background: linear-gradient(100deg, rgba(240,150,176,.3), rgba(246,178,186,.22)); border: 1px solid rgba(255,255,255,.85);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 6px 14px -10px rgba(194,71,122,.5); }
.bt3 .rels.one .rl { position: relative; padding-right: 40px; }
.bt3 .rels.one .rl::after { content: "›"; position: absolute; right: 18px; top: 50%; translate: 0 -54%;
  font: 400 22px/1 "Noto Sans KR", sans-serif; color: rgba(168,56,90,.7); }
.bt1 .rl.sel, .bt2 .rl.sel { background: linear-gradient(90deg, #c2477a, #ee8f9a); border-color: transparent; color: #fff; }
/* 태어난 때 칸·시각 목록도 보기 버튼과 같은 장미 물 판 (10/29 "생시 버튼도 통일") */
.bt3 .pk, .bt3 .hr { background: linear-gradient(100deg, rgba(240,150,176,.3), rgba(246,178,186,.22)); border: 1px solid rgba(255,255,255,.85);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 6px 14px -10px rgba(194,71,122,.5); }
.bt3 .pk { color: rgba(70,32,45,.7); }
.bt3 .pk.has { color: var(--ink); }
/* 고른 칸 — 빨갛게 채우지 않는다 (10/29). 장미 물이 한 단 진해지고 장미 테가 둘러진다, 글자는 먹색 그대로 */
.bt3 .rl.sel, .bt3 .hr.sel { background: linear-gradient(100deg, rgba(236,128,160,.46), rgba(244,166,178,.36)); border: 1.5px solid rgba(196,80,122,.6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 8px 16px -10px rgba(194,71,122,.6); color: var(--ink); }
.bt3 .hr.sel .hn { color: var(--ink); }
.bt3 .hr.sel .ht { color: var(--sub); }

/* '그 사람 생일을 몰라' — 밑줄 글자 대신 버튼 (10/28). 「이 날이야」(장미 채움) 아래 두 번째 버튼: 같은 크기·모서리, 유리 + 장미 테 */
.dk { display: block; width: 100%; height: 50px; margin: 10px 0 0; padding: 0; border-radius: 3px; cursor: pointer;
      border: 1.5px solid rgba(219,106,140,.5); background: rgba(255,255,255,.22);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
      font: 700 16px "Gowun Batang", serif; color: #a8385a; letter-spacing: .04em;
      transition: background .2s ease, transform .12s ease; -webkit-tap-highlight-color: transparent; }
.dk:active { transform: translateY(1px) scale(.99); background: rgba(255,255,255,.4); }
.dk:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }