@font-face{font-family:Fallback;src:local("Avenir Next"),local("Avenir"),local("Nunito Sans");font-display:swap}
:root{--page:#f7f5f0;--paper:#fff;--ink:#353e38;--muted:#626b5f;--green:#4f6c54;--soft-green:#e9eee5;--line:#e6e6dd;--accent:#d6856b;--selected:#db8871;font-family:Fallback,"Trebuchet MS",system-ui,sans-serif;color:var(--ink);background:var(--page);font-synthesis:none;color-scheme:light}
*{box-sizing:border-box}body{margin:0;-webkit-tap-highlight-color:transparent}button,input,a{touch-action:manipulation}button,input{font:inherit}button{cursor:pointer}button,a,input{-webkit-tap-highlight-color:transparent}button{color:inherit}button:disabled{cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:3px solid #43709d;outline-offset:4px}button:disabled{opacity:.35}h1,h2,p{margin:0}svg{display:block}button svg,.custom-color svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round;flex:none}.button{border:1px solid var(--line);border-radius:13px;background:#fff;padding:11px 16px;min-height:46px;display:inline-flex;align-items:center;justify-content:center;gap:9px;font-size:14px;font-weight:600;transition:background .15s,transform .15s}.button:active:not(:disabled){transform:scale(.97)}.button:hover:not(:disabled){background:#f0f2eb}.skip-link{position:fixed;top:-80px;left:16px;z-index:10;padding:12px;background:#fff;color:var(--ink);border-radius:8px}.skip-link:focus{top:8px}.site-header{border-bottom:1px solid var(--line);padding:0 max(24px,env(safe-area-inset-left));background:var(--page)}.header-inner{max-width:1140px;margin:auto;height:86px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;gap:13px;align-items:center;text-decoration:none;color:var(--ink);font-size:27px;font-weight:700;letter-spacing:-1.1px;line-height:1.1}.brand-mark{width:38px;height:38px;color:var(--accent);overflow:visible}.brand-color{color:var(--green)}.brand-subtitle{display:block;font-size:10px;letter-spacing:.35px;font-weight:400;color:var(--muted);margin-top:6px}.header-note{font-size:12px;color:var(--muted);letter-spacing:.2px}.gallery-toggle{display:none}.app-layout{max-width:1188px;margin:0 auto;padding:32px 24px 0;display:grid;grid-template-columns:230px minmax(0,1fr);gap:36px}.book-sidebar{border-right:1px solid var(--line);padding-right:28px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:1.8px;color:var(--green);line-height:1.5}.book-heading h2{font-size:18px;letter-spacing:-.45px;margin:6px 0 8px}.book-heading>p{font-size:12px;color:var(--muted)}.gallery-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.book-sidebar .gallery-grid{grid-template-columns:1fr;margin-top:26px;gap:11px}.drawing-card{border:1px solid transparent;display:flex;gap:13px;align-items:center;min-height:78px;border-radius:13px;background:transparent;text-align:left;padding:8px;position:relative;transition:background .2s,border-color .2s}.drawing-card:hover{background:#eeeee6}.drawing-card.selected{background:#fff;border-color:#b8c5b0;box-shadow:0 3px 9px #263b2510}.drawing-card .thumb{display:block;height:62px;width:62px;background:#fcf9f0;border-radius:8px;flex:none;overflow:hidden}.thumb svg{width:100%;height:100%;pointer-events:none}.card-copy{display:flex;flex-direction:column;min-width:0;gap:5px}.card-title{font-weight:600;font-size:12px;line-height:1.35}.card-subtitle{font-size:10px;color:var(--muted);line-height:1.4}.card-progress{color:var(--green);font-size:10px}.sidebar-note{margin:32px 0 0 8px;display:flex;align-items:center;gap:12px;color:#6b7464}.sidebar-note svg{height:24px;width:24px;fill:none;stroke:#a4b09a;stroke-width:1.3}.sidebar-note p{font-size:11px;line-height:1.7}.drawing-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:23px;min-height:52px}.drawing-header h1{font-size:29px;font-weight:600;letter-spacing:-1px;margin-top:5px;line-height:1.2;outline:none}.export-button{background:var(--green);color:#fff;border-color:var(--green)}.export-button:hover:not(:disabled){background:#415b46}.export-button svg{width:18px;height:18px}.editor-grid{display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:28px;align-items:start}.drawing-column{min-width:0}.paper-card{border:1px solid #e2e4db;border-radius:19px;background:var(--paper);overflow:hidden;box-shadow:0 7px 26px #4a543508}.artwork{aspect-ratio:1;max-width:100%;padding:10px;overflow:hidden}.artwork>svg{width:100%;height:100%;display:block;overflow:visible;user-select:none;-webkit-user-select:none;touch-action:manipulation}.artwork [data-region]{cursor:crosshair;transition:fill .14s;outline:none}.artwork [data-region="background"]{stroke:none}.artwork [data-region]:focus-visible{stroke:#457cac;stroke-width:5;stroke-dasharray:6 4}.artwork.erase-mode [data-region]{cursor:cell}.paper-caption{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:15px 18px;border-top:1px solid #f0f0e9;font-size:10px;letter-spacing:.05px;color:#6a7266;line-height:1.4}.paper-caption>span:last-child{white-space:nowrap;color:var(--green);font-size:10px}.drawing-tools{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:16px}.mode-switch{display:flex;gap:4px;border:1px solid var(--line);background:#eeeee7;border-radius:13px;padding:3px}.tool{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:44px;min-height:44px;border:0;border-radius:10px;background:transparent;font-size:12px;font-weight:600}.tool svg{height:20px;width:20px}.mode-button{padding:0 14px}.mode-button.active{background:white;box-shadow:0 1px 5px #19231312;color:var(--green)}.tool:hover:not(:disabled){background:#e3e9df}.mode-button.active:hover{background:#fff}.history-tools{display:flex;gap:4px}.save-status{display:flex;align-items:center;justify-content:center;gap:6px;font-size:10px;color:#6a7266;min-height:34px;line-height:1.3;text-align:center}.status-dot{height:5px;width:5px;border-radius:50%;background:#91ab83;flex:none}.save-status.failed{color:#9c5944}.save-status.failed .status-dot{background:#b76d48}.palette-panel{padding:22px 19px 21px;background:#efefe7;border:1px solid #e7e8dd;border-radius:18px}.palette-heading{margin-bottom:20px}.palette-heading h2{font-size:15px;font-weight:600;letter-spacing:-.2px}.palette-heading>span{display:block;color:var(--muted);font-size:11px;margin-top:5px;min-height:15px}.swatches{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px 0;margin-left:-5px;margin-right:-5px}.swatch{border:0;background:transparent;border-radius:50%;width:44px;height:44px;max-width:100%;display:flex;align-items:center;justify-content:center;padding:5px;position:relative}.swatch::before{content:"";display:block;width:100%;height:100%;border-radius:50%;background:var(--swatch);border:1px solid #00000010;transition:transform .15s}.swatch:hover::before{transform:scale(1.1)}.swatch[aria-pressed="true"]::after{content:"";position:absolute;inset:0;border:1.5px solid var(--ink);border-radius:50%}.swatch .check{position:absolute;width:14px;height:14px;stroke:#fff;stroke-width:2.5;visibility:hidden}.swatch[aria-pressed="true"] .check{visibility:visible}.swatch.light .check{stroke:#495144}.custom-color{position:relative;min-height:57px;margin-top:18px;border-radius:10px;display:flex;align-items:center;gap:10px;cursor:pointer;font-size:11px;font-weight:600}.custom-color-icon{height:37px;width:37px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:conic-gradient(#e8ad98,#e4c989,#b9cb9f,#adc9d6,#c2abd3,#e8ad98);flex:none}.custom-color-icon>svg{width:22px;height:22px;border-radius:50%;padding:2px;background:#fbfaf6;stroke-width:1.5}.custom-value{display:block;font-size:9px;color:var(--muted);font-weight:400;margin-top:5px}.custom-color input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}.custom-color:focus-within{outline:3px solid #43709d;outline-offset:3px}.custom-color>.chevron{height:15px;width:15px;margin-left:auto;color:var(--muted)}.palette-divider{height:1px;background:#dddfd3;margin:15px 0}.clear-button{width:100%;font-size:11px;background:transparent;border:0;min-height:44px;padding:10px;color:#646e5f}.clear-button svg{height:17px;width:17px}.palette-hint{color:#68735f;font-size:11px;text-align:center;line-height:1.7;margin-top:16px}.site-footer{max-width:1188px;margin:36px auto 0;padding:0 24px max(26px,env(safe-area-inset-bottom));display:flex;justify-content:space-between;gap:15px;color:#626b5f;font-size:10px;line-height:1.6}.site-footer>span:first-child{font-style:italic}dialog{border:1px solid var(--line);border-radius:23px;background:var(--page);color:var(--ink);padding:28px;box-shadow:0 24px 90px #26332222;max-height:calc(100dvh - 40px);overscroll-behavior:contain}dialog::backdrop{background:#283b3259;backdrop-filter:blur(4px)}.gallery-dialog{width:590px;max-width:calc(100vw - 24px)}.dialog-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.dialog-header h2{font-size:23px;font-weight:600;letter-spacing:-.7px;line-height:1.25;margin-top:6px}.dialog-header>.tool{flex:none;margin:-5px -8px 0 0}.dialog-intro{font-size:12px;color:var(--muted);margin:13px 0 22px}.gallery-dialog .drawing-card{padding:10px;display:block;background:#fff;border-color:var(--line)}.gallery-dialog .drawing-card.selected{border-color:#7d9773}.gallery-dialog .thumb{width:100%;height:auto;aspect-ratio:1}.gallery-dialog .card-copy{padding:10px 2px 2px}.gallery-dialog .card-title{font-size:13px}.gallery-dialog .card-subtitle{font-size:10px}.clear-dialog{width:360px;max-width:calc(100vw - 32px);padding:28px;text-align:center}.clear-illustration{width:56px;height:56px;padding:13px;background:#e9eee3;color:var(--green);border-radius:18px;margin:0 auto 20px}.clear-illustration svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.clear-dialog h2{font-size:25px;letter-spacing:-.8px;font-weight:600}.clear-dialog p{font-size:13px;line-height:1.7;color:var(--muted);margin:13px 0 23px}.confirm-actions{display:grid;gap:9px}.confirm-actions .button{width:100%}.danger-button{background:#a65e4a;color:white;border-color:#a65e4a}.danger-button:hover:not(:disabled){background:#8c4d3b}.toast{position:fixed;bottom:max(22px,env(safe-area-inset-bottom));left:50%;transform:translate(-50%,12px);background:#354b3d;color:#fff;font-size:12px;line-height:1.5;padding:11px 18px;border-radius:12px;max-width:calc(100% - 32px);width:max-content;text-align:center;z-index:20;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;box-shadow:0 3px 15px #24302920}.toast.visible{opacity:1;transform:translate(-50%,0)}.noscript-note{position:fixed;bottom:0;left:0;right:0;background:#fff3d6;padding:20px;text-align:center;z-index:20}
@media(min-width:1400px){.app-layout{padding-top:32px}.editor-grid{grid-template-columns:minmax(0,1fr) 224px;gap:28px}.palette-panel{padding:25px}.swatches{gap:7px 0}}
@media(max-width:1130px) and (min-width:901px){.app-layout{grid-template-columns:188px minmax(0,1fr);gap:24px;padding:32px 20px 0}.book-sidebar{padding-right:18px}.drawing-card .thumb{width:48px;height:48px}.drawing-card{gap:9px;padding:7px}.card-title{font-size:11px}.editor-grid{grid-template-columns:minmax(0,1fr) 195px;gap:16px}.palette-panel{padding:19px 12px}.drawing-header h1{font-size:27px}}
@media(max-width:900px){.header-inner{height:77px;max-width:680px}.header-note{display:none}.gallery-toggle{display:flex}.book-sidebar{display:none}.app-layout{display:block;max-width:740px;padding:28px 24px 0}.editor-grid{grid-template-columns:minmax(0,1fr) 205px;gap:20px}.drawing-header h1{font-size:28px}.drawing-header{margin-bottom:19px}.brand{font-size:25px}.brand-mark{width:34px;height:34px}.site-footer{max-width:740px}.palette-panel{padding:20px 16px}}
@media(max-width:620px){.site-header{padding:0 max(18px,env(safe-area-inset-left))}.header-inner{height:72px}.brand{font-size:23px;gap:9px;letter-spacing:-.9px}.brand-mark{width:31px;height:31px}.brand-subtitle{font-size:8px;margin-top:4px;letter-spacing:.2px}.gallery-toggle{min-height:44px;padding:9px 12px;border-radius:12px;font-size:11px;gap:7px}.gallery-toggle svg{width:17px;height:17px}.app-layout{max-width:480px;padding:23px max(16px,env(safe-area-inset-left)) 0}.drawing-header{margin-bottom:17px;min-height:44px;gap:8px}.drawing-header .eyebrow{font-size:8px;letter-spacing:1.65px}.drawing-header h1{font-size:25px;letter-spacing:-.8px;margin-top:4px}.export-button{min-height:44px;padding:10px 12px;border-radius:12px;font-size:11px;gap:7px}.export-button svg{height:17px;width:17px}.editor-grid{grid-template-columns:minmax(0,1fr);gap:12px}.paper-card{border-radius:17px;box-shadow:0 5px 16px #4a543507}.artwork{padding:4px}.paper-caption{padding:11px 13px;font-size:9px;gap:4px}.paper-caption>span:last-child{font-size:9px}.drawing-tools{margin-top:11px;gap:4px}.mode-button{font-size:11px;padding:0 14px}.save-status{font-size:9px;min-height:27px}.palette-panel{padding:16px 15px 11px;border-radius:16px}.palette-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px;gap:8px}.palette-heading h2{font-size:13px}.palette-heading>span{font-size:10px;margin-top:0;min-height:0}.swatches{grid-template-columns:repeat(6,minmax(0,1fr));gap:2px 0;margin:0 -4px;justify-items:center}.swatch{width:44px;height:44px;padding:6px}.custom-color{margin-top:8px;padding:0 3px;min-height:48px;width:calc(100% - 129px);font-size:10px;gap:8px}.custom-color-icon{height:31px;width:31px}.custom-color>.chevron{display:none}.custom-value{font-size:8px;margin-top:3px}.palette-divider{display:none}.clear-button{display:flex;width:122px;min-height:44px;margin:-46px 0 0 auto;padding:9px 5px;font-size:10px}.clear-button svg{width:15px;height:15px}.palette-hint{display:none}.site-footer{max-width:480px;margin-top:22px;padding:0 20px max(23px,env(safe-area-inset-bottom));display:block;text-align:center;font-size:9px}.site-footer>span{display:block}.site-footer>span+span{margin-top:5px}.gallery-dialog{padding:21px 18px;border-radius:20px;max-height:calc(100dvh - 28px)}.dialog-header h2{font-size:23px;max-width:230px}.dialog-header .eyebrow{font-size:9px}.dialog-intro{font-size:11px;margin:11px 0 18px}.gallery-grid{gap:11px}.gallery-dialog .drawing-card{padding:8px}.gallery-dialog .card-title{font-size:11px}.gallery-dialog .card-subtitle{font-size:9px}.gallery-dialog .card-copy{padding-top:8px}}
@media(max-width:370px){.app-layout{padding-top:19px}.drawing-header h1{font-size:23px}.paper-caption{font-size:8px;padding-left:12px;padding-right:12px}.mode-button{padding:0 12px}.custom-color{width:calc(100% - 116px)}.clear-button{width:110px;font-size:9px}.palette-panel{padding-left:12px;padding-right:12px}.brand{font-size:21px}.gallery-toggle{padding:9px 10px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}}

/* Only the drawing captures gestures in Shade. The rest of the page scrolls. */
.artwork.shade-mode,.artwork.shade-mode>svg{touch-action:none}
.artwork.shade-mode{cursor:crosshair;-webkit-user-select:none;user-select:none}
.artwork [data-shade-region],.artwork [data-shade-outline]{pointer-events:none}
.drawing-tools{flex-wrap:wrap;gap:4px}
.drawing-tools>.mode-button{padding:0 8px}
.mode-switch .mode-button{padding:0 10px;gap:6px}
.brush-controls{margin-top:10px;padding:10px 13px;background:#eeeee7;border:1px solid var(--line);border-radius:13px;display:grid;grid-template-columns:auto minmax(70px,1fr);gap:0 12px;align-items:center}
.brush-controls[hidden]{display:none}
.brush-controls label{font-size:11px;font-weight:600;white-space:nowrap}
.brush-controls output{display:inline-block;min-width:22px;text-align:right;color:var(--green)}
.brush-controls input{width:100%;min-width:0;min-height:44px;margin:0;accent-color:var(--green)}
.brush-controls p{grid-column:1/-1;font-size:10px;line-height:1.5;color:var(--muted)}
@media(max-width:620px){.drawing-tools>.mode-button{font-size:11px;gap:5px}.paper-caption{align-items:flex-start}.paper-caption>span:first-child{max-width:75%}}
@media(max-width:370px){.drawing-tools .mode-button svg{display:none}.mode-switch .mode-button{padding:0 10px}.drawing-tools>.mode-button{padding:0 7px}}