.tutorial-page{min-height:100vh}.tutorial-page .page-header{background:linear-gradient(135deg,#1a1a2e,#16213e 50%,#0f3460);color:#fff;padding:6rem 0 3rem;text-align:center}.tutorial-page .page-header h1{font-size:2.5rem;font-weight:700;margin-bottom:var(--spacing-md)}.tutorial-page .header-content{margin:0 auto;max-width:800px}.tutorial-page .header-intro{font-size:1.2rem;line-height:1.6;opacity:.9}.tutorial-page section{padding:80px 0}.tutorial-page .alt-bg{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#0f172a99;border:1px solid #94a3b81a}.tutorial-page .section-header{margin-bottom:4rem;text-align:center}.tutorial-page .section-icon{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:50%;color:#fff;display:inline-flex;font-size:2rem;height:80px;justify-content:center;margin-bottom:1.5rem;width:80px}.tutorial-page .section-header h2{color:#f1f5f9;font-size:2.5rem;font-weight:700;margin-bottom:1rem}.tutorial-page .section-header p{color:#94a3b8;font-size:1.1rem;line-height:1.6;margin:0 auto;max-width:600px}.tutorial-page .device-grid{grid-gap:2rem;display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin-bottom:3rem}.tutorial-page .device-card{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#0f172a99;border:2px solid #0000;border-radius:12px;box-shadow:0 4px 6px #0000001a;padding:2rem;transition:transform .3s ease}.tutorial-page .device-card:hover{transform:translateY(-5px)}.tutorial-page .device-card.recommended{border-color:#28a745;position:relative}.tutorial-page .device-card.recommended:before{background:#28a745;border-radius:12px;color:#fff;content:"推薦";font-size:.8rem;font-weight:600;padding:4px 12px;position:absolute;right:20px;top:-10px}.tutorial-page .device-icon{align-items:center;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:50%;color:#fff;display:flex;font-size:1.5rem;height:60px;justify-content:center;margin-bottom:1rem;width:60px}.tutorial-page .device-card h4{color:#f1f5f9;font-size:1.3rem;font-weight:600;margin-bottom:1rem}.tutorial-page .device-pros h5{color:#cbd5e1;font-size:1rem;font-weight:600;margin-bottom:.5rem}.tutorial-page .device-pros ul{list-style:none;margin-bottom:1rem;padding:0}.tutorial-page .device-pros li{color:#94a3b8;padding:.3rem 0 .3rem 1.5rem;position:relative}.tutorial-page .device-pros li:before{color:#28a745;content:"✓";font-weight:700;left:0;position:absolute}.tutorial-page .device-tips{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#0f172a99;border:1px solid #94a3b81a;border-left:4px solid #667eea;border-radius:8px;padding:1rem}.tutorial-page .device-tips strong{color:#cbd5e1}.tutorial-page .device-tips p{color:#94a3b8;font-size:.9rem;margin:.5rem 0 0}.tutorial-page .placement-grid{grid-gap:1.5rem;display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-bottom:2rem}.tutorial-page .placement-item{align-items:flex-start;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#0f172a99;border:2px solid #0000;border-radius:8px;box-shadow:0 2px 4px #0000001a;display:flex;gap:1rem;padding:1.5rem;transition:transform .3s ease}.tutorial-page .placement-item:hover{transform:translateY(-2px)}.tutorial-page .placement-item.recommended-placement{border-color:#28a745;position:relative}.tutorial-page .placement-item.recommended-placement:before{background:#28a745;border-radius:10px;color:#fff;content:"最推薦";font-size:.75rem;font-weight:600;padding:4px 10px;position:absolute;right:15px;top:-10px}.tutorial-page .placement-item .icon-wrapper{color:#667eea;font-size:1.5rem;margin-top:.2rem}.tutorial-page .placement-item h4{color:#f1f5f9;font-size:1.1rem;font-weight:600;margin-bottom:.5rem}.tutorial-page .placement-item p{color:#94a3b8;font-size:.9rem;line-height:1.5;margin:0}.tutorial-page .placement-note{align-items:flex-start;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#2196f326;border:1px solid #2196f333;border-left:4px solid #007bff;border-radius:8px;display:flex;gap:1rem;padding:1.5rem}.tutorial-page .placement-note .icon-wrapper{color:#007bff;font-size:1.2rem;margin-top:.2rem}.tutorial-page .placement-note p{color:#cbd5e1;line-height:1.6;margin:0}.tutorial-page .steps-container{margin:0 auto;max-width:800px}.tutorial-page .step-item{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#0f172a99;border:1px solid #94a3b81a;border-left:4px solid #667eea;border-radius:12px;box-shadow:0 4px 6px #0000001a;margin-bottom:2rem;padding:2rem;transition:transform .3s ease}.tutorial-page .step-item:hover{transform:translateY(-2px)}.tutorial-page .step-content h4{color:#f1f5f9;font-size:1.3rem;font-weight:600;margin-bottom:.5rem}.tutorial-page .step-content p{color:#94a3b8;line-height:1.6;margin-bottom:1rem}.tutorial-page .step-tips{align-items:center;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#0f172a99;border:1px solid #94a3b81a;border-radius:6px;display:flex;font-size:.9rem;gap:.5rem;padding:.8rem}.tutorial-page .step-tips .icon-wrapper{color:#ffc107}.tutorial-page .step-tips span{color:#cbd5e1}.tutorial-page .getting-started-note{align-items:flex-start;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#4caf5026;border:1px solid #4caf5033;border-left:4px solid #28a745;border-radius:8px;display:flex;gap:1rem;margin-top:2rem;padding:1.5rem}.tutorial-page .getting-started-note .icon-wrapper{color:#28a745;font-size:1.3rem;margin-top:.2rem}.tutorial-page .getting-started-note h4{color:#86efac;font-size:1.1rem;font-weight:600;margin-bottom:.5rem}.tutorial-page .getting-started-note p{color:#86efac;font-size:.9rem;line-height:1.6;margin:0}.tutorial-page .task-type-grid{grid-gap:2rem;display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));margin-bottom:3rem}.task-type-card{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#0f172a99;border:1px solid #94a3b81a;border-radius:12px;box-shadow:0 4px 6px #0000001a;padding:2rem;text-align:center;transition:transform .3s ease}.task-type-card:hover{transform:translateY(-5px)}.task-type-icon{align-items:center;background:linear-gradient(135deg,#28a745,#20c997);border-radius:50%;color:#fff;display:inline-flex;font-size:1.5rem;height:60px;justify-content:center;margin-bottom:1rem;width:60px}.task-type-card h4{color:#f1f5f9;font-size:1.3rem;font-weight:600;margin-bottom:1rem}.task-type-card p{color:#94a3b8;line-height:1.6;margin-bottom:1rem}.task-example{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#0f172a99;border:1px solid #94a3b81a;border-left:4px solid #28a745;border-radius:8px;padding:1rem;text-align:left}.task-example strong{color:#cbd5e1}.task-example p{color:#94a3b8;font-size:.9rem;margin:.5rem 0 0}.tips-grid{grid-gap:1.5rem;display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-bottom:3rem}.tip-item{align-items:flex-start;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#0f172a99;border:1px solid #94a3b81a;border-radius:8px;box-shadow:0 2px 4px #0000001a;display:flex;gap:1rem;padding:1.5rem}.tip-item .icon-wrapper{color:#ffc107;font-size:1.3rem;margin-top:.2rem}.tip-item h4{color:#f1f5f9;font-size:1.1rem;font-weight:600;margin-bottom:.5rem}.tip-item p{color:#94a3b8;font-size:.9rem;line-height:1.5;margin:0}.examples-container{grid-gap:2rem;display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}.age-group{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#0f172a99;border:1px solid #94a3b81a;border-radius:12px;box-shadow:0 4px 6px #0000001a;padding:2rem}.age-group h4{border-bottom:2px solid #e9ecef;color:#f1f5f9;font-size:1.2rem;font-weight:600;margin-bottom:1rem;padding-bottom:.5rem;text-align:center}.example-list{list-style:none;margin:0;padding:0}.example-list li{border-bottom:1px solid #f8f9fa;color:#cbd5e1;padding:.5rem 0 .5rem 1.5rem;position:relative}.example-list li:last-child{border-bottom:none}.example-list li:before{color:#667eea;content:"•";font-size:1.2rem;font-weight:700;left:0;position:absolute}.principles-grid{grid-gap:2rem;display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-bottom:3rem}.principle-item{align-items:flex-start;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#0f172a99;border:1px solid #94a3b81a;border-radius:12px;box-shadow:0 4px 6px #0000001a;display:flex;gap:1rem;padding:2rem;transition:transform .3s ease}.principle-item:hover{transform:translateY(-3px)}.principle-item .icon-wrapper{color:#007bff;font-size:1.5rem;margin-top:.2rem}.principle-item h4{color:#f1f5f9;font-size:1.2rem;font-weight:600;margin-bottom:.5rem}.principle-item p{color:#94a3b8;line-height:1.6;margin:0}.interaction-timeline{margin:0 auto;max-width:800px}.interaction-item{align-items:flex-start;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#0f172a99;border:1px solid #94a3b81a;border-radius:12px;box-shadow:0 4px 6px #0000001a;display:flex;gap:2rem;margin-bottom:2.5rem;padding:2rem}.time-badge{align-items:center;background:linear-gradient(135deg,#ff6b6b,#ee5a24);border-radius:20px;color:#fff;display:flex;flex-shrink:0;font-size:.9rem;font-weight:600;height:40px;justify-content:center;min-width:80px}.interaction-content h4{color:#f1f5f9;font-size:1.2rem;font-weight:600;margin-bottom:.5rem}.interaction-content p{color:#94a3b8;line-height:1.6;margin-bottom:1rem}.interaction-tips{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#2196f326;border:1px solid #2196f333;border-left:4px solid #007bff;border-radius:8px;padding:1rem}.interaction-tips strong{color:#cbd5e1;font-weight:600}.criteria-container{margin:0 auto 3rem;max-width:800px}.score-range{align-items:flex-start;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#0f172a99;border:1px solid #94a3b81a;border-radius:12px;box-shadow:0 4px 6px #0000001a;display:flex;gap:2rem;margin-bottom:2rem;padding:2rem}.score-badge{align-items:center;border-radius:25px;color:#fff;display:flex;flex-shrink:0;font-size:.9rem;font-weight:700;height:50px;justify-content:center;min-width:100px}.score-badge.excellent{background:linear-gradient(135deg,#28a745,#20c997)}.score-badge.good{background:linear-gradient(135deg,#007bff,#6610f2)}.score-badge.average{background:linear-gradient(135deg,#ffc107,#fd7e14)}.score-badge.needs-improvement{background:linear-gradient(135deg,#dc3545,#e83e8c)}.score-description h4{color:#f1f5f9;font-size:1.2rem;font-weight:600;margin-bottom:.5rem}.score-description p{color:#94a3b8;line-height:1.6;margin-bottom:1rem}.score-examples{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#0f172a99;border:1px solid #94a3b81a;border-left:4px solid #6c757d;border-radius:8px;padding:1rem}.score-examples strong{color:#cbd5e1}.scoring-tips-grid{grid-gap:2rem;display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}.tip-card{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#0f172a99;border:1px solid #94a3b81a;border-radius:12px;box-shadow:0 4px 6px #0000001a;padding:2rem;text-align:center;transition:transform .3s ease}.tip-card:hover{transform:translateY(-3px)}.tip-card .icon-wrapper{color:#28a745;font-size:2rem;margin-bottom:1rem}.tip-card h4{color:#f1f5f9;font-size:1.1rem;font-weight:600;margin-bottom:.5rem}.tip-card p{color:#94a3b8;font-size:.9rem;line-height:1.6;margin:0}.review-guidelines{margin-top:3rem}.review-content{margin-bottom:2rem}.tutorial-page .review-principle{word-wrap:break-word;align-items:flex-start;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#0f172a99;border:1px solid #94a3b81a;border-radius:8px;box-shadow:0 2px 4px #0000001a;display:flex;gap:1rem;margin-bottom:2rem;overflow-wrap:break-word;padding:1.5rem}.tutorial-page .review-principle .icon-wrapper{color:#007bff;font-size:1.3rem;margin-top:.2rem}.tutorial-page .review-principle h4{color:#f1f5f9;font-size:1.1rem;font-weight:600;margin-bottom:.5rem}.tutorial-page .review-principle p{word-wrap:break-word;color:#94a3b8;font-size:.9rem;line-height:1.6;margin:0;overflow-wrap:break-word}.review-note{align-items:flex-start;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#ffc10726;border:1px solid #ffc1074d;border-left:4px solid #ffc107;border-radius:8px;display:flex;gap:1rem;padding:1.5rem}.review-note .icon-wrapper{color:#fcd34d;font-size:1.2rem;margin-top:.2rem}.review-note p{color:#fcd34d;line-height:1.6;margin:0}.review-note strong{color:#fde047}.faq-list{margin:0 auto;max-width:800px}.faq-item{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#0f172a99;border:1px solid #94a3b81a;border-radius:12px;box-shadow:0 4px 6px #0000001a;margin-bottom:1.5rem;padding:2rem;transition:transform .3s ease}.faq-item:hover{transform:translateY(-2px)}.faq-item h4{color:#f1f5f9;font-size:1.2rem;font-weight:600;margin-bottom:1rem}.faq-item p{color:#94a3b8;line-height:1.7;margin:0}.tutorial-page .cta-section{background:linear-gradient(135deg,#1a1a2e,#16213e 50%,#0f3460);color:#fff;overflow:hidden;position:relative;text-align:center}.tutorial-page .cta-section:before{animation:twinkle 8s ease-in-out infinite;background-image:radial-gradient(2px 2px at 20% 30%,#fff,#0000),radial-gradient(2px 2px at 60% 70%,#fff,#0000),radial-gradient(1px 1px at 50% 50%,#fff,#0000),radial-gradient(1px 1px at 80% 10%,#fff,#0000),radial-gradient(2px 2px at 90% 60%,#fff,#0000);background-size:200% 200%;bottom:0;content:"";left:0;opacity:.5;position:absolute;right:0;top:0;z-index:1}.tutorial-page .cta-content{position:relative;z-index:2}.tutorial-page .cta-content h2{font-size:2.5rem;font-weight:700;margin-bottom:1rem}.tutorial-page .cta-content>p{font-size:1.2rem;margin-bottom:2rem;margin-left:auto;margin-right:auto;max-width:600px;opacity:.9}.tutorial-page .cta-buttons{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;margin-bottom:3rem}.tutorial-page .cta-buttons .primary-button,.tutorial-page .cta-buttons .secondary-button{align-items:center;border-radius:8px;display:inline-flex;font-weight:600;gap:.5rem;padding:12px 24px;text-decoration:none;transition:all .3s ease}.tutorial-page .cta-buttons .primary-button{background:#28a745;color:#fff}.tutorial-page .cta-buttons .primary-button:hover{background:#218838;transform:translateY(-2px)}.tutorial-page .cta-buttons .secondary-button{background:#fff3;border:2px solid #ffffff4d;color:#fff}.tutorial-page .cta-buttons .secondary-button:hover{background:#ffffff4d;transform:translateY(-2px)}.additional-resources h3{font-size:1.5rem;font-weight:600;margin-bottom:1rem;opacity:.9}.resource-links{display:flex;flex-wrap:wrap;gap:2rem;justify-content:center}.resource-links a{align-items:center;color:#fff;display:flex;gap:.5rem;opacity:.8;text-decoration:none;transition:opacity .3s ease}.resource-links a:hover{opacity:1}@media (max-width:768px){.tutorial-page .page-header h1,.tutorial-page .section-header h2{font-size:2rem}.device-grid,.principles-grid,.scoring-tips-grid,.task-type-grid,.tips-grid{grid-template-columns:1fr}.interaction-item,.score-range{flex-direction:column;gap:1rem}.score-badge,.time-badge{align-self:flex-start}.cta-buttons,.resource-links{align-items:center;flex-direction:column}.tutorial-page .review-principle{flex-direction:column;gap:.8rem;padding:1rem}.tutorial-page .review-principle .icon-wrapper{align-self:flex-start;margin-bottom:.5rem}.tutorial-page .review-principle h4{word-wrap:break-word;font-size:1rem;line-height:1.4;overflow-wrap:break-word}.tutorial-page .review-principle p{word-wrap:break-word;font-size:.85rem;-webkit-hyphens:auto;hyphens:auto;line-height:1.5;overflow-wrap:break-word;word-break:break-word}.tutorial-page .placement-item,.tutorial-page .principle-item,.tutorial-page .review-principle,.tutorial-page .step-content,.tutorial-page .tip-item{flex:1 1;min-width:0}.tutorial-page .placement-item p,.tutorial-page .principle-item p,.tutorial-page .review-principle p,.tutorial-page .step-content p,.tutorial-page .tip-item p{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word;word-break:break-word}}@media (max-width:480px){.tutorial-page .placement-item,.tutorial-page .principle-item,.tutorial-page .review-principle,.tutorial-page .step-item,.tutorial-page .tip-item{padding:.8rem}.tutorial-page .placement-item h4,.tutorial-page .principle-item h4,.tutorial-page .review-principle h4,.tutorial-page .tip-item h4{font-size:.95rem;line-height:1.3}.tutorial-page .placement-item p,.tutorial-page .principle-item p,.tutorial-page .review-principle p,.tutorial-page .tip-item p{font-size:.8rem;line-height:1.4}.tutorial-page .placement-item,.tutorial-page .principle-item,.tutorial-page .review-principle,.tutorial-page .tip-item{gap:.6rem}}