:root{font-family:"SF Pro",-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",sans-serif;font-optical-sizing:auto;color:#222;font-synthesis:none;-webkit-font-smoothing:antialiased;--ease:cubic-bezier(.2,0,0,1);--workspace-scale:1;--lens-size:88px}
*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,select{cursor:pointer}button{border:0}button:focus-visible,select:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:2px solid #8ddb58;outline-offset:4px}button{transition:scale 150ms var(--ease),background-color 150ms var(--ease),opacity 150ms var(--ease)}button:active{scale:.96}button:disabled{cursor:default;opacity:.4}button:disabled:active{scale:1}[hidden]{display:none!important}
body[data-input-method="pointer"] :focus-visible{outline:none!important}
.desktop{position:relative;min-height:100svh;height:100svh;overflow:hidden;isolation:isolate;background:#8e6497 url("assets/wallpaper.png") center center/cover no-repeat}
.desktop::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,16,38,.06),rgba(22,16,38,.13));pointer-events:none;z-index:-1}
.workspace{position:absolute;width:700px;transform:scale(var(--workspace-scale));transform-origin:top left;left:calc(50% - 350px);top:max(52px,calc(50% - 328px))}
.mac-window{position:relative;width:700px;height:500px;border-radius:16px;isolation:isolate;box-shadow:0 0 0 .5px #0006,0 18px 27px #0000004d;background:white}
.window-scene{width:700px;height:500px;background:white;position:relative;overflow:hidden;border-radius:16px;color:rgba(0,0,0,.87)}
.background-grid{position:absolute;inset:0;width:700px;height:500px;pointer-events:none}
.titlebar{position:absolute;left:0;top:0;width:100%;height:30px;z-index:4;cursor:grab;touch-action:none;user-select:none}.titlebar:focus-visible{outline-offset:-3px;border-radius:16px 16px 0 0}.titlebar:active{cursor:grabbing}.traffic-lights{display:flex;gap:9px;padding:8px;pointer-events:none}.traffic{width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 .5px #00000073}.traffic.close{background:#ff5c60}.traffic.minimize{background:#fac800}.traffic.zoom{background:#35c759}
.onboarding-heading{position:absolute;left:0;top:62px;width:700px;text-align:center;pointer-events:none}.onboarding-heading h1{margin:0;font-size:22px;font-weight:700;line-height:26px;letter-spacing:0;text-wrap:balance}.onboarding-heading p{margin:4px 0 0;font-size:13px;line-height:16px;font-weight:400;color:rgba(0,0,0,.61);text-wrap:pretty;letter-spacing:0}
.menu-viz{position:absolute;left:0;top:140px;width:698px;height:260px;mask:url("data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiBvdmVyZmxvdz0idmlzaWJsZSIgc3R5bGU9ImRpc3BsYXk6IGJsb2NrOyIgd2lkdGg9IjY5OCIgaGVpZ2h0PSIyNjAiIHZpZXdCb3g9IjAgMCA2OTggMjYwIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8ZyBpZD0iTWFzayI+CjxyZWN0IHdpZHRoPSI2OTgiIGhlaWdodD0iMjYwIiBmaWxsPSJ1cmwoI3BhaW50MF9yYWRpYWxfMjQ1NV8xMTI0MTEpIi8+CjxyZWN0IHdpZHRoPSI2OTgiIGhlaWdodD0iMjYwIiBmaWxsPSJ1cmwoI3BhaW50MV9yYWRpYWxfMjQ1NV8xMTI0MTEpIiBmaWxsLW9wYWNpdHk9IjAuMzIiLz4KPHJlY3Qgd2lkdGg9IjY5OCIgaGVpZ2h0PSIyNjAiIGZpbGw9InVybCgjcGFpbnQyX3JhZGlhbF8yNDU1XzExMjQxMSkiIGZpbGwtb3BhY2l0eT0iMC4zMiIvPgo8L2c+CjxkZWZzPgo8cmFkaWFsR3JhZGllbnQgaWQ9InBhaW50MF9yYWRpYWxfMjQ1NV8xMTI0MTEiIGN4PSIwIiBjeT0iMCIgcj0iMSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIGdyYWRpZW50VHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzc4LjkxNCA0Mikgcm90YXRlKDkwKSBzY2FsZSgyMDggMjQyLjkzNSkiPgo8c3RvcCBzdG9wLWNvbG9yPSIjNzM3MzczIi8+CjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI0Q5RDlEOSIgc3RvcC1vcGFjaXR5PSIwIi8+CjwvcmFkaWFsR3JhZGllbnQ+CjxyYWRpYWxHcmFkaWVudCBpZD0icGFpbnQxX3JhZGlhbF8yNDU1XzExMjQxMSIgY3g9IjAiIGN5PSIwIiByPSIxIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgZ3JhZGllbnRUcmFuc2Zvcm09InRyYW5zbGF0ZSgzMTAuMTExIDQ4KSByb3RhdGUoMTgwKSBzY2FsZSg0Mi44NzcxIDM0LjcyMDUpIj4KPHN0b3AvPgo8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNEOUQ5RDkiIHN0b3Atb3BhY2l0eT0iMCIvPgo8L3JhZGlhbEdyYWRpZW50Pgo8cmFkaWFsR3JhZGllbnQgaWQ9InBhaW50Ml9yYWRpYWxfMjQ1NV8xMTI0MTEiIGN4PSIwIiBjeT0iMCIgcj0iMSIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIGdyYWRpZW50VHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTU0LjkxIDM2KSByb3RhdGUoOTApIHNjYWxlKDEzOC41IDExMS41MTMpIj4KPHN0b3AvPgo8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNEOUQ5RDkiIHN0b3Atb3BhY2l0eT0iMCIvPgo8L3JhZGlhbEdyYWRpZW50Pgo8L2RlZnM+Cjwvc3ZnPgo=") 0 0/698px 260px no-repeat;pointer-events:none}
.macbook-corner{position:absolute;left:88.7461px;top:18px;width:485.6086px;height:274px;border:1px solid #e0e0e0;border-radius:0 18px 0 0;background:#f9f9f9}
.mini-desktop{position:absolute;left:-.3914px;top:4px;width:481px;height:268px;overflow:hidden;border:1px solid #00000017;border-radius:0 14px 0 0;background:#0000000f}
.mini-wallpaper{position:absolute;right:-1px;top:-1px;width:1890px;height:1227.5px;object-fit:cover;pointer-events:none;max-width:none}
.mini-menubar{position:absolute;right:25px;top:5.25px;width:257.375px;height:32.5px;display:flex;align-items:center;color:#000;font-size:16.38px;font-weight:590;line-height:20px;white-space:nowrap}
.mini-jam{width:45px;height:32.5px;position:relative;flex:none}.mini-jam img{position:absolute;left:14.319px;top:8.0715px;width:16.3636px;height:18.797px}.mini-wifi{width:43.125px;height:25px;flex:none}.mini-date{display:flex;gap:10px;padding-left:11.25px;align-items:center}.mini-date>span:first-child{width:82px}.mini-date>span:last-child{width:66px}
.strawberry-target{position:absolute;left:289px;top:163px;width:40px;height:40px;background:transparent;border-radius:8px;z-index:3}.strawberry-target:focus-visible{outline-offset:-1px}.strawberry-target:hover{background:#00000004}
.window-footer{position:absolute;bottom:0;left:0;width:700px;height:68px;background:#fff;box-shadow:0 -.5px 0 #0000000d;display:flex;align-items:center;justify-content:space-between;padding:16px 32px;z-index:5}
.back-button,.record-button{position:relative;height:36px;border-radius:18px;font-size:13px;line-height:16px;font-weight:510;color:rgba(0,0,0,.87)}.back-button::after,.record-button::after{content:"";position:absolute;inset:-2px;min-width:40px;border-radius:20px}.back-button{width:36px;background:#00000014;padding:0;display:grid;place-items:center}.back-button span{font-family:-apple-system,BlinkMacSystemFont,sans-serif;font-size:26px;font-weight:400;line-height:26px;transform:translate(-.5px,-1.5px)}.back-button:hover{background:#0000001e}.record-button{width:140px;background:#dcfac7}.record-button:hover{background:#cdf5ad}.record-button.is-recording{background:#ffddd9}
.magnifier{position:absolute;z-index:12;left:265px;top:141px;width:var(--lens-size);height:var(--lens-size);touch-action:none;cursor:grab;user-select:none;border-radius:50%;filter:drop-shadow(0 5px 8px #00000012);transition:filter 180ms var(--ease),opacity 180ms var(--ease)}.magnifier:active,.magnifier.is-dragging{cursor:grabbing;filter:drop-shadow(0 8px 10px #00000022)}.magnifier:focus-visible{outline-offset:1px}.lens-rim{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.lens-aperture{position:absolute;left:19.31%;top:19.318%;width:61.36%;height:61.364%;border-radius:50%;overflow:hidden;pointer-events:none;background:#fff}.lens-aperture::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;box-shadow:inset 0 0 1.5px #0004,inset 0 1px 2px #fff3}#lens-content{position:absolute;inset:0;transform-origin:0 0;pointer-events:none}#lens-content .window-scene{position:absolute;left:0;top:0;border-radius:0;pointer-events:none}
.jam-menu{position:absolute;left:300px;top:208px;width:244px;z-index:9;padding:5px;background:#f8f8f8ed;backdrop-filter:blur(22px);border-radius:10px;box-shadow:0 0 0 1px #00000016,0 8px 24px #0003;font-size:13px}.jam-menu-title{padding:8px 10px 5px;font-size:11px;font-weight:600;color:#777}.jam-menu button{display:flex;align-items:center;gap:9px;width:100%;height:40px;padding:0 10px;text-align:left;background:transparent;border-radius:5px;color:#333}.jam-menu button:hover{background:#dcfac7}.jam-menu kbd,.menu-count{font:inherit;margin-left:auto;color:#888;font-size:11px}.menu-rule{height:1px;background:#0001;margin:4px 6px}.record-dot{width:12px;height:12px;border:1.5px solid currentColor;border-radius:50%;box-shadow:inset 0 0 0 2px #f8f8f8;background:currentColor}.recording-indicator{position:absolute;left:302px;top:362px;display:flex;gap:7px;align-items:center;background:#f4f4f4;padding:7px 12px;border-radius:20px;font-size:12px;font-variant-numeric:tabular-nums}.recording-indicator>span:first-child{width:7px;height:7px;border-radius:50%;background:#ee5757}
.back-button img{width:7px;height:12px;transform:translateY(.5px);pointer-events:none}
.dev-toolbar{--playground-control-height:28px;position:relative;margin-top:22px;width:700px;color:#eeedf1;background:#252429eb;backdrop-filter:blur(35px) saturate(1.3);border-radius:14px;box-shadow:0 0 0 .5px #fff3,0 12px 30px #180d2833,inset 0 1px 0 #ffffff09;font-size:11px;user-select:none}.toolbar-title-row{display:flex;align-items:center;justify-content:space-between;padding:3px 14px 3px 18px;min-height:42px}.toolbar-title{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:590}.live-dot{width:6px;height:6px;background:#a7f374;border-radius:50%}.toolbar-caption{font-size:11px;color:#9b999f;font-weight:400;margin-left:5px}.toolbar-actions{display:flex;align-items:center;gap:2px}.text-button,.collapse-button{color:#c9c7ce;background:transparent;height:40px;padding:0 8px;border-radius:7px;font-size:11px;white-space:nowrap}.text-button:hover,.collapse-button:hover{background:#ffffff0d;color:white}.collapse-button{width:40px;display:grid;place-items:center}.collapse-button span{width:6px;height:6px;border-left:1px solid currentColor;border-top:1px solid currentColor;rotate:45deg;translate:0 2px;transition:rotate 200ms var(--ease)}.collapse-button[aria-expanded="false"] span{rotate:225deg;translate:0 -1px}
.controls-body{padding:4px 18px 12px}.effect-controls{display:grid;grid-template-columns:170px 1fr 1fr 1fr;gap:20px;align-items:center}.control{display:flex;flex-direction:column;gap:4px;min-width:0}.control>span:first-child{height:17px;display:flex;align-items:center;justify-content:space-between;color:#b5b3ba}.control output{color:#f0eef4;font-size:11px;font-variant-numeric:tabular-nums}.select-wrap{position:relative;display:block}.select-wrap::after{content:"";position:absolute;width:5px;height:5px;right:12px;top:calc(50% - 4px);border-right:1px solid #bdbbc3;border-bottom:1px solid #bdbbc3;rotate:45deg;pointer-events:none}select{appearance:none;-webkit-appearance:none;border:0;box-shadow:0 0 0 1px #ffffff0c,inset 0 1px 0 #ffffff07;border-radius:7px;background:#ffffff0b;color:#f5f4f7;padding:0 31px 0 11px;width:100%;height:var(--playground-control-height);font-size:12px;line-height:16px}select:hover{background:#ffffff11}option{background:#333237;color:#fff}input[type="range"]{--range-fill:45%;appearance:none;-webkit-appearance:none;width:100%;height:var(--playground-control-height);background:transparent;cursor:ew-resize;margin:0;touch-action:none}input[type="range"]::-webkit-slider-runnable-track{height:3px;border-radius:3px;background:linear-gradient(to right,#cac7cf var(--range-fill),#ffffff26 var(--range-fill))}input[type="range"]::-moz-range-track{height:3px;border-radius:3px;background:#ffffff26}input[type="range"]::-moz-range-progress{height:3px;background:#cac7cf}input[type="range"]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:11px;height:11px;border-radius:50%;background:#f3f1f6;margin-top:-4px;box-shadow:0 1px 3px #0005;transition:scale 150ms var(--ease)}input[type="range"]::-moz-range-thumb{width:11px;height:11px;border-radius:50%;border:0;background:#f3f1f6}input[type="range"]:active::-webkit-slider-thumb{scale:1.15}
.secondary-controls{display:flex;align-items:center;gap:16px;margin-top:9px;padding-top:7px;border-top:1px solid #ffffff0b;min-height:44px}.switch-control{display:flex;gap:7px;align-items:center;position:relative;min-height:40px;cursor:pointer;color:#c3c0c8}.switch-control input{position:absolute;width:100%;height:100%;inset:0;opacity:0;margin:0;cursor:pointer}.switch-track{width:26px;height:15px;border-radius:10px;background:#555259;position:relative;pointer-events:none;transition:background-color 160ms var(--ease)}.switch-track::after{content:"";position:absolute;width:11px;height:11px;left:2px;top:2px;border-radius:50%;background:#fff;box-shadow:0 1px 2px #0002;transition:transform 160ms var(--ease)}.switch-control input:checked+.switch-track{background:#a7f374}.switch-control input:checked+.switch-track::after{transform:translateX(11px);background:#263421}.switch-control input:focus-visible+.switch-track{outline:2px solid #a7f374;outline-offset:3px}.compact-control{display:flex;align-items:center;gap:8px;color:#a9a6b0;white-space:nowrap}.compact-control select{width:65px;font-size:11px;padding-left:9px;padding-right:22px}.compact-control .select-wrap::after{right:9px}.size-control input{width:56px}.fill-control input{width:54px}.compact-control output{min-width:19px;text-align:right;color:#d7d4dd;font-variant-numeric:tabular-nums}.fill-control output{min-width:24px}.center-lens{margin-left:auto;padding-right:0}.toolbar-footnote{display:flex;justify-content:space-between;color:#87838f;font-size:10px;padding-top:4px;line-height:14px}.toolbar-footnote>span:last-child{color:#716e78}
.toast{position:fixed;bottom:42px;left:50%;transform:translate(-50%,8px);padding:12px 18px;background:#242129ed;color:#f5f5f5;box-shadow:0 4px 16px #0002;border-radius:12px;font-size:12px;opacity:0;pointer-events:none;transition:opacity 180ms var(--ease),transform 180ms var(--ease);z-index:40}.toast.is-visible{opacity:1;transform:translate(-50%,0)}.desktop-caption{position:absolute;bottom:18px;width:100%;text-align:center;font-size:9px;letter-spacing:1.8px;color:#ffffff70;pointer-events:none;font-weight:500}.desktop-caption span{padding:0 7px;color:#ffffff45}.is-window-dragging,.is-window-dragging *{cursor:grabbing!important}.is-window-dragging .mac-window{box-shadow:0 0 0 .5px #0006,0 24px 38px #0000004d}
@media(max-width:600px){.desktop-caption{display:none}}
@media(prefers-reduced-motion:reduce){button,.magnifier,.toast,.switch-track,.switch-track::after,.collapse-button span{transition:none}}