:root{--surface: #f8f9fa;--surface-low: #f3f4f5;--surface-container: #edeeef;--surface-high: #e7e8e9;--surface-highest: #e1e3e4;--surface-lowest: #ffffff;--surface-dim: #d9dadb;--on-surface: #191c1d;--on-surface-variant: #554335;--primary: #8c4f00;--primary-container: #f7931a;--outline-variant: #dbc2ae;--outline: #887362;--font-headline: "Manrope", sans-serif;--font-body: "Inter", sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--surface);color:var(--on-surface);font-family:var(--font-body);font-size:14px;-webkit-font-smoothing:antialiased}.app{display:flex;height:100vh;overflow:hidden}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--surface-highest);border-radius:10px}.btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary-container));color:#fff;border:none;border-radius:12px;padding:10px 16px;font-family:var(--font-headline);font-weight:700;font-size:13px;cursor:pointer;transition:opacity .15s,transform .1s;box-shadow:0 4px 16px #8c4f0033;width:100%}.btn-primary:hover{opacity:.92}.btn-primary:active{transform:scale(.97)}.btn-primary:disabled{background:var(--surface-highest);box-shadow:none;cursor:not-allowed;opacity:1;color:var(--on-surface-variant)}.btn-secondary{background:transparent;color:var(--on-surface-variant);border:1px solid rgba(219,194,174,.4);border-radius:12px;padding:9px 16px;font-family:var(--font-body);font-size:13px;cursor:pointer;transition:background .15s;width:100%}.btn-secondary:hover{background:var(--surface-high)}.btn-ghost{background:transparent;border:none;cursor:pointer;color:var(--on-surface-variant);transition:color .15s}.btn-ghost:hover{color:var(--on-surface)}.block{width:100%;height:100%;position:relative;transition:background .15s ease,transform .15s ease,box-shadow .15s ease}.block--clickable{cursor:pointer}.canvas--paint .block--clickable:hover{background:var(--brush)!important}.canvas--paint .block--clickable:not(.block--selected):hover{opacity:.55!important}.canvas--eraser .block--selected:hover{opacity:.45!important}.block--selected{z-index:2;box-shadow:0 0 0 1.5px #fff;animation:block-pulse 1.2s ease-in-out infinite}@keyframes block-pulse{0%,to{transform:scale(1.3)}50%{transform:scale(1.15)}}