@import"https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,600;1,600&display=swap";:root{font-family:Noto Sans SC,Yu Gothic,sans-serif;color:#49626c;background:#fdfaf7;line-height:1.55;--pink:#e991a6;--pale:#f9e2e7;--aqua:#9ed8d5;--deep:#65b6b3;--paper:#fffdf9}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px;background:radial-gradient(circle at 5% 20%,#f7d7df88,transparent 22%),radial-gradient(circle at 96% 48%,#d6efec99,transparent 24%),#fdfaf7}.shell{max-width:1440px;margin:auto;padding:0 56px 35px;background-image:linear-gradient(#6ea5a70a 1px,transparent 1px),linear-gradient(90deg,#6ea5a70a 1px,transparent 1px);background-size:28px 28px}button,select{font:inherit}button{cursor:pointer}header{height:96px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #dce9e7}.brand{display:flex;align-items:center;gap:13px;color:#49626c;text-decoration:none}.brand>span:last-child{display:grid}.brand b{letter-spacing:.17em}.brand small{font:600 .61rem Playfair Display;letter-spacing:.18em;color:#8a9ea5}.seal{display:grid;place-items:center;width:57px;height:61px;border:2px solid var(--pink);border-radius:50%;background:#fff;box-shadow:inset 0 0 0 5px #fff,inset 0 0 0 7px #e0f2f0;color:#d87890;font:700 1.35rem serif}.meta{display:flex;gap:23px;align-items:center;color:#799098;font-size:.75rem}.meta strong{border:1px solid var(--pink);padding:7px 13px;border-radius:30px;color:#d87890;background:#fff8f9}.hero{min-height:485px;padding:62px 5%;display:grid;grid-template-columns:1.35fr .65fr;gap:8%;align-items:center}.eyebrow{color:#76929a;font-size:.76rem;letter-spacing:.15em}.hero h1{max-width:740px;margin:15px 0 24px;font:600 clamp(3.2rem,5.7vw,6.2rem)/1.12 "Playfair Display","Noto Sans SC";color:#425d68}.hero h1:first-letter{color:var(--pink)}.lead{max-width:650px;color:#789097;line-height:1.9;letter-spacing:.04em}.hero>div>a{display:inline-block;margin-top:14px;padding-bottom:7px;border-bottom:1px solid var(--pink);color:#d87890;text-decoration:none;font:italic 600 .85rem Playfair Display}.notice{position:relative;padding:35px 32px;background:#fffdfbea;border:1px solid #d9e9e7;box-shadow:11px 12px #e3f3f1,0 18px 45px #5c899016;transform:rotate(1deg)}.notice>i{position:absolute;width:90px;height:24px;top:-13px;left:50%;transform:translate(-50%) rotate(-2deg);background:#f1bdc799}.notice>p{margin:0;color:#d87890;font-size:.7rem;letter-spacing:.17em}.notice h2{font-size:1.25rem}.notice small{color:#81969d;line-height:1.8}.mini-art{position:relative;height:95px;margin:15px 0;overflow:hidden;background:linear-gradient(#dff1ef 55%,#f3dcb8 55%)}.mini-art span{position:absolute;width:70px;height:70px;border-radius:50%;background:#e9b178;left:16%;top:12px}.mini-art b{position:absolute;width:12px;height:80px;background:#657d74;left:61%;top:24px;transform:rotate(-12deg)}.mini-art em{position:absolute;width:70px;height:45px;border-radius:50%;background:#91b685;left:52%;top:8px}.section-title{display:flex;align-items:end;gap:22px;border-bottom:2px solid #e0efed}.section-title div{display:flex;gap:9px;align-items:center;color:var(--deep)}.section-title div span{font:600 2rem Playfair Display}.section-title div small{letter-spacing:.16em}.section-title h2{margin:0 0 -2px;padding:0 0 13px;border-bottom:2px solid var(--pink);font-size:1.3rem}.section-title>b{margin-left:auto;color:var(--pink);font-size:1.8rem}.toolbar{display:flex;align-items:end;gap:18px;margin:20px 0;padding:18px 21px;border:1px solid #dce9e7;border-radius:16px;background:#fffdfbe8}.toolbar label{display:grid;gap:5px;color:#81979e;font-size:.7rem}.toolbar select{min-width:120px;padding:10px;border:1px solid #d7e7e5;border-radius:9px;background:#fff;color:#536d77}.modes{display:flex;gap:7px}.modes button,.next,.sketch-tools button{padding:10px 13px;border:1px solid #d6e7e5;border-radius:9px;background:#fff;color:#617b84}.modes button.active,.sketch-tools button.active{background:#e1f2f0;border-color:var(--aqua);color:#4b9991}.next{margin-left:auto;background:linear-gradient(135deg,var(--pink),#df7d96);border:0;color:#fff}.workspace{display:grid;grid-template-columns:2fr minmax(290px,.72fr);gap:22px}.paper,.journal{padding:25px;border:1px solid #dce9e7;border-radius:17px;background:#fffdfbe8;box-shadow:0 15px 40px #53808a14}.paper{min-height:510px}.paper-head{display:flex;justify-content:space-between;padding-bottom:12px;border-bottom:1px dashed #d5e5e3;color:#7f969d;font-size:.68rem;letter-spacing:.14em}.paper>h2{margin:23px 0;color:#4b646e;font-size:1.18rem}.color-study{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center;max-width:690px;margin:35px auto}.main-swatch{aspect-ratio:1;border-radius:50% 46% 52% 44%;display:grid;place-items:center;box-shadow:0 12px 25px #47666d22;transform:rotate(-5deg)}.main-swatch span{padding:4px 8px;background:#ffffffb8;border-radius:20px;color:#617780;font-size:.62rem}.swatches{display:grid;grid-template-columns:1fr 1fr;gap:15px}.swatches button{aspect-ratio:1;border:8px solid #fff;border-radius:12px;box-shadow:0 4px 15px #4b687022;transition:.18s}.swatches button:hover{transform:scale(1.05) rotate(2deg)}.value-order,.value-choices{display:flex;justify-content:center;gap:15px;margin:35px auto}.value-order span,.value-choices button{display:grid;place-items:center;width:105px;height:135px;border:7px solid #fff;border-radius:8px;box-shadow:0 6px 20px #4b68701e;color:#fff;font-weight:700}.value-choices button:disabled{opacity:.2}.compositions{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:42px auto}.comp{position:relative;aspect-ratio:4/3;border:9px solid #fff;background:#e6f1ef;box-shadow:0 6px 18px #4b68701f;overflow:hidden}.comp>*{position:absolute;display:block}.comp span{width:37%;height:48%;background:#df91a4}.comp b{width:48%;height:27%;background:#e2bc70}.comp i{width:33%;height:34%;border-radius:50%;background:#6fb3ad}.c0 span{left:7%;top:8%}.c0 b{right:5%;bottom:8%}.c0 i{right:8%;top:9%}.c1 span{left:13%;bottom:12%}.c1 b{right:8%;top:14%}.c1 i{left:42%;top:34%}.c2 span{right:5%;bottom:6%}.c2 b{left:5%;bottom:8%}.c2 i{left:7%;top:8%}.feedback{display:flex;align-items:center;gap:12px;margin-top:22px;padding:13px 15px;border-radius:10px}.feedback.correct{background:#e3f3f0;color:#4d9a91}.feedback.wrong{background:#f9e3e8;color:#cb6d85}.feedback b{font-size:1.4rem}.sketch-tools{display:flex;gap:7px;align-items:center;flex-wrap:wrap}.sketch-tools .ink{width:31px;height:31px;padding:0;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1px #d8e5e4}.sketch-wrap canvas{display:block;width:100%;height:340px;margin-top:14px;border:1px solid #e2e8e5;border-radius:8px;background:#fff;touch-action:none;cursor:crosshair;background-image:linear-gradient(#7aa0a00b 1px,transparent 1px),linear-gradient(90deg,#7aa0a00b 1px,transparent 1px);background-size:20px 20px}.journal-tag{color:var(--deep);font-size:.66rem;letter-spacing:.15em}.journal h3{font-size:1rem}.journal dl{display:grid;grid-template-columns:1fr 1fr;gap:8px}.journal dl div{padding:12px;background:#f5faf9;border:1px solid #e0edeb;border-radius:9px}.journal dt{color:#879ba1;font-size:.68rem}.journal dd{margin:4px 0 0;font:600 1.45rem Playfair Display}.journal dd small{font:400 .65rem sans-serif}.rule{display:flex;align-items:center;gap:8px;margin-top:22px}.rule:after{content:"";height:1px;flex:1;background:#dce9e7}.history p{display:flex;gap:8px;margin:7px 0;padding:8px;background:#fbfdfc;border-radius:7px;font-size:.75rem}.history p b{color:var(--deep)}.history>small{color:#91a4aa}.tip{margin-top:22px;padding:14px;background:var(--pale);border-radius:9px;color:#7c626b}.tip b{font-size:.76rem}.tip p{margin:7px 0 0;font-size:.72rem;line-height:1.7}footer{display:flex;justify-content:space-between;align-items:center;margin-top:35px;padding:25px 5px;border-top:1px solid #dce9e7;color:#8ba0a6;font-size:.7rem}footer a{color:#d87890;text-decoration:none}footer i{font-family:Playfair Display}@media(max-width:1000px){.shell{padding:0 28px}.meta span{display:none}.hero{gap:35px}.workspace{grid-template-columns:1fr}.modes{flex-wrap:wrap}.compositions{gap:10px}}@media(max-width:700px){.shell{padding:0 15px}header{height:82px}.meta{display:none}.hero{grid-template-columns:1fr;padding:45px 5%}.hero h1{font-size:clamp(2.8rem,14vw,4.6rem)}.toolbar{align-items:stretch;flex-direction:column}.modes{display:grid;grid-template-columns:1fr 1fr}.next{margin:0}.paper,.journal{padding:19px 14px}.color-study{grid-template-columns:1fr;max-width:330px}.main-swatch{max-width:210px;margin:auto}.value-order,.value-choices{gap:5px}.value-order span,.value-choices button{width:22%;height:100px}.compositions{grid-template-columns:1fr}.comp{max-width:300px;width:100%;margin:auto}.sketch-wrap canvas{height:300px}footer{flex-wrap:wrap;gap:9px}footer i{width:100%}}.hsv-study{display:grid;grid-template-columns:1fr 1fr;gap:35px;align-items:center;max-width:760px;margin:30px auto}.hsv-preview{display:grid;grid-template-columns:1fr 1fr;gap:13px}.hsv-preview div{display:grid;gap:8px;text-align:center;color:#7d939a;font-size:.72rem;letter-spacing:.08em}.hsv-preview i{display:block;aspect-ratio:1;border:9px solid #fff;border-radius:50% 44% 52% 47%;box-shadow:0 8px 24px #4c687027}.hsv-preview div:first-child i{transform:rotate(-5deg)}.hsv-preview div:last-child i{transform:rotate(4deg)}.hsv-controls{display:grid;gap:17px;padding:22px;border:1px solid #dfedeb;border-radius:13px;background:#f6fbfa}.hsv-controls label{display:grid;gap:7px}.hsv-controls label span{display:flex;justify-content:space-between;color:#668089;font-weight:600}.hsv-controls label b{color:#d87890;font-family:Playfair Display,serif}.hsv-controls input{width:100%;accent-color:#65b6b3}.hsv-controls input.hue{accent-color:#e991a6}.hsv-controls button{padding:11px;border:0;border-radius:9px;background:linear-gradient(135deg,#e991a6,#d97a92);color:#fff;font-weight:600}@media(max-width:700px){.hsv-study{grid-template-columns:1fr;max-width:330px}}.workspace.palette-workspace{display:block}.palette-layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(300px,.72fr);gap:22px}.palette-browser,.color-detail{padding:24px;border:1px solid #dce9e7;border-radius:17px;background:#fffdfbe8;box-shadow:0 15px 40px #53808a14}.palette-filters{display:flex;flex-wrap:wrap;gap:8px}.palette-filters button{padding:9px 13px;border:1px solid #d7e7e5;border-radius:30px;background:#fff;color:#698089}.palette-filters button.active{border-color:#9ed8d5;background:#e3f3f1;color:#4c9991}.palette-count{margin:15px 2px 10px;color:#94a6ab;font-size:.7rem;letter-spacing:.09em}.color-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}.color-grid button{display:grid;grid-template-columns:52px minmax(0,1fr);gap:10px;align-items:center;min-width:0;padding:8px;border:1px solid #e2ecea;border-radius:11px;background:#fff;color:#566f78;text-align:left;transition:.18s}.color-grid button:hover,.color-grid button.selected{transform:translateY(-2px);border-color:#e991a6;box-shadow:0 7px 16px #70515a16}.color-grid button.selected{background:#fff8f9}.color-grid i{display:block;width:52px;height:62px;border:5px solid #fff;border-radius:8px;box-shadow:0 2px 8px #3f5b6326}.color-grid span{display:grid;min-width:0}.color-grid b{overflow:hidden;font-size:.77rem;text-overflow:ellipsis;white-space:nowrap}.color-grid small{margin-top:4px;color:#94a5aa;font:600 .62rem Playfair Display,serif}.color-detail{position:sticky;top:18px;align-self:start}.detail-swatch{display:grid;place-items:end start;min-height:205px;padding:17px;border:10px solid #fff;border-radius:51% 44% 48% 42%;box-shadow:0 9px 24px #405b6323;transform:rotate(-1.5deg)}.detail-swatch span{padding:5px 9px;border-radius:20px;background:#ffffffcf;color:#526a73;font-size:.75rem}.detail-region{margin:24px 0 2px;color:#d87890;font-size:.68rem;letter-spacing:.12em}.color-detail h2{margin:2px 0 15px;color:#48616b;font-size:1.45rem}.color-values{display:grid;grid-template-columns:1fr 1.35fr;gap:8px}.color-values div{display:grid;gap:4px;padding:10px;border:1px solid #e0ecea;border-radius:8px;background:#f6faf9}.color-values small{color:#94a7ac;font-size:.6rem}.color-values b{color:#5a737c;font:600 .82rem Playfair Display,serif}.color-detail h3{display:flex;align-items:center;gap:8px;margin:20px 0 6px;color:#58717a;font-size:.78rem}.color-detail h3:after{content:"";height:1px;flex:1;background:#dce9e7}.color-detail>p:not(.detail-region){margin:0;color:#728990;font-size:.8rem;line-height:1.8}.color-detail .story{min-height:70px}.palette-note{display:block;margin-top:20px;padding:11px;border-radius:8px;background:#f9e5e9;color:#8a747a;font-size:.64rem;line-height:1.65}@media(max-width:1050px){.color-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:800px){.palette-layout{grid-template-columns:1fr}.color-detail{position:static}}@media(max-width:520px){.palette-browser,.color-detail{padding:16px 13px}.color-grid{grid-template-columns:1fr 1fr;gap:7px}.color-grid button{grid-template-columns:39px minmax(0,1fr);gap:7px;padding:6px}.color-grid i{width:39px;height:50px}}.art-quick-guide{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:13px;align-items:center;margin:18px 0;padding:13px 18px;border:1px solid #dce9e7;border-radius:13px;background:#fffdfbe0;color:#708991;font-size:.76rem}.art-quick-guide span{display:flex;align-items:center;gap:9px}.art-quick-guide b{display:grid;place-items:center;flex:0 0 26px;height:26px;border-radius:50%;background:#f9e2e7;color:#d87890;font-family:Playfair Display,serif}.art-quick-guide i{color:#9ed8d5;font-style:normal}@media(max-width:700px){.art-quick-guide{grid-template-columns:1fr}.art-quick-guide i{display:none}}