* {margin:0; padding:0; box-sizing:border-box}
 body {font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif; background:#f8fafc; color:#1e293b; line-height:1.6; min-height:100vh}
 .container {max-width:900px; margin:0 auto; padding:2rem}
 header {text-align:center; margin-bottom:2rem}
 h1 {font-size:2.5rem; font-weight:700; color:#0f172a; letter-spacing:-0.025em}
 textarea {width:100%;border:none;outline:none;min-height:470px;padding: 0.75rem 1.5rem;}
 .subtitle {font-size:1.125rem; color:#64748b; font-weight:400}
 .editor-container {background:white; border-radius:16px; box-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1),0 1px 2px -1px rgb(0 0 0 / 0.1); border:1px solid #e2e8f0; overflow:hidden; margin-bottom:2rem}
 .editor-header {padding:1rem 1.5rem; border-bottom:1px solid #e2e8f0; display:flex; align-items:center; justify-content:space-between; background:#fafafa}
 .editor-title {font-size:1rem; font-weight:600; color:#374151}
 .word-count {font-size:0.875rem; color:#6b7280}
 .formatting-toolbar {padding:0.75rem 1.5rem; border-bottom:1px solid #e2e8f0; gap:0.5rem; flex-wrap:wrap; background:white; display:flex}
 .format-btn {display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:6px; border:1px solid #e2e8f0; background:white; cursor:pointer; transition:all 0.15s ease; color:#374151}
 .format-btn:hover {background:#f3f4f6; border-color:#d1d5db}
 .format-btn.active {background:#3b82f6; border-color:#3b82f6; color:white}
 .format-separator {width:1px; height:24px; background:#e2e8f0; margin:4px 4px}
 .editor-content {position:relative}
 #notepad {width:100%; min-height:500px; border:none; outline:none; padding:2rem; font-size:1rem; font-family:inherit; line-height:1.7; resize:none; background:white; color:#1f2937}
 #notepad::placeholder {color:#9ca3af}
 .content {margin:0 auto; max-width:834px}
 .content h1,.content h2,.content h3,.content h4 {font-weight:600; color:#1f2937; margin:1.5em 0 0.5em 0}
 .content h1 {font-size:1.75em; border-bottom:3px solid #3b82f6; padding-bottom:0.3em}
 .content h2 {font-size:1.125rem; padding-bottom:0.3em}
 .content h3 {font-size:1.25em; color:#374151}
 .content h4 {font-size:1.125em; color:#4b5563}
 .content p {margin:0.75em 0; line-height:1.6; color:#374151}
 .content ul,.content ol {margin:1em 0; padding-left:1.5em}
 .content ul li {margin:0.5em 0; line-height:1.5; color:#374151; list-style-type:disc}
 .content ol li {margin:0.5em 0; line-height:1.5; color:#374151; list-style-type:decimal}
 .content ul ul,.content ol ol {margin:0.25em 0; padding-left:1.25em}
 .content ul ul li {list-style-type:circle}
 .content strong {font-weight:600; color:#1f2937}
 .content em {font-style:italic; color:#4b5563}
 .content u {text-decoration:underline; text-decoration-color:#3b82f6; text-underline-offset:2px}
 .content blockquote {margin:1.5em 0; padding-left:1em; border-left:3px solid #3b82f6; background:#f8fafc; padding:1em; border-radius:0 8px 8px 0; font-style:italic; color:#4b5563}
 .content code {background:#f1f5f9; color:#e11d48; padding:0.2em 0.4em; border-radius:4px; font-family:'SF Mono',Monaco,'Cascadia Code','Roboto Mono',Consolas,'Courier New',monospace; font-size:0.875em}
 .content pre {background:#f8fafc; border:1px solid #e2e8f0; border-radius:8px; padding:1em; margin:1em 0; overflow-x:auto; font-family:'SF Mono',Monaco,'Cascadia Code','Roboto Mono',Consolas,'Courier New',monospace; font-size:0.875em; line-height:1.5}
 .content pre code {background:none; color:#374151; padding:0}
 .content hr {border:none; height:1px; background:#e5e7eb; margin:2em 0}
 #notepad::placeholder {color:#9ca3af}
 .toolbar {padding:1rem 0; border-top:1px solid #e2e8f0; display:flex; gap:0.75rem; justify-content:space-between; align-items:center; flex-wrap:wrap}
 .toolbar-left {display:flex; gap:0.75rem}
 .btn-new {background:#10b981; color:white}
 .btn-new:hover {background:#059669}
 .btn {display:inline-flex; align-items:center; gap:0.5rem; padding:0.5rem 0.8rem; border-radius:8px; font-size:0.875rem; font-weight:500; border:none; cursor:pointer; transition:all 0.2s ease; text-decoration:none}
 .btn-primary {background:#3b82f6; color:white}
 .btn-primary:hover {background:#2563eb; transform:translateY(-1px)}
 .btn-secondary {background:white; color:#374151; border:1px solid #d1d5db}
 .btn-secondary:hover {background:#f9fafb; border-color:#9ca3af}
 .notes-section {background:white; border-radius:16px; box-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1),0 1px 2px -1px rgb(0 0 0 / 0.1); border:1px solid #e2e8f0; overflow:hidden; max-width:834px; margin:0 auto; margin-top:2rem;}
 .notes-header {padding:1rem 1.5rem; border-bottom:1px solid #e2e8f0; background:#fafafa}
 .notes-title {font-size:1rem; font-weight:600; color:#374151; margin-bottom:0.25rem}
 .notes-count {font-size:0.875rem; color:#6b7280}
 .notes-list {max-height:400px; overflow-y:auto}
 .note-item {padding:1rem 1.5rem; border-bottom:1px solid #f1f5f9; cursor:pointer; transition:background-color 0.15s ease}
 .note-item:hover {background:#f8fafc}
 .note-item:last-child {border-bottom:none}
 .note-date {font-size:0.75rem; color:#6b7280}
 .empty-state {padding:3rem 1.5rem; text-align:center; color:#9ca3af}
 .empty-icon {width:48px; height:48px; margin:0 auto 1rem; opacity:0.5}
 .features {display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem; margin-top:2rem; max-width:834px; margin-left:auto; margin-right:auto}
 .feature-card {background:white; padding:1.5rem; border-radius:12px; border:1px solid #e2e8f0; box-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1),0 1px 2px -1px rgb(0 0 0 / 0.1)}
 .feature-icon {width:40px; height:40px; margin-bottom:1rem; color:#3b82f6}
 .feature-title {font-size:1.125rem; font-weight:600; margin-bottom:0.5rem; color:#1f2937}
 .feature-description {color:#6b7280; font-size:0.875rem}
 footer {background:white; border-top:1px solid #e2e8f0; padding:2rem 0;}
 .footer-content {max-width:900px; margin:0 auto; padding:0 2rem; text-align:center}
 .footer-text {color:#6b7280; font-size:0.875rem; margin-bottom:1rem}
 .footer-links {display:flex; justify-content:center; gap:2rem; margin-bottom:1rem}
 .footer-link {color:#6b7280; text-decoration:none; font-size:0.875rem; transition:color 0.2s ease}
 .footer-link:hover {color:#3b82f6}
 .footer-copyright {color:#9ca3af; font-size:0.75rem}
 a.footer-link, a.footer-link:visited {text-decoration:underline;color:#3b82f6;}
 a.footer-link:hover {text-decoration:none;color:#3b82f6;}
 @media (max-width:768px) {.container {padding:1rem}
 h1 {font-size:2rem}
 .editor-header,.notes-header {padding:0.75rem 1rem}
 #notepad {padding:1.5rem 1rem; min-height:400px}
 .toolbar {flex-wrap:wrap}
 .btn {flex:1; justify-content:center; min-width:100px}
 .features {grid-template-columns:repeat(1,1fr);}
 .footer-links {display: grid;grid-template-columns: repeat(2, 1fr);gap: 0.5rem;text-align: left;}
 }
 .icon {width:16px; height:16px; flex-shrink:0}
 .success-animation {background:#10b981 !important}
.cke_ltr.cke_hidpi .cke_toolgroup .cke_button__bold_icon,
.cke_hidpi .cke_ltr .cke_toolgroup .cke_button__bold_icon,
.cke_ltr .cke_toolgroup .cke_button__bold_icon {background:url(../img/icons.svg) no-repeat -1px -5px!important;}
.cke_ltr.cke_hidpi .cke_toolgroup .cke_button__italic_icon,
.cke_hidpi .cke_ltr .cke_toolgroup .cke_button__italic_icon,
.cke_ltr .cke_toolgroup .cke_button__italic_icon {background:url(../img/icons.svg) no-repeat -33px -5px!important;}
.cke_ltr.cke_hidpi .cke_toolgroup .cke_button__underline_icon,
.cke_hidpi .cke_ltr .cke_toolgroup .cke_button__underline_icon,
.cke_ltr .cke_toolgroup .cke_button__underline_icon {background:url(../img/icons.svg) no-repeat -65px -5px!important;}
.cke_ltr.cke_hidpi .cke_toolgroup .cke_button__strike_icon,
.cke_hidpi .cke_ltr .cke_toolgroup .cke_button__strike_icon,
.cke_ltr .cke_toolgroup .cke_button__strike_icon {background:url(../img/icons.svg) no-repeat -97px -5px!important;}
.cke_ltr.cke_hidpi .cke_toolgroup .cke_button__bgcolor_icon,
.cke_hidpi .cke_ltr .cke_toolgroup .cke_button__bgcolor_icon,
.cke_ltr .cke_toolgroup .cke_button__bgcolor_icon {background:url(../img/icons.svg) no-repeat -129px -5px!important;}
.cke_ltr.cke_hidpi .cke_toolgroup .cke_button__textcolor_icon,
.cke_hidpi .cke_ltr .cke_toolgroup .cke_button__textcolor_icon,
.cke_ltr .cke_toolgroup .cke_button__textcolor_icon {background:url(../img/icons.svg) no-repeat -161px -5px!important;}
.cke_ltr.cke_hidpi .cke_toolgroup .cke_button__bulletedlist_icon,
.cke_hidpi .cke_ltr .cke_toolgroup .cke_button__bulletedlist_icon,
.cke_ltr .cke_toolgroup .cke_button__bulletedlist_icon {background:url(../img/icons.svg) no-repeat -193px -5px!important;}
.cke_ltr.cke_hidpi .cke_toolgroup .cke_button__numberedlist_icon,
.cke_hidpi .cke_ltr .cke_toolgroup .cke_button__numberedlist_icon,
.cke_ltr .cke_toolgroup .cke_button__numberedlist_icon {background:url(../img/icons.svg) no-repeat -225px -5px!important;}
.cke_ltr.cke_hidpi .cke_toolgroup .cke_button__link_icon,
.cke_hidpi .cke_ltr .cke_toolgroup .cke_button__link_icon,
.cke_ltr .cke_toolgroup .cke_button__link_icon {background:url(../img/icons.svg) no-repeat -257px -5px!important;}
.cke_ltr.cke_hidpi .cke_toolgroup .cke_button__save_icon,
.cke_hidpi .cke_ltr .cke_toolgroup .cke_button__save_icon,
.cke_ltr .cke_toolgroup .cke_button__save_icon {background:url(../img/icons.svg) no-repeat -289px -5px!important;}
.cke_ltr.cke_hidpi .cke_toolgroup .cke_button__print_icon,
.cke_hidpi .cke_ltr .cke_toolgroup .cke_button__print_icon,
.cke_ltr .cke_toolgroup .cke_button__print_icon {background:url(../img/icons.svg) no-repeat -321px -5px!important;}

.spoiler > span, 
.spoiler > b {border-bottom:1px dashed black;cursor:pointer;color:#336fee;border-bottom-color:#336fee;}
.spoiler > span:hover, 
.spoiler > b:hover{color:#e85222;border-bottom-color:#e85222;}
.spoilermore {display:none;}