.story-section{max-width:1240px;margin:auto;padding:128px 28px 0}.story-intro{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end;margin-bottom:46px}.story-intro h2,.palette-showcase h2{margin:0;font-size:clamp(40px,4.8vw,65px);line-height:1.03;letter-spacing:-.065em}.story-intro>p:not(.eyebrow){max-width:460px;margin:0;color:#69666f;line-height:1.85}.story-track{height:180vh;position:relative}.story-stage{position:sticky;top:8vh;min-height:720px;overflow:hidden;border-radius:24px;background:#25242a;box-shadow:0 28px 70px #1f1d2533}.stage-caption{position:absolute;z-index:5;top:32px;left:34px;display:flex;align-items:center;gap:10px;color:#fff;font-size:15px;font-weight:800}.stage-caption b{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#7c63ff;font-size:12px}.ai-canvas{position:absolute;top:88px;bottom:30px;left:32px;right:32%;overflow:hidden;border-radius:15px;background:#ede9e5;transition:right .7s ease,transform .7s ease}.canvas-top{display:flex;justify-content:space-between;padding:10px 14px;background:#dcd8d4;color:#77716f;font-size:11px;font-weight:800}.canvas-top i{font-style:normal;color:#a69f9d}.canvas-art{height:calc(100% - 37px);position:relative;display:grid;place-items:center;background:radial-gradient(circle at 40% 35%,#fff 0,#f5f2ee 40%,#e4dfdc 100%)}.canvas-art img{width:92%;max-height:96%;object-fit:contain;mix-blend-mode:multiply;filter:saturate(.88) contrast(1.02);transition:transform .7s ease}.sample-point{position:absolute;left:49%;top:51%;width:20px;height:20px;border:3px solid #fff;border-radius:50%;box-shadow:0 0 0 2px #242329;transition:all .7s ease}.eyedropper{position:absolute;left:53%;top:37%;color:#29262f;font-size:45px;transform:rotate(-42deg);transition:all .7s ease}.match-panel{position:absolute;z-index:3;top:103px;right:36px;width:28%;min-width:250px;padding:18px;border:1px solid #48454e;border-radius:16px;background:#1e1d22;color:#fff;box-shadow:0 18px 40px #00000044;transition:transform .7s ease,opacity .7s ease}.panel-brand{display:flex;align-items:center;gap:8px;padding-bottom:14px;border-bottom:1px solid #3c3942;font-size:13px;font-weight:800}.panel-brand b{display:grid;place-items:center;width:25px;height:25px;border-radius:8px;background:#7c63ff}.panel-current{display:flex;gap:10px;align-items:center;margin:14px 0}.panel-current>i,.panel-match>i{width:37px;height:37px;border-radius:7px;background:#ef8056;flex:none;transition:background .7s ease}.panel-current small,.panel-current em{display:block;color:#aaa6b1;font-size:10px;font-style:normal}.panel-current strong{display:block;font:800 15px Consolas,monospace}.panel-label{margin:14px 0 7px;color:#dedbe2;font-size:11px;font-weight:800}.panel-match{display:flex;align-items:center;gap:7px;margin-top:7px;padding:7px;border-radius:8px;background:#29272e;font-size:11px}.panel-match>i{width:23px;height:23px;background:#ef8056}.panel-match span{margin-left:auto;color:#bdb8c8;font-size:10px}.muted-match{opacity:.68}.muted-match>i{background:#a99cd0}.panel-search{display:flex;justify-content:space-between;margin-top:14px;padding:10px;border:1px solid #4b4751;border-radius:8px;color:#a6a1ad;font-size:11px}.panel-search b{color:#fff}.stage-note{position:absolute;bottom:18px;right:38px;color:#9d98a5;font-size:11px}.story-stage[data-step="1"] .ai-canvas{right:36%;transform:scale(.985)}.story-stage[data-step="1"] .canvas-art img{transform:scale(1.05) translate(-3%,2%)}.story-stage[data-step="1"] .sample-point{left:65%;top:25%;background:#a99cd0}.story-stage[data-step="1"] .eyedropper{left:68%;top:20%}.story-stage[data-step="1"] .panel-current>i,.story-stage[data-step="1"] .panel-match:first-of-type>i{background:#a99cd0}.story-stage[data-step="2"] .ai-canvas{right:39%;transform:scale(.96)}.story-stage[data-step="2"] .canvas-art img{transform:scale(1.11) translate(4%,-2%)}.story-stage[data-step="2"] .sample-point{left:37%;top:39%;background:#f1e5d2}.story-stage[data-step="2"] .eyedropper{left:39%;top:32%}.story-stage[data-step="2"] .panel-current>i,.story-stage[data-step="2"] .panel-match:first-of-type>i{background:#f1e5d2}.story-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:58px 0 120px}.story-steps article{padding:20px;border-top:1px solid #d9d6dc}.story-steps b{color:#7c63ff;font-size:12px}.story-steps h3{margin:28px 0 6px;font-size:19px;letter-spacing:-.04em}.story-steps p{margin:0;color:#74707a;font-size:14px}.palette-showcase{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center;padding:110px max(28px,calc((100% - 1184px)/2));background:#e9e7e3}.palette-showcase>div>p:not(.eyebrow){max-width:490px;margin:22px 0;color:#67646c;line-height:1.8}.palette-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}.palette-tab{padding:9px 12px;border:1px solid #d0ccc8;border-radius:9px;background:transparent;color:#5c5861;font-size:13px;font-weight:800}.palette-tab.active{border-color:#7c63ff;background:#7c63ff;color:#fff}.palette-art{padding:18px;border-radius:19px;background:#242329;box-shadow:0 22px 45px #3a343434}.palette-ratio{display:flex;height:275px;border-radius:12px;overflow:hidden}.palette-ratio i{transition:background .5s ease}.palette-ratio i:nth-child(1){width:60%;background:#ef8056}.palette-ratio i:nth-child(2){width:30%;background:#f1e5d2}.palette-ratio i:nth-child(3){width:10%;background:#a99cd0}.palette-labels{display:grid;grid-template-columns:6fr 3fr 1fr;gap:6px;margin-top:13px}.palette-labels span{min-width:0;color:#fff}.palette-labels b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}.palette-labels em{display:block;margin-top:3px;color:#aaa6b1;font-size:10px;font-style:normal}@media(max-width:800px){.story-section{padding:85px 22px 0}.story-intro,.palette-showcase{grid-template-columns:1fr;gap:28px}.story-intro>p:not(.eyebrow){margin:0}.story-track{height:auto}.story-stage{min-height:580px;position:relative;top:auto}.ai-canvas{top:76px;bottom:18px;left:14px;right:14px}.match-panel{right:24px;bottom:32px;top:auto;width:calc(100% - 48px);min-width:0;transform:scale(.9);transform-origin:bottom right}.stage-note{display:none}.story-stage[data-step="1"] .ai-canvas,.story-stage[data-step="2"] .ai-canvas{right:14px;transform:none}.story-steps{grid-template-columns:1fr;margin:40px 0 75px}.palette-showcase{padding:75px 22px}.palette-ratio{height:210px}}