/* V2 visual handoff adapted to the existing hero/oracle DOM. Intentionally
   scoped: the exported standalone stylesheet's html/body reset is not loaded. */
#hub-hero-screen.sv-v2-creation {
  --ember-br:var(--sv-violet-bright); --ember-dp:var(--sv-violet-deep);
  --cink:var(--sv-text); --cink-dim:var(--sv-text-muted); --cink-mute:var(--sv-text-dim);
  --cline:var(--sv-line-2); --cline-br:var(--sv-line-strong);
  /* The question and the box you answer it in are prose, so they take the
     reading face. Cinzel still carries the pill titles and mono the labels. */
  --cserif:var(--sv-font-read); --cmono:var(--sv-font-mono);
  isolation:isolate; background:var(--sv-bg); color:var(--sv-text);
  box-sizing:border-box; overflow-x:hidden; overflow-y:auto;
  padding:calc(76px + env(safe-area-inset-top)) env(safe-area-inset-right) calc(30px + env(safe-area-inset-bottom)) env(safe-area-inset-left); min-height:0;
}
#hub-hero-screen.sv-v2-creation::before {
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(ellipse 46% 60% at 50% 50%,rgba(var(--sv-ground-rgb),.55) 0,rgba(var(--sv-ground-rgb),.2) 60%,transparent 100%);
}
#hub-hero-screen.sv-v2-creation::after {
  position:fixed; z-index:0;
  background:radial-gradient(70% 130% at 50% 108%,rgba(var(--sv-accent-rgb),.2),rgba(var(--sv-accent-rgb),.06) 45%,transparent 72%);
}
#hub-hero-screen.sv-v2-creation .sv-creation-sky { position:fixed; inset:0; z-index:-1; opacity:.7; pointer-events:none; }
#hub-hero-screen.sv-v2-creation constellation-sky { display:block; width:100%; height:100%; }
#hub-hero-screen.sv-v2-creation .hh-back { z-index:2; min-height:40px; top:calc(20px + env(safe-area-inset-top)); left:max(22px,env(safe-area-inset-left)); }
#hub-hero-screen.sv-v2-creation .hh-back:hover { color:var(--sv-text); }
#hub-hero-screen.sv-v2-creation .sv-creation-counter {
  position:absolute; top:calc(26px + env(safe-area-inset-top)); right:max(28px,env(safe-area-inset-right)); z-index:2; font-family:var(--sv-font-mono);
  font-size:10px; letter-spacing:.24em; color:var(--sv-text-dim); text-transform:uppercase;
}
#hub-hero-screen.sv-v2-creation .hh-wrap { z-index:1; box-sizing:border-box; flex:none; margin:auto 0; }
#hub-hero-screen.sv-v2-creation .hh-input { box-sizing:border-box; font-size:clamp(17px,.8vw + 12px,20px); line-height:1.5; }
#hub-hero-screen.sv-v2-creation .hh-input::placeholder { color:var(--sv-text-dim); font-style:italic; }
#hub-hero-screen.sv-v2-creation .hh-q { font-size:clamp(21px,1.2vw + 13px,26px); line-height:1.35; font-weight:450; text-wrap:balance; }
/* The long answers — theme, appearance — are where most typing happens: left
   aligned and openly leaded, because centred prose is hard to track across. */
#hub-hero-screen.sv-v2-creation textarea.hh-input { font-size:clamp(15px,.5vw + 12px,17px); line-height:1.6; text-align:left; }
#hub-hero-screen.sv-v2-creation input[type=number] { -moz-appearance:textfield; }
#hub-hero-screen.sv-v2-creation input[type=number]::-webkit-inner-spin-button,
#hub-hero-screen.sv-v2-creation input[type=number]::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
#hub-hero-screen.sv-v2-creation .hh-pill { min-height:38px; }
#hub-hero-screen.sv-v2-creation .hh-pill:hover { background:var(--sv-fill-hover); border-color:var(--sv-violet-bright); color:var(--sv-text); }
#hub-hero-screen.sv-v2-creation .hh-pill.sel { color:var(--sv-on-primary); background:var(--sv-grad-primary); border-color:var(--sv-violet-deep); }
#hub-hero-screen.sv-v2-creation .hh-pill:disabled { cursor:default; }
#hub-hero-screen.sv-v2-creation .hh-pill:disabled:not(.sel) { opacity:.55; }
#hub-hero-screen.sv-v2-creation .hh-pill:active,
#hub-hero-screen.sv-v2-creation .hh-continue:active { transform:translateY(1px); }
#hub-hero-screen.sv-v2-creation .hh-back:focus-visible,
#hub-hero-screen.sv-v2-creation .hh-pill:focus-visible,
#hub-hero-screen.sv-v2-creation .hh-continue:focus-visible { outline:2px solid var(--sv-violet-bright); outline-offset:4px; }
#hub-hero-screen.sv-v2-creation .hh-input:focus-visible { border-bottom-color:var(--sv-violet-bright); box-shadow:0 2px 0 -1px var(--sv-violet-bright); }
#hub-hero-screen.sv-v2-creation .hh-ring { width:100%; height:100%; }
#hub-hero-screen.sv-v2-creation .hh-ring-fill { filter:drop-shadow(0 0 6px rgba(var(--sv-glow-rgb),.6)); }
#hub-hero-screen.sv-v2-creation .hh-dicebox { width:clamp(140px,10vw + 60px,160px); height:clamp(140px,10vw + 60px,160px); flex:none; }
#hub-hero-screen.sv-v2-creation .hh-continue {
  display:block; margin:14px auto 0; padding:9px 17px; min-height:38px; border:1px solid var(--sv-line-2);
  border-radius:100px; background:transparent; color:var(--sv-text-muted); cursor:pointer;
  font:11px var(--sv-font-mono); letter-spacing:.12em; text-transform:uppercase;
  transition:background .16s ease,border-color .16s ease,color .16s ease;
}
#hub-hero-screen.sv-v2-creation .hh-continue:hover { background:var(--sv-fill-hover); border-color:var(--sv-violet-bright); color:var(--sv-text); }
#hub-hero-screen.sv-v2-creation .hh-continue:disabled { opacity:.55; cursor:default; }

/* Tag step — a dropdown per category plus the running selection, in the V2
   palette. Selected tags and their chips share one violet pulse. */
#hub-hero-screen.sv-v2-creation .hh-tags { gap:12px; }
#hub-hero-screen.sv-v2-creation .hh-tagcat-btn {
  min-height:36px; padding:8px 15px; border:1px solid var(--sv-line-2); border-radius:var(--sv-r-pill);
  background:transparent; color:var(--sv-text-muted); cursor:pointer;
  font:var(--sv-label-size) var(--sv-font-mono); letter-spacing:.14em; text-transform:uppercase;
  transition:background .16s ease,border-color .16s ease,color .16s ease;
}
#hub-hero-screen.sv-v2-creation .hh-tagcat-btn:hover { background:var(--sv-fill-hover); border-color:var(--sv-violet-bright); color:var(--sv-text); }
#hub-hero-screen.sv-v2-creation .hh-tagcat-btn.open { color:var(--sv-text); border-color:var(--sv-violet-bright); background:var(--sv-fill-hover); }
#hub-hero-screen.sv-v2-creation .hh-tagcat-btn:focus-visible,
#hub-hero-screen.sv-v2-creation .hh-chip:focus-visible,
#hub-hero-screen.sv-v2-creation .hh-tag:focus-visible { outline:2px solid var(--sv-violet-bright); outline-offset:3px; }
#hub-hero-screen.sv-v2-creation .hh-tagcat-n { color:var(--sv-bg); background:var(--sv-grad-badge); }
#hub-hero-screen.sv-v2-creation .hh-tagpanel {
  border:1px solid var(--sv-line-soft); border-radius:var(--sv-r-md); background:var(--sv-panel-soft);
  max-height:min(32vh,240px); scrollbar-width:thin; scrollbar-color:var(--sv-line-strong) transparent;
}
#hub-hero-screen.sv-v2-creation .hh-tagpanel::-webkit-scrollbar { width:6px; }
#hub-hero-screen.sv-v2-creation .hh-tagpanel::-webkit-scrollbar-thumb { background:var(--sv-line-strong); border-radius:100px; }
#hub-hero-screen.sv-v2-creation .hh-tag {
  min-height:32px; padding:6px 13px; border:1px solid var(--sv-line-2); border-radius:var(--sv-r-pill);
  background:transparent; color:var(--sv-text-muted); cursor:pointer;
  font:10px var(--sv-font-mono); letter-spacing:.1em; text-transform:uppercase;
  transition:background .16s ease,border-color .16s ease,color .16s ease;
}
#hub-hero-screen.sv-v2-creation .hh-tag:hover { background:var(--sv-fill-hover); border-color:var(--sv-violet-bright); color:var(--sv-text); }
#hub-hero-screen.sv-v2-creation .hh-tag.sel,
#hub-hero-screen.sv-v2-creation .hh-chip {
  color:var(--sv-on-primary); background:var(--sv-grad-primary); border:1px solid var(--sv-violet-deep);
  animation:svTagGlow 2.4s ease-in-out infinite;
}
@keyframes svTagGlow {
  0%,100% { box-shadow:0 0 10px -3px rgba(var(--sv-accent-rgb),.55); }
  50%     { box-shadow:0 0 20px 0 rgba(var(--sv-glow-rgb),.85); }
}
#hub-hero-screen.sv-v2-creation .hh-tag:disabled { cursor:default; }
#hub-hero-screen.sv-v2-creation .hh-tag:disabled:not(.sel) { opacity:.55; }
#hub-hero-screen.sv-v2-creation .hh-chip {
  min-height:32px; padding:6px 12px; border-radius:var(--sv-r-pill); cursor:pointer;
  font:10px var(--sv-font-mono); letter-spacing:.1em; text-transform:uppercase;
}
#hub-hero-screen.sv-v2-creation .hh-chosen-label,
#hub-hero-screen.sv-v2-creation .hh-chosen-empty,
#hub-hero-screen.sv-v2-creation .hh-tags-none {
  font:var(--sv-label-size) var(--sv-font-mono); letter-spacing:var(--sv-label-tracking);
  text-transform:uppercase; color:var(--sv-text-dim); margin:0;
}
#hub-hero-screen.sv-v2-creation .hh-chosen-label { margin-bottom:8px; }
@media (prefers-reduced-motion:reduce) {
  #hub-hero-screen.sv-v2-creation .hh-tag.sel,
  #hub-hero-screen.sv-v2-creation .hh-chip { animation:none; box-shadow:0 0 14px -4px rgba(var(--sv-accent-rgb),.7); }
}

#loading.sv-v2-loading { background:var(--sv-bg); color:var(--sv-violet-bright); }
#loading.sv-v2-loading .lo-bg { background:radial-gradient(ellipse 90% 80% at 50% 100%,var(--sv-violet-ground),var(--sv-tint-plum2) 55%,var(--sv-bg) 82%); }
#loading.sv-v2-loading .lo-hearth { background:radial-gradient(ellipse at 50% 90%,var(--sv-line-soft),transparent 62%); }
#loading.sv-v2-loading .lo-center { overflow-x:hidden; overflow-y:auto; }
#loading.sv-v2-loading .lo-ring { flex:none; }
#loading.sv-v2-loading .lo-r-outer circle:first-child { stroke:rgba(var(--sv-glow-rgb),.18); }
#loading.sv-v2-loading .lo-r-outer circle:nth-child(2) { stroke:rgba(var(--sv-glow-rgb),.06); }
#loading.sv-v2-loading .lo-r-outer text { fill:rgba(var(--sv-glow-rgb),.45); }
#loading.sv-v2-loading .lo-r-inner circle { stroke:rgba(var(--sv-glow-rgb),.25); }
#loading.sv-v2-loading .lo-r-prog circle { stroke:rgba(var(--sv-glow-rgb),.14); }
#loading.sv-v2-loading #lo-prog-ring { stroke:var(--sv-violet-bright); }
#loading.sv-v2-loading .lo-core { animation:svCreationCorePulse 2.6s ease-in-out infinite; }
#loading.sv-v2-loading .lo-pct {
  top:78%; transform:translate(-50%,0); font-family:var(--sv-font-display);
  color:var(--sv-violet-bright); text-shadow:0 0 18px rgba(var(--sv-glow-rgb),.5);
}
#loading.sv-v2-loading .lo-eyebrow { font-family:var(--sv-font-mono); color:var(--sv-violet); text-align:center; }
#loading.sv-v2-loading .lo-tasks { width:min(520px,86vw); flex:none; }
#loading.sv-v2-loading .lo-task {
  min-width:0; font-family:var(--sv-font-mono); font-size:12px; letter-spacing:.1em;
  color:var(--sv-text-dim); padding:4px 0;
}
#loading.sv-v2-loading .lo-task .lo-mark { color:var(--sv-text-dim); flex:none; }
#loading.sv-v2-loading .lo-task[data-stage="1"],
#loading.sv-v2-loading .lo-task[data-stage="2"] .lo-mark { color:var(--sv-violet-bright); }
#loading.sv-v2-loading .lo-task[data-stage="1"] .lo-mark { color:var(--sv-violet); }
#loading.sv-v2-loading .lo-task[data-stage="2"] { color:var(--sv-text-muted); }
#loading.sv-v2-loading .lo-label { min-width:0; }
#loading.sv-v2-loading .lo-right { color:var(--sv-text-dim); max-width:45%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; text-align:right; }
#loading.sv-v2-loading .lo-status { font-family:var(--sv-font-mono); color:var(--sv-text-dim); text-align:center; }
#loading.sv-v2-loading .lc-dot { background:var(--sv-violet-bright); }
#loading.sv-v2-loading:not(.visible) *,
#loading.sv-v2-loading.sv-motion-paused * { animation-play-state:paused !important; }
@keyframes svCreationCorePulse { 0%,100%{filter:drop-shadow(0 0 10px rgba(var(--sv-glow-rgb),.45))} 50%{filter:drop-shadow(0 0 26px rgba(var(--sv-glow-rgb),.9))} }

@media (max-width:600px) {
  #hub-hero-screen.sv-v2-creation { padding-top:calc(65px + env(safe-area-inset-top)); padding-bottom:max(24px,env(safe-area-inset-bottom)); }
  #hub-hero-screen.sv-v2-creation .hh-wrap { width:calc(100% - 24px); padding:16px 8px; gap:14px; }
  #hub-hero-screen.sv-v2-creation .hh-back { left:max(12px,env(safe-area-inset-left)); top:calc(12px + env(safe-area-inset-top)); }
  #hub-hero-screen.sv-v2-creation .sv-creation-counter { right:max(20px,env(safe-area-inset-right)); top:calc(27px + env(safe-area-inset-top)); }
  #hub-hero-screen.sv-v2-creation .hh-pill,
  #hub-hero-screen.sv-v2-creation .hh-tag,
  #hub-hero-screen.sv-v2-creation .hh-tagcat-btn,
  #hub-hero-screen.sv-v2-creation .hh-chip,
  #hub-hero-screen.sv-v2-creation .hh-continue { min-height:44px; }
  #hub-hero-screen.sv-v2-creation .hh-hint { line-height:1.6; }
  #loading.sv-v2-loading .lo-center { padding:calc(24px + env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left)); gap:22px; }
  #loading.sv-v2-loading .lo-ring { width:min(280px,68vw); min-height:0; }
  #loading.sv-v2-loading .lo-tasks { width:100%; max-width:420px; }
  #loading.sv-v2-loading .lo-task { font-size:10px; letter-spacing:.07em; }
  #loading.sv-v2-loading .lo-status { font-size:10px; line-height:1.8; letter-spacing:.14em; }
  #loading.sv-v2-loading .lo-eyebrow { font-size:11px; letter-spacing:.2em; }
}
@media (max-height:560px) {
  #hub-hero-screen.sv-v2-creation { align-items:flex-start; }
  #hub-hero-screen.sv-v2-creation .hh-wrap { margin:0; }
  #hub-hero-screen.sv-v2-creation .hh-dicebox { width:110px; height:110px; margin-top:4px; }
  #loading.sv-v2-loading .lo-center { gap:12px; justify-content:flex-start; }
  #loading.sv-v2-loading .lo-ring { width:150px; min-height:0; }
  #loading.sv-v2-loading .lo-pct { font-size:12px; }
  #loading.sv-v2-loading .lo-task { padding:2px 0; font-size:10px; }
}
html[data-reduce-motion="1"] #hub-hero-screen.sv-v2-creation *,
html[data-reduce-motion="1"] #loading.sv-v2-loading * { animation:none !important; transition:none !important; }
@media (prefers-reduced-motion:reduce) {
  #hub-hero-screen.sv-v2-creation *, #loading.sv-v2-loading * { animation:none !important; transition:none !important; }
  #loading.sv-v2-loading { transition:none; }
}

/* ---------- Creation: described type/size cards + the systems toggle -------- */
#hub-hero-screen .hh-pills-desc { flex-direction: column; gap: 10px; align-items: stretch; max-width: 580px; margin: 0 auto; }
#hub-hero-screen .hh-pill-card {
  display: flex; flex-direction: column; gap: 6px; text-align: left;
  padding: 15px 18px; white-space: normal; line-height: 1.45;
  border: 1px solid var(--sv-line); border-radius: 12px;
  background: linear-gradient(180deg, rgba(var(--sv-plum-rgb),.45), rgba(var(--sv-ground-rgb),.6));
}
#hub-hero-screen .hh-pill-card:hover:not(:disabled) { border-color: var(--sv-line-hover); transform: translateY(-2px); }
#hub-hero-screen .hh-pill-l { display: flex; align-items: center; gap: 10px;
  font-family: var(--sv-font-display); font-size: 18px; color: var(--sv-text);
  letter-spacing: .02em; text-transform: none; }
/* The pill base is uppercase mono; a description has to read as prose. */
#hub-hero-screen .hh-pill-d { font-family: var(--sv-font-read); font-size: 14px;
  color: var(--sv-text-muted); letter-spacing: normal; text-transform: none; }
#hub-hero-screen .hh-pill-soon {
  font-family: var(--sv-font-mono); font-size: 9px; letter-spacing: .18em; text-transform: uppercase;
  padding: 3px 8px; border: 1px solid var(--sv-line-2); border-radius: 999px; color: var(--sv-text-dim);
}
#hub-hero-screen .hh-pill-off { opacity: .4; cursor: not-allowed; }
#hub-hero-screen .hh-pill-off:hover { transform: none; border-color: var(--sv-line); }
#hub-hero-screen .hh-sys { display: flex; flex-direction: column; gap: 14px; max-width: 580px; margin: 0 auto; }
#hub-hero-screen .hh-systoggle {
  display: flex; align-items: center; gap: 12px; align-self: flex-start;
  padding: 10px 18px; border: 1px solid var(--sv-line-2); border-radius: 999px;
  background: rgba(var(--sv-accent-rgb),.08); color: var(--sv-text); cursor: pointer;
  font-family: var(--sv-font-read); font-size: 15px; min-height: 44px;
}
#hub-hero-screen .hh-systoggle:hover { border-color: var(--sv-line-hover); }
#hub-hero-screen .hh-switch {
  width: 36px; height: 19px; border-radius: 999px; flex: 0 0 auto; position: relative;
  background: rgba(var(--sv-accent-rgb),.15); border: 1px solid var(--sv-line); transition: background .2s;
}
#hub-hero-screen .hh-switch::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px;
  border-radius: 50%; background: var(--sv-text-dim); transition: transform .2s, background .2s;
}
#hub-hero-screen .hh-systoggle.on .hh-switch { background: var(--sv-grad-primary); }
#hub-hero-screen .hh-systoggle.on .hh-switch::after { transform: translateX(17px); background: var(--sv-bg); }

/* Required-step feedback, violet theme. */
#hub-hero-screen .hh-hint-warn { color: var(--sv-danger) !important; }
#hub-hero-screen .hh-input-warn { border-color: var(--sv-danger) !important; box-shadow: 0 0 0 3px rgba(220,90,78,.18); }