.workspace{align-items:start}
[hidden]{display:none!important}

/* Shared visual language: soft rectangular cards with clear, touch-friendly controls. */
:root{
  --radius-card:16px;
  --radius-control:10px;
  --radius-pill:999px;
}
html{overflow-x:hidden}
body{-webkit-tap-highlight-color:rgba(22,127,120,.18)}
.skip-link{position:absolute;left:12px;top:-48px;z-index:100;padding:10px 14px;background:var(--ink);color:#fff;border-radius:var(--radius-control);font-size:11px;text-decoration:none;transition:top .2s ease}
.skip-link:focus{top:12px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.path-overview,.momo-panel,.plan-editor,.visual-preview,.photo-panel,.generation-panel{
  border-radius:var(--radius-card);
  overflow:hidden;
}
.upload-drop{border-radius:var(--radius-control)}
.auth-form input,.date-input{border-radius:var(--radius-control)}
.auth-form button,.quiet-button,.icon-button,.build-button,.primary-action,.text-button{
  border-radius:var(--radius-control);
  touch-action:manipulation;
}
.primary-action{border-radius:var(--radius-pill);padding-inline:18px}
.build-button{border-radius:var(--radius-pill)}
.icon-button{flex:0 0 auto}
.section-heading h2,.overview-head h1,.hero-intro h1{ text-wrap:balance }
.path-metrics,.stage-track,.preview-grid{font-variant-numeric:tabular-nums}
.photo-panel,.plan-editor,.generation-panel,.path-overview,.momo-panel,.visual-preview{box-shadow:0 14px 36px rgba(36,48,42,.09)}
.segment{border-radius:var(--radius-control);touch-action:manipulation}
.segment.selected{box-shadow:0 3px 0 rgba(22,127,120,.35)}
.upload-icon{border-radius:var(--radius-control)}
.photo-preview img,.generated-result img{border-radius:var(--radius-control)}
.next-action{border-radius:var(--radius-control)}
.room-item{border-radius:var(--radius-control)}
.auth-form input:focus-visible,.date-input:focus-visible,.segment:focus-within,.upload-drop:focus-within{box-shadow:0 0 0 3px rgba(22,127,120,.18)}

/* Keep the primary task in a predictable input -> configure -> generate order. */
.hero-intro{max-width:760px;padding:64px 0 34px}
.hero-intro h1{max-width:12ch;margin:10px 0 14px;font-size:clamp(34px,5vw,64px);line-height:1.02;letter-spacing:-.02em}
.hero-intro>p:not(.eyebrow){max-width:58ch;margin:0;color:var(--muted);font-size:14px;line-height:1.65}
.trust-row{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:20px;color:var(--muted);font:500 9px "DM Mono",monospace;text-transform:uppercase;letter-spacing:.08em}
.trust-row span{display:inline-flex;align-items:center;gap:7px}
.trust-row span:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--teal)}
.workflow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start}
.workflow--result .photo-panel{grid-column:1}
.workflow--result .momo-panel{grid-column:2;grid-row:1}
.plan-editor.is-collapsed{opacity:0;transform:translateY(-14px);max-height:0;overflow:hidden;margin-top:0;padding-top:0;padding-bottom:0;border-top-width:0;border-bottom-width:0;pointer-events:none}
.plan-editor{transition:opacity .32s ease,transform .32s ease,max-height .42s ease,margin .42s ease,padding .42s ease,border-color .42s ease}
.momo-panel{transition:transform .42s ease,opacity .32s ease}
.photo-panel,.plan-editor,.generation-panel{min-width:0}
.photo-panel,.plan-editor{height:100%;display:flex;flex-direction:column}
.photo-form{display:flex;flex:1;flex-direction:column}
.generation-inline{margin-top:24px;padding-top:18px;border-top:1px solid var(--line)}
.comparison-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:16px;align-items:start}
.comparison-grid{position:relative}
.comparison-grid .photo-preview,.comparison-grid .generated-result{min-width:0;margin-top:0}
.comparison-grid .generated-result{border-top:0;padding-top:0}
.comparison-grid img{display:block;width:100%;height:auto;aspect-ratio:auto;max-height:none;object-fit:contain;object-position:center top;background:#e5ebe6}
.comparison-grid .photo-preview .result-head,.comparison-grid .generated-result .result-head{min-height:22px}
.comparison-grid .result-head{height:22px;display:flex;align-items:flex-start}
.comparison-grid .photo-preview{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.comparison-grid .photo-preview{justify-items:center}
.comparison-grid .photo-preview .result-head,.comparison-grid .photo-preview img{width:100%}
.comparison-grid .photo-preview img{max-width:320px;justify-self:center}
.comparison-grid .photo-preview img{grid-column:1/-1}
.comparison-grid:not(.is-revealing):not(.is-revealed) .photo-preview{grid-template-columns:1fr;justify-items:center}
.comparison-grid:not(.is-revealing):not(.is-revealed) .photo-preview img{grid-column:1;width:100%;max-width:320px;justify-self:center}
.comparison-grid:not(.is-revealing):not(.is-revealed){display:block}
.comparison-grid:not(.is-revealing):not(.is-revealed) .photo-preview{width:100%}
.comparison-grid .photo-preview .quiet-button,.comparison-grid .photo-preview .text-button{font-size:10px}
.life-example{display:grid;grid-template-columns:96px 1fr;align-items:center;gap:10px;margin:14px 0 0;padding:8px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.life-example img{display:block;width:96px;height:116px;object-fit:cover;object-position:center top;border-radius:var(--radius-control);background:#e5ebe6}
.life-example figcaption{color:var(--muted);font-size:9px;line-height:1.45}
.reveal-stage{position:relative;overflow:hidden;border-radius:var(--radius-control);width:min(100%,320px);aspect-ratio:9 / 16;margin-inline:auto}
.reveal-stage .generated-image{position:absolute;inset:0;z-index:1;width:100%;height:100%;max-width:none;aspect-ratio:auto;object-fit:cover;object-position:center top;opacity:0;clip-path:none;transition:none}
.reveal-stage.is-revealing .generated-image{opacity:0;clip-path:none}
.reveal-stage .generated-image{clip-path:none}
.reveal-stage.is-revealing .stone-shatter{opacity:1;animation:stone-flash 1.25s ease forwards}
.stone-shatter i{position:absolute;top:42%;left:50%;width:11px;height:8px;background:#8d8a80;box-shadow:inset 2px 1px #b9b1a2;transform:translate(-50%,-50%) rotate(18deg);opacity:0}
.reveal-stage.is-revealing .stone-shatter i{animation:stone-fall 1.05s cubic-bezier(.2,.72,.32,1) forwards}
.stone-shatter i:nth-child(2){animation-delay:.08s}.stone-shatter i:nth-child(3){animation-delay:.14s}.stone-shatter i:nth-child(4){animation-delay:.2s}.stone-shatter i:nth-child(5){animation-delay:.26s}.stone-shatter i:nth-child(6){animation-delay:.32s}.stone-shatter i:nth-child(7){animation-delay:.38s}.stone-shatter i:nth-child(8){animation-delay:.44s}.stone-shatter i:nth-child(9){animation-delay:.5s}.stone-shatter i:nth-child(10){animation-delay:.56s}
.stone-shatter i:nth-child(2n){left:38%;top:38%}.stone-shatter i:nth-child(3n){left:61%;top:47%}.stone-shatter i:nth-child(4n){left:45%;top:56%}.stone-shatter i:nth-child(5n){left:70%;top:35%}
@keyframes stone-fall{0%{opacity:0;transform:translate(-50%,-50%) scale(.5) rotate(0)}18%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--drift, 24px)),220px) scale(.78) rotate(220deg)}}
@keyframes stone-flash{0%,16%{background-color:rgba(234,229,217,.9)}75%,100%{background-color:transparent}}
.comparison-grid.is-revealed .photo-preview{transform:translateX(-16px)}
.comparison-grid.is-revealed .generated-result{transform:translateX(16px)}
.comparison-grid .photo-preview,.comparison-grid .generated-result{transition:transform .55s cubic-bezier(.2,.75,.25,1)}
.comparison-grid.is-revealing{display:block;min-height:clamp(330px,35vw,452px)}
.comparison-grid.is-revealing .photo-preview{display:grid;width:100%;justify-items:center}
.comparison-grid.is-revealing .photo-preview,.comparison-grid.is-revealing .generated-result .result-head{visibility:hidden}
.comparison-grid.is-revealing .generated-result{visibility:visible}
.comparison-grid.is-revealing .generated-result{position:absolute;inset:0 auto auto 0;width:100%;z-index:4;margin:0;padding:0;border:0;pointer-events:none}
.comparison-grid.is-revealing .generated-result .result-head{padding:0 0 8px}
.comparison-grid.is-revealing .generated-result .reveal-stage{width:min(100%,320px);margin-inline:auto}
.comparison-grid.is-revealing .generated-result .generated-image{width:100%;max-width:320px;height:auto;aspect-ratio:auto;object-fit:contain;margin-inline:auto}
.comparison-grid.is-revealing .generated-result .generated-image{position:absolute;inset:0;width:100%;height:100%;max-width:none;aspect-ratio:auto;object-fit:cover;object-position:center top}
.comparison-grid.is-revealing .generated-result .text-button{display:none}
#fragment-canvas{position:absolute;inset:0;z-index:4;width:100%;height:100%;pointer-events:none}
.comparison-grid.is-revealed #fragment-canvas{display:none}
.comparison-grid.is-revealed .generated-result .generated-image{opacity:1;clip-path:none;transform:none}
.comparison-grid.is-revealed .generated-result .reveal-stage{width:100%;aspect-ratio:9 / 16}
.comparison-grid.is-revealed .generated-result .generated-image{position:absolute;inset:0;width:100%;height:100%;max-width:none;aspect-ratio:auto;object-fit:cover;object-position:center top}
.comparison-grid.is-revealed .photo-preview img{width:100%;height:100%;max-width:none;aspect-ratio:9 / 16;object-fit:cover}
.comparison-grid.is-revealed{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
.comparison-grid.is-revealed .photo-preview,.comparison-grid.is-revealed .generated-result{display:grid;grid-template-columns:1fr;align-content:start;align-items:start}
.comparison-grid.is-revealed .photo-preview{row-gap:0}
.comparison-grid.is-revealed .photo-preview .result-head,.comparison-grid.is-revealed .generated-result .result-head{grid-column:1;grid-row:1}
.comparison-grid.is-revealed .photo-preview img,.comparison-grid.is-revealed .generated-result img{grid-column:1;grid-row:2;margin-top:0}
.comparison-grid.is-revealed .photo-preview,.comparison-grid.is-revealed .generated-result{position:relative;inset:auto;visibility:visible}
.comparison-grid.is-revealed .generated-result .reveal-stage{overflow:visible}
.comparison-grid.is-revealing .generated-result .generated-image,.comparison-grid.is-revealed .generated-result .generated-image{position:absolute;inset:0;width:100%;height:100%;max-width:none;aspect-ratio:auto;object-fit:cover}
.generation-wait{display:flex;align-items:center;gap:10px;margin-top:16px;color:var(--muted);font-size:10px}
.spinner{width:16px;height:16px;border:2px solid #b8c8c1;border-top-color:var(--teal);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.auth-dialog{width:min(420px,calc(100% - 32px));padding:0;border:1px solid var(--line);border-radius:var(--radius-card);background:var(--surface);color:var(--ink);box-shadow:0 24px 80px rgba(24,32,29,.24)}
.auth-dialog::backdrop{background:rgba(24,32,29,.38);backdrop-filter:blur(3px)}
.auth-dialog-inner{position:relative;padding:28px}
.auth-dialog h2{margin:8px 0 0;font-size:25px}
.auth-dialog .section-lead{margin-bottom:22px}
.auth-dialog .auth-form{display:grid;grid-template-columns:1fr;align-items:stretch;gap:8px}
.auth-dialog .auth-form label{font-size:10px;font-weight:700}
.auth-dialog .auth-form input{width:100%;min-height:42px}
.auth-dialog .primary-action{width:100%;min-height:42px}
.auth-close{position:absolute;top:18px;right:18px}
.generation-panel{background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);padding:25px;grid-column:1/-1}
.generation-panel .section-lead{max-width:62ch}
.path-overview,.momo-panel{min-width:0}
.path-overview{grid-column:1/-1}
.momo-panel{grid-column:1/-1}
.section-lead{color:var(--muted);font-size:11px;line-height:1.55;margin:12px 0 0}

/* The conditions card can become half-width, so keep each control readable. */
.plan-editor .section-heading{align-items:flex-start}
.plan-editor .section-heading>div{min-width:0}
.plan-editor .section-heading h2{overflow-wrap:anywhere}
.plan-editor form{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 14px;align-items:start}
.plan-editor form fieldset{min-width:0}
.plan-editor form fieldset:nth-child(1),
.plan-editor form fieldset:nth-child(2){grid-column:span 1}
.plan-editor form fieldset:nth-child(5){grid-column:1}
.plan-editor form fieldset:nth-child(6){grid-column:2}
.plan-editor form .build-button{grid-column:1/-1;width:fit-content;min-width:190px;margin-top:2px}
.plan-editor .segmented{grid-template-columns:repeat(3,minmax(0,1fr))}
.plan-editor .segment{min-width:0;overflow-wrap:anywhere;line-height:1.2}
.plan-editor .range-row{align-items:flex-start;flex-wrap:wrap}
.plan-editor .range-row span{white-space:nowrap}
.plan-editor .date-input{min-width:0}

@media(max-width:960px){
  .hero-intro{padding:46px 0 26px}
}
@media(max-width:600px){
  .hero-intro{padding:34px 0 22px}
  .hero-intro h1{font-size:36px}
  .trust-row{gap:8px 12px}
  .workflow{grid-template-columns:1fr;gap:12px}
  .workflow--result .momo-panel{grid-column:auto;grid-row:auto}
  .generation-panel,.path-overview,.momo-panel{grid-column:auto}
  .generation-panel{padding:18px}
  .photo-panel,.plan-editor{height:auto}
  .generation-inline{margin-top:24px}
  .comparison-grid{grid-template-columns:1fr;gap:12px}
  .life-example{grid-template-columns:84px 1fr}.life-example img{width:84px;height:104px}
  .comparison-grid.is-revealed .photo-preview,.comparison-grid.is-revealed .generated-result{transform:none}
  .section-heading{gap:10px}
  .section-heading h2{font-size:18px}
  .plan-editor form{grid-template-columns:1fr;gap:16px}
  .plan-editor form fieldset:nth-child(1),
  .plan-editor form fieldset:nth-child(2),
  .plan-editor form fieldset:nth-child(5),
  .plan-editor form fieldset:nth-child(6){grid-column:auto}
  .plan-editor form .build-button{grid-column:auto;width:100%;min-width:0}
}