:root{--ink:#2e2731;--pink:#ce5378;--pink2:#fff0f5;--teal:#63b7a7;--line:#eddde2;--paper:#fffafb;--muted:#847780;--white:#fff;--shadow:0 16px 50px rgba(90,42,60,.07)}*{box-sizing:border-box}body{margin:0;background:var(--paper);font:16px/1.55 system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:var(--ink)}button,input,select{font:inherit}button{cursor:pointer;transition:transform .15s,background .15s}button:hover{transform:translateY(-2px)}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #4d9ed5;outline-offset:3px}a{text-decoration:none;color:inherit}.top{height:88px;background:white;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 max(22px,calc((100vw - 1120px)/2))}.logo{display:flex;align-items:center;gap:12px}.logoicon{background:var(--pink);border-radius:13px;color:white;font-size:25px;padding:8px 12px}.logo b,.logo small{display:block}.logo small{font-size:12px;color:var(--muted)}.home{font-weight:700;font-size:14px}.shell{max-width:1120px;margin:auto;padding:30px 22px}.hero{border-radius:30px;background:linear-gradient(115deg,#fff0f3,#eaf9f4);display:grid;grid-template-columns:1.5fr .8fr;gap:18px;padding:42px 50px;align-items:center;overflow:hidden}.eyebrow{color:var(--pink);font-size:12px;font-weight:850;letter-spacing:.14em}h1{font-size:clamp(35px,5vw,59px);line-height:1.1;letter-spacing:-.05em;margin:12px 0 18px}h1 em{color:var(--pink);font-style:normal}.hero p{max-width:560px;color:#685b64;font-size:17px}.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:23px}.chips span{font-size:12px;background:white;padding:7px 12px;border-radius:100px;font-weight:700}.heroart{font-size:120px;text-align:center;line-height:1.1;filter:drop-shadow(0 14px 12px #dbacb4)}.heroart span,.heroart small{display:block;font-size:35px;color:var(--pink);font-weight:800;filter:none}.heroart small{font-size:16px;color:#786b74}.control{margin:22px 0;background:white;border:1px solid var(--line);border-radius:18px;padding:20px 24px;display:flex;gap:18px;align-items:center;flex-wrap:wrap}.control label{font-weight:800}.control select{min-width:250px;max-width:100%;flex:1}.counts{display:flex;gap:12px;color:var(--muted);font-size:13px;font-weight:700}select,input{border:1px solid #e6d8dd;border-radius:12px;background:white;padding:11px 13px;color:var(--ink)}.tabs{display:flex;gap:10px;overflow-x:auto;padding:4px 0 14px}.tabs button{white-space:nowrap;border:1px solid var(--line);background:white;border-radius:12px;padding:13px 20px;font-weight:800;color:#665963}.tabs button.selected{background:var(--pink);color:white;border-color:var(--pink)}.panel{display:none;background:white;border:1px solid var(--line);border-radius:24px;padding:32px;box-shadow:var(--shadow);min-height:420px}.panel.active{display:block}.sectionheading{display:flex;justify-content:space-between;align-items:end;gap:12px;margin-bottom:20px}h2{font-size:29px;letter-spacing:-.04em;margin:4px 0}.muted{color:var(--muted)}.overview{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:18px}.overview span{font-size:12px;border-radius:100px;padding:6px 10px;background:#f2faf7;color:#438c7e}.flash{border:2px solid #f0d7df;background:linear-gradient(160deg,#fff6f8,#f2fffb);border-radius:23px;text-align:center;min-height:310px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:25px;cursor:pointer}.tiny{color:#bb7b90;letter-spacing:.14em;font-size:11px;font-weight:900}.hanzi{font-size:clamp(45px,8vw,84px);font-weight:750;margin:8px 0;line-height:1.3}.py{font-size:24px;color:#bd4f73}.meaning{white-space:pre-line;color:#786871;font-size:18px;margin-top:14px;min-height:60px}.actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:20px}button.primary,.nextbtn{background:var(--pink);color:white;border:0;border-radius:12px;padding:13px 21px;font-weight:850}button.light{background:white;border:1px solid var(--line);color:#a53f60;border-radius:12px;padding:12px 18px;font-weight:750}.note{font-size:13px;color:var(--muted);margin-top:20px}.modes{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.modes button{min-height:172px;text-align:left;background:#fff7f9;border:1px solid var(--line);border-radius:17px;padding:20px}.modes button:nth-child(2){background:#effaf7}.modes button:nth-child(3){background:#f7f2ff}.modes button:nth-child(4){background:#fff9e9}.modes button span{display:block;font-size:32px}.modes button b,.modes button small{display:block;margin-top:7px}.modes button small{color:#81717b}.setup{display:flex;align-items:center;gap:18px;flex-wrap:wrap;color:var(--muted);font-size:13px;margin-top:20px}.setup label{font-weight:800}.game{border:1px solid var(--line);border-radius:20px;background:#fffafb;margin-top:22px;padding:26px}.hidden{display:none}.gamebar{display:flex;justify-content:space-between;gap:12px;color:var(--pink);font-weight:900}.prompt{text-align:center;padding:23px 0}.prompt .question{font-size:clamp(27px,5vw,48px);font-weight:850;margin:12px 0;overflow-wrap:anywhere}.prompt .small{color:var(--muted);font-size:14px}.ghost{border:1px solid var(--line);border-radius:100px;background:white;padding:8px 15px;color:var(--pink);font-weight:700}.option-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.option{border:2px solid var(--line);background:white;border-radius:15px;padding:20px 12px;min-height:72px;font-size:20px;font-weight:750}.option.correct{background:#e4f7e9;border-color:#3eae73}.option.wrong{background:#ffe5e7;border-color:#e27d87}.feedback{margin:18px 0;font-weight:700;color:#5d4b56}.nextbtn{display:block;margin:15px 0 0 auto}.duelsetup{display:flex;flex-wrap:wrap;gap:12px;align-items:end}.duelsetup label{display:grid;gap:5px;font-size:13px;font-weight:800}.duelsetup input{max-width:175px}.scores{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.scorecard{background:#fff;border:2px solid var(--line);border-radius:13px;padding:15px;display:grid;gap:6px}.scorecard.active{border-color:var(--pink);background:#fff1f5}.scorecard b{font-size:21px}.words{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:18px}.word{border:1px solid var(--line);border-radius:14px;padding:15px;display:flex;gap:12px;align-items:center}.cn{font-size:27px;font-weight:800;min-width:60px}.translation{flex:1;font-size:13px;color:#71636b}.translation b{color:var(--pink);font-size:15px}.translation small{display:block;color:#999}.word button{background:#fff1f5;border:0;border-radius:50%;height:39px;width:39px;flex-shrink:0}.reset{margin-top:22px}#search{width:100%}footer{text-align:center;color:#8b7c84;font-size:12px;padding:38px 0}@media(max-width:800px){.hero{grid-template-columns:1fr;padding:30px}.heroart{font-size:70px}.heroart span{font-size:25px}.modes{grid-template-columns:repeat(2,1fr)}.words{grid-template-columns:1fr}}@media(max-width:540px){.top{padding:0 15px;height:75px}.logo small{font-size:10px}.home{font-size:12px}.shell{padding:18px 12px}.hero{padding:24px}.heroart{display:none}.panel{padding:19px}.modes{grid-template-columns:1fr 1fr}.modes button{padding:14px;min-height:160px}.option-grid{grid-template-columns:1fr}.control{padding:15px}.counts{width:100%}.actions button{flex:1}.duelsetup label{width:100%}.duelsetup input{max-width:none}}


/* Hanzi writing studio */
.writer-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:start;margin:24px 0}
.writer-controls{min-width:0}
.writer-controls select{display:block;width:100%;max-width:540px;margin:8px 0 16px;padding:12px;border-radius:12px;border:1px solid #e8cbd3;background:white}
.writing-word{font-size:54px;font-weight:700;line-height:1.4;color:#392c43}
.stroke-controls{display:flex;gap:12px;align-items:center;margin:16px 0;flex-wrap:wrap}
.writer-layout .actions{display:flex;flex-wrap:wrap;gap:9px}
.writing-board{position:relative;width:320px;height:320px;max-width:100%;border:2px solid #dba8b9;border-radius:18px;background:white;overflow:hidden;margin:auto}
.grid-guides{pointer-events:none;position:absolute;inset:12px;border:1px solid #f3dfe7;background:linear-gradient(to right,transparent calc(50% - .5px),#f2e0e6 50%,transparent calc(50% + .5px)),linear-gradient(to bottom,transparent calc(50% - .5px),#f2e0e6 50%,transparent calc(50% + .5px));z-index:0}
#characterTarget{position:absolute;inset:10px;z-index:1}
#characterTarget svg{display:block}
.example-box{background:#fff9fa;border:1px solid #f0dbe2;border-radius:20px;padding:22px;margin:18px 0}
.example-row{display:flex;gap:12px;align-items:start;justify-content:space-between;border-top:1px solid #f2dfe5;padding:14px 0}
.example-row:first-child{border-top:0}
.example-row .cn{font-size:25px;font-weight:700}
.example-row .py{font-size:15px}
.example-row .meaning{font-size:14px;white-space:normal}
@media(max-width:720px){.writer-layout{grid-template-columns:1fr}.writing-board{width:300px;height:300px}.writing-word{font-size:42px}}

.audio-status{position:fixed;z-index:9999;bottom:16px;left:50%;transform:translateX(-50%);background:#342447;color:white;border-radius:14px;padding:12px 18px;max-width:min(92vw,600px);box-shadow:0 8px 30px #0002;text-align:center;font-size:14px}

/* YCT 2 & 3 book explorer */
.yct-toolbar{display:flex;gap:16px;flex-wrap:wrap;background:#fff4f7;border:1px solid #f2dbe3;border-radius:16px;padding:16px;margin:20px 0}.yct-toolbar label{display:flex;flex-direction:column;gap:7px;font-weight:700;flex:1;min-width:200px}.yct-toolbar select{width:100%;padding:12px;border:1px solid #e7c6d1;border-radius:11px;background:white;font:inherit}.yct-pages{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin:14px 0}.yct-pages button{background:#d34e7c;border:0;color:white;border-radius:10px;padding:11px 14px;font:inherit;cursor:pointer}.yct-pages button:disabled{opacity:.35;cursor:not-allowed}.yct-reader{background:#f7f3f6;border:1px solid #efdce2;border-radius:18px;padding:10px;display:flex;justify-content:center}.yct-reader img{display:block;width:100%;max-width:650px;height:auto;object-fit:contain;box-shadow:0 5px 25px #4422331c}.yct-unit-note{background:#f9f4ff;border-radius:13px;padding:15px;line-height:1.7}.yct-unit-note h3{margin:0 0 8px}.yct-unit-note p{margin:5px 0}.yct-unit-note strong{color:#9c3f73}

/* 2026 Studio redesign — no AI-generated artwork */
:root{--pink:#d45276;--ink:#25283d;--muted:#697081;--line:#e4e7ee;--shadow:0 14px 38px #343b5710}
body{background:#f7f8fb;color:var(--ink)}
.top{background:#fff;border-bottom:1px solid #e9eaf1}
.logoicon{background:#f3d6e1;color:#a83b62}
.shell{max-width:1180px}
.hero{background:#fff;border:1px solid #e9e9f1;box-shadow:0 10px 32px #242d4b0a;grid-template-columns:1.4fr .55fr;padding:48px 55px}
.hero h1{font-weight:850;letter-spacing:-.055em}
.hero p{color:#657083}
.heroart{background:#f2f5ff;border:1px solid #e6eafa;border-radius:26px;padding:28px 16px;filter:none}
.hero-hanzi{font-size:clamp(65px,8vw,110px);font-weight:900;color:#4e61a0;letter-spacing:.04em;line-height:1.2}
.heroart span{color:#c74f73;font-size:29px;margin-top:10px}
.heroart small{color:#68758e}
.chips span{background:#f6f7fb;border:1px solid #e9ebf2;color:#596479}
.control{box-shadow:0 5px 20px #22294407}
.tabs button{border-radius:13px;color:#596175}
.tabs button.selected{background:#28395d;border-color:#28395d}
.panel{border-color:#e8eaf0;box-shadow:0 8px 24px #212f4b08}
.flash{background:#f7f9ff;border-color:#e3e7f5}
.word{background:#fff}
.town-wrap{background:#fff;border:1px solid #e4e7ef;border-radius:22px;overflow:hidden}
.town-head{padding:15px 20px;background:#f8f9fd;display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap}
.town-head>div{display:flex;gap:8px;flex-wrap:wrap}
.town-badge{background:#fff;border:1px solid #e6e8ef;border-radius:100px;padding:9px 12px;font-size:13px;font-weight:750}
.town-head .light{padding:8px 12px}
.town-stage{min-height:480px;position:relative;overflow:hidden;background:linear-gradient(#dceefb 0 35%,#f5f7e8 35% 65%,#e8cfae 65% 100%);padding:20px}
.town-decor{height:95px;position:relative}
.sun{position:absolute;right:12%;top:0;width:56px;height:56px;background:#ffdc85;border-radius:50%;box-shadow:0 0 0 14px #ffdc852a}
.awning{position:absolute;left:0;bottom:0;width:100%;height:34px;background:repeating-linear-gradient(90deg,#e27b91 0 70px,#fff9f3 70px 140px);border-radius:10px 10px 4px 4px;border-bottom:5px solid #aa5c68}
.shelf-line{position:absolute;bottom:-3px;width:100%;height:9px;background:#aa6e56}
.customer{display:flex;align-items:center;gap:15px;margin:17px 5px}
.customer-face{width:76px;height:76px;flex-shrink:0;background:#f9d3a5;border:5px solid #513e58;border-radius:50%;font-size:56px;line-height:64px;text-align:center;color:#513e58}
.bubble{background:white;border:2px solid #a7b3ce;border-radius:18px;padding:14px 18px;box-shadow:0 5px 0 #8797b433;flex:1;max-width:700px}
.bubble strong{font-size:clamp(20px,3vw,31px);display:block;color:#263659}
.bubble small{display:block;color:#66718b;margin-top:6px}
.town-products{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;background:#fff9ef;border:3px solid #d4b89a;border-radius:17px;padding:15px;margin-top:18px}
.town-product{position:relative;border:2px solid #e2d4c6;background:white;border-radius:14px;min-height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:#303750}
.town-product:hover{border-color:#de7390;background:#fff7f9}
.town-product:disabled{opacity:.7}
.town-icon{font-size:35px;line-height:1.3}
.town-product b{font-size:19px}
.town-product small{font-size:12px;color:#687184}
.town-qty{position:absolute;top:7px;right:7px;background:#334e7c;color:white;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-weight:800}
.town-serve{grid-column:1/-1;font-size:16px}
.town-foot{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:13px 5px 0;font-size:14px;font-weight:700;color:#36466a}
.town-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;padding:19px}
.town-note{padding:0 20px 20px;font-size:12px;color:#7a8191}
@media(max-width:700px){.hero{padding:28px;grid-template-columns:1fr}.heroart{display:none}.town-products{grid-template-columns:repeat(2,minmax(0,1fr))}.town-stage{padding:10px}.town-head{padding:12px}.town-foot{flex-direction:column;align-items:flex-start}.customer-face{width:54px;height:54px;line-height:45px;font-size:42px}.bubble{padding:10px}.town-product{min-height:110px}}

/* Jasmine Studio / editorial redesign. Drawn in CSS, no generated imagery. */
:root{--ink:#26312f;--pink:#bb536c;--muted:#6c7774;--line:#e1e7e2;--paper:#f8faf7;--shadow:0 12px 28px rgba(37,55,48,.035)}
html{scroll-behavior:smooth}
body{background:#f8faf7;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;color:var(--ink);font-size:15px;line-height:1.65}
.top{height:76px;padding:0 max(26px,calc((100vw - 1240px)/2));border-color:#e7ebe6;background:#fff}
.logo{gap:13px}.logoicon{background:#2b5148;border-radius:10px;padding:7px 12px;font-size:21px}
.logo b{font-size:14px;letter-spacing:-.015em}.logo small{font-size:11px;color:#87928b}
.home{color:#64716a;font-size:13px;font-weight:600}
.shell{max-width:1240px;padding:32px 28px 0}
.hero{background:#eaf0e9;grid-template-columns:1.25fr .8fr;gap:52px;padding:70px 74px;border:0;border-radius:14px;box-shadow:none;min-height:430px}
.hero .eyebrow{font-size:10px;color:#517267;font-weight:750;letter-spacing:.22em}
.hero h1{font-size:clamp(46px,5.3vw,76px);font-weight:750;letter-spacing:-.067em;line-height:1.07;margin:18px 0 24px}
.hero h1 em{font-style:italic;color:#b45468;font-family:Georgia,"Times New Roman",serif;font-weight:400;letter-spacing:-.045em}
.hero p{max-width:500px;color:#56645d;font-size:15px;line-height:1.85}
.chips{gap:8px;margin-top:29px}.chips span{background:#f6f9f4;border:1px solid #dbe5dc;color:#56675e;font-weight:600;border-radius:6px;padding:7px 12px;font-size:11px}
.heroart{background:#fdfcf7;border:1px solid #d8dfd5;border-radius:2px;filter:none;padding:34px 32px 18px;transform:rotate(2deg);box-shadow:11px 13px 0 #d8e3d9;min-height:304px;display:flex;flex-direction:column;justify-content:space-between;align-items:stretch}
.heroart .poster-kicker{font-size:9px;letter-spacing:.22em;text-align:left;color:#6b8577;font-weight:700}
.heroart .hero-hanzi{font-size:clamp(60px,7vw,92px);letter-spacing:.04em;font-weight:550;color:#31564c;text-align:center;line-height:1.4;font-family:"Songti SC","Noto Serif CJK SC",serif}
.heroart span:not(.poster-kicker){font-size:19px;color:#bd6773;font-weight:500}
.heroart small{font-size:12px;color:#7b8a80;font-weight:500}
.heroart .poster-bottom{display:flex;justify-content:space-between;border-top:1px solid #e3e8e0;padding-top:12px;font-size:9px;letter-spacing:.14em;color:#84928a;font-weight:700}
.heroart .poster-bottom span{font-size:9px;color:#84928a}
.control{margin:25px 0 18px;border-radius:12px;border:1px solid #e5e9e5;padding:24px 26px;box-shadow:none;gap:12px 18px;background:#fff}
.control label{font-size:10px;letter-spacing:.12em;color:#62756c;font-weight:800}
.control select{min-width:170px;flex:1;padding:12px 14px}
.control #courseNotice{flex-basis:100%;order:4;font-size:11px;margin:0}
.counts{font-size:12px;color:#74837b}
select,input{border:1px solid #dfe6e0;border-radius:8px;background:#fff;color:#34433b}
.tabs{gap:5px;padding:0 0 16px;scrollbar-width:thin}
.tabs button{font-size:13px;font-weight:650;padding:13px 17px;border:1px solid transparent;border-radius:8px;background:transparent;color:#6b7971}
.tabs button:hover{background:#eef3ee}
.tabs button.selected{background:#31574d;border-color:#31574d;color:white}
.panel{border-radius:13px;border-color:#e5e9e5;padding:40px 46px;box-shadow:none;min-height:470px}
.sectionheading{margin-bottom:25px}
.sectionheading .eyebrow{font-size:10px;letter-spacing:.18em;color:#9a6474}
h2{font-size:clamp(25px,3vw,34px);letter-spacing:-.045em;font-weight:720}
.muted{color:#78847c}
.flash{background:#f4f7f1;border:1px solid #e3e9dd;border-radius:10px;min-height:330px}
.tiny{color:#7a9384;font-size:10px}
.hanzi{font-size:clamp(64px,8vw,102px);color:#284d43;font-weight:550;font-family:"Songti SC","Noto Serif CJK SC",serif}
.py{color:#b25268}
.meaning{color:#6c7971}
button.primary,.nextbtn{background:#31584e;border-radius:8px;font-weight:700}
button.primary:hover,.nextbtn:hover{background:#23463c}
button.light{border-color:#dfe6df;color:#405b50;border-radius:8px;font-weight:650}
.overview span{background:#eef3eb;color:#587266}
.modes{gap:13px}.modes button{background:#f5f8f4!important;border-color:#e0e7df;border-radius:10px;min-height:178px}
.modes button:hover{border-color:#8ba99a;background:#edf4ed!important}
.modes button b{font-size:15px;color:#344e43}
.modes button span{font-size:30px;color:#557566}
.game{background:#f7faf6;border-color:#e1e9df;border-radius:12px}
.option{border-color:#dfe7de;border-radius:9px}
.option:hover{border-color:#89a696}
.word{border-color:#e1e8e0;border-radius:9px}
.word button{background:#edf3eb;color:#406357}
.example-box{background:#f8faf7;border-color:#e2e9e1;border-radius:11px}
.writing-board{border-color:#cdded2;border-radius:8px}
.town-wrap{border-color:#e3e9e3;border-radius:12px}
.town-head{background:#f6f8f5}
.town-stage{background:linear-gradient(#e1edea 0 35%,#edf2e9 35% 65%,#ddc7ac 65% 100%)}
.awning{background:repeating-linear-gradient(90deg,#d88b91 0 70px,#fefaf3 70px 140px)}
.town-product{border-color:#e4e5dd;border-radius:9px}
.town-product:hover{border-color:#96b7a4;background:#f4f8f1}
.town-badge{border-radius:6px}
.town-note{color:#8a958d}
footer{font-size:11px;color:#8d998f;padding:45px 10px 30px}
@media(max-width:850px){.hero{padding:45px;gap:28px}.heroart{min-height:260px}.heroart .hero-hanzi{font-size:58px}.panel{padding:27px}}
@media(max-width:620px){.shell{padding:15px}.hero{grid-template-columns:1fr;padding:33px 27px;min-height:unset}.hero h1{font-size:46px}.heroart{display:none}.control{padding:19px;display:grid;gap:9px}.control select{min-width:0;width:100%}.control #courseNotice{order:unset}.panel{padding:23px 17px}.tabs button{font-size:12px;padding:11px 13px}.modes{grid-template-columns:1fr 1fr}.town-products{grid-template-columns:repeat(2,1fr)}}

/* Kids Studio — friendly, polished, accessible. CSS art only, no AI imagery. */
:root{--ink:#2c3b43;--pink:#d25e7d;--muted:#697c81;--line:#e7e8eb;--paper:#fffcf8;--shadow:0 12px 34px rgba(50,72,92,.06)}
body{background:#fffaf6;color:#2b3b43}
.top{border-bottom:1px solid #f1e9e5;background:#fffefa}
.logoicon{background:#f9dce4;color:#a94265;border-radius:13px;box-shadow:0 3px 0 #f1bccd}
.shell{max-width:1210px}
.hero{background:#eaf6f3;border-radius:24px;min-height:410px;position:relative;overflow:hidden;box-shadow:0 8px 0 #d9ece5;padding:62px 66px;gap:40px}
.hero:before{content:'';position:absolute;width:185px;height:185px;border:25px solid #d5ebe5;border-radius:50%;left:-135px;top:-100px;pointer-events:none}
.hero:after{content:'';position:absolute;width:120px;height:120px;border:18px solid #d7ece8;border-radius:50%;right:-70px;bottom:-60px;pointer-events:none}
.hero .eyebrow{color:#538579;letter-spacing:.13em;font-size:11px}
.hero h1{font-size:clamp(43px,5vw,70px);line-height:1.12;color:#2c504a;font-weight:800;letter-spacing:-.055em}
.hero h1 em{color:#d35e7c;font-style:normal;font-family:inherit;font-weight:800}
.hero p{font-size:16px;line-height:1.75;max-width:520px;color:#59716b}
.chips span{background:#fff;border:1px solid #d8ebe4;border-radius:22px;color:#51766a;font-size:12px;padding:9px 14px}
.heroart{background:#fffdf8;transform:rotate(3deg);border:2px solid #f2e3d5;box-shadow:9px 11px 0 #cde7e1;border-radius:18px;min-height:295px;padding:30px}
.heroart .hero-hanzi{font-size:clamp(60px,7vw,100px);color:#db7590;font-weight:650}
.heroart .poster-kicker{color:#759a8e}
.heroart span:not(.poster-kicker){color:#4c8478}
.control{border-radius:18px;background:#fff;border-color:#f0e8e4;box-shadow:0 5px 20px #6b5e5208}
.control label{font-size:11px;letter-spacing:.07em;color:#68857b}
.control select,select{border-radius:11px;border:2px solid #e6ece7;padding:13px 14px;min-height:45px}
.tabs{gap:9px}
.tabs button{border-radius:12px;border:1px solid #f0e9e6;background:#fff;color:#637879;padding:13px 17px;font-weight:750}
.tabs button.selected{background:#d6607d;border-color:#d6607d;color:white;box-shadow:0 4px 0 #b84565}
.tabs button:hover:not(.selected){background:#fff3f5;border-color:#f2cdd7}
.panel{border:1px solid #f0e7e3;border-radius:20px;background:#fff;box-shadow:0 9px 25px #65554a09}
.sectionheading .eyebrow{color:#cb6d84;letter-spacing:.1em}
.sectionheading h2,h2{color:#344c4d;letter-spacing:-.04em}
.flash{background:#fff6e8;border:2px solid #f3e3cb;border-radius:19px;box-shadow:0 6px 0 #f7e8d2}
.hanzi{color:#3b756e}
.py{color:#d45b7b}
button.primary,.nextbtn{background:#d6607d;border-radius:12px;box-shadow:0 4px 0 #b84565;min-height:45px}
button.primary:hover,.nextbtn:hover{background:#c84f70}
button.light{background:#fff;border:2px solid #eadfe2;border-radius:12px;color:#b64d70;min-height:44px}
button.light:hover{background:#fff3f5}
.modes button{background:#f4f9ff!important;border:2px solid #dfebf7;border-radius:16px;box-shadow:0 4px 0 #e0edf8}
.modes button:hover{background:#eaf5ff!important;border-color:#a9cce8}
.modes button b{color:#37586d}
.modes button span{color:#6998bd}
.option{border:2px solid #e4e8ed;border-radius:13px;min-height:55px}
.option:hover{border-color:#b3c9e8;background:#f4f9ff}
.word{border-radius:13px;border:1px solid #e8e9ed;background:#fff}
.example-box{background:#fffaf7;border:1px solid #f0e5df;border-radius:17px}
.writing-board{border-radius:16px;border:2px solid #e8d6df}
.town-wrap{border-radius:18px;overflow:hidden}
.town-head{background:#fff9ee}
.town-stage{background:linear-gradient(#dff1fb 0 35%,#f1f6e6 35% 65%,#f1d6b5 65% 100%)}
.awning{background:repeating-linear-gradient(90deg,#ee8da0 0 70px,#fffdf2 70px 140px)}
.town-product{border-radius:14px;box-shadow:0 4px 0 #e8d9c8;min-height:128px}
.town-product:hover{background:#fff2f5;border-color:#e9a4b6}
.town-badge{border-radius:10px}
.town-qty{background:#d45f7e}
@media(max-width:850px){.hero{padding:40px 32px}.heroart{min-height:250px}}
@media(max-width:620px){.hero{padding:34px 26px;border-radius:17px}.hero h1{font-size:44px}.panel{border-radius:15px}.tabs button{padding:11px 13px}}

/* Chinese panda hero — illustration integrated into existing site, no screenshot UI */
.hero{background:#e9f6f2;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;gap:0;padding:0 0 0 clamp(30px,4.5vw,66px);min-height:435px;overflow:hidden;border-radius:24px;position:relative}
.hero>div:first-child{position:relative;z-index:2;padding:48px 0}
.hero .eyebrow{color:#518678}
.hero h1{font-size:clamp(43px,4.6vw,68px);line-height:1.12}
.hero p{max-width:490px;font-size:15px}
.hero .chips{position:relative;z-index:3}
.heroart{display:block!important;position:relative;align-self:stretch;min-height:435px;overflow:hidden;transform:none!important;border:0!important;box-shadow:none!important;background:transparent!important;border-radius:0!important;padding:0!important;filter:none!important}
.heroart img{display:block;width:100%;height:100%;position:absolute;inset:0;object-fit:cover;object-position:42% center}
.heroart:before{content:'';position:absolute;z-index:1;left:0;top:0;bottom:0;width:65px;background:linear-gradient(90deg,#e9f6f2,rgba(233,246,242,0));pointer-events:none}
.hero:before,.hero:after{display:none}
@media(max-width:850px){.hero{grid-template-columns:1.1fr .9fr;padding-left:30px;min-height:380px}.heroart{min-height:380px}.hero>div:first-child{padding:35px 0}.hero h1{font-size:clamp(37px,5vw,54px)}}
@media(max-width:620px){.hero{display:flex;flex-direction:column;align-items:stretch;padding:0;gap:0;min-height:0}.hero>div:first-child{padding:34px 26px 18px}.heroart{display:block!important;min-height:270px;height:270px;width:100%}.heroart img{object-position:center 45%}.heroart:before{left:0;right:0;top:0;bottom:auto;height:50px;width:100%;background:linear-gradient(#e9f6f2,rgba(233,246,242,0))}.hero h1{font-size:clamp(38px,9vw,48px)}}
/* Make all game navigation buttons equal */
.game-tabs,
.tab-buttons,
.tabs {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}

.game-tabs button,
.tab-buttons button,
.tabs button {
  width: 100%;
  min-width: 0;
  min-height: 60px;
  padding: 12px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.3;
  white-space: normal;
  box-sizing: border-box;
}

/* Responsive */
@media (max-width: 900px) {
  .game-tabs,
  .tab-buttons,
  .tabs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 550px) {
  .game-tabs,
  .tab-buttons,
  .tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* Gold Miner matches the other tabs */
.tabs button.gold-miner,
.tabs button[data-tab="gold-miner"] {
  background: #fff;
  color: #526b68;
  border: 1px solid #e9e5e3;
}

/* Same active color as the Learn tab */
.tabs button.gold-miner.active,
.tabs button[data-tab="gold-miner"].active {
  background: #d85b7c;
  color: white;
  border-color: #d85b7c;
}