/* Cloud theme: local system fonts, light surfaces and quiet motion. */
:root {
  font-family: "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
  color: #283c50;
  background: #eef3fa;
  --ink: #283c50;
  --muted: #5d7084;
  --line: rgba(112, 139, 166, .18);
  --glass: linear-gradient(135deg, rgba(255,255,255,.76), rgba(255,255,255,.27));
}
body { isolation: isolate; }
.sky {
  position: fixed;
  inset: 0;
  height: 100lvh;
  filter: none;
  pointer-events: none;
  background:
    radial-gradient(ellipse 68% 30% at 19% 2%, rgba(255,255,255,.97) 5%, transparent 80%),
    radial-gradient(ellipse 62% 35% at 91% 27%, rgba(255,255,255,.9), transparent 76%),
    radial-gradient(ellipse 82% 42% at -8% 50%, #d1edfc 0%, transparent 75%),
    radial-gradient(ellipse 75% 45% at 104% 74%, #e1dcf6 0%, transparent 74%),
    radial-gradient(ellipse 75% 24% at 29% 100%, #fff4ed, transparent 85%),
    linear-gradient(155deg, #e1edf9 0%, #edf5fb 43%, #eef0fa 75%, #f4f2f6 100%);
}
h1, h2, h3, .simple-wrap .intro h1 {
  font-family: "Segoe UI Variable Display", "Segoe UI", -apple-system, sans-serif;
  font-weight: 400;
  letter-spacing: -.035em;
}
h1, .simple-wrap .intro h1 { line-height: 1.17; }
h2 { line-height: 1.3; }
.eyebrow { font-size: 10px; letter-spacing: .19em; font-weight: 600; color: #58738d; }
.intro p { font-weight: 350; line-height: 1.75; }
.mobile-top {
  border: 0;
  border-radius: 28px;
  background: rgba(244,248,253,.27);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  padding: 10px 8px;
  margin-bottom: 42px;
}
.mobile-top .brand { font-weight: 450; letter-spacing: .025em; color: #536b80; }
.profile-label { font-weight: 500; color: #4d6881; padding-right: 8px; }
.menu-toggle {
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.8);
  background: var(--glass);
  box-shadow: inset 0 1px 1px #fff, 0 5px 16px #57758c0b;
  font-size: 22px;
  font-weight: 300;
}
.card, .card.soft, .profile-card {
  background: var(--glass);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 32px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 15px 45px rgba(75,103,141,.045);
}
.simple-lesson { padding: 32px; }
.lesson-ru { font-weight: 350; line-height: 1.65; color: #3b5165; margin: 22px 0; }
.lesson-example {
  background:
    radial-gradient(ellipse at 92% 0%, #ffffffd9, transparent 64%),
    linear-gradient(145deg, #ffffffad, #e0edf9a1 52%, #e5e4f5a6);
  border: 1px solid #ffffffb8;
  border-radius: 30px;
  padding: 26px;
  box-shadow: inset 0 1px 1px #fff, 0 12px 35px #5d7d9b0b;
}
.lesson-example > .small { color: #516b83; font-size: 12px; }
.lesson-example strong { font-weight: 550; }
.lesson-en, .thought-frame, .episode-reference {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  color: #294d6e;
  font-size: 28px;
  line-height: 1.5;
  letter-spacing: -.025em;
}
.lesson-en { margin: 20px 0 24px; }
.primary {
  background: linear-gradient(160deg, #587d9e 0%, #355d80 55%, #2c4e70 100%);
  border: 1px solid #31577580;
  border-radius: 22px;
  box-shadow: inset 0 1px 0 #ffffff59, 0 7px 20px #365b7c20;
  font-weight: 500;
}
.listen-button, .lesson-variant [data-action^="listen"], .thought-step [data-action="episode-step"] {
  background: linear-gradient(155deg, #6587a5, #3d6286)!important;
  border: 1px solid #507493!important;
  border-radius: 18px!important;
  box-shadow: inset 0 1px 0 #ffffff66, 0 4px 12px #50749412;
  color: white;
  font-weight: 500;
}
.slow-button, .secondary, .oral-recorder .secondary {
  background: linear-gradient(145deg, #ffffffb8, #ffffff45);
  border: 1px solid #ffffffd1;
  border-radius: 18px;
  color: #3f5e7b;
  box-shadow: inset 0 1px 0 #fff, 0 4px 12px #45688408;
  font-weight: 450;
}
.finish-lesson { margin: 24px 0 10px; min-height: 54px; }
.wide { background: transparent; border-color: transparent; box-shadow: none; font-size: 13px; }
.badge { background: #ffffff70; color: #4c657b; font-size: 11px; font-weight: 450; }
.badge.good { background: #e2efe98a; color: #446b60; }
.badge.neutral { background: #edf0f580; color: #596e80; }
.oral-instruction { font-weight: 350; font-size: 14px; line-height: 1.75; }
.source-link { text-decoration-color: #91a8bb88; text-underline-offset: 5px; font-size: 12px; color: #5d7388; }
.oral-recorder {
  background: transparent!important;
  border: 0!important;
  border-top: 1px solid var(--line)!important;
  border-radius: 0!important;
  box-shadow: none!important;
  padding: 26px 0 8px!important;
  margin-top: 30px!important;
}
.oral-recorder h2 { font-weight: 450; margin-bottom: 12px; }
.learn-more-panel {
  background: linear-gradient(125deg, #fff9ee94, #ffffff40);
  border: 1px solid #ffffffa8;
  border-radius: 24px;
  box-shadow: inset 0 1px 0 #ffffffa6;
  padding: 19px;
  color: #5d5d61;
}
.learn-more-panel strong { font-weight: 500; }
.learn-more-panel small { color: #6b6b73; }
.connection-panel {
  background: linear-gradient(135deg, #e2f0e99c, #f6faf77d 45%, #e7f1f48a);
  border: 1px solid #ffffffa6;
  border-radius: 26px;
  box-shadow: inset 0 1px 0 #ffffffb3;
  margin: 28px 0;
  padding: 24px;
}
.connection-line { border-color: #839e9729; }
.variant-disclosure { border: 0; border-block: 1px solid var(--line); border-radius: 0; background: transparent; padding: 14px 0; }
.variant-disclosure > summary { font-weight: 450; font-size: 14px; }
.lesson-variant { border-left-width: 1px; }
.thought-step { margin: 30px 0; }
.thought-step details { background: #ffffff45; border-radius: 20px; padding: 16px; }
.nav {
  background: linear-gradient(125deg, #ffffffc9, #f5f8ffb5 60%, #ffffff96);
  border: 1px solid #ffffffe6;
  border-radius: 29px;
  padding: 6px;
  box-shadow: inset 0 1px 1px white, 0 12px 40px #52688c20;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
.nav button { border-radius: 23px; color: #546b82; font-weight: 400; }
.nav button.active {
  background: linear-gradient(150deg, #d9e8f7cf, #ecf3fc9e);
  color: #2a526f;
  box-shadow: inset 0 1px 0 #ffffffcf;
}
.library-sections { background: #f0f5fb4d; border-radius: 24px; backdrop-filter: blur(16px); gap: 6px; padding: 5px; }
.library-sections a { background: #ffffff7a; border-color: #ffffff8c; border-radius: 20px; font-size: 13px; }
.simple-wrap .lesson-choice { background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; padding: 24px 4px; }
.lesson-choice strong { font-weight: 400; }
.side-drawer {
  background: radial-gradient(ellipse at 0% 0%, #fff, transparent 55%), linear-gradient(160deg, #ebf3fcf5, #ecebf7f5 70%, #f8f2edf5);
  border-radius: 0 34px 34px 0;
  border-right: 1px solid #fff;
  box-shadow: 15px 0 65px #3d587d26;
}
.side-drawer::backdrop { background: #334d6b38; backdrop-filter: blur(8px); }
.side-drawer > button { font-weight: 400; border-color: #8099b326; }
.drawer-profile { padding: 14px 0 20px; }
.drawer-profile .avatar { width: 40px; height: 40px; background: var(--glass); border: 1px solid white; box-shadow: inset 0 1px 0 white; }
.drawer-top strong, .drawer-profile strong { font-weight: 500; }
dialog:not(.side-drawer) { background: linear-gradient(135deg, #f7fbfff5, #eff0f9f5); border: 1px solid #fff; box-shadow: 0 25px 70px #294d7626; border-radius: 32px; }
input, select, textarea { background: #ffffff85; border-color: #afc4d267; }
button, a, summary { transition: background-color .22s ease, box-shadow .22s ease, transform .22s ease; }
button:active { transform: translateY(1px); }
#main { animation: cloud-arrive .32s ease-out; }
.side-drawer[open] { animation: cloud-menu .25s ease-out; }
@keyframes cloud-arrive { from { opacity: .35; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes cloud-menu { from { opacity: .35; transform: translateX(-18px); } to { opacity: 1; transform: translateX(0); } }
@media (hover:hover) {
  .primary:hover, .listen-button:hover { box-shadow: inset 0 1px 0 #ffffff70, 0 8px 24px #365b7c30; }
  .secondary:hover, .menu-toggle:hover { background-color: #ffffff65; }
}
@media (max-width:680px) {
  .shell { padding: 12px 22px 120px; }
  .mobile-top { margin: 0 -8px 32px; padding: max(7px, env(safe-area-inset-top)) 6px 7px; }
  .mobile-top .brand { font-size: 12px; }
  .profile-label { font-size: 13px; }
  .simple-wrap .intro { margin: 0 0 30px; padding: 0 3px; }
  .simple-wrap .intro h1, .intro h1 { font-size: clamp(29px, 8.2vw, 35px); font-weight: 350; letter-spacing: -.04em; }
  .intro p { font-size: 15px; }
  .simple-lesson, .simple-wrap > .card, .simple-wrap > section > .card {
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
  }
  .simple-wrap > .card:not(.simple-lesson) { padding: 20px 0; border-bottom: 1px solid var(--line); }
  .simple-lesson > .meta { padding: 0 3px; }
  .lesson-ru { font-size: 18px; margin: 21px 3px 23px; }
  .lesson-example { border-radius: 30px; padding: 24px 21px; margin-bottom: 25px; }
  .lesson-en { font-size: clamp(25px, 6.8vw, 29px); line-height: 1.5; }
  .listen-row { gap: 9px; }
  .listen-button, .slow-button { padding: 11px 15px!important; font-size: 13px!important; }
  .oral-instruction { margin: 0 4px 20px; }
  .simple-lesson > .small.muted { margin: 12px 4px 18px; font-size: 12px; line-height: 1.75; }
  .oral-recorder { padding: 26px 3px 8px!important; }
  .learn-more-panel { margin-top: 25px; }
  .connection-panel { padding: 21px; margin-inline: 0; }
  .nav { width: calc(100% - 30px); bottom: max(12px, env(safe-area-inset-bottom)); padding: 5px; }
  .nav button { min-height: 49px; gap: 7px; font-size: 11px; white-space: nowrap; }
  .nav-icon { font-size: 18px; }
  .settings-grid > .card { background: transparent; border: 0; box-shadow: none; padding: 22px 0; border-radius: 0; }
}
@media (max-width:350px) {
  .shell { padding-inline: 17px; }
  .lesson-example { padding: 22px 18px; }
  .listen-row { gap: 6px; }
  .listen-button, .slow-button { padding: 10px 11px!important; font-size: 12px!important; }
  .nav button { gap: 4px; font-size: 10px; }
  .finish-lesson { padding-inline: 12px; font-size: 14px; }
}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation: none!important; transition: none!important; scroll-behavior: auto!important; }
}
/* Give each library entry its own breathing room after removing card fills. */
.simple-wrap #own-phrases > .lesson-choice {
  padding: 26px 3px;
  margin-bottom: 0!important;
  gap: 12px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  box-shadow: none;
}
@media (max-width:680px) and (max-height:860px) {
  .mobile-top { margin-bottom: 24px; }
  .simple-wrap .intro { margin-bottom: 22px; }
  .lesson-ru { margin-block: 17px 19px; }
  .lesson-example { padding-block: 22px; margin-bottom: 21px; }
  .lesson-en { margin-block: 16px 20px; }
  .oral-instruction { margin-bottom: 14px; }
  .finish-lesson { margin-top: 18px; }
}
.frame-slot{display:inline;background:#ffffff85;border-bottom:1px dashed #8aa6be;border-radius:8px;padding:1px 5px;color:#476d8c;font-weight:350}.habit-stages{display:flex;gap:7px;flex-wrap:wrap;margin:16px 0 22px;font-size:11px;color:#65778b}.habit-stages span{padding:7px 9px;border-radius:13px}.habit-stages .current{background:#ffffff9c;color:#2e536d;box-shadow:inset 0 1px 0 white}.habit-frame .lesson-en{font-family:"Segoe UI Variable Display","Segoe UI",sans-serif;font-size:25px;font-weight:400;line-height:1.6}.habit-count{font-size:12px;line-height:1.7}.habit-evidence{border-block:1px solid var(--line);padding:23px 2px;margin:23px 0}.habit-evidence .eyebrow{font-size:9px;letter-spacing:.12em;margin-bottom:0;max-width:78%;line-height:1.8}.habit-evidence .variant-en{font-size:21px;margin-top:20px;color:#2e516e}.habit-section-heading{margin-top:38px}.habit-evidence .source-link{margin:10px 0}.habit-frame .small{font-size:12px}.habit-evidence .listen-row{gap:7px}.habit-evidence .listen-button{font-size:12px!important;padding:11px 13px!important}@media(max-width:350px){.habit-stages{gap:2px;font-size:10px}.habit-stages span{padding:6px}.habit-frame .lesson-en{font-size:22px}.habit-evidence .listen-row{gap:5px}.habit-evidence .listen-button,.habit-evidence .slow-button{font-size:11px!important;padding:10px 9px!important}}
#habit-search{width:100%;box-sizing:border-box;margin:16px 0 20px;}

/* The lesson opens on a usable phrase; explanations are optional below it. */
.practice-wrap{max-width:640px;margin-inline:auto}
.practice-counter{font-size:12px;color:var(--muted);text-align:right;margin:0 0 12px;font-variant-numeric:tabular-nums}
.practice-lesson .practice-phrase{font-size:clamp(25px,6.7vw,34px);font-weight:400;line-height:1.4;letter-spacing:-.025em;color:#294f6c;margin:0 0 13px;text-wrap:pretty}
.practice-translation{font-size:17px;line-height:1.6;font-weight:350;color:#52677c;margin:0 0 26px;text-wrap:pretty}
.practice-audio-actions{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:10px;align-items:start}
.practice-listen,.practice-record{display:grid;gap:5px;min-width:0}
.practice-audio-actions button{width:100%;min-height:52px;padding:10px!important;font-size:13px!important;line-height:1.4}
.practice-record .secondary{background:linear-gradient(135deg,#eee8ffb8,#f6f3ffc7);border-color:#ffffffdb;color:#5b527d}
.practice-record .recording-stop{background:linear-gradient(135deg,#f6dce4bd,#fdf1f3bd);color:#8b485e}
.practice-listen .slow-button{min-height:36px;background:transparent;box-shadow:none;border-color:transparent;font-size:12px!important;padding:6px!important}
.practice-audio [role=status]:empty{display:none}
.practice-audio [role=status]{font-size:12px;margin:9px 0;line-height:1.5}
.practice-audio audio{width:100%;max-width:100%;margin:8px 0}
.practice-audio [hidden]{display:none!important}
.practice-audio #oral-download{font-size:12px;display:block;padding:8px 0;margin-bottom:10px}
.archive-tabs,.archive-pagination{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}
.archive-tabs button{font-size:12px;min-height:44px;padding:9px 12px}
.archive-search{display:flex;gap:8px;margin:16px 0}
.archive-search input{min-width:0;flex:1}
.archive-group,.archive-occurrence{border-bottom:1px solid var(--line);padding:17px 0;overflow-wrap:anywhere}
.archive-group h3{font-size:17px;font-weight:500}
.archive-occurrence>span{display:block;margin-top:5px}
.archive-panel blockquote{margin:12px 0;padding:14px;background:#ffffff60;border-radius:14px;font-size:14px;line-height:1.65}
.archive-panel mark{background:#e7dcf6;color:inherit;border-radius:4px}
.login-wrap{max-width:420px;margin:0 auto;padding:15vh 24px 40px;text-align:center}
.login-wrap h1{font-size:28px;font-weight:450;line-height:1.3;margin:32px 0}
.login-profiles{display:grid;gap:16px}
.login-profiles button{min-height:86px;font-size:23px}
.login-wrap input{text-align:center;font-size:27px;letter-spacing:10px;min-height:58px}
.login-wrap .primary{min-height:54px}
#login-error{color:#9c4658;font-size:14px;min-height:20px}
.practice-variant{display:flex;width:100%;align-items:center;justify-content:space-between;min-height:48px;font-size:14px;margin-top:12px;text-align:left}
.practice-finish{margin-top:25px;display:grid;gap:9px}
.practice-finish .finish-lesson{margin:0;min-height:55px;font-size:14px;padding:12px 15px;line-height:1.5}
.practice-later{width:100%;background:linear-gradient(135deg,#f4e4dd85,#fff5ea80);border-color:#fff9;color:#806252;min-height:45px;font-size:13px}
.practice-lesson .practice-source{margin:15px 0 2px;font-size:11px;min-height:38px;line-height:1.5}
.practice-report{margin-top:9px;min-height:52px;padding:13px 15px;border-radius:19px;gap:10px;font-size:13px}
.practice-report strong{flex:1;font-weight:450}
.practice-report>span{font-size:18px}
.practice-rule{margin-top:24px;border-top:1px solid var(--line);padding-top:6px}
.practice-rule>summary{cursor:pointer;font-size:13px;color:#516b84;padding:14px 0;min-height:48px}
.practice-rule-content{padding-top:12px}
.practice-rule-content h2{font-size:20px}
.practice-rule-content .lesson-en{font-size:23px;line-height:1.6;margin:12px 0}
.practice-rule-content .lesson-ru{font-size:17px;margin:15px 0}
@media(max-width:680px){
 .shell:has(.practice-wrap) .mobile-top{margin-bottom:17px}
 .practice-wrap{padding:0 0 10px}
 .practice-lesson{padding:0!important}
 .practice-translation{font-size:16px;margin-bottom:22px}
}
@media(max-width:350px){
 .practice-lesson .practice-phrase{font-size:24px}
 .practice-audio-actions{gap:7px}
 .practice-audio-actions button{font-size:12px!important;padding:9px 6px!important}
 .practice-finish .finish-lesson{font-size:13px;padding-inline:10px}
}