@layer components{.idm{container-type:inline-size}.idm-body{align-items:center;gap:20px;display:flex}.idm-phone{background:var(--gp-key-black);width:168px;height:340px;box-shadow:0 0 0 1px var(--gp-line);border-radius:28px;flex:none;padding:6px}.idm-screen{background:var(--gp-page);height:100%;font-family:var(--gp-f-body);color:var(--gp-ink);-webkit-user-select:none;user-select:none;border-radius:22px;position:relative;overflow:hidden}.idm-screen svg{flex:none;width:12px;height:12px}.idm-screen img{display:block}.idm-status{z-index:6;height:22px;font:650 9.5px/1 var(--gp-f-num);justify-content:space-between;align-items:center;padding:0 16px;display:flex;position:absolute;inset:0 0 auto}.idm-status-r svg{width:11px;height:11px}.idm-bar{z-index:2;background:var(--gp-sheet);height:30px;transition:translate var(--gp-d-sheet) var(--gp-ease-out), opacity var(--gp-d-state) linear;align-items:center;gap:4px;padding:0 6px;display:flex;position:absolute;inset-inline:0}.idm-bar-top{box-shadow:0 1px 0 var(--gp-line);top:22px}.idm-bar-bottom{height:36px;box-shadow:0 -1px 0 var(--gp-line);padding-bottom:6px;bottom:0}.idm-url{border-radius:var(--gp-r-pill);background:var(--gp-well);min-width:0;color:var(--gp-ink-2);text-align:center;white-space:nowrap;text-overflow:ellipsis;flex:1;padding:4px 8px;font-size:8px;overflow:hidden}.idm-key{width:20px;height:20px;color:var(--gp-ink-2);place-items:center;display:grid;position:relative}.idm-phone:is([data-frame="3"],[data-frame="4"]) .idm-bar-top{opacity:0;translate:0 -150%}.idm-phone:is([data-frame="3"],[data-frame="4"]) .idm-bar-bottom{opacity:0;translate:0 110%}.idm-app{transition:inset var(--gp-d-sheet) var(--gp-ease-out);flex-direction:column;gap:8px;padding:10px 12px;display:flex;position:absolute;inset:22px 0 36px}.idm-phone[data-platform=android] .idm-app{inset:52px 0 0}.idm-phone[data-frame="4"] .idm-app{inset:22px 0 0}.idm-app-head{align-items:center;gap:6px;display:flex}.idm-app-head img{border-radius:5px;width:16px;height:16px}.idm-app-head i,.idm-app-title,.idm-app-line{border-radius:var(--gp-r-pill);background:var(--gp-s2);height:6px;display:block}.idm-app-head i{width:44px}.idm-app-title{background:var(--gp-ink);width:70%;height:9px;margin-top:4px}.idm-app-line.idm-short{width:60%}.idm-grid{background:var(--gp-card);box-shadow:var(--gp-ring-c);border-radius:10px;grid-template-columns:repeat(4,1fr);gap:4px;padding:8px;display:grid}.idm-grid span{background:var(--gp-strum-100);height:26px;font:700 11px/1 var(--gp-f-num);color:var(--gp-strum-700);border-radius:6px;place-items:center;display:grid}.idm-play{border-radius:var(--gp-r-pill);background:var(--gp-strum-500);width:30px;height:30px;color:var(--gp-on-ink);align-self:center;place-items:center;margin-top:auto;margin-bottom:4px;display:grid}.idm-play svg{fill:currentColor;width:13px;height:13px}.idm-scrim{z-index:3;background:var(--gp-scrim);opacity:0;transition:opacity var(--gp-d-state) linear;position:absolute;inset:0}.idm-phone:is([data-frame="1"],[data-frame="2"]) .idm-scrim{opacity:1}.idm-row{white-space:nowrap;border-radius:8px;align-items:center;gap:7px;height:28px;padding:0 10px;font-size:9.5px;font-weight:600;display:flex;position:relative}.idm-row-on{background:var(--gp-well);padding-right:32px}.idm-sheet,.idm-confirm{inset-inline:0;z-index:4;background:var(--gp-sheet);box-shadow:var(--gp-shadow-pop);transition:translate var(--gp-d-sheet) var(--gp-ease-out);border-radius:16px 16px 0 0;padding:10px 8px 14px;position:absolute;bottom:0;translate:0 105%}.idm-confirm{padding:10px 12px;top:30px}.idm-phone[data-frame="1"] .idm-sheet,.idm-phone[data-frame="2"] .idm-confirm{translate:0}.idm-confirm-head{color:var(--gp-ink-2);justify-content:space-between;align-items:center;font-size:9.5px;display:flex}.idm-confirm-go{color:var(--gp-m-700);padding:3px 6px;font-weight:700;position:relative}.idm-confirm-body{background:var(--gp-well);border-radius:10px;align-items:center;gap:10px;margin-top:14px;padding:10px;font-size:11px;font-weight:650;display:flex}.idm-confirm-body img,.idm-dialog img{border-radius:9px;width:34px;height:34px}.idm-menu{z-index:4;background:var(--gp-sheet);width:132px;box-shadow:var(--gp-shadow-pop);opacity:0;transform-origin:100% 0;transition:opacity var(--gp-d-state) linear, scale var(--gp-d-pop) var(--gp-ease-out);border-radius:10px;padding:5px;position:absolute;top:26px;right:6px;scale:.9}.idm-phone[data-frame="1"] .idm-menu{opacity:1;scale:1}.idm-dialog{inset-inline:14px;z-index:4;background:var(--gp-sheet);box-shadow:var(--gp-shadow-pop);color:var(--gp-ink-2);opacity:0;transition:opacity var(--gp-d-state) linear, scale var(--gp-d-pop) var(--gp-ease-out);border-radius:14px;flex-direction:column;align-items:center;gap:4px;padding:14px 10px 8px;font-size:9.5px;display:flex;position:absolute;top:50%;translate:0 -50%;scale:.92}.idm-dialog>b{color:var(--gp-ink);margin-top:4px;font-size:11px}.idm-dialog-keys{justify-content:flex-end;align-self:stretch;align-items:center;gap:8px;margin-top:8px;display:flex}.idm-phone[data-frame="2"] .idm-dialog{opacity:1;scale:1}.idm-home{z-index:5;background:linear-gradient(160deg, var(--gp-strum-100), var(--gp-chords-100) 55%, var(--gp-fb-100));opacity:0;transition:opacity var(--gp-d-state) linear;grid-template-columns:repeat(4,minmax(0,1fr));align-content:start;gap:16px 10px;padding:40px 14px 0;display:grid;position:absolute;inset:0}.idm-phone[data-frame="3"] .idm-home{opacity:1}.idm-tile{aspect-ratio:1;background:var(--gp-card);opacity:.7;border-radius:9px;display:block}.idm-mine{flex-direction:column;align-items:center;gap:3px;display:flex}.idm-mine b{white-space:nowrap;font-size:7px;font-weight:650}.idm-mine-icon{width:100%;position:relative}.idm-mine-icon img{aspect-ratio:1;border-radius:9px;width:100%;box-shadow:0 2px 6px #1214182e}.idm-tap{z-index:1;background:color-mix(in srgb, var(--gp-ink) 22%, transparent);width:24px;height:24px;box-shadow:0 0 0 2px color-mix(in srgb, var(--gp-ink) 35%, transparent);pointer-events:none;border-radius:50%;margin:-12px 0 0 -12px;position:absolute;top:50%;left:50%}.idm-row>.idm-tap{margin-left:0;left:auto;right:6px}.idm-steps{flex-direction:column;gap:2px;min-width:0;display:flex}.idm-step{border-radius:var(--gp-r-m);width:100%;min-height:38px;font-size:var(--gp-t-ui);color:var(--gp-ink-3);text-align:left;cursor:pointer;transition:color var(--gp-d-state) linear, background-color var(--gp-d-state) linear;align-items:center;gap:10px;padding:6px 10px 6px 6px;line-height:1.3;display:flex}.idm-step:hover{color:var(--gp-ink)}.idm-step[aria-current=step]{background:var(--gp-well);color:var(--gp-ink);font-weight:600}.idm-step-n{border-radius:var(--gp-r-pill);background:var(--gp-s2);width:22px;height:22px;font:650 12px/1 var(--gp-f-num);color:var(--gp-ink-2);transition:background-color var(--gp-d-state) linear, color var(--gp-d-state) linear;flex:none;place-items:center;display:grid}.idm-step[aria-current=step] .idm-step-n{background:var(--gp-ink);color:var(--gp-on-ink)}@container (max-width:360px){.idm-body{gap:12px}.idm-step{font-size:var(--gp-t-cap);gap:8px;padding-right:4px}}@media (prefers-reduced-motion:no-preference){.idm-tap{animation:idm-tap .9s .7s var(--gp-ease-out) both}.idm-phone[data-frame="3"] .idm-mine-icon img{animation:idm-pop .52s .25s var(--gp-ease-out) both}.idm-phone[data-frame="4"] .idm-grid span{animation:idm-beat 1.6s calc(var(--i) * .2s) steps(1) infinite}.idm-phone[data-frame="4"] .idm-play{animation:.8s ease-in-out infinite alternate idm-pulse}}@media (prefers-reduced-motion:reduce){.idm-bar,.idm-app,.idm-scrim,.idm-sheet,.idm-confirm,.idm-menu,.idm-dialog,.idm-home{transition:opacity .15s linear}.idm-phone[data-frame="4"] .idm-grid span:nth-child(-n+3){background:var(--gp-strum-500);color:var(--gp-on-ink)}}@keyframes idm-tap{0%{opacity:0;scale:1.6}45%{opacity:1;scale:1}70%{scale:.8}to{opacity:1;scale:1}}@keyframes idm-pop{0%{opacity:0;scale:.3}70%{opacity:1;scale:1.12}to{scale:1}}@keyframes idm-beat{0%,12.5%{background:var(--gp-strum-500);color:var(--gp-on-ink)}12.6%,to{background:var(--gp-strum-100);color:var(--gp-strum-700)}}@keyframes idm-pulse{to{scale:1.08}}}
