@charset "UTF-8";
:root{color-scheme:light;--ink:#303e3a;--muted:#6b736d;--paper:#f9f7f2;--green:#365849;--border:#e1e2d8;font-family:"Trebuchet MS","Segoe UI",sans-serif;font-size:16px;color:var(--ink);background:var(--paper)}
*{box-sizing:border-box}body{margin:0;background-image:radial-gradient(#aaa68f26 .7px,transparent .7px);background-size:7px 7px}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:disabled{cursor:default}button:focus-visible,a:focus-visible{outline:3px solid #936baf;outline-offset:5px}.page{max-width:1440px;margin:auto;padding:0 5.2%}.header{display:flex;align-items:center;justify-content:space-between;padding:29px 0;border-bottom:1px solid var(--border);gap:20px}.brand{display:flex;align-items:center;text-decoration:none;color:var(--ink);font-weight:700;font-size:1.35rem;letter-spacing:-.6px}.brand-icon{font-size:2rem;color:#b75e77;margin-right:12px}.brand-dot{color:#b75e77}.header-note{font-size:.875rem;color:var(--muted)}.header-note span{margin-left:8px;font-size:1.3rem;color:#b75e77}.intro{text-align:center;padding:43px 0 34px}.eyebrow{font-size:.75rem;letter-spacing:1.7px;font-weight:700;line-height:1.6}.intro .eyebrow{color:#806955;font-size:.75rem}h1{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:clamp(2.4rem,4vw,3.65rem);line-height:1.09;letter-spacing:-1.8px;margin:16px 0 17px}h1 em{font-weight:400;color:#b05d74}p{line-height:1.6}.intro p{color:var(--muted);margin:0;font-size:1rem}.workspace{display:grid;grid-template-columns:330px minmax(0,1fr);gap:30px;align-items:stretch}.draw-panel{border:1px solid #dce0d5;border-radius:22px;background:#eef0e6;padding:23px 23px 20px;overflow:hidden}.panel-heading{display:flex;justify-content:space-between;align-items:center;gap:8px}.small-label{font-family:Georgia,serif;font-style:italic;font-size:.875rem;color:#757b69}.fan-stage{height:218px;position:relative;display:grid;place-items:center}.fan{position:relative;width:92px;height:135px;transform:translateY(-14px)}.fan-card{position:absolute;inset:0;background:white;border:1px solid #ffffff;border-radius:7px;padding:5px 5px 22px;transform-origin:50% 94%;transform:rotate(var(--angle));box-shadow:0 2px 5px #28372b22;transition:transform .45s cubic-bezier(.2,.8,.2,1)}.fan-card::before{content:"";display:block;width:100%;height:100%;background:var(--color);border-radius:3px}.fan-card::after{content:"";position:absolute;height:2px;width:22px;background:#d2d5cc;bottom:11px;left:12px}.fan-pin{position:absolute;bottom:49px;left:calc(50% - 4px);height:8px;width:8px;border-radius:50%;background:#9f9e83;box-shadow:0 0 0 2px #e6e6d9}.little-spark{position:absolute;top:20px;right:14px;font-size:2.2rem;color:#a17a40}.draw-controls{text-align:center}.primary{background:var(--green);color:#fff;border:0;padding:17px 14px;width:100%;border-radius:12px;font-size:.9375rem;font-weight:700;box-shadow:0 4px 0 #244638;transition:background .2s,transform .2s}.primary>span:first-child{margin-right:9px;color:#f1d994}.primary:hover:not(:disabled){background:#284737;transform:translateY(-2px)}.primary:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 #244638}.primary:disabled{opacity:.78}.draw-controls p{font-size:.875rem;margin:14px 0 0;color:#626d5f}.palette-panel{min-width:0;padding-top:15px;display:flex;flex-direction:column}.palette-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;gap:15px}h2{font:400 1.6rem Georgia,serif;margin:0}.counter{font-size:.875rem;background:#eae8df;padding:6px 12px;border-radius:20px;white-space:nowrap}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;flex:1;perspective:1000px}.color-card{background:#fff;border:1px solid #e2e1d9;border-radius:10px;padding:9px;min-width:0;box-shadow:0 5px 9px #3a413709;display:flex;flex-direction:column;transition:transform .3s}.color-card:nth-child(1){transform:rotate(-2deg)}.color-card:nth-child(3){transform:rotate(2deg)}.swatch{min-height:184px;flex:1;position:relative;border-radius:5px;display:grid;place-items:center;overflow:hidden}.empty .swatch{background:#f5f3ec;border:1px dashed #deddd3}.placeholder-number{position:absolute;top:13px;left:13px;font-size:.875rem;color:#868c81}.placeholder-symbol{font-size:2.3rem;color:#c3c6b7}.card-info{padding:15px 5px 9px;display:flex;flex-direction:column;gap:7px}.color-title{font-size:.875rem;color:#5c645c}.hex{font-size:.8125rem;color:#7c8179;overflow-wrap:anywhere;line-height:1.4}.revealed .hex{font-family:Consolas,monospace;font-weight:700;font-size:1.125rem;letter-spacing:1px;color:var(--ink)}.revealed .swatch::after{content:"";position:absolute;inset:0;border:1px solid #0000000d;border-radius:inherit;pointer-events:none}.revealed:hover{transform:translateY(-5px) rotate(0deg)}.palette-bottom{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:20px}.palette-bottom p{font-size:.875rem;color:var(--muted);margin:0}.palette-bottom p span{font-size:1.2rem;color:#ab6b7d;margin-right:6px}.reset{border:0;background:transparent;color:var(--green);white-space:nowrap;font-size:.875rem;min-height:44px;padding:8px 0 8px 12px}.reset span{font-size:1.2rem;margin-right:4px}.reset:hover:not(:disabled){text-decoration:underline}.reset:disabled{color:#8c9188;opacity:.65}.footnote{text-align:center;font-family:Georgia,serif;font-style:italic;font-size:.9375rem;color:#7b7e72;margin:32px 0 35px}.footnote span{display:inline-block;color:#b88a47;margin-right:8px;font-style:normal}footer{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--border);padding:20px 0 25px;color:#7b8176;font-size:.75rem}footer span:first-child{letter-spacing:1.3px;font-size:.75rem}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.drawing .fan-card{animation:shuffle .8s ease-in-out infinite;animation-delay:calc(var(--i)*-40ms)}.revealing{animation:reveal .65s cubic-bezier(.15,.75,.2,1)}.drawing .little-spark{animation:twinkle .8s ease-in-out infinite}.finished .counter{background:#dee8db;color:#365849}@keyframes shuffle{0%,100%{transform:rotate(var(--angle)) translateY(0)}50%{transform:rotate(calc(var(--angle)*.68 + 8deg)) translateY(-12px)}}@keyframes reveal{0%{opacity:.2;transform:translateY(-16px) rotateY(-60deg) scale(.94)}65%{transform:translateY(-5px) rotateY(5deg) scale(1.03)}100%{opacity:1}}@keyframes twinkle{50%{transform:rotate(35deg) scale(1.2)}}
@media(min-width:1400px){.intro{padding-top:58px}.workspace{grid-template-columns:350px minmax(0,1fr);gap:42px}.swatch{min-height:230px}.fan-stage{height:250px}.fan{transform:translateY(-7px) scale(1.12)}.fan-pin{bottom:57px}}
@media(max-width:1050px){.page{padding:0 4%}.workspace{grid-template-columns:280px minmax(0,1fr);gap:22px}.draw-panel{padding:20px 16px}.small-label{display:none}.cards{gap:10px}.swatch{min-height:166px}.card-info{padding-left:1px;padding-right:1px}.hex{font-size:.75rem}.palette-bottom{align-items:flex-start}.palette-bottom p{max-width:220px}}
@media(max-width:760px){.header{padding:20px 0}.brand{font-size:1.15rem}.header-note{font-size:.8125rem}.intro{padding:30px 0 26px}h1{font-size:2.75rem;letter-spacing:-1.3px}.intro .eyebrow{font-size:.75rem;letter-spacing:1.1px}.intro p{max-width:320px;margin:auto}.workspace{display:flex;flex-direction:column;gap:25px}.draw-panel{padding:18px 22px}.panel-heading .small-label{display:block}.fan-stage{height:179px}.fan{transform:translateY(-12px) scale(.88)}.fan-pin{bottom:37px;width:7px;height:7px}.little-spark{right:16%;top:18px}.draw-controls{max-width:370px;margin:auto}.draw-controls p{margin-top:12px}.palette-panel{padding-top:0}.palette-heading{margin-bottom:16px}h2{font-size:1.45rem}.cards{gap:10px}.swatch{min-height:150px}.card-info{padding:12px 2px 6px;gap:6px}.color-title{font-size:.875rem}.hex{font-size:.75rem}.revealed .hex{font-size:.9375rem;letter-spacing:0}.color-card{padding:6px;border-radius:8px}.palette-bottom{align-items:center;margin-top:14px}.palette-bottom p{font-size:.8125rem;max-width:195px}.footnote{max-width:310px;margin:26px auto;font-size:.875rem}footer{flex-direction:column;align-items:center;gap:10px;text-align:center}.placeholder-number{left:9px;top:9px}.placeholder-symbol{font-size:1.9rem}}
@media(max-width:370px){.header-note{display:none}h1{font-size:2.35rem}.cards{gap:7px}.swatch{min-height:127px}.color-title{font-size:.8125rem}.revealed .hex{font-size:.8125rem}.palette-bottom{flex-wrap:wrap}.reset{padding-left:0}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}