/* The practice website: the same look as the post page (teal #00838F, slate, emerald, purple), no outside fonts, scripts or icons. */
:root { color-scheme: light; --teal: #00838F; --teal-dark: #00626B; --teal-50: #E3F3F4; --teal-100: #C5E6E9; --orange: #FF9800;
        --bg: #F8F9FA; --s100: #F1F5F9; --s200: #E2E8F0; --s300: #CBD5E1; --s500: #64748B; --s600: #475569; --s700: #334155; --s900: #0F172A;
        --ok: #059669; --bad: #B3261E; --card: #fff; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body { margin: 0; font: 16px/1.6 Inter, 'Segoe UI', system-ui, 'Noto Sans Devanagari', 'Nirmala UI', sans-serif; background: var(--bg); color: var(--s700); -webkit-font-smoothing: antialiased; }
a { color: var(--teal-dark); } img { max-width: 100%; }
svg.i { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.125em; flex: none; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.narrow { max-width: 480px; margin: 0 auto; }
.skip { position: absolute; left: -999px; } .skip:focus { left: 8px; top: 8px; background: #fff; padding: 8px 12px; z-index: 60; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
h1, h2, h3, h4 { color: var(--s900); margin: 0; line-height: 1.25; }
h1 { font-size: clamp(26px, 4vw, 38px); font-weight: 800; letter-spacing: -.015em; } h2 { font-size: 22px; font-weight: 800; margin: 32px 0 12px; } h3 { font-size: 18px; font-weight: 700; margin: 0 0 6px; }
/* header and footer */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--s200); box-shadow: 0 1px 2px rgba(15,23,42,.05); }
.nav .wrap { display: flex; align-items: center; gap: 22px; min-height: 64px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 700; font-size: 20px; letter-spacing: -.01em; color: var(--s900); }
.brand img { width: 34px; height: 34px; border-radius: 8px; }
.links { display: flex; gap: 24px; margin-left: auto; flex-wrap: wrap; align-items: center; font-size: 14px; font-weight: 500; }
.links a { text-decoration: none; color: var(--s600); padding: 6px 0; } .links a:hover { color: var(--teal); } .links a.on { color: var(--teal-dark); font-weight: 700; border-bottom: 2px solid var(--teal); }
.foot { background: var(--s900); color: #94A3B8; padding: 28px 0; margin-top: 48px; font-size: 13px; } .foot .wrap { display: flex; flex-wrap: wrap; gap: 14px 28px; justify-content: space-between; align-items: center; }
.foot a { color: #94A3B8; text-decoration: none; } .foot a:hover { color: #fff; } .foot .brand { color: #fff; font-size: 16px; } .foot .brand img { width: 26px; height: 26px; } .foot nav { display: flex; gap: 16px; }
/* buttons, badges, tags */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--teal); color: #fff; text-decoration: none; padding: 10px 20px; border-radius: 8px; font: inherit; font-size: 14px; font-weight: 700;
       border: 1px solid var(--teal); box-shadow: 0 1px 3px rgba(15,23,42,.18); cursor: pointer; text-align: center; transition: background .15s, transform .15s; }
.btn:hover { background: var(--teal-dark); transform: translateY(-1px); } .btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.btn.alt { background: #fff; color: var(--s700); border-color: var(--s200); box-shadow: none; } .btn.alt:hover { background: var(--bg); border-color: var(--s300); }
.btn.dark { background: var(--s900); border-color: var(--s900); } .btn.small { padding: 6px 12px; font-size: 13px; } .btn.block { display: flex; width: 100%; padding: 12px 16px; }
.badge { display: inline-flex; align-items: center; gap: 6px; border-radius: 99px; padding: 2px 10px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; border: 1px solid transparent; }
.badge.active { background: #D1FAE5; color: #065F46; border-color: #A7F3D0; } .badge.active::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #10B981; animation: pulse 2s infinite; }
.badge.upcoming { background: #FEF3C7; color: #92400E; border-color: #FDE68A; }
@keyframes pulse { 50% { opacity: .35; } } @media (prefers-reduced-motion: reduce) { .badge.active::before { animation: none; } html { scroll-behavior: auto; } }
.tags { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; list-style: none; }
.tags li { border-radius: 4px; padding: 2px 8px; font-size: 12px; font-weight: 500; background: var(--s100); color: var(--s700); }
.tags li.t2 { background: var(--teal-50); color: var(--teal-dark); border: 1px solid var(--teal-100); } .tags li.t3 { background: #FAF5FF; color: #7E22CE; border: 1px solid #F3E8FF; }
.muted { color: var(--s500); } .small { font-size: 14px; } .big { font-size: 24px; font-weight: 700; margin: 2px 0; color: var(--s900); } .price { color: var(--teal-dark); }
.lead { font-size: 16px; color: var(--s600); white-space: pre-line; margin: 0; }
/* hero of a post */
.page { max-width: 1180px; margin: 0 auto; padding: 24px 20px 0; min-height: 55vh; }
.hero { position: relative; background: #fff; border-bottom: 1px solid var(--s200); padding: 28px 0 40px; overflow: hidden; }
.hero::before { content: ''; position: absolute; inset: 0; opacity: .35; background-image: radial-gradient(var(--s200) 1px, transparent 1px); background-size: 24px 24px; }
.hero > * { position: relative; }
.crumbs { font-size: 14px; font-weight: 500; color: var(--s500); margin: 0 0 16px; } .crumbs a { color: var(--s500); text-decoration: none; } .crumbs a:hover { color: var(--teal); } .crumbs .sep { margin: 0 8px; color: var(--s300); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.stack > * + * { margin-top: 18px; }
.facts-box { background: var(--bg); border: 1px solid var(--s200); border-radius: 8px; padding: 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; font-size: 14px; }
.facts-box .k { display: block; color: var(--s500); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; } .facts-box .v { font-weight: 700; color: var(--s900); }
.facts-box .wide { grid-column: 1 / -1; padding-top: 12px; border-top: 1px solid var(--s200); } .facts-box .wide .v { font-weight: 500; }
.notice-card { background: rgba(227,243,244,.6); border: 1px solid var(--teal-100); border-radius: 8px; padding: 14px 16px; display: flex; gap: 12px; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.notice-card .t { display: flex; gap: 12px; align-items: flex-start; } .notice-card .t svg { color: var(--teal); font-size: 20px; margin-top: 2px; } .notice-card h4 { font-size: 14px; } .notice-card p { margin: 2px 0 0; font-size: 12px; color: var(--s600); }
.notice-card .b { display: flex; gap: 8px; flex-wrap: wrap; }
.pill-link { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; font-size: 12px; font-weight: 700; border-radius: 6px; background: #fff; color: var(--teal-dark); border: 1px solid var(--teal-100); text-decoration: none; } .pill-link:hover { background: var(--teal-50); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.fine { color: var(--s500); font-size: 12px; margin: 0; display: flex; gap: 6px; align-items: center; }
.side { background: #fff; border: 1px solid var(--s100); border-radius: 12px; padding: 24px; box-shadow: 0 10px 25px rgba(15,23,42,.08); }
.side h3 { font-size: 16px; border-bottom: 1px solid var(--s100); padding-bottom: 12px; margin-bottom: 16px; } .side .r { display: flex; gap: 12px; } .side .r + .r { margin-top: 16px; }
.dot { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--teal-50); color: var(--teal); font-size: 14px; } .dot.p { background: #FAF5FF; color: #7E22CE; }
.side .l { margin: 0; font-size: 12px; font-weight: 500; color: var(--s500); } .side .v { margin: 0; font-size: 14px; font-weight: 700; color: var(--s900); } .side a { font-size: 11px; font-weight: 700; color: var(--teal); }
/* cards and sections */
.section { margin: 40px 0 8px; } .head { text-align: center; max-width: 640px; margin: 0 auto 28px; } .head .eye { font-size: 14px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--teal); margin: 0; } .head h2 { margin: 4px 0 0; } .head p { margin: 8px 0 0; color: var(--s500); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; margin: 12px 0; }
.card { background: #fff; border: 1px solid var(--s200); border-radius: 12px; padding: 22px; box-shadow: 0 1px 2px rgba(15,23,42,.05); position: relative; overflow: hidden; }
.card.link { display: block; text-decoration: none; color: inherit; transition: border-color .2s, box-shadow .2s; } .card.link:hover { border-color: var(--teal); box-shadow: 0 6px 16px rgba(15,23,42,.08); }
.card.feat::after { content: ''; position: absolute; right: -16px; top: -16px; width: 80px; height: 80px; border-radius: 50%; background: var(--teal-50); } .card > * { position: relative; z-index: 1; }
.card p { margin: 0 0 10px; font-size: 14px; color: var(--s600); } .card ul { list-style: none; padding: 0; margin: 0 0 12px; font-size: 12px; font-weight: 500; color: var(--s500); } .card li { display: flex; gap: 8px; align-items: center; padding: 3px 0; } .card li svg { color: var(--ok); }
.ico { width: 40px; height: 40px; border-radius: 8px; display: grid; place-items: center; background: var(--teal-100); color: var(--teal-dark); margin-bottom: 14px; font-size: 18px; } .ico.p { background: #F3E8FF; color: #7E22CE; } .ico.a { background: #FEF3C7; color: #92400E; } .ico.i { background: #E0E7FF; color: #4338CA; }
.plain { list-style: none; padding: 0; margin: 8px 0 16px; } .plain li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--s100); font-size: 14px; font-weight: 500; } .plain b { color: var(--teal-dark); }
/* the plan list (dark band, white cards) */
.band { background: var(--s900); color: #fff; border-radius: 16px; padding: 36px 20px; margin: 20px 0; } .band h2 { color: #fff; margin: 0 0 6px; text-align: center; } .band .sub { color: #CBD5E1; text-align: center; margin: 0 0 24px; }
.plan-grid { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; }
.plan { background: #fff; color: var(--s700); border-radius: 16px; overflow: hidden; width: 100%; max-width: 330px; box-shadow: 0 20px 40px rgba(0,0,0,.3); display: flex; flex-direction: column; }
.plan .top { padding: 22px 22px 6px; } .plan .price { font-size: 34px; font-weight: 800; letter-spacing: -.02em; color: var(--s900); margin: 8px 0 2px; } .plan .price small { font-size: 13px; font-weight: 500; color: var(--s500); letter-spacing: 0; }
.plan .body { padding: 18px 22px 22px; background: var(--bg); border-top: 1px solid var(--s100); flex: 1; display: flex; flex-direction: column; } .plan ul { list-style: none; padding: 0; margin: 0 0 18px; flex: 1; }
.plan li { display: flex; gap: 8px; padding: 6px 0; font-size: 14px; font-weight: 500; } .plan li svg { color: var(--ok); margin-top: 4px; } .plan li b { margin-left: auto; color: var(--teal-dark); }
.band .note2 { text-align: center; max-width: 560px; margin: 24px auto 0; font-size: 12px; color: #CBD5E1; } .band .note2 b { color: #E2E8F0; }
.pay { display: flex; justify-content: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
/* forms and messages */
.panel { background: #fff; border: 1px solid var(--s200); border-radius: 12px; padding: 28px; box-shadow: 0 10px 25px rgba(15,23,42,.06); }
.stack2 { display: grid; gap: 10px; } .row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 8px 0; } .row.space { justify-content: space-between; }
label { font-weight: 600; display: block; margin-top: 8px; font-size: 14px; color: var(--s900); } label.check { font-weight: 400; display: flex; gap: 8px; align-items: flex-start; color: var(--s600); }
input, select { font: inherit; padding: 10px 12px; border: 1px solid var(--s300); border-radius: 8px; width: 100%; max-width: 420px; background: #fff; color: var(--s900); } input:focus, select:focus { border-color: var(--teal); }
input[type=checkbox] { width: auto; margin-top: 5px; } .row input { width: 110px; }
.note { border: 1px solid var(--s200); border-left: 4px solid var(--teal); background: #fff; border-radius: 8px; padding: 10px 14px; margin: 10px 0; font-size: 14px; }
.note.ok { border-left-color: var(--ok); background: #F0FDF4; } .note.bad { border-left-color: var(--bad); background: #FEF2F2; } .note.info { border-left-color: var(--orange); background: #FFF8E8; }
.table { border-collapse: collapse; width: 100%; max-width: 420px; } .table th, .table td { border: 1px solid var(--s200); padding: 6px 10px; text-align: left; } .table tr.on { background: var(--teal-50); font-weight: 700; }
/* typing test */
.typing-bar { display: flex; align-items: center; gap: 14px; margin: 10px 0; flex-wrap: wrap; } .clock { font-size: 30px; font-variant-numeric: tabular-nums; color: var(--s900); } .clock.low { color: var(--bad); }
.typing-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 18px; align-items: start; }
.passage { background: #fff; border: 1px solid var(--s200); border-radius: 8px; padding: 12px 16px; font-size: 17px; line-height: 1.7; max-height: 70vh; overflow: auto; user-select: none; }
.word { border: 1px solid #C8CCD0; border-radius: 6px; overflow: hidden; background: #E6E6E6; font: 12px/1.2 'Segoe UI', sans-serif; user-select: none; }
.wr-title { display: flex; justify-content: space-between; background: #2B579A; color: #fff; padding: 6px 10px; } .wr-doc { font-weight: 600; }
.wr-tabs { display: flex; gap: 2px; background: #2B579A; padding: 0 6px; overflow: hidden; } .wr-tabs span { color: #fff; padding: 5px 10px; } .wr-tabs span.on { background: #F3F3F3; color: #2B579A; border-radius: 4px 4px 0 0; }
.wr-ribbon { display: flex; background: #F3F3F3; padding: 6px 6px 2px; border-bottom: 1px solid #D0D0D0; overflow: hidden; }
.wr-group { padding: 0 10px; border-right: 1px solid #DADADA; } .wr-parts { display: flex; align-items: center; gap: 5px; min-height: 34px; } .wr-name { text-align: center; color: #555; font-size: 10px; padding-top: 3px; }
.wr-pill { background: #fff; border: 1px solid #D5D5D5; border-radius: 3px; padding: 4px 7px; color: #333; } .wr-pill.big { padding: 8px 12px; } .wr-pill.wide { min-width: 70px; } .wr-pill.sel { border-color: #2B579A; }
.wr-ruler { height: 16px; background: linear-gradient(90deg, #fff 0 8%, #E0E0E0 8% 8.3%, #fff 8.3% 91%, #E0E0E0 91% 91.3%, #fff 91.3%); border-bottom: 1px solid #D0D0D0; }
.wr-canvas { background: #E6E6E6; padding: 14px; } .wr-page { background: #fff; margin: 0 auto; max-width: 680px; min-height: 420px; box-shadow: 0 1px 4px rgba(0,0,0,.35); padding: 28px 34px; }
.wr-text { width: 100%; max-width: none; min-height: 380px; border: 0; padding: 0; margin: 0; outline: none; resize: none; font: 11pt/1.5 Calibri, 'Segoe UI', 'Nirmala UI', 'Mukta', sans-serif; color: #000; border-radius: 0; user-select: text; }
.wr-text.preeti { font-family: Preeti, 'Preeti Normal', sans-serif; font-size: 14pt; } .wr-text:disabled { background: #fff; color: #888; }
.wr-status { display: flex; justify-content: space-between; background: #2B579A; color: #fff; padding: 4px 10px; font-size: 11px; }
.diff .w { padding: 1px 3px; border-radius: 3px; } .diff .wrong { background: #FFE1DD; } .diff .missing { background: #FFF0C2; text-decoration: underline; }
/* voice sessions */
.room-top { display: flex; justify-content: space-between; align-items: center; } .state { font-weight: 700; color: var(--teal-dark); }
.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 10px 0; }
.person { background: #fff; border: 2px solid var(--s200); border-radius: 12px; padding: 10px; display: grid; } .person.on { border-color: var(--teal); background: var(--teal-50); } .person.me { border-style: dashed; }
.captions { background: #fff; border: 1px solid var(--s200); border-radius: 8px; padding: 10px 14px; max-height: 280px; overflow: auto; } .captions p { margin: 4px 0; } .captions p.you { color: var(--teal-dark); }
.meter { width: 160px; height: 10px; background: #E5E7EB; border-radius: 99px; overflow: hidden; } .meter i { display: block; height: 100%; width: 0; background: var(--ok); transition: width .1s; }
.scores { display: grid; gap: 8px; margin: 12px 0; } .score { display: grid; grid-template-columns: 130px 1fr 80px; gap: 10px; align-items: center; } .score.big { font-size: 18px; font-weight: 700; }
.track { background: #E5E7EB; border-radius: 99px; height: 12px; overflow: hidden; } .track i { display: block; height: 100%; background: var(--teal); }
details.card summary { cursor: pointer; font-weight: 600; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } .facts-box { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .typing-grid { grid-template-columns: 1fr; } .wr-page { padding: 14px; } .score { grid-template-columns: 90px 1fr 70px; } .wr-ribbon .wr-group:nth-child(n+3) { display: none; }
  .facts-box { grid-template-columns: 1fr; } .links { gap: 14px; } .brand { font-size: 18px; } .panel { padding: 20px; } }
/* ===== the screens after the post page: header, explore posts, orders, account, tests, sessions, results ===== */
.nav .menu { display: none; margin-left: auto; background: none; border: 0; padding: 8px; font-size: 22px; color: var(--s600); cursor: pointer; }
.links .who { display: inline-flex; align-items: center; gap: 8px; } .links .who.on { border-bottom: 2px solid var(--teal); }
.av { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--teal-50); color: var(--teal-dark); border: 1px solid var(--teal-100); font-size: 11px; font-weight: 700; }
.links a.sep { border-left: 1px solid var(--s200); padding-left: 24px; }
.page.slim { max-width: 880px; } .page > h1 + p { margin: 8px 0 0; }
.btn.outline { background: #fff; color: var(--teal-dark); border: 2px solid var(--teal); box-shadow: none; } .btn.outline:hover { background: var(--teal-50); }
.btn svg { font-size: 1.05em; } label.inline { display: inline; margin: 0; } .narrow.wide { max-width: 760px; }
.note { display: flex; gap: 10px; align-items: flex-start; } .note p { margin: 0 0 4px; } .note > svg { flex: none; margin-top: 3px; font-size: 18px; }
.note.tip { background: #EFF6FF; border-color: #DBEAFE; border-left-color: #60A5FA; color: #1E3A8A; } .note.tip > svg { color: #3B82F6; }
.note.have { align-items: center; } .note.have > svg { color: var(--ok); font-size: 22px; } .note.have b, .note.have span { display: block; } .note.have span { font-size: 13px; color: #047857; }
.mini { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: var(--s100); color: var(--s600); }
.mini.green { background: #D1FAE5; color: #047857; } .mini.blue { background: #DBEAFE; color: #1D4ED8; } .mini.purple { background: #F3E8FF; color: #7E22CE; } .mini.bad { background: #FFE4E6; color: #BE123C; } .mini.grey { background: var(--s100); color: var(--s600); }
/* explore posts */
.pg-head { max-width: 760px; margin-bottom: 8px; } .pg-head .note { margin-top: 16px; }
.plist { margin-top: 28px; } .ptitle { display: flex; align-items: center; gap: 10px; font-size: 20px; margin: 0 0 16px; } .ptitle span { background: var(--s200); color: var(--s600); border-radius: 99px; font-size: 12px; padding: 1px 9px; }
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 24px; }
.pcard { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--s200); border-radius: 12px; padding: 20px; text-decoration: none; color: inherit; box-shadow: 0 1px 2px rgba(15,23,42,.05); transition: border-color .2s, box-shadow .2s; }
.pcard:hover { border-color: var(--teal); box-shadow: 0 8px 20px rgba(15,23,42,.1); } .pcard.mine { border-color: var(--teal-100); box-shadow: 0 0 0 1px var(--teal-100); }
.ptop { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 8px; min-height: 22px; }
.com { display: inline-flex; align-items: center; gap: 4px; border-radius: 4px; padding: 2px 8px; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: var(--s100); color: var(--s600); }
.com.c-teal { background: var(--teal-50); color: var(--teal-dark); } .com.c-amber { background: #FFFBEB; color: #B45309; } .com.c-emerald { background: #ECFDF5; color: #047857; } .com.c-ok { background: #D1FAE5; color: #065F46; }
.pcard h2 { font-size: 18px; margin: 0 0 4px; line-height: 1.35; } .pcard:hover h2 { color: var(--teal); }
.blurb { flex: 1; font-size: 12px; color: var(--s500); margin: 0 0 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rr-list { padding-top: 14px; border-top: 1px solid var(--s100); display: grid; gap: 8px; } .rr { display: flex; gap: 8px; font-size: 12px; color: var(--s600); } .ri { color: var(--s500); width: 16px; flex: none; margin-top: 2px; }
.rr b { display: block; } .rd { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.bd { border-radius: 4px; padding: 1px 6px; font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; } .bd.now { background: #D1FAE5; color: #047857; } .bd.soon { background: #FEF3C7; color: #B45309; } .bd.later { background: #DBEAFE; color: #1D4ED8; }
.pfoot { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--s100); font-size: 14px; } .pfoot b { color: var(--s900); }
.go { color: var(--teal); font-weight: 700; display: inline-flex; gap: 6px; align-items: center; }
/* a post you hold, the practice tiles, more credits */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 20px; }
.tile { background: #fff; border: 1px solid var(--s200); border-radius: 12px; padding: 20px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; box-shadow: 0 1px 2px rgba(15,23,42,.05); transition: border-color .2s; } .tile:hover { border-color: var(--teal); }
.tile .tt { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; } .tile h3 { margin: 0; font-size: 18px; } .tile p { margin: 0; font-size: 14px; color: var(--s600); max-width: 34ch; }
.credits { background: #fff; border: 1px solid var(--s200); border-radius: 12px; padding: 28px; text-align: center; max-width: 760px; margin: 40px auto 0; box-shadow: 0 1px 2px rgba(15,23,42,.05); } .credits p { color: var(--s600); font-size: 14px; }
.prices { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 36px; margin: 18px 0 22px; } .pr { display: grid; justify-items: center; gap: 2px; margin: 0; font-weight: 400; } .pr b { font-size: 18px; color: var(--s900); } .pr span { font-size: 12px; color: var(--s500); } .pr input { width: 90px; text-align: center; margin-top: 6px; }
/* paying: the app's own logos, then the QR codes saved in the admin */
.card.sum { margin-top: 16px; } .paylist { margin: 22px 0 6px; } .paylist h2 { font-size: 18px; margin: 0 0 12px; }
.paybtn { display: flex; align-items: center; gap: 14px; width: 100%; background: #fff; border: 1px solid var(--s200); border-radius: 12px; padding: 10px 16px 10px 10px; margin-bottom: 10px; font: inherit; color: var(--s900); cursor: pointer; text-align: left; transition: border-color .15s, box-shadow .15s; }
.paybtn:hover { border-color: var(--teal); box-shadow: 0 4px 12px rgba(15,23,42,.08); } .paybtn:disabled { opacity: .6; cursor: wait; } .paybtn b { flex: 1; font-size: 15px; } .paybtn > svg { color: var(--s500); }
.pm { display: flex; align-items: center; justify-content: center; width: 96px; height: 46px; background: #fff; border: 1px solid var(--s100); border-radius: 8px; flex: none; } .pm img { height: 26px; width: auto; max-width: 84px; object-fit: contain; }
.qrmark { color: var(--teal); font-size: 26px; display: grid; }
.pay .paychip { display: inline-flex; align-items: center; gap: 6px; background: #fff; color: var(--s900); border-radius: 6px; padding: 4px 10px; font-size: 11px; font-weight: 700; } .paychip img { height: 18px; width: auto; } .paychip .qrmark { font-size: 16px; }
.transfer { background: #fff; border: 1px solid var(--s200); border-radius: 12px; padding: 22px; margin: 20px 0; } .transfer h2 { margin: 0 0 8px; display: flex; gap: 8px; align-items: center; font-size: 20px; color: var(--teal-dark); } .transfer p { font-size: 14px; color: var(--s600); }
.amt b { font-size: 22px; color: var(--teal-dark); } .qrs { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; margin: 16px 0; } .qrfig { margin: 0; text-align: center; }
.qrfig img { width: 220px; height: 220px; object-fit: contain; border: 1px solid var(--s200); border-radius: 12px; background: #fff; padding: 8px; } .qrfig figcaption { font-size: 13px; font-weight: 600; color: var(--s600); margin-top: 6px; } .transfer input[type=file] { padding: 8px; }
/* my orders */
.orders { display: grid; gap: 16px; margin-top: 20px; }
.order { display: block; background: #fff; border: 1px solid var(--s200); border-radius: 12px; overflow: hidden; text-decoration: none; color: inherit; box-shadow: 0 1px 2px rgba(15,23,42,.05); transition: box-shadow .2s; } .order:hover { box-shadow: 0 6px 16px rgba(15,23,42,.1); }
.ob { padding: 20px 22px; } .ot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .ot h2 { margin: 0; font-size: 16px; line-height: 1.4; } .op { font-size: 18px; font-weight: 800; color: var(--s900); white-space: nowrap; }
.of { margin: 8px 0 0; font-size: 14px; font-weight: 500; color: var(--s600); display: flex; gap: 8px; align-items: center; } .of svg { color: var(--s500); }
.os { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; align-items: center; padding: 12px 22px; border-top: 1px solid var(--s100); font-size: 14px; font-weight: 600; } .os span { display: flex; gap: 8px; align-items: center; } .os time { font-size: 12px; font-weight: 500; color: var(--s500); }
.order.wait .os { background: #FFFBEB; color: #B45309; } .order.ok .os { background: #ECFDF5; color: #047857; } .order.bad .os, .order.off .os { background: var(--bg); color: #E11D48; } .order.off { opacity: .85; }
/* my account */
.acct { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 32px; align-items: start; } .acct .panel h1 { font-size: 28px; } .nm { font-weight: 600; margin: 16px 0 2px; } .acct h2 { font-size: 18px; } h2.first { margin-top: 0; }
.dev { display: grid; gap: 8px; font-size: 14px; padding: 10px 0; border-bottom: 1px solid var(--s100); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 20px; margin-top: 16px; }
.stat { background: #fff; border: 1px solid var(--s200); border-radius: 12px; padding: 20px; display: flex; flex-direction: column; box-shadow: 0 1px 2px rgba(15,23,42,.05); transition: border-color .2s; } .stat:hover { border-color: var(--teal-100); }
.sh { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 14px; } .sn { display: flex; align-items: center; gap: 10px; } .sn .ico { margin: 0; } .sn h3 { margin: 0; font-size: 17px; }
.kv { display: grid; gap: 10px; flex: 1; margin-bottom: 16px; } .kv div { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; } .kv span { color: var(--s500); font-weight: 500; } .kv b { color: var(--s900); text-align: right; }
.more { display: flex; justify-content: space-between; align-items: center; padding-top: 14px; border-top: 1px solid var(--s100); font-size: 14px; font-weight: 700; text-decoration: none; color: var(--teal); }
.mine-list { display: grid; gap: 10px; } .mrow { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--s200); border-radius: 10px; padding: 12px 16px; text-decoration: none; color: inherit; } .mrow:hover { border-color: var(--teal); } .mrow b { display: block; color: var(--s900); } .mrow small { color: var(--s500); }
/* typing tests: list */
.filters { background: #fff; border: 1px solid var(--s200); border-radius: 12px; margin: 20px 0; overflow: hidden; box-shadow: 0 1px 2px rgba(15,23,42,.05); }
.tabs { display: flex; gap: 28px; padding: 0 22px; border-bottom: 1px solid var(--s200); } .tab { background: none; border: 0; border-bottom: 2px solid transparent; padding: 14px 0; margin-bottom: -1px; font: inherit; font-size: 14px; font-weight: 500; color: var(--s500); cursor: pointer; } .tab:hover { color: var(--s700); }
.tab.on { color: var(--teal-dark); font-weight: 700; border-bottom-color: var(--teal); } .tab small { margin-left: 6px; background: var(--s100); border-radius: 99px; padding: 0 7px; font-size: 11px; }
.pillbar { padding: 14px 22px; background: rgba(248,249,250,.7); } .pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { font: inherit; font-size: 12px; font-weight: 600; padding: 6px 14px; border-radius: 99px; border: 1px solid var(--s300); background: #fff; color: var(--s600); cursor: pointer; } .pill:hover { background: var(--s100); } .pill.on { background: #1E293B; border-color: #1E293B; color: #fff; font-weight: 700; }
.tests { display: grid; gap: 16px; } .tset { background: #fff; border: 1px solid var(--s200); border-radius: 12px; padding: 20px; box-shadow: 0 1px 2px rgba(15,23,42,.05); transition: border-color .2s, box-shadow .2s; } .tset:hover { border-color: var(--teal); box-shadow: 0 6px 16px rgba(15,23,42,.08); }
.tmain { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; } .tinfo { flex: 1; min-width: 240px; } .tinfo .tt { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .tinfo h3 { margin: 0; font-size: 18px; }
.meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--s500); align-items: center; margin: 8px 0; } .meta span { display: inline-flex; align-items: center; gap: 5px; } .meta .lang { background: var(--s100); border-radius: 4px; padding: 1px 7px; font-weight: 700; color: var(--s700); text-transform: uppercase; letter-spacing: .04em; font-size: 11px; }
.best { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; padding: 6px 10px; background: var(--teal-50); border: 1px solid var(--teal-100); border-radius: 6px; color: var(--teal-dark); font-size: 12px; font-weight: 600; }
.linkbtn { margin-top: 12px; background: none; border: 0; padding: 0; font: inherit; font-size: 13px; font-weight: 700; color: var(--teal-dark); cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.hist { margin-top: 10px; border-top: 1px solid var(--s100); padding-top: 6px; display: grid; } .hrow { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; padding: 9px 4px; border-bottom: 1px solid var(--s100); font-size: 13px; text-decoration: none; color: var(--s600); }
.hrow:hover { background: var(--bg); } .hrow b { color: var(--s900); } .hrow .hd { min-width: 150px; } .hrow > svg:last-child { margin-left: auto; color: var(--s500); }
.empty { border: 1px dashed var(--s300); background: #fff; border-radius: 12px; padding: 40px 20px; display: grid; justify-items: center; gap: 6px; color: var(--s500); font-size: 13px; } .empty svg { font-size: 26px; } .empty b { color: var(--s900); font-size: 14px; }
/* typing test: the page that looks like Word */
.typing-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px; } .tcol h2 { margin: 0 0 10px; font-size: 20px; } .passage { border-radius: 0; box-shadow: 0 1px 2px rgba(15,23,42,.05); min-height: 520px; font-size: 15px; line-height: 1.8; color: var(--s700); } .passage p { margin: 0 0 12px; }
.word { border: 1px solid #CBD5E1; border-radius: 2px; background: #fff; box-shadow: 0 1px 3px rgba(15,23,42,.1); font: 12px/1.2 'Segoe UI', sans-serif; }
.wr-title { align-items: center; padding: 0 10px; height: 34px; } .wr-quick, .wr-win { display: flex; gap: 12px; align-items: center; font-size: 13px; opacity: .92; } .wr-doc { font-size: 13px; flex: 1; text-align: center; }
.wr-tabs { background: #F3F2F1; padding: 4px 0 0; gap: 0; } .wr-tabs span { color: #333; padding: 5px 14px; } .wr-tabs span.file { background: #2B579A; color: #fff; } .wr-tabs span.on { background: #fff; color: #2B579A; font-weight: 600; border-radius: 0; box-shadow: inset 0 -1px 0 #E1DFDD; }
.wr-ribbon { background: #fff; height: 92px; padding: 0 6px; align-items: stretch; border-bottom: 1px solid #D0D0D0; }
.wr-group { position: relative; padding: 6px 12px 20px; border-right: 1px solid #D5D5D5; } .wr-name { position: absolute; left: 0; right: 0; bottom: 3px; font-size: 10px; color: #6B6B6B; padding: 0; }
.wr-parts { height: 100%; gap: 10px; } .wr-group.font .wr-parts, .wr-group.para .wr-parts { flex-direction: column; align-items: flex-start; justify-content: center; gap: 8px; } .wr-line { display: flex; align-items: center; gap: 4px; }
.wr-big { display: grid; justify-items: center; gap: 4px; font-size: 11px; color: #222; } .wr-big svg { font-size: 24px; color: #555; } .wr-small { display: grid; gap: 4px; font-size: 11px; color: #222; } .wr-small span { display: flex; gap: 6px; align-items: center; } .wr-small svg { color: #666; }
.wr-pill { display: inline-flex; align-items: center; gap: 8px; justify-content: space-between; min-width: 50px; padding: 3px 7px; border-radius: 0; background: #fff; border: 1px solid #C8C6C4; color: #333; } .wr-group.font .wr-pill:first-child { min-width: 110px; }
.wr-tool { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; font-size: 13px; color: #333; } .wr-tool.sel { background: #E1DFDD; border: 1px solid #C8C6C4; } .wr-tool.red { border-bottom: 3px solid #E11D48; height: 22px; font-weight: 700; }
.wr-title .wr-tool, .wr-title svg { color: #fff; }
.wr-group.styles { flex: 1; min-width: 150px; border-right: 0; } .wr-style { display: grid; justify-items: center; align-content: center; gap: 3px; width: 70px; height: 50px; border: 1px solid transparent; color: #666; font-size: 10px; } .wr-style b { font-size: 12px; color: #222; font-weight: 400; }
.wr-style.sel { border-color: #9DB7E0; background: #fff; } .wr-style.head b { color: #2B579A; font-weight: 600; font-size: 14px; }
.wr-canvas { background: #E1DFDD; padding: 18px; } .wr-page { max-width: 760px; min-height: 520px; padding: 40px 48px; } .wr-text { min-height: 460px; }
.wr-status { justify-content: flex-start; gap: 18px; font-size: 11px; align-items: center; } .wr-status span { display: inline-flex; gap: 5px; align-items: center; } .wr-status .wr-zoom { margin-left: auto; }
/* typing test: the result */
.tresult { max-width: 960px; margin: 0 auto; } .tresult h1 { margin-bottom: 20px; }
.stats3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 20px; margin-bottom: 20px; }
.bs { background: #fff; border: 1px solid var(--s200); border-radius: 12px; padding: 20px; text-align: center; display: flex; flex-direction: column; gap: 8px; justify-content: center; box-shadow: 0 1px 2px rgba(15,23,42,.05); } .bs h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--s500); margin: 0; }
.num { font-size: 40px; font-weight: 900; color: var(--s900); line-height: 1.1; } .num small { font-size: .55em; font-weight: 700; color: var(--s300); }
.wchip { display: flex; gap: 8px; align-items: center; border-radius: 6px; padding: 5px 10px; font-size: 14px; font-weight: 700; } .wchip.ok { background: #ECFDF5; color: #047857; } .wchip.bad { background: #FFF1F2; color: #BE123C; } .wchip.off { background: var(--s100); color: var(--s600); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 24px; } .two h2 { margin: 0 0 12px; font-size: 20px; }
.mtable { border-collapse: collapse; width: 100%; background: #fff; border: 1px solid var(--s200); } .mtable th { text-align: left; background: var(--bg); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--s500); padding: 10px 16px; } .mtable td { padding: 9px 16px; font-size: 14px; border-top: 1px solid var(--s100); } .mtable td:last-child { font-weight: 700; color: var(--s900); }
.mtable tr.lo { background: #FEF2F2; } .mtable tr.md { background: #FFFBEB; } .mtable tr.hi { background: #ECFDF5; } .mtable tr.now { box-shadow: inset 4px 0 0 var(--bad); font-weight: 700; } .mtable tr.now.lo { background: #FEE2E2; } .mtable tr.now.md { background: #FDE68A; box-shadow: inset 4px 0 0 #D97706; } .mtable tr.now.hi { background: #A7F3D0; box-shadow: inset 4px 0 0 var(--ok); }
.diff { background: #fff; border: 1px solid var(--s200); padding: 18px 20px; font-size: 18px; line-height: 2; margin: 0 0 12px; min-height: 150px; } .diff .ok { color: #047857; font-weight: 700; background: #ECFDF5; } .diff .wrong { background: #FFE4E6; color: #BE123C; } .diff .missing { background: none; color: var(--s500); text-decoration: none; }
.legend { display: flex; gap: 16px; font-size: 12px; color: var(--s500); margin: 0; } .legend span::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; } .dot-ok::before { background: #10B981; } .dot-bad::before { background: #F43F5E; } .dot-off::before { background: var(--s300); }
.actions.top { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--s200); }
/* interview and discussion */
.vintro { max-width: 760px; } .vintro .sub { margin: 0 0 6px; font-weight: 500; color: var(--s500); font-size: 14px; } .vintro h1 { font-size: clamp(30px, 5vw, 46px); font-weight: 900; margin-bottom: 12px; }
.bullets { padding-left: 20px; margin: 16px 0 22px; display: grid; gap: 8px; font-size: 15px; color: var(--s700); } .bullets li::marker { color: var(--s300); }
.vpast { max-width: 760px; border-top: 1px solid var(--s200); margin-top: 36px; padding-top: 28px; } .vpast h2 { margin: 0 0 16px; font-size: 20px; } .attempts { display: grid; gap: 12px; }
.attempt { background: #fff; border: 1px solid var(--s200); border-radius: 12px; padding: 16px 18px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; box-shadow: 0 1px 2px rgba(15,23,42,.05); }
.an { display: flex; gap: 14px; align-items: center; } .an .num { width: 40px; height: 40px; border-radius: 50%; background: var(--s100); color: var(--s500); display: grid; place-items: center; font-size: 14px; font-weight: 700; } .an h3 { margin: 0; font-size: 16px; } .an p { margin: 2px 0 0; display: flex; gap: 6px; align-items: center; }
.as { display: flex; gap: 20px; align-items: center; } .sc { text-align: right; } .sc .k { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--s500); } .sc .v { font-size: 20px; font-weight: 900; } .sc .v small { font-size: 13px; color: var(--s300); }
.v.good { color: var(--ok); } .v.mid { color: #B45309; } .v.low { color: #E11D48; }
.fb { display: inline-flex; gap: 8px; align-items: center; background: var(--teal-50); color: var(--teal-dark); font-weight: 700; font-size: 14px; padding: 8px 14px; border-radius: 8px; text-decoration: none; } .fb:hover { background: var(--teal-100); }
.clock.big { font-size: clamp(26px, 4vw, 38px); font-weight: 700; } .state.pulse { font-size: 17px; margin: 8px 0 16px; animation: pulse 2s infinite; }
.people { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin: 12px 0 28px; } .person { border-radius: 12px; padding: 18px; gap: 10px; align-content: space-between; min-height: 96px; box-shadow: 0 1px 2px rgba(15,23,42,.05); } .person b { font-size: 17px; color: var(--s900); }
.said { font-size: 22px; margin: 0 0 14px; } .captions { padding: 20px 24px; max-height: 360px; border-radius: 12px; box-shadow: 0 1px 2px rgba(15,23,42,.05); } .captions p { margin: 8px 0; } .captions p.you { font-weight: 700; }
.microw { display: flex; align-items: center; gap: 12px; margin: 18px 0; } .live { min-height: 1.4em; }
.vresult, .tresult { padding-bottom: 12px; } .vresult { max-width: 960px; margin: 0 auto; }
.rgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin: 20px 0; } .rs { background: #fff; border: 1px solid var(--s200); border-radius: 12px; padding: 18px; text-align: center; position: relative; overflow: hidden; box-shadow: 0 1px 2px rgba(15,23,42,.05); }
.rs h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--s500); margin: 0 0 8px; } .rs .num { font-size: 34px; } .rs.low .num { color: #E11D48; } .rs.mid .num { color: #B45309; } .rs.good .num { color: var(--ok); }
.rs.main::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; } .rs.main.low::before { background: #F43F5E; } .rs.main.mid::before { background: #F59E0B; } .rs.main.good::before { background: #10B981; } .rs.main.low { border-color: #FECDD3; } .rs.main.good { border-color: #A7F3D0; }
.summary { background: var(--s100); border: 1px solid var(--s200); border-radius: 12px; padding: 20px 24px; margin: 20px 0; } .summary h2 { margin: 0 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--s700); display: flex; gap: 8px; align-items: center; } .summary p { margin: 0; font-size: 15px; color: var(--s900); }
.crit { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; } .cr { background: #fff; border: 1px solid var(--s200); border-radius: 10px; padding: 14px 16px; } .cr h3 { font-size: 14px; color: var(--s600); margin: 0 0 4px; font-weight: 600; } .cr .num { font-size: 22px; font-weight: 800; }
.two2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 28px 0; } .lbox { background: #fff; border: 1px solid var(--s200); border-radius: 12px; padding: 22px; box-shadow: 0 1px 2px rgba(15,23,42,.05); } .lbox h3 { display: flex; gap: 8px; align-items: center; font-size: 18px; margin: 0 0 14px; }
.lbox.good h3 svg { color: #10B981; } .lbox.bad h3 svg { color: #F43F5E; } .lbox ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; } .lbox li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; } .lbox li svg { margin-top: 5px; flex: none; } .lbox.good li svg { color: #10B981; } .lbox.bad li svg { color: #FB7185; }
.ans { font-size: 24px; margin: 36px 0 16px; } .reviews { display: grid; gap: 24px; } .rev { background: #fff; border: 1px solid var(--s200); border-radius: 12px; overflow: hidden; box-shadow: 0 1px 2px rgba(15,23,42,.05); }
.rh { background: var(--bg); border-bottom: 1px solid var(--s200); padding: 16px 20px; display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; flex-wrap: wrap; } .rh p { margin: 0; flex: 1; min-width: 220px; font-style: italic; font-weight: 500; color: var(--s900); font-size: 15px; line-height: 1.6; } .rh p svg { color: var(--s300); margin-right: 6px; }
.pscore { font-weight: 700; font-size: 14px; padding: 4px 12px; border-radius: 6px; white-space: nowrap; } .pscore.low { background: #FFE4E6; color: #BE123C; } .pscore.mid { background: #FEF3C7; color: #92400E; } .pscore.good { background: #D1FAE5; color: #047857; }
.rb { padding: 20px; display: grid; gap: 18px; } .fb2 { border-radius: 8px; padding: 14px 16px; font-size: 15px; display: flex; gap: 10px; } .fb2 svg { flex: none; margin-top: 4px; } .fb2.low { background: #FFF1F2; border: 1px solid #FFE4E6; color: #881337; } .fb2.mid { background: #FFFBEB; border: 1px solid #FEF3C7; color: #78350F; } .fb2.good { background: #ECFDF5; border: 1px solid #D1FAE5; color: #064E3B; }
.rb h4 { font-size: 14px; margin: 0 0 10px; color: var(--s700); } .check { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; } .check li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--s600); } .check li svg { margin-top: 4px; color: var(--s300); }
@media (prefers-reduced-motion: reduce) { .state.pulse { animation: none; } }
@media (max-width: 900px) { .acct, .two, .two2, .typing-grid { grid-template-columns: 1fr; } .passage { min-height: 0; max-height: 40vh; } }
@media (max-width: 760px) {
  .nav .menu { display: inline-flex; } .nav .wrap { gap: 8px; } .links { display: none; width: 100%; flex-direction: column; align-items: flex-start; gap: 4px; margin: 0; padding: 4px 0 12px; } .links.open { display: flex; } .links a.sep { border-left: 0; padding-left: 0; }
  .tabs { gap: 20px; padding: 0 16px; } .pillbar { padding: 12px 16px; } .wr-ribbon .wr-group.styles { display: none; } .wr-page { padding: 20px 18px; } .as { width: 100%; justify-content: space-between; }
}