@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap";*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,sans-serif;min-height:100vh}.experiment-page{height:100vh;display:flex;flex-direction:column;background:#fff;overflow:hidden}.header{width:100%;height:96px;padding:24px 48px;display:flex;justify-content:space-between;align-items:center;background:#fff;flex-shrink:0}.header{width:100%;height:96px;padding:24px 48px;display:flex;justify-content:space-between;align-items:center;background:#fff}.title-wrapper{display:flex;flex-direction:column;padding:12px 0}.title-container{display:flex;gap:16px;align-items:center}.logo{width:40px;height:40px;border-radius:11px;background:linear-gradient(135deg,#606dff,#a4acff)}.page-title{font-family:Space Grotesk,sans-serif;font-size:36px;font-weight:600;color:#2a241b;margin:0}.tab-bar{width:100%;background:#87c7ff;padding:24px 48px;display:flex;justify-content:space-between;align-items:center;flex-shrink:0}.tabs{display:flex;gap:24px}.tab{padding:12px 32px;border-radius:16px;background:#ffffff1a;font-family:Space Grotesk,sans-serif;font-size:16px;font-weight:400;color:#fff;cursor:pointer;transition:all .2s ease}.tab:hover{background:#fff3}.tab.active{background:#fff;color:#1678ff;font-weight:700;box-shadow:0 4px 4px #ffffff40}.search-box{width:320px;height:48px;background:#fafafa;border-radius:16px;padding:12px 16px;display:flex;align-items:center;gap:12px}.search-icon{width:20px;height:20px;color:#7a7a7a;flex-shrink:0}.search-input{flex:1;border:none;outline:none;background:transparent;font-size:14px;color:#334155}.search-input::placeholder{color:#b0b0b0}.filter-section{width:100%;padding:16px 48px;display:flex;flex-direction:column;gap:8px;position:relative;flex-shrink:0}.version-filter{width:200px;height:48px;background:#fafafa;border:1px solid #e2e8f0;border-radius:8px;padding:12px 16px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 2px 8px #0000000f;cursor:pointer;transition:all .2s ease}.version-filter:hover{box-shadow:0 2px 12px #0000001a}.version-filter-text{font-size:14px;font-weight:500;color:#1678ff}.dropdown-icon{width:16px;height:16px;color:#4f46e5;transition:transform .2s ease}.dropdown-icon.open{transform:rotate(180deg)}.dropdown-menu{position:absolute;top:72px;left:48px;width:200px;background:#fff;border-radius:8px;box-shadow:0 4px 12px #0000001f;overflow:hidden;z-index:100}.dropdown-option{width:100%;height:44px;padding:12px 16px;display:flex;justify-content:space-between;align-items:center;background:#fff;cursor:pointer;transition:background .2s ease}.dropdown-option:hover{background:#f8fafc}.dropdown-option.selected{background:#fff}.dropdown-option-text{font-size:14px;color:#475569}.dropdown-option.selected .dropdown-option-text{font-weight:500;color:#1678ff}.check-icon{width:16px;height:16px;color:#4f46e5}.search-result-info{padding:16px 0;font-size:14px;color:#64748b}.search-result-count{font-weight:600;color:#1678ff}.search-result-keyword{color:#1e293b;font-weight:500}.content-area{flex:1;padding:24px 48px 48px;display:flex;flex-direction:column;gap:32px;background:#f5faff;overflow-y:auto;min-height:0}.grade-section{width:100%;background:#fff;border-radius:20px;padding:28px 32px;box-shadow:0 2px 16px #0000000a;display:flex;flex-direction:column;gap:24px}.grade-header{display:flex;gap:12px;align-items:center}.grade-title{font-family:Outfit,sans-serif;font-size:22px;font-weight:700;margin:0}.grade-count{font-size:16px;color:#64748b}.grade-grid{display:flex;flex-direction:column;gap:16px}.experiment-row{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.experiment-card{height:64px;background:#f8fafc;border-radius:16px;border:1px solid #e2e8f0;padding:20px 24px;display:flex;align-items:center;cursor:pointer;transition:all .2s ease}.experiment-card:hover{background:#f1f5f9;border-color:#cbd5e1;transform:translateY(-2px);box-shadow:0 4px 12px #0000000d}.experiment-card-content{width:100%;display:flex;justify-content:space-between;align-items:center}.experiment-name{font-size:17px;font-weight:500;color:#334155}.card-arrow{width:16px;height:16px;color:#7a7a7a;transform:rotate(-90deg);transition:transform .2s ease}.experiment-card:hover .card-arrow{transform:rotate(-90deg) translate(4px)}@media(max-width:1200px){.experiment-row{flex-direction:column}.experiment-card{width:100%}}@media(max-width:768px){.header{padding:16px 24px}.tab-bar{padding:16px 24px;flex-direction:column;gap:16px}.tabs{flex-wrap:wrap;justify-content:center}.search-box{width:100%}.filter-section{padding:16px 24px}.dropdown-menu{left:24px}.content-area{padding:16px 24px 24px}.grade-section{padding:20px}.page-title{font-size:28px}}.empty-state{flex:1;display:flex;flex-direction:column;gap:32px;justify-content:center;align-items:center;padding:48px}.empty-illustration{width:280px;height:200px;background:#f8fafc;border-radius:24px;position:relative;display:flex;justify-content:center;align-items:center}.empty-search-icon{width:100px;height:100px;color:#e2e8f0}.empty-dot{position:absolute;border-radius:50%}.empty-dot-1{width:16px;height:16px;background:#4f46e5;top:35px;left:55px}.empty-dot-2{width:12px;height:12px;background:#a4acff;top:55px;right:55px}.empty-dot-3{width:8px;height:8px;background:#cbd5e1;bottom:35px;left:65px}.empty-title{font-size:20px;font-weight:600;color:#1e293b;margin:0}.empty-description{font-size:14px;color:#64748b;margin:0}.experiment-detail-page{width:100vw;height:100vh;position:relative;background:#f8fafc;overflow:hidden}.experiment-detail-content{width:100%;height:100%}.experiment-iframe{width:100%;height:100%;border:none}.experiment-placeholder{width:100%;height:100%;display:flex;justify-content:center;align-items:center;font-size:18px;color:#64748b}.back-button{position:fixed;right:32px;bottom:32px;display:flex;align-items:center;justify-content:center;gap:8px;width:56px;height:56px;padding:0;background:#fff;border:1px solid #e2e8f0;border-radius:50%;box-shadow:0 4px 12px #0000001a;cursor:pointer;color:#334155;transition:all .2s ease;z-index:1000}.back-button:hover{background:#f8fafc;box-shadow:0 6px 16px #0000001f;transform:translateY(-2px)}.back-button svg{width:20px;height:20px}.back-button span{display:none}@media(max-width:768px){.back-button{right:16px;bottom:16px;padding:10px 20px}}