@import url(https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap);.brand,.header{display:flex;align-items:center}.brand-icon,.btn,body,html{overflow:hidden}.canvas-title,.header h1{-webkit-text-fill-color:transparent}*{box-sizing:border-box;margin:0;padding:0}body,html{height:100%;font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:linear-gradient(135deg,#0f172a 0,#1e293b 25%,#334155 50%,#1e293b 75%,#0f172a 100%);background-size:400% 400%;animation:15s infinite gradientShift;color:#e2e8f0;line-height:1.6}@keyframes gradientShift{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:rgba(255,255,255,.05);border-radius:4px}::-webkit-scrollbar-thumb{background:linear-gradient(135deg,#3b82f6,#8b5cf6);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:linear-gradient(135deg,#2563eb,#7c3aed)}.header{justify-content:space-between;padding:16px 24px;background:rgba(15,23,42,.85);backdrop-filter:blur(20px) saturate(180%);border-bottom:1px solid rgba(148,163,184,.1);box-shadow:0 4px 32px rgba(0,0,0,.12),0 2px 8px rgba(0,0,0,.08),inset 0 1px 0 rgba(255,255,255,.05);z-index:100;position:relative;min-height:80px}.btn,.caption-input{font-size:14px;min-height:44px;font-family:inherit}.header::before,.instructions::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(59,130,246,.5),transparent)}.brand{gap:12px}.brand-icon,.header-controls{display:flex;align-items:center}.brand-icon{width:36px;height:36px;background:linear-gradient(135deg,#3b82f6 0,#8b5cf6 50%,#ec4899 100%);border-radius:12px;justify-content:center;box-shadow:0 4px 16px rgba(59,130,246,.3);position:relative}.brand-icon::before{content:'⚡';font-size:18px;filter:drop-shadow(0 0 4px rgba(255, 255, 255, .5))}.brand-icon::after{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(45deg,transparent,rgba(255,255,255,.1),transparent);transform:rotate(45deg);animation:3s infinite shine}@keyframes shine{0%,100%{transform:translateX(-100%) translateY(-100%) rotate(45deg)}50%{transform:translateX(100%) translateY(100%) rotate(45deg)}}.header h1{font-size:24px;font-weight:700;background:linear-gradient(135deg,#f8fafc 0,#cbd5e1 100%);-webkit-background-clip:text;background-clip:text;text-shadow:0 2px 8px rgba(0,0,0,.3);flex-shrink:0;letter-spacing:-.025em}.header-controls{gap:16px;flex-wrap:wrap}.btn,.canvas{align-items:center;position:relative}.main.sidebar-hidden .sidebar,.mobile-header-toggle,.sidebar-mobile-controls,.sidebar-mobile-header{display:none}.btn{padding:12px 20px;border:none;border-radius:12px;font-weight:500;cursor:pointer;transition:.3s cubic-bezier(.4, 0, .2, 1);display:inline-flex;gap:8px}.canvas,.canvas-icon,.main,.sidebar{display:flex}.btn::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s}.canvas::before,.minimap::before{content:'';top:0;left:0;right:0;bottom:0}.btn:hover::before,.feed-item:hover::before{left:100%}.btn-primary{background:linear-gradient(135deg,#3b82f6 0,#8b5cf6 100%);color:#fff;box-shadow:0 4px 16px rgba(59,130,246,.3),0 2px 4px rgba(0,0,0,.1);border:1px solid rgba(255,255,255,.1)}.btn-secondary,.caption-input{border:1px solid rgba(148,163,184,.2);backdrop-filter:blur(8px);color:#e2e8f0}.btn-primary:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 8px 32px rgba(59,130,246,.4),0 4px 12px rgba(0,0,0,.2)}.btn-primary:active{transform:translateY(0) scale(.98)}.btn-secondary{background:rgba(30,41,59,.8)}.btn-secondary:hover{background:rgba(51,65,85,.9);border-color:rgba(148,163,184,.3);transform:translateY(-1px)}.btn-icon{padding:12px;min-width:44px;justify-content:center}.caption-input{padding:12px 16px;border-radius:12px;background:rgba(30,41,59,.6);width:240px;transition:.3s}.caption-input::placeholder{color:#94a3b8}.caption-input:focus{outline:0;border-color:#3b82f6;box-shadow:0 0 0 4px rgba(59,130,246,.1);background:rgba(30,41,59,.8)}.main{height:calc(100vh - 80px)}.canvas-container{flex:1;background:rgba(15,23,42,.3);border-right:1px solid rgba(148,163,184,.1);position:relative;overflow:hidden}.canvas{width:100%;height:100%;background:radial-gradient(circle at 25% 25%,rgba(59,130,246,.1) 0,transparent 50%),radial-gradient(circle at 75% 75%,rgba(139,92,246,.1) 0,transparent 50%),linear-gradient(135deg,rgba(30,41,59,.8) 0,rgba(15,23,42,.9) 100%);justify-content:center;font-size:18px;color:#64748b}.canvas::before{position:absolute;background-image:linear-gradient(rgba(148,163,184,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(148,163,184,.05) 1px,transparent 1px);background-size:32px 32px;animation:20s linear infinite gridMove}@keyframes gridMove{0%{transform:translate(0,0)}100%{transform:translate(32px,32px)}}.canvas-content{text-align:center;z-index:1;padding:32px}.canvas-icon{width:80px;height:80px;background:linear-gradient(135deg,rgba(59,130,246,.2),rgba(139,92,246,.2));border:2px solid rgba(148,163,184,.1);border-radius:24px;align-items:center;justify-content:center;margin:0 auto 24px;font-size:32px;animation:6s ease-in-out infinite float}@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}.canvas-title{font-size:28px;font-weight:600;margin-bottom:12px;background:linear-gradient(135deg,#f8fafc 0,#cbd5e1 100%);-webkit-background-clip:text;background-clip:text}.canvas-description{color:#94a3b8;max-width:480px;margin:0 auto;line-height:1.6}.sidebar{width:360px;background:rgba(15,23,42,.85);backdrop-filter:blur(20px) saturate(180%);border-left:1px solid rgba(148,163,184,.1);flex-direction:column;overflow-y:auto;transition:transform .4s cubic-bezier(.4, 0, .2, 1);height:100vh;position:relative}.instructions,.minimap{position:relative;overflow:hidden}.sidebar-section{padding:24px;border-bottom:1px solid rgba(148,163,184,.1);flex-shrink:0}.sidebar-section:first-child{padding-top:24px}.sidebar-section:last-child{border-bottom:none}.sidebar-section h3{font-size:16px;font-weight:600;margin-bottom:16px;color:#f8fafc;display:flex;align-items:center;gap:8px}.sidebar-section h3::before{content:'';width:3px;height:16px;background:linear-gradient(135deg,#3b82f6,#8b5cf6);border-radius:2px}.sidebar-section p{font-size:14px;color:#94a3b8;line-height:1.6}.instructions{background:linear-gradient(135deg,rgba(59,130,246,.1),rgba(139,92,246,.1));border:1px solid rgba(59,130,246,.2);border-radius:16px;padding:20px}.minimap{width:100%;height:312px;background:linear-gradient(135deg,rgba(30,41,59,.8),rgba(15,23,42,.9));border:1px solid rgba(148,163,184,.2);border-radius:16px;cursor:crosshair;transition:.3s}.minimap:hover{border-color:rgba(59,130,246,.4);box-shadow:0 8px 32px rgba(59,130,246,.2)}.minimap::before{position:absolute;background-image:linear-gradient(rgba(148,163,184,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(148,163,184,.1) 1px,transparent 1px);background-size:16px 16px}.minimap::after{content:"📍 Navigation";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#94a3b8;font-size:12px;font-weight:500;text-align:center;z-index:1}.minimap-viewport{position:absolute;top:20px;left:20px;width:32px;height:32px;border:2px solid #3b82f6;border-radius:4px;background:rgba(59,130,246,.2);box-shadow:0 0 16px rgba(59,130,246,.4);animation:2s infinite pulse}.feed-item,.placeholder-img{display:flex;position:relative;overflow:hidden}@keyframes pulse{0%,100%{opacity:1}50%{opacity:.6}}.feed-list{list-style:none;display:flex;flex-direction:column;gap:16px}.feed-item{align-items:center;gap:16px;padding:16px;background:linear-gradient(135deg,rgba(30,41,59,.6),rgba(15,23,42,.8));border:1px solid rgba(148,163,184,.1);border-radius:16px;transition:.3s cubic-bezier(.4, 0, .2, 1);cursor:pointer}.feed-item::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.05),transparent);transition:left .5s}.feed-item:hover{background:linear-gradient(135deg,rgba(51,65,85,.8),rgba(30,41,59,.9));border-color:rgba(59,130,246,.3);transform:translateY(-2px);box-shadow:0 8px 32px rgba(0,0,0,.2)}.placeholder-img{width:56px;height:56px;background:linear-gradient(135deg,#3b82f6,#8b5cf6);border-radius:12px;align-items:center;justify-content:center;font-size:12px;font-weight:600;color:#fff;flex-shrink:0}.placeholder-img::before{content:'🖼️';font-size:24px;filter:drop-shadow(0 0 4px rgba(0, 0, 0, .3))}.feed-item-content{flex:1;min-width:0}.feed-item-coords{font-size:11px;color:#3b82f6;margin-bottom:4px;font-weight:500;font-family:Monaco,Menlo,'Ubuntu Mono',monospace;background:rgba(59,130,246,.1);padding:2px 8px;border-radius:8px;display:inline-block}.feed-item-caption{font-size:13px;color:#e2e8f0;font-weight:400;line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (max-width:768px){.header{padding:12px 16px;min-height:80px}.header h1{font-size:20px}.header-controls{display:none}.mobile-header-toggle{display:block}.main{height:calc(100vh - 80px)}.canvas-container{border-right:none}.sidebar{position:fixed;top:0;right:0;height:100vh;z-index:200;transform:translateX(100%);box-shadow:none;width:min(360px,90vw);padding-top:80px}.sidebar-mobile-controls,.sidebar-mobile-header{padding:24px;border-bottom:1px solid rgba(148,163,184,.1)}.sidebar.open{transform:translateX(0);box-shadow:-8px 0 24px rgba(0,0,0,.3)}.sidebar-mobile-header{display:block;background:rgba(15,23,42,.9);position:absolute;top:0;left:0;right:0;height:80px;display:flex;align-items:center;justify-content:space-between}.sidebar-mobile-controls{display:flex;flex-direction:column;gap:16px}.sidebar-mobile-controls .caption-input{width:100%}.sidebar-mobile-controls .btn{width:100%;justify-content:center}#sidebarCloseBtn{padding:8px;min-width:36px;font-size:16px;color:#e2e8f0;background:rgba(51,65,85,.8);border:1px solid rgba(148,163,184,.2)}#sidebarCloseBtn:hover{background:rgba(71,85,105,.9);color:#f8fafc}.sidebar-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(8px);z-index:150;opacity:0;pointer-events:none;transition:opacity .4s}.sidebar-backdrop.active{opacity:1;pointer-events:auto}.sidebar-section{padding:20px}.sidebar-section:last-child{padding-bottom:40px}.minimap{height:280px}}@media (min-width:769px){.mobile-header-toggle{display:none}.sidebar,.sidebar-section:last-child{padding-bottom:48px}}@media (max-width:480px){.header{padding:12px;min-height:80px}.header h1{font-size:18px}.sidebar{width:min(320px,95vw)}.canvas-icon{width:60px;height:60px;font-size:24px}.canvas-title,.placeholder-img::before{font-size:20px}.sidebar-section{padding:16px}.feed-item{padding:12px;gap:12px}.placeholder-img{width:48px;height:48px}}@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}.loading-shimmer{position:relative;overflow:hidden}.loading-shimmer::after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);transform:translateX(-100%);animation:2s infinite shimmer}