body{margin:0}:root{--wall:#d9d2c5;--wall-deep:#cfc6b6;--ink:#1c1b19;--ink-soft:#5c574e;--paper:#f4efe6;--paper-edge:#e4ddd0;--frame:#2a2926;--frame-inner:#3d3b37;--mat:#ebe4d8;--accent:#c4a000;--accent-ink:#6b5800;--shadow-art:0 28px 60px #1c1b1947;--font-display:"Fraunces", "Palatino Linotype", Georgia, serif;--font-body:"DM Sans", "Avenir Next", "Segoe UI", sans-serif;--radius:4px;--touch:44px}*{box-sizing:border-box}html,body,#root{height:100%;min-height:100%;margin:0}body{font-family:var(--font-body);color:var(--ink);background:var(--wall);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.app{isolation:isolate;flex-direction:column;gap:14px;max-width:1240px;min-height:100%;margin:0 auto;padding:16px 16px 22px;display:flex;position:relative}.wall{z-index:-1;background:radial-gradient(ellipse 70% 55% at 50% 18%, #fffcf58c, transparent 62%), radial-gradient(ellipse 90% 70% at 50% 100%, #5a4e3a1f, transparent 55%), linear-gradient(180deg, #e4ddd0 0%, var(--wall) 42%, var(--wall-deep) 100%);position:fixed;inset:0}.wall:after{content:"";opacity:.07;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");position:absolute;inset:0}.top-bar{justify-content:space-between;align-items:flex-end;gap:12px;display:flex}.brand-kicker{letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 2px;font-size:.7rem;font-weight:700}.brand h1{font-family:var(--font-display);letter-spacing:-.02em;color:var(--ink);margin:0;font-size:clamp(1.85rem,4.5vw,2.45rem);font-weight:600;line-height:1}.page-btn{min-height:var(--touch);border-radius:var(--radius);cursor:pointer;font-family:var(--font-body);color:var(--ink);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#f4efe6b8;border:1px solid #1c1b192e;flex-direction:column;align-items:flex-end;gap:2px;padding:8px 14px;display:flex}.page-btn:active{transform:translateY(1px)}.page-btn-meta{letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);font-size:.68rem;font-weight:700}.page-btn-title{font-family:var(--font-display);font-size:1.05rem;font-weight:600}.main{flex-direction:column;flex:1;gap:14px;min-height:0;display:flex}.studio{flex-direction:column;flex:1;gap:10px;min-height:0;display:flex}.frame{background:linear-gradient(145deg, #3a3834 0%, var(--frame) 40%, #1a1917 100%);box-shadow:var(--shadow-art);border-radius:2px;padding:12px}.frame-mat{background:var(--mat);border:1px solid #1c1b1914;padding:14px 14px 10px}.plate{color:var(--ink-soft);flex-wrap:wrap;align-items:baseline;gap:6px 8px;margin:0;padding:0 4px;font-size:.92rem;display:flex}.plate-title{font-family:var(--font-display);color:var(--ink);font-size:1.05rem;font-weight:600}.plate-sep{opacity:.45}.canvas-stage{flex-direction:column;gap:8px;min-height:0;display:flex}.canvas-viewport{touch-action:none;background:#fff;border:1px solid #1c1b190f;place-items:center;min-height:min(52vh,480px);display:grid;position:relative;overflow:hidden}.canvas-transform{transform-origin:50%;place-items:center;max-width:100%;max-height:100%;transition:transform 50ms linear;display:grid}.coloring-canvas{cursor:crosshair;touch-action:none;width:auto;max-width:min(100%,900px);height:auto;max-height:min(52vh,480px);display:block}.zoom-bar{justify-content:center;align-items:center;gap:8px;padding-top:2px;display:flex}.tool-btn{min-width:var(--touch);border-radius:var(--radius);background:var(--paper);height:40px;font-family:var(--font-display);color:var(--ink);cursor:pointer;border:1px solid #1c1b1933;font-size:1.25rem;font-weight:600}.tool-btn-wide{width:auto;font-family:var(--font-body);letter-spacing:.04em;text-transform:uppercase;padding:0 14px;font-size:.85rem;font-weight:700}.zoom-label{text-align:center;min-width:3.2rem;color:var(--ink-soft);font-size:.85rem;font-weight:700}.toolbar{background:var(--paper);border:1px solid var(--paper-edge);border-radius:var(--radius);flex-direction:column;gap:14px;padding:14px;display:flex;box-shadow:0 10px 28px #1c1b1914}.tool-head{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;display:flex}.active-color{align-items:center;gap:10px;display:flex}.tool-label{letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);font-size:.68rem;font-weight:700;display:block}.active-color .tool-label{min-width:3.5rem}.selected-swatch{border:1px solid #1c1b1959;border-radius:2px;flex-shrink:0;width:52px;height:52px;box-shadow:inset 0 0 0 1px #ffffff59}.selected-swatch-light{box-shadow:inset 0 0 0 1px #1c1b1933,0 0 0 1px #1c1b1914}.actions{gap:8px;display:flex}.action-btn{min-height:var(--touch);border:1px solid var(--ink);border-radius:var(--radius);background:var(--ink);color:var(--paper);font-family:var(--font-body);letter-spacing:.02em;cursor:pointer;padding:0 16px;font-size:.9rem;font-weight:700}.action-btn:disabled{opacity:.35;cursor:not-allowed}.action-btn:not(:disabled):active{transform:translateY(1px)}.action-ghost{color:var(--ink);background:0 0}.shade-panel{border-top:1px solid var(--paper-edge);flex-direction:column;gap:10px;padding-top:4px;display:flex}.shade-head{justify-content:space-between;align-items:baseline;gap:8px;display:flex}.shade-value{font-family:var(--font-display);color:var(--ink);font-size:1rem;font-weight:600}.shade-chips{grid-template-columns:repeat(5,1fr);gap:8px;display:grid}.shade-chip{aspect-ratio:1;cursor:pointer;border:1px solid #1c1b192e;border-radius:2px;min-height:48px}.shade-chip:active{transform:scale(.96)}.shade-chip-active{outline:2px solid var(--ink);outline-offset:2px;border-color:var(--ink)}.shade-chip-light{box-shadow:inset 0 0 0 1px #1c1b191f}.shade-slider-label{flex-direction:column;gap:6px;display:flex}.shade-slider-ends{letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);justify-content:space-between;font-size:.72rem;font-weight:700;display:flex}.shade-slider{appearance:none;background:linear-gradient(90deg, #fff 0%, var(--accent) 48%, #1c1b19 100%);cursor:pointer;border:1px solid #1c1b1933;border-radius:0;outline:none;width:100%;height:10px}.shade-slider::-webkit-slider-thumb{appearance:none;background:var(--paper);border:2px solid var(--ink);cursor:grab;border-radius:2px;width:28px;height:28px;box-shadow:0 2px 6px #1c1b1933}.shade-slider::-moz-range-thumb{background:var(--paper);border:2px solid var(--ink);cursor:grab;border-radius:2px;width:28px;height:28px;box-shadow:0 2px 6px #1c1b1933}.palette-wrap{border-top:1px solid var(--paper-edge);flex-direction:column;gap:8px;padding-top:12px;display:flex}.palette{-webkit-overflow-scrolling:touch;grid-template-columns:repeat(auto-fill,minmax(36px,1fr));gap:6px;max-height:min(38vh,360px);padding:2px;display:grid;overflow-y:auto}.swatch{aspect-ratio:1;cursor:pointer;border:1px solid #1c1b191f;border-radius:2px;min-height:36px}.swatch:active{transform:scale(.94)}.swatch-active{outline:2px solid var(--ink);outline-offset:2px;border-color:var(--ink);z-index:1}.swatch-light{box-shadow:inset 0 0 0 1px #1c1b1926}.gallery-backdrop{z-index:50;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#1c1b198c;place-items:center;padding:16px;display:grid;position:fixed;inset:0}.gallery{background:var(--paper);border:1px solid var(--paper-edge);border-radius:var(--radius);width:min(560px,100%);max-height:min(80vh,640px);box-shadow:var(--shadow-art);padding:18px;overflow:auto}.gallery-head{justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:16px;display:flex}.gallery-head h2{font-family:var(--font-display);letter-spacing:-.02em;margin:0;font-size:1.6rem;font-weight:600}.gallery-grid{gap:12px;margin:0;padding:0;list-style:none;display:grid}.gallery-card{border-radius:var(--radius);cursor:pointer;text-align:left;width:100%;font-family:var(--font-body);color:var(--ink);background:0 0;border:1px solid #0000;flex-direction:column;align-items:flex-start;gap:6px;padding:0;display:flex}.gallery-thumb{background:var(--frame);width:100%;padding:10px;box-shadow:0 8px 20px #1c1b192e}.gallery-thumb img{background:#fff;width:100%;height:auto;display:block}.gallery-card-active .gallery-thumb{outline:2px solid var(--accent);outline-offset:2px}.gallery-title{font-family:var(--font-display);margin-top:2px;font-size:1.15rem;font-weight:600}.gallery-blurb{color:var(--ink-soft);font-size:.9rem}@media (width>=900px){.app{padding:22px 24px 28px}.main{flex-direction:row;align-items:stretch}.studio{flex:1.45}.toolbar{flex:.9;align-self:stretch;max-width:360px}.palette{grid-template-columns:repeat(8,1fr);max-height:min(52vh,460px)}.canvas-viewport{min-height:min(64vh,580px)}.coloring-canvas{max-height:min(64vh,580px)}.frame{padding:16px}.frame-mat{padding:18px 18px 12px}}