.floating-orb{position:absolute;width:50px;height:50px;display:flex;align-items:center;justify-content:center;color:var(--color-text, #333);font-family:Courier New,monospace;font-weight:700;font-size:.9em;cursor:pointer;transition:none;-webkit-user-select:none;user-select:none;border:2px solid var(--color-text, #333);background:var(--color-background-neutral, #f5f5f5);box-shadow:inset 1px 1px #fffc,inset -1px -1px #0000004d,2px 2px #0003}.floating-orb:hover{background:#ffffff1a}.floating-orb:active{transform:translate(1px,1px);box-shadow:inset -1px -1px #fffc,inset 1px 1px #0000004d,1px 1px #0003}.data-modes-container{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;height:100%}.data-mode-demo{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:8px;border:2px solid var(--color-text, #333);background:var(--color-background-neutral, #f5f5f5);min-height:70px;position:relative;box-shadow:inset 1px 1px #fffc,inset -1px -1px #0000004d}.data-mode-demo.persistent{border-color:#2e8b57}.data-mode-demo.persistent .mode-label,.data-mode-demo.persistent .mode-value{color:#2e8b57}.data-mode-demo.awareness{border-color:#ff6b35}.data-mode-demo.awareness .mode-label,.data-mode-demo.awareness .mode-value{color:#ff6b35}.data-mode-demo .mode-value{font-size:1.4em;font-weight:700;line-height:1}.data-mode-demo .large-number-display{display:flex;flex-direction:column;align-items:center;line-height:1}.data-mode-demo .large-number-display .number-main{font-size:.9em}.data-mode-demo .large-number-display .number-suffix{font-size:.5em;opacity:.8}#viewCount{width:auto!important;border:none!important;background:none!important;font-size:1.4em;font-weight:700;line-height:1;color:#2e8b57;text-align:center}#viewCount .mode-description{font-size:.7em;color:var(--color-text, #333);margin-top:2px}.modes-separator{font-size:.9em;color:var(--color-text-translucent, rgba(51, 51, 51, .5));font-weight:700}.user-dots{display:flex;gap:3px;margin-top:4px;flex-wrap:wrap;justify-content:center}.user-dot{width:8px;height:8px;border-radius:50%;border:1px solid rgba(0,0,0,.3);animation:pulse-dot 2s infinite}.user-dot:first-child{border:1px solid #000;box-shadow:0 0 3px #00000080}.user-dot-overflow{width:16px;height:8px;background:var(--color-text-translucent, rgba(51, 51, 51, .5));color:#fff;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:.5em;font-family:Courier New,monospace;font-weight:700;animation:pulse-dot 2s infinite}@keyframes pulse-dot{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.2);opacity:.8}}.component-store{width:100%;overflow:hidden}.items-grid{display:flex;flex-wrap:wrap;flex-direction:row;gap:.2em;flex:1;overflow:hidden;justify-content:center;max-height:80px}.store-item{display:flex;flex-direction:column;align-items:center;padding:6px 4px;cursor:pointer;transition:all .3s ease;position:relative}.item-visual{height:24px;display:flex;align-items:center;justify-content:center;margin-bottom:4px}.item-image{height:24px;width:auto;filter:brightness(.7) saturate(.8);transition:all .3s ease}.item-image.on{filter:brightness(1.2) saturate(1.6) drop-shadow(0px 0px 4px rgba(255,220,100,.5))}.item-emoji{font-size:18px;opacity:.6;transition:all .3s ease;filter:grayscale(1)}.item-emoji.active{opacity:1;filter:grayscale(0);transform:scale(1.1)}.scheduled-behaviors{width:100%;height:100%;display:flex;flex-direction:row;gap:12px;align-items:center;position:relative}.clock-section{display:flex;justify-content:center;position:relative}.main-clock{position:relative;display:flex;align-items:center;justify-content:center}.clock-face{display:flex;flex-direction:column;align-items:center;justify-content:center;width:60px;height:60px;border:2px solid var(--color-text);border-radius:50%;background:var(--color-background-neutral);position:relative;box-shadow:inset 1px 1px 2px #ffffff4d,inset -1px -1px 2px #0000004d}.clock-time{font-size:.6em;font-weight:700;color:var(--color-text);line-height:1}.clock-pulse{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:64px;height:64px;border:2px solid transparent;border-radius:50%;transition:all .3s ease}.clock-pulse.triggered{border-color:var(--color-text-accent);animation:clockPulse 2s ease-out}@keyframes clockPulse{0%{transform:translate(-50%,-50%) scale(1);opacity:1}to{transform:translate(-50%,-50%) scale(2);opacity:0}}.tasks-section{flex:1;display:flex;flex-direction:column;overflow:hidden}.tasks-list{display:flex;flex-direction:column;gap:4px;overflow-y:auto;flex:1}.task-item{display:flex;align-items:center;gap:6px;padding:4px 6px;border:1px solid var(--color-text-translucent);background:var(--color-background-neutral);transition:all .3s ease;position:relative;box-shadow:inset 1px 1px #fff3,inset -1px -1px #0003}.task-item.pending{border-color:orange;background:#ffa5001a;animation:taskPending 1s ease-in-out infinite alternate}.task-item.active{border-color:green;background:#00ff001a;box-shadow:inset 1px 1px #ffffff4d,inset -1px -1px #0000004d,0 0 4px #00ff004d}.task-item.triggering{animation:taskTrigger 2s ease-out}@keyframes taskPending{0%{box-shadow:inset 1px 1px #fff3,inset -1px -1px #0003}to{box-shadow:inset 1px 1px #ffffff4d,inset -1px -1px #0000004d,0 0 6px #ffa50066}}@keyframes taskTrigger{0%{transform:scale(1);background:#00ff001a}20%{transform:scale(1.05);background:#00ff004d}40%{transform:scale(1.02)}to{transform:scale(1);background:#00ff001a}}.task-icon{font-size:1em;width:16px;height:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.task-info{flex:1;display:flex;flex-direction:column;min-width:0}.task-name{font-size:.6em;font-weight:700;color:var(--color-text);line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.task-cron{font-size:.45em;color:var(--color-text-translucent);line-height:1}.task-timer{display:flex;flex-direction:column;align-items:center;position:relative;min-width:30px}.next-run{font-size:.5em;font-weight:700;color:var(--color-text);text-align:center;line-height:1}.active .next-run{color:green;animation:activeTask 1s ease-in-out infinite alternate}.pending .next-run{color:orange;font-weight:700}@keyframes activeTask{0%{opacity:1}to{opacity:.6}}.countdown-animation{position:absolute;top:-2px;right:-2px;width:6px;height:6px}.countdown-dot{width:100%;height:100%;background:orange;border-radius:50%;animation:countdown 1s ease-in-out infinite}@keyframes countdown{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.6}}.permissions{width:100%;height:100%;display:flex;flex-direction:column;gap:8px}.user-section{display:flex;justify-content:center;margin-bottom:4px}.user-switcher{position:relative}.current-user{display:flex;align-items:center;justify-content:center;gap:4px;padding:4px 8px;border:2px solid;border-radius:4px;background:var(--color-background-neutral);transition:all .5s ease;box-shadow:inset 1px 1px #ffffff4d,inset -1px -1px #0003}.user-name{font-size:.6em;font-weight:700;text-transform:uppercase;letter-spacing:.5px;transition:color .5s ease}.user-keys{display:flex;gap:2px}.key-icon{font-size:.7em}.permissions-grid{display:flex;justify-content:center;gap:6px;flex:1}.permission-item{display:flex;flex-direction:column;padding:6px;border:2px solid var(--color-text-translucent);background:var(--color-background-neutral);cursor:pointer;transition:all .3s ease;position:relative;box-shadow:inset 1px 1px #fff3,inset -1px -1px #0003}.permission-item:hover{transform:translateY(-1px)}.permission-item.locked{border-color:#ff6b6b;background:#ff6b6b0d}.permission-item.locked:hover{background:#ff6b6b1a}.permission-item.unlocked{border-color:#51cf66;background:#51cf660d}.permission-item.unlocked:hover{background:#51cf661a}.permission-item.attempting{animation:permissionAttempt 1s ease-out}@keyframes permissionAttempt{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.permission-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.lock-status{font-size:1em;transition:all .3s ease}.unlocked .lock-status{filter:hue-rotate(120deg)}.required-key{font-size:.8em;opacity:.7}.permission-info{flex:1;display:flex;flex-direction:column;gap:2px;margin-bottom:4px}.permission-name{font-size:.6em;font-weight:700;color:var(--color-text);line-height:1.1}.permission-action{font-size:.45em;color:var(--color-text-translucent);line-height:1}.access-attempt{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:1.5em;z-index:10}.shake-animation{animation:shake 1s ease-out}@keyframes shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-4px)}20%,40%,60%,80%{transform:translate(4px)}}.features-section{width:100%;max-width:1200px}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px;padding:0 20px}@media screen and (max-width: 768px){.features-grid{grid-template-columns:1fr;gap:20px;padding:0 10px}}.feature-card-wrapper{position:relative}.feature-card{background:var(--color-background-neutral);border:2px solid var(--color-text);padding:20px;position:relative;overflow:visible;transition:none;min-height:150px;box-shadow:inset 1px 1px #ffffff80,inset -1px -1px #0000004d,2px 2px #0003}.feature-card:hover{transform:translate(1px,1px);box-shadow:inset 1px 1px #ffffff80,inset -1px -1px #0000004d,1px 1px #0003}.feature-card.coming-soon{opacity:.8;border:2px dashed var(--color-text-translucent);background:var(--color-background-neutral) repeating-linear-gradient(45deg,transparent,transparent 10px,rgba(0,0,0,.05) 10px,rgba(0,0,0,.05) 20px)}.feature-card.coming-soon .coming-soon-badge{font-size:.7em;background:var(--color-text);color:var(--color-background-neutral);padding:2px 4px;border:1px solid var(--color-text);margin-left:8px}.feature-card:before{content:"";position:absolute;top:0;left:0;right:0;height:20px;background:linear-gradient(to bottom,#f0f0f0,#d0d0d0);border-bottom:1px solid var(--color-text)}@media (prefers-color-scheme: dark){.feature-card:before{background:linear-gradient(to bottom,#404040,#202020)}}.feature-card h3{margin:12px 0 8px;font-size:1.1em;font-weight:700;text-transform:uppercase;letter-spacing:1px}.feature-card p{margin:0 0 16px;font-size:.85em;line-height:1.3}.interactive-elements{min-height:80px}.shared-elements-container{position:relative;width:100%;height:100%}.sync-indicator{position:absolute;bottom:4px;left:2px;padding:2px 6px;font-size:.6em;z-index:10}.portal-window{position:absolute;right:-40px;width:160px;height:120px;border:2px solid var(--color-text, #333);background:var(--color-background-neutral, #f5f5f5);z-index:10;box-shadow:inset 1px 1px #fffc,inset -1px -1px #0000004d,2px 2px 4px #0000004d}.portal-header{display:flex;align-items:center;justify-content:space-between;padding:2px 4px;background:linear-gradient(to bottom,#f0f0f0,#d0d0d0);border-bottom:1px solid var(--color-text, #333);min-height:12px}@media (prefers-color-scheme: dark){.portal-header{background:linear-gradient(to bottom,#404040,#202020)}}.portal-controls{display:flex;gap:2px}.portal-controls .control-dot{width:4px;height:4px;border-radius:50%}.portal-controls .control-dot.red{background:#ff5f57}.portal-controls .control-dot.yellow{background:#ffbd2e}.portal-controls .control-dot.green{background:#28ca42}.portal-url{font-size:.5em;color:var(--color-text, #333);opacity:.8}.portal-content{padding:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;height:calc(100% - 16px);text-align:center}.orb-1{top:-15px;right:20px;z-index:10}.orb-2{top:60px;right:-20px;z-index:10}.orb-3{bottom:20px;right:50px;z-index:10}.fire-hydrant{transition:transform .2s ease-in-out}.fire-hydrant:hover{transform:scale(1.05)}