:root {
  --green:#157F1F;
  --lime:#4CB963;
  --mint:#A0EADE;
  --slate:#5C6784;
  --ink:#1D263B;
  --bg:#f7f8f1;
  --surface:#fffef8;
  --line:#d9dfd3;
  --muted:#626c62;
  --wash:#eaf0e5;
  --accent:#157F1F;
  --on-accent:#fff;
  --shadow:0 24px 50px #1d263b12
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:15px 'DM Sans',sans-serif;
  transition:background .4s,color .4s
}
body.midnight {
  --bg:#1D263B;
  --surface:#26324b;
  --ink:#eef8f3;
  --muted:#b0b9ce;
  --line:#47536d;
  --wash:#2e3e52;
  --accent:#A0EADE;
  --on-accent:#1D263B;
  --shadow:0 24px 50px #0003
}
a {
  color:inherit;
  text-decoration:none
}
button,input,textarea {
  font:inherit
}
button,a,input,textarea {
  -webkit-tap-highlight-color:transparent
}
button {
  cursor:pointer
}
button {
  color:inherit
}
button:disabled {
  opacity:.35;
  cursor:default
}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible {
  outline:3px solid var(--lime);
  outline-offset:4px
}
button {
  border:0
}
button,a {
  touch-action:manipulation
}
[hidden] {
  display:none!important
}
.ambient {
  position:fixed;
  inset:-40px;
  pointer-events:none;
  z-index:-1;
  background-image:radial-gradient(var(--slate) .85px,transparent .85px);
  background-size:28px 28px;
  opacity:.15;
  animation:grid-drift 24s linear infinite
}
header {
  height:100px;
  max-width:1440px;
  margin:auto;
  padding:0 6%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line)
}
.brand {
  font:800 29px Manrope,sans-serif;
  letter-spacing:-1.5px;
  display:flex;
  align-items:center
}
.brand-mark {
  width:34px;
  height:34px;
  background:var(--accent);
  color:var(--on-accent);
  display:grid;
  place-items:center;
  font-size:28px;
  border-radius:8px;
  margin-right:10px;
  line-height:1
}
.brand-dot {
  color:var(--accent)
}
nav {
  display:flex;
  gap:35px;
  font-size:13px;
  font-weight:600
}
nav a {
  padding:10px 0;
  color:var(--muted)
}
nav a.active {
  color:var(--accent)
}
nav span {
  margin-left:7px
}
.palette {
  border:1px solid var(--line);
  background:var(--surface);
  padding:10px 14px;
  border-radius:25px;
  display:flex;
  gap:8px;
  align-items:center;
  font-size:17px
}
.palette span {
  font-size:12px
}
.page {
  max-width:1440px;
  margin:auto;
  padding:0 6%;
  animation:enter .45s ease
}
.hero {
  display:grid;
  grid-template-columns:1.04fr 1fr;
  gap:35px;
  min-height:650px;
  align-items:center;
  padding:58px 0 64px
}
.eyebrow {
  font-size:10px;
  font-weight:700;
  letter-spacing:1.8px;
  display:flex;
  gap:9px;
  align-items:center;
  color:var(--accent)
}
.pulse {
  width:6px;
  height:6px;
  background:var(--lime);
  border-radius:50%;
  display:inline-block;
  box-shadow:0 0 0 4px #4cb96315;
  animation:pulse 3s infinite
}
h1,h2,h3,p {
  margin:0
}
h1,h2,h3 {
  font-family:Manrope,sans-serif
}
h1 {
  font-size:clamp(48px,5.1vw,74px);
  line-height:1.12;
  letter-spacing:-3.5px;
  font-weight:600
}
h1 em,h2 em {
  font-style:normal;
  color:var(--accent)
}
.hero h1 {
  margin:24px 0
}
.hero-copy>p {
  color:var(--muted);
  font-size:15px;
  line-height:1.9
}
.hero-actions {
  display:flex;
  gap:12px;
  margin-top:28px
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:25px;
  padding:15px 23px;
  border-radius:7px;
  font-size:13px;
  font-weight:700;
  transition:transform .2s,box-shadow .2s
}
.button:hover {
  transform:translateY(-2px);
  box-shadow:0 5px 12px #157f1f18
}
.primary {
  background:var(--accent);
  color:var(--on-accent);
  border:1px solid var(--accent)
}
.secondary {
  background:var(--surface);
  color:var(--accent);
  border:1px solid var(--accent)
}
.hero-note {
  font-size:11px;
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:26px
}
.mini-stack {
  letter-spacing:-6px;
  font-size:20px;
  color:var(--green);
  transform:rotate(-12deg);
  margin-right:5px
}
.hero-art {
  height:480px;
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding-top:34px
}
.orbit {
  position:absolute;
  border:1px dashed var(--line);
  border-radius:50%;
  z-index:-1;
  animation:spin 90s linear infinite
}
.orbit-one {
  width:420px;
  height:420px
}
.orbit-two {
  width:320px;
  height:320px;
  transform:rotate(-25deg)
}
.art-label {
  position:absolute;
  top:10px;
  left:50%;
  transform:translateX(-50%);
  white-space:nowrap;
  font-size:8px;
  letter-spacing:2px;
  color:var(--muted)
}
.floating-block {
  width:360px;
  padding:24px;
  display:flex;
  align-items:center;
  gap:17px;
  border:1px solid #ffffff60;
  border-radius:12px;
  box-shadow:var(--shadow);
  animation:float 7s ease-in-out infinite;
  position:relative
}
.floating-block small {
  display:block;
  font-size:8px;
  letter-spacing:1.4px;
  margin-bottom:9px;
  opacity:.8
}
.floating-block strong {
  display:block;
  font:600 20px Manrope,sans-serif;
  letter-spacing:-.7px
}
.floating-block div>span {
  display:block;
  font-size:10px;
  margin-top:8px;
  opacity:.8
}
.block-icon {
  font-size:27px;
  align-self:flex-start
}
.floating-block>b {
  font-size:20px;
  margin-left:auto;
  align-self:flex-start;
  font-weight:400
}
.role {
  background:var(--green);
  color:white;
  transform:rotate(-7deg);
  margin-left:-45px;
  z-index:3;
  --rotation:-7deg
}
.task {
  background:var(--mint);
  color:#1D263B;
  transform:rotate(4deg);
  margin-left:38px;
  margin-top:-3px;
  z-index:4;
  --rotation:4deg;
  animation-delay:-2s
}
.context {
  background:var(--surface);
  color:var(--ink);
  border-color:var(--line);
  transform:rotate(-3deg);
  margin-top:15px;
  margin-left:-8px;
  z-index:5;
  --rotation:-3deg;
  animation-delay:-4s
}
.connector {
  height:23px;
  line-height:23px;
  color:var(--accent)
}
.output-slip {
  font-size:11px;
  background:var(--wash);
  padding:14px 22px;
  border-radius:8px;
  transform:rotate(3deg);
  margin-top:25px;
  display:flex;
  gap:15px;
  align-items:center;
  box-shadow:0 8px 20px #1d263b08
}
.output-slip>span {
  color:var(--accent);
  font-size:18px
}
.output-slip>b {
  color:var(--accent)
}
.art-caption {
  font-size:8px;
  letter-spacing:2px;
  color:var(--muted);
  margin-top:25px
}
.art-spark {
  position:absolute;
  color:var(--lime);
  font-size:46px;
  animation:spin 30s linear infinite
}
.spark-one {
  top:40px;
  right:20px
}
.spark-two {
  bottom:75px;
  left:4px;
  font-size:30px
}
.process {
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:28px 0 33px
}
.process>.eyebrow {
  color:var(--muted);
  font-size:9px
}
.process>div {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:24px
}
.process>div>span {
  display:flex;
  align-items:center;
  gap:16px;
  font-family:Manrope;
  font-size:16px;
  font-weight:600
}
.process b {
  border:1px solid var(--line);
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border-radius:50%;
  font-size:10px;
  color:var(--accent);
  font-weight:500
}
.process i {
  font-style:normal;
  color:var(--muted)
}
.tiny-tag {
  font:10px monospace;
  background:var(--wash);
  padding:4px 6px;
  border-radius:4px
}
.human {
  margin:45px 0;
  display:flex;
  align-items:center;
  gap:32px;
  background:var(--wash);
  border-radius:12px;
  padding:37px 40px
}
.human-symbol {
  color:var(--accent);
  font-size:85px;
  animation:spin 60s linear infinite
}
.human h2 {
  font-size:29px;
  letter-spacing:-1.1px;
  line-height:1.3;
  margin-top:14px
}
.human p {
  max-width:525px;
  font-size:13px;
  line-height:1.8;
  color:var(--muted);
  margin-top:14px
}
.text-link {
  margin-left:auto;
  white-space:nowrap;
  font-size:11px;
  font-weight:600;
  border-bottom:1px solid var(--accent);
  padding-bottom:7px
}
.text-link span {
  margin-left:12px
}
footer {
  padding:24px 0 28px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  font-size:11px;
  color:var(--muted)
}
footer>span:first-child {
  font-weight:700;
  color:var(--ink)
}
footer small {
  font-weight:400;
  margin-left:14px
}
.builder-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:40px 0 30px
}
.builder-heading h1 {
  font-size:35px;
  letter-spacing:-1.5px;
  margin:12px 0
}
.builder-heading p {
  font-size:13px;
  color:var(--muted)
}
.draft-state {
  font-size:11px;
  color:var(--muted)
}
.workshop {
  display:grid;
  grid-template-columns:235px minmax(290px,1fr) minmax(280px,.92fr);
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  background:var(--surface);
  box-shadow:0 10px 40px #1d263b05;
  min-height:560px
}
.library,.canvas,.preview {
  padding:22px
}
.library {
  background:var(--wash)
}
.canvas {
  border-right:1px solid var(--line)
}
.panel-title {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px
}
.panel-title h2 {
  font-size:13px;
  font-weight:700;
  letter-spacing:-.2px
}
.panel-title>span {
  font:10px monospace;
  color:var(--muted)
}
.library>p {
  font-size:11px;
  color:var(--muted);
  line-height:1.6;
  margin:12px 0 16px
}
.search-label {
  display:flex;
  align-items:center;
  border:1px solid var(--line);
  border-radius:6px;
  background:var(--surface);
  padding:0 10px;
  margin-bottom:15px
}
.search-label>span {
  font-size:20px;
  color:var(--muted)
}
.search-label input {
  width:100%;
  border:0;
  padding:10px 5px;
  font-size:11px;
  background:transparent;
  color:var(--ink);
  min-width:0
}
.library-block {
  width:100%;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:7px;
  padding:12px 10px;
  margin:0 0 9px;
  display:flex;
  gap:10px;
  align-items:center;
  text-align:left;
  transition:transform .2s,border-color .2s
}
.library-block:hover {
  transform:translateX(3px);
  border-color:var(--accent)
}
.library-block .lib-icon {
  width:28px;
  height:28px;
  border-radius:6px;
  display:grid;
  place-items:center;
  background:var(--wash);
  color:var(--accent);
  font-size:17px
}
.library-block strong {
  font-size:11px;
  display:block
}
.library-block small {
  font-size:9px;
  color:var(--muted);
  display:block;
  margin-top:3px
}
.library-block>b {
  margin-left:auto;
  color:var(--accent);
  font-size:16px;
  font-weight:400
}
.library-tip {
  margin-top:23px;
  padding-top:18px;
  border-top:1px solid var(--line);
  font-size:11px
}
.library-tip>span {
  color:var(--accent);
  margin-right:8px
}
.library-tip p {
  font-size:10px;
  line-height:1.7;
  color:var(--muted);
  margin-top:9px
}
.canvas-toolbar {
  display:flex;
  gap:10px;
  align-items:center;
  margin:20px 0
}
.canvas-toolbar input {
  min-width:0;
  width:100%;
  background:transparent;
  border:0;
  color:var(--ink);
  font-weight:600;
  font-size:13px
}
.quiet {
  background:transparent;
  white-space:nowrap;
  font-size:10px;
  color:var(--muted);
  padding:6px
}
.prompt-block {
  border:1px solid var(--line);
  border-radius:8px;
  margin:0 0 13px;
  background:var(--surface);
  position:relative;
  overflow:hidden;
  animation:enter .3s
}
.prompt-block:before {
  content:'';
  position:absolute;
  inset:0 auto 0 0;
  width:3px;
  background:var(--block-color,var(--green))
}
.block-header {
  display:flex;
  align-items:center;
  gap:8px;
  padding:13px 12px 4px
}
.block-header h3 {
  font-size:12px
}
.block-header>span {
  color:var(--accent);
  font-size:17px
}
.block-tools {
  display:flex;
  gap:1px;
  margin-left:auto
}
.block-tools button {
  background:transparent;
  color:var(--muted);
  width:22px;
  height:24px;
  font-size:13px
}
.prompt-block>p {
  font-size:10px;
  color:var(--muted);
  padding:3px 13px 8px;
  line-height:1.5
}
.prompt-block textarea {
  display:block;
  width:calc(100% - 26px);
  margin:0 13px 13px;
  resize:vertical;
  min-height:76px;
  border:1px solid var(--line);
  border-radius:5px;
  background:var(--bg);
  color:var(--ink);
  font-size:12px;
  line-height:1.6;
  padding:10px
}
.add-hint {
  width:100%;
  border:1px dashed var(--line);
  border-radius:7px;
  padding:13px;
  background:transparent;
  color:var(--muted);
  font-size:11px
}
.starter {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  margin-top:22px;
  font-size:10px;
  color:var(--muted)
}
.starter button {
  background:transparent;
  color:var(--accent);
  font-size:10px;
  font-weight:700
}
.preview {
  display:flex;
  flex-direction:column;
  background:var(--bg)
}
.preview-toolbar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:7px;
  margin:22px 0 18px
}
.preview-toolbar>span {
  font-size:8px;
  letter-spacing:1px;
  white-space:nowrap
}
.preview-toolbar .pulse {
  width:4px;
  height:4px;
  margin-right:5px
}
.preview-toolbar>div {
  display:flex;
  background:var(--wash);
  padding:3px;
  border:1px solid var(--line);
  border-radius:5px
}
.preview-toolbar button {
  background:transparent;
  padding:5px 6px;
  font-size:9px;
  color:var(--muted);
  border-radius:3px
}
.preview-toolbar button.selected {
  background:var(--surface);
  color:var(--ink);
  box-shadow:0 1px 3px #0001
}
#preview-output {
  flex:1;
  overflow-wrap:anywhere;
  font-size:12px;
  line-height:1.8
}
#preview-output h2 {
  font-size:20px;
  letter-spacing:-.8px;
  margin:0 0 24px
}
#preview-output h3 {
  font-size:12px;
  margin:19px 0 6px;
  color:var(--accent)
}
#preview-output p {
  white-space:pre-wrap;
  color:var(--muted)
}
#preview-output pre {
  white-space:pre-wrap;
  font:11px/1.9 Consolas,monospace;
  color:var(--ink)
}
.preview-meta {
  margin-top:28px;
  padding-top:15px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  font:9px monospace;
  color:var(--muted)
}
.empty {
  padding:40px 10px;
  text-align:center;
  color:var(--muted);
  font-size:12px;
  line-height:1.8
}
.empty>span {
  display:block;
  font-size:32px;
  color:var(--accent);
  margin-bottom:10px
}
.export-bar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:18px;
  border:1px solid var(--line);
  border-radius:9px;
  padding:17px 22px;
  background:var(--surface)
}
.export-bar>div {
  display:flex;
  align-items:center;
  gap:12px
}
.export-icon {
  background:var(--wash);
  color:var(--accent);
  border-radius:7px;
  width:37px;
  height:37px;
  display:grid;
  place-items:center;
  font-size:20px
}
.export-bar strong {
  display:block;
  font-size:12px
}
.export-bar div>span:not(.export-icon) {
  display:block;
  color:var(--muted);
  font-size:10px;
  margin-top:5px
}
.export-bar .button {
  padding:12px 19px;
  font-size:11px
}
.local-note {
  font-size:10px;
  color:var(--muted);
  text-align:center;
  margin:15px 0 24px
}
.about-hero {
  text-align:center;
  padding:65px 0 40px
}
.about-hero .eyebrow {
  justify-content:center
}
.about-hero h1 {
  font-size:54px;
  margin:23px 0;
  letter-spacing:-2.5px
}
.about-hero p {
  max-width:560px;
  margin:auto;
  line-height:1.9;
  color:var(--muted)
}
.transformation {
  display:grid;
  grid-template-columns:1fr 80px 1.2fr;
  align-items:center;
  max-width:950px;
  margin:20px auto 70px
}
.before {
  background:var(--wash);
  padding:42px 35px;
  border-radius:12px;
  transform:rotate(-3deg)
}
.before h2 {
  font-size:30px;
  letter-spacing:-1px;
  line-height:1.4;
  margin:18px 0
}
.before p {
  font-size:12px;
  color:var(--muted)
}
.transform-arrow {
  text-align:center;
  color:var(--accent);
  font-size:30px;
  animation:nudge 3s infinite
}
.after {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:12px;
  padding:28px;
  box-shadow:var(--shadow);
  animation:float 8s ease-in-out infinite;
  --rotation:2deg
}
.after>div {
  border-top:1px solid var(--line);
  padding-top:13px;
  margin-top:13px
}
.after b {
  font-size:12px;
  color:var(--accent)
}
.after p {
  font-size:12px;
  line-height:1.7;
  margin-top:5px;
  color:var(--muted)
}
.about-steps {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:50px;
  border-top:1px solid var(--line);
  padding:40px 0
}
.about-steps article>span {
  font-size:9px;
  letter-spacing:1px;
  color:var(--accent)
}
.about-steps h2 {
  font-size:26px;
  letter-spacing:-1px;
  margin:15px 0
}
.about-steps p {
  font-size:13px;
  line-height:1.9;
  color:var(--muted)
}
.about-cta {
  text-align:center;
  background:var(--wash);
  border-radius:12px;
  margin:30px 0 50px;
  padding:40px
}
.about-cta>span {
  display:block;
  color:var(--accent);
  font-size:45px
}
.about-cta h2 {
  font-size:35px;
  letter-spacing:-1.5px;
  margin:15px 0 24px
}
#toast {
  position:fixed;
  bottom:24px;
  left:50%;
  transform:translate(-50%,15px);
  background:var(--ink);
  color:var(--bg);
  border-radius:8px;
  padding:13px 22px;
  font-size:12px;
  box-shadow:var(--shadow);
  opacity:0;
  pointer-events:none;
  transition:.2s;
  z-index:10
}
#toast.show {
  opacity:1;
  transform:translate(-50%,0)
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0,0,0,0)
}
@keyframes float {
  0%,100% {
    transform:translateY(0) rotate(var(--rotation,0deg))
  }
  50% {
    transform:translateY(-10px) rotate(var(--rotation,0deg))
  }
}
@keyframes spin {
  to {
    rotate:360deg
  }
}
@keyframes pulse {
  50% {
    box-shadow:0 0 0 7px #4cb96308
  }
}
@keyframes grid-drift {
  to {
    transform:translate(28px,28px)
  }
}
@keyframes enter {
  from {
    opacity:0;
    transform:translateY(8px)
  }
  to {
    opacity:1;
    transform:translateY(0)
  }
}
@keyframes nudge {
  50% {
    transform:translateX(7px)
  }
}
@media(min-width:1500px) {
  .hero {
    min-height:720px
  }
  .hero-art {
    scale:1.1
  }
  .workshop {
    min-height:620px
  }
}
@media(max-width:1100px) {
  header,.page {
    padding-left:4%;
    padding-right:4%
  }
  .workshop {
    grid-template-columns:200px minmax(260px,1fr) minmax(250px,1fr)
  }
  .library,.canvas,.preview {
    padding:16px
  }
  .hero-art {
    scale:.88
  }
  .human {
    gap:25px;
    padding:30px
  }
  .human-symbol {
    font-size:60px
  }
  .text-link {
    white-space:normal;
    max-width:130px
  }
  .preview-toolbar {
    flex-wrap:wrap
  }
  .process>div>span {
    font-size:13px;
    gap:10px
  }
}
@media(max-width:850px) {
  header {
    height:80px
  }
  nav {
    gap:18px
  }
  .palette span {
    display:none
  }
  .hero {
    gap:0;
    min-height:560px
  }
  .hero h1 {
    font-size:48px;
    letter-spacing:-2px
  }
  .hero-copy>p {
    font-size:13px
  }
  .hero-art {
    scale:.72;
    margin-left:-35px;
    margin-right:-45px
  }
  .hero-actions {
    gap:8px
  }
  .button {
    padding:13px 16px;
    gap:12px
  }
  .workshop {
    grid-template-columns:200px 1fr
  }
  .preview {
    grid-column:1/-1;
    border-top:1px solid var(--line);
    min-height:300px
  }
  .canvas {
    border-right:0
  }
  .preview-toolbar {
    flex-wrap:nowrap
  }
  .human-symbol {
    display:none
  }
  .human h2 {
    font-size:25px
  }
  .builder-heading h1 {
    font-size:28px
  }
  .draft-state {
    max-width:100px;
    line-height:1.6
  }
  .about-hero h1 {
    font-size:44px
  }
  .about-steps {
    gap:25px
  }
  .about-steps h2 {
    font-size:23px
  }
}
@media(max-width:600px) {
  header {
    padding:0 5%;
    height:74px
  }
  .brand {
    font-size:23px
  }
  .brand-mark {
    height:29px;
    width:29px;
    font-size:23px;
    margin-right:7px
  }
  nav {
    gap:13px;
    font-size:10px
  }
  nav a:first-child {
    display:none
  }
  .palette {
    padding:7px 10px;
    font-size:17px
  }
  .page {
    padding:0 6%
  }
  .hero {
    display:flex;
    flex-direction:column;
    padding-top:42px;
    padding-bottom:20px;
    align-items:stretch
  }
  .hero h1 {
    font-size:53px
  }
  .hero-copy>p {
    font-size:13px
  }
  .hero-art {
    height:410px;
    width:100%;
    margin:-5px 0 -15px;
    scale:.85
  }
  .orbit-one {
    width:360px;
    height:360px
  }
  .floating-block {
    width:320px;
    padding:20px
  }
  .floating-block strong {
    font-size:18px
  }
  .role {
    margin-left:-18px
  }
  .task {
    margin-left:15px
  }
  .context {
    margin-left:0
  }
  .spark-one {
    right:-12px
  }
  .spark-two {
    left:-12px
  }
  .process {
    padding:22px 0
  }
  .process>.eyebrow {
    font-size:8px
  }
  .process>div {
    flex-direction:column;
    align-items:flex-start;
    gap:13px;
    margin-top:18px
  }
  .process i {
    display:none
  }
  .human {
    padding:24px;
    display:block;
    margin:25px 0
  }
  .human h2 {
    font-size:23px
  }
  .human .text-link {
    display:inline-block;
    max-width:none;
    margin-top:22px
  }
  footer {
    font-size:9px;
    gap:15px
  }
  footer small {
    display:block;
    margin:5px 0 0
  }
  .builder-heading {
    padding-top:30px;
    display:block
  }
  .builder-heading h1 {
    font-size:29px
  }
  .draft-state {
    margin-top:15px;
    max-width:none
  }
  .workshop {
    display:block;
    overflow:visible
  }
  .library,.canvas,.preview {
    padding:18px
  }
  .library {
    border-radius:12px 12px 0 0
  }
  .library>p {
    margin-bottom:12px
  }
  .library-tip {
    display:none
  }
  #block-library {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px
  }
  .library-block {
    margin:0;
    padding:10px 8px
  }
  .library-block small {
    font-size:8px
  }
  .library-block .lib-icon {
    width:23px;
    height:23px
  }
  .canvas {
    border-top:1px solid var(--line)
  }
  .preview {
    border-radius:0 0 12px 12px;
    min-height:330px
  }
  .export-bar {
    display:block;
    padding:16px
  }
  .export-bar>div:last-child {
    margin-top:15px
  }
  .export-bar .button {
    flex:1
  }
  .export-bar>div:first-child {
    gap:10px
  }
  .about-hero {
    padding-top:42px
  }
  .about-hero h1 {
    font-size:37px;
    letter-spacing:-1.7px
  }
  .about-hero p {
    font-size:13px
  }
  .transformation {
    display:flex;
    flex-direction:column;
    margin-bottom:40px;
    gap:23px
  }
  .before,.after {
    width:100%;
    padding:25px
  }
  .before h2 {
    font-size:26px
  }
  .transform-arrow {
    rotate:90deg
  }
  .about-steps {
    display:block;
    padding:28px 0
  }
  .about-steps article {
    margin-bottom:27px
  }
  .about-steps h2 br {
    display:none
  }
  .about-cta {
    padding:28px 16px
  }
  .about-cta h2 {
    font-size:28px
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important
  }
}
/* Repeat-use builder: one focused editing surface, no sticky overlays. */
body { font-size: 16px; }
button, summary, input[type=file] { min-height: 44px; }
button, summary { border-radius: 6px; }
button { padding: 10px 14px; background: var(--wash); }
summary { cursor: pointer; padding: 12px; font-weight: 600; }
summary:focus-visible, input[type=checkbox]:focus-visible { outline: 3px solid var(--lime); outline-offset: 4px; }
header nav { font-size: 14px; }
.palette { width: 44px; justify-content: center; }
.builder-heading p, .draft-state { font-size: 14px; }
.draft-state { max-width: 300px; }
.starting-points, .collection, .notice { border: 1px solid var(--line); border-radius: 12px; padding: 20px; background: var(--surface); margin-bottom: 20px; }
.starting-points h2, .notice h2, .collection h2 { font-size: 19px; margin-bottom: 10px; }
.starting-points p, .notice p, .collection p { color: var(--muted); line-height: 1.7; margin: 8px 0 14px; }
#templates, .builder-controls, .backup-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.builder-controls { margin: 18px 0 12px; }
.builder-controls [role=group] { display: flex; flex-wrap: wrap; gap: 6px; margin-right: auto; }
button[aria-pressed=true] { background: var(--accent); color: var(--on-accent); }
.guidance { color: var(--muted); font-size: 14px; line-height: 1.6; margin-bottom: 18px; }
.workshop { display: block; min-height: 0; overflow: visible; max-width: 900px; margin: auto; }
.canvas, .preview { padding: 24px; border: 0; border-radius: 12px; }
.panel-title h2 { font-size: 21px; }
.canvas-toolbar { flex-wrap: wrap; }
.canvas-toolbar input { width: auto; flex: 1; font-size: 16px; min-height: 44px; border: 1px solid var(--line); border-radius: 6px; padding: 8px; background: var(--bg); }
.quiet { font-size: 14px; }
.block-header { padding: 12px 16px 4px; }
.block-header h3 { font-size: 16px; }
.block-tools button { width: 44px; height: 44px; font-size: 23px; }
.prompt-block > p { font-size: 14px; padding: 5px 16px 12px; }
.prompt-block textarea { font-size: 16px; min-height: 120px; width: calc(100% - 32px); margin: 0 16px 16px; }
#details-drawer { background: var(--wash); padding: 6px; margin-bottom: 20px; border-radius: 8px; }
#details-drawer > p { color: var(--muted); padding: 10px; line-height: 1.6; }
#block-library { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px; }
.library-block { margin: 0; justify-content: space-between; min-height: 48px; }
.library-block strong { font-size: 14px; }
.preview-toolbar button { font-size: 14px; padding: 10px 14px; }
#preview-output, #preview-output pre { font-size: 16px; }
#preview-output h3 { font-size: 17px; }
#preview-output p { color: var(--ink); }
.collection { margin-top: 24px; }
.archive-label { display: flex; gap: 10px; align-items: center; min-height: 44px; }
.saved-prompt { border-top: 1px solid var(--line); padding: 16px 0; overflow-wrap: anywhere; }
.saved-prompt > div { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.backup-controls { border-top: 1px solid var(--line); padding-top: 16px; }
input[type=file] { max-width: 100%; font-size: 14px; }
.local-note { font-size: 14px; line-height: 1.6; }
#toast { font-size: 15px; max-width: calc(100% - 32px); width: max-content; bottom: 12px; }
#toast.show { animation: fade-toast 6s forwards; }
@keyframes fade-toast { 0%, 85% { opacity: 1; } 100% { opacity: 0; } }
@media (max-width: 600px) {
  header { padding: 0 4%; gap: 8px; }
  header nav { font-size: 13px; gap: 12px; }
  .page { padding: 0 4%; }
  .canvas, .preview { padding: 16px; }
  .draft-state { max-width: none; }
  .builder-controls { align-items: stretch; }
  .builder-controls [role=group] { width: 100%; }
  .builder-controls [role=group] button { flex: 1; }
  .builder-controls > button { flex: 1; }
  .starting-points { padding: 16px; }
  #templates button { flex: 1 1 40%; }
  .canvas-toolbar label { width: 100%; }
  .canvas-toolbar input { width: 60%; }
  #block-library { grid-template-columns: 1fr; }
  .notice button { margin: 4px; }
  .brand { font-size: 22px; }
}
/* Status messages stay in the document flow and never cover fields. */
#toast { position: static; transform: none; width: auto; max-width: none; height: 0; overflow: hidden; padding: 0; margin: 0; box-shadow: none; }
#toast.show { transform: none; height: auto; padding: 12px 16px; margin-bottom: 16px; animation: none; }
.bottom-copy { display: flex; margin: 18px auto; }
dialog { max-width: min(480px, calc(100% - 32px)); padding: 24px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
dialog::backdrop { background: #1d263b88; }
dialog h2 { font-size: 21px; margin-bottom: 16px; }
dialog p { line-height: 1.7; margin-bottom: 16px; }
dialog label { display: block; margin-bottom: 8px; }
dialog input { width: 100%; min-height: 44px; font-size: 16px; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 10px; }
.dialog-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
/* Reusable workplace briefs */
.filters { display:flex; flex-wrap:wrap; gap:16px; margin:16px 0; }
.filters label { flex:1 1 180px; }
label { line-height:1.6; }
select, .filters input, .guided-panel input, .guided-panel textarea, #profile-fields input, #profile-fields textarea, #inspect-body textarea { width:100%; min-height:44px; padding:10px; border:1px solid var(--line); border-radius:6px; color:var(--ink); background:var(--bg); font:inherit; }
select:focus-visible { outline:3px solid var(--lime); outline-offset:3px; }
.guided-panel label, #profile-fields label, #inspect-body label { display:block; margin:14px 0; }
.guided-panel { background:var(--wash); border-radius:10px; padding:18px; margin-bottom:20px; }
.guided-panel p, .guided-panel small { color:var(--muted); line-height:1.7; }
.guided-panel h3 { margin-bottom:10px; }
#variables { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
#variables textarea { min-height:90px; }
#variables small { display:block; }
#templates { display:grid; grid-template-columns:repeat(auto-fit,minmax(235px,1fr)); margin-bottom:16px; }
.template-card { text-align:left; display:flex; flex-direction:column; gap:8px; border:2px solid transparent; }
.template-card span, .template-card small { line-height:1.5; }
.template-card[aria-pressed=true] { border-color:var(--accent); background:var(--wash); color:var(--ink); }
#section-nav { display:flex; flex-wrap:wrap; gap:6px; margin:18px 0; }
#guidance { display:flex; flex-direction:column; gap:8px; }
#guidance button { text-align:left; border-left:3px solid var(--accent); }
.source-usage { display:block; margin:12px 16px; }
#preview-output p, pre { white-space:pre-wrap; overflow-wrap:anywhere; }
#inspect-dialog { max-width:min(850px,calc(100% - 32px)); }
#inspect-body pre { font:14px/1.7 monospace; padding:12px; background:var(--wash); }
#inspect-body details { border-top:1px solid var(--line); margin:12px 0; }
button:disabled { opacity:1; color:var(--muted); background:var(--wash); border:1px dashed var(--line); }
.archive-label input { width:20px; min-height:20px; }
@media(min-width:1100px) { .workshop.split { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px; max-width:none; align-items:start; } .workshop.split .preview { grid-column:auto; } }
@media(max-width:600px) { #variables { grid-template-columns:1fr; } #templates { grid-template-columns:1fr; } .hero-actions { flex-wrap:wrap; } .guided-panel {padding:12px;} }
/* Form boundaries and focus remain visible in both palettes. */
input:not([type=checkbox]), textarea, select { border-color:var(--muted); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible { outline-color:var(--accent); }
/* Soft atmosphere built from Promptly's green, lime, mint and slate palette. */
body { isolation:isolate; }
.header-actions { display:flex; gap:8px; align-items:center; }
.ambient { inset:0; overflow:hidden; opacity:1; background:none; animation:none; }
.ambient > span { position:absolute; pointer-events:none; }
.ambient-grid { inset:-32px; background-image:radial-gradient(var(--slate) .85px,transparent .85px); background-size:28px 28px; opacity:.14; animation:grid-drift 36s linear infinite; }
.ambient-glow { width:clamp(320px,55vw,850px); aspect-ratio:1; border-radius:50%; opacity:.13; animation:ambient-drift 38s ease-in-out infinite alternate; }
.glow-green { top:-28%; left:-22%; background:radial-gradient(circle, var(--lime) 0%, transparent 68%); }
.glow-mint { top:20%; right:-30%; background:radial-gradient(circle, var(--mint) 0%, transparent 68%); animation-duration:48s; animation-delay:-17s; }
.glow-slate { bottom:-45%; left:22%; background:radial-gradient(circle, var(--slate) 0%, transparent 68%); animation-duration:54s; animation-delay:-29s; opacity:.09; }
.midnight .ambient-glow { opacity:.16; }
.midnight .glow-slate { opacity:.12; }
.ambient-ring { width:clamp(220px,32vw,520px); aspect-ratio:1; border:1px solid var(--mint); border-radius:42% 58% 65% 35% / 50% 35% 65% 50%; opacity:.16; animation:ambient-orbit 100s linear infinite; }
.ring-one { top:8%; right:-12%; }
.ring-two { bottom:-12%; left:-14%; border-color:var(--lime); animation-duration:120s; animation-direction:reverse; opacity:.12; }
.ambient-spark { width:9px; height:9px; border:1px solid var(--lime); border-radius:2px; opacity:.35; animation:ambient-spark 24s ease-in-out infinite alternate; }
.spark-a { top:19%; left:5%; }
.spark-b { top:67%; right:4%; border-color:var(--mint); animation-delay:-8s; }
.spark-c { bottom:9%; left:31%; width:5px; height:5px; border-radius:50%; background:var(--lime); animation-delay:-15s; }
.spark-d { top:42%; right:31%; width:5px; height:5px; border-radius:50%; background:var(--mint); border-color:var(--mint); animation-delay:-20s; opacity:.22; }
.page { animation:none; }
/* Entrances are coordinated by motion.js when content enters the viewport. */
.prompt-block { animation:none; }
@keyframes ambient-drift { from {transform:translate3d(0,0,0) scale(1);} to {transform:translate3d(5%,8%,0) scale(1.08);} }
@keyframes ambient-orbit { to {transform:rotate(360deg);} }
@keyframes ambient-spark { from {transform:translate3d(0,0,0) rotate(0);} to {transform:translate3d(12px,-22px,0) rotate(70deg);} }
.ambient-paused .ambient > span,
.ambient-paused .hero-art *,
.ambient-paused .pulse { animation-play-state:paused; }
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
 button, .button, .text-link { transition:background-color .2s ease, border-color .2s ease, box-shadow .2s ease, translate .2s ease; }
 button:not(:disabled):hover, .button:hover { translate:0 -2px; box-shadow:0 4px 12px #1d263b12; }
 button:not(:disabled):active, .button:active { translate:0 0; }
 .template-card:hover { border-color:var(--accent); }
}
@media (max-width:600px) {
 .header-actions { gap:4px; }
 header { gap:6px; }
 header nav { font-size:12px; gap:9px; }
 header nav span { display:none; }
 .brand {font-size:20px;}
 .brand-mark {margin-right:5px;}
 .ambient-glow { width:480px; opacity:.1; }
 .ambient-ring { opacity:.1; }
 .spark-d { display:none; }
}
@media (prefers-reduced-motion:reduce) {
 .ambient > span { animation:none!important; transform:none!important; }
 *, *::before, *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}
/* Home content waits for its own viewport entry; layout and focus stay intact. */
.home-reveal-pending { opacity:0; }
.home-reveal-pending:focus-within { opacity:1; }
@media (prefers-reduced-motion:reduce) { .home-reveal-pending { opacity:1; } }
/* Focused builder: expand the current activity, keep the rest in concise summaries. */
#builder .builder-heading { padding-top:28px; margin-bottom:16px; }
#builder .builder-heading h1 {font-size:30px;}
#builder .starting-points {padding:14px 18px; margin-bottom:12px;}
#builder .starting-points > h2 {font-size:17px;}
#builder .starting-points > p:not(#selected-template) {display:none;}
#selected-template {font-size:14px;}
#template-browser[open] #templates {max-height:420px;overflow:auto;padding:4px;}
.compact-checks {max-width:900px;margin:0 auto 16px;border:1px solid var(--line);border-radius:8px;background:var(--surface);}
.compact-checks > summary {font-size:14px;color:var(--muted);}
.compact-checks #guidance {padding:0 12px 12px; margin:0;}
.focus-stage {border:1px solid var(--line);border-radius:12px;background:var(--wash);margin:12px 0;transition:border-color .25s,background-color .25s;}
.focus-stage > summary {display:flex;align-items:center;gap:14px;padding:16px;list-style:none;}
.focus-stage > summary::-webkit-details-marker {display:none;}
.focus-stage > summary::after {content:'＋';margin-left:auto;color:var(--accent);font-size:22px;}
.focus-stage[open] > summary::after {content:'−';}
.focus-stage > summary strong {display:block;font-size:16px;}
.focus-stage > summary small {display:block;font-weight:400;color:var(--muted);margin-top:3px;line-height:1.5;}
.step-number {width:36px;height:36px;display:grid;place-items:center;flex-shrink:0;border-radius:50%;background:var(--surface);color:var(--accent);font-size:13px;}
.focus-stage[open] {background:var(--surface);border-color:var(--accent);}
.focus-stage[open] > summary strong {font-size:20px;}
.focus-stage[open] .step-number {background:var(--accent);color:var(--on-accent);}
.stage-content {padding:0 18px 18px;}
.stage-next {display:block;margin:0 18px 18px auto;}
.guided-panel {padding:0;background:none;margin:0;}
.guided-panel > p {font-size:14px;}
#question-progress {font-size:13px;color:var(--accent);margin:12px 0;}
#variables {grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:14px 0;}
.question-card {border:1px solid var(--line);border-radius:8px;background:var(--wash);min-width:0;}
.question-card > summary {padding:12px;list-style:none;}
.question-card > summary::-webkit-details-marker {display:none;}
.question-card > summary strong {display:block;font-size:14px;}
.question-answer {display:block;color:var(--muted);font-size:13px;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;margin-top:3px;}
.question-card[open] {grid-column:1/-1;border-color:var(--accent);background:var(--bg);}
.question-card[open] > summary strong {font-size:20px;}
.question-card[open] .question-answer {display:none;}
.question-content {padding:0 16px 16px;}
.question-content label {font-size:16px;margin:4px 0 12px;}
#variables .question-content textarea {min-height:clamp(150px,25vh,260px);resize:vertical;background:var(--surface);line-height:1.7;}
.question-content small {margin:8px 0;color:var(--muted);}
.question-content button {padding:8px;font-size:12px;}
.question-controls {display:flex;justify-content:space-between;gap:10px;margin:12px 0 18px;}
.optional-settings, .guided-panel > details {border-top:1px solid var(--line);}
#section-nav {gap:6px;max-height:110px;overflow:auto;}
#section-nav button {font-size:13px;padding:8px 12px;}
#composition .prompt-block {margin:10px 0;}
#composition details > summary {font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#composition details[open] > summary {white-space:normal;color:var(--accent);}
#composition details[open] textarea {min-height:200px;}
#finish-stage .stage-content {display:flex;flex-wrap:wrap;gap:12px;align-items:center;}
#finish-stage .stage-content > p {flex-basis:100%;}
@media(max-width:600px) {
 #builder .builder-heading h1 {font-size:25px;}
 .stage-content {padding:0 12px 12px;}
 .focus-stage > summary {padding:12px;gap:10px;}
 .focus-stage[open] > summary strong {font-size:18px;}
 .question-card[open] > summary strong {font-size:18px;}
 .question-controls button {font-size:13px;padding:10px;}
 #variables {grid-template-columns:1fr;}
 #variables .question-card[open] {grid-column:auto;}
 #variables .question-content textarea {min-height:160px;}
 .question-content {padding:0 12px 12px;}
}
@media(prefers-reduced-motion:reduce) {.focus-stage {transition:none;}}
.focus-stage:not([open]) > summary {padding:12px 16px;}
.focus-stage:not([open]) > summary small {font-size:12px;line-height:1.3;margin-top:2px;}
#extra-options {margin:12px 0 0;}
#extra-options > summary {font-size:13px;color:var(--muted);}
#extra-options > details {border-top:1px solid var(--line);padding:0 8px;}
/* Plain-language landing page and accessible navigation. */
.eyebrow {font-size:14px;letter-spacing:1.2px;font-weight:700;}
.hero .eyebrow {margin-bottom:22px;}
.hero-copy > p {font-size:18px;line-height:1.65;max-width:560px;}
.hero {min-height:600px;padding-top:42px;padding-bottom:36px;}
.hero h1 {font-size:clamp(42px,4.7vw,68px);}
.hero-copy .ai-handoff {font-size:16px;margin-top:16px;color:var(--ink);}
.trust-badge {font-size:14px;color:var(--ink);border:1px solid var(--line);background:var(--wash);border-radius:8px;padding:12px;display:inline-flex;margin-top:18px;}
header nav a[aria-current=page] {color:var(--accent);box-shadow:inset 0 -3px var(--accent);}
.example-section,.power-users,.home-faq {padding:28px;border:1px solid var(--line);border-radius:16px;background:var(--surface);margin:20px 0 32px;}
.example-section h2,.power-users h2,.home-faq h2 {font-size:28px;margin:12px 0;line-height:1.25;}
.example-section p,.power-users p,.home-faq p {font-size:16px;line-height:1.7;color:var(--muted);}
.audience-tabs {display:flex;gap:8px;margin:20px 0;flex-wrap:wrap;}
.before-after {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:16px;}
.before-after > div {padding:22px;border-radius:12px;background:var(--wash);border:1px solid var(--line);}
.before-after .example-after {border-color:var(--accent);}
.before-after h3 {font-size:18px;margin-bottom:12px;}
.example-links {display:flex;flex-wrap:wrap;gap:10px;margin:20px 0;}
.example-links .button {font-size:14px;}
.example-section .review-note {color:var(--ink);margin-top:12px;}
.power-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:20px 0;}
.power-grid article {padding:18px;background:var(--wash);border-radius:10px;}
.power-grid h3 {font-size:18px;margin-bottom:8px;}
.home-faq > details {border-top:1px solid var(--line);margin-top:8px;}
.home-faq > details p {padding:0 12px 16px;}
#copy {font-size:17px;padding:12px 22px;font-weight:700;}
#copy-bottom {font-weight:700;}
textarea::placeholder,input::placeholder {color:var(--muted);opacity:1;}
.question-content button {min-height:44px;}
.art-label,.art-caption {font-size:14px;letter-spacing:1px;}
.floating-block small {font-size:14px;}
#home footer {font-size:14px;}
#home footer small {font-size:14px;}
@media(max-width:850px) {
 .hero {grid-template-columns:minmax(0,1fr);min-height:0;}
 .hero-art {display:none;}
 .hero-copy > p {font-size:18px;}
 .hero h1 {font-size:48px;}
 .before-after {grid-template-columns:1fr;}
 header {height:auto;min-height:88px;flex-wrap:wrap;padding-top:12px;padding-bottom:12px;gap:10px;}
 header nav {order:3;flex-basis:100%;justify-content:center;gap:24px;font-size:14px;}
 header nav a {min-height:44px;display:flex;align-items:center;}
 header nav a:first-child {display:flex;}
 header .header-actions {margin-left:auto;}
}
@media(max-width:600px) {
 .hero {padding:26px 0 18px;}
 .hero h1 {font-size:40px;}
 .eyebrow,.hero .eyebrow,.process > .eyebrow {font-size:14px;}
 .example-section,.power-users,.home-faq {padding:18px;margin:16px 0 24px;}
 .example-section h2,.power-users h2,.home-faq h2 {font-size:24px;}
 .before-after > div {padding:16px;}
 .power-grid {grid-template-columns:1fr;}
 .example-links .button {width:100%;justify-content:center;}
 .process > div > span {font-size:16px;}
 .trust-badge {font-size:14px;line-height:1.5;}
}
.process > .eyebrow {font-size:14px;}
.page h1[tabindex="-1"]:focus {outline:none;}
header .brand {min-height:44px;}
header nav a {min-width:44px;justify-content:center;}
/* How it works: a self-contained illustration, themed like the real product. */
.walkthrough {padding:24px;border:1px solid var(--line);border-radius:18px;background:var(--surface);margin:24px 0;}
.walkthrough-heading {display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:20px;}
.walkthrough-heading h2 {font-size:26px;line-height:1.25;flex-basis:100%;}
.walkthrough-heading p {color:var(--muted);font-size:14px;}
.walkthrough-lock {margin-left:auto;display:inline-flex;gap:8px;padding:8px 12px;border-radius:20px;background:var(--wash);color:var(--ink);font-size:14px;}
.walkthrough-stage {position:relative;min-height:550px;overflow:hidden;border:1px solid var(--line);border-radius:14px;background:var(--bg);padding:24px;}
.walk-scene {display:none;}
.walk-scene.current {display:block;}
.walk-scene h3 {font-size:24px;margin-bottom:24px;}
.mock-window {padding:20px;border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:0 12px 30px #1d263b0d;min-width:0;}
.mock-title {font-size:15px;font-weight:700;color:var(--muted);padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--line);}
.mock-templates {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:20px 0;}
.mock-template {padding:30px 18px;border:2px solid transparent;border-radius:12px;background:var(--wash);font-weight:600;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s,border-color .3s;}
.mock-template:nth-child(2) {transition-delay:.07s;}.mock-template:nth-child(3) {transition-delay:.14s;}.mock-template:nth-child(4) {transition-delay:.21s;}
.mock-template.shown {opacity:1;transform:translateY(0);}
.mock-template.selected {border-color:var(--accent);transform:translateY(-4px);}
.mock-hint {color:var(--muted);font-size:14px;line-height:1.6;}
.walk-split {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;}
.mock-field {margin:14px 0;}
.mock-field strong {font-size:14px;display:block;margin-bottom:6px;}
.mock-field > div {padding:12px;min-height:66px;border:1px solid var(--muted);border-radius:8px;background:var(--bg);font-size:15px;line-height:1.5;}
.typing-caret {opacity:0;color:var(--accent);}
.typing-caret.shown {opacity:1;}
.walk-running .typing-caret.shown {animation:walk-caret .7s steps(1) infinite;}
.mock-before {color:var(--muted);font-size:13px;border-radius:8px;padding:8px;background:var(--wash);transition:opacity .4s;}
.mock-preview p {font-size:15px;line-height:1.6;margin:12px 0;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s;}
.mock-preview p.shown {opacity:1;transform:translateY(0);}
.mock-complete {display:inline-block;padding:8px 10px;border-radius:8px;color:var(--on-accent);background:var(--accent);font-size:13px;opacity:0;transition:opacity .3s;}
.mock-copy-text {font-size:15px;line-height:1.7;margin-bottom:20px;}
.mock-copy-button {display:inline-block;padding:12px 20px;background:var(--accent);color:var(--on-accent);border-radius:8px;font-weight:700;}
.mock-message {font-size:14px;line-height:1.6;padding:12px;border-radius:10px;background:var(--wash);margin:12px 0;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s;}
.mock-message.shown {opacity:1;transform:translateY(0);}
.mock-skeleton {display:grid;gap:8px;margin:18px 0;opacity:0;transition:opacity .5s;}
.mock-skeleton span {height:8px;border-radius:6px;background:var(--line);transform:scaleX(.1);transform-origin:left;transition:transform .6s;}
.mock-skeleton.shown span {transform:scaleX(1);}
.mock-skeleton span:nth-child(2) {width:85%;transition-delay:.1s;}.mock-skeleton span:nth-child(3) {width:92%;transition-delay:.2s;}.mock-skeleton span:nth-child(4) {width:60%;transition-delay:.3s;}
.mock-review {color:var(--accent);font-size:16px;font-weight:700;opacity:0;transition:opacity .4s;}
.mock-complete.shown,.mock-skeleton.shown,.mock-review.shown {opacity:1;}
.flying-prompt {position:absolute;left:25%;top:72%;padding:10px 18px;border-radius:10px;background:var(--accent);color:var(--on-accent);opacity:0;font-weight:600;pointer-events:none;}
.flying-prompt.shown {opacity:1;}
.walk-cursor {position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
.walk-cursor path {fill:var(--ink);stroke:var(--surface);stroke-width:2;}
.cursor-ripple {fill:none;stroke:var(--accent);stroke-width:3;opacity:0;transform-box:fill-box;transform-origin:center;}
.cursor-ripple.shown {opacity:.7;animation:walk-ripple .45s ease-out;}
.walkthrough-controls {display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;margin:18px 0;}
.walkthrough-controls [role=group] {display:flex;gap:8px;flex-wrap:wrap;}
.walkthrough-controls button {min-width:44px;min-height:44px;}
.walkthrough-captions {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;list-style:none;padding:0;margin:20px 0;}
.walkthrough-captions li {padding:14px;border:1px solid var(--line);border-radius:10px;background:var(--wash);font-size:15px;line-height:1.7;}
.walkthrough-captions strong {display:block;color:var(--ink);}
.walkthrough-captions li.current {border-color:var(--accent);}
.walkthrough-handoff {font-size:16px;line-height:1.7;color:var(--ink);}
.static-storyboard {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;min-height:0;}
.static-storyboard .walk-scene {display:block;border:1px solid var(--line);border-radius:12px;padding:12px;}
.static-storyboard .walk-scene.current {border-color:var(--accent);}
.static-storyboard .walk-scene h3 {font-size:18px;margin-bottom:14px;}
.static-storyboard .walk-split {grid-template-columns:1fr;gap:12px;}
.static-storyboard .mock-window {padding:12px;}
.static-storyboard .mock-templates {grid-template-columns:1fr;gap:8px;}
.static-storyboard .mock-template {padding:14px;font-size:13px;}
@keyframes walk-caret {50% {opacity:0;}}
@keyframes walk-ripple {from {transform:scale(.3);opacity:1;}to {transform:scale(1.3);opacity:0;}}
@media(max-width:767px) {
 .walkthrough {padding:14px;}
 .walkthrough-heading h2 {font-size:22px;}
 .walkthrough-lock {margin-left:0;}
 .walkthrough-stage {padding:14px;min-height:720px;}
 .walk-scene h3 {font-size:20px;margin-bottom:16px;}
 .walk-split {grid-template-columns:1fr;gap:12px;}
 .mock-window {padding:14px;}
 .mock-template {padding:22px 10px;font-size:14px;}
 .mock-field {margin:10px 0;}
 .mock-field > div {min-height:48px;font-size:14px;padding:8px;}
 .mock-preview p {font-size:14px;margin:8px 0;}
 .mock-title {margin-bottom:10px;padding-bottom:10px;}
 .mock-copy-text {font-size:14px;}
 .walkthrough-captions {grid-template-columns:1fr;}
 .static-storyboard {display:block;min-height:0;}
 .static-storyboard .walk-scene {display:none;}
 .static-storyboard .walk-scene.current {display:block;}
 .flying-prompt {left:15%;top:48%;font-size:13px;}
}
@media(prefers-reduced-motion:reduce) {
 .walkthrough-stage * {animation:none!important;transition:none!important;}
 .walk-cursor,.flying-prompt,.typing-caret,.mock-before {display:none;}
}
.walkthrough-stage:not(.walk-running) * {animation-play-state:paused;}
.mock-message:not(.sent) {border:1px solid var(--muted);background:var(--bg);}
.mock-send {display:inline-block;padding:6px 10px;border-radius:6px;background:var(--accent);color:var(--on-accent);font-size:13px;opacity:0;transition:opacity .3s;}
.mock-send.shown {opacity:1;}
.flying-prompt {width:230px;max-width:45%;font-size:11px;line-height:1.5;box-shadow:var(--shadow);}
@media(max-width:767px) {.flying-prompt {width:160px;font-size:10px;}}
.mock-message {border:1px solid transparent;}
/* A centralized guided workspace: one decision, one input, one next action. */
body.builder-guided #builder > .starting-points,
body.builder-guided #builder > .builder-controls,
body.builder-guided #builder > .compact-checks,
body.builder-guided #builder > .workshop,
body.builder-guided #builder > .bottom-copy,
body.builder-guided #builder > .collection,
body.builder-guided #builder > .local-note {display:none;}
#guided-builder[hidden] {display:none!important;}
#builder .builder-heading {max-width:820px;margin:0 auto 12px;padding-top:20px;padding-bottom:8px;align-items:center;}
body.builder-guided #builder .builder-heading .eyebrow,
body.builder-guided #builder .builder-heading p {display:none;}
body.builder-guided #builder .builder-heading h1 {font-size:24px;}
body.builder-guided #builder .builder-heading .draft-state {font-size:12px;}
.guided-builder {max-width:820px;margin:0 auto 24px;border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:var(--shadow);padding:22px;position:relative;}
.guide-top {display:flex;justify-content:space-between;align-items:center;gap:12px;border-bottom:1px solid var(--line);padding-bottom:12px;}
.guide-step {font-size:13px;font-weight:700;color:var(--accent);}
.guide-tools {display:flex;gap:8px;align-items:center;}
.guide-menu {position:relative;}
.guide-menu > summary {font-size:13px;padding:10px;white-space:nowrap;min-height:44px;}
.guide-menu-panel {position:absolute;right:0;top:100%;width:280px;max-width:calc(100vw - 64px);max-height:310px;overflow:auto;z-index:25;padding:8px;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);background:var(--surface);}
.guide-menu-panel button {display:block;width:100%;text-align:left;margin:3px 0;min-height:44px;}
.answer-overview strong,.answer-overview span {display:block;}
.answer-overview span {font-size:13px;color:var(--muted);font-weight:400;overflow-wrap:anywhere;line-height:1.5;margin-top:4px;}
.guide-content {min-height:350px;padding:24px 0 18px;}
.guide-content h2 {font-size:28px;line-height:1.25;letter-spacing:-.6px;margin:0 0 12px;}
.guide-content h2:focus {outline:none;}
.guide-description {font-size:16px;color:var(--muted);line-height:1.6;margin-bottom:18px;max-width:660px;}
.guide-task-list {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-height:300px;overflow:auto;padding:3px;}
.guide-task-list button {padding:16px;text-align:left;background:var(--wash);border:1px solid var(--line);border-radius:12px;min-height:88px;}
.guide-task-list button strong {display:block;font-size:16px;margin-bottom:5px;}
.guide-task-list button span {display:block;font-size:13px;color:var(--muted);line-height:1.4;}
.guide-task-list button:hover {border-color:var(--accent);}
.guide-footer {display:flex;gap:10px;align-items:center;border-top:1px solid var(--line);padding-top:16px;}
.guide-footer .primary {margin-left:auto;font-weight:700;}
.guide-footer button {min-height:46px;}
.guide-local {font-size:12px;color:var(--muted);margin-top:14px;line-height:1.5;}
.guide-template-label {font-size:13px;color:var(--accent);font-weight:600;margin-bottom:12px;}
.guide-choice-hint,.guide-answer-note {font-size:13px;line-height:1.5;color:var(--muted);margin:10px 0;}
.guide-answer-choices {display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;}
.guide-answer-choices button {border:1px solid var(--line);background:var(--wash);font-size:14px;min-height:44px;}
#guide-answer {width:100%;min-height:150px;max-height:300px;resize:vertical;border:1px solid var(--muted);border-radius:12px;background:var(--bg);color:var(--ink);padding:14px;font-size:17px;line-height:1.6;}
.guide-name,.guide-search {display:block;font-size:14px;margin:12px 0;}
.guide-name input,.guide-search input {display:block;width:100%;padding:10px;min-height:44px;background:var(--bg);color:var(--ink);border:1px solid var(--muted);border-radius:8px;margin-top:6px;}
#guide-output {max-height:260px;overflow:auto;padding:16px;border:1px solid var(--line);border-radius:10px;background:var(--bg);white-space:pre-wrap;font:14px/1.7 monospace;}
.guide-review-checks {margin:10px 0;border:1px solid var(--line);border-radius:8px;}
.guide-review-checks > summary {font-size:14px;}
.guide-review-checks button {display:block;text-align:left;width:100%;font-size:14px;}
.guide-ready {font-size:14px;color:var(--accent);margin:10px 0;}
@media(max-width:600px) {
 body.builder-guided #builder .builder-heading {display:flex;gap:8px;padding-top:14px;}
 body.builder-guided #builder .builder-heading h1 {font-size:19px;}
 body.builder-guided #builder .builder-heading .draft-state {margin:0;max-width:112px;font-size:11px;}
 .guided-builder {padding:14px;border-radius:14px;}
 .guide-top {flex-wrap:wrap;gap:4px;padding-bottom:8px;}
 .guide-tools {margin-left:auto;}
 .guide-menu > summary {font-size:12px;padding:8px;}
 .guide-content {min-height:300px;padding:18px 0 12px;}
 .guide-content h2 {font-size:23px;}
 .guide-description {font-size:14px;margin-bottom:12px;}
 .guide-task-list {gap:8px;max-height:280px;}
 .guide-task-list button {padding:12px;min-height:84px;}
 .guide-task-list button strong {font-size:14px;}
 .guide-task-list button span {font-size:12px;}
 .guide-footer {gap:7px;flex-wrap:wrap;}
 .guide-footer button {font-size:13px;padding:10px;}
 #guide-answer {min-height:140px;font-size:16px;}
 .guide-answer-choices {gap:6px;}
 .guide-answer-choices button {font-size:13px;padding:10px;}
 .guide-menu-panel {max-width:calc(100vw - 56px);width:260px;}
 #guide-output {max-height:230px;}
}
body.builder-guided #builder > #toast {display:none;}
#guide-feedback:empty {display:none;}
#guide-feedback {padding:10px 12px;margin:0 0 12px;border:1px solid var(--accent);border-radius:8px;background:var(--wash);font-size:14px;line-height:1.5;}
@media(max-width:600px) {
 .guide-task-list button {min-height:64px;}
 .guide-task-list button span {display:none;}
 .guide-task-list button strong {margin:0;}
}
.guide-custom-answer > summary,.guide-change-starter > summary,.guide-name-options > summary {font-size:13px;color:var(--muted);padding:10px 0;min-height:44px;}
.guide-writing-own .guide-choice-hint,.guide-writing-own .guide-content > .guide-answer-choices {display:none;}
.guide-name-options {margin:6px 0;}
@media(max-width:600px) {#guide-output {max-height:clamp(120px,24svh,210px);}}
/* Intent cards invite exploration while keeping the guided workspace compact. */
.guide-task-list:has(.guide-intent) {max-height:none;overflow:visible;gap:12px;}
.guide-task-list .guide-intent {position:relative;padding:16px 42px 16px 56px;min-height:110px;transition:transform .2s ease,border-color .2s ease,background .2s ease;}
.guide-intent-icon {position:absolute;top:17px;left:16px;color:var(--accent);font:normal 25px/1 monospace;}
.guide-task-list .guide-intent small {display:block;font-size:11px;line-height:1.5;color:var(--accent);margin-top:9px;}
.guide-card-arrow {position:absolute;right:16px;top:18px;color:var(--accent);transition:transform .2s ease;}
.guide-task-list .guide-intent:hover {transform:translateY(-3px);background:var(--bg);}
.guide-intent:hover .guide-card-arrow {transform:translate(2px,-2px);}
@media(max-width:600px) {
 .guide-task-list:has(.guide-intent) {gap:8px;}
 .guide-task-list .guide-intent {padding:12px 22px 12px 12px;min-height:100px;}
 .guide-task-list .guide-intent .guide-intent-icon {position:static;display:block;margin-bottom:9px;font-size:21px;}
 .guide-task-list .guide-intent small {display:block;font-size:10px;margin-top:5px;}
 .guide-card-arrow {right:10px;top:12px;font-size:12px;}
}
@media(prefers-reduced-motion:reduce) {.guide-task-list .guide-intent,.guide-card-arrow {transition:none;}.guide-task-list .guide-intent:hover,.guide-intent:hover .guide-card-arrow {transform:none;}}
@media(max-width:600px) {
 .guide-task-list .guide-intent {min-height:88px;padding-top:10px;padding-bottom:10px;}
 .guide-task-list .guide-intent .guide-intent-icon {font-size:17px;margin-bottom:5px;}
 .guide-task-list .guide-intent strong {font-size:13px;line-height:1.25;}
 .guide-task-list .guide-intent small {font-size:10px;line-height:1.3;margin-top:4px;}
 .guide-footer #guide-blank {font-size:12px;}
}
@media(max-width:600px) {
 body.builder-guided #builder .builder-heading .draft-state {display:none;}
 .guide-description {font-size:13px;line-height:1.6;}
}
.guide-path-choices {display:grid;gap:12px;}
.guide-path-choices button {position:relative;text-align:left;padding:22px 44px 22px 18px;background:var(--wash);border:1px solid var(--line);border-radius:12px;}
.guide-path-choices strong,.guide-path-choices span {display:block;}
.guide-path-choices span {color:var(--muted);font-size:14px;margin-top:7px;line-height:1.5;}
.guide-path-choices b {position:absolute;right:18px;top:24px;color:var(--accent);}
.guide-answer-choices button[aria-pressed=true] {background:var(--accent);color:var(--on-accent);border-color:var(--accent);}
.guide-answer-choices button i {font-style:normal;}
.guide-answer-choices button[aria-pressed=true] i {font-size:0;}
.guide-answer-choices button[aria-pressed=true] i:before {content:'✓';font-size:14px;}
.guide-blueprint {margin:0 0 14px;border:1px solid var(--line);border-radius:10px;background:var(--bg);}
.guide-blueprint > summary {padding:10px 12px;font-size:13px;line-height:1.5;min-height:44px;}
.guide-blueprint summary span {display:block;font-size:12px;color:var(--accent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.guide-blueprint pre {max-height:180px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;font:12px/1.6 monospace;padding:0 12px 12px;}
.guide-click-flow .guide-content {min-height:260px;}
@media(max-width:600px) {
 .guide-click-flow .guide-content {min-height:205px;padding-top:14px;}
 .guide-click-flow .guide-template-label {margin-bottom:8px;}
 .guide-click-flow .guide-content h2 {font-size:22px;margin-bottom:9px;}
 .guide-click-flow .guide-answer-note {font-size:12px;margin-bottom:4px;}
 .guide-click-flow .guide-choice-hint {display:none;}
 .guide-blueprint {margin-bottom:10px;}
 .guide-answer-choices button[aria-pressed] {flex:1 1 calc(50% - 8px);text-align:left;}
}