/* mockups for tools-retro1.js — every class starts with r1- */

.r1-nopic { background: linear-gradient(135deg, #e4e4e4, #bdbdbd); }

/* ============ myspace (2006) ============ */

.r1-ms { width: 840px; padding: 0 0 26px; background-color: var(--ms-bg); background-repeat: repeat; color: var(--ms-tx); font: 11px/1.35 Verdana, Arial, Helvetica, sans-serif; }
.r1-ms a { color: var(--ms-ln); text-decoration: none; }
.r1-ms-gl::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(circle, #fff 0 .8px, transparent 1.5px), radial-gradient(circle, var(--ms-hd) 0 1.1px, transparent 1.9px),
    radial-gradient(circle, rgba(255,255,255,.75) 0 .6px, transparent 1.2px), radial-gradient(circle, var(--ms-ln) 0 .9px, transparent 1.6px),
    radial-gradient(circle, #fff 0 1.4px, rgba(255,255,255,.25) 2px, transparent 3px);
  background-size: 17px 13px, 29px 23px, 11px 19px, 41px 31px, 67px 53px;
  background-position: 0 0, 9px 5px, 4px 11px, 21px 15px, 30px 8px; }
.r1-ms-wrap { position: relative; z-index: 1; width: 800px; margin: 0 auto; }
.r1-ms-top { display: flex; align-items: center; gap: 22px; height: 64px; padding: 0 10px; background: linear-gradient(#1f56b3, #0b3a8f); color: #fff; font-family: Arial, Helvetica, sans-serif; }
.r1-ms-logo { display: flex; align-items: center; gap: 6px; }
.r1-ms-logo svg { width: 38px; height: 25px; }
.r1-ms-lw { font: bold 25px/1 Arial, Helvetica, sans-serif; letter-spacing: -1px; }
.r1-ms-lw span { font-size: 15px; letter-spacing: 0; }
.r1-ms-tag { font-size: 11px; margin-top: 1px; color: #dbe6f7; }
.r1-ms-srch { font-size: 11px; }
.r1-ms-srch > div:first-child { display: flex; align-items: center; gap: 5px; }
.r1-ms-sl { font-weight: bold; }
.r1-ms-inp { display: inline-block; width: 200px; height: 17px; background: #fff; border: 1px solid #7f9db9; }
.r1-ms-go { padding: 1px 6px; background: linear-gradient(#fff, #d4d0c8); border: 1px solid #555; border-radius: 2px; color: #000; font-size: 11px; }
.r1-ms-rad { display: flex; align-items: center; gap: 3px; margin-top: 4px; font-size: 10px; white-space: nowrap; }
.r1-ms-rad i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #fff; border: 1px solid #333; margin-left: 4px; }
.r1-ms-rad i.on2 { background: radial-gradient(circle, #000 0 2px, #fff 2.5px); }
.r1-ms-rad i:first-child { margin-left: 0; }
.r1-ms-g { margin-left: 6px; color: #c9d7ef; }
.r1-ms-g b { color: #fff; }
.r1-ms-help { margin-left: auto; align-self: flex-start; padding-top: 6px; font-size: 10px; }
.r1-ms-nav { padding: 4px 8px 5px; background: #6698cb; color: #fff; font: 11px Arial, Helvetica, sans-serif; text-align: center; white-space: nowrap; }
.r1-ms-nav a { color: #fff !important; }
.r1-ms-page { display: flex; gap: 15px; align-items: flex-start; padding: 14px 10px 18px; background: var(--ms-box); }
.r1-ms-l { width: 300px; flex: none; }
.r1-ms-r { flex: 1; min-width: 0; }
.r1-ms-name { font: bold 17px/1.2 Arial, Helvetica, sans-serif; margin: 0 0 6px; color: var(--ms-tx); }
.r1-ms-id { display: flex; gap: 10px; align-items: flex-start; }
.r1-ms-pic { width: 170px; flex: none; height: auto; }
div.r1-ms-pic { height: 170px; }
.r1-ms-info { flex: 1; min-width: 0; font-size: 11px; word-wrap: break-word; }
.r1-ms-online { display: inline-flex; align-items: center; gap: 3px; }
.r1-ms-online svg { width: 12px; height: 14px; }
.r1-ms-online span { font: italic bold 11px Arial, Helvetica, sans-serif; color: #e47b00; }
.r1-ms-dk .r1-ms-online span { color: #ffb33b; }
.r1-ms-login { font-size: 10px; }
.r1-ms-mood { margin-top: 8px; }
.r1-ms-view { margin-top: 6px; }
.r1-ms-box { margin-top: 10px; border: 1px solid var(--ms-ac); }
.r1-ms-bh, .r1-ms-th { background: var(--ms-ac); color: #fff; font-weight: bold; font-size: 11px; padding: 3px 6px; }
.r1-ms-cg { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 6px; padding: 7px 10px; }
.r1-ms-cb { display: flex; align-items: center; gap: 5px; height: 21px; }
.r1-ms-ci { width: 16px; height: 16px; flex: none; color: var(--ms-ac); }
.r1-ms-cb a { font-size: 10px; font-weight: bold; }
.r1-ms-url { padding: 5px 8px; font-size: 10px; word-break: break-all; }
.r1-ms-tb { width: 100%; margin-top: 10px; border: 1px solid var(--ms-ac); border-spacing: 3px; background: var(--ms-box); }
.r1-ms-tb td { padding: 3px 6px; vertical-align: top; font-size: 11px; }
.r1-ms-lb { width: 82px; background: var(--ms-lt); color: var(--ms-lx); font-weight: bold; }
.r1-ms-vl { background: var(--ms-pl); word-wrap: break-word; }
.r1-ms-tb td.r1-ms-th { padding: 3px 6px; }
.r1-ms-player { display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 8px; margin-bottom: 10px; border-radius: 4px; border: 1px solid #111; background: linear-gradient(#626262, #2c2c2c 50%, #1b1b1b); color: #fff; font-family: Arial, Helvetica, sans-serif; }
.r1-ms-pb { width: 22px; height: 22px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(#8a8a8a, #2e2e2e); border: 1px solid #0c0c0c; }
.r1-ms-pb.sq { width: 18px; height: 18px; }
.r1-ms-pb svg { width: 9px; height: 9px; fill: #fff; }
.r1-ms-pt { flex: 1; min-width: 0; line-height: 1.25; }
.r1-ms-ps { font-weight: bold; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r1-ms-pa { font-size: 10px; color: #bdbdbd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r1-ms-pbar { width: 110px; height: 5px; flex: none; background: #0d0d0d; border: 1px solid #6a6a6a; border-radius: 3px; overflow: hidden; }
.r1-ms-pbar i { display: block; height: 100%; background: linear-gradient(#bfe0ff, #3d8fe8); }
.r1-ms-vol svg { width: 14px; height: 12px; fill: #ccc; color: #ccc; }
.r1-ms-ext { margin-bottom: 10px; padding: 14px 12px; border: 1px solid var(--ms-ac); font: bold 16px/1.25 Arial, Helvetica, sans-serif; }
.r1-ms-sec { margin-bottom: 10px; padding: 6px 8px 8px; border: 1px solid var(--ms-ac); }
.r1-ms-hd { color: var(--ms-hd); font: bold 13px Arial, Helvetica, sans-serif; margin-bottom: 6px; }
.r1-ms-bt { font-weight: bold; margin-top: 4px; }
.r1-ms-bx { margin-bottom: 8px; word-wrap: break-word; }
.r1-ms-fc { margin-bottom: 4px; }
.r1-ms-red { color: #ff0000; }
.r1-ms-dk .r1-ms-red { color: #ff4040; }
.r1-ms-fg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 4px; padding: 6px 0 4px; text-align: center; }
.r1-ms-fr { min-width: 0; }
.r1-ms-fn { display: block; margin-bottom: 3px; font-size: 10px; word-wrap: break-word; }
.r1-ms-fp { display: block; width: 90px; height: auto; margin: 0 auto; }
div.r1-ms-fp { height: 90px; }
.r1-ms-va { text-align: right; font-weight: bold; font-size: 10px; }
.r1-ms-disp { margin-bottom: 6px; font-size: 10px; }
.r1-ms-ct { width: 100%; border-spacing: 0 3px; }
.r1-ms-ct td { vertical-align: top; font-size: 11px; }
.r1-ms-cl { width: 120px; padding: 6px; background: var(--ms-cl); text-align: center; }
.r1-ms-cn { display: block; margin-bottom: 4px; font-weight: bold; font-size: 10px; word-wrap: break-word; }
.r1-ms-cp { display: block; width: 90px; height: auto; margin: 0 auto; }
div.r1-ms-cp { height: 90px; }
.r1-ms-cr { padding: 6px 8px; background: var(--ms-cr); word-wrap: break-word; }
.r1-ms-cd { font-weight: bold; margin-bottom: 8px; }

/* ============ windows xp window (msn + aim) ============ */

.r1-im { width: max-content; padding: 0; background: transparent; }
.r1-xp { padding: 0 3px 3px; border-radius: 8px 8px 0 0; background: linear-gradient(90deg, #0831d9, #166aee 2px, #0a4bdc 3px, #0a4bdc calc(100% - 3px), #166aee calc(100% - 2px), #0831d9);
  font: 11px Tahoma, 'Segoe UI', Verdana, sans-serif; color: #000; }
.r1-xp-t { display: flex; align-items: center; gap: 5px; height: 30px; margin: 0 -3px; padding: 0 5px 0 7px; border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, #0997ff, #0053ee 8%, #0050ee 40%, #06f 88%, #06f 93%, #005bff 95%, #003dd7 96%, #003dd7);
  color: #fff; font: bold 13px 'Trebuchet MS', Tahoma, sans-serif; text-shadow: 1px 1px #0f1089; }
.r1-xp-ic { display: flex; flex: none; }
.r1-xp-ic svg { width: 16px; height: 18px; }
.r1-xp-tt { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r1-xp-bt { display: flex; gap: 2px; flex: none; }
.r1-xp-b { display: flex; align-items: center; justify-content: center; width: 21px; height: 21px; border: 1px solid #fff; border-radius: 3px;
  background: radial-gradient(circle at 90% 90%, #0054e9 0%, #2263d5 55%, #4479e4 70%, #a3bbec 90%, #fff 100%); box-shadow: inset 0 -1px 2px 1px #4646ff; }
.r1-xp-b.r1-xp-x { background: radial-gradient(circle at 90% 90%, #cc4600 0%, #dc6527 55%, #cd7546 70%, #ffccb2 90%, #fff 100%); box-shadow: inset 0 -1px 2px 1px #da4600; }
.r1-xp-b svg { width: 11px; height: 11px; }
.r1-xp-in { background: #ece9d8; }
.r1-xp-menu { display: flex; padding: 1px 2px; background: #ece9d8; border-bottom: 1px solid #d4d0c8; }
.r1-xp-menu span { padding: 2px 6px; }
.r1-xp-st { min-height: 21px; padding: 4px 7px 3px; border-top: 1px solid #aca899; background: #ece9d8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; box-sizing: border-box; }

/* msn conversation */
.r1-msn-w { width: 566px; }
.r1-msn-body { padding: 2px 8px 6px; background: linear-gradient(#c3d8f3, #e9f1fb 90px, #dce8f7); }
.r1-msn-tools { display: flex; align-items: center; gap: 1px; padding: 4px 0 6px; }
.r1-msn-tl { display: flex; align-items: flex-end; padding: 2px 3px; }
.r1-msn-tl svg { width: 28px; height: 28px; }
.r1-msn-tl i { font-style: normal; font-size: 7px; color: #3d5a80; margin-left: 1px; }
.r1-msn-tsep { width: 1px; height: 28px; margin: 0 5px; background: #9db5d6; }
.r1-msn-main { display: flex; gap: 8px; }
.r1-msn-lc { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.r1-msn-to { padding: 4px 6px 5px; margin-bottom: 4px; border: 1px solid #a9bfdc; border-radius: 4px; background: linear-gradient(#fff, #eef4fb); line-height: 1.4; }
.r1-msn-psm { color: #6b7686; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r1-msn-log { min-height: 250px; padding: 6px 8px; background: #fff; border: 1px solid #8fa8c8; border-radius: 4px; font: 13px/1.3 Arial, Helvetica, sans-serif; word-wrap: break-word; }
.r1-msn-says { color: #6f6f6f; font: 12px Tahoma, 'Segoe UI', sans-serif; margin-top: 2px; }
.r1-msn-msg { padding-left: 12px; margin: 1px 0 6px; }
.r1-msn-nudge { margin: 6px 0; padding: 3px 0; border-top: 1px dashed #c8c8c8; border-bottom: 1px dashed #c8c8c8; color: #6f6f6f; font: 12px Tahoma, 'Segoe UI', sans-serif; }
.r1-msn-fmt { display: flex; align-items: center; gap: 1px; padding: 4px 0 3px; }
.r1-msn-fb { display: inline-flex; align-items: center; padding: 1px 3px; }
.r1-msn-fb svg { width: 17px; height: 17px; }
.r1-msn-fb i { font-style: normal; font-size: 7px; color: #3d5a80; margin-left: 1px; }
.r1-msn-a { font: bold 16px/16px Georgia, 'Times New Roman', serif; color: #1d3f8a; padding: 0 2px; }
.r1-msn-vc { display: flex; align-items: center; gap: 3px; margin-left: auto; padding: 1px 7px 1px 4px; border: 1px solid #8fa8c8; border-radius: 3px; background: linear-gradient(#fff, #dbe6f5); }
.r1-msn-vc svg { width: 14px; height: 14px; }
.r1-msn-inrow { display: flex; gap: 5px; }
.r1-msn-input { flex: 1; height: 66px; background: #fff; border: 1px solid #8fa8c8; border-radius: 4px; }
.r1-msn-btns { display: flex; flex-direction: column; gap: 4px; width: 66px; }
.r1-xpbtn { display: flex; align-items: center; justify-content: center; height: 23px; border: 1px solid #003c74; border-radius: 3px; background: linear-gradient(#fff, #ecebe6 86%, #d6d0c5); }
.r1-msn-btns .r1-xpbtn:first-child { height: 39px; }
.r1-msn-tabs { display: flex; gap: 2px; padding-left: 4px; }
.r1-msn-tabs span { display: flex; padding: 1px 5px; border: 1px solid #8fa8c8; border-top: 0; border-radius: 0 0 3px 3px; background: #d4e1f2; }
.r1-msn-tabs span.on { background: #fff; }
.r1-msn-tabs svg { width: 13px; height: 13px; }
.r1-msn-rc { width: 114px; flex: none; display: flex; flex-direction: column; align-items: center; padding-top: 2px; }
.r1-msn-sp { flex: 1; min-height: 30px; }
.r1-msn-dpf { width: 110px; height: 110px; padding: 5px; border-radius: 7px; border: 1px solid #8fa8c8; background: linear-gradient(#ffffff, #d2e0f3); box-shadow: 0 1px 2px rgba(30, 60, 110, .25); }
.r1-msn-dp { display: block; width: 98px; height: 98px; object-fit: cover; border-radius: 2px; }
div.r1-msn-dp { background: linear-gradient(135deg, #f2f7fd, #b9cde9); }
.r1-msn-dpa { font-style: normal; font-size: 8px; color: #3d5a80; line-height: 12px; }
.r1-msn-dpf.sm { width: 58px; height: 58px; padding: 3px; flex: none; }
.r1-msn-dpf.sm .r1-msn-dp { width: 50px; height: 50px; }

/* aim im window */
.r1-aim-w { width: 470px; }
.r1-aim-body { padding: 4px 6px 6px; }
.r1-aim-log { min-height: 210px; padding: 4px 6px; background: #fff; border: 1px solid #7f9db9; font: 13px/1.35 Arial, Helvetica, sans-serif; word-wrap: break-word; }
.r1-aim-sn.r1-me, .r1-aim-ts.r1-me { color: #ff0000; }
.r1-aim-sn.r1-them, .r1-aim-ts { color: #0000ff; }
.r1-aim-sn { font-weight: bold; }
.r1-aim-ts { font-size: 11px; }
.r1-aim-auto { color: #808080; font-size: 11px; }
.r1-aim-sys { color: #808080; font-size: 12px; font-style: italic; }
.r1-aim-fmt { display: flex; align-items: center; gap: 1px; padding: 4px 0 3px; }
.r1-aim-fb { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 21px; padding: 0 2px; font: 13px Arial, Helvetica, sans-serif; color: #000; }
.r1-aim-fb svg { width: 16px; height: 16px; }
.r1-aim-fb.col { font-size: 9px; gap: 1px; }
.r1-aim-fb.col b { font: bold 13px/14px Arial, Helvetica, sans-serif; }
.r1-aim-fb.col b.hl { background: #fff; border: 1px solid #999; padding: 0 2px; line-height: 12px; }
.r1-aim-fb.sm { font-size: 10px; }
.r1-aim-fb.lg { font-size: 16px; }
.r1-aim-fb.lnk { color: #0000ff; text-decoration: underline; font-size: 11px; }
.r1-aim-sep { width: 1px; height: 18px; margin: 0 3px; background: #aca899; box-shadow: 1px 0 #fff; }
.r1-aim-bot { display: flex; gap: 5px; align-items: flex-end; }
.r1-aim-dp { width: 48px; height: 48px; flex: none; object-fit: cover; border: 1px solid #7f9db9; }
.r1-aim-input { flex: 1; height: 58px; background: #fff; border: 1px solid #7f9db9; }
.r1-aim-btns { display: flex; align-items: flex-end; padding-top: 7px; }
.r1-aim-bb { display: flex; flex-direction: column; align-items: center; gap: 1px; width: 52px; font-size: 11px; }
.r1-aim-bb svg { width: 26px; height: 26px; }
.r1-aim-bb.send { margin-left: auto; font-weight: bold; }
.r1-aim-gap { width: 1px; height: 36px; margin: 0 4px; background: #aca899; box-shadow: 1px 0 #fff; }
.r1-aim-typ { display: inline-flex; align-items: center; gap: 4px; }
.r1-aim-typ svg { width: 14px; height: 14px; }
.r1-aim-man { width: 16px; height: 19px; }

/* msn buddy list */
.r1-ml-w { width: 300px; }
.r1-ml { background: linear-gradient(#c3d8f3, #e9f1fb 110px, #dce8f7); padding-bottom: 6px; }
.r1-ml-head { display: flex; gap: 8px; padding: 8px 8px 6px; }
.r1-ml-me { min-width: 0; flex: 1; }
.r1-ml-nm { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r1-ml-nm span { color: #2b3b55; }
.r1-ml-nm i, .r1-ml-psm i { font-style: normal; font-size: 8px; color: #3d5a80; }
.r1-ml-psm { color: #5d6b80; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r1-ml-ic { display: flex; align-items: center; gap: 5px; margin-top: 5px; }
.r1-ml-ic svg { width: 15px; height: 13px; }
.r1-ml-ic span { margin-right: 6px; }
.r1-ml-find { display: flex; align-items: center; gap: 6px; padding: 0 8px 6px; }
.r1-ml-fi { flex: 1; padding: 2px 6px; background: #fff; border: 1px solid #8fa8c8; border-radius: 3px; color: #8a8a8a; }
.r1-ml-find svg { width: 22px; height: 18px; }
.r1-ml-list { min-height: 300px; margin: 0 6px; padding: 3px 2px 8px; background: #fff; border: 1px solid #8fa8c8; border-radius: 3px; }
.r1-ml-g { padding: 4px 4px 2px; font-weight: bold; color: #1b2d4d; }
.r1-ml-tri { font-style: normal; font-size: 9px; margin-right: 4px; color: #4a6a9a; }
.r1-ml-b { display: flex; align-items: center; gap: 4px; padding: 2px 4px 2px 14px; white-space: nowrap; overflow: hidden; }
.r1-msn-bud { width: 16px; height: 16px; flex: none; }
.r1-ml-n { flex: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.r1-ml-m { color: #7d7d7d; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.r1-ml-b.off .r1-ml-n { color: #7d7d7d; }
.r1-ml-ad { display: flex; align-items: center; justify-content: center; gap: 4px; height: 52px; margin: 6px 6px 0; border: 1px solid #a9bfdc; border-radius: 3px; background: linear-gradient(#fff, #eaf1fa); }
.r1-ml-fly svg { width: 30px; height: 25px; }
.r1-ml-ad b { font: bold 22px/1 Arial, Helvetica, sans-serif; letter-spacing: -1px; color: #222; }
.r1-ml-tm { font: 18px/1 Arial, Helvetica, sans-serif; color: #6b6b6b; }

/* aim buddy list */
.r1-al-w { width: 250px; }
.r1-al { padding-bottom: 2px; }
.r1-al-top { display: flex; align-items: center; padding: 6px 7px; background: linear-gradient(#fff, #e3e9f4); border-bottom: 1px solid #aca899; }
.r1-al-logo { display: flex; align-items: center; gap: 6px; }
.r1-al-logo .r1-aim-man { width: 32px; height: 38px; }
.r1-al-logo b { display: block; font: italic 900 22px/1 Arial, Helvetica, sans-serif; letter-spacing: -1px; }
.r1-al-logo span { display: block; font-size: 9px; color: #333; }
.r1-al-today { margin-left: auto; color: #0000ff; text-decoration: underline; font-size: 10px; }
.r1-al-tabs { display: flex; gap: 2px; padding: 5px 5px 0; }
.r1-al-tabs span { padding: 2px 9px; border: 1px solid #919b9c; border-bottom: 0; border-radius: 3px 3px 0 0; background: linear-gradient(#fff, #ecebe5); }
.r1-al-tabs span.on { position: relative; top: 1px; background: #fff; border-top: 2px solid #ffc83c; font-weight: bold; }
.r1-al-list { min-height: 330px; margin: 0 5px; padding: 3px 0 6px; background: #fff; border: 1px solid #919b9c; font: 13px/1.3 Arial, Helvetica, sans-serif; }
.r1-al-g { padding: 2px 4px; font-weight: bold; }
.r1-al-g i { font-style: normal; font-size: 9px; margin-right: 4px; }
.r1-al-b { display: flex; align-items: center; gap: 4px; padding: 1px 4px 1px 20px; white-space: nowrap; overflow: hidden; }
.r1-al-n { flex: none; }
.r1-al-away { width: 12px; height: 12px; flex: none; }
.r1-al-m { color: #808080; font-size: 11px; font-style: italic; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.r1-al-b.offline .r1-al-n { color: #808080; }
.r1-al-b.away .r1-al-n, .r1-al-b.busy .r1-al-n { color: #555; }
.r1-al-bar { display: flex; justify-content: space-around; padding: 6px 4px 4px; }
.r1-al-tb { display: flex; flex-direction: column; align-items: center; gap: 1px; font-size: 10px; }
.r1-al-tb svg { width: 22px; height: 22px; }

/* ============ flip phone ============ */

.r1-fp { width: max-content; padding: 22px 26px; background: transparent; }
.r1-fp.r1-fp-only { padding: 0; }
.r1-fp-scr { position: relative; width: 240px; height: 300px; overflow: hidden; display: flex; flex-direction: column; background: #fff; color: #000;
  font: 15px/1.12 'Pixelify Sans', monospace; }
.r1-fp-f-lcd .r1-fp-scr { font: 19px/.95 VT323, monospace; }
.r1-fp-f-tiny .r1-fp-scr { font: 11px/1.3 Silkscreen, monospace; }
.r1-fp-scr svg { fill: currentColor; }
.r1-fp-sb { position: relative; z-index: 1; display: flex; align-items: center; gap: 4px; height: 20px; padding: 0 5px; flex: none; background: #000; color: #fff; font-size: .8em; }
.r1-fp-sig { width: 21px; height: 11px; flex: none; }
.r1-fp-bat { width: 19px; height: 11px; flex: none; }
.r1-fp-car { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; }
.r1-fp-tm { white-space: nowrap; }
.r1-fp-ttl { display: flex; align-items: center; gap: 5px; height: 24px; padding: 0 6px; flex: none; background: linear-gradient(var(--fp-ui), var(--fp-ui2)); color: #fff; white-space: nowrap; overflow: hidden; }
.r1-fp-ttl .r1-fp-env { width: 17px; height: 12px; flex: none; }
.r1-fp-msgs { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; padding: 4px 5px; overflow: hidden; word-wrap: break-word; }
.r1-fp-rz { padding-bottom: 3px; border-bottom: 1px dotted #9a9a9a; }
.r1-fp-rh { display: flex; justify-content: space-between; gap: 6px; font-size: .82em; }
.r1-fp-rz.r1-them .r1-fp-rh b { color: var(--fp-ui); }
.r1-fp-rz.r1-me .r1-fp-rh b { color: #555; }
.r1-fp-mt { color: #666; font-size: .78em; white-space: nowrap; }
.r1-fp-rz .r1-fp-mt { font-size: 1em; }
.r1-fp-bub { max-width: 82%; }
.r1-fp-bub .r1-fp-bt { padding: 3px 6px; border: 1px solid #8a8a8a; border-radius: 6px; background: #ececec; }
.r1-fp-bub.r1-them { align-self: flex-start; }
.r1-fp-bub.r1-me { align-self: flex-end; text-align: right; }
.r1-fp-bub.r1-me .r1-fp-bt { text-align: left; background: var(--fp-uil); border-color: var(--fp-ui); }
.r1-fp-bub .r1-fp-mt { display: block; margin-top: 1px; padding: 0 3px; }
.r1-fp-soft { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; height: 22px; padding: 0 7px; flex: none;
  background: linear-gradient(var(--fp-ui), var(--fp-ui2)); color: #fff; }
.r1-fp-mid svg { width: 12px; height: 10px; }
.r1-fp-mid .r1-fp-env { width: 15px; height: 10px; }
.r1-fp-flip .r1-fp-sb { background: var(--fp-uil); color: #000; }
.r1-fp-flip .r1-fp-soft { background: linear-gradient(#f2f2f2, #c8c8c8); color: #000; border-top: 1px solid #999; }
/* new message screen */
.r1-fp-wp { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.r1-fp-wpd { background: radial-gradient(circle at 30% 20%, var(--fp-uil), var(--fp-ui) 45%, var(--fp-ui2) 80%, #000); }
.r1-fp-m-inbox .r1-fp-sb { background: rgba(0, 0, 0, .45); color: #fff; }
.r1-fp-idle { position: relative; z-index: 1; margin-top: 16px; text-align: center; color: #fff; text-shadow: 1px 1px 0 #000, -1px 0 0 #000, 0 -1px 0 #000; }
.r1-fp-bigt { font-size: 2.6em; line-height: 1; }
.r1-fp-dt { margin-top: 2px; }
.r1-fp-pop { position: relative; z-index: 1; margin: auto 12px 10px; background: #fff; border: 2px solid var(--fp-ui2); box-shadow: 3px 3px 0 rgba(0, 0, 0, .55); }
.r1-fp-ph { padding: 2px 6px; background: linear-gradient(var(--fp-ui), var(--fp-ui2)); color: #fff; }
.r1-fp-pb { display: flex; align-items: center; gap: 9px; padding: 9px 8px; }
.r1-fp-pb .r1-fp-env { width: 26px; height: 18px; flex: none; }
.r1-fp-from { color: #444; margin-top: 2px; }
/* sidekick */
.r1-fp-sidekick .r1-fp-scr { width: 360px; height: 240px; }
.r1-fp-skt { display: flex; align-items: center; gap: 5px; height: 22px; padding: 0 6px; flex: none; background: linear-gradient(var(--fp-ui), var(--fp-ui2)); color: #fff; white-space: nowrap; overflow: hidden; }
.r1-fp-ska svg { width: 13px; height: 13px; display: block; }
.r1-fp-sks { display: flex; align-items: center; gap: 5px; margin-left: auto; font-size: .8em; }
.r1-fp-sk { line-height: 1.2; }
.r1-fp-sk.r1-them b { color: #c0102a; }
.r1-fp-sk.r1-me b { color: var(--fp-ui); }
.r1-fp-sk .r1-fp-mt { margin-left: 6px; }
.r1-fp-skin { display: flex; gap: 6px; padding: 4px 5px; flex: none; border-top: 1px solid #aaa; background: #eee; }
.r1-fp-skin span { flex: 1; height: 20px; background: #fff; border: 1px solid #888; }
.r1-fp-skin b { display: flex; align-items: center; padding: 0 8px; border: 1px solid #555; border-radius: 3px; background: linear-gradient(#fff, #c9c9c9); font-weight: normal; }
.r1-fp-skb { position: relative; z-index: 1; display: flex; justify-content: space-around; height: 22px; align-items: center; flex: none; background: linear-gradient(#f2f2f2, #c8c8c8); }
/* razr body */
.r1-fp-dev { width: 320px; }
.r1-fp-top { padding: 14px 13px 18px; border-radius: 30px 30px 8px 8px;
  background: linear-gradient(90deg, var(--fp-b2), var(--fp-b) 12%, var(--fp-bl) 50%, var(--fp-b) 88%, var(--fp-b2)); box-shadow: inset 0 2px 1px rgba(255,255,255,.45), inset 0 -2px 3px rgba(0,0,0,.25); }
.r1-fp-face { display: flex; flex-direction: column; align-items: center; padding: 14px 12px 12px; border-radius: 20px 20px 5px 5px; background: linear-gradient(#2b2c31, #0c0c0e); box-shadow: inset 0 1px 0 rgba(255,255,255,.18); }
.r1-fp-ear { width: 64px; height: 7px; margin-bottom: 13px; border-radius: 4px; background: #000; box-shadow: inset 0 1px 2px #000, 0 1px 0 rgba(255,255,255,.12); }
.r1-fp-bez { padding: 3px; background: #000; border: 1px solid #333; border-radius: 3px; }
.r1-fp-brand { margin-top: 11px; color: #a9adb4; font: 600 11px/1 Arial, Helvetica, sans-serif; letter-spacing: 3px; }
.r1-fp-brand.sm { height: 6px; margin-top: 8px; }
.r1-fp-hinge { position: relative; z-index: 1; height: 24px; margin: -4px 8px; border-radius: 12px;
  background: linear-gradient(var(--fp-bd), var(--fp-b2) 22%, var(--fp-bl) 50%, var(--fp-b2) 78%, var(--fp-bd)); }
.r1-fp-bot { height: 150px; overflow: hidden; padding: 18px 16px 0; border-radius: 6px 6px 0 0;
  background: linear-gradient(90deg, var(--fp-b2), var(--fp-b) 12%, var(--fp-bl) 50%, var(--fp-b) 88%, var(--fp-b2));
  -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.r1-fp-krow { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.r1-fp-k { display: flex; align-items: center; justify-content: center; width: 72px; height: 26px; border: 1px solid rgba(0,0,0,.35); border-radius: 5px; box-shadow: 0 1px 0 rgba(255,255,255,.35);
  color: #4db3ff; font: 600 15px Arial, Helvetica, sans-serif; text-shadow: 0 0 4px #39f; }
.r1-fp-k.sk { height: 14px; border-radius: 7px; }
.r1-fp-k svg { width: 15px; height: 15px; filter: drop-shadow(0 0 2px currentColor); }
.r1-fp-k.r1-kcall { color: #4cdb4c; }
.r1-fp-k.r1-kend { color: #ff4a4a; }
.r1-fp-k.r1-kend svg { transform: rotate(135deg); }
.r1-fp-nav { display: flex; align-items: center; justify-content: center; width: 70px; height: 70px; margin: -14px 0 -14px; border-radius: 50%; border: 2px solid rgba(0,0,0,.3); box-shadow: 0 1px 0 rgba(255,255,255,.35), inset 0 0 0 1px rgba(255,255,255,.2); }
.r1-fp-nav i { width: 24px; height: 24px; border-radius: 50%; border: 1px solid rgba(0,0,0,.35); box-shadow: 0 1px 0 rgba(255,255,255,.35); }
.r1-fp-krow.num { gap: 0; margin: 0 -16px; border-top: 1px solid rgba(0,0,0,.3); }
.r1-fp-krow.num span { flex: 1; height: 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-right: 1px solid rgba(0,0,0,.3);
  color: #4db3ff; font: 600 19px/1 Arial, Helvetica, sans-serif; text-shadow: 0 0 4px #39f; }
.r1-fp-krow.num span:last-child { border-right: 0; }
.r1-fp-krow.num small { font-size: 9px; font-weight: 400; letter-spacing: 1px; margin-top: 2px; }
/* generic flip */
.r1-fp-flip .r1-fp-dev { width: 300px; }
.r1-fp-flip .r1-fp-top { border-radius: 60px 60px 14px 14px; padding: 16px 14px 18px; background: linear-gradient(135deg, var(--fp-bl), var(--fp-b) 45%, var(--fp-b2)); }
.r1-fp-flip .r1-fp-face { border-radius: 46px 46px 8px 8px; padding: 14px 10px 10px; background: linear-gradient(#1a1a1d, #050506); }
.r1-fp-flip .r1-fp-scr { width: 228px; height: 288px; }
.r1-fp-flip .r1-fp-ear { display: flex; gap: 5px; justify-content: center; width: auto; height: auto; background: none; box-shadow: none; }
.r1-fp-flip .r1-fp-ear i { width: 5px; height: 5px; border-radius: 50%; background: #444; box-shadow: inset 0 1px 1px #000; }
.r1-fp-flip .r1-fp-hinge { border-radius: 14px; height: 28px; margin: -6px 2px; }
.r1-fp-flip .r1-fp-bot { border-radius: 14px 14px 0 0; background: linear-gradient(135deg, var(--fp-bl), var(--fp-b) 45%, var(--fp-b2)); }
.r1-fp-flip .r1-fp-k { background: #1e1e22; border: 0; color: #fff; text-shadow: none; }
.r1-fp-flip .r1-fp-nav { background: radial-gradient(circle, #d9d9d9 0 13px, #2a2a2e 13.5px); border: 0; }
.r1-fp-flip .r1-fp-nav i { border: 0; background: #d9d9d9; box-shadow: none; }
.r1-fp-flip .r1-fp-krow.num { gap: 8px; margin: 0; border: 0; }
.r1-fp-flip .r1-fp-krow.num span { height: 34px; border: 0; border-radius: 10px; background: #1e1e22; color: #fff; text-shadow: none; font-size: 16px; }
/* sidekick body */
.r1-fp-sidekick .r1-fp-dev { display: flex; align-items: center; gap: 18px; width: auto; padding: 24px 28px; border-radius: 70px;
  background: linear-gradient(var(--fp-bl), var(--fp-b) 45%, var(--fp-b2)); box-shadow: inset 0 3px 2px rgba(255,255,255,.45), inset 0 -4px 6px rgba(0,0,0,.3); }
.r1-fp-sidekick .r1-fp-bez { padding: 9px; background: #111; border: 0; border-radius: 10px; box-shadow: inset 0 0 0 1px #333; }
.r1-fp-skl, .r1-fp-skr { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.r1-fp-skl i, .r1-fp-skbtn { display: block; width: 30px; height: 16px; border-radius: 8px; background: rgba(0,0,0,.22); box-shadow: inset 0 1px 2px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.4); }
.r1-fp-pad { display: flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 50%; background: linear-gradient(#eee, #9a9a9a); box-shadow: inset 0 0 0 2px rgba(0,0,0,.2), 0 2px 3px rgba(0,0,0,.3); }
.r1-fp-pad i { width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #bbb 45%, #666); }

/* ============ ipod ============ */

.r1-ip { width: max-content; padding: 26px; background: transparent; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; }
.r1-ip-dev { position: relative; display: flow-root; width: 330px; height: 552px; border-radius: 24px;
  background: linear-gradient(135deg, rgba(255,255,255,.55), rgba(255,255,255,0) 38%, rgba(0,0,0,0) 70%, rgba(0,0,0,.06)), var(--ip-b);
  box-shadow: 0 0 0 3px #c4c7cb, 0 0 0 4px #8d9196, 0 14px 26px rgba(0,0,0,.28); }
.r1-ip-dk .r1-ip-dev { background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,0) 35%), var(--ip-b); }
.r1-ip-glass { position: relative; width: 288px; height: 218px; margin: 24px auto 0; padding: 4px; border-radius: 4px; background: #121212; box-shadow: 0 0 0 1px rgba(0,0,0,.15); }
.r1-ip-scr { width: 280px; height: 210px; overflow: hidden; display: flex; flex-direction: column; background: #fff; color: #000; transform-origin: 0 0; }
.r1-ip-tb { position: relative; flex: none; display: flex; align-items: center; justify-content: center; height: 22px; border-bottom: 1px solid #8e9196;
  background: linear-gradient(#fdfdfd, #e2e4e6 50%, #cbcdd0 51%, #d9dbde); font: bold 13px/1 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #000; }
.r1-ip-play { position: absolute; left: 7px; top: 5px; width: 9px; height: 11px; fill: #1f63d6; }
.r1-ip-bat { position: absolute; right: 6px; top: 5px; width: 22px; height: 11px; color: #4a4a4a; }
.r1-ip-shuf { position: absolute; right: 34px; top: 5px; width: 15px; height: 11px; fill: #4a4a4a; color: #4a4a4a; }
.r1-ip-body { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 8px 10px 7px; }
.r1-ip-np { display: flex; gap: 11px; align-items: flex-start; }
.r1-ip-artw { flex: none; width: 108px; height: 108px; box-shadow: 0 1px 4px rgba(0,0,0,.45); }
.r1-ip-art { display: block; width: 108px; height: 108px; object-fit: cover; }
.r1-ip-meta { flex: 1; min-width: 0; padding-top: 2px; }
.r1-ip-cnt { font-size: 11px; color: #333; margin-bottom: 7px; }
.r1-ip-s { font-weight: bold; font-size: 14px; line-height: 1.2; margin-bottom: 3px; word-wrap: break-word; }
.r1-ip-ar, .r1-ip-al { font-size: 13px; line-height: 1.25; margin-bottom: 2px; word-wrap: break-word; }
.r1-ip-bar { position: relative; margin-top: auto; height: 10px; border: 1px solid #7e848c; background: linear-gradient(#d7d9dc, #fff); overflow: hidden; }
.r1-ip-bar i { display: block; height: 100%; background: linear-gradient(#bfe0ff, #59a3f5 50%, #2f7fe6 51%, #74b6ff); }
.r1-ip-times { display: flex; justify-content: space-between; margin-top: 3px; font: bold 11px/1.1 'Helvetica Neue', Helvetica, Arial, sans-serif; }
/* grayscale (4th gen) */
.r1-ip-gray .r1-ip-scr { background: linear-gradient(#d2dbd3, #c3cdc6); color: #1b1f1c; }
.r1-ip-gray .r1-ip-tb { background: none; border-bottom: 1px solid #1b1f1c; font: bold 14px/1 Arial, Helvetica, sans-serif; }
.r1-ip-gray .r1-ip-play { fill: #1b1f1c; }
.r1-ip-gray .r1-ip-bat, .r1-ip-gray .r1-ip-shuf { color: #1b1f1c; fill: #1b1f1c; }
.r1-ip-gray .r1-ip-cnt { color: #1b1f1c; font: bold 12px Arial, Helvetica, sans-serif; }
.r1-ip-gt { margin: 6px 0 auto; text-align: center; font: bold 14px/1.35 Arial, Helvetica, sans-serif; word-wrap: break-word; }
.r1-ip-gt .r1-ip-s { font-size: 15px; margin-bottom: 1px; }
.r1-ip-gray .r1-ip-bar { margin: 8px 6px 0; height: 9px; border: 1px solid #1b1f1c; background: none; }
.r1-ip-gray .r1-ip-bar i { background: #1b1f1c; }
.r1-ip-gray .r1-ip-bar b { display: none; }
.r1-ip-gray .r1-ip-times { padding: 0 6px; font: bold 12px Arial, Helvetica, sans-serif; }
/* click wheel */
.r1-ip-wheel { position: relative; color: var(--ip-wt); width: 222px; height: 222px; margin: 44px auto 0; border-radius: 50%; background: var(--ip-w);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.18), inset 0 -1px 1px rgba(255,255,255,.7), 0 1px 0 rgba(255,255,255,.6); }
.r1-ip-dk .r1-ip-wheel { box-shadow: inset 0 1px 3px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.08); }
.r1-ip-menu { position: absolute; top: 19px; left: 0; right: 0; text-align: center; font: bold 13px/1 'Helvetica Neue', Helvetica, Arial, sans-serif; letter-spacing: .5px; color: var(--ip-wt); }
.r1-ip-wheel svg { position: absolute; width: 20px; height: 10px; fill: var(--ip-wt); }
.r1-ip-wl { left: 20px; top: 106px; }
.r1-ip-wr { right: 20px; top: 106px; }
.r1-ip-wp { left: 101px; bottom: 21px; }
.r1-ip-ctr { position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%;
  background: linear-gradient(rgba(255,255,255,.35), rgba(0,0,0,.04)), var(--ip-b); box-shadow: 0 0 0 1px rgba(0,0,0,.12), inset 0 1px 1px rgba(255,255,255,.5); }
.r1-ip-dk .r1-ip-ctr { background: linear-gradient(rgba(255,255,255,.08), rgba(0,0,0,.1)), var(--ip-b); box-shadow: 0 0 0 1px rgba(0,0,0,.6); }
/* nano (2nd gen) */
.r1-ip-nano .r1-ip-dev { width: 196px; height: 452px; border-radius: 14px;
  background: linear-gradient(100deg, rgba(255,255,255,.4), rgba(255,255,255,0) 30%, rgba(0,0,0,.08) 72%, rgba(255,255,255,.18)), var(--ip-b);
  box-shadow: 0 0 0 1px rgba(0,0,0,.22), 0 12px 22px rgba(0,0,0,.25); }
.r1-ip-nano .r1-ip-glass { width: 174px; height: 132px; margin-top: 18px; padding: 3px; overflow: hidden; }
.r1-ip-nano .r1-ip-scr { transform: scale(.6); }
.r1-ip-nano .r1-ip-wheel { width: 146px; height: 146px; margin-top: 74px; }
.r1-ip-nano .r1-ip-menu { top: 13px; font-size: 9px; }
.r1-ip-nano .r1-ip-wheel svg { width: 14px; height: 7px; }
.r1-ip-nano .r1-ip-wl { left: 13px; top: 70px; }
.r1-ip-nano .r1-ip-wr { right: 13px; top: 70px; }
.r1-ip-nano .r1-ip-wp { left: 66px; bottom: 14px; }
.r1-ip-nano .r1-ip-ctr { width: 54px; height: 54px; margin: -27px 0 0 -27px; }