:root { --ink:#17242a; --muted:#63737a; --paper:#f7f8f4; --line:#dce3df; --teal:#087f6f; --orange:#e17b45; --purple:#5547c9; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.shell { max-width:1180px; margin:auto; padding:28px 28px 44px; }
.hero { padding:20px 0 56px; border-bottom:1px solid var(--line); }
.hero h1 { animation:rise-in .8s cubic-bezier(.22,1,.36,1) both; }
.hero .lede { animation:rise-in .8s .12s cubic-bezier(.22,1,.36,1) both; }
.eyebrow { margin:0 0 16px; color:var(--teal); font:700 11px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.14em; }
.hero-grid { display:grid; grid-template-columns:1fr 220px; gap:40px; align-items:end; }
h1,h2,p { margin-top:0; }
h1 { font-size:clamp(3.2rem,8vw,7.5rem); line-height:.88; letter-spacing:-.08em; margin-bottom:28px; }
h1 em { color:var(--orange); font-style:normal; }
.lede { max-width:620px; color:var(--muted); font-size:1.15rem; line-height:1.6; }
.signal { border-left:3px solid var(--orange); padding:14px 0 14px 20px; display:grid; gap:5px; }
.signal-dot { width:9px; height:9px; background:var(--teal); border-radius:50%; display:block; margin-bottom:14px; animation:signal-pulse 2.4s ease-in-out infinite; }
.signal strong { font-size:3.8rem; line-height:1; letter-spacing:-.08em; }
.signal small { color:var(--muted); }
.controls { padding:38px 0 28px; }
.controls-head { display:flex; justify-content:space-between; align-items:end; margin-bottom:18px; }
.controls h2 { font-size:2rem; letter-spacing:-.05em; margin:0; }
.clear { border:1px solid var(--line); background:transparent; color:var(--muted); padding:9px 13px; border-radius:999px; cursor:pointer; font:inherit; }
.clear:hover,.clear:focus-visible { border-color:var(--teal); color:var(--teal); }
.filter-bar { display:grid; grid-template-columns:minmax(220px,1fr) 180px 180px; gap:10px; }
.search,.select-label { border:1px solid var(--line); background:#fff; color:var(--muted); border-radius:10px; display:flex; align-items:center; gap:10px; padding:0 13px; font-size:.78rem; }
.search span { font-size:1.5rem; line-height:0; color:var(--teal); }
.search input,.select-label select { border:0; background:transparent; color:var(--ink); font:inherit; outline:0; width:100%; padding:12px 0; }
.select-label { display:grid; grid-template-columns:auto 1fr; gap:10px; }
.select-label select { cursor:pointer; }
.search:focus-within,.select-label:focus-within { border-color:var(--teal); box-shadow:0 0 0 3px #087f6f18; }
.project-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.card { background:#fff; border:1px solid var(--line); border-radius:18px; overflow:hidden; transition:transform .2s,box-shadow .2s; animation:card-in .65s calc(var(--card-index) * 70ms) cubic-bezier(.22,1,.36,1) both; }
.card:hover { transform:translateY(-4px); box-shadow:0 16px 35px #17242a12; }
.card-image { display:block; width:100%; aspect-ratio:800/440; object-fit:cover; transition:transform .45s cubic-bezier(.22,1,.36,1); }
.card:hover .card-image { transform:scale(1.025); }
.card-body { padding:22px; }
.card-top { display:flex; justify-content:space-between; gap:12px; align-items:start; }
.card h3 { font-size:1.45rem; letter-spacing:-.04em; margin:0; }
.status { display:inline-block; color:var(--teal); background:#e5f4ef; border-radius:999px; padding:5px 9px; font:700 10px ui-monospace,monospace; letter-spacing:.08em; text-transform:uppercase; }
.card p { color:var(--muted); line-height:1.55; margin:15px 0; }
.tags { display:flex; flex-wrap:wrap; gap:6px; }
.tag { color:var(--muted); font-size:.78rem; }
.tag:not(:last-child):after { content:" /"; color:#b0bbb8; margin-left:6px; }
.card-actions,.dialog-links { display:flex; gap:10px; margin-top:20px; }
.action { color:var(--teal); font-weight:700; text-decoration:none; font-size:.9rem; }
.action:hover { text-decoration:underline; }
.details { border:0; background:none; padding:0; color:var(--purple); cursor:pointer; font:700 .9rem inherit; }
.empty { text-align:center; color:var(--muted); padding:60px; }
.empty button { color:var(--teal); border:0; background:none; cursor:pointer; font:inherit; text-decoration:underline; }
footer { border-top:1px solid var(--line); margin-top:56px; padding-top:22px; color:var(--muted); font-size:.9rem; }
footer a { color:var(--ink); text-decoration:none; }
footer a:hover { text-decoration:underline; }
.footer-note { float:right; }
dialog { border:0; border-radius:18px; padding:0; max-width:560px; width:calc(100% - 32px); color:var(--ink); box-shadow:0 24px 80px #17242a33; }
dialog::backdrop { background:#17242a88; }
dialog[open] { animation:dialog-in .25s cubic-bezier(.22,1,.36,1) both; }
.dialog-close { position:absolute; right:14px; top:10px; border:0; background:#fff; border-radius:50%; font-size:1.8rem; line-height:1; cursor:pointer; }
dialog img { display:block; width:100%; aspect-ratio:800/440; object-fit:cover; }
dialog>*:not(img):not(.dialog-close) { margin-left:28px; margin-right:28px; }
dialog .status { margin-top:24px; }
dialog h2 { font-size:2.2rem; letter-spacing:-.06em; margin-bottom:12px; }
dialog p { line-height:1.6; color:var(--muted); }
dialog .architecture { border-left:3px solid var(--orange); padding-left:14px; color:var(--ink); }
@keyframes rise-in { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }
@keyframes card-in { from { opacity:0; transform:translateY(18px) scale(.985); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes dialog-in { from { opacity:0; transform:translateY(10px) scale(.97); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes signal-pulse { 0%,100% { box-shadow:0 0 0 0 #087f6f38; } 50% { box-shadow:0 0 0 7px #087f6f00; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; } }
@media(max-width:700px) { .shell{padding:18px 16px 32px}.hero-grid{grid-template-columns:1fr}.hero{padding-bottom:38px}.signal{max-width:220px}.project-grid{grid-template-columns:1fr}.controls-head{align-items:start}.filter-bar{grid-template-columns:1fr}.footer-note{float:none;display:block;margin-top:12px} }