/* v1.3: accurate rounded strokes and independent part animation. */
#shape-result svg,#shape-result svg *{stroke-linecap:round;stroke-linejoin:round}
#shape-result svg [stroke-width]{stroke-width:.8}
#shape-result.split-shape.animating svg{animation:none}
#shape-result.animating .shape-part{animation:draw-shape 1.1s ease both}
.usage-note{font-size:11px;color:#a8afbd;margin-top:14px;line-height:1.6}
/* v1.4: bring HeyCode into the overlapping hero group. */
.hero-code{left:calc(22% + 186px);right:auto}
@media(min-width:1500px){.hero-code{left:calc(25% + 186px)}}
@media(max-width:560px){.hero-code{left:306px;right:auto}}
#code-result .code-char{visibility:hidden;color:inherit}
#code-result .code-char.revealed{visibility:visible}
/* Ajustes do HeyCode aplicados na prévia: espaço entre parágrafos, numeração de linhas e fundo desligado. */
#code-result>div{margin-bottom:var(--code-paragraph,0)}
#code-result>div:last-child{margin-bottom:0}
#code-result.line-numbers{counter-reset:code-line}
#code-result.line-numbers>div{padding-left:3.2em;text-indent:-3.2em}
#code-result.line-numbers>div::before{counter-increment:code-line;content:counter(code-line);display:inline-block;width:2.2em;margin-right:1em;text-align:right;text-indent:0;opacity:.4;letter-spacing:0}
.code-result-window.code-bg-off{background:transparent;border-style:dashed}
/* HeyShapes: destaque da biblioteca online de ícones. */
.online-library{display:flex;gap:14px;align-items:flex-start;margin-top:18px;padding:16px;border:1px solid #2a3350;border-radius:10px;background:linear-gradient(180deg,#3b6bff12,#3b6bff05)}
.online-globe{flex:none;width:38px;height:38px;border-radius:9px;display:grid;place-items:center;color:#3b6bff;background:#3b6bff1f;border:1px solid #3b6bff40}
.online-globe svg{width:22px;height:22px}
.online-text strong{display:block;font-size:13px;color:#f5f5f0;margin-bottom:4px}
.online-text p{margin:0;font-size:11px;line-height:1.6;color:#9da0a8}
.online-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px;font-size:10px;color:#80848c}
.online-chips button{font:inherit;font-size:10.5px;color:#cfd6ff;background:#ffffff08;border:1px solid #ffffff1a;border-radius:999px;padding:4px 10px;cursor:pointer;transition:border-color .15s,background .15s}
.online-chips button:hover,.online-chips button:focus-visible{border-color:#3b6bff;background:#3b6bff1f;color:#fff}
@media(max-width:560px){.online-library{padding:12px;gap:10px}.online-globe{width:32px;height:32px}.online-globe svg{width:18px;height:18px}}

/* YouTube video below the hero */
.video-section{padding-bottom:60px}
.video-section .section-heading p{color:#9da0a8;margin:0}
.video-frame{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#0b0d10;border:1px solid #2a2d33;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* Video cover: light thumbnail with a custom play button; the YouTube player only loads on click */
.video-frame iframe,.video-play{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-play{padding:0;cursor:pointer;background:#0b0d10;display:block}
.video-play img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease,filter .3s}
.video-play:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,#00000010,#00000059)}
.video-btn{position:absolute;left:50%;top:50%;z-index:1;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;background:#3b6bff;display:grid;place-items:center;box-shadow:0 0 0 12px #3b6bff33,0 16px 40px #00000066;transition:transform .25s ease}
.video-btn svg{width:34px;height:34px;fill:#fff;margin-left:5px}
.video-play:hover img{transform:scale(1.02);filter:brightness(1.05)}
.video-play:hover .video-btn,.video-play:focus-visible .video-btn{transform:scale(1.08)}
.video-play:focus-visible{outline:3px solid #3b6bff;outline-offset:-3px}
@media(max-width:560px){.video-frame{border-radius:12px}.video-btn{width:64px;height:64px;margin:-32px 0 0 -32px}.video-btn svg{width:26px;height:26px}}