:root{font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif;color:#30443b;background:#f2efe6}*{box-sizing:border-box}body{margin:0}header{height:96px;padding:24px 5%;display:flex;align-items:center;justify-content:space-between}header>span{font-size:13px;color:#7c867c}.brand{font-size:26px;text-decoration:none;color:inherit;letter-spacing:3px}.brand small{display:block;font-size:9px;letter-spacing:2px;margin-top:5px}main{display:grid;grid-template-columns:340px 1fr;min-height:calc(100vh - 150px);padding:0 4% 24px;gap:35px}.intro{padding:70px 12px 20px}.eyebrow{font-size:10px;letter-spacing:2px;color:#879384}h1{font-weight:400;font-size:42px;line-height:1.4;letter-spacing:3px;margin:26px 0}.intro>p{line-height:1.8;font-size:14px}.facts{font-size:12px;line-height:2;color:#7c867c;margin:25px 0}.actions{display:flex;flex-direction:column;gap:10px}.actions a{padding:15px 20px;background:#315b47;color:white;text-align:center;text-decoration:none;border-radius:28px;font-size:14px;cursor:pointer}.actions a+ a{background:#e3e8d9;color:#315b47}.actions a[aria-disabled=true]{opacity:.45;pointer-events:none}.note{font-size:12px!important;color:#7c867c}.viewport{min-height:500px;border-radius:28px;background:#e8e4d9;position:relative;overflow:hidden}.viewport canvas{width:100%;height:100%;display:block;touch-action:none}#status{position:absolute;left:20px;top:20px;right:20px;font-size:13px;z-index:1;pointer-events:none}#status:empty{display:none}#reset{position:absolute;right:20px;bottom:24px;border:0;border-radius:50%;width:40px;height:40px;background:#faf9f1;color:#315b47;font-size:22px;cursor:pointer}#timebar{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);padding:13px 20px;border-radius:30px;background:#faf9f1;white-space:nowrap;font-size:12px}#timebar input{width:90px;margin:0 10px;vertical-align:middle;accent-color:#315b47}footer{text-align:center;padding:14px;font-size:11px;letter-spacing:2px;color:#90988e}button:focus-visible,a:focus-visible{outline:2px solid #436b56;outline-offset:4px}@media(max-width:760px){header{height:75px;padding:18px 6%}header>span{display:none}main{display:flex;flex-direction:column;padding:0 14px;gap:0}.intro{padding:16px 9px;order:2}h1{font-size:26px;margin:12px 0}h1 br{display:none}.eyebrow{display:none}.viewport{height:57vh;min-height:340px;order:1}.actions{flex-direction:row}.actions a{flex:1;padding:15px 8px}.facts{margin:12px 0}.note{margin-bottom:0}footer{padding-bottom:calc(18px + env(safe-area-inset-bottom,0px))}}

/* Share page: scene first, only download actions below. */
header{height:82px;padding:18px 4%}main{display:flex;flex-direction:column;gap:20px;min-height:calc(100dvh - 82px);padding:0 4% 24px}.viewport{height:calc(100dvh - 185px);min-height:400px;flex:none}.actions{flex-direction:row;justify-content:center;gap:12px}.actions a{flex:0 1 260px;padding:15px 22px}@media(max-width:760px){header{height:68px;padding:14px 20px}main{min-height:calc(100dvh - 68px);padding:0 12px calc(16px + env(safe-area-inset-bottom,0px));gap:14px}.viewport{height:calc(100dvh - 166px - env(safe-area-inset-bottom,0px));min-height:300px;border-radius:22px;order:0}.actions{order:1;gap:8px}.actions a{flex:1;padding:14px 6px;font-size:13px}}

.brand{display:flex;align-items:center;gap:12px;letter-spacing:normal}.brand-symbol{display:block;width:48px;height:48px;border-radius:12px;object-fit:contain}.brand-wordmark{display:block;width:157px;height:19px;object-fit:contain}@media(max-width:760px){.brand{gap:10px}.brand-symbol{width:40px;height:40px;border-radius:10px}.brand-wordmark{width:140px;height:auto}}

/* senhome: blue and lilac from the supplied identity. */
:root{color:#282737;background:#f7f7fc}.viewport{background:#eef0f8;border:1px solid #e4e3ef}.actions a{background:linear-gradient(115deg,#bfe5fa,#d6c5f5);color:#292338;border:1px solid #c9c4e3;box-shadow:0 3px 12px #b9acd320}.actions a+a{background:#fff;color:#49405f;border-color:#ded7ed}.actions a:hover{filter:brightness(.97)}#reset,#timebar{background:#fffffff0;color:#514663;box-shadow:0 2px 12px #25203710}#timebar input{accent-color:#9980bc}#status{color:#48405b}button:focus-visible,a:focus-visible{outline-color:#9980bc}

#timebar{padding:10px 16px;bottom:22px;border:1px solid #e3ddec;border-radius:40px;box-shadow:0 6px 24px #30213d14;backdrop-filter:blur(12px);font-size:12px}
#timebar[hidden]{display:none}
#timebar input{appearance:none;-webkit-appearance:none;width:176px;height:40px;margin:0 12px;border:0;border-radius:24px;cursor:ew-resize;touch-action:none;background:linear-gradient(to right,var(--track-color,#bbd9ef) 0%,var(--track-color,#bbd9ef) var(--progress,0%),#ebe8f2 var(--progress,0%),#ebe8f2 100%);box-shadow:inset 0 1px 3px #42395110;outline-offset:4px}
#timebar input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:34px;height:34px;border-radius:50%;background:#fff;border:1px solid #ffffffd0;box-shadow:0 2px 7px #34264230;cursor:grab}
#timebar input::-moz-range-thumb{width:32px;height:32px;border-radius:50%;background:white;border:1px solid #fff;box-shadow:0 2px 7px #34264230;cursor:grab}
#timebar input:active::-webkit-slider-thumb{cursor:grabbing;box-shadow:0 2px 10px #74608d50}
#timebar input:disabled{opacity:.45;cursor:wait}
@media(max-width:760px){#timebar{bottom:18px;padding:8px 12px}#timebar input{width:136px;height:40px;margin:0 8px}#reset{right:12px;bottom:90px}}
.generation{position:absolute;inset:0;z-index:5;display:grid;place-items:center;background:radial-gradient(ellipse at 30% 30%,#e5e7fc,transparent 65%),#f3f3fa;padding:28px}.generation[hidden]{display:none}.generation-card{width:min(320px,100%);text-align:center;color:#514663}.generation h1{font-size:23px;letter-spacing:1px;margin:24px 0 12px}.generation-message{font-size:14px;line-height:1.7;min-height:48px;margin:0 0 20px;overflow-wrap:anywhere}.generation-track{height:8px;border-radius:12px;overflow:hidden;background:#dfdce9}.generation-track i{display:block;height:100%;width:0;background:linear-gradient(90deg,#a9d9f1,#aa8cce);border-radius:inherit;transition:width 1s ease}.generation-percent{display:block;margin-top:12px;font-size:13px;font-variant-numeric:tabular-nums}.generation small{display:block;color:#898293;font-size:12px;margin-top:24px}.generation-orb{width:64px;height:64px;margin:auto;border-radius:24px;background:linear-gradient(135deg,#bde6fc,#d9b9f3,#f1d0e9);box-shadow:0 10px 36px #b9a0d744;animation:generation-breathe 3s ease-in-out infinite}.generation.is-error .generation-orb{animation:none;opacity:.55}@keyframes generation-breathe{50%{transform:translateY(-6px) rotate(8deg);box-shadow:0 16px 45px #b9a0d760}}@media(prefers-reduced-motion:reduce){.generation-orb{animation:none}.generation-track i{transition:none}}

.export-note{margin:8px auto 20px;padding:0 20px;max-width:680px;text-align:center;font-size:13px;line-height:1.6;color:#746879;overflow-wrap:anywhere}

.scene-info{position:relative;z-index:20;font-size:13px}.scene-info summary{list-style:none;cursor:pointer;border:1px solid #d7dfd4;border-radius:22px;padding:10px 17px;background:#faf9f1;color:#315b47}.scene-info summary::-webkit-details-marker{display:none}.scene-info summary:focus-visible{outline:2px solid #315b47;outline-offset:3px}.scene-info-panel{position:absolute;right:0;top:48px;width:300px;max-width:calc(100vw - 32px);padding:20px;background:#fffffaf5;border:1px solid #e0e5dc;border-radius:20px;box-shadow:0 12px 40px #233d3020;max-height:70dvh;overflow:auto;backdrop-filter:blur(16px)}.scene-info h2{font-size:17px;margin:0 0 16px;font-weight:600}.scene-info dl{display:grid;grid-template-columns:1fr auto;gap:12px 14px;margin:0}.scene-info dt{color:#718174}.scene-info dd{margin:0;text-align:right;overflow-wrap:anywhere;max-width:170px}@media(max-width:600px){.scene-info summary{padding:8px 12px}.scene-info-panel{top:42px;padding:18px}}

#timebar.has-time-stops{padding:12px 18px 32px;width:min(290px,calc(100% - 110px))}#timebar.has-time-stops input{display:block;width:100%;margin:0;height:34px}.time-stop-labels{position:absolute;left:35px;right:35px;bottom:9px;height:17px}.time-stop-labels button{position:absolute;transform:translateX(-50%);padding:0;border:0;background:none;color:#536251;font:inherit;font-size:12px;white-space:nowrap;cursor:pointer}.time-stop-labels button:focus-visible{outline:2px solid #315b47;outline-offset:3px}

/* App entry uses the same border, gradient and pill buttons as the scene. */
.app-launch {
  margin: 0 4% 16px;
  padding: 20px 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px 24px;
  border: 1px solid #e4e3ef;
  border-radius: 28px;
  background: #ffffffb3;
  color: #514663;
}
.app-launch-copy { min-width: 0; }
.app-launch-copy > strong { font-size: 15px; font-weight: 500; letter-spacing: .3px; }
.app-launch-status { margin: 6px 0 0; color: #898293; font-size: 12px; line-height: 1.7; }
.app-launch button {
  min-height: 44px;
  padding: 12px 24px;
  border: 1px solid #ded7ed;
  border-radius: 28px;
  background: #fff;
  color: #49405f;
  font: inherit;
  font-size: 13px;
  line-height: 1.4;
  cursor: pointer;
  white-space: nowrap;
  transition: filter .15s, box-shadow .15s;
}
.app-launch button:hover { filter: brightness(.97); }
.app-launch button:focus-visible { outline: 2px solid #9980bc; outline-offset: 4px; }
.app-launch .app-launch-open {
  min-width: 140px;
  background: linear-gradient(115deg, #bfe5fa, #d6c5f5);
  border-color: #c9c4e3;
  color: #292338;
  box-shadow: 0 3px 12px #b9acd320;
}
.app-launch-group {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 24px;
  padding-top: 16px;
  border-top: 1px solid #eeecf4;
}
.app-launch-group[hidden] { display: none; }
.app-launch-group p { flex: 1; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin: 0; line-height: 1.6; }
.app-launch-group-label { color: #746879; font-size: 12px; }
.app-launch-group strong { padding: 5px 12px; border-radius: 10px; background: #f0eef8; color: #514663; font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: 1px; user-select: text; }
.app-launch-group-hint { color: #898293; font-size: 12px; }
.app-launch-copy-group { min-width: 140px; }
.app-launch-copy-status { flex-basis: 100%; color: #746879; font-size: 12px; line-height: 1.6; }
.app-launch-copy-status:empty { display: none; }
@media (max-width: 760px) {
  .app-launch { margin: 0 12px 14px; padding: 16px; gap: 14px 12px; border-radius: 22px; }
  .app-launch-copy > strong { font-size: 14px; }
  .app-launch .app-launch-open, .app-launch-copy-group { min-width: 100px; padding: 11px 16px; }
  .app-launch-group { gap: 12px; padding-top: 14px; }
  .app-launch-group p { gap: 6px 10px; }
  .app-launch-group-hint { flex-basis: 100%; }
}
@media (max-width: 380px) {
  .app-launch { grid-template-columns: minmax(0, 1fr); }
  .app-launch-open { width: 100%; }
  .app-launch-group p { flex-basis: 100%; }
  .app-launch-copy-group { width: 100%; }
}

/* Fit the complete share page into the available browser viewport. */
html { height: 100%; }
body { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
body > header { flex: none; }
body > .app-launch { flex: none; padding: 12px 20px; gap: 10px 20px; margin-bottom: 12px; }
.app-launch-group { padding-top: 10px; gap: 8px 20px; }
body > main { flex: 1; min-height: 0; gap: 12px; padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)); }
main > .viewport { flex: 1; height: auto; min-height: 0; container-type: size; }
.viewport canvas { position: absolute; inset: 0; }
main > .actions { flex: none; }
main > .export-note { flex: none; margin: 0 auto; max-height: 48px; overflow-y: auto; }
.generation { overflow-y: auto; }
.generation [hidden] { display: none; }
@container (max-height: 340px) {
  .generation { padding: 12px; }
  .generation-orb { width: 36px; height: 36px; border-radius: 14px; }
  .generation h1 { font-size: 18px; margin: 12px 0 6px; }
  .generation-message { min-height: 0; margin-bottom: 10px; font-size: 12px; }
  .generation small { margin-top: 10px; }
  .generation-percent { margin-top: 6px; }
}
@container (max-height: 200px) {
  .generation-orb, .generation small { display: none; }
  .generation h1 { margin-top: 0; font-size: 16px; }
}
@media (max-width: 760px) {
  body > header { height: 60px; padding-top: 10px; padding-bottom: 10px; }
  body > .app-launch { padding: 10px 14px; gap: 8px 12px; margin-bottom: 10px; }
  .app-launch-status { margin-top: 3px; line-height: 1.5; }
  .app-launch-group { gap: 6px 12px; padding-top: 8px; }
  body > main { gap: 10px; }
}
@media (max-width: 380px) {
  body > .app-launch { grid-template-columns: minmax(0, 1fr) auto; }
  .app-launch-open, .app-launch-copy-group { width: auto; }
  .app-launch-group p { flex-basis: 0; min-width: 0; }
  .app-launch-group-hint { display: none; }
  .app-launch .app-launch-open, .app-launch-copy-group { min-width: 88px; padding: 10px 12px; }
}
@media (max-height: 520px) and (min-width: 600px) {
  body > header { height: 48px; padding-top: 6px; padding-bottom: 6px; }
  .brand-symbol { width: 36px; height: 36px; }
  body > .app-launch { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); padding: 8px 14px; gap: 12px; margin-bottom: 8px; }
  .app-launch-group { grid-column: auto; padding: 0 0 0 12px; border-top: 0; border-left: 1px solid #eeecf4; gap: 6px; }
  .app-launch-group-hint { display: none; }
  .app-launch button { min-width: 88px; padding: 8px 12px; }
  body > main { gap: 8px; }
  .actions a { padding-top: 10px; padding-bottom: 10px; }
  #reset { bottom: 12px; }
}