@import "https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&family=Noto+Serif+TC:wght@500;600;700&display=swap";:root{color:#073f36;font-synthesis:none;text-rendering:optimizelegibility;--green:#073f36;--gold:#d7b779;--pearl:#f8f0de;--ink:#173c35;--muted:#6d7d73;--line:#073f3629;--serif:"Noto Serif TC", Georgia, serif;--mono:"DM Mono", monospace;background:#f8f0de;font-family:Manrope,Noto Sans TC,system-ui,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:var(--pearl);min-width:320px;margin:0}button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--gold);outline-offset:4px}button{border:0}.app{min-height:100vh;overflow:hidden}.site-header{z-index:10;border-bottom:1px solid var(--line);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#f8f0deeb;justify-content:space-between;align-items:center;padding:25px 5.5vw;display:flex;position:relative}.brand{color:var(--green);align-items:center;gap:11px;text-decoration:none;display:inline-flex}.brand strong{letter-spacing:.17em;font-size:14px;line-height:1;display:block}.brand small{letter-spacing:.1em;margin-top:5px;font-size:10px;display:block}.brand-ring{border:1px solid var(--gold);border-radius:50%;place-items:center;width:32px;height:32px;display:grid;transform:rotate(-28deg)}.brand-ring:before,.brand-ring:after,.brand-ring span{content:"";border:1px solid var(--gold);border-radius:50%;width:20px;height:8px;display:block;position:absolute}.brand-ring:before{transform:rotate(60deg)}.brand-ring:after{transform:rotate(-60deg)}.brand-ring span{background:var(--gold);border:0;width:5px;height:5px}.main-nav{align-items:center;gap:24px;display:flex}.main-nav>button,.language-select{color:var(--green);letter-spacing:.03em;background:0 0;font-size:12px}.main-nav>button{border-bottom:1px solid #0000;padding:10px 0;transition:border-color .2s,color .2s}.main-nav>button:hover{border-color:var(--gold);color:#8a6a2b}.language-select{border-left:1px solid var(--line);align-items:center;gap:7px;padding-left:16px;display:flex}.language-select span{color:var(--muted);text-transform:uppercase;letter-spacing:.13em;font-size:10px}.language-select select{color:var(--green);background:0 0;border:0;padding:8px 0;font-size:12px}.menu-button{background:0 0;width:38px;padding:8px;display:none}.menu-button span{background:var(--green);height:1px;margin:5px 0;display:block}.hero{background:var(--green);min-height:610px;color:var(--pearl);grid-template-columns:1fr 1fr;padding:80px 8vw 72px;display:grid}.hero-copy{align-self:center;max-width:620px}.section-label,.mini-label{color:var(--gold);font-family:var(--mono);letter-spacing:.18em;text-transform:uppercase;align-items:center;gap:10px;font-size:10px;display:inline-flex}.section-label i{background:currentColor;width:22px;height:1px}.hero h1{max-width:610px;font-family:var(--serif);letter-spacing:-.05em;margin:24px 0 28px;font-size:clamp(40px,5vw,72px);font-weight:600;line-height:1.18}.hero p{color:#f8f0deb8;max-width:470px;margin:0;font-size:16px;line-height:1.95}.hero-actions{align-items:center;gap:28px;margin-top:42px;display:flex}.button{letter-spacing:.03em;justify-content:center;align-items:center;gap:18px;min-height:48px;padding:0 20px;font-size:12px;transition:transform .2s,background .2s,color .2s;display:inline-flex}.button:hover{transform:translateY(-3px)}.button-gold{color:var(--green);background:var(--gold)}.button-dark{color:var(--pearl);background:var(--green)}.button-outline{color:var(--green);background:0 0;border:1px solid #073f3659}.text-button{color:inherit;background:0 0;padding:0;font-size:12px}.text-button span,.text-button b{color:var(--gold)}.hero-art{min-height:450px;position:relative}.hero-circle{font-family:var(--mono);letter-spacing:.1em;border-radius:50%;place-items:center;font-size:10px;display:grid;position:absolute}.circle-large{color:#f8f0deb3;background:radial-gradient(circle at 34% 26%,#195b4d,#073f36 67%);width:min(30vw,310px);height:min(30vw,310px);top:11%;right:13%;box-shadow:0 0 0 1px #d7b77980,0 0 0 22px #d7b7790d}.circle-small{width:115px;height:115px;color:var(--green);background:var(--gold);bottom:8%;right:9%}.hero-orbit{border:1px solid #d7b77973;border-radius:50%;position:absolute;transform:rotate(-25deg)}.orbit-one{width:400px;height:300px;top:0;right:3%}.orbit-two{width:380px;height:220px;top:16%;right:-3%;transform:rotate(42deg)}.hero-caption{color:#f8f0de99;align-items:flex-start;gap:18px;display:flex;position:absolute;bottom:2%;left:4%}.hero-caption span{color:var(--gold);font-family:var(--mono);font-size:12px}.hero-caption p{font-family:var(--serif);margin:0;font-size:14px;line-height:1.5}.flow-strip{color:var(--green);border-bottom:1px solid var(--line);font-family:var(--mono);letter-spacing:.12em;text-transform:uppercase;justify-content:space-between;align-items:center;gap:20px;padding:19px 8vw;font-size:10px;display:flex}.flow-strip>span:first-child{font-family:var(--serif);letter-spacing:0;text-transform:none;font-size:13px}.flow-dot{background:var(--gold);border-radius:50%;width:5px;height:5px}.section-block,.tool-section{padding:106px 8vw}.tool-section{background:#073f360a;padding-top:20px}.section-heading{justify-content:space-between;align-items:end;gap:40px;margin-bottom:46px;display:flex}.section-heading h2,.result-heading h2{font-family:var(--serif);letter-spacing:-.04em;margin:15px 0 0;font-size:clamp(32px,4vw,52px);font-weight:600}.section-heading p{max-width:340px;color:var(--muted);margin:0;font-size:13px;line-height:1.8}.lesson-grid{border-top:1px solid var(--line);border-left:1px solid var(--line);grid-template-columns:repeat(7,1fr);display:grid}.lesson-card{min-height:280px;color:var(--green);text-align:left;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:#f8f0de59;padding:24px 16px;transition:color .3s,background .3s;position:relative;overflow:hidden}.lesson-card:hover{color:var(--pearl);background:var(--green)}.lesson-card:before{content:"";border:1px solid var(--lesson-color);opacity:.5;border-radius:50%;width:120px;height:120px;transition:transform .5s;position:absolute;bottom:-25px;right:-34px}.lesson-card:hover:before{transform:scale(1.5)}.lesson-number{z-index:1;font-family:var(--mono);color:var(--muted);font-size:10px;position:relative}.lesson-card:hover .lesson-number{color:var(--gold)}.lesson-orb{background:var(--lesson-color);width:34px;height:34px;box-shadow:0 0 0 8px color-mix(in srgb, var(--lesson-color) 14%, transparent);border-radius:50%;position:absolute;top:39%;left:24px}.lesson-name{font-family:var(--serif);font-size:22px;position:absolute;bottom:62px;left:16px}.lesson-en{font-family:var(--mono);letter-spacing:.15em;opacity:.65;font-size:9px;position:absolute;bottom:42px;left:16px}.lesson-keywords{opacity:.68;font-size:10px;position:absolute;bottom:18px;left:16px}.lesson-arrow{color:var(--gold);font-size:18px;position:absolute;bottom:18px;right:16px}.tool-grid{border-top:1px solid var(--line);border-left:1px solid var(--line);grid-template-columns:repeat(4,1fr);display:grid}.tool-card{min-height:280px;color:var(--green);text-align:left;border-right:1px solid var(--line);border-bottom:1px solid var(--line);background:0 0;padding:27px;transition:background .25s,color .25s;position:relative}.tool-card:hover{color:var(--pearl);background:var(--green)}.tool-index{font-family:var(--mono);color:var(--gold);font-size:10px}.tool-mark{border-radius:50%;width:24px;height:24px;margin:53px 0 24px}.tool-card h3{font-family:var(--serif);margin:0 0 13px;font-size:23px;font-weight:600}.tool-card p{max-width:220px;min-height:67px;color:var(--muted);margin:0;font-size:12px;line-height:1.7}.tool-card:hover p{color:#f8f0dead}.tool-link{font-family:var(--mono);letter-spacing:.06em;font-size:10px;position:absolute;bottom:25px}.tool-link b{color:var(--gold);font-size:16px;font-weight:400}.manifesto{color:var(--pearl);background:var(--green);justify-content:space-between;align-items:center;gap:40px;padding:90px 8vw;display:flex}.manifesto-number{color:var(--gold);font-family:var(--mono);align-self:flex-start;font-size:10px}.manifesto h2{font-family:var(--serif);margin:16px 0 0;font-size:clamp(32px,4.8vw,62px);line-height:1.15}.manifesto h2 em{color:var(--gold);font-style:normal}.site-footer{color:var(--pearl);background:#062d28;grid-template-columns:1.1fr .7fr 1fr;gap:50px;padding:62px 8vw 45px;display:grid}.site-footer .brand{color:var(--pearl)}.site-footer p{color:#f8f0de8c;margin:20px 0 0;font-size:12px}.footer-links{flex-direction:column;align-items:flex-start;gap:12px;display:flex}.footer-links button{color:#f8f0deb3;background:0 0;padding:0;font-size:12px}.footer-note{color:#f8f0de8c;align-items:flex-start;gap:15px;font-size:11px;line-height:1.7;display:flex}.gold-rule{background:var(--gold);flex:none;width:28px;height:1px;margin-top:9px;display:inline-block}.page-shell{min-height:650px}.page-intro{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:50px;padding:88px 8vw 78px;display:flex}.page-intro h1{max-width:650px;font-family:var(--serif);letter-spacing:-.07em;margin:18px 0;font-size:clamp(42px,6vw,76px);line-height:1.06}.page-intro p{max-width:520px;color:var(--muted);margin:0;font-size:15px;line-height:1.9}.intro-swatch{border-radius:50%;flex:none;place-items:center;width:170px;height:170px;display:grid;box-shadow:0 0 0 14px #d7b7791a}.intro-swatch span{color:var(--green);font-family:var(--mono);background:#f8f0deb3;padding:7px;font-size:9px}.lab-layout{grid-template-columns:330px 1fr;gap:70px;max-width:1280px;margin:0 auto;padding:75px 8vw 110px;display:grid}.control-panel{border-right:1px solid var(--line);padding-right:36px}.control-heading,.format-row,.result-heading,.recommendation-meta{justify-content:space-between;gap:20px;display:flex}.live-dot{color:#4d8061;font-family:var(--mono);letter-spacing:.1em;font-size:9px}.color-input-row{align-items:center;gap:8px;margin:24px 0 20px;display:flex}.color-input-row input[type=color]{border:1px solid var(--line);background:0 0;width:42px;height:42px;padding:3px}.hex-input{width:100px;color:var(--green);border:1px solid var(--line);font-family:var(--mono);text-transform:uppercase;background:0 0;padding:10px;font-size:11px}.reset-button{color:var(--muted);background:0 0;padding:9px;font-size:10px}.big-color-preview{height:146px;color:var(--pearl);justify-content:space-between;align-items:end;margin-bottom:30px;padding:15px;display:flex}.big-color-preview span{font-family:var(--mono);font-size:10px}.big-color-preview strong{font-size:11px;font-weight:500}.slider-control{margin:24px 0;display:block}.slider-control>span,.lesson-slider>span{color:var(--muted);justify-content:space-between;gap:20px;font-size:11px;display:flex}.slider-control b,.lesson-slider b{color:var(--green);font-weight:600}.slider-control output,.lesson-slider output{color:var(--green);font-family:var(--mono);font-size:10px}.slider-control input,.lesson-slider input{appearance:none;border-radius:3px;width:100%;height:3px;margin-top:14px}.slider-control input::-webkit-slider-thumb{appearance:none;background:var(--green);border:3px solid var(--pearl);width:15px;height:15px;box-shadow:0 0 0 1px var(--green);border-radius:50%}.lesson-slider input::-webkit-slider-thumb{appearance:none;background:var(--green);border:3px solid var(--pearl);width:15px;height:15px;box-shadow:0 0 0 1px var(--green);border-radius:50%}.hue-gradient{background:linear-gradient(90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.sat-gradient{background:linear-gradient(90deg, #777, var(--green))}.light-gradient{background:linear-gradient(90deg,#111,#888,#fff)}.format-row{border-top:1px solid var(--line);color:var(--muted);font-family:var(--mono);margin-top:28px;padding-top:22px;font-size:9px;line-height:1.6}.format-row b{color:var(--green);font-weight:400;display:block}.result-heading{align-items:end;margin-bottom:31px}.result-heading h2{max-width:540px;font-size:36px}.result-count{color:var(--muted);font-family:var(--mono);font-size:9px}.recommendation-list{gap:18px;display:grid}.recommendation-card{border:1px solid var(--line);background:#ffffff1f;padding:20px 22px}.recommendation-meta{align-items:baseline;margin-bottom:18px}.recommendation-meta span{color:var(--gold);font-family:var(--mono);font-size:10px}.recommendation-meta b{font-family:var(--serif);font-size:20px;font-weight:600}.palette-strip{justify-content:space-between;align-items:stretch;gap:18px;display:flex}.palette-colors{flex:1;min-height:78px;display:flex}.palette-chip{min-width:42px;color:var(--green);flex-direction:column;flex:1;justify-content:end;padding:8px;display:flex}.palette-chip span{font-family:var(--mono);font-size:8px}.palette-chip small{white-space:nowrap;text-overflow:ellipsis;opacity:.75;margin-top:4px;font-size:8px;overflow:hidden}.palette-actions{flex-direction:column;gap:4px;display:flex}.small-button{color:var(--green);background:var(--pearl);border:1px solid var(--line);white-space:nowrap;padding:6px 9px;font-size:9px}.gold-small{color:var(--green);background:var(--gold);border-color:var(--gold)}.recommendation-card>p{color:var(--muted);margin:17px 0 0;font-size:11px;line-height:1.6}.photo-layout,.preview-layout{grid-template-columns:.7fr 1.3fr;gap:70px;max-width:1280px;margin:0 auto;padding:75px 8vw 110px;display:grid}.upload-zone{min-height:310px;color:var(--green);background:#073f3609;border:1px dashed #073f365c;flex-direction:column;justify-content:center;align-items:center;gap:13px;display:flex}.upload-zone:hover{background:#d7b7791f}.upload-symbol{width:56px;height:56px;color:var(--gold);border:1px solid var(--gold);border-radius:50%;place-items:center;margin-bottom:14px;font-size:27px;display:grid}.upload-zone strong{font-family:var(--serif);font-size:20px}.upload-zone span{color:var(--muted);font-size:11px}.upload-zone small{max-width:220px;color:var(--muted);margin-top:18px;font-size:9px;line-height:1.6}.empty-photo{min-height:310px;color:var(--muted);border:1px solid var(--line);flex-direction:column;justify-content:center;align-items:center;display:flex}.empty-ring{border:1px solid var(--gold);width:90px;height:90px;box-shadow:25px 0 0 -24px var(--gold), -25px 0 0 -24px var(--gold);border-radius:50%;margin-bottom:20px}.empty-photo p{font-family:var(--serif);margin:0 0 6px;font-size:18px}.empty-photo small{font-family:var(--mono);font-size:9px}.photo-preview{background:#ddd;min-height:310px;position:relative;overflow:hidden}.photo-preview img{object-fit:cover;width:100%;height:310px;display:block}.photo-preview span{color:var(--green);background:var(--pearl);font-family:var(--mono);padding:6px 8px;font-size:8px;position:absolute;bottom:18px;left:18px}.photo-colors{margin-top:47px}.photo-colors .result-heading h2{font-size:25px}.extracted-grid{grid-template-columns:repeat(5,1fr);gap:7px;display:grid}.extracted-color{height:120px;color:var(--green);text-align:left;align-items:end;padding:9px;display:flex}.extracted-color span{font-family:var(--mono);background:#f8f0dec7;padding:4px;font-size:8px}.preview-layout{grid-template-columns:220px 1fr}.preview-sidebar{border-right:1px solid var(--line);padding-right:25px}.mini-palette{height:50px;margin:16px 0 42px;display:flex}.mini-palette span{flex:1}.preview-tabs{gap:1px;margin-bottom:26px;display:grid}.preview-tabs button{color:var(--muted);text-align:left;border-bottom:1px solid var(--line);background:0 0;justify-content:space-between;padding:13px 0;font-size:11px;display:flex}.preview-tabs button.active{color:var(--green);font-weight:700}.preview-tabs button span{color:var(--gold)}.full-button{width:100%}.design-canvas{background:var(--background);min-height:580px;color:var(--text);position:relative;overflow:hidden}.mock-nav{color:var(--background);background:var(--primary);letter-spacing:.08em;justify-content:space-between;align-items:center;padding:24px 34px;font-size:10px;display:flex}.mock-hero{background:var(--background);padding:105px 60px 80px}.mock-hero small,.mock-dm small{color:var(--secondary);font-family:var(--mono);letter-spacing:.13em;font-size:9px}.mock-hero h2{max-width:450px;color:var(--text);font-family:var(--serif);margin:19px 0 30px;font-size:55px;line-height:1.14}.mock-hero button{color:var(--background);background:var(--accent);padding:14px 22px;font-size:10px}.mock-cards{gap:12px;padding:0 60px;display:flex}.mock-cards span{background:var(--secondary);opacity:.38;flex:1;height:73px}.mock-dm{color:var(--background);background:var(--primary);flex-direction:column;justify-content:space-between;padding:44px;display:flex;position:absolute;inset:30px}.mock-dm h2{font-family:var(--serif);letter-spacing:-.08em;margin:42px 0 0;font-size:80px;line-height:.82}.mock-dm h2 em{color:var(--accent);font-style:normal}.dm-number{color:var(--accent);font-family:var(--mono);align-self:end;font-size:11px}.dm-orb{background:var(--secondary);opacity:.55;border-radius:50%;width:140px;height:140px;position:absolute;bottom:45px;right:55px}.mock-social{height:100%;min-height:580px;color:var(--background);background:var(--secondary);flex-direction:column;justify-content:space-between;padding:45px;display:flex}.social-top,.social-bottom{font-family:var(--mono);letter-spacing:.1em;justify-content:space-between;font-size:9px;display:flex}.mock-social h2{color:var(--background);font-family:var(--serif);margin:auto 0;font-size:72px;line-height:.85}.mock-social h2 em{color:var(--accent);font-style:normal}.mock-card{height:100%;min-height:580px;color:var(--background);background:var(--primary);flex-direction:column;justify-content:space-between;padding:54px;display:flex}.mock-card b,.mock-card small{display:block}.mock-card b{color:var(--accent);letter-spacing:.12em;font-size:18px}.mock-card small{color:#f8f0dea6;margin-top:5px;font-size:10px}.card-name strong{font-family:var(--serif);font-size:39px;display:block}.card-name span,.card-contact{color:#f8f0dead;font-family:var(--mono);margin-top:9px;font-size:10px;line-height:1.7;display:block}.classroom-intro{justify-content:space-between;align-items:end;gap:40px;padding:55px 8vw;display:flex}.classroom-intro p{max-width:510px;font-family:var(--serif);margin:0;font-size:25px;line-height:1.55}.classroom-intro span{color:var(--muted);font-family:var(--mono);font-size:10px}.classroom-grid{grid-template-columns:repeat(4,1fr);margin:0 8vw 110px}.classroom-grid .lesson-card{min-height:260px}.lesson-page{color:var(--green);background:var(--pearl)}.lesson-hero{min-height:560px;color:var(--pearl);background:var(--green);grid-template-columns:1fr 1fr;padding:90px 8vw;display:grid}.lesson-hero-copy{align-self:center;max-width:600px}.lesson-hero h1{font-family:var(--serif);letter-spacing:-.11em;margin:20px 0;font-size:clamp(70px,10vw,145px);line-height:.78}.lesson-hero h1 em{color:var(--lesson-color);font-family:var(--mono);letter-spacing:.26em;font-size:.22em;font-style:normal}.lesson-hero p{color:#f8f0deb3;max-width:475px;font-size:14px;line-height:1.9}.lesson-tags{gap:9px;margin:30px 0;display:flex}.lesson-tags span{color:var(--gold);border:1px solid #d7b77973;padding:7px 10px;font-size:10px}.lesson-hero-art{min-height:370px;position:relative}.lesson-giant-orb{width:min(32vw,340px);height:min(32vw,340px);box-shadow:0 0 0 1px var(--gold), 0 0 0 24px #d7b77914;border-radius:50%;position:absolute;top:5%;right:14%}.orb-label{color:var(--pearl);font-family:var(--mono);mix-blend-mode:screen;font-size:10px;position:absolute;top:48%;right:31%}.orb-index{color:var(--gold);font-family:var(--mono);font-size:65px;position:absolute;bottom:2%;right:7%}.lesson-body{padding:0 8vw}.lesson-nav{color:var(--muted);font-family:var(--mono);align-items:center;gap:20px;padding:24px 0;font-size:9px;display:flex}.progress-line{background:var(--line);width:150px;height:2px}.progress-line i{background:var(--lesson-color);height:100%;display:block}.emotion-section,.tune-section,.lesson-palettes{border-bottom:1px solid var(--line);padding:100px 0}.lesson-section-heading{max-width:670px;margin-bottom:43px}.lesson-section-heading h2{font-family:var(--serif);letter-spacing:-.06em;margin:15px 0 14px;font-size:clamp(33px,5vw,62px)}.lesson-section-heading p{color:var(--muted);margin:0;font-size:13px;line-height:1.8}.emotion-rail{grid-template-columns:repeat(5,1fr);gap:12px;display:grid}.emotion-stop{color:var(--green);text-align:left;background:0 0;flex-direction:column;align-items:flex-start;padding:0;display:flex}.emotion-color{background:var(--stop);width:100%;height:150px;margin-bottom:14px;transition:transform .25s;display:block}.emotion-stop:hover .emotion-color{transform:translateY(-7px)}.emotion-stop small{color:var(--gold);font-family:var(--mono);font-size:9px}.emotion-stop b{font-family:var(--serif);margin-top:7px;font-size:17px}.emotion-stop code{color:var(--muted);font-family:var(--mono);margin-top:4px;font-size:9px}.generic-color-panel{grid-template-columns:1fr 1fr;align-items:center;gap:30px;display:grid}.generic-color-panel div{height:200px}.generic-color-panel p{max-width:320px;color:var(--muted);line-height:1.8}.tune-layout{grid-template-columns:.85fr 1.15fr;align-items:start;gap:60px;display:grid}.tune-controls{max-width:460px}.lesson-slider{margin:25px 0;display:block}.lesson-slider>span{color:var(--green)}.lesson-slider input{width:100%}.task-tabs{border-bottom:1px solid var(--line);gap:5px;margin-top:40px;display:flex}.task-tabs button{color:var(--muted);background:0 0;border-bottom:2px solid #0000;padding:13px 8px;font-size:10px}.task-tabs button.active{color:var(--green);border-color:var(--lesson-color)}.task-feedback{padding:20px 0}.task-feedback strong{font-family:var(--mono);margin-top:10px;font-size:9px;font-weight:400;display:block}.task-feedback p{color:var(--muted);font-size:11px;line-height:1.7}.feedback-good,.feedback-learning{font-family:var(--mono);padding:6px 8px;font-size:9px;display:inline-block}.feedback-good{color:var(--green);background:#4d80612e}.feedback-learning{color:#8a6a2b;background:#d7b77938}.tune-output{min-height:355px;color:var(--pearl);flex-direction:column;justify-content:space-between;padding:26px;display:flex}.tune-output div{flex-direction:column;gap:7px;display:flex}.tune-output div span{font-family:var(--mono);font-size:13px}.tune-output div small{font-family:var(--mono);opacity:.7;font-size:10px}.output-caption{color:#f8f0dea6;font-family:var(--mono);letter-spacing:.18em;align-self:end;font-size:9px}.lesson-palette-grid{grid-template-columns:repeat(5,1fr);gap:14px;display:grid}.lesson-palette-card{border:1px solid var(--line)}.palette-card-colors{height:110px;display:flex}.palette-card-colors span{flex:1}.palette-card-copy{padding:17px}.palette-card-copy>span{color:var(--gold);font-family:var(--mono);font-size:9px}.palette-card-copy h3{font-family:var(--serif);margin:8px 0;font-size:18px}.palette-card-copy p{min-height:69px;color:var(--muted);margin:0 0 18px;font-size:10px;line-height:1.6}.palette-card-copy .text-button{color:var(--green);font-size:10px}.lesson-preview-callout{justify-content:space-between;align-items:end;gap:50px;padding:90px 0;display:flex}.lesson-preview-callout h2{font-family:var(--serif);letter-spacing:-.05em;margin:18px 0 12px;font-size:42px}.lesson-preview-callout p{max-width:450px;color:var(--muted);margin:0;font-size:13px;line-height:1.8}.lesson-bottom-nav{color:var(--green);border-top:1px solid var(--line);grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding:35px 8vw;display:grid}.lesson-bottom-nav button{color:inherit;background:0 0;align-items:center;gap:9px;padding:0;font-size:11px;display:flex}.lesson-bottom-nav button:nth-child(3){justify-content:end}.lesson-bottom-nav b{color:var(--muted);font-family:var(--serif);font-size:16px;font-weight:500}.lesson-bottom-nav button:nth-child(2){color:var(--gold);font-family:var(--mono);font-size:9px}.swatch-page{max-width:1200px;margin:0 auto;padding:75px 8vw 120px}.swatch-large{grid-template-columns:repeat(5,1fr);min-height:340px;display:grid}.swatch-large button{color:var(--green);text-align:left;flex-direction:column;justify-content:end;align-items:flex-start;padding:20px;display:flex}.swatch-large button span{font-family:var(--mono);background:#f8f0dec7;padding:6px 7px;font-size:10px}.swatch-large button small{margin-top:8px;font-size:10px}.swatch-actions{gap:10px;margin-top:27px;display:flex}.swatch-note{color:var(--muted);align-items:flex-start;gap:15px;margin-top:52px;font-size:11px;display:flex}.simple-page{min-height:660px}.prose-grid{grid-template-columns:1fr 1fr;gap:60px;max-width:850px;padding:75px 8vw 120px;display:grid}.prose-grid p{font-family:var(--serif);margin:0;font-size:23px;line-height:1.7}.not-found{flex-direction:column;justify-content:center;align-items:center;min-height:620px;display:flex}.not-found h1{font-family:var(--serif);margin:30px 0;font-size:50px}@media (width<=1050px){.lesson-grid{grid-template-columns:repeat(4,1fr)}.lesson-grid .lesson-card{min-height:240px}.tool-grid{grid-template-columns:repeat(2,1fr)}.lesson-palette-grid{grid-template-columns:repeat(3,1fr)}.palette-card-copy p{min-height:50px}}@media (width<=760px){.site-header{padding:19px 6vw}.menu-button{display:block}.main-nav{background:var(--pearl);border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:0;padding:18px 6vw 25px;display:none;position:absolute;top:100%;left:0;right:0;box-shadow:0 14px 25px #073f3614}.main-nav.open{display:flex}.main-nav>button{text-align:left;padding:14px 0}.language-select{border-left:0;border-top:1px solid var(--line);padding:14px 0 0}.hero{grid-template-columns:1fr;min-height:760px;padding:68px 7vw 40px}.hero h1{font-size:47px}.hero-art{min-height:300px;margin-top:20px}.circle-large{width:240px;height:240px}.circle-small{width:86px;height:86px}.orbit-one{width:300px;height:240px}.orbit-two{width:300px;height:190px}.flow-strip{flex-direction:column;align-items:flex-start;gap:8px;padding:16px 7vw}.flow-dot{display:none}.section-block,.tool-section{padding:68px 7vw}.section-heading,.classroom-intro{display:block}.section-heading p{margin-top:18px}.lesson-grid,.classroom-grid{grid-template-columns:repeat(2,1fr)}.classroom-grid{margin:0 7vw 75px}.lesson-card{min-height:220px}.lesson-name{font-size:20px}.tool-grid{grid-template-columns:1fr}.tool-card{min-height:230px}.manifesto{flex-direction:column;align-items:flex-start;padding:68px 7vw}.manifesto .button{margin-top:15px}.site-footer{grid-template-columns:1fr;gap:35px;padding:45px 7vw}.page-intro{flex-direction:column;align-items:flex-start;padding:62px 7vw 50px}.page-intro h1{font-size:51px}.intro-swatch{width:105px;height:105px}.lab-layout,.photo-layout,.preview-layout{padding:50px 7vw 80px;display:block}.control-panel,.preview-sidebar{border-right:0;border-bottom:1px solid var(--line);margin-bottom:42px;padding:0 0 42px}.result-heading{flex-direction:column;align-items:flex-start}.result-heading h2{font-size:30px}.palette-strip{display:block}.palette-actions{flex-direction:row;margin-top:10px}.palette-actions .small-button{flex:1}.photo-result{margin-top:35px}.extracted-grid{grid-template-columns:repeat(5,1fr)}.preview-layout{padding-top:40px}.design-canvas{min-height:500px}.mock-hero{padding:80px 35px 55px}.mock-hero h2{font-size:42px}.mock-cards{padding:0 35px}.lesson-hero{grid-template-columns:1fr;min-height:730px;padding:68px 7vw 35px}.lesson-hero h1{font-size:86px}.lesson-hero-art{min-height:300px}.lesson-giant-orb{width:245px;height:245px;right:12%}.lesson-body{padding:0 7vw}.lesson-nav{gap:9px}.progress-line{flex:1}.emotion-section,.tune-section,.lesson-palettes{padding:65px 0}.emotion-rail{grid-template-columns:repeat(5,1fr);gap:5px}.emotion-color{height:92px}.emotion-stop b{font-size:11px}.emotion-stop code{font-size:7px}.tune-layout{display:block}.tune-output{min-height:250px;margin-top:35px}.lesson-palette-grid{grid-template-columns:repeat(2,1fr)}.lesson-preview-callout{flex-direction:column;align-items:flex-start;padding:65px 0}.lesson-preview-callout h2{font-size:34px}.lesson-bottom-nav{padding:27px 7vw}.lesson-bottom-nav button span,.lesson-bottom-nav button b{display:none}.swatch-page{padding:50px 7vw 80px}.swatch-large{min-height:240px}.swatch-large button{padding:8px}.swatch-large button span{font-size:7px}.swatch-large button small{display:none}.prose-grid{padding:50px 7vw 90px;display:block}.prose-grid p+p{margin-top:30px}.not-found{text-align:center;padding:50px 7vw}.not-found h1{font-size:38px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}.ratio-section{border-bottom:1px solid var(--line);padding:100px 0}.ratio-layout{grid-template-columns:1.35fr .65fr;align-items:stretch;gap:52px;display:grid}.ratio-preview{min-height:250px;display:flex}.ratio-block{min-width:0;color:var(--green);text-align:left;flex-direction:column;justify-content:end;align-items:flex-start;padding:22px;transition:filter .2s,transform .2s;display:flex}.ratio-block:hover{filter:saturate(1.18);transform:translateY(-5px)}.ratio-sixty{flex:6}.ratio-thirty{flex:3}.ratio-ten{flex:1}.ratio-block b{font-family:var(--mono);font-size:18px}.ratio-block span{margin-top:9px;font-size:11px}.ratio-block code{font-family:var(--mono);margin-top:5px;font-size:8px}.ratio-note{flex-direction:column;justify-content:end;padding-bottom:4px;display:flex}.ratio-note p{max-width:245px;color:var(--muted);font-size:12px;line-height:1.8}.contrast-note{color:var(--muted);font-family:var(--mono);align-items:center;gap:8px;margin-top:18px;font-size:9px;display:flex}.contrast-note span{border:2px solid var(--pearl);width:12px;height:12px;box-shadow:0 0 0 1px var(--green)}.contrast-note strong{color:var(--green);font-weight:500}@media (width<=760px){.ratio-section{padding:65px 0}.ratio-layout{display:block}.ratio-preview{min-height:210px}.ratio-block{padding:12px}.ratio-block b{font-size:13px}.ratio-block span{font-size:9px}.ratio-note{margin-top:28px}.ratio-note p{max-width:none}}.field-error{color:#9a3f35;margin:-9px 0 16px;font-size:11px;line-height:1.6}.photo-error{background:#9a3f3514;border-left:2px solid #9a3f35;margin:18px 0 0;padding:12px 14px}.photo-error .text-button{color:#9a3f35;margin-left:8px}.contrast-hint{border-left:2px solid var(--green);color:var(--muted);background:#073f360e;flex-direction:column;gap:5px;margin-top:20px;padding:13px 14px;font-size:10px;line-height:1.55;display:flex}.contrast-hint strong{color:var(--green);font-family:var(--mono);font-size:10px;font-weight:500}.contrast-hint span{color:var(--green);font-weight:600}.contrast-hint small{font-size:9px}.contrast-hint.is-warn{background:#d7b77924;border-color:#9a6c2f}.contrast-hint.is-warn strong,.contrast-hint.is-warn span{color:#8a642d}.hsl-explain-grid{grid-template-columns:repeat(3,1fr);gap:14px;margin:-6px 0 35px;display:grid}.hsl-explain-grid p{color:var(--muted);border:1px solid var(--line);margin:0;padding:14px;font-size:11px;line-height:1.7}.hsl-explain-grid strong{color:var(--green);font-family:var(--mono);margin-bottom:7px;font-size:10px;display:block}.lesson-slider-input{align-items:center;gap:12px;display:flex}.lesson-slider-input>input[type=range]{flex:1}.lesson-slider-input>input[type=number]{width:58px;height:28px;color:var(--green);border:1px solid var(--line);font-family:var(--mono);background:0 0;padding:4px 6px;font-size:10px}.role-chips{flex-wrap:wrap;gap:7px;margin:17px 0 18px;display:flex}.role-chips button{color:var(--green);border:1px solid var(--line);font-family:var(--mono);background:0 0;padding:7px 9px;font-size:9px}.copy-status{color:var(--green);font-family:var(--mono);margin:18px 0 0;font-size:10px}.extracted-color small{font-family:var(--mono);opacity:.8;margin-top:4px;font-size:7px;display:block}.upload-zone{cursor:pointer}.upload-zone:focus-visible,.emotion-stop:focus-visible,.ratio-block:focus-visible,.lesson-card:focus-visible,.tool-card:focus-visible{outline:2px solid var(--gold);outline-offset:3px}@media (width<=760px){.hero{min-height:690px;padding-top:52px}.page-intro{padding-top:48px;padding-bottom:40px}.lesson-hero{min-height:650px;padding-top:52px}.lesson-nav{flex-wrap:wrap}.lesson-nav .progress-line{min-width:100px}.emotion-rail{scroll-snap-type:x mandatory;grid-template-columns:none;gap:10px;padding-bottom:9px;display:flex;overflow-x:auto}.emotion-stop{scroll-snap-align:start;min-width:112px}.emotion-color{height:108px}.hsl-explain-grid{grid-template-columns:1fr;gap:9px;margin-bottom:28px}.lesson-slider-input{gap:8px}.lesson-slider-input>input[type=number]{width:52px}.contrast-hint{margin-top:16px}.palette-colors{min-width:0}.palette-chip{min-width:0;padding:7px 5px}.palette-chip span,.palette-chip small{font-size:7px}.small-button{min-height:38px}.lesson-bottom-nav{gap:8px}.lesson-bottom-nav button{min-height:44px}.extracted-grid{gap:4px}.extracted-color{min-width:0;height:105px;padding:6px}.extracted-color span{font-size:7px}.preview-sidebar{overflow:hidden}.preview-tabs button{min-height:44px}}.topbar{z-index:30;min-height:44px;color:var(--pearl);background:#e07a3f;align-items:center;gap:20px;padding:0 5.5vw;display:flex;position:sticky;top:0}.topbar a{color:inherit;text-decoration:none}.topbar-brand{letter-spacing:.1em;align-items:center;gap:8px;min-height:44px;display:inline-flex}.topbar-brand strong{font-size:13px}.topbar-mark{border:1px solid #f8f0decc;border-radius:50%;place-items:center;width:20px;height:20px;font-size:11px;display:grid}.topbar-back{align-items:center;min-height:44px;font-size:13px;display:inline-flex}.topbar-status{color:#f8f0dee6;margin-left:auto;font-size:13px}.save-palette{position:relative}.save-trigger{width:100%}.save-panel{min-width:280px;color:var(--green);background:var(--pearl);border:1px solid var(--line);margin-top:6px;padding:16px;box-shadow:0 14px 28px #073f361f}.save-download{width:100%;min-height:44px;margin-bottom:14px}.save-panel form{gap:9px;display:grid}.save-panel label{gap:7px;font-size:13px;line-height:1.45;display:grid}.save-panel input[type=email]{width:100%;min-height:44px;color:var(--green);border:1px solid var(--line);background:0 0;padding:9px 10px;font-size:15px}.save-panel form .small-button{min-height:44px}.save-panel p{color:var(--muted);margin:12px 0 0;font-size:13px;line-height:1.55}.save-panel .save-note{font-size:13px}.save-panel>.text-button{min-height:44px;color:var(--green);text-underline-offset:3px;margin-top:6px;text-decoration:underline}.analytics-consent{z-index:40;max-width:min(560px,100vw - 36px);color:var(--green);background:var(--pearl);border:1px solid var(--gold);align-items:center;gap:18px;padding:14px 16px;display:flex;position:fixed;bottom:18px;right:18px;box-shadow:0 16px 35px #073f362e}.analytics-consent strong{font-family:var(--serif);font-size:16px}.analytics-consent p{max-width:320px;color:var(--muted);margin:4px 0 0;font-size:13px;line-height:1.45}.analytics-actions{flex-wrap:wrap;gap:6px;display:flex}.analytics-actions .small-button{min-height:44px}@media (width<=760px){body{font-size:15px}button,a,input[type=range]{min-height:44px}.topbar{gap:10px;padding:0 4vw}.topbar-brand strong,.topbar-back,.topbar-status{font-size:13px}.topbar-brand{min-width:0}.topbar-back{white-space:nowrap}.topbar-status{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.site-header{padding-top:6px;padding-bottom:6px}.main-nav>button,.language-select select,.language-select span,.menu-button{min-height:44px;font-size:15px!important}.text-button,.small-button,.reset-button,.role-chips button,.task-tabs button,.preview-tabs button,.lesson-bottom-nav button,.button{min-height:44px;font-size:13px!important}.section-label,.mini-label,.section-label span,.lesson-number,.lesson-en,.lesson-keywords,.tool-index,.tool-link,.live-dot,.result-count,.recommendation-meta span,.palette-chip span,.palette-chip small,.format-row,.format-row span,.format-row b,.contrast-hint,.contrast-hint strong,.contrast-hint small,.field-error,.copy-status,.extracted-color span,.extracted-color small,.emotion-stop small,.emotion-stop code,.feedback-good,.feedback-learning,.output-caption,.ratio-block span,.ratio-block code,.ratio-note p,.preview-tabs button,.mock-hero small,.mock-dm small,.social-top,.social-bottom,.dm-number,.card-contact,.mock-card small,.swatch-note,.swatch-large button span,.swatch-large button small,small,code{font-size:13px!important}.palette-chip{padding:8px 5px}.palette-chip span,.palette-chip small{white-space:normal;word-break:break-word;overflow:visible}.palette-actions{gap:6px}.save-panel{min-width:250px;position:relative;right:0}.analytics-consent{flex-direction:column;align-items:stretch;gap:10px;max-width:calc(100vw - 20px);padding:12px;bottom:10px;right:10px}.analytics-actions{width:100%}.analytics-actions .small-button{flex:1}}