@soba-so/react 0.0.10 → 0.0.11

package/dist/styles.css

@@ -11,16 +11,50 @@
   --sc-accent-fg: #ffffff;
   --sc-ok: #22a06b;
   --sc-warn: #b06f14;
+  
+  --sc-font-size: 15px;
+  --sc-fs-label: max(11px, calc(var(--sc-font-size) * 0.77));
+  
+  --sc-fs-small: max(12px, calc(var(--sc-font-size) * 0.87));
+  --sc-fs-body: var(--sc-font-size);
+  --sc-fs-title: calc(var(--sc-font-size) * 1.13);
+  --sc-fs-display: calc(var(--sc-font-size) * 2.45);
+
+  
+  --sc-r-sm: 6px;
   --sc-r: 10px;
+  --sc-r-lg: 14px;
+  --sc-r-pill: 999px;
+
+  
+  --sc-shadow-1: 0 1px 2px rgb(0 0 0 / 5%);
+  --sc-shadow-2: 0 1px 2px rgb(0 0 0 / 4%), 0 8px 24px -12px rgb(0 0 0 / 18%);
+
+  
+  --sc-tile: 32px;
   
   --sc-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+  
+  --sc-font:
+    ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
 
   box-sizing: border-box;
+  
+  width: 100%;
   max-width: 560px;
   margin: 0 auto;
   color: var(--sc-text, #1a1a1c);
-  font-family: "Inter", ui-sans-serif, -apple-system, "Helvetica Neue", Arial, sans-serif;
-  font-size: 15px;
+  font-family: var(
+    --sc-font,
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    "Segoe UI",
+    "Helvetica Neue",
+    Arial,
+    sans-serif
+  );
+  font-size: var(--sc-font-size, 15px);
   line-height: 1.5;
   letter-spacing: -0.005em;
 }
@@ -33,18 +67,19 @@
 .sc-card {
   background: var(--sc-sheet, #ffffff);
   border: 1px solid var(--sc-line, #e9e9eb);
-  border-radius: var(--sc-r, 10px);
-  padding: 20px;
+  
+  border-radius: var(--sc-r-lg, 14px);
+  padding: 18px;
 }
 .sc-card + .sc-card {
   margin-top: 12px;
 }
 
 .sc-title {
-  font-size: 20px;
+  font-size: var(--sc-fs-title, 17px);
   font-weight: 650;
   letter-spacing: -0.02em;
-  margin: 0 0 4px;
+  margin: 0;
 }
 .sc-sub {
   color: var(--sc-muted, #6b6b73);
@@ -57,42 +92,11 @@
   letter-spacing: -0.005em;
 }
 
-.sc-choices {
-  display: grid;
-  gap: 8px;
-}
-.sc-choice {
-  display: block;
-  width: 100%;
-  text-align: left;
-  background: var(--sc-sheet, #ffffff);
-  border: 1px solid var(--sc-line-2, #dcdce0);
-  border-radius: var(--sc-r, 10px);
-  padding: 12px 14px;
-  cursor: pointer;
-  font: inherit;
-  color: inherit;
-}
-.sc-choice:hover {
-  background: var(--sc-raised, #f6f6f7);
-}
-.sc-choice[aria-pressed="true"] {
-  border-color: var(--sc-accent, #18181b);
-  box-shadow: inset 0 0 0 1px var(--sc-accent, #18181b);
-}
-.sc-choice-title {
-  font-weight: 550;
-}
-.sc-choice-meta {
-  color: var(--sc-muted, #6b6b73);
-  font-size: 13px;
-}
-
 .sc-code {
   display: block;
   background: var(--sc-raised, #f6f6f7);
   border: 1px solid var(--sc-line, #e9e9eb);
-  border-radius: 8px;
+  border-radius: var(--sc-r-sm, 6px);
   padding: 12px 14px;
   font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
   font-size: 13px;
@@ -118,8 +122,8 @@
 
 .sc-btn {
   font: inherit;
-  font-weight: 550;
-  border-radius: 8px;
+  font-weight: 500;
+  border-radius: var(--sc-r-sm, 6px);
   padding: 9px 14px;
   border: 1px solid var(--sc-line-2, #dcdce0);
   background: var(--sc-sheet, #ffffff);
@@ -151,12 +155,12 @@ a.sc-btn {
 
 .sc-input {
   font: inherit;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-family: var(--sc-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
   letter-spacing: 0.08em;
   text-transform: uppercase;
   padding: 10px 12px;
   border: 1px solid var(--sc-line-2, #dcdce0);
-  border-radius: 8px;
+  border-radius: var(--sc-r-sm, 6px);
   background: var(--sc-sheet, #ffffff);
   color: inherit;
   width: 100%;
@@ -191,11 +195,31 @@ a.sc-btn {
 
 .sc-error {
   color: var(--sc-warn, #b06f14);
-  font-size: 14px;
+  font-size: var(--sc-fs-body);
+}
+
+.sc-note-strong {
+  font-weight: 600;
+  color: var(--sc-text, #1a1a1c);
+}
+.sc-note-act {
+  appearance: none;
+  border: 0;
+  background: none;
+  padding: 0;
+  font: inherit;
+  color: var(--sc-text-2, #3f3f46);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  cursor: pointer;
+}
+.sc-note-act:disabled {
+  opacity: 0.5;
+  cursor: default;
 }
 .sc-note {
   color: var(--sc-muted, #6b6b73);
-  font-size: 13px;
+  font-size: var(--sc-fs-small);
 }
 
 .sc-facts {
@@ -225,22 +249,141 @@ a.sc-btn {
   padding-top: 0;
   margin-top: 0;
 }
+
+.sc-machine-meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 3px 10px;
+  
+  margin-top: 1px;
+  font-size: var(--sc-fs-small);
+  line-height: 1.35;
+  color: var(--sc-muted, #6b6b73);
+}
+
+.sc-machine-tag {
+  font-size: var(--sc-fs-label);
+  font-weight: 600;
+  padding: 1px 6px;
+  border-radius: var(--sc-r-sm, 6px);
+  background: var(--sc-raised, #f6f6f7);
+}
+
+.sc-machine-state {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: var(--sc-fs-small);
+  color: var(--sc-muted, #6b6b73);
+  white-space: nowrap;
+}
+
 .sc-runtimes {
   display: grid;
-  gap: 4px;
-  margin: 8px 0 0;
-  padding: 0;
+  gap: 2px;
+  margin: 12px 0 0;
+  
+  --sc-branch: calc(var(--sc-tile, 32px) + 11px);
+  padding: 0 0 0 var(--sc-branch);
   list-style: none;
-  font-size: 14px;
+  font-size: var(--sc-fs-small);
+}
+
+.sc-compute-act {
+  margin-top: 16px;
+}
+
+.sc-compute-act:first-child {
+  margin-top: 0;
+}
+
+.sc-note + .sc-compute-act,
+.sc-error + .sc-compute-act {
+  margin-top: 9px;
+}
+
+.sc-runtime {
+  position: relative;
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  gap: 9px;
+  min-height: 26px;
+}
+
+.sc-runtime::before {
+  content: "";
+  position: absolute;
+  left: calc(var(--sc-tile, 32px) / 2 - var(--sc-branch));
+  top: -2px;
+  bottom: -2px;
+  width: 1px;
+  background: var(--sc-line-2, #dcdce0);
+}
+
+.sc-runtime:first-child::before {
+  top: -13px;
+}
+
+.sc-runtime:last-child::before {
+  bottom: auto;
+  height: calc(50% + 2px);
+}
+
+.sc-runtime:first-child:last-child::before {
+  height: calc(50% + 13px);
+}
+
+.sc-runtime::after {
+  content: "";
+  position: absolute;
+  left: calc(var(--sc-tile, 32px) / 2 - var(--sc-branch));
+  top: 50%;
+  width: 22px;
+  height: 1px;
+  background: var(--sc-line-2, #dcdce0);
+}
+
+.sc-runtime-tile {
+  width: 22px;
+  height: 22px;
+  flex: none;
+  display: grid;
+  place-items: center;
+  border-radius: var(--sc-r-sm, 6px);
+  border: 1px solid var(--sc-line, #e9e9eb);
+  background: var(--sc-raised, #f6f6f7);
+}
+
+.sc-runtime-mark {
+  width: 13px;
+  height: 13px;
+  color: var(--sc-text-2, #3f3f46);
+}
+
+.sc-runtime-verdict {
+  font-size: var(--sc-fs-label);
+  white-space: nowrap;
+}
+
+.sc-runtime-name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .soba-connect[data-theme="dark"],
-.soba-connect[data-theme="system"] {
+.soba-connect[data-theme="system"],
+.sc-btn[data-theme="dark"],
+.sc-btn[data-theme="system"] {
   color-scheme: dark;
 }
 
 @media (prefers-color-scheme: dark) {
-  .soba-connect[data-theme="system"] {
+  .soba-connect[data-theme="system"],
+  .sc-btn[data-theme="system"] {
     --sc-ground: #0f0f11;
     --sc-sheet: #161618;
     --sc-raised: #1d1d20;
@@ -251,10 +394,17 @@ a.sc-btn {
     --sc-muted: #8d8d95;
     --sc-accent: #f2f2f3;
     --sc-accent-fg: #131316;
+    
+    --sc-ok: #4cb782;
+    --sc-warn: #f2994a;
+    
+    --sc-shadow-1: 0 1px 2px rgb(0 0 0 / 34%);
+    --sc-shadow-2: 0 1px 2px rgb(0 0 0 / 40%), 0 8px 24px -12px rgb(0 0 0 / 64%);
   }
 }
 
-.soba-connect[data-theme="dark"] {
+.soba-connect[data-theme="dark"],
+.sc-btn[data-theme="dark"] {
   --sc-ground: #0f0f11;
   --sc-sheet: #161618;
   --sc-raised: #1d1d20;
@@ -265,6 +415,18 @@ a.sc-btn {
   --sc-muted: #8d8d95;
   --sc-accent: #f2f2f3;
   --sc-accent-fg: #131316;
+  
+  --sc-ok: #4cb782;
+  --sc-warn: #f2994a;
+  
+  --sc-shadow-1: 0 1px 2px rgb(0 0 0 / 34%);
+  --sc-shadow-2: 0 1px 2px rgb(0 0 0 / 40%), 0 8px 24px -12px rgb(0 0 0 / 64%);
+}
+
+.soba-connect.sc-fill {
+  max-width: none;
+  
+  margin-inline: 0;
 }
 
 .sc-plans {
@@ -278,23 +440,93 @@ a.sc-btn {
 .sc-plan {
   display: flex;
   flex-direction: column;
-  gap: 10px;
-  padding: 16px;
+  gap: 0;
+  padding: 18px;
   border: 1px solid var(--sc-line, #e5e5e7);
-  border-radius: var(--sc-r, 10px);
+  border-radius: var(--sc-r-lg, 14px);
   background: var(--sc-sheet, #fff);
 }
 
+@supports (grid-template-rows: subgrid) {
+  .sc-plan {
+    display: grid;
+    grid-row: span 7;
+    grid-template-rows: subgrid;
+    
+    row-gap: 0;
+  }
+
+  
+  .sc-plan > .sc-btn {
+    align-self: stretch;
+  }
+}
+
+.sc-plan > * + * {
+  margin-top: 7px;
+}
+
+.sc-plan > .sc-plan-price {
+  margin-top: 12px;
+}
+
+.sc-plan > .sc-btn {
+  margin-top: 12px;
+}
+
+.sc-plan > .sc-btn + .sc-plan-allowance {
+  margin-top: 15px;
+}
+
+.sc-plan > .sc-plan-band:empty {
+  margin-top: 0;
+}
+
+.sc-plan-band {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}
+.sc-plan-band:empty {
+  min-height: 0;
+}
+
+.sc-plan > .sc-sub {
+  margin: 0;
+}
+
 .sc-plan-current {
-  border-color: var(--sc-text, #18181b);
+  background: var(--sc-raised, #f6f6f7);
+  border-color: var(--sc-line, #e9e9eb);
+}
+
+.sc-plan-allowance {
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.sc-plan-figure {
+  font-size: var(--sc-fs-body, 15px);
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  font-variant-numeric: tabular-nums;
+}
+.sc-plan-qualifier {
+  font-size: var(--sc-fs-label, 11.5px);
+  line-height: 1.45;
+  color: var(--sc-muted, #6b6b73);
 }
 
 .sc-plan-badge {
-  font-size: 11px;
+  font-size: var(--sc-fs-label, 11px);
   padding: 2px 6px;
-  border-radius: 999px;
+  border-radius: var(--sc-r-pill, 999px);
   background: var(--sc-text, #18181b);
   color: var(--sc-sheet, #fff);
+  
+  border: 1px solid transparent;
+  white-space: nowrap;
 }
 
 .sc-plan-price {
@@ -305,7 +537,7 @@ a.sc-btn {
 }
 
 .sc-plan-amount {
-  font-size: 28px;
+  font-size: var(--sc-fs-display, 24px);
   font-weight: 600;
   letter-spacing: -0.02em;
   
@@ -313,13 +545,16 @@ a.sc-btn {
 }
 
 .sc-plan-interval {
-  font-size: 13px;
+  font-size: var(--sc-fs-small, 13px);
   color: var(--sc-muted, #6b6b73);
 }
 
-.sc-plan .sc-btn {
-  margin-top: auto;
+.sc-plan > .sc-btn {
   width: 100%;
+  justify-content: center;
+  border-radius: var(--sc-r-pill, 999px);
+  padding-block: 0.72em;
+  font-weight: 550;
 }
 
 .sc-plan .sc-facts {
@@ -344,8 +579,14 @@ a.sc-btn {
 
 .sc-plan-compute {
   display: grid;
-  gap: 4px;
-  font-size: 14px;
+  
+  align-content: start;
+  gap: 3px;
+  font-size: 13.5px;
+}
+
+.sc-plan-compute > .sc-fact-key {
+  font-size: var(--sc-fs-label, 11.5px);
 }
 
 .sc-compute {
@@ -353,7 +594,8 @@ a.sc-btn {
   margin: 0;
   padding: 0;
   display: grid;
-  gap: 3px;
+  
+  gap: 6px;
 }
 
 .sc-compute li {
@@ -373,6 +615,14 @@ a.sc-btn {
   color: var(--sc-text-2, #3f3f46);
 }
 
+.sc-compute-marks {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  margin-left: 7px;
+  vertical-align: -2px;
+}
+
 .sc-compute li.sc-compute-own::before {
   content: "✓";
   color: var(--sc-ok, #22a06b);
@@ -380,8 +630,13 @@ a.sc-btn {
   top: 1px;
 }
 
+@supports not (grid-template-rows: subgrid) {
+  .sc-plan .sc-sub {
+    min-height: 2.8em;
+  }
+}
+
 .sc-plan .sc-sub {
-  min-height: 2.8em;
   margin: 0;
 }
 
@@ -414,22 +669,64 @@ a.sc-btn {
 }
 
 .sc-modal::backdrop {
-  background: rgb(15 15 17 / 55%);
+  background: rgb(15 15 17 / 42%);
+  backdrop-filter: blur(4px);
 }
 
 .sc-modal-sheet {
   position: relative;
   width: 100%;
   
-  max-width: 420px;
-  background: var(--sc-sheet, #ffffff);
-  border: 1.5px solid var(--sc-line, #e9e9eb);
-  border-radius: 14px;
-  box-shadow: 0 24px 60px -12px rgb(15 15 17 / 22%);
+  max-width: 380px;
+  
+  background: var(--sc-shell, var(--sc-sheet, #ffffff));
+  border: 1px solid var(--sc-line, #e9e9eb);
+  border-radius: var(--sc-r-lg, 14px);
+  
+  box-shadow:
+    0 1px 2px rgb(15 15 17 / 6%),
+    0 12px 28px -8px rgb(15 15 17 / 16%),
+    0 36px 64px -28px rgb(15 15 17 / 24%);
   
   outline: none;
 }
 
+@keyframes sc-sheet-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px) scale(0.985);
+  }
+}
+
+@keyframes sc-scrim-in {
+  from {
+    opacity: 0;
+  }
+}
+
+.sc-modal[open] .sc-modal-sheet {
+  animation: sc-sheet-in 190ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+.sc-modal[open]::backdrop {
+  animation: sc-scrim-in 190ms ease;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sc-modal[open] .sc-modal-sheet,
+  .sc-modal[open]::backdrop {
+    animation: none;
+  }
+  .sc-opt,
+  .sc-opt-tile,
+  .sc-alt-link {
+    transition: none;
+  }
+  .sc-opt:active {
+    transform: none;
+  }
+}
+
 .sc-modal-close {
   position: absolute;
   top: 10px;
@@ -442,7 +739,7 @@ a.sc-btn {
   font-size: 20px;
   line-height: 1;
   padding: 4px 8px;
-  border-radius: 6px;
+  border-radius: var(--sc-r-sm, 6px);
   cursor: pointer;
 }
 
@@ -452,167 +749,1647 @@ a.sc-btn {
 }
 
 .sc-modal-sheet .sc-card {
-  padding: 26px 24px 22px;
+  padding: 24px 22px 18px;
   border: 0;
   border-radius: 0;
   background: transparent;
   box-shadow: none;
 }
 
+.sc-modal-sheet .sc-machine {
+  border: 1px solid var(--sc-line, #e9e9eb);
+  border-radius: var(--sc-r, 10px);
+  padding: 11px 12px;
+  margin-top: 14px;
+}
+
+.sc-conns {
+  display: grid;
+  gap: 14px;
+}
+
+.sc-modal-sheet .sc-machine:first-child {
+  margin-top: 0;
+}
+
+.sc-modal-sheet .sc-title {
+  font-size: 17px;
+  font-weight: 600;
+  margin-bottom: 5px;
+}
+
+.sc-modal-sheet .sc-sub {
+  font-size: 13.5px;
+  line-height: 1.45;
+  margin-bottom: 15px;
+}
+
 .sc-modal-foot {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
   padding: 11px 14px;
-  border-top: 1.5px solid var(--sc-line, #e9e9eb);
+  border-top: 1px solid var(--sc-line, #e9e9eb);
   text-align: center;
   font-size: 12.5px;
   color: var(--sc-muted, #6b6b73);
 }
 
-.sc-mark {
-  width: 44px;
-  height: 44px;
-  margin: 0 auto 14px;
-  border-radius: 11px;
-  
-  background: var(--sc-accent, #18181b);
-  display: grid;
-  place-items: center;
+.sc-foot-mark {
+  width: 13px;
+  height: 13px;
+  flex: none;
+  opacity: 0.75;
 }
 
-.sc-mark svg {
-  width: 24px;
-  height: 24px;
-  color: var(--sc-accent-fg, #ffffff);
+.sc-app-mark {
+  display: block;
+  width: 38px;
+  height: 38px;
+  margin: 0 auto 12px;
+  border-radius: var(--sc-r, 10px);
+  object-fit: contain;
 }
 
 .sc-h {
-  font-size: 19px;
-  font-weight: 700;
+  font-size: 17px;
+  font-weight: 600;
   letter-spacing: -0.02em;
   margin: 0;
   text-align: center;
 }
 
 .sc-p {
-  font-size: 14px;
+  font-size: 13.5px;
+  line-height: 1.45;
   color: var(--sc-muted, #6b6b73);
-  margin: 7px auto 0;
-  max-width: 40ch;
+  margin: 5px auto 0;
+  
+  max-width: 34ch;
   text-align: center;
 }
 
 .sc-opts {
   display: grid;
-  gap: 10px;
-  margin-top: 20px;
+  gap: 8px;
+  margin-top: 16px;
   text-align: left;
 }
 
 .sc-opt {
-  display: flex;
-  align-items: center;
-  
-  justify-content: center;
-  gap: 10px;
+  display: grid;
   
-  position: relative;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  gap: 11px;
   width: 100%;
-  padding: 12px 14px;
-  border: 1.5px solid var(--sc-line-2, #dcdce0);
-  border-radius: 9px;
-  background: var(--sc-sheet, #ffffff);
+  padding: 9px 11px;
+  border: 1px solid var(--sc-line-2, #dcdce0);
+  border-radius: var(--sc-r, 10px);
+  background: var(--sc-sheet, #ffffff);
   color: var(--sc-text, #1a1a1c);
   font: inherit;
-  font-size: 14.5px;
-  font-weight: 600;
   text-align: left;
   cursor: pointer;
+  
+  transition:
+    background-color 120ms ease,
+    border-color 120ms ease;
 }
 
 .sc-opt:hover {
   background: var(--sc-raised, #f6f6f7);
+  border-color: var(--sc-muted, #6b6b73);
 }
 
-.sc-opt[aria-pressed="true"] {
-  border-color: var(--sc-accent, #18181b);
+.sc-opt:hover .sc-opt-tile {
+  background: var(--sc-sheet, #ffffff);
+}
+
+.sc-opt:active {
+  transform: translateY(0.5px);
+}
+
+.sc-opt:disabled {
+  opacity: 0.55;
+  cursor: default;
+}
+
+.sc-opt:disabled:hover {
+  background: var(--sc-sheet, #ffffff);
+  border-color: var(--sc-line-2, #dcdce0);
+}
+
+.sc-opt-tile {
+  position: relative;
+  width: 32px;
+  height: 32px;
+  flex: none;
+  display: grid;
+  place-items: center;
+  border-radius: var(--sc-r, 10px);
+  border: 1px solid var(--sc-line, #e9e9eb);
+  background: var(--sc-raised, #f6f6f7);
+  transition: background-color 120ms ease;
 }
 
 .sc-opt-mark {
-  width: 17px;
-  height: 17px;
+  width: 18px;
+  height: 18px;
   flex: none;
-  
   color: currentColor;
 }
 
-.sc-opt-label {
+.sc-opt-text {
   min-width: 0;
 }
 
-.sc-opt-primary {
+.sc-opt-label {
+  display: block;
+  font-size: var(--sc-fs-body);
   
-  background: var(--sc-accent, #18181b);
-  color: var(--sc-accent-fg, #ffffff);
-  border-color: var(--sc-accent, #18181b);
+  font-weight: 500;
+  letter-spacing: -0.01em;
 }
 
-.sc-opt-primary:hover {
-  opacity: 0.9;
-  background: var(--sc-accent, #18181b);
+.sc-opt-sub {
+  display: block;
+  margin-top: 1px;
+  font-size: 12.5px;
+  line-height: 1.35;
+  color: var(--sc-muted, #6b6b73);
 }
 
-.sc-details {
-  text-align: left;
-  font-size: 13px;
+.sc-opt-last {
+  flex: none;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--sc-muted, #6b6b73);
+  background: var(--sc-raised, #f6f6f7);
+  border-radius: var(--sc-r-sm, 6px);
+  padding: 3px 7px;
+  white-space: nowrap;
+}
+
+.sc-opt-group {
+  margin: 16px 0 7px;
+  font-size: 12.5px;
+  font-weight: 600;
+  color: var(--sc-text-2, #3f3f46);
+}
+
+.sc-opt-note {
+  margin: 8px 0 0;
+  font-size: 12.5px;
+  line-height: 1.45;
+  color: var(--sc-muted, #6b6b73);
+}
+
+.sc-or {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin: 16px 0;
+  color: var(--sc-muted, #6b6b73);
+  font-size: 12.5px;
 }
 
-.sc-details > summary {
+.sc-or::before,
+.sc-or::after {
+  content: "";
+  flex: 1;
+  height: 1px;
+  background: var(--sc-line, #e9e9eb);
+}
+
+.sc-opt-runtimes {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 3px 11px;
+  margin-top: 7px;
+}
+
+.sc-rt {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-size: 11.5px;
+  line-height: 1.3;
+  color: var(--sc-muted, #6b6b73);
+  white-space: nowrap;
+}
+
+.sc-rt-mark {
+  width: 12px;
+  height: 12px;
+  flex: none;
+  opacity: 0.85;
+}
+
+.sc-opt-alt {
+  margin-top: 12px;
+  padding-top: 11px;
+  border-top: 1px solid var(--sc-line, #e9e9eb);
+  text-align: center;
+}
+
+.sc-alt-link {
+  font: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  padding: 5px 8px;
+  border: 0;
+  border-radius: var(--sc-r-sm, 6px);
+  background: transparent;
+  color: var(--sc-muted, #6b6b73);
   cursor: pointer;
+  transition: color 120ms ease;
+}
+
+.sc-alt-link:hover {
+  color: var(--sc-text, #1a1a1c);
+}
+
+.sc-conn,
+.sc-idrow {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  gap: 12px;
+}
+
+.sc-conn {
+  padding: 10px 12px;
+  border: 1px solid var(--sc-line, #e9e9eb);
+  border-radius: var(--sc-r, 10px);
+  background: var(--sc-sheet, #ffffff);
+}
+
+.sc-conn-note {
+  grid-column: 1 / -1;
+  margin: 2px 0 0;
+  font-size: 12px;
+  line-height: 1.4;
   color: var(--sc-muted, #6b6b73);
-  padding: 6px 0;
 }
 
-.sc-details > summary:hover {
+.sc-conn-action {
+  font: inherit;
+  font-size: var(--sc-fs-small);
+  font-weight: 500;
+  padding: 5px 9px;
+  border: 1px solid transparent;
+  border-radius: var(--sc-r-sm, 6px);
+  background: transparent;
+  color: var(--sc-muted, #6b6b73);
+  cursor: pointer;
+}
+
+.sc-conn-action:hover:not(:disabled) {
+  border-color: var(--sc-line-2, #dcdce0);
   color: var(--sc-text, #1a1a1c);
 }
 
-.sc-opt:has(.sc-opt-last) {
-  padding-right: 76px;
-  padding-left: 76px;
+.sc-conn-action:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.sc-btn-wide {
+  width: 100%;
 }
 
-.sc-opt-last {
-  position: absolute;
-  right: 10px;
-  top: 50%;
-  transform: translateY(-50%);
-  flex: none;
-  font-size: 11px;
+.sc-head {
+  display: grid;
+  grid-template-columns: 30px 1fr 30px;
+  align-items: center;
+  
+  margin: -8px 0 14px;
+}
+
+.sc-head-title {
+  margin: 0;
+  text-align: center;
+  font-size: 14px;
   font-weight: 600;
-  color: var(--sc-muted, #6b6b73);
-  background: var(--sc-raised, #f6f6f7);
-  border-radius: 5px;
-  padding: 3px 7px;
+  letter-spacing: -0.01em;
 }
 
-.sc-btn-quiet {
-  border-color: transparent;
+.sc-head-back {
+  display: grid;
+  place-items: center;
+  width: 30px;
+  height: 30px;
+  padding: 0;
+  border: 0;
+  border-radius: var(--sc-r-sm, 6px);
   background: transparent;
   color: var(--sc-muted, #6b6b73);
+  cursor: pointer;
 }
 
-.sc-btn-quiet:hover {
+.sc-head-back:hover {
   background: var(--sc-raised, #f6f6f7);
   color: var(--sc-text, #1a1a1c);
 }
 
-.sc-btn-connected {
-  display: inline-flex;
+.sc-head-back svg {
+  width: 17px;
+  height: 17px;
+}
+
+.sc-foot-strip {
+  display: flex;
   align-items: center;
-  gap: 9px;
-  font-family: var(--sc-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  justify-content: space-between;
+  gap: 12px;
+  margin-top: 16px;
+  padding: 10px 10px 10px 13px;
+  border-radius: var(--sc-r, 10px);
+  background: var(--sc-raised, #f6f6f7);
   font-size: 13px;
+  color: var(--sc-muted, #6b6b73);
+  text-align: left;
 }
 
-.sc-btn-connected .sc-dot {
+.sc-foot-go {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  flex: none;
+  padding: 5px 9px;
+  border-radius: var(--sc-r-sm, 6px);
+  background: var(--sc-sheet, #ffffff);
+  border: 1px solid var(--sc-line-2, #dcdce0);
+  color: var(--sc-text, #1a1a1c);
+  font-size: 12.5px;
+  font-weight: 600;
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+.sc-foot-go:hover {
+  border-color: var(--sc-muted, #6b6b73);
+}
+
+.sc-foot-go svg {
+  width: 13px;
+  height: 13px;
+}
+
+.sc-opt-go {
+  width: 15px;
+  height: 15px;
   flex: none;
+  color: var(--sc-line-2, #dcdce0);
+}
+
+.sc-opt:hover .sc-opt-go {
+  color: var(--sc-muted, #6b6b73);
+}
+
+.sc-waiting {
+  position: relative;
+  display: grid;
+  place-items: center;
+  width: 84px;
+  height: 84px;
+  
+  margin: 0 auto 10px;
+}
+
+.sc-waiting-orbit {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  color: var(--sc-accent, #18181b);
+  animation: sc-turn 1100ms linear infinite;
+}
+
+.sc-waiting-arc {
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 3;
+  stroke-linecap: round;
+  stroke-dasharray: 72 217;
+}
+
+.sc-waiting-mark {
+  width: 44px;
+  height: 44px;
+  color: var(--sc-text, #1a1a1c);
+}
+
+@keyframes sc-turn {
+  to {
+    transform: rotate(1turn);
+  }
+}
+
+.sc-result {
+  position: relative;
+  display: grid;
+  place-items: center;
+  width: 84px;
+  height: 84px;
+  margin: 2px auto 18px;
+  
+  animation: sc-land 520ms cubic-bezier(0.34, 1.4, 0.64, 1);
+}
+
+.sc-result-ok {
+  color: var(--sc-ok, #22a06b);
+}
+
+.sc-result-off {
+  color: var(--sc-muted, #6b6b73);
+  --sc-ring: var(--sc-line-2, #dcdce0);
+}
+
+.sc-result-ring,
+.sc-result-glyph {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.sc-result-ring {
+  transform: rotate(-90deg);
+}
+
+.sc-result-circle {
+  fill: none;
+  
+  stroke: var(--sc-ring, currentColor);
+  stroke-width: 3;
+  
+  stroke-dasharray: 289;
+  stroke-dashoffset: 289;
+  animation: sc-sweep 560ms cubic-bezier(0.22, 0.9, 0.3, 1) forwards;
+}
+
+.sc-result-path {
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 4.5;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-dasharray: 60;
+  stroke-dashoffset: 60;
+  animation: sc-draw 300ms 380ms cubic-bezier(0.3, 0.8, 0.4, 1) forwards;
+}
+
+.sc-result-halo {
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  border: 2px solid currentColor;
+  opacity: 0;
+  animation: sc-pulse 640ms 420ms cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
+}
+
+@keyframes sc-land {
+  from {
+    opacity: 0;
+    transform: scale(0.9);
+  }
+}
+
+@keyframes sc-sweep {
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+
+@keyframes sc-draw {
+  to {
+    stroke-dashoffset: 0;
+  }
+}
+
+@keyframes sc-pulse {
+  from {
+    opacity: 0.4;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(1.32);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  
+  .sc-waiting-orbit {
+    animation: none;
+    color: var(--sc-line-2, #dcdce0);
+  }
+
+  .sc-waiting-arc {
+    stroke-dasharray: none;
+  }
+
+  
+  .sc-result {
+    animation: none;
+  }
+
+  .sc-result-circle,
+  .sc-result-path {
+    animation: none;
+    stroke-dashoffset: 0;
+  }
+
+  
+  .sc-result-halo {
+    display: none;
+  }
+}
+
+.sc-prereq {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  margin: 10px 0 0;
+  font-size: 12.5px;
+  color: var(--sc-muted, #6b6b73);
+}
+
+.sc-opt:focus-visible,
+.sc-btn:focus-visible,
+.sc-step-lead:focus-visible,
+.sc-step-links a:focus-visible,
+.sc-alt-link:focus-visible,
+.sc-conn-action:focus-visible,
+.sc-input:focus-visible,
+.sc-modal-close:focus-visible {
+  outline: 2px solid var(--sc-accent, #18181b);
+  outline-offset: 2px;
+}
+
+.sc-app {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.sc-app:has(.sc-app-icon) {
+  vertical-align: -3px;
+}
+
+.sc-app-icon {
+  width: 13px;
+  height: 13px;
+  flex: none;
+  border-radius: 3px;
+  
+  object-fit: contain;
+}
+
+.sc-link {
+  color: inherit;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.sc-btn-quiet {
+  border-color: transparent;
+  background: transparent;
+  color: var(--sc-muted, #6b6b73);
+}
+
+.sc-btn-quiet:hover {
+  background: var(--sc-raised, #f6f6f7);
+  color: var(--sc-text, #1a1a1c);
+}
+
+.sc-btn-connected {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  
+  max-width: 100%;
+  min-width: 0;
+  
+  padding: 4px 13px 4px 4px;
+  border-radius: var(--sc-r-pill, 999px);
+  border-color: var(--sc-line, #e9e9eb);
+  
+  box-shadow: var(--sc-shadow-1);
+  font-size: var(--sc-fs-small);
+  font-weight: 500;
+  
+  letter-spacing: -0.005em;
+  transition:
+    background-color 120ms ease,
+    border-color 120ms ease,
+    box-shadow 120ms ease;
+}
+
+.sc-btn-connected:hover {
+  background: var(--sc-raised, #f6f6f7);
+  border-color: var(--sc-line-2, #dcdce0);
+}
+
+.sc-btn-connected:active {
+  transform: translateY(0.5px);
+}
+
+.sc-btn-connected .sc-runtime-tile {
+  border-radius: 50%;
+}
+
+.sc-btn-connected:hover .sc-runtime-tile {
+  background: var(--sc-sheet, #ffffff);
+}
+
+.sc-btn-connected .sc-dot {
+  flex: none;
+  margin-left: 1px;
+}
+
+.sc-btn-connected .sc-dot-ok {
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sc-ok, #22a06b) 16%, transparent);
+}
+
+.sc-btn-connected .sc-dot-busy {
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sc-warn, #b06f14) 16%, transparent);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .sc-btn-connected .sc-dot-ok {
+    animation: sc-pulse-ok 3s ease-out infinite;
+  }
+  .sc-btn-connected .sc-dot-busy {
+    animation: sc-pulse-busy 1.8s ease-out infinite;
+  }
+}
+
+@keyframes sc-pulse-ok {
+  0%,
+  70%,
+  100% {
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sc-ok, #22a06b) 16%, transparent);
+  }
+  35% {
+    box-shadow: 0 0 0 5px color-mix(in srgb, var(--sc-ok, #22a06b) 7%, transparent);
+  }
+}
+
+@keyframes sc-pulse-busy {
+  0%,
+  70%,
+  100% {
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sc-warn, #b06f14) 16%, transparent);
+  }
+  35% {
+    box-shadow: 0 0 0 5px color-mix(in srgb, var(--sc-warn, #b06f14) 7%, transparent);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sc-btn-connected {
+    transition: none;
+  }
+  .sc-btn-connected:active {
+    transform: none;
+  }
+}
+
+.sc-btn-connected-text {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sc-btn-connected-where {
+  color: var(--sc-muted, #6b6b73);
+  font-weight: 400;
+}
+
+.sc-sr {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+.soba-connect:has(> .sc-limit) {
+  max-width: none;
+}
+
+.soba-connect .sc-limit {
+  max-width: none;
+  
+  container-type: inline-size;
+  container-name: sc-limit;
+}
+.sc-limit-actions {
+  display: flex;
+  flex-wrap: wrap-reverse;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 16px;
+}
+.sc-limit-actions .sc-btn {
+  
+  flex: 0 1 auto;
+  min-width: max-content;
+}
+
+@container sc-limit (max-width: 480px) {
+  .sc-limit-actions {
+    flex-direction: column-reverse;
+    align-items: stretch;
+  }
+  .sc-limit-actions .sc-btn {
+    width: 100%;
+  }
+}
+
+.sc-nudge {
+  
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  column-gap: 18px;
+  padding: 16px 18px 15px;
+  border: 1px solid var(--sc-line, #e9e9eb);
+  
+  border-radius: var(--sc-r, 10px);
+  background: var(--sc-sheet, #ffffff);
+  box-shadow: var(--sc-shadow-1);
+}
+
+.sc-nudge-top {
+  grid-column: 1;
+  min-width: 0;
+}
+.sc-nudge-say {
+  min-width: 0;
+}
+
+.sc-nudge > .sc-btn {
+  grid-column: 2;
+  align-self: end;
+  justify-self: end;
+}
+
+.sc-nudge:not(:has(.sc-nudge-steps)) > .sc-btn {
+  grid-row: 1;
+  align-self: center;
+}
+
+.soba-connect:has(> .sc-nudge) {
+  container-type: inline-size;
+  container-name: sc-nudge;
+}
+
+@container sc-nudge (max-width: 460px) {
+  .sc-nudge {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  
+  .sc-nudge > .sc-btn,
+  .sc-nudge:not(:has(.sc-nudge-steps)) > .sc-btn {
+    grid-column: 1;
+    grid-row: auto;
+    align-self: start;
+    margin-top: 14px;
+  }
+}
+.sc-nudge-title {
+  margin: 0;
+  font-size: var(--sc-fs-title);
+  font-weight: 600;
+  line-height: 1.3;
+  letter-spacing: -0.01em;
+  color: var(--sc-text, #1a1a1c);
+}
+.sc-nudge-detail {
+  margin: 3px 0 0;
+  font-size: var(--sc-fs-body);
+  line-height: 1.5;
+  color: var(--sc-muted, #6b6b73);
+}
+
+.sc-nudge-stalled .sc-nudge-title {
+  color: var(--sc-warn, #b06f14);
+}
+
+.sc-nudge-note {
+  margin: 6px 0 0;
+  font-size: var(--sc-fs-small, 12px);
+  line-height: 1.45;
+  color: var(--sc-muted, #6b6b73);
+}
+
+.sc-nudge-more {
+  display: inline-flex;
+  align-self: start;
+  align-items: center;
+  gap: 5px;
+  margin: 9px 0 0 -8px;
+  padding: 3px 8px;
+  font-size: var(--sc-fs-body);
+}
+.sc-nudge-chev {
+  flex: none;
+  width: 13px;
+  height: 13px;
+  transition: transform 150ms ease;
+}
+.sc-nudge-more[aria-expanded="true"] > .sc-nudge-chev {
+  transform: rotate(180deg);
+}
+@media (prefers-reduced-motion: reduce) {
+  .sc-nudge-chev {
+    transition: none;
+  }
+}
+
+.sc-nudge-steps {
+  grid-column: 1;
+  counter-reset: sc-step;
+  margin: 11px 0 2px;
+  padding: 0;
+  list-style: none;
+}
+.sc-nudge-steps li {
+  position: relative;
+  display: grid;
+  grid-template-columns: 20px minmax(0, 1fr);
+  
+  gap: 0 12px;
+  padding-bottom: 14px;
+  font-size: var(--sc-fs-body);
+  line-height: 1.5;
+}
+.sc-nudge-steps li:last-child {
+  padding-bottom: 0;
+}
+
+.sc-nudge-steps li::before {
+  counter-increment: sc-step;
+  content: counter(sc-step);
+  grid-column: 1;
+  grid-row: 1;
+  display: grid;
+  place-items: center;
+  width: 20px;
+  height: 20px;
+  border: 1px solid var(--sc-line-2, #dcdce0);
+  border-radius: 50%;
+  background: var(--sc-sheet, #ffffff);
+  font-size: var(--sc-fs-small);
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+  color: var(--sc-muted, #6b6b73);
+}
+
+.sc-nudge-steps li:not(:last-child)::after {
+  content: "";
+  position: absolute;
+  
+  left: 9.5px;
+  top: 23px;
+  bottom: 2px;
+  width: 1px;
+  background: var(--sc-line, #e9e9eb);
+}
+
+.sc-nudge-steps strong {
+  grid-column: 2;
+  font-weight: 600;
+  color: var(--sc-text, #1a1a1c);
+}
+.sc-nudge-steps span {
+  grid-column: 2;
+  color: var(--sc-muted, #6b6b73);
+}
+
+.sc-step-lead {
+  grid-column: 2;
+  justify-self: start;
+  padding: 0;
+  border: 0;
+  background: none;
+  font: inherit;
+  font-weight: 600;
+  color: var(--sc-text, #1a1a1c);
+  text-align: left;
+  cursor: pointer;
+  text-decoration: underline;
+  text-decoration-color: color-mix(in srgb, currentcolor 30%, transparent);
+  text-underline-offset: 3px;
+}
+.sc-step-lead:hover {
+  text-decoration-color: currentcolor;
+}
+
+.sc-step-links {
+  grid-column: 2;
+  margin-top: 3px;
+  
+  font-size: var(--sc-fs-small);
+  color: var(--sc-muted, #6b6b73);
+}
+.sc-step-links a {
+  color: var(--sc-text-2, #3f3f46);
+  
+  text-decoration: underline;
+  text-decoration-color: color-mix(in srgb, currentcolor 35%, transparent);
+  text-underline-offset: 2px;
+}
+.sc-step-links a:hover {
+  color: var(--sc-text, #1a1a1c);
+  text-decoration-color: currentcolor;
+}
+.sc-step-links a:not(:last-child)::after {
+  content: "·";
+  
+  margin: 0 5px;
+  color: var(--sc-muted, #6b6b73);
+  text-decoration: none;
+  display: inline-block;
+}
+
+.sc-step-links a:first-of-type {
+  margin-left: 6px;
+}
+
+.sc-nudge .sc-btn-primary {
+  flex: none;
+  margin-left: auto;
+  padding: 8px 15px;
+  font-size: var(--sc-fs-small);
+}
+
+.sc-plan-reward {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 6px;
+}
+
+.sc-plan-reward-line {
+  position: relative;
+  margin: 0;
+  padding-left: 16px;
+  font-size: 13px;
+  line-height: 1.45;
+  color: var(--sc-text-2, #3f3f46);
+}
+.sc-plan-reward-line::before {
+  content: "✓";
+  position: absolute;
+  left: 2px;
+  top: 1px;
+  font-size: 11px;
+  color: var(--sc-ok, #22a06b);
+}
+
+.sc-btn-icon {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+}
+.sc-btn-mark {
+  width: 13px;
+  height: 13px;
+  flex: none;
+}
+
+.soba-connect.sc-compact {
+  width: auto;
+  max-width: none;
+  margin: 0;
+  font-size: 13px;
+}
+.sc-compact .sc-compute-act {
+  margin-top: 0;
+}
+.sc-compact .sc-btn {
+  padding: 4px 9px;
+  font-size: 12px;
+  line-height: 18px;
+}
+.sc-compact .sc-btn-icon {
+  gap: 6px;
+}
+.sc-compact .sc-btn-mark {
+  width: 12px;
+  height: 12px;
+}
+
+.sc-plan-reward-open {
+  padding-left: 0;
+}
+.sc-plan-reward-open::before {
+  content: none;
+}
+
+.sc-plan-reward-need {
+  color: var(--sc-muted, #6b6b73);
+}
+.sc-plan-reward-need::before {
+  content: "–";
+  font-weight: 400;
+  color: var(--sc-line-2, #dcdce0);
+}
+
+.sc-plan .sc-plan-reward-line {
+  padding: 9px 11px 9px 27px;
+  border: 1px solid var(--sc-line, #e9e9eb);
+  border-radius: var(--sc-r-sm, 6px);
+  background: var(--sc-sheet, #ffffff);
+}
+
+.sc-plan .sc-plan-reward-line::before {
+  left: 11px;
+  top: 9px;
+}
+
+.sc-plan .sc-plan-reward-open {
+  padding-left: 11px;
+}
+
+.sc-plan-reward-act {
+  display: grid;
+  width: 100%;
+  border: 0;
+  background: transparent;
+  font-family: inherit;
+  font-weight: 400;
+  text-align: left;
+  cursor: pointer;
+  transition:
+    border-color 120ms ease,
+    background-color 120ms ease;
+}
+
+.sc-plan-reward-act::before {
+  transition: opacity 120ms ease;
+}
+
+.sc-plan-reward-act > span {
+  grid-area: 1 / 1;
+  transition:
+    opacity 120ms ease,
+    visibility 120ms;
+}
+
+.sc-plan-reward-act .sc-reward-do {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  
+  margin-left: -16px;
+  color: var(--sc-text, #1a1a1c);
+  font-weight: 500;
+  opacity: 0;
+  visibility: hidden;
+}
+
+.sc-reward-mark {
+  width: 13px;
+  height: 13px;
+  flex: none;
+}
+
+.sc-plan-reward-act:hover,
+.sc-plan-reward-act:focus-visible {
+  border-color: var(--sc-line-2, #dcdce0);
+  background: var(--sc-raised, #f6f6f7);
+}
+
+.sc-plan-reward-act:hover .sc-reward-said,
+.sc-plan-reward-act:focus-visible .sc-reward-said {
+  opacity: 0;
+  visibility: hidden;
+}
+
+.sc-plan-reward-act:hover .sc-reward-do,
+.sc-plan-reward-act:focus-visible .sc-reward-do {
+  opacity: 1;
+  visibility: visible;
+}
+
+.sc-plan-reward-act:hover::before,
+.sc-plan-reward-act:focus-visible::before {
+  opacity: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sc-plan-reward-act,
+  .sc-plan-reward-act > span {
+    transition: none;
+  }
+}
+
+.sc-current-foot .sc-plan-reward-line {
+  padding: 9px 11px 9px 27px;
+  border: 1px solid var(--sc-line, #e9e9eb);
+  border-radius: var(--sc-r-sm, 6px);
+  background: var(--sc-raised, #f6f6f7);
+}
+
+.sc-current-foot .sc-plan-reward-line::before {
+  left: 11px;
+  top: 9px;
+}
+
+.sc-current-foot .sc-plan-reward-need::before {
+  content: "!";
+  font-weight: 600;
+  color: var(--sc-muted, #6b6b73);
+}
+
+.sc-current-foot .sc-btn {
+  border-radius: var(--sc-r-pill, 999px);
+  padding-block: 0.6em;
+}
+
+.sc-billing {
+  display: flex;
+  flex-direction: column;
+  gap: 28px;
+}
+
+.sc-billing-plans {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.sc-current {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.sc-section-title {
+  margin: 0;
+  font-size: var(--sc-fs-label, 11.5px);
+  font-weight: 600;
+  color: var(--sc-muted, #6b6b73);
+}
+
+.sc-current-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px 32px;
+  align-items: flex-start;
+}
+
+.sc-current-main {
+  flex: 3 1 260px;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+}
+
+.sc-current-trial {
+  margin: 0;
+  display: flex;
+  align-items: center;
+}
+
+.sc-current-name {
+  margin: 0;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: var(--sc-fs-title, 17px);
+  font-weight: 600;
+  letter-spacing: -0.025em;
+  line-height: 1.1;
+}
+
+.sc-trial-badge {
+  font-size: 11.5px;
+  font-weight: 500;
+  padding: 3px 8px;
+  border-radius: var(--sc-r-pill, 999px);
+  background: var(--sc-raised, #f6f6f7);
+  color: var(--sc-text-2, #3f3f46);
+  white-space: nowrap;
+}
+
+.sc-current-foot {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px 16px;
+  padding-top: 12px;
+  border-top: 1px solid var(--sc-line, #e9e9eb);
+}
+.sc-current-foot .sc-plan-reward-line {
+  flex: 1 1 240px;
+}
+
+.sc-usage {
+  flex: 2 1 240px;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 7px;
+  
+  padding-top: 7px;
+}
+
+.sc-usage .sc-fact-key {
+  font-size: var(--sc-fs-label, 11.5px);
+  font-weight: 600;
+}
+
+.sc-usage-figure {
+  font-size: var(--sc-fs-title, 17px);
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  font-variant-numeric: tabular-nums;
+}
+
+.sc-usage-line {
+  margin: 0;
+  font-size: 12.5px;
+  line-height: 1.45;
+  color: var(--sc-muted, #6b6b73);
+}
+
+.sc-meter {
+  height: 7px;
+  border-radius: var(--sc-r-pill, 999px);
+  
+  background: var(--sc-line-2, #dcdce0);
+  overflow: hidden;
+}
+.sc-meter-fill {
+  display: block;
+  height: 100%;
+  border-radius: var(--sc-r-pill, 999px);
+  background: var(--sc-text, #18181b);
+  transition: width 240ms ease;
+  
+  min-width: 6px;
+}
+
+.sc-meter-full {
+  background: var(--sc-warn, #b06f14);
+}
+
+.sc-plan-rows {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  border: 1px solid var(--sc-line, #e9e9eb);
+  border-radius: var(--sc-r, 10px);
+  
+  overflow: hidden;
+  background: var(--sc-sheet, #fff);
+}
+
+.sc-plan-row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: 12px 24px;
+  padding: 18px 20px;
+}
+.sc-plan-row + .sc-plan-row {
+  border-top: 1px solid var(--sc-line, #e9e9eb);
+}
+
+.sc-row-main {
+  flex: 1 1 300px;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.sc-row-side {
+  flex: 0 0 auto;
+  margin-left: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 12px;
+  text-align: right;
+}
+.sc-row-side .sc-btn {
+  white-space: nowrap;
+}
+
+.sc-row-name {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.sc-plan-row .sc-sub {
+  margin: 0;
+  max-width: 62ch;
+}
+
+.sc-row-allowance {
+  margin: 4px 0 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+.sc-row-figure {
+  font-size: 14px;
+  font-weight: 550;
+  font-variant-numeric: tabular-nums;
+}
+.sc-row-qualifier {
+  font-size: 12.5px;
+  color: var(--sc-muted, #6b6b73);
+}
+
+.sc-plan-compute-inline .sc-fact-key {
+  min-width: 0;
+  
+  white-space: nowrap;
+}
+.sc-plan-compute-inline {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  font-size: 13.5px;
+}
+.sc-compute-inline {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 2px 14px;
+}
+
+.sc-plan-reward-inline {
+  flex-direction: row;
+  align-items: baseline;
+  flex-wrap: wrap;
+  gap: 2px 12px;
+}
+
+.sc-table-scroll {
+  overflow-x: auto;
+}
+
+.sc-plan-table {
+  width: 100%;
+  border-collapse: collapse;
+  text-align: left;
+}
+
+.sc-plan-table th[scope="col"] {
+  min-width: 148px;
+}
+
+.sc-plan-table th,
+.sc-plan-table td {
+  padding: 12px;
+  vertical-align: top;
+  border-bottom: 1px solid var(--sc-line, #e9e9eb);
+}
+
+.sc-plan-table thead th {
+  border-bottom-color: var(--sc-line-2, #dcdce0);
+}
+
+.sc-plan-table tbody th[scope="row"] {
+  font-weight: 400;
+  color: var(--sc-muted, #6b6b73);
+  white-space: nowrap;
+}
+
+.sc-plan-table .sc-title {
+  display: block;
+}
+.sc-plan-table .sc-plan-price {
+  margin-top: 4px;
+}
+
+.sc-table-buy td {
+  border-bottom: none;
+  padding-top: 14px;
+}
+.sc-table-buy .sc-btn {
+  width: 100%;
+}
+
+.sc-muted-cell {
+  color: var(--sc-muted, #6b6b73);
+}
+
+.sc-plan-table .sc-plan-reward-line {
+  margin-bottom: 6px;
+}
+.sc-plan-table .sc-btn {
+  padding: 6px 12px;
+  font-size: 13px;
+}
+
+.sc-plan-featured {
+  background: var(--sc-raised, #f6f6f7);
+  border-color: var(--sc-line-2, #dcdce0);
+  box-shadow: var(--sc-shadow-2);
+}
+
+li.sc-plan-row.sc-plan-featured {
+  box-shadow: none;
+  background: var(--sc-raised, #f6f6f7);
+}
+li.sc-plan-row.sc-plan-current {
+  background: var(--sc-raised, #f6f6f7);
+  box-shadow: inset 2px 0 0 var(--sc-text, #18181b);
+}
+.sc-plan-table .sc-col-featured {
+  background: var(--sc-raised, #f6f6f7);
+}
+.sc-plan-table .sc-col-current {
+  box-shadow: inset 2px 0 0 var(--sc-text, #18181b);
+}
+
+.sc-plan-badge-soft {
+  font-size: var(--sc-fs-label, 11px);
+  padding: 2px 6px;
+  border-radius: var(--sc-r-pill, 999px);
+  border: 1px solid var(--sc-line-2, #dcdce0);
+  color: var(--sc-text-2, #3f3f46);
+  white-space: nowrap;
+}
+
+.sc-plan-after {
+  margin-left: 5px;
+}
+
+.sc-plan-price-sm .sc-plan-amount {
+  font-size: 20px;
+}
+
+.sc-limit-head {
+  display: flex;
+  align-items: flex-start;
+  gap: 11px;
+}
+.sc-limit-mark {
+  flex: none;
+  display: grid;
+  place-items: center;
+  width: 30px;
+  height: 30px;
+  border-radius: var(--sc-r-sm, 6px);
+  background: var(--sc-raised, #f6f6f7);
+  color: var(--sc-text-2, #3f3f46);
+}
+.sc-limit-mark svg {
+  width: 16px;
+  height: 16px;
+}
+.sc-limit-title {
+  margin: 0;
+  font-size: var(--sc-fs-body);
+  font-weight: 600;
+  
+  line-height: 1.35;
+}
+.sc-limit-body {
+  margin: 3px 0 0;
+  font-size: var(--sc-fs-small);
+  color: var(--sc-muted, #6b6b73);
+}
+
+.sc-limit-note {
+  margin: 10px 0 0;
+  font-size: var(--sc-fs-small);
+  color: var(--sc-muted, #6b6b73);
+}
+
+.sc-modal-sheet .sc-limit-head {
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: 0;
+}
+
+.sc-modal-sheet .sc-limit-mark {
+  width: 38px;
+  height: 38px;
+  margin-bottom: 12px;
+  border: 1px solid var(--sc-line, #e9e9eb);
+  border-radius: var(--sc-r, 10px);
+}
+
+.sc-modal-sheet .sc-limit-mark svg {
+  width: 18px;
+  height: 18px;
+}
+
+.sc-modal-sheet .sc-limit-title {
+  font-size: var(--sc-fs-title);
+  letter-spacing: -0.02em;
+}
+
+.sc-modal-sheet .sc-limit-body {
+  font-size: var(--sc-fs-small);
+  line-height: 1.45;
+  
+  max-width: 34ch;
+  margin: 5px auto 0;
+}
+
+.sc-modal-sheet .sc-limit-actions {
+  margin-top: 18px;
+}
+
+.sc-modal-sheet .sc-limit-actions .sc-btn {
+  padding: 11px 14px;
+  border-radius: var(--sc-r, 10px);
+  font-weight: 500;
+}
+
+.sc-modal-sheet .sc-limit-actions .sc-btn-quiet {
+  position: relative;
+  margin-top: 6px;
+  font-size: var(--sc-fs-small);
+}
+
+.sc-modal-sheet .sc-limit-actions .sc-btn-quiet::before {
+  content: "";
+  position: absolute;
+  top: -7px;
+  left: 0;
+  right: 0;
+  border-top: 1px solid var(--sc-line, #e9e9eb);
+}
+
+.sc-limit-actions .sc-btn-quiet {
+  flex: 0 0 auto;
+}
+
+@keyframes sc-card-in {
+  from {
+    opacity: 0;
+    transform: translateY(3px);
+  }
+}
+
+.sc-modal-sheet .sc-card {
+  animation: sc-card-in 140ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
+}
+
+.sc-modal-sheet {
+  interpolate-size: allow-keywords;
+  transition: height 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+@keyframes sc-arrive {
+  from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+}
+
+.sc-modal-sheet .sc-machine {
+  animation: sc-arrive 200ms cubic-bezier(0.2, 0.8, 0.2, 1) 60ms both;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sc-modal-sheet .sc-card,
+  .sc-modal-sheet .sc-machine {
+    animation: none;
+  }
+  .sc-modal-sheet {
+    transition: none;
+  }
+}
+
+.sc-opt-has {
+  flex: none;
+  font-size: 11px;
+  font-weight: 600;
+  border-radius: var(--sc-r-sm, 6px);
+  padding: 3px 7px;
+  background: var(--sc-raised, #f6f6f7);
+  color: var(--sc-muted, #6b6b73);
+}
+
+.sc-opt-has-ok {
+  color: var(--sc-ok, #22a06b);
+}
+
+.sc-opt-has-warn {
+  color: var(--sc-warn, #b06f14);
 }