*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}:root{--bg: #ffffff;--toolbar-bg: rgba(255, 255, 255, .92);--toolbar-border: rgba(0, 0, 0, .08);--text: #2c2c2c;--text-muted: #888;--accent-human: #e8a84c;--accent-ai: #5b9bd5;--radius: 12px;--shadow: 0 2px 16px rgba(0,0,0,.08)}html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;color:var(--text);cursor:crosshair}#draw-canvas{display:block;width:100%;height:100%;touch-action:none}.toolbar-panel{background:var(--toolbar-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--toolbar-border);border-radius:var(--radius);box-shadow:var(--shadow);z-index:100;-webkit-user-select:none;user-select:none}#toolbar-left{position:fixed;left:16px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 8px;background:var(--toolbar-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--toolbar-border);border-radius:var(--radius);box-shadow:var(--shadow);z-index:100;-webkit-user-select:none;user-select:none}#color-palette{display:flex;flex-direction:column;align-items:center;gap:6px}.toolbar-divider-h{width:22px;height:1px;background:var(--toolbar-border);margin:4px 0}.toolbar-divider-v{width:1px;height:18px;background:var(--toolbar-border);margin:0 2px}#thickness-picker{display:flex;flex-direction:column;align-items:center;gap:2px}.color-swatch{width:22px;height:22px;border-radius:50%;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;border:2px solid transparent;flex-shrink:0}.color-swatch:hover{transform:scale(1.15)}.color-swatch.active{border-color:var(--text);box-shadow:0 0 0 2px #00000026;transform:scale(1.1)}#custom-color{width:22px;height:22px;border:none;border-radius:50%;cursor:pointer;padding:0;background:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}#custom-color::-webkit-color-swatch-wrapper{padding:0}#custom-color::-webkit-color-swatch{border:2px dashed #ccc;border-radius:50%}.thickness-btn{width:32px;height:32px;border:none;border-radius:8px;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s ease}.thickness-btn:hover{background:#0000000f}.thickness-btn.active{background:#0000001a}.thickness-dot{display:block;border-radius:50%;background:var(--text)}.action-btn{display:flex;align-items:center;gap:5px;border:none;border-radius:8px;background:transparent;color:var(--text);cursor:pointer;padding:6px 8px;font-size:13px;transition:background .15s ease;white-space:nowrap}.action-btn:hover{background:#0000000f}.action-btn:disabled{opacity:.3;cursor:default}#toolbar-top-right{position:fixed;top:16px;right:16px;display:flex;align-items:center;gap:8px;z-index:100}.export-group{position:relative}.export-btn{background:var(--toolbar-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--toolbar-border)!important;border-radius:var(--radius)!important;box-shadow:var(--shadow);padding:7px 11px!important;font-size:13px;font-weight:500;color:var(--text)}.export-btn:hover{background:#fffffffa!important;border-color:#00000024!important}#export-chevron{opacity:.5;transition:transform .2s ease,opacity .2s ease}.export-group.open #export-chevron{transform:rotate(180deg);opacity:.8}.dropdown-menu{position:absolute;top:calc(100% + 6px);right:0;background:#fffffffa;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--toolbar-border);border-radius:var(--radius);box-shadow:0 4px 24px #0000001f;min-width:160px;overflow:hidden;z-index:200;animation:dropdown-in .15s ease}@keyframes dropdown-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.dropdown-menu.hidden{display:none}.dropdown-menu button{display:flex;align-items:center;gap:8px;width:100%;padding:10px 14px;border:none;background:none;text-align:left;cursor:pointer;font-size:13px;color:var(--text);transition:background .12s ease}.dropdown-menu button:hover{background:#0000000d}.ai-btn{background:linear-gradient(135deg,var(--accent-ai),#7b68ee);color:#fff;padding:8px 14px!important;font-weight:500;font-size:13px;border-radius:var(--radius)!important;box-shadow:0 2px 12px #5b9bd559}.ai-btn:hover{filter:brightness(1.08);background:linear-gradient(135deg,var(--accent-ai),#7b68ee)!important}.ai-btn:disabled{opacity:.6;filter:none;cursor:default}.ai-btn.loading{animation:pulse-ai 1.5s ease-in-out infinite}@keyframes pulse-ai{0%,to{opacity:1}50%{opacity:.65}}#toolbar-bottom-right{position:fixed;bottom:16px;right:16px;display:flex;align-items:center;gap:2px;padding:5px 8px;background:var(--toolbar-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--toolbar-border);border-radius:var(--radius);box-shadow:var(--shadow);z-index:100}#status-indicator{position:fixed;top:20px;left:50%;transform:translate(-50%);z-index:100;-webkit-user-select:none;user-select:none;pointer-events:none}#status-text{font-size:13px;font-weight:500;color:var(--text-muted);letter-spacing:.01em;transition:color .25s ease,opacity .25s ease}#status-indicator.ai-turn #status-text{color:var(--accent-ai)}#commentary-box{position:fixed;bottom:20px;left:50%;transform:translate(-50%);width:560px;min-height:48px;padding:12px 18px;background:var(--toolbar-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--toolbar-border);border-radius:var(--radius);box-shadow:var(--shadow);z-index:100;-webkit-user-select:none;user-select:none}#commentary-box.hidden{display:none}#commentary-text{font-size:14px;font-style:italic;color:var(--accent-ai);line-height:1.55;display:block}#timeline-strip{display:none}#timelapse-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000d9;z-index:200;display:flex;flex-direction:column;align-items:center;justify-content:center}#timelapse-overlay.hidden{display:none}#timelapse-header{display:flex;align-items:center;gap:16px;color:#fff;font-size:14px;margin-bottom:12px}#timelapse-header .action-btn{color:#fff;border:1px solid rgba(255,255,255,.3)}#timelapse-canvas{max-width:80vw;max-height:60vh;border-radius:8px;background:var(--bg)}#timelapse-progress-bar{width:80vw;max-width:800px;height:6px;background:#ffffff26;border-radius:3px;margin-top:16px;overflow:hidden;display:flex}#timelapse-progress-fill{height:100%;width:0%;background:var(--accent-human);transition:width .1s linear,background .3s ease}#timelapse-author-label{color:#fff;font-size:13px;margin-top:8px;min-height:20px;opacity:.7}.pen-cursor{position:fixed;width:10px;height:10px;border-radius:50%;pointer-events:none;z-index:50;transition:left .03s linear,top .03s linear;box-shadow:0 0 6px #0003}@media(max-width:768px){#toolbar-left{left:8px;top:auto;bottom:70px;transform:none}#toolbar-top-right{top:10px;right:10px}#toolbar-bottom-right{bottom:10px;right:10px}#status-indicator{top:12px}#commentary-box{width:calc(100vw - 120px);bottom:60px}}