:root{--font-primary:"Inter", "Noto Sans JP", -apple-system, BlinkMacSystemFont, sans-serif;--font-sans:var(--font-primary);--font-serif:"Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", Georgia, serif;--font-mono:"JetBrains Mono", "Fira Code", monospace;--font-xs:.75rem;--font-sm:.875rem;--font-base:1rem;--font-lg:1rem;--font-xl:1.125rem;--font-2xl:1.5rem;--font-3xl:2rem;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--font-weight-extrabold:800;--color-bg-primary:#edf4f8;--color-bg-secondary:#e8f0f6;--color-bg-tertiary:#d6e2ed;--color-bg-elevated:#fff;--color-bg-canvas:#edf4f8;--color-surface:#f5f8fc;--color-surface-hover:#e8f0ff;--color-surface-active:#e8f0ff;--color-border:#d6e2ed;--color-border-hover:#8da7ba;--color-border-focus:#285ac8;--color-text-primary:#19394b;--color-text-secondary:#526976;--color-text-tertiary:#637783;--color-text-tertiary-strong:#526976;--color-text-inverse:#fff;--color-text-on-accent:#fff;--color-accent:#285ac8;--color-accent-light:#204ba8;--color-accent-dark:#204ba8;--color-accent-glow:#285ac81f;--node-bg:var(--color-bg-elevated);--node-blur:none;--node-border:1px solid var(--color-border);--node-radius:12px;--node-shadow:var(--shadow-sm);--node-shadow-hover:var(--shadow-md);--node-transition:border-color .15s ease, box-shadow .15s ease;--accent-personal:linear-gradient(#285ac8, #285ac8);--accent-social:linear-gradient(90deg, #e68a00, #ffb74d);--accent-period:linear-gradient(90deg, #7c6aff, #b794f6);--thumb-radius:10px;--thumb-size:64px;--canvas-bg:#edf4f8;--toolbar-bg:var(--color-bg-elevated);--toolbar-blur:none;--toolbar-border:1px solid var(--color-border);--toolbar-radius:16px;--menu-bg:var(--color-bg-elevated);--menu-blur:none;--menu-border:1px solid var(--color-border);--menu-radius:12px}:root[data-reduce-transparency=true]{--node-blur:none;--toolbar-blur:none;--menu-blur:none;--node-transition:none;--node-bg:var(--color-bg-elevated)!important;--toolbar-bg:var(--color-bg-elevated)!important;--glass-bg:var(--color-bg-elevated)!important;--glass-strong-bg:var(--color-bg-elevated)!important;--menu-bg:var(--color-bg-elevated)!important;--node-border:1px solid var(--color-border-focus)!important}:root{--color-secondary:#8b6f47;--color-secondary-light:#a88b63;--color-secondary-dark:#6b5535;--color-success:#4ade80;--color-warning:#fbbf24;--color-error:#b42318;--color-recording:#b13d4d;--color-info:#60a5fa;--upload-panel-bg:#0f0f1af2;--upload-panel-border:#ffffff0f;--upload-panel-text-primary:#e2e8f0;--upload-panel-text-secondary:#94a3b8;--upload-panel-text-muted:#64748b;--upload-panel-text-subtle:#475569;--upload-panel-track:#1e293b;--upload-panel-accent:#818cf8;--upload-panel-accent-gradient:linear-gradient(90deg, #6366f1, #8b5cf6);--upload-panel-accent-soft:#6366f121;--upload-panel-progress-gradient:linear-gradient(90deg, #6366f1, #818cf8);--upload-panel-success:#22c55e;--upload-panel-error:#ef4444;--upload-panel-error-soft:#ef444433;--upload-panel-warning:#f59e0b;--color-spring:#f9a8d4;--color-summer:#60a5fa;--color-autumn:#fb923c;--color-winter:#a5b4fc;--gradient-primary:linear-gradient(#285ac8, #285ac8);--gradient-hero:linear-gradient(#edf4f8, #edf4f8);--gradient-card:linear-gradient(#fff, #fff);--shadow-sm:0 1px 2px #3d2e1f14;--shadow-md:0 4px 12px #3d2e1f1a;--shadow-lg:0 8px 32px #3d2e1f1f;--shadow-glow:0 0 24px #8b73551f;--shadow-glow-hover:0 0 40px #8b73552e;--outline-width:2px;--outline-offset:2px;--outline-color:var(--color-accent);--radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-xl:24px;--radius-full:9999px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-10:40px;--space-12:48px;--space-16:64px;--space-20:80px;--space-24:96px;--transition-fast:.15s cubic-bezier(.4, 0, .2, 1);--transition-base:.25s cubic-bezier(.4, 0, .2, 1);--transition-slow:.4s cubic-bezier(.4, 0, .2, 1);--transition-spring:.5s cubic-bezier(.34, 1.56, .64, 1);--z-base:0;--z-dropdown:100;--z-sticky:200;--z-modal-backdrop:300;--z-modal:400;--z-tooltip:500;--z-onboarding:650;--z-toast:700;--safe-area-top:env(safe-area-inset-top,0px);--safe-area-bottom:env(safe-area-inset-bottom,0px);--safe-area-left:env(safe-area-inset-left,0px);--safe-area-right:env(safe-area-inset-right,0px)}:focus-visible{outline:var(--outline-width) solid var(--outline-color);outline-offset:var(--outline-offset)}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overscroll-behavior:none;font-size:16px}body{font-family:var(--font-primary);background-color:var(--color-bg-primary);color:var(--color-text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent;line-height:1.6;overflow-x:hidden}@media (max-width:768px){html,body{overscroll-behavior:auto}}a{color:var(--color-accent-light);transition:color var(--transition-fast);text-decoration:none}a:hover{color:var(--color-accent)}img,video{image-orientation:from-image;max-width:100%;display:block}button{cursor:pointer;font-family:inherit}input,textarea,select{font-family:inherit}.visually-hidden,.skip-link{clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.skip-link:focus{z-index:99999;clip:auto;white-space:normal;background:var(--color-accent);color:#fff;border-radius:var(--radius-md);width:auto;height:auto;margin:0;padding:12px 24px;font-size:.875rem;font-weight:600;text-decoration:none;position:fixed;top:8px;left:8px;overflow:visible;box-shadow:0 4px 12px #0000004d}.glass{background:var(--glass-bg,var(--color-bg-elevated));border:1px solid var(--color-border)}.glass-strong{background:var(--glass-strong-bg,var(--color-bg-elevated));border:1px solid var(--color-border-hover)}.btn{justify-content:center;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-6);border-radius:var(--radius-md);transition:all var(--transition-base);white-space:nowrap;border:none;font-size:.9375rem;font-weight:500;line-height:1;display:inline-flex}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--gradient-primary);color:var(--color-text-on-accent);box-shadow:var(--shadow-sm)}.btn-primary:hover:not(:disabled){box-shadow:var(--shadow-md)}.btn-primary:active:not(:disabled){transform:translateY(0)}.btn-secondary{background:var(--color-surface);color:var(--color-text-primary);border:1px solid var(--color-border)}.btn-secondary:hover:not(:disabled){background:var(--color-surface-hover);border-color:var(--color-border-hover)}.btn-ghost{color:var(--color-text-secondary);background:0 0;border:none}.btn-ghost:hover:not(:disabled){background:var(--color-surface-hover);color:var(--color-text-primary)}.btn-sm{padding:var(--space-2) var(--space-4);border-radius:var(--radius-sm);font-size:.8125rem}.btn-lg{padding:var(--space-4) var(--space-8);border-radius:var(--radius-lg);font-size:1.0625rem}.btn-icon{padding:var(--space-2);border-radius:var(--radius-md);min-width:44px;min-height:44px}.touch-target{justify-content:center;align-items:center;min-width:44px;min-height:44px;display:inline-flex}.input{width:100%;padding:var(--space-3) var(--space-4);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-primary);transition:all var(--transition-fast);outline:none;font-size:.9375rem}.input:hover{border-color:var(--color-border-hover)}.input:focus{border-color:var(--color-border-focus);box-shadow:0 0 0 3px var(--color-accent-glow)}.input::placeholder{color:var(--color-text-tertiary)}select.input{appearance:none;padding-right:var(--space-8);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%237E7062' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");background-position:right 12px center;background-repeat:no-repeat}select.input option{color:#2e2117;background:#fff;padding:8px 12px}select.input option:checked{color:#fff;background:#8b7355}select.input option:hover{background:#f5ede0}.card{background:var(--gradient-card);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-6);transition:all var(--transition-base)}.card:hover{border-color:var(--color-border-hover);box-shadow:var(--shadow-md)}.card-interactive{cursor:pointer}.card-interactive:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}.badge{padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);align-items:center;font-size:.75rem;font-weight:500;line-height:1;display:inline-flex}.badge-accent{background:var(--color-accent-glow);color:var(--color-accent-light);border:1px solid #8b73554d}.badge-spring{color:var(--color-spring);background:#f9a8d426}.badge-summer{color:var(--color-summer);background:#60a5fa26}.badge-autumn{color:var(--color-autumn);background:#fb923c26}.badge-winter{color:var(--color-winter);background:#a5b4fc26}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--color-surface-active);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--color-text-tertiary)}@keyframes fade-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes slide-in-right{0%{opacity:0;transform:translate(16px)}to{opacity:1;transform:translate(0)}}@keyframes slide-in-up{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}@keyframes glow-pulse{0%,to{box-shadow:0 0 20px #8b73551f}50%{box-shadow:0 0 40px #8b73552e}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.animate-fade-in{animation:fade-in .5s var(--transition-base) both}.animate-slide-in-right{animation:slide-in-right .4s var(--transition-base) both}.animate-slide-in-up{animation:slide-in-up .5s var(--transition-base) both}.animate-glow-pulse{animation:3s ease-in-out infinite glow-pulse}.animate-float{animation:6s ease-in-out infinite float}.container{width:100%;max-width:1200px;padding-inline:var(--space-6);margin-inline:auto}.container-wide{max-width:1440px}.container-narrow{max-width:720px}@media (min-width:769px) and (max-width:1024px){:root{--space-6:20px;--space-8:28px}}@media (max-width:768px){:root{--space-6:16px;--space-8:24px;--space-10:32px;--space-12:40px;--space-16:48px;--space-20:56px;--space-24:64px}.btn-lg{padding:var(--space-3) var(--space-6);font-size:1rem}}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.15)}}@keyframes bounceIn{0%{opacity:0;transform:scale(.3)}50%{transform:scale(1.1)}70%{transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}.animate-fade-in,.animate-slide-in-right,.animate-slide-in-up,.animate-glow-pulse{animation:none}@keyframes fade-in{0%,to{opacity:1;transform:none}}@keyframes slide-in-right{0%,to{opacity:1;transform:none}}@keyframes slide-in-up{0%,to{opacity:1;transform:none}}@keyframes glow-pulse{0%,to{box-shadow:none}}@keyframes float{0%,to{transform:none}}@keyframes pulse{0%,to{opacity:1;transform:none}}@keyframes bounceIn{0%,to{opacity:1;transform:none}}@keyframes fadeIn{0%,to{opacity:1;transform:none}}}