:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;display:flex;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{width:100%;height:100%;overflow:hidden}:root{--font-serif: "Playfair Display", Georgia, serif;--font-sans: "IBM Plex Sans", -apple-system, sans-serif;--font-mono: "IBM Plex Sans", -apple-system, sans-serif;--color-black: #000000;--color-white: #ffffff;--color-muted: #888888;--panel-min-width: 280px;--panel-max-width: 480px;--panel-padding: 40px;--panel-padding-mobile: 24px}.app-container{display:grid;grid-template-columns:minmax(var(--panel-min-width),min(33.333%,var(--panel-max-width))) 1fr;grid-template-rows:1fr;width:100%;height:100vh}.detail-panel{grid-row:1 / -1;grid-column:1;padding:var(--panel-padding);overflow-y:auto;background-color:var(--color-white);direction:rtl}.detail-panel>*{direction:ltr}.intro-panel{display:flex;flex-direction:column;justify-content:center;height:100%}.intro-panel h1{font-family:var(--font-serif);font-size:2.5rem;font-weight:700;color:var(--color-black);margin-bottom:1.5rem;line-height:1.2}.intro-panel .tagline{font-family:var(--font-sans);font-size:1.05rem;font-weight:400;line-height:1.7;color:var(--color-black);margin-bottom:2rem}.intro-panel .hint{font-family:var(--font-sans);font-size:.85rem;font-weight:400;color:var(--color-muted)}.intro-links{display:flex;gap:1.5rem;margin-top:2rem}.intro-links a{font-family:var(--font-sans);font-size:.9rem;font-weight:500;color:var(--color-black);text-decoration:none;transition:opacity .2s ease}.intro-links a:hover{text-decoration:underline}.project-detail{display:flex;flex-direction:column;gap:1.5rem}.project-header{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem}.project-detail h1{font-family:var(--font-serif);font-size:2rem;font-weight:700;color:var(--color-black);line-height:1.2;margin:0}.project-year{font-family:var(--font-sans);font-size:.9rem;font-weight:400;color:var(--color-muted);flex-shrink:0}.featured-image-container{width:100%;cursor:pointer}.featured-image{width:100%;height:auto;display:block;transition:opacity .2s ease}.featured-image:hover{opacity:.85}.featured-image-caption{font-family:var(--font-sans);font-size:.75rem;font-weight:400;color:var(--color-muted);margin-top:.5rem}.thumbnail-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:.25rem}.thumbnail-container{cursor:pointer;position:relative}.thumbnail{width:100%;height:auto;aspect-ratio:1;object-fit:cover;display:block;transition:opacity .2s ease}.thumbnail:hover{opacity:.75}.project-description{font-family:var(--font-sans);font-size:.95rem;font-weight:400;line-height:1.7;color:var(--color-black)}.project-description p{margin:0 0 1em}.project-description p:last-child{margin-bottom:0}.project-description a{color:var(--color-black);text-decoration:underline}.project-description strong{font-weight:600}.project-description em{font-style:italic}.project-description ul,.project-description ol{margin:0 0 1em;padding-left:1.5em}.project-description li{margin-bottom:.25em}.project-description code{font-family:monospace;background:#f5f5f5;padding:.1em .3em;border-radius:3px;font-size:.9em}.project-links{display:flex;flex-wrap:wrap;gap:1rem}.project-link{font-family:var(--font-sans);font-size:.9rem;font-weight:500;color:var(--color-black);text-decoration:none;background:none;border:none;padding:0;cursor:pointer;transition:opacity .2s ease}.project-link:hover{text-decoration:underline}.canvas-container{position:relative;background-color:var(--color-white)}.expand-hint{display:none}.control-hints{position:absolute;bottom:16px;left:20px;right:20px;display:flex;justify-content:space-between;align-items:center;font-family:var(--font-mono);font-size:.65rem;color:var(--color-muted);pointer-events:none;z-index:100}.control-hints .hints-text{pointer-events:none}.control-hints .contact-links{display:flex;gap:16px;pointer-events:auto}.control-hints .contact-links a{color:var(--color-muted);text-decoration:none;transition:color .2s ease}.control-hints .contact-links a:hover{color:var(--color-black);text-decoration:underline}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;z-index:9999;pointer-events:none;background-color:#0000;opacity:0;transition:background-color .3s ease,opacity .3s ease}.modal-overlay.visible{pointer-events:auto;background-color:#000000f2;opacity:1}.modal-content{display:flex;flex-direction:column;position:fixed;top:0;left:0;right:0;bottom:0;padding:40px}.modal-image-container{flex:1;display:flex;align-items:center;justify-content:center;min-height:0}.modal-image{max-width:100%;max-height:100%;object-fit:contain}.modal-footer{flex-shrink:0;padding-top:20px;display:flex;justify-content:space-between;align-items:flex-end}.modal-caption{display:flex;flex-direction:column;gap:4px}.caption-text{font-family:var(--font-sans);font-size:.9rem;color:var(--color-white)}.image-counter{font-family:var(--font-sans);font-size:.75rem;color:var(--color-muted)}.modal-controls{display:flex;align-items:center;gap:24px}.modal-close,.modal-nav{color:var(--color-muted);font-family:var(--font-sans);font-size:.85rem;font-weight:500;cursor:pointer;background:none;border:none;padding:8px 0;transition:color .2s ease}.modal-close:hover,.modal-nav:hover{color:var(--color-white);text-decoration:underline}.popup-modal-content{background-color:var(--color-white);color:var(--color-black);padding:40px;max-width:560px;width:90%;max-height:80vh;overflow-y:auto}.popup-modal-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1.5rem;gap:1rem}.popup-modal-header h2{font-family:var(--font-serif);font-size:1.5rem;font-weight:700;color:var(--color-black);margin:0;line-height:1.3}.popup-modal-close{font-family:var(--font-sans);font-size:.85rem;font-weight:500;color:var(--color-muted);background:none;border:none;padding:0;cursor:pointer;flex-shrink:0;transition:color .2s ease}.popup-modal-close:hover{color:var(--color-black);text-decoration:underline}.popup-modal-body{font-family:var(--font-sans);font-size:.95rem;font-weight:400;line-height:1.7;color:var(--color-black);white-space:pre-line}.popup-modal-body p{margin:0}@media (max-width: 768px){.app-container{display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden}.canvas-container{order:1;height:60vh;height:60dvh;flex-shrink:0;cursor:default;will-change:height}.canvas-container.collapsed{cursor:pointer}.expand-hint{order:2;display:none;font-family:var(--font-sans);font-size:.75rem;color:var(--color-muted);text-align:center;padding:8px 0;background:var(--color-white);border-bottom:1px solid #eee;cursor:pointer;flex-shrink:0}.app-container:has(.canvas-container.collapsed) .expand-hint{display:block}.detail-panel{order:3;flex:1;min-height:0;padding:var(--panel-padding-mobile);padding-bottom:calc(var(--panel-padding-mobile) + 100px);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain}.intro-panel{justify-content:flex-start;height:auto}.detail-panel:has(.intro-panel){padding-bottom:var(--panel-padding-mobile)}.intro-panel h1{font-size:2rem}.project-detail h1{font-size:1.5rem}.thumbnail-grid{grid-template-columns:repeat(4,1fr);gap:.25rem}.modal-content{padding:16px;padding-bottom:calc(16px + env(safe-area-inset-bottom,20px))}.modal-footer{padding-top:12px;flex-direction:column;gap:12px;align-items:flex-start}.modal-controls{width:100%;justify-content:space-between}.modal-close,.modal-nav{padding:12px 0}}@media (max-width: 768px) and (max-height: 825px){.intro-panel h1{font-size:1.75rem;margin-bottom:1rem}.intro-panel .tagline{font-size:.95rem;line-height:1.5;margin-bottom:1.25rem}.intro-panel .hint{font-size:.8rem}.intro-links{margin-top:1.25rem}}.detail-panel::-webkit-scrollbar{width:6px}.detail-panel::-webkit-scrollbar-track{background:transparent}.detail-panel::-webkit-scrollbar-thumb{background-color:var(--color-black);border-radius:0}.detail-panel::-webkit-scrollbar-thumb:hover{background-color:#999}