:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}*{box-sizing:border-box}html,body,#root{height:100%;width:100%;margin:0}html,body{overflow:hidden}:root{--bg: #ffffff;--surface: #f6f7fb;--card: #ffffff;--text: #0f172a;--muted: #64748b;--border: rgba(15, 23, 42, .12);--border-strong: rgba(15, 23, 42, .22);--shadow-sm: 0 2px 10px rgba(2, 6, 23, .06);--shadow: 0 10px 30px rgba(2, 6, 23, .08);--accent: #38bdf8;--accent-ink: #020617;--danger: #ef4444;--success: #22c55e;--radius: 12px}.app{height:100vh;width:100vw;display:flex;flex-direction:column;background:var(--bg);color:#fff;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}.dragging-global,.dragging-global *{-webkit-user-select:none!important;user-select:none!important;cursor:grabbing!important}.topbar{position:sticky;top:0;z-index:1000;display:block;padding:.75rem 1.25rem;border-bottom:1px solid rgba(255,255,255,.08);background:#020617eb;overflow:visible}.topbar-scroll{display:flex;gap:.75rem;align-items:center;overflow:auto visible;-webkit-overflow-scrolling:touch;flex-wrap:nowrap;max-width:100%}.topbar-scroll>*{flex:0 0 auto}.project-input{background:#0f172abf;border:1px solid rgba(255,255,255,.32);border-radius:.65rem;padding:.55rem .8rem;color:#fff;min-width:260px;box-shadow:0 0 0 1px #02061759 inset;transition:border-color .15s ease,box-shadow .15s ease,background .15s ease}.project-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px #38bdf859}.project-input::placeholder{color:#fffc}.btn{background:#0f172a6b;border:1px solid rgba(255,255,255,.1);border-radius:.6rem;padding:.42rem .78rem;color:#fff;font-weight:650;font-size:.85rem;cursor:pointer;transition:border-color .15s ease,box-shadow .2s ease,transform .05s ease,background .15s ease}.btn:hover{border-color:#38bdf88c;box-shadow:0 0 0 2px #38bdf840}.btn:active{transform:translateY(1px)}.btn:focus-visible{outline:2px solid rgba(56,189,248,.75);outline-offset:2px}.btn-remove{background:var(--danger);border-color:#ffffff1f}.btn-save{background:var(--success);border-color:#ffffff1f}.btn-remove-active{position:relative}.btn-remove-active:after{content:"";display:inline-block;width:1.2em;text-align:left;margin-left:.15rem;animation:removingDots 1s steps(4,end) infinite}@keyframes removingDots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}to{content:""}}.view-btn{background:#0f172a6b;border:1px solid rgba(255,255,255,.1);border-radius:.6rem;padding:.42rem .78rem;color:#fff;cursor:pointer;font-size:.85rem;font-weight:650;transition:border-color .15s ease,box-shadow .2s ease,background .15s ease}.view-btn:hover{border-color:#38bdf88c;box-shadow:0 0 0 2px #38bdf840}.view-btn.active{background:var(--accent);color:var(--accent-ink);border-color:#38bdf8a6}.save-wrap{position:relative}.save-menu{position:fixed;background:#020617fa;border:1px solid rgba(255,255,255,.12);border-radius:.65rem;box-shadow:0 12px 36px #00000059;padding:.35rem;min-width:160px;z-index:2000}.save-item{display:block;width:100%;text-align:left;background:transparent;border:none;color:#fff;padding:.48rem .62rem;border-radius:.55rem;cursor:pointer;font-weight:600}.save-item:hover{background:#94a3b826}.save-menu.download-menu{min-width:220px;padding-bottom:.55rem}.download-slider-wrap{padding:.35rem .62rem .15rem}.download-slider{width:100%;-webkit-appearance:none;appearance:none;height:6px;border-radius:999px;background:linear-gradient(90deg,#22c55e,#38bdf8) 0 0 / var(--fill, 50%) 100% no-repeat,#ffffff2e;outline:none;cursor:pointer}.download-slider::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:transparent}.download-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:999px;background:#ffffffeb;border:1px solid rgba(255,255,255,.24);box-shadow:0 4px 12px #00000059;margin-top:-4px}.download-slider::-moz-range-thumb{width:14px;height:14px;border-radius:999px;background:#ffffffeb;border:1px solid rgba(255,255,255,.24);box-shadow:0 4px 12px #00000059}.download-slider::-moz-range-track{height:6px;border-radius:999px;background:#ffffff2e}.download-slider::-moz-range-progress{height:6px;border-radius:999px;background:linear-gradient(90deg,#22c55e,#38bdf8)}.download-slider-meta{margin-top:.32rem;text-align:right;font-size:12px;color:#ffffffb8;font-style:italic;-webkit-user-select:none;user-select:none}.body{flex:1;display:flex;width:100%;height:calc(100vh - 56px);overflow:hidden;background:var(--bg)}.task-list{flex:1;padding:1.15rem 1.1rem 2rem;overflow-y:auto;overflow-x:hidden;touch-action:pan-y;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;background:var(--surface);color:inherit}.task-list .section-title{font-size:.95rem;margin:0 auto .9rem;max-width:980px;color:#0f172ac7;letter-spacing:.01em}.task-row{position:relative;background:var(--card);border:1px solid var(--border-strong);border-radius:var(--radius);min-height:48px;padding:.62rem 2.25rem .62rem .85rem;display:flex;align-items:center;gap:.65rem;width:100%;max-width:980px;margin:0 auto .55rem;cursor:default;touch-action:pan-y;--base-indent: 28px;color:var(--text);box-shadow:0 0 0 1px #ffffffa6 inset,var(--shadow-sm);transition:border-color .15s ease,box-shadow .18s ease,transform .05s ease,background .15s ease}.task-row:hover{border-color:#0f172a47;box-shadow:0 0 0 1px #ffffffb3 inset,0 6px 18px #02061714}.task-row:focus-within{border-color:#38bdf8b3;box-shadow:0 0 0 2px #38bdf82e,0 0 0 1px #ffffffb3 inset,0 10px 24px #0206171a}.task-row:before{content:"";display:block;flex:0 0 var(--base-indent);align-self:stretch;border-radius:10px;background:linear-gradient(to right,transparent 0,transparent calc(100% - 1px),rgba(15,23,42,.06) calc(100% - 1px),rgba(15,23,42,.06) 100%)}.task-row:after{content:"";position:absolute;right:.75rem;top:50%;transform:translateY(-50%);width:14px;height:18px;opacity:.35;background:radial-gradient(circle at 50% 3px,rgba(100,116,139,.95) 2px,transparent 2.6px),radial-gradient(circle at 50% 9px,rgba(100,116,139,.95) 2px,transparent 2.6px),radial-gradient(circle at 50% 15px,rgba(100,116,139,.95) 2px,transparent 2.6px)}.task-row.dragging-row{opacity:.96;box-shadow:0 14px 34px #0206172e;border-color:#0f172a38}.task-bullet{width:10px;height:10px;background:#0f172a38;border-radius:9999px;flex:0 0 auto;touch-action:none;cursor:grab;box-shadow:0 0 0 3px #0f172a0f}.task-input{background:transparent;border:none;color:var(--text);font-size:.95rem;font-weight:600;flex:1 1 auto;min-width:0}.task-input:focus{outline:none}.task-input::placeholder{color:#64748bd9;font-weight:600}.task-parent-label{font-size:.72rem;color:#64748bd9;white-space:nowrap}.task-row.drop-hover{border-color:#38bdf8d9;box-shadow:0 0 0 2px #38bdf82e,0 0 0 1px #ffffffb3 inset,0 10px 24px #0206171a;background:#38bdf80f}.task-row-remove-mode{cursor:pointer}.task-row-remove-mode:hover{border-color:#ef44448c;box-shadow:0 0 0 2px #ef44441f,0 0 0 1px #ffffffb3 inset,0 10px 24px #0206171a}.task-row-remove-selected{background:#ef4444eb;border-color:#f8fafcd9;box-shadow:0 0 0 1px #f8fafca6 inset,0 14px 34px #02061738}.task-row-remove-selected .task-input,.task-row-remove-selected .task-parent-label{color:#fff}.task-row-remove-selected:after{opacity:.55;background:radial-gradient(circle at 50% 3px,rgba(255,255,255,.95) 2px,transparent 2.6px),radial-gradient(circle at 50% 9px,rgba(255,255,255,.95) 2px,transparent 2.6px),radial-gradient(circle at 50% 15px,rgba(255,255,255,.95) 2px,transparent 2.6px)}.drag-handle{position:absolute;top:0;bottom:0;width:56px;z-index:3;touch-action:none;cursor:grab}.drag-handle.left{left:6px}.drag-handle.right{right:28px}.skillmap-wrapper{flex:1;position:relative;width:100%;height:100%;background:#fff;overflow:hidden;cursor:grab;touch-action:none}.skillmap-wrapper:active{cursor:grabbing}.map-pan{position:absolute;inset:0}.map-origin{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:0;height:0}.map-svg{position:absolute;width:4000px;height:4000px;left:-2000px;top:-2000px;overflow:visible;z-index:1}.skill-node{width:120px;height:120px;border-radius:9999px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-weight:700;color:#fff;position:absolute;z-index:2;box-shadow:0 12px 36px #00000059;left:0;top:0;padding:0 12px;line-height:1.15;white-space:normal;word-break:normal;overflow-wrap:normal;hyphens:none;-webkit-hyphens:none;-ms-hyphens:none}.center-node{width:150px;height:150px;background:#020617;border:2px solid rgba(255,255,255,.1);color:#fff;transform:translate(-50%,-50%);left:0;top:0}.child-node{width:100px;height:100px;font-size:.75rem}.center-btn{position:fixed;top:72px;left:12px;z-index:20000;background:#0f172ae0;color:#fff;border:1px solid rgba(255,255,255,.15);border-radius:.65rem;padding:.45rem .8rem;font-weight:650;cursor:pointer;transition:background .2s ease,transform .05s ease,border-color .15s ease,box-shadow .2s ease;pointer-events:auto;box-shadow:0 10px 26px #0000003d}.center-btn:hover{background:#38bdf8eb;color:#020617;border-color:#38bdf88c}.center-btn:active{transform:translateY(1px)}.ctxmenu{position:fixed;z-index:30000;background:#020617fa;color:#fff;border:1px solid rgba(255,255,255,.12);border-radius:.7rem;box-shadow:0 12px 36px #00000059;padding:.6rem .7rem;min-width:210px}.ctxmenu-title{font-weight:750;font-size:.9rem;opacity:.9}.ctxmenu-swatches{display:grid;grid-template-columns:repeat(8,22px);gap:8px}.ctxmenu-swatch{width:22px;height:22px;border-radius:7px;border:1px solid rgba(255,255,255,.25);box-shadow:0 2px 6px #00000040;cursor:pointer;padding:0;outline:none}.ctxmenu-swatch:hover{transform:translateY(-1px)}.no-hyphen{hyphens:none!important;-webkit-hyphens:none!important;word-break:keep-all!important;overflow-wrap:normal!important}@media(max-width:1100px){.project-input{min-width:200px}.btn,.view-btn{padding:.38rem .65rem;font-size:.82rem}}@media(max-width:820px){.project-input{min-width:160px}}@media(max-width:600px){.task-list{padding:.95rem .75rem 1.6rem}.task-row{padding:.58rem 2.1rem .58rem .78rem;border-radius:12px}.task-row:after{right:.6rem}}.skill-node[data-done=true]{filter:grayscale(.28) brightness(.98);opacity:.92;box-shadow:0 10px 28px #0006}.done-badge{position:absolute;top:10px;right:10px;width:18px;height:18px;border-radius:9999px;background:#22c55e;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 1px #04070fcc,0 4px 8px #00000073}.done-badge-check{font-size:11px;line-height:1;color:#e5fdf2}.ctxmenu-header{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.5rem}.ctxmenu-doneBtn{background:#020617;border-radius:.5rem;border:1px solid rgba(148,163,184,.4);padding:.2rem .6rem;font-size:.8rem;font-weight:650;color:#e5e7eb;cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease,background .15s ease,color .15s ease}.ctxmenu-doneBtn:hover{border-color:var(--accent);box-shadow:0 0 0 1px #38bdf88c}.ctxmenu-doneBtn-active{background:var(--accent);color:#020617;border-color:var(--accent)}.remove-checkbox{position:absolute;top:10px;left:10px;width:18px;height:18px;border-radius:9999px;background:#ef4444;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 1px #04070fcc,0 4px 8px #00000073;pointer-events:none}.remove-checkbox-mark{font-size:11px;line-height:1;color:#fee2e2;pointer-events:none}.map-progress{position:fixed;top:72px;right:12px;z-index:20000;background:#0f172aeb;border-radius:.85rem;border:1px solid rgba(148,163,184,.6);padding:.4rem .85rem .5rem;box-shadow:0 12px 32px #00000073;min-width:150px;display:flex;flex-direction:column;align-items:stretch}.map-progress-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;opacity:.75;text-align:right}.map-progress-row{display:flex;align-items:center;gap:.55rem;margin-top:.25rem}.map-progress-value{font-weight:750;font-size:.95rem;min-width:3.2rem;text-align:right}.map-progress-bar{flex:1;height:6px;border-radius:9999px;background:#0f172a;overflow:hidden;box-shadow:inset 0 0 0 1px #94a3b88c}.map-progress-bar-fill{height:100%;width:0;background:linear-gradient(90deg,#22c55e,#38bdf8);transition:width .22s ease-out}.map-host{flex:1;min-width:0;height:100%;position:relative}.map-host-hidden{position:fixed!important;left:-200vw!important;top:56px!important;width:100vw!important;height:calc(100vh - 56px)!important;pointer-events:none!important;opacity:1!important;visibility:visible!important;display:block!important}@supports (-webkit-touch-callout: none){@media(hover:none)and (pointer:coarse)and (max-width:600px),(hover:none)and (pointer:coarse)and (max-height:500px){.app{height:100dvh;min-height:100dvh}.topbar{position:fixed;top:0;left:0;right:0;width:100%;z-index:1000;padding-top:calc(.75rem + env(safe-area-inset-top));padding-left:calc(1.25rem + env(safe-area-inset-left));padding-right:calc(1.25rem + env(safe-area-inset-right))}.body{height:100dvh;padding-top:56px}.map-host-hidden{top:56px!important;height:calc(100dvh - 56px)!important}}}.app.app-center-innocent .skill-node.center-node{background:#fff;border:2px solid rgba(15,23,42,.12);color:#020617eb;box-shadow:0 12px 36px #0000002e,0 0 0 2px #bae6fdf2 inset,0 0 46px #38bdf833}.app.app-center-innocent .skill-node.center-node .done-badge{box-shadow:0 0 0 1px #04070f40,0 6px 18px #0003}.save-menu.share-menu{min-width:280px}.share-link-row{display:flex;gap:8px;padding:10px 10px 8px;align-items:center}.share-link-input{flex:1;min-width:0;height:34px;padding:6px 10px;border-radius:10px;border:1px solid rgba(15,23,42,.18);background:#ffffffeb;color:#020617eb;font-size:13px}.share-copy-btn{height:34px;width:40px;border-radius:10px;border:1px solid rgba(15,23,42,.18);background:#ffffffeb;color:#020617eb;cursor:pointer}.share-copy-btn:hover{background:#fff}.share-hint{padding:0 10px 10px;font-size:12px;color:#020617ad}.share-error{padding:0 10px 10px;font-size:12px;color:#dc2626f2}