:root{--ink:#17171b;--paper:#f7f4ed;--white:#fffefa;--orange:#ff6c4a;--yellow:#ffd83d;--mint:#36c79a;--indigo:#4c54d2;--lavender:#d9d4ff;--line:#d9d4ca;--muted:#66666e;--sans:"Microsoft YaHei","PingFang SC",Arial,sans-serif;--display:Arial,"Microsoft YaHei",sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);overflow-x:hidden}body.menu-open{overflow:hidden}a{color:inherit}button{font:inherit}.skip-link{position:fixed;z-index:100;left:1rem;top:-5rem;padding:.75rem 1rem;background:var(--ink);color:#fff;text-decoration:none}.skip-link:focus{top:1rem}img{display:block;max-width:100%}
.site-header{position:absolute;z-index:50;top:0;left:0;right:0;min-height:5rem;padding:0 clamp(1.25rem,5vw,4.5rem);display:flex;align-items:center;gap:2rem;border-bottom:1px solid rgba(23,23,27,.13)}.brand,.footer-brand{display:flex;align-items:center;gap:.7rem;text-decoration:none}.brand-symbol{position:relative;width:2.65rem;height:2.65rem;border-radius:50%;display:block;background:var(--ink);overflow:hidden}.brand-symbol i{position:absolute;display:block;width:1.8rem;height:.28rem;border-radius:1rem;background:var(--yellow);transform:rotate(-27deg);left:.42rem}.brand-symbol i:nth-child(1){top:.72rem}.brand-symbol i:nth-child(2){top:1.18rem;background:var(--orange)}.brand-symbol i:nth-child(3){top:1.65rem;background:var(--mint)}.brand b{display:block;font-size:1.03rem;letter-spacing:0}.brand small{display:block;margin-top:.1rem;color:rgba(23,23,27,.55);font-size:.65rem}.desktop-nav{display:flex;gap:2rem;margin-left:auto}.desktop-nav a{font-size:.82rem;text-decoration:none;position:relative}.desktop-nav a:after{content:"";position:absolute;left:0;right:100%;bottom:-.4rem;height:2px;background:var(--orange);transition:.2s}.desktop-nav a:hover:after{right:0}.nav-download{min-height:2.8rem;padding:.65rem 1rem;display:flex;align-items:center;gap:.7rem;background:var(--ink);color:#fff;text-decoration:none;font-size:.78rem;font-weight:700}.nav-download span{display:grid;place-items:center;width:1.6rem;height:1.6rem;background:var(--orange);border-radius:50%}.menu-button,.mobile-menu{display:none}
.hero{position:relative;min-height:100svh;padding:8.5rem clamp(1.25rem,7vw,7rem) 6rem;display:grid;grid-template-columns:minmax(18rem,.86fr) minmax(28rem,1.14fr);align-items:center;gap:3vw;background:var(--lavender);overflow:hidden}.hero:before{content:"";position:absolute;left:-5vw;bottom:6.5rem;width:43vw;height:1.3rem;background:var(--orange);transform:rotate(-5deg);border-radius:50%}.hero:after{content:"";position:absolute;right:13%;top:12%;width:13rem;height:4rem;border:1.2rem solid rgba(255,255,255,.45);border-left:0;border-bottom:0;transform:rotate(10deg);pointer-events:none}.hero-copy,.hero-visual{position:relative;z-index:2}.hero-copy{max-width:40rem}.eyebrow{margin:0 0 1.25rem;display:flex;align-items:center;gap:.75rem;font-size:.67rem;font-weight:800;letter-spacing:.13rem}.eyebrow span{width:2rem;height:2rem;display:grid;place-items:center;border:1px solid currentColor;border-radius:50%;letter-spacing:0}.hero h1,.section h2{margin:0;font-family:var(--display);font-weight:900;letter-spacing:0}.hero h1{font-size:clamp(4rem,8vw,8.6rem);line-height:.83}.hero h1 em,.section h2 em{font-style:normal;color:var(--orange)}.hero-lead{max-width:36rem;margin:1.8rem 0 0;font-size:1rem;line-height:1.9;color:#414149}.hero-actions{margin-top:2rem;display:flex;align-items:center;gap:1.4rem}.primary-button{min-height:4.4rem;padding:.6rem .7rem .6rem .8rem;display:flex;align-items:center;gap:.7rem;background:var(--ink);color:#fff;text-decoration:none;box-shadow:.45rem .45rem 0 var(--yellow);transition:.2s}.primary-button:hover{transform:translate(-.2rem,-.2rem);box-shadow:.65rem .65rem 0 var(--orange)}.download-icon{width:2.6rem;height:2.6rem;display:grid;place-items:center;border:1px solid rgba(255,255,255,.3);border-radius:50%;font-size:1.3rem}.primary-button small{display:block;color:var(--yellow);font-size:.53rem;letter-spacing:.08rem}.primary-button b{display:block;margin-top:.2rem;font-size:.78rem;white-space:nowrap}.primary-button strong{margin-left:.35rem;font-size:1.25rem;color:var(--orange)}.plain-link{font-size:.8rem;font-weight:700;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:.4rem}.plain-link span{margin-left:.4rem;color:var(--orange)}.hero-facts{display:flex;gap:1.6rem;margin:2.25rem 0 0;padding:1.2rem 0 0;border-top:1px solid rgba(23,23,27,.2);list-style:none}.hero-facts li{display:flex;align-items:center;gap:.55rem}.hero-facts b{font-size:1.65rem;line-height:1}.hero-facts span{max-width:4rem;font-size:.66rem;line-height:1.4;color:#55555e}.hero-visual{align-self:stretch;display:flex;align-items:center;justify-content:center;min-height:31rem}.hero-visual img{position:relative;z-index:2;width:min(60vw,54rem);filter:drop-shadow(0 1.5rem 1.4rem rgba(35,26,60,.18));transform:translate(2%,2%)}.scribble-word{position:absolute;z-index:1;top:4%;right:-2%;font-size:clamp(5rem,12vw,11rem);font-weight:900;color:transparent;-webkit-text-stroke:1px rgba(23,23,27,.17);transform:rotate(-7deg)}.tool-pill{position:absolute;z-index:4;padding:.7rem .9rem;background:var(--white);border:1px solid var(--ink);box-shadow:.28rem .28rem 0 var(--ink);font-size:.66rem}.tool-pen{left:4%;top:17%;display:flex;align-items:center;gap:.5rem;transform:rotate(-5deg)}.tool-pen span{width:1.9rem;height:.32rem;background:var(--indigo);border-radius:1rem;transform:rotate(-18deg)}.tool-progress{right:2%;bottom:11%;display:flex;align-items:center;gap:.55rem;transform:rotate(3deg)}.tool-progress b{font-size:1.1rem;color:var(--indigo)}.tool-progress span{color:var(--muted)}.hero-scroll{position:absolute;z-index:3;left:clamp(1.25rem,3vw,3rem);bottom:2rem;display:flex;align-items:center;gap:.6rem;writing-mode:vertical-rl;font-size:.52rem;font-weight:800;letter-spacing:.12rem}.hero-scroll span{width:1px;height:2.4rem;background:var(--ink)}
.keyword-ribbon{min-height:4.4rem;padding:.85rem 1.5rem;display:flex;align-items:center;gap:1.1rem;background:var(--yellow);overflow:hidden;white-space:nowrap}.keyword-ribbon>span{padding:.45rem .65rem;background:var(--ink);color:#fff;font-size:.54rem;font-weight:800;letter-spacing:.08rem}.keyword-ribbon p{margin:0;font-size:.73rem;font-weight:800}.keyword-ribbon i{width:.34rem;height:.34rem;background:var(--orange);border-radius:50%;flex:0 0 auto}
.section{padding:7rem clamp(1.25rem,8vw,8rem)}.section-intro{display:grid;grid-template-columns:1.05fr .95fr;gap:4rem;align-items:end}.section-intro .eyebrow{grid-column:1/-1;margin-bottom:-2rem}.section h2{font-size:clamp(3.3rem,6.8vw,7.2rem);line-height:.9}.section-intro>p:last-child{max-width:31rem;margin:0 0 .35rem;color:var(--muted);font-size:.92rem;line-height:1.9}.practice{background:var(--white)}.lesson-stage{max-width:76rem;margin:4.5rem auto 0;display:grid;grid-template-columns:16rem 1fr;border:1px solid var(--ink);background:var(--paper);box-shadow:.8rem .8rem 0 var(--ink)}.lesson-sidebar{padding:1rem;border-right:1px solid var(--ink);display:flex;flex-direction:column;gap:.45rem}.lesson-sidebar button{min-height:6rem;padding:.9rem 1rem;display:grid;grid-template-columns:2.2rem 1fr;text-align:left;border:1px solid transparent;background:none;cursor:pointer}.lesson-sidebar button:hover{background:#ece8df}.lesson-sidebar button.active{background:var(--indigo);color:#fff;border-color:var(--ink)}.lesson-sidebar span{grid-row:1/3;font-size:.66rem;font-weight:800}.lesson-sidebar b{font-size:.9rem}.lesson-sidebar small{margin-top:.25rem;color:var(--muted);font-size:.65rem}.lesson-sidebar .active small{color:rgba(255,255,255,.7)}.lesson-canvas{min-width:0}.canvas-top,.canvas-bottom{min-height:3.7rem;padding:.8rem 1.1rem;display:flex;justify-content:space-between;align-items:center;font-size:.62rem;font-weight:800;letter-spacing:.06rem}.canvas-top{border-bottom:1px solid var(--ink)}.canvas-top b{padding:.45rem .6rem;background:var(--yellow);color:var(--ink)}.canvas-art{position:relative;min-height:25rem;background:repeating-linear-gradient(0deg,transparent 0,transparent 1.95rem,rgba(76,84,210,.07) 2rem),repeating-linear-gradient(90deg,transparent 0,transparent 1.95rem,rgba(76,84,210,.07) 2rem),#fcfbf7;overflow:hidden}.canvas-art:after{content:"LINE / RHYTHM";position:absolute;right:1.3rem;bottom:1rem;font-size:.58rem;font-weight:800;color:#aaa9b0;letter-spacing:.08rem}.canvas-art svg{width:100%;height:25rem}.canvas-art path{fill:none;stroke-linecap:round}.guide-path{stroke:#c8c7cc;stroke-width:8;stroke-dasharray:2 18}.draw-path{stroke:var(--orange);stroke-width:10;stroke-dasharray:730;stroke-dashoffset:170}.canvas-art circle{fill:var(--indigo)}.cursor-tip{position:absolute;left:53%;top:42%;width:2rem;height:4.8rem;background:linear-gradient(90deg,#e7e7e7,#fff,#cecece);border-radius:1rem 1rem .25rem .25rem;transform:rotate(34deg);filter:drop-shadow(.3rem .45rem .35rem rgba(0,0,0,.2))}.cursor-tip:before{content:"";position:absolute;left:.38rem;top:-1.12rem;border-left:.62rem solid transparent;border-right:.62rem solid transparent;border-bottom:1.4rem solid #fff}.cursor-tip span{position:absolute;left:.35rem;right:.35rem;bottom:.55rem;height:.18rem;background:var(--orange)}.canvas-bottom{border-top:1px solid var(--ink)}.canvas-bottom>span{display:flex;align-items:center;gap:.4rem}.canvas-bottom>span i{width:.45rem;height:.45rem;background:var(--mint);border-radius:50%}.canvas-bottom button{min-height:2.6rem;padding:.55rem .8rem;border:0;background:var(--ink);color:#fff;cursor:pointer;font-size:.7rem;font-weight:800}.canvas-bottom button b{margin-left:.6rem;color:var(--yellow)}
.tools{background:var(--ink);color:#fff}.light{color:rgba(255,255,255,.75)}.tools-heading{max-width:76rem;margin:auto}.tools-heading h2 em{color:var(--yellow)}.tools-grid{max-width:76rem;margin:4rem auto 0;display:grid;grid-template-columns:1.2fr .8fr;grid-template-rows:auto auto;border:1px solid rgba(255,255,255,.25)}.tool-feature{min-height:20rem;padding:2rem;display:grid;align-items:end;position:relative;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.25)}.tool-feature h3{margin:.55rem 0 .45rem;font-size:1.35rem}.tool-feature p{max-width:28rem;margin:0;color:rgba(255,255,255,.63);font-size:.8rem;line-height:1.75}.feature-no{font-size:.58rem;font-weight:800;letter-spacing:.09rem;color:var(--yellow)}.tool-brush{grid-row:1/3;min-height:40rem;border-right:1px solid rgba(255,255,255,.25);background:#24242a}.tool-layer{background:var(--indigo)}.tool-palette{border-bottom:0;background:#34343c}.brush-preview{position:absolute;inset:2rem 2rem auto;height:21rem}.brush-preview span{position:absolute;left:3%;right:5%;height:.75rem;background:var(--orange);border-radius:50%;transform:rotate(-12deg)}.brush-preview span:nth-child(1){top:20%;height:1.1rem}.brush-preview span:nth-child(2){top:43%;left:17%;right:2%;height:2.2rem;background:var(--yellow);transform:rotate(8deg)}.brush-preview span:nth-child(3){top:68%;right:22%;height:.32rem;background:var(--mint);transform:rotate(-4deg)}.layer-preview{position:absolute;right:1.5rem;top:1.5rem;width:12rem;height:8rem}.layer-preview span{position:absolute;right:0;width:8.5rem;padding:.7rem;background:#fff;color:var(--ink);border:1px solid var(--ink);font-size:.53rem;font-weight:800;box-shadow:.3rem .3rem 0 var(--ink)}.layer-preview span:nth-child(1){top:0}.layer-preview span:nth-child(2){top:2.35rem;right:1.4rem;background:var(--yellow)}.layer-preview span:nth-child(3){top:4.7rem;right:2.8rem;background:var(--mint)}.palette-preview{position:absolute;right:2rem;top:2rem;display:flex}.palette-preview button{width:3.6rem;height:3.6rem;margin-left:-.55rem;border:.22rem solid #fff;border-radius:50%;background:var(--color);cursor:pointer}.palette-preview button:hover{transform:translateY(-.3rem)}
.gallery{background:#efeae0}.gallery-head{display:grid;grid-template-columns:1.1fr .9fr;gap:4rem;align-items:end;max-width:76rem;margin:auto}.gallery-head>p{max-width:29rem;margin:0 0 .4rem;color:var(--muted);font-size:.88rem;line-height:1.9}.gallery-grid{max-width:76rem;margin:4rem auto 0;display:grid;grid-template-columns:1.2fr .75fr .8fr;grid-template-rows:18rem 16rem;gap:.9rem}.gallery-grid figure{position:relative;margin:0;overflow:hidden;background:#ccc}.gallery-grid img{width:100%;height:100%;object-fit:cover;transition:.5s}.gallery-grid figure:hover img{transform:scale(1.035)}.gallery-main{grid-row:1/3}.gallery-tall{grid-row:1/3}.gallery-wide{grid-column:3}.gallery-grid figcaption{position:absolute;left:1rem;right:1rem;bottom:1rem;padding-top:.7rem;border-top:1px solid rgba(255,255,255,.7);display:flex;justify-content:space-between;align-items:end;color:#fff;text-shadow:0 1px 5px #000}.gallery-grid figcaption span{font-size:.55rem;font-weight:800;letter-spacing:.08rem}.gallery-grid figcaption b{font-size:1rem}.gallery-grid blockquote{margin:0;padding:1.4rem;display:flex;flex-direction:column;justify-content:flex-end;background:var(--orange);color:var(--ink)}.gallery-grid blockquote span,.gallery-grid blockquote cite{font-size:.55rem;font-weight:800;letter-spacing:.08rem;font-style:normal}.gallery-grid blockquote p{margin:.7rem 0 1.2rem;font-size:1.6rem;font-weight:800;line-height:1.3}
.routine{display:grid;grid-template-columns:.88fr 1.12fr;align-items:center;gap:7vw;background:var(--mint)}.routine-copy>p:last-of-type{max-width:32rem;color:#24483c;font-size:.88rem;line-height:1.9}.routine-copy h2 em{color:var(--indigo)}.routine-metrics{display:flex;gap:1.7rem;margin-top:2.2rem}.routine-metrics div{padding-right:1.7rem;border-right:1px solid rgba(23,23,27,.3)}.routine-metrics div:last-child{border:0}.routine-metrics b{display:block;font-size:2rem}.routine-metrics span{display:block;margin-top:.3rem;font-size:.66rem}.routine-panel{max-width:35rem;width:100%;margin:auto;background:var(--white);border:1px solid var(--ink);box-shadow:.9rem .9rem 0 var(--indigo);transform:rotate(1.4deg)}.panel-head{padding:1.1rem 1.3rem;display:flex;justify-content:space-between;border-bottom:1px solid var(--ink);font-size:.63rem;font-weight:800;letter-spacing:.08rem}.panel-head b{color:var(--indigo)}.week-row{padding:1.2rem;display:flex;justify-content:space-between;border-bottom:1px solid var(--line)}.week-row span{width:2rem;height:2rem;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;font-size:.65rem}.week-row .done{background:var(--indigo);border-color:var(--indigo);color:#fff}.week-row .today{background:var(--yellow);border-color:var(--ink)}.routine-panel ol{margin:0;padding:1rem 1.2rem 1.3rem;list-style:none}.routine-panel li{min-height:4.2rem;padding:.7rem 0;display:grid;grid-template-columns:2rem 1fr 1.8rem;align-items:center;border-bottom:1px solid var(--line)}.routine-panel li:last-child{border:0}.routine-panel li>span{font-size:.62rem;font-weight:800}.routine-panel li b{display:block;font-size:.8rem}.routine-panel li small{display:block;margin-top:.2rem;color:var(--muted);font-size:.52rem}.routine-panel li i{font-style:normal;text-align:center}.routine-panel .complete i{color:var(--mint)}.routine-panel .active{padding-left:.65rem;padding-right:.65rem;background:#eceaff}.routine-panel .active i{color:var(--indigo)}
.download-section{position:relative;display:grid;grid-template-columns:1fr minmax(18rem,27rem);gap:5rem;background:var(--orange);color:#fff;overflow:hidden}.download-section:before{content:"DOWNLOAD";position:absolute;right:-1rem;bottom:-2.1rem;font-size:clamp(7rem,18vw,16rem);font-weight:900;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.22)}.download-copy,.download-ticket,.install-flow{position:relative;z-index:1}.download-copy h2 em{color:var(--yellow)}.download-copy>p{max-width:34rem;color:rgba(255,255,255,.78);font-size:.9rem;line-height:1.9}.download-copy ul{display:flex;gap:1rem;flex-wrap:wrap;margin:1.7rem 0 0;padding:0;list-style:none}.download-copy li{padding:.55rem .7rem;border:1px solid rgba(255,255,255,.45);font-size:.65rem}.download-ticket{min-height:24rem;padding:2rem;display:flex;flex-direction:column;background:var(--white);color:var(--ink);border:.18rem solid var(--ink);box-shadow:1rem 1rem 0 var(--yellow);text-decoration:none;transform:rotate(2.2deg);transition:.2s}.download-ticket:hover{transform:rotate(0) translateY(-.4rem)}.ticket-top{padding-bottom:1.1rem;border-bottom:1px solid var(--line);font-size:.57rem;font-weight:800;letter-spacing:.09rem}.download-ticket strong{margin-top:2rem;font-size:3.6rem;line-height:1}.download-ticket b{max-width:15rem;margin-top:.7rem;font-size:1rem;line-height:1.45}.download-ticket i{width:4.2rem;height:4.2rem;margin:auto 0 0 auto;display:grid;place-items:center;background:var(--indigo);color:#fff;border-radius:50%;font-size:2rem;font-style:normal}.download-ticket small{margin-top:1.2rem;padding-top:.8rem;border-top:1px dashed var(--ink);font-size:.53rem;font-weight:800;letter-spacing:.07rem}.install-flow{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);margin-top:1rem;border-top:1px solid rgba(255,255,255,.55);border-bottom:1px solid rgba(255,255,255,.55)}.install-flow div{padding:1.3rem;border-right:1px solid rgba(255,255,255,.55)}.install-flow div:last-child{border-right:0}.install-flow span{font-size:1.65rem;font-weight:900;color:var(--yellow)}.install-flow b{display:block;margin-top:.55rem;font-size:.85rem}.install-flow p{margin:.35rem 0 0;color:rgba(255,255,255,.7);font-size:.7rem}
.seo-summary{display:grid;grid-template-columns:.7fr 1.3fr;gap:6rem;background:var(--yellow)}.seo-summary h2{font-size:clamp(2.6rem,4.7vw,5.2rem)}.seo-list{border-top:1px solid var(--ink)}.seo-list p{margin:0;padding:1.15rem 0;display:grid;grid-template-columns:15rem 1fr;gap:1.4rem;border-bottom:1px solid rgba(23,23,27,.45)}.seo-list b{font-size:.78rem}.seo-list span{font-size:.72rem;line-height:1.7;color:#544d2d}
.faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:6vw;background:var(--white)}.faq-heading h2{font-size:clamp(3rem,5.7vw,6rem)}.faq-list{border-top:1px solid var(--ink)}.faq-list details{padding:1.3rem 0;border-bottom:1px solid var(--line)}.faq-list summary{display:flex;justify-content:space-between;gap:1rem;font-size:.85rem;font-weight:800;cursor:pointer;list-style:none}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary span{font-size:1.35rem;color:var(--orange);transition:.2s}.faq-list details[open] summary span{transform:rotate(45deg)}.faq-list p{max-width:41rem;margin:1rem 0 0;color:var(--muted);font-size:.78rem;line-height:1.8}
footer{padding:4rem clamp(1.25rem,8vw,8rem) 2rem;background:var(--ink);color:#fff}.footer-brand .brand-symbol{background:#fff}.footer-brand b{display:block;font-size:1.1rem}.footer-brand small{display:block;margin-top:.18rem;color:#8e8e98;font-size:.55rem;letter-spacing:.08rem}footer>p{max-width:32rem;margin:1.3rem 0 3rem;color:#aaaab3;font-size:.75rem;line-height:1.8}.footer-bottom{padding-top:1.3rem;display:grid;grid-template-columns:auto 1fr auto;gap:1.5rem;border-top:1px solid rgba(255,255,255,.16);color:#83838e;font-size:.58rem;line-height:1.7}.footer-bottom span:nth-child(2){text-align:center}.footer-bottom a{color:var(--yellow);text-decoration:none}
@media (max-width:1023px){.desktop-nav,.nav-download{display:none}.menu-button{width:2.8rem;height:2.8rem;margin-left:auto;display:grid;place-content:center;gap:.35rem;border:1px solid var(--ink);background:transparent}.menu-button span{display:block;width:1.15rem;height:2px;background:var(--ink);transition:.2s}.menu-button[aria-expanded="true"] span:first-child{transform:translateY(.27rem) rotate(45deg)}.menu-button[aria-expanded="true"] span:last-child{transform:translateY(-.27rem) rotate(-45deg)}.mobile-menu{position:absolute;top:5rem;left:0;right:0;padding:1.2rem;display:none;grid-template-columns:1fr 1fr;gap:.65rem;background:var(--white);border-bottom:1px solid var(--ink)}.mobile-menu.open{display:grid}.mobile-menu a{min-height:3rem;padding:.8rem;display:flex;align-items:center;border:1px solid var(--line);text-decoration:none;font-size:.75rem}.mobile-menu .mobile-download{grid-column:1/-1;justify-content:center;background:var(--ink);color:#fff;border-color:var(--ink)}.hero{min-height:auto;padding-top:8rem;grid-template-columns:1fr}.hero-copy{max-width:44rem}.hero-visual{min-height:32rem}.hero-visual img{width:min(92vw,48rem)}.hero:before{width:70vw}.hero-scroll{display:none}.section-intro,.gallery-head{grid-template-columns:1fr}.section-intro .eyebrow{grid-column:auto;margin-bottom:0}.section-intro{gap:1.3rem}.lesson-stage{grid-template-columns:1fr}.lesson-sidebar{display:grid;grid-template-columns:repeat(3,1fr);border-right:0;border-bottom:1px solid var(--ink)}.lesson-sidebar button{min-height:5rem;grid-template-columns:1.7rem 1fr;padding:.7rem}.tools-grid{grid-template-columns:1fr 1fr}.tool-brush{grid-column:1/-1;grid-row:auto;min-height:30rem;border-right:0}.tool-layer,.tool-palette{border-top:1px solid rgba(255,255,255,.25);border-bottom:0}.gallery-grid{grid-template-columns:1fr 1fr;grid-template-rows:22rem 17rem}.gallery-main{grid-row:1}.gallery-tall{grid-row:1}.gallery-wide{grid-column:1}.routine{grid-template-columns:1fr;gap:4rem}.download-section{grid-template-columns:1fr minmax(18rem,24rem);gap:3rem}.seo-summary{grid-template-columns:1fr;gap:3rem}.faq{grid-template-columns:1fr;gap:3rem}}
@media (max-width:767px){.site-header{min-height:4.5rem;padding:0 1rem}.mobile-menu{top:4.5rem}.brand-symbol{width:2.35rem;height:2.35rem}.brand-symbol i{left:.35rem;transform:scale(.88) rotate(-27deg)}.brand b{font-size:.92rem}.hero{padding:5.8rem 1.1rem 2.5rem;gap:1.2rem}.hero:after{display:none}.hero h1{font-size:clamp(3rem,15vw,4rem)}.hero-lead{font-size:.84rem;line-height:1.75}.hero-actions{margin-top:1.4rem;display:grid;justify-items:start}.primary-button{width:100%;min-width:0}.primary-button b{white-space:normal}.plain-link,.hero-facts{display:none}.hero-visual{min-height:16rem;margin-left:-1rem;margin-right:-1rem}.hero-visual img{width:108%;max-width:none;transform:translate(1%,0)}.tool-pill{padding:.55rem .65rem;font-size:.58rem}.tool-pen{left:5%;top:1%}.tool-progress{right:4%;bottom:0}.scribble-word{top:0}.keyword-ribbon{overflow-x:auto;scrollbar-width:none}.section{padding:5rem 1.1rem}.section h2{font-size:clamp(3rem,14vw,4.4rem)}.lesson-stage{margin-top:3rem;box-shadow:.45rem .45rem 0 var(--ink)}.lesson-sidebar{grid-template-columns:1fr;padding:.65rem}.lesson-sidebar button{min-height:4.4rem}.lesson-sidebar button small{display:block}.canvas-art,.canvas-art svg{min-height:18rem;height:18rem}.canvas-bottom{align-items:flex-start;gap:.8rem}.canvas-bottom>span{max-width:9rem;line-height:1.5}.tools-grid{grid-template-columns:1fr}.tool-feature{min-height:18rem}.tool-brush{min-height:25rem}.tool-layer,.tool-palette{border-left:0}.brush-preview{height:14rem}.gallery-grid{grid-template-columns:1fr;grid-template-rows:auto}.gallery-main,.gallery-tall,.gallery-wide{grid-column:auto;grid-row:auto;height:22rem}.gallery-grid blockquote{min-height:15rem}.routine-panel{box-shadow:.5rem .5rem 0 var(--indigo)}.routine-metrics{gap:1rem}.routine-metrics div{padding-right:1rem}.download-section{grid-template-columns:1fr}.download-ticket{min-height:22rem;box-shadow:.55rem .55rem 0 var(--yellow)}.download-ticket strong{font-size:3rem}.install-flow{grid-template-columns:1fr}.install-flow div{border-right:0;border-bottom:1px solid rgba(255,255,255,.55)}.install-flow div:last-child{border-bottom:0}.seo-list p{grid-template-columns:1fr;gap:.4rem}.faq{gap:2rem}.footer-bottom{grid-template-columns:1fr}.footer-bottom span:nth-child(2){text-align:left}}
@media (max-width:374px){.hero{padding-left:.9rem;padding-right:.9rem}.hero h1{font-size:3.45rem}.primary-button{padding-left:.55rem;padding-right:.55rem}.download-icon{width:2.2rem;height:2.2rem}.hero-facts b{font-size:1.4rem}.section{padding-left:.9rem;padding-right:.9rem}.lesson-sidebar button{grid-template-columns:1.5rem 1fr}.canvas-bottom{padding:.65rem}.canvas-bottom button{padding:.5rem}.download-ticket{padding:1.4rem}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}
.canvas-art:after{content:var(--lesson-title,"LINE / RHYTHM")}
.palette-preview button:nth-child(1){--color:#ff6c4a}.palette-preview button:nth-child(2){--color:#ffd83d}.palette-preview button:nth-child(3){--color:#36c79a}.palette-preview button:nth-child(4){--color:#4c54d2}
@media (max-width:767px){.hero-copy{width:100%;min-width:0}.hero h1{font-size:clamp(2.75rem,13.6vw,3.75rem);white-space:nowrap}.hero-lead{overflow-wrap:anywhere}}
@media (min-width:1024px){.hero h1{font-size:clamp(4rem,6.1vw,7rem)}}