[hidden] { display: none !important; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.entry-box { width:min(100%,440px); }
.entry-box .field { text-transform:none; letter-spacing:.025em; font-size:15px; }
.entry-description { margin-bottom:24px; }
.entry-submit { width:100%; margin-top:12px; }
.entry-screen { min-height:calc(100svh - 68px); padding-block:48px; }
.entry-footer { position:static; padding:16px 24px 24px; font-size:12px; line-height:1.6; }
.study-shell { --app-width:840px; }
.top-actions { display:flex; align-items:center; gap:16px; }
.app-wordmark { font-size:22px; }
.app-code { color:var(--ink-2); }
.demo-notice { background:var(--index-soft); color:var(--ink-1); padding:10px 24px; font-size:13px; border-bottom:1px solid var(--rule); }
.study-progress { padding:24px 24px 12px; border-bottom:1px solid var(--rule); }
.study-progress ol { display:flex; padding:0; margin:0; list-style:none; gap:8px; justify-content:space-between; }
.study-progress li { display:flex; flex-direction:column; gap:8px; align-items:center; flex:1; color:var(--ink-2); font-size:11px; text-align:center; }
.progress-number { display:grid; place-items:center; border:1px solid var(--rule-strong); border-radius:50%; width:26px; height:26px; font-family:var(--font-mono); font-size:11px; }
.study-progress .current { color:var(--index); font-weight:600; }
.current .progress-number { background:var(--index); color:var(--paper-1); border-color:var(--index); }
.complete .progress-number { background:var(--paper-2); color:var(--ink-1); }
.app-error { position:sticky; top:0; z-index:50; max-width:840px; margin:12px auto; border:1px solid var(--danger); border-left-width:4px; padding:14px 20px; background:var(--danger-soft); color:var(--ink-0); font-size:15px; }
.info-sections { margin-top:32px; }
.info-sections section { border-top:1px solid var(--rule); padding-top:24px; margin-top:24px; }
.info-sections h2 { font-family:var(--font-ui); font-size:17px; font-weight:600; }
.preserve-lines { white-space:pre-line; }
.stack-form { margin-top:24px; }
.check-row { display:flex; align-items:flex-start; gap:14px; padding:18px 0; border-bottom:1px solid var(--rule); cursor:pointer; }
.check-row input { flex-shrink:0; margin-top:5px; width:20px; height:20px; accent-color:var(--index); }
.form-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:28px; }
.age-field { max-width:150px; margin-bottom:16px; }
.question { border:0; padding:20px 0 24px; margin:0; min-width:0; border-bottom:1px solid var(--rule); }
.question legend { float:left; width:100%; font-weight:600; color:var(--ink-0); padding:0; margin:0 0 14px; font-size:16px; line-height:1.55; }
.question legend+.answer-options { clear:both; }
.answer-options { display:flex; gap:8px; flex-wrap:wrap; }
.radio-option { display:flex; align-items:center; gap:9px; padding:12px; border:1px solid var(--rule); border-radius:6px; background:var(--paper-1); cursor:pointer; min-height:48px; font-size:14px; flex:1 1 100px; }
.radio-option:hover { border-color:var(--index); }
.radio-option:has(input:checked) { background:var(--index-soft); border-color:var(--index); }
.radio-option input { margin:0; width:17px; height:17px; flex-shrink:0; accent-color:var(--index); }
.screening-period { margin-top:28px; padding:10px 14px; background:var(--paper-2); color:var(--ink-0); font-weight:600; }
.survey-status { display:flex; justify-content:space-between; font:12px var(--font-mono); color:var(--ink-2); margin:24px 0 10px; }
.survey-progress { width:100%; height:4px; border:none; display:block; accent-color:var(--index); margin-bottom:24px; }
.survey-progress::-webkit-progress-bar { background:var(--paper-2); border-radius:2px; }
.survey-progress::-webkit-progress-value { background:var(--index); border-radius:2px; }
.survey-instruction { padding:20px; border-left:3px solid var(--index); background:var(--paper-0); margin:24px 0 8px; }
.survey-form .question { padding:22px 0; }
.save-row { display:flex; align-items:center; gap:12px; justify-content:space-between; margin-top:24px; }
.save-row .hint { margin:0; }
.attribution { margin-top:28px; font-size:11px; color:var(--ink-2); }
.study-dialog { width:min(420px,calc(100% - 32px)); border:1px solid var(--rule); border-radius:12px; background:var(--paper-1); color:var(--ink-0); padding:24px; box-shadow:var(--shadow-overlay); }
.study-dialog::backdrop { background:rgba(15,16,14,.45); }
.dialog-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.dialog-head h2 { margin:0; }
.menu-actions { display:grid; gap:10px; }
.menu-actions .btn { width:100%; }
.completion-summary { margin:24px 0; color:var(--ink-2); }
.plan-day { display:flex; align-items:center; gap:16px; padding:22px 0; border-top:1px solid var(--rule); }
.plan-day-number { font:13px var(--font-mono); color:var(--ink-2); width:26px; flex-shrink:0; }
.plan-day-copy { flex:1; min-width:0; }
.plan-day-copy h2 { font:600 16px var(--font-ui); line-height:1.4; margin:0; }
.plan-day-copy .hint { margin-top:5px; }
.plan-day .btn { flex-shrink:0; font-size:13px; min-height:44px; padding-inline:14px; }
.post-notice { margin:28px 0 16px; padding:22px; background:var(--paper-0); border-radius:6px; }
.post-notice h2 { font-size:20px; }
.conversation-history { margin-top:24px; }
.conversation-paragraph { margin:16px 0; }
.user-answer { margin:16px 0; font-size:15px; }
.open-chat-note { display:flex; justify-content:space-between; gap:16px; margin:24px 0; padding:16px 18px; border:1px solid var(--rule); border-radius:6px; background:var(--paper-0); }
.open-chat-note span { color:var(--ink-2); font-size:14px; text-align:right; }
.open-history:empty { display:none; }
.active-step { border-top:1px solid var(--rule); padding-top:24px; margin-top:24px; }
.active-step .prompt { max-width:none; }
.active-step form .btn { margin-top:12px; }
.control-reading { margin:28px 0; }
.reflection { border-left:3px solid var(--index); padding-left:20px; margin-top:28px; }
.reflection h2 { font:600 16px var(--font-ui); }
.help-block { border-top:1px solid var(--rule); padding-top:24px; margin-top:28px; }
.help-block a { overflow-wrap:anywhere; }
.hint { color:var(--ink-2); }
.btn { line-height:1.35; padding-block:10px; }
.skip-link { position:fixed; top:8px; left:12px; transform:translateY(-180%); background:var(--paper-1); padding:10px 18px; z-index:200; }
.skip-link:focus { transform:none; }
.connection-notice { padding:12px 20px; background:var(--danger-soft); color:var(--ink-0); text-align:center; font-size:14px; }
.entry-screen { display:flex; flex-direction:column; padding:0 32px; min-height:calc(100svh - 85px); }
.entry-top { display:flex; justify-content:space-between; align-items:center; padding:30px 0; width:100%; max-width:1360px; margin:0 auto; }
.entry-wordmark { font:500 32px var(--font-display); letter-spacing:-.04em; }
.entry-wordmark>span { display:block; font:11px var(--font-ui); letter-spacing:.035em; color:var(--ink-2); margin-top:2px; }
.entry-top .btn { font-size:13px; }
.entry-center { width:100%; display:flex; flex:1; align-items:center; justify-content:center; flex-direction:column; padding:35px 0 30px; }
.entry-box { width:min(100%,440px); text-align:center; }
.entry-box h1 { font-size:52px; margin:16px 0; }
.entry-description { font-size:17px; color:var(--ink-2); max-width:35ch; margin:0 auto 28px; }
.entry-box .field { padding:17px 18px; background:var(--paper-1); text-align:center; }
.entry-box .entry-submit { min-height:54px; display:flex; justify-content:space-between; padding-inline:22px; }
.entry-emblem { display:flex; justify-content:center; padding-bottom:34px; height:80px; }
.entry-emblem span { border:1px solid var(--index); height:42px; width:42px; border-radius:50%; }
.entry-emblem span+span { margin-left:-17px; }
.entry-emblem span:nth-child(2) { background:var(--index-soft); }
.entry-return { color:var(--ink-2); font-size:12px; margin:14px 0 0; }
.entry-help { margin:24px 0 0; font-size:13px; }
.entry-help summary { color:var(--index); cursor:pointer; padding:5px; }
.entry-help p { margin:12px 0 0; text-align:left; padding:16px; background:var(--paper-1); border:1px solid var(--rule); border-radius:6px; }
.entry-outline { display:flex; gap:28px; border-top:1px solid var(--rule); padding-top:24px; margin-top:62px; }
.entry-outline>span { display:flex; align-items:center; gap:10px; font-size:12px; color:var(--ink-2); }
.entry-outline b { font:11px var(--font-mono); color:var(--index); }
.entry-context { font-size:12px; text-align:center; color:var(--ink-2); margin:22px 0 0; max-width:55ch; }
.entry-footer { text-align:center; color:var(--ink-2); }
.study-shell { --app-width:1120px; padding-top:28px; }
.app-top { min-height:76px; padding-inline:32px; }
.app-wordmark { font-size:28px; }
.app-wordmark small { font:12px var(--font-ui); color:var(--ink-2); margin-left:18px; }
.app-code { font-size:12px; }
.study-workspace { display:grid; grid-template-columns:235px minmax(0,1fr); }
.study-workspace:has(>.app-main:only-child) { grid-template-columns:1fr; }
.study-aside { background:var(--paper-0); border-right:1px solid var(--rule); padding:32px 22px; }
.aside-title h2 { font-size:27px; margin-top:10px; }
.study-progress { padding:20px 0 0; border:0; }
.study-progress ol { display:flex; flex-direction:column; gap:0; }
.study-progress li { position:relative; flex-direction:row; align-items:center; gap:12px; padding:0 0 25px; text-align:left; font-size:13px; }
.study-progress li:last-child { padding-bottom:0; }
.study-progress li:not(:last-child)::after { content:''; position:absolute; left:12px; top:29px; bottom:3px; border-left:1px solid var(--rule); }
.progress-number { flex-shrink:0; background:var(--paper-0); }
.complete .progress-number { color:var(--index); background:var(--index-soft); border-color:var(--index-soft); }
.aside-note { margin-top:42px; padding-top:20px; border-top:1px solid var(--rule); font-size:12px; color:var(--ink-2); }
.aside-note p { color:var(--ink-1); font-weight:600; margin-bottom:6px; }
.app-main { padding:38px 42px 48px; min-width:0; }
.app-main h1 { font-size:39px; line-height:1.12; }
.app-main .lede { font-size:17px; color:var(--ink-2); }
.demo-notice { padding:10px 32px; display:flex; align-items:center; gap:12px; font-size:12px; }
.demo-label { border:1px solid var(--rule-strong); border-radius:3px; font:10px var(--font-mono); padding:2px 5px; }
.study-facts { display:grid; grid-template-columns:repeat(3,1fr); margin:28px 0; gap:12px; }
.study-facts>div { border:1px solid var(--rule); border-radius:14px; padding:16px; background:var(--paper-1); text-align:center; }
.study-facts strong { display:block; font:500 26px var(--font-display); }
.study-facts span { display:block; font-size:12px; color:var(--ink-2); margin-top:5px; }
.survey-parts { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:26px; gap:7px; }
.survey-part { padding:12px 8px; text-align:left; border:1px solid var(--rule); border-radius:6px; background:var(--paper-1); color:var(--ink-2); cursor:pointer; }
.survey-part.selected { border-color:var(--index); color:var(--index); background:var(--index-soft); }
.survey-part span { display:block; font-size:12px; font-weight:600; }
.survey-part small { font:10px var(--font-mono); display:block; margin-top:6px; }
.survey-part:disabled { opacity:.6; cursor:default; }
.survey-instruction { padding:20px 22px; }
.survey-instruction>p:last-child { margin-bottom:0; }
.survey-review { padding:20px; background:var(--index-soft); border-radius:6px; margin-bottom:12px; }
.survey-review p { font-size:13px; margin:10px 0 0; }
.survey-form .question:has(input:checked) legend { color:var(--ink-1); }
.survey-form .question:has(input:checked) legend::after { content:' ✓'; color:var(--index); font-size:13px; }
.survey-form .form-actions { position:sticky; bottom:0; padding:16px 0; background:var(--paper-1); border-top:1px solid var(--rule); justify-content:space-between; margin-top:20px; z-index:2; }
.survey-form .form-actions>.btn-primary { margin-left:auto; }
.plan-day.is-complete .plan-day-number { color:var(--index); }
.plan-day:has(.btn-primary) { background:var(--index-soft); margin-inline:-16px; padding-inline:16px; border-radius:8px; border-top-color:transparent; }
.post-notice { border:1px solid var(--rule); }
@media(max-width:900px) {
  .study-workspace { grid-template-columns:190px minmax(0,1fr); }
  .study-aside { padding:28px 16px; }
  .study-progress li { font-size:12px; gap:9px; }
  .app-main { padding:30px 26px 40px; }
  .app-main h1 { font-size:34px; }
}
@media(max-width:620px) {
  .study-shell { padding-top:12px; }
  .study-progress { padding:18px 12px 14px; }
  .study-progress ol { gap:3px; }
  .study-progress li { font-size:9px; }
  .progress-number { width:23px; height:23px; }
  .demo-notice { padding:10px 20px; }
  .answer-options { display:grid; grid-template-columns:1fr; gap:7px; }
  .radio-option { font-size:15px; }
  .adjective-form .answer-options { grid-template-columns:1fr 1fr; }
  .adjective-form .radio-option { font-size:13px; padding:10px; }
  .plan-day { flex-wrap:wrap; gap:12px; }
  .plan-day .btn { margin-left:38px; width:calc(100% - 38px); }
  .plan-day-copy { flex-basis:calc(100% - 38px); }
  .save-row { align-items:flex-start; }
  .save-row .btn { width:auto; flex-shrink:0; }
  .app-error { margin:8px 12px; }
  .entry-screen { padding:0 22px; }
  .entry-top { padding-block:22px; }
  .entry-center { padding-top:30px; }
  .entry-box h1 { font-size:44px; }
  .entry-outline { flex-direction:column; gap:14px; margin-top:36px; width:100%; max-width:320px; }
  .entry-outline>span { gap:18px; }
  .entry-emblem { padding-bottom:26px; }
  .study-shell { width:calc(100% - 20px); padding-top:10px; }
  .study-workspace { display:block; }
  .study-aside { padding:16px 12px; border-right:0; border-bottom:1px solid var(--rule); }
  .aside-title,.aside-note { display:none; }
  .study-progress { padding:0; }
  .study-progress ol { flex-direction:row; gap:3px; }
  .study-progress li { flex-direction:column; text-align:center; font-size:9px; padding:0; gap:6px; }
  .study-progress li::after { display:none; }
  .app-top { padding-inline:20px; min-height:66px; }
  .app-wordmark small { display:none; }
  .app-main { padding:28px 20px 34px; }
  .app-main h1 { font-size:32px; }
  .study-facts { gap:10px; }
  .study-facts strong { font-size:23px; }
  .study-facts span { font-size:11px; }
  .survey-parts { gap:4px; }
  .survey-part { padding:10px 7px; }
  .survey-part span { font-size:10px; }
  .survey-status { font-size:10px; }
  .survey-instruction { padding:16px; }
}

/* ===================== v4: status w nagłówku, plan tygodnia, okno rozmowy ===================== */
.app-status { display:inline-flex; align-items:center; gap:3px; font:600 12px var(--font-ui); color:var(--ink-2); background:var(--paper-2); border-radius:999px; padding:6px 12px; letter-spacing:.02em; white-space:nowrap; }
.app-status b { color:var(--ink-0); font-weight:700; }
.menu-code { display:flex; justify-content:space-between; align-items:center; margin:0 0 16px; padding:12px 14px; background:var(--paper-0); border:1px solid var(--rule); border-radius:8px; font-size:13px; color:var(--ink-2); }
.menu-code .app-code { font:600 13px var(--font-mono); color:var(--ink-0); }

.week-strip { display:grid; grid-template-columns:repeat(7,1fr); gap:8px; list-style:none; padding:0; margin:28px 0 20px; max-width:420px; }
.week-strip li { display:grid; place-items:center; aspect-ratio:1; border-radius:50%; border:1.5px solid var(--rule); font:600 13px var(--font-mono); color:var(--ink-3); background:var(--paper-1); transition:background var(--dur-state) var(--ease); }
.week-strip li.done { background:var(--index); border-color:var(--index); color:var(--paper-1); }
.week-strip li.now { border-color:var(--index); color:var(--index); box-shadow:0 0 0 4px var(--index-soft); }
.week-strip li.locked { border-style:dashed; }
.today-label { display:block; font:600 11px var(--font-ui); text-transform:uppercase; letter-spacing:.11em; color:var(--index); margin-bottom:8px; }
.today-card { margin:0 0 28px; padding:26px 28px; border-radius:14px; background:var(--index-soft); border:1px solid color-mix(in srgb, var(--index) 35%, transparent); }
.today-card h2 { font-size:28px; margin:0 0 8px; }
.today-card p { color:var(--ink-1); max-width:52ch; }
.today-start { margin-top:18px; min-height:52px; padding-inline:24px; }
.today-card.is-done { background:var(--paper-0); border-color:var(--rule); }
.day-list { list-style:none; padding:0; margin:0; }
.plan-day { display:flex; align-items:center; gap:16px; padding:16px 0; border-top:1px solid var(--rule); }
.plan-day:last-child { border-bottom:1px solid var(--rule); }
.plan-day:has(.btn-primary) { background:none; margin-inline:0; padding-inline:0; border-radius:0; border-top-color:var(--rule); }
.plan-day-number { width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font:600 12px var(--font-mono); color:var(--ink-3); border:1px solid var(--rule); flex-shrink:0; }
.plan-day.is-complete .plan-day-number { background:var(--index); border-color:var(--index); color:var(--paper-1); }
.plan-day.is-next .plan-day-number { border-color:var(--index); color:var(--index); }
.plan-day.is-locked { opacity:.55; }
.plan-day-copy h3 { font:600 15px var(--font-ui); margin:0; color:var(--ink-0); }
.plan-day-copy .hint { margin-top:3px; font-size:12.5px; }
.plan-day .btn { flex-shrink:0; font-size:13px; min-height:40px; padding-inline:14px; }
.post-notice { margin:28px 0 8px; padding:22px 24px; background:var(--paper-0); border:1px dashed var(--rule-strong); border-radius:12px; }
.post-notice h2 { font-size:22px; margin:0 0 6px; }
.finish-facts { margin-top:20px; }

.study-shell.chat-mode { --app-width:820px; }
.app-main-chat { padding:0; }
.chat-window { display:flex; flex-direction:column; height:min(760px, calc(100svh - 150px)); min-height:520px; background:var(--paper-1); }
.chat-head { display:flex; flex-shrink:0; align-items:center; gap:14px; padding:14px 20px; border-bottom:1px solid var(--rule); background:var(--paper-1); }
.chat-back { width:40px; height:40px; border-radius:50%; border:1px solid var(--rule); background:var(--paper-1); color:var(--ink-1); cursor:pointer; font-size:18px; flex-shrink:0; display:grid; place-items:center; padding:0; }
.chat-back:hover { background:var(--paper-2); }
.chat-title { flex:1; min-width:0; }
.chat-day { display:block; font:600 11px var(--font-ui); text-transform:uppercase; letter-spacing:.1em; color:var(--index); }
.chat-title h1 { font-size:20px; margin:2px 0 0; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-meter { display:flex; gap:4px; flex-shrink:0; }
.chat-meter i { width:14px; height:4px; border-radius:2px; background:var(--paper-3); }
.chat-meter i.done { background:var(--index); }
.chat-meter i.now { background:var(--index); opacity:.45; }
.chat-thread { flex:1; min-height:0; overflow-y:auto; padding:24px 20px 14px; display:flex; flex-direction:column; gap:10px; background:var(--paper-0); overscroll-behavior:contain; }
.open-history { display:contents; }
.msg { margin:0; max-width:min(78%, 560px); padding:12px 16px; border-radius:18px; font-size:15.5px; line-height:1.55; }
.msg p { margin:0; color:inherit; white-space:pre-wrap; overflow-wrap:anywhere; }
.msg.bot { align-self:flex-start; background:var(--paper-1); color:var(--ink-0); border:1px solid var(--rule); border-bottom-left-radius:6px; }
.msg.user { align-self:flex-end; background:var(--index); color:var(--paper-1); border-bottom-right-radius:6px; margin-top:4px; padding:12px 16px; font-size:15.5px; }
.msg.msg-question { border-color:var(--index); box-shadow:inset 3px 0 0 var(--index); font-weight:500; }
.msg.msg-reflect { border-left:3px solid var(--index); }
.msg-label { display:block; font:600 10px var(--font-ui); text-transform:uppercase; letter-spacing:.1em; color:var(--index); margin-bottom:6px; }
.msg.msg-reflect .hint { display:block; margin-top:8px; font-size:12px; }
.msg.card { align-self:stretch; max-width:none; background:var(--paper-1); border:1px solid var(--rule); border-radius:14px; padding:20px 22px; }
.msg.card h2 { font-size:22px; margin:0 0 6px; }
.msg.card .stack-form { margin-top:12px; }
.msg.card .check-row { padding:12px 0; }
.msg.card .question { padding:14px 0 16px; }
.msg.card .btn { margin-top:12px; }
.thread-divider { display:flex; align-items:center; gap:12px; margin:14px 0 6px; color:var(--ink-3); font:600 11px var(--font-ui); text-transform:uppercase; letter-spacing:.1em; }
.thread-divider::before, .thread-divider::after { content:""; flex:1; border-top:1px solid var(--rule); }
.msg-in { animation:msgIn .32s var(--ease) both; }
@media (prefers-reduced-motion: reduce) { .msg-in { animation:none; animation-delay:0s !important; } }
@keyframes msgIn { from { opacity:0; transform:translateY(10px) scale(.98); } to { opacity:1; transform:none; } }
.typing { align-self:flex-start; display:flex; gap:5px; padding:14px 16px; background:var(--paper-1); border:1px solid var(--rule); border-radius:18px; border-bottom-left-radius:6px; }
.typing i { width:7px; height:7px; border-radius:50%; background:var(--ink-3); animation:typing 1.1s infinite ease-in-out; }
.typing i:nth-child(2) { animation-delay:.15s; }
.typing i:nth-child(3) { animation-delay:.3s; }
@keyframes typing { 0%,80%,100% { transform:translateY(0); opacity:.5; } 40% { transform:translateY(-4px); opacity:1; } }
.chat-dock { flex-shrink:0; border-top:1px solid var(--rule); margin-top:0; padding:12px 16px 14px; background:var(--paper-1); display:flex; flex-direction:column; gap:8px; }
.chat-dock:empty { display:none; }
.composer { display:flex; align-items:flex-end; gap:10px; background:var(--paper-0); border:1px solid var(--rule-strong); border-radius:24px; padding:6px 6px 6px 16px; }
.composer:focus-within { border-color:var(--index); box-shadow:0 0 0 3px rgba(56,84,120,.12); }
.composer-input { flex:1; min-width:0; border:0; background:transparent; resize:none; min-height:36px; max-height:160px; padding:8px 0; font-size:16px; line-height:1.45; color:var(--ink-0); outline:none; }
.composer-input::placeholder { color:var(--ink-3); }
.composer-send { width:40px; height:40px; border-radius:50%; border:0; background:var(--ink-0); color:var(--paper-1); cursor:pointer; font-size:18px; display:grid; place-items:center; flex-shrink:0; padding:0; transition:background var(--dur-micro) var(--ease), transform var(--dur-micro) var(--ease); }
.composer-send:hover { background:var(--btn-primary-hover); }
.composer-send:active { transform:scale(.94); }
.composer-send[disabled] { background:var(--paper-3); color:var(--ink-3); cursor:not-allowed; }
.composer-foot { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; }
.composer-foot .hint { margin:0; font-size:12px; }
.chip-row { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
.chip { border:1.5px solid var(--index); background:var(--paper-1); color:var(--index); border-radius:999px; padding:11px 18px; font-weight:600; font-size:14.5px; cursor:pointer; min-height:44px; transition:background var(--dur-micro) var(--ease), color var(--dur-micro) var(--ease), transform var(--dur-micro) var(--ease); }
.chip:hover { background:var(--index); color:var(--paper-1); }
.chip:active { transform:scale(.97); }
.chip[disabled] { opacity:.5; cursor:not-allowed; }
.dock-actions { display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.dock-hint { margin:0; font-size:12px; }
.dock-stage { display:flex; justify-content:space-between; align-items:baseline; gap:12px; font-size:13px; color:var(--ink-2); padding:2px 4px; flex-wrap:wrap; }
.dock-stage strong { color:var(--ink-0); }

@media(max-width:620px) {
  .study-shell.chat-mode { width:100%; padding:0; }
  .chat-mode .research-app { border:0; border-radius:0; display:flex; flex-direction:column; height:100svh; height:100dvh; }
  .chat-mode .study-workspace { flex:1; min-height:0; display:flex; }
  .chat-mode .app-main { flex:1; min-height:0; display:flex; flex-direction:column; padding:0; }
  .chat-mode .chat-window { height:auto; flex:1; min-height:0; }
  .chat-mode .demo-notice { padding:6px 16px; font-size:11px; }
  .chat-mode ~ .entry-footer { display:none; }
  .chat-head { padding:10px 12px; gap:10px; }
  .chat-title h1 { font-size:17px; }
  .chat-meter i { width:9px; }
  .chat-thread { padding:16px 12px 10px; }
  .msg { max-width:88%; font-size:15px; }
  .chat-dock { padding:10px 10px calc(10px + env(safe-area-inset-bottom)); }
  .chip-row { justify-content:stretch; }
  .chip { flex:1 1 auto; text-align:center; }
  .week-strip { gap:6px; margin:22px 0 16px; max-width:none; }
  .today-card { padding:20px; }
  .today-card h2 { font-size:23px; }
  .plan-day { flex-wrap:wrap; gap:12px; }
  .plan-day .btn { margin-left:46px; width:calc(100% - 46px); }
  .plan-day-copy { flex-basis:calc(100% - 46px); }
}

/* ---------- kwestionariusz: jedno pytanie na ekran ---------- */
.q-screen { max-width:680px; }
.q-top { margin-bottom:28px; }
.q-top .survey-progress { margin-bottom:10px; height:5px; }
.q-topline { display:flex; justify-content:space-between; font:600 11px var(--font-ui); text-transform:uppercase; letter-spacing:.1em; color:var(--index); }
.q-total { font:500 12px var(--font-mono); color:var(--ink-3); text-transform:none; letter-spacing:0; }
.q-intro .survey-instruction { margin-top:20px; }
.q-meta { margin:18px 0 8px; font:500 12.5px var(--font-mono); color:var(--ink-3); }
.q-intro .survey-parts { margin:18px 0 26px; }
.q-form { margin:0; }
.q-question { border:0; padding:0; margin:0; min-width:0; }
.q-question legend { float:none; width:100%; padding:0; margin:0 0 26px; }
.q-text { font:500 clamp(1.45rem, 3.2vw, 1.9rem)/1.28 var(--font-display); letter-spacing:-.02em; color:var(--ink-0); }
.q-lead { display:block; font:600 12px var(--font-ui); text-transform:uppercase; letter-spacing:.1em; color:var(--index); margin-bottom:12px; }
.q-options { display:flex; flex-direction:column; gap:10px; }
.q-option { position:relative; display:flex; align-items:center; gap:14px; min-height:58px; padding:12px 16px 12px 12px; border:1.5px solid var(--rule); border-radius:12px; background:var(--paper-1); cursor:pointer; font-size:16px; color:var(--ink-0); transition:border-color var(--dur-micro) var(--ease), background var(--dur-micro) var(--ease), transform var(--dur-micro) var(--ease); }
.q-option:hover { border-color:var(--index); background:var(--paper-0); }
.q-option:active { transform:scale(.995); }
.q-option input { position:absolute; opacity:0; width:1px; height:1px; }
.q-option:has(input:focus-visible) { outline:3px solid var(--focus-ring); outline-offset:2px; }
.q-key { display:grid; place-items:center; width:30px; height:30px; border-radius:8px; border:1px solid var(--rule-strong); font:600 12px var(--font-mono); color:var(--ink-3); flex-shrink:0; background:var(--paper-1); }
.q-option:has(input:checked) { border-color:var(--index); background:var(--index-soft); }
.q-option:has(input:checked) .q-key { background:var(--index); border-color:var(--index); color:var(--paper-1); }
.q-label { flex:1; line-height:1.4; }
.q-nav { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:28px; }
.q-counter { font:500 12px var(--font-mono); color:var(--ink-3); }
.q-save { margin-top:34px; padding-top:16px; border-top:1px solid var(--rule); }
.q-in-next { animation:qNext .26s var(--ease) both; }
.q-in-prev { animation:qPrev .26s var(--ease) both; }
@keyframes qNext { from { opacity:0; transform:translateX(18px); } to { opacity:1; transform:none; } }
@keyframes qPrev { from { opacity:0; transform:translateX(-18px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) { .q-in-next, .q-in-prev { animation:none; } }
.survey-part.is-done { color:var(--index); }
.review-list { list-style:none; padding:0; margin:28px 0 20px; }
.review-list li { display:flex; align-items:center; gap:14px; padding:16px 0; border-top:1px solid var(--rule); }
.review-list li:last-child { border-bottom:1px solid var(--rule); }
.review-list strong { display:block; font:600 15px var(--font-ui); color:var(--ink-0); }
.review-list small { display:block; font:500 12px var(--font-mono); color:var(--ink-3); margin-top:3px; }
.review-list > li > div { flex:1; min-width:0; }
.review-mark { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; font:700 13px var(--font-mono); background:var(--danger-soft); color:var(--danger); flex-shrink:0; }
.review-list li.is-done .review-mark { background:var(--index); color:var(--paper-1); }
.review-list .btn { flex-shrink:0; }
@media(max-width:620px) {
  .q-top { margin-bottom:20px; }
  .q-option { min-height:54px; font-size:15.5px; }
  .q-nav .btn { width:auto; }
  .q-nav { flex-wrap:wrap; }
  .review-list li { flex-wrap:wrap; }
  .review-list .btn { margin-left:44px; }
}

/* ---------- informacja + zgoda na jednej stronie ---------- */
.consent-block { margin-top:40px; padding:28px 28px 24px; border-radius:14px; background:var(--index-soft); border:1px solid color-mix(in srgb, var(--index) 35%, transparent); }
.consent-block h2 { font-size:26px; margin:6px 0 8px; }
.consent-block .lede { margin-bottom:8px; }
.consent-block .check-row { border-bottom-color:color-mix(in srgb, var(--index) 22%, transparent); }
.consent-block .form-actions { margin-top:22px; }
.decline-confirm { margin-top:20px; padding:18px 20px; border-radius:10px; background:var(--paper-1); border:1px solid var(--danger); }
.decline-confirm p { margin-bottom:4px; }
.decline-confirm .form-actions { margin-top:14px; }
.consent-summary { border-top:1px solid var(--rule); padding-top:24px; margin-top:24px; }
.consent-summary h2 { font-family:var(--font-ui); font-size:17px; font-weight:600; }
.consent-summary ul { margin:0; padding-left:20px; color:var(--ink-1); }
.consent-summary li { margin:6px 0; }
@media(max-width:620px) { .consent-block { padding:20px 18px; margin-top:28px; } .consent-block h2 { font-size:22px; } }

.exclusion-note { margin:20px 0; padding:14px 16px; border-radius:10px; background:var(--danger-soft); color:var(--ink-0); border-left:3px solid var(--danger); }

/* ---------- menu jako arkusz aplikacji ---------- */
.menu-sheet { width:min(400px,calc(100% - 24px)); padding:20px 20px 16px; border-radius:16px; }
.menu-sheet .dialog-head { margin-bottom:14px; }
.id-card { padding:16px 18px; border-radius:12px; background:var(--index-soft); border:1px solid color-mix(in srgb, var(--index) 30%, transparent); margin-bottom:14px; }
.id-label { display:block; font:600 11px var(--font-ui); text-transform:uppercase; letter-spacing:.1em; color:var(--index); }
.id-value { display:block; font:600 26px/1.2 var(--font-mono); letter-spacing:.06em; color:var(--ink-0); margin:6px 0 6px; }
.id-hint { display:block; font-size:12px; color:var(--ink-2); line-height:1.45; }
.menu-list { display:flex; flex-direction:column; border-top:1px solid var(--rule); }
.btn-menu { width:100%; justify-content:space-between; min-height:52px; padding:0 4px; border:0; border-bottom:1px solid var(--rule); border-radius:0; background:transparent; color:var(--ink-0); font-weight:600; font-size:15px; }
.btn-menu::after { content:'›'; color:var(--ink-3); font-size:20px; }
.btn-menu:hover { background:var(--paper-0); }
.menu-theme { display:flex; align-items:center; justify-content:space-between; padding:14px 4px 6px; font-weight:600; font-size:15px; }
.theme-seg { display:flex; border:1px solid var(--rule-strong); border-radius:999px; padding:3px; gap:2px; }
.seg { border:0; background:transparent; color:var(--ink-2); border-radius:999px; padding:6px 14px; font-weight:600; font-size:13px; cursor:pointer; }
.seg[aria-pressed="true"] { background:var(--ink-0); color:var(--paper-1); }
.menu-foot { display:flex; justify-content:space-between; gap:8px; margin-top:12px; padding-top:12px; border-top:1px solid var(--rule); }
.menu-foot .btn { flex:1; }
.danger-text { color:var(--danger); }
.danger-text:hover { background:var(--danger-soft); color:var(--danger); }
@media(max-width:620px) { .menu-sheet { width:100%; max-width:none; margin:auto 0 0; border-radius:16px 16px 0 0; } .menu-foot { flex-direction:column; } }

/* ---------- ekran główny ---------- */
.home-mode { --app-width:760px; }
.home { max-width:680px; }
.home-head { margin-bottom:26px; }
.home-greeting { display:block; font:600 12px var(--font-ui); text-transform:uppercase; letter-spacing:.11em; color:var(--index); margin-bottom:6px; }
.home-head h1 { font-size:34px; margin:0 0 8px; text-transform:none; }
.home-head h1::first-letter { text-transform:uppercase; }
.home-head .lede { margin:0; }
.hero { display:flex; gap:22px; align-items:flex-start; padding:26px 26px 24px; border-radius:20px; background:var(--index-soft); border:1px solid color-mix(in srgb, var(--index) 28%, transparent); margin-bottom:26px; }
.hero-num { font:500 64px/1 var(--font-display); color:var(--index); letter-spacing:-.04em; opacity:.9; flex-shrink:0; min-width:74px; }
.hero-body { flex:1; min-width:0; }
.hero-label { display:block; font:600 11px var(--font-ui); text-transform:uppercase; letter-spacing:.11em; color:var(--index); margin-bottom:6px; }
.hero h2 { font-size:30px; margin:0 0 8px; }
.hero p { color:var(--ink-1); max-width:48ch; }
.hero-meta { display:flex; gap:8px; margin:12px 0 18px; flex-wrap:wrap; }
.hero-meta span { font:600 12px var(--font-ui); padding:6px 11px; border-radius:999px; background:var(--paper-1); color:var(--ink-2); border:1px solid var(--rule); }
.hero-cta { min-height:54px; padding-inline:24px; font-size:16px; }
.hero-done { background:var(--paper-0); border-color:var(--rule); }
.hero-done .hero-num { color:var(--index); }
.journey { display:grid; grid-template-columns:repeat(8,1fr); gap:0; list-style:none; padding:0; margin:0 0 30px; position:relative; }
.journey::before { content:''; position:absolute; left:6%; right:6%; top:17px; border-top:2px solid var(--rule); }
.journey li { display:flex; flex-direction:column; align-items:center; gap:8px; position:relative; text-align:center; }
.j-dot { display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:var(--paper-1); border:2px solid var(--rule); font:600 13px var(--font-mono); color:var(--ink-3); }
.j-label { font-size:10.5px; line-height:1.25; color:var(--ink-3); max-width:70px; }
.journey li.done .j-dot { background:var(--index); border-color:var(--index); color:var(--paper-1); }
.journey li.done .j-label { color:var(--ink-2); }
.journey li.now .j-dot { border-color:var(--index); color:var(--index); box-shadow:0 0 0 5px var(--index-soft); }
.journey li.now .j-label { color:var(--index); font-weight:600; }
.journey li.locked .j-dot { border-style:dashed; }
.journey li.j-final .j-dot { border-radius:10px; }
.day-cards { list-style:none; padding:0; margin:0 0 26px; display:flex; flex-direction:column; gap:10px; }
.day-cards .plan-day { padding:14px 16px; border:1px solid var(--rule); border-radius:14px; background:var(--paper-1); border-top:1px solid var(--rule); }
.day-cards .plan-day:last-child { border-bottom:1px solid var(--rule); }
.day-cards .plan-day.is-next { border-color:var(--index); }
.day-cards .plan-day.is-locked { opacity:.6; }
.day-cards .plan-day.is-complete { background:var(--paper-0); }
.chip-status { font:600 11px var(--font-ui); text-transform:uppercase; letter-spacing:.08em; padding:5px 10px; border-radius:999px; flex-shrink:0; }
.chip-status.now { background:var(--index); color:var(--paper-1); }
.chip-status.done { background:var(--index-soft); color:var(--index); }
.chip-status.locked { background:var(--paper-2); color:var(--ink-3); }
.milestone { padding:20px 22px; border-radius:16px; border:1px dashed var(--rule-strong); background:var(--paper-0); }
.milestone h2 { font-size:22px; margin:0 0 6px; }
.milestone p { margin:0; }
.home-foot { margin:14px 0 0; text-align:center; }
@media(max-width:620px) {
  .home-head h1 { font-size:28px; }
  .hero { padding:20px 18px; gap:14px; border-radius:18px; }
  .hero-num { font-size:44px; min-width:52px; }
  .hero h2 { font-size:24px; }
  .hero-cta { width:100%; }
  .journey { grid-template-columns:repeat(8,1fr); margin-bottom:24px; }
  .journey::before { top:15px; }
  .j-dot { width:30px; height:30px; font-size:11px; }
  .j-label { display:none; }
  .journey li.now .j-label, .journey li.j-final .j-label { display:block; font-size:9.5px; }
  .day-cards .plan-day { flex-wrap:wrap; }
  .day-cards .plan-day .btn { margin-left:0; width:100%; }
  .chip-status { margin-left:auto; }
}

/* ---------- ekran wejścia: minimalny ---------- */
.entry-top { justify-content:flex-end; padding:18px 0; }
.entry-center { padding:0 0 40px; }
.entry-box { width:min(100%,380px); }
.entry-box .entry-wordmark { display:block; text-align:center; font-size:44px; margin-bottom:30px; }
.entry-box .entry-wordmark>span { font-size:12px; letter-spacing:.14em; text-transform:uppercase; margin-top:6px; }
.entry-box h1 { font:600 15px var(--font-ui); letter-spacing:.02em; color:var(--ink-2); margin:0 0 12px; }
.entry-box .field { font-size:17px; padding:16px 18px; }
.entry-box .entry-submit { justify-content:center; margin-top:10px; }
.entry-return { margin-top:16px; }
.entry-footer { position:static; margin-top:auto; padding:20px 24px 28px; }
@media(max-width:620px) { .entry-box .entry-wordmark { font-size:38px; } }

/* ---------- bez panelu bocznego: stepper, pomoc, opcje ---------- */
.stepper { padding:14px 32px 0; }
.stepper ol { display:flex; gap:22px; list-style:none; margin:0; padding:0; flex-wrap:wrap; }
.stepper li { display:flex; align-items:center; gap:8px; font:600 11.5px var(--font-ui); color:var(--ink-3); text-transform:uppercase; letter-spacing:.09em; }
.stepper-dot { display:grid; place-items:center; width:24px; height:24px; border-radius:50%; border:1.5px solid var(--rule); font:600 11px var(--font-mono); }
.stepper li.now { color:var(--index); }
.stepper li.now .stepper-dot { border-color:var(--index); background:var(--index); color:var(--paper-1); }
.stepper li.done { color:var(--ink-2); }
.stepper li.done .stepper-dot { background:var(--index-soft); border-color:var(--index-soft); color:var(--index); }
.study-workspace:has(>.app-main:only-child) .app-main { width:100%; max-width:800px; margin:0 auto; }
.answer-options { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; }
.radio-option { min-height:54px; border-radius:12px; border:1.5px solid var(--rule); padding:12px 16px; font-size:15.5px; }
.radio-option:hover { background:var(--paper-0); }
.radio-option:has(input:checked) { border-color:var(--index); background:var(--index-soft); }
.radio-option input { width:18px; height:18px; }
.age-field { max-width:200px; font-size:18px; }
.help-cards { display:grid; gap:12px; margin:24px 0; }
.help-card { display:block; padding:18px 20px; border-radius:14px; border:1px solid var(--rule); background:var(--paper-1); text-decoration:none; color:var(--ink-0); transition:border-color var(--dur-micro) var(--ease); }
.help-card:hover { border-color:var(--index); }
.help-kicker { display:block; font:600 11px var(--font-ui); text-transform:uppercase; letter-spacing:.1em; color:var(--index); }
.help-card strong { display:block; font:600 28px/1.2 var(--font-mono); letter-spacing:.02em; margin:6px 0; }
.help-card .help-mail { font-size:18px; letter-spacing:0; overflow-wrap:anywhere; }
.help-card>span:last-child { display:block; color:var(--ink-2); font-size:14px; }
.help-card.danger { border-color:var(--danger); background:var(--danger-soft); }
.help-card.danger .help-kicker { color:var(--danger); }
.help-block { border:0; padding:0; margin:0; }
@media(max-width:620px) {
  .stepper { padding:12px 16px 0; }
  .stepper ol { gap:12px; }
  .stepper li span:last-child { display:none; }
  .stepper li.now span:last-child { display:inline; }
  .answer-options { grid-template-columns:1fr; }
}

.withdraw-hint { margin-top:40px; padding-top:22px; border-top:1px solid var(--rule); }
.withdraw-hint h2 { font:600 15px var(--font-ui); margin-bottom:6px; }
.withdraw-hint p { font-size:14px; color:var(--ink-2); max-width:56ch; }
.withdraw-hint .btn { margin-top:8px; padding-inline:0; }

/* ---------- materiał grupy B jako kartka, C-SSRS jak kwestionariusz, ekrany końcowe, informacja ---------- */
.reading { align-self:stretch; max-width:none; background:var(--paper-1); border:1px solid var(--rule); border-radius:16px; padding:26px 28px; }
.reading-kicker { display:block; font:600 11px var(--font-ui); text-transform:uppercase; letter-spacing:.1em; color:var(--index); margin-bottom:8px; }
.reading h2 { font-size:28px; margin:0 0 16px; }
.reading p { font-size:16.5px; line-height:1.65; color:var(--ink-1); margin:0 0 14px; max-width:62ch; }
.reading-reflect { margin-top:22px; padding:16px 18px; border-radius:12px; background:var(--index-soft); }
.reading-reflect p { margin:4px 0 6px; color:var(--ink-0); font-weight:500; }
.reading-reflect .hint { display:block; font-size:12.5px; }
.screening .screening-period { display:none; }
.period-chip { display:inline-block; margin:6px 0 18px; padding:6px 12px; border-radius:999px; background:var(--paper-2); color:var(--ink-1); font:600 12px var(--font-ui); letter-spacing:.02em; }
.screening .question { border:0; padding:0; }
.screening .question legend { font:500 clamp(1.3rem,3vw,1.7rem)/1.3 var(--font-display); letter-spacing:-.02em; color:var(--ink-0); margin-bottom:22px; }
.screening .hint { margin-top:18px; }
.end-hero { padding:26px 28px; border-radius:20px; background:var(--index-soft); border:1px solid color-mix(in srgb, var(--index) 28%, transparent); margin-bottom:22px; }
.end-hero h1 { margin-bottom:8px; }
.end-hero .lede { margin:0; }
.info-sections h2 { margin-bottom:6px; }
.info-sections p { margin:0; font-size:15px; }
@media(max-width:620px) { .reading { padding:20px 18px; } .reading h2 { font-size:23px; } }

/* ---------- wejście: ikona motywu, stopka w liniach ---------- */
.theme-btn { width:40px; height:40px; border-radius:50%; border:1px solid var(--rule); background:var(--paper-1); color:var(--ink-1); font-size:17px; cursor:pointer; display:grid; place-items:center; padding:0; }
.theme-btn:hover { background:var(--paper-2); }
.entry-footer { font-size:12px; line-height:1.7; color:var(--ink-3); }
.entry-footer span { display:inline; }
.entry-footer span+span::before { content:' · '; }
.entry-footer .footer-help { display:block; }
.entry-footer .footer-help::before { content:none; }
@media(max-width:620px) {
  .entry-top { padding:14px 0 0; }
  .entry-footer { padding:12px 16px 22px; font-size:12px; }
  .entry-footer span { display:block; }
  .entry-footer span+span::before { content:none; }
  .entry-box { width:100%; }
  .entry-box .entry-wordmark { margin-bottom:26px; }
}

.demo-short { display:none; }
@media(max-width:620px) { .demo-long { display:none; } .demo-short { display:inline; } .demo-notice { padding:7px 16px; font-size:11.5px; } }

.j-today { display:none; }
@media(max-width:620px) { .j-title { display:none; } .j-today { display:block; } }
/* DASS-21 and real network waiting states. No artificial loading delay. */
.boot-screen { min-height:calc(100svh - 110px); display:grid; place-items:center; padding:48px 24px; }
.boot-card { width:min(100%,440px); text-align:center; margin:auto; }
.boot-wordmark { display:block; font:500 clamp(40px,7vw,58px)/1.1 var(--font-display); letter-spacing:-.045em; color:var(--ink-0); }
.boot-card h1 { margin:28px 0 10px; font:600 18px/1.4 var(--font-ui); letter-spacing:0; }
.boot-card p { margin:0 auto; max-width:34ch; font:400 16px/1.6 var(--font-ui); color:var(--ink-2); min-height:3.2em; }
.boot-card .form-actions { justify-content:center; margin-top:24px; flex-wrap:wrap; }
.action-status { position:fixed; bottom:22px; left:50%; transform:translateX(-50%); z-index:100; display:flex; align-items:center; gap:10px; padding:12px 18px; max-width:calc(100vw - 32px); border:1px solid var(--rule); border-radius:50px; background:var(--paper-1); color:var(--ink-1); box-shadow:var(--shadow-overlay); font:500 14px/1.4 var(--font-ui); }
.action-status[hidden] { display:none; }
.q-context { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; margin-bottom:20px; font:600 12px/1.4 var(--font-ui); color:var(--ink-2); }
.q-context span:last-child { padding:5px 10px; border-radius:30px; background:var(--index-soft); color:var(--index); }
.q-instruction-details { margin:18px 0 0; color:var(--ink-2); font:400 14px/1.6 var(--font-ui); }
.q-instruction-details summary { cursor:pointer; width:fit-content; padding:8px 0; text-underline-offset:4px; }
.q-instruction-details summary:hover { color:var(--ink-0); }
.q-instruction-details p { margin:8px 0 16px; padding:16px 18px; border-left:2px solid var(--index); background:var(--paper-0); }
.q-option:has(input:focus-visible) { outline:2px solid var(--index); outline-offset:3px; }
@media (max-width:420px) {
  .app-top { padding-inline:16px; gap:8px; }
  .app-wordmark { font-size:26px; flex-shrink:0; }
  .top-actions { min-width:0; gap:8px; }
  .app-status { min-width:0; white-space:normal; text-align:center; font-size:11px; line-height:1.25; padding:6px 8px; }
  .menu-btn { flex-shrink:0; }
}
.chat-thread .typing { display:flex; align-items:center; gap:12px; max-width:100%; padding:14px 17px; }
.typing-dots { display:flex; gap:4px; flex-shrink:0; align-items:center; }
.typing-label { font:400 13px/1.5 var(--font-ui); color:var(--ink-2); }
@media(max-width:420px) {
  .boot-screen { padding:32px 22px; min-height:calc(100svh - 135px); }
  .boot-card h1 { font-size:17px; }
  .q-context { margin-bottom:14px; }
  .typing-label { font-size:12px; }
}
@media(prefers-reduced-motion:reduce) {
  .typing i { animation:none!important; }
}

/* Pixels depart from each side of the login wordmark; never a loader. */
.entry-brand { width:min(100%,320px); margin:0 auto 30px; padding-top:52px; }
.entry-brand-name { position:relative; }
.entry-box .entry-brand .entry-wordmark { position:relative; z-index:1; margin:0; line-height:1.2; }
.entry-brand-sub { display:block; margin-top:44px; color:var(--ink-2); font:400 12px/1.5 var(--font-ui); letter-spacing:.14em; text-transform:uppercase; }
.entry-mark { position:absolute; top:50%; left:0; width:100%; height:160px; transform:translateY(-50%); overflow:visible; pointer-events:none; }
.entry-pixel { stroke:var(--ink-0); stroke-width:.65px; stroke-opacity:.2; }
.entry-pixel-flight { animation:entry-pixel-flight var(--period) var(--phase) infinite; }
.entry-pixel-0 { --period:12s; --phase:0s; --flight:28; }
.entry-pixel-1 { --period:14s; --phase:-5.6s; --flight:30; }
.entry-pixel-2 { --period:13s; --phase:-2.7s; --flight:24; }
.entry-pixel-3 { --period:15.5s; --phase:-9.8s; --flight:30; }
.entry-pixel-4 { --period:13.5s; --phase:-7.2s; --flight:28; }
.entry-pixel-trail { transform-box:fill-box; transform-origin:center top; animation:entry-pixel-trail var(--period) var(--phase) infinite; }
@keyframes entry-pixel-flight {
  0%,54% { transform:translateY(0); opacity:1; animation-timing-function:cubic-bezier(.55,0,.85,.2); }
  68% { transform:translateY(calc(var(--flight) * -1px)); opacity:0; animation-timing-function:steps(1,end); }
  68.5% { transform:translateY(calc(var(--flight) * .62px)); opacity:0; animation-timing-function:cubic-bezier(.16,1,.3,1); }
  84%,100% { transform:translateY(0); opacity:1; }
}
@keyframes entry-pixel-trail {
  0%,54% { transform:scaleY(1); animation-timing-function:cubic-bezier(.55,0,.85,.2); }
  68% { transform:scaleY(2.4); animation-timing-function:steps(1,end); }
  68.5% { transform:scaleY(.42); animation-timing-function:cubic-bezier(.16,1,.3,1); }
  84%,100% { transform:scaleY(1); }
}
@media (max-height:700px) {
  .entry-brand { padding-top:42px; margin-bottom:24px; }
}
@media (min-width:621px) {
  .entry-top { min-height:76px; }
  .entry-top .theme-btn { position:fixed; top:18px; right:20px; z-index:20; }
}
@media (prefers-reduced-motion:reduce) {
  .entry-pixel-flight, .entry-pixel-trail { animation:none!important; }
}