/* Screen presentation only. Existing readable print styles remain untouched. */
@media screen {
  :root {color-scheme:dark;--canvas:#050505;--paper:#101114;--ink:#f5f6f7;--muted:#bfc3ca;--subtle:#a0a3aa;--accent:#e3e5e8;--accent-soft:#23252a;--side:#151619;--line:#ffffff26;}
  body {font-family:'Segoe UI',Arial,Helvetica,sans-serif;}
  .page {box-shadow:0 24px 80px #0006;}
  .top::after {content:'FJR.';font-size:18px;font-style:italic;}
  .skill {color:#e3e5e8;}
  .page {border-color:#d9dde359;border-radius:24px;box-shadow:inset 1px 1px 2px #ffffffbd,0 0 16px #ffffff10;}
  .top,.project,.skill {
    background:linear-gradient(135deg,#f0f3f54d,#ffffff0b 65%),#080a0c;
    border-color:#d9dde359;box-shadow:inset 1px 1px 2px #ffffffbd,0 0 16px #ffffff10;
  }
  .projects {gap:12px;}
  .project {border:1px solid #d9dde359;border-radius:16px;padding:14px;}
  .skill {border-radius:20px;}
  a:focus-visible {outline:2px solid #f5f6f7;outline-offset:4px;}
  .project:focus-within {border-color:#edf0f3a6;box-shadow:inset 1px 1px 2px #ffffffe6,0 0 24px #ffffff1c;}
  @media(hover:hover) and (pointer:fine) {
    .project {transition:translate 240ms ease,border-color 220ms ease,box-shadow 220ms ease;}
    .project:hover {border-color:#edf0f3a6;box-shadow:inset 1px 1px 2px #ffffffe6,0 0 24px #ffffff1c;}
  }
  @media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
    .project:hover {translate:0 -3px;}
  }
}
@media print {
  :root {color-scheme:light;--canvas:#fff;--paper:#fff;--ink:#151619;--muted:#4e5259;--subtle:#5b6068;--accent:#24272d;--accent-soft:#eeeeef;--side:#f5f5f5;--line:#ccc;}
  .skill {color:#30343b;}
  .top::after {content:'FJR.';font-size:18px;font-style:italic;}
}