/* Il Digital Twin della presentazione dell'app (disegno di Codex, twin-art.mjs): lo stesso nella presentazione
   dell'app per iPhone, nella pagina d'ingresso e nell'accesso del sito e nella vetrina. Valori d'esempio. */
.intro-art{position:relative;display:grid;place-items:center;width:100%;max-width:336px;height:310px;margin:0 auto;isolation:isolate}
.intro-icon{width:20px;height:20px;flex-shrink:0;display:block}
/* Four inputs enter the body; separate paths lead from it to the three demo outcomes. */
.intro-twin-art{display:block;height:372px;text-align:left}
.intro-twin-aura{position:absolute;inset:0 40px 105px;background:radial-gradient(ellipse,#22d3ee17,transparent 65%);z-index:-1}
.intro-twin-orbit{position:absolute;left:50%;top:5px;width:225px;height:225px;border:1px solid #c084fc20;border-radius:50%;transform:translateX(-50%) rotate(-24deg) scaleY(.86);box-shadow:0 0 0 17px #a855f705;z-index:-1}
.intro-twin-body{position:absolute;top:0;left:50%;transform:translateX(-50%);width:126px;height:224px;object-fit:contain;filter:drop-shadow(0 0 12px #22d3ee18);z-index:1}
.intro-twin-flows{position:absolute;inset:0 0 auto;width:100%;height:258px;overflow:visible;pointer-events:none}
.intro-twin-flow{stroke:#c084fc;stroke-width:1}.intro-twin-flow>path:first-child{opacity:.34}
.intro-twin-flow-training{stroke:#fb923c}.intro-twin-flow-nutrition{stroke:#f472b6}.intro-twin-flow-recovery{stroke:#34d399}.intro-twin-flow-health{stroke:#c084fc}
.intro-twin-flow-result-bio{stroke:#fb923c}.intro-twin-flow-result-performance{stroke:#34d399}
.intro-twin-flow .intro-twin-particle{stroke-width:3;stroke-linecap:round;stroke-dasharray:.8 99.2;stroke-dashoffset:100;animation:intro-twin-in 4.8s linear infinite;filter:drop-shadow(0 0 3px currentColor);color:#c084fc}
.intro-twin-flow-result .intro-twin-particle{animation-name:intro-twin-out}
@keyframes intro-twin-in{0%{stroke-dashoffset:100;opacity:0}8%{opacity:1}43%{stroke-dashoffset:0;opacity:1}48%,100%{stroke-dashoffset:0;opacity:0}}
@keyframes intro-twin-out{0%,48%{stroke-dashoffset:100;opacity:0}55%{opacity:1}94%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
.intro-twin-input{position:absolute;width:31%;height:54px;padding:8px 9px;border:1px solid color-mix(in srgb,var(--input-color) 32%,transparent);border-radius:13px;background:linear-gradient(130deg,color-mix(in srgb,var(--input-color) 7%,transparent),transparent),#101014;box-shadow:0 6px 20px #0003;z-index:2}
.intro-twin-input>span{display:flex;align-items:center;gap:5px;white-space:nowrap}.intro-twin-input .intro-icon{width:12px;height:12px;color:var(--input-color)}.intro-twin-input strong{font-size:10px;font-weight:500;letter-spacing:-.2px;color:#e9e6ed}
.intro-twin-mini{display:block;width:100%;height:18px;margin-top:5px;stroke:var(--input-color);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.intro-twin-macros{stroke-width:3}
.intro-twin-input-training{--input-color:#fb923c;left:0;top:24px}
.intro-twin-input-nutrition{--input-color:#f472b6;right:0;top:75px}
.intro-twin-input-recovery{--input-color:#34d399;left:0;top:124px}
.intro-twin-input-health{--input-color:#c084fc;right:0;top:155px}
.intro-twin-name{position:absolute;left:50%;top:219px;transform:translateX(-50%);z-index:3;background:#100d17;border:1px solid #c084fc29;border-radius:99px;padding:5px 10px;color:#e4cfff;font-size:10px;font-weight:500;white-space:nowrap;box-shadow:0 0 16px #08080b}
.intro-twin-results{position:absolute;left:0;right:0;top:253px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.intro-twin-result{min-width:0;display:flex;flex-direction:column;align-items:stretch;padding:8px 11px 9px;border:1px solid color-mix(in srgb,var(--result-color) 42%,transparent);border-radius:16px;background:linear-gradient(125deg,color-mix(in srgb,var(--result-color) 9%,transparent),transparent),#101014;box-shadow:0 6px 20px #0003;text-align:left;transition:border-color .2s}
.intro-twin-result:hover{border-color:var(--result-color)}
.intro-twin-age{--result-color:#c084fc}.intro-twin-biological{--result-color:#fb923c}
.intro-twin-performance{--result-color:#34d399;position:absolute;right:0;top:-19px;width:116px;padding:7px 9px;z-index:2;border-radius:13px}
.intro-twin-result.intro-twin-performance>strong{font-size:25px;height:27px;line-height:27px}
.intro-twin-result-heading{display:flex;align-items:center;justify-content:space-between;gap:4px;color:#e9e6ed;font-size:10px;font-weight:500;line-height:14px}
.intro-twin-result-heading i{display:grid;place-items:center;width:12px;height:12px;border:1px solid #ffffff32;border-radius:50%;font-size:8px;font-style:normal;color:#b8adc3}
.intro-twin-result>strong{display:flex;align-items:baseline;height:32px;font-size:29px;line-height:32px;font-weight:550;letter-spacing:-1px;color:var(--result-color);margin-top:2px;font-variant-numeric:tabular-nums}
.intro-twin-up{font-size:20px;line-height:1;margin-left:5px}.intro-twin-scale{font-size:9px;line-height:1;font-weight:400;color:#a4a4af;letter-spacing:0;margin-left:5px}
.intro-twin-result>small{display:block;font-size:9px;line-height:13px;color:#b7adbf;white-space:nowrap}
.intro-twin-performance>small{color:#91d0b9}
.intro-twin-coming{display:block;color:#fdba82;font-size:7px;line-height:10px;letter-spacing:.25px;margin-top:2px}
.intro-twin-demo{position:absolute;top:362px;left:0;right:0;text-align:center;font-size:7px;letter-spacing:1.05px;color:#89818e}

/* Finestra delle spiegazioni dei tre numeri, dove la pagina non ha già lo stile delle sue finestre (vetrina). */
.twin-dialog{width:min(520px,calc(100% - 32px));padding:24px;border:1px solid #a855f747;border-radius:22px;background:#111014;color:#f4f4f5;box-shadow:0 20px 90px #0009}
.twin-dialog::backdrop{background:#000000b3;backdrop-filter:blur(4px)}
.twin-dialog header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}
.twin-dialog h2{margin:0;font-size:20px;font-weight:550;letter-spacing:-.4px}
.twin-dialog .dialog-close{display:grid;place-items:center;width:40px;height:40px;border:1px solid #ffffff1f;border-radius:50%;background:transparent;color:inherit;cursor:pointer}
.twin-dialog .e-icon{width:18px;height:18px}
.twin-dialog .dialog-points{margin:0;padding-left:18px;display:grid;gap:10px;color:#d4d4d8;font-size:14px;line-height:1.55}
.twin-dialog .e-link{display:inline-flex;align-items:center;gap:6px;color:#d8b4fe;font-size:13px}
.twin-dialog .field-note{margin:14px 0 0;color:#a1a1aa;font-size:12px}
@media(prefers-reduced-motion:reduce){.intro-twin-particle{animation:none!important;opacity:0}}