/* Three early personal-web constructions: liquid chrome, pixel diary, profile
   graphics. References inform the grammar; all vector geometry is original. */
@media screen {
  body[data-world-family='personal-web'] {
    --ui-control-radius: 10px;
    --ui-panel-radius: 8px;
    --web-grid-step: 24px;
    --web-line: color-mix(in srgb, var(--nw-accent) 23%, transparent);
    --web-margin: 54px;
  }
  body[data-world-family='personal-web'][data-world-motif] .editor-scroll {
    background-image: var(--web-desk);
    background-size: 480px 480px;
    background-repeat: repeat;
    background-attachment: local;
  }
  body[data-world-family='personal-web'] .ink-stage { margin-top: 76px; margin-bottom: 86px; }
  body[data-world-family='personal-web'] .theme-frame { filter: drop-shadow(0 3px 2px rgb(19 25 56 / .24)); }
  body[data-world-family='personal-web'] .theme-material-grain { opacity: .04; }
  body[data-world-family='personal-web'] .world-surround-upper {
    inset: -70px -28px auto;
    height: 65px;
    background-image: var(--web-upper);
    background-size: 100% 100%;
  }
  body[data-world-family='personal-web'] .world-surround-lower {
    inset: auto -30px -68px;
    height: 54px;
    background-image: var(--web-upper);
    background-size: 100% 100%;
    transform: rotate(180deg);
    opacity: .8;
  }
  body[data-world-family='personal-web'] :is(.world-surround-left,.world-surround-right) {
    top: 52px;
    bottom: 40px;
    width: 22px;
    background-image: var(--web-desk);
    background-repeat: repeat-y;
    background-size: 400px 400px;
  }
  body[data-world-family='personal-web'] .world-surround-left { left: -56px; background-position: 0 0; }
  body[data-world-family='personal-web'] .world-surround-right { right: -56px; background-position: right 40px; }
  body[data-world-family='personal-web'][data-theme='dark'] .world-night-light {
    inset: -20px;
    border-radius: 32px;
    box-shadow: -14px 2px 22px -11px color-mix(in srgb, var(--nw-accent) 38%, transparent), 16px 8px 24px -13px rgb(114 216 241 / .3);
  }

  /* The native controls become each page's real navigation; no pretend window
     buttons, players, status badges or additional application chrome. */
  body[data-world-family='personal-web'] :is(.workspace-toolbar,.pane-bar,.right-pane-tabs) {
    background-image: linear-gradient(180deg, color-mix(in srgb, var(--nw-panel) 82%, #fff) 0%, var(--nw-shell) 48%, color-mix(in srgb, var(--nw-shell) 88%, var(--nw-accent)) 100%);
    border-color: color-mix(in srgb, var(--nw-ink) 35%, var(--nw-panel));
  }
  body[data-world-family='personal-web'] .workspace-tab.active {
    border-radius: 8px 8px 0 0;
    background: var(--nw-paper);
    box-shadow: inset 0 2px 0 color-mix(in srgb,var(--nw-accent) 55%,#fff);
  }
  body[data-world-family='personal-web'] :is(.tool-library-tab,.help-tab,.right-pane-tab)[aria-selected='true'] { text-decoration: underline; text-underline-offset: 4px; }
  body[data-world-family='personal-web'] .note-editor :is(.text-box-editor,.guided-content) ul > li::marker { color: var(--nw-accent); }

  body[data-world-family='personal-web'][data-paper='blank'] .note-editor {
    background-repeat: no-repeat;
    background-size: 88px 88px;
    background-position: right 6px top 4px;
  }
  body[data-world-family='personal-web'][data-paper='dots'] .note-editor {
    background-image: var(--web-dots);
    background-size: 48px 48px;
    background-position: 0 0;
  }
  body[data-world-family='personal-web'][data-paper='ruled'] .note-editor {
    background-image:
      linear-gradient(90deg, transparent calc(var(--web-margin) - 1px), var(--web-line) calc(var(--web-margin) - 1px) var(--web-margin), transparent var(--web-margin)),
      repeating-linear-gradient(180deg, transparent 0 31px, var(--web-line) 31px 32px);
    background-size: 100% 100%,100% 32px;
    background-position: 0 0,0 26px;
  }
  body[data-world-family='personal-web'][data-paper='grid'] .note-editor {
    background-image:
      linear-gradient(180deg,var(--web-line) 1px,transparent 1px),
      linear-gradient(90deg,var(--web-line) 1px,transparent 1px),
      linear-gradient(180deg,color-mix(in srgb,var(--nw-accent) 12%,transparent) 1px,transparent 1px),
      linear-gradient(90deg,color-mix(in srgb,var(--nw-accent) 12%,transparent) 1px,transparent 1px);
    background-size: calc(var(--web-grid-step)*4) calc(var(--web-grid-step)*4),calc(var(--web-grid-step)*4) calc(var(--web-grid-step)*4),var(--web-grid-step) var(--web-grid-step),var(--web-grid-step) var(--web-grid-step);
    background-position: 0 0;
  }
  body[data-world-family='personal-web'][data-paper='chalkboard'] .note-editor {
    background-repeat: no-repeat;
  }
  body[data-world-family='personal-web'][data-paper='chalkboard'] .theme-material-grain { opacity: .18; }

  /* Chrome Candy: airy translucent hardware material and asymmetric orbital
     sweeps integrated across the desk rather than a compact CD above the board. */
  body[data-world-motif='chrome-candy'] { --nw-day-workspace: #d2dbe9; --nw-night-workspace: #131e34; }
  body[data-world-motif='chrome-candy'] .theme-board-underlay { box-shadow: 0 9px 18px -8px rgb(36 54 84 / .35); }
  body[data-world-motif='chrome-candy'] .world-surround-upper { left: -52px; right: -48px; }
  body[data-world-motif='chrome-candy'] .world-surround-lower { transform: scaleX(-1); opacity: .65; }
  body[data-world-motif='chrome-candy'] :is(.tool-button,.icon-button,.chip,.secondary-button) { border-radius: 7px; }

  /* Pixel Diary: crisp original small-scale pixel stationery, arranged as a
     handmade web page with stitched/checkered borders and off-center dividers. */
  body[data-world-motif='pixel-diary'] { --nw-day-workspace: #ded0e9; --nw-night-workspace: #281a37; --web-grid-step: 20px; }
  body[data-world-motif='pixel-diary'] .editor-scroll { background-size: 96px 96px; }
  body[data-world-motif='pixel-diary'] .theme-frame { filter: drop-shadow(2px 4px 2px rgb(50 26 65 / .22)); }
  body[data-world-motif='pixel-diary'] :is(.world-surround-left,.world-surround-right) { width: 30px; background-size: 96px 96px; }
  body[data-world-motif='pixel-diary'] .world-surround-left { left: -65px; }
  body[data-world-motif='pixel-diary'] .world-surround-right { right: -65px; }
  body[data-world-motif='pixel-diary'] :is(.workspace-toolbar,.pane-bar,.right-pane-tabs) { background-image: none; }
  body[data-world-motif='pixel-diary'] :is(.tool-button,.icon-button,.chip,.secondary-button,.workspace-tab,.right-pane-tab) { border-radius: 2px; }
  body[data-world-motif='pixel-diary'] :is(.help-tab,.tool-library-tab,.right-pane-tab):is(.active,[aria-selected='true']) { border-radius: 2px; box-shadow: inset 0 -2px var(--nw-accent); }
  body[data-world-motif='pixel-diary'] .note-editor :is(.text-box-editor,.guided-content) ul { list-style-type: square; }

  /* Midnight Profile: wide graphic star/checker details on the personal-page
     surround, a denser brushed bezel, and a cool reading sheet. */
  body[data-world-motif='midnight-profile'] { --nw-day-workspace: #9aaec9; --nw-night-workspace: #0b1426; --web-grid-step: 28px; }
  body[data-world-motif='midnight-profile'] .editor-scroll { background-size: 400px 400px; }
  body[data-world-motif='midnight-profile'] .world-surround-upper { left: -50px; right: -30px; }
  body[data-world-motif='midnight-profile'] .world-surround-lower { transform: scaleX(-1); height: 60px; bottom: -74px; }
  body[data-world-motif='midnight-profile'] .world-surround-right { width: 28px; background-position: right 0; }
  body[data-world-motif='midnight-profile'] .workspace-tab.active { box-shadow: inset 0 3px var(--nw-accent); }
  body[data-world-motif='midnight-profile'] .note-editor :is(.text-box-editor,.guided-content) ul { list-style-type: circle; }

  @container world-desk (max-width: 600px) {
    body[data-world-family='personal-web'] .ink-stage { margin-top: 59px; margin-bottom: 66px; }
    body[data-world-family='personal-web'] .world-surround-upper { left: calc((100% - 100cqw) / 2 + 1px); right: calc((100% - 100cqw) / 2 + 1px); top: -49px; height: 40px; overflow: hidden; }
    body[data-world-family='personal-web'] .world-surround-lower { left: -13px; right: -13px; bottom: -50px; height: 38px; }
    body[data-world-family='personal-web'] :is(.world-surround-left,.world-surround-right) { display: none; }
  }
  @container world-desk (max-width: 700px) {
    body[data-world-family='personal-web'][data-paper='ruled'] .note-editor { background-position:0 0,0 18px; }
  }
  @media (max-width:600px) {
    body[data-world-family='personal-web'] { --web-margin:36px; }
  }
}
@media print {
  body[data-world-family='personal-web'] .note-editor { background-image:none !important; }
}

/* Generated original digital assets. */
body[data-world-family='personal-web'][data-world-motif='chrome-candy'] {
  --world-rail-top: url('assets/world-rework/personal-web/chrome-candy/rail-top-day.svg');
  --world-rail-bottom: url('assets/world-rework/personal-web/chrome-candy/rail-bottom-day.svg');
  --world-rail-left: url('assets/world-rework/personal-web/chrome-candy/rail-left-day.svg');
  --world-rail-right: url('assets/world-rework/personal-web/chrome-candy/rail-right-day.svg');
  --world-corner-tl: url('assets/world-rework/personal-web/chrome-candy/corner-tl-day.svg');
  --world-corner-tr: url('assets/world-rework/personal-web/chrome-candy/corner-tr-day.svg');
  --world-corner-br: url('assets/world-rework/personal-web/chrome-candy/corner-br-day.svg');
  --world-corner-bl: url('assets/world-rework/personal-web/chrome-candy/corner-bl-day.svg');
  --web-dots: url('assets/world-rework/personal-web/chrome-candy/dots-day.svg');
  --web-upper: url('assets/world-rework/personal-web/chrome-candy/upper-day.svg');
  --web-desk: url('assets/world-rework/personal-web/chrome-candy/desk-day.svg');
  --web-corner-mark: url('assets/world-rework/personal-web/chrome-candy/corner-mark-day.svg');
}
body[data-world-family='personal-web'][data-world-motif='chrome-candy'][data-theme='dark'] {
  --world-rail-top: url('assets/world-rework/personal-web/chrome-candy/rail-top-night.svg');
  --world-rail-bottom: url('assets/world-rework/personal-web/chrome-candy/rail-bottom-night.svg');
  --world-rail-left: url('assets/world-rework/personal-web/chrome-candy/rail-left-night.svg');
  --world-rail-right: url('assets/world-rework/personal-web/chrome-candy/rail-right-night.svg');
  --world-corner-tl: url('assets/world-rework/personal-web/chrome-candy/corner-tl-night.svg');
  --world-corner-tr: url('assets/world-rework/personal-web/chrome-candy/corner-tr-night.svg');
  --world-corner-br: url('assets/world-rework/personal-web/chrome-candy/corner-br-night.svg');
  --world-corner-bl: url('assets/world-rework/personal-web/chrome-candy/corner-bl-night.svg');
  --web-dots: url('assets/world-rework/personal-web/chrome-candy/dots-night.svg');
  --web-upper: url('assets/world-rework/personal-web/chrome-candy/upper-night.svg');
  --web-desk: url('assets/world-rework/personal-web/chrome-candy/desk-night.svg');
  --web-corner-mark: url('assets/world-rework/personal-web/chrome-candy/corner-mark-night.svg');
}
body[data-world-family='personal-web'][data-world-motif='pixel-diary'] {
  --world-rail-top: url('assets/world-rework/personal-web/pixel-diary/rail-top-day.svg');
  --world-rail-bottom: url('assets/world-rework/personal-web/pixel-diary/rail-bottom-day.svg');
  --world-rail-left: url('assets/world-rework/personal-web/pixel-diary/rail-left-day.svg');
  --world-rail-right: url('assets/world-rework/personal-web/pixel-diary/rail-right-day.svg');
  --world-corner-tl: url('assets/world-rework/personal-web/pixel-diary/corner-tl-day.svg');
  --world-corner-tr: url('assets/world-rework/personal-web/pixel-diary/corner-tr-day.svg');
  --world-corner-br: url('assets/world-rework/personal-web/pixel-diary/corner-br-day.svg');
  --world-corner-bl: url('assets/world-rework/personal-web/pixel-diary/corner-bl-day.svg');
  --web-dots: url('assets/world-rework/personal-web/pixel-diary/dots-day.svg');
  --web-upper: url('assets/world-rework/personal-web/pixel-diary/upper-day.svg');
  --web-desk: url('assets/world-rework/personal-web/pixel-diary/desk-day.svg');
  --web-corner-mark: url('assets/world-rework/personal-web/pixel-diary/corner-mark-day.svg');
}
body[data-world-family='personal-web'][data-world-motif='pixel-diary'][data-theme='dark'] {
  --world-rail-top: url('assets/world-rework/personal-web/pixel-diary/rail-top-night.svg');
  --world-rail-bottom: url('assets/world-rework/personal-web/pixel-diary/rail-bottom-night.svg');
  --world-rail-left: url('assets/world-rework/personal-web/pixel-diary/rail-left-night.svg');
  --world-rail-right: url('assets/world-rework/personal-web/pixel-diary/rail-right-night.svg');
  --world-corner-tl: url('assets/world-rework/personal-web/pixel-diary/corner-tl-night.svg');
  --world-corner-tr: url('assets/world-rework/personal-web/pixel-diary/corner-tr-night.svg');
  --world-corner-br: url('assets/world-rework/personal-web/pixel-diary/corner-br-night.svg');
  --world-corner-bl: url('assets/world-rework/personal-web/pixel-diary/corner-bl-night.svg');
  --web-dots: url('assets/world-rework/personal-web/pixel-diary/dots-night.svg');
  --web-upper: url('assets/world-rework/personal-web/pixel-diary/upper-night.svg');
  --web-desk: url('assets/world-rework/personal-web/pixel-diary/desk-night.svg');
  --web-corner-mark: url('assets/world-rework/personal-web/pixel-diary/corner-mark-night.svg');
}
body[data-world-family='personal-web'][data-world-motif='midnight-profile'] {
  --world-rail-top: url('assets/world-rework/personal-web/midnight-profile/rail-top-day.svg');
  --world-rail-bottom: url('assets/world-rework/personal-web/midnight-profile/rail-bottom-day.svg');
  --world-rail-left: url('assets/world-rework/personal-web/midnight-profile/rail-left-day.svg');
  --world-rail-right: url('assets/world-rework/personal-web/midnight-profile/rail-right-day.svg');
  --world-corner-tl: url('assets/world-rework/personal-web/midnight-profile/corner-tl-day.svg');
  --world-corner-tr: url('assets/world-rework/personal-web/midnight-profile/corner-tr-day.svg');
  --world-corner-br: url('assets/world-rework/personal-web/midnight-profile/corner-br-day.svg');
  --world-corner-bl: url('assets/world-rework/personal-web/midnight-profile/corner-bl-day.svg');
  --web-dots: url('assets/world-rework/personal-web/midnight-profile/dots-day.svg');
  --web-upper: url('assets/world-rework/personal-web/midnight-profile/upper-day.svg');
  --web-desk: url('assets/world-rework/personal-web/midnight-profile/desk-day.svg');
  --web-corner-mark: url('assets/world-rework/personal-web/midnight-profile/corner-mark-day.svg');
}
body[data-world-family='personal-web'][data-world-motif='midnight-profile'][data-theme='dark'] {
  --world-rail-top: url('assets/world-rework/personal-web/midnight-profile/rail-top-night.svg');
  --world-rail-bottom: url('assets/world-rework/personal-web/midnight-profile/rail-bottom-night.svg');
  --world-rail-left: url('assets/world-rework/personal-web/midnight-profile/rail-left-night.svg');
  --world-rail-right: url('assets/world-rework/personal-web/midnight-profile/rail-right-night.svg');
  --world-corner-tl: url('assets/world-rework/personal-web/midnight-profile/corner-tl-night.svg');
  --world-corner-tr: url('assets/world-rework/personal-web/midnight-profile/corner-tr-night.svg');
  --world-corner-br: url('assets/world-rework/personal-web/midnight-profile/corner-br-night.svg');
  --world-corner-bl: url('assets/world-rework/personal-web/midnight-profile/corner-bl-night.svg');
  --web-dots: url('assets/world-rework/personal-web/midnight-profile/dots-night.svg');
  --web-upper: url('assets/world-rework/personal-web/midnight-profile/upper-night.svg');
  --web-desk: url('assets/world-rework/personal-web/midnight-profile/desk-night.svg');
  --web-corner-mark: url('assets/world-rework/personal-web/midnight-profile/corner-mark-night.svg');
}

/* Small material grip; board resize interaction remains shared. */
body[data-world-family="personal-web"] .board-resize-handle {
  background: url("assets/handles/personal-web.svg") center / contain no-repeat;
}

/* A separate specular light stays inside the original top rail. */
@media screen and (prefers-reduced-motion: no-preference) and (forced-colors: none) {
  @keyframes web-rail-sheen {
    from { transform: translateX(0); }
    to { transform: translateX(400%); }
  }
  body[data-world-family='personal-web'][data-theme='dark']:not([data-readability='high']) .theme-frame-edge-top::after {
    content: '';
    position: absolute;
    pointer-events: none;
    inset: 20% auto 20% 0;
    width: 20%;
    background: linear-gradient(110deg, transparent, rgb(232 249 255 / .24), transparent);
    animation: web-rail-sheen 7s ease-in-out infinite alternate;
  }
}