:root{--color-primary: #d9c0a1;--color-primary-light: #F7DEBF;--color-primary-dark: #BBA28D;--color-secondary: #1976D2;--color-secondary-light: #42A5F5;--color-secondary-dark: #0D47A1;--color-success: #388E3C;--color-error: #D32F2F;--color-warning: #F57C00;--color-info: #1976D2;--color-white: #FFFFFF;--color-gray-50: #FAFAFA;--color-gray-100: #F5F5F5;--color-gray-200: #EEEEEE;--color-gray-300: #E0E0E0;--color-gray-400: #BDBDBD;--color-gray-500: #9E9E9E;--color-gray-600: #757575;--color-gray-700: #616161;--color-gray-800: #424242;--color-gray-900: #212121;--color-black: #000000;--bg-primary: #FEFDF8;--bg-secondary: #FFF8E1;--bg-card: #FFFFFF;--bg-overlay: rgba(0, 0, 0, .5);--font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--font-size-3xl: 1.875rem;--font-size-4xl: 2.25rem;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--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;--radius-xl: 16px;--radius-full: 9999px;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);--transition-fast: .15s ease;--transition-normal: .25s ease;--transition-slow: .35s ease;--border-width: 1px;--border-color: var(--color-gray-300);--z-dropdown: 100;--z-sticky: 200;--z-modal: 300;--z-tooltip: 400}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:var(--font-family);font-size:var(--font-size-base);font-weight:var(--font-weight-normal);line-height:1.6;color:var(--color-gray-900);background-color:var(--bg-primary);min-height:100vh}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}a{color:inherit;text-decoration:none}button{cursor:pointer;background:none;border:none}ul,ol{list-style:none}h1,h2,h3,h4,h5,h6{font-weight:var(--font-weight-bold);line-height:1.3;color:var(--color-gray-900)}h1{font-size:var(--font-size-4xl)}h2{font-size:var(--font-size-3xl)}h3{font-size:var(--font-size-2xl)}h4{font-size:var(--font-size-xl)}h5{font-size:var(--font-size-lg)}h6{font-size:var(--font-size-base)}p{margin-bottom:var(--spacing-md)}.container{width:100%;max-width:1200px;margin:0 auto;padding:0 var(--spacing-md)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}#root{min-height:100vh;display:flex;flex-direction:column}.app{display:flex;flex-direction:column;min-height:100vh}.app-header{background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-dark) 100%);color:var(--color-gray-900);padding:var(--spacing-md) var(--spacing-xl);box-shadow:var(--shadow-md)}.app-header h1{font-size:var(--font-size-2xl);color:var(--color-gray-900);text-align:center}.app-main{flex:1;padding:var(--spacing-xl)}.app-footer{background-color:var(--color-gray-100);padding:var(--spacing-md);text-align:center;color:var(--color-gray-600);font-size:var(--font-size-sm)}.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 24px;font-size:var(--font-size-base);font-weight:var(--font-weight-medium);border-radius:var(--radius-md);transition:all var(--transition-normal);cursor:pointer;border:1px solid transparent}.btn:disabled{opacity:.6;cursor:not-allowed;filter:grayscale(1)}.btn-primary{background-color:var(--color-primary);color:var(--color-gray-900)}.btn-primary:hover:not(:disabled){background-color:var(--color-primary-dark);transform:translateY(-1px);box-shadow:var(--shadow-md)}.btn-secondary{background-color:var(--color-white);color:var(--color-gray-700);border-color:var(--color-gray-300)}.btn-secondary:hover:not(:disabled){background-color:var(--color-gray-50);border-color:var(--color-gray-400)}.stamp-border{position:relative;background:var(--color-white);padding:var(--spacing-lg)}.stamp-border:before{content:"";position:absolute;inset:-8px;background:radial-gradient(circle at 8px 0,transparent 6px,var(--color-primary) 6px,var(--color-primary) 8px,transparent 8px) repeat-x,radial-gradient(circle at 0 8px,transparent 6px,var(--color-primary) 6px,var(--color-primary) 8px,transparent 8px) repeat-y,radial-gradient(circle at 8px 100%,transparent 6px,var(--color-primary) 6px,var(--color-primary) 8px,transparent 8px) repeat-x,radial-gradient(circle at 100% 8px,transparent 6px,var(--color-primary) 6px,var(--color-primary) 8px,transparent 8px) repeat-y;background-size:16px 8px,8px 16px;background-position:0 0,0 0,0 100%,100% 0;z-index:-1}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.animate-fadeIn{animation:fadeIn var(--transition-normal)}.animate-slideUp{animation:slideUp var(--transition-normal)}@keyframes slowRotate{0%{transform:rotateY(0)}to{transform:rotateY(360deg)}}@keyframes flyAway{0%{transform:scale(1) rotateY(0) rotateX(0);opacity:1}to{transform:scale(0) translate(1500px,-1500px) rotateY(720deg) rotateX(60deg);opacity:0}}.animate-slowRotate{animation:slowRotate 3s linear infinite}.animate-flyAway{animation:flyAway .6s ease-in forwards}.scene{perspective:1000px;width:300px;height:216px;margin:0 auto}.card{width:100%;height:100%;position:relative;transition:transform .6s;transform-style:preserve-3d;cursor:pointer}.card.is-flipped{transform:rotateY(180deg)}.card-face{position:absolute;width:100%;height:100%;backface-visibility:hidden;border-radius:var(--radius-md);box-shadow:var(--shadow-md);background-color:var(--color-white)}.card-face-front{transform:rotateY(0)}.card-face-back{transform:rotateY(180deg)}.scene:hover .card:not(.is-flipped){transform:scale(1.05) rotateY(10deg)}.scene:hover .card.is-flipped{transform:rotateY(190deg) scale(1.05)}.scene:hover .card-face{box-shadow:var(--shadow-xl)}.instruction-text{text-align:center;color:var(--color-gray-500);font-size:var(--font-size-sm);margin-top:1rem}@media(max-width:768px){:root{--spacing-xl: 1.5rem;--spacing-2xl: 2rem}h1{font-size:var(--font-size-2xl)}h2{font-size:var(--font-size-xl)}h3{font-size:var(--font-size-lg)}}@keyframes breathe{0%{box-shadow:0 0 #d9c0a166}70%{box-shadow:0 0 0 10px #d9c0a100}to{box-shadow:0 0 #d9c0a100}}.animate-breathe{animation:breathe 2s infinite}.postcard-3d-container{perspective:1000px;transform-style:preserve-3d}.postcard-3d-content{transform-style:preserve-3d;transition:none;will-change:transform}.postcard-3d-content.resetting{transition:transform .5s ease-out}.postcard-glow-bg{position:absolute;inset:-20px;background:radial-gradient(circle at 50% 50%,rgba(217,192,161,.15),transparent 70%);border-radius:30px;filter:blur(20px);z-index:-1;opacity:0;transition:opacity .3s ease}.postcard-3d-container:hover .postcard-glow-bg{opacity:1}