.guide-entry{display:flex;justify-content:center;margin:0 0 18px;gap:12px}.guide-entry button{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:999px;min-height:58px;padding:4px 15px 4px 5px;font-size:12px;background:var(--surface);color:var(--text)}.guide-entry button:hover{border-color:#cf7772}.guide-entry button:focus-visible{outline:2px solid #e17c75;outline-offset:4px}.guide-entry small{font-size:10px;color:var(--muted);padding-left:8px;border-left:1px solid var(--line)}.guide-play{position:relative;display:block;font-size:var(--guide-play-size,48px);flex:0 0 1em;width:1em;height:1em;border-radius:50%;background:linear-gradient(145deg,#b9c3d0 0%,#e4e9f0 58%,#f4f5f8 100%);box-shadow:inset 0 1px 2px #ffffff70,0 2px 5px #080d181a;transition:box-shadow .2s ease}
.guide-play::before{content:"";position:absolute;inset:.104167em;border:.083333em solid transparent;border-radius:50%;background:linear-gradient(145deg,#dce0e9,#fafbfc 78%) padding-box,conic-gradient(from 30deg,#943b3a,#cb5752 26%,#a3423f 54%,#e67a6e 77%,#943b3a) border-box;box-shadow:0 1px 2px #62252160,inset 0 1px 2px #fff,inset 0 -1px 3px #626d8340}
.guide-play::after{content:"";position:absolute;left:.4375em;top:.354167em;width:.229167em;height:.291667em;clip-path:polygon(0 0,100% 50%,0 100%);background:linear-gradient(135deg,#eb8073,#c34e49);filter:drop-shadow(0 1px 1px #9a353030)}
.guide-entry button:hover .guide-play,.main-nav [data-how]:hover .guide-play{box-shadow:inset 0 1px 2px #ffffff80,0 2px 9px #cf625838}
@media(prefers-reduced-motion:reduce){.guide-play{transition:none}}.guide-dialog{width:min(1000px,calc(100vw - 28px));max-height:92dvh;background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:18px;padding:22px;overflow:auto}.guide-dialog::backdrop{background:#070b0dd9;backdrop-filter:blur(7px)}.guide-dialog>header{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding:6px 2px 19px}.guide-dialog header span{font-size:9px;letter-spacing:.16em;color:var(--muted)}.guide-dialog h2{font-size:clamp(22px,2.5vw,30px);line-height:1.2;margin-top:10px;letter-spacing:-.04em}.guide-dialog [data-guide-close]{font-size:27px;min-height:42px;min-width:42px;border:1px solid var(--line);border-radius:50%}.guide-dialog video{display:block;width:100%;aspect-ratio:16/9;border-radius:10px;background:#101719}.guide-transcript{padding:18px 2px;border-bottom:1px solid var(--line);font-size:13px}.guide-transcript summary{cursor:pointer;color:var(--muted)}.guide-transcript ol{display:grid;grid-template-columns:1fr 1fr;gap:20px 35px;margin:22px 0 6px;padding-left:20px}.guide-transcript li{padding-left:4px}.guide-transcript strong{display:block;margin-bottom:6px}.guide-transcript p{color:var(--muted);line-height:1.6}.guide-dialog footer{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:18px;flex-wrap:wrap}.guide-dialog footer small{color:var(--muted);font-size:11px}.guide-dialog footer .button{font-size:13px;min-height:44px}.guide-video-error{font-size:13px;color:var(--muted);padding-top:14px}
#page-home>.container>.guide-entry{margin-top:12px}#page-creator .workspace-heading{display:block}#page-creator .studio-workspace>.workspace-heading>.guide-entry{margin:0 0 10px;justify-content:center}
.guide-playback-note{margin:0 0 12px;padding:9px 12px;border:1px solid var(--line);border-radius:9px;color:var(--muted);font-size:12px;line-height:1.4}
@media(max-width:600px){.guide-entry{margin-bottom:12px}.guide-dialog{padding:14px;border-radius:12px}.guide-dialog footer{align-items:stretch;flex-direction:column}.guide-dialog footer .button{width:100%;white-space:normal}.guide-transcript ol{grid-template-columns:1fr;gap:16px}.guide-dialog>header{gap:10px}.guide-dialog h2{font-size:22px}}

.guide-play--small{--guide-play-size:26px}
.guide-dialog[data-guide=home]{width:min(1000px,calc(100vw - 28px),max(320px,calc(160dvh - 360px)))}
.guide-dialog[data-guide=home]>header{padding-bottom:14px}
.guide-dialog[data-guide=home] h2{margin:8px 0 0}
.guide-dialog[data-guide=home]>.guide-transcript{padding:12px 2px}
.guide-dialog[data-guide=home]>footer{margin-top:12px}
.main-nav [data-how]{display:inline-flex;align-items:center;gap:8px;min-height:44px;white-space:nowrap}

/* A short warm reflection, followed by a quiet pause. */
.guide-entry button,.main-nav [data-how]{position:relative;isolation:isolate;--guide-shine-edge:#ed82702e;--guide-shine-center:#fff1dc42}
.main-nav [data-how]{border-radius:999px}
.guide-entry button>*,.main-nav [data-how]>*{position:relative;z-index:1}
.guide-entry button::before,.main-nav [data-how]::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;background:linear-gradient(110deg,transparent 39%,var(--guide-shine-edge) 46%,var(--guide-shine-center) 50%,var(--guide-shine-edge) 54%,transparent 61%);background-size:300% 100%;background-repeat:no-repeat;background-position:100% 0;opacity:0;animation:guide-button-shimmer 8s ease-in-out infinite;animation-delay:1s}
.guide-entry button::before{animation-delay:3s}
html[data-theme=light] .guide-entry button,html[data-theme=light] .main-nav [data-how],body:has(#page-home:not([hidden])) .main-nav [data-how]{--guide-shine-edge:#d466542e;--guide-shine-center:#fffafac2}
@keyframes guide-button-shimmer{0%{background-position:100% 0;opacity:0}6%{opacity:1}27%{background-position:0% 0;opacity:1}31%,100%{background-position:0% 0;opacity:0}}
@media(prefers-reduced-motion:reduce){.guide-entry button::before,.main-nav [data-how]::before{animation:none;display:none}}