/* Live code editor tools */
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.live-editor-page{width:min(94%,1440px);margin:0 auto;padding:125px 0 60px;color:var(--site-ink)}
.live-editor-page h1{margin:0 0 12px;font-size:34px}
.live-editor-intro{max-width:850px;color:var(--site-muted);line-height:1.7}
.live-editor-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:22px 0 16px}
.live-editor-toolbar button,.live-editor-toolbar select{min-height:42px;padding:9px 16px;border:1px solid var(--site-line);border-radius:8px;font:inherit;font-size:15px;font-weight:600;line-height:1.3}
.live-editor-toolbar button{border-color:var(--site-orange);background:var(--site-orange);color:#fff;cursor:pointer}
.live-editor-toolbar button:hover{background:var(--site-orange-dark)}
.live-editor-toolbar button:focus-visible,.live-editor-toolbar select:focus-visible,.live-editor-panel textarea:focus-visible{outline:3px solid rgba(244,128,36,.35);outline-offset:2px}
.live-editor-status{color:var(--site-muted);font-size:14px}
.live-editor-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.live-editor-grid.is-vertical{grid-template-columns:1fr}
.live-editor-panel{min-width:0;overflow:hidden;border:1px solid var(--site-line);border-radius:10px;background:#fff}
.live-editor-panel h2{margin:0;padding:10px 14px;border-bottom:1px solid var(--site-line);background:#f3f6f9;font-size:14px;letter-spacing:.03em}
.live-editor-panel textarea{display:block;width:100%;min-height:280px;padding:14px;border:0;resize:vertical;background:#111c2a;color:#eef4f9;font:14px/1.6 Consolas,monospace;tab-size:2}
.live-editor-panel--preview{grid-column:1/-1}
.live-editor-panel iframe{display:block;width:100%;min-height:360px;border:0;background:#fff}
.live-editor-hint{margin:14px 0 0;color:var(--site-muted);font-size:13px;line-height:1.6}
@media(max-width:760px){.live-editor-page{width:92%;padding:108px 0 42px}.live-editor-page h1{font-size:29px}.live-editor-grid{grid-template-columns:1fr}.live-editor-panel--preview{grid-column:auto}.live-editor-panel textarea{min-height:220px}.live-editor-panel iframe{min-height:320px}}

.tool-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:28px}
.tool-card{display:flex;min-height:230px;flex-direction:column;padding:22px;border:1px solid var(--site-line);border-radius:12px;background:#fff;color:var(--site-ink);box-shadow:0 5px 18px rgba(20,38,60,.05)}
.tool-card:hover{border-color:#f6b37e;transform:translateY(-3px);color:var(--site-ink)}
.tool-card h2{margin:0 0 9px;font-size:20px}
.tool-card p{color:var(--site-muted);line-height:1.65}
.tool-card strong{margin-top:auto;color:var(--site-orange-dark)}
.live-editor-grid--three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:1100px){.live-editor-grid--three{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.tool-card-grid,.live-editor-grid--three{grid-template-columns:1fr}}