body{display:flex;min-height:100vh;flex-direction:column;background:#f8f8fb}body:before,body:after{display:none}main{flex:1}.tool-hero{padding:46px 0 76px}.crumbs{display:flex;align-items:center;gap:9px;margin-bottom:34px;color:#858699;font-size:.78rem}.crumbs a{color:#575968;font-weight:750}.hero-copy{max-width:850px;margin:0 auto 34px;text-align:center}.hero-copy h1{margin:20px auto 15px;font-size:clamp(2.6rem,6vw,4.85rem);letter-spacing:0}.hero-copy .gradient-text{background-image:linear-gradient(115deg,#7e54dc,#ec697d 48%,#e9a530 78%,#1aa899)}.studio{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(340px,.72fr);max-width:1160px;margin:auto;border:1px solid #dfe0e7;border-radius:8px;background:#fff;box-shadow:0 24px 70px rgba(27,29,45,.11);overflow:hidden}.canvas-column{min-width:0;padding:16px;background:#f1f1f4}.canvas-toolbar{display:flex;align-items:center;justify-content:space-between;min-height:42px;padding:0 8px;color:#5d5e6b;font-size:.78rem}.canvas-toolbar>div{display:flex;align-items:center;gap:8px}.live-dot{width:7px;height:7px;border-radius:50%;background:#20aa79;box-shadow:0 0 0 4px rgba(32,170,121,.12)}.canvas-tip{color:#878894}.mesh-stage{position:relative;min-height:620px;overflow:hidden;border-radius:5px;background:#edeaf4;isolation:isolate;touch-action:none;cursor:crosshair}.mesh-preview,.grain,.handles,.stage-flash{position:absolute;inset:0}.mesh-preview{z-index:0}.grain{z-index:1;opacity:.07;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E");mix-blend-mode:soft-light}.specimen{position:absolute;left:7%;bottom:8%;z-index:2;color:rgba(255,255,255,.92);text-shadow:0 3px 26px rgba(36,22,50,.18);pointer-events:none}.specimen span,.specimen strong{display:block}.specimen span{margin-bottom:7px;font-size:.68rem;font-weight:900;letter-spacing:.22em}.specimen strong{font-family:Georgia,serif;font-size:clamp(2.5rem,6vw,5rem);font-style:italic;font-weight:400;letter-spacing:0}.handles{z-index:3}.mesh-handle{position:absolute;width:34px;height:34px;padding:0;border:3px solid rgba(255,255,255,.92);border-radius:50%;background:var(--color);box-shadow:0 3px 12px rgba(20,20,30,.25),0 0 0 1px rgba(20,20,30,.18);transform:translate(-50%,-50%);cursor:grab;transition:width .15s,height .15s,box-shadow .15s}.mesh-handle:before{content:"";position:absolute;inset:-13px;border:1px solid rgba(255,255,255,.52);border-radius:50%;opacity:0;transition:.15s}.mesh-handle:hover,.mesh-handle:focus-visible,.mesh-handle.dragging{width:40px;height:40px;outline:0;box-shadow:0 5px 18px rgba(20,20,30,.28),0 0 0 4px rgba(255,255,255,.35)}.mesh-handle:hover:before,.mesh-handle:focus-visible:before,.mesh-handle.dragging:before{opacity:1}.mesh-handle:active{cursor:grabbing}.stage-flash{z-index:5;opacity:0;pointer-events:none;background:#fff;transition:opacity .35s}.stage-flash.show{animation:flash .45s ease}@keyframes flash{0%{opacity:0}35%{opacity:.24}100%{opacity:0}}
.control-panel{padding:26px 25px 24px;background:#fff}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:20px;border-bottom:1px solid #e9e9ee}.panel-kicker{display:block;margin-bottom:5px;color:#9696a2;font-size:.65rem;font-weight:850;letter-spacing:.12em;text-transform:uppercase}.panel-heading h2{margin:0;font-size:1.18rem;letter-spacing:0}.icon-button{display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid #dedee5;border-radius:5px;color:#4f5060;background:#fff;transition:.18s}.icon-button:hover{color:#6c5ce7;border-color:#bdb8e8;background:#f8f7ff}.icon-button svg{width:19px;height:19px}.control-section{padding:19px 0;border-bottom:1px solid #e9e9ee}.section-label{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px;color:#81818e;font-size:.66rem;font-weight:850;letter-spacing:.1em;text-transform:uppercase}.base-row{display:grid;grid-template-columns:1fr 35px 88px;align-items:center;gap:7px;margin-bottom:8px;padding:6px;border:1px solid #e2e2e8;border-radius:5px;color:#777884;background:#f3f3f7;font-size:.7rem;font-weight:800}.base-row .hex-input{text-align:right}.point-list{display:grid;gap:7px}.point-row{display:grid;grid-template-columns:35px 1fr 32px;align-items:center;gap:8px;padding:6px;border:1px solid #e2e2e8;border-radius:5px;background:#fafafd}.point-row.active{border-color:#a89fe0;background:#f8f7ff}.color-input{width:35px;height:33px;padding:2px;border:1px solid #d9d9df;border-radius:4px;background:#fff;cursor:pointer}.hex-input{width:100%;min-width:0;padding:7px 8px;border:0;color:#51515e;background:transparent;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.76rem;font-weight:750;text-transform:uppercase;outline:0}.remove-point{display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;border-radius:4px;color:#a0a0aa;background:transparent;font-size:1.15rem}.remove-point:hover{color:#c44761;background:#fff0f3}.add-point{width:100%;min-height:37px;margin-top:8px;border:1px dashed #c9c6df;border-radius:5px;color:#6153bc;background:#faf9ff;font-size:.78rem;font-weight:800}.add-point span{margin-right:5px;font-size:1rem}.add-point:disabled{cursor:not-allowed;opacity:.45}.slider-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;font-size:.75rem;font-weight:750}.slider-heading+input+.slider-heading{margin-top:17px}.slider-heading output{color:#777887;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.7rem}.range{width:100%;height:4px;border-radius:0;accent-color:#6c5ce7;cursor:pointer}.presets{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.preset{position:relative;height:42px;padding:0;border:2px solid #fff;border-radius:4px;box-shadow:0 0 0 1px #dedee4;transition:transform .18s,box-shadow .18s}.preset:hover{transform:translateY(-2px);box-shadow:0 0 0 1px #9c91db,0 6px 14px rgba(61,52,120,.16)}.preset.active:after{content:"";position:absolute;inset:4px;border:2px solid rgba(255,255,255,.86);border-radius:2px}.export-block{padding-top:20px}.export-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px;color:#747582;font-size:.68rem;font-weight:800}.export-heading span:last-child{color:#188764}.export-block code{display:-webkit-box;min-height:66px;padding:10px;border:1px solid #e0e0e5;border-radius:5px;color:#5b596c;background:#f7f7fa;font-size:.66rem;line-height:1.45;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3}.export-actions{display:grid;grid-template-columns:1fr 43px;gap:8px;margin-top:9px}.primary-action,.secondary-action{display:flex;align-items:center;justify-content:center;min-height:43px;border:0;border-radius:5px}.primary-action{gap:8px;color:#fff;background:#1f2029;font-size:.8rem;font-weight:850;transition:.18s}.primary-action:hover{background:#6c5ce7}.primary-action svg,.secondary-action svg{width:18px;height:18px}.secondary-action{border:1px solid #dedee5;color:#50515e;background:#fff}.secondary-action:hover{color:#6c5ce7;border-color:#bdb8e8}.toast{position:fixed;left:50%;bottom:25px;z-index:90;padding:12px 17px;border-radius:5px;color:#fff;background:#1f2029;box-shadow:0 10px 30px rgba(0,0,0,.2);font-size:.8rem;font-weight:800;opacity:0;transform:translate(-50%,12px);transition:.22s;pointer-events:none}.toast.show{opacity:1;transform:translate(-50%,0)}
.content-section{padding:88px 0}.content-section.soft{border-block:1px solid #e7e7ec;background:#f1f1f4}.narrow{max-width:980px}.section-intro,.prose-section{display:grid;grid-template-columns:76px 1fr;gap:25px}.section-intro{margin-bottom:35px}.section-number{display:grid;place-items:center;width:48px;height:30px;border:1px solid #d2d2da;border-radius:3px;color:#787986;background:#fff;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.7rem;font-weight:800}.section-intro h2,.prose-section h2{margin:0 0 11px;font-size:clamp(1.7rem,4vw,2.5rem);letter-spacing:0}.section-intro p,.prose-section p{margin:0;color:#6c6d7a;line-height:1.75}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-left:101px;border:1px solid #dedee4;background:#dedee4}.feature-grid article{min-height:210px;padding:24px;background:#fafafd}.feature-icon{display:grid;place-items:center;width:34px;height:34px;margin-bottom:27px;border:1px solid #dcdce3;border-radius:50%;color:#6c5ce7;background:#fff;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.63rem}.feature-grid h3{margin:0 0 8px;font-size:.96rem}.feature-grid p{margin:0;color:#737480;font-size:.83rem;line-height:1.65}.prose-section>div{max-width:790px}.prose-section p+p{margin-top:16px}.prose-section code{padding:2px 5px;border:1px solid #dedee4;border-radius:3px;background:#f4f4f7;font-size:.84em}.faq-list{display:grid;gap:8px;margin-left:101px}.faq-list details{border:1px solid #dcdce3;border-radius:5px;background:#fafafd}.faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 20px;cursor:pointer;font-size:.9rem;font-weight:800;list-style:none}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary span{font-size:1.3rem;font-weight:400;transition:.2s}.faq-list details[open] summary span{transform:rotate(45deg)}.faq-list p{margin:0;padding:0 48px 20px 20px;color:#70717d;font-size:.86rem;line-height:1.7}.try-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-left:101px}.try-tool{display:grid;grid-template-columns:45px 1fr 20px;align-items:center;gap:12px;padding:14px;border:1px solid #dedee4;border-radius:5px;background:#fff;transition:.18s}.try-tool:hover{border-color:#bbb5df;transform:translateY(-3px);box-shadow:0 10px 25px rgba(37,34,65,.09)}.try-swatch{width:45px;height:45px;border-radius:4px}.linear-swatch{background:linear-gradient(135deg,#7157dd,#e76a8e,#efba53)}.palette-swatch{background:linear-gradient(90deg,#213547 0 33%,#42a889 33% 66%,#f4c85f 66%)}.shadow-swatch{background:#fff;box-shadow:8px 8px 0 #9a8cdf,inset 0 0 0 1px #ddd}.try-tool strong,.try-tool small{display:block}.try-tool strong{font-size:.82rem}.try-tool small{margin-top:4px;color:#7b7c88;font-size:.69rem;line-height:1.35}.try-tool b{color:#8d8e99;font-weight:500}
@media(max-width:950px){.studio{grid-template-columns:1fr}.mesh-stage{min-height:520px}.control-panel{display:grid;grid-template-columns:1fr 1fr;gap:0 28px}.panel-heading,.export-block{grid-column:1/-1}.control-section:nth-of-type(3){grid-column:1/-1}.presets{grid-template-columns:repeat(8,1fr)}}@media(max-width:700px){.tool-hero{padding:32px 0 54px}.crumbs{margin-bottom:27px}.hero-copy h1{font-size:clamp(2.45rem,13vw,3.7rem)}.studio{border-radius:6px}.canvas-column{padding:9px}.canvas-tip{display:none}.mesh-stage{min-height:410px}.specimen{left:6%;bottom:7%}.specimen strong{font-size:2.65rem}.mesh-handle{width:38px;height:38px}.control-panel{display:block;padding:23px 18px}.presets{grid-template-columns:repeat(4,1fr)}.content-section{padding:62px 0}.section-intro,.prose-section{grid-template-columns:1fr;gap:15px}.feature-grid,.faq-list,.try-grid{margin-left:0}.feature-grid,.try-grid{grid-template-columns:1fr}.feature-grid article{min-height:0}.try-tool{grid-template-columns:45px 1fr 20px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}