:root { --paper: #f4f0e8; --paper-deep: #e9e2d7; --ink: #20201e; --muted: #635e56; --line: #cbc4b8; --orange: #ed562f; --orange-soft: #ffad8f; --orange-ink: #b53f1a; --violet: #7c61df; --green: #2e8b68; --blue: #85b8d9; --glass: rgb(255 255 255 / 55%); --glass-strong: rgb(255 255 255 / 72%); --glass-border: rgb(255 255 255 / 65%); --shadow-soft: 0 14px 44px rgb(32 32 30 / 12%); --radius: 18px; --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace; --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --serif: ui-serif, "New York", Georgia, serif; --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; color: var(--ink); background: radial-gradient(circle at 18% 5%, #f7d5bc, transparent 32rem), linear-gradient(145deg, #b6cff1, #eee1d5 52%, #b9d7cc); background-attachment: fixed; font-family: var(--sans); text-rendering: optimizeLegibility; } /* ponytail: Ignite puts class="container" on ; its framework CSS caps that at a fixed width and centers it — the strip outside the workbench window. Override by specificity (body.container > .container) so the window spans the viewport. */ body.container { max-width: 100%; margin: 0; } a { color: inherit; text-decoration: none; } button, input { font: inherit; } button, a { -webkit-tap-highlight-color: transparent; } :focus-visible { outline: 3px solid var(--violet); outline-offset: 4px; } main { overflow: hidden; } .demo-ribbon { padding: 7px 24px; color: #fff8ef; background: var(--ink); font: 500 10px/1.4 var(--mono); letter-spacing: 0.11em; text-align: center; text-transform: uppercase; } .site-header { width: min(1280px, calc(100% - 64px)); min-height: 86px; margin: 0 auto; background: var(--glass); backdrop-filter: blur(28px) saturate(1.25); -webkit-backdrop-filter: blur(28px) saturate(1.25); border-bottom: 1px solid var(--glass-border); box-shadow: 0 12px 36px rgb(32 32 30 / 10%); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; position: relative; z-index: 10; } .wordmark, .site-header nav, .availability { display: flex; align-items: center; } .wordmark { gap: 12px; justify-self: start; } .wordmark > span { width: 38px; height: 38px; border-radius: 50%; color: #fff; background: var(--orange); display: grid; place-items: center; font: 500 11px var(--mono); transform: rotate(-7deg); } .wordmark strong { font-size: 14px; letter-spacing: -0.03em; } .site-header nav { gap: 31px; font: 500 11px var(--mono); letter-spacing: 0.05em; text-transform: uppercase; } .site-header nav a, .text-link, .footer-links a { position: relative; } .site-header nav a::after, .text-link::after, .footer-links a::after { position: absolute; right: 0; bottom: -5px; left: 0; height: 1px; background: currentColor; content: ""; transform: scaleX(0); transform-origin: right; transition: transform 180ms var(--ease-out); } .site-header nav a:hover::after, .text-link:hover::after, .footer-links a:hover::after { transform: scaleX(1); transform-origin: left; } .availability { gap: 9px; justify-self: end; color: var(--muted); font: 400 10px var(--mono); letter-spacing: 0.03em; } .availability i { width: 7px; height: 7px; border-radius: 50%; background: #4caf70; box-shadow: 0 0 0 4px rgb(76 175 112 / 13%); } .hero { width: min(1280px, calc(100% - 64px)); min-height: 690px; margin: 0 auto; padding: 80px 0 74px; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(390px, 0.85fr); align-items: center; gap: 52px; } .eyebrow, .section-index { margin: 0 0 34px; color: var(--muted); font: 500 10px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; } .eyebrow { max-width: 480px; display: flex; justify-content: space-between; } .hero h1 { max-width: 760px; margin: 0; font: 500 clamp(68px, 7vw, 112px)/0.84 var(--serif); letter-spacing: -0.065em; } .surprising { position: relative; display: block; width: fit-content; color: var(--orange); font-style: italic; white-space: nowrap; } .surprising svg { position: absolute; right: 0; bottom: -18px; width: 94%; height: 30px; fill: none; overflow: visible; stroke: currentColor; stroke-linecap: round; stroke-width: 3; } .hero-intro { max-width: 625px; margin: 51px 0 0; color: #514f4a; font: 400 18px/1.65 var(--sans); letter-spacing: -0.02em; } .hero-actions { margin-top: 37px; display: flex; align-items: center; gap: 28px; } .primary-button { min-height: 52px; padding: 0 20px; border: 1px solid var(--ink); background: var(--ink); color: #fff; display: inline-flex; align-items: center; gap: 28px; font: 500 11px var(--mono); letter-spacing: 0.04em; text-transform: uppercase; box-shadow: 4px 4px 0 var(--orange); transition: transform 150ms var(--ease-out), box-shadow 150ms var(--ease-out); } .primary-button:hover { box-shadow: 1px 1px 0 var(--orange); transform: translate(3px, 3px); } .text-link { display: inline-flex; align-items: center; gap: 9px; font: 500 11px var(--mono); letter-spacing: 0.03em; } .text-link > span { color: var(--orange-ink); font-size: 15px; } .hero-art { position: relative; min-height: 500px; display: grid; place-items: center; animation: hero-bob 7s ease-in-out 800ms infinite; } .poster-card { position: relative; width: min(370px, 80%); min-height: 442px; padding: 27px 29px; border: 1px solid rgb(32 32 30 / 35%); border-radius: var(--radius); background: #ff714e; box-shadow: 0 24px 60px rgb(44 40 36 / 30%); transform: rotate(4.5deg); animation: poster-in 800ms cubic-bezier(.2,.75,.24,1) both; } .poster-card::before { position: absolute; inset: 9px; border: 1px solid rgb(32 32 30 / 35%); content: ""; pointer-events: none; } .poster-label, .poster-footer { position: relative; z-index: 1; font: 500 9px var(--mono); letter-spacing: 0.1em; } .swift-mark { width: 94px; height: 94px; margin: 54px 0 42px; border: 2px solid var(--ink); border-radius: 50%; display: grid; place-items: center; } .swift-mark svg { width: 80px; color: var(--ink); } .poster-card > p { margin: -5px 0 0; font: 500 36px/1.05 var(--serif); letter-spacing: -0.045em; } .poster-card > p:nth-of-type(2) { font-style: italic; } .poster-footer { position: absolute; right: 29px; bottom: 28px; left: 29px; display: flex; justify-content: space-between; } .code-chip { position: absolute; z-index: 2; padding: 8px 11px; border: 1px solid var(--ink); background: var(--paper); font: 400 10px var(--mono); box-shadow: 3px 3px 0 var(--ink); } .chip-one { top: 59px; right: -6px; transform: rotate(7deg); } .chip-two { bottom: 52px; left: 9px; transform: rotate(-9deg); } .chip-three { right: 16px; bottom: 100px; color: white; background: var(--violet); transform: rotate(4deg); } .asterisk { position: absolute; color: var(--orange); font-size: 38px; animation: turn 9s linear infinite; } .asterisk-one { top: 22px; left: 16px; } .asterisk-two { right: 2px; bottom: 18px; color: var(--violet); font-size: 25px; animation-direction: reverse; } .signal-strip { /* ponytail: was min-width: max-content — forced a ~474px row that overflowed the ~331px mobile content area and got clipped by the shell. min-width:0 + flex-wrap keeps it centered on one line when there's room and wraps cleanly when there isn't. */ min-width: 0; flex-wrap: wrap; padding: 17px 24px; border-block: 1px solid var(--glass-border); background: var(--glass); backdrop-filter: blur(24px) saturate(1.2); -webkit-backdrop-filter: blur(24px) saturate(1.2); display: flex; justify-content: center; align-items: center; gap: 30px; font: 500 10px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; } .signal-strip i { color: var(--orange); font-style: normal; } .section { width: min(1180px, calc(100% - 64px)); margin: 0 auto; padding: 124px 0; } .section-heading { margin-bottom: 52px; display: flex; justify-content: space-between; align-items: end; gap: 80px; } .section-heading .section-index { margin-bottom: 14px; } .section-heading h2, .about h2 { margin: 0; font: 500 clamp(48px, 5vw, 68px)/0.95 var(--serif); letter-spacing: -0.05em; } .section-heading > p { max-width: 405px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.65; } .patch-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .patch-card { min-height: 332px; padding: 29px; border: 1px solid var(--glass-border); border-radius: var(--radius); background: var(--glass); backdrop-filter: blur(20px) saturate(1.15); -webkit-backdrop-filter: blur(20px) saturate(1.15); box-shadow: var(--shadow-soft); display: flex; flex-direction: column; transition: background 200ms var(--ease-out), transform 220ms var(--ease-out), box-shadow 260ms var(--ease-out); } .patch-card:hover { background: var(--glass-strong); transform: translateY(-4px); box-shadow: 0 22px 58px rgb(32 32 30 / 16%); } .featured-patch { min-height: 416px; grid-column: span 2; background: var(--glass-strong); } .patch-meta { display: flex; align-items: center; gap: 12px; } .repo-icon { width: 38px; height: 38px; border-radius: 9px; color: white; background: var(--orange); display: grid; place-items: center; font: 500 18px var(--mono); } .repo-icon.violet { background: var(--violet); } .repo-icon.green { background: var(--green); } .patch-meta > div { display: flex; flex-direction: column; gap: 3px; } .patch-meta strong { font: 500 12px var(--mono); } .patch-meta div span { color: var(--muted); font: 400 11px var(--mono); } .merged-pill { margin-left: auto; padding: 5px 8px; border: 1px solid #8a8276; border-radius: 20px; color: var(--muted); font: 500 11px var(--mono); letter-spacing: 0.08em; } .patch-card h3 { max-width: 690px; margin: 44px 0 13px; font: 500 27px/1.1 var(--serif); letter-spacing: -0.035em; } .featured-patch h3 { margin-top: 48px; font-size: 42px; } .patch-card > p { max-width: 700px; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; } .diff-preview { margin: 27px 0 0; border: 1px solid #c3baac; background: #eee8df; display: flex; flex-direction: column; font: 400 10px/1.8 var(--mono); } .diff-preview span { padding: 3px 10px; } .removed { color: #a74742; background: rgb(177 79 70 / 7%); } .added { color: #276f52; background: rgb(46 139 104 / 9%); } .patch-footer { margin-top: auto; padding-top: 27px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 18px; color: var(--muted); font: 400 9px var(--mono); } .patch-footer .patch-cta { margin-left: auto; color: var(--ink); } .dot { width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; display: inline-block; } .orange { background: var(--orange); } .violet-dot { background: var(--violet); } .green-dot { background: var(--green); } .projects { border-top: 1px solid var(--line); } .project-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } .project-card { border: 1px solid var(--ink); overflow: hidden; } .project-visual { position: relative; height: 350px; overflow: hidden; display: grid; place-items: center; } .project-orange .project-visual { background: #ff7957; } .project-blue .project-visual { background: var(--blue); } .app-window { width: 74%; height: 65%; border: 1px solid var(--ink); border-radius: 10px; background: #f2ede5; display: grid; grid-template-columns: 50px 1fr; overflow: hidden; box-shadow: 11px 13px 0 rgb(32 32 30 / 19%); transform: rotate(-2deg); } .mini-sidebar { padding: 38px 12px 12px; border-right: 1px solid #c5bdb2; display: flex; flex-direction: column; gap: 14px; } .mini-sidebar i { width: 22px; height: 4px; border-radius: 2px; background: #989188; } .waveform { padding: 35px 24px; display: flex; align-items: center; gap: 5px; } .waveform i { flex: 1; max-width: 8px; border-radius: 4px; background: var(--orange); } .floating-note { position: absolute; top: 38px; right: 48px; width: 66px; height: 66px; border: 1px solid var(--ink); border-radius: 50%; background: #ffd7a0; display: grid; place-items: center; font: 500 31px var(--serif); transform: rotate(12deg); } .package-visual svg { position: absolute; inset: 10%; width: 80%; height: 80%; fill: none; stroke: rgb(32 32 30 / 42%); stroke-dasharray: 5 6; } .package-node { position: absolute; z-index: 1; width: 79px; height: 79px; border: 1px solid var(--ink); border-radius: 18px; background: #f2ede5; display: grid; place-items: center; font: 500 11px var(--mono); box-shadow: 5px 6px 0 rgb(32 32 30 / 18%); } .node-a { top: 52px; left: 57px; transform: rotate(-5deg); } .node-b { right: 57px; bottom: 55px; background: #ffcf70; transform: rotate(5deg); } .node-c { right: 63px; top: 47px; border-radius: 50%; background: #f5f0e9; } .project-copy { min-height: 270px; padding: 31px; background: #f4f0e8; } .project-copy > span { color: var(--muted); font: 500 9px var(--mono); letter-spacing: 0.1em; } .project-copy h3 { margin: 16px 0 12px; font: 500 35px/1 var(--serif); letter-spacing: -0.04em; } .project-copy p { min-height: 63px; margin: 0 0 28px; color: var(--muted); font-size: 13px; line-height: 1.65; } .project-copy div { display: flex; flex-wrap: wrap; gap: 7px; } .project-copy div span { padding: 6px 9px; border: 1px solid var(--line); border-radius: 18px; font: 400 8px var(--mono); } .lab-section { width: 100%; padding-inline: max(32px, calc((100% - 1180px) / 2)); color: #f3eee6; background: #22211f; } .lab-heading .section-index, .lab-heading > p { color: #aaa59d; } .lab-shell { border: 1px solid #5d5952; background: #171715; box-shadow: 12px 14px 0 var(--orange); } .lab-toolbar { min-height: 48px; padding: 0 15px; border-bottom: 1px solid #4d4944; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; color: #aaa59d; font: 400 9px var(--mono); } .traffic-lights { display: flex; gap: 7px; } .traffic-lights i { width: 8px; height: 8px; border-radius: 50%; background: #6c6861; } .traffic-lights i:first-child { background: var(--orange); } .lab-status { justify-self: end; color: #e0a564; } .lab-grid { min-height: 480px; display: grid; grid-template-columns: 1.08fr 0.92fr; } .code-pane { padding: 55px 32px; border-right: 1px solid #4d4944; display: grid; grid-template-columns: 22px 1fr; color: #dfd9d0; overflow: auto; } .line-numbers { color: #5d5952; font: 400 12px/2 var(--mono); text-align: right; user-select: none; } .code-pane pre { margin: 0 0 0 24px; } .code-pane code { color: #ded7ce; font: 400 12px/2 var(--mono); } .code-pane code::first-line { color: #d6a6ff; } .result-pane { padding: 42px; display: flex; flex-direction: column; align-items: center; } .orbit-output { position: relative; width: min(320px, 100%); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at center, rgb(255 85 56 / 17%), transparent 36%), linear-gradient(45deg, transparent 49.7%, #3d3935 49.8%, #3d3935 50.2%, transparent 50.3%), linear-gradient(-45deg, transparent 49.7%, #3d3935 49.8%, #3d3935 50.2%, transparent 50.3%); } .orbit-output::before { position: absolute; inset: 0; border: 1px solid #3d3935; border-radius: 50%; content: ""; } .orbit-ring { position: absolute; border: 1px solid #4a4641; border-radius: 50%; } .ring-one { inset: 20%; } .ring-two { inset: 37%; } .orbit-core { position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; border-radius: 50%; background: var(--orange); display: grid; place-items: center; font: 500 18px var(--serif); transform: translate(-50%, -50%); } .particle { position: absolute; border-radius: 50%; background: #ffd27d; box-shadow: 0 0 18px rgb(255 210 125 / 35%); animation: float 3.5s ease-in-out infinite alternate; } .particle-2, .particle-5 { background: #9e8cff; box-shadow: 0 0 18px rgb(158 140 255 / 32%); } .particle-3, .particle-6 { background: #78d8ad; box-shadow: 0 0 18px rgb(120 216 173 / 28%); } .lab-controls { width: 100%; margin-top: auto; padding-top: 22px; border-top: 1px solid #45413c; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 15px; } .lab-controls label { color: #a49f98; font: 400 9px var(--mono); text-transform: uppercase; } .lab-controls output { color: white; } .lab-controls input { accent-color: var(--orange); } .lab-controls button { min-height: 40px; padding: 0 13px; border: 1px solid var(--orange); color: white; background: var(--orange); cursor: pointer; font: 500 9px var(--mono); text-transform: uppercase; } .lab-controls button:hover { background: #ff715a; } .lab-caption { margin: 0; padding: 13px 15px; border-top: 1px solid #4d4944; color: #847f78; font: 400 8px/1.5 var(--mono); text-align: center; } .lab-footnote { padding: 38px 0 0; display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 38px; color: #aaa59d; font: 400 9px/1.6 var(--mono); } .lab-footnote p { max-width: 650px; margin: 0; } .soon { padding: 5px 8px; border: 1px solid #69645e; border-radius: 20px; } .notes { border-bottom: 1px solid var(--line); } .note-list { border-top: 1px solid var(--ink); } .note-list article { min-height: 150px; padding: 29px 8px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 120px 1fr auto 28px; align-items: start; gap: 30px; transition: padding 180ms var(--ease-out), background 180ms var(--ease-out); } .note-list article:hover { padding-inline: 18px; background: rgb(255 255 255 / 28%); } .note-list time, .read-time { color: var(--muted); font: 400 9px var(--mono); } .note-list h3 { margin: -4px 0 9px; font: 500 25px/1.15 var(--serif); letter-spacing: -0.025em; } .note-list p { max-width: 650px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; } .note-list article > a { color: var(--orange); } .note-body { max-width: 680px; margin: 10px 0 0; } .note-body p { margin: 0 0 20px; color: var(--muted); font-size: 14px; line-height: 1.8; } .note-body p:last-child { margin-bottom: 0; } .about { width: min(1180px, calc(100% - 64px)); margin: 0 auto; padding: 124px 0; display: grid; grid-template-columns: 0.7fr 1.3fr; gap: 80px; } .about-mark { position: relative; width: min(330px, 90%); aspect-ratio: 1; border: 1px solid var(--ink); border-radius: 50%; background: #ff7a57; display: grid; place-items: center; box-shadow: 0 24px 60px rgb(32 32 30 / 28%); transform: rotate(-5deg); } .about-mark span { font: 500 88px var(--serif); letter-spacing: -0.08em; } .about-mark i { position: absolute; top: 10px; right: 20px; font-style: normal; font-size: 30px; } .about .section-index { margin-bottom: 20px; } .about-columns { margin: 45px 0 35px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 35px; } .about-columns p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; } .about-actions { display: flex; align-items: center; gap: 28px; } .dark-button { box-shadow: 4px 4px 0 var(--violet); } footer { min-height: 145px; padding: 38px max(32px, calc((100% - 1180px) / 2)); color: #d8d3cb; background: var(--ink); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 30px; } footer > div:first-child { display: flex; flex-direction: column; gap: 6px; } footer strong { color: white; font: 500 14px var(--sans); } footer span { color: #8f8b85; font: 400 9px/1.5 var(--mono); } .footer-links { display: flex; gap: 25px; font: 400 9px var(--mono); } footer > span { justify-self: end; text-align: right; } @keyframes poster-in { from { opacity: 0; transform: translateY(25px) rotate(-2deg); } } @keyframes turn { to { transform: rotate(360deg); } } @keyframes float { to { transform: translateY(-8px) scale(1.08); } } @keyframes hero-bob { 0%, 100% { transform: translateY(4px); } 50% { transform: translateY(-4px); } } @media (max-width: 900px) { .site-header { grid-template-columns: 1fr auto; } .site-header nav { display: none; } .hero { grid-template-columns: 1fr; } .hero-art { min-height: 540px; } .patch-list, .project-grid { grid-template-columns: 1fr; } .featured-patch { grid-column: auto; } .lab-grid { grid-template-columns: 1fr; } .code-pane { border-right: 0; border-bottom: 1px solid #4d4944; } .about { grid-template-columns: 0.65fr 1.35fr; gap: 42px; } footer { grid-template-columns: 1fr auto; } footer > span { display: none; } } @media (max-width: 620px) { .site-header, .hero, .section, .about { width: calc(100% - 36px); } .site-header { min-height: 72px; } .availability { font-size: 0; } .availability i { width: 9px; height: 9px; } .hero { min-height: auto; padding-block: 61px 70px; } .eyebrow { margin-bottom: 25px; } .hero h1 { font-size: clamp(59px, 19vw, 82px); } .surprising { white-space: normal; } .hero-intro { margin-top: 40px; font-size: 16px; } .hero-actions { align-items: flex-start; flex-direction: column; } .hero-art { min-height: 435px; } .poster-card { width: 80%; min-height: 365px; } .swift-mark { width: 75px; height: 75px; margin: 43px 0 34px; } .poster-card > p { font-size: 29px; } .chip-one { right: 0; } .chip-two { left: 0; } .section { padding-block: 88px; } .section-heading { margin-bottom: 37px; align-items: flex-start; flex-direction: column; gap: 23px; } .section-heading h2, .about h2 { font-size: 47px; } .patch-card { padding: 22px; } .featured-patch h3 { font-size: 34px; } .patch-footer { flex-wrap: wrap; } .project-visual { height: 280px; } .project-copy { min-height: 0; padding: 25px; } .lab-section { padding-inline: 18px; } .lab-toolbar { grid-template-columns: auto 1fr; } .lab-toolbar > span:nth-child(2) { justify-self: end; } .lab-status { display: none; } .code-pane { padding: 31px 19px; } .code-pane code { font-size: 10px; } .result-pane { padding: 30px 20px; } .lab-controls { grid-template-columns: auto 1fr; } .lab-controls button { grid-column: span 2; } .lab-footnote { grid-template-columns: 1fr; gap: 12px; } .soon { justify-self: start; } .note-list article { grid-template-columns: 1fr auto; gap: 15px; } .note-list article > div { grid-column: span 2; grid-row: 2; } .note-list article > a { display: none; } .about { padding-block: 88px; grid-template-columns: 1fr; } .about-mark { width: 220px; } .about-mark span { font-size: 60px; } .about-columns { grid-template-columns: 1fr; gap: 17px; } .about-actions { align-items: flex-start; flex-direction: column; } footer { padding-block: 35px; grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.01ms !important; } } .article-page { width: min(760px, calc(100% - 40px)); min-height: 100vh; margin: 0 auto; padding: 72px 0 120px; } .article-back { color: var(--orange-ink); font: 500 11px var(--mono); letter-spacing: 0.04em; text-transform: uppercase; } .article-page h1 { margin: 72px 0 20px; font: 500 clamp(52px, 8vw, 86px)/0.94 var(--serif); letter-spacing: -0.055em; } .article-deck { margin-bottom: 56px; color: var(--muted); font-size: 18px; line-height: 1.6; } .article-page > p, .article-page > ul, .article-page > ol { font: 400 17px/1.8 var(--sans); } .article-page h2 { margin-top: 52px; font: 500 36px/1.05 var(--serif); letter-spacing: -0.035em; } /* Real showcase prototype */ .patch-card code, .browser-boundary code { font-family: var(--mono); } .search-lab { border: 1px solid #5d5952; border-radius: 18px; background: #171715; box-shadow: 0 28px 70px rgb(0 0 0 / 32%), 0 2px 0 rgb(255 255 255 / 7%) inset; overflow: hidden; } .search-lab .lab-toolbar, .window-titlebar { background: rgb(62 60 57 / 72%); backdrop-filter: blur(18px) saturate(150%); } .search-layout { min-height: 500px; display: grid; grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr); } .search-controls, .search-stage { padding: 38px; } .swift-verdict { margin-bottom: 30px; padding: 16px; border: 1px solid #4d4944; border-radius: 11px; background: rgb(255 255 255 / 4%); display: grid; grid-template-columns: 1fr auto; gap: 6px 18px; } .swift-verdict span, .swift-verdict small { color: #928d85; font: 500 8px/1.5 var(--mono); letter-spacing: 0.05em; } .swift-verdict strong { color: #f4eee5; font: 500 16px/1.3 var(--mono); } .swift-verdict small { grid-column: 1; } .swift-verdict button { grid-column: 2; grid-row: 1 / span 3; min-height: 38px; padding: 0 12px; border: 1px solid var(--orange); border-radius: 8px; align-self: center; color: white; background: var(--orange); cursor: pointer; font: 500 8px var(--mono); text-transform: uppercase; } .swift-verdict button:active, .search-actions button:active { transform: scale(0.97); transition: transform 100ms var(--ease-out); } .swift-verdict button:disabled { cursor: wait; opacity: 0.65; } .search-controls { border-right: 1px solid #4d4944; display: flex; flex-direction: column; gap: 13px; } .search-controls label, .byte-label, .search-stats, .evidence-links, .browser-boundary { color: #aaa59d; font: 500 9px/1.5 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; } .search-controls textarea, .search-controls input, .search-controls select { width: 100%; margin-top: 8px; border: 1px solid #59554e; border-radius: 0; color: #f3eee6; background: #22211f; font: 400 12px/1.6 var(--mono); } .search-controls textarea { min-height: 102px; padding: 12px; resize: vertical; } .search-controls input, .search-controls select { min-height: 42px; padding: 0 10px; } .search-control-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .search-actions { margin-top: auto; display: flex; justify-content: flex-end; gap: 9px; } .search-actions button, .socket-arrow { min-height: 42px; padding: 0 14px; border: 1px solid #68635c; color: #ddd7ce; background: transparent; cursor: pointer; font: 500 9px var(--mono); text-transform: uppercase; } .search-actions button:last-child { border-color: var(--orange); color: white; background: var(--orange); } .search-actions button:disabled { border-color: #4d4944; color: #777169; background: #252321; cursor: not-allowed; opacity: 0.72; } .search-stage { min-width: 0; display: flex; flex-direction: column; } .byte-label { display: flex; justify-content: space-between; } .byte-viewport { margin-top: 29px; padding-bottom: 20px; overflow-x: auto; } .byte-strip { width: max-content; display: flex; gap: 4px; } .byte-strip > span { width: 40px; height: 54px; border: 1px solid #4d4944; display: grid; flex: 0 0 40px; place-items: center; color: #ddd7ce; background: #22211f; transition: border-color 180ms var(--ease-out), background 180ms var(--ease-out), color 180ms var(--ease-out); } .byte-strip b { align-self: end; font: 500 14px var(--mono); } .byte-strip small { align-self: start; color: #9a948b; font: 400 10px var(--mono); } .byte-strip > .inspected { border-color: #ffb56d; color: white; background: rgb(255 85 56 / 18%); } .byte-strip > .matched { border-color: #71d6a4; color: white; background: rgb(46 139 104 / 28%); } .needle-track { min-height: 74px; padding-top: 12px; } .needle-strip { transform: translateX(calc(var(--alignment, 0) * 44px)); transition: transform 520ms var(--ease-in-out); } .needle-strip > span { height: 48px; border-color: var(--orange); color: #fff; background: #b53f2e; } .search-readout { min-height: 90px; margin-top: auto; padding: 19px 0; border-block: 1px solid #45413c; display: flex; flex-direction: column; gap: 7px; } .search-readout strong { color: white; font: 500 21px var(--serif); } .search-readout span { color: #aaa59d; font: 400 11px/1.6 var(--mono); } .search-stats { padding-top: 18px; display: flex; justify-content: space-between; gap: 20px; } .search-stats b { color: white; font-size: 13px; } .evidence-links { padding-top: 36px; display: flex; gap: 28px; } .evidence-links a { color: var(--ink); font-size: 11px; } .evidence-links a:hover { color: var(--orange-ink); text-decoration: underline; text-underline-offset: 3px; } .socket-exhibit { border-bottom: 1px solid var(--line); } .socket-window { border: 1px solid var(--ink); border-radius: 18px; box-shadow: 0 24px 60px rgb(62 50 35 / 14%); overflow: hidden; } .window-titlebar { min-height: 48px; padding: 0 16px; border-bottom: 1px solid rgb(32 32 30 / 18%); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; } .window-titlebar strong, .window-titlebar small { font: 500 9px var(--mono); } .window-titlebar small { justify-self: end; color: var(--muted); letter-spacing: 0.07em; } .window-titlebar .traffic-lights i:nth-child(1) { background: #ff5f57; } .window-titlebar .traffic-lights i:nth-child(2) { background: #febc2e; } .window-titlebar .traffic-lights i:nth-child(3) { background: #28c840; } .socket-board { padding: 34px; display: grid; grid-template-columns: 1fr auto 1fr auto 1.15fr; align-items: stretch; gap: 14px; background: #e9e2d7; } .socket-code, .socket-halves { min-width: 0; padding: 22px; border: 1px solid var(--line); background: var(--paper); display: flex; flex-direction: column; gap: 14px; opacity: 0.42; transform: translateY(4px); transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out); } .socket-code:first-child, .socket-board[data-stage="open"] .socket-code:nth-of-type(2), .socket-board[data-stage="split"] .socket-code:nth-of-type(2), .socket-board[data-stage="split"] .socket-halves { opacity: 1; transform: translateY(0); } .socket-code > span { color: var(--orange-ink); font: 500 8px var(--mono); letter-spacing: 0.1em; } .socket-code code, .socket-halves code { overflow-wrap: anywhere; font: 500 12px/1.5 var(--mono); } .socket-code p, .socket-halves p { margin: auto 0 0; color: var(--muted); font-size: 11px; line-height: 1.6; } .socket-halves code { padding-bottom: 10px; border-bottom: 1px solid var(--line); color: #276f52; } .socket-arrow { padding-inline: 7px; border: 0; color: var(--orange-ink); display: flex; flex-direction: column; justify-content: center; align-items: center; } .socket-arrow:disabled { opacity: 0.32; cursor: not-allowed; } .socket-arrow span { margin-bottom: 5px; display: block; color: var(--muted); font-size: 7px; } .socket-toolbar { padding: 16px 34px; border-bottom: 1px solid var(--line); background: #e9e2d7; display: flex; align-items: center; gap: 14px; } .socket-reset { margin-left: auto; min-height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: transparent; color: var(--muted); font: 600 11px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; transition: color 150ms var(--ease-out), border-color 150ms var(--ease-out); } .socket-reset:hover { color: var(--orange-ink); border-color: var(--orange); } .socket-toolbar-label { color: var(--muted); font: 500 9px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; } .socket-proto-picker { display: flex; gap: 6px; } .socket-proto-picker button { min-height: 32px; padding: 0 14px; border: 1px solid var(--line); border-radius: 8px; background: rgb(255 255 255 / 55%); color: var(--ink); font: 600 11px var(--mono); cursor: pointer; transition: background 150ms var(--ease-out), border-color 150ms var(--ease-out), color 150ms var(--ease-out); } .socket-proto-picker button[aria-pressed="true"] { border-color: var(--orange); background: #fff4ec; color: var(--orange-ink); } .socket-apis { margin: 0; padding: 0; list-style: none; display: grid; gap: 5px; } .socket-apis li { color: var(--ink); font: 500 11px/1.3 var(--mono); overflow-wrap: anywhere; } .socket-apis li::before { content: "› "; color: var(--orange-ink); } .socket-code.consumed, .socket-halves.consumed { position: relative; border-color: #a74742; background: rgb(167 71 66 / 8%); } .socket-code.consumed::after, .socket-halves.consumed::after { content: "CONSUMED"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-14deg); padding: 5px 14px; border: 3px solid #a74742; border-radius: 7px; background: rgb(244 240 232 / 86%); color: #a74742; font: 700 18px var(--mono); letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; pointer-events: none; z-index: 1; animation: socket-stamp 240ms var(--ease-out); } @keyframes socket-stamp { 0% { transform: translate(-50%, -50%) rotate(-14deg) scale(0.5); opacity: 0; } 60% { transform: translate(-50%, -50%) rotate(-14deg) scale(1.12); opacity: 1; } 100% { transform: translate(-50%, -50%) rotate(-14deg) scale(1); opacity: 1; } } .socket-code.consumed > span, .socket-code.consumed code, .socket-halves.consumed code { color: #a74742; } .socket-code.consumed code, .socket-halves.consumed code { text-decoration: line-through; text-decoration-thickness: 1.5px; } .socket-code.consumed .socket-apis { opacity: 0.45; } .socket-samples { padding: 22px 34px 30px; border-top: 1px solid var(--line); background: #e9e2d7; display: grid; gap: 14px; } .socket-samples-label { color: var(--muted); font: 500 9px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; } .socket-samples-head { display: flex; align-items: baseline; gap: 8px; } .socket-samples-hint { color: var(--muted); font: 500 9px var(--mono); letter-spacing: 0.04em; opacity: 0.8; } .socket-sample { display: grid; gap: 8px; transition: opacity 300ms var(--ease-out); } .socket-samples-stage { position: relative; min-height: 72px; overflow-y: hidden; transition: height 300ms var(--ease-out); } .socket-samples-stage .socket-sample { position: absolute; top: 0; left: 0; right: 0; opacity: 0; pointer-events: none; } .socket-samples-stage .socket-sample.is-active { opacity: 1; pointer-events: auto; } .socket-sample-head { display: flex; align-items: center; gap: 10px; } .socket-sample-state { color: var(--orange-ink); font: 500 8px var(--mono); letter-spacing: 0.1em; } .socket-sample-caption { margin-right: auto; color: var(--muted); font: 500 10px var(--mono); } .socket-copy { padding: 4px 10px; border: 1px solid var(--line); border-radius: 7px; background: rgb(255 255 255 / 55%); color: var(--ink); font: 500 10px var(--mono); letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; transition: background 150ms var(--ease-out), border-color 150ms var(--ease-out), color 150ms var(--ease-out); } .socket-copy:hover { border-color: var(--orange); color: var(--orange-ink); } .socket-sample pre { margin: 0; padding: 14px 16px; border: 1px solid var(--line); background: var(--paper); overflow-x: auto; } .socket-sample code { display: block; white-space: pre; font: 500 12px/1.65 var(--mono); color: var(--ink); } .socket-sample .t-kw { color: #b53f1a; } .socket-sample .t-str { color: #1f4e8a; } .socket-sample .t-num { color: #7c4a00; } .socket-sample .t-type { color: #0e6b5e; } .socket-sample .t-fn { color: #6f42c1; } .socket-sample .t-com { color: var(--muted); font-style: italic; } .browser-boundary { margin: 23px 0 0; color: var(--muted); text-transform: none; } .browser-boundary strong { color: var(--ink); } .project-cabinet { align-items: stretch; } .padawan-card { display: grid; grid-template-rows: 48px 340px auto auto; border-radius: 18px; box-shadow: 0 24px 60px rgb(62 50 35 / 14%); } .bridge-setup { padding: 28px 31px 31px; border-top: 1px solid var(--line); background: #ebe6f1; } .bridge-intro > span, .bridge-setup li > span, .bridge-form label, .bridge-status { color: #71697d; font: 500 8px/1.5 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; } .bridge-intro h4 { margin: 8px 0; font: 500 24px/1 var(--serif); } .bridge-intro p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.6; } .bridge-setup ol { margin: 20px 0; padding: 0; list-style: none; display: grid; gap: 8px; } .bridge-setup li { display: grid; grid-template-columns: 74px 1fr; gap: 10px; align-items: start; } .bridge-setup li code { padding: 9px 11px; color: #eeeaf4; background: #302b43; font: 400 10px/1.65 var(--mono); user-select: all; } .bridge-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: end; } .bridge-form input { width: 100%; min-height: 38px; margin-top: 5px; padding: 0 9px; border: 1px solid #b7afbf; border-radius: 7px; background: rgb(255 255 255 / 65%); font: 400 10px var(--mono); } .bridge-form button { min-height: 38px; padding: 0 12px; border: 0; border-radius: 7px; color: white; background: #302b43; cursor: pointer; font: 500 8px var(--mono); text-transform: uppercase; } .bridge-form button:disabled { cursor: wait; opacity: 0.55; } .bridge-status { margin: 12px 0 0; display: flex; gap: 7px; align-items: center; text-transform: none; } .bridge-status i { width: 7px; height: 7px; border-radius: 50%; background: #8d8793; } .bridge-status[data-state="checking"] i { background: #febc2e; } .bridge-status[data-state="ready"] i { background: #28c840; } .bridge-status[data-state="error"] i { background: #ff5f57; } .padawan-card .window-titlebar { color: #e9e5ef; background: #302b43; } .controller-preview { padding: 40px; background: radial-gradient(circle at 50% 40%, #8b77e0, #29243d 72%); display: grid; place-items: center; perspective: 800px; } .controller-preview > p { margin: 0; color: rgb(255 255 255 / 65%); font: 400 8px var(--mono); text-transform: uppercase; } .controller-body { position: relative; width: min(340px, 85%); height: 145px; border: 2px solid #d9d4ea; border-radius: 48% 48% 38% 38% / 48% 48% 60% 60%; background: linear-gradient(155deg, #f6f4fa 0 40%, #27242b 41% 62%, #e6e2eb 63%); box-shadow: 0 30px 50px rgb(0 0 0 / 35%); transform: rotateX(12deg) rotateZ(-3deg); } .controller-body::before, .controller-body::after { position: absolute; bottom: -46px; width: 76px; height: 100px; border: 2px solid #d9d4ea; border-top: 0; border-radius: 0 0 46px 46px; background: #e9e6ed; content: ""; } .controller-body::before { left: 17px; transform: rotate(18deg); } .controller-body::after { right: 17px; transform: rotate(-18deg); } .controller-body > span { position: absolute; top: 18px; left: 50%; color: #76707d; font: 500 7px var(--mono); transform: translateX(-50%); } .stick, .dpad, .buttons { position: absolute; z-index: 1; color: #cbc5d0; font-style: normal; } .stick { bottom: 21px; width: 29px; height: 29px; border: 5px solid #121116; border-radius: 50%; background: #55505a; } .left-stick { left: 37%; } .right-stick { right: 37%; } .dpad { top: 38px; left: 19%; font-size: 31px; } .buttons { top: 33px; right: 19%; font: 500 17px/0.7 var(--mono); transform: rotate(45deg); } .cabinet-list { border-top: 1px solid var(--ink); } .cabinet-list a { min-height: 168px; padding: 25px; border: 1px solid var(--ink); border-top: 0; display: grid; grid-template-columns: 1fr auto; align-content: center; gap: 7px 20px; transition: background 180ms var(--ease-out), transform 180ms var(--ease-out); } .cabinet-list a:hover { background: #fff8ee; transform: translateX(4px); } .cabinet-list span { grid-column: 1; color: var(--orange-ink); font: 500 8px var(--mono); text-transform: uppercase; } .cabinet-list strong { grid-column: 1; font: 500 24px var(--serif); } .cabinet-list p { grid-column: 1; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; } .cabinet-list i { grid-column: 2; grid-row: 1 / span 3; align-self: center; color: var(--orange-ink); font-style: normal; } .empty-notes { min-height: 160px; padding: 28px; border: 1px solid var(--glass-border); border-radius: var(--radius); background: var(--glass); backdrop-filter: blur(20px) saturate(1.15); -webkit-backdrop-filter: blur(20px) saturate(1.15); box-shadow: var(--shadow-soft); display: grid; grid-template-columns: 100px 1fr; align-items: center; } .empty-notes > span { color: var(--orange-ink); font: 500 11px var(--mono); } .empty-notes h3 { margin: 0 0 8px; font: 500 28px var(--serif); } .empty-notes p { margin: 0; color: var(--muted); font-size: 12px; } .about-page { width: min(1180px, calc(100% - 64px)); margin: 0 auto; } .about-hero { max-width: 940px; padding: 118px 0 135px; } .about-hero h1 { margin: 0; font: 500 clamp(70px, 9vw, 126px)/0.86 var(--serif); letter-spacing: -0.065em; } .about-hero > p:not(.section-index) { max-width: 690px; margin: 55px 0 0; color: var(--muted); font-size: 18px; line-height: 1.7; } .about-hero .about-actions { margin-top: 38px; } .about-details { padding: 110px 0; border-top: 1px solid var(--glass-border); display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 90px; } .about-details h2, .about-callout h2 { margin: 0; font: 500 clamp(40px, 5vw, 64px)/0.98 var(--serif); letter-spacing: -0.05em; } .about-prose { display: grid; grid-template-columns: 1fr; gap: 34px; } .about-prose p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.8; } .about-facts { border-block: 1px solid var(--ink); display: grid; grid-template-columns: repeat(4, 1fr); } .about-facts div { min-height: 150px; padding: 25px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 18px; } .about-facts div:last-child { border-right: 0; } .about-facts span { color: var(--orange-ink); font: 500 8px var(--mono); } .about-facts strong { font: 500 17px/1.4 var(--serif); } .about-callout { margin: 110px 0; padding: 64px; color: white; background: var(--ink); display: grid; grid-template-columns: auto 1fr; gap: 45px; } .about-callout > span { color: var(--orange); font-size: 50px; } .about-callout .section-index { color: #aaa59d; } .colophon { margin: 0; color: var(--muted); font: 400 10px/1.5 var(--mono); } @media (hover: hover) and (pointer: fine) { .controller-preview:hover .controller-body { transform: rotateX(4deg) rotateZ(3deg) rotateY(-8deg); } } .controller-body { transition: transform 280ms var(--ease-out); } @media (max-width: 900px) { .search-layout, .about-details { grid-template-columns: 1fr; } .search-controls { border-right: 0; border-bottom: 1px solid #4d4944; } .socket-board { grid-template-columns: 1fr; } .socket-arrow { min-height: 55px; transform: rotate(90deg); } .about-facts { grid-template-columns: 1fr 1fr; } .about-facts div:nth-child(2) { border-right: 0; } .about-facts div:nth-child(-n + 2) { border-bottom: 1px solid var(--line); } } @media (max-width: 620px) { .search-controls, .search-stage { padding: 23px 18px; } .search-control-row, .about-prose, .about-facts { grid-template-columns: 1fr; } .search-actions { justify-content: stretch; } .search-actions button { flex: 1; } .search-stats { align-items: flex-start; flex-direction: column; } .swift-verdict { grid-template-columns: 1fr; } .swift-verdict button { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 8px; } .evidence-links { align-items: flex-start; flex-direction: column; gap: 12px; } .socket-board { padding: 18px; } .socket-toolbar { padding: 14px 18px; } .socket-samples { padding: 18px; } .padawan-card { grid-template-rows: 280px 1fr; } .controller-preview { padding: 25px 10px; } .bridge-form { grid-template-columns: 1fr; } .bridge-setup li { grid-template-columns: 1fr; } .empty-notes { grid-template-columns: 1fr; gap: 15px; } .about-page { width: calc(100% - 36px); } .about-hero { padding-block: 82px 95px; } .about-hero h1 { font-size: clamp(58px, 17vw, 82px); } .about-details { padding-block: 80px; gap: 40px; } .about-facts div { border-right: 0; border-bottom: 1px solid var(--line); } .about-facts div:last-child { border-bottom: 0; } .about-callout { margin-block: 80px; padding: 35px 25px; grid-template-columns: 1fr; gap: 20px; } } /* Multi-page portfolio */ .collection-page, .exhibit-page, .project-page { width: min(1180px, calc(100% - 64px)); margin: 0 auto; } .collection-hero, .exhibit-hero, .project-page > header { padding: 110px 0 90px; } .collection-hero { max-width: 920px; } .collection-hero h1, .exhibit-hero h1, .project-page > header h1 { margin: 10px 0 28px; font: 500 clamp(64px, 9vw, 118px)/0.88 var(--serif); letter-spacing: -0.065em; } .collection-hero > p:last-child, .exhibit-hero > p:last-child, .project-page > header > p:not(.section-index) { max-width: 720px; color: var(--muted); font-size: 17px; line-height: 1.7; } .collection-grid { margin-bottom: 110px; border: 1px solid var(--glass-border); border-radius: var(--radius); background: var(--glass); backdrop-filter: blur(20px) saturate(1.15); -webkit-backdrop-filter: blur(20px) saturate(1.15); box-shadow: var(--shadow-soft); overflow: hidden; display: grid; grid-template-columns: repeat(2, 1fr); } .collection-card { min-height: 320px; padding: 34px; border-right: 1px solid var(--glass-border); border-bottom: 1px solid var(--glass-border); display: flex; flex-direction: column; color: var(--ink); background: transparent; transition: background 200ms var(--ease-out); } .collection-card:nth-child(2n) { border-right: 0; } .collection-card:nth-last-child(-n + 2) { border-bottom: 0; } .collection-card.featured { background: #ff7957; } .collection-card > span { font: 500 9px var(--mono); letter-spacing: .08em; } .collection-card h2 { margin: 22px 0 14px; font: 500 42px/1 var(--serif); letter-spacing: -.045em; } .collection-card p { max-width: 480px; margin: 0 0 25px; color: rgb(32 32 30 / 68%); font-size: 13px; line-height: 1.6; } .collection-card strong { margin-top: auto; font: 500 10px var(--mono); } @media (hover: hover) and (pointer: fine) { .collection-card:hover { background: rgb(255 255 255 / 45%); } .collection-card.featured:hover { background: #ff896b; } } .exhibit-hero { max-width: 900px; } .exhibit-hero .article-back, .project-page .article-back { display: inline-block; margin-bottom: 50px; } .exhibit-page .search-lab { margin-bottom: 0; } .scenario-picker { margin-bottom: 14px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .scenario-picker button { min-height: 72px; padding: 12px 15px; border: 1px solid var(--line); border-radius: 12px; display: flex; flex-direction: column; gap: 7px; text-align: left; color: var(--ink); background: rgb(255 255 255 / 42%); } .scenario-picker button[aria-pressed="true"] { border-color: var(--orange); background: #fff8ee; } .scenario-picker span { color: var(--orange-ink); font: 500 8px var(--mono); } .scenario-picker strong { font: 500 13px var(--sans); } .scenario-explanation { margin: 0 0 14px; padding: 15px 17px; border-left: 3px solid var(--orange); color: var(--muted); background: rgb(255 255 255 / 42%); font-size: 12px; line-height: 1.65; } .scenario-explanation strong { color: var(--ink); } .search-explanation { border-top: 1px solid #4d4944; display: grid; grid-template-columns: .8fr 1.3fr .9fr; color: #ddd7ce; background: #1d1c1a; } .search-explanation > section { min-width: 0; padding: 22px; border-right: 1px solid #4d4944; } .search-explanation > section:last-child { border-right: 0; } .search-explanation section > span { display: block; margin-bottom: 14px; color: #928d85; font: 500 8px var(--mono); letter-spacing: .08em; } .search-explanation section > strong { font: 500 14px var(--mono); text-transform: capitalize; } .shift-bars { margin-top: 18px; display: grid; gap: 12px; } .shift-bars label { position: relative; padding-bottom: 7px; display: flex; justify-content: space-between; font: 400 9px var(--mono); } .shift-bars label::after, .shift-bars i { position: absolute; right: 0; bottom: 0; left: 0; height: 3px; content: ""; } .shift-bars label::after { background: #4d4944; } .shift-bars i { z-index: 1; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform 180ms var(--ease-in-out); } .shift-bars label:last-child i { background: var(--violet); } .alignment-timeline { padding-bottom: 4px; display: flex; gap: 6px; overflow-x: auto; } .alignment-timeline button { min-width: 46px; height: 48px; border: 1px solid #4d4944; border-radius: 8px; display: grid; place-items: center; color: #ddd7ce; background: #252321; font: 500 10px var(--mono); } .alignment-timeline button[data-active] { border-color: var(--orange); color: white; background: rgb(255 85 56 / 18%); } .alignment-timeline small, .rule-table small { color: #9a948b; font: 9px/1.5 var(--mono); } .alignment-timeline button small { color: #928d85; font-size: 7px; } .rule-table { display: flex; flex-wrap: wrap; gap: 6px; } .table-label { margin: 14px 0 7px; display: block; color: #928d85; font: 500 7px var(--mono); text-transform: uppercase; } .search-explanation section > span + .table-label { margin-top: 0; } .rule-table > span { min-width: 44px; padding: 7px; border: 1px solid #4d4944; display: grid; grid-template-columns: 1fr auto; background: #252321; } .rule-table b { font: 500 11px var(--mono); } .rule-table small { grid-row: 2; font-size: 7px; } .rule-table strong { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--orange); font: 500 12px var(--mono); } .indexed-table > span { min-width: 38px; } .home-exhibits { border-top: 1px solid var(--line); } .home-exhibit-grid { border: 1px solid var(--glass-border); border-radius: var(--radius); background: var(--glass); backdrop-filter: blur(20px) saturate(1.15); -webkit-backdrop-filter: blur(20px) saturate(1.15); box-shadow: var(--shadow-soft); overflow: hidden; display: grid; grid-template-columns: repeat(3, 1fr); } .home-exhibit-grid a { min-height: 178px; padding: 25px; border-right: 1px solid var(--glass-border); display: flex; flex-direction: column; justify-content: flex-start; gap: 10px; color: var(--ink); transition: background 180ms var(--ease-out); } .home-exhibit-grid a:last-child { border-right: 0; } .home-exhibit-grid a:hover { background: rgb(255 255 255 / 35%); } .home-exhibit-grid span { color: var(--orange-ink); font: 500 8px var(--mono); } .home-exhibit-grid strong { margin: 0 0 2px; font: 500 27px/1.05 var(--serif); letter-spacing: -0.035em; } .home-exhibit-grid p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; } .project-page > header .hero-actions { margin-top: 35px; } .project-story { margin-bottom: 110px; border-block: 1px solid var(--ink); display: grid; grid-template-columns: 1fr 1fr .55fr; } .project-story > * { min-height: 340px; padding: 34px; border-right: 1px solid var(--ink); } .project-story > *:last-child { border-right: 0; } .project-story span { color: var(--orange-ink); font: 500 8px var(--mono); letter-spacing: .08em; } .project-story h2 { margin: 70px 0 20px; font: 500 32px/1.05 var(--serif); letter-spacing: -.035em; } .project-story p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; } .project-story aside { display: flex; flex-direction: column; gap: 14px; background: #e9e2d7; } .project-story aside strong { padding-bottom: 12px; border-bottom: 1px solid var(--line); font: 500 11px var(--mono); } .term { margin-bottom: 50px; border: 1px solid var(--ink); border-radius: 18px; overflow: hidden; box-shadow: 0 24px 60px rgb(62 50 35 / 14%); } .term .window-titlebar { background: var(--paper-deep); } .term pre { margin: 0; padding: 22px 24px; background: var(--paper); overflow-x: auto; } .term code { display: block; white-space: pre; font: 500 12px/1.7 var(--mono); color: var(--ink); } .gpu-window { margin-bottom: 16px; border: 1px solid #302b43; border-radius: 18px; overflow: hidden; box-shadow: 0 28px 70px rgb(41 36 61 / 24%); } .gpu-window .window-titlebar { color: #eeeaf4; background: #302b43; } .gpu-stage { min-height: 500px; position: relative; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 35%, #5e4b9d, #12101c 70%); } .gpu-stage canvas { width: 100%; height: auto; display: block; cursor: grab; touch-action: none; } .gpu-stage canvas:active { cursor: grabbing; } .gpu-overlay { position: absolute; left: 25px; bottom: 24px; display: grid; gap: 6px; color: white; pointer-events: none; } .gpu-overlay span, .gpu-overlay small { color: rgb(255 255 255 / 65%); font: 500 8px var(--mono); } .gpu-overlay strong { font: 500 18px var(--mono); } .gpu-stage > button { position: absolute; right: 24px; bottom: 24px; min-height: 42px; padding: 0 15px; border: 1px solid rgb(255 255 255 / 20%); border-radius: 10px; color: white; background: rgb(20 18 30 / 70%); backdrop-filter: blur(18px); font: 500 9px var(--mono); } .bridge-page { margin-bottom: 25px; border: 1px solid #b7afbf; border-radius: 16px; } .bridge-intro h2 { margin: 8px 0; font: 500 30px/1 var(--serif); } .sample-inputs { margin-top: 20px; padding-top: 18px; border-top: 1px solid #cfc8d4; display: flex; gap: 8px; align-items: center; } .sample-inputs > span { margin-right: auto; color: #71697d; font: 500 8px var(--mono); } .sample-inputs button { min-height: 34px; padding: 0 10px; border: 1px solid #b7afbf; border-radius: 7px; color: #302b43; background: transparent; font: 500 8px var(--mono); } .model-credit { margin: 0 0 110px; color: var(--muted); font-size: 11px; } .model-credit a { color: var(--orange-ink); } @media (max-width: 900px) { .collection-grid, .project-story, .search-explanation { grid-template-columns: 1fr; } .collection-card, .collection-card:nth-child(2n), .collection-card:nth-last-child(-n + 2) { border-right: 0; border-bottom: 1px solid var(--ink); } .collection-card:last-child { border-bottom: 0; } .search-explanation > section { border-right: 0; border-bottom: 1px solid #4d4944; } .search-explanation > section:last-child { border-bottom: 0; } .project-story > * { min-height: 0; border-right: 0; border-bottom: 1px solid var(--ink); } .project-story > *:last-child { border-bottom: 0; } .home-exhibit-grid { grid-template-columns: 1fr; } .home-exhibit-grid a { border-right: 0; border-bottom: 1px solid var(--ink); } .home-exhibit-grid a:last-child { border-bottom: 0; } } @media (max-width: 620px) { .collection-page, .exhibit-page, .project-page { width: calc(100% - 36px); } .collection-hero, .exhibit-hero, .project-page > header { padding-block: 82px 65px; } .scenario-picker { grid-template-columns: 1fr 1fr; } .collection-card { min-height: 270px; padding: 25px; } .gpu-stage { min-height: 340px; } .gpu-overlay { right: 18px; bottom: 76px; left: 18px; } .gpu-stage > button { right: 18px; bottom: 18px; left: 18px; } .sample-inputs { align-items: stretch; flex-direction: column; } .sample-inputs > span { margin: 0 0 5px; } } /* ── Workbench full layout: chrome + sidebar window ── */ .site.workbench { min-height: 100vh; padding: 24px clamp(12px, 2.5vw, 36px) 48px; } .workbench .shell { width: 100%; max-width: none; margin: 0 auto; border: 1px solid rgb(36 38 42 / 30%); border-radius: 18px; background: rgb(244 242 238 / 87%); box-shadow: 0 40px 100px rgb(34 39 54 / 30%); backdrop-filter: blur(30px) saturate(1.2); -webkit-backdrop-filter: blur(30px) saturate(1.2); overflow: hidden; } .workbench .chrome { min-height: 52px; padding: 0 18px; border-bottom: 1px solid rgb(35 35 35 / 16%); background: rgb(255 255 255 / 32%); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; } .workbench .chrome-title { font: 500 12px var(--mono); letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .workbench .chrome-status { justify-self: end; color: var(--muted); font: 500 10px var(--mono); letter-spacing: .08em; white-space: nowrap; } .workbench .lights { display: flex; gap: 8px; } .workbench .lights i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; display: grid; place-items: center; font: 700 9px/1 var(--sans); color: rgb(0 0 0 / 55%); } .workbench .lights i:nth-child(2) { background: #febc2e; } .workbench .lights i:nth-child(3) { background: #28c840; } .workbench .lights:hover i:nth-child(1)::before { content: "\00d7"; } .workbench .lights:hover i:nth-child(2)::before { content: "\2013"; } .workbench .lights:hover i:nth-child(3)::before { content: "+"; } .workbench .inside { display: grid; grid-template-columns: 220px minmax(0, 1fr); } .workbench .sidebar { padding: 30px 22px; border-right: 1px solid rgb(35 35 35 / 14%); background: rgb(224 226 229 / 45%); display: flex; flex-direction: column; gap: 28px; } .workbench .identity { display: flex; gap: 10px; align-items: center; font: 600 14px var(--sans); } .workbench .identity b { width: 30px; height: 30px; border-radius: 9px; color: #fff; background: var(--orange); display: grid; place-items: center; font: 600 11px var(--mono); } .workbench .sidebar nav { display: grid; gap: 4px; } .workbench .sidebar nav a { padding: 9px 11px; border-radius: 8px; font: 500 11px var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink); transition: background 150ms var(--ease-out), color 150ms var(--ease-out); } .workbench .sidebar nav a:hover { background: rgb(255 255 255 / 55%); } .workbench .sidebar nav a.current { background: rgb(255 255 255 / 78%); box-shadow: 0 1px 3px rgb(0 0 0 / 08%); color: var(--orange-ink); } .workbench .sidebar .availability { margin-top: auto; gap: 8px; color: var(--muted); font: 500 10px var(--mono); letter-spacing: .03em; } .workbench .sidebar .availability i { width: 7px; height: 7px; border-radius: 50%; background: #4caf70; box-shadow: 0 0 0 4px rgb(76 175 112 / 15%); } .workbench .content { padding: clamp(24px, 4vw, 52px); } .workbench .window-footer { padding: 22px clamp(24px, 4vw, 40px); border-top: 1px solid rgb(35 35 35 / 14%); background: rgb(255 255 255 / 58%); color: var(--ink); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; font: 500 11px/18px var(--mono); } .workbench .window-footer a { color: var(--ink); } .workbench .window-footer strong { font: 600 11px/18px var(--mono); } .workbench .window-footer > div:first-child { display: block; } .workbench .window-footer span { color: var(--muted); } .workbench .window-footer .footer-links { display: flex; gap: 22px; } .workbench .window-footer .footer-links a { font-size: 11px; } .workbench .window-footer > span:last-child { justify-self: end; text-align: right; } /* page bodies fill the content pane */ .workbench .hero, .workbench .section, .workbench .about, .workbench .collection-page, .workbench .project-page, .workbench .about-page { width: 100%; max-width: 1180px; margin-inline: auto; } .workbench .exhibit-page { width: 100%; margin: 0; } .workbench .hero { min-height: auto; padding: 8px 0 60px; } .workbench .section { padding: 56px 0; } .workbench .about { padding: 8px 0 52px; gap: 48px; } .workbench .about-details { padding: 52px 0; gap: 48px; } .workbench .about-hero { padding: 8px 0 48px; } .workbench .collection-hero, .workbench .exhibit-hero, .workbench .project-page > header { padding: 36px 0 44px; } /* cards sit on the shell's frosted interior: raised panels, no double glass */ .workbench .patch-card, .workbench .collection-card, .workbench .empty-notes, .workbench .home-exhibit-grid { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgb(255 255 255 / 50%); } .workbench .featured-patch { background: rgb(255 255 255 / 62%); } .workbench .signal-strip { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgb(255 255 255 / 40%); border-radius: 12px; } .workbench .note-list { border-top-color: rgb(35 35 35 / 14%); } /* projects/labs cards: one harmonized color for every card */ .workbench .collection-card.featured { background: rgb(255 255 255 / 50%); } @media (hover: hover) and (pointer: fine) { .workbench .collection-card:hover, .workbench .collection-card.featured:hover, .workbench .patch-card:hover, .workbench .featured-patch:hover { background: rgb(255 255 255 / 72%); } } /* mobile: collapse the sidebar into a top strip */ @media (max-width: 820px) { /* ponytail: minmax(0,1fr), not 1fr — a bare 1fr track has an `auto` minimum that resolves to the grid item's min-content. The sidebar's nowrap nav links (and any wide content body) pushed that min-content to ~466px, overflowing the 367px shell and clipping ~99px off the right of every page body. min 0 lets the track shrink to the shell width; the nav scrolls horizontally instead. */ .workbench .inside { grid-template-columns: minmax(0, 1fr); } .workbench .sidebar { border-right: 0; border-bottom: 1px solid rgb(35 35 35 / 14%); flex-direction: row; align-items: center; gap: 14px; padding: 12px 16px; } .workbench .identity { margin: 0; } /* ponytail: nav needs min-width:0 so overflow-x:auto can actually shrink it; without it the nowrap links' min-content forces the sidebar (and the inside 1fr track, and thus .content) out to ~466px, overflowing the 367px shell and clipping ~99px off the right of every page body. */ .workbench .sidebar nav { display: flex; gap: 2px; overflow-x: auto; min-width: 0; } .workbench .sidebar nav a { padding: 7px 9px; white-space: nowrap; } .workbench .sidebar .availability { margin: 0 0 0 auto; flex-shrink: 0; } /* min-width:0 on the grid item so a 1fr column can shrink below content min-content */ .workbench .content { padding: 24px 18px; min-width: 0; } .workbench .window-footer { grid-template-columns: 1fr; gap: 14px; } .workbench .window-footer > span:last-child { justify-self: start; text-align: left; } } /* ponytail: mobile legibility — the 8–11px mono scale reads as noise on a 393px phone. Bump the labels, body copy, CTAs and chrome that frame every page; let dense rows wrap instead of clipping. Deep exhibit pages (code panes, byte/socket tables) stay dense by design — say the word for a pass over those too. Block sits last so it wins equal-specificity ties with the base rules and the ≤820 workbench block. */ @media (max-width: 620px) { .eyebrow, .section-index { font-size: 11px; } .primary-button, .text-link { font-size: 13px; } .poster-label, .poster-footer { font-size: 11px; } .signal-strip { gap: 14px 22px; padding-inline: 18px; font-size: 12px; } .patch-meta { flex-wrap: wrap; } .patch-meta strong { font-size: 13px; } .patch-meta div span { font-size: 12px; } .merged-pill { font-size: 12px; } .patch-card > p { font-size: 14px; } .patch-footer { font-size: 11px; } .section-heading > p { font-size: 15px; } .home-exhibit-grid span { font-size: 11px; } .home-exhibit-grid p { font-size: 13px; } .collection-card > span { font-size: 11px; } .collection-card p { font-size: 14px; } .collection-card strong { font-size: 11px; } .about-facts span { font-size: 11px; } .availability { font-size: 11px; } /* workbench chrome + nav + footer appear on every page */ /* ponytail: shorten the titlebar to just the name on constrained widths — the full "Adam Viaud — iOS/macOS engineer" is the desktop chrome. font-size:0 hides the real text; ::after carries the short label (generated content isn't read aloud by SRs, so the full title stays available to assistive tech via the real DOM text). */ .workbench .chrome-title { font-size: 0; } .workbench .chrome-title::after { content: "Adam Viaud"; font: 500 11px var(--mono); letter-spacing: .02em; } .workbench .chrome-status { font-size: 11px; } .workbench .sidebar nav a { font-size: 12px; padding: 12px 13px; } .workbench .window-footer { font-size: 12px; } .workbench .window-footer .footer-links a { font-size: 12px; } .workbench .window-footer .footer-links { flex-wrap: wrap; } }