*{box-sizing:border-box} :root{--ink:#142e27;--muted:#53645b;--paper:#f5f4ee;--green:#c4f277;--line:#d4d8cd}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif;line-height:1.6}a{color:inherit}button,input,select,textarea{font:inherit}button,a,input,select,summary,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #22784f;outline-offset:4px}[hidden]{display:none!important}.wrap{max-width:1160px;margin:auto;padding-left:32px;padding-right:32px}header{height:96px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{font-size:29px;font-weight:900;letter-spacing:-2px;text-decoration:none}.brand span{font-size:11px;letter-spacing:1.5px;margin-left:12px;vertical-align:middle}.nav{font-size:13px;text-decoration:none;padding:12px 0}.hero{padding-top:58px;padding-bottom:38px}.eyebrow{font-size:11px;letter-spacing:2px;font-weight:700;display:flex;align-items:center;gap:10px}.dot{width:8px;height:8px;border-radius:50%;background:#2b774c}h1{font-size:clamp(65px,8.3vw,108px);line-height:.99;letter-spacing:-6px;margin:23px 0}em{font-family:Georgia,serif;font-weight:400}h1 em{background:var(--green);padding:0 16px 2px 7px;border-radius:60px}.intro{display:flex;justify-content:space-between;align-items:end;gap:20px}.intro p{font-size:18px;margin:0}.intro p span{font-size:15px;color:var(--muted)}.badges{display:flex;gap:8px;flex-wrap:wrap}.badges span{font-size:11px;border:1px solid #bec7b9;padding:7px 11px;border-radius:20px}.workspace{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:start;padding-bottom:65px}.panel,.preview-card{border:1px solid var(--line);border-radius:22px;padding:30px;background:white}.section-title{display:flex;align-items:center;gap:10px;margin-bottom:24px}.step{display:inline-flex;border:1px solid #aab7a7;border-radius:50%;width:28px;height:28px;align-items:center;justify-content:center;font-size:11px;flex:none}h2{font-size:28px;letter-spacing:-.8px;line-height:1.3;margin:0 0 25px}h2 small{font-size:19px;font-weight:400;color:var(--muted)}.section-title h2{font-size:18px;margin:0;letter-spacing:-.3px}.section-title small{font-size:13px;display:block}.panel label{display:block;font-size:12px;font-weight:700;margin:16px 0 7px}input:not([type=checkbox]),select,textarea{width:100%;min-width:0;border:1px solid #bac4b6;border-radius:8px;background:#fcfcf9;padding:12px;color:var(--ink);min-height:46px}textarea{resize:vertical}input[type=color]{padding:5px;height:48px}input[type=file]{font-size:12px}input::file-selector-button{padding:8px;border:0;border-radius:4px;background:#e7eddf;color:var(--ink)}.hint{font-size:11px;color:var(--muted);margin:7px 0}.custom{border-top:1px solid var(--line);margin-top:25px;padding-top:20px}.custom summary{font-size:14px;font-weight:700;cursor:pointer;min-height:44px}.custom summary .step{margin-right:6px}.custom summary small{font-size:11px;font-weight:400}.custom-body{padding:4px 0 15px}.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}.check{display:flex!important;align-items:center;gap:8px;min-height:44px}input[type=checkbox]{width:18px;height:18px}.primary,.secondary{border:1px solid var(--ink);border-radius:9px;padding:13px 18px;min-height:48px;font-weight:700}.primary{background:var(--ink);color:white}.primary:hover{background:#28543e}.secondary{background:transparent;color:var(--ink)}button:disabled{opacity:.45;cursor:not-allowed}.generate{width:100%;display:flex;justify-content:space-between;gap:8px;margin-top:20px;font-size:14px}.generate span{font-size:12px;font-weight:400}.local{margin-top:15px}.error{font-size:13px;color:#a02224;margin:12px 0 0}.error:empty{display:none}.text-button{background:none;border:0;text-decoration:underline;color:var(--ink);min-height:44px}.preview-card{background:#eaf0df;position:sticky;top:24px}.preview-head{display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:1.4px;font-weight:700}.live{font-size:9px;border:1px solid #9da991;padding:4px 7px;border-radius:20px;letter-spacing:.5px}.qr-stage{background:white;border-radius:14px;margin:25px auto 20px;padding:14px;max-width:330px;aspect-ratio:1;display:flex;align-items:center;justify-content:center}#qr{width:100%;aspect-ratio:1}#qr svg,#qr canvas{display:block;width:100%;height:auto}.status{text-align:center;min-height:49px;font-size:12px;color:var(--muted)}.downloads{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}.scan-note{font-size:11px;color:var(--muted);text-align:center;margin:18px 0}.tiny-facts{border-top:1px solid #c8d0bc;padding-top:18px;display:flex;justify-content:center;gap:12px;flex-wrap:wrap;font-size:10px}.how{padding-top:10px;padding-bottom:65px}.how h2,.faq h2{margin-top:15px}.three{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.three article{border-top:1px solid var(--line);padding-top:20px}.three article b,.cards a>span{font-size:10px;letter-spacing:1.6px}.three h3{font-size:18px;margin:12px 0 10px}.three p{font-size:14px;color:var(--muted);margin:0}.beyond{background:var(--ink);color:#f5f4ee;padding:65px 0}.beyond .eyebrow{color:#c4f277}.beyond h2{font-size:clamp(28px,4vw,45px);margin-top:23px;letter-spacing:-1.5px}.beyond em{color:var(--green)}.lead{font-size:14px;max-width:650px;color:#c9d5c8;margin-bottom:30px}.cards a{display:flex;flex-direction:column;align-items:start;text-decoration:none;border:1px solid #50634e;border-radius:14px;padding:25px;transition:background .2s}.cards a:hover{background:#234436}.cards a>span{color:var(--green)}.cards p{color:#c9d5c8;flex:1}.cards b{font-size:12px;margin-top:28px;color:var(--green)}.company{border-top:1px solid #50634e;margin-top:35px;padding-top:25px;display:flex;justify-content:space-between;gap:30px;align-items:center}.company p{max-width:690px;font-size:12px;color:#c9d5c8}.company strong{color:white}.company a{font-size:12px;white-space:nowrap}.faq{padding-top:65px;padding-bottom:60px}.faq details{border-bottom:1px solid var(--line);padding:4px 0}.faq summary{cursor:pointer;font-size:15px;font-weight:700;padding:18px 0;min-height:48px}.faq p{font-size:14px;max-width:850px;color:var(--muted);margin:0 0 20px}footer{display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding-top:25px;padding-bottom:30px}footer p,footer>a:last-child{font-size:10px;color:var(--muted)}.skip{position:absolute;top:-100px;background:white;padding:15px;z-index:10}.skip:focus{top:0}@media(max-width:760px){.wrap{padding-left:20px;padding-right:20px}header{height:76px}.brand span{display:none}.hero{padding-top:35px}h1{letter-spacing:-3px}.intro{display:block}.badges{margin-top:18px}.workspace{grid-template-columns:1fr;gap:16px}.panel,.preview-card{padding:22px;border-radius:16px}.preview-card{position:static}.three{grid-template-columns:1fr;gap:22px}.company{display:block}.company a{display:inline-block;padding:12px 0}.how,.faq{padding-bottom:40px}.beyond{padding:45px 0}footer{align-items:start;flex-wrap:wrap}footer p{max-width:235px}.generate{font-size:13px}.custom summary small{display:block;margin-left:39px}.nav{font-size:11px}.qr-stage{max-width:300px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Tool-first layout: one compact identity, one instruction line, then the task. */
header{height:58px}.brand{display:inline-flex;align-items:center;min-height:44px;letter-spacing:normal}.wins-logo{display:block;width:104px;height:auto}.nav{font-size:12px}.tool-intro{padding-top:24px;padding-bottom:18px}.title-row{display:flex;justify-content:space-between;align-items:center;gap:24px}.tool-intro .eyebrow{margin:0 0 6px;font-size:10px;letter-spacing:1.4px;color:var(--muted)}.tool-intro h1{font-size:32px;line-height:1.2;letter-spacing:-1px;margin:0}.tool-intro h1 span{display:inline-block;font-size:16px;font-weight:400;letter-spacing:0;margin-left:12px;color:var(--muted)}.tool-description{font-size:13px;line-height:1.6;color:var(--muted);margin:10px 0 0}.mascot-accent{display:block;width:96px;height:64px;object-fit:contain;flex:none}.quick-guide{display:flex;align-items:center;gap:13px;margin-top:17px;font-size:12px;color:var(--muted)}.quick-guide span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}.quick-guide b{font-size:10px;font-weight:600;background:#e5eddb;display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px;border-radius:50%;color:var(--ink)}.quick-guide i{font-style:normal;color:#73806e}.workspace{gap:22px;padding-bottom:48px}.panel,.preview-card{padding:24px;border-radius:16px}.section-title{margin-bottom:16px}.section-title h2{font-size:17px}.section-title small{display:inline;font-size:12px;margin-left:5px}.panel label{margin-top:13px}.custom{margin-top:18px;padding-top:14px}.generate{margin-top:14px}.preview-card{top:16px}.qr-stage{max-width:270px;margin:18px auto 12px}.status{min-height:40px}.downloads{margin-top:12px}.scan-note{margin:12px 0}.tiny-facts{padding-top:12px;gap:9px}footer .wins-logo{width:104px}
@media(max-width:760px){.wrap{padding-left:20px;padding-right:20px}header{height:54px}.wins-logo{width:96px}.nav{font-size:12px}.tool-intro{padding-top:18px;padding-bottom:16px}.title-row{align-items:center;gap:12px}.tool-intro h1{font-size:25px;line-height:1.2;letter-spacing:-.8px}.tool-intro h1 span{display:block;margin:5px 0 0;font-size:13px}.tool-intro .eyebrow{font-size:9px;margin-bottom:5px;letter-spacing:1px}.tool-description{font-size:12px;margin-top:9px;max-width:370px}.mascot-accent{width:76px;height:51px}.quick-guide{font-size:11px;gap:9px;margin-top:13px}.quick-guide span{gap:5px}.quick-guide b{width:17px;height:17px;font-size:9px}.workspace{grid-template-columns:1fr;gap:16px;padding-bottom:32px}.panel,.preview-card{padding:18px}.section-title{margin-bottom:15px}.section-title h2{font-size:16px}.section-title small{font-size:11px}.panel label{font-size:12px;margin-top:12px}.custom summary small{display:inline;margin-left:0}.custom summary{font-size:13px}.custom summary .step{width:24px;height:24px}.qr-stage{max-width:270px}.preview-card{position:static}footer .wins-logo{width:96px}}
@media(max-width:370px){.wrap{padding-left:16px;padding-right:16px}.tool-intro h1{font-size:23px}.mascot-accent{width:64px;height:43px}.quick-guide{gap:6px;font-size:10px}.quick-guide span{gap:4px}.section-title small{display:block;margin-left:0}.generate{font-size:12px}}

/* Digital studio: restrained grid, light paths and state-driven feedback. */
body{background-color:#f5f7f2;background-image:radial-gradient(ellipse at 85% 8%,#d9e6fa66,transparent 38%),radial-gradient(ellipse at 8% 24%,#dff4e577,transparent 40%),linear-gradient(#356b5310 1px,transparent 1px),linear-gradient(90deg,#356b5310 1px,transparent 1px);background-size:auto,auto,40px 40px,40px 40px}.header-actions{display:flex;align-items:center;gap:16px}.motion-toggle{font-size:11px;color:var(--muted);border:1px solid #b9c8bb;border-radius:20px;padding:7px 11px;min-height:44px;background:#ffffff99;cursor:pointer}.title-row{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px}.tool-intro{padding-top:12px;padding-bottom:20px}.mascot-scene{position:relative;isolation:isolate;width:320px;height:196px;display:flex;align-items:center;justify-content:center}.mascot-scene:before{content:"";position:absolute;inset:24px 4px 12px;background:radial-gradient(ellipse,#aff1d25c,transparent 68%);border-radius:50%;z-index:-1}.mascot-accent{width:320px;height:auto;filter:drop-shadow(0 9px 12px #24473818);animation:mascot-hover 5s ease-in-out infinite}.orbit{position:absolute;inset:35px 0 12px;border:1px solid #6b9d8f42;border-radius:50%;transform:rotate(-12deg);z-index:-1}.orbit-two{inset:18px 14px 7px;transform:rotate(13deg);border-color:#889be044}.orbit-one:after{content:"";position:absolute;top:18%;right:8%;width:5px;height:5px;background:#43876f;border-radius:50%;box-shadow:0 0 9px #4abf92}.quick-guide{margin-top:0;gap:14px}.guide-step{position:relative;border:1px solid transparent;border-radius:20px;padding:5px 9px;transition:background .25s,border-color .25s,color .25s}.guide-step.is-active{background:#e1f1e5;border-color:#90b59f;color:#163c2e}.guide-step.is-active b{background:#245b45;color:white}.step-link{position:relative;display:inline-block;width:36px;overflow:hidden;text-align:center}.step-link:after{content:"";position:absolute;top:50%;left:-4px;width:4px;height:4px;border-radius:50%;background:#3f896b;animation:signal-flow 2.8s ease-in-out infinite}.step-link:nth-of-type(2):after{animation-delay:.7s}.panel,.preview-card{box-shadow:0 10px 32px #234b3410;border-color:#bdcfc3}.panel{background:#ffffffed}.preview-card{background:linear-gradient(135deg,#edf4e9,#e4eee6)}input:not([type=checkbox]),select,textarea{transition:border-color .2s,box-shadow .2s}input:focus,select:focus,textarea:focus{border-color:#3e8b6b;box-shadow:0 0 0 3px #3e8b6b16}.primary{background:linear-gradient(115deg,#163b2d,#236047);box-shadow:0 4px 12px #173d2c18;transition:transform .2s,box-shadow .2s}.primary:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 7px 16px #173d2c28}.primary:not(:disabled):active{transform:translateY(0)}.preview-card.is-generated{animation:generated-feedback .75s ease-out}.cards a{transition:transform .25s,background .25s,border-color .25s}.cards a:hover{transform:translateY(-4px);border-color:#98cfac}.reveal{opacity:0;transform:translateY(14px);transition:opacity .55s,transform .55s}.reveal.is-visible{opacity:1;transform:none}.motion-off *,.motion-paused *,.motion-paused *:before,.motion-paused *:after{animation-play-state:paused!important}.motion-off .mascot-accent,.motion-off .primary,.motion-off .cards a{transform:none!important}.motion-off .step-link:after{display:none}.motion-off .reveal{opacity:1;transform:none;transition:none}.motion-off *,.motion-off *:before,.motion-off *:after{animation:none!important;transition:none!important}
@keyframes mascot-hover{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes signal-flow{0%,15%{transform:translateX(0);opacity:0}30%{opacity:.8}75%{opacity:.8}90%,100%{transform:translateX(40px);opacity:0}}
@keyframes generated-feedback{0%{box-shadow:0 0 0 0 #4eaa7f66}100%{box-shadow:0 0 0 12px #4eaa7f00}}
@media(max-width:1000px) and (min-width:761px){.tool-intro h1 span{display:block;margin:6px 0 0}.title-row{grid-template-columns:minmax(0,1fr) 280px}.mascot-scene{width:280px;height:184px}.mascot-accent{width:280px}}
@media(max-width:760px){.header-actions{gap:9px}.motion-toggle{font-size:10px;min-height:44px;padding:5px 9px;border-color:transparent;background:transparent}.tool-intro{padding-top:18px;padding-bottom:16px}.title-row{display:block}.tool-intro h1{font-size:27px}.tool-description{max-width:none}.mascot-scene{width:190px;height:108px;margin:6px auto 4px}.mascot-accent{width:170px;height:auto}.orbit{inset:18px 5px 5px}.orbit-two{inset:6px 14px 3px}.quick-guide{justify-content:center;gap:7px;margin-top:0}.guide-step{padding:4px 6px}.step-link{width:19px}.step-link:after{animation-name:signal-flow-mobile}.cards a:hover{transform:none}.primary:not(:disabled):hover{transform:none}}
@keyframes signal-flow-mobile{0%,15%{transform:translateX(0);opacity:0}30%{opacity:.8}75%{opacity:.8}90%,100%{transform:translateX(23px);opacity:0}}
@media(max-width:370px){.header-actions{gap:5px}.nav{font-size:11px}.wins-logo{width:90px}.quick-guide{gap:3px}.guide-step{padding:4px}.tool-intro h1{font-size:25px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.reveal{opacity:1;transform:none}.step-link:after{display:none}}

/* Three matching character scenes make each course's purpose visible. */
.cards a{padding:0;overflow:hidden}.course-scene{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-bottom:1px solid #50634e;background:#e7ecdd}.course-copy{display:flex;flex-direction:column;align-items:flex-start;flex:1;width:100%;min-width:0;padding:22px 24px 24px}.cards .course-copy>span{font-size:10px;letter-spacing:1.6px;color:var(--green)}.cards .course-copy p{flex:1}.cards .course-copy b{margin-top:24px}@media(max-width:760px){.course-copy{padding:20px 22px 22px}}