:root{--ink:#20283a;--purple:#7656e8;--yellow:#ffd23f}*{box-sizing:border-box}html,body,#root{width:100%;height:100%;margin:0;overflow:hidden}body{min-width:320px;color:var(--ink);background:#fffefa;font-family:Trebuchet MS,Arial Rounded MT Bold,Arial,sans-serif}button,input{font:inherit}button:disabled{opacity:.38;cursor:not-allowed!important}.app-shell,.studio,.drawing-workspace{width:100%;height:100dvh}.app-shell{position:relative;overflow:hidden}.studio{position:relative}.brand-badge{z-index:4;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);pointer-events:none;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffffeb;border-radius:18px;align-items:center;gap:10px;padding:7px 14px 7px 8px;font-size:1.05rem;font-weight:900;display:inline-flex;position:absolute;top:18px;left:18px}.brand-mark{border:2px solid var(--ink);background:var(--yellow);border-radius:11px 14px 10px 15px;place-items:center;width:34px;height:34px;display:grid;transform:rotate(-5deg)}.drawing-workspace .canvas-surface{position:absolute;inset:0;overflow:hidden;min-height:0!important;box-shadow:none!important;background:#fffefa!important;border:0!important;border-radius:0!important}.drawing-workspace .paint-canvas{background-color:#fffefa!important;background-image:radial-gradient(#ddd7e9 .8px,#0000 .8px)!important;background-size:22px 22px!important}.drawing-workspace .effects-canvas{z-index:2;background:0 0}.drawing-workspace .floating-toolbar{bottom:max(20px, env(safe-area-inset-bottom));z-index:5;border:2px solid var(--ink);width:max-content;max-width:calc(100vw - 32px);box-shadow:5px 6px 0 var(--ink), 0 16px 36px #3a286a2e;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);scrollbar-width:thin;background:#ffffffed;border-radius:22px;justify-content:center;padding:10px 12px;position:absolute;left:50%;overflow-x:auto;transform:translate(-50%);flex-wrap:nowrap!important}.drawing-workspace [aria-label="Choose a color"]{flex:none;flex-wrap:nowrap!important}.drawing-workspace [aria-label="Choose a color"] button{flex:none;transition:transform .14s;width:44px!important;height:44px!important}.drawing-workspace [aria-label="Choose a color"] button:hover{transform:translateY(-3px)rotate(-3deg)}.drawing-workspace [role=toolbar]>button{flex:none;min-width:52px;transition:transform .12s;box-shadow:2px 2px #20283a24}.drawing-workspace [role=toolbar]>button:hover:not(:disabled){transform:translateY(-2px)}.drawing-workspace [role=toolbar] label{flex:none}.pen-mode-control{min-height:44px;color:var(--ink);background:#fff2b8;border:2px solid #d7dce5;border-radius:12px;flex:none;align-items:center;gap:7px;padding:4px 6px 4px 12px;font-size:.86rem;font-weight:900;display:flex}.pen-mode-control select{min-height:34px;color:var(--ink);cursor:pointer;background:#fff;border:0;border-radius:8px;padding:4px 30px 4px 9px;font-weight:800}.pen-mode-control select:focus-visible{outline:3px solid var(--purple);outline-offset:2px}@media (width<=760px){.brand-badge{box-shadow:3px 3px 0 var(--ink);padding:5px 10px 5px 6px;font-size:.92rem;top:10px;left:10px}.brand-mark{width:30px;height:30px}.drawing-workspace .floating-toolbar{bottom:max(10px, env(safe-area-inset-bottom));max-width:calc(100vw - 20px);box-shadow:4px 4px 0 var(--ink);border-radius:18px;justify-content:flex-start;padding:8px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important}}