/* Extracted Style 1 */
:root{--bg-color:#e8eaed;--note-shadow:2px 8px 15px rgba(0,0,0,0.15);}body.dark-mode{--bg-color:#1e1e1e;--note-shadow:0 5px 20px rgba(0,0,0,0.6);background-image:none !important;}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}html,body{margin:0;padding:0;overflow:hidden;height:100vh;width:100vw;font-family:'Poppins',sans-serif;background-color:var(--bg-color);background-image:url('sticki_notes.jpg');background-size:cover;user-select:none;touch-action:none;}#intro-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.92);z-index:30000;display:flex;flex-direction:column;align-items:center;justify-content:center;color:white;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:opacity 0.5s ease-out;padding:20px;text-align:center;}.intro-box{max-width:600px;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);border-radius:15px;padding:30px;box-shadow:0 10px 30px rgba(0,0,0,0.5);max-height:90vh;overflow-y:auto;}.intro-box h1{margin-top:0;font-family:'Kalam',cursive;color:#ffeb3b;}.intro-lines{margin:20px 0;text-align:left;font-size:1rem;line-height:1.8;}.intro-lines p{margin:5px 0;}.highlight-green{color:#00ff00;font-weight:bold;text-shadow:0 0 5px rgba(0,255,0,0.5);}.highlight-orange{color:#ff6600;font-weight:bold;text-shadow:0 0 5px rgba(255,102,0,0.5);}.highlight-red{color:#ff3333;font-weight:bold;text-shadow:0 0 5px rgba(255,51,51,0.5);}.connect-instruction{margin-top:15px;border-top:1px solid rgba(255,255,255,0.2);padding-top:10px;font-size:0.95rem;color:#ddd;}.tap-msg{margin-top:30px;font-size:0.9rem;opacity:0.7;animation:blink-text 2s infinite;}@keyframes blink-text{0%,100% {opacity:0.4;}50% {opacity:1;}}#mobile-hint{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,0.85);color:white;padding:20px 30px;border-radius:15px;z-index:40000;text-align:center;font-family:'Poppins',sans-serif;pointer-events:none;opacity:0;transition:opacity 0.5s;box-shadow:0 0 20px rgba(255,235,59,0.3);border:1px solid rgba(255,255,255,0.2);}#mobile-hint.show{opacity:1;animation:pulse-border 2s infinite;}#mobile-hint h3{margin:0 0 5px 0;color:#ffeb3b;}@keyframes pulse-border{0%{box-shadow:0 0 10px rgba(255,235,59,0.1);}50%{box-shadow:0 0 25px rgba(255,235,59,0.5);}100%{box-shadow:0 0 10px rgba(255,235,59,0.1);}}#sticker-sidebar{position:fixed;left:0;top:0;bottom:0;width:300px;background:rgba(20,20,20,0.6);backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);color:white;z-index:10000;transform:translateX(-100%);transition:transform 0.3s;display:flex;flex-direction:column;}#sticker-sidebar.open{transform:translateX(0);}.sidebar-header{padding:20px;display:flex;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,0.1);}.close-sidebar-btn{background:none;border:none;color:white;font-size:1.2rem;cursor:pointer;}#sticker-grid{padding:15px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;overflow-y:auto;}.sticker-option{width:100%;cursor:pointer;background:rgba(255,255,255,0.1);border-radius:8px;padding:5px;-webkit-user-drag:none;user-drag:none;}#controls-sidebar{position:fixed;right:20px;top:20px;display:flex;flex-direction:column;gap:15px;z-index:5000;pointer-events:none;}.action-btn{pointer-events:auto;background:rgba(20,20,20,0.7);backdrop-filter:blur(10px);color:white;border:1px solid rgba(255,255,255,0.1);padding:12px 24px;border-radius:50px;cursor:pointer;font-weight:600;display:flex;align-items:center;gap:10px;box-shadow:0 8px 20px rgba(0,0,0,0.2);transition:0.2s;}.action-btn:active{transform:scale(0.95);}#board-container{width:100%;height:100%;overflow:hidden;touch-action:none;}#board{width:100%;height:100%;position:relative;}.note{width:300px;height:360px;background-color:var(--paper-color);padding:15px 20px;display:flex;flex-direction:column;position:absolute;box-shadow:var(--note-shadow);border-radius:4px;touch-action:none;animation:popIn 0.3s ease-out;}@keyframes popIn{from{transform:scale(0);opacity:0;}to{transform:scale(1);opacity:1;}}.note.selected{outline:2px solid #007bff;}.note textarea{flex-grow:1;width:100%;border:none;background:transparent;resize:none;font-family:'Kalam',cursive;font-size:1.5rem;outline:none;z-index:10;}.note canvas{position:absolute;top:50px;left:20px;bottom:20px;right:20px;background:transparent;pointer-events:none;z-index:20;}.note canvas.active{pointer-events:auto;background:rgba(255,255,255,0.2);border:1px dashed #999;}.note-tools{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;z-index:30;cursor:move;}.tool-btn{border:none;background:rgba(0,0,0,0.1);padding:5px 10px;border-radius:10px;cursor:pointer;}.led-group{display:flex;gap:30px;align-items:center;}.led-note-btn{width:20px;height:20px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#666,#333);border:2px solid #222;cursor:pointer;box-shadow:0 2px 5px rgba(0,0,0,0.3);transition:all 0.2s;}.led-note-btn.connected{background:radial-gradient(circle at 30% 30%,#80ff80,#00b300);border-color:#004d00;box-shadow:0 0 8px #00ff00;}.led-note-btn.sending{animation:pulse-send 0.5s ease-in-out;}@keyframes pulse-send{0%{transform:scale(1);filter:brightness(1);}50%{transform:scale(1.3);filter:brightness(2);}100%{transform:scale(1);filter:brightness(1);}}.led-disconnect-btn{width:20px;height:20px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#ff8080,#b30000);border:2px solid #4d0000;cursor:pointer;box-shadow:0 2px 5px rgba(0,0,0,0.3);transition:all 0.2s;}.led-disconnect-btn:active{transform:scale(0.9);}.led-alert-btn{width:15px;height:15px;border-radius:50%;background:#551a00;border:1px solid #331000;box-shadow:inset 0 0 2px black;transition:all 0.2s;}.led-alert-btn.blinking{background:radial-gradient(circle at 30% 30%,#ff6600,#cc3300);border-color:#ff4500;box-shadow:0 0 10px #ff4500,0 0 20px #ff2200;animation:blink-neon 0.4s infinite alternate;}@keyframes blink-neon{0%{opacity:0.5;transform:scale(1);filter:brightness(0.8);}100%{opacity:1;transform:scale(1.25);filter:brightness(1.5);}}.sticker-on-note{position:absolute;width:70px;z-index:15;user-select:none;-webkit-user-drag:none;}#modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:20000;display:flex;justify-content:center;align-items:center;}.modal-note{background:white;padding:25px;border-radius:15px;text-align:center;font-family:sans-serif;}.modal-btn{padding:10px 20px;margin:5px;border-radius:8px;border:none;cursor:pointer;background:#333;color:#fff;}.hidden{display:none !important;}@media (max-width:600px){#controls-sidebar{top:auto;bottom:30px;right:0;left:0;flex-direction:row;justify-content:center;}#sticker-sidebar{width:160px;}#sticker-grid{grid-template-columns:repeat(2,1fr);gap:6px;padding:10px;}.sidebar-header{padding:15px 10px;font-size:0.9rem;}.intro-box{max-width:90%;}}