:root{--bg-primary: #f7f7f7;--bg-secondary: #ffffff;--sidebar-bg: #f0f0f0;--text-primary: #111111;--text-secondary: #666666;--border-color: #e0e0e0;--grid-line: rgba(0, 0, 0, .09);--grid-dot: rgba(0, 0, 0, .58);--accent: #111111;--accent-hover: #333333;--accent-light: rgba(0, 0, 0, .07);--accent-soft: rgba(0, 0, 0, .04);--error: #d93025;--success: #1e8e3e;--modal-bg: #ffffff;--modal-shadow: rgba(0, 0, 0, .12);--sidebar-w: 280px;--radius: 20px;--radius-md: 14px;--radius-sm: 10px;--radius-pill: 100px;--transition-fast: .15s ease;--transition-base: .2s ease;--transition-slow: .3s ease;--font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif}@media (prefers-color-scheme: dark){:root:not([data-theme=light]){--bg-primary: #141414;--bg-secondary: #1e1e1e;--sidebar-bg: #1a1a1a;--text-primary: #f0f0f0;--text-secondary: #999999;--border-color: #2e2e2e;--grid-line: rgba(255, 255, 255, .07);--grid-dot: rgba(255, 255, 255, .6);--accent: #eeeeee;--accent-hover: #ffffff;--accent-light: rgba(255, 255, 255, .09);--accent-soft: rgba(255, 255, 255, .04);--modal-bg: #242424;--modal-shadow: rgba(0, 0, 0, .5)}}:root[data-theme=dark]{--bg-primary: #141414;--bg-secondary: #1e1e1e;--sidebar-bg: #1a1a1a;--text-primary: #f0f0f0;--text-secondary: #999999;--border-color: #2e2e2e;--grid-line: rgba(255, 255, 255, .07);--grid-dot: rgba(255, 255, 255, .6);--accent: #eeeeee;--accent-hover: #ffffff;--accent-light: rgba(255, 255, 255, .09);--accent-soft: rgba(255, 255, 255, .04);--modal-bg: #242424;--modal-shadow: rgba(0, 0, 0, .5)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;overflow:hidden;-webkit-text-size-adjust:100%;scroll-behavior:smooth}body{font-family:var(--font-family);font-size:1rem;line-height:1.5;color:var(--text-primary);background-color:var(--bg-primary);overflow:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#app{display:flex;width:100vw;height:100vh;overflow:hidden}h1,h2,h3,h4,h5,h6{font-weight:800;line-height:1.2;letter-spacing:-.02em;color:var(--text-primary)}p{line-height:1.6;color:var(--text-secondary)}button{font-family:var(--font-family);font-size:inherit;cursor:pointer;border:none;background:none;padding:0;line-height:1}input,select,textarea{font-family:var(--font-family);font-size:inherit;color:var(--text-primary);background:var(--bg-primary);border:1.5px solid var(--border-color);border-radius:var(--radius-sm);outline:none;transition:border-color var(--transition-fast)}input:focus,select:focus,textarea:focus{border-color:var(--accent)}.hidden{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:var(--radius-pill);transition:background var(--transition-fast)}::-webkit-scrollbar-thumb:hover{background:var(--accent-light)}::selection{background:var(--accent-light);color:var(--text-primary)}:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--radius-sm)}svg{display:block;flex-shrink:0}@media (max-width: 767px){input,select,textarea{font-size:16px}button{-webkit-tap-highlight-color:transparent}}#sidebar{width:var(--sidebar-w);flex-shrink:0;background:var(--sidebar-bg);border-right:1px solid var(--border-color);display:flex;flex-direction:column;padding:24px 18px;gap:18px;overflow-y:auto;overflow-x:hidden;transition:width var(--transition-base),padding var(--transition-base),background var(--transition-base)}.sidebar-header{display:flex;flex-direction:column;gap:4px;padding-bottom:4px}.sidebar-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}.sidebar-header-actions{display:flex;align-items:center;gap:4px;flex-shrink:0;padding-top:2px}.btn-icon-sm{width:28px;height:28px;border-radius:var(--radius-sm);border:1.5px solid var(--border-color);background:var(--bg-secondary);color:var(--text-secondary);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:border-color var(--transition-fast),color var(--transition-fast),background var(--transition-fast)}.btn-icon-sm:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-light)}.btn-icon-sm svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}#btn-theme-toggle .icon-sun{display:none}#btn-theme-toggle .icon-moon{display:block}:root[data-theme=dark] #btn-theme-toggle .icon-sun{display:block}:root[data-theme=dark] #btn-theme-toggle .icon-moon{display:none}@media (prefers-color-scheme: dark){:root:not([data-theme=light]) #btn-theme-toggle .icon-sun{display:block}:root:not([data-theme=light]) #btn-theme-toggle .icon-moon{display:none}}.btn-collapse svg{transition:transform var(--transition-base)}#sidebar.collapsed .btn-collapse svg{transform:rotate(180deg)}.sidebar-title{font-size:1.6rem;font-weight:800;letter-spacing:-.03em;color:var(--accent);line-height:1.1}.sidebar-subtitle{font-size:.7rem;color:var(--text-secondary);letter-spacing:.1em;text-transform:uppercase;font-weight:600}.sidebar-divider{height:1px;background:var(--border-color);border:none;margin:0;flex-shrink:0}.sidebar-section-label{font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-secondary);padding:0 4px}.timeline-controls{display:flex;gap:8px}.timeline-controls .icon-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:9px 12px;background:var(--bg-secondary);border:1.5px solid var(--border-color);border-radius:var(--radius-md);color:var(--text-secondary);font-size:.8rem;font-weight:600;cursor:pointer;transition:background var(--transition-fast),border-color var(--transition-fast),color var(--transition-fast),transform var(--transition-fast)}.timeline-controls .icon-btn:hover{background:var(--accent-light);border-color:var(--accent);color:var(--accent);transform:translateY(-1px)}.timeline-controls .icon-btn:active{transform:translateY(0)}.timeline-controls .icon-btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.draw-submode-tabs{display:flex;background:var(--accent-soft);border-radius:var(--radius-pill);padding:3px;gap:2px}.draw-submode-tabs button{flex:1;padding:7px 10px;border-radius:var(--radius-pill);font-size:.82rem;font-weight:700;color:var(--text-secondary);background:transparent;border:none;cursor:pointer;transition:background var(--transition-fast),color var(--transition-fast),box-shadow var(--transition-fast);white-space:nowrap}.draw-submode-tabs button.active{background:var(--bg-secondary);color:var(--accent);box-shadow:0 2px 8px #8b7cf82e}@media (prefers-color-scheme: dark){:root:not([data-theme=light]) .draw-submode-tabs button.active{background:var(--bg-primary)}}:root[data-theme=dark] .draw-submode-tabs button.active{background:var(--bg-primary)}.draw-submode-tabs button:not(.active):hover{background:#8b7cf81f;color:var(--accent)}.confirm-point-area{display:flex;flex-direction:column;gap:8px}.btn-confirm-point{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;background:var(--accent);color:#fff;border:none;border-radius:var(--radius-pill);font-size:.95rem;font-weight:700;cursor:pointer;box-shadow:0 4px 14px #8b7cf866;transition:background var(--transition-fast),transform var(--transition-fast),box-shadow var(--transition-fast)}@media (prefers-color-scheme: dark){:root:not([data-theme=light]) .btn-confirm-point{color:#111}}:root[data-theme=dark] .btn-confirm-point{color:#111}.btn-confirm-point:hover{background:var(--accent-hover);transform:translateY(-2px);box-shadow:0 6px 20px #8b7cf880}.btn-confirm-point:active{transform:translateY(0);box-shadow:0 2px 8px #8b7cf84d}.btn-confirm-point svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}.sidebar-menu{display:flex;flex-direction:column;gap:4px}.menu-btn{width:100%;display:flex;align-items:center;gap:12px;padding:14px 16px;font-size:1.05rem;font-weight:600;color:var(--text-primary);background:transparent;border:none;border-radius:var(--radius-md);cursor:pointer;text-align:left;transition:background var(--transition-fast),color var(--transition-fast),box-shadow var(--transition-fast),transform var(--transition-fast);position:relative}.menu-btn:hover{background:var(--accent-soft);color:var(--accent)}.menu-btn.active{background:var(--accent-light);color:var(--accent);box-shadow:0 2px 8px #8b7cf81f,0 1px #8b7cf814;transform:translateY(-.5px)}.menu-btn:active{transform:translateY(0)}.btn-icon-wrap{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);flex-shrink:0;background:transparent;transition:background var(--transition-fast)}.menu-btn.active .btn-icon-wrap{background:var(--accent-soft)}.btn-svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.btn-label{flex:1;font-size:1.05rem;font-weight:600;line-height:1}.mode-label{font-size:.78rem;color:var(--text-secondary);text-align:center;padding:6px 10px;background:var(--accent-soft);border-radius:var(--radius-sm);font-weight:500;line-height:1.4}.sidebar-footer{margin-top:auto;display:flex;flex-direction:column;gap:10px;padding-top:8px}.btn-danger-text{width:100%;display:flex;align-items:center;justify-content:center;gap:6px;background:transparent;border:1.5px solid var(--border-color);color:var(--text-secondary);padding:8px 14px;border-radius:var(--radius-sm);font-size:.85rem;font-weight:600;cursor:pointer;transition:border-color var(--transition-fast),color var(--transition-fast),background var(--transition-fast)}.btn-danger-text:hover{border-color:var(--error);color:var(--error);background:#ef44440f}.btn-danger-text svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.btn-tutorial-link{display:block;width:100%;background:none;border:none;color:var(--accent);font-size:.82rem;font-weight:600;text-decoration:underline;text-decoration-color:#8b7cf866;cursor:pointer;text-align:center;padding:4px;transition:color var(--transition-fast),text-decoration-color var(--transition-fast)}.btn-tutorial-link:hover{color:var(--accent-hover);text-decoration-color:var(--accent)}.shape-count-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;background:var(--accent);color:#fff;font-size:.72rem;font-weight:700;border-radius:var(--radius-pill);line-height:1;margin-left:auto;flex-shrink:0}@media (prefers-color-scheme: dark){:root:not([data-theme=light]) .shape-count-badge{color:#111}}:root[data-theme=dark] .shape-count-badge{color:#111}#sidebar:after{content:"";display:block;height:1px;flex-shrink:0}:root[data-sidebar-collapsed] #sidebar{animation:none}#sidebar.collapsed{width:64px;padding:20px 10px;gap:12px;overflow:hidden}#sidebar.collapsed .sidebar-title,#sidebar.collapsed .sidebar-subtitle,#sidebar.collapsed .sidebar-section-label,#sidebar.collapsed .draw-submode-tabs,#sidebar.collapsed .confirm-point-area,#sidebar.collapsed #mode-label,#sidebar.collapsed .btn-tutorial-link,#sidebar.collapsed .btn-danger-text>span{display:none}#sidebar.collapsed .sidebar-title-row{justify-content:center}#sidebar.collapsed .sidebar-header-actions{flex-direction:column;gap:6px}#sidebar.collapsed .menu-btn{justify-content:center;padding:12px 8px}#sidebar.collapsed .menu-btn>span:not(.btn-icon-wrap){display:none}#sidebar.collapsed .timeline-controls{flex-direction:column;gap:6px}#sidebar.collapsed .timeline-controls .icon-btn{padding:9px;justify-content:center}#sidebar.collapsed .sidebar-footer{align-items:center;padding-top:4px}#sidebar.collapsed .btn-danger-text{width:auto;padding:10px;justify-content:center;min-width:0}@media (min-width: 768px) and (max-width: 1023px){:root{--sidebar-w: 220px}}@media (max-width: 767px){#sidebar{position:fixed;top:0;left:0;height:100%;width:280px!important;z-index:300;transform:translate(-100%);animation:none;transition:transform .25s cubic-bezier(.4,0,.2,1);box-shadow:4px 0 24px #0000002e}#sidebar.mobile-open{transform:translate(0)}#sidebar.collapsed .sidebar-title,#sidebar.collapsed .sidebar-subtitle,#sidebar.collapsed .draw-submode-tabs,#sidebar.collapsed #mode-label,#sidebar.collapsed .btn-tutorial-link,#sidebar.collapsed .btn-danger-text>span{display:revert}#sidebar.collapsed .menu-btn{justify-content:flex-start;padding:14px 16px}#sidebar.collapsed .menu-btn>span:not(.btn-icon-wrap){display:inline}#sidebar.collapsed .timeline-controls{flex-direction:row;gap:8px}#sidebar.collapsed .timeline-controls .icon-btn{padding:9px 12px}#sidebar.collapsed .sidebar-footer{align-items:stretch}#sidebar.collapsed .btn-danger-text{width:100%;padding:8px 14px;justify-content:flex-start;min-width:unset}#sidebar.collapsed .sidebar-title-row{justify-content:space-between}#sidebar.collapsed .sidebar-header-actions{flex-direction:row;gap:4px}#btn-collapse-sidebar{display:none}}#canvas-area{flex:1;position:relative;overflow:hidden;background:var(--bg-secondary);transition:background var(--transition-base)}#main-canvas{display:block;width:100%;height:100%;cursor:crosshair;touch-action:none;user-select:none;-webkit-user-select:none}#main-canvas.cursor-default{cursor:default}#main-canvas.cursor-move{cursor:move}#main-canvas.cursor-grab{cursor:grab}#main-canvas.cursor-grabbing{cursor:grabbing}#main-canvas.cursor-pointer{cursor:pointer}.canvas-hint{position:absolute;bottom:20px;left:50%;transform:translate(-50%);background:var(--modal-bg);border:1.5px solid var(--border-color);color:var(--text-secondary);padding:8px 20px;border-radius:var(--radius-pill);font-size:.82rem;font-weight:500;pointer-events:none;white-space:nowrap;box-shadow:0 4px 16px var(--modal-shadow);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:opacity var(--transition-slow);z-index:10}.canvas-hint.hidden{opacity:0}#mission-info{position:absolute;top:16px;left:50%;transform:translate(-50%);background:var(--modal-bg);border:1.5px solid var(--accent-light);color:var(--text-primary);padding:8px 20px;border-radius:var(--radius-pill);font-size:.85rem;font-weight:600;box-shadow:0 4px 16px var(--modal-shadow);pointer-events:none;white-space:nowrap;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:10;transition:opacity var(--transition-slow),transform var(--transition-slow)}#mission-info.hidden{opacity:0;pointer-events:none}.canvas-fab-group{position:absolute;bottom:20px;right:20px;display:flex;flex-direction:column;gap:8px;z-index:10}.canvas-fab{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--modal-bg);border:1.5px solid var(--border-color);border-radius:50%;color:var(--text-secondary);cursor:pointer;box-shadow:0 4px 12px var(--modal-shadow);transition:background var(--transition-fast),border-color var(--transition-fast),color var(--transition-fast),transform var(--transition-fast)}.canvas-fab:hover{background:var(--accent-light);border-color:var(--accent);color:var(--accent);transform:scale(1.08)}.canvas-fab:active{transform:scale(.95)}.canvas-fab svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.selection-indicator{position:absolute;pointer-events:none;border:2px dashed var(--accent);border-radius:4px;background:var(--accent-soft);transition:opacity var(--transition-fast);z-index:5}#mode-indicator{position:absolute;top:16px;left:16px;display:flex;align-items:center;gap:7px;background:var(--modal-bg);border:1.5px solid var(--border-color);padding:6px 14px;border-radius:var(--radius-pill);font-size:.78rem;font-weight:700;color:var(--text-secondary);pointer-events:none;box-shadow:0 2px 8px var(--modal-shadow);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:10;transition:opacity var(--transition-fast)}#mode-indicator .mode-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex-shrink:0}.canvas-empty-state{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;pointer-events:none;opacity:.5;z-index:1}.canvas-empty-state svg{width:56px;height:56px;stroke:var(--accent);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.canvas-empty-state p{font-size:.9rem;font-weight:600;color:var(--text-secondary);text-align:center;line-height:1.5}.zoom-controls{position:absolute;bottom:20px;left:20px;display:flex;align-items:center;gap:4px;background:var(--modal-bg);border:1.5px solid var(--border-color);border-radius:var(--radius-md);padding:4px;box-shadow:0 4px 12px var(--modal-shadow);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:10}.zoom-btn{width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);border:none;background:transparent;color:var(--text-secondary);font-size:1rem;font-weight:700;cursor:pointer;transition:background var(--transition-fast),color var(--transition-fast)}.zoom-btn:hover{background:var(--accent-soft);color:var(--accent)}.zoom-level{font-size:.75rem;font-weight:700;color:var(--text-secondary);padding:0 6px;min-width:44px;text-align:center}.mobile-menu-fab{display:none;position:absolute;top:12px;left:12px;z-index:50;width:40px;height:40px;background:var(--modal-bg);border:1.5px solid var(--border-color);border-radius:50%;color:var(--text-secondary);cursor:pointer;align-items:center;justify-content:center;box-shadow:0 4px 12px var(--modal-shadow);transition:background var(--transition-fast),border-color var(--transition-fast),color var(--transition-fast),transform var(--transition-fast)}.mobile-menu-fab:hover{background:var(--accent-light);border-color:var(--accent);color:var(--accent);transform:scale(1.08)}.mobile-menu-fab svg{width:18px;height:18px;stroke:currentColor;flex-shrink:0}.sidebar-backdrop{display:none;position:fixed;top:0;right:0;bottom:0;left:0;background:#00000073;z-index:299;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}@media (max-width: 767px){.mobile-menu-fab{display:flex}.sidebar-backdrop:not(.hidden){display:block}#mode-indicator{left:64px}#mission-info{top:64px;max-width:calc(100% - 40px);white-space:normal;text-align:center}.canvas-hint{white-space:normal;text-align:center;max-width:calc(100% - 48px);left:50%;transform:translate(-50%);padding:8px 16px;bottom:16px;font-size:.78rem}.zoom-btn{width:36px;height:36px}.canvas-fab{width:44px;height:44px}}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000059;display:flex;align-items:center;justify-content:center;z-index:200;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);padding:20px}.modal-overlay.hidden{display:none}.modal-card{background:var(--modal-bg);border-radius:var(--radius);box-shadow:0 24px 64px var(--modal-shadow),0 0 0 1px var(--border-color);width:480px;max-width:calc(100vw - 40px);max-height:calc(100vh - 40px);overflow-y:auto;padding:28px;display:flex;flex-direction:column;gap:20px;animation:slideUp .25s cubic-bezier(.175,.885,.32,1.275) both;position:relative}.modal-header{display:flex;align-items:center;justify-content:space-between;gap:12px}.modal-title{font-size:1.2rem;font-weight:800;color:var(--text-primary);letter-spacing:-.02em;line-height:1.2}.modal-close-btn{width:32px;height:32px;flex-shrink:0;border-radius:50%;border:1.5px solid var(--border-color);background:var(--bg-primary);color:var(--text-secondary);font-size:.8rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color var(--transition-fast),color var(--transition-fast),background var(--transition-fast)}.modal-close-btn:hover{border-color:var(--error);color:var(--error);background:#ef44440f}.modal-desc{font-size:.85rem;color:var(--text-secondary);margin-top:-8px;line-height:1.5}.blocks-container{display:flex;flex-direction:column;gap:10px}.transform-block{border-radius:var(--radius-md);border:2px solid var(--border-color);padding:12px 16px;display:flex;flex-direction:column;gap:10px;transition:border-color var(--transition-base),background var(--transition-base);background:var(--bg-secondary)}.transform-block:has(#use-translate:checked){border-color:#3b82f6;background:#3b82f60d}.transform-block:has(#use-flip:checked){border-color:#14b8a6;background:#14b8a60d}.transform-block:has(#use-rotate:checked){border-color:#f59e0b;background:#f59e0b0d}.block-toggle-label{display:flex;align-items:center;gap:10px;cursor:pointer;-webkit-user-select:none;user-select:none}.block-checkbox{width:18px;height:18px;flex-shrink:0;accent-color:var(--accent);cursor:pointer;border-radius:4px}.block-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 14px;border-radius:var(--radius-pill);font-size:.9rem;font-weight:700;flex-shrink:0}.chip-translate{background:#dbeafe;color:#1d4ed8}.chip-flip{background:#ccfbf1;color:#0f766e}.chip-rotate{background:#fef3c7;color:#b45309}@media (prefers-color-scheme: dark){:root:not([data-theme=light]) .chip-translate{background:#8b7cf833;color:#c4b5fd}:root:not([data-theme=light]) .chip-flip{background:#34d39926;color:#6ee7b7}:root:not([data-theme=light]) .chip-rotate{background:#fb923c26;color:#fda762}}:root[data-theme=dark] .chip-translate{background:#8b7cf833;color:#c4b5fd}:root[data-theme=dark] .chip-flip{background:#34d39926;color:#6ee7b7}:root[data-theme=dark] .chip-rotate{background:#fb923c26;color:#fda762}.block-sentence,.block-sub{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-left:28px;transition:opacity var(--transition-fast)}.transform-block:not(:has(.block-checkbox:checked)) .block-sentence,.transform-block:not(:has(.block-checkbox:checked)) .block-sub{opacity:.45}.sent-word{font-size:.9rem;color:var(--text-primary);white-space:nowrap;font-weight:500}.sent-select{padding:6px 10px;border:1.5px solid var(--border-color);border-radius:var(--radius-sm);background:var(--bg-primary);color:var(--text-primary);font-size:.9rem;font-weight:600;cursor:pointer;font-family:var(--font-family);transition:border-color var(--transition-fast);-moz-appearance:none;appearance:none;-webkit-appearance:none}.sent-select:focus{border-color:var(--accent);outline:none}.sent-input{width:60px;text-align:center;padding:6px 8px;border:1.5px solid var(--border-color);border-radius:var(--radius-sm);background:var(--bg-primary);color:var(--text-primary);font-size:1rem;font-weight:700;font-family:var(--font-family);transition:border-color var(--transition-fast)}.sent-input:focus{border-color:var(--accent);outline:none}.sent-input.error{border-color:var(--error)}.error-msg{color:var(--error);font-size:.72rem;font-weight:600;display:none;padding-left:28px}.error-msg.visible{display:inline}.modal-footer{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}.btn-primary{background:var(--accent);color:#fff;border:none;padding:10px 22px;border-radius:var(--radius-pill);font-size:.95rem;font-weight:700;cursor:pointer;box-shadow:0 4px 12px #00000040;transition:background var(--transition-fast),transform var(--transition-fast),box-shadow var(--transition-fast);font-family:var(--font-family);line-height:1}@media (prefers-color-scheme: dark){:root:not([data-theme=light]) .btn-primary{color:#111}}:root[data-theme=dark] .btn-primary{color:#111}.btn-primary:hover{background:var(--accent-hover);transform:translateY(-1px);box-shadow:0 6px 20px #0000004d}.btn-primary:active{transform:translateY(0);box-shadow:0 2px 8px #00000026}.btn-secondary{background:var(--bg-primary);color:var(--text-secondary);border:1.5px solid var(--border-color);padding:10px 22px;border-radius:var(--radius-pill);font-size:.95rem;font-weight:600;cursor:pointer;transition:background var(--transition-fast),color var(--transition-fast),border-color var(--transition-fast);font-family:var(--font-family);line-height:1}.btn-secondary:hover{background:var(--accent-light);color:var(--text-primary);border-color:var(--accent)}.btn-wide{width:100%;justify-content:center}.btn-mission-start{background:linear-gradient(135deg,#111,#333);font-size:1rem;padding:12px 28px;box-shadow:0 6px 20px #0000004d;border:none;color:#fff;border-radius:var(--radius-pill);font-weight:700;cursor:pointer;font-family:var(--font-family);transition:transform var(--transition-fast),box-shadow var(--transition-fast),filter var(--transition-fast)}.btn-mission-start:hover{transform:translateY(-2px);box-shadow:0 10px 28px #00000059;filter:brightness(1.05)}.btn-mission-start:active{transform:translateY(0);box-shadow:0 4px 12px #00000026}.btn-danger{background:#ef444414;color:var(--error);border:1.5px solid rgba(239,68,68,.25);padding:10px 16px;border-radius:var(--radius-pill);font-size:.9rem;font-weight:600;cursor:pointer;margin-right:auto;transition:background .15s,border-color .15s;font-family:var(--font-family)}.btn-danger:hover{background:#ef444424;border-color:var(--error)}.shape-select-list{display:flex;flex-direction:column;gap:8px;max-height:250px;overflow-y:auto;padding-right:4px}.shape-select-item{display:flex;align-items:center;gap:12px;width:100%;padding:12px 16px;border:2px solid var(--border-color);border-radius:var(--radius-md);background:var(--bg-secondary);cursor:pointer;text-align:left;font-family:var(--font-family);transition:border-color var(--transition-fast),background var(--transition-fast),transform var(--transition-fast)}.shape-select-item:hover{border-color:var(--accent);background:var(--accent-soft);transform:translate(2px)}.shape-select-item.selected{border-color:var(--accent);background:var(--accent-light)}.shape-item-dot{width:14px;height:14px;border-radius:50%;flex-shrink:0}.shape-item-label{font-weight:600;color:var(--text-primary);flex:1;font-size:.92rem}.shape-item-type{font-size:.75rem;color:var(--text-secondary);background:var(--accent-soft);padding:2px 8px;border-radius:var(--radius-pill);white-space:nowrap;font-weight:500}.shape-select-empty{color:var(--text-secondary);text-align:center;padding:20px;font-size:.88rem}.mission-intro-card{text-align:center;padding:36px 32px;gap:16px}.mission-badge{display:inline-block;background:linear-gradient(135deg,#111,#333);color:#fff;font-size:.8rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:4px 14px;border-radius:var(--radius-pill);margin-bottom:8px}.mission-intro-title{font-size:1.4rem;font-weight:800;color:var(--text-primary);letter-spacing:-.02em;line-height:1.25;margin-bottom:8px}.mission-intro-desc{font-size:.95rem;color:var(--text-secondary);line-height:1.6;max-width:360px;margin:0 auto 16px}.mission-motivation-box{background:var(--accent-soft);border:1.5px dashed var(--accent);border-radius:var(--radius-md);padding:14px 18px;margin-bottom:8px}.mission-motivation-text{font-size:.9rem;color:var(--accent);font-weight:600;line-height:1.5}.success-card{text-align:center;padding:44px 36px;width:380px;max-width:calc(100vw - 40px);gap:12px}.success-stars{font-size:1.5rem;color:var(--accent);letter-spacing:.3em;margin-bottom:4px;line-height:1}.success-title{font-size:1.8rem;font-weight:800;color:var(--text-primary);letter-spacing:-.03em;line-height:1.15}.success-desc{font-size:.95rem;color:var(--text-secondary);line-height:1.6}.success-actions{display:flex;flex-direction:column;gap:10px;width:100%;margin-top:8px}.transform-preview{width:100%;height:120px;background:var(--bg-primary);border-radius:var(--radius-md);border:1.5px solid var(--border-color);overflow:hidden;display:flex;align-items:center;justify-content:center}.transform-preview canvas{display:block}.modal-steps{display:flex;align-items:center;gap:6px;justify-content:center}.modal-step-dot{width:7px;height:7px;border-radius:50%;background:var(--border-color);transition:background var(--transition-base),transform var(--transition-base)}.modal-step-dot.active{background:var(--accent);transform:scale(1.3)}.modal-step-dot.done{background:var(--accent-light)}@media (max-width: 480px){.modal-overlay{padding:12px;align-items:flex-end}.modal-card{padding:20px 16px;border-radius:var(--radius-md);max-height:calc(100vh - 24px);width:100%;max-width:100%}.mission-intro-card{padding:24px 18px}.success-card{padding:28px 18px;width:100%}.modal-footer{flex-direction:column-reverse}.modal-footer .btn-primary,.modal-footer .btn-secondary,.modal-footer .btn-danger{width:100%;justify-content:center;text-align:center}.modal-footer .btn-danger{margin-right:0}.block-sentence,.block-sub{padding-left:12px}}.tutorial-card{width:540px;max-width:calc(100vw - 40px)}.tutorial-body{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;padding:8px 0}.tutorial-icon{width:80px;height:80px;background:var(--accent-soft);border-radius:24px;display:flex;align-items:center;justify-content:center;color:var(--accent);flex-shrink:0;transition:background var(--transition-base),transform var(--transition-slow);animation:popIn .4s cubic-bezier(.175,.885,.32,1.275) both}.tutorial-icon svg{width:48px;height:48px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.tutorial-icon.icon-draw{background:#0000000d;color:#111}.tutorial-icon.icon-select{background:#3b82f61a;color:#3b82f6}.tutorial-icon.icon-move{background:#10b9811a;color:#10b981}.tutorial-icon.icon-transform{background:#f59e0b1a;color:#f59e0b}.tutorial-icon.icon-mission{background:#ec48991a;color:#ec4899}.tutorial-step-badge{font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);background:var(--accent-soft);padding:3px 12px;border-radius:var(--radius-pill);line-height:1.6;flex-shrink:0}.tutorial-step-title{font-size:1.15rem;font-weight:800;color:var(--text-primary);letter-spacing:-.02em;line-height:1.25}.tutorial-step-content{font-size:.92rem;color:var(--text-secondary);line-height:1.7;max-width:400px;margin:0 auto}.tutorial-step-content strong,.tutorial-step-content b{color:var(--text-primary);font-weight:700}.tutorial-step-content code{background:var(--accent-soft);color:var(--accent);padding:1px 6px;border-radius:4px;font-size:.85em;font-family:SF Mono,Fira Code,monospace;font-weight:600}.tutorial-key-hint{display:inline-flex;align-items:center;gap:6px;background:var(--bg-primary);border:1.5px solid var(--border-color);border-radius:var(--radius-sm);padding:6px 14px;font-size:.82rem;font-weight:600;color:var(--text-secondary)}.tutorial-key-hint kbd{display:inline-flex;align-items:center;justify-content:center;background:var(--bg-secondary);border:1.5px solid var(--border-color);border-radius:5px;padding:2px 7px;font-size:.78rem;font-weight:700;color:var(--text-primary);font-family:var(--font-family);box-shadow:0 2px 0 var(--border-color)}.tutorial-progress{display:flex;align-items:center;justify-content:center;gap:8px;padding:4px 0}.tutorial-dot{width:8px;height:8px;border-radius:50%;background:var(--border-color);transition:background var(--transition-base),transform var(--transition-base),width var(--transition-base),border-radius var(--transition-base);flex-shrink:0}.tutorial-dot.active{background:var(--accent);transform:scale(1.25)}.tutorial-dot.done{background:var(--accent-light);width:20px;border-radius:4px}.tutorial-footer{display:flex;align-items:center;justify-content:space-between;gap:10px}.tutorial-footer .btn-secondary{min-width:88px}.tutorial-footer .btn-primary{min-width:110px}.btn-tutorial-skip{background:none;border:none;color:var(--text-secondary);font-size:.82rem;font-weight:500;cursor:pointer;text-decoration:underline;text-decoration-color:transparent;padding:4px;font-family:var(--font-family);transition:color var(--transition-fast),text-decoration-color var(--transition-fast)}.btn-tutorial-skip:hover{color:var(--accent);text-decoration-color:var(--accent)}.tutorial-illustration{width:100%;max-width:360px;height:150px;background:var(--bg-primary);border-radius:var(--radius-md);border:1.5px solid var(--border-color);display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.tutorial-illustration svg{width:100%;height:100%}.tutorial-step-enter{animation:fadeIn .2s ease both}.tutorial-step-exit{animation:fadeIn .2s ease reverse both}.tutorial-highlight{background:var(--accent-soft);border-left:3px solid var(--accent);border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:10px 14px;text-align:left;font-size:.88rem;color:var(--text-primary);font-weight:500;line-height:1.5;margin-top:4px}.tutorial-complete-icon{width:80px;height:80px;background:linear-gradient(135deg,#8b7cf826,#a78bfa26);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--accent);animation:popIn .5s cubic-bezier(.175,.885,.32,1.275) both}.tutorial-complete-icon svg{width:44px;height:44px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-10px)}40%{transform:translate(10px)}60%{transform:translate(-6px)}80%{transform:translate(6px)}}@keyframes slideUp{0%{transform:translateY(24px) scale(.97);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}@keyframes popIn{0%{transform:scale(.75);opacity:0}to{transform:scale(1);opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes slideDown{0%{transform:translateY(-10px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slideInLeft{0%{transform:translate(-20px);opacity:0}to{transform:translate(0);opacity:1}}@keyframes pulse{0%,to{box-shadow:0 0 #0003}50%{box-shadow:0 0 0 8px #0000}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes ping{75%,to{transform:scale(2);opacity:0}}@keyframes bounce{0%,to{transform:translateY(0);animation-timing-function:cubic-bezier(.8,0,1,1)}50%{transform:translateY(-6px);animation-timing-function:cubic-bezier(0,0,.2,1)}}@keyframes drawLine{0%{stroke-dashoffset:1000}to{stroke-dashoffset:0}}@keyframes countUp{0%{transform:translateY(6px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes starBurst{0%{transform:scale(0) rotate(0);opacity:1}80%{transform:scale(1) rotate(360deg);opacity:1}to{transform:scale(1) rotate(360deg);opacity:0}}.shake{animation:shake .4s ease}.pop-in{animation:popIn .4s cubic-bezier(.175,.885,.32,1.275) both}.fade-in{animation:fadeIn .3s ease both}.slide-up{animation:slideUp .25s cubic-bezier(.175,.885,.32,1.275) both}.slide-down{animation:slideDown .2s ease both}.float{animation:float 3s ease-in-out infinite}.spin{animation:spin 1s linear infinite}.bounce-anim{animation:bounce 1s infinite}.delay-100{animation-delay:.1s}.delay-200{animation-delay:.2s}.delay-300{animation-delay:.3s}.delay-400{animation-delay:.4s}.delay-500{animation-delay:.5s}.mission-badge{animation:pulse 2s ease-in-out infinite}.btn-primary{transition:background .15s ease,transform .15s ease,box-shadow .15s ease}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px #00000040}.btn-primary:active{transform:translateY(0);box-shadow:0 2px 8px #0000001f}.menu-btn{transition:background .15s ease,color .15s ease,transform .15s ease,box-shadow .2s ease}.shape-select-item{transition:border-color .15s ease,background .15s ease,transform .15s ease}.transform-block{transition:border-color .2s ease,background .2s ease}.tutorial-icon{animation:popIn .4s cubic-bezier(.175,.885,.32,1.275) both;transition:background .2s ease,transform .3s ease}.canvas-hint{transition:opacity .3s ease}.draw-submode-tabs button{transition:background .15s ease,color .15s ease,box-shadow .15s ease}.success-card{animation:popIn .5s cubic-bezier(.175,.885,.32,1.275) both}.tutorial-body{animation:fadeIn .2s ease both}#sidebar{animation:slideInLeft .3s cubic-bezier(.175,.885,.32,1.275) both}@media (max-width: 767px){#sidebar{animation:none}}.btn-confirm-point{transition:background .15s ease,transform .15s ease,box-shadow .15s ease}.timeline-controls .icon-btn{transition:background .15s ease,border-color .15s ease,color .15s ease,transform .15s ease}.modal-close-btn,.btn-danger-text{transition:border-color .15s ease,color .15s ease,background .15s ease}.tutorial-dot{transition:background .2s ease,transform .2s ease,width .2s ease,border-radius .2s ease}.sent-select,.sent-input{transition:border-color .15s ease}.btn-secondary{transition:background .15s ease,color .15s ease,border-color .15s ease}.btn-mission-start{transition:transform .15s ease,box-shadow .15s ease,filter .15s ease}