/* Source values: 2Erqi6ljTlVKTslaql3KNX and 4xm6Xl3Fy7O0NEKcByA4JN.
   Figma uses a 402 pt device, with a 374 pt expanded surface: 14 pt insets.
   See FIGMA-SOURCES.md for node IDs and role-specific token mappings. */
:root{
 --island-small-height:37.33px;--island-paired-width:175px;--island-minimal-width:45px;
 --island-pair-gap:6px;--island-pair-offset:-25.5px;--island-top:14px;
 --island-radius:48px;--island-smoothing:.6;--island-inset:14px;
 --source-black:#000;--source-white:#fff;--source-secondary:rgb(255 255 255 / 50%);
 --source-music-accent:#f92c48;--source-clock-accent:#fe8002;--source-map-accent:#0a84ff;
}
.device-preview{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",sans-serif}
.camera{top:14.33px;height:36.667px;border-radius:19px}
.device-preview .island{top:var(--island-top);border-radius:0!important;background:var(--source-black)}
.device-preview .island[data-presentation=expanded]{width:calc(100% - 28px)}
.device-preview .island[data-presentation=compact]{width:226px;height:var(--island-small-height)}
.device-preview .island[data-presentation=minimal],
.device-preview[data-second-activity=true] .island[data-presentation=compact]{width:var(--island-paired-width);height:var(--island-small-height)}
.device-preview[data-timer-cancelled=true] .island[data-presentation=minimal]{width:125px}
.device-preview[data-activity] .compact-content{height:var(--island-small-height)}
.compact-content.minimal-content{padding:0 9px;justify-content:flex-start}
.minimal-content .compact-leading{min-width:0;max-width:23px;justify-content:center;gap:0}
.device-preview .compact-content.minimal-content .compact-leading>svg{width:19.34px;height:19.34px;flex-shrink:0}
.device-preview[data-activity=music] .compact-content .album{width:23px;height:23px;border-radius:7px}
.minimal-content .music-wave{width:23px;justify-content:center}
#recording-bubble{top:var(--island-top);left:calc(50% + 68px);width:var(--island-minimal-width);height:var(--island-small-height);border-radius:24px}
.device-preview[data-view=island][data-second-activity=true]:has(.island[data-presentation=minimal]) #recording-bubble{opacity:1;transform:translateX(0) scale(1)}
#island-shadow{top:var(--island-top);border-radius:var(--island-radius);box-shadow:0 20px 50px rgb(0 0 0 / 30%)}
.figma-app-icon{width:100%;height:100%;max-width:none;display:block}
.app-icon:has(.figma-app-icon){background:none;border-radius:0}
.figma-symbol{display:inline-block;background:currentColor;mask:var(--symbol) center/contain no-repeat;-webkit-mask:var(--symbol) center/contain no-repeat;width:19px;height:24px;flex-shrink:0}
.figma-play{width:17.67px;height:21px}
.music-playback .play-glyph>.figma-play{width:28px;height:34px}
.album-image>.figma-symbol{width:26px;height:33px}
.compact-content .album-image>.figma-symbol{width:12px;height:16px}
.device-preview[data-activity=timer] .compact-content{color:var(--source-clock-accent)}
.timer-controls .round-button{color:var(--source-white)}
.timer-controls .round-button.tint{color:var(--source-clock-accent);background:color-mix(in srgb,var(--source-clock-accent) 22%,black)}
.timer-value,.timer-reading{color:var(--source-clock-accent)}
.music-title{font-size:16px;line-height:16px;letter-spacing:0;color:var(--source-white);font-weight:600}
.music-artist{font-size:16px;line-height:16px;letter-spacing:-.1px;color:var(--source-secondary);font-weight:400;margin-top:8px}
.music-playback>button,.music-playback>.audio-device{color:var(--source-white)}
.music-playback>.favorite-button,.music-playback>.audio-device,.music-progress{color:var(--source-secondary)}
.music-progress.is-scrubbing{color:var(--source-white)}
.music-seek .seek-track{background:rgb(255 255 255 / 16%)}
.music-seek .seek-track>span{background:var(--source-secondary)}
.music-progress.is-scrubbing .seek-track>span{background:var(--source-white)}
.music-wave{color:var(--source-music-accent)}
.device-preview[data-activity=maps] .compact-content{color:var(--source-map-accent)}
@media(prefers-contrast:more){.music-artist,.music-progress,.music-playback>.favorite-button,.music-playback>.audio-device{color:#fff}}

.music-seek .seek-track>span{transition:width .25s linear}
.music-progress.is-scrubbing .seek-track>span{transition:none}
@media(prefers-reduced-motion:reduce){.music-seek .seek-track>span{transition:none}}