/* Phone / Desktop switch + device frames (see devframe.js) */
.df-bar{display:inline-flex;background:#0e1011;border:2px solid #0e1011;border-radius:999px;padding:3px;gap:3px}
.df-bar button{appearance:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:8px;font:700 17px/1 Archivo,system-ui,sans-serif;
  padding:11px 20px;border-radius:999px;background:transparent;color:#f2efe6}
.df-bar button[aria-pressed="true"]{background:#e2a21b;color:#0e1011}
.df-bar svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2}
.df-shell{display:flex;justify-content:center;align-items:flex-start;padding:22px 8px 40px;min-height:100%}
.df-scaler{position:relative;flex:none}
.df-scaler iframe{border:0;display:block;background:#fff;transform-origin:0 0}
.df-shell[data-mode="phone"] .df-scaler{border-radius:40px;box-shadow:0 0 0 12px #050606,0 0 0 14px #2d3033,0 30px 80px rgba(0,0,0,.5);overflow:hidden}
.df-shell[data-mode="desktop"] .df-scaler{box-shadow:0 0 0 10px #050606,0 0 0 12px #2d3033,0 30px 80px rgba(0,0,0,.45);border-top:26px solid #050606;
  border-radius:10px 10px 4px 4px}
.df-shell[data-mode="desktop"] .df-scaler::before{content:"";position:absolute;top:-17px;left:10px;width:40px;height:8px;
  background:radial-gradient(circle at 4px 4px,#c2361f 3.5px,transparent 4px),radial-gradient(circle at 18px 4px,#e2a21b 3.5px,transparent 4px),radial-gradient(circle at 32px 4px,#3f8f4f 3.5px,transparent 4px)}
@media(max-width:699px){.df-shell[data-mode="phone"]{padding:0}.df-shell[data-mode="phone"] .df-scaler{border-radius:0;box-shadow:none}
  .df-shell[data-mode="desktop"]{padding:34px 8px 30px}.df-bar button{padding:10px 16px;font-size:16px}}