@font-face{font-family:Open Sans;src:url('/fonts/OpenSans-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
:root{color-scheme:light;font-family:'Open Sans',system-ui,sans-serif;color:#243c31;background:#f5f2e9;font-synthesis:none}
*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:default;opacity:.45}a{color:#275b44;text-underline-offset:3px}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #ad582e;outline-offset:3px}
.page-shell{width:min(1280px,100%);margin:0 auto;padding:24px clamp(12px,3vw,36px) 36px}.site-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:28px}.site-header a{text-decoration:none;min-height:44px;display:inline-flex;align-items:center}.site-header a:hover{text-decoration:underline}.site-header span{color:#657164;font-size:.875rem}
.intro{max-width:760px;margin-bottom:28px}.eyebrow{margin:0 0 8px;color:#637057;font-size:.8rem;text-transform:uppercase;letter-spacing:.12em}.intro h1{font-family:Georgia,serif;font-size:clamp(2rem,5vw,3.2rem);font-weight:400;line-height:1.08;letter-spacing:-.035em;margin:0 0 12px}.lede{margin:0;color:#506253;font-size:1rem;line-height:1.65}
#little-tree-study button{min-height:44px;border:1px solid #d1dacb;border-radius:10px;padding:9px 12px;background:#fffdf7;color:#294332;line-height:1.3;transition:background .12s,border-color .12s}
#little-tree-study button:hover:not(:disabled){background:#edf1e6;border-color:#7c957d}#little-tree-study button[aria-pressed=true],#little-tree-study [data-export]{background:#2d6049;border-color:#2d6049;color:#fff}#little-tree-study button[aria-pressed=true]:hover,#little-tree-study [data-export]:hover{background:#214c39;border-color:#214c39}#little-tree-study [hidden]{display:none!important}
.studio-layout{display:grid;grid-template-columns:minmax(0,1fr) 252px;gap:20px;align-items:start}.canvas-panel{min-width:0;border:1px solid #dce1d2;border-radius:18px;padding:16px;background:#fffdf7}.canvas-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}.canvas-heading h2{font-family:Georgia,serif;font-size:1.3rem;font-weight:400;margin:0}.canvas-heading p,.canvas-heading span{font-size:.8rem;color:#66725f;margin:0}.canvas-wrap{position:relative;overflow:hidden;border-radius:8px;background:#e8e5d5}.canvas-wrap canvas{display:block;width:100%;aspect-ratio:18/13;touch-action:none;cursor:crosshair}.canvas-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px}.canvas-actions [data-export]{margin-left:auto}.canvas-panel [data-status]{margin:12px 0 4px;min-height:1.5em;line-height:1.5;font-size:.875rem}.canvas-panel [data-save-status]{margin:0;min-height:1.5em;font-size:.8rem;color:#64745c}.canvas-panel [data-save-status][data-error=true]{color:#9a3c22}
.tool-panel{padding:16px;border:1px solid #dce1d2;border-radius:18px;background:#ebeede;min-width:0}.tool-panel h2{margin:0 0 12px;font-size:1rem;font-weight:600}.tool-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.tool-list button{font-size:.875rem;padding:10px 7px!important}.tone-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}.tone-row button{flex:1 1 90px;font-size:.8rem}.range-control,.waterline-control{display:grid;gap:8px;margin-top:18px;font-size:.875rem}.range-control label,.waterline-control label{display:flex;flex-wrap:wrap;justify-content:space-between;gap:5px}.range-control input,.waterline-control input{width:100%;min-width:0;min-height:28px;margin:0;accent-color:#2d6049}.range-control output,.range-control [data-width],.waterline-control [data-waterline-value]{font-variant-numeric:tabular-nums}.guide-control{display:flex;gap:9px;align-items:center;min-height:44px;margin-top:10px;font-size:.875rem}.guide-control input{width:18px;height:18px;accent-color:#2d6049}.tool-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}.tool-actions button{flex:1 1 90px;font-size:.8rem}.tool-panel [data-hint]{margin:14px 0 0;line-height:1.6;font-size:.8rem;color:#52654c}
.painting-guide{margin-top:38px;padding-top:28px;border-top:1px solid #d9decf}.painting-guide h2,.painting-faq h2{font-family:Georgia,serif;font-size:1.65rem;font-weight:400;margin:0 0 18px}.guide-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.guide-grid h3{font-size:1rem;margin:0 0 8px}.guide-grid p,.guide-grid li,.painting-guide>p,.painting-faq p{font-size:.9rem;line-height:1.75;color:#506253}.guide-grid p{margin:0}.guide-grid ul{padding-left:20px;margin:0}.painting-faq{max-width:880px;margin-top:32px}.painting-faq details{border-bottom:1px solid #d9decf}.painting-faq summary{cursor:pointer;min-height:48px;padding:14px 0;line-height:1.5}.painting-faq details p{margin:0 0 18px}.painting-faq h3{font-size:1rem;margin:20px 0 4px}.painting-faq>p{margin-top:0}.site-footer{text-align:center;color:#657164;font-size:.8rem;line-height:1.6;margin-top:28px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.tools-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;cursor:pointer;list-style:none}.tools-toggle::-webkit-details-marker{display:none}.tools-toggle strong{display:block;font-size:.9rem;font-weight:600}.selected-brush{display:block;margin-top:3px;font-size:.75rem;line-height:1.5;color:#52654c}.tools-toggle svg{flex-shrink:0;stroke:currentColor;stroke-width:1.7}.tool-panel details[open]>.tools-toggle{margin-bottom:16px}.tool-panel details[open]>.tools-toggle svg{transform:rotate(180deg)}
@media(max-width:920px){.studio-layout{grid-template-columns:minmax(0,1fr)}.tool-panel{order:-1}.tools-content{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.tools-content>.section-heading{display:none}.tool-panel h2{grid-column:1/-1;margin:0}.tool-list,.tone-row,.tool-actions,.tool-panel [data-hint],.tools-close{grid-column:1/-1}.tools-close{display:block}.tool-list{grid-template-columns:repeat(7,minmax(0,1fr))}.tool-list button{font-size:.8rem}.tone-row,.range-control,.waterline-control,.guide-control,.tool-actions,.tool-panel [data-hint]{margin:0}.tone-row button{flex:0 1 auto}.tool-actions button{flex:0 1 auto}.tool-panel [data-hint]{min-height:0}.guide-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.page-shell{padding-top:12px}.site-header{margin-bottom:12px}.site-header span{display:none}.intro{margin-bottom:14px}.intro h1{margin-bottom:8px}.lede{font-size:.9rem;line-height:1.6}.studio-layout{gap:12px}.tool-panel{padding:10px 12px}.tools-content{gap:10px}.tool-list{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.tool-list button{font-size:.76rem;padding:8px 4px!important}.canvas-panel{padding:10px;border-radius:14px}.canvas-heading h2{font-size:1.1rem}.canvas-heading p,.canvas-heading span{font-size:.72rem}.canvas-actions{gap:6px}.canvas-actions button{font-size:.78rem;padding:8px!important}.canvas-actions [data-export]{margin-left:0}.guide-grid{grid-template-columns:1fr;gap:20px}.painting-guide{margin-top:28px}.painting-faq{margin-top:24px}}
@media(max-width:920px) and (max-height:500px){.page-shell{padding-top:4px}.site-header{margin-bottom:4px}.intro{margin-bottom:10px}.intro .eyebrow,.intro .lede{display:none}.intro h1{font-size:1.6rem;margin-bottom:0}.tool-panel{padding:8px 12px}.studio-layout{gap:10px}}
@media(prefers-reduced-motion:reduce){#little-tree-study button{transition:none}}
.skip-link{position:absolute;left:12px;top:8px;padding:10px 14px;background:#fffdf7;color:#234a35;z-index:10;transform:translateY(-160%)}.skip-link:focus{transform:translateY(0)}.home-link{gap:8px}.home-link svg{stroke:currentColor;stroke-width:1.7;flex-shrink:0}.section-heading{display:flex;justify-content:space-between;gap:12px;align-items:baseline;margin-bottom:12px}.section-heading span{color:#718068;font-size:.75rem}.tool-icon{display:block;margin-bottom:3px;font-size:1.1rem;line-height:1.1}.control-help,.canvas-instructions{font-size:.8rem;line-height:1.6;color:#60715a}.canvas-instructions{margin:10px 0 0}.control-help{margin:8px 0 0}.fresh-start{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;padding-top:16px;border-top:1px solid #cdd7c3}.fresh-start button{font-size:.8rem;flex:1 1 90px}.fresh-start p{flex-basis:100%;margin:0}.page-footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-top:36px;padding-top:20px;border-top:1px solid #d9decf;font-size:.75rem;color:#68755e;line-height:1.7}.guide-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.canvas-panel [data-save-status][data-state=warning]{color:#9a3c22}
@media(max-width:920px){.section-heading,.fresh-start,#tree-keyboard-help{grid-column:1/-1}.section-heading{margin:0}.fresh-start{margin:0}.tool-icon{display:none}}
@media(max-width:600px){.site-header .home-link span{display:inline}.site-header .studio-label{display:none}.guide-grid{grid-template-columns:1fr}.page-footer{display:block}.page-footer>span{display:block;margin-top:6px}}
@media print{.site-header,.tool-panel,.canvas-actions,.painting-guide,.painting-faq,[data-status],[data-save-status],.site-footer,.page-footer{display:none}.page-shell{padding:0}.intro{margin-bottom:12px}.intro .eyebrow,.intro .lede{display:none}.studio-layout{display:block}.canvas-panel{border:0;padding:0}.canvas-heading{display:none}}