:root{--color-bg: #ffffff;--color-bg-secondary: #f5f5f5;--color-text: #1a1a1a;--color-text-secondary: #555555;--color-text-muted: #888888;--color-accent: #e63946;--color-accent-hover: #d62839;--color-border: #e0e0e0;--color-input-bg: #ffffff;--color-card-bg: #ffffff;--color-card-shadow: rgba(0, 0, 0, .08);--color-success: #27ae60;--color-error: #e74c3c;--color-overlay: rgba(0, 0, 0, .5);--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;--font-mono: "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", monospace;--spacing-xs: .25rem;--spacing-sm: .5rem;--spacing-md: 1rem;--spacing-lg: 1.5rem;--spacing-xl: 2rem;--spacing-2xl: 3rem;--spacing-3xl: 4rem;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--max-width: 1200px;--transition-fast: .15s ease;--transition-base: .25s ease}@media (prefers-color-scheme: dark){:root:not([data-theme=light]){--color-bg: #0f0f0f;--color-bg-secondary: #1a1a1a;--color-text: #ebebeb;--color-text-secondary: #b0b0b0;--color-text-muted: #777777;--color-accent: #e63946;--color-accent-hover: #d62839;--color-border: #2a2a2a;--color-input-bg: #1a1a1a;--color-card-bg: #1a1a1a;--color-card-shadow: rgba(0, 0, 0, .4);--color-success: #2ecc71;--color-error: #e74c3c;--color-overlay: rgba(0, 0, 0, .7)}}:root[data-theme=dark]{--color-bg: #0f0f0f;--color-bg-secondary: #1a1a1a;--color-text: #ebebeb;--color-text-secondary: #b0b0b0;--color-text-muted: #777777;--color-accent: #e63946;--color-accent-hover: #d62839;--color-border: #2a2a2a;--color-input-bg: #1a1a1a;--color-card-bg: #1a1a1a;--color-card-shadow: rgba(0, 0, 0, .4);--color-success: #2ecc71;--color-error: #e74c3c;--color-overlay: rgba(0, 0, 0, .7)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-sans);line-height:1.6;color:var(--color-text);background-color:var(--color-bg);min-height:100vh}a{color:inherit;text-decoration:none}img,video{max-width:100%;display:block}ul,ol{list-style:none}.container{width:100%;max-width:var(--max-width);margin:0 auto;padding-left:var(--spacing-md);padding-right:var(--spacing-md)}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.app{display:flex;flex-direction:column;min-height:100vh}.app>main{flex:1}.site-header{background-color:var(--color-bg);border-bottom:1px solid var(--color-border);position:sticky;top:0;z-index:100}.site-header .container{display:flex;align-items:center;justify-content:space-between;height:56px}.site-header__brand{font-size:1.25rem;font-weight:700;color:var(--color-text);letter-spacing:-.02em;margin-right:auto}.site-header__brand:hover{color:var(--color-accent)}.site-header__toggle{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:none;border:none;cursor:pointer;color:var(--color-text);font-size:1.5rem;padding:0}.site-header__nav{display:none;position:absolute;top:56px;left:0;right:0;background-color:var(--color-bg);border-bottom:1px solid var(--color-border);padding:var(--spacing-md)}.site-header__nav--open{display:block}.site-header__nav-list{display:flex;flex-direction:column;gap:var(--spacing-sm)}.site-header__nav-link{display:block;padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-sm);font-weight:500;color:var(--color-text-secondary);transition:background-color var(--transition-fast),color var(--transition-fast)}.site-header__nav-link:hover,.site-header__nav-link--active{color:var(--color-accent);background-color:var(--color-bg-secondary)}.site-header__github{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid var(--color-border);border-radius:50%;font-size:.75rem;font-weight:700;color:var(--color-text);transition:border-color var(--transition-fast),color var(--transition-fast);flex-shrink:0;margin-right:var(--spacing-sm)}.site-header__github:hover{border-color:var(--color-accent);color:var(--color-accent)}.site-header__theme-toggle{display:flex;align-items:center;justify-content:center;width:36px;height:36px;background:none;border:1px solid var(--color-border);border-radius:50%;cursor:pointer;color:var(--color-text);font-size:1.1rem;padding:0;transition:border-color var(--transition-fast),color var(--transition-fast);flex-shrink:0}.site-header__theme-toggle:hover{border-color:var(--color-accent);color:var(--color-accent)}.site-footer{background-color:#e8e8e8;border-top:1px solid var(--color-border);padding:var(--spacing-lg) 0;text-align:center}.site-footer__text,.site-footer__link{color:#666}.site-footer__text{font-size:.875rem;color:var(--color-text-muted)}.site-footer__link{display:inline-block;margin-top:var(--spacing-xs);font-size:.875rem;color:var(--color-text-muted);transition:color var(--transition-fast)}.site-footer__link:hover{color:var(--color-accent)}.scroll-indicator{position:fixed;left:24px;top:15vh;bottom:15vh;display:flex;flex-direction:column;align-items:center;justify-content:space-between;z-index:80;width:12px}.scroll-indicator__track{position:absolute;top:6px;bottom:6px;width:3px;background-color:var(--color-border);border-radius:2px}.scroll-indicator__track-fill{position:absolute;top:6px;left:50%;transform:translate(-50%);width:3px;background-color:var(--color-accent);border-radius:2px;transition:height .2s ease}.scroll-indicator__notch{position:relative;width:12px;height:12px;border-radius:50%;border:2px solid var(--color-border);background-color:var(--color-bg);cursor:pointer;padding:0;transition:all var(--transition-fast);z-index:1;flex-shrink:0}.scroll-indicator__notch:hover{border-color:var(--color-accent)}.scroll-indicator__notch--active{border-color:var(--color-accent);background-color:var(--color-accent);transform:scale(1.3)}@media (max-width: 1099px){.scroll-indicator{display:none}}.container--narrow{max-width:700px;margin-left:auto;margin-right:auto}.project-grid{display:grid;grid-template-columns:1fr;gap:var(--spacing-lg)}.project-card{display:block;background-color:var(--color-card-bg);border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden;transition:box-shadow var(--transition-base),transform var(--transition-base)}.project-card:hover{box-shadow:0 4px 16px var(--color-card-shadow);transform:translateY(-2px)}.project-card__thumbnail{width:100%;aspect-ratio:16 / 9;object-fit:cover;background-color:var(--color-bg-secondary)}.project-card__placeholder{width:100%;aspect-ratio:16 / 9;background-color:var(--color-bg-secondary);display:flex;align-items:center;justify-content:center;color:var(--color-text-muted);font-size:.875rem}.project-card__body{padding:var(--spacing-md)}.project-card__title{font-size:1.125rem;font-weight:600;margin-bottom:var(--spacing-xs);color:var(--color-text)}.project-card__description{font-size:.875rem;color:var(--color-text-secondary);margin-bottom:var(--spacing-sm);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.project-card__tags{display:flex;flex-wrap:wrap;gap:var(--spacing-xs)}.tag-pill{display:inline-block;padding:2px 8px;font-size:.75rem;font-weight:500;border-radius:9999px;background-color:var(--color-bg-secondary);color:var(--color-text-secondary);border:1px solid var(--color-border)}.tag-filter{display:flex;flex-wrap:wrap;gap:var(--spacing-sm);margin-bottom:var(--spacing-xl)}.tag-filter__btn{padding:var(--spacing-xs) var(--spacing-md);font-size:.875rem;font-weight:500;border:1px solid var(--color-border);border-radius:9999px;background-color:var(--color-bg);color:var(--color-text-secondary);cursor:pointer;transition:all var(--transition-fast)}.tag-filter__btn:hover{border-color:var(--color-accent);color:var(--color-accent)}.tag-filter__btn--active{background-color:var(--color-accent);border-color:var(--color-accent);color:#fff}.media-embed{width:100%;margin-bottom:var(--spacing-md)}.media-embed__video{width:100%;border-radius:var(--radius-md);background-color:#000}.media-embed__gif{width:100%;border-radius:var(--radius-md)}.media-embed__processing{width:100%;aspect-ratio:16 / 9;display:flex;align-items:center;justify-content:center;background-color:var(--color-bg-secondary);border-radius:var(--radius-md);color:var(--color-text-muted);font-size:.875rem}.hero{text-align:center;padding:var(--spacing-3xl) 0;background-color:var(--color-bg-secondary);border-bottom:1px solid var(--color-border)}.hero__name{font-size:2rem;font-weight:700;margin-bottom:var(--spacing-sm);color:var(--color-text)}.hero__tagline{font-size:1.125rem;color:var(--color-text-secondary);margin-bottom:var(--spacing-xl)}.hero__social{display:inline-flex;align-items:center;color:var(--color-text-muted);transition:color var(--transition-fast);margin-bottom:var(--spacing-lg)}.hero__social:hover{color:var(--color-accent)}.hero__cta{display:inline-block;padding:var(--spacing-sm) var(--spacing-xl);background-color:var(--color-accent);color:#fff;border-radius:var(--radius-md);font-weight:600;transition:background-color var(--transition-fast)}.hero__cta:hover{background-color:var(--color-accent-hover)}.about{max-width:700px;margin:0 auto}.about__text{font-size:1.05rem;line-height:1.8;color:var(--color-text-secondary);margin-bottom:var(--spacing-md)}.section{padding:var(--spacing-xl) 0}.section--alt{background-color:var(--color-bg-secondary)}.section--bordered{border-top:1px solid var(--color-border)}.container--narrow{max-width:700px}.section__title{font-size:1.5rem;font-weight:700;margin-bottom:var(--spacing-lg);color:var(--color-text);text-align:center}.section__link{display:inline-block;margin-top:var(--spacing-lg);color:var(--color-accent);font-weight:500}.section__link:hover{text-decoration:underline}.project-detail{max-width:800px;margin:0 auto}.project-detail__back{display:inline-flex;align-items:center;gap:var(--spacing-xs);color:var(--color-text-secondary);font-size:.875rem;margin-bottom:var(--spacing-lg);transition:color var(--transition-fast)}.project-detail__back:hover{color:var(--color-accent)}.project-detail__title{font-size:1.75rem;font-weight:700;margin-bottom:var(--spacing-sm)}.project-detail__description{font-size:1rem;color:var(--color-text-secondary);margin-bottom:var(--spacing-lg)}.project-detail__tags{display:flex;flex-wrap:wrap;gap:var(--spacing-sm);margin-bottom:var(--spacing-xl)}.project-detail__content{line-height:1.8;margin-bottom:var(--spacing-xl)}.project-detail__content h1,.project-detail__content h2,.project-detail__content h3{margin-top:var(--spacing-lg);margin-bottom:var(--spacing-sm)}.project-detail__content p{margin-bottom:var(--spacing-md)}.project-detail__content a{color:var(--color-accent);text-decoration:underline}.project-detail__media{margin-bottom:var(--spacing-xl)}.project-detail__link{display:inline-block;padding:var(--spacing-sm) var(--spacing-lg);background-color:var(--color-accent);color:#fff;border-radius:var(--radius-md);font-weight:600;transition:background-color var(--transition-fast)}.project-detail__link:hover{background-color:var(--color-accent-hover)}.contact-form{max-width:600px;margin:0 auto}.contact-form__title{font-size:1.5rem;font-weight:700;margin-bottom:var(--spacing-lg);text-align:center}.contact-form__group{margin-bottom:var(--spacing-md)}.contact-form__label{display:block;font-size:.875rem;font-weight:500;margin-bottom:var(--spacing-xs);color:var(--color-text)}.contact-form__input,.contact-form__textarea{width:100%;padding:var(--spacing-sm) var(--spacing-md);font-size:1rem;font-family:var(--font-sans);border:1px solid var(--color-border);border-radius:var(--radius-sm);background-color:var(--color-input-bg);color:var(--color-text);transition:border-color var(--transition-fast)}.contact-form__input:focus,.contact-form__textarea:focus{outline:none;border-color:var(--color-accent)}.contact-form__input--error,.contact-form__textarea--error{border-color:var(--color-error)}.contact-form__textarea{min-height:150px;resize:vertical}.contact-form__error{font-size:.75rem;color:var(--color-error);margin-top:var(--spacing-xs)}.contact-form__submit{width:100%;padding:var(--spacing-sm) var(--spacing-lg);font-size:1rem;font-weight:600;border:none;border-radius:var(--radius-md);background-color:var(--color-accent);color:#fff;cursor:pointer;transition:background-color var(--transition-fast)}.contact-form__submit:hover:not(:disabled){background-color:var(--color-accent-hover)}.contact-form__submit:disabled{opacity:.6;cursor:not-allowed}.contact-form__success{padding:var(--spacing-md);background-color:var(--color-bg-secondary);border:1px solid var(--color-success);border-radius:var(--radius-md);color:var(--color-success);text-align:center;font-weight:500}.contact-form__api-error{padding:var(--spacing-md);background-color:var(--color-bg-secondary);border:1px solid var(--color-error);border-radius:var(--radius-md);color:var(--color-error);text-align:center;margin-bottom:var(--spacing-md)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-md);font-size:.875rem;font-weight:500;font-family:var(--font-sans);border:1px solid var(--color-border);border-radius:var(--radius-sm);background-color:var(--color-bg);color:var(--color-text);cursor:pointer;transition:all var(--transition-fast);text-decoration:none}.btn:hover:not(:disabled){background-color:var(--color-bg-secondary)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn--primary{background-color:var(--color-accent);border-color:var(--color-accent);color:#fff}.btn--primary:hover:not(:disabled){background-color:var(--color-accent-hover)}.btn--danger{color:var(--color-error);border-color:var(--color-error)}.btn--danger:hover:not(:disabled){background-color:var(--color-error);color:#fff}.btn--sm{padding:2px var(--spacing-sm);font-size:.75rem}.loading{display:flex;align-items:center;justify-content:center;padding:var(--spacing-3xl);color:var(--color-text-muted)}.error-message{padding:var(--spacing-md);background-color:var(--color-bg-secondary);border:1px solid var(--color-error);border-radius:var(--radius-md);color:var(--color-error);text-align:center}.page-header{margin-bottom:var(--spacing-xl)}.page-header__title{font-size:1.75rem;font-weight:700}.admin-layout{max-width:900px;margin:0 auto}.admin-layout__nav{display:flex;gap:var(--spacing-sm);margin-bottom:var(--spacing-xl);border-bottom:1px solid var(--color-border);padding-bottom:var(--spacing-sm)}.admin-layout__nav-link{padding:var(--spacing-xs) var(--spacing-md);font-weight:500;color:var(--color-text-secondary);border-radius:var(--radius-sm);transition:color var(--transition-fast)}.admin-layout__nav-link:hover,.admin-layout__nav-link--active{color:var(--color-accent)}.admin-layout__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--spacing-lg)}.admin-layout__title{font-size:1.5rem;font-weight:700}.admin-login{max-width:400px;margin:var(--spacing-3xl) auto;padding:var(--spacing-xl);border:1px solid var(--color-border);border-radius:var(--radius-md);background-color:var(--color-card-bg)}.admin-login__title{font-size:1.5rem;font-weight:700;text-align:center;margin-bottom:var(--spacing-xl)}.admin-login__group{margin-bottom:var(--spacing-md)}.admin-login__label{display:block;font-size:.875rem;font-weight:500;margin-bottom:var(--spacing-xs)}.admin-login__input{width:100%;padding:var(--spacing-sm) var(--spacing-md);font-size:1rem;border:1px solid var(--color-border);border-radius:var(--radius-sm);background-color:var(--color-input-bg);color:var(--color-text)}.admin-login__input:focus{outline:none;border-color:var(--color-accent)}.admin-login__submit{width:100%;padding:var(--spacing-sm) var(--spacing-lg);font-size:1rem;font-weight:600;border:none;border-radius:var(--radius-md);background-color:var(--color-accent);color:#fff;cursor:pointer;margin-top:var(--spacing-sm);transition:background-color var(--transition-fast)}.admin-login__submit:hover:not(:disabled){background-color:var(--color-accent-hover)}.admin-login__submit:disabled{opacity:.6;cursor:not-allowed}.admin-login__error{padding:var(--spacing-sm);margin-bottom:var(--spacing-md);background-color:var(--color-bg-secondary);border:1px solid var(--color-error);border-radius:var(--radius-sm);color:var(--color-error);font-size:.875rem;text-align:center}.admin-project-list__item{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-md);border:1px solid var(--color-border);border-radius:var(--radius-sm);margin-bottom:var(--spacing-sm);background-color:var(--color-card-bg)}.admin-project-list__item-title{font-weight:500;flex:1}.admin-project-list__item-actions{display:flex;gap:var(--spacing-sm);flex-shrink:0}.admin-project-form{max-width:700px}.admin-project-form__group{margin-bottom:var(--spacing-md)}.admin-project-form__label{display:block;font-size:.875rem;font-weight:500;margin-bottom:var(--spacing-xs);color:var(--color-text)}.admin-project-form__input,.admin-project-form__textarea,.admin-project-form__select{width:100%;padding:var(--spacing-sm) var(--spacing-md);font-size:1rem;font-family:var(--font-sans);border:1px solid var(--color-border);border-radius:var(--radius-sm);background-color:var(--color-input-bg);color:var(--color-text)}.admin-project-form__input:focus,.admin-project-form__textarea:focus,.admin-project-form__select:focus{outline:none;border-color:var(--color-accent)}.admin-project-form__textarea{min-height:200px;resize:vertical;font-family:var(--font-mono);font-size:.875rem}.admin-project-form__checkbox-label{display:flex;align-items:center;gap:var(--spacing-sm);font-size:.875rem;cursor:pointer}.admin-project-form__checkbox{width:18px;height:18px;cursor:pointer}.admin-project-form__tag-select{display:flex;flex-wrap:wrap;gap:var(--spacing-sm)}.admin-project-form__tag-option{padding:var(--spacing-xs) var(--spacing-md);font-size:.875rem;border:1px solid var(--color-border);border-radius:9999px;cursor:pointer;background-color:var(--color-bg);color:var(--color-text-secondary);transition:all var(--transition-fast)}.admin-project-form__tag-option--selected{background-color:var(--color-accent);border-color:var(--color-accent);color:#fff}.admin-project-form__actions{display:flex;gap:var(--spacing-sm);margin-top:var(--spacing-xl)}.admin-tag-list__create{display:flex;gap:var(--spacing-sm);margin-bottom:var(--spacing-lg);align-items:flex-end}.admin-tag-list__create-input{flex:1;padding:var(--spacing-sm) var(--spacing-md);font-size:.875rem;border:1px solid var(--color-border);border-radius:var(--radius-sm);background-color:var(--color-input-bg);color:var(--color-text)}.admin-tag-list__create-input:focus{outline:none;border-color:var(--color-accent)}.admin-tag-list__color-input{width:40px;height:36px;border:1px solid var(--color-border);border-radius:var(--radius-sm);cursor:pointer;padding:2px;background-color:var(--color-input-bg)}.admin-tag-list__item{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);border:1px solid var(--color-border);border-radius:var(--radius-sm);margin-bottom:var(--spacing-sm);background-color:var(--color-card-bg)}.admin-tag-list__item-color{width:20px;height:20px;border-radius:50%;flex-shrink:0}.admin-tag-list__item-name{flex:1;font-weight:500}.admin-tag-list__item-actions{display:flex;gap:var(--spacing-sm);flex-shrink:0}.admin-tag-list__edit-input{flex:1;padding:var(--spacing-xs) var(--spacing-sm);font-size:.875rem;border:1px solid var(--color-accent);border-radius:var(--radius-sm);background-color:var(--color-input-bg);color:var(--color-text)}.media-uploader{margin-top:var(--spacing-xl);padding:var(--spacing-lg);border:1px dashed var(--color-border);border-radius:var(--radius-md)}.media-uploader__title{font-size:1rem;font-weight:600;margin-bottom:var(--spacing-md)}.media-uploader__row{display:flex;gap:var(--spacing-sm);align-items:flex-end;margin-bottom:var(--spacing-md)}.media-uploader__file-input{flex:1}.media-uploader__alt-input{flex:1;padding:var(--spacing-sm) var(--spacing-md);font-size:.875rem;border:1px solid var(--color-border);border-radius:var(--radius-sm);background-color:var(--color-input-bg);color:var(--color-text)}.media-uploader__progress{width:100%;height:8px;background-color:var(--color-bg-secondary);border-radius:4px;overflow:hidden;margin-bottom:var(--spacing-sm)}.media-uploader__progress-bar{height:100%;background-color:var(--color-accent);border-radius:4px;transition:width var(--transition-base)}.media-uploader__status{font-size:.875rem;color:var(--color-text-muted)}.media-uploader__status--success{color:var(--color-success)}.media-uploader__status--error{color:var(--color-error)}.drag-drop-list{position:relative}.drag-drop-list__saving{position:absolute;top:-28px;right:0;font-size:.75rem;color:var(--color-text-muted)}.drag-drop-item{cursor:grab;-webkit-user-select:none;user-select:none;transition:opacity var(--transition-fast)}.drag-drop-item:active{cursor:grabbing}.drag-drop-item--dragging{opacity:.4}.drag-drop-item--over{border-top:2px solid var(--color-accent)}.drag-drop-item__handle{display:inline-flex;align-items:center;margin-right:var(--spacing-sm);color:var(--color-text-muted);font-size:1rem}@media (min-width: 768px){.project-grid{grid-template-columns:repeat(2,1fr)}.hero__name{font-size:2.5rem}.hero__tagline{font-size:1.25rem}.site-header__toggle{display:none}.site-header__nav{display:block;position:static;border-bottom:none;padding:0;background-color:transparent}.site-header__nav-list{flex-direction:row;gap:var(--spacing-xs)}.media-uploader__row{flex-direction:row}.admin-project-list__item{padding:var(--spacing-md) var(--spacing-lg)}}@media (min-width: 1024px){.project-grid{grid-template-columns:repeat(2,1fr)}.hero{padding:var(--spacing-3xl) 0 var(--spacing-3xl)}.hero__name{font-size:3rem}.container{padding-left:var(--spacing-xl);padding-right:var(--spacing-xl)}.project-detail{max-width:900px}}