.path-app{--path-bg:#faf9f5;--path-ink:#30393c;--path-muted:#6d7778;background:var(--path-bg);min-height:100dvh;color:var(--path-ink);letter-spacing:0;overscroll-behavior-y:contain;font-family:DM Sans,sans-serif}.path-app *,.path-dialog *{letter-spacing:0}.path-shell{max-width:520px;min-height:100dvh;padding:calc(14px + env(safe-area-inset-top)) 22px calc(18px + env(safe-area-inset-bottom));flex-direction:column;margin:auto;display:flex}.path-topbar,.path-home-header{justify-content:space-between;align-items:center;gap:12px;min-height:48px;display:flex}.path-topbar h1{margin:0;font:600 17px/1.3 DM Sans,sans-serif}.path-icon{color:#485355;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;display:inline-flex}.path-icon:hover{background:#eeefea}.path-app button:disabled{opacity:.35}.path-board-area{margin:auto 0;padding:24px 0 12px}.path-guidance{text-align:center;height:36px;color:var(--path-muted);margin-bottom:12px;font-size:12px;line-height:1.5}.path-board-frame{background:#fdfdfb;border-radius:8px;padding:8px;box-shadow:0 4px 24px #26323408,0 0 0 1px #e8e9e3}.path-board{aspect-ratio:1;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;outline-offset:5px;width:100%;display:block;overflow:visible}.path-cell{fill:#efefea}.path-line{pointer-events:none}.path-endpoint{pointer-events:none;transform-box:fill-box}.path-endpoint.is-connected>circle{stroke:#fff;stroke-width:4px}.path-hint{animation:.7s ease-in-out 2 path-hint}@keyframes path-hint{50%{stroke-opacity:.35;stroke-width:31px}}.path-board-complete .path-line{animation:.25s ease-out path-finish}@keyframes path-finish{50%{stroke-width:30px;opacity:1}}.path-controls{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:22px 12px 0;display:grid}.path-controls button{color:#536064;border-radius:8px;flex-direction:column;justify-content:center;align-items:center;gap:8px;min-height:62px;font-size:11px;display:flex}.path-controls button:hover:not(:disabled){background:#eceedf}.path-controls button:active:not(:disabled){background:#e3e8e6}.path-level-link{color:#748080;justify-content:center;align-items:center;gap:3px;min-height:44px;margin:15px auto 0;font-size:12px;display:flex}.path-next-area{max-width:280px;margin:8px auto 0}.path-completion-status{text-align:center;color:#477863;min-height:22px;margin:0 0 6px;font-size:13px}.path-next-area .path-primary:disabled{cursor:default;color:#7b8585;opacity:1;background:#e5e8e5;border-color:#e5e8e5;transform:none}.path-signature{text-align:center;color:#909795;margin-top:auto;padding-top:18px;font-size:10px;line-height:1.5}.path-home-content{flex-direction:column;flex:1;justify-content:center;align-items:center;width:100%;max-width:300px;margin:auto;padding:40px 0;display:flex}.path-wordmark{color:#30393c;font:500 56px/1.1 Manrope,sans-serif}.path-subtitle{color:#77807e;margin:14px 0 0;font-size:15px}.path-home-art{width:240px;max-width:100%;height:160px;margin:34px 0;overflow:visible}.path-home-art path{stroke-width:13px;stroke-linecap:round;fill:none}.path-primary{color:#fff;background:#36474e;border:1px solid #36474e;border-radius:7px;justify-content:center;align-items:center;gap:10px;width:100%;min-height:50px;padding:13px 20px;font-size:15px;font-weight:500;display:flex}.path-primary:hover{background:#253b44}.path-primary:active{transform:translateY(1px)}.path-text-button{color:#596768;justify-content:center;align-items:center;gap:9px;min-height:48px;margin-top:5px;font-size:14px;display:flex}.path-level-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;padding:35px 0;display:grid}.path-level{aspect-ratio:1;color:#425355;font-variant-numeric:tabular-nums;background:#fdfdfa;border:1px solid #e0e4df;border-radius:8px;flex-direction:column;justify-content:center;align-items:center;gap:7px;font-size:17px;display:flex}.path-level.is-done{color:#3e7557;background:#e8f0e9;border-color:#ceded0}.path-level-dot{width:13px;height:13px}.path-level:disabled{background:#f0f0ec}.path-dialog{color:#30393c;background:#faf9f5;border-radius:8px;width:calc(100% - 36px);max-width:350px;font-family:DM Sans,sans-serif;overflow:hidden}.path-dialog-body{padding:42px 28px 28px;position:relative}.path-dialog h2{margin:0 0 26px;font-size:25px;font-weight:600;line-height:1.2}.path-setting{border-bottom:1px solid #e1e6df;justify-content:space-between;align-items:center;gap:14px;min-height:64px;font-size:15px;display:flex;position:relative}.path-setting>span:first-child{align-items:center;gap:12px;display:flex}.path-setting input{opacity:0;cursor:pointer;z-index:1;width:44px;height:32px;position:absolute;right:0}.path-switch{pointer-events:none;background:#c6cdca;border-radius:99px;width:42px;height:26px;position:relative}.path-switch:after{content:"";background:#fff;border-radius:50%;width:20px;height:20px;transition:transform .15s;position:absolute;top:3px;left:3px}.path-setting input:checked+.path-switch{background:#477863}.path-setting input:checked+.path-switch:after{transform:translate(16px)}.path-setting input:focus-visible+.path-switch{outline-offset:3px;outline:3px solid #3977b8}.path-dialog .path-primary{margin-top:26px}.path-complete-dialog{text-align:center}.path-complete-dialog h2{margin:18px 0 8px;font-size:29px}.path-complete-dialog p{color:#748080;font-size:14px}.path-complete-mark{color:#477863;background:#e4eee4;border-radius:50%;place-items:center;width:62px;height:62px;margin:4px auto;display:grid}.path-particles{pointer-events:none;position:absolute;inset:0;overflow:hidden}.path-particles i{width:5px;height:8px;left:calc(12% + var(--i)*11%);animation:.65s ease-out both path-particle;animation-delay:calc(var(--i)*25ms);background:#3977b8;position:absolute;top:25px}.path-particles i:nth-child(3n){background:#c25d56}.path-particles i:nth-child(3n+1){background:#a77c23}@keyframes path-particle{0%{opacity:0;transform:translateY(-15px)rotate(0)}30%{opacity:.65}to{opacity:0;transform:translateY(115px)rotate(160deg)}}.path-save-error{color:#93524e;text-align:center;padding:12px;font-size:11px}@media (min-width:700px){.path-shell{padding-top:28px;padding-bottom:24px}.path-board-area{padding-top:30px;padding-bottom:25px}}@media (max-width:360px){.path-shell{padding-inline:16px}.path-level-grid{gap:7px}.path-level{font-size:15px}.path-guidance{font-size:11px}}@media (max-height:700px){.path-board-area{padding-top:12px;padding-bottom:0}.path-board-frame{max-width:360px;margin:auto}.path-guidance{height:22px;margin-bottom:8px}.path-controls{margin-top:12px}.path-level-link{margin-top:3px}}@media (prefers-reduced-motion:reduce){.path-app *,.path-dialog *{transition:none!important;animation:none!important}}
