/* Light belongs to the action. Neutral material shared by portal and workspace. */
.portal,
.workspace {
  --action-light: #f5f5f3;
  --action-rim: #ffffff70;
  --action-halo: #f0f0ff12;
}

.world-button,
.workspace .ws-button-primary {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 52px;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 11px 12px 11px 22px;
  background: linear-gradient(180deg, #fafaf8, #ceced2) padding-box,
    linear-gradient(180deg, #fff, #919196) border-box;
  color: #141416;
  font-size: 12px !important;
  box-shadow: inset 0 1px 0 #fff, 0 0 22px #eeeeff12, 0 5px 16px #0004;
  transition: box-shadow 220ms ease, transform 220ms ease;
  -webkit-tap-highlight-color: transparent;
}

.world-button::before,
.workspace .ws-button-primary::before {
  content: '';
  position: absolute;
  inset: -50% auto -50% -50%;
  width: 40%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, #fff9, transparent);
  transform: translateX(-100%) skewX(-18deg);
  transition: transform 600ms ease;
}

.world-button:hover { transform: none; }
.workspace .ws-button-primary:hover:not(:disabled) { background: linear-gradient(180deg, #fafaf8, #ceced2) padding-box, linear-gradient(180deg, #fff, #919196) border-box; }
.world-button > svg,
.workspace .ws-button-primary > svg {
  box-sizing: content-box;
  width: 15px;
  height: 15px;
  padding: 7px;
  border: 1px solid #1515181c;
  border-radius: 50%;
  background: #15151808;
}

.world-button:focus-visible,
.workspace .ws-button-primary:focus-visible {
  outline: 2px solid #f5f5f3;
  outline-offset: 4px;
  box-shadow: 0 0 30px #eeeeff24, 0 5px 16px #0004;
}

.world-button:active,
.workspace .ws-button-primary:active:not(:disabled) { transform: translateY(1px); }
.workspace .ws-button-primary:disabled { box-shadow: none; }

.portal .portal-workspace-link {
  min-height: 44px;
  border-color: #ffffff36;
  border-radius: 999px;
  padding: 10px 16px;
  background: linear-gradient(180deg, #ffffff09, #ffffff02);
  box-shadow: inset 0 1px 0 #ffffff0c, 0 0 16px #ffffff05;
  transition: border-color 220ms ease, box-shadow 220ms ease;
}

.portal-services {
  gap: 14px;
  background: none;
  border: 0;
  border-radius: 0;
  backdrop-filter: none;
}

.portal-service,
.portal-service + .portal-service {
  isolation: isolate;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 14px;
  background: linear-gradient(145deg, #252527, #121213 80%) padding-box,
    linear-gradient(135deg, #86868d85, #3b3b4055 46%, #77778075) border-box;
  box-shadow: inset 0 1px 0 #ffffff08, 0 12px 30px #0003, 0 0 24px #ffffff04;
  transition: box-shadow 250ms ease, transform 250ms ease;
}

.portal-service::before {
  content: '';
  position: absolute;
  top: 0;
  left: 15%;
  width: 65%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #f4f4ff99, transparent);
  pointer-events: none;
}

.portal-service::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse at 75% 0, #ffffff14, transparent 70%);
  transition: opacity 250ms ease;
}

.portal-service h2 { font-size: 28px; }
.portal-service p { color: #b0b0b7; font-size: 11px; }
.portal-service-state { color: #aaaab2; font-size: 8px; line-height: 1.8; }
.portal-service-arrow {
  box-sizing: content-box;
  width: 16px;
  height: 16px;
  padding: 10px;
  border: 1px solid #ffffff30;
  border-radius: 50%;
  background: linear-gradient(160deg, #ffffff10, #ffffff02);
  box-shadow: inset 0 1px 0 #ffffff0a;
}

.portal-service:focus-visible { outline-offset: 4px; box-shadow: 0 0 32px #eeeeff1a; }
.portal-service:focus-visible::after { opacity: 1; }
.portal-service:active { transform: translateY(1px); }

/* The composer stays quiet until it has focus or a real request is pending. */
.workspace .ws-compose-card {
  position: relative;
  isolation: isolate;
  border: 1px solid transparent;
  border-radius: 18px;
  padding-top: 22px;
  background: linear-gradient(145deg, #1e1e21, #131315 58%) padding-box,
    linear-gradient(135deg, #77777e80, #36363b70 50%, #72727a80) border-box;
  box-shadow: inset 0 1px 0 #ffffff05, 0 18px 50px #0003;
  transition: box-shadow 250ms ease, border-color 250ms ease;
}

.ws-compose-card::before {
  content: '';
  position: absolute;
  inset: -1px 12% auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, #f5f5ff88, transparent);
  opacity: .6;
  pointer-events: none;
  transition: opacity 200ms ease;
}

.workspace .ws-compose-card:focus-within {
  border-color: #bdbdc552;
  box-shadow: inset 0 1px 0 #ffffff08, 0 0 0 4px #ffffff03, 0 0 40px #eeeeff0c, 0 18px 50px #0003;
}

.ws-compose-card:focus-within::before,
.ws-compose-card[data-writing=true]::before { opacity: 1; }
.ws-compose-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 25px; }
.ws-compose-heading > div { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ws-compose-heading strong { color: #dddde2; font-size: 13px; font-weight: 500; line-height: 1.5; }
.ws-compose-mark { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border: 1px solid #ffffff1c; border-radius: 10px; background: linear-gradient(150deg, #ffffff0c, transparent); }
.ws-compose-mark img { width: 20px; height: 20px; }
.ws-compose-state { display: flex; align-items: center; justify-content: flex-end; gap: 8px; color: #a3a3ac; font-size: 10px; line-height: 1.4; text-align: right; }
.ws-compose-trace { display: flex; align-items: center; gap: 3px; height: 14px; flex: none; }
.ws-compose-trace i { width: 2px; height: 6px; background: #aaaab2; border-radius: 2px; transform-origin: center; transition: transform 180ms ease, background 180ms ease; }
.ws-compose-trace i:nth-child(2) { height: 12px; }
.ws-compose-trace i:nth-child(3) { height: 8px; }
.ws-compose-card:focus-within .ws-compose-trace i { background: #ededf3; }
.ws-compose-card[data-writing=true] .ws-compose-trace i { transform: scaleY(1.45); }
.ws-compose-card[data-writing=true] .ws-compose-trace i:nth-child(2) { transform: scaleY(.65); }
.ws-compose-card[data-input-state=busy] .ws-compose-state { color: #eeeeef; }
.ws-compose-card[data-input-state=error] .ws-compose-state { color: #dfb1a6; }
.workspace .ws-compose-card .ws-field-label { font-size: 9px; color: #aaaab3; letter-spacing: .08em; }
.workspace #question { min-height: 105px; font-size: 22px; line-height: 1.5; letter-spacing: -.035em; background: transparent; border: 0; padding: 0 0 8px; border-radius: 0; }
.workspace #question::placeholder { color: #8e8e98; }
.workspace #question:focus-visible { outline: none; box-shadow: 0 1px 0 #d5d5e052; }
.workspace .ws-input-meta { color: #9898a1; font-size: 10px; line-height: 1.65; margin: 10px 0 20px; }
.workspace .ws-input-meta > span:last-child { font-size: 9px; }

.ws-compose-context { border-top: 1px solid #ffffff13; border-bottom: 1px solid #ffffff13; }
.ws-compose-context > summary { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 10px 0; color: #c6c6cd; font-size: 12px; cursor: pointer; list-style: none; }
.ws-compose-context > summary::-webkit-details-marker { display: none; }
.ws-compose-context > summary > svg { width: 16px; height: 16px; flex: none; color: #b0b0b9; }
.ws-compose-context > summary > span:nth-of-type(2) { margin-left: auto; font-size: 10px; color: #9999a3; }
.ws-compose-context > summary > .ws-context-chevron { width: 13px; height: 13px; transition: transform 180ms ease; }
.ws-compose-context[open] > summary > .ws-context-chevron { transform: rotate(180deg); }
.ws-compose-context[open] > summary { margin-bottom: 10px; }
.ws-compose-context > .ws-field-group { margin-bottom: 14px; }
.ws-compose-context .ws-links-details { margin-top: 0; margin-bottom: 14px; border-bottom: 0; }
.workspace .ws-compose-context textarea { background: #0d0d0f80; border-color: #ffffff20; font-size: 13px; }
.workspace .ws-compose-context textarea:focus-visible { outline: 1px solid #bdbdc5; outline-offset: 2px; }
.workspace .ws-compose-context .ws-field-group > label { font-size: 12px; }
.workspace .ws-links-details summary { min-height: 46px; font-size: 11px; }
.workspace .ws-compose-footer { border-radius: 0 0 18px 18px; border-top-color: #ffffff14; background: linear-gradient(120deg, #ffffff05, #ffffff01); }
.workspace .ws-compose-footer .ws-button { min-height: 50px; gap: 25px; }
.workspace .ws-usage-note { font-size: 10px; max-width: 260px; }
.workspace .ws-format span { min-height: 38px; padding: 10px 13px; font-size: 10px; border-radius: 999px; }
.workspace .ws-check { min-height: 32px; font-size: 11px; }
.workspace .ws-example-card { border-radius: 12px; background: linear-gradient(145deg, #ffffff06, transparent); transition: border-color 200ms ease, background 200ms ease, transform 200ms ease; }
.workspace .ws-example-card.is-selected { border-color: #8e8e996b; background: #ffffff08; box-shadow: inset 0 1px 0 #ffffff0a; }
.workspace .ws-progress { border-color: #89899566; background: linear-gradient(140deg, #ffffff08, #ffffff02); border-radius: 14px; }

@media (hover: hover) and (pointer: fine) {
  .world-button:hover,
  .workspace .ws-button-primary:hover:not(:disabled) { box-shadow: inset 0 1px 0 #fff, 0 0 32px #eeeeff28, 0 7px 18px #0005; transform: translateY(-2px); }
  .world-button:hover::before,
  .workspace .ws-button-primary:hover:not(:disabled)::before { transform: translateX(500%) skewX(-18deg); }
  .portal-service:hover { box-shadow: inset 0 1px 0 #ffffff12, 0 0 26px #eeeeff15, 0 15px 30px #0004; transform: translateY(-3px); }
  .portal-service:hover::after { opacity: 1; }
  .portal-service:hover .portal-service-arrow { transform: translate(2px, -2px); }
  .portal .portal-workspace-link:hover { border-color: #ffffff80; box-shadow: inset 0 1px 0 #ffffff14, 0 0 20px #eeeeff10; }
  .workspace .ws-example-card:hover { border-color: #b0b0bb80; transform: translateY(-2px); }
  .portal-service:active,
  .world-button:active,
  .workspace .ws-button-primary:active:not(:disabled) { transform: translateY(1px); }
}

@media (max-width: 600px) {
  .portal-header { padding-inline: 20px; gap: 12px; }
  .portal-header-actions { gap: 8px; }
  .portal-motion-toggle { width: 44px; justify-content: center; }
  .portal .portal-workspace-link { min-height: 44px; padding-inline: 14px; gap: 12px; font-size: 11px; }
  .portal-home { min-height: 0; max-height: none; padding: 38px 20px 0; }
  .portal-home .portal-eyebrow { font-size: 8px; letter-spacing: .1em; }
  .portal-home h1 { font-size: clamp(44px, 11.8vw, 64px); line-height: 1.1; margin-top: 26px; }
  .portal-intro { font-size: 13px; line-height: 1.85; margin-top: 25px; }
  .portal-entry { margin-top: clamp(62px, 11svh, 105px); padding-top: 0; }
  .portal-entry-label { font-size: 8px; margin-bottom: 13px; }
  .portal-services { gap: 12px; }
  .portal-service,
  .portal-service + .portal-service { min-height: 128px; gap: 14px; padding: 19px 17px; border-radius: 14px; }
  .portal-service h2 { font-size: 26px; line-height: 1.3; }
  .portal-service p { font-size: 11px; margin-top: 5px; }
  .portal-service-state { font-size: 8px; margin-top: 10px; letter-spacing: .07em; }
  .portal-service-number { font-size: 9px; margin-top: 7px; }
  .portal-service-arrow { width: 15px; height: 15px; padding: 9px; }
  .portal-home-bottom { margin-top: 25px; min-height: 66px; padding-block: 15px; }
  .portal-home-bottom > span { max-width: 170px; font-size: 7px; line-height: 1.8; }
  .portal-home-bottom > a { min-height: 44px; font-size: 8px; gap: 10px; }
  .world-button { min-height: 52px; padding-left: 22px; font-size: 12px !important; }
  .world-actions > .world-button { justify-content: space-between; }
  .portal .world-text-link { min-height: 44px; font-size: 12px; }
  .workspace .ws-main { padding-top: 28px; }
  .workspace .ws-page-heading h1 { font-size: clamp(32px, 8.8vw, 39px); }
  .workspace .ws-page-heading > p:last-child { font-size: 12px; line-height: 1.8; }
  .workspace .ws-compose-card { border-radius: 16px; padding-top: 18px; }
  .ws-compose-heading { gap: 12px; margin-bottom: 23px; align-items: center; }
  .ws-compose-heading > div { gap: 8px; }
  .ws-compose-heading strong { font-size: 12px; max-width: 110px; }
  .ws-compose-mark { width: 30px; height: 30px; border-radius: 9px; }
  .ws-compose-mark img { width: 18px; height: 18px; }
  .ws-compose-state { font-size: 9px; gap: 7px; max-width: 135px; }
  .workspace .ws-compose-card .ws-field-label { font-size: 8px; line-height: 1.8; margin-bottom: 14px; }
  .workspace #question { min-height: 112px; font-size: 20px; line-height: 1.5; }
  .workspace .ws-input-meta { font-size: 10px; margin-bottom: 18px; gap: 12px; }
  .workspace .ws-input-meta > span:first-child { max-width: 220px; }
  .workspace .ws-compose-context textarea { font-size: 16px; }
  .ws-compose-context > summary { gap: 8px; font-size: 11px; }
  .ws-compose-context > summary > span:nth-of-type(2) { font-size: 9px; }
  .workspace .ws-compose-footer { border-radius: 0 0 16px 16px; }
  .workspace .ws-compose-footer .ws-button { width: 100%; min-height: 52px; padding: 9px 12px 9px 20px; font-size: 13px !important; }
  .workspace .ws-usage-note { max-width: none; font-size: 10px; }
  .workspace .ws-format span { min-height: 44px; display: flex; align-items: center; justify-content: center; font-size: 10px; white-space: normal; }
  .workspace .ws-form-options { gap: 10px; padding-block: 14px; }
  .workspace .ws-check { min-height: 40px; }
  .workspace .ws-demo-notice strong { font-size: 11px; }
  .workspace .ws-demo-notice p { font-size: 10px; line-height: 1.7; }
  .workspace .ws-example-card { min-height: 94px; }
}

@media (max-width: 380px) {
  .portal-header .portal-brand img.portal-brand-lockup { width: 132px; height: auto; }
  .portal-service h2 { font-size: 24px; }
  .portal-service,
  .portal-service + .portal-service { gap: 10px; padding-inline: 14px; }
  .ws-compose-heading strong { max-width: 95px; }
}

@media (prefers-reduced-motion: reduce) {
  .world-button::before,
  .workspace .ws-button-primary::before { display: none; }
  .portal-service,
  .world-button,
  .workspace .ws-button-primary,
  .workspace .ws-example-card,
  .ws-compose-trace i { transform: none !important; }
}

.portal-reduced-motion .world-button::before { display: none; }
.portal-reduced-motion .portal-service,
.portal-reduced-motion .world-button { transform: none !important; }

@media print {
  .ws-compose-heading { display: none; }
  .world-button,
  .portal-service { box-shadow: none; }
}