*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:#faf9f6;color:#252a30;font:16px/1.8 system-ui,sans-serif}nav,main,footer{max-width:1180px;margin:auto;padding:25px 32px}nav{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #e4e0d8}nav div{display:flex;gap:22px;align-items:center}.brand{font-size:24px;font-weight:800}a{color:inherit;text-decoration:none}a:hover{color:#c64b2b}button,.button{font:inherit;cursor:pointer;border:1px solid #ddd7cd;padding:10px 18px;border-radius:9px;background:#fff;color:#252a30;transition:transform .2s,background .2s,box-shadow .2s}button:hover,.button:hover{transform:translateY(-2px);box-shadow:0 5px 18px #30281710}.primary,button[aria-selected=true]{background:#dd502e;color:white;border-color:#dd502e}:focus-visible{outline:3px solid #dd502e;outline-offset:4px}header{display:grid;grid-template-columns:1fr 1fr;gap:55px;align-items:center;min-height:620px;background:radial-gradient(ellipse at 85% 35%,#fce3d5aa,transparent 65%)}h1{font-size:clamp(45px,6.5vw,78px);line-height:1.07;letter-spacing:-3px;margin:25px 0}h2{font-size:clamp(29px,4vw,43px);letter-spacing:-1px;line-height:1.25;margin:16px 0 30px}h3{font-size:23px}p{color:#667079}small{font-size:11px;font-weight:700;letter-spacing:1.8px;color:#ba4b30}.actions,.tabs{display:flex;gap:12px;flex-wrap:wrap;margin:25px 0}section{padding:65px 0;border-top:1px solid #e3dfd7}article{padding:28px;background:white;border:1px solid #e6e1d8;border-radius:17px}.two{display:grid;grid-template-columns:1fr 1fr;gap:28px}.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.steps article{padding:22px}.steps p{font-size:14px}pre{background:#242b34;color:#e1e6ef;padding:24px;border-radius:12px;overflow:auto;font:14px/1.9 ui-monospace,monospace;white-space:pre}.editor{position:relative;overflow:hidden;box-shadow:0 25px 65px #482e1715;transform:rotate(1deg)}.editor pre{min-height:200px}.bar{font-size:12px;color:#d56b50}.bar span{float:right;color:#6a737f}em{color:#ffac86;font-style:normal}.editor small{display:block;margin-top:15px;font-size:9px}.scan{position:absolute;height:2px;left:28px;right:28px;top:90px;background:#ee8050;opacity:0;box-shadow:0 0 20px #ee8050}.running .scan{animation:scan 1.6s ease-in-out}.config-choice{display:block;margin:12px 0}#yaml span{display:block;border-radius:3px;transition:background .2s}#yaml .highlight{background:#754634}details{border-bottom:1px solid #ddd8cf;padding:20px 6px}summary{cursor:pointer;font-weight:600}details p{max-width:800px}.closing{padding:65px 40px;background:#f1e8dc;border-radius:20px;margin:40px 0}.reveal{opacity:1}.js .reveal.pending{opacity:0;transform:translateY(20px)}.reveal{transition:opacity .5s,transform .5s}footer{margin-top:40px;border-top:1px solid #ddd8cf;font-size:13px}#feedback{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:#252a30;color:white;border-radius:8px;padding:0 20px}#feedback:not(:empty){padding:10px 20px}@keyframes scan{0%{top:90px;opacity:1}90%{opacity:1}100%{top:270px;opacity:0}}@media(max-width:800px){header{grid-template-columns:1fr;padding:45px 0;gap:25px}.steps{grid-template-columns:1fr 1fr}.two{grid-template-columns:1fr}.editor{transform:none}nav,main,footer{padding:20px}nav div>a{display:none}section{padding:45px 0}.closing{padding:30px 22px}h1{letter-spacing:-2px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.js .reveal.pending{opacity:1;transform:none}}
header{grid-template-columns:.85fr 1.15fr;gap:35px;padding:45px 0}.editor{transform:none}.editor pre{min-height:0;margin:12px 0;padding:17px 12px;font-size:13px}.demo-picker{display:flex;gap:6px;flex-wrap:wrap;margin:18px 0}.demo-picker button{font-size:10px;padding:5px 8px;border-radius:5px}.demo-picker button[aria-pressed=true]{background:#252e39;color:white;border-color:#252e39}.demo-title{display:flex;justify-content:space-between;gap:10px;align-items:center;margin:16px 0}.badge{font-size:9px;color:#667079;border:1px solid #ddd;padding:2px 7px;border-radius:20px}.code-row{display:block;min-height:24px}.code-row i{display:inline-block;width:28px;margin-right:12px;color:#8993a4;font-size:10px;font-style:normal;user-select:none;border-right:1px solid #46505c}.change-bad{background:#883b37;color:#ffdfd7;text-decoration:underline;text-decoration-style:wavy;text-decoration-color:#ff9b80;text-underline-offset:4px}.change-good{background:#235745;color:#b4f3d0}.advice{border-left:3px solid #dc6940;background:#fff3e8;padding:14px 18px;border-radius:0 8px 8px 0;margin:15px 0}.advice strong{font-size:11px;letter-spacing:1px;color:#ac4d30}.advice p{margin:5px 0;font-size:14px;color:#6a4b3d}.editor #hero-note{font-size:12px;margin:10px 0}.editor #scanstatus{font-size:12px;min-height:38px}.editor .actions{margin:10px 0}.editor button{font-size:12px}.editor .scan{top:180px}.checked .advice{animation:advice-in .45s ease-out}.checked #hero-after{animation:advice-in .6s ease-out}@keyframes advice-in{from{opacity:.4;transform:translateY(6px)}to{opacity:1;transform:none}}@media(max-width:800px){header{grid-template-columns:1fr}.demo-title{flex-wrap:wrap}.editor{padding:20px}.demo-picker button{font-size:11px}.code-row i{margin-right:7px;width:20px}}
/* Review workspace */
body{background:#faf9f6}header{padding:45px 0 70px;min-height:550px;grid-template-columns:1fr 1fr}.hero-art{position:relative;min-height:380px;display:grid;place-items:center;overflow:hidden;background-image:radial-gradient(#bda08a40 1px,transparent 1px);background-size:20px 20px;mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent)}.hero-emblem{position:relative;font-size:110px;font-weight:800;color:#f9f3e9;background:linear-gradient(140deg,#fb9d65,#d94726);line-height:1;width:165px;height:165px;display:grid;place-items:center;border-radius:42px;box-shadow:0 22px 70px #d3533030;transform:rotate(-8deg)}.hero-emblem>span{position:absolute;right:-12px;bottom:-12px;background:#253e36;color:#d9eddf;border:6px solid #faf9f6;border-radius:50%;font-size:26px;width:52px;height:52px;display:grid;place-items:center}.orbit{position:absolute;border:1px solid #dbb39455;border-radius:50%;width:270px;height:270px;transform:rotate(-20deg)}.orbit-two{width:355px;height:355px;border-style:dashed}.floating-note{position:absolute;background:#ffffffed;padding:10px 15px;border:1px solid #e8dfd5;border-radius:9px;font-size:12px;box-shadow:0 8px 25px #482e1710;animation:float-note 6s ease-in-out 2}.floating-note>span:first-child{font-family:monospace;color:#b85e36;margin-right:10px}.note-one{left:5%;top:45px}.note-two{right:0;top:170px;animation-delay:-2s}.note-three{left:5%;bottom:60px;animation-delay:-4s}.art-caption{position:absolute;bottom:5px;font-size:9px;letter-spacing:3px;color:#987961}.section-heading{display:flex;justify-content:space-between;gap:50px;align-items:end}.section-heading h2{font-size:42px}.section-heading>p{max-width:360px;font-size:15px}.scene-tabs{display:flex;gap:8px;margin:28px 0 14px;flex-wrap:wrap}.scene-tabs button{font-size:13px;border-radius:7px}.scene-tabs button[aria-pressed=true]{background:#29322e;color:#fff;border-color:#29322e}#review-workspace{border:1px solid #dadbd5;border-radius:16px;overflow:hidden;box-shadow:0 24px 55px #26342d0a}.workspace-bar{display:flex;align-items:center;gap:20px;padding:14px 22px;background:#eeeee8;font:12px/1.6 ui-monospace,monospace}.window-dots{font-size:11px;letter-spacing:3px;color:#a2aaa3}#issue-count{margin-left:auto;background:#fff;padding:3px 10px;border-radius:20px;color:#6b7269}.workspace-grid{display:grid;grid-template-columns:minmax(0,1fr) 295px}.code-panel{background:#202923;color:#e7eee6;position:relative;min-width:0;overflow:hidden}.code-panel-title{display:flex;justify-content:space-between;padding:16px 22px;color:#b1bcad;font:11px ui-monospace,monospace}.code-language{letter-spacing:2px;color:#83947f}#review-code{overflow:auto;padding:15px 0 28px;min-height:280px}.review-line{display:flex;position:relative;align-items:center;min-height:31px;width:max-content;min-width:100%;padding-right:44px;border-left:3px solid transparent}.review-line.selected{background:#ffffff09;border-color:#e29c60}.review-line code{white-space:pre;font:12px/2 ui-monospace,monospace}.line-number{flex:0 0 44px;text-align:center;font:10px ui-monospace,monospace;color:#6e8677;user-select:none}.review-line mark{color:inherit;padding:2px 0;border-radius:2px}.review-line mark.bad{background:#954b3e66;text-decoration:underline wavy #e9926f;text-underline-offset:4px}.review-line mark.good{background:#37835e66;color:#b3efc2}.line-pin{position:absolute;right:10px;width:23px;height:23px;padding:0;border-radius:50%;background:#efb47b;border:0;font:11px ui-monospace,monospace}.code-legend{padding:12px 22px;color:#b9c3b5;font-size:10px;display:flex;gap:20px;border-top:1px solid #ffffff0d}.code-legend>span:before{content:'';display:inline-block;width:7px;height:7px;border-radius:2px;margin-right:7px;background:#dd9173}.code-legend .legend-good:before{background:#73ba88}.workspace-grid aside{background:#fff;padding:20px 14px}.workspace-grid aside>small{font-size:9px;letter-spacing:1px}.issue-item{display:flex;width:100%;align-items:start;text-align:left;gap:10px;padding:14px 10px;margin-top:10px;border:1px solid transparent;box-shadow:none;font-size:12px;background:#f7f7f3}.issue-item.active{border-color:#e2a477;background:#fff4e9}.issue-item>span:nth-child(2){flex:1;min-width:0}.issue-item strong{font:11px ui-monospace,monospace;overflow-wrap:anywhere}.issue-item>span>span{display:block;font-size:11px;margin-top:5px;color:#70776d}.issue-item small{font-size:9px;letter-spacing:0}.issue-number{border:1px solid #dfc3a7;border-radius:50%;width:21px;height:21px;flex:0 0 21px;text-align:center;line-height:20px;color:#996d42;font-size:10px}.workspace-toolbar{padding:16px 20px;display:flex;gap:15px;align-items:center;justify-content:space-between;background:#fff}.workspace-toolbar>span{font-size:11px;color:#7c8379}.workspace-toolbar>div{display:flex;gap:8px}.workspace-toolbar button{font-size:11px;white-space:nowrap}#review-explanation{margin-top:17px;background:#f4f0e7;padding:24px 30px}#review-explanation h3{margin:13px 0;font-size:21px}.explain-columns{display:grid;grid-template-columns:1fr 1fr;gap:35px}.explain-columns p{font-size:14px;margin:8px 0 14px;color:#626a60}.explain-columns small{font-size:9px}#review-explanation>a{font-size:12px;color:#9b5a35}.explanation-head{display:flex;gap:8px;flex-wrap:wrap}.pill{font-size:10px;border-radius:30px;background:#e5eddf;color:#516247;padding:3px 10px}.pill.neutral{background:#e7e4da;color:#77715f}.demo-disclaimer{font-size:11px;max-width:850px}.review-scanline{position:absolute;top:45px;left:0;right:0;height:1px;background:#efbd82;box-shadow:0 0 24px 8px #efbd8220;opacity:0;pointer-events:none}.review-scanning .review-scanline{animation:review-scan 1s ease-out}.adoption-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.adoption-grid article{padding:25px}.adoption-grid p,.adoption-grid li{font-size:14px;color:#687266}.adoption-grid ul{padding-left:18px}.adoption-grid pre{font-size:11px;padding:18px}.adoption-grid h3{font-size:21px}.chapter-number{font-size:42px;color:#d7bca3;font-weight:300}.mini-callout{border-left:2px solid #d39d70;padding:0 0 0 12px;font-size:12px;color:#8d795f}.adoption-grid a{font-size:13px;color:#a2683e}@keyframes review-scan{0%{top:45px;opacity:1}85%{opacity:1}100%{top:90%;opacity:0}}@keyframes float-note{50%{transform:translateY(-8px)}}@media(max-width:950px){.workspace-grid{grid-template-columns:minmax(0,1fr) 240px}.section-heading{gap:25px}.section-heading h2{font-size:34px}.adoption-grid{grid-template-columns:1fr}.adoption-grid article{display:block}.workspace-toolbar{flex-wrap:wrap}}@media(max-width:700px){header{grid-template-columns:1fr;padding-bottom:25px}.hero-art{min-height:300px}.hero-emblem{width:130px;height:130px;font-size:85px;border-radius:30px}.note-one{top:20px}.note-two{top:120px}.note-three{bottom:45px}.section-heading{display:block}.section-heading>p{max-width:none}.scene-tabs{gap:6px}.scene-tabs button{font-size:11px;padding:8px}.workspace-grid{grid-template-columns:1fr}.workspace-grid aside{padding:15px}.workspace-bar{gap:10px;padding:12px}.workspace-bar #issue-count{font-size:9px}.window-dots{display:none}.explain-columns{grid-template-columns:1fr;gap:10px}.workspace-toolbar{padding:15px}.workspace-toolbar>div{flex-wrap:wrap}#review-explanation{padding:20px}.review-line code{font-size:11px}.line-number{flex-basis:30px}.adoption-grid{gap:15px}}

.review-line code{font-size:13px}@media(max-width:700px){.review-line code{font-size:12px}}
