@import"https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Caveat:wght@700&display=swap";:root{--font-sans: "Outfit", sans-serif;--font-handwriting: "Caveat", cursive;--color-yellow: #FFF176;--color-green: #A5D6A7;--color-blue: #90CAF9;--color-peach: #FFAB91;--color-yellow-gradient: linear-gradient(135deg, #FFF59D 0%, #FFF176 100%);--color-green-gradient: linear-gradient(135deg, #C8E6C9 0%, #A5D6A7 100%);--color-blue-gradient: linear-gradient(135deg, #BBDEFB 0%, #90CAF9 100%);--color-peach-gradient: linear-gradient(135deg, #FFCCBC 0%, #FFAB91 100%)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-sans);background-color:#030712;color:#f3f4f6;overflow-x:hidden;min-height:100vh;-webkit-font-smoothing:antialiased}.sticky-note{position:relative;width:250px;height:250px;padding:24px;box-shadow:0 15px 30px -10px #0006,0 5px 15px -5px #0000004d,inset 0 -8px 20px -8px #00000026;display:flex;flex-direction:column;justify-content:space-between;transform-style:preserve-3d;transition:transform .3s cubic-bezier(.175,.885,.32,1.275),box-shadow .3s ease;-webkit-user-select:none;user-select:none;border-radius:2px 2px 2px 28px/2px}.sticky-note:after{content:"";position:absolute;bottom:0;right:0;width:25px;height:25px;background:#00000014;box-shadow:-2px -2px 5px #00000026;border-radius:12px 0 0;border-bottom:2px solid rgba(0,0,0,.03);border-right:2px solid rgba(0,0,0,.03)}.sticky-note-content{position:relative;width:100%;height:100%;display:flex;flex-direction:column;justify-content:space-between;z-index:2;pointer-events:none}.sticky-note-text{font-family:var(--font-handwriting);font-size:1.65rem;line-height:1.2;color:#0f172a;word-break:break-word;white-space:pre-wrap;flex-grow:1;overflow:hidden;text-shadow:.5px .5px 0px rgba(255,255,255,.4);max-height:160px;display:flex;align-items:center}.text-placeholder{color:#0f172a40;font-style:italic}.sticky-note-sender{font-family:var(--font-sans);font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:#0f172a99;text-align:right;border-top:1px dashed rgba(15,23,42,.12);padding-top:6px;margin-top:6px}.sticky-note-drawing{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain;pointer-events:none;z-index:1}.tab-terminal-container{display:flex;flex-direction:column;min-height:100vh;background-color:#0b0f19}.tab-terminal-header{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;background:#0f172a66;border-bottom:1px solid rgba(255,255,255,.05);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.tab-terminal-header h1{font-size:1.5rem;font-weight:800;background:linear-gradient(135deg,#60a5fa,#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.tab-terminal-header .subtitle{font-size:.8rem;text-transform:uppercase;letter-spacing:1.5px;color:#9ca3af;margin-left:8px}.header-actions{display:flex;align-items:center;gap:16px}.connection-pill{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;border:1px solid;transition:all .3s ease}.connection-pill.connected{color:#34d399;background-color:#34d3991a;border-color:#34d39933}.connection-pill.connecting{color:#fbbf24;background-color:#fbbf241a;border-color:#fbbf2433;animation:pulse 1.5s infinite}.connection-pill.disconnected{color:#f87171;background-color:#f871711a;border-color:#f8717133}.action-icon-btn{background:#ffffff0d;border:1px solid rgba(255,255,255,.08);color:#d1d5db;padding:8px;border-radius:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.action-icon-btn:hover{background:#ffffff1a;color:#fff;transform:translateY(-1px)}.tab-terminal-main{display:grid;grid-template-columns:1.1fr .9fr;flex-grow:1;padding:24px;gap:24px;max-width:1400px;margin:0 auto;width:100%}@media (max-width: 768px){.tab-terminal-main{grid-template-columns:1fr}}.sticky-preview-section{display:flex;flex-direction:column;gap:16px;background:#11182766;border:1px solid rgba(255,255,255,.03);border-radius:24px;padding:24px;justify-content:center;align-items:center}.section-title{font-size:.9rem;color:#9ca3af;font-weight:500;text-align:center}.preview-container{position:relative;width:320px;height:320px;display:flex;align-items:center;justify-content:center;background:#0003;border-radius:20px;border:2px dashed rgba(255,255,255,.05);overflow:hidden}.preview-note{width:280px!important;height:280px!important}.preview-canvas{position:absolute;top:0;left:0;width:100%;height:100%;z-index:3;touch-action:none}.flying-message{position:absolute;color:#60a5fa;font-weight:700;font-size:1.1rem;letter-spacing:1px;animation:pulse 1s infinite}.success-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#0f172ae6;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;animation:scale-in .3s cubic-bezier(.16,1,.3,1);padding:24px;text-align:center}.success-icon{color:#34d399;animation:bounce 1s infinite}.success-overlay h3{font-size:1.5rem;font-weight:800;color:#fff}.success-overlay p{font-size:.9rem;color:#9ca3af}.fly-away{animation:fly-up-out .8s cubic-bezier(.25,1,.5,1) forwards!important}@keyframes fly-up-out{0%{transform:scale(1) translateY(0) rotate(0);opacity:1}to{transform:scale(.1) translateY(-600px) rotate(45deg);opacity:0}}.terminal-controls-section{background:#11182780;border:1px solid rgba(255,255,255,.05);border-radius:24px;padding:28px;box-shadow:0 20px 40px #0000004d}.controls-form{display:flex;flex-direction:column;gap:20px}.control-label{display:block;font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:#9ca3af;margin-bottom:8px}.color-selectors{display:flex;gap:16px}.color-btn{width:44px;height:44px;border-radius:50%;border:2px solid rgba(255,255,255,.1);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 10px #0003}.color-btn:hover{transform:scale(1.1);border-color:#fff}.color-btn.active{transform:scale(1.15);border-color:#fff;box-shadow:0 0 15px #ffffff40}.color-btn .dot{width:8px;height:8px;background-color:#0f172a;border-radius:50%}.drawing-toolbar{display:flex;gap:12px;margin-bottom:12px}.tool-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:10px;background:#ffffff08;border:1px solid rgba(255,255,255,.08);border-radius:12px;color:#d1d5db;font-weight:600;font-size:.85rem;cursor:pointer;transition:all .2s}.tool-btn:hover{background:#ffffff14;color:#fff}.tool-btn.active{background:#2563eb;border-color:#3b82f6;color:#fff;box-shadow:0 4px 12px #2563eb4d}.tool-btn.danger{background:#ef44440d;border-color:#ef444426;color:#f87171}.tool-btn.danger:hover{background:#ef444426;color:#fff}.brush-slider-group{display:flex;align-items:center;gap:12px;font-size:.8rem;color:#9ca3af;padding:4px 0}.brush-slider{flex-grow:1;accent-color:#3b82f6;height:6px;background:#ffffff14;border-radius:3px;outline:none}.brush-value{font-weight:700;color:#fff}.terminal-textarea{width:100%;background:#03071266;border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:14px;color:#fff;font-family:var(--font-sans);font-size:.95rem;resize:none;transition:border-color .2s}.terminal-textarea:focus{outline:none;border-color:#3b82f6}.char-counter{font-size:.75rem;color:#6b7280;text-align:right;margin-top:4px}.terminal-input{width:100%;background:#03071266;border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:12px 14px;color:#fff;font-family:var(--font-sans);font-size:.95rem;transition:border-color .2s}.terminal-input:focus{outline:none;border-color:#3b82f6}.submit-note-btn{display:flex;align-items:center;justify-content:center;gap:10px;padding:16px;background:linear-gradient(135deg,#2563eb,#1d4ed8);border:none;border-radius:16px;color:#fff;font-weight:700;font-size:1rem;cursor:pointer;transition:all .2s;box-shadow:0 10px 20px -5px #2563eb4d;margin-top:10px}.submit-note-btn:hover{background:linear-gradient(135deg,#3b82f6,#2563eb);transform:translateY(-1px);box-shadow:0 12px 24px -5px #2563eb66}.submit-note-btn:disabled{background:#ffffff0d;color:#4b5563;cursor:not-allowed;box-shadow:none;transform:none}.led-wall-container{position:relative;min-height:100vh;width:100vw;overflow:hidden;display:flex;flex-direction:column}.led-wall-header{display:flex;justify-content:space-between;align-items:center;padding:24px 40px;z-index:10;background:linear-gradient(180deg,#f8fafcf2,#f8fafc00)}.brand-badge{background:linear-gradient(90deg,#6366f114,#ec489914);border:1px solid rgba(15,23,42,.08);padding:6px 16px;border-radius:9999px;font-size:.75rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:#7c3aed}.led-wall-header h1{font-size:2.2rem;font-weight:800;letter-spacing:-.5px;background:linear-gradient(90deg,#0f172a 40%,#334155);-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 4px 15px rgba(15,23,42,.05)}.led-controls{display:flex;align-items:center;gap:16px}.connection-status-dot{position:relative;display:flex;width:12px;height:12px}.connection-status-dot.connected .dot-core{background-color:#10b981}.connection-status-dot.connected .dot-blink{background-color:#34d399}.connection-status-dot.connecting .dot-core{background-color:#f59e0b}.connection-status-dot.connecting .dot-blink{background-color:#fbbf24}.connection-status-dot.disconnected .dot-core{background-color:#ef4444}.connection-status-dot.disconnected .dot-blink{background-color:#f87171}.ambient-bg{position:fixed;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,#f8fafc,#f1f5f9,#e2e8f0);z-index:-2;overflow:hidden}.ambient-bg:before,.ambient-bg:after{content:"";position:absolute;width:50vw;height:50vw;border-radius:50%;filter:blur(120px);opacity:.35;pointer-events:none}.ambient-bg:before{top:-10%;left:20%;background:radial-gradient(circle,#bfdbfe 0%,transparent 70%);animation:float-slow 20s infinite alternate ease-in-out}.ambient-bg:after{bottom:-10%;right:15%;background:radial-gradient(circle,#ddd6fe 0%,transparent 70%);animation:float-slow 25s infinite alternate-reverse ease-in-out}.dot-core{position:relative;width:12px;height:12px;border-radius:50%;z-index:2}.dot-blink{position:absolute;width:12px;height:12px;border-radius:50%;opacity:.75;animation:ping 1.8s cubic-bezier(0,0,.2,1) infinite;z-index:1}.led-control-btn{background:#0f172a0a;border:1px solid rgba(15,23,42,.08);color:#475569;padding:10px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.led-control-btn:hover{background:#0f172a14;color:#0f172a;transform:scale(1.05)}.led-flow-board{flex-grow:1;display:flex;flex-direction:column;justify-content:space-around;padding:40px 0;transition:filter .8s ease,opacity .8s ease;z-index:1}.board-dimmed{filter:blur(6px) brightness(.9);opacity:.55;pointer-events:none}.flow-lane{position:relative;width:100%;height:270px;overflow:visible}.flowing-wrapper{position:absolute;left:0;will-change:transform;animation:flow-left-to-right linear infinite}.flowing-wrapper .sticky-note{animation:vertical-bob 8s ease-in-out infinite alternate}@keyframes flow-left-to-right{0%{transform:translate3d(-300px,0,0)}to{transform:translate3d(100vw,0,0)}}@keyframes vertical-bob{0%{transform:translateY(var(--drift-y)) rotate(var(--rotation))}to{transform:translateY(calc(var(--drift-y) + 20px)) rotate(calc(var(--rotation) + 3deg))}}.led-sparkles{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:2}.sparkle{position:absolute;width:8px;height:8px;background:#a78bfa;border-radius:50%;box-shadow:0 0 10px #a78bfa66;opacity:0}.sparkle.s1{top:20%;left:15%;animation:pulse-sparkle 6s infinite 0s}.sparkle.s2{top:60%;left:45%;animation:pulse-sparkle 8s infinite 2s}.sparkle.s3{top:35%;left:80%;animation:pulse-sparkle 7s infinite 4s}.sparkle.s4{top:75%;left:70%;animation:pulse-sparkle 9s infinite 1s}@keyframes pulse-sparkle{0%,to{opacity:0;transform:scale(.5)}50%{opacity:.4;transform:scale(1.2)}}.spotlight-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;display:flex;align-items:center;justify-content:center;background:#0f172a40;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:fade-in .5s ease-out}.spotlight-note-container{display:flex;flex-direction:column;align-items:center;gap:32px;perspective:1000px}.spotlight-banner{font-size:1.1rem;font-weight:800;color:#fff;letter-spacing:6px;text-transform:uppercase;background:linear-gradient(90deg,#ec4899,#8b5cf6);padding:8px 24px;border-radius:12px;box-shadow:0 0 30px #8b5cf666;border:1px solid rgba(255,255,255,.1);animation:slide-down .4s cubic-bezier(.175,.885,.32,1.275)}.spotlight-note{width:320px!important;height:320px!important;transform:scale(1.6) rotate(var(--final-rotation))!important;animation:pop-in-spring .6s cubic-bezier(.175,.885,.32,1.35) forwards;box-shadow:0 35px 60px -15px #000000b3,0 15px 30px -10px #0009,0 0 80px #ffffff1a;border-radius:2px 2px 2px 32px/2px}.spotlight-text{font-size:2.1rem!important;max-height:200px!important}.spotlight-sender{font-size:1rem!important;margin-top:12px!important;padding-top:10px!important}.spotlight-timer-container{width:250px;height:6px;background:#ffffff14;border-radius:9999px;overflow:hidden;box-shadow:0 2px 10px #0000004d;margin-top:40px;border:1px solid rgba(255,255,255,.05)}.spotlight-timer-bar{height:100%;background:linear-gradient(90deg,#60a5fa,#a78bfa);transition:width .05s linear}@keyframes pop-in-spring{0%{transform:scale(.3) rotate(-15deg);opacity:0}70%{transform:scale(1.7) rotate(4deg);opacity:1}to{transform:scale(1.6) rotate(var(--final-rotation))}}@keyframes slide-down{0%{transform:translateY(-40px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.cool-theme{position:relative;background-color:#080b12!important;overflow:hidden}.tab-ambient-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:75vw;height:75vw;background:radial-gradient(circle,rgba(99,102,241,.04) 0%,transparent 70%);z-index:0;pointer-events:none}.glass-panel{background:#0f172a8c!important;border:1px solid rgba(255,255,255,.05)!important;-webkit-backdrop-filter:blur(16px) saturate(120%);backdrop-filter:blur(16px) saturate(120%);box-shadow:0 20px 40px #0006!important}.cool-focus{transition:all .3s cubic-bezier(.16,1,.3,1)!important}.cool-focus:focus{border-color:#6366f1!important;box-shadow:0 0 15px #6366f140!important;background:#03071299!important}.unified-canvas-view{height:100vh;display:flex;flex-direction:column}.canvas-workspace{position:relative;flex-grow:1;display:flex;align-items:center;justify-content:center;padding:24px;z-index:1;overflow:hidden}.canvas-card-wrapper{display:flex;flex-direction:column;align-items:center;gap:20px;transform-style:preserve-3d}.tablet-canvas-note{width:380px!important;height:380px!important;transform-origin:center;will-change:transform;position:relative;z-index:3}.tablet-canvas-note-sheet{position:absolute;width:380px!important;height:380px!important;border-radius:2px 2px 2px 28px;box-shadow:0 10px 25px -10px #0006,0 5px 10px -5px #0000004d;pointer-events:none;transform-origin:center;will-change:transform}.tablet-canvas-note-sheet.sheet-bottom{z-index:1}.tablet-canvas-note-sheet.sheet-middle{z-index:2}.inline-inputs-container{display:flex;flex-direction:column;gap:10px;width:380px;margin-top:15px;z-index:4}.inline-textarea{width:100%;background:#0f172a66;border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:12px;color:#fff;font-family:var(--font-sans);font-size:.9rem;resize:none;text-align:center}.inline-input-name{width:100%;background:#0f172a66;border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:10px;color:#fff;font-family:var(--font-sans);font-size:.85rem;text-align:center}.floating-dock{position:fixed;bottom:24px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:12px;padding:8px 16px;border-radius:9999px;z-index:10;height:56px;box-shadow:0 15px 30px #00000080,0 0 15px #6366f11a!important}.dock-section{display:flex;align-items:center;gap:8px}.dock-divider{width:1px;height:24px;background:#ffffff14}.dock-color-btn{width:32px;height:32px;border-radius:50%;border:1.5px solid rgba(255,255,255,.15);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s cubic-bezier(.4,0,.2,1)}.dock-color-btn:hover{transform:scale(1.1);border-color:#fff}.dock-color-btn.active{transform:scale(1.15);border-color:#fff}.dock-color-btn .dot{width:6px;height:6px;background-color:#0f172a;border-radius:50%}.dock-tool-btn{background:transparent;border:none;color:#94a3b8;padding:8px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.dock-tool-btn:hover{background:#ffffff0d;color:#fff}.dock-tool-btn.active{background:#2563eb;color:#fff;box-shadow:0 4px 10px #2563eb4d}.dock-tool-btn.danger{color:#f87171}.dock-tool-btn.danger:hover{background:#ef44441a;color:#fff}.dock-submit-btn{background:linear-gradient(135deg,#4f46e5,#3730a3);border:none;border-radius:9999px;color:#fff;font-weight:700;font-size:.85rem;padding:8px 16px;cursor:pointer;display:flex;align-items:center;gap:6px;transition:all .2s;box-shadow:0 4px 10px #4f46e533}.dock-submit-btn:hover:not(:disabled){background:linear-gradient(135deg,#6366f1,#4f46e5);transform:translateY(-1px);box-shadow:0 6px 14px #4f46e54d}.dock-submit-btn:disabled{background:#ffffff0a;color:#4b5563;cursor:not-allowed;box-shadow:none}.flying-message-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#6366f1;font-weight:800;font-size:1.5rem;letter-spacing:2px;animation:pulse 1s infinite;z-index:10;background:#080b12b3;padding:16px 32px;border-radius:16px;border:1px solid rgba(99,102,241,.15);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.inline-submit-btn{width:auto!important;max-width:220px!important;margin:24px auto 0!important;height:38px!important;padding:0 24px!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;border-radius:9999px!important;border:1px solid rgba(6,182,212,.35)!important;background:linear-gradient(135deg,#06b6d426,#06b6d40d)!important;color:#a5f3fc!important;font-family:var(--font-sans)!important;font-weight:600!important;font-size:.85rem!important;cursor:pointer!important;transition:all .25s cubic-bezier(.4,0,.2,1)!important;box-shadow:0 4px 12px #00000040,0 0 8px #06b6d414!important;-webkit-backdrop-filter:blur(4px)!important;backdrop-filter:blur(4px)!important}.inline-submit-btn:hover:not(:disabled){border-color:#06b6d4b3!important;background:linear-gradient(135deg,#06b6d44d,#06b6d426)!important;color:#fff!important;transform:translateY(-1px) scale(1.02)!important;box-shadow:0 6px 18px #06b6d440,0 0 12px #06b6d426!important}.inline-submit-btn:active:not(:disabled){transform:translateY(0) scale(.98)!important}.inline-submit-btn:disabled{background:#0f172a33!important;border-color:#ffffff08!important;color:#4b5563!important;cursor:not-allowed!important}
