/* Realistic devices for Visibian Guides, version 3 (owner, 11 November 2026: "drawn pictures look fake").
   A phone and a tablet built in HTML and CSS, so they stay sharp at any size and the words on the screen
   stay real text. Used on the pages (the hero, the tap exercise) and by _render/ for the pictures.
   Size a device with --w (its width). Everything inside scales with it. */

.dv-phone,.dv-tablet{position:relative;flex-shrink:0;-webkit-font-smoothing:antialiased}
.dv-phone{--w:300px;width:var(--w);height:calc(var(--w) * 2.04);border-radius:calc(var(--w) * .17);padding:calc(var(--w) * .012);
  background:linear-gradient(155deg,#a7a6ad 0%,#5d5c63 14%,#2d2c32 42%,#3b3a41 70%,#8e8d94 92%,#c3c2c8 100%);
  box-shadow:0 1px 1px rgba(0,0,0,.25),0 calc(var(--w) * .1) calc(var(--w) * .22) calc(var(--w) * -.08) rgba(23,20,45,.42),0 calc(var(--w) * .2) calc(var(--w) * .4) calc(var(--w) * -.2) rgba(23,20,45,.3)}
.dv-tablet{--w:420px;width:var(--w);height:calc(var(--w) * 1.39);border-radius:calc(var(--w) * .075);padding:calc(var(--w) * .006);
  background:linear-gradient(155deg,#7d7c83 0%,#3e3d44 20%,#2a292f 55%,#4a4950 85%,#8a8990 100%);
  box-shadow:0 1px 1px rgba(0,0,0,.25),0 calc(var(--w) * .08) calc(var(--w) * .16) calc(var(--w) * -.06) rgba(23,20,45,.4),0 calc(var(--w) * .16) calc(var(--w) * .32) calc(var(--w) * -.16) rgba(23,20,45,.3)}
.dv-tablet.land{height:calc(var(--w) * .72)}
.dv-bezel{position:relative;width:100%;height:100%;background:#0b0b0d;border-radius:inherit;padding:calc(var(--w) * .03);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.dv-tablet .dv-bezel{padding:calc(var(--w) * .035)}
.dv-screen{position:relative;width:100%;height:100%;overflow:hidden;background:#fff;color:#000;font-size:calc(var(--w) * .052);line-height:1.3;
  border-radius:calc(var(--w) * .13);font-family:-apple-system,'SF Pro Text',Inter,'Segoe UI',sans-serif;display:flex;flex-direction:column}
.dv-tablet .dv-screen{border-radius:calc(var(--w) * .035);font-size:calc(var(--w) * .03)}
.dv-screen::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:9;
  background:linear-gradient(118deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.04) 22%,rgba(255,255,255,0) 34%)}
.dv-island{position:absolute;z-index:10;top:calc(var(--w) * .05);left:50%;transform:translateX(-50%);width:calc(var(--w) * .3);height:calc(var(--w) * .088);border-radius:99px;background:#000}
.dv-cam{position:absolute;z-index:10;top:calc(var(--w) * .017);left:50%;width:calc(var(--w) * .012);height:calc(var(--w) * .012);margin-left:calc(var(--w) * -.006);border-radius:50%;background:#1d2533;box-shadow:0 0 0 1px #000}
.dv-side{position:absolute;width:calc(var(--w) * .012);border-radius:2px;background:linear-gradient(90deg,#4b4a51,#9b9aa1,#4b4a51)}
.dv-side.r{right:calc(var(--w) * -.008);top:30%;height:12%}
.dv-side.l1{left:calc(var(--w) * -.008);top:20%;height:5%}
.dv-side.l2{left:calc(var(--w) * -.008);top:28%;height:9%}
.dv-side.l3{left:calc(var(--w) * -.008);top:39%;height:9%}
.dv-floor{position:absolute;left:8%;right:8%;bottom:-4%;height:8%;border-radius:50%;background:radial-gradient(ellipse at center,rgba(23,20,45,.35),rgba(23,20,45,0) 70%);filter:blur(6px);z-index:-1}

/* status bar */
.dv-status{display:flex;justify-content:space-between;align-items:center;padding:calc(var(--w) * .055) calc(var(--w) * .085) calc(var(--w) * .02);font-weight:600;font-size:.95em;flex-shrink:0}
.dv-status svg{height:.8em;width:auto;display:block}
.dv-status .ic{display:flex;gap:.3em;align-items:center}

/* iOS Messages, as a reader sees it */
.ms-head{display:flex;flex-direction:column;align-items:center;gap:.25em;padding:.3em 0 .55em;border-bottom:1px solid #e5e5ea;position:relative;flex-shrink:0}
.ms-head .back{position:absolute;left:.7em;top:.9em;color:#0a7aff;font-size:1.5em;line-height:1}
.ms-head .av{width:2.6em;height:2.6em;border-radius:50%;background:linear-gradient(180deg,#a5a8b5,#8a8d9a);color:#fff;display:grid;place-items:center;font-weight:600;font-size:.95em}
.ms-head .nm{font-size:.72em;color:#000}
.ms-body{flex:1;padding:.7em .8em;display:flex;flex-direction:column;gap:.35em}
.ms-meta{text-align:center;font-size:.62em;color:#8e8e93;margin:.2em 0 .5em;line-height:1.35}
.ms-bub{align-self:flex-start;max-width:82%;background:#e9e9eb;border-radius:1.05em;padding:.55em .8em;font-size:.86em;line-height:1.32;color:#000}
.ms-bub.me{align-self:flex-end;background:#0a7aff;color:#fff}
.ms-bub a,.ms-bub .lk{color:#0a7aff;text-decoration:underline}
.ms-input{display:flex;align-items:center;gap:.5em;padding:.5em .7em calc(var(--w) * .06);flex-shrink:0}
.ms-input .plus{width:1.8em;height:1.8em;border-radius:50%;background:#e9e9eb;display:grid;place-items:center;color:#8e8e93;font-size:.9em}
.ms-input .box{flex:1;border:1px solid #d1d1d6;border-radius:99px;padding:.45em .8em;font-size:.72em;color:#8e8e93}

/* a call screen */
.cl{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;color:#fff;padding:1.4em .8em 1.6em;
  background:radial-gradient(120% 70% at 50% 0%,#3d4252 0%,#1c1e26 60%,#121318 100%)}
.cl .lbl{font-size:.7em;color:rgba(255,255,255,.75)}
.cl .nm{font-size:1.45em;font-weight:500;margin:.25em 0 .2em;letter-spacing:-.01em;line-height:1.15}
.cl .num{font-size:.75em;color:rgba(255,255,255,.75)}
.cl .row{margin-top:auto;display:flex;justify-content:space-between;width:100%;padding:0 .8em}
.cl .row div{display:flex;flex-direction:column;align-items:center;gap:.4em;font-size:.62em;color:rgba(255,255,255,.85)}
.cl .row i{width:4.6em;height:4.6em;border-radius:50%;display:block}
.cl .dec{background:#ff3b30}.cl .acc{background:#34c759}

/* a chat assistant, in the manner of the apps (no logos) */
.ai-head{display:flex;justify-content:space-between;align-items:center;padding:.35em .9em .6em;font-weight:600;font-size:.9em;flex-shrink:0}
.ai-head .ic{width:1.1em;height:.75em;border-top:2px solid #000;border-bottom:2px solid #000;position:relative}
.ai-head .ic::after{content:'';position:absolute;left:0;right:.3em;top:calc(50% - 1px);border-top:2px solid #000}
.ai-head .nw{width:1.05em;height:1.05em;border:2px solid #000;border-radius:.3em}
.ai-body{flex:1;padding:.4em .85em;display:flex;flex-direction:column;gap:.7em;overflow:hidden}
.ai-u{align-self:flex-end;max-width:84%;background:#f0f0f2;border-radius:1.1em;padding:.55em .8em;font-size:.84em;line-height:1.36}
.ai-a{font-size:.84em;line-height:1.45}
.ai-a p{margin:0 0 .5em}.ai-a b{font-weight:600}
.ai-hello{flex:1;display:grid;place-items:center;font-size:1.25em;font-weight:600;letter-spacing:-.01em;text-align:center;padding:0 1em}
.ai-input{margin:.4em .7em calc(var(--w) * .06);border:1px solid #e3e3e8;border-radius:1.4em;padding:.6em .6em .6em .9em;display:flex;align-items:center;gap:.5em;font-size:.8em;color:#8e8e93;box-shadow:0 .2em .6em rgba(0,0,0,.06);flex-shrink:0}
.ai-input .tx{flex:1}.ai-input .tx.on{color:#000}
.ai-input .go{width:2em;height:2em;border-radius:50%;background:#d8d8de;display:grid;place-items:center;flex-shrink:0}
.ai-input .go.on{background:#000}
.ai-input .go svg{width:.9em;height:.9em}
.kb{background:#d1d3d9;padding:.5em .2em calc(var(--w) * .07);display:grid;gap:.45em;flex-shrink:0}
.kb .r{display:flex;justify-content:center;gap:.2em;padding:0 .25em}
.kb .r span{flex:0 1 1.75em;min-width:0;height:2.1em;background:#fff;border-radius:.3em;display:grid;place-items:center;font-size:.85em;box-shadow:0 1px 0 #8e9096}
.kb .r .sp{width:9em}

/* a home screen */
.home{flex:1;padding:1em .9em;display:grid;grid-template-columns:repeat(4,1fr);gap:1em .5em;align-content:start;
  background:linear-gradient(170deg,#cfc8ee 0%,#ece8f7 50%,#f6efe6 100%)}
.home .app{display:flex;flex-direction:column;align-items:center;gap:.3em;font-size:.55em;color:#1c1c1e}
.home .app i{width:3.6em;height:3.6em;border-radius:.9em;display:grid;place-items:center;box-shadow:0 .1em .3em rgba(0,0,0,.12)}
.home .app i svg{width:58%;height:58%}

/* the thing to tap: an outline in ink, as a tutorial would draw it */
.tap{outline:calc(var(--w) * .012) solid #14113A;outline-offset:calc(var(--w) * .014);border-radius:.6em}
/* a warning sign: a highlighter mark */
.mark{background:linear-gradient(180deg,rgba(253,224,71,0) 6%,rgba(253,224,71,.9) 6%,rgba(253,224,71,.9) 94%,rgba(253,224,71,0) 94%);
  -webkit-box-decoration-break:clone;box-decoration-break:clone;border-radius:2px;padding:0 .1em;color:#000}

/* an e-reader (version 4, 11 November 2026: the ChatGPT e-book shown as an e-book): a flush black front,
   an even bezel, an e-ink page */
.dv-ereader{--w:300px;position:relative;flex-shrink:0;width:var(--w);height:calc(var(--w) * 1.38);border-radius:calc(var(--w) * .055);
  padding:calc(var(--w) * .075) calc(var(--w) * .065) calc(var(--w) * .085);
  background:linear-gradient(155deg,#3a3a3e 0%,#1d1d20 30%,#141416 70%,#2a2a2e 100%);
  box-shadow:0 1px 1px rgba(0,0,0,.3),0 calc(var(--w) * .1) calc(var(--w) * .2) calc(var(--w) * -.08) rgba(23,20,45,.45),inset 0 0 0 1px rgba(255,255,255,.06)}
.dv-ink{width:100%;height:100%;background:#EFEDE6;color:#1b1b1b;overflow:hidden;position:relative;font-family:Inter,Georgia,serif;
  padding:9% 9% 7%;display:flex;flex-direction:column;font-size:calc(var(--w) * .052);line-height:1.45;
  box-shadow:inset 0 0 calc(var(--w) * .03) rgba(0,0,0,.12)}
.dv-ink .run{font-size:.6em;letter-spacing:.08em;text-transform:uppercase;color:#6b6b6b;display:flex;justify-content:space-between}
.dv-ink .ch{font-size:.7em;font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-top:8%;color:#444}
.dv-ink h4{font:700 1.75em/1.02 'Inter Tight',Inter,sans-serif;letter-spacing:-.02em;margin:.25em 0 .55em;color:#111}
.dv-ink p{margin:0 0 .6em}
.dv-ink .ask{border-left:.22em solid #111;padding:.2em 0 .2em .6em;font-weight:600;margin:.2em 0 .7em}
.dv-ink .pg{margin-top:auto;font-size:.6em;color:#6b6b6b;display:flex;justify-content:space-between}
.dv-ink.cover{padding:0;background:#EFEDE6}
.dv-ink.cover img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.08) brightness(1.04)}
.dv-ink{text-align:left}
.dv-ereader,.dv-ink{box-sizing:border-box}