/* Consume the established graphite/steel tokens and shared controls. */
.creative-card { padding: 24px; overflow: hidden; }
.creative-card h2 { margin-bottom: 12px; }
.creative-card .entry-meta { margin-block: 16px 10px; }
.creative-photo { display: block; width: calc(100% + 48px); margin: -24px -24px 0; padding: 0; border: 0; background: var(--panel); cursor: pointer; }
.creative-photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.creative-photo:hover img { filter: brightness(1.08); }
.creative-photo:focus-visible { outline-offset: -4px; }
.postcard-caption { font: 22px/1.65 var(--font-note); margin-block: 20px; }
.postcard-player { display: grid; gap: 14px; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.postcard-player audio { width: 100%; min-width: 0; }
.postcard-player .collection-button { justify-self: start; }
.letter-envelope { position: relative; display: grid; place-items: center; min-height: 150px; margin: -24px -24px 20px; background: #222b39; overflow: hidden; }
.letter-envelope::before { content: ''; position: absolute; width: 64%; height: 95px; border: 1px solid var(--line); transform: rotate(-4deg); border-radius: 4px; }
.letter-envelope::after { content: ''; position: absolute; width: 64%; height: 80px; top: -20px; border: 1px solid var(--line); transform: rotate(45deg); }
.letter-envelope span { z-index: 1; padding: 8px 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--panel); color: var(--accent); font-size: 12px; }
.future-letter { margin-top: 24px; padding: 24px; border-radius: 16px; background: var(--paper); color: var(--ink); line-height: 2; }
.branch-preview { display: flex; min-height: 135px; align-items: center; justify-content: center; gap: 16px; margin: -24px -24px 20px; background: #1b2532; color: var(--accent); font-size: 13px; }
.branch-preview i { width: 28px; height: 44px; border-block: 1px solid var(--accent); border-left: 1px solid var(--accent); border-radius: 8px 0 0 8px; }
.story-stage { padding: 26px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.story-stage h3 { font-size: 26px; margin-block: 16px 24px; }
.story-choices { display: grid; gap: 12px; margin-top: 24px; }
.story-choices .collection-button { display: flex; width: 100%; justify-content: space-between; white-space: normal; text-align: left; }
.story-state { margin-block: 14px; color: var(--muted); font-size: 13px; }
.story-builder { display: grid; gap: 16px; }
.story-node { display: grid; gap: 12px; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.story-node header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.story-node h4 { margin: 0; font-size: 16px; }
.story-option { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) auto; gap: 10px; align-items: end; }
.story-option label { display: grid; gap: 6px; font-size: 13px; color: var(--muted); }
.story-option input,.story-option select { width: 100%; min-width: 0; min-height: 44px; padding: 10px; background: #141b25; border: 1px solid var(--line); border-radius: 11px; color: var(--text); font-size: 16px; }
.star-toolbar { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin-bottom: 18px; }
.star-toolbar .search-box { width: min(440px,100%); }
.visitor-sky { position: relative; min-height: 330px; margin-top: 22px; border: 1px solid var(--line); border-radius: 16px; background: radial-gradient(ellipse at 65% 35%, #26354c 0, #151e2d 38%, #101723 85%); overflow: hidden; }
.visitor-sky::before { content: ''; position: absolute; inset: 0; opacity: .32; background-image: radial-gradient(circle, #aab2c0 1px, transparent 1px); background-size: 53px 67px; pointer-events: none; }
.visitor-star { position: absolute; display: grid; place-items: center; min-width: 60px; min-height: 60px; transform: translate(-50%,-50%); padding: 8px; border: 0; border-radius: 11px; background: transparent; color: var(--text); cursor: pointer; }
.visitor-star i { width: var(--star-size); height: var(--star-size); margin: 4px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 14px rgba(171,197,236,.5); }
.visitor-star span { display: block; max-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--muted); }
.visitor-star:hover { background: rgba(171,197,236,.1); }
.visitor-star:active { transform: translate(-50%,-50%); background: rgba(171,197,236,.2); }
.sky-empty { position: relative; display: grid; gap: 12px; min-height: 330px; place-content: center; text-align: center; padding: 24px; }
.sky-empty p { color: var(--muted); }
.star-count { color: var(--muted); margin-block: 20px; }
.star-list { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.star-list-entry { display: grid; gap: 10px; min-width: 0; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); color: var(--text); text-align: left; cursor: pointer; }
.star-list-entry span { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; font-size: 14px; line-height: 1.8; overflow-wrap: anywhere; }
.star-list-entry small { color: var(--muted); }
.star-list-entry:hover { border-color: var(--accent); }
.star-list-entry:active { background: #263142; transform: none; }
.star-message { margin-block: 24px; font: 24px/1.8 var(--font-note); white-space: pre-wrap; overflow-wrap: anywhere; }
.art-workspace { display: grid; grid-template-columns: 340px minmax(0,1fr); gap: 32px; align-items: start; }
.art-form { display: grid; gap: 18px; padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.art-form h2 { font-size: 20px; }
.art-form label { display: grid; gap: 8px; font-size: 14px; color: var(--muted); }
.art-form input,.art-form textarea,.art-form select { width: 100%; min-width: 0; min-height: 46px; padding: 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--bg); color: var(--text); font: 16px/1.6 var(--font-body); }
.art-form textarea { resize: none; min-height: 108px; }
.art-preview { display: grid; justify-items: center; gap: 14px; min-width: 0; padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: #10141c; }
.art-preview canvas { display: block; max-width: 100%; max-height: 740px; width: auto; height: auto; border-radius: 6px; box-shadow: 0 8px 32px rgba(0,0,0,.2); }
.creative-card .entry-copy { overflow-wrap: anywhere; }
@media(max-width:900px) { .art-workspace { grid-template-columns: 280px minmax(0,1fr); gap: 20px; } .star-list { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:620px) {
 .art-workspace { grid-template-columns: minmax(0,1fr); }
 .art-form,.art-preview { padding: 18px; }
 .art-preview canvas { max-height: 620px; }
 .star-toolbar { align-items: stretch; flex-direction: column; }
 .star-toolbar .collection-button { align-self: flex-start; }
 .star-list { grid-template-columns: minmax(0,1fr); }
 .visitor-sky { min-height: 300px; }
 .visitor-star { min-width: 54px; min-height: 54px; }
 .story-option { grid-template-columns: minmax(0,1fr); }
 .story-option button { justify-self: start; }
 .story-stage,.future-letter { padding: 18px; }
}
@media(prefers-reduced-motion:reduce) { .creative-card *,.visitor-star,.star-list-entry,.art-workspace * { transition: none; animation: none; } }
@media(forced-colors:active) { .visitor-star i { background: ButtonText; box-shadow:none; } .letter-envelope span,.star-list-entry,.story-node,.art-form { border-color: ButtonText; } }