@font-face { font-family:'Codecheckr Sans'; src:url('/fonts/demo/onest/onest-cyrillic-wght-normal.woff2') format('woff2'); font-style:normal; font-weight:100 900; font-display:swap; }
:root { --ink:#e8f2ec; --ink-strong:#fff; --muted:#aebcb5; --paper:#091311; --panel:#14201d; --panel-deep:#0d1715; --line:rgba(209,235,221,.17); --lime:#69ca8a; --mint:#4eae78; --coral:#ff9b75; --violet:#9c91ff; --code:#07100e; }
#codecheckr-form .actions { align-items:stretch; flex-direction:column; gap:10px; }
#codecheckr-form textarea, .code-output { letter-spacing:0; }
#codecheckr-form .actions small { display:block; width:100%; max-width:none; }
#codecheckr-form .actions > div { flex-wrap:nowrap; margin-top:8px; }
#codecheckr-form .actions > div button { white-space:nowrap; }
@media (min-width:761px) { body .hero-inner h1 { max-width:1080px; } body .hero-inner h1 br { display:inline; content:" "; } body .hero-inner h1 br::after { content:" "; white-space:pre; } body .hero-inner > p:not(.eyebrow) { max-width:800px; } }
.recommendations { margin-top:16px; border:1px solid rgba(105,202,138,.28); border-radius:4px; padding:12px 14px; background:rgba(78,174,120,.08); }
.recommendations h4 { margin:0 0 7px; color:var(--lime); font-size:13px; }
.recommendations ul { display:grid; gap:5px; margin:0; padding-left:18px; color:#dbeae2; font-size:13px; line-height:1.45; }
.recommendations[hidden] { display:none; }
.hero-signals { position:relative; gap:10px; padding:12px; border:1px solid rgba(105,202,138,.22); border-radius:6px; background:rgba(5,15,12,.48); box-shadow:inset 0 1px 0 rgba(221,249,230,.05),0 12px 28px rgba(0,0,0,.15); }
.hero-signals::before { position:absolute; top:-1px; left:20px; width:56px; height:2px; background:var(--mint); content:""; }
.hero-signals span { position:relative; min-width:170px; border-color:rgba(105,202,138,.22); padding:11px 14px; background:rgba(16,33,28,.72); }
.hero-signals span::after { width:5px; height:5px; margin-left:auto; border-radius:50%; background:var(--mint); box-shadow:0 0 0 3px rgba(78,174,120,.12); content:""; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--paper); font:16px/1.5 'Codecheckr Sans',Arial,Helvetica,sans-serif; letter-spacing:.006em; } button,textarea,select { font:inherit; } button { appearance:none; }
.hero { position:relative; min-height:618px; overflow:hidden; isolation:isolate; background:#06100e; } .hero::before { position:absolute; z-index:-1; top:0; right:8%; width:min(47vw,620px); height:100%; border-left:1px solid rgba(105,202,138,.3); border-right:1px solid rgba(78,174,120,.2); content:""; } .hero::after { position:absolute; z-index:-1; inset:0; background:linear-gradient(90deg,rgba(5,14,12,.94) 0%,rgba(7,20,17,.78) 43%,rgba(7,20,17,.44) 100%); content:""; } .matrix-rain { position:absolute; z-index:-3; inset:0; width:100%; height:100%; opacity:.92; } .hero-grid { position:absolute; z-index:-2; top:86px; right:0; bottom:0; width:57%; border-left:1px solid rgba(78,174,120,.22); background-image:linear-gradient(rgba(78,174,120,.11) 1px,transparent 1px),linear-gradient(90deg,rgba(78,174,120,.11) 1px,transparent 1px); background-size:54px 54px; mask-image:linear-gradient(90deg,transparent 0%,#000 18%,#000 100%); }
.top { display:flex; align-items:center; justify-content:space-between; width:min(1180px,calc(100% - 48px)); margin:0 auto; padding:27px 0; border-bottom:1px solid var(--line); } .brand { display:inline-flex; align-items:center; gap:11px; color:var(--ink-strong); font-size:19px; font-weight:800; letter-spacing:.045em; text-decoration:none; } .brand-mark { position:relative; display:block; width:34px; height:28px; border:1px solid rgba(105,202,138,.9); border-radius:7px 3px 7px 3px; background:linear-gradient(135deg,rgba(105,202,138,.16),rgba(78,174,120,.03)); overflow:hidden; } .brand-mark::before,.brand-mark::after { position:absolute; top:7px; width:7px; height:12px; border-color:var(--lime); border-style:solid; content:""; } .brand-mark::before { left:6px; border-width:0 0 1px 1px; transform:skewY(-34deg); } .brand-mark::after { right:6px; border-width:1px 1px 0 0; transform:skewY(-34deg); } .brand-mark i { position:absolute; width:4px; height:4px; border-radius:50%; background:var(--mint); box-shadow:0 0 0 3px rgba(78,174,120,.12); } .brand-mark i:first-child { top:4px; left:4px; } .brand-mark i:nth-child(2) { right:4px; bottom:4px; } .brand-mark b { position:absolute; top:10px; left:12px; width:10px; height:5px; border-bottom:2px solid #dff8e6; border-left:2px solid #dff8e6; transform:rotate(-45deg); } .top-note { display:inline-flex; align-items:center; gap:8px; color:rgba(232,242,236,.7); font-size:13px; } .top-note i { width:7px; height:7px; border-radius:50%; background:var(--mint); box-shadow:0 0 0 4px rgba(78,174,120,.13); }
.hero-inner { width:min(1180px,calc(100% - 48px)); margin:0 auto; padding:104px 0 64px; } .eyebrow,.section-kicker { margin:0 0 15px; color:var(--lime); font-size:12px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; } h1,h2,h3,p { margin-top:0; } h1 { max-width:790px; margin-bottom:25px; color:var(--ink-strong); font-size:clamp(40px,4.8vw,64px); line-height:1; letter-spacing:0; } .hero-inner > p:not(.eyebrow) { max-width:610px; margin-bottom:30px; color:rgba(232,242,236,.86); font-size:19px; } .hero-points { display:flex; flex-wrap:wrap; gap:10px 25px; color:#d9e8df; font-size:13px; } .hero-points span::before { display:inline-block; width:7px; height:7px; margin:0 9px 1px 0; border-radius:50%; background:var(--mint); box-shadow:0 0 0 4px rgba(114,214,182,.14); content:""; } .hero-signals { display:flex; flex-wrap:wrap; gap:9px; margin-top:43px; } .hero-signals span { display:flex; align-items:center; gap:9px; border:1px solid rgba(232,242,236,.18); border-radius:4px; padding:10px 13px; color:#d9e8df; background:rgba(6,17,14,.38); font-size:12px; } .hero-signals b { color:var(--lime); font:800 11px/1 monospace; }
.workspace { position:relative; width:min(1180px,calc(100% - 48px)); margin:0 auto; padding:85px 0 92px; } .workspace::before { position:absolute; top:47px; right:0; width:142px; height:1px; background:var(--lime); content:""; } .workspace-head { display:flex; align-items:flex-end; justify-content:space-between; gap:36px; margin-bottom:30px; } .section-kicker { margin-bottom:8px; color:var(--lime); } .workspace h2 { margin:0; color:var(--ink-strong); font-size:clamp(30px,3.4vw,45px); line-height:1.1; } .workspace-head > p { max-width:470px; margin:0 0 3px; color:var(--muted); }
.code-tool { display:grid; grid-template-columns:minmax(0,1fr) minmax(340px,.86fr); overflow:hidden; border:1px solid var(--line); border-radius:7px; background:var(--line); box-shadow:0 22px 48px rgba(0,0,0,.25); } .editor,.answer { min-height:476px; padding:31px; background:var(--panel); } .editor { background:#12201c; } .editor-head,.actions { display:flex; align-items:center; justify-content:space-between; gap:16px; } label { display:block; margin-bottom:13px; color:var(--ink-strong); font-size:14px; font-weight:800; } .language { display:flex; align-items:center; gap:9px; margin:0; color:var(--muted); font-size:12px; font-weight:700; } select { border:1px solid var(--line); border-radius:4px; padding:7px 25px 7px 9px; color:var(--ink-strong); background:#0f1917; font-size:13px; font-weight:700; } textarea { display:block; width:100%; min-height:322px; margin-top:3px; border:1px solid rgba(212,242,106,.26); border-radius:4px; padding:16px; color:#dff5e7; background:var(--code); outline:0; resize:vertical; font:14px/1.6 "SFMono-Regular",Consolas,"Liberation Mono",monospace; tab-size:2; transition:border-color .16s ease; } textarea:focus { border-color:var(--mint); box-shadow:0 0 0 3px rgba(114,214,182,.1); } textarea::placeholder { color:#74867e; } .actions { margin-top:18px; } .actions small { max-width:300px; color:var(--muted); font-size:12px; } .actions > div { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:9px; } .submit,.secondary { min-height:44px; border-radius:4px; padding:0 16px; font-weight:800; cursor:pointer; transition:transform .16s ease,background .16s ease; } .submit { border:1px solid var(--lime); color:#10200f; background:var(--lime); } .secondary { border:1px solid rgba(232,242,236,.4); color:var(--ink-strong); background:transparent; } .submit:hover,.secondary:hover { transform:translateY(-1px); } .submit:disabled,.secondary:disabled { cursor:wait; opacity:.6; }
.answer { display:flex; flex-direction:column; background:var(--panel-deep); } .answer-top { display:flex; align-items:center; justify-content:space-between; color:var(--muted); font-size:13px; } .answer-dot { width:9px; height:9px; border-radius:50%; background:var(--mint); box-shadow:0 0 0 4px rgba(78,174,120,.12); } .answer h3 { max-width:410px; margin:54px 0 10px; color:var(--ink-strong); font-size:29px; line-height:1.12; } .answer > p { max-width:420px; margin:0; color:var(--muted); } .issues { display:grid; gap:8px; margin-top:25px; } .issues[hidden],.code-output[hidden],.metrics[hidden] { display:none; } .issue { padding:10px 12px; border-left:3px solid var(--coral); color:#ffe0d5; background:rgba(255,155,117,.1); font-size:13px; } .issue.ok { border-color:var(--mint); color:#d8f7eb; background:rgba(78,174,120,.1); } .code-output { max-height:324px; overflow:auto; margin:24px 0 0; border:1px solid var(--line); border-radius:4px; padding:13px 0; color:#dfefe7; background:#07100e; font:13px/1.7 "SFMono-Regular",Consolas,"Liberation Mono",monospace; white-space:pre; tab-size:2; counter-reset:code-line; } .code-line { position:relative; display:block; min-height:1.7em; padding:0 16px 0 52px; white-space:pre-wrap; word-break:break-word; } .code-line::before { position:absolute; left:0; width:36px; color:#587167; content:counter(code-line); counter-increment:code-line; text-align:right; user-select:none; } .token-keyword { color:#92d5a6; } .token-string { color:#98d7ff; } .token-number { color:#ffbc8c; } .token-comment { color:#7e948b; } .token-tag { color:#ffb98d; } .token-attribute { color:#a9e4c6; } .metrics { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; } .metric { border:1px solid var(--line); border-radius:4px; padding:7px 9px; color:var(--muted); font-size:12px; } .metric strong { margin-left:5px; color:var(--ink-strong); } .notice { max-width:940px; margin:21px 0 0; color:var(--muted); font-size:12px; } footer { display:flex; align-items:center; justify-content:space-between; padding:25px max(24px,calc((100% - 1180px)/2)); color:#9cafaa; background:#07100e; font-size:13px; } .footer-brand { display:inline-flex; align-items:center; gap:9px; color:var(--ink-strong); font-size:15px; font-weight:800; letter-spacing:.04em; } .footer-mark { position:relative; display:block; width:23px; height:19px; border:1px solid rgba(105,202,138,.9); border-radius:5px 2px 5px 2px; background:linear-gradient(135deg,rgba(105,202,138,.16),rgba(78,174,120,.03)); font-style:normal; overflow:hidden; } .footer-mark::before,.footer-mark::after { position:absolute; top:5px; width:5px; height:9px; border-color:var(--lime); border-style:solid; content:""; } .footer-mark::before { left:4px; border-width:0 0 1px 1px; transform:skewY(-34deg); } .footer-mark::after { right:4px; border-width:1px 1px 0 0; transform:skewY(-34deg); } .footer-mark span { position:absolute; width:3px; height:3px; border-radius:50%; background:var(--mint); } .footer-mark span:first-child { top:3px; left:3px; } .footer-mark span:nth-child(2) { right:3px; bottom:3px; } .footer-mark b { position:absolute; top:7px; left:8px; width:7px; height:4px; border-bottom:1.5px solid #dff8e6; border-left:1.5px solid #dff8e6; transform:rotate(-45deg); }
@media (max-width:760px) { .hero { min-height:560px; } .hero::before { right:6%; width:65%; } .hero-grid { top:63px; width:78%; background-size:38px 38px; } .top,.hero-inner,.workspace { width:min(100% - 40px,1180px); } .top { padding:18px 0; } .top-note { display:none; } .hero-inner { padding:76px 0 52px; } .hero-inner > p:not(.eyebrow) { font-size:17px; } .hero-signals { gap:7px; margin-top:31px; } .hero-signals span { padding:8px 10px; font-size:11px; } .workspace { padding:58px 0 66px; } .workspace::before { top:33px; width:80px; } .workspace-head { align-items:flex-start; flex-direction:column; gap:15px; } .code-tool { grid-template-columns:1fr; box-shadow:0 15px 34px rgba(0,0,0,.2); } .editor,.answer { min-height:0; padding:23px; } .editor-head { align-items:flex-start; flex-direction:column; gap:0; } .language { width:100%; justify-content:space-between; } .answer h3 { margin-top:38px; } .actions { align-items:flex-start; flex-direction:column; } .actions small { max-width:none; } .actions > div { width:100%; justify-content:stretch; } .actions button { flex:1 1 160px; } footer { gap:10px; flex-direction:column; } } @media (max-width:420px) { h1 { font-size:38px; } .hero-signals { display:grid; grid-template-columns:1fr; } .actions > div { flex-direction:column; } .actions button { width:100%; } } @media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .matrix-rain { display:none; } .submit,.secondary,textarea { transition:none; } }