Spaces:
Running
Running
| :root { --ink:#10231d; --muted:#62736c; --paper:#f5f9f6; --card:#fff; --line:#d9e5df; --green:#24c77a; --green-dark:#087849; --violet:#7052ed; --amber:#e88732; color-scheme:light; } | |
| * { box-sizing:border-box; } | |
| html { scroll-behavior:smooth; } | |
| body { margin:0; background:radial-gradient(circle at 80% 0,rgba(36,199,122,.1),transparent 30rem),var(--paper); color:var(--ink); font-family:Manrope,system-ui,sans-serif; } | |
| button,textarea { font:inherit; } | |
| button { cursor:pointer; } | |
| .shell { width:min(1320px,calc(100% - 36px)); margin:0 auto; } | |
| .hero { position:relative; min-height:540px; margin:18px 0 70px; padding:28px 48px 50px; overflow:hidden; border-radius:32px; color:#f8fffb; background:linear-gradient(135deg,#0c1d18,#123d2d 62%,#087b4b); box-shadow:0 28px 70px rgba(11,56,39,.18); } | |
| .hero::after { content:""; position:absolute; inset:0; background:linear-gradient(120deg,rgba(255,255,255,.06),transparent 45%); pointer-events:none; } | |
| nav { position:relative; z-index:2; display:flex; align-items:center; gap:10px; } | |
| .brand-mark { display:grid; width:34px; height:34px; place-items:center; border:1px solid rgba(255,255,255,.3); border-radius:10px; color:#6fe5a6; font:500 12px 'DM Mono',monospace; } | |
| .nav-pill { margin-left:auto; padding:7px 10px; border:1px solid rgba(255,255,255,.16); border-radius:999px; color:#b9d3c7; font-size:10px; font-weight:800; letter-spacing:.1em; } | |
| .hero-copy { position:relative; z-index:2; width:65%; margin-top:95px; } | |
| .eyebrow,.section-kicker { margin:0 0 12px; color:#7de8ae; font-size:11px; font-weight:800; letter-spacing:.15em; } | |
| h1 { margin:0; font-size:clamp(54px,7vw,92px); line-height:.93; letter-spacing:-.065em; } | |
| h1 span { color:#70e2a6; } | |
| .hero-text { max-width:650px; margin:22px 0; color:#d2e5dc; font-size:18px; line-height:1.6; } | |
| .badges { display:flex; flex-wrap:wrap; gap:8px; } | |
| .badges span { padding:7px 11px; border:1px solid rgba(255,255,255,.18); border-radius:999px; background:rgba(255,255,255,.06); font-size:11px; font-weight:700; } | |
| .hero-visual { position:absolute; z-index:1; right:1%; bottom:13%; display:flex; align-items:center; width:38%; height:46%; opacity:.92; } | |
| .graph-cloud { position:absolute; left:0; width:62%; height:100%; background-image:radial-gradient(circle,#7a6cff 0 2px,transparent 3px),linear-gradient(28deg,transparent 48%,rgba(81,188,255,.3) 49% 51%,transparent 52%); background-size:42px 38px,70px 55px; filter:drop-shadow(0 0 8px #3f8fff); mask-image:linear-gradient(90deg,#000,transparent); } | |
| .prism { z-index:2; margin-left:48%; color:#89dfff; font-size:90px; text-shadow:0 0 22px #3fe2ff; transform:scaleX(.7); } | |
| .module { display:grid; width:105px; height:105px; place-items:center; margin-left:18px; border:1px solid #5dffae; border-radius:24px; color:#b4ffd3; background:rgba(13,137,76,.34); box-shadow:inset 0 0 25px rgba(69,255,158,.4),0 0 25px rgba(39,248,140,.28); font:500 16px 'DM Mono',monospace; } | |
| .intro,.principles { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:end; margin:0 30px 35px; } | |
| .section-kicker { color:var(--green-dark); } | |
| .section-kicker.amber { color:var(--amber); } | |
| h2 { margin:0; font-size:clamp(30px,4vw,50px); line-height:1.08; letter-spacing:-.045em; } | |
| .intro>p { margin:0; color:var(--muted); font-size:16px; line-height:1.8; } | |
| .workbench { display:grid; grid-template-columns:1.05fr .95fr; min-height:670px; border:1px solid var(--line); border-radius:25px; overflow:hidden; background:var(--card); box-shadow:0 16px 48px rgba(27,63,48,.08); } | |
| .panel { min-width:0; display:flex; flex-direction:column; } | |
| .editor-panel { background:#172231; color:#dce7e2; } | |
| .output-panel { background:#fff; } | |
| .panel-head { display:flex; height:58px; align-items:center; justify-content:space-between; padding:0 20px; border-bottom:1px solid rgba(140,160,151,.2); font-size:13px; font-weight:800; } | |
| .panel-dot { display:inline-block; width:8px; height:8px; margin-right:9px; border-radius:50%; background:#7558ff; box-shadow:0 0 0 5px rgba(117,88,255,.13); } | |
| .panel-dot.green { background:var(--green); box-shadow:0 0 0 5px rgba(36,199,122,.13); } | |
| .text-button,.icon-button { border:0; color:inherit; background:transparent; font-size:11px; font-weight:700; } | |
| .text-button { color:#a9b8c5; } | |
| .output-actions { display:flex; gap:4px; } | |
| .icon-button { padding:7px 9px; border:1px solid var(--line); border-radius:8px; color:var(--muted); } | |
| textarea { flex:1; width:100%; min-height:510px; resize:none; padding:22px; border:0; outline:0; color:#b9d99d; background:#172231; font:13px/1.55 'DM Mono',monospace; tab-size:2; } | |
| .actions { display:flex; align-items:center; gap:18px; padding:17px 20px; border-top:1px solid rgba(140,160,151,.2); } | |
| .actions p { margin:0; color:#8b9aa7; font-size:11px; } | |
| .primary { padding:12px 18px; border:0; border-radius:11px; color:#062c1a; background:#59df98; font-weight:800; box-shadow:0 8px 25px rgba(36,199,122,.24); } | |
| .primary span { margin-left:20px; } | |
| .primary:disabled { cursor:wait; filter:saturate(.65); opacity:.82; } | |
| .status { display:flex; align-items:flex-start; gap:10px; min-height:66px; padding:17px 20px; border-bottom:1px solid var(--line); } | |
| .status strong { white-space:nowrap; } | |
| .status span { color:var(--muted); font-size:12px; line-height:1.5; } | |
| .status.success strong { color:var(--green-dark); } | |
| .status.pending { background:#f2f8ff; }.status.pending strong { color:#405fc7; } | |
| .status.error { background:#fff5f5; }.status.error strong,.status.error span { color:#9a3030; } | |
| pre { flex:1; max-height:590px; min-height:0; margin:0; overflow:auto; padding:22px; color:#426051; background:#fbfdfc; font:12px/1.6 'DM Mono',monospace; } | |
| .results { display:none; margin:28px 0 90px; }.results.visible { display:block; } | |
| .results.refreshed .metric { animation:compiled-pulse .7s ease-out; } | |
| @keyframes compiled-pulse { 0% { transform:translateY(5px); border-color:#52d996; box-shadow:0 0 0 5px rgba(36,199,122,.16); } 100% { transform:none; } } | |
| .metrics { display:grid; grid-template-columns:repeat(6,1fr); gap:10px; } | |
| .metric,.lane,.method,.principle-grid article { border:1px solid var(--line); background:rgba(255,255,255,.9); box-shadow:0 8px 24px rgba(30,62,49,.05); } | |
| .metric { display:flex; flex-direction:column; min-height:132px; padding:17px; border-radius:16px; } | |
| .metric span { color:var(--muted); font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; } | |
| .metric strong { margin:7px 0 3px; font-size:26px; letter-spacing:-.04em; } | |
| .metric small { margin-top:auto; color:#829087; font-size:10px; } | |
| .comparison { display:grid; grid-template-columns:.72fr 1.28fr; gap:14px; margin-top:14px; } | |
| .lane { min-width:0; padding:24px; border-top:4px solid var(--amber); border-radius:20px; }.lane.compiled { border-top-color:var(--green); } | |
| .lane h3 { margin:0 0 18px; font-size:22px; } | |
| .vertical-flow { display:grid; gap:7px; } | |
| .step { display:flex; flex-direction:column; padding:11px 12px; border:1px solid var(--line); border-radius:11px; background:#fff; } | |
| .step strong { overflow-wrap:anywhere; font-size:12px; }.step span { margin-top:3px; color:var(--muted); font-size:10px; } | |
| .stage-flow { display:flex; gap:8px; overflow-x:auto; padding-bottom:5px; } | |
| .stage { position:relative; flex:1; min-width:145px; padding:10px; border-radius:13px; background:#edf8f2; } | |
| .stage>span { display:block; margin:0 0 9px 2px; color:var(--green-dark); font-size:9px; font-weight:800; letter-spacing:.08em; } | |
| .stage .step { margin-top:6px; } | |
| .method { margin:14px 0 0; padding:16px 18px; border-radius:14px; color:var(--muted); font-size:11px; line-height:1.6; }.method code { color:var(--violet); } | |
| .principles { align-items:start; margin-top:110px; margin-bottom:90px; } | |
| .principle-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; } | |
| .principle-grid article { padding:18px; border-radius:16px; }.principle-grid b { color:var(--green); font:500 11px 'DM Mono',monospace; }.principle-grid h3 { margin:14px 0 6px; font-size:15px; }.principle-grid p { margin:0; color:var(--muted); font-size:11px; line-height:1.6; } | |
| footer { display:flex; justify-content:space-between; align-items:center; padding:28px 4px 40px; border-top:1px solid var(--line); }footer div { display:flex; gap:14px; align-items:center; }footer span,footer a { color:var(--muted); font-size:11px; }footer a { text-decoration:none; } | |
| @media(max-width:950px){.hero-copy{width:100%}.hero-visual{opacity:.18;width:60%}.workbench,.intro,.principles{grid-template-columns:1fr}.metrics{grid-template-columns:repeat(3,1fr)}.comparison{grid-template-columns:1fr}.principles{gap:35px}.hero{padding:24px 28px 40px}.intro,.principles{margin-left:5px;margin-right:5px}} | |
| @media(max-width:600px){.shell{width:min(100% - 18px,1320px)}.hero{min-height:530px;margin-top:9px;border-radius:22px}.hero-copy{margin-top:85px}h1{font-size:54px}.nav-pill{display:none}.metrics{grid-template-columns:repeat(2,1fr)}.principle-grid{grid-template-columns:1fr}.stage-flow{flex-direction:column}.workbench{border-radius:17px}footer,footer div{align-items:flex-start;flex-direction:column}} | |