:root{--color-primary:#1b4d3e;--color-primary-dark:#113429;--color-primary-light:#2d6a4f;--color-accent-gold:#e9c46a;--color-accent-amber:#dda15e;--color-accent-coral:#e76f51;--color-accent-teal:#52b788;--color-accent-crimson:#bc4749;--bg-parchment:#fbf8f1;--bg-card:#fff;--bg-card-subtle:#f4efe6;--bg-overlay:#162d24a6;--text-main:#232d28;--text-muted:#5a6b63;--text-light:#fff;--text-gold:#b38612;--border-craft:#e2d9c8;--border-focus:#1b4d3e;--shadow-sm:0 2px 6px #1b4d3e14;--shadow-md:0 6px 16px #1b4d3e1f;--shadow-lg:0 12px 32px #1b4d3e2e;--shadow-button:0 5px 0 #113429;--shadow-button-gold:0 5px 0 #b38612;--font-heading:"Outfit", -apple-system, BlinkMacSystemFont, sans-serif;--font-body:"Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif;--radius-sm:8px;--radius-md:14px;--radius-lg:22px;--radius-full:9999px;--transition-fast:.15s ease;--transition-normal:.25s ease;--motion-press:.1s cubic-bezier(.4, 0, .2, 1);--motion-lift:.18s cubic-bezier(.34, 1.56, .64, 1);--motion-settle:.28s cubic-bezier(.175, .885, .32, 1.275);--motion-fade:.2s ease-out;--easing-craft:cubic-bezier(.2, .8, .2, 1)}body.high-contrast{--color-primary:#000;--color-primary-dark:#000;--color-primary-light:#1a1a1a;--bg-parchment:#fff;--bg-card:#fff;--bg-card-subtle:#f0f0f0;--text-main:#000;--text-muted:#222;--border-craft:#000;--border-focus:#f05;--shadow-button:0 5px 0 #000}body.reduced-motion *,body.reduced-motion :before,body.reduced-motion :after{transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}}@keyframes rippleCorePulse{0%{opacity:.9;transform:scale(.85)}50%{opacity:.7;transform:scale(1.1)}to{opacity:.9;transform:scale(.85)}}@keyframes rippleWaveExpand1{0%{r:16px;opacity:.9;stroke-width:3.5px}60%{r:36px;opacity:.45;stroke-width:2px}to{r:44px;opacity:0;stroke-width:1px}}@keyframes rippleWaveExpand2{0%{r:24px;opacity:0}25%{opacity:.7}to{r:52px;opacity:0}}.ripple-core{transform-origin:50px 50px;animation:1.8s ease-in-out infinite rippleCorePulse}.ripple-wave-1{animation:1.8s cubic-bezier(.2,.8,.2,1) infinite rippleWaveExpand1}.ripple-wave-2{animation:1.8s cubic-bezier(.2,.8,.2,1) .4s infinite rippleWaveExpand2}@keyframes fingerTapLoop{0%{opacity:.85;transform:translateY(-16px)scale(1)}25%{opacity:1;transform:translateY(0)scale(.92)}50%{opacity:1;transform:translateY(1px)scale(.9)}75%{opacity:.9;transform:translateY(-16px)scale(1)}to{opacity:.85;transform:translateY(-16px)scale(1)}}.anim-finger-tap{transform-origin:45px 15px;animation:2.2s cubic-bezier(.25,1,.5,1) infinite fingerTapLoop}@keyframes clickReleaseLoop{0%{transform:scale(1)translateY(-6px)}20%{transform:scale(.88)translateY(2px)}35%{transform:scale(.96)translateY(-1px)}50%{transform:scale(.92)translateY(1px)}70%{transform:scale(1)translateY(-6px)}to{transform:scale(1)translateY(-6px)}}.anim-click-release{transform-origin:45px 15px;animation:1.8s ease-in-out infinite clickReleaseLoop}@keyframes dragMotionLoop{0%{opacity:0;transform:translate(0)}10%{opacity:1;transform:translate(0)}20%{transform:translateY(-6px)scale(1.05)}65%{transform:translate(var(--drag-dx,80px), calc(var(--drag-dy,0px) - 6px)) scale(1.05)}75%{transform:translate(var(--drag-dx,80px), var(--drag-dy,0px)) scale(.95);opacity:1}88%{transform:translate(var(--drag-dx,80px), var(--drag-dy,0px)) scale(1);opacity:.2}to{opacity:0;transform:translate(0)}}.anim-drag-motion{animation:3.2s cubic-bezier(.2,.8,.2,1) infinite dragMotionLoop}@keyframes swipeRightLoop{0%{opacity:0;transform:translate(0)}15%{opacity:1;transform:translate(0)}60%{opacity:1;transform:translate(70px)}75%{opacity:0;transform:translate(85px)}to{opacity:0;transform:translate(0)}}@keyframes swipeLeftLoop{0%{opacity:0;transform:translate(0)}15%{opacity:1;transform:translate(0)}60%{opacity:1;transform:translate(-70px)}75%{opacity:0;transform:translate(-85px)}to{opacity:0;transform:translate(0)}}@keyframes swipeDownLoop{0%{opacity:0;transform:translateY(0)}15%{opacity:1;transform:translateY(0)}60%{opacity:1;transform:translateY(70px)}75%{opacity:0;transform:translateY(85px)}to{opacity:0;transform:translateY(0)}}@keyframes swipeUpLoop{0%{opacity:0;transform:translateY(0)}15%{opacity:1;transform:translateY(0)}60%{opacity:1;transform:translateY(-70px)}75%{opacity:0;transform:translateY(-85px)}to{opacity:0;transform:translateY(0)}}.anim-swipe-right{animation:2.2s cubic-bezier(.16,1,.3,1) infinite swipeRightLoop}.anim-swipe-left{animation:2.2s cubic-bezier(.16,1,.3,1) infinite swipeLeftLoop}.anim-swipe-down{animation:2.2s cubic-bezier(.16,1,.3,1) infinite swipeDownLoop}.anim-swipe-up{animation:2.2s cubic-bezier(.16,1,.3,1) infinite swipeUpLoop}@keyframes pickDropLoop{0%{opacity:0;transform:translate(0)scale(1)}12%{opacity:1;transform:translate(0)scale(.95)}24%{transform:translateY(-14px)scale(1.08)}65%{transform:translate(var(--drop-dx,80px), calc(var(--drop-dy,40px) - 14px)) scale(1.08)}78%{transform:translate(var(--drop-dx,80px), var(--drop-dy,40px)) scale(.95);opacity:1}90%{transform:translate(var(--drop-dx,80px), var(--drop-dy,40px)) scale(1);opacity:0}to{opacity:0;transform:translate(0)scale(1)}}.anim-pick-drop{animation:3.4s cubic-bezier(.2,.8,.2,1) infinite pickDropLoop}@keyframes drawPencilLoop{0%{opacity:0;transform:translate(0)}10%{opacity:1;transform:translate(0)}75%{transform:translate(var(--line-dx,0px), var(--line-dy,120px));opacity:1}88%{transform:translate(var(--line-dx,0px), var(--line-dy,120px));opacity:0}to{opacity:0;transform:translate(0)}}@keyframes drawLineTraceLoop{0%,10%{stroke-dashoffset:400px}75%{stroke-dashoffset:0}88%,to{stroke-dashoffset:0}}.anim-draw-pencil{animation:3s cubic-bezier(.25,.9,.35,1) infinite drawPencilLoop}.anim-draw-line-trace{stroke-dasharray:400;animation:3s cubic-bezier(.25,.9,.35,1) infinite drawLineTraceLoop}@keyframes cutScissorsLoop{0%{opacity:0;transform:translate(0)}10%{opacity:1;transform:translate(0)}75%{transform:translate(var(--cut-dx,0px), var(--cut-dy,140px));opacity:1}88%{transform:translate(var(--cut-dx,0px), var(--cut-dy,140px));opacity:0}to{opacity:0;transform:translate(0)}}@keyframes cutPaperTrailLoop{0%,10%{stroke-dashoffset:400px}75%,to{stroke-dashoffset:0}}.anim-cut-scissors{animation:3.2s cubic-bezier(.25,.9,.35,1) infinite cutScissorsLoop}.anim-cut-paper-trail{stroke-dasharray:400;animation:3.2s cubic-bezier(.25,.9,.35,1) infinite cutPaperTrailLoop}@keyframes weaveOverLoop{0%{opacity:0;filter:drop-shadow(0 2px 4px #0003);transform:translate(0)scale(1)}15%{opacity:1;transform:translate(0)scale(1)}45%{transform:translate(calc(var(--weave-dx,60px) * .5), -12px) scale(1.08);filter:drop-shadow(0 12px 18px #00000059)}75%{transform:translate(var(--weave-dx,60px), 0) scale(1);opacity:1;filter:drop-shadow(0 3px 6px #00000040)}88%{transform:translate(var(--weave-dx,60px), 0) scale(1);opacity:0}to{opacity:0;transform:translate(0)scale(1)}}@keyframes weaveUnderLoop{0%{opacity:0;filter:drop-shadow(0 2px 4px #0003);transform:translate(0)scale(1)}15%{opacity:1;transform:translate(0)scale(1)}45%{transform:translate(calc(var(--weave-dx,60px) * .5), 8px) scale(.92);filter:drop-shadow(0 1px 2px #0000001f);opacity:.85}75%{transform:translate(var(--weave-dx,60px), 0) scale(1);opacity:1;filter:drop-shadow(0 3px 6px #00000040)}88%{transform:translate(var(--weave-dx,60px), 0) scale(1);opacity:0}to{opacity:0;transform:translate(0)scale(1)}}.anim-weave-over{animation:3s cubic-bezier(.2,.8,.2,1) infinite weaveOverLoop}.anim-weave-under{animation:3s cubic-bezier(.2,.8,.2,1) infinite weaveUnderLoop}@keyframes dashFlow{to{stroke-dashoffset:-24px}}.guidance-flow-path{stroke-dasharray:6 5;animation:1.2s linear infinite dashFlow}@keyframes targetPulseRing{0%{transform:scale(1);box-shadow:0 0 #e9c46aa6,0 0 #2d6a4f66}50%{transform:scale(1.03);box-shadow:0 0 0 8px #e9c46a00,0 0 0 14px #2d6a4f00}to{transform:scale(1);box-shadow:0 0 #e9c46a00,0 0 #2d6a4f00}}.guidance-target-pulse{animation:1.8s cubic-bezier(.4,0,.2,1) infinite targetPulseRing;border-color:#e9c46a!important}@keyframes invalidDropNudge{0%,to{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}.guidance-invalid-nudge{border-color:#ef4444!important;animation:.45s ease-in-out invalidDropNudge!important}.guidance-marker-pin{letter-spacing:.5px;text-transform:uppercase;-webkit-user-select:none;user-select:none;pointer-events:none;border-radius:9999px;justify-content:center;align-items:center;font-size:10px;font-weight:900;display:inline-flex;box-shadow:0 3px 6px #0003}.marker-start{color:#fff;background-color:#166534;border:2px solid #86efac;padding:3px 8px}.marker-end{color:#fff;background-color:#9a3412;border:2px solid #fde68a;padding:3px 8px}@media (pointer:fine){.craft-interaction-area{position:relative}.craft-cursor-draw{cursor:crosshair}.craft-cursor-cut{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23B23A22' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='6' r='3'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Cline x1='20' y1='4' x2='8.12' y2='15.88'/%3E%3Cline x1='14.47' y1='14.48' x2='20' y2='20'/%3E%3Cline x1='8.12' y1='8.12' x2='12' y2='12'/%3E%3C/svg%3E") 12 12,pointer}.craft-cursor-grab{cursor:grab}.craft-cursor-grab:active{cursor:grabbing}.craft-hover-target:hover{filter:drop-shadow(0 0 6px #e9c46abf);transition:filter .15s}}@media (pointer:coarse){.craft-cursor-draw,.craft-cursor-cut,.craft-cursor-grab{cursor:auto!important}}@media (prefers-reduced-motion:reduce){.anim-finger-tap,.anim-click-release,.anim-drag-motion,.anim-swipe-right,.anim-swipe-left,.anim-swipe-down,.anim-swipe-up,.anim-pick-drop,.anim-draw-pencil,.anim-cut-scissors,.anim-weave-over,.anim-weave-under,.guidance-flow-path,.guidance-target-pulse,.ripple-core,.ripple-wave-1,.ripple-wave-2{animation:none!important;transform:none!important}.anim-draw-line-trace,.anim-cut-paper-trail{stroke-dashoffset:0!important;animation:none!important}}body.reduced-motion .anim-finger-tap,body.reduced-motion .anim-click-release,body.reduced-motion .anim-drag-motion,body.reduced-motion .anim-swipe-right,body.reduced-motion .anim-swipe-left,body.reduced-motion .anim-swipe-down,body.reduced-motion .anim-swipe-up,body.reduced-motion .anim-pick-drop,body.reduced-motion .anim-draw-pencil,body.reduced-motion .anim-cut-scissors,body.reduced-motion .anim-weave-over,body.reduced-motion .anim-weave-under,body.reduced-motion .guidance-flow-path,body.reduced-motion .guidance-target-pulse,body.reduced-motion .ripple-core,body.reduced-motion .ripple-wave-1,body.reduced-motion .ripple-wave-2{animation:none!important;transform:none!important}body.reduced-motion .anim-draw-line-trace,body.reduced-motion .anim-cut-paper-trail{stroke-dashoffset:0!important;animation:none!important}.canvas-workspace-wrapper{flex-direction:column;justify-content:center;align-items:center;gap:.75rem;width:100%;display:flex}.canvas-workspace-board{justify-content:center;align-items:center;width:100%;margin:0 auto;display:flex;position:relative}.canvas-floating-toast{z-index:25;pointer-events:none;animation:.2s cubic-bezier(.175,.885,.32,1.275) forwards popIn;position:absolute;top:12px;left:50%;transform:translate(-50%)}.loom-crossing-focus{transition:transform .15s,filter .15s}.loom-crossing-focus:hover{filter:brightness(1.12)drop-shadow(0 0 8px #e9c46a99)}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%}body{font-family:var(--font-body);background-color:var(--bg-parchment);color:var(--text-main);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-image:radial-gradient(#1b4d3e08 1px,#0000 1px),radial-gradient(#dda15e10 1px,#0000 1px);background-position:0 0,12px 12px;background-size:24px 24px;line-height:1.5;overflow-x:hidden}#root{flex-direction:column;min-height:100vh;display:flex}h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);color:var(--color-primary-dark);font-weight:700;line-height:1.25}button,input,select,textarea,[tabindex="0"]{outline:none}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex="0"]:focus-visible{outline:3px solid var(--color-accent-gold);outline-offset:3px}button{cursor:pointer;background:0 0;border:none;font-family:inherit}.app-container{flex-direction:column;flex:1;width:100%;max-width:1400px;margin:0 auto;padding:.75rem 1rem;display:flex}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes pulseGlow{0%,to{box-shadow:0 0 #e9c46a66}50%{box-shadow:0 0 0 10px #e9c46a00}}@keyframes popIn{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}@keyframes mascotBreathe{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}@keyframes cellSettle{0%{transform:scale(.92)}50%{transform:scale(1.04)}to{transform:scale(1)}}@keyframes bladeSnipTop{0%,to{transform:rotate(0)}50%{transform:rotate(-22deg)}}@keyframes bladeSnipBottom{0%,to{transform:rotate(0)}50%{transform:rotate(22deg)}}.animate-pop{animation:popIn var(--motion-settle) cubic-bezier(.175, .885, .32, 1.275) forwards}.animate-float{animation:3s ease-in-out infinite float}@keyframes mascotBlink{0%,92%,to{transform:scaleY(1)}96%{transform:scaleY(.12)}}.animate-mascot-idle{transform-origin:bottom;animation:3.5s ease-in-out infinite mascotBreathe}.animate-mascot-eye{transform-origin:80px 72px;animation:4.5s ease-in-out infinite mascotBlink}.animate-cell-settle{animation:.22s cubic-bezier(.175,.885,.32,1.275) cellSettle}.tactile-btn{transition:transform var(--motion-press), box-shadow var(--motion-press), filter var(--motion-press)!important}.tactile-btn:hover:not(:disabled){filter:brightness(1.03);transform:translateY(-2px)}.tactile-btn:active:not(:disabled){transform:translateY(2px)!important;box-shadow:0 1px #0003!important}.level-card-hover{transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s,border-color .15s!important}.level-card-hover:hover{transform:translateY(-4px)scale(1.012);box-shadow:0 10px 24px #1b4d3e24!important}.surface-handmade-paper{border:2px solid var(--border-craft);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);background-color:#fffdf9;background-image:radial-gradient(#d9cbb6 .75px,#0000 .75px);background-size:16px 16px}@media print{body{background:#fff!important}.no-print{display:none!important}.print-only{display:block!important}.certificate-print-area{box-shadow:none!important;border:none!important;width:100%!important;max-width:100%!important;margin:0!important;padding:0!important}}