@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=DM+Mono:wght@400;500&display=swap";:root{color:#153c34;font-synthesis:none;background:#f4f2ec;font-family:DM Sans,sans-serif}*{box-sizing:border-box}body{min-width:320px;min-height:100dvh;margin:0}button,textarea{font:inherit}button{color:inherit}button:focus-visible,textarea:focus-visible,input:focus-visible{outline-offset:2px;outline:3px solid #f0a33a}main{width:min(1480px,100%);margin:auto;padding:42px clamp(20px,5vw,76px) 100px}.masthead{border-bottom:1px solid #b9c2b8;grid-template-columns:1.2fr .8fr;align-items:end;gap:60px;padding:28px 0 54px;display:grid}.eyebrow,.section-heading>span{letter-spacing:.12em;text-transform:uppercase;font:500 11px/1 DM Mono,monospace}h1{letter-spacing:-.07em;margin:16px 0 0;font-size:clamp(48px,7vw,104px);font-weight:500;line-height:.83}.masthead p{color:#48625c;max-width:55ch;margin:0;font-size:16px;line-height:1.55}section{border-bottom:1px solid #b9c2b8;padding:52px 0}.section-heading{grid-template-columns:42px 1fr;gap:16px;margin-bottom:30px;display:grid}.section-heading>span{color:#657b75;padding-top:6px}h2{letter-spacing:-.045em;margin:0;font-size:clamp(27px,3vw,42px);font-weight:500;line-height:1}.section-heading p{color:#657b75;margin:9px 0 0}label{margin-bottom:9px;font-size:13px;font-weight:600;display:block}#source{resize:vertical;color:#183d35;background:#faf9f5;border:1px solid #9caaa3;border-radius:2px;width:100%;min-height:210px;padding:20px;font:13px/1.7 DM Mono,monospace}button{cursor:pointer;background:0 0;border:1px solid #92a099;padding:9px 13px;transition:transform .18s,background .18s,color .18s}button:hover:not(:disabled){background:#e4e5de}button:active:not(:disabled){transform:translateY(1px)}button:disabled{opacity:.25;cursor:not-allowed}.primary{color:#fbfaf5;background:#153c34;border-color:#153c34;margin-top:16px;padding:13px 18px;font-weight:600}.primary:hover:not(:disabled),.copy:hover:not(:disabled){background:#285448}.primary span{margin-left:20px}.error{color:#a73b2f;margin:9px 0 0;font-size:13px;font-weight:600}.empty{text-align:center;padding:90px 20px}.empty-mark{border:1px solid #99a69f;place-items:center;width:62px;height:62px;margin:0 auto 22px;font:500 25px/1 DM Mono,monospace;display:grid}.empty h2{font-size:30px}.empty p{color:#657b75}.toolbar{justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.toolbar>div{gap:8px;display:flex}.switch{cursor:pointer;align-items:center;gap:9px;margin:0;display:flex}.switch input{opacity:0;position:absolute}.switch span{border:1px solid #7f9189;width:34px;height:19px;padding:2px}.switch span:before{content:"";background:#8a9993;width:13px;height:13px;transition:transform .2s;display:block}.switch input:checked+span:before{background:#153c34;transform:translate(15px)}.grid-shell{background:#faf9f5;border:1px solid #9caaa3;overflow-x:auto}.column-controls{background:#e8e8e1;border-bottom:1px solid #9caaa3;min-width:max-content;display:grid}.control-group{border-left:1px solid #bdc6bf;justify-content:center;align-items:center;min-height:43px;display:flex}.control-group>span{text-align:center;letter-spacing:.1em;flex:1;font:500 10px/1 DM Mono,monospace}.control-group button,.row-controls button{border:0;padding:7px}svg{fill:none;stroke:currentColor;stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round;width:15px;height:15px;display:block}.editor-table{min-width:max-content;display:grid}.row-controls{background:#eeeee8;border-bottom:1px solid #bdc6bf;flex-direction:column;justify-content:center;align-items:center;gap:1px;padding:5px;display:flex}.danger:hover:not(:disabled){color:#a73b2f;background:#f0d9d4}.cell{border-bottom:1px solid #bdc6bf;border-left:1px solid #bdc6bf;min-height:92px;position:relative}.cell textarea{resize:vertical;color:#183d35;background:0 0;border:0;width:100%;min-height:91px;padding:17px 40px 17px 16px;line-height:1.4;display:block}.header-cell{background:#edf0e9}.header-cell textarea{font-weight:600}.bold{width:27px;height:27px;padding:0;font-family:Georgia,serif;font-weight:700;position:absolute;top:10px;right:8px}.bold.active{color:#fff;background:#153c34;border-color:#153c34}.preview{background:#fff;border:1px solid #aab4ae;box-shadow:0 18px 40px #153c3414}.preview-bar{background:#eef0eb;border-bottom:1px solid #c8cfca;align-items:center;gap:7px;height:44px;padding:0 14px;display:flex}.preview-bar span{color:#667b74;margin-right:auto;font:10px/1 DM Mono,monospace}.preview-bar i{border:1px solid #8fa098;border-radius:50%;width:8px;height:8px}.preview article{color:#1d2b29;max-width:850px;margin:auto;padding:clamp(28px,7vw,76px) clamp(20px,6vw,64px);font-family:DM Sans,sans-serif;font-size:16px;line-height:1.5}.preview figure.table{width:100%;max-width:100%;margin:0 0 10px;overflow-x:auto}.preview table{border-collapse:collapse;border-spacing:0;width:100%;min-width:580px}.preview th,.preview td{text-align:left;vertical-align:top;border:1px solid #c4cbc7;padding:12px 14px}.preview th{background:#eff2ed;font-weight:700}.code-wrap{color:#eaf1ec;background:#12342d;min-height:165px;padding:24px 145px 24px 24px;position:relative}pre{white-space:pre-wrap;overflow-wrap:anywhere;margin:0;font:12px/1.7 DM Mono,monospace}.copy{color:#f5f4ef;background:#234c42;border-color:#779087;font-weight:600;position:absolute;top:18px;right:18px}@media (width<=760px){main{padding:20px 16px 70px}.masthead{grid-template-columns:1fr;gap:28px;padding-bottom:36px}h1{font-size:59px}section{padding:40px 0}.toolbar{flex-direction:column;align-items:flex-start;gap:18px}.toolbar>div{width:100%}.toolbar>div button{flex:1}.code-wrap{padding:72px 17px 20px}.copy{left:17px;right:auto}}@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important}}