:root{--bg-top:#fff6d6;--bg-bottom:#ffdba6;--surface:#fffbf0c7;--surface-strong:#fff8e2f5;--ink:#52331b;--muted:#8f6a49;--accent:#ff8f4f;--accent-deep:#f96d3d;--lime:#7dc86d;--sky:#78c6f4;--berry:#f26f9d;--shadow:0 22px 60px #8a57262e;--paper-shadow:0 18px 45px #78511f33}*{box-sizing:border-box}html{background:radial-gradient(circle at top left, #ffffffe6, transparent 28%), radial-gradient(circle at 82% 18%, #ffc67080, transparent 24%), linear-gradient(180deg, var(--bg-top), var(--bg-bottom));min-height:100%}body{min-height:100vh;color:var(--ink);margin:0;font-family:Noto Sans SC,Microsoft YaHei,sans-serif}button,input,select{font:inherit}button{cursor:pointer;border:0}#app{min-height:100vh}.app-shell{position:relative;overflow:hidden auto}.app-shell:before,.app-shell:after{content:"";pointer-events:none;z-index:-1;position:fixed;inset:auto}.app-shell:before{filter:blur(12px);background:#ffffff61;border-radius:48% 52% 60% 40%;width:360px;height:360px;top:80px;left:-80px}.app-shell:after{filter:blur(8px);background:#ffab734d;border-radius:50%;width:300px;height:300px;bottom:60px;right:-60px}.page{width:min(1200px,100vw - 32px);margin:0 auto;padding:28px 0 44px}.studio-page{width:min(1380px,100vw - 20px);padding-top:18px}.hero{grid-template-columns:1.15fr .85fr;align-items:stretch;gap:24px;margin-bottom:26px;display:grid;position:relative}.hero-card,.intro-card,.gallery,.studio-layout,.panel{background:var(--surface);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:var(--shadow);border:3px solid #ffffff80;border-radius:32px}.hero-card{padding:36px 34px;position:relative;overflow:hidden}.hero-card:before{content:"";background:#ffcc8259;border-radius:50%;width:240px;height:240px;position:absolute;top:-70px;right:-40px}.eyebrow{color:var(--muted);background:#ffffffb8;border-radius:999px;align-items:center;gap:8px;margin-bottom:14px;padding:8px 14px;font-size:14px;font-weight:700;display:inline-flex}.hero-title{letter-spacing:1px;margin:0 0 14px;font-family:Ma Shan Zheng,KaiTi,cursive;font-size:clamp(42px,6vw,74px);line-height:.92}.hero-title span{color:var(--accent-deep);display:block}.hero-copy{max-width:32rem;color:var(--muted);margin:0;font-size:18px;line-height:1.65}.hero-stats{flex-wrap:wrap;gap:12px;margin-top:22px;display:flex}.hero-stats li{background:#ffffffa6;border-radius:18px;padding:12px 16px;font-weight:700;list-style:none}.intro-card{align-content:center;gap:16px;padding:26px;display:grid}.intro-card h2,.section-title,.panel-title,.studio-title{letter-spacing:.5px;margin:0;font-family:Ma Shan Zheng,KaiTi,cursive}.intro-card h2{font-size:34px}.intro-card p,.section-copy,.panel-copy{color:var(--muted);margin:0;line-height:1.7}.crayon-strip{flex-wrap:wrap;gap:12px;display:flex}.crayon{border-radius:16px 16px 10px 10px;width:44px;height:120px;position:relative;box-shadow:inset 0 -16px #ffffff3d}.crayon:before{content:"";filter:brightness(.95);border-bottom:22px solid;border-left:22px solid #0000;border-right:22px solid #0000;width:0;height:0;margin:auto;position:absolute;inset:-18px 0 auto}.section-head{justify-content:space-between;align-items:end;gap:16px;margin:18px 0;display:flex}.section-title{font-size:36px}.gallery{padding:18px}.home-gallery{box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;background:0 0;border:0;padding:12px}.home-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px}.gallery-grid{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:18px;display:grid}.animal-card{color:inherit;text-align:left;background:#fffc;border-radius:24px;gap:14px;padding:16px;transition:transform .18s,box-shadow .18s;display:grid;position:relative;box-shadow:0 16px 30px #a471241f}.animal-card:hover{transform:translateY(-5px)rotate(-1deg);box-shadow:0 20px 35px #a4712429}.animal-card-home{background:#fffcf5e6;border-radius:30px;padding:10px}.animal-card-home .animal-thumb{aspect-ratio:.95;border-radius:24px}.animal-thumb{aspect-ratio:1;background:linear-gradient(135deg,#fff4d9fa,#ffe8c4e6);border-radius:20px;place-items:center;display:grid;overflow:hidden}.animal-thumb img{object-fit:contain;mix-blend-mode:multiply;width:100%;height:100%}.animal-meta{justify-content:space-between;align-items:center;gap:12px;display:flex}.animal-name{margin:0;font-size:22px;font-weight:800}.animal-chip{color:#8a621a;background:#fff6cc;border-radius:999px;padding:7px 12px;font-size:13px;font-weight:700}.studio-layout{box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;background:0 0;border:0;grid-template-columns:minmax(0,1.7fr) 152px;gap:22px;padding:0;display:grid}.studio-main{gap:18px;min-width:0;display:grid}.canvas-panel{background:0 0;border-radius:0;flex-direction:column;min-height:70vh;padding:18px 18px 10px;display:flex}.mobile-palette{display:none}.mobile-palette-head{gap:6px;margin-bottom:12px;display:grid}.back-button,.ghost-button,.cta-button{border-radius:999px;padding:12px 18px;font-weight:800;transition:transform .16s,box-shadow .16s}.back-button,.ghost-button{color:var(--ink);background:#ffffffbf}.cta-button{color:#fff;background:linear-gradient(#ffa75d,#ff7f47);box-shadow:0 14px 24px #f96d3d3d}.back-button:hover,.ghost-button:hover,.cta-button:hover{transform:translateY(-2px)}.studio-title{font-size:clamp(34px,5vw,56px)}.studio-subtitle{color:var(--muted);margin:4px 0 0}.drawing-stage{background:linear-gradient(#fffef7,#fbf2d9);border-radius:22px;flex:auto;min-height:72vh;position:relative;overflow:hidden;box-shadow:0 24px 40px #7953272e,inset 0 0 0 1px #af884e1a}.paper-grid{opacity:.5;background-image:linear-gradient(#c3965c14 1px,#0000 1px),linear-gradient(90deg,#c3965c14 1px,#0000 1px);background-size:28px 28px;position:absolute;inset:0}.paper-tape{z-index:3;background:#f2e0b1c7;width:80px;height:24px;position:absolute;top:14px;box-shadow:0 4px 8px #0000000f}.paper-tape-left{left:18px;transform:rotate(-8deg)}.paper-tape-right{right:18px;transform:rotate(7deg)}.stage-image,.stage-paint{width:100%;height:100%;position:absolute;inset:0}.drawing-surface{place-items:center;padding:22px;display:grid;position:absolute;inset:0}.drawing-artboard{border-radius:18px;width:100%;max-width:100%;height:100%;max-height:100%;position:relative;overflow:hidden;box-shadow:0 18px 36px #79532714,inset 0 0 0 1px #af884e14}.stage-paint{touch-action:none;cursor:crosshair}.stage-image{object-fit:fill;pointer-events:none;mix-blend-mode:multiply}.sidebar{align-content:start;gap:14px;display:grid}.panel,.tool-tray{background:linear-gradient(#b58143f2,#8a5a26f2);border:0;border-radius:26px;padding:16px;box-shadow:inset 0 2px #ffffff29,0 16px 28px #5c391242}.panel-title{text-align:center;margin-bottom:8px;font-size:28px}.tool-rack{position:sticky;top:18px}.tool-stack{gap:4px;display:grid}.tool-row{grid-template-columns:1fr;display:grid}.tool-row-colors,.tool-row-size,.tool-row-actions{padding:1px 0}.pencil-column,.pencil-row{gap:6px;display:grid}.pencil-column{grid-template-columns:1fr;grid-auto-rows:minmax(0,1fr)}.pencil-row{grid-template-columns:repeat(12,minmax(0,1fr));align-items:stretch}.tool-switcher{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:16px;display:grid}.tool-button,.swatch{border-radius:18px;transition:transform .16s,box-shadow .16s}.tool-button{color:var(--ink);background:#fffaf1e0;border:2px solid #0000;padding:14px 16px;font-weight:800}.icon-button,.icon-tool{place-items:center;display:grid}.icon-button svg,.icon-tool svg{fill:none;stroke:currentColor;stroke-width:2.2px;stroke-linecap:round;stroke-linejoin:round;width:28px;height:28px}.icon-button{min-width:56px;min-height:56px;padding:0}.icon-tool{width:100%;min-height:64px;padding:0}.tool-button.active{background:#ffede0fa;border-color:#ff864980;box-shadow:0 10px 18px #45270824}.palette-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:16px;display:grid}.palette-grid-mobile{margin-top:0}.swatch{border:3px solid #ffffffa6;min-height:64px;position:relative;box-shadow:0 12px 24px #9f65231f}.swatch.active:after{content:"";border:3px solid #ffffffeb;border-radius:12px;position:absolute;inset:10px}.color-swatch{border-radius:10px;width:100%;min-height:36px}.color-swatch.active{transform:none}.slider-group{justify-items:center;gap:10px;margin-top:0;display:grid}.size-slider{grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:8px;width:100%;min-height:40px;display:grid}.size-slider-label{color:#fff6e8e0;font-size:12px;font-weight:700;line-height:1}.size-range{appearance:none;background:0 0;width:100%;margin:0}.size-range::-webkit-slider-runnable-track{background:#fff4e161;border-radius:999px;height:8px}.size-range::-webkit-slider-thumb{appearance:none;background:linear-gradient(#ffd2ae,#ff9d5c);border-radius:50%;width:18px;height:18px;margin-top:-5px;box-shadow:0 6px 14px #4527083d}.size-range::-moz-range-track{background:#fff4e161;border-radius:999px;height:8px}.size-range::-moz-range-thumb{background:linear-gradient(#ffd2ae,#ff9d5c);border:0;border-radius:50%;width:18px;height:18px;box-shadow:0 6px 14px #4527083d}.size-preview{background:#fffaf1eb;border-radius:50%;place-items:center;width:30px;height:30px;display:grid;box-shadow:0 8px 14px #4527081f}.size-preview-dot{background:#7e5938;border-radius:50%}.action-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%;margin-top:8px;display:grid}.full-row-button{width:100%}.empty-state{text-align:center;color:var(--muted);padding:40px 24px}.loading{text-align:center;color:var(--muted);padding:48px 24px;font-size:18px}.tip-panel{padding-top:14px;padding-bottom:14px}.hidden{display:none!important}@media (width<=960px){html.home-mode,html.home-mode body,html.home-mode #app{width:100vw;height:auto;min-height:100vh;overflow:hidden auto}html.home-mode body{position:static}html.home-mode .app-shell-home{width:100%;min-height:100vh;position:static;overflow:hidden auto;transform:none}html.home-mode .app-shell-home .page{width:calc(100vw - 16px);min-height:auto;padding:16px 8px}html.home-mode .app-shell-home .home-gallery{padding:8px}html.home-mode .app-shell-home .home-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}.app-shell-studio{width:100%;min-height:100vh;position:relative;overflow:hidden auto;transform:none}.page,.studio-page{width:calc(100vw - 14px);min-height:auto;padding:8px 0 16px}.studio-page{height:auto}.studio-layout{grid-template-columns:minmax(0,1fr);gap:10px;height:auto;min-height:auto;padding:0}.studio-main{grid-template-rows:auto minmax(0,1fr);gap:8px;height:auto;min-height:0}.mobile-palette{z-index:8;border-radius:16px;padding:6px 8px;display:block;position:sticky;top:6px}.desktop-palette{display:none}.canvas-panel,.panel,.tool-tray{border-radius:16px;padding:6px}.palette-grid-mobile{grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:24px;justify-content:stretch;gap:3px;overflow:hidden}.palette-grid-mobile .swatch{border-radius:8px;min-height:24px}.canvas-panel{min-width:0;min-height:auto;padding:0;overflow:hidden}.drawing-stage{aspect-ratio:auto;border-radius:16px;height:min(72vh,560px);min-height:min(72vh,560px)}.sidebar{align-self:auto;gap:6px;width:100%;position:static}.tool-stack{grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch;gap:6px}.tool-row{min-width:0}.tool-row-size,.tool-row-actions{grid-column:span 2}.tool-switcher,.action-row{gap:6px}.tool-button,.back-button,.ghost-button,.cta-button{padding:8px;font-size:12px}.icon-button{min-width:40px;min-height:40px;padding:0}.icon-tool{min-height:40px}.icon-button svg,.icon-tool svg{width:16px;height:16px}.size-slider{gap:6px;min-height:34px}.size-slider-label{font-size:11px}.size-preview{width:24px;height:24px}.paper-tape{width:44px;height:14px;top:8px}.paper-tape-left{left:10px}.paper-tape-right{right:10px}}@media (width<=640px){.page,.studio-page{width:calc(100vw - 10px);padding:4px 0 10px}.studio-layout{grid-template-columns:minmax(0,1fr);gap:8px;min-height:auto;padding:0}.gallery,.studio-layout{padding-left:0;padding-right:0}.mobile-palette{padding:4px 6px;top:4px}.palette-grid-mobile{grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:20px;gap:2px}.palette-grid-mobile .swatch{min-height:20px}.canvas-panel,.panel,.tool-tray{padding:4px}.drawing-stage{height:min(74vh,560px);min-height:min(74vh,560px)}.swatch.active:after{inset:4px}.icon-button{min-width:34px;min-height:34px}.icon-tool{min-height:34px}.icon-button svg,.icon-tool svg{width:14px;height:14px}.tool-switcher,.action-row{grid-template-columns:1fr}.palette-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.size-slider{gap:4px;min-height:30px}.size-slider-label{font-size:10px}.size-preview{width:20px;height:20px}.sidebar{gap:6px;width:100%}.tool-stack{grid-template-columns:repeat(2,minmax(0,1fr))}}