:root{--paper:#fff;--ink:#171717;--muted:#737373;--line:#e8e8e8;--accent:#171717;--sans:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}button,input,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button,a{touch-action:manipulation}button{color:inherit}button:focus-visible,a:focus-visible{outline:3px solid #8499d6;outline-offset:4px}a{color:inherit}.shell{width:min(1120px,calc(100% - 96px));margin-inline:auto}.site-header{height:88px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:9px;text-decoration:none;font-size:20px;font-weight:650;letter-spacing:-.8px}.brand-domain{color:#a1a1a1;font-weight:450}.header-note{display:flex;align-items:center;gap:14px;font-size:12px;text-decoration:none;color:#656565}.header-note:hover{color:#171717}.hero{text-align:center;padding:66px 0 78px}.eyebrow{font-size:10px;font-weight:550;letter-spacing:1.6px;line-height:1.6;color:#9a9a9a}h1{font-size:clamp(72px,8.4vw,112px);font-weight:650;letter-spacing:-7px;line-height:1.02;margin:22px 0 27px}h1 span{color:#aaa}.hero-description{font-size:15px;line-height:1.75;color:var(--muted);margin:0 auto 30px}.repo-form{width:min(624px,100%);margin:0 auto;display:flex;gap:5px;background:#fff;border:1px solid #dadada;border-radius:8px;padding:5px;text-align:left;transition:border-color .2s}.repo-form:focus-within{border-color:#696969;box-shadow:0 0 0 2px #17171708}.input-wrap{display:flex;align-items:center;flex:1;gap:13px;min-width:0;padding-left:12px}.github-icon{flex:none;color:#7e7e7e}input{width:100%;min-width:0;border:0;background:transparent;outline:none;font-size:13px;color:var(--ink);padding:15px 0}input::placeholder{color:#a3a3a3}.create-button,.download-button{display:flex;align-items:center;justify-content:center;gap:17px;padding:15px 19px;background:var(--accent);color:white;border:0;border-radius:5px;font-size:12px;font-weight:550;cursor:pointer;white-space:nowrap;text-decoration:none;transition:background .2s}.create-button:hover,.download-button:hover{background:#3b3b3b}.create-button:disabled{cursor:progress;opacity:.65}.form-error{color:#b44632;margin:10px 0 0;font-size:12px}.form-error:empty{display:none}.try-row{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:17px;font-size:10px;color:#a1a1a1}.repo-suggestion{padding:3px 0;background:none;border:0;cursor:pointer;color:#777;font-size:10px}.repo-suggestion:hover{color:#171717;text-decoration:underline;text-underline-offset:4px}.no-signup{font-size:10px;color:#a1a1a1;margin:17px 0 0}.examples{padding-top:0}.section-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:21px}h2{font-size:20px;font-weight:550;letter-spacing:-.6px;line-height:1.25;margin:0}.gallery-note{color:#aaa;font-size:11px}.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.cover-card{background:none;border:0;padding:0;cursor:pointer;text-align:left;min-width:0}.cover-image{position:relative;overflow:hidden;border-radius:4px;background:#f4f4f4;aspect-ratio:1376/768}.cover-image img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s}.cover-card:hover .cover-image img{transform:scale(1.035)}.view-cover{position:absolute;right:10px;bottom:10px;padding:8px 10px;border-radius:3px;background:#ffffffee;font-size:10px;opacity:0;transform:translateY(4px);transition:opacity .2s,transform .2s}.view-cover span{margin-left:10px}.cover-card:hover .view-cover,.cover-card:focus-visible .view-cover{opacity:1;transform:translateY(0)}.card-caption{display:flex;align-items:center;justify-content:space-between;padding-top:15px}h3{margin:0 0 5px;font-size:12px;font-weight:550;letter-spacing:-.1px}.card-caption p{font-size:10px;margin:0;color:#a0a0a0}.card-arrow{font-size:17px;color:#8d8d8d;padding-right:2px}.readme-section{margin-top:66px;padding:35px 0 40px;border-top:1px solid var(--line)}.readme-intro{display:flex;justify-content:space-between;align-items:center}.readme-intro p{font-size:11px;color:#a0a0a0;margin:0}.readme-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin:30px 0 23px}.step-number{font-family:ui-monospace,SFMono-Regular,monospace;display:block;font-size:10px;color:#b1b1b1;margin-bottom:12px}.readme-steps h3{font-size:12px;margin-bottom:8px}.readme-steps p,.preview-readme p{font-size:11px;line-height:1.8;color:#8b8b8b;margin:0}code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.94em;color:#5a5a5a}.markdown-block{display:flex;align-items:center;justify-content:space-between;gap:20px;background:#f7f7f7;border:1px solid #ededed;border-radius:5px;padding:14px 16px}.markdown-block>code{font-size:11px;overflow-wrap:anywhere}.copy-button{border:0;background:none;font-size:10px;color:#696969;cursor:pointer;white-space:nowrap;padding:5px 0}.copy-button:hover{color:#171717}.site-footer{border-top:1px solid var(--line);display:flex;justify-content:space-between;padding:22px 0 28px;font-size:10px;color:#a3a3a3}.site-footer span:first-child{color:#797979}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}dialog{width:min(900px,calc(100% - 40px));padding:25px;background:white;border:1px solid #e5e5e5;border-radius:10px;color:var(--ink);box-shadow:0 30px 100px #0002;max-height:90vh;overflow:auto}dialog::backdrop{background:#171717b3;backdrop-filter:blur(5px)}.dialog-header{display:flex;align-items:start;justify-content:space-between;gap:20px;margin-bottom:20px}.dialog-header .eyebrow{margin:0 0 7px;font-size:9px}.dialog-header h2{font-size:22px;overflow-wrap:anywhere}.close-button{background:#f5f5f5;border:0;border-radius:50%;width:32px;height:32px;font-size:23px;cursor:pointer;flex:none}.preview-image{width:100%;height:auto;display:block;border-radius:4px}.dialog-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:20px}.dialog-bottom p{font-size:12px;line-height:1.6;margin:0;color:#707070}.dialog-bottom .demo-note{font-size:10px;color:#a1a1a1;margin-top:6px}.download-button{font-size:11px;padding:13px 16px}.preview-readme{margin-top:24px;padding-top:22px;border-top:1px solid var(--line)}.preview-readme h3{font-size:13px;margin-bottom:8px}.preview-readme .markdown-block{margin-top:14px}.spinner{width:14px;height:14px;border:2px solid #ffffff44;border-top-color:white;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:900px){.shell{width:calc(100% - 48px)}h1{font-size:89px;letter-spacing:-5.5px}.hero{padding-top:51px;padding-bottom:65px}.gallery{gap:16px}}
@media(max-width:600px){.shell{width:calc(100% - 40px)}.site-header{height:75px}.brand{font-size:18px}.brand svg{width:22px;height:22px}.header-note{font-size:10px;gap:6px}.hero{padding:40px 0 50px}h1{font-size:67px;letter-spacing:-4px;margin:19px 0 23px}.hero-description{font-size:12px;line-height:1.8;max-width:300px}.repo-form{flex-direction:column;padding:5px;gap:4px}.input-wrap{padding:0 10px}.create-button{width:100%;padding:14px}.try-row{gap:10px;font-size:9px}.repo-suggestion{font-size:9px}.no-signup{font-size:9px}.section-heading h2{font-size:18px}.gallery-note{display:none}.gallery{grid-template-columns:1fr;gap:26px}.card-caption{padding-top:12px}h3{font-size:13px}.card-caption p{font-size:10px}.readme-section{margin-top:43px;padding-top:28px}.readme-intro{display:block}.readme-intro p{margin-top:9px}.readme-steps{grid-template-columns:1fr;gap:22px;margin:25px 0}.step-number{float:left;width:35px;margin:2px 0 30px}.readme-steps p{font-size:11px}.markdown-block{gap:10px;padding:13px 12px}.markdown-block>code{font-size:9px}.copy-button{font-size:9px}.site-footer{font-size:9px}.dialog-bottom{flex-direction:column;align-items:stretch}.dialog-header h2{font-size:20px}dialog{padding:18px}.download-button{width:100%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition:none!important}}
.readme-section>.demo-note,.preview-readme>.demo-note{font-size:10px;color:#969696;margin:12px 0 0;line-height:1.6}
/* A little personality, with the same simple layout. */
.hero{position:relative}h1 span{color:#9c8be5}.brand>svg{color:#8b76dc;transition:transform .25s}.brand:hover>svg{transform:rotate(-9deg)}.hero>.eyebrow{color:#8c7baf}.hero-sticker{position:absolute;top:162px;right:calc(50% - 385px);display:flex;align-items:center;gap:14px;padding:11px 17px;background:#ffdfbf;border-radius:4px;color:#71472b;font-size:13px;font-weight:550;transform:rotate(9deg);box-shadow:2px 3px 0 #e8bc95}.hero-sticker>span{font-size:24px;line-height:1}.create-button{background:#c6b8fa;color:#292039;transition:background .2s,transform .2s}.create-button:hover{background:#b5a4ef;transform:translateY(-2px)}.create-button>svg{transition:transform .2s}.create-button:hover>svg{transform:rotate(-35deg)}.spinner{border-color:#29203933;border-top-color:#292039}.repo-form:focus-within{border-color:#ac96e0;box-shadow:0 0 0 3px #c6b8fa22}.try-row{gap:13px;flex-wrap:wrap}.surprise-button{color:#8a70c1!important}.cover-card .cover-image{transition:transform .3s,box-shadow .3s}.cover-card:nth-child(1):hover .cover-image{transform:translateY(-5px) rotate(-1deg);box-shadow:0 8px 20px #0000000c}.cover-card:nth-child(2):hover .cover-image{transform:translateY(-5px) rotate(1deg);box-shadow:0 8px 20px #0000000c}.cover-card:nth-child(3):hover .cover-image{transform:translateY(-5px) rotate(-.7deg);box-shadow:0 8px 20px #0000000c}.step-number{color:#9c83c9}.copy-button:hover{color:#8a70c1}.close-button:hover{background:#ede7fc}.site-footer span:last-child{color:#988aa7}
@media(max-width:900px){.hero-sticker{top:147px;right:calc(50% - 330px);font-size:11px;padding:8px 12px;gap:8px}.hero-sticker>span{font-size:20px}}
@media(max-width:700px){.hero-sticker{display:none}}
@media(max-width:600px){h1{font-size:clamp(54px,17vw,67px)}.hero-description{max-width:270px}.hero>.eyebrow{font-size:9px;letter-spacing:1.1px}.try-row{gap:7px 12px;max-width:300px;margin-inline:auto}.surprise-button{flex-basis:100%;margin-top:3px}.section-heading h2{font-size:17px}.site-footer{gap:25px}.site-footer span:last-child{text-align:right;max-width:180px}}
/* Gallery frames: a slim charcoal edge and a generous paper mat. */
.cover-image,.preview-frame{padding:14px;background:#fffefa;border:5px solid #353331;border-radius:2px;box-shadow:inset 0 0 0 1px #e5e0d7,0 2px 3px #18151217,0 9px 18px #18151210;aspect-ratio:auto;overflow:visible}.cover-image img{height:auto;aspect-ratio:1376/768;object-fit:cover;border:1px solid #e5e1d8;border-radius:0;box-shadow:0 0 0 1px #ffffff80}.cover-card:hover .cover-image img{transform:none}.view-cover{right:23px;bottom:23px}.preview-frame{padding:25px;border-width:7px}.preview-frame .preview-image{border:1px solid #e5e1d8;border-radius:0}.cover-card:nth-child(n):hover .cover-image{box-shadow:inset 0 0 0 1px #e5e0d7,0 12px 24px #1815121a}
@media(max-width:600px){.cover-image{padding:16px}.preview-frame{padding:12px;border-width:5px}}
/* Each print gets a frame with a little character. */
.cover-image,.preview-frame{--frame:#725038;--frame-light:#a17851;--frame-dark:#3f2b20;--mat:#f7f0e4;border:0;padding:23px;background:linear-gradient(135deg,var(--frame-light),var(--frame) 35%,var(--frame-dark));box-shadow:inset 0 0 0 1px #ffffff30,inset 0 0 0 4px #00000012,inset 0 0 0 5px #ffffff18,2px 4px 0 var(--frame-dark),5px 11px 18px #19151218;border-radius:2px;isolation:isolate}.cover-image::before,.preview-frame::before{content:'';position:absolute;inset:9px;background:var(--mat);border:1px solid #ffffff55;box-shadow:inset 0 2px 5px #1e160f24,0 0 0 1px #00000035;z-index:-1}.cover-image img,.preview-frame .preview-image{border:1px solid #00000013;box-shadow:0 -1px 2px #0000001a;border-radius:0}.cover-card:nth-child(1) .cover-image,.preview-frame[data-frame='postgres/postgres']{--frame:#765039;--frame-light:#ad8057;--frame-dark:#442d20;--mat:#fbf3df;background:repeating-linear-gradient(0deg,#ffffff05 0 1px,#00000004 1px 3px),linear-gradient(135deg,var(--frame-light),var(--frame) 38%,var(--frame-dark))}.cover-card:nth-child(2) .cover-image,.preview-frame[data-frame='grafana/grafana']{--frame:#3955db;--frame-light:#7286ff;--frame-dark:#2036a0;--mat:#fff9e9;border-radius:7px;background:linear-gradient(145deg,var(--frame-light),var(--frame) 40%,var(--frame-dark));box-shadow:inset 0 0 0 1px #ffffff55,inset 0 0 0 4px #ffffff18,3px 5px 0 var(--frame-dark),6px 12px 20px #293cb626}.cover-card:nth-child(2) .cover-image::before,.preview-frame[data-frame='grafana/grafana']::before{border-radius:1px}.cover-card:nth-child(3) .cover-image,.preview-frame[data-frame='replicatedhq/dockerfilelint']{--frame:#aaa08a;--frame-light:#d7cfb8;--frame-dark:#756c5a;--mat:#f4f3e8;background:repeating-linear-gradient(90deg,#ffffff0a 0 2px,#403a3009 2px 3px,#ffffff08 3px 6px),linear-gradient(145deg,var(--frame-light),var(--frame) 43%,var(--frame-dark))}.preview-frame{position:relative;padding:40px}.preview-frame::before{inset:12px}.cover-card:nth-child(n):hover .cover-image{box-shadow:inset 0 0 0 1px #ffffff44,inset 0 0 0 4px #00000012,3px 6px 0 var(--frame-dark),8px 17px 25px #19151220}.view-cover{right:29px;bottom:29px}
@media(max-width:600px){.cover-image{padding:25px}.preview-frame{padding:23px}.preview-frame::before{inset:9px}}
/* Repo context belongs beside the artwork, not inside the generated image. */
.repo-data{position:relative;margin-top:12px;text-align:left;color:#5b6156;font-weight:400}.repo-metrics{display:flex;align-items:center;gap:11px;padding-bottom:11px;border-bottom:1px solid #deded266;font-size:9px;white-space:nowrap}.repo-stat{display:inline-flex;align-items:center;gap:4px;color:#72786b}.repo-stat b{font-weight:600;color:#41493c}.repo-language{display:inline-flex;align-items:center;gap:5px;margin-left:auto;font-size:8px;color:#777d70}.repo-language i{width:6px;height:6px;border-radius:50%;background:#c1c5b8}.activity-label{display:flex;justify-content:space-between;color:#979d8f;font-size:8px;margin:10px 0 7px;line-height:1.2}.activity-grid{display:grid;grid-template-rows:repeat(7,1fr);grid-auto-flow:column;grid-template-columns:repeat(12,1fr);gap:4px;width:100%}.activity-dot{display:block;aspect-ratio:1;max-height:13px;border-radius:2px;background:#e7ebdf}.activity-dot.level-1{background:#c2dfa3}.activity-dot.level-2{background:#85bd68}.activity-dot.level-3{background:#52944d}.activity-dot.level-4{background:#2d663e}.cover-image{padding-bottom:20px}.view-cover{top:30px;bottom:auto;height:29px}.preview-frame .repo-data{margin-top:21px}.preview-frame .repo-metrics{font-size:12px;gap:22px;padding-bottom:15px}.preview-frame .repo-language{font-size:11px}.preview-frame .activity-label{font-size:10px;margin-top:14px}.preview-frame .activity-grid{grid-template-columns:repeat(12,12px);grid-template-rows:repeat(7,12px);gap:4px}.preview-frame .activity-dot{max-height:none}.preview-frame .repo-language i{width:8px;height:8px}
@media(max-width:900px) and (min-width:601px){.repo-metrics{gap:6px;font-size:8px}.repo-language{font-size:7px}.activity-grid{gap:3px}.activity-dot{max-height:10px}}
@media(max-width:600px){.repo-metrics{font-size:10px}.repo-language{font-size:9px}.activity-dot{max-height:14px}.preview-frame .repo-metrics{font-size:10px;gap:13px}.preview-frame .repo-language{font-size:9px}}
.weekly-promise{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:#8a70b7;margin-top:10px}.weekly-promise i{width:5px;height:5px;border-radius:50%;background:#927bc4}.evolution-section{display:grid;grid-template-columns:280px minmax(0,1fr);gap:42px;align-items:center;margin-top:65px;padding-top:38px;border-top:1px solid var(--line)}.evolution-copy>.eyebrow{font-size:9px;letter-spacing:1.3px;color:#947db2;margin:0 0 12px}.evolution-copy h2{font-size:34px;line-height:1.1;letter-spacing:-1.3px}.evolution-copy>p:not(.eyebrow){font-size:12px;line-height:1.8;color:#888;margin:16px 0 0}.evolution-copy>.evolution-footnote{color:#695777!important;font-size:11px!important}.evolution-demo{display:grid;grid-template-columns:minmax(0,1fr) 20px minmax(0,1fr);gap:14px;align-items:center}.evolution-demo figure{margin:0}.evolution-print{padding:9px;background:#fbf3df;border:5px solid #765039;box-shadow:2px 3px 0 #442d20,4px 8px 14px #19151214}.evolution-print img{width:100%;height:auto;display:block}.evolution-demo figcaption{display:flex;flex-direction:column;gap:5px;margin-top:14px;font-size:10px;color:#9c9c9c}.evolution-demo figcaption>span:first-child{color:#545454;font-weight:600;font-size:11px}.evolution-arrow{color:#a18bc8;font-size:23px;margin-top:-30px}.evolution-disclaimer{grid-column:1/-1;margin:5px 0 0;color:#a2a2a2;font-size:9px;line-height:1.6}.evolution-section+.readme-section{margin-top:42px}
@media(max-width:900px){.evolution-section{grid-template-columns:210px minmax(0,1fr);gap:25px}.evolution-copy h2{font-size:29px}.evolution-demo{gap:9px}}
@media(max-width:600px){.evolution-section{grid-template-columns:1fr;gap:25px;margin-top:45px;padding-top:30px}.evolution-copy h2 br{display:none}.evolution-copy h2{font-size:27px}.evolution-copy>p:not(.eyebrow){max-width:350px}.evolution-demo{grid-template-columns:minmax(0,1fr) 15px minmax(0,1fr);gap:9px}.evolution-print{padding:5px;border-width:3px}.weekly-promise{font-size:11px}}

[hidden]{display:none!important}.cover-image{aspect-ratio:2/1}.cover-image img{object-fit:contain}#preview-progress{padding:70px 20px;margin:0;text-align:center;font-size:22px;color:#8b76dc;background:#fbf9ff;border-radius:4px}.preview-frame:has(#preview-progress:not([hidden])){min-height:200px}

#preview-progress{padding:38px 24px 30px;background:linear-gradient(135deg,#faf7ff,#fffdf7);color:#26212f}#progress-title{font-size:24px;font-weight:550;letter-spacing:-.6px;margin:14px 0 9px}#progress-detail{font-size:13px;color:#82758f;line-height:1.7;margin:0 auto;max-width:420px;min-height:44px}.art-spinner{display:inline-block;font-size:45px;line-height:1;color:#9c8be5;animation:art-spin 10s linear infinite}#generation-steps{list-style:none;padding:0;margin:28px auto 0;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;max-width:600px;counter-reset:stage}#generation-steps li{counter-increment:stage;font-size:10px;line-height:1.6;color:#aea5b5;padding:12px 6px;border-top:2px solid #e9e3ef;position:relative}#generation-steps li::before{content:counter(stage,decimal-leading-zero);display:block;font-size:11px;margin-bottom:6px;color:#c1b6ca}#generation-steps li.active{border-color:#9c8be5;color:#725bad}#generation-steps li.active::before{color:#725bad}#generation-steps li.complete{border-color:#8bae80;color:#71896a}#generation-steps li.complete::before{content:'✓';color:#71896a}#progress-elapsed{font-variant-numeric:tabular-nums;font-size:10px;color:#b0a7b8;margin:12px 0 0}@keyframes art-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.art-spinner{animation:none}}@media(max-width:600px){#preview-progress{padding:28px 14px}#progress-title{font-size:20px}#generation-steps{gap:4px}#generation-steps li{font-size:9px}}

#preview-progress.failed .art-spinner{animation:none;color:#bc8c75}

.art-explanation{margin-top:22px;padding:18px 20px;background:#f8f6f0;border:1px solid #ede8dc;border-radius:8px}.art-explanation h3{font-size:13px;margin-bottom:8px}.art-explanation p{font-size:12px;line-height:1.75;color:#696357;margin:0}.art-explanation[hidden]{display:none}