*{box-sizing:border-box}html,body{min-height:100%;margin:0}body{color:#e8e8ec;background:#14151a;flex-direction:column;font-family:-apple-system,Hiragino Sans,Yu Gothic,system-ui,sans-serif;display:flex}button{font-family:inherit}.app-shell{flex-direction:column;min-height:100vh;display:flex}header{flex-shrink:0;justify-content:space-between;align-items:center;min-height:2.5rem;padding:.6rem 1rem;display:flex}.brand{color:inherit;font-size:1.1rem;font-weight:600;line-height:1;text-decoration:none}.brand:hover{opacity:.8}#settings-btn{cursor:pointer;color:inherit;background:0 0;border:none;padding:0;font-size:1.3rem;line-height:1}footer{color:#6b6c76;flex-shrink:0;justify-content:center;align-items:center;height:2.25rem;font-size:.8rem;display:flex}.drawing-app{flex-direction:column;flex:1;min-height:0;display:flex}.progress-bar-container{background:#2a2b33;flex-shrink:0;height:4px}.progress-bar{background:#7fd1ae;width:100%;height:100%;transition:width .1s linear}#stage{flex:1;justify-content:center;align-items:center;min-height:0;padding:.5rem 1rem 1rem;display:flex;position:relative}#frame{background:#1a1b21;border:2px solid #2a2b33;border-radius:16px;justify-content:center;align-items:center;width:100%;height:100%;padding:1rem;display:flex;overflow:hidden}#frame img{object-fit:contain;-webkit-user-select:none;user-select:none;max-width:100%;max-height:100%;transition:transform .15s}#frame img.flipped{transform:scaleX(-1)}#empty-state{text-align:center;color:#9a9aa5;line-height:1.8}#empty-state button{margin-top:.5rem}#start-panel{text-align:center;max-width:420px;padding:0 1rem}#start-panel h2{margin-top:0;font-size:1.3rem}#start-panel p{color:#9a9aa5;margin-bottom:1.4rem;line-height:1.6}#start-btn{color:#14151a;cursor:pointer;background:#7fd1ae;border:1px solid #7fd1ae;border-radius:6px;padding:.7rem 2.5rem;font-size:1.05rem;font-weight:600}#start-btn:hover{background:#6bc19c}#controls{flex-shrink:0;justify-content:center;gap:.75rem;padding:.8rem 1rem 1.2rem;display:flex}#controls[hidden]{display:none}#controls button{color:#e8e8ec;cursor:pointer;background:#1d1e25;border:1px solid #33343e;border-radius:999px;width:3rem;height:3rem;font-size:1.2rem}#controls button:hover{background:#292a34}#controls .play-pause-btn{color:#14151a;background:#7fd1ae;border-color:#7fd1ae}#controls .play-pause-btn:hover{background:#6bc19c}.modal-overlay{z-index:10;background:#0009;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal-overlay[hidden]{display:none}.modal-panel{text-align:left;background:#1d1e25;border:1px solid #33343e;border-radius:12px;min-width:300px;padding:1.5rem;box-shadow:0 20px 50px #00000073}.modal-panel h2{margin-top:0;font-size:1.1rem}.modal-header{border-bottom:1px solid #2a2b33;justify-content:space-between;align-items:center;margin-bottom:.9rem;padding-bottom:.9rem;display:flex}.modal-header h2{margin:0}.modal-close{color:#9a9aa5;cursor:pointer;background:0 0;border:none;border-radius:999px;width:2rem;height:2rem;font-size:1.4rem;line-height:1}.modal-close:hover{color:#e8e8ec;background:#292a34}.settings-row{justify-content:space-between;align-items:center;gap:1rem;margin:.9rem 0;display:flex}.settings-row span{color:#c7c7cf;font-size:.95rem}.settings-row select{color:#e8e8ec;cursor:pointer;background:#14151a;border:1px solid #33343e;border-radius:8px;padding:.45rem .7rem;font-size:.95rem;transition:border-color .15s}.settings-row select:hover{border-color:#454652}.settings-row select:focus{border-color:#7fd1ae;outline:none}.settings-footer{text-align:center;border-top:1px solid #2a2b33;margin-top:1.1rem;padding-top:1rem}.settings-footer a{color:#9a9aa5;font-size:.85rem;text-decoration:none}.settings-footer a:hover{color:#e8e8ec;text-decoration:underline}.page{flex:1;max-width:640px;margin:0 auto;padding:3rem 1.5rem;line-height:1.8}.page h1{margin-bottom:1.5rem;font-size:1.4rem}.page h2{color:#c7c7cf;margin-bottom:.5rem;font-size:1.05rem}.page p{color:#d0d0d6;margin:.5rem 0 1.2rem}.page a{color:#7fd1ae}