/* 小 Sol 自己搭的屋顶观星台 · 2026-10-15 */
.roof-main{padding:28px 0 90px}
.roof-intro{max-width:1100px;padding:24px 0 43px}
.roof-crumb{display:inline-block;color:var(--muted);font-size:13px;margin-bottom:32px}.roof-crumb span{padding:0 9px;color:var(--rose)}.roof-crumb:hover{color:var(--heading)}
.roof-kicker{display:block;font-family:var(--sans);font-size:11px;letter-spacing:.23em;color:var(--accent);margin-bottom:10px}
.roof-intro h1{font-size:clamp(34px,4.3vw,56px);line-height:1.35;letter-spacing:.05em}
.roof-intro>p{font-family:var(--serif);font-size:17px;line-height:2.05;margin-top:17px;color:var(--ink)}
.roof-stage{max-width:1140px;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,.85fr);align-items:start;gap:30px}
.roof-sky-frame{padding:12px;border-radius:26px;background:linear-gradient(145deg,#d8adb3,#ead1c4 45%,#997b8d);box-shadow:0 15px 38px var(--shadow),inset 0 1px #fff8}
.roof-sky{min-height:550px;position:relative;isolation:isolate;overflow:hidden;border-radius:18px;background:radial-gradient(ellipse 55% 45% at 72% 27%,#434369aa,transparent 100%),radial-gradient(ellipse 70% 55% at 28% 69%,#263f5799,transparent 95%),linear-gradient(180deg,#101729 0%,#1d2540 55%,#29304b 100%);box-shadow:inset 0 0 0 1px #fff2}
.roof-sky:before,.roof-sky:after{content:"";position:absolute;inset:0;pointer-events:none}
.roof-sky:before{background-image:radial-gradient(circle,#ffffffbd 0 1px,transparent 1.6px),radial-gradient(circle,#d8cefa90 0 1px,transparent 1.7px);background-size:63px 71px,89px 97px;background-position:14px 19px,38px 9px;opacity:.42;animation:roof-breathe 8s ease-in-out infinite alternate}
.roof-sky:after{background:radial-gradient(ellipse at 50% 75%,#eeb6aa13,transparent 55%);mix-blend-mode:screen}
.roof-sky-top{position:absolute;top:19px;left:23px;right:23px;display:flex;align-items:center;justify-content:space-between;z-index:5;color:#e8e1edcc;pointer-events:none;font-size:11px;letter-spacing:.15em}
.roof-sky-top span:last-child{font-family:Georgia,serif;font-size:15px;letter-spacing:.12em;color:#f1d5ac}
.roof-wires{position:absolute;inset:0;width:100%;height:100%;z-index:2;overflow:visible;pointer-events:none}
.roof-wires polyline{fill:none;stroke:#e9c59b;stroke-width:.34;stroke-linejoin:round;stroke-linecap:round;filter:drop-shadow(0 0 1.1px #ffe9c2)}
.roof-star{position:absolute;z-index:3;left:var(--star-x);top:var(--star-y);width:56px;height:56px;transform:translate(-50%,-50%);border:0;border-radius:50%;background:transparent;color:#f1ddea;display:grid;place-items:center;cursor:pointer;transition:color .28s ease,filter .28s ease,transform .28s ease}
.roof-star:before{content:"";position:absolute;inset:13px;border-radius:50%;background:radial-gradient(circle,#c0a9eb46,transparent 72%);opacity:.55;animation:roof-breathe 4.2s ease-in-out infinite alternate;animation-delay:var(--twinkle)}
.roof-star span{position:relative;font-family:Georgia,serif;font-size:21px;text-shadow:0 0 11px #e3d3f77d}
.roof-star:hover{color:#ffe1a2;transform:translate(-50%,-50%) scale(1.21)}
.roof-star.is-picked{color:#ffe0a5;filter:drop-shadow(0 0 12px #ffd4a7)}
.roof-star.is-picked:after{content:"";position:absolute;inset:10px;border:1px solid #f0cda083;border-radius:50%;box-shadow:0 0 17px #f6d1a33a}
.roof-star:focus-visible{outline:2px solid #ffe1ac;outline-offset:1px;background:#fff1}
.roof-sky-haze{position:absolute;bottom:13%;left:3%;width:94%;height:18%;border-radius:50%;background:#f2bfd216;filter:blur(40px);z-index:1;pointer-events:none}
.roof-horizon{position:absolute;inset:auto 0 0;height:20%;background:linear-gradient(180deg,#151d2c,#0f1522);clip-path:polygon(0 27%,18% 27%,18% 12%,24% 12%,24% 30%,38% 30%,38% 13%,46% 13%,46% 29%,65% 29%,65% 7%,74% 7%,74% 28%,100% 28%,100% 100%,0 100%);z-index:4;pointer-events:none}
.roof-dome{position:absolute;width:110px;height:88px;bottom:12%;left:12%;border-radius:60% 60% 0 0;background:linear-gradient(125deg,#546075,#2c384c);box-shadow:inset -10px 0 16px #101a30aa;border:1px solid #a4a4c047}
.roof-dome:before{content:"";position:absolute;top:28px;left:23px;width:55px;height:23px;border-radius:8px 8px 2px 2px;background:linear-gradient(#ebc99b,#d59c79);box-shadow:0 0 24px #f6b98066}
.roof-glow-window{position:absolute;right:20%;bottom:14%;width:32px;height:40px;border:3px solid #697385;border-radius:14px 14px 2px 2px;background:linear-gradient(#e5bc94,#ba887a);box-shadow:0 0 26px #dd998266}
.roof-glow-window:after{content:"";position:absolute;width:2px;height:34px;background:#7a6873;left:12px;top:0}
.roof-chimney{position:absolute;left:63%;bottom:57%;height:45px;width:18px;border-radius:2px;background:#2a3344}
.roof-sky-bottom{position:absolute;z-index:5;left:21px;bottom:12px;color:#a4a5ba95;font-size:9px;letter-spacing:.19em;pointer-events:none}
.roof-sky-instruction{text-align:center;color:var(--muted);font-size:12px;line-height:1.85;margin:17px 7px 0}
.roof-paper{min-height:570px;position:relative;background:linear-gradient(155deg,#fffdf7 4%,#faf3e9 100%);color:#664c4d;padding:31px clamp(22px,3vw,40px);border:1px solid #dfc5b7;border-radius:4px 18px 18px 4px;box-shadow:8px 14px 36px #58334b1b,inset 5px 0 #c7a5a370;overflow:hidden}
.roof-paper:before{content:"";position:absolute;inset:10px;border:1px solid #e8d3c488;pointer-events:none;border-radius:2px 12px 12px 2px}
.roof-paper-top{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.16em;color:#98767e}
.roof-paper-rule{text-align:center;margin:19px 0 12px;color:#c898a0;letter-spacing:.2em}
.roof-paper h2{font-family:var(--serif);font-weight:500;font-size:clamp(23px,2.6vw,29px);color:#813f55;line-height:1.5}
.roof-paper-intro{font-family:var(--serif);font-size:14px;line-height:2;margin:11px 0 23px;color:#836b68}
.roof-slots{list-style:none;margin:0;padding:0;border-top:1px solid #e9d5c9}
.roof-slot{min-height:63px;display:flex;align-items:center;gap:15px;border-bottom:1px solid #e9d5c9;padding:10px 3px}
.roof-slot-number{font-family:Georgia,serif;font-size:20px;color:#bd92a0;min-width:29px}
.roof-slot-words{display:flex;flex-direction:column;gap:2px}
.roof-slot-words strong{font-size:13px;font-weight:600;letter-spacing:.04em;color:#654b54}
.roof-slot-words small{font-size:11px;color:#a08683}
.roof-slot.is-filled{background:#f4e5dd48}
.roof-result{margin:20px 0 10px;padding:18px 17px;position:relative;min-height:129px;border:1px solid #d8b9ae;background:linear-gradient(140deg,#fff8ef,#f5e5da);animation:roof-unfold .5s ease both}
.roof-result[hidden]{display:none}
.roof-result-label{display:block;font-family:Georgia,serif;letter-spacing:.14em;font-size:10px;color:#b98594}
.roof-result h3{font-family:var(--serif);color:#803d54;margin:10px 0 8px;font-size:20px}
.roof-result p{font-family:var(--serif);font-size:13px;line-height:1.85;padding-right:0;color:#715358}
.roof-stamp{position:absolute;right:12px;top:9px;width:53px;height:53px;border:2px double #b67b86;border-radius:50%;color:#b67b86;font-family:Georgia,serif;font-size:10px;line-height:1.15;display:grid;place-content:center;text-align:center;transform:rotate(13deg);opacity:0;transition:opacity .4s,transform .4s}
.roof-result.is-sealed .roof-stamp{opacity:.85;transform:rotate(-9deg)}
.roof-controls{display:flex;gap:9px;flex-wrap:wrap;margin-top:21px}
.roof-action{padding:11px 14px;border-radius:10px;font-size:13px;min-height:44px;transition:transform .18s ease,background .18s ease}
.roof-action:focus-visible,.roof-copy:focus-visible{outline:2px solid #ad6b88;outline-offset:3px}
.roof-action:disabled,.roof-copy:disabled{opacity:.4;cursor:not-allowed}
.roof-action-primary{background:#a65372;color:white;box-shadow:0 4px 12px #8f4c6d26}
.roof-action-primary:not(:disabled):hover{background:#8e4360;transform:translateY(-2px)}
.roof-action-quiet{background:#efe2db;color:#754d5e}.roof-action-quiet:not(:disabled):hover{background:#e8d4cd}
.roof-copy{display:inline-block;margin-top:13px;padding:6px 0;text-decoration:underline;text-decoration-color:#cfb2b5;text-underline-offset:5px;color:#916876;font-size:12px}
.roof-status{font-size:12px;line-height:1.6;color:#946379;min-height:19px;margin-top:12px}
.roof-privacy{font-size:10px;color:#a78d8e;margin-top:10px}
.roof-afterword{max-width:1050px;display:flex;align-items:center;gap:20px;margin-top:70px;border-top:1px solid var(--line);padding-top:28px}
.roof-afterword-mark{color:var(--rose);font-size:36px}
.roof-afterword p{font-family:var(--serif);font-size:16px;line-height:2.1;flex:1}.roof-afterword strong{color:var(--heading);font-weight:500}
.roof-afterword a{font-size:13px;color:var(--accent-strong);white-space:nowrap;border-bottom:1px solid var(--rose);padding:8px 0}
.roof-noscript{padding:24px;text-align:center}
@keyframes roof-breathe{from{opacity:.3}to{opacity:.85}}
@keyframes roof-unfold{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:930px){.roof-stage{grid-template-columns:1fr;max-width:750px}.roof-paper{min-height:0}.roof-intro{max-width:750px}.roof-sky{min-height:490px}.roof-afterword{max-width:750px}}
@media(max-width:600px){.roof-main{padding:10px 0 75px}.roof-intro{padding:16px 0 27px}.roof-crumb{margin-bottom:20px}.roof-intro>p{font-size:15px}.roof-stage{gap:25px}.roof-sky-frame{padding:7px;border-radius:18px}.roof-sky{min-height:380px;border-radius:13px}.roof-star{width:50px;height:50px}.roof-sky-top{top:15px;left:14px;right:14px;font-size:9px}.roof-sky-bottom{font-size:8px;left:13px}.roof-horizon{height:20%}.roof-dome{width:82px;height:68px}.roof-glow-window{right:14%}.roof-paper{padding:28px 23px}.roof-afterword{align-items:flex-start;gap:13px;margin-top:45px;flex-wrap:wrap}.roof-afterword p{font-size:14px}.roof-afterword a{margin-left:32px}.roof-sky-instruction{font-size:11px}}
@media(max-width:390px){.roof-sky{min-height:333px}.roof-star{width:44px;height:44px}.roof-star span{font-size:19px}.roof-paper{padding:24px 19px}.roof-afterword p{font-size:13px}}
@media(prefers-reduced-motion:reduce){.roof-sky:before,.roof-star:before{animation:none}.roof-result{animation:none}.roof-star,.roof-stamp,.roof-action{transition:none}}