/* The projects under test have their own visual identities. Testsy's replay
   chrome, status, cursor and evidence annotations keep the landing system. */
.demo-browser[data-demo-project="launchpad"]{
  --lp-navy:#142640;
  --lp-blue:#245ee8;
  --lp-text:#24354d;
  --lp-muted:#687b95;
  --lp-line:#d6e0ec;
  container:launchpad / inline-size;
  min-height:100%;
  background:#edf2f8;
  color:var(--lp-text);
  font:13px/1.45 Arial,Helvetica,sans-serif;
  letter-spacing:0;
}
.demo-project-page:has(>.demo-browser[data-demo-project="launchpad"]){padding:0 0 76px;background:#edf2f8}
.a-screen.demo-web-screen{min-height:440px}
@container demo (max-width:520px){.a-screen.demo-web-screen{min-height:480px}}
.demo-browser[data-demo-project="launchpad"] *{box-sizing:border-box}
.demo-browser[data-demo-project="launchpad"] .lp-toolbar{
  display:flex;align-items:center;gap:10px;min-width:0;margin:0;
  padding:8px 10px;background:#e9eff6;border-bottom:1px solid #c9d6e5;
}
.demo-browser[data-demo-project="launchpad"] .demo-browser-address{
  display:block;min-width:0;min-height:30px;padding:7px 9px;border:1px solid #c6d3e2;
  border-radius:5px;background:#fff;color:#394e68;
  font:11px/1.3 Arial,Helvetica,sans-serif;
}
.lp-reload{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  min-height:30px;padding:5px 7px;border:1px solid #b8c9dd;border-radius:5px;
  background:#fff;color:#394e6b;font-size:10px;font-weight:600;white-space:nowrap;
}
.lp-nav{
  display:flex;align-items:center;flex-wrap:wrap;gap:12px 25px;
  min-width:0;padding:14px 20px;background:var(--lp-navy);color:#fff;
}
.demo-browser[data-demo-project="launchpad"] .lp-brand{display:flex;align-items:center;gap:8px;flex:none;margin-right:0;font:700 17px/1 Arial,Helvetica,sans-serif;letter-spacing:-.4px}
.lp-mark{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:5px;background:#3c78ff;color:#fff;font-size:15px;line-height:1}
.lp-links{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;min-width:0;color:#a6b8d0;font-size:11px;line-height:1.4}
.lp-links>span{padding:4px 0;white-space:nowrap}
.lp-links>.is-active{color:#fff;box-shadow:0 2px 0 #78a4ff}
.lp-content{min-width:0;padding:23px 24px 26px}
.lp-eyebrow{display:block;margin:0 0 7px;color:#71839d;font-size:9px;font-weight:700;letter-spacing:1.3px;line-height:1.5;text-transform:uppercase}
.demo-browser[data-demo-project="launchpad"] .lp-heading h3{
  margin:0;color:#20334e;font:700 21px/1.2 Arial,Helvetica,sans-serif;letter-spacing:-.4px;
}
.demo-browser[data-demo-project="launchpad"] .lp-heading p{
  margin:7px 0 0;color:var(--lp-muted);font:12px/1.5 Arial,Helvetica,sans-serif;
}
.lp-project-form,.lp-project-list{
  display:grid;gap:13px;min-width:0;margin-top:18px;padding:18px;
  border:1px solid var(--lp-line);border-radius:6px;background:#fff;
  box-shadow:0 2px 5px #20334e05;
}
.lp-form-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:5px 12px;padding-bottom:12px;border-bottom:1px solid #e9eef5;line-height:1.4}
.lp-form-head>b{font-size:12px;font-weight:700}
.lp-save-status{color:#6a7e98;font-size:10px;white-space:normal}
.lp-label{display:block;color:#485b76;font-size:11px;font-weight:600;line-height:1.4}
.lp-input{display:block;width:100%;min-width:0;min-height:38px;padding:9px 10px;border:1px solid #b8c9df;border-radius:5px;background:#fbfdff;color:#233651;font-size:13px;line-height:1.4;overflow-wrap:anywhere;box-shadow:inset 0 1px 1px #102a4305}
.lp-primary{display:inline-flex;align-items:center;justify-content:center;justify-self:start;max-width:100%;min-height:34px;padding:8px 12px;border:1px solid #1c51cf;border-radius:5px;background:var(--lp-blue);color:#fff;font-size:11px;font-weight:700;line-height:1.35;text-align:center;white-space:normal;box-shadow:0 2px 2px #245ee81a}
.demo-browser[data-demo-project="launchpad"] .demo-observation{margin:0;padding:9px 10px;border-left:3px solid #d65a56;border-radius:2px;background:#fff3f2;color:#8b3a38;line-height:1.5}
.demo-browser[data-demo-project="launchpad"] .demo-mismatch{outline-color:#d65a56}
@container launchpad (max-width:320px){
  .lp-nav{padding:12px;gap:11px 15px}
  .demo-browser[data-demo-project="launchpad"] .lp-brand{width:100%;font-size:16px}
  .lp-links{gap:6px 15px;font-size:10px}
  .lp-content{padding:17px 12px 20px}
  .demo-browser[data-demo-project="launchpad"] .lp-heading h3{font-size:18px}
  .demo-browser[data-demo-project="launchpad"] .lp-heading p{font-size:11px}
  .lp-project-form,.lp-project-list{padding:13px;gap:11px;margin-top:14px}
  .lp-form-head{align-items:flex-start}
  .lp-form-head>b{flex-basis:100%}
  .demo-browser[data-demo-project="launchpad"] .lp-toolbar{padding:8px;gap:6px}
  .demo-browser[data-demo-project="launchpad"] .demo-browser-address{font-size:9px;padding:5px 6px}
}

/* Skyline is a weather app: deep atmospheric blues, soft glass and warm sun. */
.sky-screen[data-demo-project="skyline"]{
  --sky-white:#f0f8ff;
  --sky-soft:#b5d7ea;
  --sky-gold:#ffd36e;
  container:skyline / inline-size;
  position:absolute;inset:0;display:flex;flex-direction:column;gap:16px;
  min-width:0;padding:54px 16px 20px;overflow:hidden;
  background:radial-gradient(ellipse at 100% 15%,#237a8e66,transparent 58%),linear-gradient(165deg,#112d50 2%,#174c70 56%,#286e7e 100%);
  color:var(--sky-white);font:12px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  letter-spacing:0;
}
.sky-screen[data-demo-project="skyline"] *{box-sizing:border-box}
.sky-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0;flex:none;min-height:28px}
.sky-brand{color:#fff;font-size:16px;font-weight:650;letter-spacing:-.4px;line-height:1.2}
.sky-actions{display:flex;align-items:center;gap:7px;flex:none}
.sky-icon-button{display:inline-flex;align-items:center;justify-content:center;flex:none;width:27px;height:27px;border:1px solid #d7f0ff38;border-radius:50%;background:#d7f0ff0e;color:#e5f4ff;font-size:18px;line-height:1}
.sky-icon-button svg{display:block;width:14px;height:14px}
.sky-symbol{display:block;width:62px;height:62px;flex:none;margin:0 auto;color:var(--sky-gold);filter:drop-shadow(0 5px 12px #051b331f)}
.sky-symbol svg{display:block;width:100%;height:100%}
.sky-welcome{align-items:center;justify-content:center;text-align:center;gap:17px;padding-top:62px}
.sky-welcome .sky-symbol{width:80px;height:80px;margin-bottom:2px}
.sky-welcome-title{margin:0;color:#fff;font-size:27px;font-weight:650;letter-spacing:-1px;line-height:1.1}
.sky-subtitle{margin:0;color:var(--sky-soft);font-size:12px;line-height:1.6;max-width:180px}
.sky-button{display:inline-flex;align-items:center;justify-content:center;max-width:100%;min-height:36px;padding:9px 19px;border:1px solid #fff8;border-radius:20px;background:#e9f7ff;color:#153f5a;font-size:12px;font-weight:650;line-height:1.35;text-align:center;box-shadow:0 4px 12px #051b331f}
.sky-welcome .sky-button{margin-top:7px;min-width:132px}
.sky-empty{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-height:0;padding-bottom:28px;text-align:center}
.sky-empty .sky-title{margin:0}
.sky-weather-card{position:relative;display:grid;align-content:start;gap:5px;min-width:0;padding:17px 15px;border:1px solid #deefff35;border-radius:18px;background:linear-gradient(135deg,#d6f3ff24,#bfdfff0c);box-shadow:0 6px 18px #071e3520}
.sky-location{display:block;color:#fff;font-size:15px;font-weight:650;line-height:1.3}
.sky-condition{display:block;color:#c5e4f3;font-size:10px;line-height:1.5}
.sky-temperature{position:relative;display:block;width:max-content;max-width:100%;margin:7px 0 4px;color:#fff;font-size:45px;font-weight:350;letter-spacing:-2px;line-height:1.08}
.sky-range{display:block;color:#d2e9f5;font-size:10px;line-height:1.5}
.sky-weather-card>.sky-symbol{position:absolute;top:20px;right:12px;width:38px;height:38px;margin:0;opacity:.95}
.sky-forecast{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;min-width:0;padding:13px 7px;border:1px solid #deefff21;border-radius:15px;background:#a7dfff0b;text-align:center}
.sky-forecast>span{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;color:#abcfe3;font-size:9px;line-height:1.3}
.sky-forecast b{color:#f5fbff;font-size:13px;font-weight:500}
.sky-forecast small{color:#b9dfec;font-size:9px}
.sky-title{margin:0;color:#fff;font-size:23px;font-weight:600;letter-spacing:-.6px;line-height:1.15}
.sky-search-input{display:flex;align-items:center;gap:8px;min-width:0;min-height:38px;padding:10px 12px;border:1px solid #d3ecff44;border-radius:12px;background:#0a244b66;color:#ecf8ff;font-size:12px;line-height:1.45;overflow-wrap:anywhere}
.sky-search-input>svg{flex:none;color:#aacddd}
.sky-screen .caret{background:#d8f2ff}
.sky-results{display:grid;gap:8px;min-width:0}
.sky-place-row{display:flex;flex-direction:column;gap:3px;min-width:0;padding:13px 12px;border:1px solid #d3ecff26;border-radius:12px;background:#b8e9ff0c;color:#f0faff;line-height:1.4}
.sky-place-row b{font-size:13px;font-weight:600}
.sky-place-row small{color:#a7cfe3;font-size:10px}
.sky-place-row.is-selected{border-color:#87cde6a1;background:#9edfff23}
.sky-back{display:inline-flex;align-items:center;align-self:flex-start;min-height:26px;gap:5px;color:#c8e9f8;font-size:11px;line-height:1.4}
.sky-section-label{display:block;margin:0 0 -7px;color:#a4c9df;font-size:9px;font-weight:600;letter-spacing:1px;line-height:1.5;text-transform:uppercase}
.sky-setting-card{display:grid;min-width:0;overflow:hidden;border:1px solid #d9f0ff2b;border-radius:14px;background:#b8e9ff0b}
.sky-unit-row{display:flex;align-items:center;justify-content:space-between;gap:9px;min-width:0;min-height:43px;padding:11px 12px;color:#d5eaf7;font-size:12px;line-height:1.4}
.sky-unit-row+.sky-unit-row{border-top:1px solid #d9f0ff18}
.sky-unit-row.is-selected{background:#b9eaff17;color:#fff}
.sky-check{display:inline-flex;align-items:center;justify-content:center;flex:none;width:18px;height:18px;border:1px solid #b6e3f278;border-radius:50%;color:#c8f4ff;font-size:11px;line-height:1}
.sky-unit-row.is-selected .sky-check{border-color:#a9e9f4;background:#8ed9ed;color:#10445b}
.sky-toggle{position:relative;display:inline-block;flex:none;width:29px;height:17px;border-radius:20px;background:#9ab9d02b;border:1px solid #a6c8da38}
.sky-toggle::after{content:"";position:absolute;top:2px;left:2px;width:11px;height:11px;border-radius:50%;background:#b6cedd;box-shadow:0 1px 3px #0a26334d}
.sky-replay[data-demo-project="skyline"]{gap:12px;padding:40px 12px 15px}
.sky-replay .sky-brand{font-size:13px}
.sky-replay .sky-toolbar{gap:6px;min-height:24px}
.sky-replay .sky-actions{gap:5px}
.sky-replay .sky-icon-button{width:23px;height:23px;font-size:15px}
.sky-replay .sky-icon-button svg{width:12px;height:12px}
.sky-replay .sky-weather-card{padding:14px 12px;border-radius:15px;gap:4px}
.sky-replay .sky-location{font-size:13px}
.sky-replay .sky-condition{font-size:9px}
.sky-replay .sky-temperature{font-size:35px;margin:8px 0 5px;letter-spacing:-1.4px}
.sky-replay .sky-range{font-size:9px}
.sky-replay .sky-weather-card>.sky-symbol{width:29px;height:29px;right:10px;top:17px}
.sky-replay .sky-forecast{padding:10px 5px;gap:3px;border-radius:13px}
.sky-replay .sky-forecast b{font-size:12px}
.sky-replay .sky-forecast>span,.sky-replay .sky-forecast small{font-size:8px}

/* Replay thumbnails retain the same project palettes at their smaller scale. */
.a-frame .demo-film-launchpad{background:#edf2f8;border-color:#cbd7e6}
.demo-film-launchpad .film-nav{position:absolute;top:0;left:0;right:0;height:17px;background:#142640}
.demo-film-launchpad .film-nav::before{content:"";position:absolute;left:9px;top:5px;width:7px;height:7px;border-radius:2px;background:#4a81f4}
.demo-film-launchpad .film-nav::after{content:"";position:absolute;left:22px;top:7px;width:32px;height:3px;border-radius:1px;background:#d4e3ff}
.demo-film-launchpad .film-line{position:absolute;left:12px;right:16px;top:29px;height:5px;border-radius:2px;background:#b9c8db;box-shadow:0 11px 0 #d5deea}
.demo-film-launchpad .film-button{position:absolute;left:12px;bottom:12px;width:45px;height:13px;border-radius:3px;background:#245ee8}
.a-frame .demo-film-skyline{background:#102b48;border-color:#304960}
.demo-film-skyline .film-phone{position:absolute;top:4px;bottom:4px;left:34%;right:34%;overflow:hidden;border:2px solid #071322;border-radius:9px;background:linear-gradient(155deg,#173b64,#286e7e)}
.demo-film-skyline .film-sun{position:absolute;top:13px;right:7px;width:9px;height:9px;border-radius:50%;background:#ffd36e;box-shadow:0 0 9px #ffd36e3d}
.demo-film-skyline .film-temp{position:absolute;top:22px;left:6px;width:13px;height:5px;border-radius:1px;background:#e4f4ff;box-shadow:0 8px 0 #d8efff75}
.demo-film-skyline .film-card{position:absolute;left:5px;right:5px;bottom:9px;height:15px;border:1px solid #cbecff2b;border-radius:4px;background:#c5edff19}