Spaces:
Running
Running
| :root { | |
| --paper:#fff; | |
| --ink:#050505; | |
| --purple:#6c4fe0; | |
| --lilac:#cd82f0; | |
| --green:#2dbd70; | |
| --red:#e45454; | |
| --neutral-50:#fafafa; | |
| --neutral-100:#f4f4f3; | |
| --neutral-200:#e7e7e5; | |
| --neutral-300:#b9b9b5; | |
| --neutral-500:#737373; | |
| --neutral-700:#404040; | |
| --border:rgba(0,0,0,.09); | |
| --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; | |
| --serif:"Instrument Serif",Georgia,"Times New Roman",serif; | |
| --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace; | |
| --r0:#ffd5e5; --r1:#d8d0ff; --r2:#c9e9ff; --r3:#ccefdc; | |
| --r4:#ffe4ba; --r5:#f0d0ff; --r6:#fff1ad; --r7:#cce8e8; | |
| } | |
| * { box-sizing:border-box; } | |
| html { background:var(--neutral-50); } | |
| body { | |
| min-width:320px; | |
| min-height:100vh; | |
| margin:0; | |
| background:var(--neutral-50); | |
| color:var(--ink); | |
| font:16px/1.45 var(--sans); | |
| -webkit-font-smoothing:antialiased; | |
| } | |
| button,textarea,input { font:inherit; } | |
| a { color:inherit; } | |
| .wrap { | |
| display:flex; | |
| flex-direction:column; | |
| width:min(calc(100% - 32px),1240px); | |
| min-height:100vh; | |
| min-height:100dvh; | |
| margin:0 auto; | |
| border-right:1px solid var(--border); | |
| border-left:1px solid var(--border); | |
| background:var(--paper); | |
| } | |
| .site-intro { margin-top:auto; padding:20px 30px 16px; } | |
| h1 { | |
| margin:0 0 7px; | |
| font:400 clamp(40px,4.3vw,51px)/.98 var(--serif); | |
| letter-spacing:.002em; | |
| } | |
| h1 em { color:var(--purple); font-weight:400; font-style:italic; } | |
| .sub { | |
| max-width:900px; | |
| margin:0; | |
| color:var(--neutral-500); | |
| font-size:15px; | |
| line-height:1.45; | |
| } | |
| .sub strong { color:var(--neutral-700); font-weight:600; } | |
| .model-strip { | |
| display:grid; | |
| grid-template-columns:48px 280px minmax(240px,1fr); | |
| align-items:center; | |
| column-gap:16px; | |
| min-height:76px; | |
| padding:12px 30px; | |
| border-top:1px solid var(--border); | |
| border-bottom:1px solid var(--border); | |
| background:linear-gradient(90deg,rgba(108,79,224,.018),rgba(205,130,240,.035),rgba(108,79,224,.018)); | |
| transition:background .3s ease; | |
| } | |
| .model-logo-frame { position:relative; display:block; width:48px; height:48px; overflow:hidden; } | |
| .model-logo { | |
| position:absolute; | |
| top:50%; | |
| left:50%; | |
| display:block; | |
| width:56px; | |
| height:auto; | |
| max-width:none; | |
| transform:translate(-50%,-50%); | |
| image-rendering:pixelated; | |
| } | |
| .model-copy { display:flex; min-width:0; align-items:center; justify-content:center; } | |
| .model-name-row { display:flex; min-height:25px; align-items:center; gap:10px; white-space:nowrap; } | |
| .model-copy a { font:400 22px/1.15 var(--serif); text-decoration:none; } | |
| .model-copy a:hover { color:var(--purple); } | |
| .model-variant { display:inline-flex; height:18px; align-items:center; box-sizing:border-box; padding:0 7px; border:1px solid rgba(108,79,224,.14); border-radius:999px; background:rgba(108,79,224,.05); color:var(--purple); font:700 9px/1 var(--mono); letter-spacing:.035em; text-transform:uppercase; } | |
| .load-block { min-width:0; } | |
| .load-meta { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:8px; color:var(--neutral-500); font-size:12px; font-weight:600; } | |
| #load-percent { font:600 11px/1 var(--mono); font-variant-numeric:tabular-nums; } | |
| .load-track { height:7px; overflow:hidden; border-radius:999px; background:rgba(108,79,224,.09); } | |
| .load-track span { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--purple),var(--lilac)); transition:width .18s ease; } | |
| .is-ready .load-track { background:rgba(45,189,112,.09); } | |
| .is-ready .load-track span { background:var(--green); } | |
| .is-ready .load-meta { color:#188e50; } | |
| .is-error .load-track span { background:var(--red); } | |
| .is-error .load-meta { color:var(--red); } | |
| main { display:flex; min-height:0; flex:0 0 auto; flex-direction:column; margin-bottom:auto; padding:18px 30px 22px; } | |
| .lint-workspace { display:grid; grid-template-columns:minmax(360px,.88fr) minmax(500px,1.25fr); align-items:stretch; gap:18px; } | |
| .workspace-card { position:relative; min-width:0; overflow:hidden; border:1px solid var(--border); border-radius:12px; background:var(--paper); } | |
| .policy-panel { padding:20px; } | |
| .text-panel { display:flex; flex-direction:column; padding:20px; } | |
| .panel-header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:17px; } | |
| .panel-header h2 { margin:0 0 5px; color:var(--neutral-500); font:600 12px/1.25 var(--mono); letter-spacing:.08em; text-transform:uppercase; } | |
| .panel-header p { margin:0; color:var(--neutral-500); font-size:13px; line-height:1.4; } | |
| .policy-count { flex:none; padding:6px 9px; border:1px solid var(--border); border-radius:999px; color:var(--neutral-500); font:600 11px/1 var(--mono); } | |
| .policy-list { display:flex; flex-direction:column; gap:8px; } | |
| .policy-row { | |
| position:relative; | |
| display:grid; | |
| grid-template-columns:8px minmax(0,1fr) 78px 28px; | |
| align-items:center; | |
| gap:10px; | |
| min-height:53px; | |
| padding:9px 8px 9px 12px; | |
| overflow:hidden; | |
| border:1px solid var(--border); | |
| border-radius:10px; | |
| background:var(--paper); | |
| transition:border-color .17s,box-shadow .17s,transform .17s,background .17s; | |
| } | |
| .policy-row:hover { border-color:rgba(108,79,224,.3); background:rgba(108,79,224,.015); box-shadow:0 8px 22px rgba(54,42,105,.06); } | |
| .policy-row:focus-within { border-color:var(--purple); box-shadow:0 0 0 3px rgba(108,79,224,.11); } | |
| .policy-row::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:0; background:linear-gradient(100deg,transparent 18%,rgba(108,79,224,.04) 38%,rgba(205,130,240,.2) 49%,rgba(255,255,255,.78) 54%,transparent 74%); transform:translateX(-110%); } | |
| .is-linting .policy-row::after { opacity:1; animation:policy-scan .9s cubic-bezier(.4,0,.2,1) infinite; animation-delay:calc(var(--row-index)*42ms); } | |
| .policy-swatch { width:8px; height:28px; border-radius:999px; background:var(--policy-color); box-shadow:inset 0 0 0 1px rgba(0,0,0,.035); } | |
| .policy-input { width:100%; min-height:28px; max-height:none; padding:3px 0; overflow:hidden; border:0; outline:0; background:transparent; color:var(--neutral-700); font:500 13px/1.45 var(--sans); resize:none; } | |
| .policy-result { display:flex; flex-direction:column; align-items:flex-end; gap:6px; min-width:0; } | |
| .policy-score-track { width:100%; height:6px; overflow:hidden; border-radius:999px; background:var(--neutral-100); } | |
| .policy-score-track span { display:block; width:0; height:100%; border-radius:inherit; background:var(--purple); opacity:.72; transition:width .72s cubic-bezier(.16,.8,.25,1); transition-delay:calc(var(--row-index)*32ms); } | |
| .policy-score { color:var(--neutral-500); font:600 10px/1 var(--mono); font-variant-numeric:tabular-nums; } | |
| .is-linting .policy-score-track { background:linear-gradient(90deg,var(--neutral-100),rgba(108,79,224,.12),var(--neutral-100)); background-size:220% 100%; animation:probability-wait .85s ease-in-out infinite; } | |
| .remove-policy { display:grid; width:28px; height:28px; padding:0; place-items:center; border:0; border-radius:50%; background:transparent; color:var(--neutral-300); font-size:19px; cursor:pointer; opacity:.25; transition:opacity .16s,color .16s,background .16s,transform .16s; } | |
| .policy-row:hover .remove-policy,.policy-row:focus-within .remove-policy,.remove-policy:focus-visible { opacity:1; } | |
| .remove-policy:hover:not(:disabled) { background:rgba(0,0,0,.05); color:var(--neutral-700); transform:scale(1.07); } | |
| .add-policy { display:inline-flex; align-items:center; gap:7px; margin-top:10px; padding:8px 12px; border:1px dashed rgba(108,79,224,.28); border-radius:999px; background:rgba(108,79,224,.025); color:var(--purple); font-size:12px; font-weight:650; cursor:pointer; transition:border-color .15s,background .15s,transform .15s; } | |
| .add-policy:hover { border-color:rgba(108,79,224,.55); background:rgba(108,79,224,.065); transform:translateY(-1px); } | |
| .activity-pill { display:flex; align-items:center; gap:8px; flex:none; padding:7px 10px; border:1px solid var(--border); border-radius:999px; background:var(--neutral-50); color:var(--neutral-500); font-size:12px; font-weight:600; white-space:nowrap; transition:all .2s ease; } | |
| .activity-dot { width:8px; height:8px; flex:none; border-radius:50%; background:var(--neutral-300); } | |
| .activity-pill.is-running { border-color:rgba(108,79,224,.18); background:rgba(108,79,224,.055); color:var(--purple); } | |
| .activity-pill.is-running .activity-dot { background:var(--purple); box-shadow:0 0 0 5px rgba(108,79,224,.11); animation:status-pulse .8s ease-in-out infinite; } | |
| .activity-pill.is-done { border-color:rgba(45,189,112,.18); background:rgba(45,189,112,.055); color:#188e50; animation:done-pill .5s ease both; } | |
| .activity-pill.is-done .activity-dot { background:var(--green); box-shadow:0 0 0 4px rgba(45,189,112,.1); } | |
| .editor-stage { position:relative; flex:1; min-height:clamp(215px,24dvh,300px); overflow:hidden; border:1px solid var(--border); border-radius:10px; background:var(--paper); transition:border-color .2s,box-shadow .2s; } | |
| .editor-stage:focus-within { border-color:var(--purple); box-shadow:0 0 0 3px rgba(108,79,224,.11); } | |
| .lint-editor { position:relative; z-index:1; min-height:clamp(215px,24dvh,300px); padding:16px 17px; outline:0; color:var(--ink); font-size:16px; line-height:1.62; white-space:pre-wrap; } | |
| .lint-editor:empty::before { content:"Paste or write text to lint…"; color:var(--neutral-300); } | |
| .editor-scan { position:absolute; inset:-1px; z-index:3; opacity:0; pointer-events:none; background:linear-gradient(90deg,transparent 22%,rgba(108,79,224,.055) 42%,rgba(205,130,240,.25) 49%,rgba(255,255,255,.84) 54%,transparent 74%); transform:translateX(-110%); } | |
| .is-linting .editor-stage { border-color:rgba(108,79,224,.28); box-shadow:0 0 0 3px rgba(108,79,224,.06); } | |
| .is-linting .editor-scan { opacity:1; animation:editor-sweep .92s cubic-bezier(.45,0,.25,1) infinite; } | |
| .is-complete .editor-stage { animation:editor-complete .55s ease both; } | |
| .lint-editor span.hl { | |
| position:relative; | |
| z-index:0; | |
| display:inline-block; | |
| background:transparent; | |
| color:inherit; | |
| isolation:isolate; | |
| } | |
| .lint-editor span.hl::before { | |
| content:""; | |
| position:absolute; | |
| z-index:-1; | |
| top:.13em; | |
| right:-.07em; | |
| bottom:.09em; | |
| left:-.07em; | |
| border-radius:3px 5px 2px 4px; | |
| background: | |
| radial-gradient(ellipse at 16% 40%,rgba(255,255,255,.38) 0 7%,transparent 8% 100%), | |
| repeating-linear-gradient(176deg, | |
| color-mix(in srgb,var(--policy-color) 78%,white) 0 2px, | |
| color-mix(in srgb,var(--policy-color) 91%,transparent) 2px 5px, | |
| color-mix(in srgb,var(--policy-color) 72%,white) 5px 8px); | |
| box-shadow:inset 0 1px rgba(255,255,255,.34); | |
| clip-path:polygon(0 8%,3% 2%,27% 6%,52% 1%,78% 5%,100% 0,98% 94%,73% 98%,43% 95%,17% 100%,1% 94%); | |
| mix-blend-mode:multiply; | |
| opacity:.9; | |
| } | |
| .lint-editor span.hl.is-animated::before { | |
| transform:scaleX(0) rotate(-.3deg); | |
| transform-origin:left center; | |
| animation:marker-stroke .66s cubic-bezier(.18,.72,.18,1) both; | |
| animation-delay:calc(var(--highlight-index)*60ms); | |
| } | |
| .lint-editor span.hl::after { | |
| content:""; | |
| position:absolute; | |
| z-index:-1; | |
| top:18%; | |
| bottom:12%; | |
| left:-12%; | |
| width:25%; | |
| opacity:0; | |
| background:linear-gradient(90deg,transparent,rgba(255,255,255,.76),transparent); | |
| filter:blur(2px); | |
| transform:skewX(-12deg); | |
| } | |
| .lint-editor span.hl.is-animated::after { | |
| animation:marker-glint .66s ease-out both; | |
| animation-delay:calc(var(--highlight-index)*60ms); | |
| } | |
| .lint-controls { margin-top:14px; } | |
| .threshold-control { width:100%; padding:13px 14px 10px; border:1px solid var(--border); border-radius:10px; background:var(--neutral-50); } | |
| .threshold-copy { display:flex; align-items:baseline; justify-content:space-between; gap:12px; } | |
| .threshold-copy label { color:var(--neutral-500); font:600 11px/1.25 var(--mono); letter-spacing:.07em; text-transform:uppercase; } | |
| .threshold-copy output { color:var(--purple); font:700 13px/1 var(--mono); font-variant-numeric:tabular-nums; } | |
| input[type=range] { width:100%; height:23px; appearance:none; background:transparent; accent-color:var(--purple); --pct:42.85%; cursor:pointer; } | |
| input[type=range]::-webkit-slider-runnable-track { height:8px; border-radius:999px; background:linear-gradient(90deg,var(--purple) 0 var(--pct),var(--neutral-200) var(--pct) 100%); } | |
| input[type=range]::-webkit-slider-thumb { width:18px; height:18px; margin-top:-5px; appearance:none; border:4px solid var(--paper); border-radius:50%; background:var(--purple); box-shadow:0 1px 5px rgba(38,26,90,.32); } | |
| input[type=range]::-moz-range-track { height:8px; border:0; border-radius:999px; background:var(--neutral-200); } | |
| input[type=range]::-moz-range-progress { height:8px; border-radius:999px; background:var(--purple); } | |
| input[type=range]::-moz-range-thumb { width:12px; height:12px; border:3px solid var(--paper); border-radius:50%; background:var(--purple); box-shadow:0 1px 5px rgba(38,26,90,.32); } | |
| .threshold-scale { display:flex; justify-content:space-between; color:var(--neutral-300); font-size:10px; } | |
| .stats-grid { display:grid; grid-template-columns:1.25fr repeat(3,1fr); gap:8px; margin-top:9px; } | |
| .stat-card { min-width:0; padding:10px 12px; border:1px solid var(--border); border-radius:9px; background:var(--paper); } | |
| .stat-card span { display:block; margin-bottom:5px; color:var(--neutral-500); font:600 9px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; } | |
| .stat-card strong { display:block; overflow:hidden; color:var(--neutral-700); font:650 14px/1.25 var(--sans); text-overflow:ellipsis; white-space:nowrap; font-variant-numeric:tabular-nums; } | |
| .stat-result strong { color:var(--purple); } | |
| .stat-result.is-clean strong { color:#188e50; } | |
| .stats-grid.has-result .stat-card { animation:stat-rise .42s cubic-bezier(.2,.8,.2,1) both; } | |
| .stats-grid.has-result .stat-card:nth-child(2) { animation-delay:35ms; } | |
| .stats-grid.has-result .stat-card:nth-child(3) { animation-delay:70ms; } | |
| .stats-grid.has-result .stat-card:nth-child(4) { animation-delay:105ms; } | |
| .examples-panel { display:flex; align-items:center; gap:15px; margin-top:16px; padding:15px 17px; overflow:hidden; border:1px solid var(--border); border-radius:11px; background:var(--neutral-50); } | |
| .examples-label { flex:none; color:var(--neutral-500); font:600 11px/1.3 var(--mono); letter-spacing:.07em; text-transform:uppercase; } | |
| .example-list { display:flex; flex-wrap:wrap; gap:7px; min-width:0; padding-top:2px; } | |
| .ex { display:inline-flex; align-items:center; padding:8px 12px; border:1px solid var(--border); border-radius:999px; background:var(--paper); color:var(--neutral-700); font-size:12px; line-height:1.15; cursor:pointer; transition:background .15s,border-color .15s,color .15s,transform .15s,box-shadow .15s; } | |
| .ex:hover { border-color:rgba(108,79,224,.28); color:var(--purple); transform:translateY(-1px); box-shadow:0 5px 12px rgba(54,42,105,.08); } | |
| .ex.active { border-color:var(--ink); background:var(--ink); color:var(--paper); box-shadow:none; } | |
| .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } | |
| @keyframes editor-sweep { 0% { transform:translateX(-110%); } 100% { transform:translateX(110%); } } | |
| @keyframes policy-scan { 0% { transform:translateX(-110%); } 100% { transform:translateX(110%); } } | |
| @keyframes probability-wait { 0% { background-position:100% 0; } 100% { background-position:-100% 0; } } | |
| @keyframes status-pulse { 50% { transform:scale(.72); opacity:.55; } } | |
| @keyframes done-pill { 0% { transform:scale(.95); } 55% { transform:scale(1.04); } 100% { transform:scale(1); } } | |
| @keyframes editor-complete { 0% { box-shadow:0 0 0 0 rgba(45,189,112,.2); } 45% { border-color:rgba(45,189,112,.42); box-shadow:0 0 0 5px rgba(45,189,112,.09); } 100% { box-shadow:none; } } | |
| @keyframes marker-stroke { 0% { opacity:0; transform:scaleX(0) rotate(-.3deg); } 14% { opacity:.82; } 76% { opacity:1; transform:scaleX(1.035) rotate(-.3deg); } 100% { opacity:.9; transform:scaleX(1) rotate(-.3deg); } } | |
| @keyframes marker-glint { 0%,18% { left:-12%; opacity:0; } 34% { opacity:.7; } 100% { left:90%; opacity:0; } } | |
| @keyframes stat-rise { from { opacity:.35; transform:translateY(5px); } to { opacity:1; transform:translateY(0); } } | |
| @media (max-width:980px) { | |
| .lint-workspace { grid-template-columns:1fr; } | |
| .policy-list { display:grid; grid-template-columns:1fr 1fr; } | |
| .policy-row { min-width:0; } | |
| } | |
| @media (max-width:720px) { | |
| .wrap { width:100%; border:0; } | |
| .site-intro { padding:20px; } | |
| h1 { font-size:40px; } | |
| .sub { font-size:14px; } | |
| .model-strip { grid-template-columns:48px minmax(0,1fr); column-gap:16px; row-gap:10px; padding:12px 20px; } | |
| .model-copy { min-width:0; } | |
| .load-block { grid-column:1/-1; } | |
| main { padding:15px 20px 20px; } | |
| .policy-list { display:flex; } | |
| .stats-grid { grid-template-columns:1fr 1fr; } | |
| .examples-panel { align-items:flex-start; flex-direction:column; } | |
| } | |
| @media (max-width:460px) { | |
| .model-name-row { align-items:flex-start; flex-direction:column; gap:2px; } | |
| .policy-panel,.text-panel { padding:16px; } | |
| .policy-row { grid-template-columns:8px minmax(0,1fr) 28px; } | |
| .policy-result { grid-column:2/3; width:100%; align-items:flex-start; } | |
| .remove-policy { grid-column:3; grid-row:1; } | |
| .text-heading { flex-direction:column; } | |
| .activity-pill { align-self:flex-start; } | |
| } | |
| @media (prefers-reduced-motion:reduce) { | |
| *,*::before,*::after { scroll-behavior:auto; animation-duration:.01ms; animation-iteration-count:1; transition-duration:.01ms; } | |
| } | |