.mac-window{background-color:var(--mac-bg);border-radius:12px;border:1px solid var(--mac-border);box-shadow:var(--mac-shadow);overflow:hidden;display:flex;flex-direction:column}.mac-window-popup{animation:popUp .4s cubic-bezier(.16,1,.3,1) forwards;opacity:0}.mac-window-tilt-wrapper{transition:transform .3s ease}.mac-title-bar{height:36px;background-color:#f3f3f3;border-bottom:1px solid var(--mac-border);display:flex;align-items:center;padding:0 16px;position:relative;-webkit-user-select:none;user-select:none}.mac-controls{display:flex;gap:8px}.mac-dot{width:12px;height:12px;border-radius:50%;opacity:.8}.mac-dot.close{background-color:var(--mac-close)}.mac-dot.min{background-color:var(--mac-min)}.mac-dot.max{background-color:var(--mac-max)}.mac-dot.clickable{cursor:pointer;transition:all .15s ease}.mac-dot.clickable:hover{opacity:1;transform:scale(1.15);box-shadow:0 0 6px #0003}.mac-dot.clickable:active{transform:scale(.95)}.mac-title{position:absolute;left:0;right:0;text-align:center;font-size:13px;font-weight:600;color:var(--text-secondary);pointer-events:none}.mac-content{padding:24px;overflow:auto;flex:1;position:relative}@keyframes popUp{0%{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}.nav-button{background:none;border:none;height:100%;padding:0 16px;font-family:var(--font-code);font-size:13px;color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;transition:color .2s,background-color .2s}.nav-button:hover{background-color:#0000000d;color:var(--text-primary)}.nav-button.active{color:var(--text-primary);font-weight:600}.mobile-nav-item{background:none;border:none;text-align:left;padding:8px 12px;font-family:var(--font-code);font-size:14px;cursor:pointer;border-radius:6px;transition:background-color .2s;width:100%;color:var(--text-secondary)}.mobile-nav-item:hover{background-color:var(--bg-grid);color:var(--text-primary)}.mobile-nav-item.active{color:var(--text-primary);font-weight:600;background-color:#0000000d}.top-bar-container{position:fixed;top:0;left:0;width:100%;height:48px;display:flex;justify-content:space-between;align-items:center;padding:0 16px;box-sizing:border-box;background-color:#fdfdfdcc;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid rgba(0,0,0,.05);z-index:1000;-webkit-user-select:none;user-select:none}.top-bar-section{display:flex;align-items:center;gap:12px;width:100px}.top-bar-brand-section{cursor:pointer}.top-bar-brand-name{font-weight:600;font-size:14px;color:var(--text-primary);letter-spacing:-.02em}.top-bar-icon-placeholder{width:24px;height:24px;border-radius:6px;background-color:var(--bg-grid);display:flex;justify-content:center;align-items:center}.top-bar-logo{width:16px;height:16px}.top-bar-nav{display:flex;height:100%;align-items:center;gap:4px}.mobile-dropdown{position:absolute;top:100%;left:50%;transform:translate(-50%);margin-top:12px;z-index:1001}.mobile-menu-list{display:flex;flex-direction:column;gap:8px;padding:0 8px}.projects-container{padding:20px 0;width:100%}.projects-grid{display:grid;grid-template-columns:1fr;gap:24px;padding-bottom:40px}@media (min-width: 768px){.projects-grid{grid-template-columns:repeat(2,1fr);gap:32px}}@media (min-width: 1024px){.projects-grid{grid-template-columns:repeat(3,1fr);gap:32px}}.project-card-wrapper{transition:transform .3s ease}.project-card-wrapper:hover{transform:translateY(-5px)!important;z-index:10}.projects-loading{padding:80px 24px;text-align:center;color:var(--text-secondary)}.project-card{height:100%;transition:transform .2s ease,box-shadow .2s ease}.project-card-content{display:flex;flex-direction:column;height:100%}.project-details{flex:1;display:flex;flex-direction:column}.project-tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}.project-tag{font-size:11px;padding:4px 8px;border-radius:4px;font-family:var(--font-code);font-weight:500}.project-title{margin:0 0 8px;font-size:18px;font-family:var(--font-primary);font-weight:600}.project-description{margin:0;font-size:14px;color:var(--text-secondary);line-height:1.5}.project-detail-container{padding-bottom:40px}.project-detail-loading,.project-detail-error{padding:40px;text-align:center}.project-detail-content{display:flex;flex-direction:column}.project-detail-banner{height:250px;background-color:#f5f5f5;display:flex;align-items:center;justify-content:center;overflow:hidden;border-bottom:1px solid #eee}.project-detail-image{width:100%;height:100%;object-fit:contain;image-rendering:pixelated}.project-detail-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px}.project-detail-title{margin:0 0 10px;font-size:28px}.project-detail-tags{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.project-detail-tag{font-size:12px;padding:4px 10px;border-radius:99px;font-family:var(--font-code);white-space:nowrap}.project-detail-link{padding:10px 20px;background:#007aff;color:#fff;text-decoration:none;border-radius:6px;font-weight:700}.project-detail-body{line-height:1.6;font-size:16px}.admin-layout{display:flex;flex-direction:row;width:100%;height:100%;gap:20px;overflow:visible;box-sizing:border-box}.admin-sidebar{width:220px;background-color:#f5f5f5;border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:10px;font-family:var(--font-code, monospace);color:#50a14f;border:1px solid var(--mac-border);box-shadow:0 4px 12px #00000014;height:100%;flex-shrink:0;box-sizing:border-box;z-index:10}.admin-sidebar-title{font-weight:700;margin-bottom:20px;border-bottom:1px dashed #50a14f;padding-bottom:10px;opacity:.8;color:#383838}.admin-nav-btn{background:transparent;border:none;color:#50a14f;font-family:inherit;text-align:left;padding:10px 14px;cursor:pointer;font-size:14px;transition:all .2s ease;border-radius:6px}.admin-nav-btn:hover{background-color:#50a14f1a;transform:translate(4px)}.admin-nav-btn.active{background-color:#50a14f26;font-weight:700;color:#407f3f;box-shadow:0 2px 4px #0000000d}.admin-nav-btn.logout{margin-top:auto;color:#e45649;border-top:1px dashed #e45649;padding-top:15px}.admin-nav-btn.logout:hover{background-color:#e456491a}.admin-main{flex:1;display:flex;flex-direction:column;height:100%;min-width:0;position:relative;overflow:visible;box-sizing:border-box}.admin-login-wrapper{display:flex;justify-content:center;align-items:center;height:100%;width:100%;min-height:60vh}.login-form{display:flex;flex-direction:column;gap:15px}.login-input{padding:10px;border-radius:6px;border:1px solid #ddd;font-size:14px}.login-btn{padding:10px;background-color:#007aff;color:#fff;border:none;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .2s}.login-btn:hover{background-color:#0056b3}.login-btn:disabled{background-color:#ccc;cursor:not-allowed}.error-message{color:#ff3b30;font-size:12px;margin-top:5px}.admin-view-scroll-container{overflow:visible;height:100%;width:100%;box-sizing:border-box}.admin-loading-text{color:var(--text-primary);font-family:monospace}.admin-error-content{padding:20px;color:red}.admin-login-box{width:100%;max-width:400px}.admin-placeholder{font-family:monospace;padding:20px;height:100%;display:flex;flex-direction:column;color:#444}.admin-system-status{color:#888;margin-top:auto;font-size:.9em}.confirm-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:9999;animation:fadeIn .15s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.confirm-modal-container{animation:slideUp .2s ease-out}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.confirm-modal-window{min-width:350px;max-width:450px}.confirm-modal-content{padding:0}.confirm-modal-message{margin:0 0 1.5rem;color:var(--text-primary, #fff);font-size:1rem;line-height:1.5}.confirm-modal-actions{display:flex;gap:.75rem;justify-content:flex-end}.confirm-modal-btn{padding:.6rem 1.2rem;border-radius:8px;font-size:.9rem;font-weight:500;cursor:pointer;transition:all .15s ease;border:none}.confirm-modal-btn-cancel{background:var(--surface-secondary, #333);color:var(--text-secondary, #aaa)}.confirm-modal-btn-cancel:hover{background:var(--surface-tertiary, #444)}.confirm-modal-btn-confirm{background:var(--brand-accent, #02eeaa);color:#000}.confirm-modal-btn-confirm:hover{filter:brightness(1.1)}.confirm-modal-btn-confirm.danger{background:#e53e3e;color:#fff}.confirm-modal-btn-confirm.danger:hover{background:#c53030}.alert-modal-body{display:flex;align-items:flex-start;gap:1rem;margin-bottom:1.5rem}.alert-modal-icon{font-size:1.5rem;line-height:1;flex-shrink:0}.alert-icon-info{color:var(--brand-accent, #02eeaa)}.alert-icon-success{color:#4ade80}.alert-icon-warning{color:#fbbf24}.alert-icon-error{color:#f87171}.admin-container input,.admin-container button,.admin-container textarea,.admin-container select{font-family:var(--font-primary, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol")}.pixel-editor-container{display:flex;flex-direction:column;gap:15px;height:100%;align-items:center}.pixel-canvas-wrapper{position:relative;overflow:auto;border:1px solid #ddd;box-shadow:0 4px 6px #0000000d;background-image:linear-gradient(45deg,#f0f0f0 25%,transparent 25%),linear-gradient(-45deg,#f0f0f0 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#f0f0f0 75%),linear-gradient(-45deg,transparent 75%,#f0f0f0 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0px;max-width:100%;flex:1;display:flex;justify-content:center;align-items:center;background-color:#e5e5e5;padding:20px}.pixel-canvas{display:grid;cursor:url('data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><rect x="6" y="6" width="4" height="4" fill="black" stroke="white" stroke-width="1"/></svg>') 8 8,crosshair;background-color:transparent;box-shadow:0 0 20px #0000001a}.pixel-cell{width:10px;height:10px;border-right:1px solid rgba(0,0,0,.05);border-bottom:1px solid rgba(0,0,0,.05);box-sizing:border-box}.pixel-cell:hover{box-shadow:inset 0 0 0 1px #0000004d;z-index:1}.pixel-tools{display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:flex-start;padding:10px 12px;background:#f9f9f9;border-radius:8px;border:1px solid #eaeaea;width:100%}.tool-group{display:flex;gap:6px;align-items:center}.tool-divider{width:1px;height:24px;background:#ddd;margin:0 4px}.tool-btn{padding:6px 10px;border:1px solid #ccc;background:#fff;border-radius:4px;cursor:pointer;font-size:12px;font-weight:500;transition:all .15s ease}.tool-btn:hover:not(:disabled){background:#f0f0f0;border-color:#bbb}.tool-btn:disabled{opacity:.4;cursor:not-allowed}.tool-btn.active{background:#007aff;color:#fff;border-color:#0062cc}.color-picker{width:30px;height:30px;border:none;padding:0;cursor:pointer;border-radius:4px;background:none}.tool-btn-clear{color:#f87171;border-color:#fca5a5}.tool-btn-clear:hover:not(:disabled){background:#fef2f2;border-color:#f87171}.tool-btn-save{background:#4ade80;color:#052e16;border-color:#4ade80}.tool-btn-save:hover:not(:disabled){background:#86efac;border-color:#86efac}.tool-btn-import{background:#67e8f9;color:#083344;border-color:#67e8f9}.tool-btn-import:hover:not(:disabled){background:#a5f3fc;border-color:#a5f3fc}.pixel-editor-footer{font-size:12px;color:#666}.add-project-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));grid-auto-rows:auto;gap:20px;padding-bottom:20px}.add-project-item-info,.add-project-item-control{grid-column:span 1;grid-row:span 1}.add-project-item-pixel,.add-project-item-markdown{grid-column:1 / -1;min-height:400px}.add-project-item-tags{grid-column:1 / -1}.add-project-info-content{padding:20px;display:flex;flex-direction:column;gap:15px}.add-project-label{display:block;margin-bottom:5px;font-size:12px;font-weight:700;color:#666;text-transform:uppercase}.add-project-input{width:100%;padding:10px;border-radius:6px;border:1px solid #ddd;font-size:14px;box-sizing:border-box}.add-project-textarea{width:100%;padding:10px;border-radius:6px;border:1px solid #ddd;font-size:14px;box-sizing:border-box;height:80px;resize:none}.add-project-control-content{padding:20px;display:flex;flex-direction:column;gap:20px;flex:1;justify-content:center;align-items:center}.add-project-status-box{width:100%;padding:15px;border-radius:8px;background:#f5f5f5;text-align:center;font-weight:700;font-family:monospace}.add-project-publish-btn{flex:1;padding:15px;color:#fff;border:none;border-radius:8px;font-weight:700;font-size:16px;cursor:pointer}.add-project-publish-btn:disabled{cursor:not-allowed;background:#ccc}.markdown-toolbar{display:flex;gap:10px;padding:10px;background:#f5f5f5;border-bottom:1px solid #ddd}.markdown-toggle-btn{border:none;background:none;cursor:pointer}.markdown-toggle-btn.active{font-weight:700}.markdown-upload-label{cursor:pointer;font-size:12px;display:flex;align-items:center;gap:4px}.markdown-container{flex:1;position:relative;height:100%;box-sizing:border-box}.markdown-textarea{width:100%;height:100%;border:none;resize:none;padding:15px;font-family:monospace;font-size:14px;line-height:1.5;outline:none;background-color:#fff;box-sizing:border-box}.markdown-preview{padding:15px;overflow-y:auto;height:100%;background-color:#fff;color:#000}.tag-manager-content{padding:15px;display:flex;flex-direction:column;gap:15px;flex:1;overflow:hidden}.tag-list-area{flex:1;overflow-y:auto}.tag-grid{display:flex;flex-wrap:wrap;gap:8px}.tag-btn{padding:5px 10px;border-radius:15px;cursor:pointer;font-size:12px;transition:all .2s}.tag-create-area{border-top:1px solid #eee;padding-top:10px}.tag-create-btn{width:100%;padding:8px;background:#f5f5f5;border:1px dashed #ccc;border-radius:4px;cursor:pointer}.tag-create-form{display:flex;gap:10px;align-items:center}.tag-color-input{width:30px;height:30px;border:none;background:none;cursor:pointer}.tag-text-input{flex:1;padding:5px}.tag-add-btn{padding:5px 10px;background:#007aff;color:#fff;border:none;border-radius:4px}.tag-cancel-btn{border:none;background:none;cursor:pointer}.admin-projects-loading{padding:20px;text-align:center}.admin-projects-empty{padding:40px;text-align:center;color:#888}.admin-projects-list{display:flex;flex-direction:column;gap:15px;box-sizing:border-box}.admin-project-window{min-height:auto}.admin-project-row{display:flex;align-items:center;gap:15px;width:100%;box-sizing:border-box}.admin-project-thumbnail{width:200px;aspect-ratio:2/1;border-radius:4px;overflow:hidden;flex-shrink:0}.admin-project-image{width:100%;height:100%;object-fit:contain;image-rendering:pixelated}.admin-project-info{flex:1;min-width:0}.admin-project-title{font-weight:700;font-size:16px}.admin-project-desc{font-size:12px;color:#666;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.admin-project-date{font-size:11px;color:#888;margin-top:2px}.admin-project-tags{display:flex;gap:5px;margin-top:5px}.admin-project-tag{font-size:10px;padding:2px 6px;border-radius:3px}.admin-project-actions{display:flex;gap:10px}.admin-btn-edit{padding:8px 12px;border:1px solid #ccc;border-radius:5px;background:#fff;cursor:pointer;font-size:13px}.admin-btn-delete{padding:8px 12px;border:1px solid #ffcccc;border-radius:5px;background:#fff5f5;color:#d32f2f;cursor:pointer;font-size:13px}.admin-work-list{display:flex;flex-direction:column;gap:15px;box-sizing:border-box;padding-bottom:20px}.admin-work-window{min-height:auto}.admin-work-row{display:flex;flex-direction:column;padding:15px;gap:10px;width:100%;box-sizing:border-box}.admin-work-header{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid #eee;padding-bottom:8px;margin-bottom:5px}.admin-work-role{font-size:16px;font-weight:700;color:#333}.admin-work-company{font-size:14px;color:#666;font-weight:500}.admin-work-meta{display:flex;gap:15px;font-size:12px;color:#888}.admin-work-meta-item{display:flex;align-items:center;gap:5px}.admin-work-description{font-size:13px;color:#555;line-height:1.5}.admin-work-highlights{margin-top:5px;padding-left:20px;font-size:12px;color:#666}.admin-work-highlight-item{margin-bottom:4px}.admin-work-links{display:flex;gap:10px;margin-top:5px}.admin-work-link{font-size:11px;color:#06c;text-decoration:none;padding:2px 6px;background:#f0f7ff;border-radius:4px}.admin-work-empty{padding:40px;text-align:center;color:#888}.home-container{width:100%}.home-masonry{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;width:100%}.masonry-column{display:flex;flex-direction:column;gap:24px}.home-card{width:100%}.code-block{font-family:var(--font-code);font-size:14px;line-height:1.6;color:#1a1a1a}.code-block p{margin:0}.indent{padding-left:20px}.keyword{color:#6a00ff;font-weight:700}.string{color:#008a00;font-weight:500}.comment{color:#666;font-style:italic}.key{color:#000;font-weight:600}.function{color:#d32f2f;font-weight:600}.todo-list{list-style:none;padding:0;margin:0}.folder{display:flex;align-items:center;gap:8px;margin-bottom:4px}@media (max-width: 1024px){.home-masonry{grid-template-columns:repeat(2,1fr)}}@media (max-width: 600px){.home-masonry{grid-template-columns:1fr}}.profile-card{height:100%}.profile-card-content{overflow:hidden;display:flex;flex-direction:column;align-items:center;padding:12px;background:#f5f5f5;border-radius:12px;box-sizing:border-box}.profile-card-image-wrapper{max-width:100%;height:100%;aspect-ratio:1 / 1;box-shadow:0 4px 12px #00000014}.profile-card-btn{transition:background .2s;margin-top:12px;flex-shrink:0}.skills-graph-card{height:100%;aspect-ratio:1/1!important}.skill-node-wrapper{position:absolute;top:0;left:0;will-change:transform;pointer-events:none}.skill-node-inner{pointer-events:auto;border:1px solid;border-radius:99px;font-family:var(--font-mono);display:flex;align-items:center;justify-content:center;white-space:nowrap;will-change:transform;cursor:pointer;transition:transform .3s cubic-bezier(.25,.46,.45,.94),background-color .3s ease,border-color .3s ease,opacity .3s ease,box-shadow .3s ease,color .3s ease}.tier-1{font-size:14px;font-weight:700;padding:6px 14px}.tier-2{font-size:12px;font-weight:500;padding:4px 10px}.tier-3{font-size:10px;opacity:.8;padding:2px 6px}.tier-4{font-size:8px;opacity:.8;padding:1px 4px}.work-container{width:100%;padding:20px 0;box-sizing:border-box}.work-stack{display:flex;flex-direction:column;align-items:center;max-width:800px;margin:0 auto;padding:0 20px}.stack-connector{display:flex;flex-direction:column;align-items:center;height:80px;width:100%}.connector-line{width:2px;background:#0000001a;flex:1}.connector-icon{width:24px;height:24px;border-radius:50%;background:#fff;border:1px solid var(--mac-border);color:#000;display:flex;align-items:center;justify-content:center;margin:4px 0;flex-shrink:0;box-shadow:0 0 8px var(--accent)}.connector-icon svg{width:14px;height:14px}@media (max-width: 768px){.work-stack{padding:0 16px}}.work-card-wrapper{width:100%}.work-card-content{display:flex;flex-direction:column;height:100%;padding:4px}.work-header{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid rgba(0,0,0,.05)}.header-left{flex:1}.header-right{flex-shrink:0}.company-name{margin:0 0 4px;font-size:20px;font-family:var(--font-primary);font-weight:700;color:var(--text-primary)}.role-text{font-size:16px;color:var(--text-secondary);font-weight:500}.location-text{display:block;margin-top:4px;font-size:13px;color:var(--text-tertiary);font-style:italic}.period-grid{display:grid;grid-template-columns:max-content max-content;column-gap:8px;row-gap:2px;font-family:var(--font-code);font-size:13px;color:var(--text-tertiary);line-height:1.4}.period-label{text-align:right;color:var(--text-tertiary);opacity:.7}.period-value{text-align:left;color:var(--text-secondary)}.description-area p{margin:0;font-size:14px;color:var(--text-secondary);line-height:1.6}.work-highlights{margin:12px 0 0;padding-left:20px;list-style-type:disc}.work-highlights li{font-size:14px;color:var(--text-secondary);line-height:1.6;margin-bottom:6px}.work-highlights li:last-child{margin-bottom:0}.work-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}.work-link-button{display:inline-block;padding:6px 12px;border:1px solid var(--mac-border);border-radius:6px;background:#fff;color:var(--text-primary);font-family:var(--font-primary);font-size:13px;text-decoration:none;cursor:pointer;box-shadow:0 1px 2px #0000000d;transition:background .2s ease}.work-link-button:hover{background:#f5f5f5}@media (prefers-color-scheme: dark){.period-badge{background-color:#333;color:#ccc}}.work-card{height:100%;transition:transform .2s ease,box-shadow .2s ease}.app-main{padding:80px 20px 40px;display:flex;flex-direction:column;align-items:center;min-height:100vh;width:100%;box-sizing:border-box}.path-title-wrapper{width:100%;max-width:600px;padding-bottom:20px}.view-container{width:100%;max-width:1200px}.view-container-narrow{width:100%;max-width:900px}.admin-container{width:100%;max-width:1200px;flex:1;padding-bottom:20px;display:flex;flex-direction:column;overflow:visible;box-sizing:border-box}:root{--bg-primary: #fdfdfd;--bg-grid: #e5e5e5;--accent: #02eeaa;--text-primary: #111111;--text-secondary: #666666;--space-sm: 8px;--space-md: 16px;--space-lg: 24px;--mac-bg: #ffffff;--mac-border: #d1d1d1;--mac-shadow: 0px 20px 40px rgba(0, 0, 0, .1);--mac-close: #ff5f56;--mac-min: #ffbd2e;--mac-max: #27c93f;--font-primary: "Quicksand", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--font-code: "JetBrains Mono", "Fira Code", "Consolas", "Monaco", "Courier New", monospace}body{margin:0;padding:0;background-color:var(--bg-primary);font-family:var(--font-primary);color:var(--text-primary);overflow-x:hidden;min-height:100vh;width:100%}#root{width:100%;height:100%}