/* Roswall Demos – frame, note and full-screen mode. Everything is scoped to .rsd */
.rsd{--frame:#121214;--dot:#6E6E75;--url:#2A2A2F;--vh:100vh;position:relative;display:block;box-sizing:border-box;margin:2.4em 0;padding:0;font-family:inherit;line-height:1.4;color:#121214}
@supports (height:100svh){.rsd{--vh:100svh}}
.rsd *,.rsd *::before,.rsd *::after{box-sizing:border-box}
.rsd button{font-family:inherit;letter-spacing:normal;text-transform:none;box-shadow:none;min-height:0;min-width:0;line-height:inherit}
p:empty:has(+ .rsd),.rsd + p:empty{display:none}
/* width: wider than the text column, never wider than the screen */
.rsd.rsd-wide{width:min(1200px,calc(100vw - 48px));max-width:none !important;margin-left:calc(50% - min(600px, 50vw - 24px)) !important;margin-right:0 !important}
.rsd.rsd-full{width:calc(100vw - 48px);max-width:none !important;margin-left:calc(50% - 50vw + 24px) !important;margin-right:0 !important}
@media (max-width:600px){.rsd.rsd-wide,.rsd.rsd-full{width:calc(100vw - 32px);margin-left:calc(50% - 50vw + 16px) !important}}

.rsd-browser{width:100%;border:max(3px,.42vw) solid var(--frame);border-top:0;border-radius:14px;overflow:hidden;background:var(--frame)}
@media (min-width:1300px){.rsd-browser{border-width:5px}}
.rsd-bb{height:clamp(20px,2.6vw,34px);display:flex;align-items:center;gap:clamp(4px,.6vw,8px);padding:0 clamp(8px,1.1vw,14px);background:var(--frame)}
.rsd-bb i{flex:none;width:clamp(6px,.8vw,10px);height:clamp(6px,.8vw,10px);border-radius:50%;background:var(--dot)}
.rsd-bb .url{width:34%;height:clamp(10px,1.4vw,18px);margin:0 auto;background:var(--url);border-radius:99px;transform:translateX(-2vw)}
.rsd-face{position:relative;aspect-ratio:16 / 10;overflow:hidden;background:#F4F4F2;border-radius:6px 6px 9px 9px}
.rsd-screen{position:absolute;inset:0}
.rsd-tap{display:none}

.rsd-note{display:flex;align-items:center;flex-wrap:wrap;gap:0 .35em;margin:14px 0 0;font-size:15px;color:#8E8C86}
.rsd-note .tn-d{color:#121214}
.rsd-note .tn-m{display:none;color:#121214}
/* compare demos (Actimo): 'Original' to the left and 'Redesign' to the right under the demo */
.rsd-note.rsd-cmp{justify-content:space-between}
.rsd-lab{margin:0;padding:0;border:0;background:none;font:inherit;color:#121214;cursor:pointer}
.rsd-lab:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.rsd-redo{display:inline-grid;place-items:center;width:30px;height:30px;margin:-6px 0 -6px 2px;padding:0;border:0;border-radius:50%;background:none;color:inherit;cursor:pointer;transition:background-color .2s,color .2s,transform .5s cubic-bezier(.3,1.4,.5,1)}
.rsd-redo svg{width:16px;height:16px;display:block}
.rsd-redo:hover,.rsd-redo:focus-visible{background:rgba(18,18,20,.07);color:#121214;outline:none}
.rsd-redo:active{transform:rotate(300deg)}

/* phones: the demo is a picture until you tap it, then it opens full screen */
@media (max-width:900px),(hover:none) and (pointer:coarse) and (max-width:1100px){
  .rsd-tap{display:flex;position:absolute;inset:0;z-index:7;align-items:flex-end;justify-content:center;padding:0 0 6%;margin:0;border:0;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .rsd-tap span{display:inline-flex;align-items:center;height:34px;padding:0 16px;border-radius:99px;background:#121214;color:#F2F0EA;font-size:14px;font-weight:500;box-shadow:0 4px 14px rgba(0,0,0,.25)}
  .rsd-note .tn-d{display:none}
  .rsd-note .tn-m{display:inline}
  .rsd-note .rsd-redo{display:none}
}

.rsd-bar,.rsd-rotp{display:none}
html.rsd-lock,html.rsd-lock body{overflow:hidden !important}
.rsd.rsd-on .rsd-bar{display:flex;position:fixed;left:0;right:0;top:0;z-index:100001;height:calc(52px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 10px 0 16px;align-items:center;justify-content:space-between;gap:12px;background:#0E0E10;color:#F2F0EA}
.rsd-t{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.rsd-t b{font-weight:500;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rsd-t small{font-size:12px;color:#8E8C86}
.rsd-a{display:inline-flex;align-items:center;gap:8px}
.rsd-r{width:38px;height:38px;border-radius:50%;border:1px solid rgba(242,240,234,.3);background:none;color:#F2F0EA;display:grid;place-items:center;padding:0;cursor:pointer}
.rsd-r svg{width:17px;height:17px;display:block}
.rsd-x{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px 0 12px;border:0;border-radius:999px;background:#F2F0EA;color:#0E0E10;font-size:14px;font-weight:500;cursor:pointer}
.rsd.rsd-on .rsd-dev{position:fixed;left:0;right:0;bottom:0;top:calc(52px + env(safe-area-inset-top));z-index:100000;background:#0E0E10;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;display:flex;align-items:safe center;justify-content:center}
.rsd.rsd-on .rsd-browser{flex:none;width:min(100vw,1280px);border:0;border-radius:0}
.rsd.rsd-on .rsd-bb,.rsd.rsd-on .rsd-tap{display:none}
.rsd.rsd-on .rsd-face{border-radius:0}
.rsd.rsd-on.rsd-rot .rsd-rotp{display:flex;position:fixed;left:0;right:0;bottom:0;top:calc(52px + env(safe-area-inset-top));z-index:100002;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:24px;background:#0E0E10;color:#F2F0EA;text-align:center}
.rsd-rotp p{margin:0;font-size:20px;line-height:1.3;max-width:16ch}
.rsd-rotp .rot{width:44px;height:44px;color:#F2F0EA;animation:rsdRot 2.4s cubic-bezier(.6,0,.3,1) infinite}
.rsd-rotp button{height:38px;padding:0 16px;border-radius:99px;border:1px solid rgba(242,240,234,.35);background:none;color:#F2F0EA;font-size:14px;cursor:pointer}
@keyframes rsdRot{0%,20%{transform:rotate(0)}55%,80%{transform:rotate(-90deg)}100%{transform:rotate(0)}}
@media (orientation:landscape) and (max-height:500px){.rsd.rsd-on .rsd-bar{height:calc(42px + env(safe-area-inset-top))}.rsd.rsd-on .rsd-dev{top:calc(42px + env(safe-area-inset-top))}.rsd-t small{display:none}}

/* click hints, shared by all demos: a ghost cursor on desktop, a soft pulse on touch screens */
.rsd .hk{position:relative}
.rsd .hk > .gc{display:none;position:absolute;left:56%;top:58%;width:22px;height:22px;pointer-events:none;z-index:6;opacity:0;animation:rsdCur 3.6s cubic-bezier(.45,0,.2,1) 1s infinite}
.rsd .gc svg{position:relative;z-index:1;width:22px;height:22px;display:block;filter:drop-shadow(0 1px 2px rgba(0,0,0,.25))}
.rsd .gc i{position:absolute;left:-11px;top:-11px;width:26px;height:26px;border-radius:50%;background:rgba(43,59,255,.35);transform:scale(0);opacity:0;animation:rsdGrip 3.6s ease-out 1s infinite}
.rsd .hint-cursor .hk-on > .gc{display:block}
@keyframes rsdCur{0%{opacity:0;transform:translate(var(--fx),var(--fy))}10%{opacity:1}46%{transform:translate(0,0) scale(1)}52%{transform:translate(0,0) scale(.8)}60%{transform:translate(0,0) scale(1)}84%{opacity:1;transform:translate(0,0)}100%{opacity:0;transform:translate(0,0)}}
@keyframes rsdGrip{0%,51%{transform:scale(0);opacity:0}53%{opacity:1;transform:scale(.5)}78%{transform:scale(1.8);opacity:0}100%{opacity:0}}
@keyframes rsdTap{0%{transform:scale(0);opacity:0}12%{transform:scale(.45);opacity:1}100%{transform:scale(2.2);opacity:0}}
@media (hover:none){.rsd .hk-on > .gc{display:block !important;opacity:1 !important;transform:none !important;animation:none !important}.rsd .hk-on > .gc svg{display:none}.rsd .hk-on > .gc i{animation:rsdTap 1.9s cubic-bezier(.2,.6,.3,1) infinite !important}}
@media (prefers-reduced-motion: reduce){.rsd .hk > .gc{display:none !important}.rsd-rotp .rot{animation:none}}

/* ---------- phone demos (1.2.0): the phone frame is part of the demo; on a phone it opens full screen without the frame ---------- */
.rsd.rsd-phone{--pw:380px}
.rsd-phone .rsd-dev{display:flex;justify-content:center}
.rsd-pf{position:relative;width:min(100%,var(--pw));container-type:inline-size}
.rsd-phone .rsd-screen{position:relative;inset:auto}
.rsd-phone .rsd-note{justify-content:center}
.rsd .rsd-ph{position:relative;width:100%}
.rsd .dv-phone{position:relative;border:3.6cqw solid var(--frame);border-radius:14cqw;background:var(--frame)}
.rsd .dv-phone .face{border-radius:10.4cqw}
.rsd .dv-phone .sb{position:absolute;width:2.4cqw;background:var(--frame)}
.rsd .dv-phone .sb.v1{left:-5.2cqw;top:17%;height:8%;border-radius:1cqw 0 0 1cqw}
.rsd .dv-phone .sb.v2{left:-5.2cqw;top:27%;height:8%;border-radius:1cqw 0 0 1cqw}
.rsd .dv-phone .sb.pw{right:-5.2cqw;top:22%;height:12%;border-radius:0 1cqw 1cqw 0}
.rsd-phone .rsd-tap{border-radius:14cqw}
/* click hint on phones: always the soft pulse, never the ghost cursor */
.rsd .dv-phone .hk-on > .gc{display:block;opacity:1;transform:none;animation:none}
.rsd .dv-phone .hk-on > .gc svg{display:none}
.rsd .dv-phone .hk-on > .gc i{animation:rsdTap 1.9s cubic-bezier(.2,.6,.3,1) infinite}
/* full screen: no frame, the app fills the screen under the bar */
.rsd.rsd-on.rsd-phone .rsd-dev{align-items:stretch;padding-bottom:env(safe-area-inset-bottom)}
.rsd.rsd-on .rsd-pf{width:min(100vw,calc((var(--vh) - 52px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) / 1.75));height:100%}
.rsd.rsd-on .rsd-pf .rsd-screen,.rsd.rsd-on .rsd-ph,.rsd.rsd-on .dv-phone{height:100%}
.rsd.rsd-on .dv-phone{border:0;border-radius:0;background:none}
.rsd.rsd-on .dv-phone .sb{display:none}
.rsd.rsd-on .dv-phone .face{aspect-ratio:auto !important;height:100%;border-radius:0}
@media (prefers-reduced-motion: reduce){.rsd .dv-phone .hk-on > .gc{display:none !important}}