| @import url('https://cdn.jsdelivr.net/npm/lxgw-wenkai-screen-webfont@1.1.0/style.css');
|
|
|
| @tailwind base;
|
| @tailwind components;
|
| @tailwind utilities;
|
|
|
|
|
| :root {
|
| --bg-primary-rgb: 245, 245, 245;
|
| --bg-secondary-rgb: 238, 238, 238;
|
| --bg-tertiary-rgb: 224, 224, 224;
|
| --text-primary-rgb: 33, 33, 33;
|
| --text-secondary-rgb: 117, 117, 117;
|
| --text-tertiary-rgb: 158, 158, 158;
|
| --accent-rgb: 66, 66, 66;
|
| --accent-hover-rgb: 48, 48, 48;
|
| --border-rgb: 0, 0, 0;
|
| }
|
|
|
|
|
| .dark {
|
| --bg-primary-rgb: 18, 18, 18;
|
| --bg-secondary-rgb: 28, 28, 28;
|
| --bg-tertiary-rgb: 38, 38, 38;
|
| --text-primary-rgb: 245, 245, 245;
|
| --text-secondary-rgb: 189, 189, 189;
|
| --text-tertiary-rgb: 117, 117, 117;
|
| --accent-rgb: 138, 138, 138;
|
| --accent-hover-rgb: 158, 158, 158;
|
| --border-rgb: 255, 255, 255;
|
| }
|
|
|
| body {
|
| font-family: "LXGW WenKai Screen", "LXGW WenKai TC", "LXGW WenKai Lite", "LXGW WenKai", sans-serif;
|
| -webkit-font-smoothing: antialiased;
|
| -moz-osx-font-smoothing: grayscale;
|
| @apply bg-bg-primary text-text-primary transition-colors duration-300;
|
| }
|
|
|
|
|
| select option {
|
| padding: 10px 16px;
|
| background-color: #ffffff;
|
| color: #212121;
|
| }
|
|
|
| select option:hover,
|
| select option:focus {
|
| background-color: #f5f5f5;
|
| }
|
|
|
| select option:checked {
|
| background-color: #424242;
|
| color: #ffffff;
|
| font-weight: 500;
|
| }
|
|
|
|
|
| ::-webkit-scrollbar {
|
| width: 6px;
|
| height: 6px;
|
| }
|
|
|
| ::-webkit-scrollbar-track {
|
| background: transparent;
|
| }
|
|
|
| ::-webkit-scrollbar-thumb {
|
| background: rgba(0, 0, 0, 0.1);
|
| border-radius: 9999px;
|
| }
|
|
|
| .dark ::-webkit-scrollbar-thumb {
|
| background: rgba(255, 255, 255, 0.15);
|
| }
|
|
|
| ::-webkit-scrollbar-thumb:hover {
|
| background: rgba(0, 0, 0, 0.2);
|
| }
|
|
|
| .dark ::-webkit-scrollbar-thumb:hover {
|
| background: rgba(255, 255, 255, 0.25);
|
| }
|
|
|
|
|
| .dark .react-syntax-highlighter {
|
| background: transparent !important;
|
| }
|
|
|
|
|
| @keyframes fade-in {
|
| from { opacity: 0; transform: translateY(8px); }
|
| to { opacity: 1; transform: translateY(0); }
|
| }
|
|
|
| .animate-fade-in {
|
| animation: fade-in 0.3s ease-out;
|
| }
|
|
|
| @keyframes fade-in-soft {
|
| from { opacity: 0; transform: translateY(12px) scale(0.992); }
|
| to { opacity: 1; transform: translateY(0) scale(1); }
|
| }
|
|
|
| .animate-fade-in-soft {
|
| animation: fade-in-soft 0.58s cubic-bezier(0.22, 1, 0.36, 1) forwards;
|
| }
|
|
|
| @keyframes fade-out-soft {
|
| from { opacity: 1; transform: translateY(0) scale(1); }
|
| to { opacity: 0; transform: translateY(12px) scale(0.992); }
|
| }
|
|
|
| .animate-fade-out-soft {
|
| animation: fade-out-soft 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
|
| }
|
|
|
| @keyframes overlay-wash-in {
|
| from { opacity: 0; backdrop-filter: blur(0px); }
|
| to { opacity: 1; backdrop-filter: blur(6px); }
|
| }
|
|
|
| .animate-overlay-wash-in {
|
| animation: overlay-wash-in 0.5s ease-out forwards;
|
| }
|
|
|
| @keyframes paw-stamp {
|
| 0%, 100% { transform: translateY(0) rotate(-6deg) scale(0.96); opacity: 0.26; }
|
| 35% { transform: translateY(7px) rotate(3deg) scale(1.04); opacity: 0.78; }
|
| 60% { transform: translateY(-1px) rotate(-2deg) scale(0.99); opacity: 0.5; }
|
| }
|
|
|
| .problem-paw {
|
| animation: paw-stamp 1.2s ease-in-out infinite;
|
| }
|
|
|
| @keyframes studio-transition-enter {
|
| 0% { opacity: 0; backdrop-filter: blur(0px); }
|
| 100% { opacity: 1; backdrop-filter: blur(12px); }
|
| }
|
|
|
| @keyframes studio-cover-full {
|
| 0% { opacity: 0; transform: scale(1.05); }
|
| 100% { opacity: 1; transform: scale(1); }
|
| }
|
|
|
| @keyframes studio-grid-rise {
|
| 0% { opacity: 0; transform: translateY(20px); }
|
| 100% { opacity: 0.15; transform: translateY(0); }
|
| }
|
|
|
| @keyframes studio-paw-fall {
|
| 0% { opacity: 0; transform: translateY(40px) scale(0.85); filter: blur(8px); }
|
| 100% { opacity: 0.25; transform: translateY(0) scale(1); filter: blur(0px); }
|
| }
|
|
|
| @keyframes studio-line-grow {
|
| 0% { transform: scaleX(0); opacity: 0; }
|
| 100% { transform: scaleX(1); opacity: 0.3; }
|
| }
|
|
|
| @keyframes studio-entrance {
|
| 0% { opacity: 0; transform: scale(0.98); filter: blur(12px); }
|
| 100% { opacity: 1; transform: scale(1); filter: blur(0px); }
|
| }
|
|
|
| @keyframes classic-entrance {
|
| 0% { opacity: 0; transform: scale(1.02); filter: blur(8px); }
|
| 100% { opacity: 1; transform: scale(1); filter: blur(0px); }
|
| }
|
|
|
| .animate-studio-entrance {
|
| animation: studio-entrance 1.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
| }
|
|
|
| .animate-studio-exit {
|
| animation: studio-entrance 1.2s cubic-bezier(0.16, 1, 0.3, 1) reverse forwards;
|
| }
|
|
|
| .animate-classic-entrance {
|
| animation: classic-entrance 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
| }
|
|
|
| .studio-transition-enter {
|
| animation: studio-transition-enter 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
| }
|
|
|
| .studio-transition-exit {
|
| animation: studio-transition-enter 0.8s cubic-bezier(0.16, 1, 0.3, 1) reverse forwards;
|
| }
|
|
|
| .studio-cover-full {
|
| animation: studio-cover-full 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
| }
|
|
|
| .studio-cover-full-exit {
|
| animation: studio-cover-full 0.8s cubic-bezier(0.16, 1, 0.3, 1) reverse forwards;
|
| }
|
|
|
| .studio-transition-grid {
|
| background-image:
|
| linear-gradient(rgba(var(--border-rgb), 0.2) 1px, transparent 1px),
|
| linear-gradient(90deg, rgba(var(--border-rgb), 0.2) 1px, transparent 1px);
|
| background-size: 120px 120px;
|
| mask-image: radial-gradient(circle at center, black, transparent 75%);
|
| animation: studio-grid-rise 2s ease-out forwards;
|
| }
|
|
|
| .studio-paw-print {
|
| opacity: 0;
|
| transform-origin: center;
|
| animation: studio-paw-fall 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
| }
|
|
|
| .studio-paw-print-1 { animation-delay: 0.4s; }
|
| .studio-paw-print-2 { animation-delay: 0.6s; }
|
| .studio-paw-print-3 { animation-delay: 0.8s; }
|
|
|
| .studio-transition-line {
|
| opacity: 0;
|
| animation: studio-line-grow 1.2s cubic-bezier(0.16, 1, 0.3, 1) 1.2s forwards;
|
| }
|
|
|
|
|
| .studio-transition-sweep {
|
| display: none;
|
| }
|
|
|
|
|
| @keyframes blink-cursor {
|
| 0%, 100% { opacity: 1; }
|
| 50% { opacity: 0; }
|
| }
|
|
|
|
|
| @keyframes studio-paw-float {
|
| 0%, 100% { transform: translateY(0) rotate(-3deg); }
|
| 50% { transform: translateY(-3px) rotate(3deg); }
|
| }
|
|
|
| .studio-paw-float {
|
| animation: studio-paw-float 3s ease-in-out infinite;
|
| display: inline-block;
|
| }
|
|
|
| .studio-cursor { |
| animation: blink-cursor 1s step-end infinite; |
| color: rgba(var(--text-secondary-rgb), 0.4); |
| font-family: "SF Mono", "Fira Code", "Cascadia Code", monospace; |
| } |
|
|
| @keyframes studio-dot-bounce { |
| 0%, 80%, 100% { |
| transform: translateY(0) scale(0.9); |
| opacity: 0.28; |
| } |
| 40% { |
| transform: translateY(-4px) scale(1); |
| opacity: 0.88; |
| } |
| } |
|
|
| @keyframes studio-type-caret-blink { |
| 0%, 100% { opacity: 1; } |
| 50% { opacity: 0.18; } |
| } |
|
|
| |
| .studio-terminal { |
| font-family: "SF Mono", "Fira Code", "Cascadia Code", "LXGW WenKai Screen", monospace; |
| } |
|
|
| .studio-terminal ::-webkit-scrollbar-thumb {
|
| background: rgba(255, 255, 255, 0.08);
|
| }
|
|
|
| .studio-terminal ::-webkit-scrollbar-thumb:hover { |
| background: rgba(255, 255, 255, 0.15); |
| } |
|
|
| .studio-thinking-dots { |
| display: inline-flex; |
| align-items: center; |
| gap: 0.35rem; |
| } |
|
|
| .studio-thinking-dots span { |
| width: 0.34rem; |
| height: 0.34rem; |
| border-radius: 9999px; |
| background: rgba(var(--accent-rgb), 0.55); |
| animation: studio-dot-bounce 1.1s ease-in-out infinite; |
| } |
|
|
| .studio-thinking-dots span:nth-child(2) { |
| animation-delay: 0.14s; |
| } |
|
|
| .studio-thinking-dots span:nth-child(3) { |
| animation-delay: 0.28s; |
| } |
|
|
| .studio-type-caret { |
| margin-left: 0.18rem; |
| color: rgba(var(--accent-rgb), 0.62); |
| animation: studio-type-caret-blink 0.9s step-end infinite; |
| } |
|
|
| .canvas-transition-grid { |
| background-image: |
| linear-gradient(rgba(var(--border-rgb), 0.05) 1px, transparent 1px), |
| linear-gradient(90deg, rgba(var(--border-rgb), 0.05) 1px, transparent 1px); |
| background-size: 64px 64px; |
| mask-image: radial-gradient(circle at center, black, transparent 80%); |
| } |
|
|
| .canvas-paper-grid { |
| background: |
| repeating-linear-gradient( |
| to bottom, |
| transparent 0, |
| transparent 62px, |
| rgba(80, 80, 80, 0.12) 62px, |
| rgba(80, 80, 80, 0.12) 63px, |
| transparent 63px, |
| transparent 124px |
| ), |
| repeating-linear-gradient( |
| to right, |
| transparent 0, |
| transparent 70px, |
| rgba(100, 100, 100, 0.08) 70px, |
| rgba(100, 100, 100, 0.08) 71px, |
| transparent 71px, |
| transparent 142px |
| ); |
| } |
|
|
