:root{--font-ui: "IBM Plex Sans", "Avenir Next", "Trebuchet MS", sans-serif;--font-display: "Baskerville", "Iowan Old Style", serif;--mobile-dock-collapsed-height: 104px;--bg: #f4efe5;--bg-strong: #e9decb;--surface: rgba(255, 251, 244, .76);--surface-strong: rgba(250, 243, 232, .92);--surface-border: rgba(22, 54, 41, .16);--text: #173126;--muted: #5f6f65;--accent: #bf6b2c;--accent-strong: #8f4a18;--accent-soft: #d9a461;--shadow: 0 18px 60px rgba(48, 44, 28, .12)}:root[data-theme=dark]{--bg: #13221d;--bg-strong: #1e3027;--surface: rgba(24, 39, 32, .82);--surface-strong: rgba(28, 46, 38, .95);--surface-border: rgba(236, 213, 175, .14);--text: #f4efe5;--muted: #c3b8a8;--accent: #eca44a;--accent-strong: #f2bf67;--accent-soft: #604128;--shadow: 0 20px 60px rgba(0, 0, 0, .28)}*{box-sizing:border-box}html,body,#app{min-height:100%}body{margin:0;font-family:var(--font-ui);color:var(--text);overscroll-behavior-y:none;background:radial-gradient(circle at top left,rgba(191,107,44,.18),transparent 36%),radial-gradient(circle at bottom right,rgba(61,143,109,.18),transparent 32%),linear-gradient(160deg,var(--bg),var(--bg-strong))}body:before{content:"";position:fixed;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:28px 28px;pointer-events:none}button,input,select,textarea{font:inherit}button{cursor:pointer;touch-action:manipulation}button:disabled{cursor:not-allowed}.app-shell{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;padding:20px;gap:18px}.app-header,.app-sidebar,.canvas-frame,.stats-card,.toolbar,.modal-window,.panel-form{-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:var(--surface);border:1px solid var(--surface-border);box-shadow:var(--shadow)}.app-header{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;border-radius:28px;padding:18px 22px;animation:rise-in .45s ease both}.app-brand{display:flex;flex-direction:column;gap:4px}.app-brand strong{font-family:var(--font-display);font-size:clamp(1.7rem,3vw,2.4rem);letter-spacing:.02em}.app-brand__eyebrow{color:var(--muted);text-transform:uppercase;letter-spacing:.16em;font-size:.72rem}.app-header-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px}.app-version,.app-save-status{display:inline-flex;align-items:center;min-height:32px;padding:6px 10px;border-radius:999px;color:var(--muted);font-size:.82rem;background:#ffffff6b;border:1px solid rgba(22,54,41,.08)}.app-save-status{font-weight:700}:root[data-theme=dark] .app-version,:root[data-theme=dark] .app-save-status{background:#ffffff0f;border-color:#ecd5af14}.app-body{display:grid;grid-template-columns:minmax(240px,280px) 1fr minmax(220px,260px);grid-template-areas:"toolbar stage inspector";gap:18px;flex:1;min-height:0}.app-mobile-dock{display:none}.app-sidebar--toolbar{grid-area:toolbar}.canvas-stage{grid-area:stage}.app-sidebar--inspector{grid-area:inspector}.app-sidebar,.canvas-stage{animation:rise-in .52s ease both}.app-sidebar{border-radius:24px;padding:18px}.canvas-stage{display:flex;flex-direction:column;min-height:60vh}.canvas-frame{position:relative;overflow:hidden;min-height:100%;border-radius:28px;padding:16px;overscroll-behavior:contain;background:linear-gradient(135deg,#16362914,#bf6b2c1f),var(--surface-strong)}.paint-surface{width:100%;height:min(72vh,900px);display:block;border-radius:18px;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;background:linear-gradient(45deg,rgba(22,54,41,.08) 25%,transparent 25%,transparent 75%,rgba(22,54,41,.08) 75%),linear-gradient(45deg,rgba(22,54,41,.08) 25%,transparent 25%,transparent 75%,rgba(22,54,41,.08) 75%);background-position:0 0,12px 12px;background-size:24px 24px}.paint-surface.is-hover-paint-active{cursor:crosshair;box-shadow:inset 0 0 0 2px #bf6b2c73}.toolbar{display:flex;flex-direction:column;gap:16px;border-radius:22px;padding:16px}.toolbar-group{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.toolbar-group--commands{grid-template-columns:1fr}.toolbar-button,.panel-button,.modal-close,.swatch-button{border:0;border-radius:16px;padding:12px 14px;background:#ffffffb8;color:var(--text);transition:transform .14s ease,background .14s ease,color .14s ease}:root[data-theme=dark] .toolbar-button,:root[data-theme=dark] .panel-button,:root[data-theme=dark] .modal-close,:root[data-theme=dark] .swatch-button{background:#ffffff14}.toolbar-button:disabled,.panel-button:disabled,.modal-close:disabled,.swatch-button:disabled{opacity:.52;transform:none}.toolbar-button:hover,.panel-button:hover,.modal-close:hover,.swatch-button:hover{transform:translateY(-1px)}.toolbar-button.is-active,.panel-button--primary{background:linear-gradient(135deg,var(--accent),var(--accent-strong));color:#fff7ef}.toolbar-hover-chip{border-radius:999px;padding:10px 12px;text-align:center;background:#16362914;color:var(--muted)}.toolbar-hover-chip.is-active{background:#bf6b2c2e;color:var(--text)}.swatch-panel{display:grid;gap:12px;margin-bottom:18px}.swatch-button{display:grid;gap:4px;min-height:68px;font-weight:700;text-align:left}.swatch-button__label,.swatch-button__value,.swatch-button__hint{display:block}.swatch-button__value{font-size:.84rem;font-weight:600;opacity:.9}.swatch-button__hint{font-size:.72rem;color:var(--muted);font-weight:600}.swatch-swap-button{width:100%;justify-content:center;font-weight:700}.mobile-dock{display:grid;gap:8px;padding:10px;border-radius:20px;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:var(--surface);border:1px solid var(--surface-border);box-shadow:var(--shadow)}.mobile-dock__summary{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center}.mobile-dock__summary-chip{display:inline-flex;align-items:center;min-height:34px;padding:7px 11px;border-radius:999px;background:#ffffff8f;border:1px solid rgba(22,54,41,.08);color:var(--text);font-size:.8rem;font-weight:700}:root[data-theme=dark] .mobile-dock__summary-chip{background:#ffffff14;border-color:#ecd5af14}.mobile-dock__summary-swatch{border:0;border-radius:16px;min-width:96px;min-height:48px;padding:8px 10px;display:grid;align-content:end;text-align:left;color:#fff7ef;text-shadow:0 1px 2px rgba(0,0,0,.28)}.mobile-dock__summary-swatch-label{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em}.mobile-dock__tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.mobile-dock__tab{min-height:42px}.mobile-dock__tab.is-active{background:linear-gradient(135deg,var(--accent),var(--accent-strong));color:#fff7ef}.mobile-dock__sheet-shell{position:fixed;inset:0;z-index:13;pointer-events:none}.mobile-dock__sheet-backdrop{position:fixed;inset:0 0 calc(var(--mobile-dock-collapsed-height) + env(safe-area-inset-bottom)) 0;border:0;padding:0;background:#161c1629;pointer-events:auto}.mobile-dock__sheet{position:fixed;left:10px;right:10px;bottom:calc(var(--mobile-dock-collapsed-height) + 8px + env(safe-area-inset-bottom));display:grid;gap:8px;padding:10px;border-radius:20px;background:var(--surface-strong);border:1px solid var(--surface-border);box-shadow:var(--shadow);pointer-events:auto}.mobile-dock__sheet-body{display:grid;gap:8px;max-height:min(38dvh,300px);overflow:auto}.mobile-dock__panel-bar{display:flex;align-items:center;justify-content:space-between;gap:8px}.mobile-dock__panel-title{color:var(--muted);font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.mobile-dock__close{min-height:34px;padding:6px 10px;border-radius:999px}.mobile-dock__panel{display:grid;gap:8px}.mobile-dock__panel[hidden]{display:none}.mobile-dock__button-grid{display:grid;gap:8px}.mobile-dock__button-grid--tools,.mobile-dock__button-grid--actions{grid-template-columns:repeat(3,minmax(0,1fr))}.mobile-dock__tool-button,.mobile-dock__action-button,.mobile-dock__wide-button,.mobile-dock__swap-button{min-height:44px}.mobile-dock__wide-button{width:100%}.mobile-dock__swatches{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:8px;align-items:stretch}.mobile-dock__color-button{min-height:60px}.mobile-dock__swap-button{min-width:64px;font-weight:700}.mobile-dock__section-title{margin:0;color:var(--muted);font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.mobile-dock__note{margin:0;color:var(--muted);font-size:.76rem}.floating-palette{position:fixed;z-index:35;width:min(340px,calc(100vw - 24px));border-radius:22px;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:var(--surface-strong);border:1px solid var(--surface-border);box-shadow:var(--shadow);touch-action:none}.floating-palette.is-hidden{display:none}.floating-palette__header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-bottom:1px solid var(--surface-border);cursor:move;-webkit-user-select:none;user-select:none}.floating-palette__heading{display:grid;gap:2px}.floating-palette__subtitle,.floating-palette__section-title{color:var(--muted);font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.floating-palette__controls{display:flex;gap:8px}.floating-palette__control{min-height:36px;padding:8px 10px}.floating-palette__body{display:grid;gap:14px;padding:14px}.floating-palette__section{display:grid;gap:10px}.floating-palette__section-title{margin:0}.floating-palette__current-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.floating-palette__recent-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.floating-palette__color{min-height:72px;border:1px solid rgba(22,54,41,.18);border-radius:16px;padding:10px;display:grid;align-content:end;text-align:left;color:#fff7ef;text-shadow:0 1px 2px rgba(0,0,0,.28)}.floating-palette__color-label,.floating-palette__color-value,.floating-palette__color-hint{display:block}.floating-palette__color-value{font-size:.78rem;font-weight:700}.floating-palette__color-hint{font-size:.68rem;opacity:.9}.floating-palette__empty{margin:0;color:var(--muted);font-size:.84rem}.color-workspace{gap:14px}.color-workspace__hint{margin:0;color:var(--muted);font-size:.86rem}.color-picker-frame{position:relative}.color-picker{position:relative;display:block;width:100%;aspect-ratio:1 / 1;min-height:220px;padding:0;border-radius:20px;overflow:hidden;border:1px solid rgba(22,54,41,.18);background:linear-gradient(to top,#000,#0000),linear-gradient(to right,#fff,red);touch-action:none;cursor:crosshair}.color-picker:after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#ffffff14,#00000014);pointer-events:none}.color-picker__thumb{position:absolute;width:18px;height:18px;margin-left:-9px;margin-top:-9px;border-radius:999px;border:2px solid rgba(255,255,255,.95);box-shadow:0 0 0 2px #0000008c;pointer-events:none}.color-picker:focus-visible,.palette-slot:focus-visible,.swatch-button:focus-visible{outline:3px solid rgba(191,107,44,.75);outline-offset:2px}.stats-card{display:grid;gap:12px;padding:16px;border-radius:18px;margin-bottom:16px}.stat-item{display:grid;gap:4px;padding:10px 12px;border-radius:14px;background:#ffffff6b;border:1px solid rgba(22,54,41,.08)}:root[data-theme=dark] .stat-item{background:#ffffff0a;border-color:#ecd5af14}.stat-label{color:var(--muted);font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.stat-value{font-size:.92rem;font-weight:700;line-height:1.3}.limiter-action-button{width:100%}.modal-host{position:fixed;inset:0;pointer-events:none}.modal-shell{position:fixed;inset:0;background:#161c162e;pointer-events:auto}.modal-window{position:absolute;min-width:280px;max-width:min(92vw,720px);max-height:min(88dvh,760px);border-radius:22px;overflow:hidden;display:flex;flex-direction:column}.modal-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 16px;background:#1636291a;cursor:move}.modal-title{margin:0;font-size:1rem}.panel-form{display:grid;gap:16px;padding:18px;flex:1 1 auto;min-height:0;overflow:auto}.panel-title{margin:0;font-size:1.2rem}.panel-subtitle{font-size:.85rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.panel-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.panel-grid--color{grid-template-columns:repeat(3,minmax(0,1fr))}.form-field,.form-checkbox{display:grid;gap:6px;color:var(--muted);font-size:.88rem}.form-field input,.form-field select,.form-checkbox input,.form-field textarea,.panel-row{border-radius:12px;border:1px solid var(--surface-border);padding:10px 12px;background:#ffffffb8;color:var(--text)}:root[data-theme=dark] .form-field input,:root[data-theme=dark] .form-field select,:root[data-theme=dark] .panel-row{background:#ffffff0f}.form-checkbox{grid-template-columns:auto 1fr;align-items:center}.button-row{display:flex;flex-wrap:wrap;gap:10px}.palette-panel{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.palette-slot{min-height:46px;border-radius:14px;border:1px solid var(--surface-border)}.color-preview-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.color-preview{min-height:88px;border-radius:18px;padding:12px;border:1px solid rgba(255,255,255,.46);display:flex;align-items:end;color:#fff7ef;font-weight:700;text-shadow:0 1px 2px rgba(0,0,0,.24)}.panel-row{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:10px}@keyframes rise-in{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@media(max-width:1080px){.app-body{grid-template-columns:1fr;grid-template-areas:"stage" "inspector" "toolbar"}.paint-surface{height:clamp(360px,56vh,680px)}.app-sidebar--inspector{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:16px}.app-sidebar--inspector>.panel-button{grid-column:1 / -1}.swatch-panel{grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:0}.stats-card{margin-bottom:0}}@media(max-width:720px){.app-shell{padding:12px 12px calc(16px + env(safe-area-inset-bottom));gap:12px}.app-header{grid-template-columns:1fr;position:sticky;top:max(8px,env(safe-area-inset-top));z-index:12;padding:14px 16px;border-radius:22px}.app-header-meta{justify-content:flex-start}.app-brand strong{font-size:clamp(1.4rem,7vw,1.9rem)}.panel-grid,.panel-grid--color{grid-template-columns:1fr}.app-sidebar--toolbar{position:sticky;bottom:max(10px,env(safe-area-inset-bottom));z-index:11;padding:0;border:0;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;background:transparent}.toolbar{gap:12px;padding:12px;border-radius:20px}.toolbar-group{grid-auto-flow:column;grid-auto-columns:minmax(88px,1fr);grid-template-columns:none;overflow-x:auto;overscroll-behavior-x:contain;padding-bottom:4px;scrollbar-width:thin;scroll-snap-type:x proximity}.toolbar-group>*{scroll-snap-align:start}.toolbar-group--commands{grid-auto-columns:minmax(104px,1fr)}.toolbar-button,.panel-button,.swatch-button,.modal-close{min-height:48px}.toolbar-button{white-space:nowrap}.app-sidebar--inspector{grid-template-columns:1fr}.canvas-stage{min-height:0}.canvas-frame{min-height:clamp(280px,52dvh,520px);padding:12px;border-radius:22px}.paint-surface{height:clamp(260px,48dvh,460px);min-height:clamp(260px,48dvh,460px);border-radius:16px}.modal-window{left:12px!important;right:12px;top:max(12px,env(safe-area-inset-top))!important;bottom:max(12px,env(safe-area-inset-bottom));width:auto!important;max-width:none;max-height:none}.modal-header{cursor:default;position:sticky;top:0;z-index:1}}@media(max-width:520px)and (min-height:720px){.app-shell{padding:10px 10px calc(12px + env(safe-area-inset-bottom));gap:10px}.app-body{gap:10px}.app-header{gap:10px;padding:12px 14px}.app-brand__eyebrow{font-size:.64rem;letter-spacing:.12em}.app-version,.app-save-status{min-height:28px;padding:5px 9px;font-size:.76rem}.app-sidebar--inspector{grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:12px;border-radius:20px}.swatch-panel{grid-column:1;gap:10px}.swatch-button{min-height:56px;padding:10px 12px;font-size:.92rem}.limiter-action-button{grid-column:2;grid-row:1;min-width:124px;align-self:stretch;white-space:nowrap}.stats-card{grid-column:1 / -1;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:10px}.stat-item{min-height:58px;padding:8px 10px}.stat-value{font-size:.84rem}.toolbar{gap:10px;padding:10px}.toolbar-group{gap:8px;grid-auto-columns:minmax(84px,1fr)}.toolbar-group--commands{grid-auto-columns:minmax(96px,1fr)}.toolbar-hover-chip{padding:8px 10px;font-size:.82rem}.canvas-frame{min-height:clamp(320px,54dvh,560px);padding:10px}.paint-surface{height:clamp(300px,50dvh,500px);min-height:clamp(300px,50dvh,500px)}.panel-form{gap:14px;padding:14px}.button-row{gap:8px}.modal-window{left:8px!important;right:8px;top:max(8px,env(safe-area-inset-top))!important;bottom:max(8px,env(safe-area-inset-bottom));border-radius:20px 20px 16px 16px}.modal-header{padding:11px 14px}}@media(max-width:540px){.swatch-panel{grid-template-columns:1fr}.color-preview-row,.palette-panel{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:430px){.app-brand strong{font-size:clamp(1.2rem,8vw,1.7rem)}.app-header-meta{gap:6px}.limiter-action-button{min-width:112px}.toolbar-group--commands{grid-auto-columns:minmax(92px,1fr)}.paint-surface{height:clamp(280px,48dvh,440px);min-height:clamp(280px,48dvh,440px)}}.app-shell[data-layout=mobile]{height:100dvh;max-height:100dvh;padding:10px 10px calc(10px + env(safe-area-inset-bottom));gap:8px;overflow:hidden}.app-shell[data-layout=mobile] .app-header{position:relative;top:auto;padding:10px 12px;border-radius:20px}.app-shell[data-layout=mobile] .app-header-meta{justify-content:flex-start}.app-shell[data-layout=mobile] .app-brand strong{font-size:clamp(1.2rem,5vw,1.7rem)}.app-shell[data-layout=mobile] .app-body{display:flex;flex:1 1 auto;min-height:0;gap:0;padding-bottom:calc(var(--mobile-dock-collapsed-height) + env(safe-area-inset-bottom))}.app-shell[data-layout=mobile] .app-sidebar--toolbar,.app-shell[data-layout=mobile] .app-sidebar--inspector{display:none}.app-shell[data-layout=mobile] .canvas-stage{flex:1 1 auto;min-height:0}.app-shell[data-layout=mobile] .canvas-frame{min-height:0;height:100%;padding:8px;border-radius:20px}.app-shell[data-layout=mobile] .paint-surface{height:100%;min-height:0;max-height:none;border-radius:16px}.app-shell[data-layout=mobile] .app-mobile-dock{display:block;position:fixed;left:10px;right:10px;bottom:calc(8px + env(safe-area-inset-bottom));z-index:14}.modal-host[data-layout=mobile] .modal-shell{display:flex;align-items:end}.modal-host[data-layout=mobile] .modal-window{left:0!important;right:0;top:auto!important;bottom:0;width:100%!important;max-width:none;max-height:min(78dvh,760px);border-radius:24px 24px 0 0}.modal-host[data-layout=mobile] .modal-header{cursor:default;position:sticky;top:0;z-index:1}.modal-host[data-layout=mobile] .panel-form{padding-bottom:calc(22px + env(safe-area-inset-bottom))}.modal-host[data-layout=mobile] .color-picker{aspect-ratio:auto;height:clamp(160px,32vw,210px);min-height:160px}@media(max-width:520px){.mobile-dock__summary-swatch{min-width:0}.mobile-dock__button-grid--actions{grid-template-columns:repeat(2,minmax(0,1fr))}}