:root {
  font-family: Arial, Helvetica, sans-serif;
  color: #080808;
  background: #000;
  --black: #000;
  --white: #fff;
  --info: #e4e4e4;
  --secondary: #646464;
  --placeholder: #e4e4e4;
  --pad: clamp(21px, 2.35vw, 46px);
  --detail-pad: clamp(19px, 1.8vw, 34px);
  --info-top: clamp(28px, 2.75vw, 50px);
  --title: clamp(27px, 2.7vw, 48px);
  --body: clamp(21px, 2.26vw, 38px);
  --card-type: clamp(13px, 1.54vw, 25px);
  --small: clamp(13px, 1.2vw, 21px);
  --store-type: clamp(14px, 1.44vw, 24px);
  --store-height: clamp(51px, 5.1vw, 86px);
  --info-icon: clamp(34px, 8.5vw, 44px);
  --tracking: -.032em;
  --tight: 1.07;
  --line: 1.1;
  --gap: clamp(6px, .62vw, 12px);
  --blue: #1600ff;
  --danger: #df191e;
  --success: #17892a;
  font-synthesis: none;
}
* { box-sizing: border-box; }
html, body, #app { height: 100%; margin: 0; overflow: hidden; }
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
button, h1, h2, h3, p, dl, dd, figure { margin: 0; }
button { border: 0; background: transparent; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
button:disabled { cursor: default; }
:focus-visible { outline: 2px solid #5484ff; outline-offset: 4px; }
[hidden] { display: none !important; }
.site { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); min-height: 0; height: 100%; position: relative; isolation: isolate; }
.info-panel { min-height: 0; background: var(--info); display: flex; flex-direction: column; position: relative; }
.info-content { flex: 1; min-height: 0; overflow: auto; padding: var(--info-top) var(--pad) var(--pad); }
.identity, .mobile-title { font-size: var(--title); line-height: var(--tight); letter-spacing: var(--tracking); font-weight: 400; }
.bio { margin-top: .86em; font-size: var(--body); line-height: var(--line); letter-spacing: var(--tracking); white-space: pre-line; overflow-wrap: anywhere; }
.contacts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin-top: clamp(28px, 3.3vw, 64px); font-size: var(--small); line-height: 1.19; letter-spacing: -.025em; }
.contact-title { display: block; margin-bottom: .57em; font-weight: 400; }
.contact-links { display: flex; flex-direction: column; align-items: flex-start; color: var(--secondary); overflow-wrap: anywhere; }
.store { background: var(--store-color,var(--blue)); color: var(--store-ink,#fff); min-height: var(--store-height); flex: none; width: 100%; display: flex; justify-content: space-between; align-items: center; text-align: left; gap: 14px; padding: 10px max(14px,1.24vw); font-size: var(--store-type); line-height: .99; letter-spacing: -.035em; }
.store-lines { min-width: 0; overflow-wrap: anywhere; }
.store-lines > span { display: block; }
.store-url { opacity: .64; }
.store svg { flex: none; width: 1.4em; height: 1.4em; }
.projects-panel { position: relative; min-height: 0; min-width: 0; background: var(--black); }
.stage { position: absolute; inset: 0; isolation: isolate; container-type: size; overflow: hidden; touch-action: none; user-select: none; outline-offset: -4px; }
.card { position: absolute; top: 55.8%; left: 50%; width: min(60.7cqw,54cqh); --card-width: min(60.7cqw,54cqh); --card-head: calc(var(--card-width) * .207); margin-top: calc(-.5 * (var(--card-width) + var(--card-head))); transform-origin: top center; display: block; background: var(--white); text-align: left; color: var(--black); -webkit-user-drag: none; contain: layout paint; overflow: hidden; }
.card::after { content: ""; position: absolute; inset: 0; background: #000; opacity: var(--shade,0); pointer-events: none; }
.card, .card * { touch-action: none; -webkit-touch-callout: none; }
.card:focus-visible { outline-offset: -3px; }
.card-header { height: var(--card-head); padding: 0 4.6%; display: flex; flex-direction: column; justify-content: center; font-size: var(--card-type); line-height: 1.08; letter-spacing: -.028em; overflow: hidden; }
.card-header-row { display: flex; justify-content: space-between; align-items: baseline; gap: .65em; }
.card-title, .card-summary { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-summary { display: block; margin-top: .18em; color: #777; font-size: .9em; line-height: 1.14; }
.card-photo, .gallery-photo, .crop-preview { display: block; overflow: hidden; background: var(--placeholder); aspect-ratio: 1; }
.card-photo img, .gallery-photo img, .crop-preview img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: var(--crop-x,50%) var(--crop-y,50%); transform: scale(var(--zoom,1)); transform-origin: var(--crop-x,50%) var(--crop-y,50%); }
.card img { pointer-events: none; }
.project-progress { position: absolute; z-index: 3; right: clamp(16px,4.3%,55px); top: 50%; transform: translateY(-50%); max-height: 70%; display: flex; flex-direction: column-reverse; align-items: center; justify-content: safe center; gap: clamp(6.75px,calc(1.5vh - 3.75px),14.25px); overflow-y: auto; scrollbar-width: none; }
.project-progress::-webkit-scrollbar { display: none; }
.progress-dot { flex: none; display: grid; place-items: center; width: 30px; height: 15px; color: #666; transition: color .18s ease; }
.progress-dot::after { content: ''; display: block; width: 7.5px; height: 7.5px; border-radius: 50%; background: currentColor; }
.progress-dot.active { color: #fff; }
.progress-dot:focus-visible { outline-offset: -2px; }
.empty { color: #d4d4d4; position: absolute; inset: 0; display: grid; place-items: center; font-size: var(--small); }
.mobile-header, .project-store { display: none; }
.detail { position: absolute; inset: 0; z-index: 5; background: var(--white); overflow: auto; overscroll-behavior: contain; visibility: hidden; }
.detail.open { visibility: visible; }
.detail.morphing { overflow: hidden; }
.detail.morphing .detail-head, .detail.morphing .gallery, .detail.morphing .detail-body, .detail.morphing .editor-tools { opacity: 0; }
.card.detail-source { visibility: hidden !important; }
.detail.morphing .detail-title, .detail.morphing .gallery-photo:first-child { visibility: hidden; }
.detail-ghost-title, .detail-ghost-gallery, .detail-ghost-label { position: absolute; top: 0; left: 0; z-index: 2; pointer-events: none; transform-origin: top left; }
.detail-ghost-title { color: var(--black); white-space: nowrap; overflow: hidden; }
.detail-ghost-label { white-space: nowrap; }
.detail-ghost-gallery { display: flex; align-items: flex-start; width: max-content; }
.detail-ghost-photo { flex: none; overflow: hidden; background: var(--placeholder); }
.detail-ghost-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--crop-x,50%) var(--crop-y,50%); transform: scale(var(--zoom,1)); transform-origin: var(--crop-x,50%) var(--crop-y,50%); }
.detail-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; padding: var(--detail-pad); min-height: clamp(65px,6.4vw,111px); }
.detail-title { font-size: var(--body); line-height: var(--tight); letter-spacing: var(--tracking); font-weight: 400; min-width: 0; overflow-wrap: anywhere; }
.icon-button { flex: none; width: max(30px,1.1em); height: max(30px,1.1em); display: grid; place-items: center; }
.icon-button svg { width: 100%; height: 100%; max-width: 33px; max-height: 33px; overflow: visible; }
.gallery { display: flex; gap: var(--gap); padding: 0 var(--detail-pad); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.gallery::-webkit-scrollbar { display: none; }
.gallery-photo { flex: 0 0 72%; overflow: clip; border: 0; text-align: left; }
.gallery-photo:only-child { flex-basis: 100%; }
.detail-body { padding: clamp(23px,2.2vw,42px) var(--detail-pad) clamp(30px,4vw,72px); }
.specs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: var(--gap); row-gap: .95em; font-size: var(--small); line-height: 1.03; letter-spacing: -.025em; }
.specs > div { min-width: 0; overflow-wrap: anywhere; }
.specs dd { margin-top: .28em; color: var(--secondary); white-space: pre-line; }
.specs dd > button { width: 100%; }
.spec-col { display: grid; gap: .95em; align-content: start; }
.description { font-size: var(--body); line-height: var(--line); letter-spacing: var(--tracking); white-space: pre-wrap; overflow-wrap: anywhere; }
.specs + .description { margin-top: 1em; }
.downloads { display: flex; flex-direction: column; gap: .58em; align-items: flex-start; font-size: var(--small); letter-spacing: -.02em; margin-top: 2em; }
.downloads:empty { display: none; }
.downloads a, .downloads button { display: flex; gap: .6em; align-items: center; }
.downloads svg { width: 1.25em; height: 1.25em; flex: none; color: var(--secondary); }
.start-message { min-height: 100%; display: grid; place-content: center; gap: 16px; padding: 24px; background: #fff; }
.admin-login { display: grid; gap: 14px; width: min(300px, 100%); }
.admin-login-submit { justify-self: start; background: #000; color: #fff; padding: 9px 15px; }
.login-feedback { max-width: 300px; color: var(--danger); }
.editor-shell { height: 100%; display: grid; grid-template-rows: auto minmax(0,1fr) auto; }
.editor-chrome { z-index: 10; background: white; color: #080808; display: flex; align-items: center; min-height: 51px; padding: 9px clamp(14px,1.8vw,30px); gap: clamp(11px,2vw,35px); font-size: clamp(12px,1.45vw,20px); letter-spacing: -.025em; }
.editor-top { border-bottom: 1px solid #929292; }
.editor-top a:first-child { margin-right: auto; }
.editor-bottom { font-size: var(--small); border-top: 1px solid #929292; }
.editor-top button:disabled { color: #888; }
.editor-top .save:disabled, .editor-top .revert:disabled { color: #888; }
.editor-top .revert, .editor-bottom[data-state="failed"] { color: var(--danger); }
.editor-top .save { color: var(--success); }
.editable { outline: 1px dashed #999; outline-offset: 4px; text-align: inherit; min-width: 0; }
.editable:hover { outline-color: #315cff; }
.editable:focus-visible { outline: 2px solid #5484ff; }
.editable-block { display: block; width: 100%; }
.editor-shell .card[data-current] { outline: 1px dashed #aaa; outline-offset: -2px; }
.editor-shell .store.editable { outline-offset: -7px; }

.project-manager { position: absolute; z-index: 4; bottom: 3.7%; left: 50%; transform: translateX(-50%); color: white; width: 32px; height: 32px; }
.project-manager svg { width: 100%; height: 100%; }
.editor-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0; margin: 0 var(--detail-pad) 12px; border: 1px solid #bdbdbd; width: fit-content; max-width: calc(100% - 2 * var(--detail-pad)); font-size: 13px; background: white; }
.editor-tools button { padding: 7px 10px; border-right: 1px solid #bdbdbd; white-space: nowrap; }
.editor-tools button:last-child { border-right: 0; }
.editor-tools button:hover, .store-options:hover, .inline-options:hover { background: #eaeaea; }
.inline-input { min-width: 0; width: 100%; max-width: 100%; display: block; border: 0; border-bottom: 1px solid #315cff; border-radius: 0; padding: 0; margin: 0; color: inherit; background: transparent; font: inherit; line-height: inherit; letter-spacing: inherit; text-align: inherit; resize: vertical; outline: none; }
.card-header-row .inline-input { width: 100%; }
.contact-links > .inline-input { width: 100%; }
.editor-store .store-lines { flex: 1; }
.editor-store .store-lines > button { display: block; text-align: left; }
.store-options { flex: none; width: 1.7em; height: 1.7em; display: grid; place-items: center; }
.store-options svg { width: 1.4em; height: 1.4em; }
.inline-options { font-size: .8em; margin-top: .7em; border: 1px solid #999; padding: .25em .4em; }
.editor-action-bar { position: fixed; z-index: 20; display: flex; background: white; border: 1px solid #bdbdbd; font-size: 13px; }
.editor-action-bar button { padding: 8px 11px; border-right: 1px solid #bdbdbd; white-space: nowrap; }
.editor-action-bar button:last-child { border-right: 0; }
.editor-action-bar button:hover { background: #eaeaea; }
.context { border: 1px solid #aaa; color: #090909; background: #fff; width: min(440px,calc(100% - 32px)); max-height: min(76dvh,680px); margin: 0; padding: 0; inset: auto; overflow: auto; overscroll-behavior: contain; }
.context::backdrop { background: transparent; }
.context-title { position: sticky; top: 0; z-index: 1; background: #fff; border-bottom: 1px solid #d8d8d8; padding: 11px 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.context-title h2 { font-size: 16px; font-weight: 400; }
.context-title button { min-width: 32px; min-height: 26px; font-size: 21px; }
.context-body { padding: 14px; display: grid; gap: 12px; font-size: 14px; }
.context form { display: grid; gap: 12px; }
.field { display: grid; gap: 5px; min-width: 0; }
.field input:not([type=checkbox]), .field textarea, .field select { width: 100%; border: 1px solid #b9b9b9; padding: 8px; border-radius: 0; color: #111; background: #fff; }
.field textarea { min-height: 96px; resize: vertical; }
.field input[type=color] { height: 38px; padding: 3px; }
.context-action, .row-action { min-height: 34px; padding: 5px 8px; border: 1px solid #ccc; text-align: center; }
.context-action:hover, .row-action:hover { background: #ececec; }
.context-action.primary { color: white; background: #1746d1; border-color: #1746d1; }
.row-action { min-width: 32px; }
.row-action:disabled { opacity: .38; }
.edit-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.edit-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 5px 0; border-bottom: 1px solid #e1e1e1; }
.edit-row > :first-child { flex: 1; min-width: 80px; text-align: left; overflow-wrap: anywhere; }
.remove { color: var(--danger); }
.context .hint { color: var(--secondary); font-size: 12px; line-height: 1.3; }
.crop-preview { width: min(100%,200px); }
@media (min-width: 761px) and (max-height: 625px) {
  :root { --info-top: 23px; --body: clamp(19px,2.12vw,32px); }
  .contacts { margin-top: 23px; }
}
@media (max-width: 760px) {
  :root {
    --pad: clamp(20px,6.25vw,42px);
    --detail-pad: clamp(18px,5.4vw,35px);
    --info-top: clamp(19px,5.5vw,35px);
    --title: clamp(29px,10.45vw,58px);
    --body: clamp(20px,6.37vw,36px);
    --card-type: clamp(15px,4.9vw,25px);
    --small: clamp(15px,4.75vw,24px);
    --store-type: clamp(17px,5.55vw,28px);
    --store-height: clamp(60px,19.6vw,99px);
    --gap: clamp(5px,1.5vw,10px);
  }
  .site { display: block; }
  .site { --project-bottom: 0px; }
  .site[data-project-store="true"] { --project-bottom: calc(var(--store-height) + env(safe-area-inset-bottom)); }
  .projects-panel { position: absolute; z-index: 0; inset: 0; }
  .stage { inset: env(safe-area-inset-top) 0 var(--project-bottom); }
  .card { top: 60%; width: min(74cqw,58cqh); --card-width: min(74cqw,58cqh); --card-head: calc(var(--card-width) * .226); }
  .card-header { padding: 0 5.6%; }
  .card-summary { margin-top: .1em; }
  .project-progress { right: max(4px,env(safe-area-inset-right)); top: calc((100% - var(--project-bottom))/2); max-height: 53%; gap: clamp(6px,calc(1.17vh - 3.75px),10.5px); }
  .progress-dot { width: 30px; height: 15px; }
  .mobile-header { position: absolute; z-index: 6; top: calc(var(--info-top) + env(safe-area-inset-top)); left: max(var(--pad),env(safe-area-inset-left)); right: max(var(--pad),env(safe-area-inset-right)); display: flex; justify-content: space-between; align-items: center; gap: 8px; pointer-events: none; opacity: 1; transition: opacity .19s ease; }
  .site[data-detail="true"] .mobile-header { opacity: 0; }
  .site[data-detail-closing="true"] .mobile-header { opacity: 1; transition-delay: .26s; }
  .mobile-title { color: white; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-bottom: .13em; margin-bottom: -.13em; opacity: 1; transition: opacity .19s .32s ease; }
  .mobile-header[data-info="true"] .mobile-title { opacity: 0; transition-delay: 0s; }
  .info-toggle { pointer-events: auto; flex: none; position: relative; display: grid; place-items: center; width: max(var(--info-icon),44px); height: max(var(--info-icon),44px); }
  .info-toggle svg { width: var(--info-icon); height: var(--info-icon); display: block; }
  .info-toggle .disc { fill: #fff; transition: fill .24s; }
  .info-toggle .glyph { fill: #000; transition: fill .24s; }
  .mobile-header[data-info="true"] .disc { fill: #000; }
  .mobile-header[data-info="true"] .glyph { fill: #fff; }
  .info-panel { position: absolute; z-index: 3; inset: 0; pointer-events: none; visibility: hidden; background: white; clip-path: circle(var(--reveal-start,16px) at var(--reveal-x,90%) var(--reveal-y,5%)); transition: clip-path .57s cubic-bezier(.69,.02,.24,1), background .5s ease, visibility 0s linear .57s; }
  .info-panel.info-open { pointer-events: auto; visibility: visible; clip-path: circle(var(--reveal-end,150vmax) at var(--reveal-x,90%) var(--reveal-y,5%)); background: var(--info); transition-delay: 0s; }
  .info-content { display: flex; flex-direction: column; padding: calc(var(--info-top) + env(safe-area-inset-top)) max(var(--pad),env(safe-area-inset-right)) calc(clamp(35px,9svh,91px) + env(safe-area-inset-bottom)) max(var(--pad),env(safe-area-inset-left)); opacity: 0; transition: opacity .17s ease; }
  .info-panel.info-open .info-content { opacity: 1; transition: opacity .25s .22s ease; }
  .info-content .identity { width: calc(100% - var(--info-icon) - 9px); flex: none; }
  .bio { margin-top: 1.22em; flex: none; letter-spacing: -.026em; }
  .contacts { grid-template-columns: 59% 41%; padding-top: 33px; margin-top: auto; flex: none; }
  .contact-title { margin-bottom: .65em; }
  .site[data-info-store="false"] .info-panel > .store { display: none; }
  .project-store { display: block; position: absolute; z-index: 4; bottom: 0; left: 0; right: 0; }
  .store { min-height: calc(var(--store-height) + env(safe-area-inset-bottom)); padding: 11px max(4.5vw,env(safe-area-inset-right)) calc(11px + env(safe-area-inset-bottom)) max(4.5vw,env(safe-area-inset-left)); }
  .detail { position: absolute; inset: 0; }
  .site[data-detail="true"] .projects-panel { z-index: 5; }
  .site[data-detail="true"] .project-store, .site[data-detail="true"] .mobile-header { pointer-events: none; }
  .detail-head { min-height: max(70px,20.25vw); padding: calc(var(--detail-pad) + env(safe-area-inset-top)) var(--detail-pad) var(--detail-pad); align-items: center; }
  .detail-head .icon-button { width: 44px; height: 44px; margin: -9px -7px -9px 0; }
  .detail-head .icon-button svg { width: 26px; height: 26px; }
  .gallery-photo { flex-basis: 81.7%; }
  .detail-body { padding-top: 7.6vw; padding-bottom: calc(36px + env(safe-area-inset-bottom)); }
  .specs { column-gap: 4px; }
  .spec-col { gap: 1.03em; }
  .specs + .description { margin-top: 1.18em; }
  .editor-top { flex-wrap: wrap; gap: 8px 13px; }
  .editor-chrome { min-height: 40px; }
  .editor-bottom { font-size: 12px; }
}
@media (max-width: 760px) and (max-height: 680px) {
  .info-content { padding-bottom: calc(26px + env(safe-area-inset-bottom)); }
  .bio { margin-top: .9em; }
  .contacts { padding-top: 23px; }
  .card { width: min(74cqw,55cqh); --card-width: min(74cqw,55cqh); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0s !important; transition-delay: 0s !important; }
}
.gallery-add { padding: 18px; }
.contact-title { font-size: inherit; }
@media (min-width: 761px) {
  .bio { max-width: 95%; }
}
.social-edit-row { display: grid; gap: 8px; border-bottom: 1px solid #ddd; padding: 0 0 10px; margin-bottom: 10px; }
.download-pending { color: var(--secondary); }