.layout-toggle{background-color:var(--card-bg);box-shadow:var(--shadow-card);z-index:9998;transition:all var(--transition-smooth);border-radius:6px;gap:4px;padding:3px;display:flex;position:fixed;top:20px;left:50%;transform:translate(-50%)}.layout-toggle:hover{box-shadow:var(--shadow-active)}.layout-toggle-btn{cursor:pointer;transition:all var(--transition-fast);color:var(--text-secondary);background-color:#0000;border:none;border-radius:4px;justify-content:center;align-items:center;padding:6px 10px;display:flex}.layout-toggle-btn:hover{color:var(--text-primary);background-color:#0000000d}:root[data-theme=dark] .layout-toggle-btn:hover{background-color:#ffffff1a}.layout-toggle-btn.active{background-color:var(--text-primary);color:var(--card-bg)}.layout-toggle-btn svg{display:block}.centered-layout-container{z-index:1;justify-content:center;width:100%;height:100vh;padding:80px 20px 40px;display:flex;position:absolute;top:0;left:0;overflow:hidden auto}.centered-layout-content{flex-direction:column;gap:20px;width:100%;max-width:690px;display:flex}.centered-card-wrapper{width:100%;position:relative}.centered-card-wrapper .card{cursor:default;background-color:var(--card-bg);width:100%;box-shadow:none;border:1px solid #00000014;padding:12px;position:relative}:root[data-theme=dark] .centered-card-wrapper .card{border-color:#ffffff1a}.centered-card-wrapper .card:hover{border-color:#0000001f;transform:none}:root[data-theme=dark] .centered-card-wrapper .card:hover{border-color:#ffffff26}.centered-card-wrapper .card-container{cursor:default}.centered-card-wrapper .card-image,.centered-card-wrapper iframe{aspect-ratio:4/3;object-fit:cover;width:100%;height:auto}.centered-card-wrapper .card-component{aspect-ratio:4/3;width:100%}.projects-section{flex-direction:column;gap:12px;width:100%;display:flex}.section-title{color:var(--text-primary);letter-spacing:-.02em;font-size:16px;font-weight:700;font-family:var(--font-heading);margin:0 0 12px}@media only screen and (max-width:768px){.layout-toggle{top:10px;left:50%;transform:translate(-50%)}.centered-layout-container{padding:60px 16px 40px}.centered-layout-content{max-width:100%}}
.heatmap-container{background-color:var(--card-bg);padding:var(--spacing-lg);border-radius:var(--radius-md);box-shadow:var(--shadow-card);z-index:100;max-width:700px;transition:all var(--transition-smooth);position:fixed;bottom:80px;left:20px}.heatmap-container:hover{box-shadow:var(--shadow-active);transform:translateY(-2px)}.heatmap-header{margin-bottom:var(--spacing-md);justify-content:space-between;align-items:center;display:flex}.heatmap-title{font-size:var(--font-sm);color:var(--text-primary);font-weight:600;font-family:var(--font-heading);margin:0}.heatmap-stats{font-size:var(--font-xs);color:var(--text-secondary)}.heatmap-grid-wrapper{-webkit-overflow-scrolling:touch;overflow:auto hidden}.heatmap-grid{grid-template-rows:repeat(7,10px);grid-template-columns:repeat(53,10px);grid-auto-flow:column;gap:3px;display:grid}.heatmap-cell{width:10px;height:10px;transition:transform var(--transition-fast),opacity var(--transition-fast);cursor:pointer;border-radius:2px}.heatmap-cell:hover{opacity:.8;transform:scale(1.2)}.heatmap-cell.level-0{background-color:#0000000d}.heatmap-cell.level-1{background-color:#9be9a8}.heatmap-cell.level-2{background-color:#40c463}.heatmap-cell.level-3{background-color:#30a14e}.heatmap-cell.level-4{background-color:#216e39}:root[data-theme=dark] .heatmap-cell.level-0{background-color:#ffffff0d}:root[data-theme=dark] .heatmap-cell.level-1{background-color:#0e4429}:root[data-theme=dark] .heatmap-cell.level-2{background-color:#006d32}:root[data-theme=dark] .heatmap-cell.level-3{background-color:#26a641}:root[data-theme=dark] .heatmap-cell.level-4{background-color:#39d353}.heatmap-legend{margin-top:var(--spacing-md);justify-content:flex-end;align-items:center;gap:4px;display:flex}.heatmap-legend-label{color:var(--text-secondary);font-size:10px}.heatmap-legend-scale{gap:3px;display:flex}.heatmap-compact{width:100%;max-width:none;padding:var(--spacing-lg);margin-bottom:0;position:static}.heatmap-compact .heatmap-title{font-size:15px}.heatmap-compact .heatmap-grid-wrapper{overflow-x:auto}.heatmap-compact .heatmap-grid{min-width:fit-content}@media only screen and (max-width:768px){.heatmap-container{max-width:none;padding:var(--spacing-md);bottom:60px;left:10px;right:10px}.heatmap-grid{grid-template-rows:repeat(7,8px);grid-template-columns:repeat(53,8px);gap:2px}.heatmap-cell{width:8px;height:8px}}@media only screen and (max-width:576px){.heatmap-container{display:none}}
.profile-header{flex-direction:column;gap:16px;width:100%;margin-bottom:0;display:flex}.profile-info,.profile-details{flex-direction:column;gap:8px;display:flex}.profile-name{color:var(--text-primary);letter-spacing:-.02em;font-size:24px;font-weight:700;font-family:var(--font-heading);margin:0}.profile-title{color:var(--text-secondary);margin:0;font-size:14px;font-weight:400}.profile-socials-inline{align-items:center;gap:8px;margin-top:4px;display:flex}.social-link-inline{width:32px;height:32px;transition:all var(--transition-normal);background-color:#0000000a;border-radius:6px;justify-content:center;align-items:center;text-decoration:none;display:flex}:root[data-theme=dark] .social-link-inline{background-color:#ffffff0f}.social-link-inline:hover{background-color:#00000014;transform:translateY(-2px)}:root[data-theme=dark] .social-link-inline:hover{background-color:#ffffff1a}.social-link-inline .social-icon{font-size:18px;line-height:1}@media only screen and (max-width:768px){.profile-name{font-size:20px}.profile-title{font-size:13px}.profile-socials-inline{justify-content:flex-start}}
.now-section{width:100%}.now-content{background-color:var(--card-bg);border-radius:var(--radius-md);box-shadow:none;transition:all var(--transition-smooth);border:1px solid #00000014;padding:12px}:root[data-theme=dark] .now-content{border-color:#ffffff1a}.now-content:hover{border-color:#0000001f}:root[data-theme=dark] .now-content:hover{border-color:#ffffff26}.now-list{flex-direction:column;gap:12px;margin-bottom:16px;display:flex}.now-item{align-items:flex-start;gap:10px;display:flex}.now-emoji{flex-shrink:0;font-size:18px;line-height:1.4}.now-text{color:var(--text-primary);font-size:13px;line-height:1.6}.now-metadata{border-top:1px solid #0000000f;gap:20px;padding-top:12px;display:flex}:root[data-theme=dark] .now-metadata{border-top-color:#ffffff14}.now-meta-item{flex-direction:column;gap:2px;display:flex}.now-meta-label{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;font-size:10px;font-weight:600;font-family:var(--font-heading)}.now-meta-value{color:var(--text-primary);font-size:12px}@media only screen and (max-width:768px){.now-emoji{font-size:16px}.now-text{font-size:12px}.now-metadata{flex-direction:column;gap:12px}}
.album-section{width:100%}.album-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;display:grid}.album-photo-wrapper{cursor:pointer;border-radius:var(--radius-md);overflow:hidden}.album-photo{aspect-ratio:4/3;background-color:var(--card-bg);border-radius:var(--radius-md);width:100%;transition:all var(--transition-smooth);border:1px solid #00000014;position:relative;overflow:hidden}:root[data-theme=dark] .album-photo{border-color:#ffffff1a}.album-photo:hover{border-color:#0000001f}:root[data-theme=dark] .album-photo:hover{border-color:#ffffff26}.album-photo-image{object-fit:cover;width:100%;height:100%;transition:all var(--transition-smooth)}.album-photo:hover .album-photo-image{transform:scale(1.05)}.album-photo-overlay{opacity:0;transition:all var(--transition-smooth);background:linear-gradient(#0000,#000000b3);flex-direction:column;gap:2px;padding:10px;display:flex;position:absolute;bottom:0;left:0;right:0}.album-photo:hover .album-photo-overlay{opacity:1}.album-photo-caption{color:#fff;font-size:12px;font-weight:600;font-family:var(--font-heading)}.album-photo-date{color:#fffc;font-size:10px;font-weight:500}.album-modal{-webkit-backdrop-filter:blur(10px);z-index:10000;width:100vw;height:100vh;padding:var(--spacing-xl);cursor:pointer;background:#000000e6;justify-content:center;align-items:center;animation:.2s fadeIn;display:flex;position:fixed;top:0;left:0}.album-modal-content{cursor:default;flex-direction:column;gap:16px;max-width:900px;max-height:90vh;animation:.3s cubic-bezier(.34,1.56,.64,1) slideUp;display:flex;position:relative}.album-modal-close{cursor:pointer;color:#fff;width:32px;height:32px;transition:all var(--transition-fast);background:#ffffff1a;border:1px solid #fff3;border-radius:50%;justify-content:center;align-items:center;font-size:18px;display:flex;position:absolute;top:-40px;right:0}.album-modal-close:hover{background:#fff3;transform:rotate(90deg)}.album-modal-image{object-fit:contain;border-radius:var(--radius-md);width:100%;height:auto;max-height:70vh;box-shadow:0 8px 32px #00000080}.album-modal-info{flex-direction:column;gap:4px;padding:0 8px;display:flex}.album-modal-caption{color:#fff;font-size:16px;font-weight:600;font-family:var(--font-heading)}.album-modal-date{color:#ffffffb3;font-size:12px;font-weight:500}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media only screen and (max-width:768px){.album-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}.album-modal{padding:var(--spacing-md)}.album-modal-content{max-width:100%}.album-modal-close{top:-50px}}@media only screen and (max-width:576px){.album-grid{grid-template-columns:repeat(2,1fr);gap:6px}.album-photo-caption{font-size:11px}.album-photo-date{font-size:9px}.album-modal-caption{font-size:14px}.album-modal-date{font-size:11px}}
.learnings-section{width:100%}.learnings-content{background-color:var(--card-bg);border-radius:var(--radius-md);box-shadow:none;transition:all var(--transition-smooth);border:1px solid #00000014;padding:12px}:root[data-theme=dark] .learnings-content{border-color:#ffffff1a}.learnings-content:hover{border-color:#0000001f}:root[data-theme=dark] .learnings-content:hover{border-color:#ffffff26}.learnings-list{flex-direction:column;gap:10px;display:flex}.learning-item{transition:all var(--transition-fast);border-bottom:1px solid #0000000a;align-items:flex-start;gap:12px;padding:8px 0;display:flex}:root[data-theme=dark] .learning-item{border-bottom-color:#ffffff0f}.learning-item:last-child{border-bottom:none;padding-bottom:0}.learning-item:hover{padding-left:4px}.learning-date{color:var(--text-secondary);min-width:45px;font-size:11px;font-weight:600;line-height:1.6;font-family:var(--font-heading);flex-shrink:0}.learning-info{flex-direction:column;flex:1;gap:2px;display:flex}.learning-title{color:var(--text-primary);font-size:13px;line-height:1.5}.learning-category{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;font-size:10px;font-weight:500;font-family:var(--font-heading)}@media only screen and (max-width:768px){.learning-item{flex-direction:column;gap:4px}.learning-date{min-width:auto}.learning-title{font-size:12px}}
.uses-section{width:100%}.uses-grid{flex-direction:column;gap:12px;display:flex}.uses-category{background-color:var(--card-bg);border-radius:var(--radius-md);box-shadow:none;transition:all var(--transition-smooth);border:1px solid #00000014;padding:12px}:root[data-theme=dark] .uses-category{border-color:#ffffff1a}.uses-category:hover{border-color:#0000001f}:root[data-theme=dark] .uses-category:hover{border-color:#ffffff26}.uses-category-title{color:var(--text-primary);letter-spacing:-.01em;font-size:13px;font-weight:600;font-family:var(--font-heading);margin:0 0 8px}.uses-items{flex-wrap:wrap;gap:6px;display:flex}.uses-item{color:var(--text-primary);transition:all var(--transition-normal);cursor:default;background-color:#0000000a;border-radius:4px;padding:4px 8px;font-size:12px;font-weight:500;display:inline-block}:root[data-theme=dark] .uses-item{background-color:#ffffff0f}.uses-item:hover{background-color:#00000014;transform:translateY(-1px)}:root[data-theme=dark] .uses-item:hover{background-color:#ffffff1a}@media only screen and (max-width:768px){.uses-category-title{font-size:12px}.uses-item{padding:3px 6px;font-size:11px}}
.bookmarks-section{width:100%}.bookmarks-content{background-color:var(--card-bg);border-radius:var(--radius-md);box-shadow:none;transition:all var(--transition-smooth);border:1px solid #00000014;padding:12px}:root[data-theme=dark] .bookmarks-content{border-color:#ffffff1a}.bookmarks-content:hover{border-color:#0000001f}:root[data-theme=dark] .bookmarks-content:hover{border-color:#ffffff26}.bookmarks-list{flex-direction:column;gap:8px;display:flex}.bookmark-item{transition:all var(--transition-fast);background-color:#0000;border-radius:4px;align-items:center;gap:10px;padding:8px;text-decoration:none;display:flex}.bookmark-item:hover{background-color:#00000008;padding-left:12px}:root[data-theme=dark] .bookmark-item:hover{background-color:#ffffff0d}.bookmark-type{font-size:11px;font-weight:600;font-family:var(--font-mono);flex-shrink:0}.bookmark-title{color:var(--text-primary);flex:1;font-size:13px}.bookmark-arrow{color:var(--text-secondary);opacity:0;transition:all var(--transition-fast);flex-shrink:0;font-size:14px}.bookmark-item:hover .bookmark-arrow{opacity:1;transform:translate(4px)}@media only screen and (max-width:768px){.bookmark-type{font-size:10px}.bookmark-title{font-size:12px}}
.portfolio-footer{border-top:1px solid #00000014;flex-direction:column;gap:8px;width:100%;margin-top:20px;padding:16px 0;display:flex}:root[data-theme=dark] .portfolio-footer{border-top-color:#ffffff1a}.footer-content{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;display:flex}.footer-text{color:var(--text-secondary);margin:0;font-size:11px}.footer-links{align-items:center;gap:8px;display:flex}.footer-link{color:var(--text-secondary);transition:color var(--transition-fast);font-size:11px;text-decoration:none}.footer-link:hover{color:var(--text-primary)}.footer-separator{color:var(--text-secondary);opacity:.5;font-size:11px}.footer-badge{color:var(--text-secondary);text-align:center;margin:0;font-size:10px}.footer-badge-link{color:var(--text-primary);transition:opacity var(--transition-fast);font-weight:500;text-decoration:none}.footer-badge-link:hover{opacity:.7}@media only screen and (max-width:768px){.footer-content{text-align:left;flex-direction:column;align-items:flex-start}.footer-badge{text-align:left}}
*{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Malgun Gothic,sans-serif;font-weight:400;overflow:hidden}