Add macOS terminal style code blocks + change CTA to pricing page

- Global macOS terminal wrapper: three colored dots bar + dark background
  for all pre elements across the site (docs, guides, etc.)
- Auto-wraps pre elements via JS (skips hero terminal)
- Updated guide.css pre styles to integrate with terminal wrapper
- Changed "开始使用/Get Started" nav CTA button to link to pricing.html

Author: pc-study

css/style.css

@@ -254,3 +254,26 @@ img{max-width:100%;display:block}
   .nav-toggle{padding:5px 8px;font-size:.72rem}
   .section-eyebrow::before{width:16px}
 }
+
+/* === macOS Terminal Code Blocks === */
+.mac-term{background:var(--term-bg,#1a1a2e);border:1px solid var(--border);border-radius:var(--r-lg);
+  overflow:hidden;margin:16px 0}
+[data-theme="light"] .mac-term{background:#1a1a24;border-color:#2a2a38}
+.mac-term-bar{display:flex;align-items:center;padding:10px 14px;background:rgba(255,255,255,.04);
+  border-bottom:1px solid var(--border);gap:8px}
+[data-theme="light"] .mac-term-bar{background:#2a2a34;border-color:#2a2a38}
+.mac-term-bar .dot{width:12px;height:12px;border-radius:50%}
+.mac-term-bar .dot-r{background:#ff5f57}
+.mac-term-bar .dot-y{background:#febc2e}
+.mac-term-bar .dot-g{background:#28c840}
+.mac-term-bar .mac-term-title{flex:1;text-align:center;font-family:var(--mono);font-size:.72rem;
+  color:var(--text-muted);opacity:.6;margin-right:44px}
+.mac-term pre{margin:0!important;border:none!important;border-radius:0!important;background:transparent!important;
+  padding:16px 20px;font-family:var(--mono);font-size:.82rem;line-height:1.7;color:var(--green,#3aba6a);overflow-x:auto}
+[data-theme="light"] .mac-term pre{color:#3aba6a}
+.mac-term pre code{background:none!important;border:none!important;padding:0!important;color:inherit!important;
+  font-size:inherit!important}
+.mac-term pre .kw{color:#c678dd}.mac-term pre .str{color:#98c379}
+.mac-term pre .cmt{color:#5c6370;font-style:italic}.mac-term pre .num{color:#d19a66}
+.mac-term pre .fn{color:#61afef}.mac-term pre .flag{color:var(--accent2,#e8934a)}
+.mac-term pre .val{color:var(--blue,#4a8fe8)}

guides/guide.css

@@ -16,8 +16,8 @@
 .guide-body h3{font-size:1.1rem}
 .guide-body p{margin:0 0 1em}
 .guide-body img{max-width:100%;height:auto;border-radius:var(--r);border:1px solid var(--border);margin:16px 0;display:block}
-.guide-body pre{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r);padding:16px;
-  overflow-x:auto;margin:16px 0;font-family:var(--mono);font-size:.84rem;line-height:1.6;color:var(--text)}
+.guide-body pre{background:var(--bg2);border:none;border-radius:0;padding:16px 20px;
+  overflow-x:auto;margin:0;font-family:var(--mono);font-size:.84rem;line-height:1.6;color:var(--green,#3aba6a)}
 .guide-body code{background:var(--bg3);border:1px solid var(--border);border-radius:4px;padding:2px 6px;
   font-family:var(--mono);font-size:.84rem;color:var(--red-glow)}
 .guide-body pre code{background:none;border:none;padding:0;color:inherit}

js/shared.js

@@ -77,7 +77,7 @@ function navHTML(active) {
     <a href="index.html" class="nav-logo"><div class="logo-icon">OS</div>Oracle<span>Shell</span>Install</a>
     <div class="nav-links">${pages.map(p =>
       `<a href="${p.href}" class="${active===p.id?'active':''}" data-i18n="${p.key}">${t(p.key)}</a>`
-    ).join('')}<a href="generator.html" class="nav-cta" data-i18n="start">${t('start')}</a></div>
+    ).join('')}<a href="pricing.html" class="nav-cta" data-i18n="start">${t('start')}</a></div>
     <div class="nav-actions">
       <button class="nav-toggle" id="themeToggle" onclick="toggleTheme()" title="Toggle theme" aria-label="Toggle theme">${themeIcon}</button>
       <button class="nav-toggle" id="langToggle" onclick="toggleLang()" title="Language" aria-label="Toggle language">${langLabel}</button>
@@ -194,6 +194,19 @@ document.addEventListener('DOMContentLoaded', () => {
   }, { threshold: 0.1 });
   document.querySelectorAll('.reveal').forEach(el => obs.observe(el));
 
+  // macOS terminal wrapper for pre blocks (skip hero terminal and already-wrapped)
+  document.querySelectorAll('pre').forEach(pre => {
+    if (pre.closest('.hero-terminal') || pre.closest('.mac-term') || pre.closest('.hero-term-body')) return;
+    const wrapper = document.createElement('div');
+    wrapper.className = 'mac-term';
+    const bar = document.createElement('div');
+    bar.className = 'mac-term-bar';
+    bar.innerHTML = '<span class="dot dot-r"></span><span class="dot dot-y"></span><span class="dot dot-g"></span><span class="mac-term-title">Terminal</span>';
+    pre.parentNode.insertBefore(wrapper, pre);
+    wrapper.appendChild(bar);
+    wrapper.appendChild(pre);
+  });
+
   // Docs scroll spy
   const sidebar = document.querySelector('.doc-sidebar');
   if (sidebar) {