/* App previews. Every size is a multiple of --u so the same preview fits the phone, handheld, laptop and headset. */
.ap{--a:#9b3fc0;--ink:#3b1b55;--soft:#f6ecfb;display:flex;flex-direction:column;gap:calc(var(--u)*1.8);color:var(--ink);font-size:calc(var(--u)*2.9);background:#fff;border:1px solid #f0e4f8;border-radius:calc(var(--u)*2.4);padding:calc(var(--u)*2.4);box-shadow:calc(var(--u)*.6) calc(var(--u)*.8) 0 rgba(59,27,85,.08)}
.ap-h{font-family:var(--f-display);font-weight:400;font-size:calc(var(--u)*3);color:var(--ink)}
.ap-tabs{display:flex;gap:calc(var(--u)*2.4);font-size:calc(var(--u)*2.6);color:#9a7cb3}
.ap-tabs .on{color:var(--ink);box-shadow:0 calc(var(--u)*.5) 0 var(--a)}
.ap-g6{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(var(--u)*1.4)}
.ap-g6 div{aspect-ratio:3/4;border-radius:calc(var(--u)*1.6);display:flex;align-items:flex-end;padding:calc(var(--u)*1);font-size:calc(var(--u)*2.2);color:#fff;font-weight:800;text-shadow:0 1px 2px rgba(0,0,0,.45);box-shadow:calc(var(--u)*.5) calc(var(--u)*.7) 0 rgba(59,27,85,.1)}
.ap-ed{display:flex;align-items:center;gap:calc(var(--u)*3)}
.ap-ed .disc{flex:0 0 auto;width:calc(var(--u)*16);height:calc(var(--u)*16);border-radius:50%;background:linear-gradient(135deg,#e0569c,#9b3fc0);display:grid;place-items:center;animation:ap-spin 14s linear infinite}
.ap-ed .disc svg{width:55%;height:55%}
.ap-ed span{display:block;font-size:calc(var(--u)*2.5);color:#7a5a92}
.ap-big{font-family:var(--f-display);font-weight:400;font-size:calc(var(--u)*5)}
@keyframes ap-spin{to{transform:rotate(360deg)}}
.ap-rows{display:flex;flex-direction:column;gap:calc(var(--u)*1.1)}
.ap-row{display:flex;align-items:center;gap:calc(var(--u)*1.8);background:var(--soft);border-radius:calc(var(--u)*1.4);padding:calc(var(--u)*1) calc(var(--u)*1.6);font-size:calc(var(--u)*2.5);min-width:0}
.ap-row>div{flex:1;min-width:0}
.ap-row b{display:block;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ap-row small{font-size:calc(var(--u)*2.1);color:#9a7cb3}
.ap-row>i{flex:0 0 auto;width:calc(var(--u)*6);height:calc(var(--u)*6);border-radius:calc(var(--u)*1.2)}
.ap-row>em{width:calc(var(--u)*.7);align-self:stretch;background:#ffb81a;border-radius:4px}
.ap-row .tm{font-family:var(--f-pixel);background:var(--ink);color:#fff;border-radius:calc(var(--u)*.8);padding:0 calc(var(--u)*1);font-size:calc(var(--u)*2.1)}
.ap-sl div{display:flex;justify-content:space-between;font-size:calc(var(--u)*2.5)}
.ap-sl div span:last-child{font-family:var(--f-pixel)}
.ap-sl i{display:block;height:calc(var(--u)*.9);background:#e9dcf3;border-radius:4px;margin-top:calc(var(--u)*.8);position:relative}
.ap-sl em{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,var(--a),#e0569c);border-radius:4px;animation:ap-grow 1s cubic-bezier(.2,.8,.2,1) both}
.ap-sl em::after{content:"";position:absolute;right:calc(var(--u)*-1.3);top:calc(var(--u)*-.9);width:calc(var(--u)*2.6);height:calc(var(--u)*2.6);border-radius:50%;background:#fff;box-shadow:0 0 0 calc(var(--u)*.5) var(--a)}
@keyframes ap-grow{from{width:0}}
.ap-gal{display:grid;grid-template-columns:repeat(5,1fr);gap:calc(var(--u)*1)}
.ap-gal div{aspect-ratio:1;border-radius:calc(var(--u)*.8);animation:ap-in .4s both}
@keyframes ap-in{from{opacity:0;transform:scale(.8)}}
.ap-wx{display:flex;justify-content:space-between;align-items:flex-start}
.ap-wx span{font-size:calc(var(--u)*2.3);color:#7a5a92}
.ap-temp{font-family:var(--f-display);font-weight:400;font-size:calc(var(--u)*8);line-height:1}
.ap-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:calc(var(--u)*.5);font-size:calc(var(--u)*2.3);text-align:right;font-variant-numeric:tabular-nums}
.ap-cal span{padding:calc(var(--u)*.4) calc(var(--u)*.7);background:var(--soft);border-radius:calc(var(--u)*.5)}
.ap-cal .h{background:none;text-align:center;color:#9a7cb3;font-size:calc(var(--u)*2)}
.ap-cal .e{background:none}
.ap-cal .t{background:var(--a);color:#fff}
.ap-cal .ev{box-shadow:inset 0 calc(var(--u)*-.5) 0 #e0569c}
.ap-room{height:calc(var(--u)*24);border-radius:calc(var(--u)*1.6);overflow:hidden;position:relative;background:linear-gradient(180deg,#d9c6ee,#f6ecfb);perspective:calc(var(--u)*40)}
.ap-room::before{content:"";position:absolute;left:-50%;right:-50%;bottom:-20%;height:120%;transform:rotateX(62deg);background:linear-gradient(90deg,rgba(155,63,192,.55) 1px,transparent 1px) 0 0/calc(var(--u)*4) calc(var(--u)*4),linear-gradient(0deg,rgba(155,63,192,.55) 1px,transparent 1px) 0 0/calc(var(--u)*4) calc(var(--u)*4);animation:ap-floor 4s linear infinite}
@keyframes ap-floor{to{background-position:0 calc(var(--u)*4),0 calc(var(--u)*4)}}
.ap-note{margin:0;font-size:calc(var(--u)*2.5)}
.ap-typed{border:1px solid #e3d0f2;border-radius:calc(var(--u)*1.2);padding:calc(var(--u)*1) calc(var(--u)*1.6);font-size:calc(var(--u)*2.8)}
.ap-typed::after{content:"";display:inline-block;width:1px;height:1em;background:var(--ink);margin-left:2px;vertical-align:-2px;animation:ap-blink 1s steps(1) infinite}
@keyframes ap-blink{50%{opacity:0}}
.ap-sugg{display:flex;gap:calc(var(--u)*1)}
.ap-sugg span{flex:1;text-align:center;border:1px solid #e3d0f2;border-radius:calc(var(--u)*.8);font-size:calc(var(--u)*2.1);padding:calc(var(--u)*.3) 0}
.ap-kb{display:grid;grid-template-columns:repeat(10,1fr);gap:calc(var(--u)*.7)}
.ap-kb i{height:calc(var(--u)*3.6);border:1px solid #e3d0f2;border-radius:calc(var(--u)*.7);background:#fdfaff}
.ap-kb i:nth-child(7n+3){background:var(--a);border-color:var(--a);animation:ap-blink 1.6s steps(1) infinite}
.ap-acc{display:flex;gap:calc(var(--u)*1.6)}
.ap-acc div{flex:1;text-align:center;font-size:calc(var(--u)*2.2)}
.ap-acc i{display:grid;place-items:center;aspect-ratio:1;border-radius:calc(var(--u)*2.2);margin-bottom:calc(var(--u)*.8);color:#fff;font-style:normal;font-family:var(--f-display);font-size:calc(var(--u)*3.4)}
.ap-acc .on i{box-shadow:0 0 0 calc(var(--u)*.6) #e0569c}
.ap-pw{display:flex;align-items:center;gap:calc(var(--u)*2)}
.ap-pw .pct{font-family:var(--f-display);font-size:calc(var(--u)*6);background:#9df07a;padding:calc(var(--u)*1.2) calc(var(--u)*3) calc(var(--u)*1.2) calc(var(--u)*2);clip-path:polygon(0 0,100% 0,88% 100%,0 100%)}
.ap-pw small{font-family:var(--f-pixel);font-size:calc(var(--u)*2.3);color:#7a5a92}
.ap-pb{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(var(--u)*1.4)}
.ap-pb div{background:var(--soft);border-radius:calc(var(--u)*1.6);text-align:center;font-family:var(--f-pixel);font-size:calc(var(--u)*2.4);padding:calc(var(--u)*2.4) 0;box-shadow:calc(var(--u)*.5) calc(var(--u)*.5) 0 rgba(59,27,85,.08)}
/* inside the handheld's opened view */
.dsx .ds-ap{--u:1cqw;flex:1;overflow:auto;min-height:0}

.ap-yk{position:relative;border-radius:calc(var(--u)*1.8);overflow:hidden;aspect-ratio:16/8}
.ap-yk img{width:100%;height:100%;object-fit:cover;display:block}
.ap-yk span{position:absolute;left:calc(var(--u)*1.6);bottom:calc(var(--u)*1.2);font-family:var(--f-display);font-size:calc(var(--u)*3);color:#fff;text-shadow:0 1px 4px rgba(59,27,85,.7)}
.ap-dot{flex:0 0 auto;width:calc(var(--u)*1.6)!important;height:calc(var(--u)*1.6)!important;border-radius:50%!important;background:#4fc72c;box-shadow:0 0 calc(var(--u)*1) #4fc72c}
.ap-launch{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(var(--u)*1.8) calc(var(--u)*1)}
.ap-launch div{display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*.6);min-width:0}
.ap-launch .tile{width:calc(var(--u)*8);height:calc(var(--u)*8);border-radius:calc(var(--u)*2.2)}
.ap-launch .tile svg{width:calc(var(--u)*4.4);height:calc(var(--u)*4.4)}
.ap-launch span{font-size:calc(var(--u)*1.9);font-weight:700;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.ap-g6 div span{background:rgba(255,255,255,.88);color:#3b1b55;text-shadow:none;border-radius:calc(var(--u)*1);padding:calc(var(--u)*.3) calc(var(--u)*1)}