/* One paper-like interface, framed around the original hand-painted illustrations. */
:root{--ui-paper:#fff;--ui-ink:#293b33;--ui-muted:#7d897e;--ui-line:#e2e8df;--ui-forest:#244c48;--ui-coral:#b57761;--ui-warm:#fcfaf6;--ui-radius:12px;--ui-ease:170ms ease}
body .shell .main[class] .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:0;max-width:100%;min-height:40px;padding:9px 15px;border-radius:8px;color:#fff;border:1px solid var(--ui-forest);background:var(--ui-forest);font-size:12px;font-weight:500;line-height:1.65;text-decoration:none;letter-spacing:.01em;box-shadow:none;transform:none;transition:background var(--ui-ease),border-color var(--ui-ease),color var(--ui-ease),transform var(--ui-ease)}
body .shell .main[class] .btn:not(.secondary):not(.soft):hover:not(:disabled){background:#173c38;border-color:#173c38;color:#fff;box-shadow:none;transform:none}
body .shell .main[class] .btn.secondary{background:#fff;border-color:#dce5d9;color:#62705f}
body .shell .main[class] .btn.secondary:hover:not(:disabled){background:#f8faf5;border-color:#cbd8c4;color:#365747;box-shadow:none;transform:none}
body .shell .main[class] .btn.soft{background:#f5f8ef;border-color:#e6ecdf;color:#72816b}
body .shell .main[class] .btn.soft:hover:not(:disabled){background:#eef4e6;border-color:#d9e5cf;color:#506e43;box-shadow:none}
body .shell .main[class] .btn.small{min-height:34px;padding:7px 11px;border-radius:7px;font-size:11px}
body .shell .main[class] .btn .icon{width:15px;height:15px;stroke-width:1.7;flex-shrink:0;transform:none}
body .shell .main[class] .btn.small .icon{width:13px;height:13px}
body .shell .main[class] .btn:active:not(:disabled){transform:translateY(1px);box-shadow:none}
body .shell .main[class] .btn:disabled,body .shell .main[class] .btn:disabled:hover{border-color:#e4eadf;background:#f0f4e9;color:#a1aa99;box-shadow:none;opacity:1;transform:none;cursor:not-allowed;transition:none}
body .shell .main[class] .btn.secondary:disabled{border-color:#e6ebe2;background:#fafbf7;color:#abb6a0}
body .shell .main[class] .link-btn{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:4px 0;color:#55705b;font-size:11px;font-weight:400;line-height:1.65;box-shadow:none;transition:color var(--ui-ease)}
body .shell .main[class] .link-btn:hover{color:#315a45}
body .shell .main[class] .link-btn>.icon{width:13px;height:13px;stroke-width:1.7}
body .shell .main[class] :is(.course-card,.account-tile,.account-summary-item,.topic-tile,.vocab-card,.stat,.balance-card,.package){border:1px solid var(--ui-line);border-radius:var(--ui-radius);background:#fff;box-shadow:none}
body .shell .main[class] :is(.course-card,.topic-tile,.account-tile,.account-summary-item){transition:border-color var(--ui-ease),background var(--ui-ease),box-shadow var(--ui-ease),transform var(--ui-ease)}
body .shell .main[class] :is(.course-card,.topic-tile,.account-tile,.account-summary-item):hover{border-color:#c7d8c6;background:#fff;box-shadow:0 5px 20px #294b3906;transform:translateY(-2px)}
body .shell .main[class] :is(.course-card,.topic-tile,.account-tile,.account-summary-item):active{transform:translateY(0);box-shadow:none}
body .shell .main[class] .card-grid{gap:22px}
body .shell .main[class] .course-card{overflow:hidden;isolation:isolate}
body .shell .main[class] .course-card .card-art{height:185px;background:#fff;border-bottom:1px solid #f0f2eb}
body .shell .main[class] .course-card .card-art .lesson-visual{background:#fffdf9}
body .shell .main[class] .course-card .card-art .pill{top:13px;left:13px;padding:4px 7px;background:#fffffff5;border:1px solid #e7ebdf;border-radius:5px;color:#889b7c;font-size:9px;line-height:1.55;box-shadow:none}
body .shell .main[class] .course-card-body{gap:0;padding:21px 22px 18px}
body .shell .main[class] .course-card .card-kicker{margin-bottom:8px;color:#a17c61;font-size:9px;line-height:1.6;font-weight:500;letter-spacing:.055em}
body .shell .main[class] .course-card h3{margin:0;color:#2f4237;font-size:17px;font-weight:600;line-height:1.8;letter-spacing:.005em}
body .shell .main[class] .course-card p{margin:10px 0 19px;color:#738071;font-size:11px;line-height:1.95}
body .shell .main[class] .course-card .progress-bar{height:3px;margin:0 0 18px;background:#eef3e8;border-radius:3px}
body .shell .main[class] .course-card .progress-bar i{background:#8ea87c;border-radius:3px}
body .shell .main[class] .course-card .card-footer{gap:8px;padding-top:14px;border-top:1px solid #ecf0e5;color:#7c8978;font-size:10px;line-height:1.8}
body .shell .main[class] .course-card .card-footer .link-btn{font-size:10px;color:#617b5b}
body .shell .main[class] .round-arrow{width:28px;height:28px;border:1px solid #e0e8d7;border-radius:7px;background:#fff;color:#809276;box-shadow:none;transition:border-color var(--ui-ease),background var(--ui-ease),color var(--ui-ease)}
body .shell .main[class] .round-arrow:hover{border-color:#d0dec2;background:#f6faef;color:#74965c;transform:none}
body .shell .main[class] .round-arrow>.icon{width:14px;height:14px;stroke-width:1.6}
body .shell .main[class] .topic-tile:nth-child(n){border-radius:var(--ui-radius);background:#fff;border-color:var(--ui-line);box-shadow:none;padding:18px 19px}
body .shell .main[class] .topic-tile>strong{color:#314637;font-size:14px;font-weight:500;line-height:1.8}
body .shell .main[class] .topic-tile>span{color:#7b8876;font-size:10px;line-height:1.8}
body .shell .main[class] .topic-tile>.icon{color:#8b9c80;width:14px;height:14px}
body .shell .main[class] .topic-tile:hover{border-color:#c7d8c6;box-shadow:0 5px 20px #294b3906;background:#fff}
body .shell .main[class] .account-grid{gap:19px}
body .shell .main[class] .account-tile{grid-template-columns:70px minmax(0,1fr) 14px;gap:16px;min-height:114px;padding:21px 19px}
body .shell .main[class] .account-tile-art{width:70px;height:70px;background:transparent;border-radius:0}
body .shell .main[class] .account-tile-art :is(img,.account-art){display:block;width:70px;height:70px;object-fit:contain;filter:none}
body .shell .main[class] .account-tile-copy strong{color:#314637;font-size:14px;font-weight:500;line-height:1.8}
body .shell .main[class] .account-tile-copy span{color:#7e8b78;font-size:11px;line-height:1.8}
body .shell .main[class] .account-tile>.icon{color:#829479;stroke-width:1.6}
body .shell .main[class] .account-summary{gap:19px}
body .shell .main[class] .account-summary-item{min-height:108px;padding:21px 24px}
body .shell .main[class] .account-summary-item>span{color:#73816c;font-size:12px}
body .shell .main[class] .account-summary-item>strong{color:#335341;font-size:29px;font-weight:500;line-height:1.3;letter-spacing:-.02em}
body .shell .main[class] .account-summary-item strong small{color:#83917b;font-size:10px}
body .shell .main[class] .account-summary-item>.icon{color:#839777;stroke-width:1.6}
body .shell .main[class] .account-avatar{width:62px;height:62px;border:1px solid #244c48;border-radius:15px;background:#244c48;color:#fff;box-shadow:none;font-size:25px;font-weight:400}
body .shell .main[class] .account-utilities{padding-top:16px;border-color:#e9eee2}
body .shell .main[class] .account-utility-list :is(a,button){color:#73846b;font-size:11px}
body .shell .main[class] .panel{border:1px solid var(--ui-line);border-radius:var(--ui-radius);background:#fff;box-shadow:none}
body .shell .main[class] .section-heading{margin-top:31px;margin-bottom:19px}
body .shell .main[class] .section-heading h2{color:#354b3c;font-size:17px;font-weight:500;line-height:1.8}
body .shell .main[class] .stat:nth-child(n){min-height:119px;padding:23px 24px;border-radius:var(--ui-radius);background:#fff;border-color:var(--ui-line);box-shadow:none}
body .shell .main[class] .stat>span{color:#798872;font-size:11px;line-height:1.7}
body .shell .main[class] .stat>strong{margin-top:14px;color:#345c3f;font-size:30px;font-weight:500;line-height:1.3;font-variant-numeric:tabular-nums}
body .shell .main[class] .balance-card{min-height:165px;padding:29px 32px;margin-bottom:28px;background:#fff;border:1px solid var(--ui-line);border-radius:var(--ui-radius);box-shadow:none}
body .shell .main[class] .balance-card>div>span{display:block;color:#79896f;font-size:12px;line-height:1.8}
body .shell .main[class] .balance-card strong{display:block;margin:10px 0 7px;color:#315a3c;font-size:38px;font-weight:500;line-height:1.2;letter-spacing:-.025em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
body .shell .main[class] .balance-card small{color:#839477;font-size:11px;line-height:1.7}
body .shell .main[class] .balance-card .balance-art{width:155px;height:118px;object-fit:contain;filter:none;opacity:1}
body .shell .main[class] .package{position:relative;display:flex;flex-direction:column;align-items:flex-start;min-width:0;margin:0 0 3px;padding:25px 24px 23px;border:1px solid var(--ui-line);border-radius:var(--ui-radius);background:#fff;box-shadow:none}
body .shell .main[class] .package>h3{margin:0 0 23px;color:#657e57;font-size:13px;font-weight:500;line-height:1.8}
body .shell .main[class] .package>.price{margin:0;color:#38533d;font-size:31px;font-weight:500;line-height:1.4;letter-spacing:-.02em}
body .shell .main[class] .package>.token-count{margin:11px 0 25px;color:#7f9470;font-size:11px;line-height:1.8}
body .shell .main[class] .package>.btn{align-self:stretch;width:100%;margin-top:auto;min-height:39px;font-size:11px}
body .shell .main[class] .package:has(.btn:not(.secondary)){border-color:#cddcc2}
body .shell .main[class] .package:has(.btn:not(.secondary)):before{content:"";position:absolute;top:-1px;left:25px;right:25px;height:2px;border-radius:2px;background:#99b284}
body .shell .main[class] .notice{border:1px solid #e7eddf;border-radius:9px;background:#fbfcf7;color:#748668;font-size:12px;line-height:1.9;box-shadow:none}
body .shell .main[class] .notice>p{color:#7e9171;font-size:11px;line-height:1.8;margin-top:7px}
body .shell .main[class] .pill{border-radius:5px;border:1px solid #e4eadb;background:#fafcf6;color:#7e8f6e;font-size:10px;line-height:1.5}
body .shell .main[class] .pill:is(.accent,.blue){border-color:#dde7d2;background:#f3f8ec;color:#6e875c}
body .shell .main[class] .list-row{padding-top:16px;padding-bottom:16px;border-bottom-color:#edf2e4}
body .shell .main[class] .list-row :is(p,h3){overflow-wrap:anywhere}
body .shell .main[class] .list-row>div h3{color:#486247;font-size:13px;font-weight:500;line-height:1.8}
body .shell .main[class] .list-row>div p{color:#7d9170;font-size:11px;line-height:1.8}
body .shell .main[class] .vocab-card{padding:20px 21px;border:1px solid var(--ui-line);border-radius:var(--ui-radius);background:#fff;box-shadow:none}
body .shell .main[class] .collection-grid{gap:18px}
body .shell .main[class] .vocab-card .vocab-actions{gap:13px;margin-top:19px;padding-top:13px;border-top:1px solid #edf2e4}
body .shell .main[class] .vocab-card .vocab-actions button{display:inline-flex;align-items:center;gap:5px;min-height:29px;padding:4px 0;color:#75915f;font-size:10px;line-height:1.7}
body .shell .main[class] .vocab-card .vocab-actions button:hover{color:#5e883f}
body .shell .main[class] .vocab-card .vocab-actions .icon{width:13px;height:13px;stroke-width:1.65}
body .shell .main[class] .empty:not(.error-screen){border-color:#e3ebd8;border-radius:var(--ui-radius);background:#fdfefa;box-shadow:none}
body .shell .main[class] .empty h3{color:#6b845a;font-size:17px;font-weight:500;line-height:1.8}
body .shell .main[class] .empty>p{color:#7d9270;font-size:12px;line-height:1.9}
body .shell .main[class] .empty-mark{border:1px solid #e4ecd8;border-radius:9px;background:#f8fbf3;color:#a3bb8f}
body .shell .main[class] .page-heading h1{color:#2e4a34;font-size:29px;font-weight:500;line-height:1.6;letter-spacing:.01em}
body .shell .main[class] .page-heading p{color:#798d6c;font-size:12px;line-height:1.9}
body .shell .main[class] .page-heading{gap:22px}
body .shell .main[class] .page-illustration{width:111px;height:81px;object-fit:contain;filter:none}
body .shell .main[class] .table-scroll{border-color:#e7edde}
body .shell .main[class] table thead th{color:#77906a;font-weight:400;font-size:11px;background:#fbfdf7;border-bottom-color:#e6eedb}
body .shell .main[class] table tbody td{color:#697e56;font-size:12px;border-bottom-color:#edf3e5}
body .shell .main[class] :is(.topic-image,.topic-tile img,.account-tile-art img,.balance-art,.page-illustration){filter:none}
@media(max-width:900px){body .shell .main[class] .card-grid{gap:18px}body .shell .main[class] .account-grid{gap:15px}body .shell .main[class] .account-tile{gap:12px;padding:19px 15px;grid-template-columns:63px minmax(0,1fr) 13px}body .shell .main[class] .account-tile-art,body .shell .main[class] .account-tile-art :is(img,.account-art){width:63px;height:63px}}
@media(max-width:600px){
 body .shell .main[class] .btn{min-height:41px;padding:9px 13px;font-size:12px}
 body .shell .main[class] .btn.small{min-height:36px;padding:8px 11px;font-size:11px}
 body .shell .main[class] .card-grid{gap:16px}
 body .shell .main[class] .course-card .card-art{height:176px}
 body .shell .main[class] .course-card-body{padding:18px 19px 16px}
 body .shell .main[class] .course-card h3{font-size:16px}
 body .shell .main[class] .course-card p{margin-bottom:17px}
 body .shell .main[class] .account-tile{grid-template-columns:56px minmax(0,1fr) 12px;gap:11px;min-height:105px;padding:17px 14px;border-radius:10px}
 body .shell .main[class] .account-tile-art,body .shell .main[class] .account-tile-art :is(img,.account-art){width:56px;height:57px}
 body .shell .main[class] .account-tile-copy strong{font-size:12px}
 body .shell .main[class] .account-summary{gap:14px}
 body .shell .main[class] .account-summary-item{min-height:98px;padding:18px 19px}
 body .shell .main[class] .account-summary-item>strong{font-size:24px}
 body .shell .main[class] .account-summary-item>span{font-size:11px}
 body .shell .main[class] .balance-card{min-height:149px;padding:23px 23px;margin-bottom:23px}
 body .shell .main[class] .balance-card strong{font-size:30px;margin-top:12px}
 body .shell .main[class] .balance-card .balance-art{width:110px;height:100px}
 body .shell .main[class] .package{padding:23px 21px 21px}
 body .shell .main[class] .package>h3{margin-bottom:18px}
 body .shell .main[class] .package>.price{font-size:29px}
 body .shell .main[class] .package>.token-count{margin-bottom:22px}
 body .shell .main[class] .stat:nth-child(n){padding:20px;min-height:108px}
 body .shell .main[class] .stat>strong{font-size:27px}
 body .shell .main[class] .page-heading{gap:14px}
 body .shell .main[class] .page-heading h1{font-size:25px}
 body .shell .main[class] .page-illustration{width:86px;height:64px}
 body .shell .main[class] .section-heading{margin-top:27px;margin-bottom:16px}
 body .shell .main[class] .vocab-card{padding:18px}
 body .shell .main[class] .collection-grid{gap:14px}
 body .shell .main[class] .topic-tile:nth-child(n){padding:16px 17px}
}
@media(max-width:360px){
 body .shell .main[class] .account-tile{grid-template-columns:49px minmax(0,1fr) 11px;gap:8px;padding:15px 12px;min-height:99px}
 body .shell .main[class] .account-tile-art,body .shell .main[class] .account-tile-art :is(img,.account-art){width:49px;height:52px}
 body .shell .main[class] .account-tile-copy strong{font-size:11px}
 body .shell .main[class] .balance-card{padding:21px 19px}
 body .shell .main[class] .balance-card strong{font-size:26px}
 body .shell .main[class] .balance-card .balance-art{width:83px;height:85px}
 body .shell .main[class] .page-heading h1{font-size:23px}
 body .shell .main[class] .page-illustration{width:77px;height:58px}
}
body.reduce-motion .shell .main[class] :is(.btn,.course-card,.account-tile,.account-summary-item,.topic-tile,.round-arrow){transition:none!important;transform:none!important}
@media(prefers-reduced-motion:reduce){body .shell .main[class] :is(.btn,.course-card,.account-tile,.account-summary-item,.topic-tile,.round-arrow){transition:none!important;transform:none!important}}