.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-button { display:block;margin-top:1.55rem;padding:.35rem .2rem;border:0;background:transparent;cursor:pointer; }
.title-pencil-button:focus-visible { outline:1px dashed rgba(154,76,11,.52);outline-offset:.18rem; }
.title-pencil { display:block;width:8.8rem;height:auto;overflow:visible;filter:drop-shadow(.08rem .1rem .08rem rgba(55,39,25,.13));transform-origin:50% 50%;transition:filter .25s ease,transform .25s ease; }
.title-pencil-button:hover .title-pencil { filter:drop-shadow(.12rem .14rem .1rem rgba(55,39,25,.2));transform:translateY(-1px); }
.title-pencil-button.is-spinning .title-pencil { animation:pencil-spin .82s cubic-bezier(.34,.02,.22,1); }
.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; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1rem; }
.creation-site-card { display: grid; grid-template-rows: auto 1fr; min-width: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.creation-site-preview { position: relative; display: block; min-height: 11.25rem; overflow: hidden; border-bottom: 1px solid var(--line); background: #eee6d5; color: var(--text); text-decoration: none; }
.creation-site-preview img { display: block; width: 100%; height: 100%; min-height: 11.25rem; 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: 1.6rem 1fr; gap: .45rem; align-content: start; padding: 1rem .7rem 1.1rem; }
.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 .4rem; color: var(--text); font-family: Cinzel,var(--font-inscription); font-size: 1.05rem; font-weight: 600; letter-spacing: .025em; }
.creation-site-copy p { margin: 0; color: var(--muted); font-size: .72rem; letter-spacing: .045em; line-height: 1.65; }
.preview-xiaojing { background: #f2ecdc; }
.preview-xiaojing img { object-fit: contain; object-position: center; }
.preview-huoli { background: #f5f2e7; }
.preview-huoli img { object-fit: contain; object-position: center; }
.preview-whale { background: #fbf6eb; }
.preview-whale img { object-fit: contain; object-position: center; }
.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-button{margin-top:1.7rem;padding:.25rem .1rem}.title-pencil{width:5.4rem}.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-sites{grid-template-columns:1fr;gap:1.35rem}.creation-site-preview{min-height:12rem}.creation-site-preview img{min-height:12rem}.creation-site-copy{grid-template-columns:2.5rem 1fr;padding:1rem}.creation-site-copy h3{font-size:1.15rem}.creation-site-copy p{font-size:.8rem}.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)} }
@keyframes pencil-spin { 0%{transform:rotate(0deg) translateY(0)} 16%{transform:rotate(-11deg) translateY(-1px)} 72%{transform:rotate(374deg) translateY(-1px)} 88%{transform:rotate(356deg) translateY(1px)} 100%{transform:rotate(360deg) translateY(0)} }
@media(prefers-reduced-motion:reduce){.creation-site-preview img,.preview-open,.x-line,.creation-seal,.title-pencil{transition:none}.creation-seal.is-active,.output-node.is-output-hit,.title-pencil-button.is-spinning .title-pencil{animation:none}.output-ink-drop{display:none}}