/* Open windows on a connected desktop. Modal styling remains in personal.css. */
.personal-edition {
  background: #243449; isolation: isolate;
  --grid-line: #80b8e8; --grid-light: #c5edff;
}
.personal-edition.dark-theme { background: #101b2b; }
.electrical-grid { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  background-image: linear-gradient(#91bfe419 1px,transparent 1px),linear-gradient(90deg,#91bfe419 1px,transparent 1px),radial-gradient(ellipse at 50% 30%,#45627b55,transparent 75%);
  background-size: 48px 48px,48px 48px,100% 100%; }
.electrical-grid::after { content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(circle,#c2e8ff88 1px,transparent 2px); background-size: 48px 48px;
  animation: grid-breathe 5s ease-in-out infinite; }
.electrical-grid svg { width: 100%; height: 100%; }
.grid-wire,.grid-current { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.grid-wire { stroke: var(--grid-line); stroke-width: 1.5; opacity: .4; }
.grid-current { stroke: var(--grid-light); stroke-width: 2.5; stroke-dasharray: 36 300;
  filter: drop-shadow(0 0 5px #86cfff); animation: grid-flow 9s linear infinite; }
.grid-junctions { fill: #d3f1ff; filter: drop-shadow(0 0 7px #7bc9ff); animation: grid-breathe 5s ease-in-out infinite; }
@keyframes grid-flow { to { stroke-dashoffset: -672; } }
@keyframes grid-breathe { 0%,100% { opacity: .25; } 50% { opacity: .85; } }
.personal-edition .app-bar { width: min(78rem,calc(100% - 3rem)); border-radius: 6px; top: .75rem; box-shadow: 4px 4px 0 #101b2b88; }
.grid-toggle { margin-left: auto; min-height: 2.75rem; padding: .4rem .65rem; font: inherit; font-size: .75rem;
  color: var(--ink); background: var(--paper); border: 1px solid var(--rule); border-radius: 3px; cursor: pointer; }
.grid-toggle[hidden] { display: none; }
.personal-edition main { position: relative; display: grid; grid-template-columns: repeat(12,minmax(0,1fr));
  align-items: start; gap: 4.5rem 2rem; width: min(78rem,calc(100% - 3rem)); margin: 3rem auto;
  padding: 0; background: transparent; border: 0; box-shadow: none; overflow: visible; }
.personal-edition main > :is(#home,#projects,#experience,#about,#credentials,#room,#contact) { position: relative; z-index: 1; grid-column: 1 / -1;
  padding: 4rem 1.75rem 1.75rem; margin: 0; min-width: 0; border: 1px solid var(--rule); border-radius: 7px;
  background: var(--paper); box-shadow: 5px 5px 0 #101b2b80,0 16px 36px #07111d40; scroll-margin-top: 7rem; }
.personal-edition main > .portfolio-section::before { content: attr(data-window-title); display: flex; align-items: center;
  position: absolute; top: 0; left: 0; right: 0; height: 2.6rem; padding: 0 1rem;
  border-bottom: 1px solid var(--rule); border-radius: 6px 6px 0 0; background: var(--panel);
  color: var(--ink); font-size: .75rem; font-weight: 700; letter-spacing: .04em; }
.personal-edition main > .portfolio-section::after { content: ''; position: absolute; right: 1rem; top: 1rem;
  width: 2rem; height: .6rem; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); pointer-events: none; }
.personal-edition main > #home { grid-column: 1 / 9; }
.personal-edition main > #projects { grid-column: 9 / -1; margin-top: 5rem; }
.personal-edition main > #experience { grid-column: 2 / 12; }
.personal-edition main > #about { grid-column: 1 / 7; }
.personal-edition main > #credentials { grid-column: 7 / -1; margin-top: 4rem; }
.personal-edition main > #room { grid-column: 3 / 10; }
.personal-edition main > #contact { grid-column: 2 / 12; }
.personal-edition main > #home .opening-note { display: none; }
.personal-edition main > #home .intro-content { grid-template-columns: minmax(0,1fr) 8rem; }
.personal-edition main > #about .personal-layout { grid-template-columns: 1fr; }
.personal-edition main > #about .personal-photo { display: flex; align-items: center; gap: 1rem; }
.personal-edition main > #about .personal-photo img { width: 5rem; }
.personal-edition main > #credentials .credentials-grid { grid-template-columns: 1fr; }
.personal-edition main > #room .section-heading { max-width: 32rem; }
.personal-edition main > .portfolio-section:target { border-color: #75acd3; box-shadow: 0 0 0 3px #8ecbff55,5px 5px 0 #101b2b80; }
.desktop-connections { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.desktop-wire { fill: none; stroke: #9bc9eb; stroke-width: 1.5; opacity: .5; }
.desktop-current { fill: none; stroke: #dbf5ff; stroke-width: 2.5; stroke-dasharray: 22 180;
  filter: drop-shadow(0 0 5px #81caff); animation: connection-flow 6s linear infinite; }
.desktop-port { fill: #d6f2ff; stroke: #77bdef; stroke-width: 2; filter: drop-shadow(0 0 5px #81caff); }
@keyframes connection-flow { to { stroke-dashoffset: -404; } }
.personal-edition footer p,.personal-edition footer a { color: #d7e7f6; }
.grid-paused :is(.grid-current,.grid-junctions,.desktop-current),.grid-paused .electrical-grid::after { animation-play-state: paused; }
html:is(.project-modal-open,.room-modal-open) :is(.grid-current,.grid-junctions,.desktop-current),
html:is(.project-modal-open,.room-modal-open) .electrical-grid::after { animation-play-state: paused; }
@media (max-width: 64em) {
  .personal-edition main { gap: 3.5rem 1.5rem; }
  .personal-edition main > #home { grid-column: 1 / -1; }
  .personal-edition main > #projects { grid-column: 4 / -1; margin-top: 0; }
  .personal-edition main > #experience { grid-column: 1 / -1; }
  .personal-edition main > #about { grid-column: 1 / 11; }
  .personal-edition main > #credentials { grid-column: 2 / -1; margin-top: 0; }
}
@media (max-width: 40em) {
  .personal-edition .app-bar { width: calc(100% - 1.5rem); border: 1px solid var(--rule); top: .5rem; }
  .personal-edition main { width: calc(100% - 2.5rem); margin: 2.5rem .75rem 2.5rem 1.75rem; gap: 2.75rem; grid-template-columns: minmax(0,1fr); }
  .personal-edition main > :is(#home,#projects,#experience,#about,#credentials,#room,#contact) { grid-column: 1; margin: 0; padding: 3.6rem 1rem 1.25rem; }
  .personal-edition main > #home .intro-content { grid-template-columns: minmax(0,1fr) 4.5rem; }
  .personal-edition main > #home .intro-links { margin-right: 0; }
  .personal-edition .role-meta span { display: block; margin: .25rem 0 0; }
  .grid-current { stroke-dasharray: 24 210; }
}
@media (prefers-reduced-motion: reduce) {
  .grid-current,.grid-junctions,.desktop-current,.electrical-grid::after { animation: none; }
  .grid-toggle { display: none; }
}
@media print {
  .electrical-grid,.desktop-connections,.grid-toggle { display: none; }
  .personal-edition main { display: block; width: 100%; margin: 0; }
  .personal-edition main > .portfolio-section { margin: 1rem 0 !important; box-shadow: none; break-inside: avoid; }
}

/* Shared bevels and engraved details across the desktop chrome. */
.personal-edition { --edge-light: #ffffffd9; --edge-dark: #8193a9; --pressed: #c5d9ee; }
.personal-edition.dark-theme { --edge-light: #61748e; --edge-dark: #111a27; --pressed: #364e69; }
.personal-edition .app-bar {
  min-height: 3.6rem; padding: .35rem .65rem; gap: .6rem; border: 1px solid var(--ink); border-radius: 4px;
  box-shadow: inset 1px 1px 0 var(--edge-light),inset -1px -1px 0 var(--edge-dark),3px 3px 0 #0b172aaa,0 7px 18px #07111d35;
}
.personal-edition .app-brand { padding: 0 .4rem; flex: 0 0 auto; }
.personal-edition .app-brand img { width: 3.5rem; height: 2.6rem; }
.menu-spacer { flex: 1; min-width: 0; display: flex; justify-content: flex-end; margin: 0 .5rem; }
.menu-notch { width: 1rem; height: .6rem; margin-right: .4rem; border-right: 2px solid var(--rule); border-bottom: 2px solid var(--rule); transform: skewX(-30deg); opacity: .65; }
.personal-edition .app-bar :is(.theme-toggle,.grid-toggle) {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 2.75rem;
  width: 2.75rem; height: 2.75rem; min-height: 2.75rem; margin: 0; padding: .65rem;
  background: var(--paper); border: 1px solid var(--rule); border-radius: 2px;
  box-shadow: inset 1px 1px 0 var(--edge-light),inset -1px -1px 0 var(--edge-dark),1px 1px 0 var(--edge-dark);
}
.personal-edition .app-bar .grid-toggle[hidden] { display: none; }
.app-bar button svg { display: block; width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.app-bar .theme-toggle .theme-sun,.app-bar .grid-toggle .grid-play-icon { display: none; }
.dark-theme .app-bar .theme-toggle .theme-moon,.grid-paused .app-bar .grid-toggle .grid-pause-icon { display: none; }
.dark-theme .app-bar .theme-toggle .theme-sun,.grid-paused .app-bar .grid-toggle .grid-play-icon { display: block; }
.personal-edition .app-bar button:hover { background: var(--accent); }
.personal-edition .app-bar button:active { transform: translate(1px,1px); box-shadow: inset 1px 1px 0 var(--edge-dark); }
.personal-edition main > :is(#home,#projects,#experience,#about,#credentials,#room,#contact) {
  border-radius: 4px; border-color: var(--ink);
  box-shadow: inset 2px 2px 0 var(--edge-light),inset -2px -2px 0 var(--edge-dark),5px 5px 0 #0b172ab3,0 12px 25px #07111d40;
}
.personal-edition main > .window-finished::before,.personal-edition main > .window-finished::after { display: none; }
.desktop-titlebar {
  position: absolute; top: 3px; left: 3px; right: 3px; height: 2.5rem;
  display: flex; align-items: center; gap: .6rem; padding: 0 .75rem;
  color: var(--ink); background: var(--panel); border-bottom: 1px solid var(--rule);
  box-shadow: 0 1px 0 var(--edge-light); border-radius: 1px 1px 0 0;
  font-size: .75rem; font-weight: 700; line-height: 1.4;
}
.desktop-titlebar > svg { flex: 0 0 1rem; width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.desktop-titlebar > span:not(.window-grooves) { flex-shrink: 0; }
.personal-edition main > .window-finished > .section-heading > .chapter,
.personal-edition main > .window-finished > .Contact-me > .chapter { display: none; }
.personal-edition main > .window-finished:is(:focus-within,:target) > .desktop-titlebar { background: var(--accent); }
.personal-edition main > .window-finished .experience-list {
  background: var(--paper); border: 1px solid var(--edge-dark); border-radius: 2px;
  box-shadow: inset 1px 1px 0 var(--edge-dark),1px 1px 0 var(--edge-light);
}
.personal-edition main > .window-finished .experience-row summary { padding: 1rem; }
.personal-edition main > .window-finished .experience-row summary:hover { background: var(--panel); }
.personal-edition main > .window-finished :is(.tool-drawer,.demo-drawer) {
  border-radius: 2px; box-shadow: inset 1px 1px 0 var(--edge-dark),1px 1px 0 var(--edge-light);
}
.personal-edition main > #credentials .credential {
  margin-bottom: .75rem; padding: 1rem; border: 1px solid var(--rule); border-radius: 2px;
  background: var(--panel); box-shadow: inset 1px 1px 0 var(--edge-light),inset -1px -1px 0 var(--edge-dark);
}
.personal-edition main > #credentials .certification { background: var(--accent); border-left: 4px solid var(--ink); }
.personal-edition main > .portfolio-section :is(.intro-links a,.text-link):not(dialog *) {
  border-radius: 2px; box-shadow: inset 1px 1px 0 var(--edge-light),inset -1px -1px 0 var(--edge-dark),2px 2px 0 var(--shadow);
}
.personal-edition main > .portfolio-section :is(.intro-links a,.text-link):not(dialog *):active {
  transform: translate(1px,1px); background: var(--pressed); box-shadow: inset 1px 1px 0 var(--edge-dark);
}
.personal-edition nav.app-dock {
  padding: .5rem; border-radius: 4px;
  box-shadow: inset 1px 1px 0 var(--edge-light),inset -1px -1px 0 var(--edge-dark),4px 4px 0 #0b172aaa,0 8px 24px #07111d66;
}
.personal-edition .app-dock ul { gap: .35rem; }
.personal-edition .app-dock li a {
  border: 1px solid var(--rule); border-radius: 2px; background: var(--paper);
  box-shadow: inset 1px 1px 0 var(--edge-light),inset -1px -1px 0 var(--edge-dark);
}
.personal-edition .app-dock li a:hover { background: var(--accent); }
.personal-edition .app-dock li a[aria-current],.personal-edition .app-dock li a:active {
  background: var(--pressed); border-color: var(--edge-dark); box-shadow: inset 2px 2px 0 var(--edge-dark),inset -1px -1px 0 var(--edge-light);
}
.personal-edition .app-dock .floating-music {
  margin: 0 0 .5rem; padding: .3rem; border: 1px solid var(--rule); background: var(--paper);
  box-shadow: inset 1px 1px 0 var(--edge-dark),1px 1px 0 var(--edge-light);
}
.personal-edition .floating-music button:not(.floating-music-copy) { border-radius: 2px; }
@media (max-width: 40em) {
  .desktop-titlebar { gap: .4rem; padding: 0 .6rem; }
  .desktop-titlebar > span:not(.window-grooves) { flex-shrink: 1; }
  .menu-spacer { margin: 0 .15rem; }
  .personal-edition .app-dock ul { gap: .2rem; }
  .personal-edition nav.app-dock { padding: .4rem; }
}
@media (prefers-reduced-motion: reduce) { .personal-edition .app-bar .grid-toggle { display: none; } }

/* Recessed nameplates and illuminated brackets replace the window stripes. */
.personal-edition main > .window-finished > .desktop-titlebar {
  top: 4px; left: 4px; right: 4px; min-height: 2.65rem; height: auto; padding: .35rem .6rem;
  gap: .75rem; background: transparent; border-bottom: 1px solid var(--rule);
  box-shadow: 0 1px 0 var(--edge-light);
}
.desktop-titlebar > .window-nameplate {
  display: inline-flex; align-items: center; gap: .5rem; min-width: 0; max-width: calc(100% - 1.75rem);
  padding: .25rem .5rem; background: var(--panel); border: 1px solid var(--rule); border-radius: 2px;
  box-shadow: inset 1px 1px 0 var(--edge-dark),inset -1px -1px 0 var(--edge-light);
  font-size: .75rem; line-height: 1.4;
}
.window-nameplate svg { flex: 0 0 1rem; width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.window-nameplate > span { min-width: 0; overflow-wrap: anywhere; }
.desktop-titlebar > .window-notch { margin-left: auto; flex: 0 0 1rem; height: .6rem;
  border-right: 2px solid var(--rule); border-bottom: 2px solid var(--rule); transform: skewX(-30deg); }
.personal-edition main > .window-finished::before,
.personal-edition main > .window-finished::after {
  content: ''; display: block; position: absolute; width: 1.25rem; height: 1.25rem;
  padding: 0; background: transparent; pointer-events: none; border: 0; border-radius: 0;
  color: #a5dfff; filter: drop-shadow(0 0 4px #80caff99);
}
.personal-edition main > .window-finished::before {
  top: -2px; left: -2px; right: auto; border-top: 2px solid currentColor; border-left: 2px solid currentColor;
}
.personal-edition main > .window-finished::after {
  top: auto; left: auto; right: -2px; bottom: -2px; border-bottom: 2px solid currentColor; border-right: 2px solid currentColor;
}
.personal-edition main > .window-finished:is(:focus-within,:target) .window-nameplate {
  background: var(--accent); border-color: var(--ink); box-shadow: inset 1px 1px 0 var(--edge-dark),0 0 8px #80caff55;
}
.personal-edition main > .window-finished:is(:focus-within,:target)::before,
.personal-edition main > .window-finished:is(:focus-within,:target)::after { color: #e1f7ff; filter: drop-shadow(0 0 6px #80caff); }
@media (max-width: 40em) {
  .personal-edition main > .window-finished > .desktop-titlebar { padding-left: .4rem; padding-right: .4rem; gap: .4rem; }
  .desktop-titlebar > .window-nameplate { padding: .2rem .35rem; gap: .35rem; }
}

/* Neutral header surfaces retain the recessed details and illuminated frame. */
.personal-edition main > .window-finished > .desktop-titlebar {
  background: transparent; border-bottom-color: var(--rule);
  box-shadow: 0 1px 0 var(--edge-light);
}
.personal-edition .app-bar {
  background: var(--paper);
  box-shadow: inset 1px 1px 0 var(--edge-light),inset -1px -1px 0 var(--edge-dark),
    0 0 0 1px #a5dfff40,0 0 14px #80caff25,3px 3px 0 #0b172aaa;
}
.personal-edition .app-bar .app-brand {
  padding: 0 .55rem; background: var(--panel); border: 1px solid var(--rule); border-radius: 2px;
  box-shadow: inset 1px 1px 0 var(--edge-dark),inset -1px -1px 0 var(--edge-light);
}
.personal-edition .app-bar::before,.personal-edition .app-bar::after {
  content: ''; position: absolute; width: 1rem; height: 1rem; pointer-events: none;
  color: #a5dfff; filter: drop-shadow(0 0 4px #80caff99);
}
.personal-edition .app-bar::before { left: -2px; top: -2px; border-top: 2px solid currentColor; border-left: 2px solid currentColor; }
.personal-edition .app-bar::after { right: -2px; bottom: -2px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; }
.personal-edition main > .window-finished:is(:focus-within,:target) > .desktop-titlebar { background: transparent; }

/* Compact floating toolbar with a section readout. */
.personal-edition .app-bar { width: min(37.5rem,calc(100% - 1.5rem)); gap: .55rem; padding: .4rem .6rem; }
.header-location {
  display: flex; flex: 1; flex-direction: column; justify-content: center; min-width: 0;
  min-height: 2.75rem; padding: .25rem .65rem; color: var(--ink); background: var(--paper);
  border: 1px solid var(--rule); border-radius: 2px;
  box-shadow: inset 1px 1px 0 var(--edge-dark),inset -1px -1px 0 var(--edge-light);
}
.header-location-label { font-size: .75rem; line-height: 1.25; opacity: .7; }
#header-section-name { font-size: .875rem; line-height: 1.4; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 25em) {
  .personal-edition .app-bar { gap: .35rem; padding: .35rem .4rem; }
  .personal-edition .app-bar .app-brand { padding: 0 .25rem; }
  .personal-edition .app-bar .app-brand img { width: 2.75rem; }
  .header-location { padding-left: .4rem; padding-right: .4rem; }
  #header-section-name { font-size: .75rem; }
}

/* Cool emitted light complements the blue-grey desktop without washing out text. */

/* Matching emitted light and an electrical backdrop for both modal surfaces. */
/* One shallow, static glimpse into the three projects. */
/* A small shelf beside the room invitation, using the existing cover crops. */
.personal-edition main > #room { display: grid; grid-template-columns: minmax(0,1fr) 11rem; gap: 0 1.25rem; align-items: center; }
.personal-edition main > #room > .section-heading { grid-column: 1; grid-row: 1; }
.personal-edition main > #room > .room-launcher { grid-column: 1; grid-row: 2; justify-self: start; }
.personal-edition .room-preview-covers { grid-column: 2; grid-row: 1 / 3; display: flex; align-items: center; justify-content: center; list-style: none; margin: 0; padding: .5rem; min-width: 0; }
.room-preview-covers > li { flex: 0 0 4rem; width: 4rem; padding: 3px; background: var(--panel); border: 1px solid var(--rule); border-radius: 2px; box-shadow: inset 1px 1px 0 var(--edge-light),2px 3px 0 #0b172a55; }
.room-preview-covers > li + li { margin-left: -.5rem; }
.room-preview-covers > li:first-child { transform: rotate(-5deg); }
.room-preview-covers > li:nth-child(2) { position: relative; z-index: 1; transform: translateY(-3px); }
.room-preview-covers > li:last-child { transform: rotate(5deg); }
.room-preview-covers .cover-art { width: 100%; border: 0; border-radius: 0; box-shadow: none; }
@media (max-width: 40em) {
  .personal-edition main > #room { grid-template-columns: minmax(0,1fr); }
  .personal-edition main > #room > .room-preview-covers { grid-column: 1; grid-row: 2; justify-content: flex-start; padding: .35rem .35rem .75rem; margin-bottom: .5rem; }
  .personal-edition main > #room > .room-launcher { grid-row: 3; }
  .room-preview-covers > li { flex-basis: 3.75rem; width: 3.75rem; }
}
.personal-edition .work-previews { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .5rem; list-style: none; padding: 0; margin: 1rem 0 1.2rem; }
.work-previews > li { min-width: 0; }
.work-preview { margin: 0; min-width: 0; padding: 3px; background: var(--panel); border: 1px solid var(--rule); border-radius: 2px; box-shadow: inset 1px 1px 0 var(--edge-light),2px 2px 0 var(--shadow); }
.personal-edition .work-preview figcaption { margin: 0; padding: .2rem .1rem .3rem; font-size: .75rem; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.work-preview-screen { display: grid; place-items: center; position: relative; height: clamp(3.5rem,7vw,5rem); overflow: hidden; background: #101b2b; border: 1px solid var(--rule); }
.work-preview-screen img { display: block; width: 100%; height: 100%; object-fit: cover; }
.work-preview-screen img[hidden],.preview-fallback[hidden] { display: none; }
.preview-fallback { color: #b4d4ff; font-size: .75rem; }
@media (max-width: 40em) {
  .work-preview-screen { height: 3.75rem; }
  .personal-edition .work-previews { gap: .4rem; }
}

/* Modal windows share the desktop's paper, bevels, nameplates and corners. */
.personal-edition .projects-dialog .screening.modal-window,
.personal-edition #room-dialog.room-dialog {
  border: 1px solid var(--ink); border-radius: 4px; background: var(--paper);
  box-shadow: inset 2px 2px 0 var(--edge-light),inset -2px -2px 0 var(--edge-dark),
    0 0 0 1px var(--window-glow-near),0 0 12px var(--window-glow-near),
    0 0 30px var(--window-glow),5px 5px 0 #0b172a80,0 12px 25px #07111d40;
}
.modal-titlebar {
  display: flex; align-items: center; gap: .75rem; min-width: 0; min-height: 2.65rem;
  padding: .35rem .6rem; border-bottom: 1px solid var(--rule);
  box-shadow: 0 1px 0 var(--edge-light); background: transparent; color: var(--ink);
}
.projects-dialog .modal-titlebar { grid-column: 1 / -1; align-self: start; width: 100%; }
.modal-nameplate {
  display: inline-flex; align-items: center; gap: .5rem; min-width: 0;
  padding: .25rem .5rem; background: var(--panel); border: 1px solid var(--rule); border-radius: 2px;
  box-shadow: inset 1px 1px 0 var(--edge-dark),inset -1px -1px 0 var(--edge-light);
  font-size: .75rem; font-weight: 700; line-height: 1.4;
}
.modal-nameplate svg { flex: 0 0 1rem; width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.modal-nameplate > span { min-width: 0; overflow-wrap: anywhere; }
.modal-notch { margin-left: auto; flex: 0 0 1rem; height: .6rem; border-right: 2px solid var(--rule); border-bottom: 2px solid var(--rule); transform: skewX(-30deg); }
.projects-dialog .modal-window .screening-caption > .chapter { display: none; }
.personal-edition .room-titlebar { margin: 3px 3px 0; padding: .35rem .6rem; }
.room-titlebar .modal-nameplate h2 { font-size: .875rem; }
.room-titlebar #close-room { margin-left: 0; border-radius: 2px; box-shadow: inset 1px 1px 0 var(--edge-light),inset -1px -1px 0 var(--edge-dark); }
.projects-dialog .modal-window::before,.projects-dialog .modal-window::after,
.personal-edition .room-dialog::before,.personal-edition .room-dialog::after {
  content: ''; position: absolute; width: 1.25rem; height: 1.25rem; z-index: 4; pointer-events: none;
  color: #a5dfff; filter: drop-shadow(0 0 4px #80caff99);
}
.projects-dialog .modal-window::before,.personal-edition .room-dialog::before {
  top: 0; left: 0; border-top: 2px solid currentColor; border-left: 2px solid currentColor;
}
.projects-dialog .modal-window::after,.personal-edition .room-dialog::after {
  bottom: 0; right: 0; border-bottom: 2px solid currentColor; border-right: 2px solid currentColor;
}
.projects-dialog .modal-window:focus-within .modal-nameplate { border-color: var(--ink); box-shadow: inset 1px 1px 0 var(--edge-dark),0 0 8px #80caff55; }
.projects-dialog .modal-window:focus-within::before,.projects-dialog .modal-window:focus-within::after {
  color: #e1f7ff; filter: drop-shadow(0 0 6px #80caff);
}
.projects-dialog .modal-window .text-link { border-radius: 2px; box-shadow: inset 1px 1px 0 var(--edge-light),inset -1px -1px 0 var(--edge-dark),2px 2px 0 var(--shadow); }
.projects-dialog .modal-window .text-link:active { transform: translate(1px,1px); box-shadow: inset 1px 1px 0 var(--edge-dark); }
@media (max-width: 40em) {
  .modal-titlebar { gap: .4rem; padding-left: .4rem; padding-right: .4rem; }
  .modal-nameplate { gap: .35rem; padding: .2rem .35rem; }
}
@media print {
  .personal-edition .projects-dialog .modal-window,.personal-edition .room-dialog { box-shadow: none; }
}
.personal-edition .projects-dialog .screening,
.personal-edition .room-dialog {
  box-shadow: inset 1px 1px 0 var(--edge-light),inset -1px -1px 0 var(--edge-dark),
    0 0 0 1px var(--window-glow-near),0 0 12px var(--window-glow-near),
    0 0 30px var(--window-glow),0 18px 40px #0006;
}
.personal-edition .projects-dialog .screening:focus-within {
  box-shadow: inset 1px 1px 0 var(--edge-light),0 0 0 1px #c4f1ff,
    0 0 16px #9adeff80,0 0 40px #67beff50,0 18px 40px #0006;
}
/* One full-viewport circuit image and one grid treatment for every surface. */
/* Receiving power is brief feedback; content controls retain their behaviour. */
.desktop-signal { fill: none; stroke: #e1f8ff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 12 112; filter: drop-shadow(0 0 6px #70cfff); pointer-events: none; }
.personal-edition main > :is(#home,#projects,#experience,#about,#credentials,#room,#contact).window-energized {
  box-shadow: inset 2px 2px 0 var(--edge-light),inset -2px -2px 0 var(--edge-dark),0 0 0 1px #c8f3ff,0 0 18px #8edaff99,0 0 42px #64bfff55,5px 5px 0 #0b172a80;
}
.personal-edition main > .window-finished.window-energized .window-nameplate { border-color: #87c5ee; box-shadow: inset 1px 1px 0 var(--edge-dark),0 0 9px #80caff66; }
.personal-edition main > .window-finished.window-energized::before,
.personal-edition main > .window-finished.window-energized::after { color: #ecfbff; filter: drop-shadow(0 0 7px #80caff); }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .personal-edition main > .window-finished { transition: transform .18s ease,box-shadow .22s ease; }
  .personal-edition main > .window-finished:hover:not(:has(dialog[open])) { transform: translateY(-3px); }
  .personal-edition main > .window-finished:hover::before,
  .personal-edition main > .window-finished:hover::after { color: #ecfbff; filter: drop-shadow(0 0 7px #80caff); }
}
@media (prefers-reduced-motion: reduce) { .desktop-signal { display: none; } }
.electrical-grid,.projects-dialog::backdrop,.room-dialog::backdrop {
  --circuit-image: url('/images/modal-circuit.svg');
  background-color: #243449;
  background-image: var(--circuit-image),
    radial-gradient(circle,#c2e8ff30 1px,transparent 2px),
    linear-gradient(#91bfe410 1px,transparent 1px),
    linear-gradient(90deg,#91bfe410 1px,transparent 1px),
    radial-gradient(ellipse at 50% 35%,#54758e65,transparent 65%),
    radial-gradient(ellipse at center,transparent 40%,#07101d88 100%);
  background-size: 100% 100%,48px 48px,48px 48px,48px 48px,100% 100%,100% 100%;
  background-position: center,0 0,0 0,0 0,center,center;
  background-repeat: no-repeat,repeat,repeat,repeat,no-repeat,no-repeat;
  animation: none; filter: none;
}
.electrical-grid::after { display: none; }
.dark-theme .electrical-grid,.dark-theme .projects-dialog::backdrop,.dark-theme .room-dialog::backdrop { background-color: #101b2b; }
.grid-paused .electrical-grid,.grid-paused .projects-dialog::backdrop,.grid-paused .room-dialog::backdrop {
  --circuit-image: url('/images/modal-circuit-still.svg');
}
@media (prefers-reduced-motion: reduce) {
  .electrical-grid,.projects-dialog::backdrop,.room-dialog::backdrop { --circuit-image: url('/images/modal-circuit-still.svg'); }
}
@media print {
  .personal-edition .projects-dialog .screening,.personal-edition .room-dialog { box-shadow: none; }
}
.personal-edition { --window-glow: #72caff45; --window-glow-near: #b1eaff65; }
.personal-edition.dark-theme { --window-glow: #64bfff38; --window-glow-near: #8eddff70; }
.personal-edition main > :is(#home,#projects,#experience,#about,#credentials,#room,#contact) {
  box-shadow: inset 2px 2px 0 var(--edge-light),inset -2px -2px 0 var(--edge-dark),
    0 0 0 1px var(--window-glow-near),0 0 12px var(--window-glow-near),
    0 0 30px var(--window-glow),5px 5px 0 #0b172a80,0 12px 25px #07111d40;
}
.personal-edition main > .window-finished:is(:focus-within,:target) {
  box-shadow: inset 2px 2px 0 var(--edge-light),inset -2px -2px 0 var(--edge-dark),
    0 0 0 1px #c4f1ff,0 0 16px #9adeff80,0 0 40px #67beff50,5px 5px 0 #0b172a80;
}

@media print {
  .personal-edition main > .portfolio-section,.personal-edition .room-dialog,.projects-dialog .screening { box-shadow: none; }
}