@font-face {
    font-family: 'Paperlogy';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-1Thin.woff2') format('woff2');
    font-weight: 100;
    font-display: swap;
}

@font-face {
    font-family: 'Paperlogy';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-2ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-display: swap;
}

@font-face {
    font-family: 'Paperlogy';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-3Light.woff2') format('woff2');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Paperlogy';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-4Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Paperlogy';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-5Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Paperlogy';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-6SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Paperlogy';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-7Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Paperlogy';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-8ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: 'Paperlogy';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-9Black.woff2') format('woff2');
    font-weight: 900;
    font-display: swap;
}
    :root {
      color-scheme: dark;
      --bg: #0b0d14;
      --bg-soft: #10131d;
      --panel: rgba(20, 24, 37, .82);
      --panel-solid: #141825;
      --panel-2: #191e2e;
      --line: rgba(168, 177, 208, .14);
      --text: #f1f3fb;
      --muted: #a1a8bc;
      --faint: #6e768e;
      --purple: #a78bfa;
      --purple-2: #8464ee;
      --mint: #72e6c1;
      --blue: #82b4ff;
      --amber: #f5c779;
      --rose: #ff91ae;
      --shadow: 0 24px 90px rgba(0, 0, 0, .26);
      --radius: 22px;
      --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
      --sans: "Paperlogy", Inter, Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
    }
    html[data-theme="light"] {
      color-scheme: light;
      --bg: #f7f8fc;
      --bg-soft: #eef0f8;
      --panel: rgba(255, 255, 255, .86);
      --panel-solid: #fff;
      --panel-2: #f0f1fa;
      --line: rgba(72, 78, 112, .16);
      --text: #171a2a;
      --muted: #596078;
      --faint: #7d849b;
      --purple: #7655dc;
      --purple-2: #6442cc;
      --mint: #16876d;
      --blue: #326bcb;
      --amber: #a76a08;
      --rose: #c43f68;
      --shadow: 0 24px 70px rgba(40, 42, 75, .10);
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; scroll-padding-top: 92px; }
    body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); line-height: 1.65; -webkit-font-smoothing: antialiased; }
    a { color: inherit; text-decoration: none; }
    button { font: inherit; }
    ::selection { background: rgba(167,139,250,.35); }
    .ambient { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
    .ambient::before, .ambient::after { content:""; position:absolute; width: 46vw; height:46vw; border-radius:50%; filter: blur(90px); opacity:.12; }
    .ambient::before { background:#7657f3; top:-24vw; left:-12vw; }
    .ambient::after { background:#30d4b0; right:-20vw; top:35vh; opacity:.07; }
    .grid-bg { position: fixed; inset:0; z-index:-1; pointer-events:none; opacity:.3; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 52px 52px; mask-image: linear-gradient(to bottom, black, transparent 88%); }
    .wrap { width:min(1160px, calc(100% - 44px)); margin-inline:auto; }
    .topbar { position:sticky; top:0; z-index:50; border-bottom:1px solid var(--line); background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(18px); }
    .nav { height:76px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
    .brand { display:flex; align-items:center; gap:11px; font-weight:800; letter-spacing:-.045em; font-size:1.18rem; }
    .brand-mark { width:34px; height:34px; display:grid; place-items:center; border-radius:11px; background:linear-gradient(140deg, #b4a0ff, #7660e8 62%, #43d9b5); box-shadow:0 5px 24px rgba(132,100,238,.26); }
    .brand-mark img { width: 100%; height: 100%; object-fit: contain; display: block; }   .brand small { color:var(--faint); font-size:.72rem; font-weight:600; letter-spacing:.08em; margin-left:2px; }
    .nav-links { display:flex; align-items:center; gap:26px; color:var(--muted); font-size:.88rem; font-weight:600; }
    .nav-links a { transition:color .2s; }
    .nav-links a:hover, .nav-links a.active { color:var(--text); }
    .nav-actions { display:flex; align-items:center; gap:10px; }
    .icon-btn, .menu-btn { height:39px; width:39px; border-radius:12px; background:var(--panel); border:1px solid var(--line); color:var(--text); cursor:pointer; display:grid; place-items:center; transition:transform .2s, border-color .2s; }
    .icon-btn:hover, .menu-btn:hover { transform:translateY(-1px); border-color:color-mix(in srgb, var(--purple) 65%, var(--line)); }
    .icon-btn svg, .menu-btn svg { width:18px; height:18px; }
    .menu-btn { display:none; }
    .hero { padding:94px 0 84px; position:relative; }
    .hero-layout { display:grid; grid-template-columns:1.02fr .98fr; gap:54px; align-items:center; }
    .eyebrow { display:inline-flex; align-items:center; gap:9px; border:1px solid color-mix(in srgb, var(--purple) 32%, var(--line)); background:color-mix(in srgb, var(--purple) 9%, var(--panel)); color:var(--purple); border-radius:999px; padding:7px 12px; font-size:.76rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
    .status-dot { width:7px; height:7px; background:var(--amber); border-radius:50%; box-shadow:0 0 0 4px color-mix(in srgb, var(--amber) 13%, transparent); }
    h1 { margin:22px 0 18px; font-size:clamp(3.1rem, 6vw, 5.55rem); line-height:.99; letter-spacing:-.075em; font-weight:850; }
    .gradient-text { background:linear-gradient(100deg, var(--purple) 8%, #d8b5ff 48%, var(--mint) 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
    .hero-lead { max-width:560px; margin:0; color:var(--muted); font-size:1.08rem; line-height:1.9; }
    .hero-lead strong { color:var(--text); font-weight:700; }
    .hero-ctas { display:flex; flex-wrap:wrap; gap:12px; margin-top:31px; }
    .btn { display:inline-flex; justify-content:center; align-items:center; gap:10px; padding:12px 17px; border-radius:13px; border:1px solid var(--line); font-size:.9rem; font-weight:750; transition:transform .2s, box-shadow .2s, border-color .2s; cursor:pointer; }
    .btn:hover { transform:translateY(-2px); }
    .btn-primary { color:#111322; background:linear-gradient(115deg, #c2afff, #9b82fa 65%, #9cebd9); border-color:transparent; box-shadow:0 10px 30px rgba(132,100,238,.2); }
    .btn-secondary { background:var(--panel); color:var(--text); }
    .btn svg { width:17px; height:17px; }
    .hero-meta { display:flex; gap:22px; flex-wrap:wrap; margin-top:30px; color:var(--faint); font-size:.78rem; }
    .hero-meta span { display:flex; align-items:center; gap:7px; }
    .hero-meta svg { width:15px; height:15px; color:var(--mint); }
    .code-window { position:relative; border:1px solid color-mix(in srgb, var(--purple) 30%, var(--line)); background:var(--panel); box-shadow:var(--shadow); border-radius:20px; overflow:hidden; transform:perspective(1000px) rotateY(-2deg) rotateX(1deg); }
    .code-window::before { content:""; position:absolute; inset:-1px; pointer-events:none; border-radius:inherit; background:linear-gradient(130deg, rgba(167,139,250,.15), transparent 42%, rgba(114,230,193,.08)); }
    .window-bar { position:relative; display:flex; align-items:center; justify-content:space-between; padding:15px 18px; border-bottom:1px solid var(--line); background:color-mix(in srgb, var(--panel-2) 65%, transparent); }
    .window-dots { display:flex; gap:6px; }
    .window-dots i { width:8px; height:8px; border-radius:50%; background:#ff7d83; }
    .window-dots i:nth-child(2) { background:#f3c56f; }
    .window-dots i:nth-child(3) { background:#6bd7a1; }
    .file-name { font-family:var(--mono); font-size:.72rem; color:var(--muted); }
    .window-chip { font-size:.68rem; color:var(--mint); background:color-mix(in srgb, var(--mint) 9%, transparent); padding:3px 8px; border-radius:6px; border:1px solid color-mix(in srgb, var(--mint) 20%, transparent); }
    .code-body { position:relative; padding:27px 24px 24px; }
    .code-label { color:var(--faint); font-size:.7rem; letter-spacing:.12em; font-weight:800; text-transform:uppercase; margin-bottom:15px; }
    pre, code { font-family:var(--mono); }
    pre { margin:0; overflow:auto; tab-size:4; }
    .hero-code { font-size:clamp(.75rem, 1.2vw, .91rem); line-height:2.05; color:var(--text); }
    .kw { color:#c6a6ff; }
    .fn { color:#82c7ff; }
    .str { color:#8de3be; }
    .type { color:#f1c982; }
    .comment { color:var(--faint); font-style:italic; }
    .num { color:#f2a7bd; }
    .code-footer { border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:16px; padding:13px 19px; color:var(--faint); font-size:.72rem; }
    .code-footer span { display:flex; align-items:center; gap:7px; }
    .code-footer svg { width:14px; height:14px; color:var(--mint); }
    .section { padding:86px 0; }
    .section-head { max-width:690px; margin-bottom:36px; }
    .kicker { color:var(--purple); text-transform:uppercase; letter-spacing:.15em; font-size:.72rem; font-weight:850; display:flex; align-items:center; gap:10px; }
    .kicker::before { content:""; width:22px; height:1px; background:var(--purple); }
    h2 { margin:12px 0 12px; font-size:clamp(2rem, 4vw, 3.25rem); letter-spacing:-.065em; line-height:1.12; }
    .section-desc { margin:0; color:var(--muted); font-size:1rem; line-height:1.85; }
    .warning { display:flex; align-items:flex-start; gap:15px; border:1px solid color-mix(in srgb, var(--amber) 28%, var(--line)); border-radius:17px; padding:18px 20px; background:color-mix(in srgb, var(--amber) 5%, var(--panel)); margin-bottom:29px; }
    .warning-icon { flex:0 0 36px; width:36px; height:36px; border-radius:11px; display:grid; place-items:center; background:color-mix(in srgb, var(--amber) 12%, transparent); color:var(--amber); }
    .warning-icon svg { width:19px; height:19px; }
    .warning strong { display:block; margin:0 0 3px; font-size:.9rem; }
    .warning p { margin:0; color:var(--muted); font-size:.85rem; line-height:1.7; }
    .design-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; }
    .design-card { min-height:215px; padding:24px; border-radius:var(--radius); background:var(--panel); border:1px solid var(--line); position:relative; overflow:hidden; transition:transform .25s, border-color .25s; }
    .design-card:hover { transform:translateY(-4px); border-color:color-mix(in srgb, var(--purple) 45%, var(--line)); }
    .design-card::after { content:""; position:absolute; width:130px; height:130px; right:-65px; bottom:-75px; border-radius:50%; background:var(--purple); opacity:.07; filter:blur(2px); }
    .card-icon { display:grid; place-items:center; width:42px; height:42px; border:1px solid color-mix(in srgb, var(--purple) 26%, var(--line)); background:color-mix(in srgb, var(--purple) 8%, var(--panel)); border-radius:13px; color:var(--purple); margin-bottom:20px; }
    .card-icon svg { width:21px; height:21px; }
    .design-card h3 { margin:0 0 8px; font-size:1.08rem; letter-spacing:-.03em; }
    .design-card p { color:var(--muted); margin:0; font-size:.87rem; line-height:1.8; }
    .architecture { border:1px solid var(--line); background:var(--panel); border-radius:var(--radius); padding:28px; }
    .arch-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:25px; }
    .arch-head h3 { margin:0; font-size:1rem; }
    .arch-note { color:var(--faint); font-size:.75rem; }
    .pipeline { display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); align-items:stretch; gap:20px; }
    .pipe-item { position:relative; display:flex; flex-direction:column; justify-content:center; align-items:center; min-height:112px; padding:14px 8px; border:1px solid var(--line); background:var(--panel-2); border-radius:14px; text-align:center; }
    .pipe-item:not(:last-child)::after { content:"→"; position:absolute; right:-18px; top:50%; transform:translate(50%,-50%); color:var(--faint); font-size:1rem; }
    .pipe-item.highlight { border-color:color-mix(in srgb, var(--purple) 58%, var(--line)); background:color-mix(in srgb, var(--purple) 9%, var(--panel-2)); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--purple) 8%, transparent); }
    .pipe-item .pipe-num { font: .68rem var(--mono); color:var(--faint); margin-bottom:7px; }
    .pipe-item strong { font-size:.83rem; letter-spacing:-.02em; }
    .pipe-item small { margin-top:4px; color:var(--muted); font-size:.68rem; }
    .arch-bottom { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:16px; }
    .arch-detail { border:1px dashed var(--line); border-radius:12px; padding:13px 15px; color:var(--muted); font-size:.79rem; }
    .arch-detail strong { color:var(--text); }
    .syntax-layout { display:grid; grid-template-columns:.7fr 1.3fr; gap:26px; align-items:start; }
    .syntax-side { position:sticky; top:105px; }
    .syntax-side p { color:var(--muted); margin:0 0 22px; line-height:1.9; font-size:.94rem; }
    .syntax-list { display:grid; gap:8px; }
    .syntax-link { display:flex; align-items:center; justify-content:space-between; gap:10px; text-align:left; padding:11px 13px; border-radius:12px; border:1px solid transparent; background:transparent; color:var(--muted); cursor:pointer; font-weight:700; font-size:.86rem; }
    .syntax-link:hover { color:var(--text); background:var(--panel); }
    .syntax-link[aria-selected="true"] { color:var(--text); border-color:color-mix(in srgb, var(--purple) 33%, var(--line)); background:color-mix(in srgb, var(--purple) 8%, var(--panel)); }
    .syntax-link .chev { color:var(--faint); font-size:1.1rem; }
    .snippet { display:none; border:1px solid var(--line); border-radius:19px; background:var(--panel); overflow:hidden; box-shadow:var(--shadow); }
    .snippet.active { display:block; animation:fade-in .25s ease-out; }
    @keyframes fade-in { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:translateY(0); } }
    .snippet-head { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:15px 18px; border-bottom:1px solid var(--line); }
    .snippet-heading { display:flex; align-items:center; gap:10px; }
    .snippet-heading .mini-file { width:29px; height:29px; border-radius:9px; display:grid; place-items:center; background:color-mix(in srgb, var(--purple) 10%, var(--panel)); color:var(--purple); }
    .snippet-heading .mini-file svg { width:15px; height:15px; }
    .snippet-heading strong { display:block; font-size:.85rem; }
    .snippet-heading small { display:block; font-size:.7rem; color:var(--faint); }
    .copy-btn { display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line); border-radius:9px; color:var(--muted); background:var(--panel-2); padding:7px 10px; cursor:pointer; font-size:.74rem; font-weight:750; }
    .copy-btn:hover { border-color:var(--purple); color:var(--text); }
    .copy-btn svg { width:14px; height:14px; }
    .snippet pre { padding:23px 22px; font-size:.83rem; line-height:1.95; color:var(--text); min-height:238px; }
    .snippet-caption { padding:14px 18px; border-top:1px solid var(--line); color:var(--muted); font-size:.79rem; line-height:1.75; }
    .snippet-caption strong { color:var(--mint); }
    .permissions { display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; margin-top:25px; }
    .permission-card { border:1px solid var(--line); border-radius:16px; padding:19px; background:var(--panel); }
    .permission-symbol { display:inline-flex; align-items:center; gap:8px; font:700 1.15rem var(--mono); color:var(--purple); margin-bottom:10px; }
    .permission-symbol .permission-dot { width:8px; height:8px; border-radius:50%; background:var(--purple); }
    .permission-card:nth-child(2) .permission-symbol { color:var(--amber); }
    .permission-card:nth-child(2) .permission-dot { background:var(--amber); }
    .permission-card:nth-child(3) .permission-symbol { color:var(--mint); }
    .permission-card:nth-child(3) .permission-dot { background:var(--mint); }
    .permission-card h3 { margin:0 0 5px; font-size:.95rem; }
    .permission-card p { margin:0; color:var(--muted); font-size:.81rem; line-height:1.75; }
    .mini-example { margin-top:12px; display:block; padding:9px 10px; border-radius:8px; background:var(--panel-2); font: .73rem var(--mono); color:var(--text); overflow-wrap:anywhere; }
    .runtime-grid { display:grid; grid-template-columns:1fr 1fr; gap:15px; }
    .runtime-card { border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); overflow:hidden; }
    .runtime-head { padding:21px 23px 17px; display:flex; align-items:center; gap:13px; }
    .runtime-icon { width:42px; height:42px; flex:0 0 42px; display:grid; place-items:center; border-radius:13px; background:color-mix(in srgb, var(--blue) 11%, var(--panel)); color:var(--blue); }
    .runtime-card:nth-child(2) .runtime-icon { color:var(--mint); background:color-mix(in srgb, var(--mint) 10%, var(--panel)); }
    .runtime-icon svg { width:21px; height:21px; }
    .runtime-head h3 { margin:0; font-size:1.05rem; }
    .runtime-head code { color:var(--muted); font-size:.76rem; }
    .runtime-card p { margin:0; padding:0 23px 17px; color:var(--muted); font-size:.85rem; }
    .terminal { background:var(--bg-soft); border-top:1px solid var(--line); padding:15px 22px; font: .8rem/1.9 var(--mono); color:var(--muted); }
    .terminal .prompt { color:var(--mint); margin-right:9px; }
    .terminal .command { color:var(--text); }
    .terminal .hint { color:var(--faint); font-family:var(--sans); font-size:.72rem; margin-left:19px; }
    .roadmap { display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; counter-reset:roadmap; }
    .roadmap-item { position:relative; padding:22px 21px; border:1px solid var(--line); border-radius:17px; background:var(--panel); min-height:166px; counter-increment:roadmap; }
    .roadmap-item::before { content:"0" counter(roadmap); display:block; margin-bottom:19px; color:var(--purple); font:700 .78rem var(--mono); }
    .roadmap-item h3 { margin:0 0 7px; font-size:.97rem; }
    .roadmap-item p { margin:0; color:var(--muted); font-size:.82rem; line-height:1.75; }
    .roadmap-status { display:inline-block; margin-top:13px; border-radius:6px; padding:3px 7px; color:var(--amber); background:color-mix(in srgb, var(--amber) 8%, transparent); font-size:.68rem; font-weight:800; }
    .closing { padding:22px 0 92px; }
    .closing-card { position:relative; overflow:hidden; border-radius:27px; padding:44px; border:1px solid color-mix(in srgb, var(--purple) 28%, var(--line)); background:linear-gradient(115deg, color-mix(in srgb, var(--purple) 11%, var(--panel)), color-mix(in srgb, var(--mint) 5%, var(--panel))); }
    .closing-card::after { content:"A"; position:absolute; right:20px; bottom:-115px; color:var(--purple); opacity:.07; font-size:19rem; font-weight:900; letter-spacing:-.1em; line-height:1; pointer-events:none; }
    .closing-card h2 { max-width:650px; font-size:clamp(2rem, 4vw, 3.3rem); }
    .closing-card p { max-width:620px; color:var(--muted); margin:0; line-height:1.9; }
    .closing-actions { position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:11px; margin-top:24px; }
    footer { border-top:1px solid var(--line); padding:25px 0 30px; color:var(--faint); font-size:.75rem; }
    .footer-inner { display:flex; justify-content:center; align-items:center; gap:20px; flex-wrap:wrap;}
    .footer-brand { display:flex; align-items:center; gap:9px; color:var(--text); font-weight:800; font-size:.85rem; }
    .footer-brand .brand-mark { width:27px; height:27px; border-radius:8px; }
    .footer-brand .brand-mark svg { width:18px; height:18px; }
    .footer-note { display:flex; gap:16px; flex-wrap:wrap; }
    .footer-note a:hover { color:var(--text); }
    .toast { position:fixed; bottom:23px; left:50%; transform:translate(-50%, 18px); background:var(--text); color:var(--bg); padding:10px 15px; border-radius:11px; box-shadow:var(--shadow); font-size:.82rem; font-weight:750; opacity:0; pointer-events:none; transition:.2s; z-index:100; }
    .toast.show { transform:translate(-50%, 0); opacity:1; }
    @media (max-width: 960px) {
      .hero { padding-top:70px; }
      .hero-layout { grid-template-columns:1fr; gap:47px; }
      .hero-copy { max-width:750px; }
      .code-window { max-width:700px; width:100%; margin:0 auto; transform:none; }
      .design-grid { grid-template-columns:repeat(2, 1fr); }
      .pipeline { grid-template-columns:repeat(3, 1fr); gap:12px; }
      .pipe-item:not(:last-child)::after { display:none; }
      .syntax-layout { grid-template-columns:1fr; }
      .syntax-side { position:static; }
      .syntax-list { grid-template-columns:repeat(4, 1fr); }
      .syntax-link { padding:10px; justify-content:center; text-align:center; }
      .syntax-link .chev { display:none; }
    }
    @media (max-width: 680px) {
      .wrap { width:min(100% - 30px, 560px); }
      .nav { height:67px; }
      .brand small { display:none; }
      .menu-btn { display:grid; }
      .nav-links { display:none; position:absolute; top:66px; left:0; right:0; padding:12px 16px 17px; background:var(--bg); border-bottom:1px solid var(--line); flex-direction:column; align-items:stretch; gap:0; }
      .nav-links.open { display:flex; }
      .nav-links a { padding:11px 9px; border-radius:8px; }
      .nav-links a:hover { background:var(--panel); }
      .nav-actions { margin-left:auto; }
      .hero { padding:59px 0 57px; }
      h1 { font-size:clamp(3rem, 15vw, 4.2rem); }
      .hero-lead { font-size:.98rem; }
      .hero-meta { gap:12px 18px; }
      .code-body { padding:21px 15px 19px; }
      .hero-code { font-size:.73rem; }
      .section { padding:65px 0; }
      .design-grid { grid-template-columns:1fr; }
      .design-card { min-height:0; padding:21px; }
      .architecture { padding:18px; }
      .arch-head { align-items:flex-start; flex-direction:column; gap:4px; }
      .pipeline { grid-template-columns:repeat(2, minmax(0,1fr)); }
      .pipe-item { min-height:90px; }
      .arch-bottom { grid-template-columns:1fr; }
      .syntax-list { grid-template-columns:repeat(2, 1fr); }
      .snippet pre { padding:20px 15px; font-size:.74rem; min-height:0; }
      .snippet-caption { font-size:.75rem; }
      .permissions { grid-template-columns:1fr; }
      .runtime-grid { grid-template-columns:1fr; }
      .roadmap { grid-template-columns:1fr; }
      .roadmap-item { min-height:0; }
      .roadmap-item::before { margin-bottom:10px; }
      .closing { padding-bottom:62px; }
      .closing-card { padding:28px 22px; border-radius:21px; }
      .closing-card::after { font-size:12rem; right:0; bottom:-80px; }
      .footer-inner { align-items:flex-start; flex-direction:column; gap:13px; }
    }
    @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }

/* Updated Arus links and platform download panel */
.btn-github {
  color: var(--text);
  background: color-mix(in srgb, var(--blue) 8%, var(--panel));
  border-color: color-mix(in srgb, var(--blue) 30%, var(--line));
}
.btn-github:hover { border-color: var(--blue); }
.pipe-item.highlight-final {
  border-color: color-mix(in srgb, var(--mint) 62%, var(--line));
  background: color-mix(in srgb, var(--mint) 10%, var(--panel-2));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--mint) 10%, transparent);
}
.pipe-item.highlight-final .pipe-num { color: var(--mint); }
.pipe-item.highlight-final strong { color: var(--mint); }
.download-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
}
.download-card {
  min-width: 0;
  padding: 23px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.download-source {
  border-color: color-mix(in srgb, var(--purple) 35%, var(--line));
  background: linear-gradient(150deg, color-mix(in srgb, var(--purple) 9%, var(--panel)), var(--panel));
}
.download-card-top {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 19px;
}
.download-icon {
  display: grid;
  place-items: center;
  width: 43px;
  height: 43px;
  border-radius: 13px;
  border: 1px solid color-mix(in srgb, var(--blue) 24%, var(--line));
  background: color-mix(in srgb, var(--blue) 9%, var(--panel));
  color: var(--blue);
  font-size: 1.35rem;
  font-weight: 800;
}
.download-source .download-icon {
  color: var(--purple);
  border-color: color-mix(in srgb, var(--purple) 28%, var(--line));
  background: color-mix(in srgb, var(--purple) 10%, var(--panel));
}
.download-badge {
  color: var(--faint);
  font: 700 .67rem var(--mono);
  letter-spacing: .1em;
}
.download-card h3 { margin: 0 0 8px; font-size: 1.05rem; letter-spacing: -.03em; }
.download-card p { margin: 0 0 20px; color: var(--muted); font-size: .83rem; line-height: 1.8; flex: 1; }
.download-action { width: 100%; min-height: 44px; text-align: center; }
.btn-disabled {
  color: var(--faint);
  background: var(--panel-2);
  border-color: var(--line);
  cursor: not-allowed;
  opacity: .8;
}
.download-text-link {
  display: inline-block;
  margin-top: 13px;
  color: var(--muted);
  font-size: .77rem;
  font-weight: 700;
}
.download-text-link:hover { color: var(--text); }
.download-footnote { margin: 17px 0 0; color: var(--faint); font-size: .76rem; line-height: 1.8; }
.download-footnote a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.download-footnote a:hover { color: var(--text); }
@media (max-width: 960px) {
  .download-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .download-source { grid-column: 1 / -1; }
}
@media (max-width: 680px) {
  .download-grid { grid-template-columns: 1fr; }
  .download-source { grid-column: auto; }
  .download-card { padding: 21px; }
}