body{display:flex;min-height:100vh;flex-direction:column}.duo-hero{padding:62px 0 76px}.intro{text-align:center}.crumbs{margin-bottom:24px;color:var(--muted);font-size:.82rem}.crumbs a{color:#6a35b8;font-weight:750}.duo-hero h1{max-width:1000px;font-size:clamp(2.8rem,7vw,5.25rem)}.duo-gradient{color:transparent;background:linear-gradient(100deg,#5119a8 5%,#ff4f91 50%,#ffb74d);background-clip:text;-webkit-background-clip:text}.trust-row{display:flex;justify-content:center;flex-wrap:wrap;gap:10px 20px;margin-top:22px;color:#565a70;font-size:.79rem;font-weight:750}.trust-row span{display:flex;align-items:center;gap:7px}.trust-row i{display:grid;width:19px;height:19px;place-items:center;border-radius:50%;color:#fff;background:#ff4f91;font-size:.62rem;font-style:normal}
.duo-studio{margin-top:44px;overflow:hidden;border:1px solid rgba(37,17,61,.13);border-radius:30px;background:rgba(255,255,255,.92);box-shadow:0 38px 110px rgba(36,17,61,.2)}.studio-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:78px;padding:14px 20px 14px 25px;border-bottom:1px solid var(--border);background:rgba(255,255,255,.85)}.studio-title,.studio-title>span:last-child,.panel-heading>div,.panel-subheading,.preview-heading>div,.export-card label{display:flex;align-items:center;gap:11px}.studio-title strong,.studio-title small,.panel-heading strong,.panel-heading small,.panel-subheading strong,.panel-subheading small,.preview-heading strong,.preview-heading small{display:block}.studio-title small,.panel-heading small,.panel-subheading small,.preview-heading small{margin-top:3px;color:var(--muted);font-size:.68rem}.status-dot{width:10px;height:10px;border-radius:50%;background:#ff4f91;box-shadow:0 0 0 6px rgba(255,79,145,.12)}.studio-actions{display:flex;gap:9px}.quiet-button,.upload-button,.reset-button,.palette-heading button{border:0;font-size:.72rem;font-weight:850;transition:.2s}.quiet-button,.upload-button{min-height:42px;padding:0 15px;border-radius:11px}.quiet-button{color:#62576c;background:#f2eef5}.upload-button{color:#fff;background:linear-gradient(135deg,#4b188e,#f44287);box-shadow:0 9px 22px rgba(106,35,148,.24)}.upload-button:hover{transform:translateY(-1px);box-shadow:0 12px 26px rgba(106,35,148,.3)}
.studio-grid{display:grid;grid-template-columns:390px minmax(0,1fr);min-height:690px}.control-panel{padding:25px;border-right:1px solid var(--border);background:linear-gradient(180deg,#fff,#fbf8fd)}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.step-number{display:grid;place-items:center;flex:0 0 auto;width:32px;height:32px;border-radius:10px;color:#fff;background:#31134f;font-size:.68rem;font-weight:900}.reset-button{padding:8px 10px;border-radius:9px;color:#7c638a;background:#f1ebf4}.reset-button:hover{color:#fff;background:#6b3295}.color-pair{display:grid;grid-template-columns:1fr 44px 1fr;align-items:end;gap:10px;margin-top:20px}.color-field{display:grid;gap:7px;color:#55495f;font-size:.68rem;font-weight:850;text-transform:uppercase;letter-spacing:.06em}.color-input-wrap{display:grid;grid-template-columns:42px minmax(0,1fr);height:45px;overflow:hidden;border:1px solid rgba(50,23,75,.13);border-radius:11px;background:#fff}.color-input-wrap input[type=color]{width:42px;height:45px;padding:0;border:0;background:none;cursor:pointer}.color-input-wrap input[type=color]::-webkit-color-swatch-wrapper{padding:0}.color-input-wrap input[type=color]::-webkit-color-swatch{border:0}.color-input-wrap input[type=text]{min-width:0;padding:0 8px;border:0;outline:0;color:#3d3147;background:transparent;font:800 .69rem/1 ui-monospace,SFMono-Regular,Consolas,monospace;text-transform:uppercase}.swap-button{display:grid;align-content:center;justify-items:center;height:45px;border:1px solid rgba(50,23,75,.12);border-radius:11px;color:#6b3295;background:#f4eef8;transition:.2s}.swap-button span{font-size:1rem;line-height:1}.swap-button small{margin-top:2px;font-size:.55rem;font-weight:850}.swap-button:hover{transform:rotate(6deg);color:#fff;background:#6b3295}.palette-heading{display:flex;align-items:center;justify-content:space-between;margin:21px 0 9px;color:#55495f;font-size:.68rem;font-weight:850;text-transform:uppercase;letter-spacing:.06em}.palette-heading button{padding:7px 9px;border-radius:8px;color:#873c84;background:#f6e9f3;text-transform:none;letter-spacing:0}.palette-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.palette{display:flex;align-items:center;gap:9px;min-width:0;padding:8px;border:1px solid rgba(50,23,75,.1);border-radius:10px;color:#55495f;background:#fff;text-align:left;transition:.2s}.palette:hover,.palette.active{transform:translateY(-1px);border-color:rgba(123,48,154,.4);box-shadow:0 7px 18px rgba(63,25,90,.09)}.palette.active{color:#612183;background:#faf4fc}.palette>span{flex:0 0 auto;width:40px;height:28px;border-radius:7px;background:linear-gradient(115deg,var(--shadow) 48%,var(--highlight) 49%);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}.palette strong{overflow:hidden;font-size:.63rem;text-overflow:ellipsis;white-space:nowrap}.panel-divider{height:1px;margin:22px 0;background:var(--border)}.tone-controls{display:grid;gap:18px;margin-top:19px}.range-control{display:grid;gap:8px}.range-control>span:first-child,.range-ends{display:flex;align-items:center;justify-content:space-between}.range-control>span:first-child{color:#41394a;font-size:.73rem;font-weight:800}.range-control output{color:#81368e;font-size:.68rem}.range-ends{color:#9a90a2}.range-ends small{font-size:.57rem}.range-control input[type=range]{--value:50%;width:100%;height:4px;margin:3px 0;appearance:none;border-radius:99px;background:linear-gradient(90deg,#6e2d99 var(--value),#e7dfea var(--value));outline:0}.range-control input::-webkit-slider-thumb{width:16px;height:16px;appearance:none;border:3px solid #fff;border-radius:50%;background:#f04c8c;box-shadow:0 2px 8px rgba(67,26,90,.32)}.range-control input:focus-visible::-webkit-slider-thumb{outline:3px solid rgba(240,76,140,.25)}
.color-story{margin-top:21px;padding:13px;border:1px solid rgba(50,23,75,.1);border-radius:13px;background:#fff}.color-story>div:first-child{display:flex;align-items:center;justify-content:space-between;gap:9px}.color-story strong,.color-story small{display:block}.color-story strong{font-size:.7rem}.color-story small{margin-top:2px;color:var(--muted);font-size:.59rem}.color-story>div:first-child>span:last-child{color:#796d80;font:700 .58rem/1 ui-monospace,Consolas,monospace}.color-story-bar{height:10px;margin-top:10px;border-radius:99px;background:linear-gradient(90deg,#24113d,#ff5c8a);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}.export-card{display:grid;grid-template-columns:118px 1fr;gap:8px;margin-top:14px}.export-card label{justify-content:space-between;padding:0 10px;border:1px solid rgba(50,23,75,.1);border-radius:10px;color:#74677d;background:#fff;font-size:.61rem;font-weight:750}.export-card select{border:0;outline:0;color:#4b3e54;background:transparent;font-size:.66rem;font-weight:900}.download-button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:43px;border:0;border-radius:10px;color:#fff;background:linear-gradient(135deg,#3d1668,#f04786);box-shadow:0 9px 22px rgba(84,30,119,.24);font-size:.69rem;font-weight:900;transition:.2s}.download-button:hover{transform:translateY(-1px);box-shadow:0 13px 27px rgba(84,30,119,.3)}
.preview-panel{min-width:0;padding:25px;background:#2a123c}.preview-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:17px;color:#fff}.preview-heading small{color:#cdbcd7}.preview-heading .step-number{color:#481771;background:#ffb84d}.live-badge{display:flex;align-items:center;gap:6px;padding:6px 8px;border:1px solid rgba(255,255,255,.12);border-radius:7px;color:#fbc4da;background:rgba(255,255,255,.07);font-size:.59rem;font-weight:900;letter-spacing:.09em}.live-badge i{width:6px;height:6px;border-radius:50%;background:#ff5c8a;box-shadow:0 0 0 4px rgba(255,92,138,.15)}.canvas-stage{--split:48%;position:relative;display:grid;min-height:575px;overflow:hidden;place-items:center;border:1px solid rgba(255,255,255,.1);border-radius:19px;background-color:#17091f;background-image:linear-gradient(45deg,rgba(255,255,255,.035) 25%,transparent 25%),linear-gradient(-45deg,rgba(255,255,255,.035) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(255,255,255,.035) 75%),linear-gradient(-45deg,transparent 75%,rgba(255,255,255,.035) 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0;isolation:isolate}.canvas-stage canvas{display:block;width:100%;height:100%;max-height:575px;object-fit:contain}.compare-line{position:absolute;z-index:5;top:0;bottom:0;left:var(--split);width:2px;transform:translateX(-1px);background:#fff;box-shadow:0 0 14px rgba(0,0,0,.35);pointer-events:none}.compare-line i{position:absolute;top:50%;left:50%;display:grid;width:40px;height:40px;place-items:center;transform:translate(-50%,-50%);border:4px solid #fff;border-radius:50%;color:#6b248d;background:#fff;box-shadow:0 8px 22px rgba(16,5,24,.38);font-style:normal;font-weight:900}.compare-range{position:absolute;z-index:7;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}.compare-label{position:absolute;z-index:4;top:15px;padding:7px 9px;border-radius:7px;color:#fff;background:rgba(25,10,35,.64);font-size:.61rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase;backdrop-filter:blur(5px);pointer-events:none}.before-label{left:15px}.after-label{right:15px}.drop-overlay{position:absolute;z-index:10;inset:12px;display:none;place-items:center;align-content:center;gap:6px;border:2px dashed #ff70a5;border-radius:12px;color:#fff;background:rgba(42,18,60,.92);text-align:center;pointer-events:none}.drop-overlay small{color:#d8c4e1}.drop-icon{font-size:2rem}.canvas-stage.dragging .drop-overlay{display:grid}.canvas-stage.single .compare-line,.canvas-stage.single .compare-range,.canvas-stage.single .compare-label{display:none}.preview-footer{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:13px;color:#cbbbd5}.preview-footer>span{font-size:.68rem;font-weight:750}.compare-button{min-height:40px;padding:0 13px;border:1px solid rgba(255,255,255,.12);border-radius:9px;color:#d7c8df;background:rgba(255,255,255,.06);font-size:.68rem;font-weight:850}.compare-button[aria-pressed=true]{color:#fff;border-color:rgba(255,92,138,.42);background:rgba(255,92,138,.16)}.color-burst i{position:absolute;z-index:8;width:10px;height:10px;border-radius:50%;pointer-events:none;animation:burst .72s cubic-bezier(.2,.75,.2,1) forwards}@keyframes burst{0%{left:50%;top:50%;opacity:1;transform:translate(-50%,-50%) scale(.2)}100%{left:calc(50% + var(--x));top:calc(50% + var(--y));opacity:0;transform:translate(-50%,-50%) scale(1.4)}}
.content-section{padding:74px 0}.content-section.alt{border-block:1px solid rgba(31,34,62,.06);background:rgba(255,255,255,.52)}.content{max-width:1000px}.section-kicker{display:block;margin-bottom:9px;color:#873c84;font-size:.68rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase}.content>h2,.theory-copy h2{margin:0 0 13px;color:#291534;font-size:clamp(2rem,4vw,3rem);letter-spacing:-.045em}.content>p,.theory-copy p{max-width:780px;margin:0;color:var(--muted);line-height:1.75}.benefit-grid,.try-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px;margin-top:30px}.benefit-card,.try-card{padding:23px;border:1px solid var(--border);border-radius:19px;background:#fff;box-shadow:0 12px 34px rgba(53,49,110,.06)}.benefit-card.featured{color:#fff;border-color:transparent;background:linear-gradient(145deg,#35134f,#8b297d)}.benefit-card.featured p{color:#dbc9e0}.benefit-icon{display:grid;width:48px;height:48px;margin-bottom:16px;place-items:center;border-radius:14px;color:#82318d;background:#f4e4f2;font-size:.72rem;font-weight:900}.benefit-card.featured .benefit-icon{color:#3a164d;background:#ffb84d}.benefit-card h3{margin:0 0 8px;font-size:1rem}.benefit-card p{margin:0;color:var(--muted);font-size:.85rem;line-height:1.65}.steps{display:grid;gap:13px;margin:28px 0 0;padding:0;list-style:none}.steps li{display:flex;gap:16px;padding:19px;border:1px solid var(--border);border-radius:17px;background:rgba(255,255,255,.84)}.steps li>span{display:grid;width:37px;height:37px;flex:0 0 auto;place-items:center;border-radius:50%;color:#fff;background:linear-gradient(135deg,#491a75,#ed4385);font-size:.73rem;font-weight:900}.steps strong{display:block;margin:2px 0 5px}.steps p{margin:0;color:var(--muted);line-height:1.6}.color-theory{color:#fff;background:#281137}.color-theory .content{display:grid;grid-template-columns:.8fr 1.2fr;align-items:center;gap:45px}.color-theory .section-kicker{color:#ffb84d}.color-theory h2{color:#fff}.color-theory p{color:#cab9d4}.theory-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.theory-grid article{padding:14px;border:1px solid rgba(255,255,255,.1);border-radius:15px;background:rgba(255,255,255,.055)}.theory-swatch{display:block;height:70px;border-radius:9px}.theory-swatch.calm{background:linear-gradient(135deg,#21103c,#9654c8,#e3b8ff)}.theory-swatch.bold{background:linear-gradient(135deg,#102e35,#16a99a,#ffb249)}.theory-swatch.branded{background:linear-gradient(135deg,#101828,#59657b,#ff4f91)}.theory-grid h3{margin:13px 0 6px;font-size:.85rem}.theory-grid p{margin:0;color:#c8b7d1;font-size:.73rem;line-height:1.55}.faq{display:grid;gap:10px;margin-top:28px}.faq details{border:1px solid var(--border);border-radius:15px;background:#fff}.faq summary{padding:18px 48px 18px 19px;font-weight:800;cursor:pointer;list-style:none}.faq summary::-webkit-details-marker{display:none}.faq summary:after{content:"+";float:right;margin-right:-28px;color:#9b3a8d;font-size:1.2rem}.faq details[open] summary:after{content:"\2212"}.faq details p{margin:0;padding:0 19px 19px;color:var(--muted);line-height:1.7}.try-card{display:flex;align-items:center;gap:13px;padding:19px;transition:.22s}.try-card:hover{transform:translateY(-4px);border-color:rgba(150,53,137,.25);box-shadow:0 18px 40px rgba(53,49,110,.11)}.try-icon{display:grid;width:45px;height:45px;flex:0 0 auto;place-items:center;border-radius:13px;color:#84348c;background:#f4e4f2;font-size:.66rem;font-weight:900}.try-card>span:last-child,.try-card strong{display:block}.try-card>span:last-child>span{margin-top:4px;color:var(--muted);font-size:.79rem;line-height:1.45}.try-card b{margin-left:auto;color:#9b3a8d}.toast{position:fixed;z-index:100;right:22px;bottom:22px;display:flex;align-items:center;gap:10px;padding:12px 16px;opacity:0;transform:translateY(12px);border-radius:12px;color:#fff;background:#2d123e;box-shadow:0 15px 35px rgba(23,10,32,.3);pointer-events:none;transition:.25s}.toast>span{display:grid;width:25px;height:25px;place-items:center;border-radius:50%;color:#38144b;background:#ffb84d;font-size:.7rem;font-weight:900}.toast strong,.toast small{display:block}.toast strong{font-size:.76rem}.toast small{margin-top:2px;color:#d9c7e0;font-size:.65rem}.toast.show{opacity:1;transform:translateY(0)}
@media(max-width:1000px){.studio-grid{grid-template-columns:350px minmax(0,1fr)}.control-panel,.preview-panel{padding:20px}.canvas-stage{min-height:540px}}@media(max-width:850px){.studio-grid{grid-template-columns:1fr}.control-panel{border-right:0;border-bottom:1px solid var(--border)}.canvas-stage{min-height:520px}.color-theory .content{grid-template-columns:1fr}.theory-grid{max-width:680px}}@media(max-width:640px){.duo-hero{padding:46px 0 58px}.duo-studio{margin-top:34px;border-radius:20px}.studio-bar{align-items:flex-start;flex-direction:column;padding:15px}.studio-actions{width:100%}.quiet-button,.upload-button{flex:1}.control-panel,.preview-panel{padding:15px}.color-pair{grid-template-columns:1fr 38px 1fr}.color-input-wrap{grid-template-columns:38px 1fr}.color-input-wrap input[type=color]{width:38px}.palette-grid{grid-template-columns:1fr 1fr}.canvas-stage{min-height:390px}.benefit-grid,.try-grid,.theory-grid{grid-template-columns:1fr}.content-section{padding:56px 0}.color-theory .content{gap:28px}.export-card{grid-template-columns:105px 1fr}.duo-hero h1{font-size:clamp(2.8rem,15vw,4.7rem)}}@media(max-width:410px){.palette strong{font-size:.58rem}.color-input-wrap{grid-template-columns:34px 1fr}.color-input-wrap input[type=color]{width:34px}.color-input-wrap input[type=text]{padding:0 4px;font-size:.6rem}.panel-heading small,.preview-heading small{display:none}.canvas-stage{min-height:330px}.export-card{grid-template-columns:1fr}.export-card label{min-height:40px}}
@media(prefers-reduced-motion:reduce){.upload-button,.swap-button,.palette,.download-button,.try-card{transition:none}.color-burst{display:none}}