@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');
:root { font-family: Manrope, Arial, sans-serif; color: #eaf5fb; background: #052f46; font-synthesis: none; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 78% 9%, #04709e55, transparent 28rem), linear-gradient(155deg, #07354d 0%, #052b40 55%, #092c3d 100%); }
button { font: inherit; }
.shell { width: min(100%, 530px); margin: 0 auto; min-height: 100vh; padding: max(24px, env(safe-area-inset-top)) 22px max(22px, env(safe-area-inset-bottom)); }
.topbar, .brand, .card-head, .balance-foot, .editor-bar, .progress-head, .progress-foot, footer { display: flex; align-items: center; justify-content: space-between; }
.topbar { gap: 14px; margin-bottom: 46px; }
.brand { gap: 10px; font-size: 13px; font-weight: 800; letter-spacing: -.04em; white-space: nowrap; }
.brand b { color: #90b9d3; }
.brand-mark { display: grid; place-items: center; height: 31px; width: 31px; border-radius: 9px; background: #90b9d3; color: #04547e; font-family: 'DM Mono', monospace; font-size: 12px; }
.stage, .eyebrow, .card-head, .editor-bar, .progress-head, footer { font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .12em; }
.stage { color: #86acc4; border: 1px solid #5c8ca977; padding: 8px 10px; border-radius: 6px; white-space: nowrap; }
.eyebrow { color: #90b9d3; display: flex; align-items: center; gap: 8px; margin: 0 0 12px; }
.live-dot { width: 6px; height: 6px; background: #8de5cf; border-radius: 50%; box-shadow: 0 0 10px #8de5cf; }
h1 { font-size: clamp(38px, 10vw, 54px); letter-spacing: -.075em; line-height: 1.06; margin: 0; font-weight: 800; }
h1 em { font-style: normal; color: #90b9d3; }
.subtitle { color: #a7c4d5; margin: 14px 0 28px; font-size: 14px; }
.balance-card { position: relative; overflow: hidden; background: linear-gradient(126deg, #04709e, #04547e); border: 1px solid #5c8ca9; border-radius: 18px; padding: 20px 22px 17px; box-shadow: 0 20px 45px #001c3040; }
.balance-card:after { content: '{ }'; position: absolute; right: -12px; top: 0; font: 150px 'DM Mono', monospace; letter-spacing: -.15em; color: #ffffff0d; transform: rotate(-16deg); pointer-events: none; }
.card-head { color: #c2deee; position: relative; z-index: 1; }
.coin-icon { display: grid; place-items: center; width: 27px; height: 27px; border: 1px solid #b1d3e7; border-radius: 50%; font-size: 14px; color: #e9f8ff; }
.balance-number { display: flex; align-items: baseline; gap: 10px; font-size: clamp(40px, 11vw, 60px); font-weight: 800; letter-spacing: -.07em; margin: 5px 0 10px; position: relative; z-index: 1; }
.balance-unit { font-size: 18px; letter-spacing: -.03em; color: #b3d8ed; }
.balance-foot { color: #c4e0ed; font-size: 11px; gap: 8px; position: relative; z-index: 1; }
.editor { margin-top: 19px; overflow: hidden; border: 1px solid #5c8ca963; border-radius: 17px; background: #07283b; box-shadow: inset 0 1px #ffffff08; }
.editor-bar { height: 42px; padding: 0 16px; background: #113d55; color: #a3c7dc; letter-spacing: .02em; }
.window-dots { display: flex; gap: 5px; }
.window-dots i { width: 7px; height: 7px; border-radius: 50%; background: #5c8ca9; }
.window-dots i:first-child { background: #90b9d3; }
.editor-state { color: #98d8c8; }
.code-view { min-height: 142px; padding: 20px 19px 22px; color: #bed8e6; font: 12px/1.9 'DM Mono', Consolas, monospace; white-space: nowrap; overflow: hidden; }
.line-no { display: inline-block; width: 42px; color: #5c8ca9; user-select: none; }
.code-line:nth-child(6n + 1) .code-text { color: #8dcaec; }
.code-line:nth-child(6n + 2) .code-text { color: #a9ddc7; }
.code-line--new { animation: line-in .24s ease-out both; }
.code-empty { color: #5c8ca9; }
.fraction-note { margin: -10px 19px 16px; color: #90b9d3; font: 10px 'DM Mono', Consolas, monospace; }
.fraction-note[hidden] { display: none; }
@keyframes line-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
.code-purple { color: #cbb8ef; }.code-blue { color: #8dcaec; }.code-green { color: #a9ddc7; }
.cursor { color: #90b9d3; animation: blink 1s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }
.click-button { display: flex; width: calc(100% - 24px); margin: 0 12px; align-items: center; gap: 10px; border: 0; border-radius: 11px; padding: 18px 17px; background: #90b9d3; color: #06354e; font-weight: 800; font-size: 14px; cursor: pointer; transition: transform .12s, background .12s; touch-action: manipulation; }
.click-button:active:not(:disabled) { transform: scale(.985); background: #b4d5e8; }
.click-button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.click-button:disabled { opacity: .48; cursor: not-allowed; }
.button-symbol { font: 700 18px 'DM Mono', monospace; }
.button-plus { margin-left: auto; padding: 4px 7px; border-radius: 5px; background: #04547e; color: #d6ecf7; font: 12px 'DM Mono', monospace; }
.editor-hint { min-height: 20px; margin: 11px 14px 14px; color: #86acc4; text-align: center; font-size: 11px; }
.progress-card { margin-top: 18px; padding: 16px 17px; background: #24445477; border: 1px solid #5c8ca94a; border-radius: 14px; }
.progress-head { color: #9dbed1; gap: 10px; }.progress-head strong { font-size: 12px; color: #ecf8fd; letter-spacing: 0; }
.progress-track { height: 7px; margin: 14px 0 11px; background: #0c344a; border-radius: 10px; overflow: hidden; }.progress-fill { width: 0; height: 100%; background: linear-gradient(90deg, #04709e, #90b9d3); transition: width .2s; }
.progress-foot { color: #a3c2d2; font-size: 11px; gap: 8px; }.progress-foot strong { color: #e6f3f9; }
.stage-card { margin-top: 18px; padding: 20px 18px; background: #0b3449; border: 1px solid #5c8ca963; border-radius: 16px; }
.section-heading { display: flex; justify-content: space-between; color: #90b9d3; font: 10px 'DM Mono', monospace; letter-spacing: .12em; }
.section-index { color: #6d9bb3; }
.stage-card h2, .confirm-dialog h2 { margin: 10px 0 7px; font-size: 23px; letter-spacing: -.055em; }
.section-description { margin: 0 0 17px; color: #a7c4d5; font-size: 12px; line-height: 1.55; }
.program-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.program-option { display: flex; flex-direction: column; align-items: flex-start; min-height: 88px; gap: 3px; padding: 11px 12px; border: 1px solid #5c8ca98a; border-radius: 10px; color: #eaf5fb; background: #103e54; text-align: left; cursor: pointer; }
.program-option strong { font-size: 13px; }.program-option span { font: 11px 'DM Mono', monospace; color: #9ddacc; }.program-option small { margin-top: auto; color: #8fb2c5; font-size: 10px; }
.program-option.is-selected { border-color: #a6d7ee; background: #155473; box-shadow: inset 0 0 0 1px #a6d7ee; }
.program-option.is-locked { opacity: .47; cursor: not-allowed; }.program-option:focus-visible, .primary-action:focus-visible, .history-more:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.primary-action { width: 100%; margin-top: 13px; padding: 13px; border: 0; border-radius: 10px; color: #07364e; background: #a4d0e6; font-size: 13px; font-weight: 800; cursor: pointer; }
.primary-action:disabled { opacity: .43; cursor: not-allowed; }.primary-action[hidden] { display: none; }
.section-message { min-height: 16px; margin: 11px 0 0; color: #91b7ca; font-size: 11px; line-height: 1.4; }
.history-card { padding-bottom: 10px; }.history-list { margin-top: 14px; }.history-row { display: flex; justify-content: space-between; gap: 8px; padding: 11px 0; border-top: 1px solid #5c8ca933; }
.history-row div { display: flex; flex-direction: column; gap: 3px; }.history-row strong { font-size: 12px; font-weight: 600; }.history-row small { color: #7fa7bc; font-size: 10px; }.history-row > span { color: #9ddacc; font: 11px 'DM Mono', monospace; white-space: nowrap; }
.history-empty { color: #8fb2c5; font-size: 12px; }.history-more { display: block; width: 100%; padding: 12px; border: 0; background: none; color: #acd5e8; cursor: pointer; font-size: 12px; }.history-more[hidden] { display: none; }
.confirm-dialog { width: min(410px, calc(100% - 32px)); padding: 22px; border: 1px solid #79abc4; border-radius: 16px; color: #eaf5fb; background: #0a344a; box-shadow: 0 25px 80px #001b2acc; }.confirm-dialog::backdrop { background: #001926b8; }.confirm-dialog p { color: #adcad9; font-size: 13px; line-height: 1.5; }
.dialog-actions { display: flex; gap: 8px; margin-top: 22px; }.dialog-actions button { flex: 1; padding: 12px; border: 1px solid #6c9ab2; border-radius: 9px; color: #d9edf6; background: #174961; cursor: pointer; }.dialog-actions button[value="confirm"] { border-color: #a4d0e6; color: #07364e; background: #a4d0e6; font-weight: 800; }
/* A quiet, moving aurora makes the balance and main action feel like earned energy. */
body { background: radial-gradient(ellipse at 82% 4%, #287fc25e, transparent 33rem), radial-gradient(ellipse at 4% 52%, #13898b35, transparent 28rem), #062c43; }
.brand-mark { border-radius: 13px; background: linear-gradient(135deg, #c9ebf7, #84bcda 58%, #8fe0d2); box-shadow: 0 0 23px #88d5df42; }
.stage { border-radius: 999px; background: #75b5d00f; }
.balance-card { border-radius: 28px; border-color: #90d5e699; background: linear-gradient(115deg, #096c9b, #287cb1 29%, #155c93 58%, #0a708e 80%, #2487b1); background-size: 230% 230%; animation: aurora 11s ease-in-out infinite alternate; box-shadow: 0 22px 48px #001b3066, inset 0 1px #ffffff50; }
.balance-card:before { content: ''; position: absolute; inset: -65% -20%; background: linear-gradient(105deg, transparent 38%, #ffffff16 49%, transparent 60%); transform: translateX(-75%) rotate(6deg); animation: gleam 9s ease-in-out infinite; pointer-events: none; }
.coin-icon { border-radius: 50%; background: #e8f8ff1c; box-shadow: inset 0 1px #ffffff44; }
.editor { border-radius: 26px; border-color: #76aeca75; box-shadow: 0 16px 38px #001b2e3d, inset 0 1px #ffffff14; }
.editor-bar { background: linear-gradient(90deg, #174a65, #1b5672); }
.click-button { border-radius: 17px; background: linear-gradient(115deg, #8edacb, #b7e7ed 34%, #92c7eb 68%, #a4e1d4); background-size: 220% 220%; animation: aurora 7s ease-in-out infinite alternate; box-shadow: 0 9px 23px #3abcc129, inset 0 1px #ffffffb5; }
.click-button:active:not(:disabled) { background: linear-gradient(115deg, #b7f1e4, #d4f4f8); }
.click-button:disabled { animation: none; }
.button-plus { border-radius: 9px; background: #0b5f7e; }
.progress-card, .stage-card { border-radius: 24px; background: linear-gradient(145deg, #18465dce, #0a344af2 70%); box-shadow: inset 0 1px #ffffff15, 0 13px 30px #001b2e29; }
.progress-track { border-radius: 999px; }.progress-fill { border-radius: inherit; background: linear-gradient(90deg, #5bb5d4, #8de2cf, #8bb7f0); background-size: 200% 100%; animation: aurora 6s ease-in-out infinite alternate; }
.program-option { border-radius: 17px; background: linear-gradient(145deg, #1a5069, #103d56); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.program-option:not(:disabled):hover { transform: translateY(-2px); border-color: #a3d9e9; }
.program-option.is-selected { border-color: #9fe3db; background: linear-gradient(125deg, #1b7892, #276f9c 55%, #377d9d); box-shadow: inset 0 0 0 1px #9fe3db, 0 7px 20px #39bfd127; }
.primary-action { border-radius: 16px; background: linear-gradient(110deg, #91dccc, #b7eaf0 50%, #9fc9ef); background-size: 200% 200%; animation: aurora 8s ease-in-out infinite alternate; box-shadow: inset 0 1px #ffffffa0, 0 7px 20px #39bfd12b; }
.primary-action:disabled { animation: none; box-shadow: none; }
.confirm-dialog { border-radius: 26px; background: linear-gradient(145deg, #16506c, #082e45); }.dialog-actions button { border-radius: 14px; }.dialog-actions button[value="confirm"] { background: linear-gradient(110deg, #8fdcca, #b9e8f0); }
@keyframes aurora { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@keyframes gleam { 0%, 60%, 100% { transform: translateX(-75%) rotate(6deg); } 78% { transform: translateX(75%) rotate(6deg); } }
.shell { padding-bottom: calc(116px + env(safe-area-inset-bottom)); }
.screen[hidden], [hidden] { display: none !important; }
.screen.is-active { animation: screen-in .32s ease-out both; }
@keyframes screen-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.screen-hero { margin: 34px 0 25px; }.screen-hero h1 { font-size: clamp(36px, 9vw, 49px); }.screen-hero > p:last-child { max-width: 370px; color: #a7c4d5; font-size: 13px; line-height: 1.55; }
.bottom-nav { position: fixed; z-index: 50; left: 50%; bottom: max(10px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: grid; grid-template-columns: repeat(7, 1fr); width: min(calc(100% - 20px), 520px); padding: 7px; border: 1px solid #8ebed276; border-radius: 25px; background: #0b344bea; box-shadow: 0 15px 45px #001626a6, inset 0 1px #ffffff26; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.bottom-nav button { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; gap: 3px; padding: 8px 1px 7px; border: 0; border-radius: 18px; background: transparent; color: #91b9cc; font-size: 10px; font-weight: 700; cursor: pointer; transition: color .2s, background .2s, transform .2s; }
.bottom-nav button span { font: 21px/1 'DM Mono', monospace; }.bottom-nav button.is-active { color: #083951; background: linear-gradient(125deg, #8fd9ce, #b2d9ec); box-shadow: 0 4px 15px #7fdad733; }.bottom-nav button:active { transform: scale(.94); }.bottom-nav button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.course-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }.course-card { display: flex; flex-direction: column; align-items: flex-start; min-height: 105px; gap: 4px; padding: 16px; border: 1px solid #76aeca75; border-radius: 19px; background: linear-gradient(145deg, #1a5069, #103d56); color: #eaf5fb; text-align: left; cursor: pointer; }.course-card.is-selected { border-color: #9fe3db; background: linear-gradient(125deg, #1b7892, #276f9c 55%, #377d9d); box-shadow: inset 0 0 0 1px #9fe3db; }.course-name { font-size: 15px; font-weight: 800; }.course-card strong { color: #b0e1ec; font: 13px 'DM Mono', monospace; }.course-card small { margin-top: auto; color: #a9cbd8; font-size: 10px; }
.lesson-card { margin-top: 13px; }.lesson-progress { color: #8ed8d1; font: 11px 'DM Mono', monospace; }.lesson-text { color: #c7dfe9; font-size: 13px; line-height: 1.65; }.lesson-code { overflow: auto; padding: 15px; border: 1px solid #5c8ca966; border-radius: 14px; background: #06283b; color: #a9ddc7; font: 12px/1.55 'DM Mono', Consolas, monospace; }
.pc-current { border-color: #89d4d07d; }.pc-next { margin-top: 12px; }.pc-facts { margin: 12px 0 4px; color: #b5d6e5; font: 12px/1.7 'DM Mono', monospace; }.pc-next .primary-action { margin-top: 20px; }
.expand-button { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: 16px; padding: 17px 19px; border: 1px solid #77adc282; border-radius: 19px; color: #e7f7fb; background: linear-gradient(145deg, #1b4e67, #103d56); font-size: 13px; font-weight: 800; text-align: left; cursor: pointer; }.expand-button span { font-size: 21px; line-height: .6; transition: transform .28s ease; }.expand-button[aria-expanded="true"] span { transform: rotate(180deg); }.expand-button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.expand-panel { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .35s ease, opacity .35s ease; }.expand-panel.is-open { grid-template-rows: 1fr; opacity: 1; }.expand-inner { min-height: 0; overflow: hidden; }.pc-levels { padding-top: 12px; }.pc-level-row { display: grid; grid-template-columns: 48px 1fr auto; gap: 7px; align-items: center; padding: 11px 12px; border-bottom: 1px solid #5c8ca941; color: #bed5e1; font-size: 11px; }.pc-level-row strong { color: #e8f5fb; }.pc-level-row small { color: #98d8c8; }.pc-level-row.is-current { border-radius: 10px; background: #1b69837a; }
.profile-hero { display: flex; align-items: center; gap: 18px; margin-top: 33px; }.profile-hero .eyebrow { margin-bottom: 6px; }.profile-hero h1 { font-size: 29px; overflow-wrap: anywhere; }.profile-hero p:last-child { margin: 5px 0 0; color: #9dbfd2; font-size: 12px; }.avatar { flex: none; display: grid; place-items: center; width: 76px; height: 76px; overflow: hidden; border: 2px solid #a2dfdd; border-radius: 24px; background: linear-gradient(135deg, #2181a1, #8cd8d0); box-shadow: 0 7px 24px #7fe2da3b; }.avatar img { width: 100%; height: 100%; object-fit: cover; }.avatar span { color: #e9fcff; font-size: 29px; font-weight: 800; }
.profile-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 13px; }.profile-stat { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid #6da4bb61; border-radius: 18px; background: linear-gradient(145deg, #18465dce, #0a344af2); }.profile-stat small { color: #95b8c8; font-size: 11px; }.profile-stat strong { color: #e8f7fb; font-size: 17px; letter-spacing: -.04em; }
.chart-empty { margin: 12px 0 0; color: #91b7c9; font-size: 11px; }
.chart-card { margin-top: 14px; }.chart-bars { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); align-items: end; gap: 9px; height: 190px; padding: 10px 0 0; }.chart-day { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; gap: 6px; }.chart-bar { width: 100%; max-width: 31px; min-height: 4px; border-radius: 9px 9px 4px 4px; background: linear-gradient(0deg, #288ab5, #88dbd1 70%, #b0e8e5); box-shadow: 0 0 13px #6accc159; transition: height .4s ease; }.chart-day small { color: #a5c4d3; font: 9px 'DM Mono', monospace; white-space: nowrap; }.chart-value { overflow: hidden; max-width: 100%; text-overflow: ellipsis; }.history-toggle { margin-top: 15px; }.history-card { margin-top: 12px; }.history-row > span.is-spend { color: #ffbdad; }
.wallet-placeholder { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 36px 25px; text-align: center; }.wallet-placeholder > span { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 22px; background: linear-gradient(135deg, #2181a1, #8cd8d0); color: #eaffff; font-size: 32px; }.wallet-placeholder strong { font-size: 18px; }.wallet-placeholder p { max-width: 260px; margin: 0; color: #a7c4d5; font-size: 12px; line-height: 1.6; }
.neural-summary { border-color: #8ad7d098; background: linear-gradient(125deg, #116882, #1d628b 50%, #0d536b); background-size: 200% 200%; animation: aurora 10s ease-in-out infinite alternate; }.neural-summary h2 { font-size: 30px; }.neural-summary .section-description { margin: 10px 0 0; }.neural-rate { color: #b7e6df; font: 12px/1.55 'DM Mono', monospace; }.neural-heading { margin: 27px 2px 0; }.neural-list { display: grid; gap: 9px; margin-top: 12px; }.neural-card { border: 1px solid #76aeca75; border-radius: 20px; background: linear-gradient(145deg, #18465dce, #0a344af2); box-shadow: inset 0 1px #ffffff15; overflow: hidden; }.neural-card.is-owned { border-color: #8ad7d083; }.neural-card-header { display: flex; align-items: center; width: 100%; min-height: 73px; gap: 10px; padding: 14px 15px; border: 0; background: transparent; color: #eaf5fb; text-align: left; cursor: pointer; }.neural-card-title { display: grid; gap: 3px; min-width: 0; }.neural-card-title strong { font-size: 15px; }.neural-card-title small { color: #9fc6d5; font-size: 10px; }.neural-card-rate { margin-left: auto; color: #b7e6df; font: 10px 'DM Mono', monospace; white-space: nowrap; }.neural-chevron { color: #a9d3df; font-size: 20px; transition: transform .28s ease; }.neural-card-header[aria-expanded="true"] .neural-chevron { transform: rotate(180deg); }.neural-card-header:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }.neural-card-details { padding: 0 15px; border-top: 1px solid #5c8ca941; }.neural-card-details > :first-child { margin-top: 13px; }.neural-card-details > :last-child { margin-bottom: 15px; }.neural-card .section-description { margin: 8px 0 0; }.neural-card .primary-action { margin-top: 17px; }.token-packages { display: grid; gap: 9px; padding-top: 12px; }.token-pack { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px; border: 1px solid #6da4bb61; border-radius: 18px; background: linear-gradient(145deg, #18465dce, #0a344af2); }.token-pack-info { display: grid; gap: 4px; }.token-pack-info strong { font-size: 13px; }.token-pack-info small { color: #a3c9d9; font: 11px 'DM Mono', monospace; }.token-buy { flex: none; padding: 9px 13px; border: 0; border-radius: 12px; color: #06364d; background: linear-gradient(110deg, #91dccc, #b7eaf0); font-size: 11px; font-weight: 800; cursor: pointer; }.token-buy:disabled { opacity: .43; cursor: not-allowed; }
.check-banner { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; width: 100%; margin: -25px 0 24px; padding: 15px 17px; border: 1px solid #f5aa9d9c; border-radius: 19px; background: linear-gradient(115deg, #85474c, #693d60 55%, #51577b); color: #fff4ee; text-align: left; box-shadow: 0 12px 28px #2a101c4d; cursor: pointer; }.check-banner span { font: 10px 'DM Mono', monospace; letter-spacing: .1em; color: #ffcdc4; }.check-banner strong { font-size: 12px; }.check-banner small { color: #ffe2da; font-size: 10px; }.check-card { border-color: #efb3a892; background: linear-gradient(145deg, #513b56, #1c3c56 76%); }.check-code { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; min-height: 86px; padding: 15px; border: 1px solid #dca7a878; border-radius: 15px; background: #092839; font: 11px/1.5 'DM Mono', monospace; }.check-code-prefix, .check-punctuation { color: #9dc4d5; }.check-word { padding: 5px 7px; border: 1px solid #ff9b9299; border-radius: 8px; background: #a44450; color: #fff4f0; font: inherit; cursor: pointer; transition: transform .16s, background .2s, border-color .2s; }.check-word:active:not(:disabled) { transform: scale(.94); }.check-word.is-fixed { border-color: #80dbc9; background: #1c745f; color: #e6fff7; }.check-word:focus-visible { outline: 2px solid white; outline-offset: 2px; }
.top-summary { border-color: #a6dace87; background: linear-gradient(115deg, #135d79, #1c7288 45%, #255978); background-size: 200% 200%; animation: aurora 10s ease-in-out infinite alternate; }.top-summary h2 { font-size: 35px; }.top-summary .section-description { margin: 9px 0 0; }.top-list { display: grid; gap: 8px; margin-top: 14px; }.top-list-more { padding-top: 1px; }.top-row { display: grid; grid-template-columns: 39px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 61px; padding: 11px 13px; border: 1px solid #6da4bb61; border-radius: 16px; background: linear-gradient(145deg, #18465dce, #0a344af2); }.top-row.is-podium { border-color: #91d6d082; background: linear-gradient(120deg, #1c6480, #1a4d6a); }.top-row.is-you { border-color: #afe6d2; box-shadow: inset 0 0 0 1px #afe6d248; }.top-rank { color: #9bdacf; font: 16px 'DM Mono', monospace; }.top-person { display: grid; min-width: 0; gap: 3px; }.top-person strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }.top-person small { color: #a2c4d2; font-size: 10px; }.top-balance { color: #c2e7e3; font: 11px 'DM Mono', monospace; white-space: nowrap; }
footer { margin-top: 32px; justify-content: center; gap: 8px; color: #638fa7; text-align: center; font-size: 9px; }footer span { color: #90b9d3; }
@media (max-width: 370px) { .shell { padding-left: 15px; padding-right: 15px; }.stage { font-size: 8px; }.brand { font-size: 11px; }.code-view { font-size: 10px; }.balance-foot, .progress-foot { font-size: 10px; }.progress-foot { flex-wrap: wrap; }.pc-level-row { grid-template-columns: 43px 1fr; }.pc-level-row small { grid-column: 2; } }
@media (max-width: 370px) { .bottom-nav { width: calc(100% - 12px); padding: 5px; gap: 1px; }.bottom-nav button { font-size: 9px; padding-inline: 0; }.bottom-nav button span { font-size: 19px; } }
@media (max-width: 370px) { .bottom-nav button { font-size: 8px; }.bottom-nav button span { font-size: 18px; }.top-row { grid-template-columns: 32px minmax(0, 1fr) auto; gap: 6px; }.top-balance { font-size: 9px; } }
@media (prefers-reduced-motion: reduce) { *, *:before, *:after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
.news-banner{margin:12px 0 18px;padding:15px 18px;border:1px solid #99dfea66;border-radius:20px;background:linear-gradient(120deg,#30599ad9,#783facc9,#26799fc9);background-size:220% 220%;animation:news-glow 8s ease-in-out infinite;box-shadow:0 9px 28px #123a6880}.news-banner strong{display:block;font-size:14px}.news-banner p{margin:7px 0;font-size:12px;color:#f4f9ff}.news-banner small{color:#ccedff}@keyframes news-glow{50%{background-position:100% 100%}}
.wallet-balance{border-color:#a0dfd488;background:linear-gradient(125deg,#0d526f,#147b8d 55%,#12617c);background-size:220% 220%;animation:aurora 10s ease-in-out infinite alternate}.wallet-balance h2{font-size:clamp(32px,9vw,46px);margin:17px 0 9px}.wallet-balance p,.monthly-card .section-description{color:#c5e1e9;font-size:12px;line-height:1.6}.monthly-card{margin-top:12px;border-radius:23px}.monthly-card h2{margin:18px 0 9px}.monthly-card .primary-action{margin-top:16px}.monthly-card .section-message{min-height:18px}