/* Vitral kit: Mac windows, the desktop they live on, and the iPhone app (approved canvas A, 390pt grid scaled to 440). */
.vt{position:absolute;left:0;top:0;width:390px;height:847px;transform:scale(1.12821);transform-origin:0 0;color:#eef0f3;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif}
.iph-screen.vt-screen{background:#0b0c0e}
.vt *{box-sizing:border-box}
.vt-pic{position:absolute;left:16px;top:54px;width:358px;height:224px;border-radius:24px;overflow:hidden;background:#f4f4f2;box-shadow:0 18px 40px rgba(0,0,0,.55)}
.vt-pic .stream{position:absolute;left:0;top:0;transform-origin:0 0}
.vt-pic .shade{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none}
.vt-thumbs{position:absolute;left:16px;top:292px;display:flex;gap:10px;-webkit-mask-image:linear-gradient(90deg,#000 84%,transparent);mask-image:linear-gradient(90deg,#000 84%,transparent);width:374px;overflow:hidden;padding:2px}
.vt-th{position:relative;flex:0 0 112px;height:70px;border-radius:16px;overflow:hidden;background:#f1f1ef;border:1px solid rgba(255,255,255,.1);box-shadow:0 6px 16px rgba(0,0,0,.45)}
.vt-th.on{border:2px solid #9bb7ff}
.vt-th .stream{position:absolute;left:0;top:0;transform-origin:0 0}
.vt-th .bdg{position:absolute;left:6px;bottom:6px;width:24px;height:24px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff}
.vt-dock{position:absolute;left:16px;top:378px;width:358px;height:60px;border-radius:30px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 12px 30px rgba(0,0,0,.45);display:flex;align-items:center;justify-content:space-around;padding:0 8px}
.vt-db{width:48px;height:48px;border-radius:24px;display:flex;align-items:center;justify-content:center;position:relative;color:#eef0f3;font-size:16px;font-weight:700}
.vt-db.on{background:rgba(155,183,255,.22);color:#c9d7ff}
.vt-db.pressed{background:rgba(255,255,255,.18);transform:scale(.94)}
.vt-db small{position:absolute;left:0;right:0;bottom:5px;font-size:8px;font-weight:600;text-align:center}
.vt-keys{position:absolute;left:16px;top:452px;width:358px;height:32px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.16);display:flex;align-items:center;padding:0 3px;gap:1px}
.vt-k{flex:1;height:26px;border-radius:13px;display:flex;align-items:center;justify-content:center;color:#c4c9d1;font-size:12px}
.vt-k.sym{font-size:14px}
.vt-k.ret{flex:1.7;background:rgba(255,255,255,.08);color:#dde1e7}
.vt-k.ph{flex:0 0 34px;background:rgba(155,183,255,.18)}
.vt-k.on{background:rgba(155,183,255,.26);color:#c9d7ff;font-weight:600}
.vt-sep{width:1px;height:12px;background:rgba(255,255,255,.12)}
.vt-pad{position:absolute;left:16px;top:498px;width:358px;height:312px;border-radius:28px;background:linear-gradient(180deg,#111318,#0b0c0f);border:1px solid rgba(255,255,255,.06);box-shadow:inset 0 2px 12px rgba(0,0,0,.6);overflow:hidden}
.vt-pad .edge{position:absolute;top:14px;bottom:14px;right:0;width:46px;border-left:1px solid rgba(255,255,255,.05);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.vt-pad .edge i{width:4px;height:56px;border-radius:2px;background:rgba(255,255,255,.14)}
.vt-pad .hint{position:absolute;left:0;right:46px;bottom:16px;text-align:center;font-size:12px;color:#6e7580}
.vt-touch{position:absolute;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:23px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);opacity:0;pointer-events:none}
.vt-ripple{position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:15px;border:2px solid rgba(10,132,255,.9);opacity:0;pointer-events:none}
.vt-ptr{position:absolute;width:16px;height:22px;pointer-events:none;z-index:5}
.vt-toast{pointer-events:none;position:absolute;left:10px;right:10px;bottom:10px;height:48px;border-radius:24px;background:rgba(28,30,36,.82);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.16);display:flex;align-items:center;gap:10px;padding:0 6px 0 8px;opacity:0}
.vt-toast b{font-size:13px;color:#eef0f3}
.vt-toast span{font-size:11px;color:#a4abb5}

/* keyboard-up layout */
.vt.kbup .vt-pic{height:210px}
.vt.kbup .vt-thumbs,.vt.kbup .vt-dock{display:none}
.vt.kbup .vt-keys{top:274px}
.vt.kbup .vt-pad{top:316px;height:223px;border-radius:24px}
.vt-tray{pointer-events:none;position:absolute;top:10px;right:10px;display:flex;align-items:center;gap:6px;opacity:0}
.vt.kbup .vt-tray{opacity:1}
.vt-tray .grp{height:40px;border-radius:20px;background:rgba(28,30,36,.78);border:1px solid rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.22);display:flex;align-items:center;padding:0 4px}
.vt-tray .grp div{width:36px;height:36px;display:flex;align-items:center;justify-content:center;color:#eef0f3;font-size:13px;font-weight:700}
.vt-tray .one{width:44px;height:44px;border-radius:22px;background:rgba(28,30,36,.78);border:1px solid rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center}
.vt-kb{position:absolute;left:0;right:0;bottom:0;height:339px;z-index:20}
.vt-kb .kb{height:339px;border-radius:0;background:#1e1f22}
.vt-kb .kb-bar{display:none}
.vt-kb .kb-views{top:2px}

/* controls panel */
.vt-dim{position:absolute;inset:0;background:rgba(5,6,8,.55);opacity:0;pointer-events:none}
.vt-panel{pointer-events:none;position:absolute;right:16px;top:446px;width:318px;border-radius:28px;background:rgba(34,36,42,.92);border:1px solid rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 24px 50px rgba(0,0,0,.55);padding:16px;display:flex;flex-direction:column;gap:12px;opacity:0;transform-origin:85% -10%}
.vt-panel .hd{display:flex;align-items:center;justify-content:space-between;font-size:17px;font-weight:600}
.vt-panel .x{width:32px;height:32px;border-radius:16px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:#c4c9d1;font-size:13px}
.vt-panel .grp{border-radius:18px;background:rgba(255,255,255,.06);padding:14px;display:flex;flex-direction:column;gap:14px}
.vt-sl{display:flex;align-items:center;gap:10px}
.vt-sl .tr{position:relative;flex:1;height:28px;border-radius:14px;background:rgba(255,255,255,.1);overflow:hidden}
.vt-sl .tr i{position:absolute;left:0;top:0;bottom:0;background:#eef0f3}
.vt-row{display:flex;align-items:center;gap:12px;padding:12px 14px}
.vt-row .tx{flex:1;display:flex;flex-direction:column;gap:2px}
.vt-row .tx b{font-size:15px;font-weight:400}
.vt-row .tx span{font-size:12px;color:#a4abb5}
.vt-sw{width:51px;height:31px;border-radius:16px;background:rgba(120,120,128,.32);position:relative;flex:0 0 51px}
.vt-sw i{position:absolute;left:2px;top:2px;width:27px;height:27px;border-radius:14px;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.3)}
.vt-disc{height:44px;border-radius:22px;background:rgba(255,90,90,.14);color:#ff8a80;font-size:15px;font-weight:600;display:flex;align-items:center;justify-content:center}

/* Face ID */
.vt-fid{pointer-events:none;position:absolute;left:50%;top:330px;width:150px;height:150px;margin-left:-75px;border-radius:34px;background:rgba(40,42,48,.86);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border:1px solid rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;opacity:0}
.vt-fid svg{width:78px;height:78px}

/* welcome */
.vt-wel{position:absolute;inset:0;padding:104px 20px 40px;display:flex;flex-direction:column;align-items:center;opacity:0}

/* ---------------- Mac ---------------- */
.mac{position:absolute;overflow:hidden;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;color:#1d1d1f;-webkit-font-smoothing:antialiased}
.mac-wall{position:absolute;inset:0;background:linear-gradient(160deg,#d8d3ca 0%,#e9e5dd 46%,#cfc9be 100%)}
.mac-wall i{position:absolute;background:rgba(255,253,247,.55);filter:blur(28px);transform:skewX(-24deg)}
.mac-bar{position:absolute;left:0;right:0;top:0;height:30px;background:rgba(246,244,240,.62);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);display:flex;align-items:center;gap:22px;padding:0 18px;font-size:13.5px;color:#1d1d1f}
.mac-bar b{font-weight:700}
.mac-bar .r{margin-left:auto;display:flex;gap:16px;align-items:center}
.mac-dim{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;z-index:40}
.mwin{color:#1d1d1f;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif;text-align:left;position:absolute;width:960px;height:620px;border-radius:16px;overflow:hidden;background:#fbfbfa;box-shadow:0 0 0 .5px rgba(0,0,0,.22),0 24px 60px rgba(30,25,15,.22),0 4px 12px rgba(30,25,15,.12);transform-origin:0 0;font-size:14px}
.mwin .tb{position:absolute;left:0;right:0;top:0;height:52px;display:flex;align-items:center;padding:0 18px;gap:8px;border-bottom:1px solid rgba(0,0,0,.07);background:#f6f5f3}
.mwin .tl{width:12px;height:12px;border-radius:6px}
.mwin .ttl{position:absolute;left:0;right:0;text-align:center;font-size:13.5px;font-weight:600;color:#3d3d40;pointer-events:none}
.mwin .bd{position:absolute;left:0;right:0;top:52px;bottom:0}
/* notes */
.mw-notes .side{position:absolute;left:0;top:0;bottom:0;width:200px;background:#efede9;border-right:1px solid rgba(0,0,0,.06);padding:16px 12px;font-size:13px;color:#555}
.mw-notes .side div{padding:6px 10px;border-radius:7px}
.mw-notes .side div.on{background:rgba(229,181,58,.28);color:#1d1d1f;font-weight:600}
.mw-notes .list{position:absolute;left:200px;top:0;bottom:0;width:250px;border-right:1px solid rgba(0,0,0,.06);padding:10px 8px}
.mw-notes .list div{padding:10px 12px;border-radius:8px;margin-bottom:2px}
.mw-notes .list div.on{background:#e5b53a;color:#fff}
.mw-notes .list b{display:block;font-size:13.5px}
.mw-notes .list span{font-size:12px;opacity:.7}
.mw-notes .doc{position:absolute;left:450px;right:0;top:0;bottom:0;padding:26px 40px;font-size:15px;line-height:1.55}
.mw-notes .doc h4{margin:0 0 12px;font-size:24px;font-weight:700;letter-spacing:-.01em}
.mw-notes .doc p{margin:0 0 10px}
.mw-notes .ck{display:flex;gap:10px;align-items:flex-start;margin-bottom:8px}
.mw-notes .ck i{flex:0 0 17px;height:17px;border-radius:9px;border:1.5px solid #c7c4bd;margin-top:3px}
.mw-notes .ck i.y{background:#e5b53a;border-color:#e5b53a}
.mw-notes .ck.done span{color:#9a978f;text-decoration:line-through}
.mcaret{display:inline-block;width:2px;height:18px;background:#e5b53a;vertical-align:-3px;margin-left:1px}
/* mail */
.mw-mail .list{position:absolute;left:0;top:0;bottom:0;width:360px;border-right:1px solid rgba(0,0,0,.07)}
.mw-mail .it{padding:13px 18px 13px 30px;border-bottom:1px solid rgba(0,0,0,.05);position:relative}
.mw-mail .it.on{background:#0a64d8;color:#fff}
.mw-mail .it.unread::before{content:"";position:absolute;left:12px;top:19px;width:9px;height:9px;border-radius:5px;background:#0a84ff}
.mw-mail .it b{display:flex;justify-content:space-between;font-size:14px}
.mw-mail .it b small{font-weight:400;font-size:12px;opacity:.6}
.mw-mail .it div{font-size:13px;margin-top:2px}
.mw-mail .it p{margin:3px 0 0;font-size:12.5px;opacity:.6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mw-mail .read{position:absolute;left:360px;right:0;top:0;bottom:0;padding:28px 36px;font-size:14.5px;line-height:1.6;color:#333}
.mw-mail .read h4{margin:0 0 4px;font-size:21px;color:#1d1d1f}
/* editor */
.mw-code{background:#1f2126;color:#d7dae0}
.mw-code .tb{background:#272a30;border-bottom-color:rgba(255,255,255,.06)}
.mw-code .ttl{color:#c8ccd4}
.mw-code .side{position:absolute;left:0;top:0;bottom:0;width:210px;background:#24272d;border-right:1px solid rgba(255,255,255,.05);padding:14px 12px;font:12.5px/1.9 "SF Mono",ui-monospace,Menlo,monospace;color:#9aa1ad}
.mw-code .side .on{color:#fff;background:rgba(122,162,255,.18);border-radius:5px;padding:0 6px;margin:0 -6px}
.mw-code pre{position:absolute;left:210px;right:0;top:0;bottom:0;margin:0;padding:18px 22px;font:13.5px/1.75 "SF Mono",ui-monospace,Menlo,monospace;color:#d7dae0;white-space:pre}
.mw-code .k{color:#ff7ab2}.mw-code .ty{color:#6bdfff}.mw-code .s{color:#ff8170}.mw-code .c{color:#7f8c98}.mw-code .n{color:#d9c97c}
.mw-code .ln{display:inline-block;width:28px;color:#5c6370}
/* calendar */
.mw-cal .grid{position:absolute;left:0;right:0;top:0;bottom:0;display:grid;grid-template-columns:56px repeat(5,1fr)}
.mw-cal .hd{grid-column:1/-1;display:grid;grid-template-columns:56px repeat(5,1fr);height:44px;border-bottom:1px solid rgba(0,0,0,.07);font-size:13px;color:#666;align-items:center}
.mw-cal .ev{position:absolute;border-radius:7px;padding:6px 9px;font-size:12.5px;font-weight:600;line-height:1.3}
/* lock screen */
.mw-lock{background:linear-gradient(160deg,#5f6f8c,#2f3a52 60%,#222a3c);color:#fff}
.mw-lock .clock{position:absolute;left:0;right:0;top:90px;text-align:center;font-size:96px;font-weight:600;letter-spacing:-.02em;opacity:.95}
.mw-lock .date{position:absolute;left:0;right:0;top:66px;text-align:center;font-size:20px;font-weight:600;opacity:.85}
.mw-lock .av{position:absolute;left:50%;top:390px;width:84px;height:84px;margin-left:-42px;border-radius:42px;background:linear-gradient(180deg,#c9b8a6,#8d7a68);display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:600}
.mw-lock .nm{position:absolute;left:0;right:0;top:486px;text-align:center;font-size:17px;font-weight:600}
.mw-lock .pw{position:absolute;left:50%;top:520px;width:200px;height:32px;margin-left:-100px;border-radius:16px;background:rgba(255,255,255,.22);font-size:13px;display:flex;align-items:center;padding:0 14px;color:rgba(255,255,255,.75);letter-spacing:4px}