*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}body{width:100vw;height:100vh;overflow:hidden;font-family:Quicksand,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:#f5f5f5;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.app-container{display:flex;width:100%;height:100%;gap:0}.color-palette{display:grid;grid-template-columns:repeat(2,1fr);justify-items:center;align-content:center;gap:12px;padding:12px;background:#fff;box-shadow:2px 0 10px #0000001a;z-index:1002;flex-shrink:0;position:relative;overflow:hidden;touch-action:manipulation}.color-swatch{width:60px;height:60px;border:4px solid transparent;border-radius:50%;cursor:pointer;transition:all .2s ease;box-shadow:0 4px 8px #0003;touch-action:manipulation}.color-swatch:active{transform:scale(.9)}.color-swatch.active{border-color:#fff}.gradient-swatch{background:conic-gradient(from 0deg at 50% 50%,#ec534e,#f89c45,#f9d24f,#8cc864,#62a2e9,#ab71e1,#ec534e 360deg)!important;position:relative;border-color:#fff!important}.gradient-swatch:after{content:"+";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:28px;font-weight:700;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.3);pointer-events:none}.canvas-container{flex:1;display:flex;justify-content:center;align-items:center;position:relative;width:100%;overflow:hidden}#drawingCanvas{display:block;cursor:crosshair;touch-action:none;width:100%;height:100%;background-color:#fcfbf8;background-image:url(/icons/handmade-paper.png);background-repeat:repeat;outline:none}.clear-container{position:fixed;top:20px;right:-10px;z-index:1000;pointer-events:none}.clear-button{position:relative;width:70px;height:70px;background:linear-gradient(135deg,#ff6b6b,#ee5a6f);border:none;border-radius:50% 0 0 50%;box-shadow:-4px 4px 20px #0000004d;cursor:grab;touch-action:none;display:flex;align-items:center;justify-content:center;transition:box-shadow .2s ease;pointer-events:auto}.clear-button:active{cursor:grabbing}.clear-button.dragging{box-shadow:-6px 6px 30px #0006;transition:none}.clear-button.delete-ready{background:linear-gradient(135deg,#ff3838,#d63031);transform:scale(1.1);box-shadow:-6px 6px 40px #ff383899}.clear-icon{width:32px;height:32px;pointer-events:none;margin-right:2px}.clear-accept-zone{position:fixed;left:0;width:100%;bottom:0;background:#ff383840;pointer-events:none;display:none;z-index:1001}.clear-overlay{position:absolute;left:-100vw;width:120vw;height:110vh;bottom:calc(35px + 110vh);pointer-events:none;z-index:-1;overflow:visible;transition:bottom .3s cubic-bezier(.4,0,.2,1);filter:drop-shadow(0 2px 4px rgba(0,0,0,.15)) drop-shadow(0 1px 2px rgba(0,0,0,.1))}.clear-overlay-inner{width:100%;height:100%;background:#fff;clip-path:polygon(0 0,100% 0,100% 96%,95% 98%,90% 97%,85% 98.5%,80% 97.5%,75% 98%,70% 97%,65% 98%,60% 97.5%,55% 98%,50% 97%,45% 98%,40% 97.5%,35% 98%,30% 97%,25% 98%,20% 97.5%,15% 98%,10% 97%,5% 98%,0 97%)}.clear-overlay.active{bottom:35px}.clear-overlay.accepted{bottom:-110vh;transition:bottom .6s cubic-bezier(.4,0,.2,1)}.clear-overlay.dragging{transition:none}.page-turn-overlay{position:fixed;top:0;left:0;width:200%;height:200%;background:linear-gradient(135deg,#fffffff2,#f5f5f5fa,#fff);transform:translate(-100%,-100%);pointer-events:none;z-index:500;box-shadow:-20px -20px 60px #00000026}.page-turn-overlay.animating{animation:pageTurn .6s cubic-bezier(.4,0,.2,1) forwards}@keyframes pageTurn{0%{transform:translate(-100%,-100%)}to{transform:translate(0)}}.color-picker-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:none;justify-content:center;align-items:center;z-index:1003;touch-action:none}.color-picker-overlay.visible{display:flex}.color-picker-container{background:#fff;border-radius:20px;box-shadow:0 20px 60px #0000004d;padding:20px;max-width:90%;max-height:80%;width:fit-content;height:fit-content;display:flex;flex-direction:column;animation:bounceIn .3s cubic-bezier(.68,-.55,.265,1.55);touch-action:none}@keyframes bounceIn{0%{transform:scale(.3);opacity:0}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}.hexagon-grid{overflow:hidden;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center;touch-action:none;width:fit-content;height:fit-content}.hexagon{cursor:pointer;transition:filter .1s ease,stroke .1s ease,stroke-width .1s ease;pointer-events:all}.hexagon.selected{stroke:#ab71e1!important;stroke-width:4!important;filter:drop-shadow(0 0 4px rgba(171,113,225,.6));paint-order:stroke fill}.hexagon.hover{filter:brightness(1.1);stroke:#333!important;stroke-width:4!important;paint-order:stroke fill}.hexagon.selected.hover{filter:brightness(1.1) drop-shadow(0 0 4px rgba(171,113,225,.6));stroke:#8e44ad!important;stroke-width:4!important;paint-order:stroke fill}@media (orientation: portrait){.color-palette{display:flex;flex-direction:row;justify-content:center;width:100%;height:auto;padding:10px;gap:8px;box-shadow:0 2px 10px #0000001a;overflow-x:hidden;overflow-y:visible;flex-wrap:nowrap}.color-swatch{width:55px;height:55px;flex-shrink:0}.app-container{flex-direction:column;height:100vh;height:100dvh}.canvas-container{flex:1;min-height:0;width:100%}.clear-container{top:90px}.clear-button{width:60px;height:60px}.clear-icon{width:32px;height:32px;margin-right:2px}.color-picker-container{max-width:95%;max-height:75%;width:fit-content;height:fit-content}.actions-panel{left:8px;bottom:8px}}.actions-panel{position:fixed;bottom:8px;left:8px;display:flex;flex-direction:column;gap:8px;z-index:900;transition:left .3s ease}.action-button{width:48px;height:48px;background:#fff;border:2px solid #ddd;border-radius:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #00000026;transition:all .2s ease;touch-action:manipulation;padding:8px}.action-button:hover:not(:disabled){background:#f5f5f5;border-color:#ab71e1;box-shadow:0 4px 12px #ab71e14d}.action-button:active:not(:disabled){transform:scale(.95);background:#ede7f6}.action-button:disabled,.action-button.disabled{opacity:.3;cursor:not-allowed;background:#f5f5f5;border-color:#e0e0e0}.action-icon{width:100%;height:100%;pointer-events:none;filter:invert(12%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(90%)}.action-button:disabled .action-icon,.action-button.disabled .action-icon{filter:invert(80%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(90%)}.parent-help-button{position:fixed;bottom:8px;right:8px;width:48px;height:48px;background:transparent;border:none;cursor:pointer;color:#999;opacity:.4;transition:opacity .2s ease;z-index:900;padding:8px;touch-action:manipulation}.parent-help-button:hover{opacity:.7}.parent-help-button:active{opacity:1}.parent-help-icon{width:100%;height:100%;filter:invert(60%) grayscale(100%)}.parent-help-button:hover .parent-help-icon{filter:invert(40%) grayscale(100%)}.parent-help-button:active .parent-help-icon{filter:invert(0%) grayscale(100%)}.parent-help-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);margin:0;background:#fff;border:none;border-radius:16px;box-shadow:0 8px 32px #0000004d;max-width:500px;width:90%;max-height:80vh;overflow-y:auto;padding:0}.parent-help-modal::backdrop{background:#0009;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.parent-help-content{padding:32px;position:relative}.parent-help-content h2{margin:0 0 20px;font-size:24px;color:#333;font-weight:600}.parent-help-content h3{margin:0 0 12px;font-size:18px;color:#555;font-weight:600}.tab-buttons{display:flex;gap:8px;margin-bottom:24px;border-bottom:2px solid #e0e0e0}.tab-button{flex:1;padding:12px 16px;background:transparent;border:none;border-bottom:3px solid transparent;color:#999;font-size:16px;font-weight:500;cursor:pointer;transition:all .2s ease;margin-bottom:-2px}.tab-button:hover{color:#666;background:#f5f5f5}.tab-button.active{color:#ab71e1;border-bottom-color:#ab71e1}.tab-content{display:none}.tab-content.active{display:block}.help-section{margin-bottom:16px;border:1px solid #e0e0e0;border-radius:8px;overflow:hidden}.help-section:last-of-type{margin-bottom:0}.help-section summary{padding:16px;font-size:18px;font-weight:600;color:#555;cursor:pointer;-webkit-user-select:none;user-select:none;list-style:none;background:#f8f8f8;transition:background .2s ease;display:flex;justify-content:space-between;align-items:center;text-align:left}.help-section summary:hover{background:#f0f0f0}.help-section summary::-webkit-details-marker{display:none}.help-section summary:after{content:"›";font-size:24px;color:#999;transition:transform .2s ease;flex-shrink:0}.help-section[open] summary:after{transform:rotate(90deg)}.summary-text{flex:1;text-align:left}.section-number{color:#ab71e1;margin-right:8px}.install-check{color:#4caf50;font-weight:700;margin-left:8px;font-size:20px}.help-section ol{padding:16px 24px 16px 40px;margin:0;color:#666;line-height:1.8}.parent-help-content>ol{margin:0;padding-left:24px;color:#666;line-height:1.8}.parent-help-content li{margin-bottom:8px}.parent-help-content li:last-child{margin-bottom:0}.parent-help-close{position:absolute;top:16px;right:16px;width:32px;height:32px;background:transparent;border:none;font-size:32px;line-height:32px;color:#999;cursor:pointer;padding:0;transition:color .2s ease}.parent-help-close:hover{color:#666}.sound-settings{margin-bottom:20px;padding:12px 16px;background:#f8f8f8;border-radius:8px}.sound-toggle{display:flex;justify-content:space-between;align-items:center}.sound-label{font-size:14px;font-weight:500;color:#555}.sound-toggle-button{width:36px;height:36px;background:#fff;border:2px solid #ddd;border-radius:50%;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;padding:6px;position:relative}.sound-toggle-button:hover{border-color:#ab71e1;background:#f5f0ff}.sound-toggle-button:active{transform:scale(.95)}.sound-icon{width:100%;height:100%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);transition:opacity .2s ease}.sound-toggle-button .sound-off,.sound-toggle-button.sound-disabled .sound-on{opacity:0}.sound-toggle-button.sound-disabled .sound-off{opacity:1}.parent-help-footer{margin-top:32px;padding-top:20px;border-top:1px solid #e0e0e0;text-align:center;color:#999;font-size:14px}.parent-help-footer p{margin:0 0 8px}.parent-help-footer a{color:#ab71e1;text-decoration:none;font-weight:500}.parent-help-footer a:hover{text-decoration:underline}.github-link{margin:12px 0!important}.github-link a{display:inline-flex;align-items:center;gap:6px;color:#666;font-size:14px;transition:color .2s ease}.github-link a:hover{color:#333;text-decoration:none}.github-icon{width:20px;height:20px;opacity:.8;transition:opacity .2s ease}.github-link a:hover .github-icon{opacity:1}.version-text{font-size:12px;color:#bbb;font-family:Courier New,monospace}