.prism-clues277 { --pc-ink: #f6f2eb; --pc-muted: #c5d1df; color: var(--pc-ink); max-width: 1040px; margin: auto; }
.prism-clues277 * { box-sizing: border-box; }
.pc-hero277 { display: grid; grid-template-columns: minmax(0, 1fr) 160px; align-items: center; gap: 24px; padding: 20px; border: 1px solid #8d9fd342; border-radius: 20px; background: radial-gradient(ellipse at 90% 30%, #6461a247, transparent 70%), linear-gradient(125deg, #203d49, #2b263f); }
.pc-intro277 h3 { font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.2; margin: 10px 0; color: #fff4cf; }
.pc-intro277 p { max-width: 55ch; line-height: 1.6; }
.pc-eyebrow277 { color: #b7e5e2; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.pc-art277 { width: 100%; height: 150px; object-fit: contain; filter: drop-shadow(0 12px 20px #060c2066); }
.pc-preview277 { padding: 10px 14px; border-left: 3px solid #e7bd75; background: #c7a05617; color: #f3d8a6; line-height: 1.5; }
.pc-form277 { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px 12px; margin-top: 24px; }
.pc-form277 label { grid-column: 1 / -1; color: var(--pc-muted); font-weight: 700; }
.pc-form277 input { min-width: 0; width: 100%; padding: 14px 16px; border: 1px solid #758aab; border-radius: 12px; color: #fff; background: #101d30; font: inherit; font-size: 1.05rem; }
.prism-clues277 button { min-height: 46px; border-radius: 12px; padding: 10px 18px; font: inherit; font-weight: 700; cursor: pointer; }
.pc-reveal277 { border: 1px solid #d2e6dc; background: linear-gradient(130deg, #d0e6d9, #c4c8ed); color: #203149; }
.pc-refresh277 { color: #d9e7f7; border: 1px solid #9fb4d45c; background: #193444; }
.prism-clues277 button:disabled, .prism-clues277 input:disabled { opacity: .55; cursor: default; }
.prism-clues277 :focus-visible { outline: 3px solid #ffe6a2; outline-offset: 3px; }
.pc-message277 { min-height: 3em; color: #d3dfed; line-height: 1.5; margin: 12px 0; }
.pc-found277 { color: #e9d7a0; font-size: 1.25rem; font-weight: 800; animation: prismClueReveal277 .6s ease-out; }
.pc-hint277 { padding: 12px 0; color: #c5d7e9; line-height: 1.5; }
.pc-hint277 summary { cursor: pointer; }
.pc-journal-heading277 { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 14px 0; }
.pc-journal-heading277 h3 { margin: 0; font-size: 1.1rem; }
.pc-cards277 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: 14px; padding-bottom: 16px; }
.pc-card277, .pc-empty277 { padding: 20px; border: 1px solid #9fb4d438; border-radius: 16px; background: #1c3441; }
.pc-card277 h4, .pc-empty277 h4 { font-size: 1.1rem; margin: 10px 0; color: #f1e6c5; }
.pc-card277 p, .pc-empty277 p { line-height: 1.5; }
.pc-card277 time, .pc-saved277 { color: #a5c6cd; font-size: .85rem; }
.pc-destination277 { font-weight: 700; }
.pc-empty277 { text-align: center; padding: 28px; background: radial-gradient(ellipse at 50% 0, #4b517b52, transparent), #192d3a; }
.pc-mystery277 { display: inline-grid; place-items: center; width: 58px; height: 58px; border: 1px solid #cfc6ea66; border-radius: 50%; color: #e1d5f3; font-size: 2rem; }
@keyframes prismClueReveal277 { from { opacity: .2; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 600px) {
  .pc-hero277 { display: block; position: relative; padding: 16px; }
  .pc-intro277 h3 { padding-right: 74px; }
  .pc-art277 { position: absolute; top: 36px; right: 12px; width: 80px; height: 110px; }
  .pc-form277 { grid-template-columns: 1fr; }
  .pc-journal-heading277 { align-items: stretch; flex-direction: column; }
  .pc-card277, .pc-empty277 { padding: 16px; }
}
@media (max-width: 600px) and (min-height: 501px) {
  #wonderbook186.wonderbook186 .wonderbook-tabs186 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; overflow: visible; }
  #wonderbook186.wonderbook186 .wonderbook-tabs186 button { min-width: 0; min-height: 40px; padding: 7px; white-space: normal; overflow-wrap: anywhere; }
}
@media (max-height: 500px) {
  #wonderbook186.wonderbook186 .wonderbook-tabs186 { display: flex; overflow-x: auto; }
  #wonderbook186.wonderbook186 .wonderbook-tabs186 button { flex: 0 0 auto; white-space: nowrap; }
}
@media (max-width: 360px) { .pc-intro277 h3 { padding-right: 0; } .pc-art277 { display: none; } }
@media (prefers-reduced-motion: reduce) { .pc-found277 { animation: none; } }