*{box-sizing:border-box}body{margin:0;background:#101216;color:#f4f5f7;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:16px}button,input{font:inherit}button,.upload{cursor:pointer}button:focus-visible,input:focus-visible,.upload:focus-within{outline:3px solid #79baff;outline-offset:4px}main{max-width:1260px;margin:auto;padding:42px 36px 20px;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px 32px}header{grid-column:1/-1}.eyebrow{font-size:12px;letter-spacing:2px;color:#9299a7}h1{font-size:clamp(28px,3.5vw,44px);font-weight:550;letter-spacing:-1.5px;margin:12px 0}h1 span{font-weight:350;color:#9ba3b3}header p{color:#a6adba;margin:0 0 8px}.stage{height:540px;position:relative;border-radius:28px;overflow:hidden;background:#244fa8;border:1px solid #ffffff1a}.background{position:absolute;inset:0;background:radial-gradient(ellipse at 18% 20%,#ffd484 0%,transparent 43%),radial-gradient(ellipse at 80% 85%,#fa7792 0%,transparent 47%),repeating-linear-gradient(125deg,transparent 0 72px,#ffffff2a 73px 76px,transparent 77px 145px),linear-gradient(140deg,#f29055,#267db3 48%,#392b8b);background-size:cover;background-position:center}.background.grid{background:repeating-linear-gradient(0deg,transparent 0 29px,#fff5 30px 31px),repeating-linear-gradient(90deg,transparent 0 29px,#fff5 30px 31px),linear-gradient(130deg,#328ac0,#332b70)}.scene-label{position:absolute;left:26px;top:24px;font-size:12px;letter-spacing:1.3px;text-shadow:0 1px 12px #0004}.scene-label span{display:block;font-size:14px;letter-spacing:0;margin-top:6px;opacity:.8}.center{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}.glass{position:absolute;left:50%;top:50%;width:24px;height:24px;margin-left:-12px;margin-top:-12px;border-radius:50%;opacity:0;overflow:hidden;pointer-events:none;background:linear-gradient(130deg,#ffffff72,#ffffff28 45%,#ffffff4d);border:1px solid #ffffffa8;box-shadow:inset 0 1px 1px #fff9,inset 0 -1px 2px #fff4,0 18px 50px #17244435;backdrop-filter:blur(24px) saturate(1.55);-webkit-backdrop-filter:blur(24px) saturate(1.55);color:#14253b}.content{position:absolute;width:300px;height:270px;left:50%;top:50%;margin-left:-150px;margin-top:-135px;padding:19px 14px;opacity:0}.window-title{display:flex;align-items:center;justify-content:space-between;font-weight:650;font-size:16px;padding:0 5px 12px}.window-title button{border:0;background:transparent;font-size:25px;color:inherit;width:28px;height:28px}.option{width:100%;display:flex;align-items:center;text-align:left;gap:12px;border:0;border-radius:14px;background:transparent;color:inherit;padding:11px 10px;min-height:59px}.option.selected{background:#ffffff65;box-shadow:0 1px 4px #34455a0a}.option:hover{background:#ffffff80}.option i{font-style:normal;font-size:22px;color:#26496a;width:27px;text-align:center}.option span{font-size:15px;font-weight:550}.option small{display:block;font-size:12px;font-weight:400;opacity:.75;margin-top:2px}.option b{margin-left:auto;color:#1759a8;font-size:16px}.stage-bottom{position:absolute;bottom:24px;left:26px;right:26px;display:flex;justify-content:space-between;align-items:center;gap:12px}#state{font-size:13px;text-shadow:0 1px 8px #0005}.stage-button{border:1px solid #ffffff80;border-radius:30px;background:#ffffffde;color:#25354b;padding:11px 17px;font-size:14px;box-shadow:0 3px 12px #0001}.stage-button span{margin-left:12px}.controls{padding:8px 0}.control-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}h2{font-size:17px;margin:0;font-weight:550}.reset{background:none;border:0;color:#aeb7c6;font-size:13px}.controls>label{display:block;font-size:14px;margin:22px 0}.controls output{float:right;color:#aab8cb;font-variant-numeric:tabular-nums}input[type=range]{display:block;width:100%;margin:13px 0 0;accent-color:#93bcff;height:16px;cursor:pointer}.hint,.footnote{font-size:13px;line-height:1.5;color:#8892a3}.actions{display:flex;gap:8px;flex-wrap:wrap}.actions button,.upload{background:#242932;color:#d7dfea;border:1px solid #363e4b;border-radius:10px;padding:10px 12px;font-size:13px}.actions .primary{background:#d8e7ff;color:#172b49;border-color:#d8e7ff}.actions .active{border-color:#8caedb;background:#2b3b52}.upload input{display:none}.background-controls{border-top:1px solid #2b303a;margin-top:25px;padding-top:23px}.background-controls h2{margin-bottom:14px}footer{grid-column:1/-1;font-size:12px;color:#6e7888}@media(max-width:800px){main{padding:24px 16px;grid-template-columns:1fr;gap:22px}header p{font-size:14px}.stage{height:420px}.controls{max-width:560px;width:100%;margin:auto}.control-heading{margin-bottom:12px}.controls>label{margin:17px 0}h1{letter-spacing:-.8px}.stage-bottom{left:18px;right:18px}#state{max-width:125px}.scene-label{left:20px}.stage-button{padding:11px 13px}}
.catalog{grid-column:1/-1;max-width:760px}.catalog>label{color:#aab5c7;font-size:14px}.catalog-row{display:flex;gap:10px;margin-top:10px}.catalog-row button{border:1px solid #3b4554;background:#222833;color:#f4f7ff;border-radius:12px;font-size:25px;width:44px;flex-shrink:0}.catalog p{font-size:15px;line-height:1.5;margin:12px 0 6px;color:#c2ccdb}.catalog>span{font-size:13px;color:#8d9aaf}select{font:inherit;background:#222833;color:#e6edfa;border:1px solid #3b4554;border-radius:12px;padding:12px;width:100%;min-width:0;cursor:pointer}.controls select{display:block;margin-top:12px;font-size:14px}.stage{position:sticky;top:20px}.controls{max-height:none}#veil{position:absolute;inset:0;pointer-events:none;background:#0b1020;opacity:0}.glass{will-change:width,height,opacity;transform-origin:center}.glass.dark{color:#f4f7ff}.glass.dark .option i{color:#c0d7f6}.glass.dark .option.selected{background:#ffffff20}.glass.dark .option:hover{background:#ffffff30}.glass.dark .option b{color:#9fc9ff}.glass.dark .option{color:inherit}.export{margin-top:22px}textarea{width:100%;min-height:140px;background:#1c222c;color:#dce9fa;border:1px solid #43526a;border-radius:10px;padding:12px;margin-top:12px;font:13px/1.6 monospace}footer{line-height:1.8}footer a{color:#99b3d7}.controls label.disabled{opacity:.45}.controls input:disabled{cursor:default}.scene-label #effectCode{font-size:12px;letter-spacing:1.2px}#support:empty{display:none}@media(max-width:800px){.stage{position:relative;top:auto;height:420px}.catalog{margin-top:-6px}.catalog-row select{font-size:15px}.catalog p{font-size:14px}main{gap:18px}.controls{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}.controls>label{min-width:0}.controls>.control-heading,.controls>.hint,.controls>.actions,.controls>.background-controls,.controls>.footnote,.controls>textarea{grid-column:1/-1}.controls>label:has(#material),.controls>label:has(#progress){grid-column:1/-1}.controls output{float:none;display:block;margin-top:6px}.controls input[type=range]{margin-top:9px}.controls>label{line-height:1.4}}@media(max-width:360px){.controls{display:block}}

.blur-copy{pointer-events:none!important;user-select:none}.blur-copy[hidden]{display:none}

.lens-canvas{position:absolute;left:50%;top:50%;pointer-events:none}.lens-canvas[hidden]{display:none}

.controls>.timing-label{grid-column:1/-1}
#copyCode{white-space:nowrap}


/* WINDOWS LAB */
[hidden]{display:none!important}.lab-tabs{grid-column:1/-1;display:flex;gap:8px}.lab-tabs button{border:1px solid #3b4554;background:#222833;color:#ccd7e8;border-radius:24px;padding:12px 20px}.lab-tabs [aria-pressed=true]{background:#d8e7ff;color:#172b49}#windowsLab{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:32px}.window-workspace{position:sticky;top:12px;align-self:start;min-width:0}.phone-caption{text-align:center;font-size:12px;color:#9aa7ba;margin-bottom:12px}.phone-fit{width:440px;height:956px;position:relative;margin:auto}.phone{width:440px;height:956px;position:absolute;left:0;top:0;transform-origin:top left;border-radius:48px;overflow:auto;scrollbar-width:none;color:#173250;background:radial-gradient(ellipse at 10% 10%,#ffcc81,transparent 46%),radial-gradient(ellipse at 95% 85%,#9d9cea,transparent 52%),repeating-linear-gradient(135deg,transparent 0 54px,#fff4 55px 57px,transparent 58px 110px),linear-gradient(150deg,#ceab94,#61a9c0 50%,#355c93);box-shadow:0 0 0 1px #ffffff40,0 24px 70px #0005}.phone-top{display:flex;justify-content:space-between;padding:22px 30px;font-size:14px;font-weight:650}.window-board{position:relative;margin:0 18px 48px;min-height:720px}.phone-home{position:absolute;bottom:9px;width:140px;height:5px;border-radius:4px;background:#17325080;left:150px;pointer-events:none}.window-controls>label{display:block;font-size:14px;margin:0 0 24px}.window-controls output{float:right;color:#aab8cb}.window-controls select{margin-top:10px;font-size:14px}.window-controls #winStatus{font-size:14px;color:#abc6ea;min-height:22px}.size-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0}.size-actions button{padding:12px 6px;border:1px solid #43526a;border-radius:12px;background:#242e3d;color:#dbe8fc;font-size:14px}.size-actions [aria-pressed=true]{background:#d8e7ff;color:#172b49}.window-controls>.actions{margin-bottom:24px}@media(max-width:800px){#windowsLab{grid-template-columns:1fr;gap:20px}.window-workspace{position:relative;top:0}.window-controls{width:100%;max-width:560px;margin:auto}.phone-fit{max-width:100%}.lab-tabs button{padding:11px 15px;font-size:14px}}
.window-controls button:disabled{opacity:.45;cursor:default}
/* Window gesture controls */


/* WINDOWS LAB — immersive test mode */

.win-exit-fullscreen{
  position:fixed;
  top:max(10px,env(safe-area-inset-top));
  left:max(10px,env(safe-area-inset-left));
  z-index:2200;
  border:1px solid rgba(255,255,255,.74);
  border-radius:999px;
  background:rgba(18,25,35,.72);
  color:#fff;
  padding:10px 14px;
  font-size:14px;
  font-weight:650;
  line-height:1;
  box-shadow:0 6px 22px rgba(0,0,0,.22);
  backdrop-filter:blur(18px) saturate(1.25);
  -webkit-backdrop-filter:blur(18px) saturate(1.25);
}
body.windows-test-fullscreen{
  overflow:hidden;
  background:#101216;
}
body.windows-test-fullscreen main{
  max-width:none;
  margin:0;
  padding:0;
  display:block;
}
body.windows-test-fullscreen main>header,
body.windows-test-fullscreen main>.lab-tabs,
body.windows-test-fullscreen #windowsLab>.window-controls,
body.windows-test-fullscreen #windowsLab .phone-caption{
  display:none!important;
}
body.windows-test-fullscreen #windowsLab{
  display:block!important;
  position:fixed;
  inset:0;
  z-index:2000;
  overflow:auto;
  background:#101216;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
body.windows-test-fullscreen #windowsLab>.window-workspace{
  position:relative;
  top:auto;
  width:100%;
  min-height:100dvh;
  margin:0;
  padding:0;
}
body.windows-test-fullscreen #windowsLab .phone-fit{
  margin:0 auto;
  max-width:none;
}
body.windows-test-fullscreen #windowsLab .phone{
  box-shadow:none;
}
body.windows-test-fullscreen #windowsLab .phone-top{
  padding-top:max(22px,calc(env(safe-area-inset-top) + 10px));
}


/* MOI DELA TYPOGRAPHY V1 — typography only, no window geometry changes. */
.demo-window,
.demo-window button,
.demo-window input,
.demo-window select{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue","Segoe UI",Arial,sans-serif!important;
  font-kerning:normal;
  text-rendering:optimizeLegibility;
}
.demo-window .window-name{
  font-size:14px!important;
  font-weight:600!important;
  line-height:1.18!important;
  letter-spacing:0!important;
}
.demo-window.is-bar .window-name{
  font-size:14px!important;
  font-weight:600!important;
  line-height:1.18!important;
}
.demo-window.is-root-level.is-half .window-name,
.demo-window.is-root-level.is-window .window-name{
  font-size:14px!important;
  font-weight:600!important;
  line-height:1.18!important;
}
.demo-window.is-screen .window-name{
  font-size:22px!important;
  font-weight:600!important;
  line-height:1.15!important;
  letter-spacing:0!important;
}
.demo-window .window-detail{
  font-size:12px!important;
  font-weight:400!important;
  line-height:1.28!important;
  letter-spacing:0!important;
}
.demo-window .window-size{
  font-size:11px!important;
  font-weight:400!important;
  line-height:1.2!important;
  letter-spacing:0!important;
}
.demo-window .window-parent{
  font-size:11px!important;
  font-weight:400!important;
  line-height:1.15!important;
  letter-spacing:0!important;
}


/* TYPOGRAPHY TUNER */


.type-summary{
  margin:0 0 18px;
  padding:10px 12px;
  border:1px solid #343e4d;
  border-radius:10px;
  background:#1b212b;
  color:#aebdd2;
  font:12px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace;
  white-space:normal;
}

/* Dynamic typography variables. */
#phone{
  --lab-font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue","Segoe UI",Arial,sans-serif;
  --lab-title-size:14px;
  --lab-title-weight:600;
  --lab-title-line:1.18;
  --lab-title-letter:0px;
  --lab-screen-title-size:22px;
  --lab-detail-size:12px;
  --lab-detail-weight:400;
  --lab-detail-line:1.28;
  --lab-meta-size:11px;
  --lab-meta-weight:400;
  --lab-meta-line:1.20;
  --lab-number-size:13px;
  --lab-number-weight:600;
}
.demo-window,
.demo-window button,
.demo-window input,
.demo-window select{
  font-family:var(--lab-font-family)!important;
}
.demo-window .window-name,
.demo-window.is-bar .window-name,
.demo-window.is-root-level.is-half .window-name,
.demo-window.is-root-level.is-window .window-name{
  font-size:var(--lab-title-size)!important;
  font-weight:var(--lab-title-weight)!important;
  line-height:var(--lab-title-line)!important;
  letter-spacing:var(--lab-title-letter)!important;
}
.demo-window.is-screen .window-name{
  font-size:var(--lab-screen-title-size)!important;
  font-weight:var(--lab-title-weight)!important;
  line-height:var(--lab-title-line)!important;
  letter-spacing:var(--lab-title-letter)!important;
}
.demo-window .window-detail{
  font-size:var(--lab-detail-size)!important;
  font-weight:var(--lab-detail-weight)!important;
  line-height:var(--lab-detail-line)!important;
}
.demo-window .window-size,
.demo-window .window-parent{
  font-size:var(--lab-meta-size)!important;
  font-weight:var(--lab-meta-weight)!important;
  line-height:var(--lab-meta-line)!important;
}


/* PROJECT CARD SCREEN V1 — browser implementation inside fully opened laboratory window.
   Visual language follows the supplied iOS Settings/iCloud references: grouped white
   surfaces, light system background, compact secondary text and native-like switches. */
.phone.card-screen-active{
  background:#f2f2f7!important;
  color:#000;
}
.phone.card-screen-active .phone-top{
  color:#000;
  background:#f2f2f7;
}
.phone.card-screen-active .phone-top span:nth-child(2){visibility:hidden}
.phone.card-screen-active .phone-home{background:#000}


.screen-card-content{
  position:absolute;
  inset:0;
  z-index:10;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding:10px 10px 30px;
  background:#f2f2f7;
  color:#000;
  cursor:default;
  user-select:none;
  scrollbar-width:none;
}
.screen-card-content::-webkit-scrollbar{display:none}
.screen-card-path{
  min-height:42px;
  padding:7px 8px 7px 48px;
  display:flex;
  align-items:center;
  gap:5px;
  overflow:hidden;
  white-space:nowrap;
  font-size:10.5px;
  line-height:1.2;
  color:#8e8e93;
}
.screen-path-link{
  appearance:none;
  border:0;
  background:transparent;
  color:#74747a;
  padding:4px 0;
  font-size:inherit;
  cursor:pointer;
}
.screen-path-current{
  overflow:hidden;
  text-overflow:ellipsis;
  color:#a0a0a6;
}
.screen-path-sep{color:#b8b8bd}

.screen-card-hero{
  text-align:center;
  padding:4px 18px 16px;
}
.screen-card-avatar{
  width:82px;
  height:82px;
  border-radius:50%;
  margin:0 auto 12px;
}
.screen-card-title{
  margin:0;
  font-size:24px;
  line-height:1.12;
  font-weight:700;
  letter-spacing:-.35px;
  color:#000;
}
.screen-card-detail{
  margin-top:4px;
  font-size:14px;
  line-height:1.25;
  color:#8e8e93;
}
.screen-card-meaning{
  max-width:330px;
  margin:8px auto 0;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
  font-size:12px;
  line-height:1.35;
  color:#8e8e93;
}

.screen-card-group{
  margin:10px 0;
  overflow:hidden;
  border-radius:20px;
  background:#fff;
  box-shadow:0 0 0 .5px rgba(0,0,0,.015);
}
.screen-group-heading{
  min-height:46px;
  padding:12px 16px 8px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font-size:16px;
  color:#000;
}
.screen-group-heading strong{font-weight:600}
.screen-group-heading span{font-size:12px;color:#8e8e93}

.screen-inside-strip{
  display:flex;
  gap:11px;
  overflow-x:auto;
  padding:4px 13px 14px;
  scroll-snap-type:x proximity;
  scrollbar-width:none;
}
.screen-inside-strip::-webkit-scrollbar{display:none}
.screen-inside-item{
  position:relative;
  flex:0 0 62px;
  width:62px;
  min-height:78px;
  padding:0;
  border:0;
  background:transparent;
  color:#000;
  text-align:center;
  cursor:pointer;
  scroll-snap-align:start;
}
.screen-inside-circle{
  display:block;
  width:50px;
  height:50px;
  margin:0 auto 6px;
  border-radius:50%;
}
.screen-inside-label{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  font-size:10.5px;
  line-height:1.08;
}
.screen-inside-count{
  position:absolute;
  top:-2px;
  right:1px;
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:9px;
  background:#e5e5ea;
  color:#6d6d72;
  font-size:9px;
  line-height:18px;
  font-weight:600;
}

.screen-section-row,
.screen-result-row{
  width:100%;
  min-height:56px;
  padding:10px 16px;
  display:flex;
  align-items:center;
  gap:12px;
  border:0;
  background:transparent;
  color:#000;
  text-align:left;
}
.screen-section-row{cursor:pointer}
.screen-section-row + .screen-section-row,
.screen-result-row + .screen-section-row,
.screen-section-row + .screen-result-row{
  border-top:.5px solid #d9d9dd;
}
.screen-section-copy{
  min-width:0;
  flex:1;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.screen-section-title{
  font-size:16px;
  line-height:1.15;
  font-weight:400;
}
.screen-section-summary{
  display:block;
  font-size:11.5px;
  line-height:1.2;
  font-weight:400;
  color:#8e8e93;
  overflow:hidden;
  text-overflow:ellipsis;
}
.screen-section-value{
  max-width:42%;
  margin-left:auto;
  color:#8e8e93;
  font-size:14px;
  line-height:1.15;
  text-align:right;
}
.screen-section-chevron{
  flex:0 0 auto;
  color:#c7c7cc;
  font-size:27px;
  line-height:1;
}
.screen-card-group .screen-section-row:not(:has(.screen-section-chevron)){cursor:default}

.screen-ios-switch{
  position:relative;
  flex:0 0 51px;
  width:51px;
  height:31px;
}
.screen-ios-switch input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.screen-ios-slider{
  position:absolute;
  inset:0;
  border-radius:999px;
  background:#e9e9ea;
  transition:background .18s ease;
}
.screen-ios-slider::after{
  content:"";
  position:absolute;
  top:2px;
  left:2px;
  width:27px;
  height:27px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
  transition:transform .18s ease;
}
.screen-ios-switch input:checked + .screen-ios-slider{background:#34c759}
.screen-ios-switch input:checked + .screen-ios-slider::after{transform:translateX(20px)}
.screen-trigger-row[hidden]{display:none!important}

.screen-card-subview{
  position:absolute;
  inset:0;
  z-index:60;
  overflow-y:auto;
  background:#f2f2f7;
  color:#000;
  padding:10px 10px 30px;
  cursor:default;
  -webkit-overflow-scrolling:touch;
}
.screen-subview-top{
  min-height:48px;
  display:grid;
  grid-template-columns:44px 1fr 44px;
  align-items:center;
  margin-bottom:10px;
}
.screen-subview-back{
  width:42px;
  height:42px;
  border:0;
  border-radius:50%;
  background:#fff;
  color:#111;
  font-size:30px;
  line-height:1;
  cursor:pointer;
}
.screen-subview-title{
  grid-column:2;
  margin:0;
  text-align:center;
  font-size:18px;
  line-height:1.15;
  font-weight:600;
}
.screen-subview-body{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.screen-info-row,
.screen-material-card,
.screen-empty-logic{
  border-radius:20px;
  background:#fff;
}
.screen-info-row{
  min-height:64px;
  padding:13px 16px;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.screen-info-row strong{font-size:16px;font-weight:400}
.screen-info-row small{font-size:12px;line-height:1.3;color:#8e8e93}
.screen-subview-hint{
  margin:0 4px 2px;
  color:#8e8e93;
  font-size:11.5px;
  line-height:1.35;
}
.screen-empty-logic{
  padding:20px 16px;
  text-align:center;
  color:#8e8e93;
}
.screen-empty-node{
  display:inline-block;
  width:34px;height:34px;border-radius:50%;
  background:#e5e5ea;
  vertical-align:middle;
}
.screen-empty-line{
  display:inline-block;
  width:70px;height:1px;
  margin:0 8px;
  background:#c7c7cc;
  vertical-align:middle;
}
.screen-empty-logic p{margin:14px 0 0;font-size:11.5px;line-height:1.35}

.screen-material-demo{display:flex;flex-direction:column;gap:10px}
.screen-material-card{
  padding:12px;
  display:flex;
  align-items:center;
  gap:12px;
}
.screen-media-video{
  position:relative;
  flex:0 0 118px;
  width:118px;height:66px;
  border-radius:12px;
  background:linear-gradient(140deg,#b8c2cf,#707b89);
  overflow:hidden;
}
.screen-media-play{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:32px;height:32px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(0,0,0,.58);color:#fff;font-size:12px;
}
.screen-media-duration{
  position:absolute;right:5px;bottom:4px;
  padding:2px 4px;border-radius:5px;
  background:rgba(0,0,0,.58);color:#fff;font-size:9px;
}
.screen-media-copy{min-width:0;display:flex;flex-direction:column;gap:4px}
.screen-media-copy strong{font-size:14px;font-weight:500}
.screen-media-copy small{font-size:11px;line-height:1.25;color:#8e8e93}
.screen-photo-strip{display:grid;grid-template-columns:repeat(3,34px);gap:3px;flex:0 0 auto}
.screen-photo-demo{
  width:34px;height:52px;border-radius:8px;
  background:linear-gradient(150deg,#d8dde4,#9da8b4);
}
.screen-file-icon{
  flex:0 0 48px;
  width:48px;height:54px;border-radius:10px;
  display:grid;place-items:center;
  background:#ff3b30;color:#fff;font-size:11px;font-weight:700;
}


/* LAB CONTROL GROUPS V1 */
.window-controls{min-width:0}
.window-controls #winStatus{margin:0 0 12px;font-size:13px;color:#a9bad0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lab-control-group{margin:0 0 10px;border:1px solid #333b48;border-radius:14px;background:#171c24;overflow:hidden}
.lab-control-group>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 15px;color:#e1e8f2;font-size:14px;font-weight:650;cursor:pointer;user-select:none}
.lab-control-group>summary::-webkit-details-marker{display:none}
.lab-control-group .group-arrow{font-size:23px;line-height:1;color:#8998ad;transform:rotate(0deg);transition:transform 160ms ease}
.lab-control-group[open] .group-arrow{transform:rotate(90deg)}
.lab-control-group[open]>summary{border-bottom:1px solid #2b3340}
.lab-control-body{padding:4px 15px 14px}
.lab-control-body>label{display:block;font-size:13px;margin:16px 0;color:#d6dfeb}
.lab-control-body output{float:right;color:#9dabc0;font-variant-numeric:tabular-nums}
.lab-control-body select{margin-top:9px;font-size:13px}
.lab-control-body h3{margin:20px 0 7px;font-size:12px;font-weight:650;color:#9facbe;text-transform:uppercase;letter-spacing:.45px}
.lab-control-body .compact-heading{margin:22px 0 8px}
.lab-control-body .compact-heading h3{margin:0}
.lab-control-body .actions{margin:10px 0 16px}
.lab-control-body .hint{margin:6px 0 14px;font-size:11.5px;line-height:1.4}
.lab-control-body .type-summary{margin:8px 0 16px;font-size:10.5px;line-height:1.4}
.lab-control-body .color-control{display:flex;align-items:center;justify-content:space-between;gap:14px}
.lab-control-body .color-control input[type=color]{width:54px;height:32px;padding:2px;border:1px solid #3b4554;border-radius:8px;background:#222833}
.saved-preset-panel{margin-top:20px;padding-top:14px;border-top:1px solid #2b3340}

.phone.lab-gray-workspace{background:rgb(var(--lab-workspace-gray,235),var(--lab-workspace-gray,235),var(--lab-workspace-gray,235))!important}


@media(max-width:800px){.lab-control-group{border-radius:12px}.lab-control-group>summary{padding:13px 14px}.lab-control-body{padding-left:14px;padding-right:14px}}


/* PROJECT CARD SCREEN LOCK V2 */
/* Full project card is intentionally isolated from laboratory window-surface tuners. */
.phone.card-screen-active,
.phone.card-screen-active.lab-gray-workspace{
  background:#f2f2f7!important;
  color:#000!important;
}
.phone.card-screen-active .phone-top{
  background:#f2f2f7!important;
  color:#000!important;
}
.demo-window.is-screen{
  background:#f2f2f7!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  border:0!important;
  box-shadow:none!important;
}
.demo-window.is-screen>.screen-card-content:not([hidden]){
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  position:absolute!important;
  inset:0!important;
  z-index:30!important;
  background:#f2f2f7!important;
  color:#000!important;
}
.demo-window.is-screen>.screen-card-content .screen-card-group{background:#fff!important}
/* RANDOM PICTOGRAM PREVIEW V1 */
/* Visual-only preview: glyph assignment is deterministic but intentionally unrelated to task meaning. */
.window-glyph{
  --icon-main:#5b6571;
  --icon-base:#5b6571;
  --icon-base-light:#7a8490;
  --icon-base-dark:#46505b;
  --icon-light:#f4f7fa;
  --icon-light-mid:#c9d0d8;
  --icon-accent:#38bdf8;
  --icon-accent-light:#8eeaff;
  --icon-accent-dark:#1485d0;
  display:grid;
  place-items:center;
  width:100%;
  height:100%;
  min-width:0;
  min-height:0;
  pointer-events:none;
  line-height:0;
}
.window-glyph svg{display:block;width:78%;height:78%;overflow:visible}
.window-glyph svg .micro-detail{display:none!important}
.screen-card-avatar,.screen-inside-circle{display:grid!important;place-items:center!important}
.screen-card-avatar>.window-glyph,.screen-inside-circle>.window-glyph{width:100%;height:100%}
.screen-card-avatar>.window-glyph svg{width:76%;height:76%}
.screen-inside-circle>.window-glyph svg{width:78%;height:78%}


/* WORKSPACE PHOTO BACKGROUND */
.workspace-selection-technical{display:none!important}
.phone.lab-photo-workspace{
  background-image:var(--lab-workspace-photo)!important;
  background-size:cover!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
}
.workspace-photo-upload input[type=file]{
  display:block;
  width:100%;
  margin-top:7px;
  padding:8px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:9px;
  background:rgba(255,255,255,.05);
  color:#dfe8f5;
}
.workspace-photo-upload .hint{display:block;margin-top:6px}