:root {
  font-family:var(--hs-font-ui); color:var(--hs-black); background:var(--hs-paper);
  --ease-out:var(--hs-ease);
}
* { box-sizing:border-box; }
html { -webkit-tap-highlight-color:transparent; -webkit-text-size-adjust:100%; overscroll-behavior:none; }
body { margin:0; -webkit-font-smoothing:antialiased; }
button,input,select { font:inherit; }
button,a,summary { touch-action:manipulation; }
button { cursor:pointer; color:inherit; user-select:none; -webkit-user-select:none; }
button:disabled,select:disabled,input:disabled { opacity:.4; cursor:default; }
button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,.import-label:focus-within {
  outline:2px solid var(--hs-blue); outline-offset:3px;
}
button:active,.secondary:active { filter:brightness(.94); }
[hidden] { display:none!important; }
.chrome { position:relative; isolation:isolate; }
.chrome:before {
  content:''; position:absolute; inset:-.5px; border-radius:inherit; padding:1px;
  background:var(--hs-chrome); mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude; -webkit-mask-composite:xor; pointer-events:none; z-index:2;
}
.studio-bar {
  height:calc(80px + env(safe-area-inset-top,0px)); padding:env(safe-area-inset-top,0px) 28px 0;
  display:flex; align-items:center; justify-content:space-between;
}
.brand-chip {
  width:46px; height:46px; border-radius:16px; display:grid; place-items:center;
  background:linear-gradient(145deg,#fff,#f0f0f0); box-shadow:inset 0 1px 1px #fff,0 2px 6px #0000000a;
}
.toolbar { display:flex; align-items:center; gap:10px; }
.quiet {
  border:0; background:transparent; font-size:13px; min-height:40px; padding:0 13px; border-radius:999px;
}
.toolbar .quiet {
  min-height:42px; background:var(--hs-glass-fill); backdrop-filter:blur(12px);
  box-shadow:inset 0 1px 1px #ffffffdf,inset 0 -1px 1px #00000015,0 2px 4px #0000000c;
}
#replay { font-size:25px; width:42px; padding:0; }
#toggle-controls { padding-inline:18px; }
.workspace {
  display:grid; grid-template-columns:minmax(0,1fr) 316px; gap:24px;
  height:calc(100dvh - 80px - env(safe-area-inset-top,0px)); min-height:520px; padding:0 24px 24px;
}
.preview {
  display:grid; place-items:center; min-width:0; min-height:0;
  background:radial-gradient(ellipse at 50% 47%,#fff9,transparent 66%);
}
.device-wrap { width:422px; height:894px; position:relative; flex:none; }
.phone { background:#f6f6f6; }
.screen-content { position:absolute; inset:0; }
.hero { position:absolute; width:402px; height:330px; top:169px; left:0; }
#glass-scene { position:absolute; inset:-140px 0; }
#glass-scene canvas { display:block; width:100%; height:100%; }
.tile-handles { position:absolute; inset:0; pointer-events:none; z-index:2; }
.tile-handle { position:absolute; border:0; padding:0; background:transparent; pointer-events:auto; touch-action:none; cursor:grab; }
.tile-handle[data-dragging] { cursor:grabbing; }
.tile-handle:active { filter:none; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.fallback { position:absolute; inset:0; pointer-events:none; }
.hero[data-renderer=webgl] .fallback { display:none; }
.fallback-tile {
  position:absolute; width:166px; height:166px; border-radius:46px; border:0;
  background:linear-gradient(145deg,#fff,#f1f1f1);
  box-shadow:inset .5px .5px .5px #fff,var(--tile-shadow,2px 14px 16px #00000042);
  display:grid; place-items:center; backdrop-filter:blur(5px);
}
.fallback-tile img { width:62%; height:62%; object-fit:contain; }
.fallback-tile.gmail { left:59px; top:126px; transform:rotate(-8deg); }
.fallback-tile.wabi { right:48px; top:42px; transform:rotate(8deg); }
.fallback-tile.wabi { background:#fff; }
.hero[data-wabi-white-background=false] .fallback-tile.wabi { background:linear-gradient(145deg,#ffffff55,#ffffff12); }
.hero[data-front=gmail] .fallback-tile.gmail,.hero[data-front=wabi] .fallback-tile.wabi { z-index:1; }
#settings>.toggle-row { margin-bottom:12px; }
.screen-copy { position:absolute; left:22px; right:22px; bottom:184px; text-align:center; }
.screen-copy h1 {
  font-family:var(--hs-font-ui); font-size:23px; font-weight:500; line-height:1.25;
  letter-spacing:-.48px; margin:0; color:#1b1b1b;
}
.screen-copy p { font-size:17px; line-height:1.32; color:#666; margin:15px 0 0; letter-spacing:-.2px; }
.screen-actions { position:absolute; left:50px; right:50px; bottom:38px; }
.primary {
  position:relative; height:52px; border-radius:999px; border:1px solid #171717; color:#fff;
  font-weight:500; font-size:15px; background:var(--hs-dark-face); box-shadow:var(--hs-dark-shadow);
}
.screen-actions .primary { width:100%; height:60px; }
.primary:active { background:var(--hs-dark-pressed); filter:none; }
#connect img { position:absolute; left:24px; top:50%; transform:translateY(-50%); }
#connect span { display:block; padding-left:10px; }
.controls {
  align-self:stretch; min-height:0; overflow:auto; overscroll-behavior:contain; scrollbar-width:thin;
  border:1px solid #ffffffda; border-radius:28px; padding:20px 21px 16px;
  background:linear-gradient(145deg,#fffffff2,#f5f5f5e8); backdrop-filter:blur(16px);
  box-shadow:inset 0 1px 1px #fff,inset 0 -1px 1px #00000005,0 3px 6px #00000003,0 16px 40px -20px #0000001f;
}
.panel-title { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.panel-title h2 { font:400 25px/1.2 var(--hs-font-display); letter-spacing:-.5px; margin:0; }
.panel-title .quiet { color:var(--hs-gray); margin-right:-8px; font-size:12px; }
.presets {
  display:grid; grid-template-columns:repeat(4,1fr); padding:4px; gap:2px; border-radius:14px;
  background:#eaeaea; box-shadow:var(--hs-shadow-inset); margin-bottom:21px;
}
.presets button { border:0; border-radius:10px; background:transparent; font-size:12px; min-height:33px; color:#686868; padding:0 2px; }
.presets button[aria-pressed=true] {
  background:linear-gradient(#fff,#f9f9f9); box-shadow:0 1px 2px #0002,0 2px 6px #0000000a,inset 0 1px 0 #fff; color:var(--hs-black);
}
details { border-top:1px solid #0000000e; padding:14px 0 11px; }
summary { font-size:13px; font-weight:500; list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; min-height:28px; user-select:none; }
summary::-webkit-details-marker { display:none; }
summary:after { content:'+'; font-size:18px; font-weight:400; color:#888; }
details[open]>summary:after { content:'−'; }
details[open]>summary { margin-bottom:13px; }
.setting { display:grid; grid-template-columns:1fr 60px; align-items:center; column-gap:12px; margin:11px 0; }
.setting>label { font-size:12px; color:#616161; }
.setting input[type=number] {
  font-size:11px; text-align:right; color:#505050; border:1px solid #ddd; background:#f0f0f0;
  border-radius:8px; padding:5px 7px; width:60px; appearance:textfield; -moz-appearance:textfield;
  font-variant-numeric:tabular-nums; box-shadow:inset 0 1px 3px #00000007,0 1px 0 #fff;
}
.setting input::-webkit-inner-spin-button { appearance:none; }
.setting input[type=range] { grid-column:1/-1; width:100%; height:25px; margin:2px 0 0; accent-color:var(--hs-blue); cursor:ew-resize; appearance:none; background:transparent; }
.setting input[type=range]::-webkit-slider-runnable-track {
  height:5px; border-radius:5px; background:linear-gradient(to right,var(--hs-blue) 0 var(--fill,50%),#dfdfdf var(--fill,50%) 100%);
  box-shadow:inset 0 1px 2px #00000012,0 1px 0 #fff;
}
.setting input[type=range]::-webkit-slider-thumb {
  appearance:none; width:17px; height:17px; margin-top:-6px; border-radius:50%; background:linear-gradient(#fff,#eaeaea);
  box-shadow:0 1px 2px #0003,0 3px 5px #0000000a,inset 0 1px 1px #fff,inset 0 0 0 .5px #fff;
  border:1px solid #c9c9c9;
}
.setting input[type=range]::-moz-range-track { height:5px; border-radius:5px; background:#ddd; }
.setting input[type=range]::-moz-range-progress { height:5px; background:var(--hs-blue); }
.setting input[type=range]::-moz-range-thumb { height:16px; width:16px; background:white; border:1px solid #ccc; border-radius:50%; }
.select-row,.toggle-row { display:flex; justify-content:space-between; align-items:center; font-size:12px; color:#616161; min-height:42px; gap:12px; }
.select-row select { min-width:106px; max-width:160px; border:1px solid #ddd; background:#f0f0f0; border-radius:10px; padding:8px; color:#333; font-size:12px; box-shadow:var(--hs-shadow-inset); }
.color-row { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:42px; font-size:12px; color:#616161; }
.color-fields { display:flex; align-items:center; gap:6px; }
.color-fields input { border:1px solid #ddd; border-radius:8px; background:#f0f0f0; color:#505050; box-shadow:var(--hs-shadow-inset); }
.color-fields input[type=color] { width:34px; height:32px; padding:3px; cursor:pointer; }
.color-fields input[type=text] { width:90px; min-height:32px; padding:5px 7px; font-size:11px; font-variant-numeric:tabular-nums; }
.toggle-row input {
  appearance:none; position:relative; width:36px; height:23px; margin:0; border:1px solid #00000016; border-radius:999px;
  background:#d8d8d8; box-shadow:inset 0 1px 3px #0002; cursor:pointer; flex-shrink:0;
}
.toggle-row input:before {
  content:''; position:absolute; top:2px; left:2px; width:17px; height:17px; border-radius:50%;
  background:linear-gradient(#fff,#e8e8e8); box-shadow:0 1px 3px #0003,inset 0 1px 1px #fff;
}
.toggle-row input:checked { background:var(--hs-blue); }
.toggle-row input:checked:before { transform:translateX(13px); }
.panel-footer { display:flex; flex-wrap:wrap; gap:8px; border-top:1px solid #ddd; padding-top:17px; }
.secondary {
  font-size:12px; min-height:36px; border:1px solid #ddd; border-radius:999px; background:linear-gradient(#fff,#ececec);
  box-shadow:inset 0 1px 1px #fff,0 2px 2px #0000000c,0 5px 10px #00000008; padding:8px 13px; cursor:pointer;
}
#export { background:var(--hs-dark-face); box-shadow:var(--hs-dark-shadow); color:white; border-color:#282828; }
#export:active { background:var(--hs-dark-pressed); filter:none; }
.import-label { display:flex; align-items:center; position:relative; overflow:hidden; }
.import-label input { position:absolute; inset:0; opacity:0; width:100%; cursor:pointer; }
.settings-status { font-size:12px; color:#666; min-height:16px; margin:12px 0 0; line-height:1.4; }
body.controls-hidden .workspace { grid-template-columns:1fr; }
dialog { max-width:330px; width:calc(100% - 40px); padding:28px; border:1px solid white; border-radius:28px; background:var(--hs-paper); box-shadow:0 20px 60px #0002; color:var(--hs-black); }
dialog::backdrop { background:#0003; backdrop-filter:blur(4px); }
dialog h2 { font-size:22px; font-weight:500; margin:0 0 12px; }
dialog p { font-size:15px; color:#666; line-height:1.4; margin:0 0 24px; }
dialog .primary { width:100%; font-size:14px; }
@media(hover:hover) and (pointer:fine) {
  .quiet:hover { background:#00000005; }
  .toolbar .quiet:hover { background:linear-gradient(-75deg,#ffffff80,#ffffffdb,#ffffff80); }
  .primary:hover,#export:hover { background:var(--hs-dark-hover); box-shadow:var(--hs-dark-hover-shadow); }
  .primary:active,#export:active { background:var(--hs-dark-pressed); box-shadow:var(--hs-dark-shadow); }
  .secondary:hover { border-color:#bbb; }
}
@media(max-width:760px) {
  .studio-bar { height:calc(72px + env(safe-area-inset-top,0px)); padding-inline:18px; }
  .workspace { display:flex; flex-direction:column; height:auto; min-height:0; padding:0 14px 18px; gap:22px; }
  .preview { height:calc(100svh - 96px - env(safe-area-inset-top,0px)); min-height:580px; flex:none; }
  .controls { width:min(100%,430px); align-self:center; overflow:visible; padding:22px; padding-bottom:calc(22px + env(safe-area-inset-bottom,0px)); scroll-margin-top:14px; }
  input,select { font-size:16px!important; }
  .setting { grid-template-columns:1fr 74px; }
  .setting input[type=number] { width:74px; }
  .select-row,.toggle-row,summary { min-height:44px; }
  .quiet,.secondary { min-height:44px; }
}
@media(prefers-reduced-transparency:reduce) {
  .fallback-tile,.hero[data-wabi-white-background=false] .fallback-tile.wabi { background:#fff; backdrop-filter:none; }
  .hero #glass-scene { visibility:hidden; }
  .hero .fallback { display:block!important; }
  .controls,.toolbar .quiet { background:#fafafa; backdrop-filter:none; }
  dialog::backdrop { backdrop-filter:none; }
}
@media(forced-colors:active) {
  .phone,.phone-shell,.fallback-tile,.controls,.brand-chip,.quiet { border:1px solid CanvasText; }
  .chrome:before { display:none; }
  .primary,.secondary { border:1px solid ButtonText; }
  .hero #glass-scene { visibility:hidden; }
  .hero .fallback { display:block!important; }
  .fallback-tile,.hero[data-wabi-white-background=false] .fallback-tile.wabi { background:Canvas; backdrop-filter:none; }
  .fallback-tile img,#connect img { forced-color-adjust:none; }
  .toggle-row input { appearance:auto; }
  .toggle-row input:before { display:none; }
}

/* Original Figma mark stays separate from the optional white surface. */
.fallback-tile.wabi canvas{width:100%;height:100%;border-radius:inherit}.brand-chip>img{border-radius:12px}

.fallback-tile.gmail img { width:47%; height:47%; filter:drop-shadow(1px 2px 1px #0003); }

.fine-tune { margin-top:12px; padding-bottom:0; }
.fine-tune>summary { color:#737373; font-weight:400; }
.gyro-controls { margin-top:10px; border-top:1px solid #0000000a; padding-top:6px; }
.gyro-limit { margin-left:5px; color:#888; font-size:11px; }
.gyro-status { margin:6px 0 10px; color:#737373; font-size:12px; line-height:1.45; }
#gyro-recenter { margin:3px 0 8px; }

/* Use the real device viewport for app testing, without simulated hardware. */
#exit-fullscreen {
  position:fixed; z-index:30; top:calc(env(safe-area-inset-top,0px) + 8px); right:calc(env(safe-area-inset-right,0px) + 8px);
  width:44px; height:44px; display:grid; place-items:center; border:0; border-radius:50%;
  background:#ffffff80; color:#737373; padding:0;
}
#mobile-gyro { display:none; }
#fullscreen-gyro {
  position:fixed; z-index:30; top:calc(env(safe-area-inset-top,0px) + 8px); left:calc(env(safe-area-inset-left,0px) + 8px);
  min-width:64px; height:44px; padding:0 14px; border:0; border-radius:999px; background:#ffffff80; color:#616161;
}
#mobile-gyro[aria-pressed=true],#fullscreen-gyro[aria-pressed=true] { background:var(--hs-blue); color:#fff; }
.quick-gyro-status {
  display:none; position:fixed; z-index:31; top:calc(env(safe-area-inset-top,0px) + 74px);
  left:12px; right:12px; width:fit-content; max-width:calc(100% - 24px); margin:0 auto;
  padding:8px 12px; border-radius:12px; background:#fffffff2; box-shadow:0 2px 12px #0000000c;
  font-size:12px; line-height:1.4; color:#616161; text-align:center;
}
@media(max-width:760px),(pointer:coarse) {
  #mobile-gyro { display:block; }
  .toolbar .quiet { min-height:44px; }
  .quick-gyro-status { display:block; }
}
.app-preview .quick-gyro-status { display:block; top:calc(env(safe-area-inset-top,0px) + 60px); }
.app-preview,.app-preview body { height:100%; overflow:hidden; overscroll-behavior:none; background:#f6f6f6; }
.app-preview .studio-bar,.app-preview #controls,.app-preview .device-button,
.app-preview .phone-status,.app-preview .dynamic-island,.app-preview .home-indicator { display:none!important; }
.app-preview .workspace { position:fixed; inset:0; display:block; padding:0; margin:0; height:100%; height:100dvh; min-height:0; }
.app-preview .preview { display:block; width:100%; height:100%; min-height:0; background:#f6f6f6; }
.app-preview .device-wrap { width:100%!important; height:100%!important; }
.app-preview .phone-shell { width:100%; height:100%; padding:0; border:0; border-radius:0; box-shadow:none; background:#f6f6f6; transform:none!important; }
.app-preview .phone-shell .screen { width:100%; height:100%; border-radius:0; box-shadow:none; }
.app-preview .screen-content {
  inset:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);
  display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr) auto clamp(32px,11dvh,110px) auto;
  padding:44px 22px 34px; align-items:center; justify-items:center;
}
.app-preview .hero { position:relative; top:auto; left:auto; grid-row:1; width:402px; height:330px; transform:scale(var(--fullscreen-hero-scale,1)); transform-origin:center; }
.app-preview .screen-copy { position:relative; inset:auto; grid-row:2; width:min(100%,402px); z-index:1; }
.app-preview .screen-actions { position:relative; inset:auto; grid-row:4; width:min(100%,330px); z-index:1; }
.app-preview .screen-actions .primary { min-height:60px; }
@media(max-width:420px) {
  .studio-bar { padding-inline:12px; }
  .toolbar { gap:6px; }
  .toolbar .quiet { padding-inline:10px; font-size:12px; }
  .toolbar #replay { display:none; }
  #toggle-controls { padding-inline:10px; }
  .brand-chip { width:40px; height:40px; }
  .brand-chip>img { width:38px; height:38px; }
}
@media(orientation:landscape) and (max-height:540px) {
  .app-preview .screen-content { grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:1fr auto; gap:24px; padding:28px 32px 38px; }
  .app-preview .hero { grid-column:1; grid-row:1/-1; }
  .app-preview .screen-copy { grid-column:2; grid-row:1; align-self:end; }
  .app-preview .screen-actions { grid-column:2; grid-row:2; align-self:start; }
}
@media(forced-colors:active) {
  #exit-fullscreen,#fullscreen-gyro { background:Canvas; color:ButtonText; border:1px solid ButtonText; }
  #mobile-gyro[aria-pressed=true],#fullscreen-gyro[aria-pressed=true] { background:Highlight; color:HighlightText; }
}