/* /robot-preview: Induna stands on the LEFT (the owner's own photo) and the website is a hologram on the right, * rising from her open hand. * * GEOMETRY. Every position comes from the viewport through custom properties on .stage, so the photo, the beam and * the hologram cannot drift apart and nothing waits for JavaScript (no layout shift): * --k screen px per photo px; --p the photo box (the full 1254 x 1254 photo, square) * --px --py the photo box's top-left corner * --hl --ht --hr --hb the hologram's left, top, right and bottom edges * --palmx --palmy her palm, photo (925, 842): where the beam starts * Photo landmarks (1254 px): the head x 198..563 (the ear ring to the helmet) and y 36..436 (the crown to the chin); * eyes (345, 236) and (460, 277); mouth corners (325, 349) and (412, 377); the neck x 225..455, y 420..600; the * palm (925, 842); the thumb tip (955, 768); the fingertips (1190, 795); the hand's lowest point y 950. The photo's * own hologram fills x 600..1240, y 145..742, and the panel covers it. * LANDSCAPE (the default, 1024 to 2560 wide and the landscape phone): her whole head and her whole hand fit the * height (photo y 36..950 between the margins); her head's left edge sits at the left margin; the hologram runs * from photo x 590 (right of her helmet, so the face and the neck stay uncovered) to the right margin and from * the top margin down to photo y 745 (just above her thumb, so the whole hand shows under it). Wider than * 1.12 photo boxes, the hologram stops growing and the robot and the hologram move to the middle together. * PORTRAIT (aspect under 19:20): her face at the top, the hologram under her chin taking 52% of the height, and her * open hand under the hologram with the beam rising from it. The hand is the same photo at the same scale, shown * in .hand below the hologram (the body between is behind the panel), because one square photo cannot hold both * her face and her hand in a phone's width. * TINY (under 300 px tall, 400% zoom): her head small at the top left, the hologram the full height beside it, no beam. * The photo box is continued past its edges by img/holo2-ext.webp (its own edge rows carried outward and blurred * more the further they go), and the photo's 3% side feather blends into it. * The hologram's glass is img/holo2-soft.webp: the same photo and extension, blurred a little and aligned with the * photo behind, under a dark blue tint, so the scene shows softly through it and the text sits on a dark-enough * ground (every text at 4.5:1 or better, measured over the real backdrop). * Nothing here moves with the pointer. The only motion is ambient (the light flowing up the beam, the ring on her * palm, the glint running round the panel's edge), and Pause motion and prefers-reduced-motion stop all of it. */ :root{ --page:#0a1a2e; --ink:#f4f9fc; --ink2:#dae6ed; --mut:#c3d2dc; --dim:#bccbd5; --holo:#9fd8ff; --holo-hi:#e4f7ff; --accent:#8adfff; --teal:#0d9488; --teal-fill:#0f766e; --teal-fill-hi:#115e59; /* white text sits on the fill (5.5:1), never on #0d9488 */ --ochre:#f0b35a; --ochre-text:#f7c47c; /* small ochre words use the lighter one (4.5:1 on the glass) */ --line:rgba(160,215,255,.18); --card:rgba(150,205,255,.05); --mono:ui-monospace,"Cascadia Mono",Consolas,Menlo,monospace; color-scheme:dark; } *{box-sizing:border-box} html,body{margin:0;height:100%;background:#c9ced8;color:var(--ink);overflow:hidden} body{font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent} a{color:inherit} img{display:block} .sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} :focus-visible{outline:2px solid var(--holo-hi);outline-offset:2px} /* ---------- the scene: one fixed, clipped viewport (focus and hover can never scroll it) ---------- */ .scene{position:fixed;inset:0;overflow:hidden;overflow:clip;background:#c9ced8} /* ---------- the geometry ---------- */ .stage{position:absolute;inset:0; --vh:100vh; --vw:100vw; --sl:env(safe-area-inset-left, 0px); --sr:env(safe-area-inset-right, 0px); --mt:max(10px, 2.2vh); /* above her crown */ --mb:max(10px, 2.6vh); /* under her hand */ --k:calc((var(--vh) - var(--mt) - var(--mb)) / 914); /* photo y 36..950 fits the height */ --p:calc(var(--k) * 1254); --ml:calc(max(14px, 2.2vw) + var(--sl)); --mr:calc(max(14px, 2.2vw) + var(--sr)); --px0:calc(var(--ml) - var(--k) * 198); /* her ear ring (x 198) at the left margin */ --hl0:calc(var(--px0) + var(--k) * 590); --wcap:min(1680px, max(calc(var(--p) * 1.12), 1100px)); /* an ultra-wide window stops growing it */ --shift:max(0px, calc((var(--vw) - var(--mr) - var(--hl0) - var(--wcap)) / 2)); --px:calc(var(--px0) + var(--shift)); --py:calc(var(--mt) - var(--k) * 36); --hl:calc(var(--px) + var(--k) * 590); /* photo x 590: right of her helmet */ --hr:max(min(calc(var(--vw) - var(--mr)), calc(var(--hl) + var(--wcap))), min(calc(var(--vw) - 4px), calc(var(--px) + var(--k) * 1250))); /* never short of the photo's own hologram */ --ht:max(10px, 2.2vh); --hb:calc(var(--py) + var(--k) * 745); /* photo y 745: just above her thumb */ --palmx:calc(var(--px) + var(--k) * 925); --palmy:calc(var(--py) + var(--k) * 842); --ring:calc(var(--k) * 124); /* the ring on her palm: the palm's width */ --hrad:16px; } @supports (height:100svh){ .stage{--vh:100svh} } /* PORTRAIT: the face above the hologram, the hand under it */ @media (max-aspect-ratio:19/20){ .stage{ --mt:max(8px, 1.4vh); --gapt:16px; /* her chin to the hologram */ --mb:max(6px, .8vh); --k:min(calc((var(--vh) * .48 - var(--mt) - var(--gapt) - var(--mb)) / 605), calc(var(--vw) * .7 / 365), calc((var(--vw) - 16px) / 470)); --p:calc(var(--k) * 1254); --px:min(0px, max(calc(var(--vw) - var(--p)), calc(var(--vw) / 2 - var(--k) * 380))); /* her face centred */ --py:calc(var(--mt) - var(--k) * 36); --hl:max(8px, calc(var(--sl) + 6px)); --hr:calc(var(--vw) - max(8px, calc(var(--sr) + 6px))); --ht:calc(var(--py) + var(--k) * 436 + var(--gapt)); /* under her chin */ --palmy:calc(var(--vh) - var(--mb) - var(--k) * 108); /* the hand's lowest point at the bottom margin */ --hb:calc(var(--palmy) - var(--k) * 97); --palmx:max(calc(var(--vw) / 2), calc(var(--vw) - var(--k) * 329 + 2px)); --hx:calc(var(--palmx) - var(--k) * 925); /* the hand's copy of the photo */ --hy:calc(var(--palmy) - var(--k) * 842); --hfade:calc(var(--k) * 60); --hrad:14px; } } /* TINY (a window under 300 px tall: 400% zoom): the text comes first. Her head stays, small, at the top left; the hologram takes the full height to its right, so her hand is behind it and the beam is not drawn. */ @media (max-height:300px){ .stage{ --k:calc((var(--vh) - 12px) / 430); --p:calc(var(--k) * 1254); --px:calc(6px + var(--sl) - var(--k) * 198); --py:calc(6px - var(--k) * 30); --hl:min(calc(var(--px) + var(--k) * 575), calc(var(--vw) * .45)); --hr:calc(var(--vw) - 6px - var(--sr)); --ht:6px; --hb:calc(var(--vh) - 6px); --hrad:8px; } .beam,.beam-edge,.emitter,.hand{display:none !important} } /* the photo box on whole pixels, so the face rig's canvas renders as sharp as the photo */ @supports (left:round(1.5px, 1px)){ .stage{--pxs:round(var(--px), 1px); --pys:round(var(--py), 1px); --ps:round(var(--p), 1px)} } /* ---------- the page beyond the photo, the photo, and (portrait) her hand ---------- */ .ext{position:absolute;inset:0;z-index:0;pointer-events:none; background:url(img/holo2-ext.webp?v=20261021j) calc(var(--px) - var(--p) * 2) calc(var(--py) - var(--p)) / calc(var(--p) * 5) calc(var(--p) * 3) no-repeat, #c9ced8} /* the rig's box: the whole 1254 px photo, square (the face rig's canvas covers it at 100% when it goes in) */ .face{position:absolute;z-index:1;left:var(--pxs, var(--px));top:var(--pys, var(--py));width:var(--ps, var(--p));height:var(--ps, var(--p)); pointer-events:none;transition:opacity .35s ease} .face .photo{position:absolute;inset:0;width:100%;height:100%;user-select:none; -webkit-mask-image:linear-gradient(to right, transparent 0, #000 3%, #000 97%, transparent 100%); mask-image:linear-gradient(to right, transparent 0, #000 3%, #000 97%, transparent 100%)} .hand{display:none} @media (max-aspect-ratio:19/20){ .hand{display:block;position:absolute;z-index:2;left:0;right:0;bottom:0;top:calc(var(--hb) - var(--hfade));pointer-events:none; background:url(img/robot-holo2-1254.webp?v=20261021j) calc(var(--hx)) calc(var(--hy) - var(--hb) + var(--hfade)) / var(--p) var(--p) no-repeat; -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 var(--hfade)); mask-image:linear-gradient(to bottom, transparent 0, #000 var(--hfade)); transition:opacity .35s ease} } /* ---------- the projection: a cone of light from the ring on her palm to a lit stretch of the hologram's edge ---------- */ .stage{ --lw:min(calc(var(--ring) * 3.4), calc((var(--hr) - var(--hl)) * .62)); --l0:max(calc(var(--hl) + 14px), calc(var(--palmx) - var(--lw) / 2)); --l1:min(calc(var(--hr) - 14px), calc(var(--palmx) + var(--lw) / 2)); --aw:calc(var(--ring) * .46); /* half the ring's width: the cone rises from it */ } .beam{position:absolute;z-index:3;pointer-events:none; left:var(--l0);width:calc(var(--l1) - var(--l0)); top:calc(var(--hb) - 1px);height:calc(var(--palmy) - var(--hb) + 1px); --ax:calc(var(--palmx) - var(--l0)); /* the palm, in the beam's own box */ clip-path:polygon(0 0, 100% 0, calc(var(--ax) + var(--aw)) 100%, calc(var(--ax) - var(--aw)) 100%); background: linear-gradient(to bottom, rgba(215,244,255,.5), rgba(170,226,255,.16) 30%, rgba(170,226,255,0) 55%), radial-gradient(60% 120% at var(--ax) 100%, rgba(230,249,255,.62), rgba(120,198,255,.3) 48%, rgba(120,198,255,0) 100%), linear-gradient(to top, rgba(80,170,255,.34), rgba(100,182,255,.16) 60%, rgba(130,200,255,.22)); transition:opacity .3s ease} /* rays fanning out from the palm (soft stops, so they never alias) */ .beam .rays{position:absolute;inset:0; background:repeating-conic-gradient(from 270deg at var(--ax) 100%, rgba(220,247,255,0) 0deg, rgba(220,247,255,.45) .7deg, rgba(220,247,255,0) 1.4deg, rgba(220,247,255,0) 6deg); -webkit-mask-image:linear-gradient(to top, #000, rgba(0,0,0,.3));mask-image:linear-gradient(to top, #000, rgba(0,0,0,.3))} /* the light flowing up the cone: ambient, outside the hologram, stopped by the motion switch */ .beam .flow{position:absolute;left:0;right:0;bottom:0;height:80%; background:linear-gradient(to top, rgba(230,250,255,0), rgba(230,250,255,.45) 50%, rgba(230,250,255,0)); transform:translateY(100%);animation:flow 2.8s cubic-bezier(.4,0,.6,1) infinite} @keyframes flow{0%{transform:translateY(100%);opacity:0}15%{opacity:1}85%{opacity:1}100%{transform:translateY(-70%);opacity:0}} /* the cone's two edges: lines from the ring's ends to the lit stretch's ends (CSS atan2 and hypot) */ .beam-edge{position:absolute;z-index:4;pointer-events:none;height:2px;margin-top:-1px;transform-origin:0 50%; --x0:calc(var(--palmx) + var(--side) * var(--aw)); --dx:calc(var(--x1) - var(--x0)); --dy:calc(var(--hb) - var(--palmy)); left:var(--x0);top:var(--palmy);width:hypot(var(--dx), var(--dy));rotate:atan2(var(--dy), var(--dx)); background:linear-gradient(to right, rgba(240,252,255,.95), rgba(196,236,255,.75) 60%, rgba(196,236,255,.55)); box-shadow:0 0 3px 1px rgba(70,155,255,.8), 0 0 9px 2px rgba(90,170,255,.4);border-radius:2px} .beam-edge.l{--side:-1;--x1:var(--l0)} .beam-edge.r{--side:1;--x1:var(--l1)} /* the emitter on her palm: a glow, two rings the hologram stands on, a bright core */ .emitter{position:absolute;z-index:4;left:var(--palmx);top:var(--palmy);width:0;height:0;pointer-events:none} .emitter i{position:absolute;display:block;border-radius:50%} .emitter .glow{left:calc(var(--ring) * -.9);top:calc(var(--ring) * -.48);width:calc(var(--ring) * 1.8);height:calc(var(--ring) * .96); background:radial-gradient(closest-side, rgba(120,200,255,.7), rgba(85,170,255,.3) 55%, rgba(85,170,255,0))} .emitter .ring{left:calc(var(--ring) * -.5);top:calc(var(--ring) * -.13);width:var(--ring);height:calc(var(--ring) * .26); border:2px solid rgba(228,248,255,.96);box-shadow:0 0 4px 1px rgba(70,155,255,.9), 0 0 14px 2px rgba(110,195,255,.65), inset 0 0 10px rgba(110,195,255,.6); animation:ring 3.6s ease-in-out infinite} .emitter .ring2{left:calc(var(--ring) * -.32);top:calc(var(--ring) * -.085);width:calc(var(--ring) * .64);height:calc(var(--ring) * .17); border:1.5px solid rgba(210,244,255,.8);box-shadow:0 0 8px rgba(110,195,255,.6)} .emitter .core{left:calc(var(--ring) * -.24);top:calc(var(--ring) * -.09);width:calc(var(--ring) * .48);height:calc(var(--ring) * .18); background:radial-gradient(closest-side, #fff, rgba(208,243,255,.9) 45%, rgba(160,220,255,0))} @keyframes ring{0%,100%{opacity:.78}50%{opacity:1}} /* ---------- the hologram ---------- */ .holo{position:absolute;z-index:5;left:var(--hl);top:var(--ht);width:calc(var(--hr) - var(--hl));height:calc(var(--hb) - var(--ht)); container:holo / size;border-radius:var(--hrad); box-shadow:0 0 0 1px rgba(185,232,255,.66), 0 0 18px 1px rgba(110,195,255,.36), 44px 0 64px -12px rgba(110,195,255,.2)} /* the wide glow leans away from her face */ @media (max-aspect-ratio:19/20){ .holo{box-shadow:0 0 0 1px rgba(185,232,255,.66), 0 0 12px rgba(110,195,255,.32), 0 18px 40px rgba(110,195,255,.14)} /* no glow up onto her chin */ } /* the glass: the scene behind, blurred and aligned, under a blue tint; faint static scanlines; light from below */ .holo-glass{position:absolute;inset:0;z-index:0;border-radius:inherit;overflow:hidden;pointer-events:none; background:url(img/holo2-soft.webp?v=20261021j) calc(var(--px) - var(--p) - var(--hl)) calc(var(--py) - var(--p) - var(--ht)) / calc(var(--p) * 3) calc(var(--p) * 3) no-repeat, #7f8ea3} .holo-glass::before{content:"";position:absolute;inset:0; background:linear-gradient(180deg, rgba(6,25,50,.8), rgba(7,28,56,.78) 55%, rgba(9,33,64,.78))} .holo-glass::after{content:"";position:absolute;inset:0; background: linear-gradient(to top, rgba(130,205,255,.1), rgba(130,205,255,0) 14%), radial-gradient(120% 60% at 50% -12%, rgba(150,215,255,.09), rgba(150,215,255,0) 70%), repeating-linear-gradient(180deg, rgba(175,228,255,.03) 0 1px, rgba(175,228,255,0) 1px 4px); box-shadow:inset 0 0 0 1px rgba(200,240,255,.12), inset 0 0 28px rgba(120,200,255,.16)} /* corner brackets, as on the holograms already in the photo, just outside the rounded corners */ .holo::after{content:"";position:absolute;inset:-4px;z-index:6;pointer-events:none; --c:rgba(222,247,255,.92); --L:clamp(14px, 2vmin, 26px); --t:2px; background: linear-gradient(var(--c),var(--c)) 0 0 / var(--L) var(--t) no-repeat, linear-gradient(var(--c),var(--c)) 0 0 / var(--t) var(--L) no-repeat, linear-gradient(var(--c),var(--c)) 100% 0 / var(--L) var(--t) no-repeat, linear-gradient(var(--c),var(--c)) 100% 0 / var(--t) var(--L) no-repeat, linear-gradient(var(--c),var(--c)) 0 100% / var(--L) var(--t) no-repeat, linear-gradient(var(--c),var(--c)) 0 100% / var(--t) var(--L) no-repeat, linear-gradient(var(--c),var(--c)) 100% 100% / var(--L) var(--t) no-repeat, linear-gradient(var(--c),var(--c)) 100% 100% / var(--t) var(--L) no-repeat; filter:drop-shadow(0 0 3px rgba(140,210,255,.9))} /* where the cone meets the hologram: a lit stretch of the lower edge, above her palm */ .holo::before{content:"";position:absolute;z-index:6;bottom:-1px;height:2px;pointer-events:none;border-radius:2px; left:calc(var(--l0) - var(--hl));width:calc(var(--l1) - var(--l0)); background:radial-gradient(50% 100% at calc(var(--palmx) - var(--l0)) 50%, #f2fcff, rgba(185,232,255,.8) 60%, rgba(170,225,255,.35)); box-shadow:0 0 12px 2px rgba(120,200,255,.65), 0 -6px 18px rgba(120,200,255,.25)} /* the click's flash on the hologram's edge: played by the page script (Web Animations, opacity only) */ .holo-edge{position:absolute;inset:0;z-index:5;border-radius:inherit;pointer-events:none;opacity:0; box-shadow:0 0 0 1.5px rgba(228,249,255,.95), 0 0 26px 4px rgba(130,210,255,.55), inset 0 0 22px rgba(130,210,255,.16)} .holo-edge.ack{animation:ackglow .55s ease-out both} /* the fallback where Web Animations are missing */ @keyframes ackglow{0%{opacity:0}25%{opacity:1}100%{opacity:0}} /* the glint running round the hologram's edge: the border ring only, never over the text */ @property --trace{syntax:"";inherits:false;initial-value:0deg} .holo-trace{position:absolute;inset:-1px;z-index:6;border-radius:inherit;pointer-events:none;padding:1.5px; background:conic-gradient(from var(--trace), rgba(225,248,255,0) 0deg, rgba(225,248,255,0) 300deg, rgba(232,250,255,.75) 334deg, rgba(225,248,255,0) 360deg); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);-webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation:trace 11s linear infinite} @keyframes trace{to{--trace:360deg}} .stage[data-mood="demo"] .beam{opacity:1} .stage[data-mood="pricing"] .beam{opacity:.88} .stage.waking .beam,.stage.waking .emitter{animation:wake .6s ease-out both} @keyframes wake{0%{opacity:.2}40%{opacity:1}100%{opacity:1}} /* ---------- her voice: the small bubble a click into Pricing opens at her mouth (robot-preview.js, HER VOICE) ---------- The script places it (beside her jaw toward the hologram, beside her face on an upright phone, over her neck on a phone on its side), sizes it to its words and draws its outline and tail as one path, the tail's tip at her lips. It wears the hologram's own glass and edge light, so the words read as hers: projected, like the site she holds. Above the hologram (z 8), never a target (pointer-events none), and hidden from assistive technology. */ .say{position:absolute;z-index:8;left:0;top:0;pointer-events:none;user-select:none} .say[hidden]{display:none} .say-shape{position:absolute;left:0;top:0;overflow:visible; filter:drop-shadow(0 0 5px rgba(110,195,255,.55)) drop-shadow(0 3px 9px rgba(2,10,24,.32))} .say-shape path{fill:rgba(8,29,56,.92);stroke:rgba(200,240,255,.9);stroke-width:1.5;stroke-linejoin:round} .say-text{position:relative;margin:0;width:max-content;padding:7px 12px 8px; font:600 14px/1.3 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;letter-spacing:.005em;color:var(--ink);text-wrap:balance} @media (max-width:600px),(max-height:520px){ .say-text{padding:6px 11px 7px;font-size:13px} } /* ====================================================================== INSIDE THE HOLOGRAM: one grid. Phone (the base): the bar, then the menu (a grid of six at home, a scrolling row in a section), then the views. Medium: the bar, six tabs, the views. Wide or short: a rail on the left. ====================================================================== */ .os{position:absolute;inset:0;z-index:2;display:grid; grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto minmax(0,1fr); grid-template-areas:"brand hstat" "menu menu" "views views"; --pad:14px; --railw:0px} /* THE WORDMARK IS IN EVERY VIEW (owner, Angus, 2026-10-21: "The logo must always be visible somewhere on the hologram"): at home it heads the bar; in a section, a page in the reader and the live chat it still leads the bar, with Back and the crumb after it (the crumb steps aside where the bar is tight: Back, the lit tab and the heading already say where you are). The wide layouts keep it over the rail. Never under 15 px high. */ .holo.in-sec .os{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"brand hnav hstat" "menu menu menu" "views views views"} .holo.at-home .os{grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"brand hstat" "views views" "menu menu"} .hbrand{grid-area:brand;display:flex;align-items:center;min-width:0;padding:6px 8px 4px 14px} .hnav{grid-area:hnav;display:flex;align-items:center;gap:10px;min-width:0;padding:6px 6px 4px 10px} .hstat{grid-area:hstat;display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:6px 10px 4px 6px} .holo.at-home .hnav{display:none} .holo.in-sec .hbrand{padding-right:2px} .brand{display:flex;align-items:baseline;gap:9px;text-decoration:none;border-radius:6px;min-width:0} .brand img{height:20px !important;width:auto} /* (!important: the inline height:auto is only for a page whose stylesheet failed) */ .byline{font-size:12.5px;color:var(--mut);white-space:nowrap;display:none} .chip-proto{font:600 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ochre-text);padding:6px 8px;border:1px dashed rgba(240,179,90,.6);border-radius:999px;background:rgba(6,18,36,.55);white-space:nowrap} .cp-long{display:none} .clock{display:none;font-family:var(--mono);font-size:13px;color:var(--ink2);white-space:nowrap} .clock.pending{visibility:hidden} /* its box is held from the first paint, so the time arriving moves nothing */ .h-link,.h-cta{display:none;align-items:center;min-height:38px;padding:0 15px;border-radius:999px;font-size:14px;font-weight:650;text-decoration:none;white-space:nowrap;transition:background-color .2s,border-color .2s} .h-link{border:1px solid rgba(160,220,255,.4);background:rgba(140,205,255,.08);color:var(--ink)} .h-link:hover{background:rgba(140,205,255,.18);border-color:rgba(190,235,255,.7)} .h-cta{background:var(--teal-fill);color:#fff;border:1px solid rgba(45,212,191,.45)} .h-cta:hover{background:var(--teal-fill-hi)} .back{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px 0 9px;border-radius:999px;cursor:pointer;flex:none; font:600 14px/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);border:1px solid rgba(160,220,255,.42);background:rgba(140,205,255,.1);transition:background-color .2s,border-color .2s} .back:hover{background:rgba(140,205,255,.2);border-color:rgba(190,235,255,.7)} .back svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .crumb{margin:0;font-size:13.5px;color:var(--mut);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .crumb a{color:var(--mut);text-decoration:none} .crumb a:hover{color:var(--ink);text-decoration:underline} .crumb b{color:var(--ink);font-weight:600} .crumb .sep{margin:0 .45em;color:var(--mut)} .esc{display:none;margin-left:auto;font:500 11px/1 var(--mono);color:var(--dim);white-space:nowrap} /* the reader's own line in the bar: the page's title over its address */ .rd-id{margin:0;min-width:0;display:flex;flex-direction:column;justify-content:center;line-height:1.25} .rd-id[hidden]{display:none} .rd-title{font-size:13.5px;font-weight:650;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .rd-addr{font:500 11.5px/1.3 var(--mono);color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .holo.in-read .crumb{display:none} /* ---------- the menu ---------- */ .menu{grid-area:menu;min-width:0;padding:4px 10px 6px} .menu-list{list-style:none;margin:0;padding:0;display:grid;gap:6px} .menu-list li{display:flex;min-width:0} .mi{position:relative;flex:1;min-width:0;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:9px; padding:6px 10px;min-height:44px;border-radius:10px;text-decoration:none;color:var(--ink); border:1px solid rgba(160,220,255,.22);background:rgba(140,205,255,.055);transition:border-color .2s,background-color .2s,box-shadow .2s} .mi:hover,.mi.lit,.mi:focus-visible{border-color:rgba(190,235,255,.62);background:rgba(140,205,255,.12)} .mi[aria-current="page"]{border-color:rgba(205,242,255,.85);background:rgba(140,210,255,.2);box-shadow:inset 0 0 0 1px rgba(205,242,255,.35), 0 0 16px rgba(120,200,255,.28)} .mi:focus-visible{outline-offset:1px} .ico{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:9px;color:var(--holo-hi); background:rgba(140,205,255,.1);box-shadow:inset 0 0 0 1px rgba(160,220,255,.3)} .mi[aria-current="page"] .mi-d{color:var(--ink2)} .mi[aria-current="page"] .ico{background:rgba(160,220,255,.26);box-shadow:inset 0 0 0 1px rgba(215,245,255,.7), 0 0 12px rgba(140,210,255,.45)} .ico svg,.c-ico svg{width:58%;height:58%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .mi-t{grid-column:2;font-size:14.5px;font-weight:650;line-height:1.2;white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis} .mi-d{display:none;grid-column:2;font-size:12.5px;line-height:1.35;color:var(--mut)} .live{display:inline-flex;align-items:center;gap:0;margin-left:6px;vertical-align:.12em;font:700 0/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ochre-text)} /* a tab keeps the badge's dot, not its word */ .live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ochre);box-shadow:0 0 8px rgba(240,179,90,.8);animation:breath 2.4s ease-in-out infinite} @keyframes breath{0%,100%{opacity:.5}50%{opacity:1}} /* phone, home: two rows (four, then three), each its icon over its name (the greeting keeps its room above) */ .holo.at-home .menu-list{grid-template-columns:repeat(4,minmax(0,1fr))} .holo.at-home .menu{padding:4px 10px 10px} .holo.at-home .mi{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;row-gap:3px;padding:6px 4px 5px;min-height:56px} .holo.at-home .mi .ico{width:28px;height:28px} .holo.at-home .mi-t{grid-column:1;font-size:13px} .holo.at-home .live{position:absolute;top:6px;right:7px;margin:0} /* phone, in a section: one row that scrolls sideways, its ends fading */ .holo.in-sec .menu{padding:2px 0 6px} .holo.in-sec .menu-list{display:flex;gap:6px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding:2px 10px;scroll-padding:0 24px; -webkit-mask-image:linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 22px), transparent); mask-image:linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 22px), transparent)} .holo.in-sec .menu-list::-webkit-scrollbar{display:none} .holo.in-sec .menu-list li{flex:none} .holo.in-sec .mi{padding:4px 12px 4px 6px} .holo.in-sec .mi .ico{width:28px;height:28px} /* ---------- the views ---------- */ .views{grid-area:views;position:relative;min-height:0;min-width:0;overflow:hidden;overflow:clip;container:screen / size} .view{position:absolute;inset:0;display:flex;flex-direction:column;overflow:auto;overscroll-behavior:contain; scrollbar-width:thin;scrollbar-color:rgba(160,220,255,.3) transparent; --fs:calc(.45cqi + 12.6px); --fs-s:calc(.3cqi + 11.8px); --pad:calc(2.4cqi + 8px); font-size:var(--fs);line-height:1.55} .view[hidden],.screen[hidden]{display:none !important} /* home */ .home{padding:calc(var(--pad) * .7) var(--pad) calc(var(--pad) * .6)} .greet{flex:none;margin:auto 0} .hello{display:inline-grid;align-items:center;justify-items:center;margin:0 0 calc(1.2cqi + 6px);padding:calc(.3cqi + 3px) calc(.9cqi + 8px); border-radius:12px 12px 12px 4px;background:rgba(30,70,110,.55);border:1px solid rgba(170,225,255,.3);font-weight:650;font-size:calc(.3cqi + 12px);color:var(--holo-hi)} .hello::before{content:"Sawubona.";visibility:hidden} .hello::before,.hello-word,.dots{grid-area:1/1} .hello-word{justify-self:stretch;text-align:center} /* every greeting shares one cell, sized by the longest: no layout shift */ .dots{display:inline-flex;gap:3px;visibility:hidden} .dots i{width:4px;height:4px;border-radius:50%;background:var(--accent);animation:dot 1s infinite ease-in-out;animation-play-state:paused} .hello.typing .dots i{animation-play-state:running} .dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s} .hello.typing .hello-word{visibility:hidden}.hello.typing .dots{visibility:visible} @keyframes dot{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-2px)}} .greet h1{margin:0;max-width:19ch;font-size:calc(3.6cqi + 12px);line-height:1.1;letter-spacing:-.022em;font-weight:800;text-wrap:balance;text-shadow:0 0 26px rgba(120,200,255,.22)} .greet h1 em{font-style:normal;color:var(--accent)} .greet .lede{margin:calc(1.2cqi + 8px) 0 0;max-width:44ch;color:var(--ink2);font-size:calc(.8cqi + 13px);line-height:1.5;text-wrap:pretty} .ns-links{display:none;list-style:none;margin:12px 0 0;padding:0} .ns-links li{margin:0 0 6px} .ns-links a{display:inline-flex;align-items:center;min-height:44px;color:var(--accent)} .home-foot{flex:none;display:flex;align-items:flex-end;justify-content:space-between;gap:8px 18px;flex-wrap:wrap;padding-top:calc(1.2cqi + 6px);font-size:var(--fs-s);color:var(--mut)} .home-foot p{margin:0} .hint{white-space:nowrap} .nw{white-space:nowrap} /* sections */ .vbody{position:relative;flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:calc(.8cqi + 4px) var(--pad) max(var(--pad), 22px); scrollbar-width:thin;scrollbar-color:rgba(160,220,255,.3) transparent} .view.sec,.view.reader{overflow:hidden} /* the last few px of every scroller fade, so a cut line reads as "more below" (scroll-padding keeps focus clear) */ .vbody,.os.is-wide .md .screen{-webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - 16px), transparent); mask-image:linear-gradient(to bottom, #000 calc(100% - 16px), transparent);scroll-padding-bottom:20px} .vbody.scrolled{-webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 16px), transparent); mask-image:linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 16px), transparent);scroll-padding-top:16px} .os.is-wide .md .vbody{-webkit-mask-image:none;mask-image:none} .screen > :first-child{margin-top:0} .kick{margin:0 0 7px;font:600 calc(.18cqi + 10.6px)/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)} .kick::before{content:"\25C6";content:"\25C6" / "";color:var(--ochre);margin-right:.6em;font-size:.9em} /* decoration, never read aloud */ .screen h2,.screen .h2{margin:0 0 calc(.7cqi + 6px);font-size:calc(1.7cqi + 13px);line-height:1.16;letter-spacing:-.018em;font-weight:800;outline:none;text-wrap:balance;color:var(--ink)} .screen h2 em,.screen .h2 em{font-style:normal;color:var(--accent)} .screen h2:focus-visible,.screen .h2:focus-visible{outline:2px solid var(--holo-hi);outline-offset:4px;border-radius:4px} .screen p{margin:0 0 calc(.7cqi + 6px);color:var(--ink2);max-width:68ch;text-wrap:pretty} .screen .lede{color:var(--ink);font-size:calc(.55cqi + 13.4px)} .screen a:not(.btn):not(.subcard):not(.p-more){color:var(--accent);text-underline-offset:2px} .note{font-size:var(--fs-s);color:var(--mut) !important} .fine{font-size:var(--fs-s);color:var(--mut) !important;max-width:none !important} .sub-h{margin:calc(1cqi + 8px) 0 6px;font-size:calc(.45cqi + 12.5px);color:var(--ink)} .actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:calc(1.2cqi + 8px) !important} .btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 19px;border-radius:999px;text-decoration:none;font-weight:650;font-size:calc(.2cqi + 13.4px); color:var(--ink);border:1px solid rgba(160,220,255,.42);background:rgba(140,205,255,.08);transition:background-color .2s,border-color .2s} .btn:hover{background:rgba(140,205,255,.18);border-color:rgba(195,238,255,.75)} .btn.primary{background:var(--teal-fill);border-color:rgba(45,212,191,.45);color:#fff} .btn.primary:hover{background:var(--teal-fill-hi)} /* a mail button shows its address too (it opens the mail app, which may not be set up) */ .btn.mail{flex-direction:column;line-height:1.2;padding-top:6px;padding-bottom:6px} .btn-addr{display:block;font:500 .82em/1.3 var(--mono);opacity:.92} .subnav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(1cqi + 5px);margin:calc(1cqi + 8px) 0 calc(1.4cqi + 8px)} .subcard{display:flex;flex-direction:column;gap:4px;padding:calc(.9cqi + 8px) calc(1.1cqi + 10px);border-radius:12px;text-decoration:none;color:var(--ink); border:1px solid rgba(160,220,255,.3);background:rgba(140,205,255,.07);transition:border-color .2s,background-color .2s;position:relative} .subcard::after{content:"\203A";content:"\203A" / "";position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--holo-hi);font-size:1.3em;opacity:.75} .subcard:hover{border-color:rgba(195,238,255,.7);background:rgba(140,205,255,.14)} .subcard b{order:2;font-size:calc(.3cqi + 12.6px);line-height:1.3;padding-right:14px} .subcard span{order:1;font:600 calc(.14cqi + 10.4px)/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)} .subcard.wide{margin-top:calc(1.2cqi + 8px)} .caps,.trio,.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(1cqi + 5px)} .caps li,.trio li,.steps li{padding:calc(1cqi + 8px) calc(1.1cqi + 9px);border-radius:12px;border:1px solid var(--line);background:var(--card)} .caps h3,.trio h4,.steps h4{margin:0 0 5px;font-size:calc(.35cqi + 12.6px);line-height:1.3;color:var(--ink)} .caps p,.trio p,.steps p{margin:0;font-size:var(--fs-s);line-height:1.5;color:var(--ink2)} .caps + .note{margin-top:calc(1.2cqi + 8px)} .steps{counter-reset:s} .steps li{counter-increment:s} .steps h4::before{content:counter(s);display:inline-grid;place-items:center;width:1.6em;height:1.6em;margin-right:.5em;border-radius:50%;font:700 .82em/1 var(--mono);color:#04202c;background:var(--accent)} .ticks{list-style:none;margin:0 0 calc(1cqi + 6px);padding:0;display:grid;gap:calc(.5cqi + 5px)} .ticks li{position:relative;padding-left:2.1em;color:var(--ink2)} .ticks li::before{content:"\2713\2713";content:"\2713\2713" / "";position:absolute;left:0;top:.05em;font:700 .86em/1.5 var(--mono);color:var(--accent);letter-spacing:-.12em} /* master and detail: a list beside its detail where the views are wide, a list then a sub-screen where they are not */ .md-list,.links{list-style:none;margin:calc(.8cqi + 6px) 0 0;padding:0;display:grid;gap:calc(.5cqi + 4px)} .md-list a,.links a{display:flex;flex-direction:column;gap:2px;padding:calc(.7cqi + 7px) calc(1cqi + 10px);border-radius:11px;text-decoration:none;color:var(--ink) !important; border:1px solid var(--line);background:var(--card);transition:border-color .2s,background-color .2s;position:relative} .md-list a{padding-right:30px} .md-list a::after{content:"\203A";content:"\203A" / "";position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--holo-hi);opacity:.65} .md-list a:hover,.links a:hover{border-color:rgba(195,238,255,.62);background:rgba(140,205,255,.11)} .md-list a[aria-current="true"]{border-color:rgba(205,242,255,.75);background:rgba(140,210,255,.16);box-shadow:inset 3px 0 0 var(--accent)} .md-list b,.links b{font-size:calc(.3cqi + 12.6px);font-weight:700} .md-list span{font-size:var(--fs-s);color:var(--mut)} .links span{font-size:var(--fs-s);color:var(--ink2);line-height:1.5} .links a::after{content:"\203A";content:"\203A" / "";position:absolute;right:14px;top:10px;color:var(--holo-hi);opacity:.65;font-size:.9em} .links b{padding-right:16px} .os.is-wide .md .vbody{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.25fr);gap:calc(2cqi + 8px);overflow:hidden;padding-bottom:0} .os.is-wide .md .screen{overflow:auto;overscroll-behavior:contain;min-height:0;padding-bottom:max(var(--pad), 22px);scrollbar-width:thin;scrollbar-color:rgba(160,220,255,.3) transparent} .os.is-wide .md .md-pane{padding:calc(1.2cqi + 10px) calc(1.4cqi + 12px) var(--pad);margin-bottom:var(--pad);border-radius:14px; border:1px solid rgba(160,220,255,.26);background:linear-gradient(180deg, rgba(140,205,255,.08), rgba(140,205,255,.02))} .os.is-wide .md .md-index .lede{font-size:var(--fs-s)} /* pricing */ .plans{list-style:none;margin:calc(1cqi + 8px) 0 calc(1.2cqi + 8px);padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(1cqi + 6px)} .plan{position:relative;display:flex;flex-direction:column;padding:calc(1.1cqi + 9px) calc(1.2cqi + 10px);border-radius:14px;border:1px solid var(--line);background:var(--card)} .plan.hi{border:2px solid #2fb8a8;background:rgba(20,150,140,.12)} .p-count{margin:0 0 6px !important;font-size:var(--fs-s);color:var(--mut) !important;min-height:2.9em} .amount{margin:0 !important;font-size:calc(1.5cqi + 14px);font-weight:800;letter-spacing:-.02em;color:var(--ink) !important;white-space:nowrap} .amount small,.h2 small{font-size:max(.48em, 12px);font-weight:600;color:var(--mut);letter-spacing:0} /* "/ month" makes the price monthly: never small print */ .once{margin:3px 0 calc(.8cqi + 8px) !important;font-size:var(--fs-s);color:var(--ink2) !important} .p-more{margin-top:auto;display:inline-flex;align-items:center;gap:6px;min-height:38px;font-weight:650;font-size:var(--fs-s);color:var(--accent);text-decoration:none} .p-more::after{content:"\203A";content:"\203A" / "";font-size:1.3em;line-height:1} .p-more::before{content:"";position:absolute;inset:0;border-radius:inherit} /* the whole card opens the plan */ .plan:hover{border-color:rgba(195,238,255,.5)} .p-more:hover{text-decoration:underline} .plan-detail .h2{font-size:calc(2.2cqi + 16px)} /* contact */ .contacts{list-style:none;margin:calc(1cqi + 8px) 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(1cqi + 5px)} .contacts a{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:12px;align-items:center;padding:calc(1cqi + 8px) calc(1.1cqi + 10px); border-radius:12px;text-decoration:none;color:var(--ink) !important;border:1px solid var(--line);background:var(--card);transition:border-color .2s,background-color .2s;min-height:58px} .contacts a:hover{border-color:rgba(195,238,255,.62);background:rgba(140,205,255,.11)} .c-ico{grid-row:1 / span 3;display:grid;place-items:center;width:calc(2cqi + 24px);height:calc(2cqi + 24px);border-radius:12px;color:var(--holo-hi);background:rgba(140,205,255,.1);box-shadow:inset 0 0 0 1px rgba(160,220,255,.3)} .contacts b{font-size:calc(.3cqi + 12.6px)} .contacts span:not(.c-ico){font-size:var(--fs-s);color:var(--mut);overflow-wrap:anywhere} .contacts .c-addr{font-family:var(--mono);font-size:.92em} /* live demo */ .actions.big .btn{min-height:46px} .chat{margin:calc(1cqi + 6px) 0;max-width:560px;border-radius:14px;overflow:hidden;border:1px solid rgba(160,220,255,.2);background:#0b1525} .chat-head{margin:0 !important;max-width:none !important;padding:10px 14px;background:#14223a;color:#e8eefb !important;font-size:var(--fs-s);display:flex;gap:10px;align-items:baseline} .chat-head span{color:#a9bad4} .msgs{list-style:none;margin:0;padding:12px;display:flex;flex-direction:column;gap:8px} .msgs li{max-width:82%;padding:8px 12px;border-radius:14px;font-size:var(--fs-s);line-height:1.45;transition:opacity .3s, transform .3s} .msgs .me{align-self:flex-end;background:var(--teal-fill);color:#fff;border-bottom-right-radius:4px} .msgs .it{align-self:flex-start;background:#1c2c4b;color:#e8eefb;border-bottom-left-radius:4px} .msgs .it b{color:#8fe0d4} .msgs time{display:block;margin-top:2px;text-align:right;font:500 .82em/1.2 var(--mono)} .msgs .it time{opacity:.85} .msgs .diary{display:block;margin-top:6px;padding:4px 8px;border-radius:6px;background:#0b1525;color:#a9bad4;font-size:.92em} .msgs li.pending{opacity:0;transform:translateY(6px)} /* ---------- the LIVE demo (robot-preview.js, THE LIVE DEMO): a trade, then the real assistant's chat ---------- #demo lists the trades; #demo-chat is the conversation, and while it shows, its screen IS the view's body: the log scrolls inside it and the box stays on screen at every size (.vbody.is-chat). */ .lc [hidden],.lc-resume[hidden],.trades:empty{display:none !important} .trades{list-style:none;margin:calc(.4cqi + 4px) 0 calc(1cqi + 10px);padding:0;display:grid;grid-template-columns:repeat(auto-fill, minmax(min(100%, 210px), 1fr));gap:calc(.5cqi + 5px)} .trades li{display:flex;min-width:0} .trade{position:relative;flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;min-height:50px;margin:0; padding:calc(.5cqi + 6px) 30px calc(.5cqi + 6px) calc(.9cqi + 10px);border-radius:11px;border:1px solid var(--line);background:var(--card); color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:border-color .2s,background-color .2s} .trade::after{content:"\203A";content:"\203A" / "";position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--holo-hi);opacity:.65} .trade:hover{border-color:rgba(195,238,255,.62);background:rgba(140,205,255,.11)} .trade[aria-current="true"]{border-color:rgba(205,242,255,.75);background:rgba(140,210,255,.16);box-shadow:inset 3px 0 0 var(--accent)} .trade:focus-visible{outline-offset:-2px} .trade b{font-size:calc(.3cqi + 12.6px);font-weight:700;line-height:1.3} .trade span{font-size:var(--fs-s);color:var(--mut);line-height:1.35} .lc-resume{margin:calc(.8cqi + 6px) 0 calc(.6cqi + 4px) !important} .demo-main .sub-h{margin-top:calc(1.2cqi + 10px)} .lc-fine{margin-top:calc(1.2cqi + 8px) !important} /* clip, not hidden: a clip is no scroller, so a tap on the box (a phone scrolls the focused box into view) can never push the head out of the hologram */ .vbody.is-chat{display:flex;flex-direction:column;overflow:hidden;overflow:clip;padding-bottom:calc(.6cqi + 8px);-webkit-mask-image:none;mask-image:none} .vbody.is-chat > .demo-chat{flex:1;min-height:0;display:flex;flex-direction:column} .vbody.is-chat > .ask-chat{flex:1;min-height:0;display:flex;flex-direction:column} .ask-chat .lc-head .lc-biz{font-size:calc(.7cqi + 14px)} /* THE CHAT BAR on the home screen (index.html's #ask-bar): a question typed here opens Ask Induna (#ask) */ .ask-bar{flex:none;display:flex;gap:8px;margin:calc(1cqi + 8px) 0 0;max-width:640px} .ask-bar-in{flex:1;min-width:0;min-height:46px;margin:0;padding:0 14px;border-radius:999px;border:1px solid rgba(160,220,255,.45); background:rgba(4,16,32,.6);color:var(--ink);font:15px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; box-shadow:0 0 18px rgba(120,200,255,.14)} .ask-bar-in::placeholder{color:var(--mut);opacity:.9} .ask-bar-in:focus-visible{outline:2px solid var(--holo-hi);outline-offset:1px} .ask-bar-go{flex:none;min-height:46px;padding:0 20px;border-radius:999px;cursor:pointer;color:#fff;background:var(--teal-fill); border:1px solid rgba(45,212,191,.45);font:700 14.5px/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;transition:background-color .2s} .ask-bar-go:hover{background:var(--teal-fill-hi)} .no-os .ask-bar{display:none} /* outside the hologram (owner, Angus, 2026-10-22): fixed at the foot of the window on every view, over the robot's hand, and the open chat's own input: the chat inside the hologram drops its form while the bar is its input */ .ask-dock{position:fixed;z-index:30;left:50%;transform:translateX(-50%);bottom:max(14px, env(safe-area-inset-bottom)); width:min(640px, calc(100vw - 32px));max-width:none;margin:0;padding:6px;border-radius:999px; background:rgba(10,24,44,.62);border:1px solid rgba(160,220,255,.32);box-shadow:0 10px 30px rgba(0,10,30,.35); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)} .ask-dock .ask-bar-in{min-height:44px} .ask-dock .ask-bar-go{min-height:44px} #ask-form{display:none} /* the bar costs the home screen a row: a shorter screen tightens round it, and a short one lets the greeting chip go */ @container screen (max-height:430px){ .ask-bar{margin-top:6px} .ask-bar-in,.ask-bar-go{min-height:40px} .greet .lede{margin-top:6px} } @container screen (max-height:260px){ .hello{display:none} } @container screen (max-height:240px){ .greet .lede{display:none} .ask-bar{margin-top:4px} .ask-bar-in,.ask-bar-go{min-height:36px} .home-foot{padding-top:4px} } .lc{flex:1;min-height:0;display:flex;flex-direction:column;gap:calc(.3cqi + 6px)} .lc p{max-width:none} .lc-head{flex:none;display:flex;align-items:center;gap:10px;min-width:0} .lc-id{flex:1;min-width:0} .screen .lc-head .lc-biz{margin:0;font-size:calc(.7cqi + 14px);line-height:1.2;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-wrap:nowrap} .screen .lc-sub{margin:2px 0 0;font:500 calc(.12cqi + 11px)/1.3 var(--mono);color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .lc-over,.lc-act,.lc-chip,.lc-days button{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border-radius:999px;color:var(--ink); border:1px solid rgba(160,220,255,.42);background:rgba(140,205,255,.08);font:600 13.5px/1.2 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; transition:background-color .2s,border-color .2s} .lc-over:hover,.lc-act:hover,.lc-chip:hover,.lc-days button:hover{background:rgba(140,205,255,.18);border-color:rgba(195,238,255,.75)} .lc-over{flex:none;min-height:36px;padding:0 14px} /* the diary: one line, the day's jobs under it when opened */ .lc-diary{flex:none;min-width:0;border-radius:11px;border:1px solid var(--line);background:var(--card)} .lc-diary > summary{display:flex;align-items:center;gap:8px;min-height:36px;padding:4px 12px;cursor:pointer;list-style:none;border-radius:inherit; font-size:var(--fs-s);line-height:1.3;color:var(--ink2)} .lc-diary > summary::-webkit-details-marker{display:none} .lc-diary > summary::before{content:"\203A";content:"\203A" / "";flex:none;color:var(--holo-hi);font-size:1.15em;line-height:1;transition:transform .2s} .lc-diary[open] > summary::before{transform:rotate(90deg)} .lc-diary > summary:focus-visible{outline-offset:-2px} .lc-dsum{min-width:0} .lc-dbody{position:relative;max-height:min(240px, 42cqh);overflow:auto;overscroll-behavior:contain;padding:0 10px 10px;scrollbar-width:thin;scrollbar-color:rgba(160,220,255,.3) transparent} .lc-days{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 8px} .lc-days button{min-height:30px;padding:0 11px;font-size:12px} .lc-days button[aria-pressed="true"]{background:var(--teal-fill);border-color:rgba(45,212,191,.6);color:#fff} .lc-jobs{list-style:none;margin:0;padding:0;display:grid;gap:4px} .lc-jobs li{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:10px;align-items:baseline;padding:5px 9px;border-radius:8px; border-left:3px solid var(--c, var(--mut));background:rgba(4,16,32,.42);font-size:var(--fs-s);line-height:1.35} .lc-jobs time{font:500 .92em/1.35 var(--mono);color:var(--mut)} .lc-jobs b{color:var(--ink);font-weight:650;margin-right:.4em} .lc-who{color:var(--ink2)} .lc-staff{display:inline-flex;align-items:center;gap:5px;margin-left:.5em;padding:0 7px;border-radius:999px;border:1px solid rgba(160,220,255,.28);font-size:.9em;line-height:1.6;color:var(--ink);white-space:nowrap;vertical-align:.04em} .lc-staff::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c, var(--mut))} .lc-jobs .mine{background:rgba(20,150,140,.2);box-shadow:inset 0 0 0 1px rgba(45,212,191,.75)} .lc-tag{display:inline-block;margin-left:.5em;padding:1px 6px;border-radius:4px;font:700 .72em/1.5 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:#062e2b;background:#5eead4;vertical-align:.08em} /* the conversation */ .lc-log{position:relative;flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:8px;padding:4px 2px 6px;border-radius:10px; scrollbar-width:thin;scrollbar-color:rgba(160,220,255,.3) transparent} .lc-log.scrolled{-webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 14px);mask-image:linear-gradient(to bottom, transparent 0, #000 14px)} .lc-log:focus-visible{outline:2px solid var(--holo-hi);outline-offset:-2px} .lc-log > *{flex:none} .lc-foot{margin:0 auto 4px !important;max-width:62ch !important;text-align:center;font-size:11.5px;line-height:1.5;color:var(--mut) !important} .lc-msg{max-width:86% !important;margin:0 !important;padding:8px 12px;border-radius:14px;font-size:var(--fs-s);line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere} .lc-me{align-self:flex-end;background:var(--teal-fill);color:#fff !important;border-bottom-right-radius:4px} .lc-it{align-self:flex-start;background:#1c2c4b;color:#e8eefb !important;border-bottom-left-radius:4px} .lc-tools{align-self:flex-start;margin:-3px 0 0 2px !important;font:500 11.5px/1.5 var(--mono);color:var(--mut) !important} .lc-tools b{color:var(--ochre-text);font-weight:500} .lc-sys{align-self:center;max-width:94%;text-align:center} .lc-sys > p{margin:0 !important;font-size:var(--fs-s);line-height:1.45;color:var(--mut) !important} .lc-sys > .lc-acts{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:8px !important} .lc-act{min-height:36px;padding:0 15px} .lc-typing{align-self:flex-start;margin:0 !important;padding:6px 12px;border-radius:14px;background:rgba(28,44,75,.7);font-size:var(--fs-s);color:var(--mut) !important; animation:lcwait 1.4s ease-in-out infinite} @keyframes lcwait{0%,100%{opacity:.6}50%{opacity:1}} /* the taps: one row that scrolls sideways; the opener wraps, the server's options stay one line each */ .lc-chips{flex:none;display:flex;gap:6px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding:1px} .lc-chips::-webkit-scrollbar{display:none} .lc-chip{flex:none;min-height:34px;padding:5px 13px;white-space:nowrap;font-weight:600} .lc-chip.opener{flex:0 1 auto;white-space:normal;text-align:left;justify-content:flex-start;border-radius:14px;font-weight:500} /* the box: always open to typing; only Send waits while an answer is on its way */ .lc-form{flex:none;display:flex;align-items:flex-end;gap:8px;margin:0} .lc-in{flex:1;min-width:0;min-height:44px;max-height:min(132px, 30cqh);resize:none;overflow-y:auto;margin:0;padding:11px 12px;border-radius:12px; border:1px solid rgba(160,220,255,.4);background:rgba(4,16,32,.6);color:var(--ink);font:15px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif} .lc-in::placeholder{color:var(--mut);opacity:.9} .lc-in:focus-visible{outline:2px solid var(--holo-hi);outline-offset:1px} .lc-send{flex:none;min-height:44px;padding:0 18px;border-radius:12px;cursor:pointer;color:#fff;background:var(--teal-fill);border:1px solid rgba(45,212,191,.45); font:700 14.5px/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;transition:background-color .2s} .lc-send:hover{background:var(--teal-fill-hi)} .lc-send:disabled{opacity:.5;cursor:default} .rd-doc .rd-live{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0 0 calc(1cqi + 10px);padding:10px 12px;border-radius:12px; border:1px solid rgba(160,220,255,.32);background:rgba(140,205,255,.07);color:var(--ink2)} .rd-doc .rd-live .rd-btn{margin:0} /* ====================================================================== THE READER: another page of the site, its words and pictures only, styled here (never by that page's CSS) ====================================================================== */ .rd-body{padding-top:calc(1cqi + 8px)} .rd-doc{max-width:74ch;outline:none;color:var(--ink2);overflow-wrap:break-word} .rd-doc:focus-visible{outline:2px solid var(--holo-hi);outline-offset:4px;border-radius:6px} .rd-doc > :first-child{margin-top:0} .rd-doc h1,.rd-doc h2,.rd-doc h3,.rd-doc h4,.rd-doc h5,.rd-doc h6{color:var(--ink);line-height:1.2;letter-spacing:-.012em;text-wrap:balance;scroll-margin-top:12px} .rd-doc h1{margin:0 0 calc(.8cqi + 8px);font-size:calc(1.9cqi + 14px);font-weight:800;letter-spacing:-.02em} .rd-doc h2{margin:calc(2.2cqi + 18px) 0 calc(.6cqi + 6px);font-size:calc(1.15cqi + 13.5px);font-weight:800} .rd-doc h3{margin:calc(1.4cqi + 12px) 0 calc(.4cqi + 4px);font-size:calc(.5cqi + 13.4px);font-weight:700} .rd-doc h4,.rd-doc h5,.rd-doc h6{margin:calc(1cqi + 10px) 0 4px;font-size:calc(.3cqi + 13px);font-weight:700} .rd-doc h1:focus,.rd-doc h2:focus{outline:none} .rd-doc h1:focus-visible{outline:2px solid var(--holo-hi);outline-offset:4px;border-radius:4px} .rd-doc p{margin:0 0 calc(.7cqi + 7px);text-wrap:pretty} .rd-doc ul,.rd-doc ol{margin:0 0 calc(.8cqi + 8px);padding-left:1.35em} .rd-doc li{margin:0 0 .35em} .rd-doc li::marker{color:var(--accent)} .rd-doc .rd-plain{list-style:none;padding-left:0} .rd-doc .rd-blk{display:block} .rd-doc a{color:var(--accent);text-underline-offset:2px} .rd-doc a:hover{color:var(--holo-hi)} .rd-doc strong,.rd-doc b{color:var(--ink)} .rd-doc small{font-size:var(--fs-s);color:var(--mut)} .rd-doc em,.rd-doc i{font-style:italic} .rd-doc blockquote{margin:calc(1cqi + 8px) 0;padding:6px 0 6px 14px;border-left:3px solid rgba(160,220,255,.45);color:var(--ink)} .rd-doc hr{border:0;height:1px;margin:calc(1.6cqi + 14px) 0;background:linear-gradient(to right, rgba(160,220,255,.5), rgba(160,220,255,0))} .rd-doc img{max-width:100%;max-height:min(560px, 72cqb);width:auto;height:auto;margin:calc(.8cqi + 8px) 0;border-radius:10px;border:1px solid rgba(160,220,255,.22);background:rgba(140,205,255,.06)} .rd-doc figure{margin:calc(1cqi + 10px) 0} .rd-doc figcaption{font-size:var(--fs-s);color:var(--mut);margin-top:6px} .rd-doc code,.rd-doc kbd,.rd-doc samp{font-family:var(--mono);font-size:.9em;padding:1px 5px;border-radius:5px;background:rgba(140,205,255,.1);color:var(--ink)} .rd-doc pre{overflow:auto;padding:10px 12px;border-radius:10px;background:rgba(4,14,28,.6);border:1px solid var(--line)} .rd-doc pre code{padding:0;background:none} .rd-doc section,.rd-doc article,.rd-doc header,.rd-doc aside,.rd-doc footer{display:block} .rd-doc details{margin:0 0 8px;padding:8px 12px;border-radius:10px;border:1px solid var(--line);background:var(--card)} .rd-doc summary{cursor:pointer;font-weight:650;color:var(--ink)} .rd-doc details[open] summary{margin-bottom:6px} .rd-doc dl{margin:0 0 12px} .rd-doc dt{font-weight:700;color:var(--ink)} .rd-doc dd{margin:0 0 8px 1em} .rd-doc .rd-table{overflow:auto;margin:calc(.8cqi + 8px) 0;border-radius:10px;border:1px solid var(--line)} .rd-doc table{border-collapse:collapse;width:100%;font-size:var(--fs-s)} .rd-doc th,.rd-doc td{padding:7px 10px;text-align:left;vertical-align:top;border-bottom:1px solid rgba(160,220,255,.14)} .rd-doc th{color:var(--ink);background:rgba(140,205,255,.08)} .rd-doc caption{caption-side:top;text-align:left;padding:6px 10px;color:var(--mut)} .rd-doc svg{display:block;width:100%;max-width:560px;height:auto;margin:calc(.8cqi + 8px) 0} .rd-doc .rd-btn{display:inline-flex;align-items:center;justify-content:center;min-height:42px;margin:4px 8px 4px 0;padding:0 17px;border-radius:999px;text-decoration:none;font-weight:650;font-size:calc(.2cqi + 13.4px); color:var(--ink);border:1px solid rgba(160,220,255,.42);background:rgba(140,205,255,.08);transition:background-color .2s,border-color .2s} .rd-doc .rd-btn:hover{background:rgba(140,205,255,.18);border-color:rgba(195,238,255,.75);color:var(--ink)} .rd-doc .rd-mail{font-family:var(--mono);font-size:.9em;color:var(--ink2)} /* the site's own chat illustrations, drawn as the hologram's chat */ .rd-doc .rd-chat{display:flex;flex-direction:column;gap:8px;max-width:540px;margin:calc(1cqi + 8px) 0;padding:12px;border-radius:14px;border:1px solid rgba(160,220,255,.22);background:rgba(4,16,32,.55)} .rd-doc .rd-chead{display:flex;align-items:center;gap:10px;padding-bottom:6px;margin-bottom:2px;border-bottom:1px solid rgba(160,220,255,.14);font-size:var(--fs-s);color:var(--ink)} .rd-doc .rd-msg{max-width:84%;margin:0;padding:8px 12px;border-radius:14px;font-size:var(--fs-s);line-height:1.45} .rd-doc .rd-me{align-self:flex-end;background:var(--teal-fill);color:#fff;border-bottom-right-radius:4px} .rd-doc .rd-it{align-self:flex-start;background:#1c2c4b;color:#e8eefb;border-bottom-left-radius:4px} .rd-doc .rd-me b,.rd-doc .rd-me strong{color:#fff} .rd-doc .rd-it b,.rd-doc .rd-it strong{color:#8fe0d4} .rd-doc .rd-t{display:block;margin-top:2px;text-align:right;font:500 .82em/1.2 var(--mono);opacity:.88} .rd-doc .rd-me .rd-t{opacity:1} /* white on the teal bubble is 5.5:1; faded it would be 4.6 */ .rd-doc .rd-tap{align-self:flex-start;padding:6px 12px;border-radius:999px;border:1px solid rgba(160,220,255,.42);font-size:var(--fs-s);color:var(--accent)} .rd-doc .rd-cap{margin:2px 0 0;font-size:var(--fs-s);color:var(--mut)} .rd-doc .rd-out::after{content:"\2197";content:"\2197" / "";margin-left:.25em;font-size:.85em} /* the reader's notices: loading, a page that will not open here, another website, the live demo */ .rd-note{max-width:60ch;margin:calc(2cqi + 6px) 0;padding:calc(1.4cqi + 12px) calc(1.6cqi + 14px);border-radius:14px; border:1px solid rgba(160,220,255,.32);background:linear-gradient(180deg, rgba(140,205,255,.1), rgba(140,205,255,.03))} .rd-note[hidden]{display:none} .rd-note h2{margin:0 0 calc(.6cqi + 6px);font-size:calc(1.15cqi + 13.5px);line-height:1.2;color:var(--ink);font-weight:800;outline:none} .rd-note h2:focus-visible{outline:2px solid var(--holo-hi);outline-offset:4px;border-radius:4px} .rd-note p{margin:0 0 10px;color:var(--ink2)} .rd-note .rd-where{display:block;margin:6px 0 4px;padding:8px 10px;border-radius:9px;font:500 var(--fs-s)/1.45 var(--mono);color:var(--ink);background:rgba(4,16,32,.55);border:1px solid rgba(160,220,255,.22);overflow-wrap:anywhere;user-select:all} .rd-note .actions{margin-top:12px !important} .rd-load{display:flex;align-items:center;gap:10px;color:var(--mut);font-size:var(--fs-s)} .rd-load::before{content:"";flex:none;width:14px;height:14px;border-radius:50%;border:2px solid rgba(160,220,255,.3);border-top-color:var(--holo-hi);animation:spin .9s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} /* a short line in the hologram, for a mail or phone link: the address, readable as text */ .toast{position:absolute;z-index:7;left:50%;bottom:12px;transform:translateX(-50%);max-width:calc(100% - 24px);margin:0;padding:8px 14px;border-radius:999px; font:500 13px/1.3 var(--mono);color:var(--ink);background:rgba(6,22,44,.94);border:1px solid rgba(175,228,255,.55);box-shadow:0 0 16px rgba(110,195,255,.35); white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none} .toast[hidden]{display:none} /* ---------- the hologram's chrome by its own size ---------- */ /* a phone: on a sub-screen the crumb is its parent only (the heading under it names the leaf) */ @container holo (max-width:480px){ .crumb a + .sep + a + .sep,.crumb a + .sep + a + .sep + b{display:none} } /* the bar's room goes to the crumb and the page's title: below a wide desktop's hologram the chip says only PROTOTYPE in a section or a page, and narrower still it steps aside while a page is read */ @container holo (max-width:1099px){ .holo.in-sec .cp-long,.holo.in-read .cp-long{display:none} } @container holo (max-width:899px){ .holo.in-read .chip-proto{display:none} } /* a small phone: the bar and the menu close up */ @container holo (max-height:420px) and (max-width:480px){ .hbrand,.hnav,.hstat{padding-top:4px;padding-bottom:2px} .holo.at-home .mi{min-height:50px;padding:4px 4px 4px} .holo.at-home .menu{padding-bottom:8px} } /* a tiny hologram (400% zoom): the bar's parts shrink so they never overlap */ @container holo (max-width:300px){ .hbrand,.hnav{padding-left:8px;padding-right:4px} .hstat{gap:5px;padding-left:4px;padding-right:6px} .brand img{height:15px !important} .chip-proto{font-size:8.5px;padding:4px 5px;letter-spacing:.06em} .back{min-height:34px;padding:0 10px 0 6px;font-size:13px} .motion-toggle{width:34px;height:34px} } /* the tiniest hologram (about 170px across): the prototype chip steps out of sight and is still read aloud */ @container holo (max-width:200px){ .chip-proto{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} } /* a short narrow hologram: the menu is one sideways row at home too, so the greeting keeps its room */ @container holo (max-height:300px) and (max-width:480px){ .holo.at-home .os{grid-template-rows:auto auto minmax(0,1fr);grid-template-areas:"brand hstat" "menu menu" "views views"} .holo.at-home .menu{padding:2px 0 6px} .holo.at-home .menu-list{display:flex;gap:6px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding:2px 10px;scroll-padding:0 24px; -webkit-mask-image:linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 22px), transparent); mask-image:linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 22px), transparent)} .holo.at-home .menu-list::-webkit-scrollbar{display:none} .holo.at-home .menu-list li{flex:none} .holo.at-home .mi{grid-template-columns:auto minmax(0,1fr);padding:4px 12px 4px 6px;min-height:40px} .holo.at-home .mi .ico{width:28px;height:28px} .holo.at-home .mi-t{grid-column:2} .holo.at-home .live{position:static;margin-left:6px} } /* MEDIUM (a 4:3 laptop): six tabs along the top, each its icon over its name */ @container holo (min-width:481px){ .os{grid-template-rows:auto auto minmax(0,1fr);grid-template-areas:"brand hstat" "menu menu" "views views"} .holo.in-sec .os{grid-template-areas:"brand hnav hstat" "menu menu menu" "views views views"} .holo.at-home .os{grid-template-rows:auto auto minmax(0,1fr);grid-template-areas:"brand hstat" "menu menu" "views views"} .hbrand{padding:12px 10px 6px 18px} .hnav{padding:10px 8px 6px 14px} .hstat{padding:10px 14px 6px 8px;gap:10px} .brand img{height:22px !important} .h-cta{display:inline-flex} .menu,.holo.at-home .menu,.holo.in-sec .menu{padding:4px 14px 8px} .menu-list,.holo.at-home .menu-list,.holo.in-sec .menu-list{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;overflow:visible;padding:0;-webkit-mask-image:none;mask-image:none} .mi,.holo.in-sec .mi,.holo.at-home .mi{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center;row-gap:4px;padding:7px 4px 6px;min-height:58px} .mi .ico,.holo.in-sec .mi .ico,.holo.at-home .mi .ico{width:28px;height:28px} .mi-t,.holo.at-home .mi-t{grid-column:1;font-size:13px} .mi[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--holo-hi), 0 0 16px rgba(120,200,255,.28)} .live,.holo.at-home .live{position:absolute;top:6px;right:7px;margin:0} } @container holo (min-width:640px){ .cp-long{display:inline} .mi-t,.holo.at-home .mi-t{font-size:13.5px} } /* WIDE (or wide and short): the menu is a rail on the left, the bar spans the top */ @container holo (min-width:800px) or ((min-aspect-ratio:3/2) and (min-width:420px)){ .os,.holo.in-sec .os,.holo.at-home .os{grid-template-columns:var(--railw) minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr); grid-template-areas:"brand hnav hstat" "menu views views";--railw:clamp(140px, 25cqi, 286px)} .holo.in-sec .hbrand{display:flex} .holo.at-home .hnav{display:flex;visibility:hidden} .hbrand{padding:14px 10px 8px 18px} .hnav{padding:12px 8px 8px 6px} .hstat{padding:12px 16px 8px 8px} .menu,.holo.at-home .menu,.holo.in-sec .menu{padding:6px 10px 14px 14px;overflow:auto;scrollbar-width:none;min-height:0} .menu-list,.holo.at-home .menu-list,.holo.in-sec .menu-list{display:flex;flex-direction:column;gap:6px;height:100%;max-height:calc(7 * 112px + 36px);overflow:visible;padding:0;-webkit-mask-image:none;mask-image:none} .menu-list li,.holo.in-sec .menu-list li,.holo.at-home .menu-list li{flex:1 1 0;min-height:0} .mi,.holo.in-sec .mi,.holo.at-home .mi{grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;justify-items:start;text-align:left;align-content:center;column-gap:11px;row-gap:2px;padding:6px 12px 6px 10px;min-height:44px} .mi .ico,.holo.in-sec .mi .ico,.holo.at-home .mi .ico{grid-row:1 / span 2;width:34px;height:34px;align-self:center} .mi-t,.holo.at-home .mi-t{grid-column:2;font-size:15px} .mi-d{display:block;grid-column:2} .mi[aria-current="page"]{box-shadow:inset 3px 0 0 var(--holo-hi), 0 0 16px rgba(120,200,255,.28)} .live,.holo.at-home .live{position:static;margin-left:7px;font-size:9px;gap:4px} .os .mi{border-color:rgba(160,220,255,.1);background:rgba(140,205,255,.04)} /* (two classes: the current and hover states below win) */ .mi:hover,.mi.lit,.mi:focus-visible{border-color:rgba(190,235,255,.45);background:rgba(140,205,255,.1)} .mi[aria-current="page"]{border-color:rgba(205,242,255,.8);background:rgba(140,210,255,.18)} } @container holo ((min-width:800px) and (max-height:520px)) or ((max-width:799px) and (min-aspect-ratio:3/2)){ .mi-d{display:none !important} .mi,.holo.in-sec .mi,.holo.at-home .mi{grid-template-rows:auto} /* one row: the name sits level with its icon */ .mi .ico,.holo.in-sec .mi .ico,.holo.at-home .mi .ico{width:28px;height:28px;grid-row:1} .mi-t,.holo.at-home .mi-t{font-size:14px} } @container holo (min-width:1100px){ .esc{display:inline} } /* under 1000 px the crumb starts at the section (Back goes up a level, and home from a section) */ @container holo (max-width:999px){ .crumb a:first-child,.crumb a:first-child + .sep{display:none} } @container holo (min-width:1000px){ .mt-label{position:static !important;width:auto !important;height:auto !important;clip:auto !important;overflow:visible !important} .motion-toggle{width:auto !important;padding:0 14px !important} } @container holo (min-width:1100px){ .clock{display:inline} .h-link{display:inline-flex} .byline{display:inline} .holo.in-sec .clock,.holo.in-sec .h-link{display:none} /* in a section the bar is the crumb's: the demo link is in the section */ } /* a short wide hologram (landscape phones, short windows): the bar closes up */ @container holo (max-height:400px) and (min-aspect-ratio:3/2){ .os,.holo.at-home .os{grid-template-areas:"menu brand hstat" "menu views views"} .holo.in-sec .os{grid-template-columns:var(--railw) auto minmax(0,1fr) auto;grid-template-areas:"menu brand hnav hstat" "menu views views views"} .holo.at-home .hnav{display:none} .menu-list,.holo.at-home .menu-list,.holo.in-sec .menu-list{gap:4px;max-height:none} .menu,.holo.at-home .menu,.holo.in-sec .menu{padding:10px 6px 10px 10px !important} .hbrand{padding:8px 8px 4px 12px} .hnav{padding:6px 6px 4px 4px} .hstat{padding:6px 10px 4px 6px} .brand img{height:18px !important} .back{min-height:34px;font-size:13px;padding:0 12px 0 8px} .mi,.holo.in-sec .mi,.holo.at-home .mi{padding:3px 8px 3px 6px;column-gap:8px} .mi .ico,.holo.in-sec .mi .ico,.holo.at-home .mi .ico{width:26px;height:26px} .mi-t,.holo.at-home .mi-t{font-size:13.5px} .live,.holo.at-home .live{font-size:0;gap:0} } /* ---------- the content adapts to the views' OWN size ---------- */ @container screen (max-width:620px){ .esc,.hint{display:none} .subnav{grid-template-columns:1fr} .caps,.trio,.steps{grid-template-columns:repeat(2,minmax(0,1fr))} } @container screen (max-width:520px){ .caps,.trio,.steps{grid-template-columns:1fr} .contacts{grid-template-columns:1fr} .home-foot{flex-direction:column;align-items:flex-start;gap:4px} } /* narrow views keep three compact plan columns where they can, so the plans compare at a glance */ @container screen (min-width:481px) and (max-width:580px){ .plans{gap:8px} .plan{padding:10px 11px} .p-count{min-height:3.9em} .amount{font-size:19px} } /* phone-sized views: fixed, comfortable sizes */ @container screen (max-width:480px){ .view{--fs:15px;--fs-s:13.5px;--pad:15px} .greet h1{font-size:21px} .greet .lede{font-size:14.5px} .hello{font-size:13px;margin-bottom:8px} .screen h2,.screen .h2{font-size:21px} .screen .lede{font-size:15px} .kick{font-size:11px} .md-list a,.links a{min-height:48px;padding:10px 14px} .btn{min-height:46px;font-size:15px} .subcard{min-height:48px} .plans{grid-template-columns:1fr} .p-count{min-height:0} .p-more{min-height:44px} .fine a{display:inline-flex;align-items:center;min-height:44px;padding:0 4px} .amount{font-size:25px} .plan-detail .h2{font-size:29px} .caps h3,.trio h4,.steps h4{font-size:15px} .rd-doc h1{font-size:22px} .rd-doc h2{font-size:18.5px} .rd-doc h3{font-size:16px} .rd-note h2{font-size:19px} } /* short views (landscape phones, short windows): compact headings, no kicker, plans as rows */ @container screen (max-height:340px){ .kick{display:none} .screen h2,.screen .h2{font-size:calc(.9cqi + 14px)} .plan-detail .h2{font-size:calc(1.2cqi + 17px)} .greet h1{font-size:calc(2.2cqi + 12px)} .greet .lede{font-size:14px;margin-top:6px} .hello{margin-bottom:6px;font-size:12.5px} .home-foot .hint{display:none} } @container screen (max-height:320px) and (min-width:300px) and (orientation:landscape){ .vbody{padding-top:4px} .plans{grid-template-columns:1fr;gap:6px;margin:6px 0 10px} .plan{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"count amount" "once more";column-gap:12px;align-items:center;padding:4px 11px;line-height:1.3} .plan.hi{padding:3px 10px} .p-count{grid-area:count;min-height:0;margin:0 !important} .amount{grid-area:amount;font-size:calc(.5cqi + 15px);line-height:1.15;text-align:right} .once{grid-area:once;margin:0 !important} .p-more{grid-area:more;margin:0;min-height:24px;justify-self:end} } @container screen (max-height:232px){ .hello{display:none} .ask-bar{margin-top:6px} .ask-bar-in,.ask-bar-go{min-height:40px} /* a short home: the words first, the greeting chip goes */ } @container screen (max-height:200px){ .greet .lede{display:none} } /* a very narrow views (400% zoom): the plans stack */ @container screen (max-width:299px){ .plans{grid-template-columns:1fr} .p-count{min-height:0} } /* the live chat in a narrow view: the bubbles take the width */ @container screen (max-width:480px){ .lc-msg{max-width:90% !important} .lc-send{padding:0 15px} .lc-over{padding:0 12px} } /* a view that is not tall: the open diary hangs over the conversation as a panel, rather than squeezing it to nothing */ @container screen (max-height:559px){ .lc-diary{position:relative;z-index:3} .lc-diary[open]{border-bottom-left-radius:0;border-bottom-right-radius:0} .lc-dbody{position:absolute;top:100%;left:-1px;right:-1px;max-height:min(320px, 58cqh);padding-top:8px; border:1px solid var(--line);border-top:0;border-radius:0 0 11px 11px;background:rgba(9,27,50,.97); -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 14px 28px rgba(2,10,22,.55)} } /* ...and in a short one (a landscape phone): the diary steps aside and the head closes up, so the log keeps its room */ @container screen (max-height:300px){ .lc-diary{display:none !important} .lc{gap:5px} .screen .lc-sub{display:none} .screen .lc-head .lc-biz{font-size:14.5px} .lc-in{min-height:40px;padding-top:9px;padding-bottom:9px} .vbody.is-chat{padding-top:4px;padding-bottom:6px} } /* ---------- the motion switch ---------- */ .motion-toggle{display:inline-flex;align-items:center;justify-content:center;gap:7px;cursor:pointer;color:var(--ink2);background:transparent;flex:none; width:38px;height:38px;padding:0;font:600 13px/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;border:1px solid rgba(160,220,255,.32);border-radius:999px;transition:color .2s,border-color .2s,background-color .2s} .motion-toggle:hover{color:var(--ink);border-color:rgba(195,238,255,.65);background:rgba(140,205,255,.1)} .motion-toggle svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .motion-toggle .mt-play{display:none;fill:currentColor;stroke:none} .motion-toggle[aria-pressed="true"] .mt-pause{display:none} .motion-toggle[aria-pressed="true"] .mt-play{display:inline} .motion-toggle[aria-pressed="true"]{color:var(--ink);border-color:rgba(195,238,255,.65);background:rgba(140,205,255,.14)} /* pressed: motion is paused */ .mt-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} @media (prefers-reduced-motion:reduce){ .motion-toggle{display:none !important} } @media (hover:none){ .hint,.esc{display:none !important} } /* ---------- touch: every control is at least 44 px ---------- */ @media (pointer:coarse){ .back{min-height:44px} .crumb{display:flex;align-items:center;min-height:44px} .crumb a{display:inline-flex;align-items:center;min-height:44px;padding:0 6px} .crumb a:first-child,.crumb a:first-child + .sep{display:none} /* the parent and the leaf fit; Back goes home */ .crumb a,.crumb .sep{flex:none} .crumb b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* a flex row: the leaf is the part that gives way, with its dots */ .motion-toggle{width:44px;height:44px} .p-more{min-height:44px} .fine a{display:inline-flex;align-items:center;min-height:44px;padding:0 4px} .btn,.rd-doc .rd-btn{min-height:44px} .mi,.holo.in-sec .mi,.holo.at-home .mi{min-height:44px} .md-list a,.links a,.subcard{min-height:44px} .lc-over,.lc-act,.lc-chip,.lc-days button,.lc-diary > summary,.lc-in,.lc-send{min-height:44px} .lc-in{font-size:16px} /* 16px or more, or a phone zooms the page into the box */ } /* ---------- the bar gives way around the wordmark (it is in every view: see THE WORDMARK IS IN EVERY VIEW) ---------- The cell after the wordmark (Back, then the crumb, or a page's title in the reader) is a container of its own, so what it shows follows the room it really has, whatever the layout: the crumb steps aside under 150 px (a few letters of it are worse than none), the reader's title under 154, and under 80 Back keeps only its arrow (its name is still "Back" to assistive technology, and it stays as tall as before). The parts that do not give way are made to fit by the hologram's width, so that on every phone, tablet and desktop Back keeps its word: the bar closes up and the prototype chip compacts, then the wordmark steps down (to 18 px, and to 15 px, its floor, on the narrowest phones); a short landscape hologram drops "Book a demo" from the bar where it cannot fit (at 520 px or less at home, 620 in a section; an upright phone never shows it there). Only at 400% zoom does Back become its arrow. */ .hnav{container:hnav / inline-size} @container hnav (max-width:149.98px){ .holo .hnav .crumb{display:none} } @container hnav (max-width:153.98px){ .holo .hnav .rd-id{display:none} } @container hnav (max-width:79.98px){ .holo .hnav .back{width:44px;padding:0;gap:0;justify-content:center;font-size:0} } @container holo (max-width:360px){ .holo.in-sec .hbrand{padding-left:10px} .holo.in-sec .hnav{padding-left:6px;padding-right:4px} .holo.in-sec .hstat{padding-left:4px;padding-right:8px;gap:6px} .holo.in-sec .chip-proto{font-size:8.5px;padding:4px 5px;letter-spacing:.06em} } @container holo (max-width:330px){ .holo.in-sec .brand img{height:15px !important} } @container holo (max-width:300px){ .holo.in-sec .hbrand{padding-left:6px} .holo.in-sec .hnav{padding-left:4px;padding-right:2px} .holo.in-sec .hstat{padding-left:2px;padding-right:4px;gap:5px} .holo.in-sec .chip-proto{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} } @container holo (max-width:200px){ /* the tiniest hologram (400% zoom): the cell after the wordmark is always under 80 px here, so Back is its arrow */ .holo.in-sec .hbrand{padding-left:2px;padding-right:0} .holo.in-sec .hnav{padding-left:6px} .holo.in-sec .hnav .back{width:38px} } @container holo (min-width:481px) and (max-width:540px){ .holo.in-sec .hbrand{padding-left:12px} .holo.in-sec .brand img{height:18px !important} .holo.in-sec .chip-proto{font-size:8.5px;padding:4px 5px;letter-spacing:.06em} } @container holo (max-height:400px) and (min-aspect-ratio:3/2) and (max-width:640px){ .holo.in-sec .chip-proto{font-size:8.5px;padding:4px 5px;letter-spacing:.06em} } @container holo (max-height:400px) and (min-aspect-ratio:3/2) and (max-width:470px){ .holo.in-sec .hbrand{padding-left:8px} .holo.in-sec .brand img{height:15px !important} } @container holo (max-height:400px) and (min-aspect-ratio:3/2) and (max-width:620px){ .holo.in-sec .h-cta{display:none} } @container holo (max-height:400px) and (min-aspect-ratio:3/2) and (max-width:520px){ .holo .h-cta{display:none} } /* ---------- focus rings are drawn inside where a scroller or a clipped row would cut them ---------- */ .md-list a:focus-visible,.links a:focus-visible,.crumb a:focus-visible,.subcard:focus-visible,.contacts a:focus-visible,.holo.in-sec .mi:focus-visible{outline-offset:-2px} .lc-chip:focus-visible,.lc-act:focus-visible,.lc-days button:focus-visible{outline-offset:-2px} .os.is-wide .md .md-index{padding-inline:4px;margin-inline:-4px} .os.is-wide .md .screen .h2:focus-visible,.os.is-wide .md .screen h2:focus-visible{outline-offset:2px} /* ---------- the photo arrives with a fade; one that fails leaves the hologram whole ---------- Without the page script (no JavaScript: the