:root{--bg-color: #E2E8F0;--black: #0F172A;--white: #FFFFFF;--neon-red: #FF2E2E;--neon-green: #39FF14;--border-thick: 4px solid var(--black);--border-thin: 2px solid var(--black);--shadow-sm: 4px 4px 0px var(--current-pen-color, var(--black));--shadow-lg: 8px 8px 0px var(--current-pen-color, var(--black));--shadow-active: 2px 2px 0px var(--current-pen-color, var(--black))}*{box-sizing:border-box}body{margin:0;padding:0;background-color:var(--bg-color);color:var(--black);font-family:Noto Sans JP,sans-serif;display:flex;flex-direction:column;min-height:100vh}h1,h2,h3,.brutal-btn,label{font-family:Space Grotesk,Noto Sans JP,sans-serif;text-transform:uppercase;margin:0}.header-nav{position:relative;display:flex;justify-content:flex-end;align-items:center;padding:15px 30px;background-color:var(--neon-green);border-bottom:var(--border-thick);min-height:80px}.giant-logo{position:absolute;top:-10px;left:30px;font-size:6rem;font-weight:900;letter-spacing:-4px;transform:rotate(-6deg);color:var(--current-pen-color, var(--white));text-shadow:6px 6px 0px var(--black);-webkit-text-stroke:2px var(--black);z-index:1000;pointer-events:none;white-space:nowrap}.tabs{display:flex;gap:15px}#app-content{flex:1;padding:30px;display:flex;flex-direction:column;align-items:center}.view{display:none;width:100%;max-width:1600px;flex-direction:column;align-items:center;gap:30px}.view.active{display:flex}.theme-bar{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:1380px;padding:15px 30px;background:var(--white);border:var(--border-thick);box-shadow:var(--shadow-sm);transform:rotate(-1.5deg) translateY(-5px);z-index:10}.workspace{display:flex;flex-direction:row;gap:40px;justify-content:center;width:100%}.canvas-container{position:relative;width:800px;height:600px;background-color:transparent;flex-shrink:0;border-right:var(--border-thick)}canvas#bg-canvas,canvas#fg-canvas{position:absolute;top:0;left:0;width:800px;height:600px;touch-action:none}#fg-canvas{cursor:crosshair}.sidebar{display:flex;flex-direction:column;gap:30px;width:250px;flex-shrink:0}.toolbar,#color-picker-container{padding:20px;background-color:var(--white);border:var(--border-thick);box-shadow:var(--shadow-sm)}.toolbar h3,#color-picker-container h3{margin-bottom:15px;border-bottom:var(--border-thin);padding-bottom:5px}.tool-group{display:flex;gap:10px;margin-bottom:15px}.tool-group .brutal-btn{flex:1}.cp-tab-btn{border:var(--border-thin)}.cp-view{display:none}.cp-view.active{display:flex;justify-content:center}.preset-btn{height:30px;border:2px solid var(--black);cursor:pointer;transition:transform .1s}.preset-btn:hover{transform:scale(1.1);box-shadow:2px 2px #00000080}.cp-wrapper{display:flex;justify-content:center;align-items:center}#cp-hue-sat{touch-action:none;cursor:crosshair;border-radius:50%;border:2px solid var(--black);background-color:#eee}label{font-weight:700;font-size:.9rem}input[type=text],input[type=number]{width:100%;padding:8px;font-family:Space Grotesk,Noto Sans JP,sans-serif;font-size:1.2rem;font-weight:900;border:var(--border-thick);background-color:var(--white);box-shadow:inset 4px 4px #0000001a;outline:none;transition:all .1s}input[type=text]:focus,input[type=number]:focus{background-color:#f8f9fa;box-shadow:inset 4px 4px #0003,0 0 0 2px var(--neon-green)}input[type=range]{-webkit-appearance:none;width:100%;height:16px;border:2px solid var(--black);border-radius:8px;background-color:var(--white);margin-top:5px;cursor:grab}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:24px;height:24px;border-radius:50%;background:var(--white);border:4px solid var(--black);cursor:pointer;box-shadow:2px 2px 0 var(--black);transition:transform .1s}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:var(--white);border:4px solid var(--black);cursor:pointer;box-shadow:2px 2px 0 var(--black);transition:transform .1s}input[type=range]::-moz-range-thumb:hover{transform:scale(1.2)}#brush-size{background:linear-gradient(to right,#ccc 0%,var(--black) 100%)}.brutal-box{background-color:var(--white);border:var(--border-thick);box-shadow:var(--shadow-sm)}.pad-20{padding:30px;width:100%}.brutal-btn{background-color:var(--white);border:var(--border-thick);box-shadow:var(--shadow-sm);font-weight:900;cursor:pointer;padding:10px 15px;font-size:1rem;transition:transform .1s,box-shadow .1s}.brutal-btn:hover{transform:translate(-3px,-3px) rotate(0)!important;box-shadow:var(--shadow-lg)}.brutal-btn:active{transform:translate(2px,2px) rotate(0)!important;box-shadow:var(--shadow-active)}.brutal-btn.active{background-color:var(--black);color:var(--white)}.brutal-btn.accent-red{background-color:var(--neon-red);color:var(--white)}.brutal-btn.accent-red:hover{background-color:#ff4747}.brutal-btn.accent-green{background-color:var(--neon-green);color:var(--black)}.brutal-btn.accent-green:hover{background-color:#5f3}.tab-btn:nth-child(1){transform:rotate(-2deg) translateY(2px)}.tab-btn:nth-child(2){transform:rotate(1.5deg)}.tab-btn:nth-child(3){transform:rotate(-1deg) translateY(-3px)}.tab-btn:nth-child(4){transform:rotate(2.5deg) translateY(1px)}.tool-group .brutal-btn:first-child{transform:rotate(-2.5deg) translate(-2px)}.tool-group .brutal-btn:last-child{transform:rotate(2deg) translateY(3px)}.cp-tab-btn:nth-child(1){transform:rotate(-2deg) translateY(1px)}.cp-tab-btn:nth-child(2){transform:rotate(1.5deg) translateY(-2px)}.cp-tab-btn:nth-child(3){transform:rotate(-1deg) translate(2px)}#canvas-size{transform:rotate(-1.5deg) translate(3px)}#cp-presets .preset-btn:nth-child(1){transform:rotate(3deg)}#cp-presets .preset-btn:nth-child(1):hover{transform:rotate(3deg) scale(1.1)}#cp-presets .preset-btn:nth-child(2){transform:rotate(-2.5deg)}#cp-presets .preset-btn:nth-child(2):hover{transform:rotate(-2.5deg) scale(1.1)}#cp-presets .preset-btn:nth-child(3){transform:rotate(4deg) translateY(-2px)}#cp-presets .preset-btn:nth-child(3):hover{transform:rotate(4deg) translateY(-2px) scale(1.1)}#cp-presets .preset-btn:nth-child(4){transform:rotate(-3.5deg)}#cp-presets .preset-btn:nth-child(4):hover{transform:rotate(-3.5deg) scale(1.1)}#cp-presets .preset-btn:nth-child(5){transform:rotate(1.5deg) translate(2px)}#cp-presets .preset-btn:nth-child(5):hover{transform:rotate(1.5deg) translate(2px) scale(1.1)}#cp-presets .preset-btn:nth-child(6){transform:rotate(-2deg)}#cp-presets .preset-btn:nth-child(6):hover{transform:rotate(-2deg) scale(1.1)}#cp-presets .preset-btn:nth-child(7){transform:rotate(2.5deg) translateY(2px)}#cp-presets .preset-btn:nth-child(7):hover{transform:rotate(2.5deg) translateY(2px) scale(1.1)}#cp-presets .preset-btn:nth-child(8){transform:rotate(-1deg) translate(-2px)}#cp-presets .preset-btn:nth-child(8):hover{transform:rotate(-1deg) translate(-2px) scale(1.1)}#btn-save{transform:rotate(1.5deg) translate(-4px)}#btn-download{transform:rotate(-1.5deg) translate(4px) translateY(4px)}.theme-bar h2{transform:rotate(1deg);letter-spacing:-1px}#current-theme span{display:inline-block;margin-left:25px}#refresh-theme-btn{transform:rotate(3deg)}@media screen and (orientation: landscape) and (hover: none) and (pointer: coarse){.header-nav{padding:4px 15px;min-height:0}.giant-logo{font-size:2rem;top:-3px;left:15px;letter-spacing:-2px;transform:rotate(-4deg)}.tabs{gap:8px}#app-content{overflow:hidden;padding:10px 15px;align-items:center}.view{gap:10px;align-items:center}.workspace{width:100%;justify-content:center;margin:0}}@media screen and (max-width: 900px){.header-nav{flex-direction:column;align-items:center;justify-content:center;padding:15px 10px;min-height:auto}.giant-logo{position:relative;top:auto;left:auto;font-size:3.5rem;margin-bottom:20px;letter-spacing:-2px;text-align:center;transform:rotate(-3deg)}.tabs{flex-wrap:wrap;justify-content:center}}@media screen and (orientation: portrait) and (hover: none) and (pointer: coarse){body:before{content:"端末を横にして使用してください\a(Please rotate your device)";white-space:pre-wrap;position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:var(--neon-red);color:var(--white);display:flex;justify-content:center;align-items:center;font-size:2rem;font-weight:900;text-align:center;z-index:999999;padding:20px}#app-content,.header-nav{display:none!important}}