.sp-root{color:var(--fg-primary);background:var(--bg-page);font-family:var(--font-body);-webkit-font-smoothing:antialiased;min-height:100vh;padding:64px var(--s-7) 80px}.sp-root *,.sp-root *:before,.sp-root *:after{box-sizing:border-box}.sp-inner{max-width:680px;margin:0 auto;display:flex;flex-direction:column;gap:var(--s-6)}.sp-mocks{display:flex;gap:var(--s-3);border-bottom:1px solid var(--rule)}.sp-mock-btn{background:none;border:none;padding:var(--s-2) 2px var(--s-2);margin-bottom:-1px;font-family:var(--font-body);font-size:13px;color:var(--fg-tertiary);cursor:pointer;border-bottom:1px solid transparent;transition:color .2s ease,border-color .2s ease}.sp-mock-btn:hover{color:var(--fg-primary)}.sp-mock-btn[data-active=true]{color:var(--fg-primary);border-bottom-color:var(--fg-primary);font-weight:500}.sp-card{background:var(--bg-raised);border:1px solid var(--rule);border-radius:var(--r-1)}.sp-card-header{padding:var(--s-7) var(--s-7) var(--s-3)}.sp-title{font-family:var(--font-display);font-size:22px;font-weight:500;line-height:1.25;letter-spacing:-.015em;color:var(--fg-primary);margin:0}.sp-section{padding:var(--s-5) var(--s-7);border-top:1px solid var(--paper-10)}.sp-section-title{font-family:var(--font-body);font-size:13px;font-weight:500;color:var(--fg-secondary);margin:0 0 var(--s-3)}.sp-goal-text{font-family:var(--font-body);font-size:15px;line-height:1.55;color:var(--fg-primary);margin:0}.sp-decisions{margin:0;display:flex;flex-direction:column}.sp-decision{display:flex;flex-direction:column;gap:2px;padding:var(--s-3) 0;border-bottom:1px dashed var(--paper-10)}.sp-decision:first-child{padding-top:0}.sp-decision:last-child{border-bottom:none;padding-bottom:0}.sp-decision-label{font-family:var(--font-body);font-size:12px;color:var(--fg-tertiary);margin:0}.sp-decisions dd{font-family:var(--font-body);font-size:14px;line-height:1.5;color:var(--fg-primary);margin:0}.sp-decision-static{color:var(--fg-secondary)}.sp-inline-input{font-family:var(--font-body);font-size:14px;line-height:1.5;color:var(--fg-primary);width:100%;background:transparent;border:none;outline:none;padding:var(--s-1) 6px;margin:-4px -6px;border-radius:var(--r-1);transition:background .15s ease}.sp-inline-input::placeholder{color:var(--fg-faint)}.sp-inline-input:hover{background:#36332e08}.sp-inline-input:focus{background:#36332e0f}.sp-editable{position:relative;display:block}.sp-editable--inline{flex:1;min-width:0}.sp-editable--inline .sp-page-name{width:100%}.sp-editable .sp-inline-input,.sp-editable .sp-page-name{padding-right:22px}.sp-editable-icon{position:absolute;top:8px;right:4px;color:var(--fg-secondary);opacity:.65;pointer-events:none;transition:opacity .15s ease,color .15s ease}.sp-editable:hover .sp-editable-icon,.sp-editable:focus-within .sp-editable-icon{opacity:1;color:var(--fg-primary)}textarea.sp-inline-input{font-family:var(--font-body);line-height:1.5;resize:none;min-height:calc(1.5em * 2 + var(--s-1) * 2);overflow:hidden;field-sizing:content;overflow-wrap:anywhere;word-break:break-word}textarea.sp-notes-input{min-height:calc(1.5em * 3 + var(--s-1) * 2)}.sp-decisions dd,.sp-beats-display,.sp-beats-list,.sp-beats-add{overflow-wrap:anywhere;word-break:break-word;min-width:0}.sp-card{container-type:inline-size}.sp-pages{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}.sp-page{display:flex;align-items:flex-start;gap:var(--s-3);padding:var(--s-4) 0;border-bottom:1px solid var(--paper-10)}.sp-page:first-child{padding-top:0}.sp-page:last-child{border-bottom:none;padding-bottom:0}.sp-page-num{font-family:var(--font-body);font-size:14px;color:var(--fg-tertiary);font-variant-numeric:tabular-nums;margin-top:2px;min-width:18px;flex-shrink:0}.sp-page-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--s-2)}.sp-page-header{display:flex;align-items:baseline;gap:var(--s-2);min-width:0}.sp-page-name{font-family:var(--font-display);font-size:16px;font-weight:500;letter-spacing:-.01em;color:var(--fg-primary);flex:1;min-width:0;background:transparent;border:none;outline:none;padding:var(--s-1) 6px;margin:-4px -6px;border-radius:var(--r-1);transition:background .15s ease}.sp-page-name::placeholder{color:var(--fg-faint)}.sp-page-name:hover{background:#36332e08}.sp-page-name:focus{background:#36332e0f}.sp-page-route{font-family:var(--font-mono, ui-monospace, monospace);font-size:12px;color:var(--fg-tertiary);flex-shrink:0;-webkit-user-select:none;user-select:none}.sp-role-input{font-size:13px;line-height:1.55;color:var(--fg-secondary)}.sp-beats-display{background:transparent;border:1px solid transparent;padding:var(--s-2) 6px;margin:0 -6px;border-radius:var(--r-1);text-align:left;cursor:pointer;transition:background .15s ease,border-color .15s ease;width:100%}.sp-beats-display:hover{background:#36332e08}.sp-beats-display:focus-visible{outline:none;border-color:#36332e2e;background:#36332e0a}.sp-beats-list{list-style:disc;padding-left:18px;margin:0;font-family:var(--font-body);font-size:13px;line-height:1.55;color:var(--fg-primary);display:flex;flex-direction:column;gap:2px}.sp-beats-item{margin:0}.sp-beats-item::marker{color:var(--fg-tertiary)}.sp-beats-add{background:transparent;border:1px dashed var(--rule);padding:var(--s-2) var(--s-3);border-radius:var(--r-1);font-family:var(--font-body);font-size:12px;color:var(--fg-tertiary);cursor:pointer;transition:color .15s ease,border-color .15s ease,background .15s ease;align-self:flex-start}.sp-beats-add:hover{color:var(--fg-primary);border-color:var(--fg-tertiary);background:#36332e05}.sp-beats-input{font-size:13px;line-height:1.55;color:var(--fg-primary)}.sp-page-remove{background:none;border:none;padding:var(--s-1);margin-top:2px;color:var(--fg-faint);cursor:pointer;opacity:0;transition:opacity .2s ease,color .15s ease;flex-shrink:0;border-radius:var(--r-1)}.sp-page:hover .sp-page-remove{opacity:1}.sp-page-remove:hover{color:var(--fg-primary)}.sp-page-remove:disabled{opacity:0!important;pointer-events:none}.sp-add{background:none;border:none;padding:var(--s-3) 0 0;font-family:var(--font-body);font-size:13px;color:var(--fg-tertiary);cursor:pointer;display:inline-flex;align-items:center;gap:var(--s-2);transition:color .15s ease;align-self:flex-start}.sp-add:hover{color:var(--fg-primary)}.sp-footer{padding:var(--s-4) var(--s-7);background:var(--bg-sunken);border-top:1px solid var(--rule);display:flex;justify-content:center}.sp-cta{display:inline-flex;align-items:center;justify-content:center;padding:var(--s-2) var(--s-5);font-family:var(--font-body);font-size:14px;font-weight:500;color:var(--fg-on-inverse);background:var(--fg-primary);border:1px solid var(--fg-primary);border-radius:var(--r-2);cursor:pointer;transition:opacity .2s ease}.sp-cta:hover:not(:disabled){opacity:.92}.sp-cta:disabled{cursor:not-allowed;opacity:.4}.sp-empty{padding:64px var(--s-7);text-align:center;font-family:var(--font-body);font-size:13px;color:var(--fg-faint);border:1px dashed var(--rule);border-radius:var(--r-1)}.sp-capabilities{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s-2)}.sp-capability-row{display:flex;align-items:flex-start;gap:var(--s-3);padding:var(--s-3);border:1px solid var(--rule);border-radius:var(--r-1);cursor:pointer;transition:border-color .15s ease}.sp-capability-row:hover{border-color:var(--fg-tertiary)}.sp-capability-row input[type=checkbox]{margin-top:2px;cursor:pointer}.sp-capability-uionly{cursor:default;opacity:.7}.sp-capability-uionly input[type=checkbox]{cursor:not-allowed}.sp-capability-text{display:flex;flex-direction:column;gap:2px}.sp-capability-label{display:flex;align-items:center;gap:var(--s-2);font-family:var(--font-body);font-size:13px;font-weight:500;color:var(--fg-primary)}.sp-capability-badge{font-size:10px;font-weight:500;text-transform:uppercase;letter-spacing:.04em;padding:1px 6px;border-radius:var(--r-1);background:var(--bg-sunken);color:var(--fg-tertiary)}.sp-capability-desc{font-family:var(--font-body);font-size:12px;color:var(--fg-tertiary)}