@import "https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=JetBrains+Mono:wght@300;400;500&display=swap";:root{--bg-body:#f0ede8;--bg-container:#faf8f5;--bg-container-hover:#fff;--header-border:#e2ddd6;--accent:#c8562a;--accent-muted:#c8562a1f;--text-main:#1a1714;--text-muted:#8a8178;--text-micro:#b5afa7;--shadow-card:0 1px 3px #1a17140f, 0 4px 12px #1a17140a;--shadow-card-hover:0 2px 8px #1a171414, 0 12px 32px #1a171414;--shadow-content:0 2px 8px #1a17140d, 0 16px 48px #1a17140f;--header-bg:#f0ede8d9;--noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");--blur:blur(12px);--transition-timing:cubic-bezier(.4, 0, .2, 1);--transition-speed:.25s;--font-display:"Syne", sans-serif;--font-mono:"JetBrains Mono", monospace}body.dark-theme{--bg-body:#0d0c0b;--bg-container:#161411;--bg-container-hover:#1d1a17;--header-border:#2a2520;--accent:#e8724a;--accent-muted:#e8724a1a;--text-main:#f2ede8;--text-muted:#7d756d;--text-micro:#4a4540;--shadow-card:0 1px 3px #0000004d, 0 4px 12px #0003;--shadow-card-hover:0 2px 8px #0006, 0 12px 32px #e8724a14;--shadow-content:0 2px 8px #0000004d, 0 16px 48px #0003;--header-bg:#0d0c0be0}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-body);color:var(--text-main);font-family:var(--font-display);transition:background-color var(--transition-speed) var(--transition-timing), color var(--transition-speed) var(--transition-timing);min-height:100vh}body:before{content:"";background-image:var(--noise);pointer-events:none;z-index:9999;opacity:1;background-repeat:repeat;position:fixed;inset:0}body header{z-index:100;background-color:var(--header-bg);height:3.5rem;-webkit-backdrop-filter:var(--blur);border-bottom:1px solid var(--header-border);transition:background-color var(--transition-speed) var(--transition-timing);justify-content:space-between;align-items:center;padding:0 2rem;display:flex;position:sticky;top:0}body header div{align-items:center;gap:.25rem;display:flex}body header div a{width:2rem;height:2rem;color:var(--text-muted);transition:color var(--transition-speed) var(--transition-timing), background-color var(--transition-speed) var(--transition-timing);border-radius:8px;justify-content:center;align-items:center;text-decoration:none;display:flex}body header div a i{transition:transform var(--transition-speed) var(--transition-timing);font-size:.95rem}body header div a:hover{color:var(--accent);background-color:var(--accent-muted)}body header div a:hover i{transform:scale(1.1)}body header div a:active i{transform:scale(.92)}main{height:calc(100vh - 3.5rem);display:flex;overflow:hidden}.list__notes{border-right:1px solid var(--header-border);flex-shrink:0;width:260px;min-width:220px;padding:1.25rem .75rem;overflow-y:auto}.list__notes::-webkit-scrollbar{width:3px}.list__notes::-webkit-scrollbar-track{background:0 0}.list__notes::-webkit-scrollbar-thumb{background:var(--header-border);border-radius:99px}.list__notes ul{flex-direction:column;gap:.4rem;display:flex}.list__notes li{background-color:var(--bg-container);border:1px solid var(--header-border);cursor:pointer;box-shadow:var(--shadow-card);transition:border-color var(--transition-speed) var(--transition-timing), background-color var(--transition-speed) var(--transition-timing), box-shadow var(--transition-speed) var(--transition-timing), transform var(--transition-speed) var(--transition-timing);border-radius:10px;padding:.85rem 1rem;list-style:none}.list__notes li h1{font-family:var(--font-display);color:var(--text-main);letter-spacing:-.01em;white-space:nowrap;text-overflow:ellipsis;margin-bottom:.3rem;font-size:.8rem;font-weight:600;line-height:1.3;overflow:hidden}.list__notes li p{font-family:var(--font-mono);color:var(--text-muted);white-space:nowrap;text-overflow:ellipsis;font-size:.65rem;line-height:1.4;overflow:hidden}.list__notes li:hover{border-color:var(--accent);background-color:var(--bg-container-hover);box-shadow:var(--shadow-card-hover);transform:translate(2px)}.list__notes li.active{border-color:var(--accent);background-color:var(--accent-muted)}.list__notes li.active h1{color:var(--accent)}.content__note{background-color:var(--bg-container);border:1px solid var(--header-border);box-shadow:var(--shadow-content);transition:background-color var(--transition-speed) var(--transition-timing), border-color var(--transition-speed) var(--transition-timing);border-radius:14px;flex:1;margin:1rem;padding:2rem 2.5rem;overflow-y:auto}.content__note::-webkit-scrollbar{width:3px}.content__note::-webkit-scrollbar-track{background:0 0}.content__note::-webkit-scrollbar-thumb{background:var(--header-border);border-radius:99px}.content__note p,.content__note [contenteditable]{font-family:var(--font-mono);color:var(--text-main);outline:none;font-size:.875rem;font-weight:300;line-height:1.8}.content__note p:empty:after{content:"Начните писать...";color:var(--text-micro);font-family:var(--font-mono);pointer-events:none;font-size:.875rem}.back.mobile{display:none}.create__note__section{z-index:200;-webkit-backdrop-filter:var(--blur);animation:fadeIn var(--transition-speed) var(--transition-timing);background-color:#00000040;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.create__note__section.hidden{display:none!important}.create__note__section .create__note__container{text-align:center;background-color:var(--bg-container);border:1px solid var(--header-border);width:min(380px,90%);box-shadow:var(--shadow-content);animation:slideUp var(--transition-speed) var(--transition-timing);border-radius:16px;flex-direction:column;gap:.6rem;padding:2rem 1.75rem;display:flex}.create__note__section .create__note__container p{font-family:var(--font-display);letter-spacing:-.02em;color:var(--text-main);margin-bottom:.4rem;font-size:1rem;font-weight:700}.create__note__section .create__note__container input[type=text]{width:100%;font-family:var(--font-mono);color:var(--text-main);background-color:var(--bg-body);border:1px solid var(--header-border);transition:border-color var(--transition-speed) var(--transition-timing), box-shadow var(--transition-speed) var(--transition-timing);border-radius:8px;outline:none;padding:.65rem .9rem;font-size:.78rem}.create__note__section .create__note__container input[type=text]::placeholder{color:var(--text-micro)}.create__note__section .create__note__container input[type=text]:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-muted)}.create__note__section .create__note__container button#btn__create__note{width:100%;font-family:var(--font-display);letter-spacing:.04em;text-transform:uppercase;color:var(--bg-body);background-color:var(--accent);cursor:pointer;transition:opacity var(--transition-speed) var(--transition-timing), transform var(--transition-speed) var(--transition-timing), box-shadow var(--transition-speed) var(--transition-timing);border:none;border-radius:8px;margin-top:.4rem;padding:.7rem 1rem;font-size:.8rem;font-weight:600}.create__note__section .create__note__container button#btn__create__note:hover{opacity:.88;box-shadow:0 6px 20px var(--accent-muted);transform:translateY(-1px)}.create__note__section .create__note__container button#btn__create__note:active{opacity:1;transform:translateY(0)}.hidden{display:none}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@media (width<=640px){main{height:calc(100dvh - 3.5rem);position:relative;overflow:hidden;display:block!important}.list__notes{z-index:2;border-right:none;width:100%;padding:.75rem;transition:transform .32s cubic-bezier(.4,0,.2,1);position:absolute;inset:0;overflow-y:auto;transform:translate(0)}.content__note{border:none;border-top:1px solid var(--header-border);width:100%;box-shadow:none;z-index:3;border-radius:0;margin:0;padding:1rem 1.25rem 1.25rem;transition:transform .32s cubic-bezier(.4,0,.2,1);position:absolute;inset:0;overflow-y:auto;transform:translate(100%)}.back.mobile{width:2.1rem;height:2.1rem;color:var(--text-muted);background-color:var(--bg-body);border:1px solid var(--header-border);transition:color var(--transition-speed) var(--transition-timing), border-color var(--transition-speed) var(--transition-timing), background-color var(--transition-speed) var(--transition-timing);border-radius:8px;justify-content:center;align-items:center;margin-bottom:.75rem;text-decoration:none;display:flex}.back.mobile i{transition:transform var(--transition-speed) var(--transition-timing);font-size:.8rem}.back.mobile:hover{color:var(--accent);border-color:var(--accent);background-color:var(--accent-muted)}.back.mobile:hover i{transform:translate(-2px)}main.note-open .list__notes{transform:translate(-100%)}main.note-open .content__note{transform:translate(0)}}