@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Noto+Sans+SC:wght@400;500;700&family=Playfair+Display:ital,wght@0,700;1,700&display=swap');

:root { --ink: #14251e; --cream: #f7f3e9; --lime: #d8f64a; --forest: #1d4839; --muted: #637269; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; color: var(--ink); background: var(--cream); font-family: "Noto Sans SC", sans-serif; }
.site-nav { position: absolute; top: 0; left: 0; right: 0; max-width: 1120px; margin: auto; padding: 24px 30px; display: flex; align-items: center; justify-content: space-between; }.brand { color: var(--forest); font: 700 20px "DM Mono", monospace; text-decoration: none; }.brand span { color: #b4d522; }.nav-actions { display: flex; align-items: center; gap: 18px; }.nav-actions a { color: var(--forest); font-size: 13px; text-decoration: none; }.nav-actions .nav-cta { padding: 9px 12px; color: #fff; border-radius: 6px; background: var(--forest); }.nav-user { color: var(--muted); font-size: 13px; }.nav-actions .nav-logout { margin: 0; padding: 0; color: var(--forest); background: transparent; font-size: 13px; font-weight: 500; }.nav-actions .nav-logout:hover { background: transparent; transform: none; }
.shell { min-height: 100vh; max-width: 1120px; margin: auto; padding: clamp(28px, 6vw, 84px) 30px 45px; display: grid; grid-template-columns: 1.12fr .88fr; gap: 34px; align-content: center; }
.hero { align-self: center; }.eyebrow { display: inline-block; padding: 7px 10px; color: var(--forest); background: var(--lime); border-radius: 99px; font: 500 11px "DM Mono", monospace; letter-spacing: .07em; }
h1 { margin: 22px 0 18px; font: 700 clamp(42px, 6vw, 76px)/1.05 "Playfair Display", serif; letter-spacing: -.045em; } h1 em { color: var(--forest); }
.hero p { max-width: 500px; margin: 0; color: var(--muted); font-size: 17px; line-height: 1.9; }
button { margin-top: 30px; padding: 14px 18px; color: #fff; border: 0; border-radius: 7px; background: var(--forest); font: 700 15px "Noto Sans SC", sans-serif; cursor: pointer; transition: transform .2s, background .2s; } button:hover { background: #2b6651; transform: translateY(-2px); } button span { margin-left: 12px; font-size: 20px; }
.terminal-card { overflow: hidden; align-self: center; color: #dbeadf; background: #10281f; border: 8px solid #fffdf7; border-radius: 15px; box-shadow: 0 18px 55px #16322824; }.terminal-header { height: 47px; display: flex; align-items: center; gap: 7px; padding: 0 16px; background: #173a2d; }
.window-dot { width: 10px; height: 10px; border-radius: 50%; }.red { background: #ff766c; }.yellow { background: #efc949; }.green { background: #83d483; }.filename { margin-left: 8px; color: #adc8b7; font: 12px "DM Mono", monospace; }.status { margin-left: auto; color: var(--lime); font-size: 12px; }
pre { margin: 0; padding: 54px 28px; font: 18px "DM Mono", monospace; }.keyword { color: #a5e7c2; }.string { color: #f5c781; }.output { display: flex; flex-direction: column; gap: 7px; padding: 18px 28px; background: #0b1d16; font: 14px "DM Mono", monospace; }.output span { color: #789789; font-size: 10px; letter-spacing: .12em; }.output strong { color: var(--lime); font-weight: 400; }
.promise-grid { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 22px; }.promise-grid article { min-height: 156px; padding: 20px; background: #fffdf7; border: 1px solid #e9e5d9; border-radius: 10px; }.promise-grid b { color: var(--forest); font: 500 12px "DM Mono", monospace; }.promise-grid h2 { margin: 15px 0 8px; font-size: 18px; }.promise-grid p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
@media (max-width: 720px) { .shell { grid-template-columns: 1fr; padding: 40px 20px; }.promise-grid { grid-template-columns: 1fr; margin-top: 0; }.terminal-card { grid-row: 2; } }