:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light;color:#213547;background-color:#fff;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;text-decoration:inherit}a:hover{color:#501e6e}body{margin:0;min-width:320px;min-height:100vh}#root{max-width:1920px;margin:0 auto;padding:2em}.app{text-align:center}.main-content-wrapper{display:flex;flex-direction:column;gap:2em}.main-content{flex:1}@media(min-width:1000px){.main-content-wrapper{display:grid;grid-template-columns:1fr 1fr;gap:2em;align-items:start}.instructions-container{min-width:auto;width:100%;max-width:500px;position:sticky;top:2em}.main-content{max-width:500px}}.url-input-container{margin-bottom:2em;display:flex;flex-direction:column;align-items:flex-start;gap:.5em}.url-input-container label{font-weight:500;color:#333}.url-input{padding:.75em;font-size:1em;border:1px solid #ddd;border-radius:4px;width:100%;max-width:100%;box-sizing:border-box;font-family:inherit}.url-input:focus{outline:none;border-color:#66298e;box-shadow:0 0 0 2px #66298e1a}.generate-btn{padding:.875em 2em;font-size:1.1em;font-weight:600;color:#fff;background-color:#66298e;border:none;border-radius:8px;cursor:pointer;transition:background-color .2s,transform .1s,box-shadow .2s;box-shadow:0 2px 4px #66298e33;margin-top:1em;width:100%}.generate-btn:hover:not(:disabled){background-color:#501e6e;transform:translateY(-2px);box-shadow:0 4px 8px #66298e4d}.generate-btn:active:not(:disabled){transform:translateY(0);box-shadow:0 2px 4px #66298e33}.generate-btn:disabled{background-color:#ccc;cursor:not-allowed;opacity:.6}.error-message{margin:1.5em 0;padding:1em;background-color:#fee;color:#c33;border:1px solid #fcc;border-radius:8px;font-size:.95em;text-align:left}.instructions-container{width:100%;max-width:600px;margin:0 auto 2em 0;background-color:#f8f9fa;border-radius:8px;border:1px solid #e0e0e0;text-align:left;overflow:hidden}@media(min-width:1000px){.instructions-container{margin:0}}.instructions-container h2{margin:0 0 1em;font-size:1.2em;color:#333;padding:1.5em 1.5em 0}.instructions-content{padding:0 1.5em 1.5em}.instructions-list{margin:0 0 1em;padding-left:1.5em;line-height:1.8;color:#555}.instructions-list li{margin-bottom:.5em}.instructions-list code{background-color:#e9ecef;padding:.2em .4em;border-radius:3px;font-family:Courier New,monospace;font-size:.9em;color:#d63384}.result-section{text-align:left;margin-top:2em}.result-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5em;padding-bottom:1em;border-bottom:2px solid #e9ecef;flex-wrap:wrap;gap:1em}.result-header h2{font-size:1.5em;color:#333;margin:0}.copy-btn{padding:.75em 1.5em;font-size:1em;font-weight:500;color:#fff;background-color:#66298e;border:none;border-radius:6px;cursor:pointer;transition:background-color .2s,transform .1s}.copy-btn:hover{background-color:#501e6e;transform:translateY(-1px)}.copy-btn:active{transform:translateY(0)}.preview-section,.code-section{margin-bottom:2em}.preview-section h3,.code-section h3{font-size:1.25em;margin-bottom:1em;color:#495057}.toc-preview{background:#fff;border:1px solid #dee2e6;border-radius:8px;padding:1.5em;max-height:400px;overflow-y:auto}.toc-wrapper{--ghost-accent-color: #66298e}.toc-wrapper h2{margin-top:0;margin-bottom:1em;font-size:1.5em;color:#333}.kg-callout-card-grey{background:#7c8b9a21}.kg-callout-card-blue{background:#21ace81f}.kg-callout-card-green{background:#34b7431f}.kg-callout-card-yellow{background:#f0a50f21}.kg-callout-card-red{background:#d12e2e1c}.kg-callout-card-pink{background:#e147ae1c}.kg-callout-card-purple{background:#8755ec1f}.kg-callout-card-accent{background:var(--ghost-accent-color);color:#fff}.kg-callout-card-accent h2{color:#fff}.kg-callout-card-accent-light{background:#66298e14}.toc-wrapper.kg-callout-card-grey,.toc-wrapper.kg-callout-card-blue,.toc-wrapper.kg-callout-card-green,.toc-wrapper.kg-callout-card-yellow,.toc-wrapper.kg-callout-card-red,.toc-wrapper.kg-callout-card-pink,.toc-wrapper.kg-callout-card-purple,.toc-wrapper.kg-callout-card-accent,.toc-wrapper.kg-callout-card-accent-light{padding:1.5em}.toc-box:not(.kg-callout-card-grey):not(.kg-callout-card-blue):not(.kg-callout-card-green):not(.kg-callout-card-yellow):not(.kg-callout-card-red):not(.kg-callout-card-pink):not(.kg-callout-card-purple){border:1px solid;border-color:var(--ghost-accent-color);padding:1.5em}.toc-box.kg-callout-card-grey,.toc-box.kg-callout-card-blue,.toc-box.kg-callout-card-green,.toc-box.kg-callout-card-yellow,.toc-box.kg-callout-card-red,.toc-box.kg-callout-card-pink,.toc-box.kg-callout-card-purple{padding:1.5em}.toc-rounded-box:not(.kg-callout-card-grey):not(.kg-callout-card-blue):not(.kg-callout-card-green):not(.kg-callout-card-yellow):not(.kg-callout-card-red):not(.kg-callout-card-pink):not(.kg-callout-card-purple){border:1px solid;border-color:var(--ghost-accent-color);border-radius:8px;padding:1.5em}.toc-rounded-box.kg-callout-card-grey,.toc-rounded-box.kg-callout-card-blue,.toc-rounded-box.kg-callout-card-green,.toc-rounded-box.kg-callout-card-yellow,.toc-rounded-box.kg-callout-card-red,.toc-rounded-box.kg-callout-card-pink,.toc-rounded-box.kg-callout-card-purple{border-radius:8px;padding:1.5em}.toc-preview nav{font-size:.95em}.toc-preview ul{list-style:none;padding-left:1.5em}.toc-preview li{margin:.5em 0}.toc-preview a{text-decoration:none;transition:color .2s}.toc-preview a:hover{text-decoration:underline}.code-block{background:#282c34;color:#abb2bf;padding:1.5em;border-radius:8px;overflow-x:auto;font-family:Monaco,Menlo,Ubuntu Mono,Consolas,source-code-pro,monospace;font-size:.9em;line-height:1.6}.code-block code{white-space:pre}.floating-ghost{position:fixed;bottom:20px;right:20px;width:160px;height:auto;z-index:1000;animation:floatAnimation 3s ease-in-out infinite;opacity:.7}.ghost-tip-section{position:fixed;bottom:20px;right:20px;z-index:1000}.ghost-tip-link{display:block;text-decoration:none;transition:transform .2s ease}.ghost-tip-link:hover{transform:scale(1.1)}.ghost-tip-image{width:160px;height:auto;animation:floatAnimation 3s ease-in-out infinite;opacity:.7;transition:opacity .2s ease}.ghost-tip-image:hover{opacity:1}@keyframes floatAnimation{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@media(max-width:768px){#root{padding:1em}.floating-ghost{width:120px;position:static;margin:20px auto;display:block}.ghost-tip-section{position:static;margin:20px auto;text-align:center}.ghost-tip-image{width:120px;position:static;margin:0 auto;display:block}.result-header{flex-direction:column;align-items:flex-start}.copy-btn{width:100%}}