:root{--font-sans: "Inter", sans-serif;--font-mono: "Fira Code", monospace}body,body[data-theme=dark]{--background: #111827;--sidebar-bg: #1F2937;--content-bg: #0d1117;--border-color: #374151;--text-primary: #F9FAFB;--text-secondary: #9CA3AF;--accent-primary: #34D399;--accent-secondary: #60A5FA;--control-bg-hover: #4B5563;--preview-card-bg: #1F2937;--tag-bg: #374151;--modal-bg: rgba(17, 24, 39, .8);--token-punctuation: #818CF8;--token-key: #60A5FA;--token-string: #A7F3D0;--token-number: #FBBF24;--token-boolean: #F472B6;--token-null: #F87171}body[data-theme=paper]{--background: #F8F8F8;--sidebar-bg: #FFFFFF;--content-bg: #FFFFFF;--border-color: #EAEAEA;--text-primary: #222222;--text-secondary: #666666;--accent-primary: #007AFF;--accent-secondary: #34C759;--control-bg-hover: #F2F2F2;--preview-card-bg: #FFFFFF;--tag-bg: #F2F2F2;--modal-bg: rgba(248, 248, 248, .85);--token-punctuation: #8A8A8E;--token-key: #007AFF;--token-string: #34C759;--token-number: #FF9500;--token-boolean: #AF52DE;--token-null: #FF3B30}body[data-theme=synthwave]{--background: #2d2a55;--sidebar-bg: #242247;--content-bg: #201f3b;--border-color: #403d72;--text-primary: #ffffff;--text-secondary: #b1b0d0;--accent-primary: #ff79c6;--accent-secondary: #8be9fd;--control-bg-hover: #373461;--preview-card-bg: #242247;--tag-bg: #403d72;--modal-bg: rgba(32, 31, 59, .8);--token-punctuation: #ff79c6;--token-key: #8be9fd;--token-string: #f1fa8c;--token-number: #bd93f9;--token-boolean: #ffb86c;--token-null: #ff5555}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{background-color:var(--background);color:var(--text-primary);font-family:var(--font-sans);font-size:16px;display:flex;justify-content:center;align-items:center;padding:1rem;transition:background-color .3s ease,color .3s ease}#portfolio-container{width:100%;max-width:1400px;height:100%;max-height:900px;background-color:var(--content-bg);border:1px solid var(--border-color);border-radius:12px;box-shadow:0 8px 32px #0006;display:grid;grid-template-columns:280px 1fr;overflow:hidden;transition:background-color .3s ease,border-color .3s ease}#sidebar{background-color:var(--sidebar-bg);padding:1.5rem;display:flex;flex-direction:column;border-right:1px solid var(--border-color);overflow-y:auto;transition:background-color .3s ease,border-color .3s ease}#sidebar header h1{font-size:1.5rem;font-weight:700;color:var(--text-primary)}#sidebar header p{font-size:.9rem;color:var(--text-secondary);margin-top:.25rem}#api-nav{margin-top:2.5rem;flex-grow:1}#api-nav h2{font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-secondary);margin-bottom:1rem}#api-nav ul{list-style:none}#api-nav .nav-link{display:block;padding:.75rem 1rem;margin-bottom:.5rem;border-radius:6px;text-decoration:none;color:var(--text-secondary);font-weight:500;transition:background-color .2s ease,color .2s ease;font-size:.95rem}.nav-link:hover{background-color:var(--control-bg-hover);color:var(--text-primary)}.nav-link.active{background-color:var(--background);color:var(--text-primary)}.http-method{font-weight:700;margin-right:.75rem;font-family:var(--font-mono);font-size:.85rem}.http-method.get{color:var(--accent-primary)}#sidebar footer{font-size:.8rem;color:var(--text-secondary);text-align:center;margin-top:1rem}#main-content{padding:2rem;overflow-y:auto;display:flex;flex-direction:column}#endpoint-header{position:relative;overflow:hidden;background-color:var(--sidebar-bg);padding:.75rem 1.5rem;border-radius:8px;border:1px solid var(--border-color);font-family:var(--font-mono);font-size:1.1rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;transition:background-color .3s ease,border-color .3s ease;margin-bottom:2rem}#endpoint-header .path-info{display:flex;align-items:center;gap:1rem}#endpoint-path{color:var(--text-secondary)}.header-controls{display:flex;align-items:center;gap:.5rem}#response-container{flex-grow:1;display:flex;flex-direction:column}#response-header{padding-bottom:.5rem;border-bottom:1px solid var(--border-color);display:flex;justify-content:space-between;align-items:center;transition:border-color .3s ease}#response-header h3{font-size:.9rem;font-weight:500;color:var(--text-secondary)}.response-controls{display:flex;align-items:center;gap:.5rem}#response-body{margin-top:1rem;background-color:var(--sidebar-bg);border:1px solid var(--border-color);border-radius:8px;padding:1.5rem;flex-grow:1;transition:background-color .3s ease,border-color .3s ease;overflow-y:auto;white-space:pre-wrap;word-wrap:break-word;color:var(--text-primary);font-family:var(--font-mono);font-size:.95rem;line-height:1.7}.control-btn{background:none;border:1px solid transparent;color:var(--text-secondary);cursor:pointer;padding:.5rem;border-radius:6px;display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-sans);font-size:.8rem;font-weight:500;transition:all .2s ease}.control-btn:hover{background-color:var(--control-bg-hover);color:var(--text-primary)}.control-btn.preview-btn{border:1px solid var(--border-color)}.control-btn.preview-btn:hover{border-color:var(--accent-primary);color:var(--accent-primary)}.control-btn:disabled{opacity:.5;cursor:not-allowed;background-color:transparent}.control-btn svg{stroke:currentColor;transition:stroke .2s ease}.control-btn.send-btn{background-color:var(--accent-primary);color:var(--background);border:1px solid transparent;padding:.5rem 1rem;font-weight:600}body[data-theme=paper] .control-btn.send-btn{color:#fff}.control-btn.send-btn:hover{background-color:var(--accent-primary);opacity:.85}.control-btn.send-btn:disabled{background-color:var(--border-color);color:var(--text-secondary);opacity:1}.copy-icon{display:inline-block}.check-icon,.copied .copy-icon{display:none}.copied .check-icon{display:inline-block}.copied{color:var(--accent-primary)}.token.punctuation{color:var(--token-punctuation)}.token.key{color:var(--token-key)}.token.string{color:var(--token-string)}.token.number{color:var(--token-number)}.token.boolean{color:var(--token-boolean)}.token.null{color:var(--token-null)}#preview-modal{position:fixed;top:0;right:0;bottom:0;left:0;background-color:var(--modal-bg);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:1000;display:flex;align-items:center;justify-content:center;padding:2rem;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease}#preview-modal.visible{opacity:1;visibility:visible}.modal-content{background-color:var(--content-bg);border:1px solid var(--border-color);border-radius:12px;box-shadow:0 8px 32px #0006;width:100%;max-width:900px;height:100%;max-height:90vh;display:flex;flex-direction:column;transform:scale(.95);transition:transform .3s ease}#preview-modal.visible .modal-content{transform:scale(1)}.modal-header{padding:1rem 1.5rem;border-bottom:1px solid var(--border-color);display:flex;justify-content:space-between;align-items:center}.modal-header h2{font-size:1.25rem}#modal-body{padding:2rem;overflow-y:auto;flex-grow:1}.profile-card h3{font-size:1.75rem;font-weight:700;color:var(--text-primary)}.profile-card .title{font-size:1.1rem;color:var(--accent-primary);margin:.25rem 0 1.5rem;font-weight:500}.profile-card .summary,.profile-card .philosophy{font-size:1rem;line-height:1.6;color:var(--text-secondary)}.profile-card .philosophy{margin-top:1rem;padding-left:1rem;border-left:3px solid var(--accent-primary);font-style:italic}.skills-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem}.skill-category h4{font-size:.9rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-secondary);margin-bottom:1rem;border-bottom:1px solid var(--border-color);padding-bottom:.5rem}.skill-tags{display:flex;flex-wrap:wrap;gap:.75rem}.skill-tag{background-color:var(--tag-bg);padding:.5rem 1rem;border-radius:1rem;font-size:.9rem;font-weight:500;color:var(--text-primary)}.project-list{display:flex;flex-direction:column;gap:1.5rem}.project-card{background-color:var(--preview-card-bg);border:1px solid var(--border-color);border-radius:8px;padding:1.5rem;transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease}.project-card:hover{border-color:var(--accent-primary);transform:translateY(-3px);box-shadow:0 4px 12px #0000001a}.project-card-header{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}.project-card-header h4{font-size:1.25rem;font-weight:600}.project-status{background-color:var(--accent-primary);color:var(--content-bg);padding:.25rem .75rem;border-radius:1rem;font-size:.75rem;font-weight:700;text-transform:uppercase;white-space:nowrap}.project-card-body p{margin:1rem 0;color:var(--text-secondary);line-height:1.5}.tech-stack{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}.tech-tag{background-color:var(--tag-bg);padding:.25rem .75rem;border-radius:4px;font-size:.8rem;font-family:var(--font-mono);color:var(--text-secondary)}.project-link a{color:var(--accent-primary);text-decoration:none;font-weight:600;display:inline-flex;align-items:center;gap:.5rem}.project-link a:hover{text-decoration:underline}.project-link svg{width:16px;height:16px}.contact-list{list-style:none;display:flex;flex-direction:column;gap:1.5rem}.contact-item{display:flex;align-items:center;gap:1rem}.contact-item svg{width:24px;height:24px;color:var(--text-secondary)}.contact-item-label{font-weight:500;font-size:.9rem;color:var(--text-secondary);width:80px;text-transform:capitalize}.contact-item-value{font-family:var(--font-mono);font-size:1rem}.contact-item-value a{color:var(--text-primary);text-decoration:none}.contact-item-value a:hover{text-decoration:underline;color:var(--accent-primary)}.preview-error{color:var(--text-secondary);font-style:italic}@media (max-width: 900px){body{padding:0}#portfolio-container{grid-template-columns:1fr;grid-template-rows:1fr auto;max-height:none;height:100svh;border-radius:0;border:none}#main-content{grid-row:1;padding:1.5rem 1rem}#sidebar{grid-row:2;flex-direction:row;border-right:none;border-top:1px solid var(--border-color);padding:.5rem;overflow-y:hidden}#sidebar header,#sidebar footer,#api-nav h2,#api-nav .nav-link .http-method{display:none}#api-nav{margin-top:0;width:100%}#api-nav ul{display:flex;justify-content:space-around;gap:.25rem}#api-nav .nav-link{padding:.75rem .5rem;margin-bottom:0;flex-grow:1;text-align:center;font-size:.9rem}#response-body{padding:1rem;font-size:.875rem}#endpoint-header{margin-bottom:1.5rem;padding:.75rem 1rem}.modal-content{height:100%;max-height:85vh}#modal-body{padding:1.5rem}}