:root{
    --ui:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    --display:"Instrument Serif",Georgia,serif;
    --ink:#1a1714;
    --glass:rgba(22,19,16,.72);
    --glass-line:rgba(255,255,255,.14);
    --chip:rgba(255,255,255,.08);
    --chip-on:rgba(255,255,255,.92);
    --text-on-glass:#f4f1ea;
    --muted-on-glass:rgba(244,241,234,.55);
    --accent:#e8855b;

    /* screen cutout measured from hand-ios.png (768×1257, transparent screen hole) */
    --imgW:768; --imgH:1257;
    --scrL:285px; --scrT:211px; --scrW:373px; --scrH:812px;
    --screen-radius:50px;  /* matches the iPhone screen corner in the photo */
  }
  *{box-sizing:border-box;}
  html,body{height:100%;}
  body{margin:0;font-family:var(--ui);color:var(--ink);overflow:hidden;-webkit-font-smoothing:antialiased;}

  /* ---------- SCENE ---------- */
  #scene{position:fixed;inset:0;z-index:0;transition:background .6s ease;background-size:cover;background-position:center;}
  .scene-studio{background:#dfe3e1;}
  .scene-living{background:#fed7aa;}
  .scene-desk{background:#bfdbfe;}

  /* ---------- DEVICE UNIT ---------- */
  #deviceUnit{
    position:fixed; left:0; top:0;
    width:calc(var(--imgW)*1px); height:calc(var(--imgH)*1px);
    transform-origin:0 0; will-change:transform; z-index:2;
  }
  .mock{
    position:absolute; inset:0; width:100%; height:100%;
    z-index:3; pointer-events:none; user-select:none; -webkit-user-drag:none;
    object-fit:contain;
  }
  .viewport{
    position:absolute;
    left:var(--scrL); top:var(--scrT); width:var(--scrW); height:var(--scrH);
    z-index:1; overflow:hidden; border-radius:50px; background:#0b0b0d;
  }
  #frame{
    border:0; display:block; background:#fff;
    width:375px;                /* iframe logical width */
    transform-origin:top left;  /* scale + border-radius set by JS */
  }
  body.remote-frame .viewport{background:#fff;}

  /* iPhone status bar overlay — sits at the top of the screen hole, masked by the
     hand bezel (z-index below .mock). Toggled via body.statusbar-on. */
  .statusbar{
    position:absolute;
    left:var(--scrL); top:var(--scrT); width:var(--scrW);
    height:auto; z-index:2; display:none;
    pointer-events:none; user-select:none; -webkit-user-drag:none;
  }
  /* show the variant that matches the active device */
  body.statusbar-on .statusbar-ios{display:block;}
  body.statusbar-on.android .statusbar-ios{display:none;}
  body.statusbar-on.android .statusbar-android{display:block;}
  /* Status bar content (clock, signal, wifi, battery) follows whatever sits behind it
     on the phone screen: dark ink over light content, white ink over dark content.
     JS toggles body.sb-on-dark from the live pixel/colour behind the bar. Notch/camera
     stay black always. */
  .statusbar .sb-content{color:#000; transition:color .3s ease;}
  body.sb-on-dark .statusbar .sb-content{color:#fff;}

  /* bottom-right menu — device switch + status bar in one glass bar */
  .right-dock{
    position:fixed; z-index:30; right:22px; bottom:22px;
    display:inline-flex; align-items:center; gap:5px; padding:6px;
    border:1px solid var(--glass-line); border-radius:16px;
    background:var(--glass); backdrop-filter:blur(16px) saturate(140%);
    box-shadow:0 18px 40px -12px rgba(0,0,0,.5);
    transition:opacity .35s ease;
  }
  .right-dock .sep{height:22px;}

  .device-seg{position:relative; display:inline-flex; gap:0;}
  .seg-btn{
    position:relative; z-index:1;
    appearance:none; border:0; background:transparent; cursor:pointer;
    font-family:var(--ui); font-size:12.5px; font-weight:500;
    height:32px; width:64px; padding:0; border-radius:10px;
    color:var(--muted-on-glass); transition:color .2s ease;
  }
  .seg-btn:hover{color:var(--text-on-glass);}
  .seg-btn.is-active{color:var(--text-on-glass);}
  /* sliding indicator that glides between iOS / Android */
  .seg-thumb{
    position:absolute; z-index:0; top:0; left:0;
    width:64px; height:32px; border-radius:10px;
    background:rgba(255,255,255,.18);
    transition:transform .34s cubic-bezier(.22,1,.36,1);
    pointer-events:none;
  }
  .device-seg.is-android .seg-thumb{transform:translateX(64px);}

  .statusbar-toggle{
    display:inline-flex; align-items:center; gap:9px;
    height:32px; padding:0 8px 0 11px; border:0; border-radius:10px;
    background:transparent; cursor:pointer;
    color:var(--text-on-glass); font-family:var(--ui); font-size:12.5px; font-weight:500;
    transition:background .15s ease;
  }
  .statusbar-toggle:hover{background:rgba(255,255,255,.10);}
  .statusbar-toggle .sw{
    width:32px; height:18px; border-radius:9px; flex:none;
    background:rgba(255,255,255,.20); position:relative; transition:background .18s ease;
  }
  .statusbar-toggle .sw::after{
    content:""; position:absolute; top:2px; left:2px;
    width:14px; height:14px; border-radius:50%; background:#fff;
    transition:transform .18s ease;
  }
  body.statusbar-on .statusbar-toggle .sw{background:#3fa564;}
  body.statusbar-on .statusbar-toggle .sw::after{transform:translateX(14px);}

  /* Status bar ink picker — floats above the toggle on hover (only while the bar is on).
     Auto = detect from screen content (HTML) / scene tone (Figma); Light/Dark force it. */
  .statusbar-control{position:relative;}
  .sb-ink-pop{
    position:absolute; left:50%; bottom:calc(100% + 10px); transform:translateX(-50%) translateY(6px);
    display:flex; gap:2px; padding:3px;
    border:1px solid var(--glass-line); border-radius:12px;
    background:var(--glass); backdrop-filter:blur(16px) saturate(140%);
    box-shadow:0 18px 40px -12px rgba(0,0,0,.5);
    opacity:0; pointer-events:none; white-space:nowrap; z-index:5;
    transition:opacity .18s ease, transform .18s ease;
  }
  /* invisible bridge across the gap so hover survives moving toggle → popup */
  .sb-ink-pop::before{content:""; position:absolute; left:0; right:0; top:100%; height:12px;}
  body.statusbar-on .statusbar-control:hover .sb-ink-pop,
  body.statusbar-on .sb-ink-pop:hover{
    opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0);
  }
  /* sliding highlight that glides to the active option */
  .sb-ink-thumb{
    position:absolute; left:0; top:0; z-index:0;
    border-radius:9px; background:rgba(255,255,255,.18);
    pointer-events:none;
    transition:transform .28s cubic-bezier(.22,1,.36,1), width .28s cubic-bezier(.22,1,.36,1), height .28s cubic-bezier(.22,1,.36,1);
  }
  .sb-ink-opt{
    position:relative; z-index:1;
    appearance:none; border:0; background:transparent; cursor:pointer;
    font-family:var(--ui); font-size:12px; font-weight:500;
    color:var(--muted-on-glass); padding:5px 11px; border-radius:9px;
    transition:color .18s ease;
  }
  .sb-ink-opt:hover{color:var(--text-on-glass);}
  .sb-ink-opt.is-active{color:var(--text-on-glass);}

  /* empty hint over the screen */
  .empty{
    position:absolute;
    left:calc(var(--scrL) - 1px); top:calc(var(--scrT) - 1px);
    width:calc(var(--scrW) + 2px); height:calc(var(--scrH) + 2px);
    z-index:1; border-radius:var(--screen-radius); cursor:pointer;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:18px;text-align:center;padding:36px;
    background:radial-gradient(120% 90% at 50% 32%,rgba(20,20,24,.92),rgba(8,8,10,.96));
    color:rgba(255,255,255,.86);transition:opacity .25s ease;
  }
  .empty.hidden{opacity:0;pointer-events:none;}
  .empty .mark{position:relative;width:64px;height:64px;border-radius:20px;display:flex;align-items:center;justify-content:center;}
  .empty .mark svg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:30px;height:30px;stroke:rgba(255,255,255,.7);opacity:0;animation:icoCycle 9s ease-in-out infinite;}
  .empty .mark svg.ico-2{animation-delay:3s;}
  .empty .mark svg.ico-3{animation-delay:6s;}
  /* rotating dashed border (marching ants) */
  .empty .mark svg.mark-border{position:absolute;top:0;left:0;transform:none;width:64px;height:64px;opacity:1;stroke:none;animation:none;overflow:visible;}
  .empty .mark .mark-dash{stroke:rgba(255,255,255,.32);animation:markAnts 6s linear infinite;}
  @keyframes markAnts{to{stroke-dashoffset:-48;}}
  @keyframes icoCycle{
    0%{opacity:0;}
    3%{opacity:1;}
    30%{opacity:1;}
    34%{opacity:0;}
    100%{opacity:0;}
  }
  .empty h2{font-family:var(--display);font-weight:400;font-size:30px;margin:0;line-height:1.12;}
  .empty p{margin:0;font-size:14px;color:rgba(255,255,255,.5);max-width:230px;line-height:1.5;}

  /* ---------- DROP OVERLAY ---------- */
  #drop{position:fixed;inset:0;z-index:40;pointer-events:none;display:flex;align-items:center;justify-content:center;background:rgba(232,133,91,.14);backdrop-filter:blur(3px);opacity:0;transition:opacity .18s ease;}
  #drop.show{opacity:1;}
  #drop .ring{border:2px dashed var(--accent);border-radius:28px;padding:34px 52px;background:rgba(26,23,20,.78);color:var(--text-on-glass);font-size:16px;font-weight:500;display:flex;align-items:center;gap:12px;}
  #drop .ring svg{width:22px;height:22px;stroke:var(--accent);}

  /* ---------- DOCK ---------- */
  .dock{position:fixed;z-index:30;left:22px;bottom:22px;display:flex;align-items:center;gap:6px;padding:8px;border-radius:20px;background:var(--glass);border:1px solid var(--glass-line);box-shadow:0 18px 40px -12px rgba(0,0,0,.5);backdrop-filter:blur(16px) saturate(140%);max-width:calc(100vw - 24px);transition:opacity .35s ease;}
  .scenes{display:flex;gap:5px;}
  .swatch{width:38px;height:38px;border-radius:11px;cursor:pointer;border:1px solid transparent;padding:0;position:relative;transition:border-color .15s ease,box-shadow .15s ease;}
  .swatch:hover{box-shadow:inset 0 0 0 999px rgba(255,255,255,.18);}
  .swatch[aria-pressed="true"]{border-color:rgba(255,255,255,.65);}
  .sw-studio{background:#dfe3e1;}
  .sw-living{background:#fed7aa;}
  .sw-desk{background:#bfdbfe;}
  .sw-studio[aria-pressed="true"]::before,
  .sw-living[aria-pressed="true"]::before,
  .sw-desk[aria-pressed="true"]::before{content:'';position:absolute;left:50%;top:50%;width:15px;height:15px;transform:translate(-50%,-50%);background:#1f1c19;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4.25 13.5 8.75 18 19.75 6' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4.25 13.5 8.75 18 19.75 6' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;z-index:1;}
  .sw-palette,
  .sw-custom{background:var(--chip);display:flex;align-items:center;justify-content:center;}
  #resetBtn.spin svg{animation:resetSpin .6s ease;}
  @keyframes resetSpin{from{transform:rotate(0deg);}to{transform:rotate(-360deg);}}
  .sw-palette svg{width:16px;height:16px;color:rgb(244,241,234);}
  .sw-palette .sw-ico-filled{display:none;}
  .sw-palette.has-color .sw-ico-outline{display:none;}
  .sw-palette.has-color .sw-ico-filled{display:inline-block;}
  .sw-custom svg{width:16px;height:16px;stroke:rgb(244,241,234);}
  .sw-custom .sw-ico-filled{stroke:none;fill:rgb(244,241,234);display:none;}
  .sw-custom.has-image .sw-ico-outline{display:none;}
  .sw-custom.has-image .sw-ico-filled{display:inline-block;}
  .palette-popover{position:fixed;z-index:36;bottom:110px;width:238px;padding:10px;border-radius:16px;background:var(--glass);border:1px solid var(--glass-line);box-shadow:none;backdrop-filter:blur(16px) saturate(140%);display:grid;grid-template-columns:repeat(6,30px);gap:8px;opacity:0;pointer-events:none;transform:translateX(-50%) translateY(12px);transition:opacity .2s ease,transform .2s ease;}
  .palette-popover.open{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0);}
  .palette-color{appearance:none;width:30px;height:30px;border-radius:9px;border:1px solid transparent;cursor:pointer;padding:0;position:relative;z-index:1;transition:transform .15s ease,border-color .15s ease;}
  .palette-color:hover{transform:translateY(-2px);}
  .palette-color[aria-pressed="true"]{border-color:rgba(255,255,255,.65);}
  .palette-color[aria-pressed="true"]::after{content:'';position:absolute;left:50%;top:50%;width:15px;height:15px;transform:translate(-50%,-50%);background:var(--chk,#fff);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4.25 13.5 8.75 18 19.75 6' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4.25 13.5 8.75 18 19.75 6' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;}
  .palette-hex{grid-column:1/-1;margin-top:2px;display:flex;align-items:center;gap:6px;padding:0 10px;border-radius:9px;background:var(--chip);border:1px solid var(--glass-line);transition:border-color .15s ease;}
  .palette-hex:focus-within{border-color:rgba(255,255,255,.45);}
  .palette-hex>span{color:var(--muted-on-glass);font:600 12px var(--ui);}
  .palette-hex input{flex:1;min-width:0;background:none;border:0;outline:none;padding:7px 0;color:var(--text-on-glass);font:500 12px var(--ui);letter-spacing:.06em;text-transform:uppercase;}
  .palette-rand{flex:none;display:flex;align-items:center;justify-content:center;width:22px;height:22px;margin:-1px -4px -1px 0;padding:0;border:0;border-radius:7px;background:none;color:var(--muted-on-glass);cursor:pointer;transform-origin:center center;transition:color .14s ease,background .14s ease;}
  .palette-rand:hover{color:var(--text-on-glass);background:rgba(255,255,255,.12);}
  .palette-hex:hover .palette-rand{color:#fff;}
  .palette-hex:hover .palette-rand svg{animation:diceRoll 2.2s ease-in-out infinite;}
  @keyframes diceRoll{
    0%{transform:translateY(0) rotate(0deg);}
    22%{transform:translateY(-2px) rotate(0deg);}    /* rise first, no spin */
    58%{transform:translateY(-2px) rotate(360deg);}  /* then spin in place at the top */
    80%{transform:translateY(0) rotate(360deg);}     /* drop back to the exact start */
    100%{transform:translateY(0) rotate(360deg);}    /* pause */
  }
  .palette-rand svg{width:15px;height:15px;display:block;transform-origin:center center;}
  .bg-popover{position:fixed;z-index:36;bottom:110px;width:300px;padding:11px;border-radius:16px;background:var(--glass);border:1px solid var(--glass-line);backdrop-filter:blur(16px) saturate(140%);display:grid;grid-template-columns:repeat(3,1fr);gap:10px;opacity:0;pointer-events:none;transform:translateX(-50%) translateY(12px);transition:opacity .2s ease,transform .2s ease;}
  .bg-popover.open{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0);}
  .bg-tile{appearance:none;position:relative;border:1px solid transparent;border-radius:10px;height:58px;cursor:pointer;padding:0;background:var(--chip) center/cover no-repeat;transition:transform .15s ease,border-color .15s ease;overflow:hidden;}
  .bg-tile:hover{transform:translateY(-2px);}
  .bg-tile[aria-pressed="true"]{border-color:rgba(255,255,255,.65);}
  .bg-tile[aria-pressed="true"]::before{content:'';position:absolute;inset:0;background:rgba(0,0,0,.32);}
  .bg-tile[aria-pressed="true"]::after{content:'';position:absolute;left:50%;top:45%;width:11px;height:6px;border:2.5px solid #fff;border-top:0;border-right:0;transform:translate(-50%,-50%) rotate(-45deg);filter:drop-shadow(0 1px 2px rgba(0,0,0,.55));z-index:1;}
  .bg-upload{display:flex;align-items:center;justify-content:center;color:var(--muted-on-glass);}
  .bg-upload svg{width:20px;height:20px;}
  .bg-empty{grid-column:1/-1;font-size:11.5px;color:var(--muted-on-glass);line-height:1.5;padding:4px 2px;text-align:center;}
  .sep{width:1px;height:28px;background:var(--glass-line);margin:0 4px;}
  .btn{appearance:none;border:0;cursor:pointer;font-family:var(--ui);height:38px;padding:0 14px;border-radius:12px;font-size:13px;font-weight:500;display:inline-flex;align-items:center;gap:7px;white-space:nowrap;transition:background .15s ease,color .15s ease,transform .15s ease;}
  .btn svg{width:15px;height:15px;}
  .btn-ghost{background:var(--chip);color:var(--text-on-glass);}
  .btn-ghost:hover{background:rgba(255,255,255,.16);}
  .btn-primary{background:var(--accent);color:#241008;}
  .btn-primary:hover{background:#f0936a;}
  .btn-icon{width:38px;padding:0;justify-content:center;}
  .btn:disabled{opacity:.4;cursor:default;transform:none;}
  /* record button */
  #recBtn svg{color:var(--text-on-glass);width:17px;height:17px;}
  #recBtn.is-rec svg{color:#e5484d;width:20px;height:20px;animation:recPulse 1.2s ease-in-out infinite;}
  #recBtn.is-rec{background:rgba(229,72,77,.16);}
  #recBtn.is-rec:hover{background:rgba(229,72,77,.26);}
  @keyframes recPulse{50%{opacity:.35;}}
  /* record button hover popover — label + microphone-audio checkbox */
  .rec-pop{position:fixed;z-index:40;width:max-content;max-width:240px;padding:9px 11px;border-radius:12px;background:var(--glass);border:1px solid var(--glass-line);backdrop-filter:blur(16px) saturate(140%);box-shadow:0 8px 22px -12px rgba(0,0,0,.4);opacity:0;pointer-events:none;transform:translateX(-50%) translateY(6px);transition:opacity .14s ease,transform .14s ease;}
  .rec-pop.open{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0);}
  .rec-pop-title{font-family:var(--ui);font-size:11.5px;font-weight:600;color:var(--text-on-glass);margin-bottom:7px;}
  .rec-opt{display:flex;align-items:center;gap:8px;cursor:pointer;font-family:var(--ui);font-size:12px;color:var(--muted-on-glass);transition:color .15s ease;}
  .rec-opt:hover{color:var(--text-on-glass);}
  .rec-opt input{position:absolute;width:0;height:0;opacity:0;}
  .rec-box{flex:none;width:16px;height:16px;border-radius:5px;border:1.5px solid rgba(255,255,255,.35);background:rgba(255,255,255,.06);position:relative;transition:background .15s ease,border-color .15s ease;}
  .rec-opt input:checked + .rec-box{background:#3fa564;border-color:#3fa564;}
  .rec-opt input:checked + .rec-box::after{content:'';position:absolute;left:50%;top:50%;width:11px;height:11px;transform:translate(-50%,-50%);background:#fff;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4.25 13.5 8.75 18 19.75 6' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4.25 13.5 8.75 18 19.75 6' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;}
  .rec-opt input:disabled + .rec-box{opacity:.45;}
  .rec-opt:has(input:disabled){cursor:default;color:var(--muted-on-glass);}
  #galAdd:disabled{opacity:1;background:var(--chip);color:var(--muted-on-glass);}

  /* hover tooltips for icon-only dock buttons */
  .dock [data-tip]{position:relative;}
  .dock [data-tip]::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 11px);transform:translateX(-50%) translateY(4px);background:var(--glass);border:1px solid var(--glass-line);color:var(--text-on-glass);backdrop-filter:blur(16px) saturate(140%);padding:5px 9px;border-radius:9px;font-family:var(--ui);font-size:11.5px;font-weight:500;line-height:1;white-space:nowrap;opacity:0;pointer-events:none;box-shadow:0 8px 22px -12px rgba(0,0,0,.4);transition:opacity .14s ease,transform .14s ease;z-index:40;}
  .dock [data-tip]:hover::after{opacity:1;transform:translateX(-50%) translateY(0);}
  .dock [data-tip]:disabled:hover::after{opacity:0;}

  .brand{position:fixed;z-index:30;top:20px;left:24px;display:flex;flex-direction:column;align-items:flex-start;gap:1px;user-select:none;transition:opacity .6s ease;}
  .brand b{font-family:var(--display);font-weight:400;font-size:24px;letter-spacing:.2px;color:var(--ink);line-height:1.05;}
  .brand-home,.brand-home:hover,.brand-home:focus,.brand-home:active,.brand-home b{text-decoration:none!important;cursor:pointer;-webkit-tap-highlight-color:transparent;}
  .brand-ver{font-family:var(--ui);font-size:9.5px;font-weight:600;letter-spacing:.03em;vertical-align:super;margin-left:3px;color:rgba(26,23,20,.4);}
  body.dark .brand-ver{color:rgba(244,241,234,.45);}
  .brand .credit{font-size:11.5px;letter-spacing:.05em;color:rgba(26,23,20,.45);text-decoration:none;transition:color .2s ease;}
  .brand .credit b{font-family:var(--ui);font-size:11.5px;font-weight:500;letter-spacing:.05em;color:rgba(26,23,20,.62);}
  .brand .credit:hover{color:rgba(26,23,20,.7);}
  .brand .credit:hover b{color:var(--ink);}
  body.dark .brand b{color:#f4f1ea;}
  body.dark .brand .credit{color:rgba(244,241,234,.5);}
  body.dark .brand .credit b{color:rgba(244,241,234,.72);}
  body.dark .brand .credit:hover{color:rgba(244,241,234,.85);}
  body.dark .brand .credit:hover b{color:#f4f1ea;}

  .filepill{position:fixed;z-index:30;top:22px;right:24px;background:var(--glass);border:1px solid var(--glass-line);color:var(--text-on-glass);padding:7px 7px 7px 13px;border-radius:11px;font-size:12px;font-family:var(--ui);display:none;align-items:center;gap:7px;max-width:40vw;backdrop-filter:blur(12px);transition:opacity .35s ease,padding-left .26s cubic-bezier(.4,0,.2,1);}
  .filepill.show{display:inline-flex;}
  .filepill span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .filepill .savebtn{appearance:none;border:0;background:rgba(255,255,255,.1);color:var(--text-on-glass);width:24px;height:24px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:none;transition:background .15s ease,color .15s ease;}
  .filepill .savebtn:hover{background:rgba(255,255,255,.22);}
  .filepill .savebtn svg{width:13px;height:13px;}
  .filepill .savebtn.done{background:#3fa564;color:#fff;}
  .filepill .savebtn.done:hover{background:#359158;}
  .filepill .savebtn.done svg{fill:#fff;}
  .filepill .sharebtn[hidden]{display:none;}
  .filepill .sharebtn.copied{background:#3fa564;color:#fff;}
  .filepill .sharebtn.copied:hover{background:#359158;}
  /* chain holds, then cross-fades into the tick: outgoing fades via transition,
     incoming fades in via sharePop */
  .filepill .sharebtn svg{transition:opacity .1s ease,transform .1s ease;}
  .filepill .sharebtn svg.ico-link{width:20px;height:20px;}   /* chain reads small — bump it up */
  .filepill .sharebtn.copied svg{animation:sharePop .18s cubic-bezier(.22,1,.36,1);}
  @keyframes sharePop{from{transform:scale(.55);opacity:0;}to{transform:scale(1);opacity:1;}}
  .filepill .sharebtn.swapping svg{opacity:0;transform:scale(.55);}
  /* share → "Copied link": collapse the filename + bookmark, slide the label in */
  /* Per-direction timing: fade OUT fast on the way in; on the way back, hold the name
     hidden until the width has reopened, then fade IN — so it never reveals as a clipped "…". */
  .filepill #filename{max-width:40vw;transition:max-width .26s cubic-bezier(.4,0,.2,1),opacity .15s ease .22s,margin .26s cubic-bezier(.4,0,.2,1);}
  .filepill #saveBtn{max-width:24px;transition:max-width .26s cubic-bezier(.4,0,.2,1),opacity .15s ease .22s,margin .26s cubic-bezier(.4,0,.2,1),padding .26s cubic-bezier(.4,0,.2,1),background .15s ease,color .15s ease;}
  .copied-label{display:inline-flex;align-items:center;max-width:0;opacity:0;margin-left:-8px;overflow:hidden;white-space:nowrap;color:var(--text-on-glass);font:500 12.5px var(--ui);transition:max-width .26s cubic-bezier(.4,0,.2,1),opacity .14s ease,margin .26s cubic-bezier(.4,0,.2,1);}
  .filepill.is-copied{padding-left:7px;}   /* tick now leftmost — match the 7px top/bottom inset */
  .filepill.is-copied #filename{max-width:0;opacity:0;margin-right:-7px;transition:max-width .26s cubic-bezier(.4,0,.2,1),opacity .14s ease,margin .26s cubic-bezier(.4,0,.2,1);}
  .filepill.is-copied #saveBtn{max-width:0;opacity:0;margin:0 -7px 0 0;padding:0;transition:max-width .26s cubic-bezier(.4,0,.2,1),opacity .14s ease,margin .26s cubic-bezier(.4,0,.2,1),padding .26s cubic-bezier(.4,0,.2,1);}
  .filepill.is-copied .copied-label{max-width:160px;opacity:1;margin-left:0;transition:max-width .26s cubic-bezier(.4,0,.2,1),opacity .2s ease .08s,margin .26s cubic-bezier(.4,0,.2,1);}
  /* Save / Share tooltips — the pill sits in the top-right, so these open DOWNWARD and centre
     under the button (like the dock tooltips). */
  .filepill .savebtn[data-tip]{position:relative;}
  .filepill .savebtn[data-tip]::after{content:attr(data-tip);position:absolute;top:calc(100% + 9px);left:50%;background:var(--glass);border:1px solid var(--glass-line);color:var(--text-on-glass);backdrop-filter:blur(16px) saturate(140%);padding:5px 9px;border-radius:9px;font-family:var(--ui);font-size:11.5px;font-weight:500;line-height:1;white-space:nowrap;opacity:0;pointer-events:none;box-shadow:0 8px 22px -12px rgba(0,0,0,.4);transform:translateX(-50%) translateY(-4px);transition:opacity .14s ease,transform .14s ease;z-index:40;}
  .filepill .savebtn[data-tip]:hover::after{opacity:1;transform:translateX(-50%) translateY(0);}
  .filepill.is-copied .savebtn[data-tip]::after{display:none;}   /* hide during the copied animation */

  /* Upload toast — top-center, quiet progress while an image/HTML uploads to Firebase */
  .upload-toast{position:fixed;z-index:55;top:20px;left:50%;transform:translateX(-50%) translateY(-14px);width:260px;max-width:calc(100vw - 32px);padding:11px 14px 12px;border-radius:14px;background:var(--glass);border:1px solid var(--glass-line);box-shadow:0 18px 40px -16px rgba(0,0,0,.5);backdrop-filter:blur(16px) saturate(140%);color:var(--text-on-glass);opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s cubic-bezier(.22,1,.36,1);}
  .upload-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
  .upload-toast-row{display:flex;align-items:center;gap:8px;margin-bottom:9px;}
  .upload-toast-ico{width:15px;height:15px;flex:none;opacity:.85;}
  .upload-toast-label{flex:1;min-width:0;font-family:var(--ui);font-size:12.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .upload-toast-pct{flex:none;font-family:var(--ui);font-size:11.5px;font-weight:500;font-variant-numeric:tabular-nums;color:var(--muted-on-glass);}
  .upload-toast-track{height:4px;border-radius:3px;background:rgba(255,255,255,.14);overflow:hidden;}
  .upload-toast-bar{height:100%;width:0;border-radius:3px;background:#e8855b;transition:width .2s ease;}
  .upload-toast.done .upload-toast-bar{background:#3fa564;}

  .confirm-pop{position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;background:rgba(10,10,12,.42);backdrop-filter:blur(3px);}
  .confirm-pop.open{display:flex;}
  .confirm-card{background:var(--glass);border:1px solid var(--glass-line);border-radius:18px;padding:22px 24px;box-shadow:0 24px 60px -16px rgba(0,0,0,.55);backdrop-filter:blur(16px) saturate(140%);color:var(--text-on-glass);min-width:248px;text-align:center;}
  .confirm-msg{margin:0 0 18px;font-family:var(--display);font-weight:400;font-size:17px;}
  .confirm-actions{display:flex;gap:10px;justify-content:center;}
  .confirm-btn{appearance:none;border:1px solid var(--glass-line);background:rgba(255,255,255,.08);color:var(--text-on-glass);padding:8px 24px;border-radius:11px;font-size:13px;cursor:pointer;transition:background .15s ease;}
  .confirm-btn:hover{background:rgba(255,255,255,.18);}
  .confirm-yes{background:#d9534a;border-color:transparent;color:#fff;}
  .confirm-yes:hover{background:#c64238;}

  /* "Prototype unavailable" notice — shown when a shared link can't be resolved */
  .notice-card{max-width:340px;min-width:0;padding:24px 26px;}
  .notice-ico{width:46px;height:46px;margin:0 auto 14px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(232,133,91,.16);color:#e8855b;}
  .notice-ico svg{width:24px;height:24px;}
  .notice-title{margin:0 0 8px;font-family:var(--display);font-weight:400;font-size:19px;}
  .notice-msg{margin:0 0 18px;font-size:12.5px;line-height:1.55;color:var(--muted-on-glass);}
  .notice-card .confirm-yes{background:#e8855b;}
  .notice-card .confirm-yes:hover{background:#d9744b;}

  /* guide trigger line under the gallery hint */
  .guide-link{display:inline-flex;align-items:center;gap:6px;margin:-9px 0 15px;padding:0;border:0;background:none;color:var(--muted-on-glass);font-family:var(--ui);font-size:11.5px;line-height:1.45;text-align:left;cursor:pointer;transition:color .15s ease;}
  .guide-link:hover{color:var(--text-on-glass);}
  .guide-link span{text-decoration:underline;text-underline-offset:2px;text-decoration-color:rgba(255,255,255,.25);}
  .guide-link svg{width:13px;height:13px;flex:none;}

  /* Figma guide popup */
  .guide-pop{position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;background:rgba(10,10,12,.42);backdrop-filter:blur(3px);padding:24px;}
  .guide-pop.open{display:flex;}
  .guide-card{position:relative;background:var(--glass);border:1px solid var(--glass-line);border-radius:20px;padding:20px 24px;box-shadow:0 24px 60px -16px rgba(0,0,0,.55);backdrop-filter:blur(16px) saturate(140%);color:var(--text-on-glass);max-width:540px;width:100%;max-height:90vh;overflow:auto;}
  .guide-close{position:absolute;top:14px;right:14px;width:28px;height:28px;border:0;border-radius:9px;background:rgba(255,255,255,.08);color:var(--text-on-glass);font-size:18px;line-height:1;cursor:pointer;transition:background .15s ease;}
  .guide-close:hover{background:rgba(255,255,255,.18);}
  .guide-title{font-family:var(--display);font-weight:400;font-size:23px;margin:0 0 5px;}
  .guide-sub{margin:0 0 14px;font-size:13px;line-height:1.5;color:var(--muted-on-glass);max-width:90%;}
  .guide-steps{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:11px;}
  .guide-steps li{display:flex;align-items:center;gap:13px;font-size:12.5px;line-height:1.45;}
  .guide-shot{flex:0 0 128px;width:128px;aspect-ratio:321/207;object-fit:cover;border-radius:11px;border:1px solid var(--glass-line);display:block;}
  .guide-text{min-width:0;}
  .guide-steps li b{display:block;margin-bottom:2px;color:var(--text-on-glass);font-weight:600;}
  .guide-steps li span{color:var(--muted-on-glass);}
  .guide-steps li i{font-style:normal;color:var(--text-on-glass);}
  .guide-steps li code{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:11.5px;background:rgba(255,255,255,.1);padding:1px 5px;border-radius:5px;color:var(--text-on-glass);}
  .guide-foot{margin:14px 0 0;padding-top:13px;border-top:1px solid var(--glass-line);font-size:12.5px;line-height:1.5;color:var(--muted-on-glass);}
  .guide-foot b{color:var(--text-on-glass);font-weight:600;}

  /* Onboarding welcome card (top-right, first visit) */
  .welcome-pop{position:fixed;z-index:58;top:22px;right:22px;width:340px;max-width:calc(100vw - 44px);opacity:0;pointer-events:none;transform:translateX(40px);transition:opacity .45s ease,transform .45s cubic-bezier(.22,1,.36,1);}
  .welcome-pop.open{opacity:1;pointer-events:auto;transform:none;}
  .welcome-card{position:relative;background:var(--glass);border:1px solid var(--glass-line);border-radius:18px;padding:18px 18px 16px;box-shadow:0 24px 60px -16px rgba(0,0,0,.55);backdrop-filter:blur(16px) saturate(140%);color:var(--text-on-glass);}
  .welcome-close{position:absolute;top:11px;right:11px;width:26px;height:26px;border:0;border-radius:8px;background:rgba(255,255,255,.08);color:var(--text-on-glass);font-size:17px;line-height:1;cursor:pointer;transition:background .15s ease;}
  .welcome-close:hover{background:rgba(255,255,255,.18);}
  .welcome-row{display:flex;align-items:center;gap:13px;padding-right:20px;}
  .welcome-video{flex:0 0 116px;width:116px;aspect-ratio:16/10;border-radius:12px;overflow:hidden;background:rgba(0,0,0,.3);border:1px solid var(--glass-line);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.85);}
  .welcome-video video{width:100%;height:100%;object-fit:cover;display:block;}
  .welcome-play{width:34px;height:34px;}
  .welcome-head{min-width:0;}
  .welcome-title{font-family:var(--display);font-weight:400;font-size:18px;margin:0 0 3px;line-height:1.2;}
  .welcome-hi{margin:0;font-size:12.5px;line-height:1.4;color:var(--muted-on-glass);}
  .welcome-desc{margin:13px 0 0;font-size:12.5px;line-height:1.55;color:var(--muted-on-glass);}

  .ui-hidden{opacity:0;pointer-events:none;}
  /* hide chrome while the cursor is over the phone screen */
  body.screen-hover .brand,
  body.screen-hover .dock,
  body.screen-hover .filepill,
  body.screen-hover .sheet,
  body.screen-hover .right-dock{opacity:0!important;pointer-events:none!important;}
  body.present .dock.idle{opacity:0;pointer-events:none;}
  /* hide every overlay while snapshotting so only the scene + phone (and the top-left
     PreMock / by Arda Arıcan brand) get captured */
  body.capturing > *:not(#scene):not(#deviceUnit):not(.brand){opacity:0!important;pointer-events:none!important;transition:none!important;}
  body.capturing .brand{opacity:1!important;transition:none!important;}
  /* OG screenshot mode (premock.co/?<id>#shot): show only the scene + phone — no intro, dock,
     brand, pills or toasts — so the generated preview is a clean phone-on-backdrop shot. */
  body.shot > *:not(#scene):not(#deviceUnit){display:none!important;}

  /* gallery sheet */
  .sheet{position:fixed;z-index:35;left:22px;bottom:110px;transform:translateY(12px);width:max-content;max-height:62vh;overflow:auto;background:var(--glass);border:1px solid var(--glass-line);border-radius:20px;backdrop-filter:blur(16px) saturate(140%);padding:18px;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;color:var(--text-on-glass);}
  .sheet.open{opacity:1;pointer-events:auto;transform:translateY(0);}
  .sheet h3{font-family:var(--display);font-weight:400;font-size:21px;margin:0 0 3px;}
  .sheet .hint{font-size:12px;color:var(--muted-on-glass);margin:0 0 15px;line-height:1.55;}
  .addrow{display:flex;gap:8px;margin-bottom:18px;}
  .addrow input{flex:1;min-width:0;height:38px;border-radius:11px;border:1px solid var(--glass-line);background:rgba(0,0,0,.25);color:var(--text-on-glass);padding:0 12px;font-family:var(--ui);font-size:13px;outline:none;}
  .addrow input::placeholder{color:rgba(244,241,234,.4);}
  .addrow input:focus{border-color:rgba(255,255,255,.45);}
  .addhint{max-height:0;overflow:hidden;opacity:0;font-size:11.5px;line-height:1.4;color:var(--muted-on-glass);transition:opacity .25s ease,max-height .3s ease,margin .3s ease;}
  .addhint.show{max-height:64px;opacity:1;margin:-10px 2px 16px;}
  .grid{display:flex;flex-wrap:nowrap;gap:14px;overflow-x:auto;overflow-y:hidden;margin:0 -18px;padding:8px 18px 18px;}
  .protocard{position:relative;flex:0 0 auto;padding:0;border:0;background:none;cursor:pointer;display:flex;flex-direction:column;gap:7px;font-family:var(--ui);width:110px;transition:opacity .2s ease;}
  .thumb{position:relative;width:110px;height:238px;border-radius:15px;overflow:hidden;isolation:isolate;background:#0c0c0e;box-shadow:inset 0 0 0 1px var(--glass-line);transition:transform .15s ease,box-shadow .15s ease;-webkit-mask-image:-webkit-radial-gradient(#fff,#000);mask-image:radial-gradient(#fff,#000);}
  .protocard:hover .thumb{transform:translateY(-3px);}
  /* while browsing previews, dim the others so the hovered one stays in focus;
     when nothing is hovered they all stay at full opacity */
  .grid:has(.protocard:hover) .protocard{opacity:.4;}
  .grid:has(.protocard:hover) .protocard:hover{opacity:1;}
  .thumb iframe{position:absolute;top:0;left:0;width:375px;height:812px;border:0;transform:scale(.29333);transform-origin:top left;pointer-events:none;}
  .thumb .badge{position:absolute;left:0;right:0;bottom:0;padding:20px 7px 6px;font-size:9px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6);background:linear-gradient(180deg,transparent,rgba(0,0,0,.85));border-radius:0 0 14px 14px;}
  .thumb .demotag{position:absolute;top:7px;left:7px;padding:2px 7px;font-size:9px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.62);border-radius:8px;z-index:2;pointer-events:none;}
  .trow{display:flex;align-items:center;justify-content:center;gap:3px;width:100%;padding-left:19px;}
  .trow:has(.prename){padding-left:0;}
  .ptitle{font-size:11.5px;color:var(--text-on-glass);text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
  .pedit{flex:none;width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center;padding:0;border:0;background:none;color:var(--muted-on-glass);cursor:pointer;opacity:0;transition:opacity .15s ease,color .15s ease;}
  .trow:has(.prename) .pedit{display:none;}
  .pedit svg{width:12px;height:12px;}
  .protocard:hover .pedit{opacity:.6;}
  .pedit:hover{opacity:1;color:var(--text-on-glass);}
  .prename{flex:1 1 auto;text-align:center;background:rgba(0,0,0,.25);border:1px solid var(--glass-line);border-radius:11px;padding:4px 8px;color:var(--text-on-glass);font-family:var(--ui);font-size:11.5px;outline:none;transition:border-color .15s ease;}
  .prename:focus{border-color:rgba(255,255,255,.45);}
  .premove{position:absolute;top:7px;right:7px;width:21px;height:21px;border-radius:50%;background:rgba(0,0,0,.62);color:#fff;font-size:14px;line-height:1;border:0;padding:0;cursor:pointer;opacity:0;transition:opacity .15s;z-index:2;display:flex;align-items:center;justify-content:center;}
  .protocard:hover .premove{opacity:1;}
  /* Safari renders the × glyph slightly low-left — nudge it up-right (Chrome ignores this) */
  @supports (-webkit-hyphens:none){ .premove{padding:0 0 1px 1px;} }
  .galempty{font-size:12.5px;color:var(--muted-on-glass);line-height:1.6;padding:6px 2px;}

  .intro-title{
    position:fixed;z-index:1;top:50%;left:50%;
    transform:translate(-50%,-50%);
    font-family:var(--display);font-size:76px;font-weight:400;
    letter-spacing:.01em;color:var(--ink);
    pointer-events:none;user-select:none;
    opacity:0;
    animation:introFadeIn .9s cubic-bezier(.22,1,.36,1) .6s forwards;
  }
  body.dark .intro-title{color:#f4f1ea;}
  @keyframes introFadeIn{
    from{opacity:0;}
    to{opacity:1;}
  }

  .intro-credit{
    position:fixed;z-index:1;top:calc(50% + 58px);left:50%;
    transform:translateX(-50%);
    font-family:var(--ui);font-size:12.5px;font-weight:400;
    letter-spacing:.06em;color:rgba(26,23,20,.42);
    white-space:nowrap;text-decoration:none;
    opacity:0;
    animation:introFadeIn .9s cubic-bezier(.22,1,.36,1) 1.1s forwards;
    transition:color .2s ease;
  }
  .intro-credit b{font-weight:500;color:rgba(26,23,20,.62);}
  .intro-credit:hover{color:rgba(26,23,20,.7);}
  .intro-credit:hover b{color:var(--ink);}
  body.dark .intro-credit{color:rgba(244,241,234,.45);}
  body.dark .intro-credit b{color:rgba(244,241,234,.7);}
  body.dark .intro-credit:hover{color:rgba(244,241,234,.8);}
  body.dark .intro-credit:hover b{color:#f4f1ea;}

  /* Shared-link loading line — a minimal bar under the intro text that fills while the
     scene's background image loads; the hand mockup comes in once it completes. */
  .intro-progress{
    position:fixed;z-index:1;top:calc(50% + 92px);left:50%;
    transform:translateX(-50%);
    width:230px;height:2px;border-radius:2px;
    background:rgba(26,23,20,.12);overflow:hidden;
    opacity:0;pointer-events:none;
  }
  .intro-progress-bar{
    display:block;height:100%;width:0;border-radius:2px;
    background:rgba(26,23,20,.5);
  }
  body.dark .intro-progress{background:rgba(244,241,234,.16);}
  body.dark .intro-progress-bar{background:rgba(244,241,234,.62);}

  /* "desktop only" notice — hidden by default, shown on touch devices */
  .desktop-only{
    position:fixed;z-index:2;top:calc(50% + 100px);left:50%;
    transform:translateX(-50%);
    display:none;align-items:center;gap:8px;
    width:max-content;max-width:84vw;padding:0 24px;
    font-family:var(--ui);font-size:13px;line-height:1.4;letter-spacing:.01em;
    color:rgba(26,23,20,.5);text-align:left;
    opacity:0;animation:introFadeIn .9s cubic-bezier(.22,1,.36,1) 1.5s forwards;
  }
  .desktop-only-ico{width:17px;height:17px;flex:none;}
  body.dark .desktop-only{color:rgba(244,241,234,.55);}


  .frame-loader{
    position:absolute;inset:0;z-index:2;
    background:#fff;
    display:flex;align-items:center;justify-content:center;
    opacity:0;pointer-events:none;
    transition:opacity .35s ease;
  }
  .frame-loader.show{opacity:1;}
  .loader-ring{
    width:32px;height:32px;
    border:2.5px solid rgba(0,0,0,.1);
    border-top-color:rgba(0,0,0,.5);
    border-radius:50%;
    animation:spin .75s linear infinite;
  }
  @keyframes spin{to{transform:rotate(360deg);}}

  /* Shown inside the phone when a site refuses to be framed (X-Frame-Options / CSP). */
  .frame-block{
    position:absolute;inset:0;z-index:3;
    background:#0b0b0d;
    display:flex;align-items:center;justify-content:center;
    padding:36px 28px;
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .35s ease;
  }
  .frame-block.show{opacity:1;visibility:visible;pointer-events:auto;}
  .fb-inner{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;max-width:280px;}
  .fb-shield{width:56px;height:56px;stroke:rgba(255,255,255,.9);}
  .fb-title{margin:0;font-size:19px;font-weight:600;color:#fff;line-height:1.25;}
  .fb-msg{margin:0;font-size:14px;line-height:1.55;color:rgba(255,255,255,.55);}

  @media (max-width:560px){.brand{display:none;}.btn-label{display:none;}.btn{padding:0 11px;}.btn-primary .btn-label{display:inline;}}
  /* touch devices (phones/tablets): PreMock needs a cursor, so gate it to desktop.
     Keep the intro title + credit, hide the interactive app, show the notice. */
  @media (hover:none) and (pointer:coarse){
    #deviceUnit,#drop,.dock,.right-dock,.filepill,.brand,.sheet,.palette-popover,.bg-popover,.rec-pop{display:none!important;}
    .desktop-only{display:flex;}
    .intro-title{font-size:56px;}
  }
  @media (prefers-reduced-motion:reduce){*{transition:none!important;}}