body{display:flex;min-height:100vh;flex-direction:column;background:radial-gradient(circle at 12% 12%,rgba(116,106,95,.12),transparent 26%),radial-gradient(circle at 88% 20%,rgba(172,139,91,.1),transparent 24%),linear-gradient(180deg,#fcfbf8,#f5f3ee)}.sketch-hero{position:relative;padding:62px 0 78px;overflow:hidden}.paper-lines{position:absolute;inset:0;z-index:-1;opacity:.18;background-image:repeating-linear-gradient(0deg,transparent 0,transparent 31px,rgba(66,59,51,.07) 32px),radial-gradient(circle at 25% 20%,rgba(101,90,76,.1),transparent 34%);pointer-events:none}.intro{text-align:center}.crumbs{display:flex;justify-content:center;gap:8px;margin-bottom:24px;color:var(--muted);font-size:.82rem}.crumbs a{color:#696057;font-weight:800}.sketch-hero .eyebrow{color:#5b5148;border-color:rgba(78,68,57,.16);box-shadow:0 8px 25px rgba(70,60,49,.07)}.sketch-hero .eyebrow-dot{background:#b7864e;box-shadow:0 0 0 5px rgba(183,134,78,.13)}.sketch-hero h1{max-width:1060px;color:#262321;font-family:Georgia,"Times New Roman",serif;font-size:clamp(2.9rem,7vw,5.45rem);font-weight:750;letter-spacing:-.055em}.pencil-text{position:relative;color:#77706a}.pencil-text:after{content:"";position:absolute;right:0;bottom:-5px;left:0;height:8px;opacity:.48;background:repeating-linear-gradient(-7deg,transparent 0 4px,#928b84 5px 6px);clip-path:polygon(0 50%,100% 0,98% 100%,2% 82%)}.trust-row{display:flex;justify-content:center;flex-wrap:wrap;gap:10px 22px;margin-top:23px;color:#625c56;font-size:.8rem;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:1px solid rgba(73,65,57,.18);border-radius:50%;color:#65584c;background:#fff;font-size:.62rem;font-style:normal}
.sketch-studio{margin-top:45px;overflow:hidden;border:1px solid rgba(54,49,45,.17);border-radius:30px;background:#fbfaf7;box-shadow:0 38px 105px rgba(57,48,39,.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 rgba(64,57,50,.12);background:rgba(255,254,251,.96)}.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:#847b73;font-size:.68rem}.pencil-mark{position:relative;width:34px;height:9px;border-radius:2px;background:linear-gradient(90deg,#d1aa62 0 13%,#3e3a37 13% 83%,#c9a568 83%);transform:rotate(-18deg)}.pencil-mark:after{content:"";position:absolute;right:-9px;border-width:4.5px 0 4.5px 10px;border-style:solid;border-color:transparent transparent transparent #d9c6a2}.studio-actions{display:flex;gap:9px}.quiet-button,.upload-button,.reset-button,.compare-button,.surprise-button,.download-button{min-height:41px;border-radius:11px;font-size:.75rem;font-weight:850}.quiet-button,.reset-button,.compare-button{padding:0 14px;border:1px solid rgba(64,57,50,.15);color:#5e5751;background:#fff}.quiet-button:hover,.reset-button:hover,.compare-button:hover{color:#2f2b28;border-color:rgba(64,57,50,.34);background:#f7f4ef}.upload-button{display:flex;align-items:center;gap:8px;padding:0 16px;border:0;color:#fff;background:linear-gradient(135deg,#2d2926,#57504a);box-shadow:0 9px 22px rgba(40,35,31,.25)}.upload-button:hover,.download-button:hover{transform:translateY(-1px);box-shadow:0 13px 27px rgba(40,35,31,.28)}
.studio-grid{display:grid;grid-template-columns:370px minmax(0,1fr)}.control-panel{padding:25px;border-right:1px solid rgba(64,57,50,.12);background:linear-gradient(160deg,#fcfbf8,#f2efe9)}.panel-heading,.preview-heading{display:flex;align-items:center;justify-content:space-between;gap:14px}.step-number{display:grid;flex:0 0 auto;width:34px;height:34px;place-items:center;border:1px solid rgba(67,59,52,.15);border-radius:11px;color:#6b5f54;background:#fff;font-size:.68rem;font-weight:900}.reset-button{min-height:35px;padding:0 11px;font-size:.69rem}.preset-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:18px}.preset{display:flex;align-items:center;gap:10px;min-height:65px;padding:9px;border:1px solid rgba(64,57,50,.14);border-radius:13px;color:#45403c;background:rgba(255,255,255,.78);text-align:left;transition:.18s}.preset:hover{transform:translateY(-2px);border-color:rgba(65,56,48,.3);box-shadow:0 8px 18px rgba(49,42,36,.08)}.preset.active{border-color:#51483f;background:#fff;box-shadow:0 0 0 2px rgba(81,72,63,.09),0 10px 22px rgba(49,42,36,.1)}.preset.wide{grid-column:1/-1}.preset span:last-child{min-width:0}.preset strong,.preset small{display:block}.preset strong{font-size:.74rem}.preset small{margin-top:3px;color:#8c8279;font-size:.61rem}.preset-swatch{position:relative;width:43px;height:43px;flex:0 0 auto;overflow:hidden;border:1px solid rgba(61,55,49,.14);border-radius:10px;background-color:#e9e5de}.preset-swatch:before,.preset-swatch:after{content:"";position:absolute;inset:8px 6px;border:solid #46413c;border-width:0 0 2px;transform:rotate(-18deg);box-shadow:0 7px 0 rgba(70,65,60,.6),0 14px 0 rgba(70,65,60,.35)}.preset-swatch:after{inset:4px 17px 8px 10px;border-width:0 2px 0 0;transform:rotate(28deg);box-shadow:7px 0 0 rgba(70,65,60,.38),14px 0 0 rgba(70,65,60,.22)}.preset-swatch.graphite{background:#e9e7e2}.preset-swatch.portrait{background:#f4eee4}.preset-swatch.portrait:before,.preset-swatch.portrait:after{opacity:.5;filter:blur(.3px)}.preset-swatch.technical{background:#f6f6f3}.preset-swatch.technical:before,.preset-swatch.technical:after{opacity:.9}.preset-swatch.charcoal{background:#d5d1ca}.preset-swatch.charcoal:before,.preset-swatch.charcoal:after{border-color:#24211f;box-shadow:0 7px 0 #4a4540,0 14px 0 #6d6760}.preset-swatch.soft{background:#fbf8f0}.preset-swatch.soft:before,.preset-swatch.soft:after{opacity:.32;filter:blur(.6px)}.surprise-button{width:100%;margin-top:10px;border:1px dashed rgba(72,62,52,.3);color:#65584c;background:rgba(255,255,255,.62);transition:.2s}.surprise-button:hover{color:#2d2926;border-style:solid;background:#fff;transform:translateY(-1px)}.panel-divider{height:1px;margin:24px 0;background:rgba(64,57,50,.12)}.sketch-controls{display:grid;gap:17px;margin-top:19px}.range-control>span{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;color:#514b46;font-size:.71rem;font-weight:800}.range-control output{min-width:42px;padding:4px 7px;border-radius:7px;color:#453d35;background:#e8e3db;text-align:center;font-size:.65rem}.range-control input{width:100%;height:5px;margin:0;border-radius:999px;background:linear-gradient(90deg,#3e3833 0 var(--value,50%),#d9d3ca var(--value,50%) 100%);appearance:none}.range-control input::-webkit-slider-thumb{width:17px;height:17px;border:3px solid #fff;border-radius:50%;background:#393430;box-shadow:0 2px 7px rgba(36,31,27,.3);appearance:none}.range-control input::-moz-range-thumb{width:12px;height:12px;border:3px solid #fff;border-radius:50%;background:#393430;box-shadow:0 2px 7px rgba(36,31,27,.3)}.export-card{margin-top:23px;padding:14px;border:1px solid rgba(64,57,50,.13);border-radius:15px;background:#fff}.export-card label{justify-content:space-between;color:#69615a;font-size:.7rem;font-weight:800}.export-card select{padding:6px 24px 6px 9px;border:1px solid rgba(64,57,50,.14);border-radius:8px;color:#393430;background:#f8f6f2}.download-button{display:flex;width:100%;align-items:center;justify-content:space-between;margin-top:11px;padding:0 15px;border:0;color:#fff;background:linear-gradient(135deg,#2c2926,#59514a);box-shadow:0 9px 22px rgba(40,35,31,.22);transition:.2s}
.preview-panel{min-width:0;padding:25px;background:#e6e1d9}.live-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border:1px solid rgba(56,51,47,.13);border-radius:999px;color:#56504a;background:rgba(255,255,255,.72);font-size:.6rem;font-weight:900;letter-spacing:.1em}.live-badge i{width:6px;height:6px;border-radius:50%;background:#9c7043;box-shadow:0 0 0 4px rgba(156,112,67,.12)}.canvas-stage{--split:48%;position:relative;min-height:500px;margin-top:19px;overflow:hidden;border:10px solid #fdfcf9;border-radius:9px;background:#d8d3cb;box-shadow:0 2px 0 #fff inset,0 16px 44px rgba(52,44,37,.2)}.canvas-stage:before{content:"";position:absolute;z-index:2;inset:0;opacity:.12;background-image:repeating-linear-gradient(7deg,transparent 0 5px,rgba(67,60,54,.07) 6px);pointer-events:none}.canvas-stage canvas{display:block;width:100%;height:100%;min-height:500px;object-fit:contain}.compare-label{position:absolute;z-index:5;top:16px;padding:7px 10px;border-radius:8px;color:#37332f;background:rgba(255,255,255,.86);box-shadow:0 4px 13px rgba(41,35,31,.12);font-size:.63rem;font-weight:900;letter-spacing:.05em;text-transform:uppercase;pointer-events:none}.before-label{left:16px}.after-label{right:16px}.compare-line{position:absolute;z-index:5;top:0;bottom:0;left:var(--split);width:2px;background:rgba(255,255,255,.92);box-shadow:0 0 0 1px rgba(43,38,34,.18);pointer-events:none}.compare-line i{position:absolute;top:50%;left:50%;display:grid;width:35px;height:35px;place-items:center;border:3px solid #fff;border-radius:50%;color:#fff;background:#403a35;box-shadow:0 5px 15px rgba(31,27,24,.28);font-style:normal;transform:translate(-50%,-50%)}.compare-range{position:absolute;z-index:6;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}.canvas-stage.single .compare-line,.canvas-stage.single .compare-range,.canvas-stage.single .before-label{display:none}.drop-overlay{position:absolute;z-index:8;inset:12px;display:flex;align-items:center;justify-content:center;gap:12px;border:2px dashed rgba(66,58,51,.35);border-radius:7px;color:#433c35;background:rgba(250,248,243,.91);opacity:0;pointer-events:none;transition:.2s}.drop-pencil{position:relative;width:38px;height:9px;border-radius:3px;background:#403a35;transform:rotate(-22deg)}.drop-pencil:after{content:"";position:absolute;right:-9px;border-width:4.5px 0 4.5px 10px;border-style:solid;border-color:transparent transparent transparent #b89d74}.canvas-stage.dragging .drop-overlay{opacity:1}.drawing-flash{position:absolute;z-index:7;inset:0;opacity:0;background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.9) 47%,transparent 74%);pointer-events:none;transform:translateX(-100%)}.canvas-stage.developing .drawing-flash{animation:draw-sweep .72s ease-out}.preview-footer{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:14px;color:#766e67;font-size:.7rem;font-weight:750}.compare-button{display:flex;align-items:center;gap:7px;min-height:38px}.compare-button.active{color:#fff;border-color:#403a35;background:#403a35}.toast{position:fixed;right:24px;bottom:24px;z-index:80;display:flex;align-items:center;gap:12px;min-width:270px;padding:14px 16px;border:1px solid rgba(63,55,49,.13);border-radius:15px;color:#3f3934;background:rgba(255,255,255,.96);box-shadow:0 18px 48px rgba(45,38,32,.2);opacity:0;visibility:hidden;transform:translateY(14px);transition:.22s}.toast.show{opacity:1;visibility:visible;transform:translateY(0)}.toast>span{display:grid;width:30px;height:30px;place-items:center;border-radius:50%;color:#fff;background:#77624f;font-weight:900}.toast strong,.toast small{display:block}.toast strong{font-size:.79rem}.toast small{margin-top:3px;color:#7c746d;font-size:.67rem}
.content-section{padding:78px 0}.content-section.alt{border-block:1px solid rgba(64,57,50,.07);background:rgba(255,255,255,.48)}.content{max-width:1000px}.section-kicker{margin-bottom:10px;color:#876b4e;font-size:.7rem;font-weight:900;letter-spacing:.13em;text-align:center;text-transform:uppercase}.content>h2,.guide-copy h2{margin:0 auto 12px;max-width:760px;color:#302c29;font-family:Georgia,"Times New Roman",serif;font-size:clamp(1.9rem,4vw,3rem);line-height:1.08;letter-spacing:-.035em;text-align:center}.content>p,.guide-copy p{max-width:760px;margin:0 auto;color:#746d66;line-height:1.75;text-align:center}.benefit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px}.benefit-card{position:relative;padding:25px;border:1px solid rgba(65,57,50,.11);border-radius:20px;background:#fff;box-shadow:0 12px 34px rgba(58,48,39,.06)}.benefit-card.featured{color:#fff;border-color:#403a35;background:linear-gradient(145deg,#292624,#57504a);transform:translateY(-7px);box-shadow:0 20px 42px rgba(43,36,31,.2)}.benefit-icon{display:grid;width:47px;height:47px;margin-bottom:17px;place-items:center;border-radius:14px;color:#574d43;background:#eee9e1;font-size:.78rem;font-weight:900}.benefit-card.featured .benefit-icon{color:#fff;background:rgba(255,255,255,.14)}.benefit-card h3{margin:0 0 8px;font-size:1rem}.benefit-card p{margin:0;color:#7b736c;font-size:.86rem;line-height:1.65}.benefit-card.featured p{color:rgba(255,255,255,.73)}.steps{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:0;margin:35px 0 0;list-style:none}.steps li{display:flex;gap:15px;padding:21px;border:1px solid rgba(64,57,50,.11);border-radius:18px;background:#fff}.steps li>span{display:grid;flex:0 0 auto;width:39px;height:39px;place-items:center;border-radius:12px;color:#fff;background:#4a433d;font-size:.68rem;font-weight:900}.steps strong{display:block;margin-top:1px;font-size:.92rem}.steps p{margin:6px 0 0;color:#7b736c;font-size:.83rem;line-height:1.6}.sketch-guide{background:linear-gradient(135deg,#37322e,#59514a);color:#fff}.sketch-guide .section-kicker{color:#dac3a8}.sketch-guide .guide-copy h2{color:#fff}.sketch-guide .guide-copy p{color:rgba(255,255,255,.66)}.tips-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-top:35px}.tips-grid article{display:flex;gap:16px;padding:20px;border:1px solid rgba(255,255,255,.11);border-radius:17px;background:rgba(255,255,255,.07)}.tips-grid article>span{color:#d5b68f;font-family:Georgia,serif;font-size:1.18rem}.tips-grid h3{margin:0 0 6px;font-size:.92rem}.tips-grid p{margin:0;color:rgba(255,255,255,.65);font-size:.81rem;line-height:1.6}.faq{max-width:820px;margin:31px auto 0}.faq details{border-bottom:1px solid rgba(64,57,50,.12)}.faq summary{position:relative;padding:19px 42px 19px 0;font-weight:800;cursor:pointer;list-style:none}.faq summary::-webkit-details-marker{display:none}.faq summary:after{content:"+";position:absolute;top:16px;right:4px;display:grid;width:28px;height:28px;place-items:center;border-radius:50%;color:#64594f;background:#ebe6df}.faq details[open] summary:after{content:"−"}.faq details p{margin:-4px 42px 20px 0;color:#756e68;line-height:1.7}.try-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:28px}.try-card{display:flex;align-items:center;gap:13px;padding:18px;border:1px solid rgba(64,57,50,.11);border-radius:17px;background:#fff;box-shadow:0 10px 28px rgba(50,42,35,.06);transition:.2s}.try-card:hover{transform:translateY(-3px);border-color:rgba(65,56,48,.27);box-shadow:0 16px 36px rgba(50,42,35,.11)}.try-icon{display:grid;flex:0 0 auto;width:43px;height:43px;place-items:center;border-radius:12px;color:#5f5247;background:#eee9e1;font-size:.66rem;font-weight:900}.try-card>span:nth-child(2){min-width:0}.try-card strong,.try-card span span{display:block}.try-card strong{font-size:.82rem}.try-card span span{margin-top:4px;color:#837a72;font-size:.69rem;line-height:1.4}.try-card b{margin-left:auto;color:#7d6e60}
@keyframes draw-sweep{0%{opacity:0;transform:translateX(-100%)}20%{opacity:1}100%{opacity:0;transform:translateX(100%)}}
@media(max-width:980px){.studio-grid{grid-template-columns:330px minmax(0,1fr)}.control-panel,.preview-panel{padding:20px}.canvas-stage,.canvas-stage canvas{min-height:455px}.try-grid{grid-template-columns:1fr 1fr}.try-card:last-child{grid-column:1/-1}}
@media(max-width:780px){.sketch-hero{padding-top:46px}.studio-grid{grid-template-columns:1fr}.control-panel{border-right:0;border-bottom:1px solid rgba(64,57,50,.12)}.preset-grid{grid-template-columns:repeat(3,1fr)}.preset.wide{grid-column:auto}.sketch-controls{grid-template-columns:1fr 1fr}.export-card{display:flex;align-items:center;gap:14px}.export-card label{flex:1}.download-button{width:auto;min-width:210px;margin-top:0}.canvas-stage,.canvas-stage canvas{min-height:480px}.benefit-grid{grid-template-columns:1fr}.benefit-card.featured{transform:none}.steps,.tips-grid{grid-template-columns:1fr}}
@media(max-width:560px){.sketch-hero h1{font-size:clamp(2.55rem,14vw,4.2rem)}.trust-row{align-items:flex-start;flex-direction:column;margin-inline:auto;width:max-content}.sketch-studio{border-radius:21px}.studio-bar{align-items:flex-start;padding:16px;flex-direction:column}.studio-actions{width:100%}.quiet-button,.upload-button{flex:1;justify-content:center}.control-panel,.preview-panel{padding:15px}.preset-grid{grid-template-columns:1fr 1fr}.preset.wide{grid-column:1/-1}.preset{min-height:60px}.sketch-controls{grid-template-columns:1fr}.export-card{align-items:stretch;flex-direction:column}.download-button{width:100%;min-width:0;margin-top:0}.preview-heading{align-items:flex-start}.canvas-stage,.canvas-stage canvas{min-height:335px}.canvas-stage{border-width:6px}.compare-label{top:10px}.before-label{left:10px}.after-label{right:10px}.preview-footer{align-items:flex-start;flex-direction:column}.content-section{padding:58px 0}.steps li{padding:18px}.tips-grid article{padding:18px}.try-grid{grid-template-columns:1fr}.try-card:last-child{grid-column:auto}.toast{right:10px;bottom:10px;left:10px;min-width:0}}
@media(prefers-reduced-motion:reduce){.drawing-flash{display:none}.preset,.try-card,.upload-button,.download-button{transition:none}}