:root { --ink:#171817; --paper:#f5f4ef; --muted:#74766f; --line:#d8d9d2; --lime:#caff48; --coral:#ff6e61; --blue:#a8c9ff; }
.drive-link { display:inline-block; text-decoration:none; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:#e8e8e2; font-family:Manrope,Arial,sans-serif; } button,input { font:inherit; } button { cursor:pointer; }
.app-shell { width:100%; min-height:100vh; padding:16px; background:#e8e8e2; }
.sidebar { position:fixed; z-index:5; inset:16px auto 16px 16px; width:246px; background:#1b1d1b; color:#f7f7f2; display:flex; flex-direction:column; padding:31px 24px 23px; border-radius:18px; box-shadow:0 18px 45px rgba(23,24,23,.18); } .brand { color:white; text-decoration:none; display:flex; align-items:center; gap:10px; font-size:23px; font-weight:800; letter-spacing:-1.8px; margin:0 8px 45px; } .brand-dot { color:var(--lime);}.brand-mark { height:30px; width:30px; color:var(--lime); display:grid; place-items:center; }.brand-mark svg { width:100%; height:100%; }
.main-nav { display:grid; gap:5px; }.nav-link,.filter-link { border:0; background:transparent; color:#a7aaa3; text-decoration:none; text-align:left; border-radius:9px; padding:11px 9px; font-size:14px; font-weight:600; display:flex; align-items:center; gap:12px; }.nav-link.active,.nav-link:hover { color:#1b1d1b; background:var(--lime); }.nav-icon { font-size:20px; width:18px; line-height:16px; }.nav-link b { font-family:'DM Mono'; margin-left:auto; font-size:10px; background:#3a3d39; color:#e8e8e2; padding:3px 6px; border-radius:10px; }.nav-link.active b { background:#c1ed47; }
.sidebar-section { padding-top:40px; }.eyebrow { font-family:'DM Mono',monospace; letter-spacing:.09em; font-size:10px; font-weight:500; color:#7b7e77; margin:0 0 13px; }.sidebar-section .eyebrow { margin:0 8px 10px; }.filter-link { width:100%; padding:8px; font-size:13px; }.filter-link:hover,.filter-link.selected { color:var(--lime); }.filter-link.selected:before { content:'•'; margin-right:5px; }
main { min-width:0; min-height:calc(100vh - 32px); margin-left:270px; background:var(--paper); border-radius:18px; overflow:hidden; }.topbar { height:90px; display:flex; align-items:center; gap:13px; padding:0 42px; }.menu-btn { display:none; }.search-wrap { background:#ecece6; height:48px; border-radius:12px; width:min(566px,60vw); display:flex; align-items:center; padding:0 15px; gap:10px; transition:.2s; }.search-wrap:focus-within { box-shadow:0 0 0 2px var(--ink); background:#fff; }.search-symbol { font-size:26px; line-height:1; }.search-wrap input { min-width:0; flex:1; background:transparent; border:0; outline:0; color:#252725; font-size:13px; }.search-wrap input::placeholder { color:#83867e; }.search-wrap kbd { font-family:'DM Mono'; color:#73766f; background:#deded8; padding:4px 7px; border-radius:5px; font-size:10px; white-space:nowrap; }.icon-button { margin-left:auto; position:relative; border:0; background:transparent; font-size:24px; transform:rotate(180deg); }.notification { position:absolute; height:6px; width:6px; border-radius:50%; background:var(--coral); top:4px; right:3px; }.new-project,.primary-btn { border:0; border-radius:9px; font-weight:700; background:var(--ink); color:white; padding:13px 17px; font-size:12px; }.new-project { background:var(--coral); white-space:nowrap; }.new-project:first-letter { font-size:18px; }.primary-btn span,.view-all span { margin-left:10px; font-size:16px; }
.hero { min-height:365px; margin:0 20px; overflow:hidden; background:#d5ff65; position:relative; border-radius:18px; display:grid; grid-template-columns:1.12fr .88fr; }.hero-copy { position:relative; z-index:2; padding:52px 0 38px 54px; }.lime { color:#526900; }.hero h1 { font-size:clamp(32px,3vw,49px); letter-spacing:-.065em; line-height:1.06; margin:0; max-width:650px; }.hero h1 em { font-family:Georgia,serif; font-weight:400; }.hero-text { max-width:410px; font-size:13px; line-height:1.7; margin:22px 0; color:#424a2e; }.hero-actions { display:flex; align-items:center; gap:19px; }.primary-btn { background:#1b2015; }.text-btn { border:0; background:transparent; color:#3c4922; font-size:12px; font-weight:700; }.text-btn span { font-size:16px; margin-left:7px; }.hero-art { overflow:hidden; position:relative; background:#ffb1a7; clip-path:polygon(19% 0,100% 0,100% 100%,0 100%); }.hero-art p { position:absolute; right:42px; bottom:27px; color:#152014; font-family:'DM Mono'; font-size:11px; font-weight:500; letter-spacing:.14em; text-align:right; }.orbit { position:absolute; border:1px solid rgba(24,34,20,.75); border-radius:50%; }.orbit-one { width:430px; height:430px; top:-91px; left:15px; }.orbit-two { width:330px;height:330px;top:-40px;left:67px; }.orbit-three { width:190px;height:190px;top:30px;left:136px; }.shape { position:absolute; }.shape-square { width:114px; height:114px; background:var(--blue); top:74px; left:171px; transform:rotate(17deg); box-shadow:13px 15px 0 #263a5d; }.shape-circle { background:#fc5c4d; height:86px; width:86px; border-radius:50%; top:164px; left:65px; }.shape-star { font-size:139px; line-height:1; color:#f6f4e8; top:55px; left:321px; transform:rotate(12deg); }
.content { padding:53px 62px 62px; }.section-heading { display:flex; align-items:end; justify-content:space-between; }.section-heading h2 { margin:0; font-size:23px; letter-spacing:-.06em; }.view-all { border:0; background:transparent; font-size:12px; font-weight:700; padding:0 0 5px; }.chips { display:flex; flex-wrap:wrap; gap:8px; margin:25px 0 13px; }.chip { border:1px solid var(--line); background:transparent; color:#666962; border-radius:99px; padding:8px 13px; font-size:11px; font-weight:700; }.chip.active,.chip:hover { background:var(--ink); border-color:var(--ink); color:#fff; }.chip span { margin-left:4px; font-family:'DM Mono'; font-size:9px; color:var(--lime); }.result-summary { font-family:'DM Mono'; font-size:10px; color:#85887f; min-height:20px; }.project-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px 18px; margin-top:9px; }.project { min-width:0; cursor:pointer; }.project:hover .image-wrap img { transform:scale(1.045); }.image-wrap { height:180px; overflow:hidden; border-radius:10px; position:relative; background:#ddd; }.image-wrap img { height:100%; width:100%; object-fit:cover; display:block; transition:transform .35s ease; }.tag,.play { position:absolute; }.tag { top:10px; left:10px; border-radius:4px; padding:4px 7px; color:#fff; background:rgba(23,24,23,.75); backdrop-filter:blur(5px); font-family:'DM Mono'; font-size:9px; }.play { right:10px; bottom:10px; height:28px; width:28px; border-radius:50%; background:#fff; display:grid; place-items:center; font-size:11px; padding-left:2px; }.project h3 { letter-spacing:-.04em; font-size:15px; line-height:1.25; margin:11px 0 6px; }.project-info { font-family:'DM Mono'; color:#81847c; font-size:10px; line-height:1.5; }.project-info b { color:#3a3c38; font-weight:500; }.empty { grid-column:1/-1; padding:45px; border:1px dashed var(--line); border-radius:12px; color:#777b73; text-align:center; }
.modal { display:none; position:fixed; inset:0; z-index:10; align-items:center; justify-content:center; padding:20px; }.modal.open { display:flex; }.modal-backdrop { position:absolute; inset:0; background:rgba(13,16,13,.58); backdrop-filter:blur(5px); }.preview-card { position:relative; width:min(830px,100%); max-height:90vh; overflow:auto; background:var(--paper); z-index:1; border-radius:16px; display:grid; grid-template-columns:1fr 1fr; box-shadow:0 20px 70px rgba(0,0,0,.35); }.preview-image { min-height:440px; background-size:cover; background-position:center; }.preview-content { padding:55px 44px 35px; }.preview-content h2 { font-size:30px; letter-spacing:-.06em; line-height:1.08; margin:0 0 15px; }.preview-content>p:not(.eyebrow) { color:#656961; font-size:13px; line-height:1.7; }.preview-meta { border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin:22px 0 13px; padding:14px 0; font-family:'DM Mono'; font-size:10px; color:#73766e; }.security-note { color:#507116; font-size:11px; margin-bottom:21px; }.close-modal { position:absolute; z-index:2; top:13px; right:14px; background:#fff; border:0; border-radius:50%; font-size:27px; line-height:30px; height:32px; width:32px; }
@media (max-width:900px) { .app-shell { padding:0; background:var(--paper); }.sidebar { display:none; z-index:8; inset:0 auto 0 0; width:245px; height:100vh; border-radius:0; }.sidebar.open { display:flex; }.topbar { padding:0 22px; height:76px; }.menu-btn { display:block; border:0; background:transparent; font-size:20px; }.search-wrap { width:auto; flex:1; }.search-wrap kbd { display:none; }.icon-button { margin-left:0; }.hero { margin:0 20px; }.content { padding:43px 35px; }.project-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.preview-card { grid-template-columns:1fr; max-width:560px; }.preview-image { min-height:280px; }.preview-content { padding:35px; } main { min-height:100vh; margin-left:0; border-radius:0; } }
@media (max-width:580px) { .topbar { gap:8px; padding:0 14px; }.search-wrap { height:43px; padding:0 10px; }.search-wrap input { font-size:11px; }.new-project { padding:11px; }.new-project span,.icon-button { display:none; }.hero { grid-template-columns:1fr; min-height:390px; }.hero-copy { padding:40px 29px 0; }.hero h1 { font-size:36px; }.hero-art { clip-path:none; position:absolute; height:155px; bottom:0; left:0; right:0; }.hero-art p { right:23px; bottom:18px; }.orbit-one { width:260px; height:260px; top:-70px; left:36px; }.orbit-two { width:190px;height:190px;top:-34px;left:72px; }.orbit-three { display:none; }.shape-square { width:60px;height:60px;left:113px;top:41px; }.shape-circle { height:50px;width:50px;left:47px;top:84px; }.shape-star { font-size:78px;top:31px;left:200px; }.content { padding:35px 20px; }.section-heading h2 { font-size:21px; }.project-grid { grid-template-columns:1fr 1fr; gap:24px 12px; }.image-wrap { height:130px; }.project h3 { font-size:13px; }.project-info { font-size:9px; }.preview-content { padding:28px 24px; } }