/* Public demo refinements: curated, no uploads, native mobile preview.
   These styles are last in the cascade and do not alter marketing pages. */
.device-preview-trigger {
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:39px;padding:8px 13px;border:1px solid #c8c7c1;
  background:#fffdfa;border-radius:9px;color:#303636;font-size:12px;
  font-weight:700;white-space:nowrap;cursor:pointer;
  transition:background .16s ease,border-color .16s ease;
}
.device-preview-trigger:hover{background:#f0ece5;border-color:#928d85}
.device-preview-trigger span{font-size:20px;line-height:1}
.theme-aiteam .device-preview-trigger{border-color:#beced6;background:#f5f9fa;color:#2c4654}
.device-preview-trigger:focus-visible,.mobile-preview-close:focus-visible,
.demo-scene-choice:focus-visible{outline:3px solid #89b2c6;outline-offset:3px}
.mobile-preview-overlay[hidden]{display:none!important}
.mobile-preview-overlay{
  position:fixed;inset:0;z-index:200;
  display:flex;flex-direction:column;align-items:stretch;
  box-sizing:border-box;overflow:hidden;overscroll-behavior:contain;
  background:radial-gradient(ellipse at 52% 32%,#58636c 0,#2b353b 45%,#192328 95%);
  color:#f6f8f9;
}
.mobile-preview-overlay::before{
  position:absolute;inset:0;content:"";pointer-events:none;
  background:linear-gradient(120deg,rgba(255,255,255,.045),transparent 40%);
}
.mobile-preview-toolbar{
  box-sizing:border-box;display:flex;justify-content:space-between;align-items:center;
  gap:15px;flex:0 0 auto;min-height:74px;
  padding:13px clamp(14px,3vw,45px);
  background:rgba(13,18,22,.5);border-bottom:1px solid #ffffff1c;
  position:relative;z-index:2;
}
.mobile-preview-brand{display:flex;flex-direction:column;gap:3px}
.preview-legend{font-size:9px;letter-spacing:.19em;color:#c1cbd0;font-weight:700}
.mobile-preview-brand strong{font-size:17px;font-weight:650;letter-spacing:-.03em}
.preview-subtext{font-size:11px;color:#b9c6cb;line-height:1.4}
.mobile-preview-close{
  display:flex;align-items:center;justify-content:center;gap:20px;min-height:45px;
  color:#243037;background:#fff;border:1px solid #fff;border-radius:9px;
  padding:10px 16px;font-size:12px;font-weight:750;cursor:pointer;
  white-space:nowrap;
}
.mobile-preview-close span{font-size:14px;color:#70838a}
.mobile-preview-close:hover{background:#e6eef0}
.mobile-preview-stage{
  position:relative;min-height:0;flex:1 1 auto;
  display:flex;align-items:center;justify-content:center;
  box-sizing:border-box;padding:10px 16px;
}
.mobile-preview-device{
  position:relative;isolation:isolate;min-height:0;flex:0 0 auto;
  box-sizing:border-box;
  width:min(396px,calc((100dvh - 145px)*.515),calc(100vw - 42px));
  height:min(850px,calc(100dvh - 145px));
  padding:9px;
  border:2px solid #5b656b;border-radius:46px;
  background:#12181c;
  box-shadow:0 34px 80px #050c0f90,0 6px 22px #0008,inset 0 1px #8e9ba155;
}
.mobile-preview-device:before{
  content:"";position:absolute;inset:5px;border-radius:40px;
  border:1px solid #ffffff0c;pointer-events:none;
}
.mobile-preview-device iframe{
  display:block;box-sizing:border-box;width:100%;height:100%;
  border:0;border-radius:36px;
  background:#f7f5f0;
}
.mobile-preview-notch{
  position:absolute;z-index:5;top:4px;left:50%;transform:translateX(-50%);
  width:90px;height:7px;border-radius:0 0 9px 9px;
  background:#12181c;pointer-events:none;
}
.mobile-preview-hint{
  box-sizing:border-box;flex:0 0 auto;min-height:28px;
  padding:0 10px 10px;text-align:center;
  font-size:10px;font-weight:650;letter-spacing:.15em;color:#aebdc3;
}
body.mobile-preview-active{overflow:hidden!important}
@media(max-width:700px){
  .device-preview-trigger{display:none!important}
  .mobile-preview-overlay{display:none!important}
}
@media(max-width:480px){
  .mobile-preview-toolbar{min-height:60px}
  .preview-subtext{display:none}
}
/* Pre-designed SHIYI demonstration; nothing here represents generated user photos. */
.curated-demo-banner{
  display:flex;gap:11px;align-items:flex-start;
  padding:15px 17px;
  background:#f5f1e9;border:1px solid #e8ded0;
  border-radius:11px;margin-bottom:18px;
  color:#665b4f;font-size:12px;line-height:1.7;
}
.curated-demo-banner svg{flex:none;color:#877866;margin-top:2px}
.curated-demo-banner strong{display:block;color:#35302b;font-size:13px;margin-bottom:2px}
.demo-scene-picker{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;margin:12px 0 22px;
}
.demo-scene-choice{
  position:relative;display:grid;gap:7px;text-align:left;
  min-width:0;min-height:88px;align-content:center;
  padding:13px 14px;border-radius:10px;border:1px solid #e4dcd1;
  color:#696055;background:#fbf9f5;cursor:pointer;
}
.demo-scene-choice strong{font-size:13px;color:#343230;line-height:1.4}
.demo-scene-choice small{font-size:11px;color:#8a8176;line-height:1.5}
.demo-scene-choice[aria-pressed="true"]{
  background:#eae4da;border-color:#9d8f7e;
  box-shadow:0 3px 10px #53443712;
}
.demo-scene-choice[aria-pressed="true"]:after{
  content:"✓";position:absolute;right:10px;top:8px;font-size:13px;color:#645648;
}
.demo-fashion-preview{
  display:grid;grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);
  gap:15px;min-width:0;align-items:stretch;
}
.demo-person-frame{
  position:relative;min-width:0;overflow:hidden;
  border-radius:13px;border:1px solid #ded3c7;
  background:#efe6dc;min-height:300px;
}
.demo-person-frame>img{
  display:block;width:100%;height:100%;min-height:300px;
  object-fit:cover;object-position:77% center;
}
.demo-person-frame .sample-badge{
  position:absolute;top:12px;left:11px;right:11px;
  width:max-content;max-width:calc(100% - 22px);
  padding:7px 9px;background:rgba(255,253,249,.95);
  color:#65584b;border-radius:6px;font-size:10px;font-weight:700;
}
.demo-person-frame:after{
  content:"DEMO MODEL / EDITORIAL SOURCE";
  position:absolute;bottom:12px;left:12px;right:10px;
  font-size:9px;font-weight:750;letter-spacing:.09em;color:#fff;
  text-shadow:0 1px 5px #0009;
}
.demo-outfit-board{
  display:flex;flex-direction:column;
  background:#f8f5ef;border:1px solid #e8dfd4;border-radius:13px;
  padding:17px 13px;min-width:0;
}
.demo-outfit-board .outfit-eyebrow{font-size:10px;color:#9a8775;letter-spacing:.14em;font-weight:700}
.demo-outfit-board h3{font-size:19px;margin:10px 0 5px;line-height:1.4}
.demo-outfit-board>p{font-size:11px;line-height:1.7;color:#81766b;margin:3px 0 12px}
.demo-looks-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px;margin-bottom:12px;
}
.demo-look-piece{
  display:grid;min-width:0;
  padding:7px;border:1px solid #e8e2d8;border-radius:9px;
  background:#fffefb;grid-template-rows:auto auto auto;
}
.demo-look-piece .look-thumb{
  width:100%;height:91px;background:#f4f0e9;
  overflow:hidden;border-radius:7px;
}
.demo-look-piece .look-thumb img{width:100%;height:100%;object-fit:contain}
.demo-look-piece small{font-size:10px;color:#9b9084;margin-top:7px}
.demo-look-piece strong{font-size:11px;color:#514941;margin-top:3px;line-height:1.5;overflow-wrap:anywhere}
.demo-outfit-board .button{min-height:42px;margin-top:auto}
.demo-outfit-board .panel-subtle{font-size:10px;margin:10px 0 0}
.curated-demo-result{
  display:grid;grid-template-columns:50px minmax(0,1fr);
  align-items:start;gap:13px;margin:12px 0;
  padding:13px 15px;background:#eff1ec;
  border:1px solid #d9dfd4;border-radius:10px;
}
.curated-demo-result span:first-child{
  display:grid;place-items:center;background:#e2e7dc;
  width:44px;height:44px;border-radius:50%;
  font-size:21px;color:#4c695b;
}
.curated-demo-result strong{display:block;font-size:14px;margin:3px 0 5px}
.curated-demo-result p{margin:0;color:#647264;font-size:12px;line-height:1.6}
.demo-privacy-foot{
  display:block;border-left:3px solid #b8a58d;padding:10px 12px;margin:17px 0;
  color:#766b5e;background:#f6f3ee;font-size:11px;line-height:1.75;
}
/* Curated sample meal scan with no camera permission required. */
.demo-meal-visual{
  position:relative;border-radius:13px;overflow:hidden;
  border:1px solid #d4e0e6;
  background:linear-gradient(140deg,#eaf1f3,#f8fafb);
  padding:21px;display:grid;grid-template-columns:90px minmax(0,1fr);
  gap:18px;align-items:center;
}
.demo-meal-icon{
  display:grid;place-items:center;font-size:50px;width:90px;height:90px;
  background:#fff;border:1px solid #d9e4e8;border-radius:20px;
  box-shadow:0 9px 20px #21374610;
}
.demo-meal-visual .scan-kicker{display:block;font-size:10px;letter-spacing:.13em;color:#718b9d;font-weight:700}
.demo-meal-visual strong{display:block;margin:7px 0;font-size:21px;color:#263d4a}
.demo-meal-visual small{font-size:12px;line-height:1.65;color:#708595}
.demo-meal-values{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;margin-top:13px;
}
.demo-meal-values>div{
  background:#f6fafb;border:1px solid #dce7eb;border-radius:10px;padding:12px 9px;
}
.demo-meal-values b{font-size:18px;font-variant-numeric:tabular-nums;color:#203747}
.demo-meal-values span{font-size:10px;color:#7b8a93;display:block;margin-top:5px}
@media(max-width:970px){
  .demo-fashion-preview{grid-template-columns:1fr}
  .demo-person-frame{height:300px}
  .demo-person-frame>img{min-height:300px;height:100%;object-position:78% 38%}
  .demo-looks-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .demo-look-piece .look-thumb{height:75px}
}
@media(max-width:700px){
  .demo-scene-picker{gap:5px}
  .demo-scene-choice{min-height:76px;padding:8px 10px}
  .demo-scene-choice strong{font-size:12px}
  .demo-scene-choice small{font-size:10px}
  .demo-person-frame{height:255px;min-height:255px}
  .demo-person-frame>img{min-height:255px}
  .demo-looks-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .demo-meal-visual{grid-template-columns:70px minmax(0,1fr);gap:12px;padding:13px}
  .demo-meal-icon{width:70px;height:70px;font-size:40px}
  .demo-meal-visual strong{font-size:16px}
  .demo-meal-values b{font-size:15px}
}

@media(min-width:701px) and (max-width:910px){.global-header{grid-template-columns:auto auto minmax(0,1fr);gap:8px;padding-inline:13px}.global-header .lab-wordmark{font-size:11px}.global-actions{gap:8px;min-width:0}.global-actions .prototype-pill{display:none}.global-actions .portfolio-link{font-size:11px}.brand-switch a{padding-inline:10px}.device-preview-trigger{padding:7px 9px;font-size:11px}}