:root { --ink:#10172d; --paper:#f7f7f2; --lime:#d9ff36; --violet:#8f7cff; --serif:Iowan Old Style,Baskerville,"Times New Roman",serif; --sans:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; }
* { box-sizing:border-box; }
body { min-width:320px; margin:0; color:var(--ink); background:var(--paper); font-family:var(--sans); }
.dev-main { display:grid; min-height:100svh; place-items:center; padding:1.5rem; overflow:hidden; background:radial-gradient(circle at 86% 12%,rgba(143,124,255,.42),transparent 28rem),radial-gradient(circle at 5% 93%,rgba(217,255,54,.5),transparent 24rem); }
.dev-card { position:relative; width:min(100%,48rem); padding:clamp(2rem,8vw,5.5rem); overflow:hidden; border:1px solid rgba(16,23,45,.17); border-radius:1.5rem; background:rgba(255,255,255,.65); box-shadow:0 2rem 5rem rgba(16,23,45,.12); backdrop-filter:blur(12px); }
.dev-card::after { position:absolute; right:-3rem; bottom:-5rem; width:17rem; height:17rem; border:1px solid rgba(16,23,45,.16); border-radius:50%; content:""; }
.dev-kicker { display:flex; gap:.55rem; align-items:center; margin:0 0 1.5rem; font-size:.72rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.dev-kicker span { width:.55rem; height:.55rem; border-radius:50%; background:var(--lime); }
h1 { position:relative; z-index:1; margin:.2rem 0 1.35rem; font-size:clamp(3.3rem,9vw,6.4rem); line-height:.87; letter-spacing:-.08em; }
h1 em { font-family:var(--serif); font-weight:400; }
.dev-card > p:not(.dev-kicker) { max-width:34rem; margin:0 0 2rem; color:#46506b; font-size:clamp(1rem,2vw,1.14rem); line-height:1.55; }
.dev-meta { display:grid; grid-template-columns:1fr auto; gap:.5rem 2rem; max-width:23rem; padding-top:1.25rem; border-top:1px solid rgba(16,23,45,.15); font-size:.75rem; text-transform:uppercase; letter-spacing:.1em; }
.dev-meta span { color:#64708e; font-weight:700; }.dev-meta strong { font-size:.75rem; }