.fantasy-page { --violet:#7563f3; --rose:#ff8f9a; }
.fantasy-hero { overflow:hidden; border-block-end:var(--line); background:linear-gradient(135deg,var(--yellow) 0 38%,var(--coral) 38% 100%); }
.fantasy-hero .entry-hero__grid { align-items:center; }
.fantasy-hero .entry-hero__visual { rotate:-1deg; }
.fantasy-hero .entry-hero__visual img { aspect-ratio:3/2; }
.fantasy-hero .display-title { max-width:12ch; font-size:clamp(3.4rem,8vw,7.2rem); }
.fantasy-hook { display:inline-flex; gap:.65rem; align-items:center; margin-top:1.35rem; padding:.72rem 1rem; border:var(--thin-line); background:var(--paper); color:var(--ink); font-weight:950; text-decoration:none; box-shadow:5px 5px 0 var(--night); }
.fantasy-fast-track { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin-block:1.4rem 0; }
.fantasy-fast-track a { display:grid; grid-template-columns:2.5rem 1fr; gap:.35rem .7rem; align-content:start; min-height:8.5rem; padding:1rem; border:var(--line); color:var(--ink); background:var(--yellow); text-decoration:none; box-shadow:var(--shadow-sm); }
.fantasy-fast-track a:nth-child(2) { background:var(--coral); }
.fantasy-fast-track a:nth-child(3) { background:var(--mint); }
.fantasy-fast-track span { grid-row:1/3; display:grid; place-items:center; width:2.3rem; height:2.3rem; border:var(--thin-line); border-radius:50%; background:var(--paper); font-size:.72rem; font-weight:1000; }
.fantasy-fast-track strong { font:1000 var(--step-1)/1.05 var(--display); }
.fantasy-fast-track small { font-size:.82rem; font-weight:760; line-height:1.35; }
.fantasy-fast-track a:is(:hover,:focus-visible) { translate:0 -3px; box-shadow:7px 8px 0 var(--night); }
.fantasy-definition { margin:0 0 2.3rem; padding:clamp(1.3rem,3vw,2rem); border:var(--line); background:var(--mint); box-shadow:var(--shadow); font-size:clamp(1.12rem,2.2vw,1.5rem); font-weight:820; line-height:1.5; }
.three-layers { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin:1.7rem 0; }
.layer { position:relative; min-height:13rem; padding:1.25rem; border:var(--line); box-shadow:var(--shadow-sm); }
.layer:nth-child(1) { background:var(--yellow); transform:rotate(-1deg); }
.layer:nth-child(2) { background:var(--coral); transform:translateY(.65rem); }
.layer:nth-child(3) { color:var(--paper); background:var(--night); transform:rotate(1deg); }
.layer span { display:grid; place-items:center; width:2.35rem; height:2.35rem; border:var(--thin-line); border-radius:50%; background:var(--paper); color:var(--ink); font-size:.72rem; font-weight:1000; }
.layer h3 { margin:.9rem 0 .5rem; }
.layer p { margin:0; }
.engine-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin:1.6rem 0; }
.engine-card { min-height:13rem; padding:1.2rem; border:var(--line); background:var(--paper); box-shadow:var(--shadow-sm); }
.engine-card:nth-child(2),.engine-card:nth-child(5) { background:var(--mint); }
.engine-card:nth-child(3) { background:var(--yellow); }
.engine-card:nth-child(4) { background:var(--coral); }
.engine-card:nth-child(6) { color:var(--paper); background:var(--night); }
.engine-card .engine-number { font-size:.72rem; font-weight:1000; letter-spacing:.09em; }
.engine-card h3 { margin:.75rem 0 .5rem; }
.engine-card p { margin:.5rem 0; }
.engine-card a { color:inherit; font-weight:950; }
.fantasy-scene { margin:2rem 0; border:var(--line); background:var(--paper); box-shadow:var(--shadow-lg); }
.fantasy-scene img { display:block; width:100%; height:auto; }
.fantasy-scene figcaption { padding:.9rem 1rem; border-block-start:var(--thin-line); background:var(--yellow); font-size:.88rem; font-weight:850; }
.feeling-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin:1.3rem 0; }
.feeling-grid article { padding:1rem; border:var(--thin-line); background:var(--paper); }
.feeling-grid article:nth-child(2) { background:var(--mint); }
.feeling-grid article:nth-child(3) { background:var(--coral); }
.feeling-grid article:nth-child(4) { color:var(--paper); background:var(--night); }
.feeling-grid h3 { margin:0 0 .35rem; }
.feeling-grid p { margin:0; }
.fantasy-mobile-cards { display:none; }
.fantasy-table td,.fantasy-table th { vertical-align:top; }
.engine-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem 1.2rem; margin:1.5rem 0; padding:0; list-style:none; }
.engine-list li { padding:1rem; border-inline-start:.75rem solid var(--bar-color); background:var(--paper); box-shadow:var(--shadow-sm); }
.engine-list strong { display:block; font-family:var(--display); font-size:var(--step-1); }
.fantasy-direction-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin:1.6rem 0; }
.fantasy-direction-grid article { min-height:15rem; padding:1.15rem; border:var(--line); background:var(--paper); box-shadow:var(--shadow-sm); }
.fantasy-direction-grid article:nth-child(4n+2) { background:var(--mint); }
.fantasy-direction-grid article:nth-child(4n+3) { background:var(--yellow); }
.fantasy-direction-grid article:nth-child(4n) { background:var(--coral); }
.fantasy-direction-grid span { display:grid; place-items:center; width:2.4rem; height:2.4rem; border:var(--thin-line); border-radius:50%; background:var(--night); color:var(--paper); font-size:.72rem; font-weight:1000; }
.fantasy-direction-grid h3 { margin:.8rem 0 .55rem; }
.fantasy-direction-grid p { margin:.5rem 0; }
.fantasy-takeaway { padding:1rem 1.1rem; border:var(--thin-line); background:var(--mint); box-shadow:var(--shadow-sm); }
.search-panel { margin:1.7rem 0; padding:clamp(1.1rem,3vw,1.8rem); border:var(--line); color:var(--paper); background:var(--night); box-shadow:var(--shadow); }
.search-panel h3 { margin:0 0 1.2rem; color:var(--paper); }
.fantasy-search-split { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; }
.fantasy-search-split > div { padding:1rem; border:1px solid rgba(255,255,255,.52); }
.fantasy-search-split h4 { margin:0 0 1rem; color:var(--yellow); font:1000 var(--step-1)/1 var(--display); }
.fantasy-bars { display:grid; gap:.9rem; margin:0; padding:0; list-style:none; }
.fantasy-bars li { display:grid; grid-template-columns:minmax(8rem,10.5rem) minmax(4rem,1fr) 4.5rem; gap:.65rem; align-items:center; }
.fantasy-bars strong,.fantasy-bars b { font-size:.87rem; }
.fantasy-bars b { text-align:end; }
.fantasy-bars i { display:block; height:1.2rem; overflow:hidden; border:1px solid rgba(255,255,255,.72); }
.fantasy-bars em { display:block; width:var(--bar); height:100%; background:var(--bar-color); }
.search-panel__note { margin:1.25rem 0 0; padding-top:1rem; border-top:1px solid rgba(255,255,255,.45); font-size:.8rem; font-weight:720; }
.fantasy-data { border:var(--thin-line); background:var(--paper); }
.fantasy-data summary { padding:.9rem 1rem; cursor:pointer; font-weight:950; }
.fantasy-compass { padding:clamp(1.2rem,4vw,2.25rem); border:var(--line); color:var(--paper); background:var(--night); box-shadow:var(--shadow-lg); }
.fantasy-compass h2 { color:var(--paper); }
.fantasy-compass__intro { max-width:44rem; }
.compass-progress { margin:1.2rem 0; color:var(--mint); font-weight:900; }
.fantasy-compass__questions { display:grid; gap:1rem; }
.fantasy-compass fieldset { min-width:0; margin:0; padding:1rem; border:2px solid rgba(255,255,255,.7); }
.fantasy-compass legend { padding-inline:.45rem; color:var(--yellow); font-weight:1000; }
.compass-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.55rem; }
.compass-options label { display:flex; gap:.55rem; align-items:start; padding:.65rem; border:1px solid rgba(255,255,255,.28); cursor:pointer; }
.compass-options label:has(input:checked) { color:var(--ink); background:var(--mint); border-color:var(--ink); }
.compass-options input { flex:0 0 auto; margin-top:.25rem; accent-color:var(--yellow); }
.compass-actions { display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.25rem; }
.compass-result { margin-top:1.5rem; padding:1.25rem; border:var(--line); color:var(--ink); background:var(--yellow); box-shadow:7px 7px 0 var(--mint); }
.compass-result h3 { margin:0 0 .6rem; font:1000 var(--step-2)/1 var(--display); }
.compass-result p { margin:.55rem 0; }
.compass-result__eyebrow { font-size:.72rem; font-weight:1000; letter-spacing:.1em; text-transform:uppercase; }
.compass-result__lead { max-width:48rem; font-size:1.08rem; font-weight:820; }
.compass-result__grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; margin:1rem 0; }
.compass-result__grid > div { padding:.9rem; border:var(--thin-line); background:var(--paper); }
.compass-result__grid > div:nth-child(2) { background:var(--coral); }
.compass-result__grid > div:nth-child(3) { background:var(--mint); }
.compass-result__grid > div:nth-child(4) { color:var(--paper); background:var(--night); }
.compass-result__grid strong { font-family:var(--display); font-size:var(--step-1); }
.compass-result__grid p { margin:.35rem 0 0; }
.compass-result__links { display:flex; flex-wrap:wrap; gap:.65rem; margin-top:.8rem; }
.compass-result__links a { display:inline-block; margin:0; padding:.62rem .8rem; border:var(--thin-line); color:var(--ink); background:var(--paper); font-weight:1000; text-decoration:none; }
.compass-result__links a:nth-child(2) { background:var(--mint); }
.compass-result__links a:is(:hover,:focus-visible) { color:var(--paper); background:var(--night); }
.route-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin:1.5rem 0; }
.route-grid article { padding:1.2rem; border:var(--line); background:var(--paper); box-shadow:var(--shadow-sm); }
.route-grid article:nth-child(2) { background:var(--mint); }
.route-grid article:nth-child(3) { background:var(--yellow); }
.route-grid h3 { margin:0 0 .55rem; }
.route-grid p { margin:.55rem 0; }
.prompt-strip { display:grid; gap:.8rem; margin:1.4rem 0; }
.prompt-strip p { margin:0; padding:1rem 1.1rem; border:var(--thin-line); background:var(--paper); font-weight:850; }
.prompt-strip p:nth-child(2) { background:var(--coral); }
.prompt-strip p:nth-child(3) { background:var(--mint); }
.fantasy-trail { padding:clamp(1.25rem,4vw,2.1rem); border:var(--line); color:var(--paper); background:var(--night); box-shadow:var(--shadow); }
.fantasy-trail h2 { color:var(--paper); }
.fantasy-trail a { display:grid; grid-template-columns:3rem 1fr auto; gap:.85rem; align-items:center; padding:1rem .2rem; border-block-start:1px solid rgba(255,255,255,.4); color:var(--paper); text-decoration:none; }
.fantasy-trail a:last-child { border-block-end:1px solid rgba(255,255,255,.4); }
.fantasy-trail a span { display:grid; place-items:center; width:2.2rem; height:2.2rem; border-radius:50%; color:var(--ink); background:var(--coral); font-size:.72rem; font-weight:1000; }
.fantasy-trail a strong { font:1000 var(--step-1)/1 var(--display); }
.fantasy-trail a p { margin:.25rem 0 0; font-size:.9rem; }
.fantasy-trail a:is(:hover,:focus-visible) { color:var(--ink); background:var(--yellow); }
@media (max-width:760px) {
  .fantasy-fast-track,.three-layers,.engine-grid,.feeling-grid,.fantasy-direction-grid,.fantasy-search-split,.compass-result__grid,.route-grid { grid-template-columns:1fr; }
  .fantasy-fast-track a { min-height:0; }
  .fantasy-direction-grid article { min-height:0; }
  .layer:nth-child(n) { transform:none; }
  .fantasy-table { display:none; }
  .fantasy-mobile-cards { display:grid; gap:.85rem; margin:1rem 0; }
  .fantasy-mobile-cards article { padding:1rem; border:var(--line); background:var(--paper); }
  .fantasy-mobile-cards article:nth-child(2) { background:var(--mint); }
  .fantasy-mobile-cards article:nth-child(3) { background:var(--yellow); }
  .fantasy-mobile-cards h3 { margin:0 0 .65rem; }
  .fantasy-mobile-cards dl { margin:0; }
  .fantasy-mobile-cards div { display:grid; grid-template-columns:6.5rem 1fr; gap:.5rem; padding:.42rem 0; border-top:var(--thin-line); }
  .fantasy-mobile-cards dt { font-weight:950; }
  .fantasy-mobile-cards dd { margin:0; }
  .fantasy-bars li { grid-template-columns:1fr 4.5rem; }
  .fantasy-bars i { grid-column:1/-1; grid-row:2; }
  .fantasy-bars b { grid-column:2; grid-row:1; }
  .compass-options,.engine-list { grid-template-columns:1fr; }
}
@media (max-width:560px) {
  .fantasy-hero .display-title { font-size:clamp(3.15rem,15vw,4.8rem); }
  .fantasy-trail a { grid-template-columns:2.5rem 1fr auto; }
}
@media (prefers-reduced-motion:reduce) { .layer,.fantasy-hero .entry-hero__visual { rotate:0deg; } }