html,body{margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}*{box-sizing:border-box}
:root{--sidebar-width:240px;--gap-size:1rem;--container-padding:.5rem;--border-radius:15px;--canvas-max-width:800px;--canvas-max-height:600px}.container{width:100%;max-width:100vw;padding:var(--container-padding);box-sizing:border-box}.main{grid-template-columns:var(--sidebar-width)1fr;gap:var(--gap-size);box-sizing:border-box;width:100%;display:grid}.sidebar{gap:var(--gap-size);flex-direction:column;max-height:100vh;display:flex;overflow-y:auto}.content{gap:var(--gap-size);flex-direction:column;min-height:0;display:flex}.canvasWrapper{justify-content:center;align-items:center;width:100%;height:100%;min-height:400px;display:flex;position:relative}.canvas{border-radius:calc(var(--border-radius)*.8);width:100%;height:100%;display:block;box-shadow:0 4px 20px #0000001a}.result{border-radius:calc(var(--border-radius)*.8);padding:calc(var(--gap-size)*.8);background:#f8f9fa;flex-direction:column;flex:1;min-height:0;display:flex;box-shadow:0 4px 15px #0000000d}.guessText{padding:calc(var(--gap-size)*.8);color:#333;background:#fff;border-radius:8px;flex:1;justify-content:center;align-items:center;min-height:3rem;margin-bottom:0;font-size:1rem;display:flex;box-shadow:inset 0 2px 4px #0000000f}@media (min-width:1920px){:root{--sidebar-width:280px;--gap-size:1.2rem;--container-padding:.8rem;--canvas-max-width:1000px;--canvas-max-height:700px}}@media (min-width:1440px) and (max-width:1919px){:root{--sidebar-width:260px;--gap-size:1.1rem;--container-padding:.7rem;--canvas-max-width:900px;--canvas-max-height:650px}}@media (min-width:1024px) and (max-width:1439px){:root{--sidebar-width:240px;--gap-size:1rem;--container-padding:.6rem;--canvas-max-width:800px;--canvas-max-height:600px}}@media (min-width:768px) and (max-width:1023px){:root{--sidebar-width:220px;--gap-size:.9rem;--container-padding:.5rem;--canvas-max-width:700px;--canvas-max-height:500px}.main{grid-template-columns:var(--sidebar-width)1fr}}@media (min-width:480px) and (max-width:767px){:root{--container-padding:.2rem;--gap-size:.5rem}.main{padding:calc(var(--gap-size)*.8);grid-template-rows:auto 1fr;grid-template-columns:1fr}.sidebar{gap:calc(var(--gap-size)*.5);grid-template-columns:repeat(auto-fit,minmax(200px,1fr));display:grid}.result{grid-column:1/-1}}@media (max-width:479px){:root{--container-padding:.1rem;--gap-size:.4rem}.main{padding:calc(var(--gap-size)*.8);grid-template-rows:auto 1fr;grid-template-columns:1fr}.sidebar{gap:calc(var(--gap-size)*.5);flex-direction:column;display:flex}.toolGroup{margin-bottom:calc(var(--gap-size)*.5)}}@media (max-width:319px){:root{--container-padding:.05rem;--gap-size:.3rem}.title{font-size:1.2rem}.subtitle{font-size:.6rem}.main,.sidebar{gap:.3rem;padding:.3rem}.toolGroup{gap:.2rem}.toolLabel{font-size:.75rem}.toolModeButton{padding:.2rem .4rem;font-size:.7rem}.brushSizeControl{gap:.3rem}.brushSizeValue{min-width:25px;font-size:.75rem}.canvas{width:100%;height:auto}.button{padding:.4rem .6rem;font-size:.75rem}.colorPresets{gap:.2rem}.colorPreset{width:20px;height:20px}.topicDisplay{min-width:140px;padding:.5rem}.topicText{font-size:1rem}.guessText{min-height:2.5rem;font-size:.9rem}}@media (aspect-ratio:16/9){.canvas{max-width:60vw;max-height:40vh}}@media (aspect-ratio:4/3){.canvas{max-width:70vw;max-height:50vh}}@media (aspect-ratio:3/2){.canvas{max-width:65vw;max-height:45vh}}@media (aspect-ratio:1){.canvas{max-width:80vw;max-height:60vh}}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){.canvas{image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges}}@media (hover:none) and (pointer:coarse){.button{min-width:44px;min-height:44px}.toolModeButton{min-height:44px}.colorPreset{min-width:44px;min-height:44px}.brushSlider{height:8px}.brushSlider::-webkit-slider-thumb{width:24px;height:24px}}