:root{--font-heading:"Fredoka", "Outfit", sans-serif;--font-body:"Fredoka", sans-serif;--color-bg:#fffdf0;--color-text:#2d3436;--color-border:#2d3436;--color-pink:#ff6b8b;--color-pink-light:#ff8eaa;--color-teal:#00d2d3;--color-teal-light:#48dbfb;--color-yellow:#feca57;--color-yellow-light:#ffeaa7;--color-purple:#9b5de5;--color-purple-light:#c095e8;--color-green:#1dd1a1;--color-orange:#ff9f43;--color-cut:#ff2a2a;--color-engrave:#08f;--brutal-shadow:4px 4px 0px #2d3436;--brutal-shadow-hover:6px 6px 0px #2d3436;--brutal-shadow-active:2px 2px 0px #2d3436}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;margin:0;padding:0}html,body{font-family:var(--font-body);background-color:var(--color-bg);color:var(--color-text);width:100%;min-height:100%;margin:0;padding:0;overflow-x:hidden;overflow-y:auto!important}#root{flex-direction:column;width:100%;min-height:100vh;display:flex}.app-header{background-color:var(--color-yellow-light);border-bottom:4px solid var(--color-border);justify-content:space-between;align-items:center;height:72px;padding:12px 24px;display:flex}.brand{align-items:center;gap:12px;display:flex}.brand-logo{width:48px;height:48px;animation:3s ease-in-out infinite float}.brand-title{font-family:var(--font-heading);color:var(--color-text);text-shadow:2px 2px #fff;letter-spacing:-.5px;font-size:32px;font-weight:700}.app-container{flex:1;height:calc(100vh - 72px);display:flex;position:relative;overflow:hidden}.sidebar{border-right:4px solid var(--color-border);z-index:10;background-color:#fff;flex-direction:column;gap:16px;width:340px;padding:16px;display:flex;overflow-y:auto}.sidebar.right{border-right:none;border-left:4px solid var(--color-border)}.panel-title{font-family:var(--font-heading);align-items:center;gap:8px;margin-bottom:8px;font-size:20px;font-weight:700;display:flex}.card{border:3px solid var(--color-border);box-shadow:var(--brutal-shadow);background-color:#fff;border-radius:16px;flex-direction:column;gap:12px;padding:16px;display:flex}.card.purple{background-color:#f8f0ff}.card.pink{background-color:#fff0f3}.card.yellow{background-color:ivory}.card.teal{background-color:azure}.card.green{background-color:#f2fff5}.btn{font-family:var(--font-heading);border:3px solid var(--color-border);cursor:pointer;box-shadow:var(--brutal-shadow);background-color:#fff;border-radius:12px;justify-content:center;align-items:center;gap:8px;padding:10px 16px;font-size:16px;font-weight:700;transition:transform .1s,box-shadow .1s;display:inline-flex;position:relative}.btn:hover{box-shadow:var(--brutal-shadow-hover);transform:translate(-2px,-2px)}.btn:active{box-shadow:var(--brutal-shadow-active);transform:translate(2px,2px)}.btn-pink{background-color:var(--color-pink);color:#fff}.btn-pink:hover{background-color:var(--color-pink-light)}.btn-teal{background-color:var(--color-teal);color:#fff}.btn-teal:hover{background-color:var(--color-teal-light)}.btn-yellow{background-color:var(--color-yellow);color:var(--color-text)}.btn-yellow:hover{background-color:var(--color-yellow-light)}.btn-purple{background-color:var(--color-purple);color:#fff}.btn-purple:hover{background-color:var(--color-purple-light)}.btn-round{border-radius:50%;width:48px;height:48px;padding:0;font-size:22px}.btn-large{border-radius:16px;padding:14px 24px;font-size:20px}.btn-group{flex-wrap:wrap;gap:8px;display:flex}.tool-btn{aspect-ratio:1;background-color:#fff;flex-direction:column;flex:1;gap:4px;min-width:60px;font-size:12px;display:flex}.tool-btn.active{background-color:var(--color-yellow);box-shadow:var(--brutal-shadow-active);transform:translate(2px,2px)}.input-label{flex-direction:column;gap:6px;font-size:14px;font-weight:700;display:flex}.input-field{font-family:var(--font-body);border:3px solid var(--color-border);background-color:#fff;border-radius:8px;outline:none;padding:8px 12px;font-size:16px;font-weight:600}.input-field:focus{border-color:var(--color-pink)}input[type=range]{-webkit-appearance:none;background:var(--color-yellow-light);border:2px solid var(--color-border);border-radius:6px;outline:none;width:100%;height:12px}input[type=range]::-webkit-slider-thumb{appearance:none;background:var(--color-pink);border:2px solid var(--color-border);cursor:pointer;border-radius:50%;width:24px;height:24px;box-shadow:1px 1px #000}.canvas-wrapper{background-color:#e2e8f0;flex:1;justify-content:center;align-items:center;padding:20px;display:flex;position:relative;overflow:hidden}.canvas-container{border:4px solid var(--color-border);background-color:#fff;border-radius:8px;position:relative;overflow:visible;box-shadow:8px 8px #00000026}.grid-line{stroke:#e2e8f0;stroke-width:1px}.grid-line-major{stroke:#cbd5e1;stroke-width:1.5px}.shape-cut{stroke:var(--color-cut);stroke-width:2px;fill:none;stroke-linecap:round;stroke-linejoin:round}.shape-engrave{stroke:var(--color-engrave);stroke-width:1.5px;fill:none;stroke-linecap:round;stroke-linejoin:round}.shape-selected{stroke-dasharray:4 4;animation:1s linear infinite dash}.laser-nozzle{filter:drop-shadow(0 0 8px #ff6b6bcc);pointer-events:none;z-index:50}.laser-sparkle{pointer-events:none;background:radial-gradient(circle, #fff 10%, var(--color-yellow) 60%, transparent 100%);border-radius:50%;animation:.4s ease-out forwards spark;position:absolute}.mascot-area{align-items:flex-end;gap:8px;margin-top:auto;display:flex}.mascot-image{flex-shrink:0;width:72px;height:72px;animation:2s ease-in-out infinite bounce}.bubble{border:3px solid var(--color-border);box-shadow:var(--brutal-shadow);word-wrap:break-word;background:#fff;border-radius:16px;padding:12px;font-size:14px;font-weight:600;line-height:1.3;position:relative}.bubble:after,.bubble:before{content:" ";pointer-events:none;border:solid #0000;width:0;height:0;position:absolute;top:70%;right:100%}.bubble:after{border-width:8px;border-color:#fff0 #fff #fff0 #fff0;margin-top:-8px}.bubble:before{border-color:#2d343600;border-right-color:var(--color-border);border-width:12px;margin-top:-12px}.modal-overlay{z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background-color:#0006;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal-content{background-color:var(--color-bg);border:4px solid var(--color-border);width:90%;max-width:480px;box-shadow:var(--brutal-shadow);border-radius:24px;padding:24px;animation:.3s cubic-bezier(.175,.885,.32,1.275) forwards popIn}@keyframes float{0%{transform:translateY(0)rotate(0)}50%{transform:translateY(-6px)rotate(3deg)}to{transform:translateY(0)rotate(0)}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes dash{to{stroke-dashoffset:-20px}}@keyframes spark{0%{opacity:1;transform:scale(0)translate(0)}to{transform:scale(1.5) translate(var(--dx), var(--dy));opacity:0}}@keyframes popIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.confetti{background-color:var(--color-pink);z-index:999;border-radius:2px;width:10px;height:10px;animation:3s ease-out forwards fall;position:fixed}@keyframes fall{0%{opacity:1;transform:translateY(-50px)rotate(0)}to{opacity:0;transform:translateY(100vh)rotate(360deg)}}.ruler{background-color:var(--color-yellow-light);color:var(--color-text);font-size:10px;font-weight:700;position:absolute}.ruler.horizontal{border:2px solid var(--color-border);border-radius:4px;height:20px;top:-24px;left:0;right:0}.ruler.vertical{border:2px solid var(--color-border);border-radius:4px;width:20px;top:0;bottom:0;left:-24px}.resize-handle{fill:#fff;stroke:var(--color-border);stroke-width:2px;cursor:nwse-resize}.rotate-handle{fill:var(--color-yellow);stroke:var(--color-border);stroke-width:2px;cursor:grab}.rotate-line{stroke:var(--color-border);stroke-width:2px;stroke-dasharray:2 2}.text-preview{fill:none;font-weight:700}.theme-toggle{border:3px solid var(--color-border);cursor:pointer;background-color:#fff;border-radius:30px;width:80px;height:36px;padding:2px;display:flex;position:relative;box-shadow:2px 2px #2d3436}.theme-toggle-knob{background-color:var(--color-yellow);border:2px solid var(--color-border);border-radius:50%;width:26px;height:26px;transition:transform .2s cubic-bezier(.175,.885,.32,1.275);position:absolute;top:2px;left:2px}.theme-toggle.dark .theme-toggle-knob{background-color:var(--color-purple);transform:translate(44px)}.theme-toggle-icons{justify-content:space-between;align-items:center;width:100%;padding:0 8px;font-size:14px;display:flex}body.dark-mode{--color-bg:#2c2c54;--color-text:#f1f2f6;--color-border:#f1f2f6;background-color:var(--color-bg);color:var(--color-text)}body.dark-mode .app-header{border-bottom-color:var(--color-border);background-color:#474787}body.dark-mode .brand-title{color:#fff;text-shadow:2px 2px #474787}body.dark-mode .sidebar{border-right-color:var(--color-border);border-left-color:var(--color-border);background-color:#30336b}body.dark-mode .card{border-color:var(--color-border);background-color:#130cb7;box-shadow:4px 4px #f1f2f6}body.dark-mode .card.purple{background-color:#3b287a}body.dark-mode .card.pink{background-color:#631c3b}body.dark-mode .card.yellow{background-color:#5d5c18}body.dark-mode .card.teal{background-color:#175252}body.dark-mode .btn{border-color:var(--color-border);color:#fff;background-color:#2c2c54;box-shadow:4px 4px #f1f2f6}body.dark-mode .btn:hover{box-shadow:6px 6px #f1f2f6}body.dark-mode .btn:active{box-shadow:2px 2px #f1f2f6}body.dark-mode .btn-yellow{color:#000}body.dark-mode .tool-btn.active{background-color:var(--color-purple);box-shadow:2px 2px #f1f2f6}body.dark-mode .input-field{border-color:var(--color-border);color:#fff;background-color:#2c2c54}body.dark-mode .canvas-wrapper{background-color:#1e1e38}body.dark-mode .canvas-container{border-color:var(--color-border)}body.dark-mode .ruler{color:#fff;border-color:var(--color-border);background-color:#474787}body.dark-mode .bubble{border-color:var(--color-border);background-color:#130c5e;box-shadow:4px 4px #f1f2f6}body.dark-mode .bubble:after{border-right-color:#130c5e}body.dark-mode .bubble:before{border-right-color:var(--color-border)}::-webkit-scrollbar{width:16px;height:16px}::-webkit-scrollbar-track{background:var(--color-yellow-light);border-left:3px solid var(--color-border)}::-webkit-scrollbar-thumb{background-color:var(--color-pink);border:3px solid var(--color-border);border-radius:8px}::-webkit-scrollbar-thumb:hover{background-color:var(--color-pink-light)}body.dark-mode ::-webkit-scrollbar-track{border-left:3px solid var(--color-border);background:#3b287a}body.dark-mode ::-webkit-scrollbar-thumb{background-color:var(--color-purple);border:3px solid var(--color-border)}@media print{@page{margin:0;size:auto}html,body,#root{page-break-inside:avoid!important;background:0 0!important;justify-content:center!important;align-items:center!important;width:100%!important;height:100%!important;max-height:100%!important;margin:0!important;padding:0!important;display:flex!important;overflow:hidden!important}.app-header,.sidebar,.mascot-container,.mascot-area,.theme-toggle,.ruler,.confetti-particle,.confetti,.modal-overlay{display:none!important}.app-container{width:100%!important;height:100%!important;max-height:100%!important;box-shadow:none!important;background:0 0!important;border:none!important;display:block!important;overflow:hidden!important}.canvas-wrapper{page-break-inside:avoid!important;background:0 0!important;justify-content:center!important;align-items:center!important;width:100%!important;height:100%!important;max-height:100%!important;padding:0!important;display:flex!important;position:relative!important;overflow:hidden!important}.canvas-container{box-shadow:none!important;width:var(--print-width,300mm)!important;height:var(--print-height,200mm)!important;page-break-inside:avoid!important;border:none!important;justify-content:center!important;align-items:center!important;margin:0!important;display:flex!important;position:relative!important}.main-canvas-svg{width:var(--print-width,300mm)!important;height:var(--print-height,200mm)!important;page-break-inside:avoid!important;display:block!important}.selection-box,.rotate-line,.rotate-handle,.resize-handle,svg g rect[stroke-dasharray="3 3"]{display:none!important}.grid-line,.grid-line-major{stroke:none!important;display:none!important}.grid-background{fill:none!important;stroke:none!important}.shape-cut{stroke:red!important;stroke-width:.001in!important}.shape-engrave{stroke:#00f!important;stroke-width:.001in!important}}