.phantom-demo { padding:0 28px 28px; }
.phantom-film { margin:0; overflow:hidden; border-radius:15px; background:#151b18; color:#f0ece3; }
.phantom-film-top { display:flex; justify-content:space-between; gap:12px; padding:16px 18px; font:11px/1.4 ui-monospace,Consolas,monospace; color:#b9d0c5; }
.phantom-film-top span:last-child { white-space:nowrap; color:#899f94; }
.phantom-screen { position:relative; aspect-ratio:16/9; background:#121612; }
.phantom-screen video { display:block; width:100%; height:100%; object-fit:contain; }
.phantom-watch { position:absolute; inset:0; width:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; padding:14px; border:0; border-radius:0; color:white; background:transparent; cursor:pointer; }
.phantom-watch[hidden] { display:none; }
.phantom-watch > span { display:grid; place-items:center; width:50px; height:50px; padding-left:3px; margin-bottom:5px; border:1px solid #c0eed566; border-radius:50%; color:#142c24; background:#a9e4ce; font-size:18px; box-shadow:0 4px 25px #0003; }
.phantom-watch b { padding:4px 8px; border-radius:5px; font-size:14px; font-weight:550; background:#101b16df; }
.phantom-watch small { font-size:11px; color:#d7e4dc; text-shadow:0 1px 4px #000; }
.phantom-watch:hover > span { background:#c6f8e2; }
.phantom-narration { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); padding:12px; gap:8px; border-top:1px solid #b8d7c31c; }
.phantom-narration > div { min-width:0; padding:10px 12px; border-radius:8px; }
.phantom-narration > div + div { border-left:1px solid #b8d7c32b; border-top-left-radius:0; border-bottom-left-radius:0; }
.phantom-narration span { display:block; color:#aebeb4; font-size:11px; line-height:1.6; }
.phantom-narration strong { display:block; min-height:2.8em; margin-top:3px; color:#d0f3e4; font-size:clamp(12px,1.2vw,16px); line-height:1.4; font-weight:550; }
.phantom-chapter-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; font-size:12px; color:#656b66; }
.phantom-chapter-heading button { min-height:44px; border:0; background:none; padding:8px 0 8px 8px; font-size:12px; color:#315d4d; }
.phantom-chapters { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; }
.phantom-chapters button { display:flex; align-items:center; justify-content:center; gap:9px; min-height:48px; padding:8px; border:1px solid #dce4df; border-radius:9px; background:#f5f7f5; font-size:14px; color:#3e4941; }
.phantom-chapters small { font-size:10px; color:#727e75; font-variant-numeric:tabular-nums; }
.phantom-chapters button[aria-pressed="true"] { border-color:#537d69; background:#e5f0e9; color:#244b3b; }
.phantom-chapters button:hover { border-color:#779181; }
.phantom-feedback { min-height:42px; margin:13px 0 12px; color:#686f69; font-size:12px; line-height:1.6; }
.phantom-expand { display:flex; align-items:center; justify-content:space-between; width:100%; gap:20px; padding:16px 0 0; border:0; border-top:1px solid #e5e9e5; background:none; color:#263f32; text-align:left; font-size:14px; line-height:1.4; }
.phantom-expand small { display:block; margin-top:5px; color:#727a73; font-size:11px; }
.phantom-expand > span:last-child { font-size:23px; }
.phantom-demo button:focus-visible,.phantom-video-dialog button:focus-visible { outline:3px solid #2e8062; outline-offset:3px; }
.phantom-video-dialog { width:min(1100px,calc(100% - 36px)); max-height:calc(100dvh - 36px); padding:24px; border:1px solid #35463c; border-radius:18px; background:#151b18; color:#f1f5f2; box-shadow:0 24px 100px #0006; }
.phantom-video-dialog::backdrop { background:#08110ce3; backdrop-filter:blur(8px); }
.phantom-video-dialog header { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:20px; }
.phantom-video-dialog header p { font:11px/1.5 ui-monospace,Consolas,monospace; color:#a8c4b6; margin-bottom:6px; }
.phantom-video-dialog h2 { font-size:24px; line-height:1.2; letter-spacing:-.035em; font-weight:550; }
.phantom-video-dialog header button { flex:none; width:44px; height:44px; border:1px solid #647368; border-radius:50%; color:#eaf0ec; background:#25342b; font-size:26px; }
.phantom-video-dialog video { display:block; width:100%; height:auto; min-height:140px; max-height:calc(100dvh - 240px); background:#090d0a; }
.phantom-video-dialog > p { color:#b8c4bc; font-size:13px; line-height:1.6; margin-top:14px; }
#phantom-full-feedback:empty { display:none; }
html:has(#phantom-video-dialog[open]) { overflow:hidden; }
.phantom-concept { height:320px; margin-top:20px; border-radius:12px; overflow:hidden; }
.phantom-actions { display:flex; margin-top:12px; background:#eef2ee; }
.phantom-actions button { flex:1; min-width:0; }

/* The card borrows its paper and charcoal palette from the supplied hand-drawn identity. */
.project-card.card-phantom { background:#f0ece2; border:1px solid #dbd3c5; color:#302d29; }
.card-phantom .card-heading { min-height:0; padding:0; text-align:left; }
.card-phantom .card-heading h2.project-heading { display:block; width:100%; height:278px; min-height:0; margin:0; overflow:hidden; }
.card-phantom .phantom-identity-art { display:block; width:100%; height:100%; object-fit:cover; object-position:center 35%; }
.card-phantom .card-heading > .project-intro { margin:0; padding:18px 28px 26px; }
.card-phantom .project-intro strong { max-width:27ch; color:#302d29; font:normal 27px/1.16 Georgia,serif; letter-spacing:-.025em; }
.card-phantom .project-intro > span { max-width:55ch; margin-top:10px; color:#5a554e; }
.card-phantom .phantom-film { border:1px solid #393631; border-radius:4px; background:#282723; color:#f0ece2; }
.card-phantom .phantom-film-top { color:#d4cbbd; }
.card-phantom .phantom-film-top span:last-child { color:#a99f90; }
.card-phantom .phantom-screen { background:#161613; }
.card-phantom .phantom-watch > span { border-color:#e1d7c8; color:#282723; background:#e9e2d6; }
.card-phantom .phantom-watch:hover > span { background:#fff8e8; }
.card-phantom .phantom-watch b { background:#23221fe8; }
.card-phantom .phantom-narration { border-top-color:#b9ad9c35; }
.card-phantom .phantom-narration > div + div { border-left-color:#b9ad9c35; }
.card-phantom .phantom-narration span { color:#bfb5a6; }
.card-phantom .phantom-narration strong { color:#f0ece2; }
.card-phantom .phantom-chapter-heading { color:#665f56; }
.card-phantom .phantom-chapter-heading button { color:#38342f; text-decoration:underline; text-decoration-color:#9b9182; text-underline-offset:3px; }
.card-phantom .phantom-chapters button { border-color:#cfc5b6; border-radius:4px; background:#e7e0d3; color:#39352f; font-family:Georgia,serif; }
.card-phantom .phantom-chapters small { color:#786f64; font-family:ui-monospace,Consolas,monospace; }
.card-phantom .phantom-chapters button[aria-pressed="true"] { border-color:#595249; background:#d9cfbf; color:#231f1a; box-shadow:inset 0 0 0 1px #595249; }
.card-phantom .phantom-chapters button:hover { border-color:#595249; }
.card-phantom .phantom-feedback { color:#625b51; }
.card-phantom .phantom-expand { border-top-color:#cfc5b6; color:#302d29; font-family:Georgia,serif; }
.card-phantom .phantom-expand small { color:#6d665b; font-family:inherit; }
.card-phantom .card-footer { border-top-color:#d9d0c3; color:#5d564b; }
.card-phantom .card-links > a { color:#302d29; }
@media(max-width:650px) {
  .card-phantom .card-heading h2.project-heading { height:230px; }
  .card-phantom .card-heading > .project-intro { padding:16px 18px 22px; }
  .card-phantom .project-intro strong { font-size:23px; }
  .phantom-demo { padding:0 18px 24px; }
  .phantom-film-top { padding:12px; font-size:10px; }
  .phantom-narration { padding:8px; gap:4px; }
  .phantom-narration > div { padding:8px; }
  .phantom-narration strong { font-size:13px; }
  .phantom-watch > span { width:42px; height:42px; margin-bottom:0; font-size:16px; }
  .phantom-watch b { font-size:12px; }
  .phantom-watch small { display:none; }
  .phantom-chapters button { gap:5px; font-size:13px; }
  .phantom-video-dialog { padding:16px; width:calc(100% - 20px); }
  .phantom-video-dialog h2 { font-size:21px; }
  .phantom-concept .phantom-top { padding-inline:12px; font-size:10px; }
  .phantom-actions button { padding-inline:6px; font-size:12px; }
}
@media(max-width:350px) {
  .phantom-demo { padding-inline:12px; }
  .phantom-chapters small { display:none; }
}

.phantom-feedback:empty { display:none; }