.note{padding:var(--spacing-small);margin-bottom:var(--spacing-small);border-bottom:1px solid var(--color-border)}.note>:first-child{flex-grow:1}.note h1,.note h2,.note h3,.note h4,.note h5,.note h6{color:var(--color-heading, #2c3e50);margin-top:var(--spacing-large, 1rem);margin-bottom:var(--spacing-medium, .5rem)}.note p{line-height:1.6;margin-bottom:var(--spacing-medium, .5rem)}.note a{color:var(--color-link, #3498db);text-decoration:none;transition:color .3s ease}.note a:hover,.note a:focus{color:var(--color-link-hover, #2980b9);text-decoration:underline}.note footer{display:block;font-size:.9em;color:var(--color-text-muted, #666);margin-left:auto;margin-right:0}.note time{font-style:italic}pre code{display:block}code{background-color:#000;color:#fff;padding:.5rem;display:inline block;border-radius:.5rem}:root{--color-primary: hsl(315, 80%, 20%);--color-accent: hsl(315, 80%, 77%);--color-success: hsl(150, 60%, 30%);--color-background: #f4f4f4;--color-text: #333;--color-text-light: #ecf0f1;--color-border: #ddd;--spacing-small: .25rem;--spacing-medium: .5rem;--spacing-large: 1rem;--border-radius: .25rem;--transition-speed: .3s}body{max-height:100svh;font-family:system-ui;line-height:1.6;color:var(--color-text);background-color:var(--color-background);margin:0;padding:0}#root{display:flex;height:100svh}nav{background-color:var(--color-primary);color:var(--color-text-light);padding:var(--spacing-large);box-sizing:border-box;gap:var(--spacing-large);display:flex;flex-direction:column}main{flex-shrink:1;flex-grow:1;background-color:#fff;display:flex;flex-direction:column;gap:var(--spacing-medium);min-height:0}form{flex-direction:column}.channel-notes{overflow-y:scroll;flex-shrink:1;padding:var(--spacing-large)}.channel-notes>h2{margin:0}h1,h2{color:var(--color-primary);margin-top:0}nav h2{color:var(--color-text-light);margin-bottom:0}nav ul{list-style-type:none;padding:0;margin:0}button{width:100%;background-color:var(--color-primary);color:var(--color-text-light);border:none;padding:var(--spacing-medium);border-radius:var(--border-radius);cursor:pointer;transition:background-color var(--transition-speed);text-align:left}nav button:hover,nav button:focus{background-color:var(--color-accent)}nav button.active{background-color:var(--color-accent)}textarea{font:inherit}input[type=text],textarea{width:100%;padding:var(--spacing-medium);border:1px solid var(--color-border);border-radius:var(--border-radius);box-sizing:border-box;transition:border-color var(--transition-speed),box-shadow var(--transition-speed)}input[type=text]:focus,textarea:focus,button{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--color-accent) 30%,transparent)}form button{background-color:var(--color-success)}form button:hover,form button:focus{background-color:color-mix(in srgb,var(--color-success) 80%,black)}nav ul{display:flex;gap:var(--spacing-medium);flex-wrap:wrap}form{display:flex;gap:var(--spacing-medium)}#root{flex-direction:column}nav a{color:var(--color-text-light);text-decoration:none}a:visted{color:inherit}a:active,a:hover{color:var(--color-accent)}@media (min-width: 48rem){#root{flex-direction:row}nav{width:20rem;flex-shrink:0}nav ul{flex-direction:column}main{padding:var(--spacing-large)}}@media (max-width: 48rem){nav h2{display:none}nav form{display:flex;align-items:center;gap:var(--spacing-small)}}.button-group{display:flex;gap:var(--spacing-large);justify-content:space-between}