.project-page{--accent-soft:color-mix(in srgb, var(--accent) 14%, transparent);--accent-line:color-mix(in srgb, var(--accent) 45%, transparent);--ink-2:#ada1a5;--ink-3:#7b6f73;--hairline:#ffffff14;--mono:ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;width:100vw;margin-left:calc(50% - 50vw);margin-top:calc(-1 * var(--header-height));padding-top:var(--header-height);min-height:calc(100vh - var(--header-height));color:#fff;text-align:left;background:#080c21;position:relative;overflow:hidden}.project-page>section{z-index:1;max-width:76rem;padding:var(--spacing-xl) var(--spacing-lg) 0;margin:0 auto;position:relative}.project-page>section+section{padding-top:var(--spacing-xxl)}@media (max-width:700px){.project-page>section{padding:var(--spacing-lg) var(--spacing-sm) 0}}.project-glow--accent{background:radial-gradient(circle, color-mix(in srgb, var(--accent) 26%, transparent) 0%, color-mix(in srgb, var(--accent) 7%, transparent) 45%, transparent 70%);width:46rem;height:46rem;top:-18rem;right:-10rem}.project-topbar{justify-content:space-between;align-items:center;gap:var(--spacing-sm);margin-bottom:var(--spacing-xl);flex-wrap:wrap;display:flex}.project-back{min-height:44px;color:var(--ink-2);align-items:center;gap:.5rem;font-size:.875rem;text-decoration:none;transition:color .2s;display:inline-flex}.project-back:hover{color:#fff}.project-back svg{transition:transform .2s}.project-back:hover svg{transform:translate(-3px)}.mode-switch{border:1px solid var(--hairline);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#ffffff09;border-radius:999px;grid-template-columns:1fr 1fr;padding:4px;display:inline-grid;position:relative}.mode-switch-thumb{background:#ffffff1a;border-radius:999px;width:calc(50% - 4px);transition:transform .32s cubic-bezier(.2,.8,.2,1);position:absolute;top:4px;bottom:4px;left:4px;box-shadow:inset 0 1px #ffffff1f,0 4px 14px #00000059}.mode-switch[data-mode=app] .mode-switch-thumb{transform:translate(100%)}.mode-switch-option{z-index:1;min-height:38px;color:var(--ink-2);cursor:pointer;white-space:nowrap;background:0 0;border:0;border-radius:999px;justify-content:center;align-items:center;gap:.5rem;padding:0 1.1rem;font-size:.85rem;font-weight:500;transition:color .2s;display:inline-flex;position:relative}.mode-switch-option[aria-pressed=true]{color:#fff}.mode-switch-option:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.mode-switch-live{background:#4ee39d;border-radius:50%;width:6px;height:6px;box-shadow:0 0 0 3px #4ee39d2e}.project-hero-body{align-items:flex-start;gap:var(--spacing-sm);flex-direction:column;display:flex}.project-eyebrow{font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);align-items:center;gap:.6rem;font-size:.75rem;display:inline-flex}.project-eyebrow-dot{background:var(--accent);width:7px;height:7px;box-shadow:0 0 12px var(--accent);border-radius:2px}.project-title{letter-spacing:-.045em;margin:0;font-size:clamp(3rem,9vw,6.5rem);font-weight:500;line-height:.95}.project-page.is-app .project-title{font-size:clamp(2rem,5vw,3rem)}.project-tagline{max-width:40rem;margin:var(--spacing-xs) 0 0;color:var(--ink-2);font-size:clamp(1.05rem,1.6vw,1.3rem);line-height:1.55}.project-actions{align-items:center;gap:var(--spacing-sm);margin:var(--spacing-sm) 0 var(--spacing-xs);flex-wrap:wrap;display:flex}.project-github-btn,.project-ghost-btn{border-radius:999px;align-items:center;gap:.6rem;min-height:48px;padding:0 1.4rem;font-size:.975rem;font-weight:500;text-decoration:none;transition:transform .22s cubic-bezier(.2,.8,.2,1),background .22s,border-color .22s;display:inline-flex}.project-github-btn{color:#0b0d18;background:linear-gradient(#fff,#e9e6ee);min-height:54px;padding:0 1.25rem 0 1.1rem;box-shadow:inset 0 -2px #00000014,0 12px 30px -12px #ffffff59}.project-github-btn:hover{transform:translateY(-2px)}.project-ghost-btn{background:#ffffff08;border:1px solid #ffffff24}.project-ghost-btn:hover{background:#ffffff0f;border-color:#ffffff4d}.project-github-btn:focus-visible,.project-ghost-btn:focus-visible,.project-back:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.project-page .tag-pill{background:#ffffff0d;border-color:#ffffff1f}.project-page>.product-frame-section{padding-top:var(--spacing-xl)}.product-frame{box-shadow:0 0 0 6px #ffffff05, 0 40px 120px -40px color-mix(in srgb, var(--accent) 45%, transparent), 0 30px 60px -30px #000c;background:#0b1026;border:1px solid #ffffff1a;border-radius:18px;position:relative;overflow:hidden}.product-frame-bar{align-items:center;gap:var(--spacing-sm);border-bottom:1px solid var(--hairline);background:#ffffff06;height:42px;padding:0 1rem;display:flex}.product-frame-dots{gap:6px;display:flex}.product-frame-dots i{background:#ffffff1f;border-radius:50%;width:10px;height:10px}.product-frame-url{max-width:26rem;font-family:var(--mono);color:var(--ink-3);text-align:center;white-space:nowrap;text-overflow:ellipsis;background:#ffffff0a;border-radius:6px;flex:1;margin:0 auto;padding:.25rem .8rem;font-size:.72rem;overflow:hidden}.product-frame-body{max-height:36rem;overflow:hidden;-webkit-mask-image:linear-gradient(#000 72%,#0000);mask-image:linear-gradient(#000 72%,#0000)}.product-frame-open{padding-bottom:var(--spacing-md);cursor:pointer;background:0 0;border:0;justify-content:center;align-items:flex-end;display:flex;position:absolute;inset:42px 0 0}.product-frame-open-pill{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#080c21b8;border:1px solid #ffffff29;border-radius:999px;align-items:center;gap:.5rem;padding:.7rem 1.2rem;font-size:.9rem;font-weight:500;transition:transform .24s cubic-bezier(.2,.8,.2,1),border-color .24s;display:inline-flex}.product-frame-open:hover .product-frame-open-pill,.product-frame-open:focus-visible .product-frame-open-pill{border-color:var(--accent);transform:translateY(-4px)}.product-frame-open:focus-visible{outline:none}.terminal{padding:var(--spacing-md) var(--spacing-md) var(--spacing-xl);font-family:var(--mono)}.terminal-caption{margin-bottom:var(--spacing-sm);color:var(--ink-3);font-size:.72rem}.terminal-body{white-space:pre-wrap;margin:0;font-family:inherit;font-size:.875rem;line-height:1.75}.terminal-line{color:#cfc6cc}.terminal-line--input{color:#fff}.terminal-line--muted{color:var(--ink-3);font-style:italic}.sheet-preview{padding:var(--spacing-md)}.sheet-preview-url{justify-content:space-between;align-items:center;gap:var(--spacing-sm);margin-bottom:var(--spacing-md);border:1px solid var(--hairline);font-family:var(--mono);color:var(--ink-2);border-radius:10px;padding:.4rem .4rem .4rem 1rem;font-size:.78rem;display:flex}.sheet-preview-btn{background:var(--accent);color:#062016;font-family:var(--font-geist-sans), sans-serif;white-space:nowrap;border-radius:7px;padding:.45rem .9rem;font-weight:600}.sheet-preview-table{border-collapse:collapse;font-variant-numeric:tabular-nums;width:100%;font-size:.875rem}.sheet-preview-table th,.sheet-preview-table td{border-bottom:1px solid var(--hairline);text-align:right;padding:.75rem 1rem}.sheet-preview-table th:first-child,.sheet-preview-table td:first-child{text-align:left}.sheet-preview-table th{text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);font-size:.75rem;font-weight:500}.sheet-preview-table th.is-sorted{color:var(--accent)}.sheet-preview-table td.is-max{color:#4ee39d;background:#4ee39d14}.sheet-preview-table td.is-min{color:#ff7a7a;background:#ff5c5c14}.project-stats{border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));margin:0;display:grid}.project-stat{padding:var(--spacing-md) var(--spacing-md) var(--spacing-md) 0;flex-direction:column-reverse;gap:.35rem;display:flex}.project-stat+.project-stat{padding-left:var(--spacing-md);border-left:1px solid var(--hairline)}.project-stat-value{letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin:0;font-size:clamp(1.75rem,3vw,2.4rem);font-weight:500;line-height:1.1}.project-stat-label{color:var(--ink-2);font-size:.85rem}.project-section-head{flex-direction:column;gap:.75rem;display:flex}.project-kicker{font-family:var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);align-items:center;gap:.75rem;font-size:.72rem;display:inline-flex}.project-kicker-index{color:var(--accent)}.project-section-title{letter-spacing:-.03em;margin:0;font-size:clamp(1.75rem,3.2vw,2.5rem);line-height:1.1}.project-split{gap:var(--spacing-lg);grid-template-columns:minmax(14rem,22rem) 1fr;align-items:start;display:grid}.project-prose{flex-direction:column;gap:1.25rem;display:flex}.project-prose p{color:#d8d0d4;margin:0;font-size:1.125rem;line-height:1.7}.project-prose p:first-child{color:#fff;font-size:1.3rem;font-weight:400;line-height:1.6}.project-features{margin:var(--spacing-lg) 0 0;border:1px solid var(--hairline);background:var(--hairline);border-radius:16px;grid-template-columns:repeat(3,1fr);gap:1px;padding:0;list-style:none;display:grid;overflow:hidden}.project-feature{padding:var(--spacing-md);background:#0a0e24;flex-direction:column;gap:.75rem;transition:background .3s;display:flex}.project-feature:hover{background:#0d1230}.project-feature-icon{width:40px;height:40px;color:var(--accent);background:var(--accent-soft);border:1px solid color-mix(in srgb, var(--accent) 22%, transparent);border-radius:10px;place-items:center;margin-bottom:.5rem;display:grid}.project-feature-title{letter-spacing:-.01em;margin:0;font-size:1.05rem}.project-feature-body{color:var(--ink-2);margin:0;font-size:.95rem;line-height:1.6}.project-pipeline{grid-template-columns:repeat(var(--steps), 1fr);gap:var(--spacing-md);margin:var(--spacing-lg) 0 0;padding:0;list-style:none;display:grid;position:relative}.project-pipeline:before{content:"";background:linear-gradient(to right, var(--accent-line), #ffffff0f);height:1px;position:absolute;top:7px;left:0;right:0}.project-step{padding-top:var(--spacing-md);flex-direction:column;gap:.6rem;display:flex;position:relative}.project-step-node{border:1px solid var(--accent);background:#080c21;border-radius:50%;width:15px;height:15px;position:absolute;top:0;left:0;box-shadow:0 0 0 4px #080c21}.project-step-node:after{content:"";background:var(--accent);border-radius:50%;position:absolute;inset:4px}.project-step-index{font-family:var(--mono);color:var(--ink-3);font-size:.75rem}.project-step-title{margin:0;font-size:1.15rem}.project-step-body{color:var(--ink-2);margin:0;font-size:.95rem;line-height:1.6}.project-stack{flex-wrap:wrap;gap:.6rem;margin:0;padding:0;list-style:none;display:flex}.project-stack li{border:1px solid var(--hairline);font-family:var(--mono);color:#d8d0d4;background:#ffffff06;border-radius:8px;padding:.55rem 1rem;font-size:.8rem}.project-page>.project-closing{align-items:center;gap:var(--spacing-md);text-align:center;padding-bottom:calc(var(--spacing-xxl) * 1.25);flex-direction:column;display:flex}.project-closing-title{letter-spacing:-.03em;max-width:30rem;margin:0;font-size:clamp(1.6rem,3.4vw,2.4rem);line-height:1.15}.project-page>.project-app{max-width:88rem;padding-top:var(--spacing-lg);padding-bottom:var(--spacing-xxl)}.sandbox-loading{place-items:center;min-height:32rem;display:grid}.sandbox-loading-bar{background:linear-gradient(90deg, transparent, var(--accent), transparent);background-size:200% 100%;border-radius:2px;width:8rem;height:2px;animation:1.2s linear infinite sandbox-loading}@keyframes sandbox-loading{0%{background-position:100% 0}to{background-position:-100% 0}}.sheet-sandbox{padding:var(--spacing-md);border:1px solid var(--hairline);background:#ffffff05;border-radius:18px}@media (max-width:1024px){.project-features{grid-template-columns:repeat(2,1fr)}.project-pipeline{row-gap:var(--spacing-lg);grid-template-columns:repeat(2,1fr)}.project-pipeline:before{display:none}}@media (max-width:768px){.project-page>section+section{padding-top:var(--spacing-xl)}.project-topbar{margin-bottom:var(--spacing-md)}.project-split{gap:var(--spacing-md);grid-template-columns:1fr}.project-features,.project-pipeline{grid-template-columns:1fr}.project-stats{grid-template-columns:1fr 1fr}.project-stat,.project-stat+.project-stat{padding:var(--spacing-sm);border-left:0}.project-stat:nth-child(2n){border-left:1px solid var(--hairline)}.project-stat:nth-child(n+3){border-top:1px solid var(--hairline)}.product-frame-body{max-height:28rem}.sheet-preview-table th:nth-child(2),.sheet-preview-table td:nth-child(2),.sheet-preview-table th:nth-child(3),.sheet-preview-table td:nth-child(3){display:none}.sheet-preview-url span:first-child{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.sheet-sandbox{padding:var(--spacing-sm)}}@media (prefers-reduced-motion:reduce){.mode-switch-thumb,.sandbox-loading-bar{transition:none;animation:none}}
