article:has(.createnote){position:fixed;top:0;left:0;min-width:100dvw;min-height:100dvh;background-color:#00000080;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center}article:has(.createnote) .createnote{padding:1rem;background:hsl(var(--sidebar-background));border:2px solid hsl(var(--sidebar-border));border-radius:var(--radius);width:min(100dvw - 4rem,550px);z-index:111;height:min-content}article:has(.createnote) .createnote h2{transition:var(--transition-smooth);color:hsl(var(--foreground));font-size:1.5rem;margin-block:.75rem;text-wrap:balance}article:has(.createnote) .createnote p{transition:var(--transition-smooth);color:hsl(var(--muted-foreground));font-size:1.05rem;margin-block:.75rem;text-wrap:balance}article:has(.createnote) .createnote p.length{margin-block:.25rem .75rem;text-align:right}article:has(.createnote) .createnote textarea{width:100%;height:120px;padding:.5rem;border-radius:var(--radius);border:2px solid hsl(var(--border));background:hsl(var(--input));color:hsl(var(--foreground));font-size:1rem;transition:var(--transition-smooth);resize:none}article:has(.createnote) .createnote textarea:focus{border-color:hsl(var(--ring));box-shadow:0 0 0 2px hsl(var(--ring));outline:none}article:has(.createnote) .createnote section{display:flex;justify-content:space-between;max-width:300px;flex-wrap:wrap}article:has(.createnote) .createnote section:has(.active) div{opacity:.5}article:has(.createnote) .createnote section:has(.active) div.active{opacity:1}article:has(.createnote) .createnote section div{aspect-ratio:1/1;height:50px;border-radius:var(--radius);cursor:pointer;transition:var(--transition-bounce)}article:has(.createnote) .createnote section div:hover{background:hsl(var(--shadow-note-hover));box-shadow:var(--shadow-note-hover);scale:1.05}article:has(.createnote) .createnote .note{width:100%;height:100px;padding:.5rem;border-radius:var(--radius);border:2px solid hsl(var(--border));color:hsl(var(--foreground));font-size:1rem;transition:var(--transition-smooth);margin-block:1rem;color:#000;text-wrap:pretty;word-break:break-all;line-break:auto}article:has(.createnote) .createnote .btn{display:flex;justify-content:flex-end;gap:.5rem}article:has(.createnote) .createnote .btn button{padding:.5rem 1rem;border:none;border-radius:var(--radius);background:hsl(var(--accent));color:hsl(var(--accent-foreground));font-size:1rem;font-weight:700;cursor:pointer;transition:var(--transition-smooth)}article:has(.createnote) .createnote .btn button:disabled{opacity:.5;cursor:not-allowed}article:has(.createnote) .createnote .btn button:not(:disabled):hover{background:hsl(var(--accent-hover))}header{background:hsl(var(--sidebar-background));border:1px solid hsl(var(--sidebar-border));margin-bottom:1rem;position:fixed;top:0;left:0;right:0;z-index:50;--tw-shadow: var(--shadow-note-hover);--tw-shadow-colored: var(--shadow-note-hover);box-shadow:var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-shadow)}header section{display:flex;justify-content:space-between;align-items:center;padding:1rem;max-width:1200px;margin:0 auto}header section div{display:flex;align-items:center;gap:.75rem}header section div h1{transition:var(--transition-smooth);color:hsl(var(--foreground));font-size:2rem;font-weight:600}header section div svg{transition:var(--transition-smooth)}header section div svg.toggle{transition:.5s all;cursor:pointer;color:hsl(var(--foreground))}header section div svg.toggle:hover{border-radius:var(--radius);background:hsl(var(--shadow-note));box-shadow:var(--shadow-note)}header section div button{cursor:pointer;border-radius:var(--radius);background:hsl(var(--primary));color:hsl(var(--background));padding:.25rem .5rem;display:flex;align-items:center;gap:.25rem;border:2px solid hsl(var(--primary));transition:var(--transition-smooth);font-size:1rem}@media (width <= 600px){header section div button span{display:none}}header section div button:hover{background:hsl(var(--primary-foreground));color:hsl(var(--primary));box-shadow:var(--shadow-note-hover)}*{margin:0;padding:0;box-sizing:border-box}:root{--background: 45 15% 96%;--foreground: 220 9% 15%;--card: 0 0% 100%;--card-foreground: 220 9% 15%;--popover: 0 0% 100%;--popover-foreground: 220 9% 15%;--primary: 220 9% 15%;--primary-foreground: 45 15% 96%;--secondary: 45 15% 92%;--secondary-foreground: 220 9% 15%;--muted: 45 10% 88%;--muted-foreground: 220 5% 45%;--accent: 45 15% 92%;--accent-foreground: 220 9% 15%;--destructive: 0 75% 60%;--destructive-foreground: 0 0% 100%;--border: 45 10% 85%;--input: 45 10% 85%;--ring: 220 9% 15%;--note-yellow: 51 100% 85%;--note-yellow-foreground: 51 50% 25%;--note-pink: 330 100% 88%;--note-pink-foreground: 330 50% 25%;--note-blue: 210 100% 88%;--note-blue-foreground: 210 50% 25%;--note-green: 120 60% 85%;--note-green-foreground: 120 50% 25%;--note-orange: 25 100% 85%;--note-orange-foreground: 25 50% 25%;--shadow-note: 0 4px 12px -2px hsl(220 20% 20% / .15);--shadow-note-hover: 0 8px 20px -4px hsl(220 20% 20% / .25);--shadow-floating: 0 10px 30px -8px hsl(220 20% 20% / .3);--transition-smooth: all .3s cubic-bezier(.4, 0, .2, 1);--transition-bounce: all .4s cubic-bezier(.68, -.55, .265, 1.55);--radius: .5rem;--sidebar-background: 0 0% 98%;--sidebar-foreground: 240 5.3% 26.1%;--sidebar-primary: 240 5.9% 10%;--sidebar-primary-foreground: 0 0% 98%;--sidebar-accent: 240 4.8% 95.9%;--sidebar-accent-foreground: 240 5.9% 10%;--sidebar-border: 220 13% 91%;--sidebar-ring: 217.2 91.2% 59.8%}body.dark{--background: 220 15% 8%;--foreground: 45 15% 92%;--card: 220 15% 12%;--card-foreground: 45 15% 92%;--popover: 220 15% 12%;--popover-foreground: 45 15% 92%;--primary: 45 15% 92%;--primary-foreground: 220 15% 8%;--secondary: 220 15% 16%;--secondary-foreground: 45 15% 92%;--muted: 220 10% 20%;--muted-foreground: 45 8% 65%;--accent: 220 15% 16%;--accent-foreground: 45 15% 92%;--destructive: 0 70% 55%;--destructive-foreground: 0 0% 100%;--border: 220 10% 25%;--input: 220 10% 25%;--ring: 45 15% 92%;--note-yellow: 51 80% 70%;--note-yellow-foreground: 51 60% 15%;--note-pink: 330 80% 75%;--note-pink-foreground: 330 60% 15%;--note-blue: 210 80% 75%;--note-blue-foreground: 210 60% 15%;--note-green: 120 50% 70%;--note-green-foreground: 120 60% 15%;--note-orange: 25 80% 70%;--note-orange-foreground: 25 60% 15%;--shadow-note: 0 4px 12px -2px hsl(220 40% 5% / .4);--shadow-note-hover: 0 8px 20px -4px hsl(220 40% 5% / .6);--shadow-floating: 0 10px 30px -8px hsl(220 40% 5% / .7);--sidebar-background: 240 5.9% 10%;--sidebar-foreground: 240 4.8% 95.9%;--sidebar-primary: 224.3 76.3% 48%;--sidebar-primary-foreground: 0 0% 100%;--sidebar-accent: 240 3.7% 15.9%;--sidebar-accent-foreground: 240 4.8% 95.9%;--sidebar-border: 240 3.7% 15.9%;--sidebar-ring: 217.2 91.2% 59.8%}body,#root{background-color:hsl(var(--background));transition:.5s all;position:relative;min-height:100dvh;font-family:roboto,sans-serif}body h1,body h2,body h3,body h4,body h5,body h6,#root h1,#root h2,#root h3,#root h4,#root h5,#root h6{font-family:itim}body main,#root main{display:grid;width:calc(100dvw - 2rem);margin-inline:auto;margin-top:4.5rem;padding:1rem}body main:has(.nonotes),#root main:has(.nonotes){height:calc(100dvh - (71px + 1rem));align-items:center;justify-content:center}body main:not(body main:has(.nonotes),#root main:has(.nonotes)),#root main:not(body main:has(.nonotes),#root main:has(.nonotes)){grid-template-columns:repeat(auto-fill,minmax(220px,1fr));place-items:center;gap:1rem}body main:not(body main:has(.nonotes),#root main:has(.nonotes)) .card,#root main:not(body main:has(.nonotes),#root main:has(.nonotes)) .card{max-width:220px}@media (width <= 1700px){body main:not(body main:has(.nonotes),#root main:has(.nonotes)),#root main:not(body main:has(.nonotes),#root main:has(.nonotes)){grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr}}@media (width <= 1400px){body main:not(body main:has(.nonotes),#root main:has(.nonotes)),#root main:not(body main:has(.nonotes),#root main:has(.nonotes)){grid-template-columns:1fr 1fr 1fr 1fr 1fr}}@media (width <= 1000px){body main:not(body main:has(.nonotes),#root main:has(.nonotes)),#root main:not(body main:has(.nonotes),#root main:has(.nonotes)){grid-template-columns:1fr 1fr 1fr 1fr}body main:not(body main:has(.nonotes),#root main:has(.nonotes)) .card,#root main:not(body main:has(.nonotes),#root main:has(.nonotes)) .card{max-width:unset}}@media (width <= 800px){body main:not(body main:has(.nonotes),#root main:has(.nonotes)),#root main:not(body main:has(.nonotes),#root main:has(.nonotes)){grid-template-columns:1fr 1fr 1fr}}@media (width <= 600px){body main:not(body main:has(.nonotes),#root main:has(.nonotes)),#root main:not(body main:has(.nonotes),#root main:has(.nonotes)){grid-template-columns:repeat(2,minmax(50%,200px))}}@media (width <= 400px){body main:not(body main:has(.nonotes),#root main:has(.nonotes)),#root main:not(body main:has(.nonotes),#root main:has(.nonotes)){grid-template-columns:1fr}}@font-face{font-family:Roboto;font-weight:400;font-style:normal;font-display:swap;src:url(/sticko-post-it/fonts/Roboto-Regular.woff2) format("woff2"),url(/sticko-post-it/fonts/Roboto-Regular.woff) format("woff"),url(/sticko-post-it/fonts/Roboto-Regular.ttf) format("truetype")}@font-face{font-family:Itim;font-weight:400;font-style:normal;font-display:swap;src:url(/sticko-post-it/fonts/Itim-Regular.woff2) format("woff2"),url(/sticko-post-it/fonts/Itim-Regular.woff) format("woff"),url(/sticko-post-it/fonts/Itim-Regular.ttf) format("truetype")}.nonotes{max-width:600px}.nonotes div{height:80px;aspect-ratio:1/1;display:grid;place-items:center;border-radius:var(--radius);border:2px solid hsl(var(--border));margin:0 auto 1.5rem;background:#ffc2e0;transition:var(--transition-smooth)}.nonotes div:hover{scale:1.05}.nonotes div svg{color:#000}.nonotes h2{text-align:center;transition:var(--transition-smooth);color:hsl(var(--foreground));font-size:2rem;text-wrap:balance}.nonotes p{text-align:center;text-wrap:balance;transition:var(--transition-smooth);color:hsl(var(--muted-foreground));margin-block:1rem 1.5rem;font-size:1rem}.nonotes button{cursor:pointer;border-radius:var(--radius);background:hsl(var(--primary));color:hsl(var(--background));padding:.25rem .5rem;display:flex;align-items:center;gap:.25rem;border:2px solid hsl(var(--primary));transition:var(--transition-smooth);font-size:1rem;margin-inline:auto}@media (width <= 600px){.nonotes button span{display:none}}.nonotes button:hover{background:hsl(var(--primary-foreground));color:hsl(var(--primary));box-shadow:var(--shadow-note-hover)}.card{border:var(--border) 2px solid;border-radius:var(--radius);width:100%;aspect-ratio:1;transition:var(--transition-smooth);padding:1rem 1.5rem 1.5rem}.card article{height:20px;width:45%;justify-content:space-evenly;margin-left:auto;display:flex;opacity:0;transition:var(--transition-smooth);pointer-events:none;position:relative}.card article svg{color:var(--color);opacity:.75;transition:var(--transition-smooth);cursor:pointer}.card article svg:hover{opacity:1;scale:1.1}.card article section{position:absolute;bottom:-35px;right:-20px;display:flex;gap:10px;padding:6px;background-color:hsl(var(--background));border-radius:var(--radius)}.card article section div{aspect-ratio:1/1;height:20px;border-radius:var(--radius);cursor:pointer;transition:var(--transition-bounce)}.card article section div:not(.card article section div.active){opacity:.5}.card article section div:hover:not(.card article section div.active){background:hsl(var(--shadow-note-hover));box-shadow:var(--shadow-note-hover);scale:1.05;opacity:.9}.card:hover{--tw-shadow: var(--shadow-note-hover);--tw-shadow-colored: var(--shadow-note-hover);box-shadow:var(--tw-ring-offset-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-ring-shadow, 0 0 rgba(0, 0, 0, 0)),var(--tw-shadow);translate:0 -4px}.card:hover article{pointer-events:auto;opacity:.9}.card p{text-wrap:pretty;word-break:break-all;line-break:auto;font-size:1.1rem}