/* A hands-on sky, deliberately kept inside the visitor's page. */
.sky-page .sky-heading h1 { font-size: clamp(2.8rem,4.8vw,4.7rem); }
.sky-page .sky-heading > p:last-child { max-width: 590px; }
.sky-lab { margin-top: 2.8rem; scroll-margin-top: 1.5rem; border: 1px solid #b99ad833; border-radius: 26px; background: linear-gradient(120deg,#19182c90,#101123b0); overflow: hidden; box-shadow: 0 35px 100px #090a2030; }
.sky-lab-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.2rem 1.4rem 1.2rem 1.8rem; border-bottom: 1px solid #c8b0df16; }
.sky-lab-count { display: flex; align-items: center; gap: .7rem; color: #ecdbbc; }
.sky-lab-count strong { font-weight: 500; font-size: .85rem; }
.sky-lab-live { width: 4px; height: 4px; border-radius: 50%; background: #cbb5a0; opacity: .5; margin-left: .3rem; }
.sky-lab-actions { display: flex; align-items: center; gap: 1.2rem; }
.sky-reset { background: transparent; border: 0; color: #c4b0d7; font-size: .73rem; padding: .7rem .2rem; min-height: 44px; cursor: pointer; }
.sky-reset:disabled { opacity: .35; cursor: default; }
.sky-add { border: 0; min-height: 44px; padding: .7rem 1.1rem; font-size: .8rem; cursor: pointer; gap: .5rem; }
.sky-add:disabled { opacity: .6; cursor: default; transform: none; }
.sky-lab-layout { display: grid; grid-template-columns: minmax(0,1fr) 300px; }
.sky-lab-map { height: 540px; position: relative; isolation: isolate; }
.sky-lab-nebula { position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 42% 45%,#82619f20,transparent 60%),radial-gradient(ellipse at 76% 72%,#ad825615,transparent 45%); }
.sky-lab-lines, .sky-lab-stars { position: absolute; inset: 0; width: 100%; height: 100%; }
.sky-lab-lines { pointer-events: none; overflow: visible; }
.sky-lab-dust { fill: #cec5eb; opacity: .3; }
[data-map-lines] path { fill: none; stroke: #b5a4cf; stroke-width: .85; opacity: .21; stroke-dasharray: 1; stroke-dashoffset: 0; vector-effect: non-scaling-stroke; transition: opacity .45s,stroke .45s; }
[data-map-lines] path.is-related { stroke: #ecd3a7; opacity: .55; }
[data-map-lines] path.is-new { stroke: #efd29d; animation: demo-link-draw 1.65s cubic-bezier(.25,.1,.25,1) var(--line-delay,700ms) both; }
.demo-star { position: absolute; left: var(--star-x); top: var(--star-y); transform: translate(-50%,-50%); display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: transparent; color: #d7c8d9; }
.demo-star::before { content: ''; position: absolute; inset: 2px; border-radius: 50%; border: 1px solid #e1c7995c; opacity: 0; transition: opacity .35s; }
.demo-star::after { content: ''; position: absolute; inset: -10px; border-radius: 50%; border: 1px solid #e1c79924; opacity: 0; transition: opacity .35s; }
.demo-star-glyph { width: 11px; height: 11px; display: block; filter: drop-shadow(0 0 7px #d8b98ba0); transition: transform .35s; }
.demo-star-glyph svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.demo-star:nth-child(3n) .demo-star-glyph { width: 8px; height: 8px; }
.demo-star:nth-child(4n) { color: #bdaecf; }
.demo-star[aria-pressed="true"] { color: #f3d39a; }
.demo-star[aria-pressed="true"] .demo-star-glyph { transform: scale(1.65); }
.demo-star:hover::before,.demo-star[aria-pressed="true"]::before,.demo-star[aria-pressed="true"]::after { opacity: 1; }
.demo-star-name { position: absolute; top: calc(100% + 5px); left: 50%; transform: translateX(-50%); width: 140px; font-size: .62rem; color: #c5b5cd; line-height: 1.4; opacity: 0; pointer-events: none; transition: opacity .3s; text-wrap: balance; }
.demo-star:hover .demo-star-name,.demo-star:focus-visible .demo-star-name,.demo-star[aria-pressed="true"] .demo-star-name { opacity: 1; }
.demo-star.is-added { color: #f6d49a; }
.demo-star.is-arriving { animation: demo-star-arrive 2.8s cubic-bezier(.22,1,.36,1) both; z-index: 2; }
.demo-star.is-arriving::after { animation: demo-star-wave 2.8s ease-out both; }
.sky-lab-theme { position: absolute; top: 47%; left: 23%; transform: rotate(-24deg); color: #a796ae; font-size: .53rem; letter-spacing: .25em; text-transform: uppercase; pointer-events: none; opacity: .6; }
.demo-dream-detail { border-left: 1px solid #c8b0df18; padding: 2.4rem 1.7rem 1.5rem; background: #12122535; min-width: 0; }
.demo-dream-date { text-transform: uppercase; color: #cbb18a; letter-spacing: .15em; font-size: .58rem; margin: 0 0 1rem; }
.demo-dream-detail h2 { font-size: 1.9rem; line-height: 1.13; margin: 0 0 1.2rem; overflow-wrap: anywhere; }
.demo-dream-story { font-size: .83rem; line-height: 1.8; color: #b9aec9; white-space: pre-line; overflow-wrap: anywhere; max-height: 215px; overflow-y: auto; padding-right: .3rem; }
.demo-dream-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.3rem; }
.demo-dream-tags span { font-size: .6rem; color: #c5afd9; padding: .4rem .65rem; border: 1px solid #c4a8dd24; border-radius: 25px; }
.demo-dream-links { border-top: 1px solid #ccb9df1f; margin-top: 1.7rem; padding-top: 1.1rem; }
.demo-dream-links > p { font-size: .6rem; color: #9e8eb2; margin: 0 0 .6rem; }
.demo-dream-links ul { list-style: none; padding: 0; margin: 0; }
.demo-dream-links button { background: none; border: 0; color: #cdb9db; font-size: .7rem; padding: .45rem 0; min-height: 36px; text-align: left; line-height: 1.45; cursor: pointer; }
.demo-dream-links button:hover { color: #f1d6a6; }
.sky-lab-footer { padding: 1rem 1.8rem 1.1rem; border-top: 1px solid #c8b0df16; display: flex; justify-content: space-between; gap: 1.5rem; align-items: center; }
.sky-lab-footer p { color: #9e8fb1; font-size: .65rem; line-height: 1.6; margin: 0; }
.sky-lab-footer .sky-lab-status { color: #d7c4df; max-width: 60%; }
.sky-lab-note { text-align: center; color: #8e829f; font-size: .68rem; line-height: 1.6; margin: 1.2rem 0 .5rem; }
.dream-composer { color-scheme: dark; border: 1px solid #a98ac346; border-radius: 24px; background: radial-gradient(ellipse at 80% 10%,#30243f,#17172c 65%); color: #efe8f1; padding: 0; width: min(570px,calc(100% - 2rem)); max-height: calc(100dvh - 2rem); box-shadow: 0 40px 120px #050511a0; }
.dream-composer::backdrop { background: #07081bc7; backdrop-filter: blur(9px); }
.dream-composer-content { position: relative; padding: 2.3rem; }
.composer-close { position: absolute; top: .75rem; right: .75rem; width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; color: #bba5cd; font-size: 1.7rem; cursor: pointer; }
.dream-composer .eyebrow { color: #d9bd94; font-size: .61rem; margin-top: .3rem; }
.dream-composer h2 { font-size: 2.7rem; line-height: 1.08; margin: .9rem 0 1rem; }
.composer-intro { color: #b6a9c4; line-height: 1.65; font-size: .8rem; margin: 0 0 1.7rem; }
.dream-composer label { display: block; color: #c6b3d4; font-size: .7rem; margin: 1.2rem 0 .6rem; }
.dream-composer input,.dream-composer textarea { display: block; box-sizing: border-box; width: 100%; border: 1px solid #aa8ec43d; border-radius: 12px; background: #0e10233d; color: #ede3ef; font: .95rem/1.65 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; padding: .8rem 1rem; }
.dream-composer textarea { resize: vertical; min-height: 150px; max-height: 300px; }
.dream-composer input:focus,.dream-composer textarea:focus { outline: 2px solid #c9b0e1; outline-offset: 2px; }
.composer-local { font-size: .65rem; line-height: 1.7; color: #9f90b2; display: flex; gap: .5rem; margin: 1rem 0 1.5rem; }
.composer-local span { color: #c5a6d8; }
.composer-actions { display: flex; justify-content: flex-end; align-items: center; gap: 1rem; }
.composer-actions .button { border: 0; cursor: pointer; font-size: .8rem; min-height: 46px; }
.composer-cancel { color: #bba6cb; padding: .6rem; border: 0; background: transparent; font-size: .75rem; min-height: 44px; cursor: pointer; }
@keyframes demo-star-arrive { 0% { opacity: 0; transform: translate(-50%,-70%) scale(.1); filter: blur(8px); } 20% { opacity: 1; filter: blur(0); } 44% { transform: translate(-50%,-50%) scale(1.3); } 100% { opacity: 1; transform: translate(-50%,-50%) scale(1); filter: blur(0); } }
@keyframes demo-star-wave { 0%,10% { opacity: 0; transform: scale(.25); } 30% { opacity: .85; } 100% { opacity: 0; transform: scale(3); } }
@keyframes demo-link-draw { 0% { stroke-dashoffset: 1; opacity: 0; } 12% { opacity: .6; } 100% { stroke-dashoffset: 0; opacity: .75; } }
@media (max-width: 900px) {
 .sky-lab-layout { grid-template-columns: minmax(0,1fr) 255px; }
 .demo-dream-detail { padding: 2rem 1.3rem; }
 .sky-lab-map { height: 500px; }
}
@media (max-width: 700px) {
 .sky-lab { border-radius: 20px; margin-top: 2rem; }
 .sky-lab-toolbar { padding: .8rem 1rem; gap: .6rem; flex-wrap: wrap; }
 .sky-lab-count { gap: .5rem; }
 .sky-lab-count strong { font-size: .75rem; }
 .sky-lab-live { display: none; }
 .sky-lab-actions { gap: .7rem; }
 .sky-reset { font-size: .64rem; }
 .sky-add { font-size: .69rem; padding: .65rem .8rem; }
 .sky-lab-layout { grid-template-columns: 1fr; }
 .sky-lab-map { height: 420px; }
 .demo-star-name { width: 110px; font-size: .57rem; }
 .demo-dream-detail { padding: 1.6rem; border-left: 0; border-top: 1px solid #c8b0df18; }
 .demo-dream-detail h2 { font-size: 2rem; }
 .demo-dream-story { max-height: 180px; }
 .demo-dream-links { margin-top: 1.2rem; }
 .demo-dream-links ul { display: flex; flex-wrap: wrap; gap: 0 1rem; }
 .demo-dream-links button { min-height: 44px; }
 .sky-lab-footer { flex-direction: column; align-items: flex-start; gap: .5rem; padding: 1rem 1.5rem; }
 .sky-lab-footer .sky-lab-status { max-width: 100%; }
 .sky-lab-note { font-size: .6rem; max-width: 280px; margin-inline: auto; }
 .dream-composer-content { padding: 1.6rem; }
 .dream-composer h2 { font-size: 2.3rem; }
 .dream-composer input,.dream-composer textarea { font-size: 16px; }
 .composer-actions { gap: .6rem; }
 .composer-actions .button { font-size: .7rem; padding-inline: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
 .demo-star.is-arriving { animation: none !important; }
 .demo-star.is-arriving::after { animation: none !important; opacity: 0; }
 [data-map-lines] path.is-new { animation: none !important; stroke-dashoffset: 0; opacity: .6; }
}

.demo-star.is-edge-left .demo-star-name { left: 0; transform: none; text-align: left; }
.demo-star.is-edge-right .demo-star-name { left: auto; right: 0; transform: none; text-align: right; }