:root{--bg:#fff;--ink:#1d1d1f;--mute:#6e6e73;--line:#e8e8ed;--soft:#f5f5f7;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;font-family:ui-sans-serif,-apple-system,SF Pro Text,system-ui,sans-serif}*{box-sizing:border-box}body{background:var(--bg);color:var(--ink);margin:0}a{color:inherit}.top{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;padding:20px 40px;display:flex}.mark{letter-spacing:-.02em;font-weight:650}.top nav{color:var(--mute);gap:24px;font-size:14px;display:flex}.top nav a{text-decoration:none}.top nav a:hover{color:var(--ink)}main{max-width:1180px;margin:0 auto;padding:0 40px 120px}h1{letter-spacing:-.035em;margin:0 0 20px;font-size:clamp(40px,6vw,68px);font-weight:650;line-height:1}h2{letter-spacing:-.02em;margin:0 0 8px;font-size:28px;font-weight:620}p{color:var(--mute);max-width:52ch;margin:0 0 24px;line-height:1.55}code{color:var(--ink);font-family:ui-monospace,SF Mono,monospace;font-size:.9em}.hero{grid-template-columns:minmax(300px,420px) 1fr;align-items:center;gap:48px;padding:72px 0 56px;display:grid}.controls{flex-wrap:wrap;gap:10px;margin-bottom:28px;display:flex}button,.file{font:inherit;color:var(--ink);background:var(--soft);border:1px solid var(--line);cursor:pointer;border-radius:999px;padding:10px 18px;font-size:14px;transition:background .15s,border-color .15s}button:hover,.file:hover{background:#ededf0;border-color:#d2d2d7}button.primary{background:var(--ink);color:#fff;border-color:var(--ink)}button.primary:hover{background:#000}.file input{display:none}.slider{color:var(--mute);gap:10px;margin-bottom:16px;font-size:14px;display:grid}.slider span{justify-content:space-between;display:flex}.slider output{color:var(--ink);font-variant-numeric:tabular-nums}input[type=range]{width:100%;accent-color:var(--ink)}.options{flex-wrap:wrap;align-items:center;gap:20px 28px;display:flex}.check{color:var(--mute);align-items:center;gap:8px;font-size:14px;display:flex}.finish{color:var(--mute);align-items:center;gap:10px;font-size:14px;display:flex}.finish label{cursor:pointer;display:flex}.finish input{opacity:0;pointer-events:none;position:absolute}.finish i{background:var(--sw);border-radius:50%;width:20px;height:20px;box-shadow:inset 0 0 0 1px #0000002e,0 0 0 2px #fff,0 0 0 3px #0000}.finish input:checked+i{box-shadow:inset 0 0 0 1px #0000002e, 0 0 0 2px #fff, 0 0 0 3.5px var(--ink)}.finish input:focus-visible+i{outline-offset:4px;outline:2px solid #0071e3}.stage{filter:drop-shadow(0 30px 28px #00000029)drop-shadow(0 6px 8px #0000001a);place-items:center;height:560px;display:grid}.phone{--w:240px;--h:344px;--t:15px;--rim:3px;--bez:7px;--r:30px;--rh:9px;--sr:calc(var(--r) - var(--rim) - var(--bez));--ti:linear-gradient(160deg, #5b5e66 0%, #2c2e33 22%, #44474e 50%, #26282c 78%, #50535a 100%);--ti-edge:linear-gradient(90deg, #1d1e22, #5d6068 45%, #3a3c42 55%, #18191c);--ti-btn:linear-gradient(180deg, #62656d, #2a2c31);--ti-hinge:linear-gradient(90deg, #17181b, #4b4e55 50%, #17181b);--glass:#030304;width:calc(var(--w) * 2);height:var(--h);perspective:calc(var(--w) * 3.75);position:relative}.phone[data-finish=white]{--ti:linear-gradient(160deg, #fbfaf7 0%, #d8d5ce 22%, #f1efea 50%, #cbc8c0 78%, #f4f2ed 100%);--ti-edge:linear-gradient(90deg, #bdb9b1, #f7f6f2 45%, #e1ded7 55%, #b7b3aa);--ti-btn:linear-gradient(180deg, #f3f1ec, #c4c0b8);--ti-hinge:linear-gradient(90deg, #a9a59c, #f2f0eb 50%, #a9a59c)}.half{width:var(--w);height:var(--h);position:absolute;top:0}.half.fixed{left:var(--w);transform-origin:0}.half.moving{transform-origin:100%;transform-style:preserve-3d;left:0}.body{background:var(--ti);padding:var(--rim);position:absolute;inset:0;overflow:hidden;box-shadow:inset 0 0 0 .5px #ffffff59,inset 0 0 0 1px #00000040}.glass{background:var(--glass);height:100%;padding:var(--bez);position:relative}.screen{background:#000;height:100%;position:relative;overflow:hidden}.screen canvas{width:100%;height:100%;display:block}.screen:after{content:"";pointer-events:none;background:linear-gradient(118deg,#ffffff17 0%,#ffffff05 32%,#0000 33%) no-repeat;position:absolute;inset:0}.fixed .screen:after,.front .screen:after{background-size:200% 100%}.front .screen:after{background-position:0 0}.fixed .screen:after{background-position:100% 0}.fixed .body{border-radius:var(--rh) var(--r) var(--r) var(--rh);padding-left:0}.fixed .glass{border-radius:0 calc(var(--r) - var(--rim)) calc(var(--r) - var(--rim)) 0;padding-left:0}.fixed .screen{border-radius:0 var(--sr) var(--sr) 0}.face.front{border-radius:var(--r) var(--rh) var(--rh) var(--r);padding-right:0;right:-1px}.front .glass{border-radius:calc(var(--r) - var(--rim)) 0 0 calc(var(--r) - var(--rim));padding-right:0}.front .screen{border-radius:var(--sr) 0 0 var(--sr)}.face.back{border-radius:var(--rh) var(--r) var(--r) var(--rh)}.back .glass{border-radius:calc(var(--rh) - 1px) calc(var(--r) - var(--rim)) calc(var(--r) - var(--rim)) calc(var(--rh) - 1px)}.back .screen{border-radius:var(--sr)}.shade{pointer-events:none;z-index:2;border-radius:inherit;position:absolute;inset:0}.fixed .shade{opacity:var(--occlude,0);background:linear-gradient(90deg,#000000e6,#0000 75%)}.front .shade{opacity:var(--lit-front,0);background:#000}.back .shade{opacity:var(--lit-back,0);background:#000}.face{backface-visibility:hidden;position:absolute;inset:0}.face.back{transform:translateZ(calc(var(--t) * -1)) rotateY(180deg)}.edge{top:calc(var(--r) * .55);bottom:calc(var(--r) * .55);left:calc(var(--t) / -2);width:var(--t);background:var(--ti-edge);backface-visibility:hidden;transform:translateZ(calc(var(--t) / -2)) rotateY(-90deg);border-radius:3px;position:absolute}.island{aspect-ratio:3.4;z-index:1;background:#000;border-radius:999px;width:29%;position:absolute;top:2.6%;left:50%;transform:translate(-50%);box-shadow:inset 0 0 0 .5px #ffffff0f}.island:after{content:"";aspect-ratio:1;background:radial-gradient(circle at 35% 35%,#2b3550,#0b0d14 60%);border-radius:50%;width:22%;position:absolute;top:50%;right:13%;transform:translateY(-50%)}.punch{aspect-ratio:1;z-index:1;background:radial-gradient(circle at 40% 38%,#29324a 0 12%,#0b0d14 34%,#000 62%);border-radius:50%;width:7%;position:absolute;top:5%;left:85.7%;transform:translate(-50%,-50%);box-shadow:0 0 0 .5px #ffffff14}.hinge{background:var(--ti-hinge);border-radius:6px;width:12px;position:absolute;top:1px;bottom:1px;left:-6px}.btn{background:var(--ti-btn);border-radius:2px;position:absolute}.btn.vol,.btn.cam{width:4px;right:-2.5px}.btn.vol.up{height:8.5%;top:19%}.btn.vol.down{height:8.5%;top:29.5%}.btn.cam{border-radius:1.5px;height:10%;top:64%}.btn.side{width:15%;height:4px;top:-2.5px;right:17%}.flat{border-top:1px solid var(--line);padding:56px 0}.pair{flex-wrap:wrap;align-items:flex-end;gap:48px;margin-top:40px;padding:0 12px;display:flex}figure{margin:0}figcaption{color:var(--mute);margin-top:22px;font-family:ui-monospace,monospace;font-size:13px}.hw{box-shadow:0 0 0 var(--bz,7px) #030304, 0 0 0 calc(var(--bz,7px) + 2.5px) #3a3c42, 0 0 0 calc(var(--bz,7px) + 3px) #00000059, 0 26px 36px -14px #00000059;background:#000;position:relative;overflow:hidden}.screen-flat{border-radius:20px}.screen-flat.cover{width:233px;height:339px}.screen-flat.inner{width:481px;height:339px}.screen-flat canvas{width:100%;height:100%;display:block}.layout{border-top:1px solid var(--line);padding:56px 0}.devices{flex-wrap:wrap;align-items:flex-end;gap:44px;margin-top:40px;padding:0 8px;display:flex}.device figcaption b{color:var(--ink);font-weight:500}.device .frame{--bz:5px;background:#fff;border-radius:18px}.device .frame.bent{transform:perspective(900px) rotateY(var(--bend,0deg))}.device .frame .island{z-index:4;width:30%;top:4px}.device .frame .punch{z-index:4;top:22px}.ios{--sbh:30px;transform-origin:0 0;color:#000;letter-spacing:-.01em;-webkit-font-smoothing:antialiased;background:#fff;font:17px/1.25 -apple-system,SF Pro Text,system-ui,sans-serif;position:absolute;top:0;left:0;overflow:hidden}.ios.has-island{--sbh:60px}.sb{height:var(--sbh);z-index:3;align-items:center;gap:6px;padding:0 22px;font-size:15px;display:flex;position:absolute;top:0;left:0;right:0}.sb b{font-weight:600}.sb-date{margin-right:auto;font-weight:500}.sb.notch{grid-template-columns:35% 1fr 35%;padding:0;font-size:17px;display:grid}.sb.notch b,.sb.notch .sb-icons{justify-self:center}.sb.punch-sb{padding:0 22% 0 34px;font-size:17px}.ios-grid{grid-template-rows:minmax(0,1fr);grid-template-columns:minmax(0,1fr);display:grid;position:absolute;inset:0}.gap{background:#c6c6c8}.gap .punch{aspect-ratio:1;z-index:1;background:radial-gradient(circle at 40% 38%,#29324a 0 12%,#0b0d14 34%,#000 62%);border-radius:50%;width:7%;position:absolute;top:5%;left:85.7%;transform:translate(-50%,-50%);box-shadow:0 0 0 .5px #ffffff14}.hinge{background:#f2f2f7}.pane{min-width:0;min-height:0;padding-top:var(--sbh);background:#fff;position:relative;overflow:hidden}.pane.below{padding-top:14px}.nav{color:#007aff;justify-content:space-between;padding:8px 16px 0;display:flex}.pane h1{letter-spacing:.01em;margin:4px 16px 8px;font-size:34px;font-weight:700;line-height:41px}.search{color:#8e8e93;background:#7676801f;border-radius:10px;align-items:center;gap:6px;height:36px;margin:0 16px 8px;padding:0 8px;display:flex}.search svg{width:18px;height:18px}.mail{gap:6px;padding:11px 0 0 8px;display:flex}.mail .dot{background:#007aff;border-radius:50%;flex:none;width:10px;height:10px;margin-top:6px}.mail .dot.read{visibility:hidden}.mail .m{border-bottom:.5px solid #c6c6c8;flex:1;min-width:0;padding:0 16px 11px 0}.m1{justify-content:space-between;align-items:baseline;gap:8px;display:flex}.m1 b{white-space:nowrap;text-overflow:ellipsis;font-weight:600;overflow:hidden}.m1 span{color:#8e8e93;flex:none;font-size:15px}.m1 em{color:#c4c4c7;margin-left:4px;font-style:normal}.m2{white-space:nowrap;text-overflow:ellipsis;font-size:15px;overflow:hidden}.m3{color:#8e8e93;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:15px;display:-webkit-box;overflow:hidden}.mail.sel{color:#fff;background:#007aff;border-radius:10px;margin:0 8px;padding-left:4px}.mail.sel .dot{background:#fff}.mail.sel .m{border-color:#0000}.mail.sel .m1 span,.mail.sel .m3,.mail.sel .m1 em{color:#fffc}.tb{height:var(--tbh,84px);color:#007aff;background:#f9f9f9f0;border-top:.5px solid #c6c6c8;grid-template-columns:1fr auto 1fr;align-items:start;padding:10px 18px 0;display:grid;position:absolute;bottom:0;left:0;right:0}.tb-c{text-align:center;color:#000;font-size:12px;display:grid}.tb-c small{color:#8e8e93;font-size:11px}.tb-r{justify-self:end}.dtb{justify-content:space-between;padding:12px 28px 0;display:flex}.below .tb,.below .dtb{height:60px}.pane.detail{padding-left:24px;padding-right:24px}.pane.detail.below{padding-top:18px}.dhead{border-bottom:.5px solid #c6c6c8;align-items:center;gap:12px;padding:18px 0 14px;display:flex}.av{color:#fff;background:linear-gradient(#a5a5ab,#85858b);border-radius:50%;flex:none;place-items:center;width:40px;height:40px;font:600 16px -apple-system,system-ui,sans-serif;display:grid}.who{flex:1;display:grid}.who span,.when{color:#8e8e93;font-size:15px}.pane h2{margin:14px 0 10px;font-size:22px;font-weight:700;line-height:28px}.pane p{color:#000;max-width:none;margin:0 0 12px;font-size:17px;line-height:23px}.attach{background:#f2f2f7;border-radius:12px;align-items:center;gap:12px;margin-top:4px;padding:10px;font-size:15px;display:flex}.attach i{background:linear-gradient(135deg,#5ac8fa,#af52de);border-radius:8px;flex:none;width:44px;height:44px}.attach div{display:grid}.attach span{color:#8e8e93;font-size:13px}.hi{z-index:4;background:#000;border-radius:3px;width:140px;height:5px;margin-left:-70px;position:absolute;bottom:8px;left:50%}.state{color:var(--mute);white-space:pre;margin-top:8px;font-family:ui-monospace,monospace;font-size:11px}@media (width<=900px){.hero{grid-template-columns:1fr}.stage{height:420px}.phone{--w:160px;--h:229px;--t:10px;--rim:2px;--bez:5px;--r:21px;--rh:6px}main,.top{padding-left:20px;padding-right:20px}.screen-flat.inner{aspect-ratio:2670/1878;width:100%;max-width:481px;height:auto}}