:root {
  --font-main: 'Gochi Hand', cursive, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  --font-title: 'Oswald', sans-serif, Cambria, "Times New Roman", Times, serif;
  --font-mono: ui-monospace, SFMono-Regular, Roboto Mono, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --bg-surface: #0f172a;      
  --bg-muted: #1e293b;        
  --bg-code: #020617;         
  --border-light: #334155;    
  --border-muted: #475569;    
  --color-accent: #60a5fa;     
  --color-text-main: #deefef;  
  --color-text-muted: #9198a1;
  --color-text-code: #38bdf8;
  --color-user-accent: #6937d9;
  --radius-sm: 2px;
  --radius-md: 4px;
  --font-size-sm: clamp(0.8rem, 0.17vw + 0.76rem, 0.89rem);
  --font-size-base: clamp(1rem, 0.22vw + 0.95rem, 1.13rem); 
  --font-size-md: clamp(1.25rem, 0.27vw + 1.18rem, 1.41rem);
  --font-size-lg: clamp(1.56rem, 0.34vw + 1.48rem, 1.76rem);
  --font-size-xl: clamp(1.95rem, 0.43vw + 1.85rem, 2.2rem);
  --font-size-xxl: clamp(2.44rem, 0.53vw + 2.31rem, 2.75rem);
  --font-size-xxxl: clamp(3.05rem, 0.67vw + 2.89rem, 3.44rem);
  --line-height-body: 1.5;
  --line-height-heading: 1.25;
}
html, body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      overflow-x: hidden; 
      box-sizing: border-box;
}
body {
  font-family: var(--font-main);
  font-size: var(--font-size-base);
  font-weight: 400;
  line-height: var(--line-height-body);
  color: var(--color-text-main); 
  background-color: var(--bg-surface);
  overflow-x: hidden;
  position: relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
main {
  margin: 0;
  padding: 10px;
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}
body, #noc-container {cursor: url("https://file.garden/ag8JwXEGxlB3Dv6B/Normal%20Select.cur"), auto!important;}
a{color: var(--color-accent);text-decoration:none;}
a:hover, button:hover,.circle-btn, .close-btn, .shortcut-icon {cursor: url("https://file.garden/ag8JwXEGxlB3Dv6B/Link%20Select.cur"), pointer;}
.d-text:hover {cursor: url("https://file.garden/ag8JwXEGxlB3Dv6B/Help%20Select.cur"), help;}
input, textarea, .search-bar-container {cursor: url("https://file.garden/ag8JwXEGxlB3Dv6B/Text%20Select.cur"), auto;}
textarea{width:300px;max-width:100%;}
.disabled-nav {opacity: 0.3;}
img, .disabled-nav{user-drag: none; -webkit-user-drag: none; -khtml-user-drag: none; -moz-user-drag: none; -o-user-drag: none; pointer-events: auto;}
img, .disabled-nav{cursor: url("https://file.garden/ag8JwXEGxlB3Dv6B/Unavailable.cur"), auto;}
.draggable{cursor: url("https://file.garden/ag8JwXEGxlB3Dv6B/Move.cur"), auto; user-select: none;}
u{text-decoration-color: var(--color-accent);text-decoration-style: wavy;}
iframe{margin: 0 auto; max-width: 100%; border: none; display: block;}
h1, h2, h3, h4, h5, h6{font-family: var(--font-title); font-weight: 700; line-height: var(--line-height-heading); color: var(--color-text-main); margin-block-start: 1.5em; margin-block-end: 0.5em; text-wrap: balance;}
h1{font-size: var(--font-size-xxxl); font-weight: 800;}
h2{font-size: var(--font-size-xxl);}
h3{font-size: var(--font-size-xl);}
h4{font-size: var(--font-size-lg);}
h5{font-size: var(--font-size-md);}
h6{font-size: var(--font-size-base); text-transform: uppercase; letter-spacing: 0.05em;}
p{margin-block-start: 0; margin-block-end: 1.25em; word-break: break-word;}
strike{text-decoration: line-through; text-decoration-color: #a12323;}
small, .text-sm{font-size: var(--font-size-sm);}
ul, ol{margin-block-start: 0; margin-block-end: 1.25em; padding-inline-start: 1.5rem;}
ul ul, ul ol, ol ul, ol ol{margin-block-end: 0;}
li{margin-block-end: 0.5em;}
li::marker{color: var(--color-text-muted);}
br{content: ""; display: block; margin-block-end: 0.5em;}
hr{border: 0; height: 1px; background-color: var(--border-light); margin-block: 2.5rem; clear: both;}
.table-container{overflow-x: auto; margin-block: 2rem; border: 1px solid var(--border-light); border-radius: var(--radius-md); box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.2);}
table{width: 100%; border-collapse: collapse; text-align: left; font-size: var(--font-size-sm, 0.95rem); color: var(--color-text-main); background-color: var(--bg-surface);}
th, td{padding: 1rem 1.25rem;}
th{background-color: var(--bg-muted); font-weight: 600; color: var(--color-text-main); border-bottom: 2px solid var(--border-light); text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.05em;}
tr:not(:last-child){border-bottom: 1px solid var(--border-light);}
tr:nth-child(even){background-color: rgba(255, 255, 255, 0.015);}
tr:hover td{background-color: rgba(96, 165, 250, 0.04);}
.num-col{text-align: right; font-variant-numeric: tabular-nums;}
blockquote{margin-block: 2.5rem; margin-inline: 0; padding: 1.25rem 1.75rem; background-color: var(--bg-muted); border-inline-start: 4px solid var(--color-accent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;}
blockquote p{color: var(--color-text-main); font-style: italic; font-size: var(--font-size-md, 1.15rem); line-height: 1.5; margin-block-end: 0;}
blockquote cite{display: block; margin-top: 0.75rem; font-size: var(--font-size-sm, 0.85rem); font-style: normal; font-weight: 500; color: var(--color-text-muted);}
blockquote cite::before{content: "— ";}
:not(pre) > code{font-family: var(--font-mono, monospace); font-size: 0.875em; color: var(--color-text-code); background-color: var(--bg-muted); padding: 0.2em 0.4em; border: 1px solid var(--border-light); border-radius: var(--radius-sm); word-break: break-word;}
pre{font-family: var(--font-mono, monospace); font-size: 0.9rem; background-color: var(--bg-code); color: var(--color-text-code); padding: 1rem; border-radius: var(--radius-md); border: 1px solid var(--border-light); overflow-x: auto; scrollbar-gutter: stable; -webkit-overflow-scrolling: touch; scrollbar-width: none;}
pre code{font-family: inherit; font-size: inherit; color: inherit; background-color: transparent; padding: 0; border: none; border-radius: 0; white-space: pre;}
.tooltip{display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; margin: 0;}
.d-text--bg:hover{color: #3b5998}
.d-text--bg:hover::after{background: #3b5998}
.d-text{position: relative;}
.d-text:not(:last-of-type){margin-right: 15px;}
.d-tooltip::before, .d-tooltip::after{display: block; position: absolute; left: 50%; transform: translate(-50%, -10px); opacity: 0; transition: .2s;}
.d-tooltip::before{content: ''; bottom: calc(100% + 2px); border: solid 5px transparent; border-top-color: currentColor;}
.d-tooltip::after{content: attr(aria-label); bottom: calc(100% + 12px); padding: .61em .93em; font-size: .875rem; color: white; border-radius: 3px; width: max-content;}
.d-tooltip:hover::before, .d-tooltip:hover::after{opacity: 1; transform: translate(-50%);}
.nocturnal-bg-canvas{position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none; overflow: hidden; background-color: var(--bg-surface);}
.nocturnal-bg-canvas::before{content: ""; position: absolute; top: -200px; left: -200px; width: calc(100% + 400px); height: calc(100% + 400px); background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="60" height="120" viewBox="0 0 60 120"><path d="M30 0 L60 30 L30 60 L0 30 Z M30 60 L60 90 L30 120 L0 90 Z" fill="%231e293b"/></svg>'); background-size: 60px 120px; animation: moveDiagonalCheckered 40s linear infinite; will-change: transform;}
@keyframes moveDiagonalCheckered{0%{transform: translate(0, 0);}
100%{transform: translate(60px, 120px);}
}
.nocinfo{display: flex; justify-content: center; align-items: center; padding: 20px; font-family: var(--font-mono); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
#splash-screen{text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; transition: opacity 0.5s ease; z-index: 10; min-height: 90vh;}
.logo-img{max-width: 350px; width: 100%; height: auto; animation: heartbeat 1.5s ease-in-out infinite;}
@keyframes heartbeat{0%{transform: scale(1);}
14%{transform: scale(1.1);}
28%{transform: scale(1);}
42%{transform: scale(1.1);}
70%{transform: scale(1);}
}
.webringgrid{display: inline-flex;flex-wrap: wrap;}
.start-btn{font-family: var(--font-title); font-size: var(--font-size-lg); color: var(--color-accent); text-transform: uppercase; letter-spacing: 4px; cursor: pointer; background: none; border: none; transition: 0.3s; padding: 10px 20px;}
.start-btn:hover{color: var(--color-text-main); text-shadow: 0 0 10px var(--color-accent);}
#noc-container{width: 100%; max-width: 600px; height: 450px; position: relative; display: none;}
.char-display{width: 350px; height: 350px; display: flex; justify-content: center; align-items: center; position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 1;}
.char-display img{width: 100%; height: 100%; object-fit: cover;}
.dialog-wrapper{position: absolute; top: 200px; left: 0; right: 0; z-index: 5; display: flex; flex-direction: column;}
.name-tag{background: var(--bg-muted); color: var(--color-accent); font-weight: bold; padding: 5px 15px; border-radius: 4px 4px 0 0; border: 2px solid var(--border-muted); border-bottom: none; align-self: flex-start; font-size: var(--font-size-sm); letter-spacing: 1px; min-width: 80px; text-align: center; box-shadow: 0 -5px 10px rgba(0,0,0,0.3);}
.name-tag.user-tagged{color: var(--color-user-accent);}
.dialog-box{background: rgba(15, 23, 42, 0.95); border: 2px solid var(--border-muted); padding: 0; border-radius: 0 4px 4px; height: 100%; display: flex; flex-direction: column; justify-content: flex-start; position: relative;}
.dialog-text{font-size: var(--font-size-base); padding: 10px;}
.next-arrow{position: absolute; bottom: 12px; right: 20px; color: var(--color-accent); font-size: 1.2rem; animation: bounceArrow 0.8s infinite alternate;}
@keyframes bounceArrow{0%{transform: translateY(0); opacity: 0.4;}
100%{transform: translateY(4px); opacity: 1;}
}
.input-area{display: flex; gap: 10px; justify-content: center; margin: 10px;}
input[type="text"]{background: var(--bg-code); border: 1px solid var(--border-light); color: var(--color-text-code); padding: 12px; border-radius: var(--radius-sm); outline: none; width: 70%;}
.choices-wrapper{padding: 10px;}
.options-grid{display: grid; grid-template-columns: 1fr 1fr; gap: 12px;}
#nameSection .noc-btn{background: transparent; border:none;}
#nameSection .noc-btn:hover{color:var(--border-light);}
.noc-btn{font-family: var(--font-mono); background: var(--bg-surface); border: 1px solid var(--color-accent); color: var(--color-accent); padding: 12px; border-radius: var(--radius-sm); cursor: pointer; transition: all 0.2s; font-size: 0.9rem;}
.noc-btn:hover{background: var(--color-accent); color: var(--bg-surface);}
.user-choice-btn{border-color: var(--color-user-accent); color: var(--color-user-accent);}
.user-choice-btn:hover{background: var(--color-user-accent); color: var(--bg-surface);}
.hidden{display: none !important;}
#changelog .feed-wrap{max-width:100%;margin:auto;}#changelog .feed-post{display:flex;gap:12px;padding:5px 0;border-bottom:1px solid var(--border-light);}#changelog .feed-post:last-child{border-bottom:none;}#changelog .feed-avatar{width:48px;height:48px;border-radius:50%;flex-shrink:0;object-fit:cover;}#changelog .feed-content{flex:1;}#changelog .feed-header{display:flex;align-items:center;gap:8px;margin-bottom:6px;flex-wrap:wrap;}#changelog .feed-name{color:var(--color-text-main);}#changelog .feed-date{font-size:13px;color:var(--color-text-muted);}#changelog .feed-title{font-family: var(--font-title);font-weight:600;margin-bottom:6px;}#changelog .feed-text{color:var(--color-text-muted);font-size:var(--font-size-sm);}#changelog .feed-text p{margin:0;}#changelog .feed-link{display:inline-block;margin-top:10px;color:var(--color-user-accent);text-decoration:none;}#changelog .feed-link:hover{text-decoration:underline;}.feed-link:before{content:url("https://cdn3.emoji.gg/emojis/4572-blue-arrow-right.gif");vertical-align:middle;}
.desktop-screen{position: relative; width: 100%; height: 100vh; height: 100dvh; max-width: 1100px; display: flex; justify-content: center; align-items: center; overflow: hidden; margin: auto;}
.hme-frame{position: relative; z-index: 50; transition: opacity 0.25s ease-in-out, transform 0.25s ease-in-out;}
.hme-frame.window-closed{opacity: 0; transform: scale(0.95); pointer-events: none;}
.desktop-backdrop{position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 30px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; z-index: 10; box-sizing: border-box;}
.calendar-widget{margin: 0 0 auto 0; background: #1e293b; border-radius: var(--radius-md); width: 280px; overflow: hidden; font-family: var(--font-title);}
.clock-widget{margin: 0; border-radius: 8px; padding: 10px 24px; font-family: var(--font-mono), monospace; font-size: 24px; font-weight: bold; letter-spacing: 1px; text-align: center; min-width: 180px;}
.cal-header{color: #fff; text-align: center; padding: 8px; font-weight: bold; letter-spacing: 1px; background-image: url("https://i.imgur.com/f92WJ8S.gif"); background-size: cover; background-position: center; background-repeat: no-repeat; min-height: 50px; overflow: hidden; background-position: center;}
.cal-body{display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; padding: 12px; text-align: center; font-family: monospace; font-size: 13px; color: #f1f5f9;}
.cal-day-label{color: var(--color-accent, #60a5fa); font-weight: bold;}
.cal-date{padding: 4px 0; border-radius: var(--radius-sm);}
.cal-date.active-day{background: #ef4444; color: white; font-weight: bold;}
.desktop-shortcuts{display: flex; justify-content: center; gap: 32px; width: 100%; padding-bottom: 10px;}
.shortcut-icon{display: flex; flex-direction: column; align-items: center; width: 75px; transition: transform 0.15s ease;}
.shortcut-icon:hover{transform: translateY(-2px);}
.icon-avatar{font-size: 28px; width: 50px; height: 50px; background: #1e293b; border: 2px solid #334155; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 6px; box-shadow: 0 4px 10px rgba(0,0,0,0.3);}
.icon-label{font-size: 13px; font-family: var(--font-title); color: #94a3b8; letter-spacing: 0.5px;}
.browser-frame{font-family: var(--font-main); font-size: var(--font-size-base); line-height: var(--line-height-body); color: var(--color-text-main); width: 100%; max-width: 1100px; background-color: var(--bg-surface); border: 4px solid var(--border-muted); border-radius: var(--radius-md); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6); overflow: hidden; display: flex; flex-direction: column;}
.hme-frame{height: 100%;overflow: hidden;}
.hme-header{flex-shrink: 0;z-index: 100;}
.browser-header{background-color: var(--bg-muted); padding: 10px 14px; display: flex; align-items: center; gap: 5px; border-bottom: 3px solid var(--border-light); flex-wrap: wrap;}
.header-left{display: flex; gap: 6px;}
.circle-btn{width: 28px; height: 28px; background-color: var(--bg-code); border: 1px solid var(--border-muted); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--font-size-sm);}
.search-bar-container{flex: 1; min-width: 150px;}
.search-bar{height: 28px; background: var(--bg-code); border-radius: 6px; border: 1px solid var(--border-light); padding: 0 10px; font-size: var(--font-size-sm); line-height: 28px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-text-muted);}
.close-btn{background-color: #ef4444; color: #ffffff; padding: 4px 10px; border-radius: var(--radius-sm); font-weight: bold; font-size: var(--font-size-sm);}
.menu-tab{display: flex; flex-direction: column; width: 100%;}
.nav-tab{display: block; padding: 10px 16px; color: var(--color-text-muted); text-decoration: none; font-family: var(--font-title); font-size: var(--font-size-md); text-transform: uppercase; letter-spacing: 1px; border: none; transition: all 0.2s ease-in-out;}
.nav-tab:hover{background: rgba(255, 255, 255, 0.05); color: var(--color-text-main);}
.nav-tab.active{background: var(--color-user-accent); color: var(--color-text-main); border-color: rgba(255, 255, 255, 0.1); box-shadow: 0 4px 12px rgba(105, 55, 217, 0.3);}
.content-view{display: none; animation: fadeIn 0.3s ease-in-out forwards;}
.content-view.active-view{display: block;}
@keyframes fadeIn{from{opacity: 0; transform: translateY(4px);}
to{opacity: 1; transform: translateY(0);}
}
.desktop-content{display: flex; flex-direction: column; min-height: 0; height: 100%;}
hme-content{flex: 1;overflow: hidden;}
.sidebar{flex-shrink: 0; width: 100%; background-color: var(--bg-muted); display: flex; flex-direction: column; align-items: center; gap: 16px; border-bottom: 3px solid var(--border-light);}
.profile-card{width: 200px; height: 250px; display: flex; align-items: center; justify-content: center;}
.chibi-card{width: 200px; background: var(--bg-surface); border: 2px solid var(--border-light); border-radius: var(--radius-md); padding: 12px; aspect-ratio: 1.15 / 1;}
.chibi-placeholder img{width: 100%; height: 100%; border-radius: var(--radius-sm); object-fit: contain;}
.nameTag{width: 250px; background: transparent; color: var(--color-text-main); text-align: center; padding: 6px; font-family: var(--font-title); font-size: var(--font-size-md); font-weight: bold; border-radius: 6px; letter-spacing: 0.5px; border: 1px solid rgba(255, 255, 255, 0.1);}
.avatar-wrapper{position: relative; width: 250px; height: 250px;}
.avatar-core{position: absolute; top: 16px; left: 16px; width: 218px; height: 218px; border-radius: 35px; border: none; box-shadow: rgb(123, 47, 247) 0px 0px 0px;}
.avatar-core .bg-image{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('https://file.garden/ag8JwXEGxlB3Dv6B/meme.png') center/cover; border-radius: inherit; pointer-events: none;}
.avatar-core .avatar-clipper{position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; overflow: hidden; pointer-events: none;}
.avatar-core .scanlines{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06)); background-size: 100% 3px, 3px 100%; pointer-events: none;}
.avatar-wrapper .outer-frame-layer{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('https://media.tenor.com/F4OhL5k3o1MAAAAj/cozy-post-it-discord.gif') center/contain no-repeat; pointer-events: none; z-index: 5;}
.noc-body{flex: 1; padding: 20px; background: var(--bg-surface); position: relative; overflow-y: auto; -webkit-overflow-scrolling: touch;}
.noc-body p{color:var(--color-text-muted);font-size: var(--font-size-md);}
.workspace{flex: 1; padding: 16px; position: relative; background: var(--bg-surface); display: flex; flex-direction: column; gap: 16px;}
.note-title{font-family: var(--font-title); font-size: var(--font-size-xl); margin: 0 0 8px 0; letter-spacing: 1px; line-height: 1.25;}
.win-popup{background: var(--bg-code); border: 2px solid var(--border-muted); border-radius: var(--radius-md); overflow: hidden; display: flex; flex-direction: column;}
.win-bar{background: var(--bg-muted); padding: 8px 12px; display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid var(--border-light);}
.win-dots { display: flex; gap: 5px; }
.win-dots span { width: 8px; height: 8px; border-radius: 50%; background: #ef4444; }
.win-dots span:nth-child(2) { background: #eab308; }
.win-dots span:nth-child(3) { background: #22c55e; }
.win-close { color: var(--color-text-muted); font-weight: bold; cursor: pointer; }
.win-body { padding: 14px; color: var(--color-text-main); }
.pop-persona .win-bar { background: var(--color-user-accent); }
.pop-persona .win-close { color: var(--color-text-main); }

.plain-detail-box{background: var(--bg-muted); border: 1px solid var(--border-light); padding: 10px; border-radius: var(--radius-sm); height: fit-content; color: var(--color-text-muted); font-family: var(--font-mono); font-size: var(--font-size-sm);}
.sticky-note{position: relative; width: 250px; max-width: 100%; padding: 22px; background: linear-gradient( to bottom, #c8f0ff, #f3d5f3 ); border: var(--radius-sm) solid #a977c7; border-radius: 6px; font-family: var(--font-title); color: #9d88aa; box-sizing: border-box; overflow: visible; clip-path: polygon( 0 0, calc(100% - 36px) 0, 100% 36px, 100% 100%, 0 100% );}
.sticky-note::before{content: ""; position: absolute; top: -4px; right: -4px; width: 0; height: 0; border-left: 36px solid transparent; border-bottom: 36px solid transparent; border-top: 36px solid white;}
.sticky-note::after{content: ""; position: absolute; top: -4px; right: -4px; width: 36px; height: 36px; background: linear-gradient( 135deg, #d5b5ea, #a977c7 ); clip-path: polygon(100% 100%, 0 0, 0% 100%); border-radius: var(--radius-sm);}
.sticky-note h2{margin: 0 0 12px; font-size: 40px; line-height: 1; color: #7fe6ff; text-shadow: 3px 3px 0 #b55ad4; font-weight: 900; letter-spacing: 2px;}
.sticky-note p{margin: 0; font-family: var(--font-main);}
.noc-body::-webkit-scrollbar{width: 5px;}
.noc-body::-webkit-scrollbar-track{background: #020617;}
.noc-body::-webkit-scrollbar-thumb{background: #475569; border-radius: 4px;}
.noc-body::-webkit-scrollbar-thumb:hover{background: #60a5fa;}
@media (max-width: 480px){.options-grid{grid-template-columns: 1fr;}
}
@media (max-width: 768px){.menu{position: relative; display: block; width: 100%;}
.mobile-nav-header{display: flex; align-items: center; justify-content: space-between; max-width: 100%; padding: 12px 16px; background-color: var(--bg-code);}
.sticky-note{width:100%;}
.mobile-active-title{position: absolute; left: 50%; transform: translateX(-50%); font-family: var(--font-title); font-size: var(--font-size-md); text-transform: uppercase; letter-spacing: 1px; color: var(--color-accent); pointer-events: none;}
.kebab-menu-btn{margin-left: auto; background: none; border: none; display: flex; flex-direction: column; gap: 3px; padding: 8px; border-radius: var(--radius-sm);}
.kebab-menu-btn span{width: 4px; height: 4px; background-color: var(--color-text-main); border-radius: 50%;}
.menu-tab{display: none; flex-direction: column; position: absolute; top: 90%; right: 12px; width: 180px; background-color: var(--bg-muted); border: 2px solid var(--border-light); border-radius: var(--radius-md); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7); padding: 6px 0; z-index: 9999;}
.menu-tab.menu-open{display: flex;}
.nav-tab{border-radius: 0; padding: 10px 16px; font-size: var(--font-size-sm); text-align: left;}
}
@media(min-width: 768px){.mobile-nav-header{display: none;}
.menu{overflow-y: auto;}
.menu-tab{display: flex !important; flex-direction: column; position: static; box-shadow: none;}
main, .noc-body{padding: 20px;}
.desktop-content{flex-direction: row;}
.sidebar{width: 290px; border-bottom: none; border-right: var(--radius-sm) solid var(--border-light);}
.workspace{padding: 24px; display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(12, auto); gap: 12px;}
  .note-likes { grid-column: 1 / 6; grid-row: 1 / 5; }
  .note-dislikes { grid-column: 8 / 13; grid-row: 6 / 10;z-index: 6; }
  .pop-persona { grid-column: 2 / 9; grid-row: 4 / 9; z-index: 5; border-color: var(--color-user-accent); }
  .pop-bs { grid-column: 6 / 12; grid-row: 2 / 5; }.plain-detail-box { grid-column: 7 / 13; grid-row: 1 / 3; }
}
.berndoor{display: flex; justify-content: center; align-items: center; margin: 0;}
.door-link{text-decoration: none; position: relative; transition: transform 0.3s ease;}
.door-link:hover .knob-face{transform: scale(1.02); animation: talkShake 0.5s infinite ease-in-out;}
.stone-frame{background-color: rgb(206 179 160); padding: 25px; clip-path: polygon(50% 0%, 100% 30%, 100% 100%, 0% 100%, 0% 30%); border: 2px solid #a89a90;}
.bern-door{width: 190px; height: 230px; background-color: #7b2e24; background-image: linear-gradient(90deg, transparent 24%, rgba(0,0,0,0.2) 25%, transparent 26%, transparent 49%, rgba(0,0,0,0.2) 50%, transparent 51%, transparent 74%, rgba(0,0,0,0.2) 75%, transparent 76%); clip-path: polygon(50% 0%, 100% 30%, 100% 100%, 0% 100%, 0% 30%); position: relative; border: 1px solid #5a1f18;}
.hinge{position: absolute; left: 0; width: 60px; height: 40px; background-color: #8b6b3b; clip-path: polygon(0% 0%, 100% 50%, 0% 100%); border-left: 10px solid #5d4626;}
.hinge::after{content: ''; position: absolute; top: 17px; left: 8px; width: 6px; height: 6px; background-color: #4a381e; border-radius: 50%; box-shadow: 20px 0 0 0 #4a381e;}
.hinge.top{top: 40%;}
.hinge.bottom{bottom: 15%;}
.knob-header{position: absolute; top: -40px; left: -20px; width: 90px; height: 100%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='%23b08d57' d='M21 12c-2 0-3-3-6-3s-3 2-3 2s0-2-3-2s-4 3-6 3c-1 0-2-1-2-1s1 5 5 5c5 0 6-3 6-3s1 3 6 3c4 0 5-5 5-5s-1 1-2 1'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; background-position: center; filter: drop-shadow(0px -1px 1px rgba(0,0,0,0.1));}
.knob-face{position: absolute; right: -15px; top: 40%; width: 110px; height: 110px; transform-origin: center;}
.custom-knob-img{width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.3));}
@keyframes talkShake{0%, 100%{transform: rotate(0deg) scale(1);}
25%{transform: rotate(-3deg) scale(1.02);}
75%{transform: rotate(3deg) scale(0.98);}
}