:root{--color-bg: #FCCA3F;--color-paper: #FFFFFF;--color-ink: #000000;--font-display: "Permanent Marker", cursive;--font-ui: "Spartan", sans-serif;--neu-shadow: 8px 8px 18px #c4a020, -6px -6px 14px #ffe870;--neu-shadow-hover: 12px 12px 26px #b08a10, -8px -8px 20px #ffe870;--neu-shadow-inset: inset 5px 5px 12px #c4a020, inset -4px -4px 10px #ffe870;--neu-shadow-sm: 5px 5px 12px #d4aa28, -4px -4px 10px #ffe060}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--color-bg);color:var(--color-ink);font-family:var(--font-ui);overflow:hidden;height:100vh;width:100vw;-webkit-font-smoothing:antialiased;cursor:default}a{text-decoration:none;color:inherit}h1,h2,h3{font-family:var(--font-display);line-height:1.1}.ui-text{font-family:var(--font-ui);text-transform:uppercase;letter-spacing:.15em;font-weight:700;font-size:.72rem}nav{position:fixed;top:0;left:0;right:0;padding:22px 40px;display:flex;justify-content:space-between;align-items:center;z-index:1000;pointer-events:none}.nav-logo{font-family:var(--font-display);font-size:1.5rem;transform:rotate(-2deg);pointer-events:all}.nav-links{display:flex;gap:32px;pointer-events:all}.nav-item{position:relative;font-weight:800}.nav-item:after{content:"";position:absolute;width:100%;height:2px;background:var(--color-ink);bottom:-4px;left:0;transform:scaleX(0);transform-origin:right;transition:transform .3s ease}.nav-item:hover:after{transform:scaleX(1);transform-origin:left}#canvas{position:fixed;top:0;right:0;bottom:0;left:0;width:100vw;height:100vh;overflow:hidden}.hero-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;z-index:10;pointer-events:none}.hero-center h1{font-size:4.8rem;color:var(--color-ink);text-shadow:3px 3px 8px #c4a020,-2px -2px 6px #ffe870;margin-bottom:18px;transform:rotate(-1.5deg)}.hero-subtitle{background:var(--color-paper);padding:12px 28px;display:inline-block;transform:rotate(1.5deg);box-shadow:4px 6px 12px #00000026;font-family:var(--font-ui);text-transform:uppercase;letter-spacing:.15em;font-weight:700;font-size:.72rem;margin-bottom:22px}.filter-bar{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px;pointer-events:all}.filter-btn{font-family:var(--font-ui);font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;padding:8px 18px;border:none;background:var(--color-bg);cursor:pointer;border-radius:40px;box-shadow:var(--neu-shadow-sm);transition:box-shadow .2s ease,transform .18s ease,color .18s;color:var(--color-ink)}.filter-btn:hover{box-shadow:var(--neu-shadow-hover);transform:scale(1.05) rotate(-1deg)}.filter-btn.active{box-shadow:var(--neu-shadow-inset);transform:scale(.97)}.card{position:absolute;background:var(--color-bg);border-radius:18px;box-shadow:var(--neu-shadow);padding:16px;cursor:grab;-webkit-user-select:none;user-select:none;transition:box-shadow .25s ease,opacity .3s ease;will-change:transform}.card:hover{box-shadow:var(--neu-shadow-hover)}.card:active{cursor:grabbing}.card.dragging{box-shadow:var(--neu-shadow-hover);z-index:999!important}.card.hidden{opacity:.2;pointer-events:none;box-shadow:none}.card-image{width:100%;overflow:hidden;filter:grayscale(60%) brightness(.92);transition:filter .3s ease,box-shadow .3s ease;margin-bottom:12px;border-radius:12px;box-shadow:inset 4px 4px 10px #c4a020,inset -3px -3px 8px #ffe060}.card:hover .card-image{filter:grayscale(0%) brightness(1);box-shadow:inset 3px 3px 8px #c4a020,inset -2px -2px 6px #ffe870}.card-title{font-family:var(--font-display);line-height:1.1}.card-desc{font-family:var(--font-ui);font-size:.78rem;line-height:1.5;color:var(--color-ink);opacity:.65;margin-top:5px}.card-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}.card-tag{font-size:.6rem;border:none;padding:4px 10px;border-radius:20px;font-family:var(--font-ui);text-transform:uppercase;letter-spacing:.05em;font-weight:700;background:var(--color-bg);color:var(--color-ink);box-shadow:inset 2px 2px 5px #c4a020,inset -2px -2px 4px #ffe870}.card.sz-sm{width:180px}.card.sz-md{width:240px}.card.sz-lg{width:310px}.card.sz-xl{width:370px}.card.sz-sm .card-title{font-size:1.1rem}.card.sz-md .card-title{font-size:1.4rem}.card.sz-lg .card-title{font-size:1.7rem}.card.sz-xl .card-title{font-size:2rem}.card.sz-sm .card-image{height:90px}.card.sz-md .card-image{height:130px}.card.sz-lg .card-image{height:170px}.card.sz-xl .card-image{height:200px}.sidebar-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000040;z-index:1999;opacity:0;pointer-events:none;transition:opacity .35s ease}.sidebar-overlay.open{opacity:1;pointer-events:all}.sidebar{position:fixed;top:0;right:0;width:33.333vw;height:100vh;background:var(--color-bg);box-shadow:-10px 0 30px #c4a020;z-index:2000;padding:48px 40px;transform:translate(100%);transition:transform .35s cubic-bezier(.4,0,.2,1);overflow-y:auto}.sidebar.open{transform:translate(0)}.sidebar h2{font-family:var(--font-display);font-size:2.4rem;margin-bottom:24px;transform:rotate(-1deg)}.sidebar p{font-family:var(--font-ui);font-size:.95rem;line-height:1.7;color:var(--color-ink);opacity:.75;margin-bottom:16px}.sidebar-close{position:absolute;top:22px;right:28px;background:none;border:none;font-size:1.8rem;cursor:pointer;color:var(--color-ink);line-height:1}.drag-hint{position:fixed;bottom:28px;left:50%;transform:translate(-50%);font-family:var(--font-ui);font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.15em;opacity:.5;pointer-events:none;z-index:500;background:var(--color-bg);padding:8px 20px;border-radius:40px;box-shadow:var(--neu-shadow-sm)}