Something went wrong. Try again.
interactive intro to open social at-me.zzstoatzz.io
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158* { margin: 0; padding: 0; box-sizing: border-box;}
:root { color-scheme: light dark; background-color: var(--bg); --bg: #f5f1e8; --text: #4a4238; --text-light: #5d5147; --text-lighter: #5d5147; --border: #786b59; --surface: #e5dbc8; --surface-hover: #d9cdb5;}
@media (prefers-color-scheme: dark) { :root { --bg: #1a1a1a; --text: #e5e5e5; --text-light: #a0a0a0; --text-lighter: #c0c0c0; --border: #8f877b; --surface: #2a2a2a; --surface-hover: #353535; }}
body { font-family: ui-monospace, 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Menlo, 'Courier New', monospace; height: 100vh; background: var(--bg); color: var(--text); overflow: hidden; position: relative; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
.canvas { position: fixed; inset: 0;}
.info { position: fixed; bottom: clamp(0.75rem, 2vmin, 1rem); left: clamp(0.75rem, 2vmin, 1rem); width: clamp(32px, 7vmin, 40px); height: clamp(32px, 7vmin, 40px); display: flex; align-items: center; justify-content: center; font-size: clamp(0.85rem, 1.8vmin, 1rem); color: var(--text-light); cursor: pointer; transition: all 0.2s ease; z-index: 100; -webkit-tap-highlight-color: transparent;}
.info:hover,.info:active { color: var(--text);}
.info-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--surface); border: 2px solid var(--border); padding: 2rem; max-width: 500px; width: 90%; z-index: 2000; display: none; border-radius: 4px;}
@media (max-width: 768px) { .info-modal { padding: 1.5rem; width: 95%; }
.info-modal h2 { font-size: 0.9rem; }
.info-modal p { font-size: 0.7rem; }}
.info-modal.visible { display: block;}
.info-modal h2 { margin-bottom: 1rem; font-size: 1rem; color: var(--text);}
.info-modal p { margin-bottom: 0.75rem; font-size: 0.75rem; line-height: 1.5; color: var(--text-lighter);}
.info-modal button { margin-top: 1rem; padding: 0.5rem 1rem; background: var(--bg); border: 1px solid var(--border); color: var(--text); font-family: inherit; font-size: 0.7rem; cursor: pointer; transition: all 0.2s ease; -webkit-tap-highlight-color: transparent; border-radius: 2px;}
.info-modal button:hover,.info-modal button:active { background: var(--surface-hover); border-color: var(--text-light);}
@media (max-width: 768px) { .info-modal button { padding: 0.65rem 1.2rem; font-size: 0.75rem; }}
.overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); z-index: 1999; display: none;}
.overlay.visible { display: block;}