body{background-color:#0d0d0d;color:#fff;font-family:Arial,sans-serif;overflow-x:hidden}.toggle-container{display:flex;align-items:center;gap:10px}.toggle-text{font-size:1rem;width:80px;text-align:center}.toggle-switch{position:relative;display:inline-block;width:60px;height:34px}.toggle-switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;transition:.4s;border-radius:34px}.slider:before{position:absolute;content:"";height:26px;width:26px;left:4px;bottom:4px;background-color:#fff;transition:.4s;border-radius:50%}.toggle-switch input:checked+.slider{background-color:#007a47}.toggle-switch input:checked+.slider:before{transform:translate(26px)}.project-tile{background-color:#222;color:#fff;border-radius:8px;border:0;overflow:hidden;box-shadow:0 2px 4px #00000080;transition:transform .3s ease,box-shadow .3s ease;cursor:pointer;display:block;width:100%;padding:0;text-decoration:none;text-align:left}.project-tile.hover{transform:scale(1.05);box-shadow:0 4px 8px #000000b3}.project-tile:focus-visible{outline:3px solid #ff4d4d;outline-offset:4px}.project-tile img{width:100%;height:auto;display:block}.youtube-preview{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:16 / 9;overflow:hidden;background:radial-gradient(circle at 22% 20%,rgba(255,255,255,.18),transparent 22%),linear-gradient(135deg,#111,#2d2d2d 45%,#c90000)}.youtube-preview:before{position:absolute;top:14px;right:14px;bottom:14px;left:14px;border:1px solid rgba(255,255,255,.16);border-radius:8px;content:""}.youtube-channel-mark{position:absolute;left:18px;top:18px;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#fff;color:#c90000;font-weight:700;letter-spacing:0}.youtube-play{position:relative;width:78px;height:54px;border-radius:14px;background:red;box-shadow:0 8px 24px #00000057}.youtube-play:before{position:absolute;top:50%;left:52%;border-bottom:12px solid transparent;border-left:20px solid #fff;border-top:12px solid transparent;content:"";transform:translate(-50%,-50%)}.youtube-handle{position:absolute;bottom:18px;left:18px;color:#fff;font-size:.95rem;font-weight:700}.project-info{padding:16px;color:#fff}.project-info h2,.project-info p{margin:0;padding:0}.project-info p{margin-top:8px;line-height:1.4}.project-link-label{display:inline-block;margin-top:14px;color:#ff4d4d;font-size:.9rem;font-weight:700}.image-preview-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10;display:grid;place-items:center;padding:24px;background:#000000d6}.image-preview-panel{display:grid;grid-template-rows:auto minmax(0,1fr);width:calc(100vw - 48px);height:calc(100vh - 48px);max-height:calc(100vh - 48px);overflow:hidden;border:1px solid rgba(255,255,255,.14);border-radius:8px;background:#151515;box-shadow:0 18px 60px #0000008c}.image-preview-toolbar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px;border-bottom:1px solid rgba(255,255,255,.12)}.image-preview-toolbar h2,.image-preview-toolbar p{margin:0}.image-preview-toolbar p{margin-top:6px;color:#ffffffc2;line-height:1.4}.image-preview-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}.image-preview-actions button{min-width:52px;min-height:38px;border:1px solid rgba(255,255,255,.2);border-radius:6px;background:#242424;color:#fff;cursor:pointer;font-weight:700}.image-preview-actions button:hover{background:#333}.image-preview-stage{overflow:auto;padding:28px;background:#0b0b0b;cursor:grab;touch-action:pan-x pan-y;-webkit-user-select:none;user-select:none}.image-preview-stage.dragging{cursor:grabbing}.image-preview-zoom-frame{display:flex;justify-content:center;min-width:25%;margin:0 auto;transition:width .18s ease;will-change:width}.image-preview-zoom-frame img{display:block;width:100%;height:auto;object-fit:contain;pointer-events:none}@media (max-width: 720px){.image-preview-backdrop{padding:12px}.image-preview-panel{width:calc(100vw - 24px);height:calc(100vh - 24px);max-height:calc(100vh - 24px)}.image-preview-toolbar{align-items:flex-start;flex-direction:column}.image-preview-actions{justify-content:flex-start}}.reactive-background-canvas{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0d0d0d;z-index:0}.app-container{position:relative;min-height:100vh;padding:20px}.header{display:flex;justify-content:space-between;align-items:center;position:relative;z-index:2}.project-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-top:20px;position:relative;z-index:2}
