@import "https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap";:root{--bg-deep:#07070a;--bg-base:#0c0c10;--bg-card:#141419;--bg-card-hover:#1a1a21;--bg-elevated:#1e1e27;--border-subtle:#ffffff0f;--border-mid:#ffffff1a;--amber:#d4a04a;--amber-bright:#e8b85c;--amber-dim:#a67a30;--amber-glow:#d4a04a26;--amber-glow-strong:#d4a04a4d;--teal:#4a9d8e;--teal-dim:#4a9d8e26;--text-primary:#e8e6e1;--text-secondary:#8a8780;--text-tertiary:#5a5855;--text-inverse:#07070a;--serif:"Playfair Display", "Georgia", serif;--sans:"DM Sans", system-ui, -apple-system, sans-serif;--radius-sm:4px;--radius-md:8px;--radius-lg:14px;--radius-xl:20px;--shadow-card:0 2px 8px #0000004d, 0 1px 3px #0003;--shadow-card-hover:0 12px 40px #00000080, 0 4px 12px #0000004d;--shadow-modal:0 25px 80px #000000b3, 0 10px 30px #00000080;font-family:var(--sans);color:var(--text-primary);background:var(--bg-deep);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px;line-height:1.5}*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg-deep);min-height:100vh;overflow-x:hidden}body:before{content:"";z-index:9999;pointer-events:none;opacity:.025;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");background-repeat:repeat;background-size:256px;position:fixed;inset:0}#root{width:100%;min-height:100vh}::selection{background:var(--amber);color:var(--text-inverse)}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg-deep)}::-webkit-scrollbar-thumb{background:var(--border-mid);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--text-tertiary)}@keyframes fadeUp{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes modalIn{0%{opacity:0;transform:scale(.95)translateY(12px)}to{opacity:1;transform:scale(1)translateY(0)}}.showcase{max-width:1320px;margin:0 auto;padding:0 32px 80px}.showcase-header{text-align:center;padding:72px 0 48px;animation:.8s ease-out both fadeUp;position:relative}.showcase-header:after{content:"";background:linear-gradient(90deg, transparent, var(--amber), transparent);width:60px;height:2px;position:absolute;bottom:0;left:50%;transform:translate(-50%)}.header-logo{margin-bottom:20px;width:auto;height:48px;margin-inline:auto;display:block}.header-eyebrow{font-family:var(--sans);letter-spacing:3px;text-transform:uppercase;color:var(--amber);margin-bottom:16px;font-size:11px;font-weight:600;display:block}.header-title{font-family:var(--serif);color:var(--text-primary);letter-spacing:-.02em;margin-bottom:14px;font-size:clamp(36px,5.5vw,64px);font-weight:700;line-height:1.1}.header-title em{color:var(--amber);font-style:italic}.header-subtitle{font-family:var(--sans);color:var(--text-secondary);letter-spacing:.02em;font-size:17px;font-weight:300}.header-count{font-family:var(--sans);color:var(--text-tertiary);letter-spacing:.5px;margin-top:20px;font-size:13px}.header-count strong{color:var(--text-secondary);font-weight:600}.filter-bar{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);margin-bottom:48px;justify-content:center;gap:4px;width:fit-content;margin-inline:auto;padding:6px;animation:.8s ease-out .15s both fadeUp;display:flex}.filter-tab{font-family:var(--sans);color:var(--text-secondary);border-radius:var(--radius-md);cursor:pointer;letter-spacing:.01em;background:0 0;border:none;padding:10px 22px;font-size:14px;font-weight:500;transition:all .25s;position:relative}.filter-tab:hover{color:var(--text-primary);background:#ffffff0a}.filter-tab.active{color:var(--text-inverse);background:var(--amber);font-weight:600}.filter-tab .tab-count{opacity:.6;margin-left:6px;font-size:11px;font-weight:400}.filter-tab.active .tab-count{opacity:.8}.project-grid{grid-template-columns:repeat(auto-fill,minmax(380px,1fr));gap:24px;animation:.8s ease-out .3s both fadeUp;display:grid}.project-card{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);cursor:pointer;box-shadow:var(--shadow-card);transition:all .35s cubic-bezier(.4,0,.2,1);animation:.6s ease-out both fadeUp;position:relative;overflow:hidden}.project-card:hover{background:var(--bg-card-hover);border-color:var(--border-mid);box-shadow:var(--shadow-card-hover);transform:translateY(-4px)}.project-card:hover .card-preview-frame{border-color:var(--amber-dim)}.project-card:hover .card-view-label{opacity:1;transform:translateY(0)}.card-preview{background:#0f0f13;height:240px;position:relative;overflow:hidden}.card-preview-frame{border:none;border-bottom:1px solid var(--border-subtle);transform-origin:0 0;pointer-events:none;background:#fff;width:100%;height:100%;transform:scale(1)}.card-preview-scaler{transform-origin:0 0;width:1280px;height:960px;position:absolute;top:0;left:0;transform:scale(.298)}.card-preview-scaler iframe{pointer-events:none;background:#fff;border:none;width:100%;height:100%}.card-preview:after{content:"";background:linear-gradient(to top, var(--bg-card), transparent);pointer-events:none;height:60px;position:absolute;bottom:0;left:0;right:0}.card-view-label{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--amber-bright);font-family:var(--sans);letter-spacing:1.5px;text-transform:uppercase;border-radius:var(--radius-md);border:1px solid var(--amber-dim);opacity:0;pointer-events:none;z-index:2;background:#07070ad9;padding:12px 24px;font-size:13px;font-weight:600;transition:all .3s;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)translateY(8px)}.card-info{padding:20px 22px}.card-top-row{justify-content:space-between;align-items:center;margin-bottom:8px;display:flex}.card-student{font-family:var(--serif);color:var(--text-primary);letter-spacing:-.01em;font-size:20px;font-weight:600}.card-badge{font-family:var(--sans);letter-spacing:.5px;text-transform:uppercase;border-radius:var(--radius-sm);white-space:nowrap;padding:4px 10px;font-size:11px;font-weight:600}.card-badge.event-website{background:var(--amber-glow);color:var(--amber-bright);border:1px solid #d4a04a33}.card-badge.todo-app{background:var(--teal-dim);color:var(--teal);border:1px solid #4a9d8e33}.card-project-title{font-family:var(--sans);color:var(--text-secondary);font-size:14px;font-weight:400}.modal-overlay{z-index:1000;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#040406e0;justify-content:center;align-items:center;padding:32px;animation:.25s ease-out fadeIn;display:flex;position:fixed;inset:0}.modal-container{background:var(--bg-base);border:1px solid var(--border-mid);border-radius:var(--radius-xl);width:100%;max-width:1200px;height:calc(100vh - 80px);max-height:860px;box-shadow:var(--shadow-modal);flex-direction:column;animation:.35s cubic-bezier(.2,0,.2,1) both modalIn;display:flex;overflow:hidden}.modal-toolbar{background:var(--bg-elevated);border-bottom:1px solid var(--border-subtle);flex-shrink:0;justify-content:space-between;align-items:center;padding:16px 24px;display:flex}.modal-toolbar-left{align-items:center;gap:16px;display:flex}.modal-dots{gap:7px;display:flex}.modal-dot{cursor:pointer;border-radius:50%;width:12px;height:12px;transition:opacity .2s}.modal-dot:hover{opacity:.8}.modal-dot.close{background:#e5534b}.modal-dot.minimize{background:#d4a04a}.modal-dot.maximize{background:#4a9d8e}.modal-student-name{font-family:var(--serif);color:var(--text-primary);font-size:18px;font-weight:600}.modal-toolbar-right{align-items:center;gap:12px;display:flex}.modal-project-badge{font-family:var(--sans);letter-spacing:.5px;text-transform:uppercase;border-radius:var(--radius-sm);padding:5px 12px;font-size:11px;font-weight:600}.modal-project-badge.event-website{background:var(--amber-glow);color:var(--amber-bright)}.modal-project-badge.todo-app{background:var(--teal-dim);color:var(--teal)}.modal-open-link{font-family:var(--sans);color:var(--text-secondary);border-radius:var(--radius-md);border:1px solid var(--border-mid);align-items:center;gap:6px;padding:6px 14px;font-size:13px;font-weight:500;text-decoration:none;transition:all .2s;display:flex}.modal-open-link:hover{color:var(--text-primary);border-color:var(--amber-dim);background:#ffffff08}.modal-open-link svg{width:14px;height:14px}.modal-iframe-wrap{flex:1;position:relative;overflow:hidden}.modal-iframe-wrap iframe{background:#fff;border:none;width:100%;height:100%}.modal-url-bar{background:var(--bg-card);border-bottom:1px solid var(--border-subtle);flex-shrink:0;align-items:center;gap:10px;padding:10px 24px;display:flex}.modal-url-pill{font-family:var(--sans);color:var(--text-tertiary);background:var(--bg-deep);border:1px solid var(--border-subtle);text-overflow:ellipsis;white-space:nowrap;border-radius:100px;flex:1;padding:7px 14px;font-size:12px;overflow:hidden}.showcase-footer{text-align:center;border-top:1px solid var(--border-subtle);margin-top:64px;padding:48px 0 40px;animation:.8s ease-out .5s both fadeIn}.footer-text{font-family:var(--sans);color:var(--text-tertiary);letter-spacing:.3px;font-size:13px}.footer-text strong{color:var(--text-secondary);font-weight:500}.empty-state{text-align:center;padding:80px 32px;animation:.5s ease-out fadeIn}.empty-state-title{font-family:var(--serif);color:var(--text-secondary);margin-bottom:8px;font-size:22px}.empty-state-text{font-family:var(--sans);color:var(--text-tertiary);font-size:14px}@media (width<=860px){.showcase{padding:0 20px 60px}.showcase-header{padding:48px 0 36px}.project-grid{grid-template-columns:1fr;gap:18px}.filter-bar{flex-wrap:wrap;width:auto;margin:0 0 36px}.filter-tab{text-align:center;flex:1;padding:8px 16px;font-size:13px}.modal-overlay{padding:12px}.modal-container{border-radius:var(--radius-lg);height:calc(100vh - 32px);max-height:none}.modal-toolbar{flex-wrap:wrap;gap:10px;padding:14px 18px}.modal-toolbar-right{justify-content:flex-end;width:100%}}@media (width<=480px){.card-preview{height:190px}.card-preview-scaler{transform:scale(.235)}.header-title{font-size:30px}}