:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; background: #041820; color: #eef8f4; }
* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; background: radial-gradient(circle at 20% 0, #163e45 0, transparent 38%), linear-gradient(145deg, #03151d, #071f27 58%, #030e14); }
.notes-shell { width: min(940px, calc(100% - 32px)); margin: 0 auto; padding: 56px 0 90px; }
.notes-hero { padding: clamp(26px, 6vw, 56px); border: 1px solid rgba(247,191,100,.42); border-radius: 18px; background: linear-gradient(145deg, rgba(30,43,42,.95), rgba(7,20,29,.96)); box-shadow: 0 30px 90px rgba(0,0,0,.38); }
.eyebrow { margin: 0 0 8px; color: #60f0bd; font-size: 12px; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
h1 { margin: 0; color: #ffe6ac; font: 900 clamp(38px, 8vw, 68px)/1 Inter, ui-sans-serif, system-ui, sans-serif; letter-spacing: -.04em; }
.notes-hero > p:not(.eyebrow) { max-width: 640px; color: #bdd1ce; line-height: 1.6; }
a { display: inline-block; color: #071d24; padding: 10px 16px; border-radius: 8px; background: #60f0bd; font-weight: 850; text-decoration: none; }
.notes-list { display: grid; gap: 16px; margin-top: 22px; }
.patch-card { position:relative;padding: 26px clamp(20px, 4vw, 38px); border: 1px solid rgba(216,172,85,.25); border-radius: 10px; background: linear-gradient(145deg,rgba(24,23,18,.94),rgba(5,17,22,.96)); box-shadow: 0 18px 50px rgba(0,0,0,.24); }
.patch-card.is-latest { border-color:rgba(96,240,189,.5);box-shadow:0 22px 65px rgba(0,0,0,.34),0 0 30px rgba(96,240,189,.08) }.patch-card.is-latest::before{content:"LATEST";position:absolute;right:18px;top:-10px;padding:5px 9px;border-radius:4px;background:#60f0bd;color:#08231c;font-size:9px;font-weight:900;letter-spacing:.1em}
.patch-meta { display: flex; flex-wrap:wrap;align-items: center; gap: 9px 12px; color: #a9bfbd; font-size: 11px; font-weight: 750; text-transform: uppercase; }
.patch-version{color:#ffe2a0;font-size:12px}.patch-meta time{padding-left:12px;border-left:1px solid rgba(255,255,255,.14);color:#d6c6a7}
.patch-meta span { padding: 4px 8px; border: 1px solid rgba(96,240,189,.35); border-radius: 999px; color: #60f0bd; }
h2 { margin: 12px 0 18px; color: #fff0c8; font: 850 clamp(22px, 4vw, 31px)/1.15 Inter, ui-sans-serif, system-ui, sans-serif; letter-spacing:-.02em }
.patch-visuals { display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:10px;margin:4px 0 18px; }
.patch-visual { display:grid;grid-template-columns:96px minmax(0,1fr);gap:13px;align-items:center;margin:0;padding:10px;border:1px solid rgba(216,172,85,.28);border-radius:8px;background:linear-gradient(120deg,rgba(44,28,15,.72),rgba(5,20,25,.82)); }
.patch-visual img,.patch-visual canvas { display:block;width:96px;height:96px;border:1px solid rgba(255,226,164,.24);border-radius:7px;background:#071820;object-fit:cover;box-shadow:0 7px 18px rgba(0,0,0,.36); }
.patch-visual figcaption strong,.patch-visual figcaption span { display:block; }
.patch-visual figcaption strong { color:#ffe2a0;font-size:14px;line-height:1.25; }
.patch-visual figcaption span { margin-top:5px;color:#bfd0cc;font-size:12px;line-height:1.45; }
.patch-section { display: grid; grid-template-columns: minmax(120px, 170px) 1fr; gap: 14px; padding: 12px 0; border-top: 1px solid rgba(255,255,255,.07); }
.patch-section h3 { margin: 2px 0; color: #60f0bd; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; }
ul { margin: 0; padding-left: 22px; color: #d8e4e1; line-height: 1.65; }
li::marker { color: #f7bf64; }
@media (max-width: 560px) { .patch-section { grid-template-columns: 1fr; gap: 4px; }.patch-visuals{grid-template-columns:1fr}.patch-visual{grid-template-columns:74px 1fr}.patch-visual img,.patch-visual canvas{width:74px;height:74px} }