:root{--tap-target:96px;--toolbar-width:176px;--retro-bg:silver;--retro-shadow-light:#fff;--retro-shadow-dark:#404040}*,:before,:after{box-sizing:border-box}html,body,#root{background:var(--retro-bg);width:100%;height:100%;margin:0;padding:0;overflow:hidden}body{color:#000;overscroll-behavior:none;touch-action:manipulation;-webkit-user-select:none;user-select:none;font-family:Quicksand,Varela Round,system-ui,sans-serif;font-weight:500}button{font-family:inherit}#root{flex-direction:column;display:flex}.text-overlay-wrap{pointer-events:none;z-index:10;position:absolute;inset:0}.text-overlay-box{pointer-events:auto;background:#fffffff5;border:4px dashed navy;flex-direction:column;gap:8px;max-width:min(520px,100% - 32px);padding:8px;display:flex;position:absolute;box-shadow:4px 4px #0003}.text-overlay-input{box-sizing:border-box;-webkit-user-select:text;user-select:text;background:#fff;border:2px solid #404040;width:100%;min-width:240px;padding:6px 10px;font-family:Quicksand,Varela Round,system-ui,sans-serif;font-size:40px;font-weight:700;display:block}.text-overlay-input:focus{outline:3px solid #fdd835}.text-overlay-actions{justify-content:flex-end;gap:8px;display:flex}.text-overlay-btn{cursor:pointer;border:3px solid #404040;border-color:#fff #404040 #404040 #fff;min-width:56px;min-height:56px;font-family:inherit;font-size:28px;font-weight:900}.text-overlay-btn:active{border-color:#404040 #fff #fff #404040}.text-overlay-cancel{background:#ef9a9a}.text-overlay-done{background:#a5d6a7}.canvas-stage{background-color:#dcdcdc;flex:auto;position:relative;overflow:hidden;box-shadow:inset 2px 2px #fff,inset -2px -2px gray}.canvas-surface{touch-action:none;cursor:crosshair;background-color:#fff;width:100%;height:100%;display:block}.tool-button{width:100%;min-height:var(--tap-target,96px);cursor:pointer;color:#000;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;background:#d4d0c8;border:3px solid #404040;border-color:#fff #404040 #404040 #fff;flex-direction:column;justify-content:center;align-items:center;gap:4px;padding:8px 4px;font-family:inherit;font-size:16px;font-weight:700;display:flex}.tool-button:hover:not(:disabled){background:#e0dcd4}.tool-button:active:not(:disabled){border-color:#404040 #fff #fff #404040;padding-top:10px;padding-bottom:6px}.tool-button.is-active{background:#fdd835;border-color:#404040 #fff #fff #404040}.tool-button:disabled{opacity:.4;cursor:not-allowed}.tool-button-icon{justify-content:center;align-items:center;width:48px;height:48px;display:flex}.tool-button-label{text-transform:uppercase;letter-spacing:.5px;font-size:14px}.toolbar{width:var(--toolbar-width,176px);background:silver;border-right:2px solid gray;flex-direction:column;flex:none;gap:12px;padding:12px 8px;display:flex;overflow-y:auto;box-shadow:inset 2px 2px #fff,inset -2px -2px #404040}.toolbar-group{flex-direction:column;gap:8px;display:flex}.toolbar-divider{background:linear-gradient(90deg,gray,gray);height:2px;box-shadow:0 1px #fff}.color-swatch{width:100%;min-height:var(--tap-target,96px);cursor:pointer;-webkit-tap-highlight-color:transparent;border:3px solid #404040;border-color:#fff #404040 #404040 #fff;position:relative}.color-swatch:active,.color-swatch.is-active{border-color:#404040 #fff #fff #404040}.color-swatch.is-active{outline-offset:-2px;outline:4px solid #fdd835}.color-swatch-outline{pointer-events:none;border:2px dashed gray;position:absolute;inset:4px}.color-palette{background:silver;border-top:2px solid gray;grid-template-columns:repeat(6,1fr);gap:8px;padding:12px;display:grid;box-shadow:inset 2px 2px #fff,inset -2px -2px #404040}@media (min-width:900px){.color-palette{grid-template-columns:repeat(12,1fr)}}.brush-picker{background:silver;border-top:2px solid gray;gap:12px;padding:12px;display:flex;box-shadow:inset 2px 2px #fff,inset -2px -2px #404040}.brush-option{min-height:var(--tap-target,96px);cursor:pointer;-webkit-tap-highlight-color:transparent;background:#d4d0c8;border:3px solid #404040;border-color:#fff #404040 #404040 #fff;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:8px;font-family:inherit;font-weight:700;display:flex}.brush-option.is-active{background:#fdd835;border-color:#404040 #fff #fff #404040}.brush-dot{border:2px solid #000;border-radius:50%;max-width:72px;max-height:72px;display:inline-block}.brush-label{text-transform:uppercase;letter-spacing:.5px;font-size:14px}.image-picker{z-index:30;background:silver;border:3px solid #404040;border-color:#fff #404040 #404040 #fff;width:min(760px,92vw);max-height:86vh;position:fixed;top:50%;left:50%;overflow-y:auto;transform:translate(-50%,-50%);box-shadow:4px 4px #0006}.image-picker-head{color:#fff;background:navy;justify-content:space-between;align-items:center;padding:8px 12px;font-weight:700;display:flex}.image-picker-head h2{margin:0;font-size:18px}.image-picker-close{cursor:pointer;background:silver;border:2px solid #000;width:40px;height:40px;font-size:28px;font-weight:900}.image-picker-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px;padding:16px;display:grid}.image-picker-card{cursor:pointer;-webkit-tap-highlight-color:transparent;background:#fff;border:3px solid #404040;border-color:#fff #404040 #404040 #fff;flex-direction:column;align-items:center;gap:8px;padding:12px;font-family:inherit;font-weight:700;display:flex}.image-picker-card:active{border-color:#404040 #fff #fff #404040}.image-picker-card img{background:#fff;width:100%;max-width:160px;height:auto}.image-size-picker{background:silver;border-top:2px solid gray;gap:12px;padding:12px;display:flex;box-shadow:inset 2px 2px #fff,inset -2px -2px #404040}.image-size-option{min-height:var(--tap-target,96px);cursor:pointer;-webkit-tap-highlight-color:transparent;background:#d4d0c8;border:3px solid #404040;border-color:#fff #404040 #404040 #fff;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:8px;padding:8px;font-family:inherit;font-weight:700;display:flex}.image-size-option.is-active{background:#fdd835;border-color:#404040 #fff #fff #404040}.image-size-swatch{box-sizing:border-box;background:#fff;border:2px solid #000;max-width:72px;display:block}.image-size-label{text-transform:uppercase;letter-spacing:.5px;font-size:14px}.shape-kind-picker{background:silver;border-top:2px solid gray;gap:12px;padding:12px;display:flex;box-shadow:inset 2px 2px #fff,inset -2px -2px #404040}.shape-kind-option{min-height:var(--tap-target,96px);cursor:pointer;-webkit-tap-highlight-color:transparent;background:#d4d0c8;border:3px solid #404040;border-color:#fff #404040 #404040 #fff;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:4px;padding:8px;font-family:inherit;font-weight:700;display:flex}.shape-kind-option.is-active{background:#fdd835;border-color:#404040 #fff #fff #404040}.shape-kind-label{text-transform:uppercase;letter-spacing:.5px;font-size:14px}.shape-kind-hint{color:#404040;text-transform:none;letter-spacing:0;font-size:12px;font-weight:500}.parent-gate-backdrop{z-index:40;background:#00000080;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.parent-gate{background:silver;border:3px solid #404040;border-color:#fff #404040 #404040 #fff;width:min(480px,90vw);padding:24px;box-shadow:4px 4px #0006}.parent-gate-title{color:navy;text-align:center;margin:0 0 8px;font-size:24px;font-weight:700}.parent-gate-subtitle{text-align:center;margin:0 0 16px;font-size:18px}.parent-gate-options{grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px;display:grid}.parent-gate-option{cursor:pointer;background:#d4d0c8;border:3px solid #404040;border-color:#fff #404040 #404040 #fff;min-height:72px;font-family:inherit;font-size:32px;font-weight:700}.parent-gate-option:active{border-color:#404040 #fff #fff #404040}.parent-gate-error{color:#e53935;text-align:center;margin:0 0 12px;font-weight:700}.parent-gate-cancel{cursor:pointer;background:#d4d0c8;border:3px solid #404040;border-color:#fff #404040 #404040 #fff;width:100%;min-height:56px;font-family:inherit;font-size:18px;font-weight:700}.collapsible{flex-direction:column;display:flex}.collapsible-header{color:#fff;letter-spacing:.5px;cursor:pointer;-webkit-tap-highlight-color:transparent;background:navy;border:3px solid #000040;border-color:#3f50b5 #000040 #000040 #3f50b5;justify-content:space-between;align-items:center;width:100%;min-height:56px;padding:8px 16px;font-family:inherit;font-size:18px;font-weight:700;display:flex}.collapsible-chevron{font-size:22px}.collapsible-body{background:silver}.app-shell{flex-direction:column;width:100%;height:100%;display:flex}.app-titlebar{color:#fff;letter-spacing:.5px;background:linear-gradient(90deg,navy,#1084d0);flex:none;padding:6px 12px;font-weight:700}.app-title{font-size:16px}.app-main{flex-direction:row;flex:auto;min-height:0;display:flex}.app-footer{flex-direction:column;flex:none;display:flex}