:root{color-scheme:light dark;--ease-out: cubic-bezier(.23, 1, .32, 1);--ease-in-out: cubic-bezier(.77, 0, .175, 1);--page: light-dark(#eceef1, #09090b);--ambient-mix: 9%;--ink: light-dark(#111318, #f3f3f5);--ink-soft: light-dark(#5b606a, #a0a3aa);--ink-faint: light-dark(rgb(0 0 0 / .06), rgb(255 255 255 / .08));--accent: light-dark(#007aff, #0a84ff);--guide: light-dark(#ff008c, #ff008c);--win: light-dark(#f6f6f7, #1f1f21);--win-bar: light-dark(#ececee, #2a2a2c);--win-ink: light-dark(#1d1d1f, #ececee);--win-ink-soft: light-dark(#86868b, #8e8e93);--win-line: light-dark(rgb(0 0 0 / .09), rgb(255 255 255 / .08));--win-highlight: light-dark(rgb(255 255 255 / .7), rgb(255 255 255 / .1));--canvas-bg: light-dark(#e9e9eb, #19191b);--panel: light-dark(rgb(0 0 0 / .015), rgb(255 255 255 / .03));--box: light-dark(rgb(0 0 0 / .035), rgb(255 255 255 / .06));--field: light-dark(#fff, rgb(255 255 255 / .07));--field-line: light-dark(rgb(0 0 0 / .1), rgb(255 255 255 / .1));--track: light-dark(rgb(0 0 0 / .06), rgb(0 0 0 / .25));--glass: light-dark(rgb(255 255 255 / .9), rgb(255 255 255 / .09));--glass-line: light-dark(rgb(0 0 0 / .07), rgb(255 255 255 / .1));--menu: light-dark(rgb(246 246 248 / .82), rgb(40 40 43 / .82));--list: light-dark(#fff, #1c1c1e);--dock: light-dark(rgb(255 255 255 / .22), rgb(20 20 24 / .3));--card: light-dark(rgb(255 255 255 / .6), rgb(255 255 255 / .045));--card-line: light-dark(rgb(0 0 0 / .06), rgb(255 255 255 / .08));--shot-bg: light-dark(rgb(20 24 40 / .045), rgb(0 0 0 / .3));--screen-shadow: 0 0 0 .5px rgb(0 0 0 / .06), 0 2px 4px rgb(0 0 0 / .04), 0 24px 48px -16px rgb(20 24 40 / .22), 0 60px 120px -40px rgb(20 24 40 / .3);--glow-opacity: .38;--stage-max: 1180px;--bento-max: 1060px}:root[data-theme=light]{color-scheme:light}:root[data-theme=dark]{color-scheme:dark;--screen-shadow: 0 0 0 .5px rgb(255 255 255 / .09), 0 30px 80px -20px rgb(0 0 0 / .9);--glow-opacity: .26;--ambient-mix: 14%}*,*:before,*:after{box-sizing:border-box}@property --ambient{syntax: "<color>"; inherits: false; initial-value: transparent;}html{--ambient: var(--page);background:color-mix(in oklab,var(--ambient) var(--ambient-mix),var(--page));transition:--ambient 1s ease;color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}body{margin:0;padding-inline:20px;overflow-x:clip}main{min-height:calc(100svh + 280px);container-type:inline-size}.i{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}.i-fill{fill:currentColor;stroke:none}.i-wide{width:1.25em}.sprite{position:absolute;width:0;height:0;overflow:hidden}.nav{max-width:1180px;margin-inline:auto;padding-block:18px;display:flex;align-items:center;justify-content:space-between;gap:16px}.brand{display:flex;align-items:center;gap:8px;color:inherit;text-decoration:none;font-size:15px;font-weight:600;letter-spacing:-.01em;white-space:nowrap}.brand img{width:34px;height:34px}.nav-end{display:flex;align-items:center;gap:14px}.nav-version{font-size:13px;font-variant-numeric:tabular-nums;color:var(--ink-soft);white-space:nowrap}.cta{display:inline-flex;align-items:center;gap:7px;height:38px;padding-inline:14px 16px;border-radius:999px;background:var(--ink);color:var(--page);font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap;box-shadow:inset 0 1px #ffffff2e,0 1px 2px #0000001f,0 6px 16px -6px #00000059;transition:scale .14s var(--ease-out),opacity .15s ease}.cta-long{margin-left:-3px}.cta .i{font-size:17px;stroke-width:2}.cta:active{scale:.97}@media(hover:hover)and (pointer:fine){.cta:hover{opacity:.88}}@media(max-width:480px){.brand{font-size:14px}.cta{padding-inline:12px 14px;font-size:13px}.cta-long,.nav-version{display:none}}.cta:focus-visible,.appearance button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.hero{position:relative;z-index:1;text-align:center;padding-block:clamp(36px,8vh,84px) clamp(28px,5vh,44px)}.hero h1{position:relative;z-index:2;margin:0;font-size:clamp(40px,7vw,76px);line-height:1;letter-spacing:-.045em;font-weight:650}.title-layer{position:relative;display:inline-block;vertical-align:top;--pad: 8px}.title-text{display:block;text-wrap:balance}.title-chrome{position:absolute;left:50%;top:50%;width:calc(100% + 2 * var(--pad));height:calc(100% + 2 * var(--pad));translate:-50% -50%;border:1px solid var(--accent);border-radius:4px;visibility:hidden}.title-layer.is-selected .title-chrome{visibility:visible}.title-chrome [data-grip]{position:absolute;width:16px;height:16px;margin:-8px}.title-chrome [data-grip]:before{content:"";position:absolute;inset:4px;background:var(--accent);transition:scale 80ms var(--ease-out),box-shadow 80ms ease}.title-chrome [data-turn]{position:absolute;width:26px;height:26px;margin:-13px}[data-grip="-1,-1"],[data-turn="-1,-1"]{left:0;top:0}[data-grip="1,-1"],[data-turn="1,-1"]{left:100%;top:0}[data-grip="-1,1"],[data-turn="-1,1"]{left:0;top:100%}[data-grip="1,1"],[data-turn="1,1"]{left:100%;top:100%}[data-turn="-1,-1"]{translate:-9px -9px}[data-turn="1,-1"]{translate:9px -9px}[data-turn="-1,1"]{translate:-9px 9px}[data-turn="1,1"]{translate:9px 9px}.title-chip{position:absolute;left:0;top:0;z-index:3;padding:2px 7px;border-radius:5px;background:var(--accent);color:#fff;font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;pointer-events:none;display:inline-flex;align-items:center;gap:3px;opacity:0;transition:opacity .12s ease}.title-chip.is-visible{opacity:1;transition-duration:0ms}.title-chip svg{width:8px;height:10px}.title-guide{position:fixed;left:0;top:0;z-index:60;background:var(--guide);pointer-events:none;opacity:0}.title-guide-x{width:1px;height:100vh}.title-guide-y{width:100vw;height:1px}.title-guide.is-visible{opacity:.9}@media(hover:hover)and (pointer:fine){.title-layer{cursor:grab;user-select:none;-webkit-user-select:none}.title-layer.is-moving{cursor:grabbing}.title-layer:not(.is-selected):hover .title-chrome{visibility:visible;border-color:color-mix(in srgb,var(--accent) 50%,transparent);box-shadow:0 0 6px color-mix(in srgb,var(--accent) 35%,transparent)}.title-layer:not(.is-selected) .title-chrome i{display:none}[data-grip="-1,-1"],[data-grip="1,1"]{cursor:nwse-resize}[data-grip="1,-1"],[data-grip="-1,1"]{cursor:nesw-resize}[data-grip]:hover:before,.title-layer.is-resizing [data-grip].is-held:before{scale:1.35;box-shadow:0 0 6px color-mix(in srgb,var(--accent) 40%,transparent)}[data-turn],.title-layer.is-turning{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg stroke='%23fff' stroke-width='4.6'%3E%3Cpath d='M12 5.5a6.5 6.5 0 1 0 6.5 6.5'/%3E%3Cpath d='M9.4 2.9 12 5.5 9.4 8.1'/%3E%3C/g%3E%3Cg stroke='%23000' stroke-width='2'%3E%3Cpath d='M12 5.5a6.5 6.5 0 1 0 6.5 6.5'/%3E%3Cpath d='M9.4 2.9 12 5.5 9.4 8.1'/%3E%3C/g%3E%3C/svg%3E") 12 12,crosshair}.title-layer.is-resizing-nwse{cursor:nwse-resize}.title-layer.is-resizing-nesw{cursor:nesw-resize}}.hero p{margin:40px auto 0;max-width:34ch;font-size:clamp(16px,1.6vw,19px);line-height:1.45;color:var(--ink-soft);text-wrap:pretty}.lost{min-height:auto}.lost p{margin-top:20px}.lost .cta{margin-top:32px}.appearance{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;margin-top:28px;padding:3px;border-radius:999px;background:var(--ink-faint);box-shadow:inset 0 0 0 1px var(--ink-faint)}.appearance button{position:relative;display:flex;align-items:center;justify-content:center;gap:6px;height:30px;padding-inline:14px;border:0;border-radius:999px;background:none;color:var(--ink-soft);font:inherit;font-size:13px;font-weight:500;cursor:pointer;transition:color .15s ease}.appearance button .i{font-size:15px}.appearance button[aria-pressed=true]{color:var(--ink)}.appearance-thumb{position:absolute;inset:3px auto 3px 3px;width:calc(50% - 3px);border-radius:999px;background:light-dark(#fff,#48484e);box-shadow:0 1px 2px #0000001f,0 2px 8px -2px #0000001f;transition:translate .24s var(--ease-out)}:root[data-theme=dark] .appearance-thumb{translate:100% 0;box-shadow:inset 0 .5px #ffffff2e,0 1px 3px #00000080}.stage{position:relative;max-width:var(--stage-max);margin-inline:auto;--screen-end: tan(atan2( min(var(--bento-max), 100cqw), min(var(--stage-max), 100cqw)))}.glow{position:absolute;inset:-2% -3% 4%;z-index:-1;opacity:var(--glow-opacity);pointer-events:none}.glow>.wall-img{filter:blur(64px) saturate(1.5);border-radius:20%}.screen-scaler{transform-origin:50% 0}@supports (animation-timeline: scroll()){@media(prefers-reduced-motion:no-preference){.screen-scaler{animation:screen-shrink linear both;animation-timeline:scroll(root);animation-range:0 70svh}}}@keyframes screen-shrink{0%{scale:1}to{scale:var(--screen-end)}}.screen{position:relative;aspect-ratio:1440 / 900;border-radius:clamp(10px,2vw,12px);overflow:hidden;isolation:isolate;box-shadow:var(--screen-shadow);background:#222;user-select:none;-webkit-user-select:none}.screen:after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 .5px #ffffff1a;pointer-events:none}.note{max-width:560px;margin-inline:auto;padding-block:clamp(40px,8vh,72px) 64px;text-align:center;font-size:14px;line-height:1.55;color:var(--ink-soft);text-wrap:pretty}.note p{margin:0}.note p+p{margin-top:12px}.note b{color:var(--ink);font-weight:600}.badge{display:flex;width:fit-content;align-items:center;gap:4px;margin:0 auto 6px;padding:2px 9px 2px 7px;border-radius:999px;background:var(--card);box-shadow:inset 0 0 0 .5px var(--card-line),0 1px 2px #0000000a;color:var(--ink);font-size:12px;font-weight:600;line-height:1.35;font-variant-numeric:tabular-nums}:root[data-theme=dark] .badge{background:#48484e;box-shadow:inset 0 .5px #ffffff2e,0 1px 3px #00000080}.badge .i{font-size:13px;fill:url(#apple-bands);stroke:none;translate:0 -.5px}.badge-version{display:none}@media(max-width:480px){.badge-version{display:inline}}.badge-stage{text-transform:capitalize}.badge-stage:empty{display:none}.badge:has(.badge-stage:empty) .badge-version{display:inline}.features{max-width:var(--bento-max);margin-inline:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding-block:clamp(24px,4vh,48px) clamp(56px,9vh,104px);--wash: light-dark( color-mix(in oklab, #000000 5%, transparent), color-mix(in oklab, #FFFFFF 4%, transparent))}.feature,.notes li{border-radius:22px;overflow:hidden;background:radial-gradient(120% 100% at 0% 0%,var(--wash),transparent 62%),var(--card);box-shadow:0 0 0 1px var(--card-line),0 1px 2px #1418280a,0 16px 36px -28px #14182880}.feature{display:flex;flex-direction:column;min-height:clamp(300px,36vw,400px);padding:26px 26px 0}.feature-wide{grid-column:span 2}.feature h2{margin:0;font-size:clamp(19px,1.9vw,22px);line-height:1.2;letter-spacing:-.025em;font-weight:650;text-wrap:balance;color:light-dark(#1b1d23,#f3f3f5)}.feature p{margin:10px 0 0;max-width:46ch;font-size:14.5px;line-height:1.5;color:var(--ink-soft);text-wrap:pretty}.notes{grid-column:1 / -1;margin:clamp(6px,2vh,18px) 0;list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:0}.notes li{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-height:170px;padding:28px 22px;text-align:center;color:light-dark(#1b1d23,#f3f3f5)}.notes h2{margin:0;font-size:17px;line-height:1.25;letter-spacing:-.02em;font-weight:600}.snap-scene{position:relative;display:grid;place-items:center;width:140px;height:64px}.snap-guide{position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--guide);opacity:0}.snap-layer{position:relative;padding:4px 9px;outline:1px solid var(--accent);font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1}.snap-layer>i{position:absolute;width:6px;height:6px;margin:-3px;background:var(--accent)}.snap-layer>i:nth-of-type(1){left:0;top:0}.snap-layer>i:nth-of-type(2){left:100%;top:0}.snap-layer>i:nth-of-type(3){left:0;top:100%}.snap-layer>i:nth-of-type(4){left:100%;top:100%}.snap-cursor{position:absolute;left:58%;top:62%;width:14px;height:23px;filter:drop-shadow(0 1px 1px rgb(0 0 0 / .3))}.fontbook{position:relative;width:64px;height:64px;border-radius:15px;overflow:hidden;background:linear-gradient(180deg,#c3c4c8,#8f9095);box-shadow:inset 0 0 0 .5px #0000002e,inset 0 1px #ffffff59,0 1px 2px #0000001f,0 4px 10px -4px #0000004d}.fontbook:before{content:"";position:absolute;inset:0 0 0 auto;width:15px;background:linear-gradient(90deg,#ffffff47,#ffffff8c);box-shadow:inset 1px 0 #ffffff8c}.fontbook:after{content:"";position:absolute;right:4px;top:22px;width:4px;height:14px;border-radius:1px;background:#ffffffd9}.fontbook b{position:absolute;left:8px;bottom:8px;color:#fff;font-size:27px;font-weight:600;line-height:1;letter-spacing:-.02em;text-shadow:0 1px 1px rgb(0 0 0 / .12)}.fan{display:grid;place-items:center;width:64px;height:64px;isolation:isolate}.fan i{grid-area:1 / 1;width:74px;aspect-ratio:1440 / 900;border-radius:6px;background:var(--shot-bg) center / cover;box-shadow:0 0 0 .5px #0003,0 8px 18px -5px #00000059;rotate:var(--fan-rotate, 0deg);translate:var(--fan-x, 0) var(--fan-y, 0);transition:rotate .18s var(--ease-out),translate .18s var(--ease-out)}.fan i:nth-child(1){background-image:url(assets/wallpapers/macos/ventura-graphic.jpg);--fan-rotate: -8deg;--fan-x: -22px;--fan-y: 3px}.fan i:nth-child(2){background-image:url(assets/wallpapers/macos/sonoma.jpg);z-index:1;--fan-y: -3px}.fan i:nth-child(3){background-image:url(assets/wallpapers/macos/radial-sky-blue.jpg);--fan-rotate: 8deg;--fan-x: 22px;--fan-y: 3px}@media(prefers-reduced-motion:no-preference){.snap-layer{animation:snap-drag 3.2s infinite}.snap-guide{animation:snap-guide 3.2s infinite}.note-fonts h2,.fontbook b{animation:font-cycle 8s step-end infinite}}@media(hover:hover)and (pointer:fine)and (prefers-reduced-motion:no-preference){.note-walls:hover .fan i{transition-duration:.26s}.note-walls:hover .fan i:nth-child(1){--fan-rotate: -15deg;--fan-x: -44px;--fan-y: 5px}.note-walls:hover .fan i:nth-child(2){--fan-y: -8px;transition-delay:30ms}.note-walls:hover .fan i:nth-child(3){--fan-rotate: 15deg;--fan-x: 44px;--fan-y: 5px;transition-delay:60ms}}@keyframes snap-drag{0%,16%{translate:0 0;animation-timing-function:var(--ease-in-out)}40%,48%{translate:20px 0;animation-timing-function:var(--ease-in-out)}68%{translate:6px 0;animation-timing-function:cubic-bezier(.32,0,.67,0)}71%,to{translate:0 0}}@keyframes snap-guide{0%,12%{opacity:1}17%,70.5%{opacity:0}71%,to{opacity:1}}@keyframes font-cycle{0%{font-family:-apple-system,BlinkMacSystemFont,Inter,system-ui,sans-serif}25%{font-family:ui-serif,New York,Georgia,serif}37.5%{font-family:Comic Sans MS,Chalkboard SE,cursive}50%{font-family:Didot,"Bodoni 72",serif}62.5%{font-family:ui-monospace,SF Mono,Menlo,monospace}75%{font-family:Marker Felt,Chalkboard SE,fantasy}87.5%{font-family:American Typewriter,Courier New,serif}}.shot{position:relative;margin:24px 0 0;flex:1;min-height:60px}.shot-fill{--shot-radius: 12px;border-radius:var(--shot-radius) var(--shot-radius) 0 0;overflow:hidden;background:var(--shot-bg);box-shadow:0 0 0 1px var(--card-line),0 -1px 24px -12px #14182859}.shot .wall-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.shot .layer{font-weight:700;letter-spacing:-.02em}.shot .serif{font-family:ui-serif,New York,Iowan Old Style,Georgia,serif;font-weight:500;letter-spacing:-.01em}.shot .rounded{font-family:ui-rounded,SF Pro Rounded,-apple-system,system-ui,sans-serif;letter-spacing:-.015em}.shot .comic{font-family:Comic Sans MS,Chalkboard SE,Comic Neue,cursive;letter-spacing:0}.shot-stage{--stage-w: 848;--stage-h: 298;--fit: max(.5, min( var(--shot-w, 690) / var(--stage-w), var(--shot-h, 230) / var(--stage-h)));position:absolute;left:max(0px,(var(--shot-w, 690) - var(--stage-w) * var(--fit)) * .5px);top:0;width:calc(var(--stage-w) * 1px);height:600px;transform-origin:0 0;scale:var(--fit);font-size:13px;color:var(--win-ink)}.shot .window,.sheet{box-shadow:0 0 0 .5px #00000038,0 10px 30px -12px #0000004d}.shot-editor .window{left:0;top:0;width:848px;height:560px}.shot-editor .canvas-area{place-items:start center;padding-top:30px}.shot-editor .canvas{width:500px}.shot-editor .inspector{width:260px}.shot-editor .textarea{height:56px}.shot .appearance-switch .on{background:var(--accent);color:#fff}.shot .appearance-switch .on .i{fill:currentColor}.shot-cursor{position:absolute;left:316px;top:194px;width:16px;height:27px;filter:drop-shadow(0 1px 1px rgb(0 0 0 / .3))}.shot-fill .surface{inset:0 auto auto 50%;min-width:100%;min-height:100%;aspect-ratio:1440 / 900;translate:-50% 0}.shot-fill .menubar{padding-inline:calc(16 * var(--px) + var(--shot-radius) * .45 + max(0px,100cqw - var(--shot-w, 1e5) * 1px) / 2)}@media(min-width:621px){.feature:has(.shot-fill){padding-bottom:26px}.shot-fill{flex:none;margin-top:auto;aspect-ratio:1440 / 900;border-radius:var(--shot-radius);box-shadow:0 0 0 1px var(--card-line),0 10px 24px -14px #14182859}.feature:has(.shot-fill) .feature-text{margin-bottom:24px}}.shot-appearance .is-light{color-scheme:light}.shot-appearance .is-dark{color-scheme:dark}.shot-appearance .wall-img:after{opacity:0}.shot-appearance .is-dark .wall-img img{filter:brightness(.42) saturate(.75) hue-rotate(8deg)}.shot-appearance .is-dark .wall-img:after{opacity:.55;background:linear-gradient(180deg,#0b1236,#1d2a5a);mix-blend-mode:multiply}.shot-appearance .layer{--y: .505;--size: .15}.shot .script{font-family:Snell Roundhand,Apple Chancery,Brush Script MT,cursive;font-weight:700;letter-spacing:0}.shot-appearance .is-dark{--edge: 68%;clip-path:polygon(var(--edge) 0,140% 0,140% 100%,calc(var(--edge) - 36%) 100%)}@media(prefers-reduced-motion:reduce){.shot-appearance .is-light .layer{--x: .3;--size: .085}.shot-appearance .is-dark .layer{--x: .71;--y: .56;--size: .085}.feature-appearance .shot-toggle{display:none}}.feature-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.shot-toggle{flex:none;position:relative;display:flex;align-items:center;gap:9px;height:28px;margin-top:-2px;padding-inline:11px 7px;border-radius:999px;background:var(--glass);box-shadow:0 0 0 .5px var(--glass-line),0 1px 3px #00000014,inset 0 1px 0 var(--win-highlight);border:0;color:var(--win-ink);font:inherit;font-size:12px;font-weight:600;cursor:pointer;transition:scale .14s var(--ease-out)}.shot-toggle:active{scale:.97}.shot-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.shot-toggle .switch:before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--accent);transition:opacity .18s ease}.shot-toggle .switch i{translate:11px 0}.shot-seg{gap:0;padding:3px;font-size:14px}.shot-seg .i{position:relative;width:30px;height:14px}.shot-seg .sun{color:#fff;fill:currentColor}.seg-thumb{position:absolute;left:3px;top:3px;width:30px;bottom:3px;border-radius:999px;background:var(--accent)}@media(prefers-reduced-motion:no-preference){.shot-subject .wall-fg{animation:depth-subject 8s infinite}.feature-subject .switch i{animation:depth-knob 8s infinite}.feature-subject .switch:before{animation:depth-fill 8s infinite}.shot-appearance .is-dark{animation:day-night 9s infinite}.shot-seg .seg-thumb{animation:day-night-thumb 9s infinite}.shot-seg .sun{animation:day-night-sun 9s infinite}.shot-seg .moon{animation:day-night-moon 9s infinite}}.feature-subject:has(.shot-toggle[aria-pressed=false]) .wall-fg{opacity:0}.shot-toggle[aria-pressed=false] .switch i{translate:0 0}.shot-toggle[aria-pressed=false] .switch:before{opacity:0}.shot-subject .wall-fg{transition:opacity .2s ease}@keyframes depth-knob{0%,56%{translate:11px 0;animation-timing-function:cubic-bezier(.23,1,.32,1)}58.5%,83%{translate:0 0;animation-timing-function:cubic-bezier(.23,1,.32,1)}85.5%,to{translate:11px 0}}@keyframes depth-fill{0%,56%{opacity:1;animation-timing-function:ease}58.5%,83%{opacity:0;animation-timing-function:ease}85.5%,to{opacity:1}}@keyframes depth-subject{0%,58%{opacity:1;animation-timing-function:ease}60%,85%{opacity:0;animation-timing-function:ease}89%,to{opacity:1}}@property --edge{syntax: "<percentage>"; inherits: false; initial-value: 68%;}@keyframes day-night{0%,40%{--edge: 140%;animation-timing-function:cubic-bezier(.77,0,.175,1)}50%,90%{--edge: 0%;animation-timing-function:cubic-bezier(.77,0,.175,1)}to{--edge: 140%}}@keyframes day-night-thumb{0%,38%{translate:0 0;animation-timing-function:cubic-bezier(.23,1,.32,1)}40.5%,88%{translate:30px 0;animation-timing-function:cubic-bezier(.23,1,.32,1)}90.5%,to{translate:0 0}}@keyframes day-night-sun{0%,38%{color:#fff;fill:currentColor}39%,89%{color:var(--win-ink);fill:none}90%,to{color:#fff;fill:currentColor}}@keyframes day-night-moon{0%,38%{color:var(--win-ink);fill:none}39%,89%{color:#fff;fill:currentColor}90%,to{color:var(--win-ink);fill:none}}.appearance-badge{position:absolute;right:6px;bottom:6px;width:24px;height:24px;border-radius:50%;background:#0000004d}.appearance-badge:before{content:"";position:absolute;inset:20%;border-radius:50%;border:1.5px solid #fff;background:linear-gradient(90deg,transparent 50%,#fff 50%);box-sizing:border-box}.shot-presets{--stage-h: 258}.sheet{position:absolute;left:0;top:0;width:848px;height:560px;border-radius:16px;overflow:hidden;background:var(--list)}.sheet h3{margin:0;padding:14px 20px;font-size:13px;font-weight:700;background:var(--win);border-bottom:1px solid var(--win-line)}.preset-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px 20px;padding:20px}.preset{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0}.preset-thumb{position:relative;align-self:stretch;aspect-ratio:1440 / 900;border-radius:8px;overflow:hidden;box-shadow:0 2px 8px #0003}.preset-thumb:after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px #0000001f}.preset.is-selected .preset-thumb:after{box-shadow:inset 0 0 0 3px var(--accent)}.preset>span{max-width:100%;padding:2px 7px;border-radius:5px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.preset.is-selected>span{background:var(--accent);color:#fff}@media(max-width:900px){.features{grid-template-columns:repeat(2,1fr);grid-auto-flow:dense}.feature-wide{grid-column:span 2}}@media(max-width:620px){.features,.notes{grid-template-columns:1fr}.feature-wide{grid-column:span 1}.feature{min-height:340px;padding:22px 22px 0}}@supports (animation-timeline: view()){@media(prefers-reduced-motion:no-preference){.feature,.notes{animation:enter linear both;animation-timeline:view();animation-range:entry 8% entry 55%}}}.footer{max-width:var(--bento-max);margin-inline:auto;padding-top:clamp(24px,5vh,56px);padding-bottom:clamp(28px,5vh,48px)}.footer-main{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:18px}.footer-fine{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding-top:18px;border-top:1px solid var(--ink-faint);font-size:13px;line-height:1.55;color:var(--ink-soft)}.footer-fine p{margin:0}.footer-fine a,.footer-fine button{color:inherit;text-decoration:none;border-radius:4px;transition:color .15s ease}.footer-fine button{padding:0;border:0;background:none;font:inherit;cursor:default}.footer-fine p a{color:var(--ink)}.footer-links{position:relative;display:flex;align-items:center;gap:18px;margin:0;padding:0;list-style:none}.footer-x{display:flex;padding:4px;margin:-4px}.footer-x .i{font-size:14px}@media(hover:hover)and (pointer:fine){.footer-fine li :is(a,button):hover{color:var(--ink)}.footer-fine [aria-disabled=true]:hover{color:inherit}.footer-fine p a:hover{text-decoration:underline;text-underline-offset:3px}}.footer a:focus-visible,.footer button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.has-tip{position:relative}.footer-tip{position:absolute;left:50%;bottom:calc(100% + 8px);width:max-content;max-width:min(320px,calc(100vw - 40px));padding:4px 8px;border-radius:7px;background:var(--menu);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 0 0 .5px #0003,0 6px 16px -4px #0000004d;color:var(--ink);font-size:12px;line-height:1.4;text-wrap:pretty;pointer-events:none;opacity:0;translate:-50% 4px;scale:.97;transform-origin:50% 100%;transition:opacity .12s ease,translate .12s var(--ease-out),scale .12s var(--ease-out)}.has-tip-wide{position:static}.has-tip-wide .footer-tip{left:auto;right:0;translate:0 4px;transform-origin:100% 100%}@media(max-width:620px){.footer-fine{flex-direction:column;align-items:flex-start}.has-tip-wide .footer-tip{left:0;right:auto;transform-origin:0 100%}}.has-tip:focus-within .footer-tip{opacity:1;translate:-50% 0;scale:1;transition-duration:.18s}.has-tip-wide:focus-within .footer-tip{translate:0 0}@media(hover:hover)and (pointer:fine){.has-tip:hover .footer-tip{opacity:1;translate:-50% 0;scale:1;transition-duration:.18s}.has-tip-wide:hover .footer-tip{translate:0 0}}@media(prefers-reduced-motion:reduce){.footer-tip{translate:-50% 0;scale:1}.has-tip-wide .footer-tip{translate:0 0}}@media(prefers-reduced-motion:no-preference){.enter{animation:enter .8s var(--ease-out) both;animation-delay:calc(var(--i, 0) * 70ms)}}@keyframes enter{0%{opacity:0;translate:0 14px}}::view-transition-old(root),::view-transition-new(root){animation-duration:.32s}.desktop{position:absolute;left:0;top:0;width:1440px;height:900px;transform-origin:0 0;scale:var(--fit, 1);pointer-events:none;font-size:13px}.surface{position:absolute;inset:0;overflow:hidden;container-type:size;--px: calc(100cqh / 900)}.wallpapers,.composition,.wall-img{position:absolute;inset:0}.wall-img{background-size:cover;background-position:center}.wall-img:after{content:"";position:absolute;inset:0;background:#000;opacity:0}:root[data-theme=dark] .wall-img:after{opacity:.34}.wall-fg{clip-path:var(--fg, none);-webkit-mask:var(--fg-mask, none) center / cover no-repeat;mask:var(--fg-mask, none) center / cover no-repeat}.wall-fg[data-foreground]:not([style]){display:none}.layer{position:absolute;left:calc(var(--x, .5) * 100%);top:calc(var(--y, .5) * 100%);translate:-50% -50%;rotate:var(--rot, 0deg);white-space:nowrap;color:var(--color, #fff);opacity:var(--opacity, 1);font-size:calc(var(--size, .07) * 100cqh);line-height:1.15;text-align:center;text-shadow:0 calc(2 * var(--px)) calc(24 * var(--px)) rgb(0 0 0 / .22);-webkit-text-stroke:calc(2 * var(--border, 0) * 100cqh) var(--border-color, #000);paint-order:stroke fill}.handles{display:none;position:absolute;inset:-6px;border:1px solid var(--accent);border-radius:4px}.layer.is-selected .handles{display:block}.handles i,.handles:before,.handles:after{position:absolute;background:var(--accent)}.handles i{width:8px;height:8px}.handles i:nth-child(1){left:-4.5px;top:-4.5px}.handles i:nth-child(2){right:-4.5px;top:-4.5px}.handles i:nth-child(3){left:-4.5px;bottom:-4.5px}.handles i:nth-child(4){right:-4.5px;bottom:-4.5px}.handles:before,.handles:after{content:"";top:50%;width:3px;height:18px;margin-top:-9px;border-radius:999px}.handles:before{left:-2px}.handles:after{right:-2px}.chrome{position:absolute;inset:0}.menubar{position:absolute;inset:0 0 auto;height:calc(36 * var(--px));padding-inline:calc(16 * var(--px));display:flex;align-items:center;justify-content:space-between;color:#fff;font-size:calc(13.5 * var(--px));font-weight:500;text-shadow:0 0 calc(10 * var(--px)) rgb(0 0 0 / .3);white-space:nowrap}.menubar-side{display:flex;align-items:center;gap:calc(19 * var(--px))}.menubar b{font-weight:700}.menubar .i{width:calc(17 * var(--px));height:calc(17 * var(--px));filter:drop-shadow(0 0 calc(6 * var(--px)) rgb(0 0 0 / .25))}.menubar .apple{width:calc(15 * var(--px));margin-top:calc(-2 * var(--px))}.clock{font-variant-numeric:tabular-nums}.dock{position:absolute;left:50%;bottom:calc(10 * var(--px));translate:-50% 0;display:flex;align-items:center;gap:calc(2 * var(--px));padding:calc(6 * var(--px));border-radius:calc(28 * var(--px));background:var(--dock);-webkit-backdrop-filter:blur(calc(22 * var(--px))) saturate(1.7);backdrop-filter:blur(calc(22 * var(--px))) saturate(1.7);box-shadow:inset 0 0 0 calc(1 * var(--px)) #ffffff52,inset 0 calc(1 * var(--px)) 0 #ffffff59,0 calc(12 * var(--px)) calc(32 * var(--px)) #0003}.dock-item{position:relative;width:calc(64 * var(--px));height:calc(64 * var(--px));transition:filter .12s ease}.dock-item>*{display:block;width:100%;height:100%}.dock-item:empty{border-radius:22%;background:#ffffff29;box-shadow:inset 0 0 0 1px #fff3}.dock-item.is-running:after{content:"";position:absolute;left:50%;bottom:calc(-3 * var(--px));width:calc(4 * var(--px));height:calc(4 * var(--px));translate:-50% 0;border-radius:50%;background:#ffffffd9}.dock-item.is-pressed{filter:brightness(.6)}.dock-sep{align-self:stretch;width:calc(1 * var(--px));margin:calc(10 * var(--px)) calc(6 * var(--px));background:#ffffff59}.window{position:absolute;left:170px;top:82px;width:1100px;height:700px;display:flex;flex-direction:column;border-radius:16px;overflow:hidden;background:var(--win);color:var(--win-ink);box-shadow:0 0 0 .5px #0000004d,0 12px 28px -8px #0000004d,0 40px 90px -20px #00000080}.window:after,.sheet:after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--win-highlight);pointer-events:none}.window button{border:0;padding:0;background:none;color:inherit;font:inherit}.window button.switch{background:light-dark(rgb(0 0 0 / .18),rgb(255 255 255 / .22))}.win-bar{position:relative;flex:none;height:60px;padding-inline:20px 16px;display:flex;align-items:center;gap:8px;background:var(--win-bar);border-bottom:1px solid var(--win-line)}.traffic{display:flex;gap:8px;margin-right:22px}.traffic i{width:13px;height:13px;border-radius:50%;box-shadow:inset 0 0 0 .5px #0000002e;transition:filter .1s ease}.tl-close{background:#ff5f57}.tl-min{background:#febc2e}.tl-zoom{background:#28c840}.traffic i.is-pressed{filter:brightness(.8)}.glass-btn,.glass-seg{height:36px;display:flex;align-items:center;border-radius:999px;background:var(--glass);box-shadow:0 0 0 .5px var(--glass-line),0 1px 3px #00000014,inset 0 1px 0 var(--win-highlight);font-size:18px;transition:scale .12s var(--ease-out)}.glass-btn{position:relative;min-width:42px;padding-inline:12px;gap:3px;justify-content:center}.glass-btn .chevron{font-size:12px;stroke-width:2.2;color:var(--win-ink-soft)}.glass-btn:has(>.i-wide){padding-inline:8px}.glass-seg{padding:3px;margin-left:auto}.glass-seg+.glass-seg{margin-left:8px}.glass-seg>span,.glass-seg>button{width:42px;height:30px;display:grid;place-items:center;border-radius:999px;transition:background-color .15s ease,color .15s ease}.seg-divider{width:1px;height:16px;background:var(--win-line)}.is-pressed{scale:.94}.glass-seg>.is-pressed{scale:1;background:var(--track)}.appearance-switch button{pointer-events:auto;cursor:pointer}.appearance-switch button[aria-pressed=true]{background:var(--accent);color:#fff}.appearance-switch button[aria-pressed=true] .i{fill:currentColor}@media(hover:hover)and (pointer:fine){.appearance-switch button[aria-pressed=false]:hover{background:var(--track)}}.win-title{position:absolute;left:50%;translate:-50% 0;font-weight:600}.win-body{flex:1;display:flex;min-height:0}.win-main{flex:1;display:flex;flex-direction:column;min-width:0}.canvas-area{flex:1;display:grid;place-items:center;background:var(--canvas-bg)}.canvas{position:relative;width:720px;aspect-ratio:1440 / 900;border-radius:4px;overflow:hidden;box-shadow:0 0 0 .5px #00000040,0 10px 30px -10px #00000059}.guide{position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--guide);opacity:0;transition:opacity .12s ease}.guide.is-visible{opacity:1}.status{position:relative;flex:none;height:36px;display:flex;align-items:center;justify-content:center;border-top:1px solid var(--win-line);color:var(--win-ink-soft);font-size:12px;font-variant-numeric:tabular-nums}.status-end{position:absolute;right:16px;display:flex;align-items:center;gap:4px;color:var(--win-ink);font-weight:500}.status-end .accent{font-size:17px;color:var(--accent);margin-right:10px}.status .chevron{font-size:11px;stroke-width:2.4}.inspector{position:relative;flex:none;width:300px;border-left:1px solid var(--win-line);background:var(--panel)}.insp-page{position:absolute;inset:0;padding:20px;display:flex;flex-direction:column;gap:22px;overflow-y:auto;scrollbar-width:none;opacity:0;transition:opacity .16s ease}.insp-page::-webkit-scrollbar{display:none}.insp-page.is-active{opacity:1}.insp-page>*{flex:none}.insp-page h3{margin:0 0 12px;padding-inline:16px;min-height:22px;display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;font-weight:700}.insp-page hr{width:100%;margin:-6px 0 0;border:0;border-top:1px solid var(--win-line)}.box[hidden]{display:none}.box{display:flex;flex-direction:column;gap:8px;padding:14px 16px;border-radius:12px;background:var(--box)}.row{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:24px}.control{position:relative;width:108px;height:24px;padding-inline:8px;display:flex;align-items:center;gap:4px;border-radius:6px;background:var(--field);box-shadow:inset 0 0 0 1px var(--field-line);font-weight:500;white-space:nowrap;transition:scale .12s var(--ease-out)}.control.btn{justify-content:center}.control.full{width:auto;align-self:stretch}.row.split>:first-child{flex:1;width:auto}.control.popup{justify-content:space-between}.control.popup b{font-weight:500;overflow:hidden;text-overflow:ellipsis}.control .chevron{font-size:11px;stroke-width:2.4;color:var(--win-ink-soft)}.field em,.field .glyph{width:14px;color:var(--win-ink-soft)}.field em{font-style:normal;font-size:11px;text-align:center}.field .glyph{height:14px;font-size:13px;stroke-width:1.9}.field b{flex:1;text-align:right;font-weight:500;font-variant-numeric:tabular-nums}.field small{width:16px;font-size:11px;color:var(--win-ink-soft)}.pair{display:flex;gap:6px}.pair .control{width:82px}.swatch i{flex:1;height:14px;border-radius:3px;background:var(--color, #fff);box-shadow:inset 0 0 0 1px #00000026}.switch{position:relative;width:26px;height:15px;border-radius:999px;background:light-dark(rgb(0 0 0 / .18),rgb(255 255 255 / .22));transition:background-color .18s ease}.switch i{position:absolute;left:2px;top:2px;width:11px;height:11px;border-radius:50%;background:#fff;box-shadow:0 1px 2px #00000040;transition:translate .2s var(--ease-out)}.switch[aria-pressed=true]{background:var(--accent)}.switch[aria-pressed=true] i{translate:11px 0}.segmented{display:flex;height:32px;padding:2px;border-radius:999px;background:var(--field);box-shadow:inset 0 0 0 1px var(--field-line);font-size:16px}.segmented>i{flex:1;display:grid;place-items:center;border-radius:999px;color:var(--win-ink-soft)}.segmented>i.on{background:var(--accent);color:#fff}.segmented.compact{width:108px;height:24px;border-radius:6px;font-size:14px}.segmented.compact>i{border-radius:4px}.wide-btn{height:28px;display:grid;place-items:center;border-radius:7px;background:var(--field);box-shadow:inset 0 0 0 1px var(--field-line);font-weight:500}.textarea{height:78px;padding:8px 10px;border-radius:8px;background:var(--field);box-shadow:inset 0 0 0 1px var(--field-line);font-weight:500;transition:box-shadow .15s ease}.textarea.is-editing{box-shadow:inset 0 0 0 1px var(--field-line),0 0 0 3px color-mix(in srgb,var(--accent) 40%,transparent)}.tx.is-selected{background:color-mix(in srgb,var(--accent) 30%,transparent)}.tx.is-multiple{color:var(--win-ink-soft)}.caret{display:none;width:1.5px;height:15px;margin-left:1px;vertical-align:-3px;background:var(--accent)}.textarea.is-editing .caret{display:inline-block;animation:blink 1s steps(1) infinite}@keyframes blink{50%{opacity:0}}.popover{position:absolute;top:calc(100% + 6px);right:0;z-index:5;padding:5px;border-radius:12px;background:var(--menu);-webkit-backdrop-filter:blur(24px) saturate(1.8);backdrop-filter:blur(24px) saturate(1.8);box-shadow:0 0 0 .5px #0003,inset 0 0 0 1px var(--win-highlight),0 14px 36px -8px #00000059;transform-origin:top right;opacity:0;scale:.96;transition:opacity .12s ease,scale .12s var(--ease-out)}.popover.is-open{opacity:1;scale:1;transition-duration:.18s}.menu{min-width:180px}.menu-left{left:0;right:auto;transform-origin:top left}.menu hr{height:1px;margin:4px 8px;border:0;background:var(--win-line)}.menu-item{height:26px;padding-inline:6px 12px;display:flex;align-items:center;gap:6px;border-radius:7px;font-size:14px}.menu-item .i{font-size:13px;stroke-width:2.2;opacity:0}.menu-item.is-checked .i{opacity:1}.menu-item.is-hover{background:var(--accent);color:#fff}.swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:8px;width:166px}.swatch-dot{width:30px;height:30px;border-radius:7px;background:var(--color);box-shadow:inset 0 0 0 1px #0003;transition:box-shadow .15s ease}.swatch-dot.is-hover{box-shadow:inset 0 0 0 1px #0003,0 0 0 2px var(--accent)}.picker{width:260px;padding:10px}.picker p{margin:0 0 8px 2px;font-size:11px;font-weight:600;color:var(--win-ink-soft)}.thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.thumb{position:relative;aspect-ratio:1440 / 900;border-radius:5px;overflow:hidden;box-shadow:0 0 0 .5px #00000040;transition:box-shadow .15s ease,scale .12s var(--ease-out)}.thumb.is-current{box-shadow:0 0 0 2px var(--win-ink-soft)}.thumb.is-hover{box-shadow:0 0 0 2px var(--accent)}.tip{position:absolute;left:0;top:0;z-index:40;padding:5px 9px;border-radius:7px;background:var(--menu);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 0 0 .5px #0003,0 6px 16px -4px #0000004d;color:var(--win-ink);font-size:12px;white-space:nowrap;opacity:0;translate:-50% 4px;transition:opacity .12s ease,translate .12s var(--ease-out)}.tip.is-visible{opacity:1;translate:-50% 0;transition-duration:.18s}.cursor{position:absolute;left:0;top:0;z-index:50;will-change:transform}.cursor svg{position:absolute;filter:drop-shadow(0 1px 1.5px rgb(0 0 0 / .35));transition:scale .1s var(--ease-out)}.cursor-arrow{left:-5px;top:-3.4px;transform-origin:5px 3.4px}.cursor-ibeam{left:-14px;top:-14px;display:none}.cursor.is-text .cursor-arrow{display:none}.cursor.is-text .cursor-ibeam{display:block}.cursor.is-down svg{scale:.86}.cursor .modifier{position:absolute;left:20px;top:16px;padding:1px 6px 2px;border-radius:5px;background:#000000c7;color:#fff;font-size:12px;line-height:1.3;opacity:0;transition:opacity .14s ease}.cursor.is-shift .modifier{opacity:1}.cursor.is-hidden{opacity:0}