/* Shared object → camera → reading-panel rhythm, informed by Evan Lin's MIT
 * personal-website/002. The complete Blender artwork and window plates stay intact.
 * Load last: this layer unifies existing modules without replacing their content. */

/* Screens are transparent hit areas. Their pixels already belong to the scene. */
#desk-app[data-style] :is(.dn-screen,.dw-clock,.dn-screen-art,.dc-screen-trigger) {
  background:transparent;
  box-shadow:none;
  border:0;
  border-radius:0;
  text-shadow:none;
  padding:0;
}
#desk-app[data-style] .dn-screen {
  display:block;
  width:100%;
  height:100%;
  gap:0;
}
#desk-app[data-style] .dn-screen-art {
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
}
#desk-app :is(.dc-screen-trigger,.dw-clock,.dn-screen-art)>*,
#desk-app .dn-screen-tabs {display:none}
#desk-app :is(.dn-screen,.dc-screen-trigger,.dw-clock,.dn-screen-art)::before,
#desk-app :is(.dn-screen,.dc-screen-trigger,.dw-clock,.dn-screen-art)::after {content:none}

#desk-app .desk-object {
  cursor:pointer;
  outline:1px solid transparent;
  outline-offset:-2px;
  transition:background-color 140ms ease,outline-color 140ms ease,box-shadow 140ms ease;
  -webkit-tap-highlight-color:transparent;
}
@media(hover:hover) and (pointer:fine) {
  #desk-app[data-style] .desk-object:hover {
    background-color:color-mix(in srgb,var(--dm-paper,#fff) 8%,transparent);
    outline-color:color-mix(in srgb,var(--dm-accent,#e6c9ea) 65%,white);
    box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--dm-paper,#fff) 35%,transparent);
  }
}
#desk-app[data-style] .desk-object:focus-visible {
  outline:2px solid var(--dm-accent,#e6c9ea);
  outline-offset:-2px;
  background-color:color-mix(in srgb,var(--dm-paper,#fff) 12%,transparent);
}
#desk-app[data-style] .desk-object:active {
  background-color:color-mix(in srgb,var(--dm-paper,#fff) 17%,transparent);
  outline-color:var(--dm-accent,#e6c9ea);
  box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--dm-ink,#333) 40%,transparent);
}
#desk-app .artboard.is-panning .desk-object {
  outline-color:transparent;
  box-shadow:none;
  background:transparent;
}

/* A nonmodal surface leaves the selected object and the rest of the desk usable. */
.desk-panel {
  --panel-pad:26px;
  --panel-bar-height:57px;
  --dp-paper:var(--dm-paper,#f4edf1);
  --dp-ink:var(--dm-ink,#352b40);
  --dp-muted:var(--dm-muted,#695a70);
  --dp-line:var(--dm-line,#a991ae);
  box-sizing:border-box;
  position:fixed;
  z-index:20;
  inset:88px 24px 24px auto;
  width:min(560px,46vw);
  height:calc(100dvh - 112px);
  max-width:calc(100vw - 48px);
  max-height:calc(100dvh - 112px);
  min-width:0;
  min-height:0;
  margin:0;
  padding:0;
  overflow:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:var(--dm-line,#a991ae) transparent;
  color-scheme:light;
  color:var(--dm-ink,#352b40);
  background-color:var(--dm-paper,#f4edf1);
  background-image:var(--dm-texture,none);
  background-size:var(--dm-size,400px 400px);
  background-attachment:local;
  border:var(--dm-rule,1px solid) var(--dm-line,#a991ae);
  border-radius:var(--dm-round,14px);
  box-shadow:var(--dm-shadow,0 3px 0 #0002),0 18px 58px #080b173b;
  font-family:'PingFang SC','Hiragino Sans GB','Microsoft YaHei',system-ui,sans-serif;
  font-size:14px;
  line-height:1.65;
  text-align:left;
  isolation:isolate;
  transform-origin:85% 30%;
}
.desk-panel[data-style=future] {color-scheme:dark}
.desk-panel[open] {display:block;animation:desk-panel-enter 320ms cubic-bezier(.2,.85,.25,1) both}
.desk-panel:not([open]) {display:none}
.desk-panel::backdrop {background:transparent;backdrop-filter:none}
.desk-panel :is(button,input,textarea,select) {font-family:inherit}
.desk-panel :is(img,svg) {max-width:100%}
.desk-panel :is(p,h2,h3,a) {overflow-wrap:anywhere}
.desk-panel .desk-panel-close-legacy {display:none}
.desk-panel-bar {
  position:sticky;
  z-index:5;
  top:0;
  display:flex;
  flex:0 0 auto;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:var(--panel-bar-height);
  padding:10px var(--panel-pad);
  border-bottom:1px solid var(--dm-line,#a991ae);
  background-color:var(--dm-paper,#f4edf1);
  background-image:var(--dm-texture,none);
  background-size:var(--dm-size,400px 400px);
}
.desk-panel-label {
  min-width:0;
  font:600 10px/1.5 ui-monospace,SFMono-Regular,Consolas,'PingFang SC',monospace;
  letter-spacing:.13em;
  color:var(--dm-muted,#695a70);
}
.desk-panel .desk-panel-back {
  display:inline-flex;
  flex:none;
  align-items:center;
  gap:7px;
  min-height:36px;
  padding:6px 11px;
  border:1px solid var(--dm-line,#a991ae);
  border-radius:var(--dm-round,8px);
  color:var(--dm-ink,#352b40);
  background:transparent;
  font-size:11px;
  font-weight:600;
  line-height:1.4;
  white-space:nowrap;
}
.desk-panel-back::before {content:'←';font-size:15px;font-weight:400}
.desk-panel :is(button,a):focus-visible {
  outline:2px solid var(--dm-accent,#835172);
  outline-offset:3px;
}
.desk-panel :is(button,.dn-story-title) {touch-action:manipulation}
.desk-panel button {
  transition:translate 120ms ease,box-shadow 120ms ease,background-color 120ms ease,border-color 120ms ease;
}
.desk-panel button:enabled:active {translate:1px 2px;box-shadow:none}
.desk-panel :is(.desk-panel-back,.dn-refresh,.dw-refresh,.dp-add,.dp-empty-add):enabled:hover {
  background-color:color-mix(in srgb,var(--dm-accent,#835172) 11%,var(--dm-paper,#f4edf1));
  border-color:var(--dm-accent,#835172);
}

/* Shared title hierarchy; each material keeps its own expressive lettering. */
.desk-panel :is(.dc-header,.dn-reader-header,.dw-heading,.dp-header) {
  padding:23px var(--panel-pad) 20px;
  gap:14px;
}
.desk-panel :is(.dc-brand,.dn-reader-header>div,.dw-heading>div,.dp-header>div) {min-width:0}
.desk-panel[data-style] :is(.dc-title,.dn-reader-header h2,.dw-heading h2,.dp-header h2) {
  font-family:var(--letter-face,var(--dm-title,Georgia,serif));
  font-weight:var(--letter-weight,var(--dm-title-weight,600));
  font-size:clamp(27px,2.6vw,36px);
  line-height:1.3;
  margin:4px 0 9px;
}
.desk-panel :is(.dc-eyebrow,.dn-eyebrow,.dw-kicker,.dp-eyebrow) {
  font-size:9px;
  line-height:1.5;
  letter-spacing:.12em;
  color:var(--dm-muted,#695a70);
  margin:0 0 6px;
}
.desk-panel :is(.dc-description,.dn-reader-intro,.dp-intro) {
  margin:0;
  font-size:12px;
  line-height:1.65;
  color:var(--dm-muted,#695a70);
}

/* News: the navigation remains below the shared return bar while scrolling. */
.desk-panel .dn-reader-tabs {
  top:var(--panel-bar-height);
  padding-inline:var(--panel-pad);
  gap:2px;
  scrollbar-width:thin;
}
.desk-panel[data-style] .dn-reader-tabs .dn-category {padding:12px 9px;font-size:12px}
.desk-panel .dn-reader-tabs .dn-category:first-child {margin-left:-9px}
.desk-panel .dn-reader-tabs .dn-category[aria-pressed=true]::after {left:9px;right:9px}
.desk-panel .dn-reader-meta {padding:15px var(--panel-pad) 0;gap:12px;align-items:flex-start}
.desk-panel .dn-update {min-width:0;font-size:10px}
.desk-panel .dn-refresh {flex:none;padding:5px 7px;border:1px solid transparent;border-radius:var(--dm-round,8px)}
.desk-panel .dn-notice {margin:12px var(--panel-pad) 0}
.desk-panel .dn-reader-items {padding-inline:var(--panel-pad)}
.desk-panel .dn-story {grid-template-columns:24px minmax(0,1fr) 12px;gap:12px;padding:20px 0}
.desk-panel .dn-story-title {font-size:15px;line-height:1.7}
.desk-panel .dn-story-meta {gap:8px 13px}
.desk-panel .dn-story-rank {font-size:20px}
.desk-panel .dn-reader-foot {padding:21px var(--panel-pad) 25px}

/* Weather: narrow panels wrap the clock and forecast instead of shrinking text. */
.desk-panel.dw-dialog>:is(.dw-detail-clock,.dw-status,.dw-metrics,.dw-forecast,.dw-days-section,.dw-foot) {
  margin-inline:var(--panel-pad);
}
.desk-panel .dw-detail-clock {flex-wrap:wrap;gap:22px;margin-top:10px;margin-bottom:23px}
.desk-panel[data-style] .dw-large-time {font-size:64px;letter-spacing:-2px;line-height:1.15}
.desk-panel[data-style] .dw-large-time span {font-size:23px;letter-spacing:0;margin-left:5px}
.desk-panel .dw-timezone {margin-top:7px}
.desk-panel .dw-hero-weather {min-width:0;grid-template-columns:46px auto;gap:0 10px}
.desk-panel .dw-large-icon {width:44px;height:44px}
.desk-panel[data-style] .dw-hero-temperature {font-size:32px;letter-spacing:0}
.desk-panel .dw-metrics {grid-template-columns:repeat(3,minmax(0,1fr));gap:19px 12px;padding:20px 0}
.desk-panel .dw-metrics>div {min-width:0}
.desk-panel .dw-metrics strong {font-size:14px;overflow-wrap:anywhere}
.desk-panel .dw-day {grid-template-columns:52px 25px minmax(0,1fr) auto;gap:10px}
.desk-panel .dw-section-heading>span {flex:none}
.desk-panel .dw-foot {align-items:flex-start;gap:14px;margin-bottom:24px}
.desk-panel .dw-foot>div {min-width:0;flex:1}
.desk-panel .dw-refresh {flex:none}

/* Gallery: the same paper, controls and density as the reading surfaces. */
.desk-panel .dp-toolbar {
  top:var(--panel-bar-height);
  padding:13px var(--panel-pad);
  gap:10px;
  background-color:var(--dm-paper,#f4edf1);
}
.desk-panel :is(.dp-count,.dp-photo-name,.dp-footer,.dp-footer .dp-format) {color:var(--dm-muted,#695a70)}
.desk-panel .dp-add {
  background:var(--dm-ink,#352b40);
  color:var(--dm-paper,#f4edf1);
  border:1px solid var(--dm-ink,#352b40);
  border-radius:var(--dm-round,8px);
}
.desk-panel .dp-add:enabled:hover {background:var(--dm-accent,#835172);color:var(--dm-paper,#f4edf1)}
.desk-panel .dp-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:19px 16px;padding:22px var(--panel-pad) 8px}
.desk-panel .dp-photo-open {background:var(--dm-paper,#f4edf1);border-color:var(--dm-line,#a991ae)}
.desk-panel .dp-photo-remove {color:var(--dm-muted,#695a70)}
.desk-panel .dp-empty {min-height:230px;padding:30px var(--panel-pad)}
.desk-panel .dp-camera-symbol {color:var(--dm-muted,#695a70);border-color:var(--dm-line,#a991ae)}
.desk-panel .dp-camera-symbol::before {border-color:var(--dm-line,#a991ae)}
.desk-panel .dp-camera-symbol::after {background:var(--dm-line,#a991ae)}
.desk-panel .dp-empty-add {color:var(--dm-accent,#835172);border-color:var(--dm-line,#a991ae)}
.desk-panel .dp-message {margin:15px var(--panel-pad) 0;color:var(--dm-ink,#352b40)}
.desk-panel .dp-footer {padding:22px var(--panel-pad) 25px}
.desk-panel .dp-undo {gap:12px;width:auto;margin-inline:var(--panel-pad);max-width:none;background:var(--dm-ink,#352b40);color:var(--dm-paper,#f4edf1)}
.desk-panel .dp-undo button {flex:none;color:var(--dm-paper,#f4edf1)}

/* Chat has one scrolling transcript, with the composer and return bar in view. */
.desk-panel.dc-dialog[open] {display:flex;flex-direction:column;overflow:hidden}
.desk-panel.dc-dialog .dc-sheet {height:auto;flex:1 1 auto;min-height:0;overflow:hidden}
.desk-panel .dc-header {padding-block:18px 16px}
.desk-panel .dc-title-row {gap:13px;flex-wrap:wrap}
.desk-panel .dc-header-actions {gap:8px;flex:none}
.desk-panel .dc-identity {font-size:10px;letter-spacing:.04em}
.desk-panel .dc-status-bar {padding:9px var(--panel-pad);gap:8px}
.desk-panel .dc-status-note {font-size:10px}
.desk-panel .dc-conversation {padding:22px var(--panel-pad);min-height:0}
.desk-panel .dc-welcome-text {font-size:14px;line-height:1.85}
.desk-panel .dc-welcome-mark {font-size:28px;margin-bottom:10px}
.desk-panel .dc-suggestions {grid-template-columns:repeat(2,minmax(0,1fr))}
.desk-panel .dc-suggestion {min-width:0;padding:11px 12px}
.desk-panel .dc-message-content {font-size:14px;line-height:1.85}
.desk-panel .dc-composer {padding:14px 18px 15px}
.desk-panel .dc-input-row {padding:10px 10px 10px 13px;gap:8px}
.desk-panel .dc-input {max-height:96px}
.desk-panel .dc-send,.desk-panel .dc-stop {min-width:65px;padding:8px 10px}
.desk-panel .dc-disclaimer {margin-top:9px;line-height:1.6}

/* Peer destinations remain available while the style footer steps away. */
#desk-app[data-panel-open] .controls {
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
#desk-app .controls {transition:opacity 180ms ease,visibility 180ms ease}
#desk-app .masthead {z-index:8}
#desk-app .view-tools .quiet-button {
  min-height:36px;
  transition:background-color 120ms ease,border-color 120ms ease,box-shadow 120ms ease,translate 120ms ease;
}
#desk-app .view-tools [aria-expanded=true] {
  background:var(--dm-paper,#f4edf1);
  color:var(--dm-ink,#352b40);
  border-color:var(--dm-accent,#835172);
  box-shadow:0 0 0 1px var(--dm-accent,#835172);
}
#desk-app .view-tools .quiet-button:active {translate:1px 2px;box-shadow:none}

@keyframes desk-panel-enter {
  from {opacity:0;transform:translateX(24px) rotate(.5deg)}
  to {opacity:1;transform:none}
}
@keyframes desk-panel-leave {
  from {opacity:1;transform:none}
  to {opacity:0;transform:translateX(18px)}
}
.desk-panel[open]:is(.is-closing,[data-closing=true]) {
  pointer-events:none;
  animation:desk-panel-leave 220ms ease both;
}

@media(max-width:899px) {
  #desk-app[data-panel-open] .artboard {bottom:calc(54dvh + 16px)}
  #desk-app .view-tools :is(#reset-view,#help-toggle) {display:none}
  #desk-app .masthead {gap:10px}
  #desk-app .view-tools {gap:5px;min-width:0}
  #desk-app .view-tools .quiet-button {padding-inline:11px;white-space:nowrap}
  .desk-panel {
    --panel-pad:20px;
    --panel-bar-height:51px;
    inset:auto 8px max(8px,env(safe-area-inset-bottom)) 8px;
    width:auto;
    max-width:none;
    height:54dvh;
    max-height:54dvh;
    transform-origin:50% 100%;
  }
  .desk-panel[open] {animation-name:desk-sheet-enter}
  .desk-panel[open]:is(.is-closing,[data-closing=true]) {animation-name:desk-sheet-leave}
  .desk-panel-bar {padding-block:7px}
  .desk-panel :is(.dc-header,.dn-reader-header,.dw-heading,.dp-header) {padding-block:18px 16px}
  .desk-panel[data-style] :is(.dc-title,.dn-reader-header h2,.dw-heading h2,.dp-header h2) {font-size:28px}
  .desk-panel .dc-header {padding-block:10px 9px;align-items:center}
  .desk-panel .dc-eyebrow,.desk-panel .dc-description {display:none}
  .desk-panel .dc-title {margin:0}
  .desk-panel .dc-status-bar {padding-block:6px}
  .desk-panel .dc-conversation {padding-block:15px}
  .desk-panel .dc-welcome {margin-bottom:16px}
  .desk-panel .dc-welcome-mark {font-size:24px;margin-bottom:6px}
  .desk-panel .dc-composer {padding:9px 14px 10px}
  .desk-panel .dc-input {max-height:72px}
  .desk-panel .dc-composer-meta {display:none}
  .desk-panel .dc-disclaimer {margin:6px 2px 0;font-size:9px}
  .desk-panel .dp-empty {min-height:190px;padding-block:24px}
  .desk-panel .dw-detail-clock {margin-top:4px;gap:18px}
  .desk-panel .dw-section-heading {align-items:baseline;flex-wrap:wrap;gap:5px}
  .desk-panel .dw-section-heading h3 {margin-bottom:10px}
  .desk-panel .dw-section-heading>span {margin-bottom:10px}
}
@keyframes desk-sheet-enter {
  from {opacity:0;transform:translateY(24px)}
  to {opacity:1;transform:none}
}
@keyframes desk-sheet-leave {
  from {opacity:1;transform:none}
  to {opacity:0;transform:translateY(18px)}
}
@media(max-width:380px) {
  #desk-app .masthead {padding-inline:16px;gap:8px}
  #desk-app .view-tools {gap:4px}
  #desk-app .view-tools .quiet-button {padding-inline:9px;font-size:10px}
  .desk-panel {--panel-pad:16px}
  .desk-panel-label {letter-spacing:.065em;font-size:9px}
  .desk-panel .desk-panel-back {padding-inline:8px;font-size:10px}
  .desk-panel .dc-status-note {display:none}
  .desk-panel .dc-title-row {gap:9px}
  .desk-panel .dc-identity {padding:4px 6px}
  .desk-panel .dc-suggestions {grid-template-columns:1fr}
  .desk-panel .dc-message-bubble {padding:11px 12px}
  .desk-panel .dc-input-row {gap:6px;padding-inline:10px}
  .desk-panel .dc-send,.desk-panel .dc-stop {min-width:58px;padding-inline:7px}
  .desk-panel .dw-foot {flex-wrap:wrap}
  .desk-panel .dw-metrics {grid-template-columns:repeat(2,minmax(0,1fr))}
  .desk-panel .dw-day {grid-template-columns:44px 23px minmax(0,1fr) auto;gap:7px;font-size:11px}
  .desk-panel .dw-day strong {font-size:12px}
  .desk-panel .dp-toolbar {flex-wrap:wrap}
  .desk-panel .dp-grid {gap:14px 10px}
}
@media(prefers-reduced-motion:reduce) {
  .desk-panel[open],.desk-panel[open]:is(.is-closing,[data-closing=true]) {animation:none;transform:none}
  #desk-app .desk-object,.desk-panel button,#desk-app .controls,#desk-app .view-tools .quiet-button {transition:none}
  .desk-panel button:enabled:active,#desk-app .view-tools .quiet-button:active {translate:none}
}
@media(forced-colors:active) {
  .desk-panel,.desk-panel-bar {background-image:none;box-shadow:none;border-color:CanvasText}
  #desk-app .desk-object:focus-visible {outline-color:Highlight}
  .desk-panel :is(button,a):focus-visible {outline-color:Highlight}
}