.creation-page { align-items: flex-start; }
.creation-sheet { overflow: hidden; padding: 3rem; }
.creation-hero { position: relative; min-height: 11.5rem; padding: .8rem 0 2rem; border-bottom: 1px solid var(--line); }
.quiet-return { display: inline-block; color: rgba(36,29,22,.48); font-family: Cinzel,serif; font-size: .62rem; font-weight: 700; letter-spacing: .26em; text-decoration: none; }
.creation-title-row { display:flex;gap:1.4rem;align-items:center;width:max-content; }
.creation-hero h1 { margin-top: 1.35rem; color: var(--text); font-family: var(--font-inscription); font-size: clamp(3.25rem,8vw,5rem); font-weight: 700; letter-spacing: .08em; line-height: .92; text-shadow: .025em .012em rgba(36,29,22,.18); }
.title-pencil { width:8.8rem;height:auto;margin-top:1.55rem;overflow:visible;filter:drop-shadow(.08rem .1rem .08rem rgba(55,39,25,.13)); }
.title-pencil path { stroke:#4b392a;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.35; }
.pencil-body { fill:rgba(184,92,10,.63); }.pencil-cap{fill:rgba(118,95,75,.38)}.pencil-wood{fill:#d8b98c}.pencil-lead{fill:#3f3228}.pencil-edge{fill:none;opacity:.72}
.creation-manifesto { margin: .55rem 0 0 .2rem; color: var(--bitcoin-orange); font-family: Cinzel,serif; font-size: .72rem; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; }
.creation-subtitle { position: absolute; right: .8rem; bottom: 1.15rem; display: flex; flex-direction: column; gap: .14rem; align-items: center; color: var(--bitcoin-orange); font-family: var(--font-inscription); font-size: .94rem; font-weight: 500; line-height: 1; white-space: nowrap; }
.creation-subtitle span { display: block; width: 1.15em; height: 1.08em; line-height: 1.08em; text-align: center; }
.creation-seal { position: absolute; right: 3.35rem; top: 1.35rem; display: grid; width: 2.9rem; height: 2.9rem; padding: .14rem; place-content: center; border: 0; color: rgba(154,76,11,.7); background: transparent; cursor: pointer; transform: rotate(3deg); transition: background .3s ease; }
.creation-seal img { display:block;width:100%;height:100%;object-fit:contain;filter:sepia(1) saturate(2.5) hue-rotate(338deg) brightness(.7);mix-blend-mode:multiply;opacity:.7;transition:filter .3s ease,opacity .3s ease; }
.creation-seal:hover,.creation-seal:focus-visible { background: rgba(154,76,11,.035); outline: 1px dashed rgba(154,76,11,.4); outline-offset: .18rem; }
.creation-seal:hover img,.creation-seal:focus-visible img { filter:sepia(1) saturate(3.2) hue-rotate(338deg) brightness(.62);opacity:.92; }
.creation-seal.is-active { animation: seal-press .55s ease; }
.output-ink-drop { position: fixed; z-index: 20; width: .52rem; height: .52rem; border-radius: 52% 48% 58% 42%; background: radial-gradient(circle at 34% 28%,#c36d21,#71360e 72%); box-shadow: 0 0 .22rem rgba(113,54,14,.38); pointer-events: none; }
.output-node.is-output-hit { animation: output-ink-hit .72s ease; }
.output-node { position: relative; }
.output-node.is-output-awake::after { position:absolute;z-index:4;top:.7rem;left:.55rem;width:.38rem;height:.38rem;border-radius:56% 44% 48% 52%;background:rgba(154,76,11,.62);box-shadow:.12rem .08rem .18rem rgba(113,54,14,.16);content:"";pointer-events:none;transform:rotate(14deg); }
.creation-section { padding: 3rem 0 .5rem; }
.section-heading { display: grid; grid-template-columns: 2.6rem 1fr; gap: 1rem; margin-bottom: 1.5rem; }
.section-number { color: rgba(154,76,11,.55); font-family: var(--font-inscription); font-size: 1.5rem; line-height: 1.5; }
.section-heading h2 { margin: 0; color: var(--text); font-family: var(--font-inscription); font-size: 1.38rem; font-weight: 700; letter-spacing: .08em; }
.section-heading h2 svg { width: 1.1em; height: 1.1em; margin-right: .55rem; vertical-align: -.18em; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }
.section-heading p { margin-top: .35rem; color: var(--muted); font-size: .82rem; letter-spacing: .06em; }
.creation-sites { display: grid; gap: 1.35rem; }
.creation-site-card { display: grid; grid-template-columns: minmax(0,1.65fr) minmax(13rem,1fr); align-items: stretch; border-top: 1px solid var(--line); }
.creation-site-preview { position: relative; display: block; min-height: 15rem; overflow: hidden; border-right: 1px solid var(--line); background: #eee6d5; color: var(--text); text-decoration: none; }
.creation-site-preview img { display: block; width: 100%; height: 100%; min-height: 15rem; object-fit: cover; object-position: center; filter: saturate(.82) contrast(.96); transition: transform .55s ease, filter .55s ease; }
.creation-site-preview:hover img,.creation-site-preview:focus-visible img { filter: saturate(1) contrast(1); transform: scale(1.025); }
.preview-open { position: absolute; right: .75rem; bottom: .75rem; display: inline-flex; gap: .3rem; align-items: center; padding: .3rem .5rem; color: #f8f2e5; background: rgba(31,27,22,.72); font-size: .62rem; letter-spacing: .1em; opacity: 0; transform: translateY(.3rem); transition: opacity .3s ease,transform .3s ease; }
.creation-site-preview:hover .preview-open,.creation-site-preview:focus-visible .preview-open { opacity: 1; transform: none; }
.preview-open svg,.x-external { width: .9rem; height: .9rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.creation-site-copy { display: grid; grid-template-columns: 2.5rem 1fr; gap: .8rem; align-content: center; padding: 1.5rem; }
.creation-site-copy>span { color: rgba(154,76,11,.46); font-family: Cinzel,serif; font-size: .65rem; letter-spacing: .12em; }
.creation-site-copy h3 { margin: 0 0 .45rem; color: var(--text); font-family: Cinzel,var(--font-inscription); font-size: 1.25rem; font-weight: 600; letter-spacing: .04em; }
.creation-site-copy p { margin: 0; color: var(--muted); font-size: .82rem; letter-spacing: .06em; line-height: 1.65; }
.preview-xiaojing { display: grid; grid-template-columns: 31% 1fr; padding: 1.1rem; background: #f3f3f1; font-family: -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif; }
.mock-sidebar { display: flex; flex-direction: column; gap: .55rem; padding: .8rem; border-right: 1px solid #d9d9d5; color: #333; }
.mock-sidebar strong { font-size: 1.1rem; }.mock-sidebar em { margin-bottom: .7rem; color: #999; font-size: .55rem; font-style: normal; }.mock-sidebar i { color: #777; font-size: .58rem; font-style: normal; }
.mock-posts { display: flex; flex-direction: column; gap: 1.05rem; padding: 1.35rem 1rem; }.mock-posts b { padding-bottom: .75rem; border-bottom: 1px solid #ddd; color: #444; font-size: .75rem; font-weight: 500; }
.preview-huoli { isolation: isolate; background: #fbf6eb; }
.preview-huoli::before { position:absolute;inset:0;background:repeating-linear-gradient(8deg,transparent 0 10px,rgba(71,49,28,.025) 11px,transparent 12px);content:""; }
.huoli-mark { position:absolute;top:1rem;left:1rem;color:#4c3825;font-family:Cinzel,serif;font-size:.72rem;font-weight:700;letter-spacing:.2em; }.huoli-mark small{font-size:.55rem;}
.huoli-orbit { position:absolute;top:50%;left:50%;border:1px solid rgba(76,56,37,.25);border-radius:50%;transform:translate(-50%,-50%) rotate(-12deg); }.orbit-one{width:13rem;height:7rem}.orbit-two{width:9rem;height:12rem;transform:translate(-50%,-50%) rotate(48deg)}
.huoli-core { position:absolute;top:50%;left:50%;display:grid;width:5rem;height:5rem;place-content:center;border:1px solid rgba(76,56,37,.5);border-radius:50%;color:#4c3825;background:rgba(242,232,213,.78);font-family:var(--font-inscription);font-size:.72rem;letter-spacing:.12em;line-height:1.4;text-align:center;transform:translate(-50%,-50%); }
.huoli-node { position:absolute;color:#6c5137;font-size:.58rem;letter-spacing:.1em}.node-a{top:25%;left:33%}.node-b{right:26%;bottom:28%}.node-c{left:27%;bottom:23%}
.x-output { padding-bottom: 2rem; }
.x-line { display: grid; grid-template-columns: 3.1rem 7rem 1fr 1.2rem; gap: 1rem; align-items: center; padding: 1.15rem 1rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none; transition: padding-left .3s ease,background .3s ease; }
.x-line:hover,.x-line:focus-visible { padding-left: 1.35rem; background: rgba(154,76,11,.035); }.x-bird{font-size:1.55rem}.x-handle{font-family:Cinzel,serif;font-size:.75rem;letter-spacing:.06em}.x-description{color:var(--muted);font-size:.82rem;letter-spacing:.05em}.x-external{justify-self:end}
.worthy-list { display: grid; grid-template-columns: 1fr 1fr; margin: 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.worthy-list li { display: grid; grid-template-columns: 2.5rem 1fr; gap: .8rem; align-items: center; padding: 1rem .8rem; border-bottom: 1px solid var(--line); }.worthy-list li:nth-child(odd){border-right:1px solid var(--line)}
.worthy-list span { position:relative;z-index:1;color:rgba(154,76,11,.45);font-family:Cinzel,serif;font-size:.58rem;letter-spacing:.12em}.worthy-list strong{font-family:var(--font-text);font-size:.88rem;font-weight:500;letter-spacing:.08em}
.worthy-list li.is-today span::after { position:absolute;z-index:-1;top:50%;left:43%;width:2rem;height:1.35rem;border:1.4px solid rgba(154,76,11,.46);border-radius:49% 55% 46% 52%;content:"";transform:translate(-50%,-50%) rotate(-8deg); }
.worthy-list li.is-today strong::after { margin-left:.65rem;color:rgba(154,76,11,.55);content:"· 今日";font-size:.58rem;font-weight:400;letter-spacing:.12em; }
.creation-footer { display:flex;gap:1rem;align-items:center;margin-top:3rem;padding-top:1rem;border-top:1px solid var(--line);color:var(--muted);font-family:Cinzel,serif;font-size:.52rem;letter-spacing:.2em}.creation-footer i{height:1px;flex:1;background:var(--line)}.creation-footer a{color:inherit;text-decoration:none}
@media(max-width:768px){.creation-sheet{padding:1.25rem}.creation-hero{min-height:9.5rem;padding-bottom:1.45rem}.creation-title-row{gap:.7rem}.creation-hero h1{margin-top:1.55rem;font-size:3.35rem}.title-pencil{width:5.4rem;margin-top:1.7rem}.creation-manifesto{font-size:.62rem;letter-spacing:.22em}.creation-seal{right:.35rem;top:.7rem;width:2.35rem;height:2.35rem}.creation-subtitle{right:.02rem;bottom:.9rem;gap:.1rem;font-size:.78rem}.creation-section{padding-top:2.2rem}.section-heading{grid-template-columns:1.9rem 1fr;gap:.65rem}.section-heading h2{font-size:1.08rem}.creation-site-card{grid-template-columns:1fr}.creation-site-preview{min-height:12rem;border-right:0;border-bottom:1px solid var(--line)}.creation-site-preview img{min-height:12rem}.creation-site-copy{padding:1rem}.x-line{grid-template-columns:2.5rem 1fr 1.2rem;gap:.65rem}.x-handle{grid-column:2}.x-description{grid-column:2/4}.x-external{grid-column:3;grid-row:1}.worthy-list{grid-template-columns:1fr}.worthy-list li:nth-child(odd){border-right:0}.creation-footer span{display:none}}
@keyframes seal-press { 45% { color:#8a430f;background:rgba(154,76,11,.09);transform:rotate(1deg) scale(.92);box-shadow:inset 0 0 .45rem rgba(154,76,11,.16) } }
@keyframes output-ink-hit { 0%,100%{background-color:transparent} 38%{background-color:rgba(154,76,11,.075);box-shadow:inset .22rem 0 0 rgba(154,76,11,.4)} }
@media(prefers-reduced-motion:reduce){.creation-site-preview img,.preview-open,.x-line,.creation-seal{transition:none}.creation-seal.is-active,.output-node.is-output-hit{animation:none}.output-ink-drop{display:none}}