.df-device{--df-device-color: #17181c;--df-device-height: 852px;--df-device-outer-height: 878px;--df-device-outer-width: 419px;--df-device-scaled-height: 878px;--df-device-scaled-width: 419px;--df-device-width: 393px;--df-zoom: 1;--df-bezel: 14px;--df-frame-radius: 58px;--df-frame-shadow: 0 24px 70px rgb(15 18 28 / 24%), inset 0 0 0 1px rgb(255 255 255 / 28%);--df-metal-highlight: rgb(255 255 255 / 42%);--df-screen-radius: calc(var(--df-frame-radius) - 17px);--df-button-thickness: 4px;--df-power-button-length: 92px;--df-power-button-offset: 170px;--df-volume-button-length: 66px;--df-volume-down-offset: 226px;--df-volume-up-offset: 150px;--df-safe-bottom: 18px;--df-safe-left: 16px;--df-safe-right: 16px;--df-safe-top: 18px;box-sizing:border-box;display:inline-block;height:var(--df-device-scaled-height);position:relative;vertical-align:top;width:var(--df-device-scaled-width)}.df-device *,.df-device *:before,.df-device *:after{box-sizing:border-box}.df-device__hardware{background:linear-gradient(135deg,var(--df-metal-highlight),transparent 28%),linear-gradient(315deg,rgba(0,0,0,.22),transparent 28%),var(--df-device-color);border-radius:var(--df-frame-radius);box-shadow:var(--df-frame-shadow);height:var(--df-device-outer-height);isolation:isolate;padding:var(--df-bezel);position:relative;transform:scale(var(--df-zoom));transform-origin:left top;width:var(--df-device-outer-width)}.df-device__hardware:before{background:linear-gradient(90deg,rgba(255,255,255,.42),transparent 22%,transparent 78%,rgba(0,0,0,.22));border-radius:inherit;content:"";inset:2px;opacity:.45;pointer-events:none;position:absolute;z-index:1}.df-device__screen-ring{background:#08090d;border-radius:var(--df-screen-radius);height:100%;overflow:hidden;padding:var(--df-screen-gap, 0);position:relative;z-index:2}.df-device__screen{background:#fff;border-radius:calc(var(--df-screen-radius) - var(--df-screen-gap, 0px));color:#111318;height:100%;overflow:hidden;position:relative;width:100%}.df-device__content{height:100%;-ms-overflow-style:none;overflow:auto;overscroll-behavior:contain;padding:var(--df-safe-top) var(--df-safe-right) var(--df-safe-bottom) var(--df-safe-left);scrollbar-width:none;width:100%;-webkit-overflow-scrolling:touch}.df-device__content::-webkit-scrollbar{display:none}.df-device__camera,.df-device__speaker,.df-device__button,.df-device__home{position:absolute;z-index:3}.df-device__button{background:color-mix(in srgb,var(--df-device-color),#000 18%);box-shadow:inset 0 1px #ffffff3d}.df-device__button--action,.df-device__button--camera-control{display:none}.df-device__button--power{border-radius:0 4px 4px 0;height:var(--df-power-button-length);right:-3px;top:var(--df-power-button-offset);width:var(--df-button-thickness)}.df-device__button--volume-up,.df-device__button--volume-down{border-radius:4px 0 0 4px;height:var(--df-volume-button-length);left:-3px;width:var(--df-button-thickness)}.df-device__button--volume-up{top:var(--df-volume-up-offset)}.df-device__button--volume-down{top:var(--df-volume-down-offset)}.df-device__speaker,.df-device__home{display:none}.df-device__camera{background:#0b0d12;border:4px solid #161922;border-radius:999px;box-shadow:inset 0 0 0 2px #ffffff0d;height:18px;left:50%;top:18px;transform:translate(-50%);width:18px}.df-device--ios.df-device--phone{--df-bezel: 13px;--df-frame-radius: 60px}.df-device--front-island{--df-screen-gap: 0px;--df-safe-top: 42px}.df-device--front-island .df-device__hardware:after{background:#0b0d12;border-radius:999px;content:"";height:31px;left:50%;position:absolute;top:24px;transform:translate(-50%);width:102px;z-index:4}.df-device--front-island .df-device__camera{background:#141821;border:0;box-shadow:none;height:8px;left:calc(50% + 31px);opacity:.75;top:35px;width:8px;z-index:5}.df-device--iphone-16-pro .df-device__hardware:after,.df-device--iphone-16-pro-max .df-device__hardware:after,.df-device--iphone-15-pro .df-device__hardware:after,.df-device--iphone-15-pro-max .df-device__hardware:after,.df-device--iphone-14-pro .df-device__hardware:after,.df-device--iphone-14-pro-max .df-device__hardware:after{width:108px}.df-device--front-notch{--df-screen-gap: 0px;--df-safe-top: 40px}.df-device--front-notch .df-device__hardware:after{background:#08090d;border-radius:0 0 18px 18px;content:"";height:33px;left:50%;position:absolute;top:var(--df-bezel);transform:translate(-50%);width:148px;z-index:4}.df-device--front-notch .df-device__speaker{background:#ffffff3d;border-radius:999px;display:block;height:4px;left:50%;top:calc(var(--df-bezel) + 10px);transform:translate(-50%);width:42px;z-index:5}.df-device--front-notch .df-device__camera{background:#141821;border:0;height:8px;left:calc(50% - 56px);top:calc(var(--df-bezel) + 8px);transform:none;width:8px;z-index:5}.df-device--iphone-13 .df-device__hardware:after,.df-device--iphone-13-mini .df-device__hardware:after,.df-device--iphone-13-pro .df-device__hardware:after,.df-device--iphone-13-pro-max .df-device__hardware:after,.df-device--iphone-14 .df-device__hardware:after,.df-device--iphone-14-plus .df-device__hardware:after,.df-device--iphone-16e .df-device__hardware:after{width:132px}.df-device--has-action-button .df-device__button--action{border-radius:4px 0 0 4px;display:block;height:42px;left:-3px;top:88px;width:var(--df-button-thickness)}.df-device--has-camera-control .df-device__button--camera-control{border-radius:0 5px 5px 0;display:block;height:74px;right:-3px;top:330px;width:var(--df-button-thickness)}.df-device--has-action-button .df-device__button--volume-up{top:148px}.df-device--has-action-button .df-device__button--volume-down{top:222px}.df-device--front-classic{--df-bezel: 18px;--df-frame-radius: 36px;--df-power-button-offset: 86px;--df-power-button-length: 50px;--df-screen-radius: 2px;--df-volume-down-offset: 166px;--df-volume-up-offset: 108px;--df-volume-button-length: 48px;--df-safe-bottom: 12px;--df-safe-top: 12px}.df-device--front-classic .df-device__hardware{background:color-mix(in srgb,var(--df-device-color),#ffffff 72%);box-shadow:0 20px 48px #0f121c2e,inset 0 0 0 2px color-mix(in srgb,var(--df-device-color),#ffffff 22%);padding:18px}.df-device--front-classic .df-device__hardware:before{display:none}.df-device--front-classic .df-device__screen-ring{background:transparent;border-radius:0;height:calc(100% - 142px);margin-block:74px 68px}.df-device--front-classic .df-device__screen{border-radius:2px}.df-device--front-classic .df-device__speaker{background:#0000007a;border-radius:999px;display:block;height:5px;left:calc(50% + 20px);top:38px;transform:translate(-50%);width:52px}.df-device--front-classic .df-device__camera{background:#10141c;border:0;height:8px;top:37px;transform:translate(-48px);width:8px}.df-device--front-classic .df-device__home{background:transparent;border:2px solid rgba(0,0,0,.18);border-radius:999px;bottom:17px;box-shadow:none;display:block;height:46px;left:50%;transform:translate(-50%);width:46px}.df-device--ios.df-device--tablet{--df-bezel: 32px;--df-frame-radius: 36px;--df-power-button-offset: 220px;--df-power-button-length: 112px;--df-screen-radius: 14px;--df-volume-down-offset: 284px;--df-volume-up-offset: 200px;--df-volume-button-length: 74px;--df-safe-bottom: 24px;--df-safe-left: 24px;--df-safe-right: 24px;--df-safe-top: 24px}.df-device--ios.df-device--tablet .df-device__camera{height:12px;top:14px;width:12px}.df-device--ipad-mini{--df-bezel: 28px}.df-device--android.df-device--phone{--df-bezel: 12px;--df-frame-radius: 48px;--df-safe-top: 26px;--df-screen-radius: 38px}.df-device--android .df-device__hardware{background:radial-gradient(circle at 28% 10%,rgba(255,255,255,.22),transparent 24%),linear-gradient(135deg,color-mix(in srgb,var(--df-device-color),#fff 22%),var(--df-device-color) 48%,color-mix(in srgb,var(--df-device-color),#000 26%))}.df-device--android.df-device--phone .df-device__camera{border-width:3px;height:16px;top:22px;width:16px}.df-device--front-punch .df-device__speaker{background:#00000057;border-radius:999px;display:block;height:3px;left:50%;top:8px;transform:translate(-50%);width:48px}.df-device--pixel-8 .df-device__camera{left:50%}.df-device--galaxy-s24{--df-frame-radius: 42px;--df-screen-radius: 32px}.df-device--shape-squared{--df-frame-radius: 30px;--df-screen-radius: 22px}.df-device--shape-fold{--df-frame-radius: 28px;--df-screen-radius: 20px}.df-device--shape-fold .df-device__hardware:before{background:linear-gradient(90deg,transparent,rgba(0,0,0,.18) 50%,transparent),linear-gradient(90deg,rgba(255,255,255,.34),transparent 18%,transparent 82%,rgba(0,0,0,.22));left:50%;opacity:.42;right:auto;width:2px}.df-device--galaxy-s24 .df-device__camera{left:50%}.df-device--android.df-device--tablet{--df-bezel: 30px;--df-frame-radius: 32px;--df-power-button-offset: 220px;--df-power-button-length: 112px;--df-screen-radius: 18px;--df-volume-down-offset: 284px;--df-volume-up-offset: 200px;--df-volume-button-length: 74px;--df-safe-bottom: 24px;--df-safe-left: 24px;--df-safe-right: 24px;--df-safe-top: 24px}.df-device--android.df-device--tablet .df-device__camera{height:13px;top:14px;width:13px}.df-device--has-landscape-tablet-camera.df-device--portrait .df-device__camera{left:auto;right:14px;top:50%;transform:translateY(-50%)}.df-device--has-landscape-tablet-camera.df-device--landscape .df-device__camera{left:50%;top:14px;transform:translate(-50%)}.df-device--landscape{--df-frame-radius: 44px;--df-safe-bottom: 16px;--df-safe-left: 18px;--df-safe-right: 18px;--df-safe-top: 16px}.df-device--landscape .df-device__button--power{border-radius:4px 4px 0 0;height:var(--df-button-thickness);left:var(--df-power-button-offset);right:auto;top:-3px;width:var(--df-power-button-length)}.df-device--landscape .df-device__button--volume-up,.df-device--landscape .df-device__button--volume-down{border-radius:0 0 4px 4px;bottom:-3px;height:var(--df-button-thickness);top:auto;width:var(--df-volume-button-length)}.df-device--landscape .df-device__button--volume-up{left:var(--df-volume-up-offset)}.df-device--landscape .df-device__button--volume-down{left:var(--df-volume-down-offset)}.df-device--landscape.df-device--has-action-button .df-device__button--action{border-radius:0 0 4px 4px;bottom:-3px;height:var(--df-button-thickness);left:88px;top:auto;width:42px}.df-device--landscape.df-device--has-camera-control .df-device__button--camera-control{border-radius:4px 4px 0 0;height:var(--df-button-thickness);left:330px;right:auto;top:-3px;width:74px}.df-device--landscape.df-device .df-device__camera{left:22px;top:50%;transform:translateY(-50%)}.df-device--landscape.df-device--tablet .df-device__camera{left:14px}.df-device--landscape.df-device--has-landscape-tablet-camera .df-device__camera{left:50%;top:14px;transform:translate(-50%)}.df-device--landscape.df-device--front-punch .df-device__speaker{height:48px;left:8px;top:50%;transform:translateY(-50%);width:3px}.df-device--landscape.df-device--front-island .df-device__hardware:after{height:102px;left:24px;top:50%;transform:translateY(-50%);width:31px}.df-device--landscape.df-device--front-island{--df-safe-left: 42px;--df-safe-top: 16px}.df-device--landscape.df-device--front-island .df-device__camera{left:35px;top:calc(50% + 31px);transform:none}.df-device--landscape.df-device--front-notch .df-device__hardware:after{border-radius:0 18px 18px 0;height:148px;left:var(--df-bezel);top:50%;transform:translateY(-50%);width:33px}.df-device--landscape.df-device--front-notch{--df-safe-left: 40px;--df-safe-top: 16px}.df-device--landscape.df-device--front-notch .df-device__speaker{height:42px;left:calc(var(--df-bezel) + 10px);top:50%;transform:translateY(-50%);width:4px}.df-device--landscape.df-device--front-notch .df-device__camera{left:calc(var(--df-bezel) + 8px);top:calc(50% - 56px);transform:none}.df-device--landscape.df-device--front-classic .df-device__screen-ring{height:100%;margin-block:0;margin-inline:74px 68px;width:calc(100% - 142px)}.df-device--landscape.df-device--front-classic .df-device__speaker{left:38px;top:50%;transform:translateY(-50%);width:5px;height:52px}.df-device--landscape.df-device--front-classic .df-device__camera{left:37px;top:50%;transform:translateY(-48px)}.df-device--landscape.df-device--front-classic .df-device__home{inset:50% 17px auto auto;transform:translateY(-50%)}.df-device--landscape.df-device--iphone-16-pro .df-device__hardware:after,.df-device--landscape.df-device--iphone-16-pro-max .df-device__hardware:after,.df-device--landscape.df-device--iphone-15-pro .df-device__hardware:after,.df-device--landscape.df-device--iphone-15-pro-max .df-device__hardware:after,.df-device--landscape.df-device--iphone-14-pro .df-device__hardware:after,.df-device--landscape.df-device--iphone-14-pro-max .df-device__hardware:after{height:108px}.df-device--color-black{--df-device-color: #17181c}.df-device--color-blue{--df-device-color: #7ea8d8}.df-device--color-cream{--df-device-color: #f2eadf}.df-device--color-gold{--df-device-color: #f4d7a1}.df-device--color-graphite{--df-device-color: #3f4048}.df-device--color-gray{--df-device-color: #a5a8ad}.df-device--color-green{--df-device-color: #9fbf9a}.df-device--color-natural{--df-device-color: #d8d2c4}.df-device--color-pink{--df-device-color: #efb7bd}.df-device--color-purple{--df-device-color: #b8a9d9}.df-device--color-silver{--df-device-color: #e7e8e4}.df-device--color-white{--df-device-color: #f7f7f4}.df-device--color-yellow{--df-device-color: #f2dc84}:root{color:#1d2430;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;line-height:1.5;background:#f1f3f6}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}.app-shell{display:grid;grid-template-columns:minmax(260px,320px) 1fr;min-height:100vh}.controls{background:#fff;border-right:1px solid #d9dde5;display:flex;flex-direction:column;gap:22px;max-height:100vh;overflow:auto;padding:28px}.controls h1{font-size:24px;line-height:1.1;margin:0}.controls-intro{color:#596274;font-size:14px;margin:-12px 0 -8px}.project-links{display:flex;gap:10px}.project-links a{align-items:center;background:#f8f9fb;border:1px solid #cfd5df;border-radius:8px;color:#1d2430;display:inline-flex;font-size:13px;font-weight:700;gap:7px;min-height:34px;padding:0 12px;text-decoration:none}.project-links svg{fill:currentColor;height:16px;width:16px}.project-links a:focus-visible,.project-links a:hover{border-color:#4b7bec;color:#244fc8}.package-card{background:#f8f9fb;border:1px solid #d5dae3;border-radius:8px;display:grid;gap:8px;padding:14px}.package-card h2,.preview-assets h2{color:#586173;font-size:13px;margin:0;text-transform:uppercase}.package-card code{background:#1d2430;border-radius:6px;color:#fff;display:block;font-size:13px;overflow-x:auto;padding:10px}.controls label{display:grid;gap:10px}.controls label>span{color:#586173;font-size:13px;font-weight:700;text-transform:uppercase}select{appearance:none;background:#f8f9fb;border:1px solid #cfd5df;border-radius:8px;color:#1d2430;min-height:44px;padding:0 14px}.segments{background:#eef1f5;border:1px solid #d5dae3;border-radius:8px;display:grid;grid-template-columns:repeat(2,1fr);padding:3px}.segments button{background:transparent;border:0;border-radius:6px;color:#596274;cursor:pointer;min-height:36px;text-transform:capitalize}.segments button[aria-pressed=true]{background:#fff;box-shadow:0 1px 4px #19202c24;color:#1d2430;font-weight:700}.swatches{display:grid;grid-template-columns:repeat(4,36px);gap:10px}.swatches button{border:2px solid #ffffff;border-radius:999px;box-shadow:0 0 0 1px #cbd2dc;cursor:pointer;height:36px;width:36px}.swatches button[aria-pressed=true]{box-shadow:0 0 0 3px #4b7bec}input[type=range]{accent-color:#4b7bec}.preview-assets{display:grid;gap:10px}.preview-assets img{background:#eef1f5;border:1px solid #d5dae3;border-radius:8px;display:block;height:auto;width:100%}.preview{align-items:center;background:linear-gradient(90deg,rgb(28 36 48 / 6%) 1px,transparent 1px),linear-gradient(rgb(28 36 48 / 6%) 1px,transparent 1px),#eef1f5;background-size:28px 28px;display:flex;justify-content:center;min-width:0;overflow:auto;padding:36px}.demo-screen{background:linear-gradient(160deg,#f7fbff,#dee7f1 45%,#f4efe7);color:#182030;display:flex;flex-direction:column;height:100%;width:100%}.demo-screen main{display:grid;gap:16px;min-height:100%}.demo-badge{align-self:flex-start;background:#253044;border-radius:999px;color:#fff;font-size:12px;font-weight:800;letter-spacing:.04em;padding:6px 10px;text-transform:uppercase}.demo-screen h1{font-size:42px;line-height:1.02;margin:0}.demo-lede{color:#455064;font-size:16px;font-weight:650;margin:-6px 0 0}.demo-grid{display:grid;gap:10px}.demo-row{align-items:center;background:#ffffffb8;border:1px solid rgb(120 134 154 / 18%);border-radius:8px;display:flex;justify-content:space-between;min-height:48px;padding:0 14px}.demo-row span{color:#667085;font-size:13px;font-weight:700}.demo-row strong{font-size:14px}.demo-code{background:#182030;border-radius:8px;color:#fff;font-size:14px;margin:0;overflow-x:auto;padding:12px}.demo-list{display:grid;gap:10px;padding-bottom:4px}.demo-list-item{align-items:center;background:#ffffff94;border:1px solid rgb(120 134 154 / 16%);border-radius:8px;display:grid;gap:10px;grid-template-columns:34px 1fr;margin:0;min-height:56px;padding:10px 12px}.demo-list-item span{color:#4b7bec;font-size:12px;font-weight:800}.demo-list-item p{font-size:14px;font-weight:700;margin:0}@media(max-width:760px){.app-shell{grid-template-columns:1fr}.controls{border-bottom:1px solid #d9dde5;border-right:0}.preview{min-height:70vh;padding:24px}}