@import "https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,600;0,700;0,800;1,600;1,700&family=Silkscreen:wght@400;700&display=swap";:root{--night:#16161e;--panel:#1a1b26;--panel-deep:#15151d;--line:#303348;--line-bright:#414868;--text:#c0caf5;--muted:#565f89;--blue:#7aa2f7;--cyan:#7dcfff;--purple:#bb9af7;--green:#9ece6a;--red:#f7768e;--yellow:#e0af68}*{box-sizing:border-box}html{background:var(--night);min-width:320px}body{background:radial-gradient(circle at 50% 82%, #4148681f, transparent 34rem), var(--night);min-width:320px;min-height:100vh;color:var(--text);margin:0;font-family:JetBrains Mono,SFMono-Regular,Consolas,monospace;overflow-x:hidden}button,textarea{font:inherit}button{color:inherit}.site-shell{width:min(1440px,100% - 72px);margin:0 auto;padding:clamp(48px,4vw,72px) 0 clamp(24px,3vw,40px)}.hero{text-align:center}.hero h1{color:#0000;letter-spacing:.11em;text-shadow:0 7px 25px #7aa2f71f;background:linear-gradient(#86d7ff 6%,#7aa2f7 48%,#c48dfa 94%);-webkit-background-clip:text;background-clip:text;margin:0;font-family:Silkscreen,JetBrains Mono,monospace;font-size:clamp(38px,4.5vw,70px);font-weight:700;line-height:1.1}.tagline{color:#89aaff;letter-spacing:.025em;margin:12px 0 0;font-size:clamp(15px,1.55vw,23px);font-weight:700;animation:.62s cubic-bezier(.22,1,.36,1) 70ms both page-content-enter}.hero-explainer{color:#a9b1d6;max-width:1160px;margin:10px auto 0;font-size:clamp(13px,1.1vw,16px);line-height:1.65;animation:.62s cubic-bezier(.22,1,.36,1) .14s both page-content-enter}.hero-explainer a{color:inherit;text-decoration:underline;-webkit-text-decoration-color:var(--line-bright);text-decoration-color:var(--line-bright);text-underline-offset:3px;transition:color .16s,text-decoration-color .16s}.hero-explainer .syntax-link:hover{color:var(--red);-webkit-text-decoration-color:var(--red);text-decoration-color:var(--red)}.hero-explainer .strengths-link:hover{color:var(--green);-webkit-text-decoration-color:var(--green);text-decoration-color:var(--green)}.quote mark a{color:inherit;text-decoration:none}.quote mark a:hover{text-underline-offset:3px;text-decoration:underline}.terminal{border:1px solid var(--line);background:var(--panel);border-radius:18px;margin-top:clamp(28px,2.5vw,38px);animation:.68s cubic-bezier(.22,1,.36,1) .21s both page-content-enter;overflow:hidden;box-shadow:0 26px 65px #03050f6b}@keyframes page-content-enter{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.terminal-bar{border-bottom:1px solid var(--line);background:#15151dc7;grid-template-columns:1fr auto 1fr;align-items:center;min-height:50px;padding:0 26px;display:grid;position:relative}.terminal-bar p{color:var(--muted);letter-spacing:.02em;margin:0;font-size:16px;font-weight:700}.traffic-lights{gap:15px;display:flex}.traffic-lights span{border-radius:50%;width:17px;height:17px}.traffic-lights span:first-child{background:var(--red)}.traffic-lights span:nth-child(2){background:var(--yellow)}.traffic-lights span:nth-child(3){background:var(--green)}.device-label{color:var(--muted);letter-spacing:.16em;justify-self:end;font-size:13px;font-weight:700}.terminal-body{grid-template-columns:minmax(0,1fr) minmax(300px,390px);gap:22px;padding:22px;display:grid}.workspace{min-width:0}.editor-frame{border:1px solid var(--line);background:var(--panel-deep);border-radius:13px;overflow:hidden}.editor-tabrow{border-bottom:1px solid var(--line);grid-template-columns:auto minmax(0,1fr);align-items:end;min-height:44px;display:grid}.editor-tabs{align-self:stretch;min-width:0;display:flex}.editor-tab{border:0;border-right:1px solid var(--line);color:var(--muted);cursor:pointer;white-space:nowrap;background:0 0;align-items:center;padding:0 25px;font-size:17px;font-weight:700;display:flex}.editor-tab[aria-selected=true]{color:var(--text);background:#171720}.editor-tab:hover{color:var(--text)}.annotation-status{min-width:0;color:var(--yellow);text-overflow:ellipsis;white-space:nowrap;place-self:center end;padding-right:24px;font-size:14px;font-weight:700;overflow:hidden}.annotation-status.has-error{color:var(--red)}.annotation-swap{vertical-align:baseline;display:inline-grid}.annotation-count{text-align:right;min-width:2ch}.annotation-outcome{text-align:left;width:10ch}.annotation-swap-value{opacity:0;will-change:opacity, transform;grid-area:1/1;transition:opacity .42s,transform .42s;transform:translateY(35%)}.annotation-swap-value.annotation-ugly{transform:translateY(-35%)}.annotation-swap-value.is-active{opacity:1;transform:translateY(0)}.editor-surface{height:clamp(450px,100dvh - 430px,600px);min-height:450px;position:relative;overflow:hidden}.editor-surface textarea,.magic-layer{width:100%;height:100%;position:absolute;inset:0}.editor-surface textarea{z-index:2;resize:none;color:var(--text);caret-color:var(--blue);tab-size:4;background:0 0;border:0;outline:0;padding:26px 28px;font-size:clamp(13px,1.18vw,17px);font-weight:600;line-height:1.75;display:block}.editor-surface.has-highlighter textarea{color:#0000;-webkit-text-fill-color:transparent}.editor-surface textarea::selection{background:#7aa2f74d}.magic-layer{z-index:1;opacity:0;visibility:hidden;pointer-events:none;overflow:auto}.editor-surface.is-beautified textarea{opacity:0;visibility:hidden;pointer-events:none}.editor-surface.has-highlighter .magic-layer,.editor-surface.is-beautified .magic-layer{opacity:1;visibility:visible}.editor-surface.is-beautified .magic-layer{z-index:3;pointer-events:auto}.beautified-code{tab-size:4;white-space:pre;border:0;outline:0;min-width:100%;min-height:100%;font-weight:600;background:0 0!important;margin:0!important;padding:26px 28px!important;font-family:JetBrains Mono,SFMono-Regular,Consolas,monospace!important;font-size:clamp(13px,1.18vw,17px)!important;line-height:1.75!important}.magic-layer::-webkit-scrollbar{width:11px}.editor-surface textarea::-webkit-scrollbar{width:11px}.magic-layer::-webkit-scrollbar-track{background:0 0}.editor-surface textarea::-webkit-scrollbar-track{background:0 0}.magic-layer::-webkit-scrollbar-thumb{background:#343952;border-radius:10px}.editor-surface textarea::-webkit-scrollbar-thumb{background:#343952;border-radius:10px}.editor-actions{grid-template-columns:auto 1fr;align-items:center;gap:14px;padding-top:12px;display:grid}.editor-actions button{cursor:pointer;border-radius:14px;min-height:54px;font-weight:800}.beautify-button{color:#11131c;letter-spacing:.04em;background:#86aafc;border:0;justify-content:center;align-items:center;gap:16px;min-width:218px;padding:0 29px;font-size:18px;transition:background .16s,transform .16s,box-shadow .16s;display:inline-flex;box-shadow:0 7px #0c1020,inset 0 0 0 1px #ffffff2e}.beautify-button:hover{background:#9bbaff;transform:translateY(-2px);box-shadow:0 9px #0c1020}.beautify-button:active{transform:translateY(3px);box-shadow:0 3px #0c1020}.beautify-button:disabled{opacity:.62;cursor:wait;transform:none}.editor-notes{text-align:right;justify-self:end}.editor-notes p{color:var(--muted);margin:0;font-size:12px;font-weight:700}.editor-notes a{color:var(--green);margin-top:5px;font-size:11px;font-weight:700;text-decoration:none;display:inline-block}.editor-notes a:hover{text-underline-offset:3px;text-decoration:underline}.dhh-sidebar{grid-template-rows:repeat(2,minmax(0,1fr));align-self:stretch;gap:18px;display:grid}.reaction-card,.quote-card{border:1px solid var(--line);background:var(--panel-deep);border-radius:14px}.reaction-card{text-align:center;place-items:center;min-height:0;padding:20px;display:grid}.avatar-stack{border:3px solid var(--red);background:#c0caf5;border-radius:50%;width:124px;height:124px;margin:0 auto 12px;transition:border-color .76s;position:relative;overflow:hidden}.avatar{object-fit:cover;width:100%;height:100%;transition:opacity .76s,filter .76s,transform .76s;position:absolute;inset:0}.avatar-happy{opacity:0;transform:scale(.96)}.avatar-unhappy{filter:grayscale()contrast(1.06);opacity:1}.terminal.is-beautiful .avatar-happy{opacity:1;transform:scale(1)}.terminal.is-beautiful .avatar-unhappy{opacity:0;transform:scale(1.04)}.terminal.is-beautiful .avatar-stack{border-color:var(--green)}.reaction-copy strong{font-size:18px}.mood{color:var(--red);letter-spacing:.12em;margin:12px 0 10px;font-size:14px;font-weight:800;transition:color .76s}.terminal.is-beautiful .mood{color:var(--green)}.reaction-copy blockquote{color:#a9b1d6;max-width:260px;margin:0 auto;font-size:14px;font-style:italic;font-weight:700;line-height:1.5}@media (width>=981px){.reaction-copy blockquote{white-space:nowrap;max-width:none;font-size:clamp(12px,1vw,14px)}}.quote-card{flex-direction:column;justify-content:center;padding:22px;display:flex}.quote-card h2{color:var(--muted);letter-spacing:.18em;margin:0 0 18px;font-size:13px;font-weight:700;line-height:1.45}.quote-card h2 a{color:inherit;text-decoration:none;transition:color .16s}.quote-card h2 a:hover{color:var(--blue)}.quote{color:#a9b1d6;margin:0;font-size:13px;font-style:italic;font-weight:700;line-height:1.72;transition:opacity .76s}.quote+.quote{margin-top:16px}.quote mark{color:inherit;border-radius:3px;padding:2px 4px}.quote-unhappy mark{color:var(--red);background:#f7768e2e}.quote-happy mark{color:var(--green);background:#9ece6a2b}.quote-card.is-unhappy .quote-happy,.quote-card.is-happy .quote-unhappy{opacity:.24}.quote-card.is-unhappy .quote-unhappy,.quote-card.is-happy .quote-happy{opacity:1}.site-footer{color:var(--muted);letter-spacing:.04em;justify-content:center;align-items:center;gap:14px;padding:18px 16px 0;font-size:11px;font-weight:700;animation:.68s cubic-bezier(.22,1,.36,1) .33s both page-content-enter;display:flex}.site-footer a{color:inherit;text-decoration:none;transition:color .16s}.site-footer a:hover{color:var(--blue)}.site-footer span{color:var(--line-bright)}button:focus-visible,textarea:focus-visible,.hero-explainer a:focus-visible,.editor-notes a:focus-visible,.quote mark a:focus-visible,.quote-card h2 a:focus-visible,.site-footer a:focus-visible,.beautified-code:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}@media (width<=980px){.site-shell{width:min(760px,100% - 36px)}.terminal-body{grid-template-columns:1fr}.dhh-sidebar{grid-template-rows:1fr;grid-template-columns:1fr 1fr}.reaction-card{min-height:280px}}@media (width>=681px) and (height<=1000px){.site-shell{padding-top:clamp(36px,4vh,48px)}.hero h1{font-size:clamp(38px,6.5vh,60px)}.tagline{margin-top:8px}.hero-explainer{margin-top:8px;line-height:1.4}.terminal{margin-top:24px}.terminal-body{gap:18px;padding:18px}.editor-tabrow{min-height:40px}.editor-surface{height:clamp(410px,100dvh - 360px,540px);min-height:410px}.editor-actions{padding-top:10px}.editor-actions button{min-height:48px}}@media (width<=680px){.site-shell{width:min(100% - 20px,470px);padding-top:28px}.hero h1{letter-spacing:.055em;font-size:clamp(30px,10vw,43px)}.tagline{margin-top:12px;font-size:13px}.hero-explainer{margin-top:14px;padding:0 8px;font-size:11px}.terminal{border-radius:15px;margin-top:24px}.terminal-bar{grid-template-columns:auto 1fr;min-height:45px;padding:0 14px}.terminal-bar p{justify-self:center;padding-right:53px;font-size:10px}.traffic-lights{gap:7px}.traffic-lights span{width:10px;height:10px}.device-label{display:none}.terminal-body{gap:14px;padding:14px}.dhh-sidebar{display:contents}.reaction-card{grid-row:1}.workspace{grid-row:2}.quote-card{grid-row:3}.reaction-card{text-align:left;grid-template-columns:auto 1fr;min-height:0;padding:16px}.avatar-stack{width:88px;height:88px;margin:0 17px 0 0}.reaction-copy blockquote{max-width:none;font-size:11px}.reaction-copy strong{font-size:13px}.mood{margin:8px 0;font-size:10px}.quote-card{padding:19px}.quote-card h2{margin-bottom:16px;font-size:10px}.quote{font-size:10px;line-height:1.6}.quote+.quote{margin-top:13px}.editor-tabrow{min-height:40px}.editor-tab{padding:0 11px;font-size:11px}.annotation-status{padding-right:12px;font-size:9px}.editor-surface{height:390px;min-height:320px}.editor-surface textarea,.beautified-code{padding:20px!important;font-size:11px!important;line-height:1.65!important}.editor-actions{grid-template-columns:1fr;gap:12px;padding-top:13px}.editor-actions button{border-radius:11px;min-height:50px}.beautify-button{min-width:0;padding:0 20px;font-size:14px}.editor-notes{text-align:center;grid-column:1/-1;justify-self:center}.editor-notes p,.editor-notes a{font-size:9px}.site-footer{flex-direction:column;gap:8px;padding-top:22px;font-size:9px}.site-footer span{display:none}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.shiki-magic-move-container{white-space:pre;position:relative}.shiki-magic-move-line-number{opacity:.3;-webkit-user-select:none;user-select:none}.shiki-magic-move-item{transition:color var(--smm-duration,.5s) var(--smm-easing,"ease");display:inline-block}.shiki-magic-move-enter-active,.shiki-magic-move-leave-active,.shiki-magic-move-move{transition:all var(--smm-duration,.5s) var(--smm-easing,"ease")}.shiki-magic-move-container-resize,.shiki-magic-move-container-restyle{transition:all var(--smm-duration,.5s) var(--smm-easing,"ease");transition-delay:calc(var(--smm-duration,.5s)*var(--smm-delay-container,1))}.shiki-magic-move-move{transition-delay:calc(var(--smm-duration,.5s)*var(--smm-delay-move,1) + var(--smm-stagger,0));z-index:1}.shiki-magic-move-enter-active{transition-delay:calc(var(--smm-duration,.5s)*var(--smm-delay-enter,1) + var(--smm-stagger,0));z-index:1}.shiki-magic-move-leave-active{transition-delay:calc(var(--smm-duration,.5s)*var(--smm-delay-leave,1) + var(--smm-stagger,0))}.shiki-magic-move-enter-from,.shiki-magic-move-leave-to{opacity:0}br.shiki-magic-move-leave-active{display:none}