:root{--ink:#20302d;--muted:#6e7b76;--paper:#f8f5ee;--cream:#f0eadf;--white:#fffdf9;--coral:#d8665e;--coral-dark:#b94f48;--green:#315f53;--line:#ded8cd}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif}button,input{font:inherit}button{color:inherit}.site-shell{min-height:100vh;overflow:hidden}.nav{height:82px;padding:0 clamp(24px,6vw,96px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(32,48,45,.08);background:rgba(248,245,238,.92);position:sticky;top:0;z-index:20;backdrop-filter:blur(14px)}.brand{display:flex;align-items:center;gap:11px;border:0;background:transparent;text-align:left;cursor:pointer;font-family:Georgia,serif;font-size:21px;font-weight:bold;letter-spacing:.02em}.brand small{display:block;font:700 8px Arial,sans-serif;letter-spacing:.18em;margin-top:2px;color:var(--muted)}.brand-mark{width:38px;height:38px;border:1.5px solid var(--green);display:grid;place-items:center;border-radius:50%;font-style:italic;color:var(--green)}.nav-links{display:flex;align-items:center;gap:30px}.nav-links button{border:0;background:none;padding:28px 0 25px;font-size:14px;cursor:pointer;position:relative;color:var(--muted)}.nav-links button.active{color:var(--ink)}.nav-links button.active:after{content:"";position:absolute;height:2px;border-radius:2px;background:var(--coral);left:0;right:0;bottom:18px}.count{display:inline-grid;place-items:center;background:var(--green);color:#fff;border-radius:20px;font-size:10px;min-width:18px;height:18px;margin-left:5px}.primary{border:0;border-radius:4px;background:var(--coral);color:#fff;padding:15px 22px;font-weight:700;font-size:13px;letter-spacing:.02em;cursor:pointer;box-shadow:0 10px 25px rgba(184,79,72,.18);transition:.2s}.primary:hover{background:var(--coral-dark);transform:translateY(-1px)}.primary.small{padding:11px 16px}.hero{min-height:660px;padding:86px clamp(24px,8vw,130px) 70px;display:grid;grid-template-columns:1fr 1fr;gap:8vw;align-items:center;background:radial-gradient(circle at 80% 30%,rgba(216,102,94,.09),transparent 29%),linear-gradient(115deg,#f9f6f0,#f1ebdf)}.eyebrow{font-size:10px;font-weight:800;letter-spacing:.23em;color:var(--coral)}.hero h1,.page-heading h1{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:clamp(50px,6vw,82px);line-height:.98;letter-spacing:-.035em;margin:20px 0 28px}.hero h1 em{color:var(--coral);font-weight:400}.hero-copy>p{font-family:Georgia,serif;font-size:18px;line-height:1.7;max-width:590px;color:#5d6965}.hero-buttons{display:flex;gap:12px;margin:34px 0 24px}.ghost{padding:14px 20px;border:1px solid #cfc7bb;border-radius:4px;background:rgba(255,255,255,.45);font-weight:700;font-size:13px;cursor:pointer}.hero-note{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:8px}.hero-note span{color:var(--coral)}.hero-art{position:relative;height:490px;max-width:570px}.hero-card{position:absolute;background:#fff;padding:17px;box-shadow:0 28px 65px rgba(66,54,40,.18);border-radius:3px}.hero-card canvas{display:block;width:100%;height:100%}.card-back{width:330px;height:370px;right:0;top:0;transform:rotate(7deg);opacity:.7}.card-front{width:360px;height:405px;left:3%;top:28px;transform:rotate(-3deg)}.color-dots{position:absolute;left:24px;right:24px;bottom:-34px;padding:13px;background:#fff;border-radius:5px;box-shadow:0 12px 30px rgba(66,54,40,.16);display:flex;justify-content:center;gap:12px}.color-dots i{width:22px;height:22px;border-radius:50%}.floating-note{position:absolute;right:0;bottom:11px;background:var(--green);color:white;padding:18px 21px;width:230px;border-radius:4px;box-shadow:0 18px 35px rgba(49,95,83,.22)}.floating-note b,.floating-note span{display:block}.floating-note b{font-family:Georgia,serif;font-size:16px;margin-bottom:5px}.floating-note span{font-size:11px;line-height:1.4;opacity:.75}.intro{padding:100px clamp(24px,7vw,110px);text-align:center;background:var(--white)}.intro h2{font-family:Georgia,serif;font-size:clamp(34px,4vw,54px);font-weight:400;margin:14px 0 12px}.intro>p,.page-heading p{color:var(--muted);font-family:Georgia,serif;font-size:16px}.category-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:1120px;margin:55px auto 0}.category-grid button{--accent:#d8665e;border:1px solid #e5dfd4;background:#fbf9f5;padding:22px;text-align:left;display:flex;align-items:center;gap:16px;cursor:pointer;border-radius:5px;transition:.2s}.category-grid button:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:0 14px 30px rgba(50,40,30,.08)}.cat-icon{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 12%,white);color:var(--accent);font-size:22px}.category-grid b,.category-grid small{display:block}.category-grid b{font-family:Georgia,serif;font-size:17px}.category-grid small{font-size:11px;color:var(--muted);margin-top:4px}.category-grid i{font-style:normal;margin-left:auto;color:var(--accent)}.feature-strip{background:var(--green);color:#fff;display:grid;grid-template-columns:repeat(3,1fr);padding:45px clamp(24px,8vw,130px);gap:60px}.feature-strip div{display:grid;grid-template-columns:34px 1fr}.feature-strip span{grid-row:1/3;color:#e0b8a0;font-family:Georgia,serif;font-size:16px}.feature-strip b{font-family:Georgia,serif;font-size:18px}.feature-strip p{font-size:12px;line-height:1.6;color:rgba(255,255,255,.65);margin:6px 0}.library{padding:70px clamp(24px,7vw,110px) 100px;min-height:calc(100vh - 82px)}.page-heading{text-align:center;max-width:760px;margin:auto}.page-heading h1{font-size:clamp(42px,5vw,68px);margin:18px 0}.filter-row{display:flex;gap:8px;overflow:auto;max-width:1180px;margin:52px auto 35px;padding-bottom:5px}.filter-row button{white-space:nowrap;border:1px solid var(--line);background:#fffdf9;border-radius:30px;padding:10px 16px;font-size:12px;cursor:pointer}.filter-row button.active{background:var(--green);border-color:var(--green);color:#fff}.art-grid{max-width:1180px;margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:38px 24px}.art-card{min-width:0}.art-image{position:relative;display:block;width:100%;aspect-ratio:1;border:0;padding:20px;background:#eee8dc;overflow:hidden;cursor:pointer}.art-image canvas{width:100%;height:100%;display:block;box-shadow:0 8px 24px rgba(55,45,35,.1)}.start-overlay{position:absolute;inset:auto 20px 20px;background:var(--green);color:#fff;padding:13px;font-size:12px;font-weight:bold;transform:translateY(calc(100% + 24px));transition:.2s}.art-image:hover .start-overlay{transform:none}.art-meta{display:flex;justify-content:space-between;gap:12px;padding-top:15px}.art-meta span{font-size:9px;letter-spacing:.12em;color:var(--coral);text-transform:uppercase;font-weight:bold}.art-meta h2{font-family:Georgia,serif;font-size:19px;font-weight:400;margin:5px 0}.art-stats{text-align:right;display:flex;gap:10px;padding-top:4px}.art-stats span{color:var(--muted);letter-spacing:0;font-weight:normal;text-transform:none}.saved-image img{width:100%;height:100%;object-fit:cover;box-shadow:0 8px 24px rgba(55,45,35,.1)}.empty-state{text-align:center;margin:70px auto;max-width:440px}.empty-state>span{font-size:36px;color:var(--coral)}.empty-state h2{font-family:Georgia,serif;font-size:30px;font-weight:400}.empty-state p{color:var(--muted);margin-bottom:25px}footer{background:#e9e2d6;padding:35px clamp(24px,6vw,96px);display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:11px}footer p{font-family:Georgia,serif;font-size:13px}.studio-shell{height:100vh;display:flex;flex-direction:column;background:#ebe6dc;overflow:hidden}.studio-top{height:74px;flex:0 0 74px;background:#fffdf9;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 22px;gap:16px}.studio-top h1{font-family:Georgia,serif;font-size:18px;font-weight:400;margin:3px 0}.studio-top .eyebrow{font-size:8px}.icon-btn{border:1px solid var(--line);background:transparent;border-radius:50%;width:38px;height:38px;cursor:pointer}.studio-actions{margin-left:auto;display:flex;gap:10px;align-items:center}.text-btn{border:0;background:transparent;font-size:12px;font-weight:bold;cursor:pointer}.studio-workspace{display:grid;grid-template-columns:78px 1fr 295px;min-height:0;flex:1}.tool-rail{background:#f8f5ee;border-right:1px solid var(--line);padding:17px 9px;display:flex;flex-direction:column;gap:7px}.tool-rail button{border:0;background:transparent;border-radius:5px;padding:9px 3px;font-size:9px;cursor:pointer;color:var(--muted)}.tool-rail button span{display:block;font-size:21px;margin-bottom:3px;color:var(--ink)}.tool-rail button.active{background:#e1d8c9;color:var(--ink)}.tool-rail button:disabled{opacity:.3}.rail-rule{height:1px;background:var(--line);margin:8px}.canvas-wrap{min-width:0;min-height:0;padding:22px;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:auto;background-image:radial-gradient(#d3cdbf 1px,transparent 1px);background-size:20px 20px}.paper{height:min(68vh,720px);aspect-ratio:1;background:#fff;box-shadow:0 15px 45px rgba(55,45,35,.15);padding:10px}.paper canvas{width:100%;height:100%;display:block;touch-action:none;cursor:crosshair}.canvas-hint{font-size:10px;color:var(--muted);margin:12px 0 0}.control-panel{background:#fffdf9;border-left:1px solid var(--line);overflow:auto}.control-section{padding:22px;border-bottom:1px solid var(--line)}.section-title{display:flex;justify-content:space-between;align-items:center;text-transform:uppercase;letter-spacing:.12em;font-size:9px;font-weight:bold;margin-bottom:17px}.custom-color{border:1px solid var(--line);border-radius:50%;width:25px;height:25px;display:grid;place-items:center;cursor:pointer}.custom-color input{opacity:0;width:0;height:0}.swatches{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}.swatches button{aspect-ratio:1;border:2px solid transparent;border-radius:50%;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}.swatches button.selected{outline:2px solid var(--ink);outline-offset:3px}.brush-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.brush-grid button{border:1px solid var(--line);background:#fff;border-radius:4px;padding:10px 5px;font-size:9px;cursor:pointer;color:var(--muted)}.brush-grid button span{display:block;font-size:18px;color:var(--ink);margin-bottom:4px}.brush-grid button.selected{border-color:var(--coral);background:#fff5f2;color:var(--coral)}.size-control input{width:100%;accent-color:var(--coral)}.size-control b{color:var(--coral)}.pro-tip{margin:20px;background:#edf2ee;padding:15px;display:flex;gap:10px;color:var(--green)}.pro-tip p{font-size:10px;line-height:1.5;margin:0}.pro-tip strong{display:block}.toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:var(--green);color:white;padding:12px 18px;border-radius:4px;font-size:12px;box-shadow:0 12px 30px rgba(0,0,0,.2);z-index:30}
@media(max-width:900px){.nav-links{display:none}.hero{grid-template-columns:1fr;padding-top:60px}.hero-art{max-width:520px;width:100%;margin:0 auto}.category-grid,.art-grid{grid-template-columns:repeat(2,1fr)}.studio-workspace{grid-template-columns:65px 1fr}.control-panel{position:fixed;right:0;bottom:0;top:74px;width:260px;transform:translateX(100%);display:none}.paper{height:auto;width:min(100%,70vh)}.feature-strip{gap:25px}.nav-cta{display:block}}
@media(max-width:620px){.nav{height:68px;padding:0 16px}.nav-cta{padding:11px 12px}.hero{padding:45px 20px 55px;min-height:auto}.hero h1{font-size:49px}.hero-copy>p{font-size:16px}.hero-buttons{flex-direction:column;align-items:stretch}.hero-art{height:370px}.card-front{width:265px;height:300px}.card-back{width:235px;height:280px}.floating-note{width:190px}.intro{padding:70px 16px}.category-grid,.art-grid{grid-template-columns:1fr}.feature-strip{grid-template-columns:1fr;padding:40px 25px}.library{padding:55px 16px 80px}.art-grid{max-width:430px}.page-heading h1{font-size:45px}footer{flex-direction:column;gap:18px;text-align:center}.studio-top{padding:0 10px;height:66px;flex-basis:66px}.studio-top .eyebrow{display:none}.studio-top h1{font-size:14px}.studio-actions .text-btn{display:none}.studio-workspace{grid-template-columns:1fr;grid-template-rows:1fr 76px}.tool-rail{grid-row:2;grid-column:1;flex-direction:row;border:0;border-top:1px solid var(--line);justify-content:space-around;padding:5px}.tool-rail button{width:52px}.tool-rail button span{font-size:17px}.rail-rule{width:1px;height:auto;margin:8px 2px}.canvas-wrap{grid-row:1;padding:12px}.paper{width:100%;height:auto}.control-panel{display:none}.primary.small{padding:9px 10px;font-size:10px}.canvas-hint{display:none}}
.art-preview-image{width:100%;height:100%;object-fit:contain;display:block;background:#fffdf9;box-shadow:0 8px 24px rgba(55,45,35,.1)}.hero-card .art-preview-image{box-shadow:none}.paper.portrait{aspect-ratio:896/1200}.canvas-wrap{position:relative}.paper{flex:0 0 auto}.canvas-wrap.zooming{justify-content:flex-start;padding-top:68px}.zoom-controls{position:absolute;z-index:5;top:12px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:5px;padding:6px;background:rgba(255,253,249,.96);border:1px solid var(--line);border-radius:6px;box-shadow:0 8px 22px rgba(55,45,35,.12);backdrop-filter:blur(8px)}.zoom-controls button{min-width:30px;height:30px;border:1px solid var(--line);background:#fff;border-radius:4px;cursor:pointer;font-weight:bold}.zoom-controls button:last-child{padding:0 10px;font-size:10px;color:var(--green)}.zoom-controls button:disabled{opacity:.35;cursor:not-allowed}.zoom-controls span{min-width:48px;text-align:center;font-size:10px;font-weight:bold;color:var(--ink)}
.mobile-controls{display:none}
.canvas-stack{position:relative;width:100%;height:100%}.canvas-stack canvas{position:absolute;inset:0;width:100%;height:100%;display:block}.canvas-stack #coloring-canvas{z-index:1;touch-action:none;cursor:crosshair}.canvas-stack #outline-canvas{z-index:2;pointer-events:none}
@media(max-width:620px){.canvas-wrap{padding:10px;justify-content:flex-start}.canvas-wrap.zooming{padding:10px}.zoom-controls{top:49px}.mobile-controls{display:flex;width:100%;align-items:center;gap:8px;margin-bottom:49px}.mobile-controls>div{display:flex;gap:7px;overflow:auto;flex:1;padding:3px}.mobile-controls button{width:23px;height:23px;flex:0 0 23px;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #ccc}.mobile-controls button.selected{box-shadow:0 0 0 2px var(--ink)}.mobile-controls select{max-width:105px;border:1px solid var(--line);background:#fff;padding:6px;border-radius:4px;font-size:10px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}