/* Nodtop. Colour is used only the way the app uses it: to show status. Identity: a night-blue page, cool mist for light bands, the Island's black capsule as the recurring shape, session dots as the visual language, and the system font. */ :root { --black: #000; /* the Island itself, and nothing else */ --night: #0a0e17; /* dark bands */ --night-2: #131a28; /* raised surfaces on night */ --night-3: #1d2638; /* controls on night */ --paper: #eef1f6; /* light bands */ --white: #fff; --ink: #121826; --steel: #556075; /* secondary text on paper */ --mist: #9ba5b8; /* secondary text on night */ --surface: var(--night-2); --hair: rgba(170, 190, 230, 0.14); --hair-light: #d6dce7; /* Status, from AgentIslandView.swift */ --run: #5cbdff; --wait: #ffbd3d; --done: #52d685; --deny: #ff7361; --allow: #338ff5; --listen: #73b8ff; --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif; --display: var(--font); --rounded: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --ease: cubic-bezier(0.28, 0.11, 0.32, 1); --spring: cubic-bezier(0.34, 1.32, 0.64, 1); --nav-h: 70px; --gutter: max(22px, env(safe-area-inset-left)); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: var(--nav-h); } body { margin: 0; background: var(--night); color: var(--white); font-family: var(--font); font-size: 17px; line-height: 1.5; letter-spacing: -0.012em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; } button { font: inherit; color: inherit; } sup { font-size: 0.55em; line-height: 0; vertical-align: 0.9em; margin-left: 0.1em; } sup a { text-decoration: none; color: var(--mist); } /* Neutral, since blue means working on this page. */ :focus-visible { outline: 2px solid rgba(255, 255, 255, 0.8); outline-offset: 3px; border-radius: 6px; } .band.light :focus-visible { outline-color: var(--ink); } .skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--white); color: var(--ink); padding: 8px 14px; border-radius: 8px; } .skip:focus { left: 8px; } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .wrap { width: min(1080px, 100% - 2 * var(--gutter)); margin-inline: auto; } .wrap.narrow { width: min(820px, 100% - 2 * var(--gutter)); } .center { text-align: center; } /* Type */ .display, .headline, .title, .cap h2, .step h3 { margin: 0; font-family: var(--display); font-weight: 700; letter-spacing: -0.028em; } .display { font-size: clamp(46px, 7.2vw, 100px); line-height: 0.98; } /* Headlines break into even lines, so a single word never sits alone; body text avoids orphans. */ .display .line, .headline, .title, .cap h2, .step h3, .g h3, .c-grid h3 { text-wrap: balance; } .lede, .aside, .cap p, .step p, .hl-card > p { text-wrap: pretty; } .headline { font-size: clamp(38px, 5.4vw, 72px); line-height: 1.02; } .title { font-size: clamp(32px, 4vw, 52px); line-height: 1.05; } .line { display: block; } .lede { margin: 20px auto 0; max-width: 34em; font-size: clamp(19px, 1.6vw, 22px); line-height: 1.45; font-weight: 450; letter-spacing: -0.01em; color: var(--mist); } .aside { max-width: 40em; margin: 40px 0 0; color: var(--mist); font-size: 17px; } .aside.center { margin-inline: auto; } /* Buttons */ .pill { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 22px; border: 0; border-radius: 980px; background: #f2f5fa; color: var(--ink); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6), 0 1px 0 rgba(255, 255, 255, 0.08); font-size: 17px; font-weight: 600; letter-spacing: -0.01em; text-decoration: none; cursor: pointer; transition: background 0.2s, transform 0.2s var(--ease); } .pill:hover { background: #fff; } .pill:active { transform: scale(0.97); } .band.light .pill { background: var(--ink); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); } .pill-small { min-height: 34px; padding: 0 15px; font-size: 14px; } .link-play { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 6px; border: 0; background: none; cursor: pointer; font-size: 17px; font-weight: 500; color: #dfe5f0; } .link-play:hover { text-decoration: underline; text-underline-offset: 4px; } .play-ring { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid currentColor; position: relative; } .play-ring::after { content: ""; position: absolute; left: 9.5px; top: 6.5px; border-left: 8px solid currentColor; border-top: 5.5px solid transparent; border-bottom: 5.5px solid transparent; } /* Sound: off until clicked. The speaker shows waves while on and a slash while off. */ .snd-icon { width: 20px; height: 20px; display: block; } /* The speaker is drawn through , whose copy only page variables can reach, so the state is passed down as --wave and --slash. */ .spk-wave { opacity: var(--wave, 0); transform: scale(calc(0.6 + 0.4 * var(--wave, 0))); transform-origin: 11px 12px; transition: opacity 0.25s, transform 0.4s var(--spring); } .spk-slash { opacity: var(--slash, 1); transition: opacity 0.2s; } .snd-icon { --wave: 0; --slash: 1; } .sound-on .snd-icon { --wave: 1; --slash: 0; } .snd-btn { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; color: #c3cad8; cursor: pointer; transition: color 0.2s, background 0.2s; } .snd-btn:hover { color: #fff; background: rgba(255, 255, 255, 0.07); } .sound-on .snd-btn { color: #fff; } .snd-ring { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid currentColor; } .snd-ring .snd-icon { width: 16px; height: 16px; margin-left: 1px; } /* Off, it names what it does; on, it says so. Only the showing label takes space, so the capsule fits it. (Collapsing the other with max-width still left its width in Safari.) */ .snd-text { display: inline-block; white-space: nowrap; } .snd-t-on, .sound-on .snd-t-off { display: none; } .sound-on .snd-t-on { display: inline; animation: sndIn 0.25s var(--ease); } .snd-t-off { animation: sndIn 0.25s var(--ease); } @keyframes sndIn { from { opacity: 0; } } /* The hero's sound switch: a quiet capsule, since it adds to the page rather than leading it. */ .snd-hero { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 20px 0 14px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 99px; background: rgba(255, 255, 255, 0.05); font-size: 16px; font-weight: 500; line-height: 1; color: #dfe5f0; cursor: pointer; transition: background 0.2s, border-color 0.2s, transform 0.2s var(--ease); } /* Optically centred: the label's capitals sit a point high of the box's middle. */ .snd-hero .snd-text { padding-bottom: 1px; } .snd-hero:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.26); } .snd-hero:active { transform: scale(0.97); } .snd-hero .snd-ring { border: 0; width: 22px; height: 22px; } .snd-hero .snd-ring .snd-icon { width: 18px; height: 18px; } .sound-on .snd-hero { color: #fff; border-color: rgba(255, 255, 255, 0.3); } html:not(.js) [data-sound] { display: none; } /* Nav */ /* The menu is a floating black capsule, the Island itself. It stays black over light bands too. */ .nav { position: fixed; z-index: 50; top: 10px; left: 50%; translate: -50% 0; width: max-content; max-width: calc(100% - 20px); height: 50px; display: flex; align-items: center; gap: 6px; padding: 0 7px 0 16px; border-radius: 25px; background: rgba(0, 0, 0, 0.9); color: #fff; -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09), 0 12px 32px rgba(4, 8, 16, 0.35); } .nav-name { display: flex; align-items: center; gap: 9px; margin-right: 14px; min-height: 44px; font: 600 17px/1 var(--display); letter-spacing: -0.02em; text-decoration: none; white-space: nowrap; } .logo { width: 30px; height: 11px; overflow: visible; } .logo circle { stroke-width: 1.8; } .l-run { fill: none; stroke: var(--run); } .l-wait { fill: var(--wait); animation: pulse 0.9s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; } .l-done { fill: none; stroke: var(--done); } .nav-links { display: flex; gap: 2px; margin-right: 8px; } .nav-links a { position: relative; display: grid; place-items: center; min-height: 44px; padding: 0 11px; font-size: 14px; color: #c3cad8; text-decoration: none; border-radius: 99px; white-space: nowrap; transition: color 0.2s, background 0.2s; } .nav-links a:hover { color: #fff; background: rgba(255, 255, 255, 0.07); } .nav-links a[aria-current] { color: #fff; } /* The section you're in gets a small blue "working" dot, the way the Island marks a session. */ .nav-links a::after { content: ""; position: absolute; left: 50%; bottom: 6px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--run); transform: scale(0); transition: transform 0.4s var(--spring); } .nav-links a[aria-current]::after { transform: scale(1); } .nav-cta { margin-left: 4px; } /* Session dots used as icons: a ring with a code inside, coloured only by status. */ .ldot { --c: #6f7a90; flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 1.8px var(--c); font: 700 10px/1 var(--rounded); letter-spacing: 0; color: #fff; transition: box-shadow 0.3s, background 0.3s, color 0.3s; } .ldot[data-s="done"] { --c: var(--done); } .ldot[data-s="waiting"] { --c: var(--wait); background: var(--wait); color: #000; animation: pulse 0.8s ease-in-out infinite alternate; } /* Language capsule, and the card that opens out of it. */ .lang-menu, .nav-menu { position: static; } .lang-cap, .nav-menu summary { list-style: none; display: flex; align-items: center; gap: 6px; min-height: 44px; min-width: 44px; padding: 0 9px 0 9px; border-radius: 99px; cursor: pointer; } .lang-cap::-webkit-details-marker, .nav-menu summary::-webkit-details-marker { display: none; } .lang-cap:hover, .nav-menu summary:hover, .lang-menu[open] .lang-cap, .nav-menu[open] summary { background: rgba(255, 255, 255, 0.08); } .lang-chev { width: 7px; height: 7px; margin: -3px 2px 0; border-right: 1.6px solid #9ba5b8; border-bottom: 1.6px solid #9ba5b8; transform: rotate(45deg); transition: transform 0.4s var(--spring); } .lang-menu[open] .lang-chev { transform: translateY(3px) rotate(-135deg); } .lang-card, .nav-card { position: absolute; top: calc(100% + 8px); right: 0; width: 264px; padding: 6px; border-radius: 24px; background: #000; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09), 0 24px 60px rgba(4, 8, 16, 0.5); transform-origin: 78% 0; animation: cardgrow 0.6s var(--spring) both; } .lang-menu.closing .lang-card, .nav-menu.closing .nav-card { animation: cardshrink 0.22s var(--ease) both; } /* The card grows out of the capsule: it starts as a capsule-sized pill at its top right corner, then opens down and to the left, like the Island opening into a card. */ @keyframes cardgrow { from { opacity: 0.4; transform: translateY(-8px); clip-path: inset(0 0 calc(100% - 44px) calc(100% - 96px) round 22px); } 40% { opacity: 1; } to { clip-path: inset(0 round 24px); } } @keyframes cardshrink { to { opacity: 0; transform: translateY(-8px); clip-path: inset(0 0 calc(100% - 44px) calc(100% - 96px) round 22px); } } @keyframes cardin { from { opacity: 0; transform: translateY(-10px) scale(0.86, 0.6); } } @keyframes cardout { to { opacity: 0; transform: translateY(-6px) scale(0.94, 0.8); } } /* Rows arrive one after another as the card opens, and leave together. */ .lang-card > a, .nav-card > a { position: relative; z-index: 1; animation: rowin 0.5s var(--spring) both; animation-delay: calc(80ms + var(--i, 0) * 26ms); } .closing .lang-card > a, .closing .nav-card > a { animation: rowout 0.12s var(--ease) both; } @keyframes rowin { from { opacity: 0; transform: translateY(-6px); } } @keyframes rowout { to { opacity: 0; } } .lang-card > a:nth-of-type(2), .nav-card > a:nth-of-type(2) { --i: 1; } .lang-card > a:nth-of-type(3), .nav-card > a:nth-of-type(3) { --i: 2; } .lang-card > a:nth-of-type(4), .nav-card > a:nth-of-type(4) { --i: 3; } .lang-card > a:nth-of-type(5), .nav-card > a:nth-of-type(5) { --i: 4; } .lang-card > a:nth-of-type(6), .nav-card > a:nth-of-type(6) { --i: 5; } .lang-card > a:nth-of-type(7), .nav-card > a:nth-of-type(7) { --i: 6; } .lang-card > a:nth-of-type(8), .nav-card > a:nth-of-type(8) { --i: 7; } .lang-row { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 4px 12px 4px 9px; border-radius: 18px; text-decoration: none; font-size: 15px; color: #dfe5f0; transition: color 0.2s; } .lang-row:hover, .lang-row:focus-visible { background: rgba(255, 255, 255, 0.08); color: #fff; } .lang-row:hover .ldot:not([data-s]), .lang-row.lit .ldot:not([data-s]) { --c: var(--run); background: rgba(80, 160, 255, 0.16); } /* With script, one highlight slides between rows instead of each row lighting up on its own. */ .lang-glow { position: absolute; z-index: 0; left: 6px; right: 6px; top: 0; height: 44px; border-radius: 18px; background: rgba(255, 255, 255, 0.09); opacity: 0; pointer-events: none; transition: transform 0.38s var(--spring), height 0.38s var(--spring), width 0.38s var(--spring), opacity 0.2s; } .has-glow > a:hover, .has-glow > a:focus-visible { background: none; } .has-glow > a:focus-visible { outline-offset: -2px; } /* The current language's green dot breathes once as the card opens. */ .lang-menu[open]:not(.closing) .lang-row[aria-current] .ldot { animation: breathe 1.3s ease-out 0.3s both; } @keyframes breathe { from { box-shadow: inset 0 0 0 1.8px var(--c), 0 0 0 0 rgba(82, 214, 133, 0.55); } to { box-shadow: inset 0 0 0 1.8px var(--c), 0 0 0 11px rgba(82, 214, 133, 0); } } .lang-row[aria-current] { color: #fff; font-weight: 600; } .lname { flex: 1; } .lcheck { width: 12px; height: 7px; margin: -3px 2px 0 0; border-left: 2px solid var(--done); border-bottom: 2px solid var(--done); transform: rotate(-45deg); } /* Small screens: the section links fold into a card under the capsule. */ .nav-menu { display: none; } .nav-menu summary { justify-content: center; flex-direction: column; gap: 5px; padding: 0; width: 44px; } .nav-menu summary i { display: block; width: 16px; height: 1.8px; border-radius: 1px; background: #fff; transition: transform 0.4s var(--spring); } .nav-menu[open] summary i:first-child { transform: translateY(3.4px) rotate(45deg); } .nav-menu[open] summary i:last-child { transform: translateY(-3.4px) rotate(-45deg); } .nav-card { left: 0; width: auto; display: grid; padding: 10px; } .nav-card a:not(.pill) { display: flex; align-items: center; min-height: 48px; padding: 0 14px; border-radius: 16px; font: 600 20px/1 var(--display); letter-spacing: -0.02em; text-decoration: none; } .nav-card a:not(.pill):hover { background: rgba(255, 255, 255, 0.08); } .nav-card .pill { margin: 8px 4px 4px; } @media (max-width: 900px) { .nav { width: calc(100% - 20px); padding-left: 14px; } .nav-name { margin-right: auto; } .nav-links { display: none; } .nav-menu { display: block; } .lang-card { left: 0; width: auto; display: grid; grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .nav-cta { display: none; } } /* A first-visit offer to switch language, as a small Island notification under the menu. */ .lang-hint { position: fixed; z-index: 49; top: 68px; left: 50%; translate: -50% 0; max-width: calc(100% - 20px); display: flex; align-items: center; gap: 4px; padding: 4px 4px 4px 6px; border-radius: 99px; background: #000; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09), 0 16px 40px rgba(4, 8, 16, 0.45); transform-origin: 50% 0; animation: cardin 0.6s var(--spring) both; } .lang-hint.closing { animation: cardout 0.2s var(--ease) both; } .lang-hint a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px 0 4px; font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; } .lang-hint button { width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; color: #9ba5b8; font-size: 22px; line-height: 1; cursor: pointer; } .lang-hint button:hover { background: rgba(255, 255, 255, 0.08); color: #fff; } /* Pinned scenes */ .scene { position: relative; } .stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; } .hero { height: 600vh; } .airnod { height: 460vh; } /* Hero */ /* Night, with a faint grid of dots that fades out toward the edges. */ .hero .stage { background: radial-gradient(110% 62% at 50% 100%, #151c2b 0%, var(--night) 62%); } .hero .stage::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(circle, rgba(170, 190, 230, 0.16) 1px, transparent 1.4px); background-size: 26px 26px; background-position: center top; -webkit-mask-image: radial-gradient(75% 60% at 50% 30%, #000 10%, transparent 75%); mask-image: radial-gradient(75% 60% at 50% 30%, #000 10%, transparent 75%); } .hero-copy { position: absolute; z-index: 3; left: 0; right: 0; top: calc(var(--nav-h) + 6.5vh); padding: 0 var(--gutter); text-align: center; will-change: transform, opacity; } .hero-copy .lede { max-width: 37em; margin-inline: auto; text-wrap: balance; } /* Japanese breaks between phrases, not inside a word like デスク. */ :lang(ja) .hero-copy .lede { word-break: auto-phrase; } .ctas { margin-top: 28px; display: flex; gap: 22px; justify-content: center; align-items: center; flex-wrap: wrap; } /* --lid-r is the corner radius of the lid and of the deck's front, so closed they make one outline. */ .mac { position: absolute; left: 50%; top: 0; width: var(--mac-w, 900px); margin-left: calc(var(--mac-w, 900px) / -2); z-index: 1; --lid-r: calc(var(--mac-w, 900px) * 0.026); } /* will-change keeps the laptop's painted layers while the camera zooms, rather than repainting them at every new scale: in Chrome that took raster from about 550 ms to 50 ms over the zoom, and the drawing is repainted sharp once it stops. */ .mac-move { position: relative; perspective: 4600px; perspective-origin: 50% 30%; transform-origin: 50% 0; transform-style: preserve-3d; will-change: transform; } /* The lid is as deep as the deck (0.69 of the width), so closed it covers the deck to its front edge. */ .lid { position: relative; height: calc(var(--mac-w, 900px) * 0.69); transform-origin: 50% 100%; transform-style: preserve-3d; } .lid-front, .lid-back { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; border-radius: var(--lid-r) var(--lid-r) 4px 4px; } /* The back is turned over, so its top is the hinge. Rounded all round, it has the lid's rounded front corners when closed, the same as the layers under it and the deck's front. */ .lid-back { border-radius: var(--lid-r); } .lid-front { background: #050506; padding: var(--mac-bezel, calc(var(--mac-w, 900px) * 0.008)); box-shadow: 0 0 0 1px #303136, 0 -3px 0 #34353a; opacity: clamp(0, calc((var(--lid-open, 0) - .08) * 6), 1); } /* Space black aluminium, lit from the upper left like the screen's glass. Seen closed, the lid-back's top is the hinge and its left is the left. The anodised top is a touch brighter toward the light, with one soft sheen raking across it, and only the edges facing the light catch it (::before). */ .lid-back { transform: rotateX(180deg) translateZ(var(--lid-t)); background: linear-gradient(180deg, transparent 94%, rgba(0, 0, 0, 0.28)), radial-gradient(70% 130% at 88% 0%, rgba(255, 255, 255, 0.025), transparent 70%), radial-gradient(120% 160% at 12% -10%, #3c3d42 0%, #2e2f33 42%, #242529 72%, #1d1e21 100%); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.55); } .lid-back::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 1px 0 0 rgba(255, 255, 255, 0.13), inset -1px 0 0 rgba(255, 255, 255, 0.035); -webkit-mask-image: radial-gradient(95% 140% at 0% 0%, #000 0%, rgba(0, 0, 0, 0.55) 38%, rgba(0, 0, 0, 0.12) 72%, rgba(0, 0, 0, 0.06) 100%); mask-image: radial-gradient(95% 140% at 0% 0%, #000 0%, rgba(0, 0, 0, 0.55) 38%, rgba(0, 0, 0, 0.12) 72%, rgba(0, 0, 0, 0.06) 100%); } .lid-back::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(106deg, transparent 6%, rgba(255, 255, 255, 0.07) 22%, rgba(255, 255, 255, 0.025) 36%, transparent 50%); } /* The lid's thickness: the back sits --lid-t behind the screen, and thin layers in the lid's own rounded shape fill the gap, so its edge follows the corners as the lid turns. Only their rims show: lit along the lid's front edge (the layers' top), dark down the sides. */ .lid { --lid-t: calc(var(--mac-w, 900px) * 0.0038); } .lid-layer { position: absolute; inset: 0; border-radius: var(--lid-r); background: linear-gradient(90deg, rgba(255, 255, 255, 0.05), transparent 45%), linear-gradient(180deg, #45464c, #2a2b2f 2.5%, #1f2023 30%); transform: translateZ(calc(var(--lid-t) * var(--k) / -4)); pointer-events: none; } [data-display="display"] .lid-layer { display: none; } .screen { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: calc(var(--mac-w, 900px) * 0.018) calc(var(--mac-w, 900px) * 0.018) 2px 2px; background: linear-gradient(125deg, #202125, #08090b 45%, #121316 90%); container-type: inline-size; } /* main.js fades the wallpaper, menu bar and windows in as the screen wakes, and dims and softens them during the zoom, writing each one's opacity and filter directly so nothing else on the screen restyles. */ .wall { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.15), transparent 42%, rgba(0,0,0,.1)), url("assets/hero-wallpaper.jpg") center / cover, #27272a; } .menubar { position: absolute; inset: 0 0 auto; height: 2.15cqw; background: rgba(20, 20, 26, 0.55); display: flex; gap: 1.4cqw; padding-left: 1.6cqw; align-items: center; } .menubar span { width: 2.6cqw; height: 0.5cqw; border-radius: 1cqw; background: rgba(255, 255, 255, 0.45); } .menubar span:first-child { width: 1cqw; height: 1cqw; border-radius: 50%; } .term { position: absolute; border-radius: 1cqw; background: rgba(14, 14, 18, 0.86); box-shadow: 0 1.5cqw 4cqw rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.08); font-family: var(--mono); font-size: 1.45cqw; line-height: 1.75; color: #d6d6dc; padding: 0 1.8cqw 1.4cqw; } .term-bar { display: flex; align-items: center; gap: 0.6cqw; height: 3cqw; margin: 0 -1.8cqw 0.8cqw; padding: 0 1.2cqw; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .term-bar i { width: 0.9cqw; height: 0.9cqw; border-radius: 50%; background: #45464c; } .term-bar b { margin: 0 auto; font-family: var(--font); font-weight: 500; font-size: 1.2cqw; color: #8d8d95; transform: translateX(-1.5cqw); } .term p { margin: 0; white-space: nowrap; } .term em { font-style: normal; color: var(--run); margin-right: 0.6cqw; } .term .dim { color: #7c7c85; } .term em { color: #e9e9ee; } .term .think em { color: var(--run); animation: twinkle 1.6s ease-in-out infinite; } .term .think { color: var(--run); } @keyframes twinkle { 50% { opacity: 0.35; } } .prompt { margin-top: 0.9cqw; padding: 0.5cqw 1cqw; border: 1px solid #4a4a52; border-radius: 0.7cqw; color: #9a9aa3; } .caret { display: inline-block; width: 0.75cqw; height: 1.5cqw; vertical-align: -0.25cqw; background: #c9c9d1; animation: caret 1.1s steps(1) infinite; } @keyframes caret { 50% { opacity: 0; } } .ask { margin-top: 0.6cqw; padding: 0.6cqw 1cqw; border: 1px solid rgba(255, 189, 61, 0.55); border-radius: 0.7cqw; } .ask b { color: #fff; font-weight: 500; } .ask .sel { color: var(--wait); } .term-a { left: 4%; top: 13%; width: 46%; height: 50%; } .term-b { left: 52%; top: 21%; width: 44%; height: 42%; } .term-c { left: 26%; top: 60%; width: 46%; height: 34%; } /* The deck lies flat, reaching toward you from the hinge, with its front edge facing you. */ .deck { position: absolute; left: 0; right: 0; top: calc(100% + 1px); height: calc(var(--mac-w, 900px) * 0.69); transform-origin: 50% 0; transform: rotateX(90deg); transform-style: preserve-3d; border-radius: 0 0 var(--lid-r) var(--lid-r); background: linear-gradient(180deg, #202125 0%, #303136 18%, #393a3f 73%, #2b2c31 100%); box-shadow: inset 0 1px 0 #63646b, inset 0 0 0 1px #48494f, inset 0 -3px 6px rgba(255, 255, 255, 0.06); } .hinge { position: absolute; left: 13%; right: 13%; top: calc(100% - var(--mac-w, 900px) * 0.004); height: calc(var(--mac-w, 900px) * 0.012); transform: translateZ(-2px); background: linear-gradient(180deg, #0a0b0c, #303136 45%, #101113 100%); border-radius: 1px; box-shadow: inset 0 1px rgba(255,255,255,.12); opacity: clamp(0, calc(var(--lid-open, 0) * 4), 1); } .hinge i { display: none; } /* Closed, a faint light runs along the hinge, so the lid reads as something about to open. */ .hinge-light { position: absolute; left: 16%; right: 16%; top: calc(var(--lid-h, 0px) - 2px); height: 4px; border-radius: 50%; background: radial-gradient(closest-side, rgba(200, 216, 255, 0.55), transparent); filter: blur(2px); opacity: calc(1 - var(--lid-open, 0) * 3); pointer-events: none; } [data-display="display"] .hinge-light { display: none; } .deck-reflection { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: inherit; } /* Its own layer, so moving it as the lid opens doesn't repaint the deck under its blur. */ .deck-reflection::after { content: ""; position: absolute; width: 62%; height: 86%; left: 18%; top: -55%; opacity: calc(var(--lid-open, 0) * .2); transform: translateY(calc(var(--lid-open, 0) * 78%)) skewX(-18deg); background: linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,0) 70%); filter: blur(12px); will-change: transform, opacity; } /* A real MacBook Pro layout, built by main.js: a short function row, then five rows of keys. */ .kbd { position: absolute; left: 12.5%; right: 12.5%; top: 4%; height: 45%; padding: calc(var(--mac-w, 900px) * 0.006); border-radius: 6px; background: #151517; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.8); display: flex; flex-direction: column; gap: 1.6%; } .kbd-row { flex: 1 1 0; display: flex; gap: 0.55%; } .kbd-row.fn { flex-grow: 0.62; } .kbd-row span { flex: var(--w, 1) 1 0; min-width: 0; border-radius: 3px; background: linear-gradient(180deg, #252529, #0b0b0c); box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.17); position: relative; } .kbd-row span.tid { background: radial-gradient(circle at 50% 50%, #1a1a1c 55%, #2a2b2f 58%, #0c0c0d 62%); } /* The backlight: the same keys again on top, with only their glow and legends, painted once. As the screen wakes main.js fades this one layer in, rather than repainting every key on every frame. */ .kbd-lit { position: absolute; inset: 0; padding: inherit; display: flex; flex-direction: column; gap: 1.6%; opacity: 0; will-change: opacity; pointer-events: none; } .kbd-lit .kbd-row span { background: none; box-shadow: 0 0 7px rgba(235, 239, 255, 0.4); } .kbd-lit .kbd-row span.gap { visibility: hidden; } .kbd-lit .kbd-row span::after { content: attr(data-key); position: absolute; top: 13%; left: 15%; color: rgba(237, 240, 246, 0.78); font: 500 clamp(3px, .62cqw, 7px)/1 var(--font); text-shadow: 0 0 4px rgba(255, 255, 255, 0.48); white-space: nowrap; } .grille { position: absolute; top: 4%; width: 8.5%; height: 45%; background-image: radial-gradient(circle, #121214 0.9px, transparent 1.1px); background-size: 6px 6px; opacity: 0.9; } .grille-l { left: 2.8%; } .grille-r { right: 2.8%; } .pad { position: absolute; left: 30%; right: 30%; top: 52%; height: 41%; border-radius: 10px; background: linear-gradient(150deg, #36373c, #2a2b2f 70%); box-shadow: inset 0 0 0 1px #505158, inset 0 2px 5px rgba(0,0,0,.13); } /* The one front face of the closed laptop: the lid has no front edge of its own, so no second shape with different corners peeks out below this one. The deck's front corners curve back toward the hinge, and a corner that turns away from you looks a little narrower and a little higher. So this flat face stops where the curved corner's outer edge appears (--corner-in), and a shoulder at each end carries its top edge up to meet the lid's rounded corner (--shoulder): a quarter ellipse as wide as the corner and as tall as it looks closed. main.js works both out from the perspective. */ .lip { position: absolute; left: var(--corner-in, 0px); right: var(--corner-in, 0px); top: 100%; height: calc(var(--mac-w, 900px) * 0.026); transform-origin: 50% 0; transform: rotateX(-90deg); border-radius: 0 0 calc(var(--mac-w, 900px) * 0.022) calc(var(--mac-w, 900px) * 0.022); background: linear-gradient(180deg, #a4a5ab 0%, #77787e 10%, #38393e 32%, #1c1d20 70%, #090a0b 100%); } /* The outline comes from main.js (--shoulder-path). The camera rises as the lid opens, and from higher up the corner rises 0.45 less. The edge's highlight fades as it turns away toward the side, which carries only a faint line, so the end reads as round rather than as a hook. The right one is the left one mirrored, a touch dimmer, away from the light. Each stands 0.8 px taller at its tip than the corner, tapering to nothing at the front, so it covers the deck's own outline there: two edges on one curve would show as a double line with a seam between. */ .lip::before, .lip::after { content: ""; position: absolute; bottom: 100%; left: 0; width: calc(var(--lid-r) - var(--corner-in, 0px)); height: calc(var(--shoulder, 0px) + 0.8px); transform-origin: 50% 100%; transform: scaleY(calc(1 - var(--lid-open, 0) * 0.45)); clip-path: var(--shoulder-path, none); background: linear-gradient(90deg, #5d5e64, #8e8f95 45%, #a4a5ab 85%); } .lip::after { left: auto; right: 0; transform: scale(-1, calc(1 - var(--lid-open, 0) * 0.45)); background: linear-gradient(90deg, #55565c, #86878d 45%, #9d9ea4 85%); } .scoop { position: absolute; left: 50%; top: 0; width: 14%; height: 48%; transform: translateX(-50%); border-radius: 0 0 16px 16px / 0 0 100% 100%; background: linear-gradient(180deg, #141518, #3d3e43); box-shadow: inset 0 1px 2px rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255,.12); } /* The Island: one shape that grows, sized in points through --u (pixels per point). Values come from IslandLayout.swift and IslandMotion.swift in the app: Dynamic Island: a 58.5 x 32 pt pill floating 8 pt below the top, capsule radius 16, card radius 24. Notch: a 185 x 32 pt cutout on the top edge, bottom radius 14, card bottom radius 24. External display: no cutout, so a pill with a 12 pt gap floats 4 pt under a 24 pt menu bar. Either way, each side holds 76 pt of dots, and the card is a 420 pt panel. */ :root, [data-display="island"] { --cut-w: 58.5; --cut-top: 8; --cap-r: 16; --card-top-r: 24; --notch-r: 16; } [data-display="notch"] { --cut-w: 185; --cut-top: 0; --cap-r: 14; --card-top-r: 0; --notch-r: 14; } [data-display="display"] { --cut-w: 12; --cut-top: 8; --cap-r: 16; --card-top-r: 24; --notch-r: 16; } /* Only the hero draws a menu bar above the pill. */ [data-display="display"] .hero { --cut-top: 28; } html[data-display="island"] [data-only]:not([data-only="island"]), html[data-display="notch"] [data-only]:not([data-only="notch"]), html[data-display="display"] [data-only]:not([data-only="display"]) { display: none; } .island { --u: 1px; --side: 76; position: relative; width: calc(var(--u) * 420); height: calc(var(--u) * 260); pointer-events: none; } .isl-shape { position: absolute; left: 50%; top: calc(var(--u) * var(--cut-top)); transform: translateX(-50%); width: calc(var(--u) * var(--cut-w)); height: calc(var(--u) * 32); background: #000; border-radius: calc(var(--u) * var(--card-top-r) * 0.667) calc(var(--u) * var(--card-top-r) * 0.667) calc(var(--u) * var(--notch-r)) calc(var(--u) * var(--notch-r)); transition: width 0.55s var(--spring), height 0.6s var(--spring), border-radius 0.5s var(--ease), box-shadow 0.5s; } /* The camera behind the glass, at the cutout's centre. */ .isl-shape::after { content: ""; position: absolute; left: 50%; top: calc(var(--u) * 16); width: calc(var(--u) * 7); height: calc(var(--u) * 7); margin: calc(var(--u) * -3.5); border-radius: 50%; background: radial-gradient(circle at 35% 35%, #2a3a5a 0 18%, #0b0f18 45%, #050608 70%); box-shadow: 0 0 0 calc(var(--u) * 1) #0d0d10; opacity: 0.9; transition: opacity 0.3s; } [data-display="island"] .isl-shape, [data-display="display"] .isl-shape { border-radius: calc(var(--u) * 16); } /* A display without a cutout has no camera behind the glass. */ [data-display="display"] .isl-shape::after { display: none; } .island:not([data-state="notch"]) .isl-shape { width: calc(var(--u) * (var(--cut-w) + 2 * var(--side))); } .island[data-state="card"] .isl-shape, .island[data-state="approving"] .isl-shape, .island[data-state="allowed"] .isl-shape { width: calc(var(--u) * 420); height: calc(var(--u) * (var(--cut-top) + var(--card-h, 192))); border-radius: calc(var(--u) * var(--card-top-r)) calc(var(--u) * var(--card-top-r)) calc(var(--u) * 24) calc(var(--u) * 24); box-shadow: 0 calc(var(--u) * 18) calc(var(--u) * 60) rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.07); } .island[data-state="card"] .isl-shape::after, .island[data-state="approving"] .isl-shape::after, .island[data-state="allowed"] .isl-shape::after { opacity: 0.35; } /* Each side is 76 pt. The app lifts content on a notch because its black runs on into the bezel above; the page draws no bezel there, so both shapes centre their content (6 pt above and below). */ .isl-side { position: absolute; top: calc(var(--u) * (var(--cut-top) + 6)); width: calc(var(--u) * var(--side)); display: flex; justify-content: center; gap: calc(var(--u) * 5); transition: opacity 0.3s; } .isl-side.left { right: calc(50% + var(--u) * var(--cut-w) / 2); } .isl-side.right { left: calc(50% + var(--u) * var(--cut-w) / 2); } .island[data-state="card"] .isl-side, .island[data-state="approving"] .isl-side, .island[data-state="allowed"] .isl-side { opacity: 0; transition-duration: 0.15s; } .dot { --c: var(--mist); position: relative; width: calc(var(--u) * 20); height: calc(var(--u) * 20); display: block; transform: scale(0); opacity: 0; transition: transform 0.6s var(--spring), opacity 0.3s; transition-delay: calc(0.18s + var(--i, 0) * 80ms); } .island:not([data-state="notch"]) .dot { transform: scale(1); opacity: 1; } .island[data-state="notch"] .dot { transition-delay: 0s; transition-duration: 0.2s; } .dot svg { width: 100%; height: 100%; overflow: visible; display: block; } .dot .d-fill { fill: var(--c); opacity: 0; transition: opacity 0.35s, fill 0.35s; } .dot .d-track { fill: none; stroke: var(--c); stroke-width: 1.9; opacity: 0.28; transition: stroke 0.35s, opacity 0.35s; } .dot .d-arc { fill: none; stroke: var(--run); stroke-width: 1.9; stroke-linecap: round; stroke-dasharray: 28 100; transform-origin: 10px 10px; animation: spin 1.2s linear infinite; transition: opacity 0.3s; } .dot text { font-family: var(--rounded); font-weight: 700; font-size: 8.4px; fill: #fff; text-anchor: middle; transition: fill 0.35s, opacity 0.3s; } .dot .d-check { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset 0.45s var(--ease) 0.15s, opacity 0.2s; } .dot[data-s="running"] { --c: var(--run); } .dot[data-s="waiting"] { --c: var(--wait); animation: pulse 0.8s ease-in-out infinite alternate; } .dot[data-s="waiting"] .d-fill { opacity: 1; } .dot[data-s="waiting"] .d-track { opacity: 0; } .dot[data-s="waiting"] text { fill: #000; } .dot[data-s="done"] { --c: var(--done); } .dot[data-s="done"] .d-track { opacity: 1; } .dot[data-s="idle"] .d-track { opacity: 0.55; } .dot[data-s="idle"] text { fill: var(--mist); } .dot:not([data-s="running"]) .d-arc { opacity: 0; } /* A Codex square doesn't spin: its arc runs along the square's edge. */ /* Dash and gap add up to the outline's length (100), so the arc laps without pausing at the start. */ .dot.sq .d-arc { stroke-dasharray: 28 72; animation: arcrun 1.6s linear infinite; } @keyframes arcrun { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -100; } } /* A session that was just answered shows a check for a moment, then its letter again. */ .dot.checked text { opacity: 0; } /* Context water: coloured by level, with the letter in black where the water covers it. */ .dot .d-water { transition: opacity 0.3s; } .dot .d-under { fill: #000; } .dot[data-s="waiting"] .d-water, .dot[data-s="waiting"] .d-under, .dot[data-s="failed"] .d-water, .dot[data-s="failed"] .d-under, .dot.checked .d-under { opacity: 0; } /* A usage gauge in the agent's shape, with its number. */ .gauge { display: flex; align-items: center; gap: calc(var(--u) * 3); height: calc(var(--u) * 20); transform: scale(0); opacity: 0; transition: transform 0.6s var(--spring), opacity 0.3s; transition-delay: calc(0.18s + var(--i, 0) * 80ms); } .island:not([data-state="notch"]) .gauge { transform: scale(1); opacity: 1; } .island[data-state="notch"] .gauge { transition-delay: 0s; transition-duration: 0.2s; } .gauge svg { width: calc(var(--u) * 15); height: calc(var(--u) * 15); overflow: visible; } .gauge path { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .gauge .g-track { stroke: rgba(255, 255, 255, 0.14); } .gauge b { font: 600 calc(var(--u) * 11.5) / 1 var(--rounded); color: #fff; font-variant-numeric: tabular-nums; letter-spacing: 0; } .dot.checked .d-check { opacity: 1; stroke-dashoffset: 0; } @keyframes spin { to { transform: rotate(360deg); } } @keyframes pulse { from { scale: 1; } to { scale: 1.12; } } /* The approval card inside the Island, laid out like AgentIslandView's card. */ .isl-card { position: absolute; left: 50%; top: calc(var(--u) * (var(--cut-top) + 18)); width: calc(var(--u) * 420); padding: 0 calc(var(--u) * 18); transform: translateX(-50%) translateY(calc(var(--u) * -10)) scale(0.96); opacity: 0; font-size: calc(var(--u) * 12); letter-spacing: 0; line-height: 1.3; color: #fff; transition: opacity 0.18s, transform 0.4s var(--ease); } .island[data-state="card"] .isl-card, .island[data-state="approving"] .isl-card, .island[data-state="allowed"] .isl-card { opacity: 1; transform: translateX(-50%); transition: opacity 0.35s 0.2s, transform 0.55s var(--spring) 0.12s; } .ic-head { display: flex; align-items: center; gap: calc(var(--u) * 8); font-size: calc(var(--u) * 15); } .ic-head b { font-weight: 600; } .ic-alert { width: calc(var(--u) * 17); height: calc(var(--u) * 17); flex: none; border-radius: 50%; background: var(--wait); color: #000; font: 800 calc(var(--u) * 11.5) / 1 var(--rounded); font-style: normal; display: grid; place-items: center; } .ic-status { margin-left: auto; color: var(--wait); font-weight: 600; font-size: calc(var(--u) * 13); white-space: nowrap; } .ic-where { display: flex; align-items: center; gap: calc(var(--u) * 5); margin-top: calc(var(--u) * 7); color: #9a9a9a; font-size: calc(var(--u) * 12.5); white-space: nowrap; } .ic-where svg { width: calc(var(--u) * 13); height: calc(var(--u) * 13); flex: none; } .ic-where svg + span + svg { margin-left: calc(var(--u) * 4); } .tag { padding: calc(var(--u) * 2) calc(var(--u) * 8); border-radius: 99px; background: #333; color: #fff; font-weight: 600; font-size: calc(var(--u) * 11.5); } /* The command box, as the app's card lays out a shell command since 2026-11-06: a row per step with the program as a pill in its family's colour and icon, and between steps what the shell does next. Pill colours are the app's CommandFamily tints, allowed only here (AGENTS.md, design rule 1). */ .ic-cmd { margin-top: calc(var(--u) * 10); padding: calc(var(--u) * 10); border-radius: calc(var(--u) * 10); background: #1f1f1f; box-shadow: inset 0 0 0 1px #333; display: flex; align-items: center; gap: calc(var(--u) * 5); } .cpill { --pc: 179, 179, 179; display: inline-flex; align-items: center; gap: calc(var(--u) * 4); flex: none; padding: calc(var(--u) * 3) calc(var(--u) * 7); border-radius: 99px; background: rgba(var(--pc), 0.16); box-shadow: inset 0 0 0 1px rgba(var(--pc), 0.22); font: 600 calc(var(--u) * 12) / 1.2 var(--mono); color: #fff; white-space: nowrap; } .cpill svg { width: calc(var(--u) * 9.5); height: calc(var(--u) * 9.5); color: rgb(var(--pc)); flex: none; } .cpill[data-family="move"] { --pc: 115, 209, 242; } .cpill[data-family="vcs"] { --pc: 189, 158, 255; } .cpill[data-family="build"] { --pc: 107, 214, 173; } /* A version-control step that changes the repository, as the app tints it (CardInk.writes). */ .cpill[data-family="writes"] { --pc: 255, 173, 92; } .cpill[data-family="risky"] { --pc: 255, 107, 97; color: rgb(255, 107, 97); background: rgba(var(--pc), 0.24); box-shadow: inset 0 0 0 1px rgba(var(--pc), 0.6); } .ic-next { width: calc(var(--u) * 8); height: calc(var(--u) * 8); flex: none; color: #6b6b6b; } /* The listening strip, as the app's ListenerRow: a tinted strip with each gesture that counts as its own animated icon (the robot nodding twice, an AirPod pressed twice) and dots that count each one, what to do in large type and how to decline under it, over a line that shimmers while listening and drains through the undo window after two nods. */ .ic-listen { position: relative; margin-top: calc(var(--u) * 10); height: calc(var(--u) * 50); padding: 0 calc(var(--u) * 10); border-radius: calc(var(--u) * 12); background: rgba(115, 184, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(115, 184, 255, 0.22); display: flex; align-items: center; gap: calc(var(--u) * 10); } .il-icon { display: grid; justify-items: center; gap: calc(var(--u) * 3); flex: none; } .il-icon + .il-icon { margin-left: calc(var(--u) * -4); } .il-disc { position: relative; width: calc(var(--u) * 30); height: calc(var(--u) * 30); border-radius: 50%; background: rgba(115, 184, 255, 0.18); box-shadow: inset 0 0 0 1px rgba(115, 184, 255, 0.35); display: grid; place-items: center; } .il-disc .buddy { width: calc(var(--u) * 20); } /* The app's strip robot smiles with happy eyes (EarFeedback.swift, NodHead). */ .il-bot .buddy .b-eyes { opacity: 0; animation: none; } .il-bot .buddy .b-joy { opacity: 1; transform: none; } .il-pod { width: calc(var(--u) * 13); height: calc(var(--u) * 19.5); } .il-glow { position: absolute; left: 52%; top: 66%; width: calc(var(--u) * 13); height: calc(var(--u) * 13); margin: calc(var(--u) * -6.5); border-radius: 50%; background: radial-gradient(circle, var(--listen), rgba(115, 184, 255, 0) 70%); opacity: 0; animation: podpress 2.8s ease-in-out infinite 0.8s; } .il-count { display: flex; gap: calc(var(--u) * 3); height: calc(var(--u) * 4); } .il-count b { width: calc(var(--u) * 4); height: calc(var(--u) * 4); border-radius: 50%; background: rgba(115, 184, 255, 0.25); } /* The dots light as each nod or press lands, on the robot's nod-loop beat (2.8 s, nods at 12% and 40%). */ .il-bot .il-count b:first-child { animation: count1 2.8s linear infinite; } .il-bot .il-count b:last-child { animation: count2 2.8s linear infinite; } .il-press .il-count b:first-child { animation: count1 2.8s linear infinite 0.8s; } .il-press .il-count b:last-child { animation: count2 2.8s linear infinite 0.8s; } @keyframes count1 { 0%, 11% { background: rgba(115, 184, 255, 0.25); } 12%, 80% { background: var(--listen); } 86%, 100% { background: rgba(115, 184, 255, 0.25); } } @keyframes count2 { 0%, 39% { background: rgba(115, 184, 255, 0.25); } 40%, 80% { background: var(--listen); } 86%, 100% { background: rgba(115, 184, 255, 0.25); } } @keyframes podpress { 0%, 6%, 20%, 34%, 100% { opacity: 0; } 12%, 40% { opacity: 1; } 26% { opacity: 0.15; } 46% { opacity: 0; } } .il-text { position: relative; display: grid; min-width: 0; flex: 1; color: var(--listen); } .il-text b { grid-area: 1 / 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: calc(var(--u) * 13); transition: opacity 0.25s; } .il-text small { grid-area: 2 / 1; margin-top: calc(var(--u) * 1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #9e9e9e; font-size: calc(var(--u) * 11); transition: opacity 0.25s; } .il-ok { opacity: 0; } .il-line { position: absolute; left: calc(var(--u) * 12); right: calc(var(--u) * 12); bottom: calc(var(--u) * 1); height: calc(var(--u) * 2); border-radius: 2px; background: linear-gradient(90deg, rgba(115, 184, 255, 0.15) 30%, var(--listen) 50%, rgba(115, 184, 255, 0.15) 70%) 0 0 / 300% 100%; animation: shimmer 1.8s linear infinite; transform-origin: left; } .island[data-state="approving"] .il-ask, .island[data-state="allowed"] .il-ask, .island[data-state="approving"] .il-text small, .island[data-state="allowed"] .il-text small { opacity: 0; } .island[data-state="approving"] .il-ok, .island[data-state="allowed"] .il-ok { opacity: 1; } .island[data-state="approving"] .il-text b { grid-row: 1 / 3; align-self: center; } .island[data-state="approving"] .il-line { background: var(--listen); animation: shrink 1.5s linear both; } .island[data-state="allowed"] .il-line { background: var(--listen); transform: scaleX(0); animation: none; } .island[data-state="allowed"] .ic-listen { opacity: 0; transition: opacity 0.3s 0.3s; } @keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } } /* The blue halo around a session whose request is listened for. */ .dot.listening::before, .dot.listening::after { content: ""; position: absolute; inset: calc(var(--u) * -2); border-radius: 50%; border: calc(var(--u) * 1.5) solid var(--listen); opacity: 0; animation: halo 2s var(--ease) infinite; pointer-events: none; } .dot.listening::after { animation-delay: 1s; } @keyframes halo { 0% { transform: scale(0.95); opacity: 0.9; } 100% { transform: scale(1.7); opacity: 0; } } /* What was said in the AirPods, for a moment under the Island. */ .isl-said { position: absolute; left: 50%; top: calc(var(--u) * (var(--cut-top) + 44)); display: flex; align-items: center; gap: calc(var(--u) * 7); padding: calc(var(--u) * 6) calc(var(--u) * 12); border-radius: 99px; background: #000; box-shadow: 0 0 0 1px rgba(115, 184, 255, 0.25); color: #fff; font-size: calc(var(--u) * 12); font-weight: 600; white-space: nowrap; opacity: 0; transform: translate(-50%, calc(var(--u) * -8)) scale(0.9); transition: opacity 0.25s, transform 0.45s var(--spring); } .island[data-said] .isl-said { opacity: 1; transform: translate(-50%, 0); transition-delay: 0.35s; } .said-text { display: grid; } .said-text > span { grid-area: 1 / 1; } .island:not([data-said="done"]) .said-done, .island[data-said="done"] .said-ask { visibility: hidden; } /* Two nods on the card: the listener's head nods twice, quickly, before the card gets out of the way. */ .island[data-nods] .il-bot .buddy .b-body { animation: nodbody 0.9s var(--ease) both; } .island[data-nods] .il-bot .buddy .b-face { animation: nodface2 0.9s var(--ease) both; } @keyframes nodtwice { 0%, 100% { transform: none; } 15%, 55% { transform: translateY(calc(var(--u) * 3)); } 35%, 75% { transform: none; } } /* The undo ring, the app's ConfirmMark: on the right of the closed Island, in place of the gauges. It fills through the 1.5 s undo window, then the check draws, the mark pops with a soft bloom, and the Island's outline glows once. */ .isl-confirm { --tint: rgb(77, 217, 122); position: absolute; z-index: 1; top: calc(var(--u) * (var(--cut-top) + 5)); left: calc(50% + var(--u) * (var(--cut-w) / 2 + var(--side) / 2 - 11)); width: calc(var(--u) * 22); height: calc(var(--u) * 22); opacity: 0; transform: scale(0.5); transition: opacity 0.2s, transform 0.3s var(--ease); } .isl-confirm svg { width: 100%; height: 100%; overflow: visible; display: block; } .isl-confirm::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--tint); filter: blur(calc(var(--u) * 3)); opacity: 0; } .cm-disc { fill: var(--tint); opacity: 0.16; } .cm-track { fill: none; stroke: rgba(255, 255, 255, 0.12); stroke-width: 2.2; } .cm-ring { fill: none; stroke: var(--tint); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 0 100; transform: rotate(-90deg); transform-origin: 11px 11px; filter: drop-shadow(0 0 2px var(--tint)); } .cm-check { fill: none; stroke: var(--tint); stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; } .island[data-state="confirming"] .isl-confirm, .island[data-state="answered"] .isl-confirm { opacity: 1; transform: none; transition: opacity 0.2s, transform 0.45s var(--spring); } .island[data-state="confirming"] .cm-ring { animation: cmfill 1.5s linear both; } .island[data-state="confirming"] .cm-disc { animation: cmbreathe 0.52s ease-in-out infinite alternate; } .island[data-state="answered"] .cm-ring { stroke-dasharray: 100 100; } .island[data-state="answered"] .cm-check { stroke-dashoffset: 0; transition: stroke-dashoffset 0.2s var(--ease) 0.12s; } .island[data-state="answered"] .isl-confirm { animation: cmpop 0.22s var(--ease) 0.28s both; } .island[data-state="answered"] .isl-confirm::before { animation: cmbloom 0.47s var(--ease) 0.28s both; } .island[data-state="confirming"] .isl-side.right > *, .island[data-state="answered"] .isl-side.right > * { opacity: 0; transform: scale(0.5); transition: opacity 0.15s, transform 0.2s; transition-delay: 0s; } @keyframes cmfill { from { stroke-dasharray: 0 100; } to { stroke-dasharray: 100 100; } } @keyframes cmbreathe { from { opacity: 0.16; } to { opacity: 0.26; } } @keyframes cmpop { 0%, 100% { transform: none; } 50% { transform: scale(1.2); } } @keyframes cmbloom { 0% { opacity: 0.4; transform: none; } 100% { opacity: 0; transform: scale(2.3); } } /* The outline's one glow, drawn as a ring around the shape so only its opacity moves. */ .isl-shape::before { content: ""; position: absolute; inset: calc(var(--u) * -1.5); border-radius: inherit; box-shadow: 0 0 0 calc(var(--u) * 1.5) rgb(77, 217, 122), 0 0 calc(var(--u) * 9) rgba(77, 217, 122, 0.8); opacity: 0; pointer-events: none; } .island[data-state="answered"] .isl-shape::before { animation: outlineglow 0.48s ease-in-out 0.26s both; } @keyframes outlineglow { 0%, 100% { opacity: 0; } 45% { opacity: 0.85; } } .said-wave { display: flex; align-items: center; gap: calc(var(--u) * 2); height: calc(var(--u) * 12); } .said-wave i { width: calc(var(--u) * 2.2); height: 100%; border-radius: 2px; background: var(--listen); animation: talk 0.9s ease-in-out infinite; } .said-wave i:nth-child(2) { animation-delay: -0.3s; } .said-wave i:nth-child(3) { animation-delay: -0.6s; } .said-wave i:nth-child(4) { animation-delay: -0.15s; } .ic-act { position: relative; margin-top: calc(var(--u) * 14); height: calc(var(--u) * 36); } .ic-btns { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: calc(var(--u) * 8); transition: opacity 0.25s, transform 0.35s var(--ease); } .ic-btns span { display: grid; place-items: center; padding: 0 calc(var(--u) * 4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-radius: calc(var(--u) * 10); background: #424242; font-weight: 600; font-size: calc(var(--u) * 13); transition: transform 0.2s var(--ease), background 0.3s; position: relative; overflow: hidden; } .ic-btns .allow { background: var(--allow); } /* A tap: the button dips, a ripple spreads, then the row becomes "Allowed" as in the app. */ .ic-btns .allow::after { content: ""; position: absolute; left: 50%; top: 50%; width: calc(var(--u) * 20); height: calc(var(--u) * 20); margin: calc(var(--u) * -10); border-radius: 50%; background: rgba(255, 255, 255, 0.5); transform: scale(0); opacity: 0; } .island[data-state="allowed"] .ic-btns .allow { transform: scale(0.95); } .island[data-state="allowed"] .ic-btns .allow::after { animation: ripple 0.6s var(--ease) both; } @keyframes ripple { 0% { transform: scale(0); opacity: 0.8; } 100% { transform: scale(9); opacity: 0; } } .island[data-state="allowed"] .ic-btns { opacity: 0; transform: scale(0.97); transition-delay: 0.45s; } .ic-allowed { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 8); color: var(--done); font-weight: 700; font-size: calc(var(--u) * 16); opacity: 0; transform: scale(0.9); transition: opacity 0.3s, transform 0.5s var(--spring); } .ic-allowed i { width: calc(var(--u) * 22); height: calc(var(--u) * 22); border-radius: 50%; background: var(--done); display: grid; place-items: center; } .ic-allowed svg { width: 62%; height: 62%; fill: none; stroke: #000; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } .island[data-state="allowed"] .ic-allowed { opacity: 1; transform: none; transition-delay: 0.6s; } /* Story under the zoomed Island */ .story { position: absolute; inset: 0; z-index: 2; pointer-events: none; } .island-big { position: absolute; left: 50%; top: var(--big-top, 120px); transform: translateX(-50%); opacity: 0; } .island-small { position: absolute; left: 50%; top: 0; transform: translateX(-50%); } .captions { position: absolute; left: 0; right: 0; top: var(--cap-top, 60vh); padding: 0 var(--gutter); text-align: center; } .cap { position: absolute; left: 0; right: 0; padding: 0 var(--gutter); opacity: 0; transform: translateY(-8px); transition: opacity 0.18s, transform 0.3s var(--ease); } .cap.on { opacity: 1; transform: none; transition: opacity 0.5s 0.2s, transform 0.7s var(--ease) 0.2s; } .cap:not(.on) { transform: translateY(-8px); } .cap h2 { font-size: clamp(32px, 4.2vw, 54px); line-height: 1.04; } .cap p { margin: 12px auto 0; max-width: 30em; color: var(--mist); font-size: clamp(17px, 1.5vw, 21px); line-height: 1.4; } /* Bands */ .band { position: relative; padding: clamp(96px, 14vw, 170px) 0; } .band.light { background: var(--paper); color: var(--ink); } .band.light .lede, .band.light .aside { color: var(--steel); } .band.light sup a { color: var(--steel); } .band.light + .band.light { padding-top: 0; } /* Two night bands in a row share one gap, as two light ones do. */ .voice + .custom { padding-top: 0; } /* Highlights */ .highlights { padding-bottom: 92px; } .highlights .title { margin-bottom: 52px; } .hl-track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 max(var(--gutter), (100% - 1080px) / 2); scroll-padding-inline: max(var(--gutter), (100% - 1080px) / 2); } .hl-track::-webkit-scrollbar { display: none; } .hl-card { flex: 0 0 min(80vw, 372px); scroll-snap-align: start; border-radius: 28px; background: var(--surface); overflow: hidden; display: flex; flex-direction: column; } .hl-card > p { margin: 0; min-height: 118px; padding: 10px 30px 32px; color: var(--mist); font-size: 17px; line-height: 1.42; } .hl-card strong { color: var(--white); font-weight: 600; } .hl-art { position: relative; height: 292px; flex: none; display: grid; place-items: center; overflow: hidden; background: radial-gradient(80% 70% at 50% 0%, rgba(92, 120, 180, 0.16), transparent 72%); } /* The dots stay centred on the page; the play button hangs off their right, as on apple.com. */ .hl-controls { position: relative; width: max-content; margin: 30px auto 0; } .hl-dots { display: flex; gap: 8px; padding: 0 18px; height: 44px; align-items: center; border-radius: 99px; background: var(--surface); } .hl-dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; background: #4a556c; cursor: pointer; transition: width 0.5s var(--ease), background 0.3s; position: relative; overflow: hidden; } .hl-dots button::after { content: ""; position: absolute; inset: -18px -4px; } .hl-dots button[aria-selected="true"] { width: 44px; background: #4a556c; } .hl-dots button i { position: absolute; inset: 0; border-radius: inherit; background: #e6ebf4; transform-origin: left; transform: scaleX(0); } .hl-dots button[aria-selected="true"] i { transform: scaleX(1); } .hl-dots.playing button[aria-selected="true"] i { animation: hlfill var(--hl-time, 4.2s) linear both; } @keyframes hlfill { from { transform: scaleX(0); } to { transform: scaleX(1); } } .hl-play { position: absolute; left: calc(100% + 14px); top: 0; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--surface); cursor: pointer; display: grid; place-items: center; } .i-pause { width: 10px; height: 12px; border-left: 3px solid #d8deea; border-right: 3px solid #d8deea; } .hl-play.paused .i-pause { width: 0; height: 0; border-right: 0; border-left: 10px solid #d8deea; border-top: 6px solid transparent; border-bottom: 6px solid transparent; margin-left: 3px; } .island-mini { --u: 0.86px; height: 40px; } /* Nod to approve: the closed Island at the top of the card, the robot nodding under it. */ .art-nod .island-mini { --u: min(1.25px, calc((80vw - 28px) / 300)); position: absolute; top: 26px; left: 50%; transform: translateX(-50%); } /* .buddy sets position: relative, so this needs the card's class to win. */ .art-nod .nod-buddy { position: absolute; left: 50%; bottom: 18px; width: 120px; transform: translateX(-50%); } /* Risky needs your eyes: a card with a flagged command, as the app shows it. */ .art-risk { padding: 0 26px; } .risk-card { width: 100%; max-width: 300px; padding: 16px; border-radius: 20px; background: #000; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 18px 40px rgba(0, 0, 0, 0.45); font-size: 13px; } .rc-head { display: flex; align-items: center; gap: 8px; font-size: 15px; } .rc-head b { font-weight: 600; } /* The app's card at 1 px per point: the flagged step is a red pill with a warning, as in ApprovalBody. */ .risk-card { --u: 1px; } .rc-cmd { display: flex; align-items: center; gap: 7px; margin-top: 12px; padding: 10px; border-radius: 10px; background: #1f1f1f; box-shadow: inset 0 0 0 1px #333; font: 12px/1.3 var(--mono); color: #ebebeb; } .rc-args { white-space: nowrap; } .rc-note { display: flex; align-items: center; gap: 7px; margin-top: 10px; color: var(--deny); font-weight: 600; font-size: 12.5px; } .rc-warn { width: 15px; height: 15px; flex: none; color: var(--deny); } .hl-card.on .rc-note { animation: flagin 0.6s var(--spring) 0.3s both; } @keyframes flagin { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } .rc-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; } .rc-btns span { display: grid; place-items: center; height: 32px; border-radius: 10px; background: #424242; font-weight: 600; } .rc-btns .allow { background: var(--allow); } /* Context in every dot: three large dots, their water rising, with the level under each. */ .ctx-row { --u: 3px; display: flex; gap: 26px; align-items: flex-start; } .ctx-item { display: grid; justify-items: center; gap: 12px; } .ctx-item .dot { transform: none; opacity: 1; } .ctx-item .dot .d-water, .ctx-item .dot .d-wclip { transition: transform 0.9s var(--ease), fill 0.9s; } .ctx-pct { font: 600 15px/1 var(--rounded); font-variant-numeric: tabular-nums; transition: color 0.9s; } /* Both agents' limits, then a reset: the gauge drains, a toast drops in, and confetti bursts. */ .lim-row { --u: 3.4px; display: flex; gap: 34px; align-items: center; } .lim-row .gauge { transform: none; opacity: 1; } .lim-row .g-fill { transition: stroke-dasharray 0.8s var(--ease), stroke 0.8s; } .lim-toast { position: absolute; top: 34px; left: 50%; padding: 7px 14px; border-radius: 99px; background: #000; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1); font-weight: 600; font-size: 14px; opacity: 0; transform: translate(-50%, -10px) scale(0.9); transition: opacity 0.25s, transform 0.5s var(--spring); } .art-limits.burst .lim-toast { opacity: 1; transform: translate(-50%, 0); } .confetti { position: absolute; left: 50%; top: 50%; } .confetti i { position: absolute; width: 7px; height: 11px; margin: -5px -3px; border-radius: 2px; background: var(--c); opacity: 0; } .art-limits.burst .confetti i { animation: confetti 1.5s var(--ease) both; } @keyframes confetti { 0% { opacity: 1; transform: translate(0, 0) rotate(0) scale(0.4); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x), calc(var(--y) + 40px)) rotate(var(--r)) scale(1); } } /* Any display: the same dots around a Dynamic Island, a notch, then a pill under a menu bar. */ .art-any { align-content: center; gap: 22px; } .any-screen { position: relative; width: 268px; height: 120px; border-radius: 14px 14px 0 0; background: linear-gradient(180deg, #24324f, #141b2b); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); overflow: hidden; } .any-bar { position: absolute; inset: 0 0 auto; height: 14px; background: rgba(255, 255, 255, 0.1); opacity: 0; } .any-shape { position: absolute; left: 50%; background: #000; opacity: 0; transform: translateX(-50%) scale(0.92); } .any-island { top: 8px; width: 150px; height: 26px; border-radius: 13px; } .any-notch { top: 0; width: 160px; height: 28px; border-radius: 0 0 12px 12px; } .any-pill { top: 20px; width: 150px; height: 26px; border-radius: 13px; } .any-dots { position: absolute; left: 50%; top: 14px; display: flex; gap: 6px; transform: translateX(-62px); } .any-dots i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--run); } .any-dots i:nth-child(2) { border-color: var(--wait); background: var(--wait); } .any-dots i:nth-child(3) { border-color: var(--done); } .any-label { position: relative; display: grid; margin: 0; font-size: 15px; font-weight: 600; color: #e6ebf4; text-align: center; } .any-label span { grid-area: 1 / 1; opacity: 0; } /* Still, it shows the Dynamic Island. In view, it cycles through all three, 2.4 s each. */ .hl-card:not(.on) .any-island { opacity: 1; transform: translateX(-50%); } .hl-card:not(.on) .any-label span:nth-child(1) { opacity: 1; } .hl-card.on .any-island { animation: anyshape1 7.2s var(--ease) infinite; } .hl-card.on .any-notch { animation: anyshape2 7.2s var(--ease) infinite; } .hl-card.on .any-pill { animation: anyshape3 7.2s var(--ease) infinite; } .hl-card.on .any-label span:nth-child(1) { animation: anyfade1 7.2s var(--ease) infinite; } .hl-card.on .any-label span:nth-child(2) { animation: anyfade2 7.2s var(--ease) infinite; } .hl-card.on .any-label span:nth-child(3), .hl-card.on .any-bar { animation: anyfade3 7.2s var(--ease) infinite; } .hl-card.on .any-dots { animation: anydots 7.2s var(--ease) infinite; } @keyframes anyshape1 { 0%, 30% { opacity: 1; transform: translateX(-50%); } 34%, 96% { opacity: 0; transform: translateX(-50%) scale(0.92); } 100% { opacity: 1; transform: translateX(-50%); } } @keyframes anyshape2 { 0%, 31% { opacity: 0; transform: translateX(-50%) scale(0.92); } 35%, 63% { opacity: 1; transform: translateX(-50%); } 67%, 100% { opacity: 0; transform: translateX(-50%) scale(0.92); } } @keyframes anyshape3 { 0%, 64% { opacity: 0; transform: translateX(-50%) scale(0.92); } 68%, 96% { opacity: 1; transform: translateX(-50%); } 100% { opacity: 0; transform: translateX(-50%) scale(0.92); } } @keyframes anyfade1 { 0%, 30% { opacity: 1; } 34%, 96% { opacity: 0; } 100% { opacity: 1; } } @keyframes anyfade2 { 0%, 31% { opacity: 0; } 35%, 63% { opacity: 1; } 67%, 100% { opacity: 0; } } @keyframes anyfade3 { 0%, 64% { opacity: 0; } 68%, 96% { opacity: 1; } 100% { opacity: 0; } } @keyframes anydots { 0%, 31% { transform: translateX(-62px); } 35%, 63% { transform: translateX(-62px) translateY(-7px); } 67%, 96% { transform: translateX(-62px) translateY(12px); } 100% { transform: translateX(-62px); } } .art-jump { align-content: center; gap: 26px; } .jump-sessions { position: relative; display: flex; gap: 12px; height: 30px; align-items: center; } .jump-sessions i { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--run); position: relative; } .jump-sessions i::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--run); opacity: .35; } .jump-sessions i:nth-child(3) { border-color: var(--wait); animation: jumpdot 5s var(--ease) infinite; } .jump-sessions i:nth-child(3)::after { background: var(--wait); } @keyframes jumpdot { 0%, 14%, 100% { transform: none; } 18% { transform: scale(.82); } 24%, 72% { transform: scale(1); } } .tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: calc(100% - 48px); max-width: 308px; padding: 4px; border-radius: 12px; background: #0b101b; box-shadow: inset 0 0 0 1px #26304a; position: relative; } .tabs span { text-align: center; font-size: 13px; padding: 7px 0; border-radius: 8px; color: #8a94a8; position: relative; z-index: 1; } .tab-cursor { position: absolute; width: calc((100% - 8px) / 4); height: calc(100% - 8px); border-radius: 8px; background: #2f3a55; top: 4px; left: 4px; animation: tabs 5s var(--ease) infinite; } @keyframes tabs { 0%, 18% { transform: translateX(0); } 30%, 60% { transform: translateX(200%); } 72%, 100% { transform: translateX(0); } } .tap-ripple { position: absolute; left: 62px; top: 3px; width: 24px; height: 24px; border: 1px solid var(--wait); border-radius: 50%; opacity: 0; animation: jumpRipple 5s var(--ease) infinite; } @keyframes jumpRipple { 0%, 15%, 100% { transform: scale(.3); opacity: 0; } 20% { opacity: .9; } 35% { transform: scale(2.3); opacity: 0; } } .art-speak { grid-template-columns: auto auto; grid-template-rows: 112px auto; justify-content: center; column-gap: 34px; row-gap: 18px; align-content: center; padding: 24px 30px; } .speak-src { position: relative; grid-column: 1; grid-row: 1; justify-self: center; align-self: center; width: 112px; height: 93px; color: #f5f6f8; } .speak-bud { position: relative; width: 100%; height: 100%; } /* Sound rings leave the ear tip (29, 49 in the earbud's 80 x 120 drawing), behind the bud. */ .speak-pulse { position: absolute; left: 50%; top: 42%; width: 30px; height: 30px; margin: -15px; border: 2px solid var(--listen); border-radius: 50%; opacity: 0; animation: speakPulse 1.8s var(--ease) infinite; } .speak-pulse + .speak-pulse { animation-delay: -0.9s; } @keyframes speakPulse { from { transform: scale(.5); opacity: .9; } to { transform: scale(2.6); opacity: 0; } } .wave { grid-column: 2; grid-row: 1; display: flex; gap: 5px; height: 46px; align-self: center; align-items: center; justify-content: center; } .wave i { width: 5px; height: 100%; border-radius: 3px; background: var(--listen); transform-origin: center; animation: talk 1.1s ease-in-out infinite; } .wave i:nth-child(2n) { animation-delay: -0.3s; } .wave i:nth-child(3n) { animation-delay: -0.6s; } .wave i:nth-child(5n) { animation-delay: -0.15s; } @keyframes talk { 0%, 100% { transform: scaleY(0.18); } 50% { transform: scaleY(1); } } .said { grid-column: 1 / -1; grid-row: 2; margin: 0; font-size: 17px; line-height: 1.35; font-weight: 500; text-align: center; color: #e6ebf4; } .art-stem .press { --k: 1.05px; } @keyframes press2 { 0%, 8% { opacity: 0; } 14% { opacity: 1; } 22% { opacity: 0.1; } 28% { opacity: 1; } 38%, 100% { opacity: 0; } } /* Two shortcuts: flat Mac keycaps press, and a small Island above shows what each one does. One 7.2 s loop: I (0-3.6 s) opens the panel, J (3.6-7.2 s) brings the amber session to the front. */ .art-keys { display: flex; flex-direction: column; gap: 0; justify-content: center; align-items: center; } .keys { display: flex; gap: 10px; } .art-keys kbd { position: relative; width: 62px; height: 62px; display: grid; place-items: center; border-radius: 10px; background: #1a1d24; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 2px 0 #07080b; font: 500 22px/1 var(--font); color: #e9edf4; animation: keytap 3.6s var(--ease) infinite; } .art-keys kbd:nth-child(2) { animation-delay: 0.08s; } .art-keys kbd:nth-child(3) { animation-delay: 0.16s; } .k-mod b { position: absolute; top: 9px; right: 10px; font-weight: 400; font-size: 14px; color: #c9d0dc; } .k-mod small { position: absolute; left: 9px; bottom: 9px; font-size: 10px; letter-spacing: 0.01em; color: #8e98aa; } .k-swap { overflow: hidden; } .k-swap span { position: absolute; animation: keyswap 7.2s steps(1) infinite; } .k-swap span + span { animation-delay: -3.6s; } @keyframes keytap { 0%, 30%, 100% { transform: none; } 36% { transform: translateY(2px); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.55), 0 0 0 #07080b; } 48% { transform: none; } } @keyframes keyswap { 0% { opacity: 1; } 50% { opacity: 0; } } .keys-isl { position: relative; display: flex; justify-content: center; align-items: flex-start; width: 96px; height: 30px; margin-bottom: 42px; padding-top: 8px; border-radius: 15px; background: #000; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08); animation: keysisl 7.2s var(--spring) infinite; } .keys-dots { display: flex; gap: 6px; } .keys-dots i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--run); animation: keysdot 7.2s var(--ease) infinite; } .keys-dots i.w { border-color: var(--wait); background: var(--wait); animation: keyswait 7.2s var(--ease) infinite; } .keys-lines { position: absolute; left: 16px; right: 16px; top: 34px; height: 24px; opacity: 0; background: linear-gradient(rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.16)) 0 0 / 100% 6px no-repeat, linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)) 0 14px / 64% 6px no-repeat; border-radius: 3px; animation: keyslines 7.2s var(--ease) infinite; } /* The margin shrinks as the Island grows, so the keys below never move. */ @keyframes keysisl { 0%, 18% { width: 96px; height: 30px; margin-bottom: 42px; border-radius: 15px; } 22%, 40% { width: 168px; height: 72px; margin-bottom: 0; border-radius: 20px; } 46%, 100% { width: 96px; height: 30px; margin-bottom: 42px; border-radius: 15px; } } @keyframes keyslines { 0%, 21% { opacity: 0; } 25%, 38% { opacity: 1; } 42%, 100% { opacity: 0; } } @keyframes keysdot { 0%, 67% { transform: none; } 72%, 92% { transform: translateX(20px); } 97%, 100% { transform: none; } } @keyframes keyswait { 0%, 67% { transform: none; } 70% { transform: translateX(-20px) scale(1.25); } 72%, 92% { transform: translateX(-40px); } 97%, 100% { transform: none; } } /* Nothing leaves: the Island sits inside a boundary, and specks drifting outward fade before it. */ .art-local { position: relative; } .local-isl { position: relative; display: flex; gap: 8px; align-items: center; padding: 0 12px; height: 36px; border-radius: 18px; background: #000; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 10px 30px rgba(0, 0, 0, 0.45); } .local-isl i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--run); } .local-isl i:nth-child(2) { border-color: var(--done); background: var(--done); } .local-isl i:nth-child(3) { border-color: var(--done); } .drift { position: absolute; left: 50%; top: 50%; } .drift i { position: absolute; width: 5px; height: 5px; margin: -2.5px; border-radius: 50%; background: #9ba5b8; opacity: 0; animation: drift 4.2s var(--ease) infinite; } .drift i:nth-child(1) { --a: -20deg; } .drift i:nth-child(2) { --a: 40deg; animation-delay: -0.7s; } .drift i:nth-child(3) { --a: 100deg; animation-delay: -1.4s; } .drift i:nth-child(4) { --a: 160deg; animation-delay: -2.1s; } .drift i:nth-child(5) { --a: 215deg; animation-delay: -2.8s; } .drift i:nth-child(6) { --a: 280deg; animation-delay: -3.5s; } @keyframes drift { 0% { transform: rotate(var(--a)) translateX(30px); opacity: 0; } 25% { opacity: 0.8; } 75% { opacity: 0; } 100% { transform: rotate(var(--a)) translateX(74px); opacity: 0; } } .art-local .orbit { position: absolute; left: 50%; top: 50%; width: 170px; height: 170px; margin: -85px; border-radius: 50%; border: 1.5px dashed #2f3a55; animation: spin 24s linear infinite; } /* Eyes-free */ /* It follows the usage band on the same night, so the two bands' padding would stack into one big gap. */ .airnod-intro { padding-top: clamp(40px, 5vw, 72px); padding-bottom: 40px; background: var(--night); } .product-word { margin: 0; font-family: var(--display); font-size: clamp(64px, 9vw, 120px); font-weight: 700; letter-spacing: -0.04em; line-height: 1; color: #f2f5fa; } /* The robot looks up from behind the wordmark, earbuds listening. */ .an-hello { width: clamp(120px, 13vw, 168px); margin: 0 auto -6px; } .js .an-hello.reveal { transform: translateY(40px) scale(0.92); transition-duration: 1.1s, 1.2s; } .js .an-hello.reveal.in { transform: none; } .airnod-intro .headline { margin-top: 8px; font-size: clamp(30px, 3.8vw, 48px); color: #c9d1df; } .airnod .stage { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 4vw; width: min(1080px, 100% - 2 * var(--gutter)); margin: auto; } .an-visual { position: relative; width: min(460px, 40vw, 62vh); aspect-ratio: 1; justify-self: end; } .ticks { position: absolute; inset: 0; width: 100%; height: 100%; } .ticks line { stroke: #273047; stroke-width: 3.2; stroke-linecap: round; transition: stroke 0.25s; transition-delay: calc(var(--i) * 9ms); } .an-buddy { position: absolute; left: 50%; top: 50%; width: 66%; transform: translate(-50%, -52%); } /* Done: a green badge pops in at the buddy's side, like a Face ID success. */ .flash { position: absolute; left: 66%; top: 62%; width: 17%; opacity: 0; transform: scale(0.3); overflow: visible; } .flash circle { fill: var(--done); } .flash path { fill: none; stroke: #04210f; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; } .airnod .stage[data-step="4"] .flash { opacity: 1; transform: none; transition: opacity 0.2s 0.35s, transform 0.7s var(--spring) 0.35s; filter: drop-shadow(0 0 18px rgba(82, 214, 133, 0.55)); } .airnod .stage[data-step="4"] .flash path { animation: draw 0.4s var(--ease) 0.75s both; } /* The capsule under the robot: black like the Island, saying what happens at each step. */ .an-card { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: 18px; height: 52px; width: max-content; min-width: 260px; } .an-card > * { position: absolute; left: 50%; top: 0; height: 52px; display: flex; align-items: center; gap: 10px; padding: 0 22px 0 18px; border-radius: 26px; background: #000; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 14px 36px rgba(0, 0, 0, 0.45); white-space: nowrap; font-size: 16px; font-weight: 600; opacity: 0; transform: translate(-50%, 8px) scale(0.96); transition: opacity 0.3s, transform 0.5s var(--spring); } .an-line { color: #eef2f8; } .an-wave { display: flex; gap: 3px; height: 18px; align-items: center; } .an-wave i { width: 3px; height: 100%; border-radius: 2px; background: var(--listen); animation: talk 0.9s ease-in-out infinite; } .an-wave i:nth-child(2) { animation-delay: -0.3s; } .an-wave i:nth-child(3) { animation-delay: -0.55s; } .an-wave i:nth-child(4) { animation-delay: -0.15s; } .listener { color: var(--listen); } .lis-pods { width: 24px; height: 20px; color: var(--listen); } .lis-nod { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--listen); background: rgba(115, 184, 255, 0.16); animation: bob 1.6s ease-in-out infinite; } .airnod .stage[data-step="2"] .lis-nod { animation: nodtwice2 0.9s var(--ease) 0.2s both; } @keyframes bob { 0%, 60%, 100% { transform: none; } 70% { transform: translateY(3px); } 80% { transform: none; } 90% { transform: translateY(3px); } } @keyframes nodtwice2 { 0%, 100% { transform: none; } 15%, 55% { transform: translateY(4px); } 35%, 75% { transform: none; } } .approving { --tint: rgb(77, 217, 122); color: #eef2f8; } .an-ring { width: 22px; height: 22px; overflow: visible; } .airnod .stage[data-step="3"] .an-ring .cm-ring { animation: cmfill 1.5s linear 0.2s both; } .an-done { color: var(--done); } .an-done i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--done); } .an-done svg { width: 62%; height: 62%; fill: none; stroke: #000; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } /* All five steps, with a rail that fills as you go. The current step is bright, the rest wait. */ .an-steps { position: relative; margin: 0; padding: 0 0 0 30px; list-style: none; display: grid; gap: 26px; } .step { position: relative; opacity: 0.4; transition: opacity 0.45s var(--ease); } .step h3 { font-size: clamp(24px, 2.3vw, 32px); line-height: 1.1; } .step p { margin: 8px 0 0; max-width: 24em; color: var(--mist); font-size: 17px; line-height: 1.45; } .step::before { content: ""; position: absolute; left: -30px; top: 0.42em; width: 11px; height: 11px; margin-left: -5px; border-radius: 50%; background: var(--night); box-shadow: inset 0 0 0 2px #3a4560; transition: box-shadow 0.4s, background 0.4s; z-index: 1; } .an-rail { position: absolute; left: 0; top: 12px; bottom: 12px; width: 2px; margin-left: -1px; border-radius: 1px; background: #232c40; } .an-rail i { position: absolute; inset: 0; border-radius: inherit; background: #c9d1df; transform-origin: top; transform: scaleY(var(--rail, 0)); transition: transform 0.6s var(--ease); } .airnod .stage[data-step="0"] .step[data-step="0"], .airnod .stage[data-step="1"] .step[data-step="1"], .airnod .stage[data-step="2"] .step[data-step="2"], .airnod .stage[data-step="3"] .step[data-step="3"], .airnod .stage[data-step="4"] .step[data-step="4"] { opacity: 1; } .airnod .step.past::before, .airnod .step.now::before { background: #c9d1df; box-shadow: inset 0 0 0 2px #c9d1df; } .airnod .step.now::before { box-shadow: inset 0 0 0 2px #fff, 0 0 0 5px rgba(255, 255, 255, 0.1); background: #fff; } .airnod .stage[data-step="0"] .an-line, .airnod .stage[data-step="1"] .listener, .airnod .stage[data-step="2"] .listener, .airnod .stage[data-step="3"] .approving, .airnod .stage[data-step="4"] .an-done { opacity: 1; transform: translate(-50%, 0); } .airnod .stage[data-step="2"] .ticks line { stroke: var(--listen); transition-delay: calc(0.15s + var(--i) * 12ms); } /* The undo window: the ring fills green, tick by tick, over 1.5 s, as the app's ring does. */ .airnod .stage[data-step="3"] .ticks line { stroke: var(--listen); animation: tickfill 0.01s linear both; animation-delay: calc(0.2s + var(--i) * 1.5s / 64); } @keyframes tickfill { to { stroke: rgb(77, 217, 122); } } .airnod .stage[data-step="4"] .ticks line { stroke: var(--done); transition-delay: 0s; } @keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } } @keyframes shrink { from { transform: scaleX(1); } to { transform: scaleX(0); } } @media (max-width: 760px) { .airnod .stage { grid-template-columns: 1fr; grid-template-rows: auto auto; align-content: center; gap: 110px; } .an-visual { justify-self: center; width: min(300px, 74vw, 40vh); } /* One step at a time on a phone, the rest out of the way. */ .an-steps { display: block; height: 150px; padding: 0; text-align: center; } .an-rail, .step::before { display: none; } .step { position: absolute; inset: 0 0 auto; opacity: 0; transform: translateY(-8px); transition: opacity 0.18s, transform 0.3s var(--ease); } .airnod .stage[data-step="0"] .step[data-step="0"], .airnod .stage[data-step="1"] .step[data-step="1"], .airnod .stage[data-step="2"] .step[data-step="2"], .airnod .stage[data-step="3"] .step[data-step="3"], .airnod .stage[data-step="4"] .step[data-step="4"] { transform: none; transition: opacity 0.5s 0.2s, transform 0.7s var(--ease) 0.2s; } .step h3 { font-size: 30px; } .step p { margin-inline: auto; } /* Long languages wrap inside the screen instead of running off it. */ .an-card > * { font-size: 15px; height: auto; min-height: 52px; width: max-content; max-width: calc(100vw - 2 * var(--gutter)); padding-block: 10px; white-space: normal; line-height: 1.3; } .an-card > * > svg, .an-card > * > i, .an-card > * > .an-wave, .an-card > * > .lis-nod { flex: none; } } /* Gestures */ .gestures { padding-top: 60px; } .g-grid { margin-top: 48px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .g { padding: 32px 26px 28px; border-radius: 28px; background: var(--surface); transition: transform 0.4s var(--spring), background 0.3s; } /* Pointing at a card lifts it a little; with sound on, its chime plays (main.js). */ @media (hover: hover) { .g:hover { transform: translateY(-3px); background: #172033; } } .g.rang { animation: rang 0.5s var(--spring); } @keyframes rang { 40% { transform: translateY(-3px) scale(1.015); } } .g h3 { margin: 26px 0 0; font-size: 21px; letter-spacing: -0.02em; } .g p { margin: 4px 0 0; color: var(--mist); } /* Every card's art sits in the same 84 px slot, aligned to its bottom, so all four headings line up. */ .g-art { position: relative; display: flex; align-items: flex-end; width: auto; height: 84px; } @media (max-width: 900px) { .g-grid { grid-template-columns: 1fr 1fr; } } /* Two tiles side by side on a phone leave little room: "2回うなずく" needs about 115 px at 19 px. */ @media (max-width: 480px) { .g { padding: 26px 18px 24px; } .g h3 { font-size: 19px; } } /* Voice */ .voice { background: var(--night); } .seg { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; margin-top: 44px; padding: 4px; border-radius: 99px; background: var(--surface); } .seg button { position: relative; z-index: 1; min-height: 40px; padding: 0 22px; border: 0; background: none; border-radius: 99px; cursor: pointer; font-size: 15px; font-weight: 500; color: var(--mist); transition: color 0.3s; } .seg button[aria-checked="true"] { color: var(--ink); } .seg-thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 99px; background: var(--white); transition: transform 0.5s var(--spring); } .seg[data-mode="one"] .seg-thumb { transform: translateX(100%); } /* Make it yours: the app's Settings window, drawn in CSS (no Apple artwork). Its panes take turns while it's on screen, and the sidebar picks one. Controls are the app's: the blue is its accent. */ .custom { background: var(--night); } .set-win { width: min(940px, 100% - 2 * var(--gutter)); margin: 56px auto 0; border-radius: 14px; background: #1c1d22; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.09), 0 40px 90px rgba(0, 0, 0, 0.55), 0 8px 24px rgba(0, 0, 0, 0.35); overflow: hidden; font-size: 13px; letter-spacing: -0.005em; color: #e8eaef; text-align: left; } .sw-bar { position: relative; display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; background: #26272d; border-bottom: 1px solid rgba(0, 0, 0, 0.5); } .sw-bar i { width: 12px; height: 12px; border-radius: 50%; background: #4a4c54; } .sw-bar span { position: absolute; left: 0; right: 0; text-align: center; font-weight: 600; color: #b9bcc6; pointer-events: none; } .sw-body { display: grid; grid-template-columns: 196px 1fr; height: 646px; } .sw-side { display: flex; flex-direction: column; gap: 2px; padding: 12px 10px; background: #202126; border-right: 1px solid rgba(0, 0, 0, 0.45); } .sw-side button { display: flex; align-items: center; gap: 9px; height: 30px; padding: 0 9px; border: 0; border-radius: 7px; background: none; color: #d6d9e0; font-size: 13px; text-align: left; cursor: pointer; transition: background 0.25s; } .sw-side button:hover { background: rgba(255, 255, 255, 0.05); } .sw-side button.on { background: rgba(255, 255, 255, 0.11); color: #fff; } .sw-ic { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1.6px #7c8396; } .sw-side button.on .sw-ic { box-shadow: inset 0 0 0 1.6px #fff; } .sw-side-more { margin-top: 4px; padding: 6px 9px 0 34px; line-height: 2.3; color: #8c91a0; } .sw-panes { position: relative; display: grid; min-width: 0; overflow: hidden; } .sw-pane { grid-area: 1 / 1; min-width: 0; padding: 20px 28px 24px; opacity: 0; transform: translateY(6px); transition: opacity 0.35s, transform 0.5s var(--ease); pointer-events: none; } .sw-pane.on { opacity: 1; transform: none; transition-delay: 0.08s; } .sw-pane h4 { margin: 14px 0 7px 4px; font-size: 13px; font-weight: 600; color: #9ea3b1; } .sw-pane h4:first-child { margin-top: 0; } .sw-group { display: flow-root; border-radius: 10px; background: #27282e; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); padding: 0 14px; } .sw-row { display: flex; align-items: center; gap: 14px; min-height: 40px; padding: 7px 0; border-top: 1px solid rgba(255, 255, 255, 0.07); } .sw-group > :first-child { border-top: 0; } .sw-row > span:first-child { flex: 1; } /* The app's check that answering by ear works while Spoken Status is on. */ .sw-ok { width: 18px; height: 18px; flex: none; } .sw-ok circle { fill: var(--done); } .sw-ok path { fill: none; stroke: #000; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .sw-ok + span { flex: 1; } .sw-row:first-child { border-top: 0; } .sw-row small { display: block; margin-top: 1px; color: #8e93a1; font-size: 11.5px; } .sw-row em { min-width: 3.4em; font-style: normal; color: #b6bac5; font-variant-numeric: tabular-nums; text-align: right; } .sw-tog { position: relative; flex: none; width: 34px; height: 20px; border-radius: 10px; background: #4a4c55; transition: background 0.3s; } .sw-tog::after { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); transition: transform 0.35s var(--spring); } .sw-tog.on { background: var(--allow); } .sw-tog.on::after { transform: translateX(14px); } .sw-seg { --n: 4; position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); margin: 0 0 10px; padding: 2px; border-radius: 7px; background: #1a1b1f; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); } .sw-seg-2 { --n: 2; } .sw-seg-3 { --n: 3; } .sw-seg span { position: relative; z-index: 1; padding: 4px 8px; text-align: center; white-space: nowrap; color: #c9ccd5; } .sw-seg b { position: absolute; top: 2px; bottom: 2px; left: 2px; width: calc((100% - 4px) / var(--n)); border-radius: 5px; background: #5a5d68; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); transform: translateX(calc(var(--sel) * 100%)); transition: transform 0.5s var(--spring); } .sw-inline { margin: 0; flex: none; } .sw-slider { position: relative; flex: none; width: 150px; height: 4px; border-radius: 2px; background: #45474f; } .sw-slider::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--allow); transform-origin: left; transform: scaleX(var(--v)); } .sw-slider i { position: absolute; top: 50%; left: calc(var(--v) * 100%); width: 18px; height: 18px; margin: -9px; border-radius: 50%; background: #f2f3f6; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); } .sw-pop { padding: 3px 26px 3px 10px; border-radius: 6px; background: #3a3c44; position: relative; } .sw-pop::after { content: ""; position: absolute; right: 9px; top: 50%; width: 6px; height: 6px; margin-top: -5px; border-right: 1.5px solid #c9ccd5; border-bottom: 1.5px solid #c9ccd5; transform: rotate(45deg); } .sw-shapes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 4px 0 14px; } .sw-shapes span { display: grid; justify-items: center; gap: 10px; padding: 16px 8px 12px; border-radius: 10px; background: #1f2025; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); color: #c9ccd5; } .sw-shapes span.on { box-shadow: inset 0 0 0 2px var(--allow); } .sw-shapes i { position: relative; width: 120px; height: 38px; border-radius: 6px 6px 0 0; background: linear-gradient(#34405e, #262f45); } .sw-shapes i::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); background: #000; } .sh-pill::after { top: 13px; width: 64px; height: 15px; border-radius: 8px; } .sh-pill::before { content: ""; position: absolute; inset: 0 0 auto; height: 8px; background: rgba(255, 255, 255, 0.12); border-radius: 6px 6px 0 0; } .sh-island::after { top: 5px; width: 64px; height: 15px; border-radius: 8px; } .sh-notch::after { top: 0; width: 70px; height: 16px; border-radius: 0 0 7px 7px; } .sw-keys { flex: none !important; display: flex; gap: 4px; } .sw-keys kbd { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 5px; border-radius: 5px; background: #3a3c44; box-shadow: 0 1px 0 #111; font: 500 12px/1 var(--font); color: #eceef2; } .sw-dim { color: #a7acb8; } .sw-foot { margin: 10px 4px 0; color: #8e93a1; font-size: 12px; } /* "You choose": the settings that change what Nodtop does, in two columns of three. */ .c-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px 40px; max-width: 960px; margin: 64px auto 0; } .c-grid h3 { margin: 0 0 8px; font-size: 19px; letter-spacing: -0.015em; } .c-grid p { margin: 0; color: var(--mist); } @media (max-width: 900px) { .c-grid { grid-template-columns: 1fr 1fr; } } /* On a phone the sidebar becomes a row of tabs you can swipe and tap, so every pane can still be reached and the tour shows which one is open. Rows with a segmented control put it on its own line at full width, and the window grows to its tallest pane instead of clipping it. */ @media (max-width: 760px) { .sw-body { grid-template-columns: 1fr; grid-template-rows: auto 1fr; height: auto; } .sw-side { flex-direction: row; gap: 6px; padding: 10px 12px; overflow-x: auto; scrollbar-width: none; border-right: 0; border-bottom: 1px solid rgba(0, 0, 0, 0.45); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 32px), transparent); } .sw-side::-webkit-scrollbar { display: none; } .sw-side button { flex: none; height: 32px; padding: 0 12px 0 10px; gap: 7px; border-radius: 99px; white-space: nowrap; } .sw-side button:last-of-type { margin-right: 28px; } .sw-ic { width: 13px; height: 13px; } .sw-side-more { display: none; } .sw-pane { padding: 14px 14px 18px; } .sw-group { padding: 0 12px; } .sw-row small { display: none; } .sw-row { gap: 10px; } .sw-row:has(.sw-inline) { flex-wrap: wrap; row-gap: 8px; padding: 9px 0 11px; } .sw-row:has(.sw-inline) > span:first-child { flex-basis: 100%; } .sw-inline { flex: 1 1 100%; } .sw-slider { width: 84px; } .sw-seg span { padding: 5px 3px; font-size: 11.5px; white-space: normal; line-height: 1.2; align-self: center; } .sw-shapes { gap: 8px; } .sw-shapes span { padding: 12px 4px 10px; font-size: 12px; text-align: center; } .sw-shapes i { width: 100%; max-width: 84px; height: 32px; } .sh-pill::after, .sh-island::after { width: 56%; height: 12px; } .sh-pill::after { top: 11px; } .sh-notch::after { width: 60%; height: 13px; } .sw-keys kbd { min-width: 22px; height: 22px; } .c-grid { grid-template-columns: 1fr; gap: 26px; } } /* Trust */ .trust .lede { margin-left: 0; } .bento { margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .tile { padding: 34px 32px; border-radius: 28px; background: var(--white); } .tile h3 { margin: 0; font-size: 24px; line-height: 1.15; letter-spacing: -0.024em; } .tile p { margin: 10px 0 0; color: var(--steel); } .tile-wide { grid-column: span 2; display: grid; grid-template-columns: 1fr 1.15fr; gap: 28px; align-items: center; } .tile:last-child { grid-column: 1 / -1; } .mini-card { padding: 16px; border-radius: 20px; background: #000; color: #fff; font-size: 12.5px; letter-spacing: 0; } .mini-card, .t-art.risky { --u: 1px; } .mc-head { display: flex; gap: 6px; align-items: center; color: #9e9e9e; } .mc-head svg { width: 14px; height: 14px; flex: none; } .mc-cmd .cpill { vertical-align: 1px; margin-right: 2px; } .mc-cmd { margin-top: 10px; padding: 12px; border-radius: 10px; background: #1f1f1f; box-shadow: inset 0 0 0 1px #333; font: 13px/1.4 var(--mono); color: #ebebeb; overflow-wrap: anywhere; } .mc-cmd .code { color: var(--wait); background: rgba(255, 189, 61, 0.14); border-radius: 4px; padding: 0 3px; } .t-art { margin-bottom: 26px; } .risky { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; } .risky code { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; font: 15px/1 var(--mono); background: #000; color: #ebebeb; padding: 10px 14px 10px 10px; border-radius: 10px; } .risky span { display: flex; gap: 6px; align-items: flex-start; font-size: 13px; line-height: 1.35; font-weight: 600; color: #d70015; } .risky svg { flex: none; width: 15px; height: 13px; margin-top: 1px; } .risky svg path { fill: #d70015; } .risky svg .x { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; } .silence { display: flex; align-items: center; gap: 14px; } .silence svg { width: 46px; height: 46px; transform: rotate(-90deg); } .silence circle { fill: none; stroke: #e5e5ea; stroke-width: 5; } .silence .drain { stroke: var(--steel); stroke-dasharray: 151 151; animation: emptyring 6s linear infinite; stroke-linecap: round; } @keyframes emptyring { 0% { stroke-dashoffset: 0; } 70%, 100% { stroke-dashoffset: 151; } } .silence span { font-size: 13px; font-weight: 600; color: var(--steel); } @media (max-width: 900px) { .bento { grid-template-columns: 1fr; } .tile-wide { grid-column: auto; grid-template-columns: 1fr; } } /* Works with: one stage that shows the jump (the Island over a terminal window), then two white cards in the Trust tiles' language, listing the terminals and the agents. */ .works { padding-bottom: clamp(96px, 12vw, 150px); } .works .lede { margin-left: 0; } /* The stage: a screen's top edge, with the Island over a terminal window. */ .work-demo { position: relative; margin: 56px 0 0; padding: 0 clamp(16px, 6vw, 88px) clamp(36px, 6vw, 72px); border-radius: 28px; overflow: hidden; display: grid; justify-items: center; background: linear-gradient(180deg, rgba(10, 14, 23, 0.2), rgba(10, 14, 23, 0.62)), url("assets/hero-wallpaper.jpg") center 30% / cover, var(--night); box-shadow: 0 18px 40px rgba(18, 24, 38, 0.12); } /* The capsule, in the app's proportions: dots either side of the camera cutout. */ .work-island { display: flex; align-items: center; gap: 2px; margin-top: 10px; padding: 3px 8px; border-radius: 99px; background: var(--black); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); } [data-display="notch"] .work-island { margin-top: 0; border-radius: 0 0 22px 22px; padding: 3px 14px 6px; } .work-cut { width: 46px; height: 40px; position: relative; } [data-display="notch"] .work-cut { width: 130px; } [data-display="display"] .work-cut { width: 12px; } [data-display="display"] .work-cut::after { display: none; } .work-cut::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #2a3a5a 0 18%, #0b0f18 45%, #050608 70%); } .work-island button { position: relative; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; display: grid; place-items: center; } .work-island .dot { --u: 1.3px; transform: none; opacity: 1; transition: none; } .work-island button::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.85); opacity: 0; transform: scale(0.8); transition: opacity 0.25s, transform 0.4s var(--spring); } .work-island button[aria-selected="true"]::before { opacity: 1; transform: none; } .work-island button::after { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.5); opacity: 0; } .work-island button.tapped::after { animation: tapring 0.6s var(--ease) both; } @keyframes tapring { 0% { transform: scale(0.4); opacity: 0.8; } 100% { transform: scale(1.9); opacity: 0; } } /* A quiet invitation under the Island, pointing up at it. It fades once a dot has been tapped. */ .work-hint { position: relative; margin: 14px 0 0; padding-top: 10px; font: 500 13px/1 var(--font); letter-spacing: 0; color: rgba(225, 232, 245, 0.62); transition: opacity 0.5s var(--ease); } .work-hint::before { content: ""; position: absolute; left: 50%; top: 0; width: 6px; height: 6px; margin-left: -3px; border-left: 1.5px solid currentColor; border-top: 1.5px solid currentColor; transform: rotate(45deg); } .work-demo.used .work-hint { opacity: 0; } /* The terminal window: neutral grey lights (colour only means status), tabs on one track with a highlight that glides to the chosen tab, and a body whose panes cross-fade. */ .work-terminal { width: 100%; max-width: 760px; min-width: 0; margin-top: clamp(22px, 3vw, 34px); border-radius: 14px; overflow: hidden; background: rgba(14, 17, 25, 0.9); font-family: var(--mono); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5), 0 0 0 0.5px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.09); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); } .work-bar { position: relative; display: flex; align-items: center; height: 34px; padding: 0 14px; } .work-title { position: absolute; left: 80px; right: 80px; text-align: center; font: 600 12.5px/1 var(--font); color: #9aa3b5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .work-lights { display: flex; gap: 8px; } .work-lights i { width: 12px; height: 12px; border-radius: 50%; background: #3a4152; box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.08); } .work-tabs { position: relative; display: flex; margin: 0 10px; padding: 3px; border-radius: 9px; background: rgba(255, 255, 255, 0.05); } .work-glide { position: absolute; left: 0; top: 3px; bottom: 3px; width: var(--gw, 33%); transform: translateX(var(--gx, 3px)); border-radius: 7px; background: rgba(255, 255, 255, 0.12); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), inset 0 0.5px 0 rgba(255, 255, 255, 0.12); transition: transform 0.45s var(--spring), width 0.45s var(--ease); } .work-tabs span { position: relative; min-width: 0; flex: 1 1 0; padding: 7px 9px; color: #8a93a6; font: 500 13px/1 var(--font); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color 0.3s; } .work-tabs span.on { color: #f2f5fa; } .work-body { display: grid; height: 176px; margin-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.07); } .work-pane { grid-area: 1 / 1; min-width: 0; display: flex; flex-direction: column; justify-content: flex-start; padding: 22px 22px 22px; color: #d8deea; font-size: 15px; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 0.35s var(--ease), transform 0.45s var(--ease), visibility 0s 0.35s; } .work-pane.on { opacity: 1; visibility: visible; transform: none; transition: opacity 0.35s var(--ease) 0.08s, transform 0.45s var(--ease) 0.08s, visibility 0s; } /* Earlier output, drawn as quiet bars so the eye goes to the live line. */ .work-past { display: grid; gap: 11px; margin-bottom: 18px; } .work-past i { display: block; width: var(--w); height: 7px; border-radius: 4px; background: rgba(255, 255, 255, 0.075); } .work-cmd { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .work-pane b { color: var(--done); font-weight: 500; } .work-pane em { margin-left: 12px; color: #7d879b; font-style: normal; } .work-caret { display: inline-block; width: 0.55em; height: 1.1em; margin-left: 10px; vertical-align: -0.2em; background: rgba(216, 222, 234, 0.75); animation: caret 1.1s steps(1) infinite; } @keyframes caret { 50% { opacity: 0; } } /* tmux: two panes with the session's pane lit, and tmux's status line along the bottom. */ .work-pane.work-tmux { padding: 0; } .tmux-panes { flex: 1; display: grid; grid-template-columns: 1.5fr 1fr; min-height: 0; } .tmux-pane { display: flex; flex-direction: column; justify-content: flex-start; min-width: 0; padding: 18px 20px 20px; opacity: 0.5; } .tmux-pane + .tmux-pane { border-left: 1px solid rgba(255, 255, 255, 0.12); } .tmux-pane.on { opacity: 1; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28); border-radius: 2px; } .tmux-status { display: flex; gap: 14px; align-items: center; height: 24px; padding: 0 12px; background: rgba(255, 255, 255, 0.08); font-size: 12px; color: #8a93a6; } .tmux-status b { color: #f2f5fa; font-weight: 500; } @media (max-width: 620px) { .work-body { height: 196px; } .work-pane { padding: 18px 16px 20px; font-size: 14px; } .work-pane em { display: block; margin: 6px 0 0 0; } .work-cmd { white-space: normal; } .tmux-panes { grid-template-columns: 1fr 0.55fr; } .tmux-pane { padding: 16px 14px 16px; } .work-tabs span { padding: 7px 4px; font-size: 12px; } .work-title { left: 70px; right: 16px; text-align: left; } } html:not(.js) .work-island, html:not(.js) .work-hint, html:not(.js) .work-glide { display: none; } html:not(.js) .work-pane[data-work-pane="web"] { opacity: 1; visibility: visible; transform: none; } @media (prefers-reduced-motion: reduce) { .work-caret { animation: none; } .work-glide, .work-pane { transition-duration: 0s; } } /* The lists: two white cards, a small heading over a row of items, split by hairlines. */ .wk-grid { position: relative; display: grid; gap: 20px; margin-top: 20px; } .wk-card { padding: 30px 32px 34px; border-radius: 28px; background: var(--white); } .wk-eyebrow { margin: 0 0 26px; font: 600 15px/1.2 var(--font); letter-spacing: -0.005em; color: var(--steel); } .wk-terms, .wk-agents { list-style: none; margin: 0; padding: 0; display: grid; } .wk-terms { grid-template-columns: repeat(4, minmax(0, 1fr)); } .wk-agents { grid-template-columns: repeat(3, minmax(0, 1fr)); } .wk-terms li, .wk-agents li { min-width: 0; padding: 0 24px; } .wk-terms li:first-child, .wk-agents li:first-child { padding-left: 0; } .wk-terms li + li, .wk-agents li + li { border-left: 1px solid var(--hair-light); } .wk-terms li { display: grid; justify-items: start; align-content: start; gap: 4px; } .wk-terms b, .wk-agents b { display: block; font: 600 21px/1.2 var(--display); letter-spacing: -0.02em; color: var(--ink); } .wk-terms small { font-size: 15px; line-height: 1.35; color: var(--steel); } /* A plain window glyph, not any app's icon: a dark rounded square with a prompt, or tmux's split. */ .wk-glyph { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 14px; border-radius: 11px; background: linear-gradient(180deg, #2a2f3b, #141821); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 4px 10px rgba(18, 24, 38, 0.18); } .wk-glyph i { font: 600 14px/1 var(--mono); font-style: normal; color: #e6ebf4; letter-spacing: -0.04em; } .wk-split { grid-template-columns: 1.4fr 1fr; gap: 3px; padding: 9px; place-items: stretch; } .wk-split i { border-radius: 3px; box-shadow: inset 0 0 0 1.5px rgba(230, 235, 244, 0.32); } .wk-split i:first-child { box-shadow: inset 0 0 0 1.5px #e6ebf4; } .wk-agents li { display: flex; gap: 16px; align-items: flex-start; } .wk-agents p { margin: 4px 0 0; font-size: 15px; line-height: 1.4; color: var(--steel); } :lang(ja) .wk-terms small, :lang(ja) .wk-agents p, :lang(ja) .work-hint { word-break: auto-phrase; } /* Each agent's shape in a little piece of the Island, as the app draws it. */ .wk-mark { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--black); box-shadow: 0 4px 10px rgba(18, 24, 38, 0.18); } .shape { width: 18px; height: 18px; border: 2.5px solid #e6ebf4; } .s-circle { border-radius: 50%; } .s-square { border-radius: 5px; } .s-diamond { width: 15px; height: 15px; border-radius: 3px; transform: rotate(45deg); } @media (max-width: 900px) { .wk-terms { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; } .wk-terms li:nth-child(3) { padding-left: 0; border-left: 0; } .wk-agents { grid-template-columns: 1fr; } .wk-agents li { padding: 20px 0 0; } .wk-agents li:first-child { padding-top: 0; } .wk-agents li + li { margin-top: 20px; border-left: 0; border-top: 1px solid var(--hair-light); } } @media (max-width: 620px) { .wk-card { padding: 26px 22px 28px; } .wk-terms li { padding: 0 16px; } .wk-terms li:nth-child(odd) { padding-left: 0; } .wk-terms b, .wk-agents b { font-size: 19px; } } /* Welcome */ .welcome { background: var(--night); overflow: hidden; } .shots { --t: 1; margin: 72px auto 0; width: min(1180px, 100% - 2 * var(--gutter)); display: grid; grid-template-columns: 1fr 1.2fr 1fr; align-items: center; perspective: 1800px; } .shot { margin: 0; border-radius: 16px; overflow: hidden; box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.08); } .shot:first-child { transform: translateX(calc((1 - var(--t)) * 16%)) translateZ(-140px) rotateY(calc((1 - var(--t)) * 28deg + 8deg)); transform-origin: right center; opacity: calc(0.4 + var(--t) * 0.5); } .shot:last-child { transform: translateX(calc((var(--t) - 1) * 16%)) translateZ(-140px) rotateY(calc((var(--t) - 1) * 28deg - 8deg)); transform-origin: left center; opacity: calc(0.4 + var(--t) * 0.5); } .shot-main { position: relative; z-index: 1; transform: translateY(calc((1 - var(--t)) * 60px)) rotateX(calc((1 - var(--t)) * 14deg)); } /* On a phone, all three captures in a row you swipe through: each snaps to the centre, and the neighbours peek in at the sides so the row reads as swipeable. It opens on the middle one. */ @media (max-width: 760px) { .shots { display: flex; gap: 14px; width: 100%; margin-top: 56px; padding: 8px max(var(--gutter), calc((100% - 300px) / 2)) 40px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; perspective: none; } .shots::-webkit-scrollbar { display: none; } .shots .shot { flex: 0 0 min(300px, 78%); scroll-snap-align: center; transform: none; opacity: 1; box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.08); } } /* Specs */ .spec-list { margin: 48px 0 0; } .spec-list > div { display: grid; grid-template-columns: 200px 1fr; gap: 24px; padding: 22px 0; border-top: 1px solid var(--hair-light); } .spec-list dt { font-weight: 600; } .spec-list dd { margin: 0; color: #3b4559; } @media (max-width: 640px) { .spec-list > div { grid-template-columns: 1fr; gap: 4px; } } /* FAQ */ .faq { padding-bottom: clamp(96px, 12vw, 150px); } .faq-list { margin-top: 40px; } .faq details { border-top: 1px solid var(--hair-light); interpolate-size: allow-keywords; } .faq details:last-child { border-bottom: 1px solid var(--hair-light); } .faq summary { list-style: none; cursor: pointer; padding: 22px 44px 22px 0; position: relative; font-size: 21px; font-weight: 600; letter-spacing: -0.02em; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 12px; height: 12px; margin-top: -9px; border-right: 2px solid var(--steel); border-bottom: 2px solid var(--steel); transform: rotate(45deg); transition: transform 0.4s var(--ease); } .faq details[open] summary::after { transform: translateY(5px) rotate(-135deg); } .faq details::details-content { height: 0; overflow: clip; transition: height 0.45s var(--ease), content-visibility 0.45s allow-discrete; } .faq details[open]::details-content { height: auto; } .faq .ans p { margin: 0 0 24px; max-width: 40em; color: #3b4559; } /* Usage: the app's usage view, with a short loop while on screen */ .usage { background: var(--night); padding-top: 40px; padding-bottom: clamp(72px, 8vw, 110px); } .usage .lede { max-width: 34em; margin-left: auto; margin-right: auto; } .u-demo { margin: 56px auto 0; width: min(600px, 100%); } /* The top of the same Mac screen as the hero's: the lid's edge and black bezel, the hero's wallpaper, and a dark, translucent menu bar with a few faint menus either side of the Island. It fades into the page toward the sides and the bottom, like a close-up. --su is the Island's points (as .island-usage), --bz the bezel, --mb the menu bar: the Island's 32 pt with 8 above and 6 below. The screen is drawn on ::before, so its fade never touches the Island on top. */ .u-screen { --su: min(1.6px, calc((100vw - 48px) / 290)); --bz: calc(var(--su) * 9); --mb: calc(var(--su) * 46); position: relative; height: calc(var(--bz) + var(--su) * 80); /* The Island's box is 420 pt wide, wider than a phone: clip it, or the page scrolls sideways. */ overflow: hidden; } /* Menus on the left and status items on the right are faint pills in the menu bar, drawn in points and kept clear of the Island: 138 pt from the centre at most, 156 pt while it shows a reset. Each group is placed by background-position, where calc(50% ± x) aligns the group's centre with the screen's. */ .u-screen::before { content: ""; position: absolute; inset: 0; pointer-events: none; border-top: 1px solid #4a4b51; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 170 10'%3E%3Ccircle cx='5' cy='5' r='4.5' fill='%23fff' fill-opacity='.42'/%3E%3Crect x='22' y='2.5' width='30' height='5' rx='2.5' fill='%23fff' fill-opacity='.5'/%3E%3Crect x='66' y='2.5' width='24' height='5' rx='2.5' fill='%23fff' fill-opacity='.3'/%3E%3Crect x='104' y='2.5' width='28' height='5' rx='2.5' fill='%23fff' fill-opacity='.3'/%3E%3Crect x='146' y='2.5' width='24' height='5' rx='2.5' fill='%23fff' fill-opacity='.3'/%3E%3C/svg%3E") calc(50% - var(--su) * 251) calc(var(--bz) + var(--mb) / 2 - var(--su) * 5) / calc(var(--su) * 170) calc(var(--su) * 10) no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 10'%3E%3Crect x='0' y='1.5' width='12' height='7' rx='2' fill='%23fff' fill-opacity='.32'/%3E%3Ccircle cx='30' cy='5' r='3.6' fill='%23fff' fill-opacity='.32'/%3E%3Crect x='44' y='1.5' width='16' height='7' rx='3.5' fill='%23fff' fill-opacity='.32'/%3E%3Crect x='76' y='2.5' width='46' height='5' rx='2.5' fill='%23fff' fill-opacity='.36'/%3E%3C/svg%3E") calc(50% + var(--su) * 241) calc(var(--bz) + var(--mb) / 2 - var(--su) * 5) / calc(var(--su) * 150) calc(var(--su) * 10) no-repeat, linear-gradient(#060607, #060607) 0 0 / 100% var(--bz) no-repeat, linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0) 35%) 0 var(--bz) / 100% var(--mb) no-repeat, linear-gradient(rgba(14, 14, 18, 0.6), rgba(14, 14, 18, 0.6)) 0 var(--bz) / 100% var(--mb) no-repeat, linear-gradient(rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.07)) 0 calc(var(--bz) + var(--mb)) / 100% 1px no-repeat, linear-gradient(rgba(8, 8, 12, 0.3), rgba(8, 8, 12, 0.3)), url("assets/hero-wallpaper.jpg") 74% calc(var(--bz) - var(--su) * 40) / calc(var(--su) * 860) auto no-repeat, #232326; -webkit-mask-image: radial-gradient(50% 100% at 50% 0, #000 50%, rgba(0, 0, 0, 0.55) 76%, transparent 100%); mask-image: radial-gradient(50% 100% at 50% 0, #000 50%, rgba(0, 0, 0, 0.55) 76%, transparent 100%); } @media (min-width: 900px) { .u-screen { margin-inline: -110px; } } .island-usage { --u: min(1.15px, calc((100vw - 48px) / 410)); position: absolute; z-index: 1; top: var(--bz, 0px); left: 50%; transform: translateX(-50%); height: calc(var(--u) * 48); } [data-display="island"] .island-usage { --u: min(1.6px, calc((100vw - 48px) / 290)); } .island-usage[data-state="toast"] .isl-shape { width: calc(var(--u) * (var(--cut-w) + 2 * var(--side) + 36)); } .island-usage[data-state="toast"] .isl-side { opacity: 0; } .u-toast { position: absolute; left: 50%; top: calc(var(--u) * (var(--cut-top) + 6)); height: calc(var(--u) * 20); transform: translateX(-50%); width: calc(var(--u) * (var(--cut-w) + 2 * var(--side) + 20)); display: flex; justify-content: space-between; align-items: center; padding: 0 calc(var(--u) * 14); box-sizing: border-box; font: 600 calc(var(--u) * 11.5) / 1 var(--font); color: #fff; opacity: 0; transition: opacity 0.25s; } .u-toast span { display: flex; align-items: center; gap: calc(var(--u) * 5); white-space: nowrap; } .u-toast .ut-r { color: #30d158; font-weight: 700; } .u-toast svg { width: calc(var(--u) * 13); height: calc(var(--u) * 13); transform: rotate(-90deg); } .u-toast circle { fill: none; stroke: #30d158; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 100 100; } .island-usage[data-state="toast"] .u-toast { opacity: 1; transition-delay: 0.25s; } .island-usage[data-state="toast"] .u-toast circle { animation: drain 1.1s var(--ease) 0.6s forwards; } @keyframes drain { to { stroke-dasharray: 0 100; } } .u-toast .uc-glyph { --g: calc(var(--u) * 10); } /* The hover panel's usage cards, as the app draws them. */ .u-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; padding: 14px; background: #000; border-radius: 24px; text-align: left; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06); } .u-card { position: relative; padding: 13px 14px 12px; border-radius: 10px; background: #131313; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), inset 0 0 0 1px rgba(255, 255, 255, 0.03); } .uc-head { display: flex; align-items: center; gap: 7px; color: #a2a2a7; font-size: 14px; font-weight: 600; min-height: 24px; } .uc-glyph { --g: 11px; flex: none; width: var(--g); height: var(--g); border-radius: 50%; box-shadow: inset 0 0 0 2px currentColor; } .uc-glyph.sq { border-radius: 3px; } .uc-chip { margin-left: auto; font-style: normal; font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 99px; background: rgba(255, 255, 255, 0.10); color: #d8d8dc; white-space: nowrap; } .uc-chip.warn { background: rgba(255, 159, 10, 0.14); color: #ff9f0a; opacity: 0; transform: scale(0.85); transition: opacity 0.3s, transform 0.4s var(--spring); } .u-card.fast .uc-chip.warn { opacity: 1; transform: none; } .uc-main { display: flex; align-items: baseline; gap: 6px; margin-top: 6px; color: #a2a2a7; font-size: 14px; } .uc-pct { font: 600 32px/1.1 var(--rounded); color: #fff; font-variant-numeric: tabular-nums; letter-spacing: 0; } .uc-reset { margin-left: auto; } .uc-bar { position: relative; height: 6px; margin-top: 8px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); overflow: hidden; } .uc-bar.thin { flex: 1; height: 4px; margin: 0; } .uc-fill { position: absolute; inset: 0; border-radius: inherit; transform-origin: left; transform: scaleX(0); transition: transform 0.8s var(--ease), background 0.8s; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); } .uc-notch { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #131313; } .uc-caret { position: absolute; margin: 1px 0 0 -3px; width: 0; height: 0; border: 3px solid transparent; border-bottom: 4px solid rgba(255, 255, 255, 0.35); border-top: 0; left: 58%; transform: translateX(calc(14px * 0)); } .u-card .uc-caret { position: relative; display: block; margin-left: calc(-3px); } .uc-week { display: flex; align-items: center; gap: 8px; margin-top: 8px; font: 500 13px/1 var(--rounded); color: #6c6c70; } .uc-week b { color: #a2a2a7; font-weight: 600; font-variant-numeric: tabular-nums; } .u-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin: 64px auto 0; max-width: 960px; text-align: left; } .u-points h3 { margin: 0 0 8px; font-size: 19px; } .u-points p { margin: 0; color: var(--mist); } @media (max-width: 760px) { .u-points { grid-template-columns: 1fr; gap: 22px; } } @media (max-width: 560px) { .u-panel { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .uc-fill, .uc-chip.warn { transition: none; } } /* Call to action */ .notify { background: var(--night); } /* A strip of screen, so the black Island has something to sit on. */ .cta-screen { position: relative; width: min(440px, 100%); height: 96px; margin: 0 auto 56px; border-radius: 0 0 26px 26px; overflow: hidden; background: radial-gradient(60% 120% at 80% 0%, #333338, transparent 70%), radial-gradient(70% 140% at 10% 100%, #242428, transparent 70%), #111113; -webkit-mask-image: linear-gradient(#000 40%, transparent); mask-image: linear-gradient(#000 40%, transparent); } .island-cta { --u: min(1.15px, calc((100vw - 60px) / 345)); position: absolute; top: 0; left: 50%; transform: translateX(-50%); height: calc(var(--u) * 48); } [data-display="island"] .island-cta, [data-display="display"] .island-cta { --u: min(1.35px, calc((100vw - 60px) / 215)); } .island-cta .isl-shape { box-shadow: 0 0 40px rgba(82, 214, 133, 0.18); } /* Pills set their own display, so hidden needs saying twice. */ [data-download][hidden], [data-film][hidden] { display: none !important; } .get-cta { margin: 36px 0 0; } .get-cta:has([hidden]) { display: none; } .get-cta .pill { min-height: 50px; } .price { margin: 6px 0 0; color: var(--mist); font-size: 15px; } /* Footer */ .foot { background: var(--paper); color: var(--steel); padding: 40px 0 56px; font-size: 12px; line-height: 1.5; letter-spacing: -0.01em; } .notes { margin: 0 0 18px; padding-left: 1.4em; border-bottom: 1px solid var(--hair-light); padding-bottom: 18px; } .notes li { margin-bottom: 8px; } .notes li:target { color: var(--ink); } .legal { margin: 0 0 8px; } /* Film */ .film { width: min(1100px, 92vw); padding: 0; border: 0; border-radius: 18px; background: var(--black); overflow: visible; } .film::backdrop { background: rgba(6, 9, 15, 0.88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .film video { display: block; width: 100%; border-radius: 18px; } .film-close { position: absolute; right: -6px; top: -54px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--night-3); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; } .film[open] { animation: filmin 0.5s var(--ease); } @keyframes filmin { from { opacity: 0; transform: scale(0.96); } } /* Reveal: headlines and grids rise into place once. */ .js .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.9s var(--ease), transform 1s var(--ease); transition-delay: calc(var(--k, 0) * 80ms); } .js .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; } .js .reveal { opacity: 1; transform: none; } .lang-card > a, .nav-card > a { animation-delay: 0s !important; } .press-count i { background: var(--listen); } .press .spot { opacity: 0.8; } .press .pinch::before, .press .pinch::after { opacity: 1; } .drift i { display: none; } .lang-card, .nav-card { clip-path: none !important; } } /* Without JavaScript the pinned scenes would be empty scroll, so they collapse. */ html:not(.js) .scene { height: auto; } html:not(.js) .stage { position: relative; height: auto; min-height: 100vh; } .a-done { font-style: normal; } html:not(.js) .mac, html:not(.js) .story, html:not(.js) .an-visual, html:not(.js) .hl-controls { display: none; } html:not(.js) [data-only="notch"], html:not(.js) [data-only="display"], html:not(.js) .display-switch { display: none; } html:not(.js) .hero-copy { position: relative; top: auto; padding-top: calc(var(--nav-h) + 12vh); } html:not(.js) .an-steps { height: auto; } html:not(.js) .step { position: static; opacity: 1; transform: none; margin-bottom: 32px; } html:not(.js) .airnod .stage { display: block; } /* Dynamic Island or notch, a segmented control like Apple's model pickers. */ .display-switch { position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: auto; padding: 3px; border-radius: 99px; background: rgba(29, 38, 56, 0.78); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); } .display-switch button { position: relative; z-index: 1; min-height: 38px; padding: 0 18px; border: 0; background: none; border-radius: 99px; cursor: pointer; font-size: 14px; font-weight: 500; color: var(--mist); white-space: nowrap; transition: color 0.3s; } .display-switch button[aria-checked="true"] { color: var(--ink); } /* The thumb is sized to the chosen label by main.js, so long translations fit. */ .display-switch .ds-thumb { position: absolute; top: 3px; bottom: 3px; left: 0; width: var(--tw, 50%); transform: translateX(var(--tx, 3px)); border-radius: 99px; background: var(--white); transition: transform 0.5s var(--spring), width 0.5s var(--spring); } .hero-switch { position: absolute; left: 50%; bottom: max(22px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 4; } .scroll-cue { position: absolute; left: 50%; bottom: max(30px, env(safe-area-inset-bottom)); width: 28px; height: 28px; margin-left: -14px; color: rgba(220, 228, 245, 0.55); z-index: 4; pointer-events: none; animation: cue 2.4s var(--ease) infinite; } /* The cue's own opacity is left to main.js, which fades it on the first scroll, so the bob animates only the arrow inside it. */ .scroll-cue svg { width: 100%; height: 100%; display: block; animation: cueGlow 2.4s var(--ease) infinite; } @keyframes cue { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } } @keyframes cueGlow { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .scroll-cue { display: none; } } html:not(.js) .scroll-cue { display: none; } .notify .display-switch { margin-top: 28px; } @media (max-width: 520px) { .display-switch button { padding: 0 11px; font-size: 13px; } } [data-display="island"] .menubar { height: 2.6cqw; } /* A 24 pt menu bar on a 2560 pt wide screen. */ [data-display="display"] .menubar { height: 0.94cqw; gap: 0.7cqw; padding-left: 0.8cqw; } [data-display="display"] .menubar span { width: 1.3cqw; height: 0.26cqw; } [data-display="display"] .menubar span:first-child { width: 0.5cqw; height: 0.5cqw; } /* External display: a studio display, drawn rather than photographed, with no logo. The lid becomes its panel, at 16:9 with an even black border and a thin dark edge, and the laptop's deck and hinge give way to a stand made like one bent sheet of aluminium: a straight upright slab about a quarter of the display's width, with a round cable opening at its top, standing on a thin foot of the same width. The stand is the MacBook's space black aluminium, lit from the upper left like its lid: the same greys, brighter on the left, with the light catching only the edges that face it. The screen inside is the same as the MacBook's. */ .stand { display: none; } [data-display="display"] .lid { height: var(--lid-h, calc(var(--mac-w, 900px) * 0.5625)); } [data-display="display"] .lid-front { opacity: 1; border-radius: calc(var(--mac-w, 900px) * 0.012); background: #040405; box-shadow: 0 0 0 calc(var(--mac-w, 900px) * 0.0025) #1c1c1f, 0 0 0 calc(var(--mac-w, 900px) * 0.004) #3a3b40, 0 calc(var(--mac-w, 900px) * 0.02) calc(var(--mac-w, 900px) * 0.05) rgba(0, 0, 0, 0.45); } [data-display="display"] .lid-front::before { content: ""; position: absolute; z-index: 2; left: 50%; top: calc(var(--mac-bezel) * 0.5); width: calc(var(--mac-w, 900px) * 0.005); height: calc(var(--mac-w, 900px) * 0.005); transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle at 35% 35%, #2a3a5a 0 18%, #0b0f18 50%, #050608 75%); } [data-display="display"] .screen { border-radius: calc(var(--mac-w, 900px) * 0.004); } [data-display="display"] .lid-back, [data-display="display"] .hinge, [data-display="display"] .deck { display: none; } [data-display="display"] .stand { display: block; position: absolute; left: 0; right: 0; top: 100%; height: calc(var(--mac-w, 900px) * 0.185); pointer-events: none; } .stand-neck { position: absolute; left: 38%; right: 38%; top: 0; bottom: 6%; background: linear-gradient(106deg, transparent 10%, rgba(255, 255, 255, 0.06) 30%, rgba(255, 255, 255, 0.02) 46%, transparent 62%), linear-gradient(90deg, #55565c, #4b4c51 12%, #424348 50%, #3a3b40 88%, #323337); /* Darker where it meets the display, which shades it from above, and a lit left edge facing the light. */ box-shadow: inset 0 calc(var(--mac-w, 900px) * 0.016) calc(var(--mac-w, 900px) * 0.014) rgba(0, 0, 0, 0.45), inset 1px 0 0 rgba(255, 255, 255, 0.13), inset -1px 0 0 rgba(255, 255, 255, 0.035); } /* The cable opening: a half circle cut from the top of the slab, showing the night behind it. */ .stand-neck::before { content: ""; position: absolute; left: 50%; top: 0; width: 22%; aspect-ratio: 2 / 1; transform: translateX(-50%); box-sizing: border-box; border-radius: 0 0 999px 999px; background: var(--night, #0a0e17); /* A lit rim, the cut edge of the aluminium, so it reads as a hole rather than a shadow. */ border: calc(var(--mac-w, 900px) * 0.0022) solid #7a7b81; border-top: 0; box-shadow: 0 calc(var(--mac-w, 900px) * 0.002) calc(var(--mac-w, 900px) * 0.003) rgba(0, 0, 0, 0.25); } .stand-foot { position: absolute; left: 37.6%; right: 37.6%; bottom: 0; height: 6%; border-radius: calc(var(--mac-w, 900px) * 0.002) calc(var(--mac-w, 900px) * 0.002) calc(var(--mac-w, 900px) * 0.003) calc(var(--mac-w, 900px) * 0.003); /* Its front face, shaded like the MacBook's front edge: lit along the top, falling to near black. */ background: linear-gradient(180deg, #a4a5ab 0%, #77787e 14%, #4a4b50 40%, #313236 75%, #1e1f22 100%); box-shadow: 0 calc(var(--mac-w, 900px) * 0.008) calc(var(--mac-w, 900px) * 0.016) rgba(0, 0, 0, 0.55); } /* Two small rubber feet at the front corners. */ .stand-foot::before, .stand-foot::after { content: ""; position: absolute; bottom: calc(var(--mac-w, 900px) * -0.0025); width: 9%; height: calc(var(--mac-w, 900px) * 0.0028); border-radius: 0 0 2px 2px; background: #08090a; } .stand-foot::before { left: 7%; } .stand-foot::after { right: 7%; } [data-display="display"] .floor { top: calc(100% + var(--mac-w, 900px) * 0.17); left: 30%; right: 30%; } /* ------------------------------------------------------------------ The geometric companion (buddy.js) */ .buddy { position: relative; display: block; } .buddy-svg { display: block; width: 100%; height: auto; overflow: visible; } .buddy g, .buddy path, .buddy ellipse, .buddy circle { transform-box: fill-box; transform-origin: 50% 50%; } .b-shadow { fill: #000; opacity: 0.45; filter: blur(4px); transition: transform 0.4s var(--ease), opacity 0.4s; } .b-body { transform-origin: 50% 100% !important; } .b-shine { fill: #fff; opacity: 0.42; transform: rotate(-26deg); filter: blur(4px); } .b-eye ellipse { fill: #f5f5f7; } .b-glint { fill: #fff; } .b-joy path, .b-mouth { fill: none; stroke: #f5f5f7; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; } .b-joy { opacity: 0; transform: scale(0.6); transition: opacity 0.2s, transform 0.35s var(--spring); } .b-eyes { transition: opacity 0.15s, transform 0.4s var(--ease); } .b-grin { fill: none; stroke-width: 5; opacity: 0; transform: scale(0.4); transition: opacity 0.2s, transform 0.4s var(--spring); } .b-wobble { opacity: 0; stroke-width: 4; transition: opacity 0.2s; } .b-smile { transition: opacity 0.2s, transform 0.3s var(--ease); } .b-glow { fill: var(--listen); opacity: 0; filter: blur(6px); transition: opacity 0.4s; } .b-spark { fill: #f5f5f7; opacity: 0; transform: scale(0); } /* Idle: breathe and blink. */ .buddy .b-body { animation: breathe 3.6s ease-in-out infinite; } .buddy .b-eyes { animation: blink 4.4s infinite; } @keyframes breathe { 0%, 100% { transform: translateY(0) scale(1, 1); } 50% { transform: translateY(-2px) scale(1.008, 0.992); } } @keyframes blink { 0%, 91%, 97%, 100% { transform: scaleY(1); } 94% { transform: scaleY(0.08); } } /* Listen: eyes up, earbuds glowing. */ .buddy[data-mood="listen"] .b-face { transform: translateY(-5px); transition: transform 0.5s var(--ease); } .buddy[data-mood="listen"] .b-glow, .buddy[data-mood="speak"] .b-bud-l .b-glow { animation: budglow 1.4s ease-in-out infinite; } @keyframes budglow { 0%, 100% { opacity: 0.2; } 50% { opacity: 0.95; } } .b-face { transition: transform 0.5s var(--ease); } /* Nod: twice, like "yes, yes". */ .buddy[data-mood="nod"] .b-body { animation: nodbody 1.5s var(--ease) 0.1s both; } .buddy[data-mood="nod"] .b-face { animation: nodface2 1.5s var(--ease) 0.1s both; } .buddy[data-mood="nod"] .b-shadow { animation: nodshadow 1.5s var(--ease) 0.1s both; } @keyframes nodbody { 0%, 54%, 100% { transform: none; } 12%, 40% { transform: translateY(7px) scale(1.03, 0.95); } 26% { transform: translateY(-2px) scale(0.99, 1.02); } } @keyframes nodface2 { 0%, 54%, 100% { transform: none; } 12%, 40% { transform: translateY(13px); } 26% { transform: translateY(-3px); } } @keyframes nodshadow { 0%, 54%, 100% { transform: none; } 12%, 40% { transform: scale(1.1, 1); } } /* Shake: no, no. */ .buddy[data-mood="shake"] .b-face { animation: shakeface 1.3s var(--ease) 0.1s both; } .buddy[data-mood="shake"] .b-body { animation: shakebody 1.3s var(--ease) 0.1s both; } .buddy[data-mood="shake"] .b-smile { opacity: 0; } .buddy[data-mood="shake"] .b-wobble { opacity: 1; } @keyframes shakeface { 0%, 80%, 100% { transform: none; } 14% { transform: translateX(-15px); } 32% { transform: translateX(15px); } 50% { transform: translateX(-11px); } 66% { transform: translateX(6px); } } @keyframes shakebody { 0%, 80%, 100% { transform: none; } 14% { transform: rotate(-4deg); } 32% { transform: rotate(4deg); } 50% { transform: rotate(-3deg); } 66% { transform: rotate(1deg); } } /* Happy: ^ ^, a grin, a hop and two sparkles. */ .buddy[data-mood="happy"] .b-eyes { opacity: 0; animation: none; } .buddy[data-mood="happy"] .b-joy { opacity: 1; transform: none; } .buddy[data-mood="happy"] .b-smile { opacity: 0; } .buddy[data-mood="happy"] .b-grin { opacity: 1; transform: none; } .buddy[data-mood="happy"] .b-cheek { transform: scale(1.18); } .buddy[data-mood="happy"] .b-body { animation: hop 0.9s var(--ease) 0.05s both; } .buddy[data-mood="happy"] .b-shadow { animation: hopshadow 0.9s var(--ease) 0.05s both; } .buddy[data-mood="happy"] .b-spark-a { animation: spark 1.1s var(--ease) 0.35s both; } .buddy[data-mood="happy"] .b-spark-b { animation: spark 1.1s var(--ease) 0.5s both; } @keyframes hop { 0% { transform: none; } 18% { transform: translateY(4px) scale(1.06, 0.93); } 45% { transform: translateY(-16px) scale(0.97, 1.04); } 70% { transform: translateY(2px) scale(1.03, 0.97); } 100% { transform: none; } } @keyframes hopshadow { 0%, 100% { transform: none; opacity: 0.45; } 45% { transform: scale(0.8); opacity: 0.25; } } @keyframes spark { 0% { opacity: 0; transform: scale(0) rotate(0); } 40% { opacity: 1; transform: scale(1.2) rotate(30deg); } 100% { opacity: 0.9; transform: scale(1) rotate(45deg); } } @media (prefers-reduced-motion: reduce) { .buddy .b-body, .buddy .b-eyes { animation: none !important; } } /* Looping moods for the small gesture tiles. */ .buddy[data-mood="nod-loop"] .b-body { animation: nodbody 2.8s var(--ease) infinite; } .buddy[data-mood="nod-loop"] .b-face { animation: nodface2 2.8s var(--ease) infinite; } .buddy[data-mood="shake-loop"] .b-face { animation: shakeface 2.8s var(--ease) infinite; } .buddy[data-mood="shake-loop"] .b-body { animation: shakebody 2.8s var(--ease) infinite; } .buddy[data-mood="shake-loop"] .b-smile { opacity: 0; } .buddy[data-mood="shake-loop"] .b-wobble { opacity: 1; } .g-art.g-buddy { width: 80px; height: 84px; margin: 0 0 0 -4px; } /* Glass: a faint diagonal reflection over the screen, like light from a window. */ .glass { position: absolute; inset: 0; z-index: 5; pointer-events: none; background: linear-gradient(118deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.025) 28%, transparent 42%), linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 30%); } /* The floor shadow, which tightens as the lid opens. */ .floor { position: absolute; left: 4%; right: 4%; top: calc(100% + var(--mac-w, 900px) * 0.02); height: calc(var(--mac-w, 900px) * 0.05); border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.85), transparent); filter: blur(6px); transform: translateZ(0); } /* A press, shown as it happens: a soft blue spot on the stem, marks pinching it, and a counter that fills one ring per press. Sized by --k, pixels per unit of the earbud's 80 x 120 drawing. */ .press { --k: 0.62px; display: inline-flex; align-items: center; gap: 16px; } .press-col { flex-direction: column; gap: 18px; } .press-bud { position: relative; flex: none; width: calc(80 * var(--k)); height: calc(120 * var(--k)); } .press-bud svg { position: absolute; inset: 0; width: 100%; height: 100%; } .press .spot, .press .pinch { position: absolute; left: calc(43.4 * var(--k)); top: calc(80 * var(--k)); translate: -50% -50%; } /* The pair, as in the highlights: the right pod's stem is pressed. */ .press-pair .press-bud { width: calc(120 * var(--k)); height: calc(100 * var(--k)); color: #f5f6f8; } .press-pair .spot, .press-pair .pinch { left: calc(94.5 * var(--k)); top: calc(64 * var(--k)); } .press-pair .pinch { width: calc(46 * var(--k)); } .press .spot { width: calc(36 * var(--k)); height: calc(36 * var(--k)); border-radius: 50%; background: radial-gradient(circle, rgba(115, 184, 255, 0.95), rgba(115, 184, 255, 0) 70%); opacity: 0; } .press .pinch { width: max(calc(74 * var(--k)), 58px); height: 12px; } .press .pinch::before, .press .pinch::after { content: ""; position: absolute; top: 50%; width: 10px; height: 10px; margin-top: -5px; border: solid var(--listen); border-width: 2.5px 2.5px 0 0; border-radius: 1px; opacity: 0.35; transform: translateX(0) rotate(var(--rot)); } .press .pinch::before { left: 0; --rot: 45deg; --dir: 1; } .press .pinch::after { right: 0; --rot: -135deg; --dir: -1; } .press-count { display: flex; gap: 7px; } .press-count i { width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--listen); opacity: 0.9; } .press[data-n="2"] .spot { animation: press2 2.4s ease-in-out infinite; } .press[data-n="3"] .spot { animation: press3 2.6s ease-in-out infinite; } .press[data-n="2"] .pinch::before, .press[data-n="2"] .pinch::after { animation: pinch2 2.4s ease-in-out infinite; } .press[data-n="3"] .pinch::before, .press[data-n="3"] .pinch::after { animation: pinch3 2.6s ease-in-out infinite; } .press[data-n="2"] .press-count i:nth-child(1) { animation: fill14 2.4s linear infinite; } .press[data-n="2"] .press-count i:nth-child(2) { animation: fill28 2.4s linear infinite; } .press[data-n="3"] .press-count i:nth-child(1) { animation: fill13 2.6s linear infinite; } .press[data-n="3"] .press-count i:nth-child(2) { animation: fill25 2.6s linear infinite; } .press[data-n="3"] .press-count i:nth-child(3) { animation: fill37 2.6s linear infinite; } @keyframes press3 { 0%, 8% { opacity: 0; } 13% { opacity: 1; } 19% { opacity: 0.1; } 25% { opacity: 1; } 31% { opacity: 0.1; } 37% { opacity: 1; } 47%, 100% { opacity: 0; } } @keyframes pinch2 { 0%, 8%, 21%, 36%, 100% { transform: translateX(0) rotate(var(--rot)); opacity: 0.45; } 14%, 28% { transform: translateX(calc(var(--dir) * 4px)) rotate(var(--rot)); opacity: 1; } } @keyframes pinch3 { 0%, 8%, 19%, 31%, 45%, 100% { transform: translateX(0) rotate(var(--rot)); opacity: 0.45; } 13%, 25%, 37% { transform: translateX(calc(var(--dir) * 4px)) rotate(var(--rot)); opacity: 1; } } @keyframes fill14 { 0%, 12% { background: transparent; } 14%, 80% { background: var(--listen); } 90%, 100% { background: transparent; } } @keyframes fill28 { 0%, 26% { background: transparent; } 28%, 80% { background: var(--listen); } 90%, 100% { background: transparent; } } @keyframes fill13 { 0%, 11% { background: transparent; } 13%, 80% { background: var(--listen); } 90%, 100% { background: transparent; } } @keyframes fill25 { 0%, 23% { background: transparent; } 25%, 80% { background: var(--listen); } 90%, 100% { background: transparent; } } @keyframes fill37 { 0%, 35% { background: transparent; } 37%, 80% { background: var(--listen); } 90%, 100% { background: transparent; } } .g-art.press { width: auto; height: 84px; display: flex; align-items: center; margin: 0; } /* Voice routing: the buddy, with voice and music arcs from each ear. */ .ears { width: min(620px, 100%); margin: 56px auto 0; } .v-stage { position: relative; display: flex; align-items: center; justify-content: center; gap: 0; height: 240px; } .v-buddy { width: 190px; position: relative; z-index: 1; } .arcs { position: relative; width: 150px; height: 200px; } .arcs i { position: absolute; top: 50%; width: 120px; height: 120px; margin-top: -60px; border-radius: 50%; border: 3px solid transparent; opacity: 0; } .arcs-l i { right: -40px; border-left-color: currentColor; } .arcs-r i { left: -40px; border-right-color: currentColor; } .arcs .vo { color: var(--listen); animation: wave 1.8s var(--ease) infinite; } .arcs .mu { color: #c3cad8; animation: wave 2.4s linear infinite; --peak: 0.5; } .arcs .vo:nth-child(4) { animation-delay: 0.6s; } .arcs .vo:nth-child(5) { animation-delay: 1.2s; } .arcs .mu:nth-child(2) { animation-delay: 1.2s; } @keyframes wave { 0% { transform: scale(0.45); opacity: 0; } 25% { opacity: var(--peak, 1); } 100% { transform: scale(1.35); opacity: 0; } } /* Both in: the voice in one ear, the music on in both. One in: both in that ear, the other out. Either way the music dips to 70% while the voice speaks, as the app does, then comes back. */ .ears[data-mode="both"] .arcs-r .vo { display: none; } .arcs .mu { --peak: 0.42; transition: color 0.9s var(--ease); } .ears[data-phase="speak"] .arcs .mu { color: rgba(195, 202, 216, 0.6); } .ears[data-phase="idle"] .arcs .vo { animation: none; opacity: 0; } .ears[data-mode="one"] .arcs-r { opacity: 0; transition: opacity 0.5s; } .ears[data-mode="one"] .v-buddy .b-bud-r { opacity: 0; transform: translateY(14px); transition: opacity 0.4s, transform 0.5s var(--ease); } .v-buddy .b-bud-r { transition: opacity 0.4s, transform 0.5s var(--spring); } .levels { width: min(420px, 100%); margin: 28px auto 0; display: grid; gap: 14px; } .lvl { display: grid; grid-template-columns: 70px 1fr 110px; align-items: center; gap: 14px; font-size: 15px; color: var(--mist); text-align: left; } .lvl em { font-style: normal; color: #e6ebf4; } .bar { position: relative; height: 6px; border-radius: 3px; background: var(--night-3); overflow: hidden; } .bar i { position: absolute; inset: 0; border-radius: inherit; transform-origin: left; transition: transform 0.9s var(--ease); } .fill-voice { background: var(--listen); } .fill-music { background: #cdd4e2; transform: scaleX(0.7); } .ears[data-phase="idle"] .fill-voice { transform: scaleX(0); } .ears[data-phase="idle"] .fill-music { transform: scaleX(1); } .music-pct { font-variant-numeric: tabular-nums; } .lvl:first-child em { transition: opacity 0.6s; } .ears[data-phase="idle"] .lvl:first-child em { opacity: 0.4; } .ears[data-mode="both"] [data-only-mode="one"], .ears[data-mode="one"] [data-only-mode="both"] { display: none; } @media (max-width: 520px) { .arcs { width: 70px; } .v-buddy { width: 150px; } .lvl { grid-template-columns: 60px 1fr 96px; } } /* Trust tile art */ .once, .arm { display: flex; gap: 10px; align-items: center; } .b-allow, .b-ghost, .b-arm { display: inline-grid; place-items: center; height: 36px; padding: 0 16px; border-radius: 10px; font-size: 14px; font-weight: 600; } .b-allow { background: var(--allow); color: #fff; } .b-ghost { color: #aeaeb2; border: 1.5px dashed #c7c7cc; text-decoration: line-through; text-decoration-thickness: 1.5px; } .b-arm { background: var(--allow); color: #fff; animation: arming 3.2s var(--ease) infinite; } @keyframes arming { 0%, 8% { opacity: 0.45; } 30%, 88% { opacity: 1; } 100% { opacity: 0.45; } } .arm-ring { width: 22px; height: 22px; border-radius: 50%; background: conic-gradient(var(--allow) var(--a, 0deg), #e5e5ea 0); animation: armring 3.2s linear infinite; } @property --a { syntax: ""; inherits: false; initial-value: 0deg; } @keyframes armring { 0% { --a: 0deg; } 28%, 100% { --a: 360deg; } } .tile:last-child { display: grid; grid-template-columns: 160px 1fr; align-items: center; gap: 28px; } .tile:last-child .t-art { margin: 0; } .local svg { width: 150px; height: 80px; } .m-screen { fill: #1d1d1f; } .m-base { fill: #c7c7cc; } .m-dot { fill: var(--done); animation: localpulse 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; } @keyframes localpulse { 50% { transform: scale(1.35); opacity: 0.7; } } @media (max-width: 900px) { .tile:last-child { grid-template-columns: 1fr; } } [tabindex="-1"]:focus { outline: none; } /* Language picker, Apple-style, at the foot of the page. */ .foot-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; } .foot-row .legal { margin: 0; } .langs { display: flex; flex-wrap: wrap; gap: 4px 16px; } .langs a { color: var(--steel); text-decoration: none; padding: 6px 0; } .langs a:hover { color: var(--ink); text-decoration: underline; } .langs a[aria-current] { color: var(--ink); font-weight: 600; } /* Type for each script. CJK reads better with no negative tracking and a little more leading. */ html:lang(zh-Hans) { --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; } html:lang(zh-Hant) { --font: -apple-system, BlinkMacSystemFont, "PingFang TC", "Hiragino Sans CNS", "Microsoft JhengHei", sans-serif; } html:lang(ja) { --font: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; } html:lang(ko) { --font: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; } html:lang(zh-Hans) body, html:lang(zh-Hant) body, html:lang(ja) body, html:lang(ko) body { letter-spacing: 0; } html:lang(zh-Hans) :is(.display, .headline, .title, .cap h2, .step h3), html:lang(zh-Hant) :is(.display, .headline, .title, .cap h2, .step h3), html:lang(ja) :is(.display, .headline, .title, .cap h2, .step h3), html:lang(ko) :is(.display, .headline, .title, .cap h2, .step h3) { letter-spacing: -0.005em; line-height: 1.18; } html:lang(zh-Hans) .lede, html:lang(zh-Hant) .lede, html:lang(ja) .lede, html:lang(ko) .lede { line-height: 1.6; letter-spacing: 0; } /* Korean wraps at spaces; Japanese and Chinese wrap anywhere, but strictly, so no line starts with punctuation. */ html:lang(ko) :is(.display, .headline, .title, .cap h2, .step h3) { word-break: keep-all; } /* Chinese and Japanese headlines break only at punctuation and spaces, so a phrase is never split ("完整命令，/绝不只是摘要"); a run too long for the line still breaks, rather than overflow. */ html:lang(ja) :is(.display, .headline, .title, .cap h2, .step h3, .g h3, .tile h3), html:lang(zh-Hans) :is(.display, .headline, .title, .cap h2, .step h3, .g h3, .tile h3), html:lang(zh-Hant) :is(.display, .headline, .title, .cap h2, .step h3, .g h3, .tile h3) { word-break: keep-all; overflow-wrap: anywhere; } /* A full-width mark that ends a centred line is tucked in (main.js, hangPunctuation), so the line centres on its ink. Amounts measured from captures of the hero headline (2026-11-06): Simplified Chinese sets the mark at the far left, Traditional Chinese centres it. */ .pz.hang { margin-inline-end: -0.68em; } html:lang(ja) .pz.hang { margin-inline-end: -0.58em; } html:lang(zh-Hant) .pz.hang { margin-inline-end: -0.38em; } html:lang(ja) body, html:lang(zh-Hans) body, html:lang(zh-Hant) body { line-break: strict; } html:lang(ja) .display, html:lang(zh-Hans) .display, html:lang(zh-Hant) .display, html:lang(ko) .display { font-size: clamp(34px, 6.6vw, 84px); } html:lang(de) :is(h1, h2, h3, p, dd, summary), html:lang(fr) :is(h1, h2, h3, p, dd, summary) { hyphens: auto; -webkit-hyphens: auto; } /* Short tile labels break at their spaces ("Zweimal / nicken"), never by a hyphen. */ html:lang(de) .g h3, html:lang(fr) .g h3 { hyphens: manual; -webkit-hyphens: manual; }