.demo-container{width:100%;min-height:100vh}.demo-container:not(.grid-layout):not(.editorial-layout){height:100vh;overflow:hidden}.grid-layout{display:grid;grid-template-rows:auto 1fr auto;grid-template-columns:1fr;gap:20px;background:#f5f5f5}.grid-header{background:#2c3e50;color:#fff;padding:20px;display:flex;justify-content:space-between;align-items:center}.grid-header h1{font-size:24px;margin:0}.grid-header nav{display:flex;gap:20px}.grid-header nav a{color:#fff;padding:8px 16px;border-radius:4px;transition:background .2s}.grid-header nav a:hover{background:#ffffff1a}.grid-header nav a.active{background:#fff3}.grid-player{width:100%;height:60vh;background:#000;position:relative}.grid-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;padding:20px;max-width:1400px;margin:0 auto}.grid-item{background:#fff;padding:20px;border-radius:8px;box-shadow:0 2px 4px #0000001a}.grid-item h3{margin-bottom:15px;color:#2c3e50}.grid-item ul{list-style:none;padding:0}.grid-item li{padding:8px 0;border-bottom:1px solid #eee}.grid-item li:last-child{border-bottom:none}.thumbnail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.thumbnail{aspect-ratio:16/9;background:#ddd;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:12px;color:#666}.editorial-layout{background:#f8f9fa}.editorial-header{background:#1a1a1a;color:#fff;padding:15px 30px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 2px 4px #0000001a}.logo{font-size:24px;font-weight:700}.editorial-nav{display:flex;gap:25px}.editorial-nav a{color:#aaa;font-size:15px;padding:5px 10px;border-radius:4px;transition:all .2s}.editorial-nav a:hover{color:#fff;background:#ffffff1a}.editorial-nav a.active{color:#fff;background:#ffffff26}.breadcrumb{padding:15px 30px;background:#fff;border-bottom:1px solid #e0e0e0;font-size:14px}.breadcrumb a{color:#007bff}.breadcrumb span{color:#666}.editorial-main{display:grid;grid-template-columns:250px 1fr 300px;gap:30px;max-width:1600px;margin:0 auto;padding:30px}.editorial-sidebar{display:flex;flex-direction:column;gap:20px}.sidebar-section{background:#fff;padding:20px;border-radius:8px;box-shadow:0 1px 3px #0000001a}.sidebar-section h3{margin-bottom:15px;font-size:18px;color:#2c3e50;border-bottom:2px solid #007bff;padding-bottom:8px}.news-item{margin-bottom:15px;padding-bottom:15px;border-bottom:1px solid #eee}.news-item:last-child{border-bottom:none}.news-item strong{display:block;color:#2c3e50;margin-bottom:5px}.news-item p{font-size:14px;color:#666}.trending-list{list-style:none;padding:0}.trending-list li{padding:8px 12px;margin-bottom:8px;background:#f0f7ff;border-radius:20px;color:#007bff;font-size:14px}.stat-item{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid #eee}.stat-item:last-child{border-bottom:none}.stat-label{color:#666;font-size:14px}.stat-value{font-weight:700;color:#2c3e50;font-size:16px}.schedule-table{width:100%;font-size:14px}.schedule-table td{padding:10px 5px;border-bottom:1px solid #eee}.schedule-table tr:last-child td{border-bottom:none}.schedule-table .active-row{background:#f0f7ff;font-weight:700}.ad-section{background:#f5f5f5;border:2px dashed #ddd}.ad-placeholder{padding:40px;text-align:center;color:#999}.editorial-content{background:#fff;padding:40px;border-radius:8px;box-shadow:0 1px 3px #0000001a}.editorial-content h1{font-size:36px;margin-bottom:20px;color:#1a1a1a;line-height:1.2}.article-meta{display:flex;gap:20px;margin-bottom:30px;padding-bottom:20px;border-bottom:1px solid #eee;font-size:14px;color:#666}.category{background:#007bff;color:#fff;padding:2px 10px;border-radius:4px}.embedded-player{width:100%;max-width:800px;aspect-ratio:16/9;margin:30px auto;background:#000;border-radius:8px;overflow:hidden;box-shadow:0 4px 12px #00000026}.article-body{font-size:16px;line-height:1.8;color:#333}.article-body h2{margin-top:40px;margin-bottom:20px;font-size:28px;color:#2c3e50}.article-body p{margin-bottom:20px}.article-body ul{margin:20px 0;padding-left:30px}.article-body li{margin-bottom:10px}.article-body blockquote{margin:30px 0;padding:20px 30px;background:#f8f9fa;border-left:4px solid #007bff;font-style:italic;color:#555}.article-body cite{display:block;margin-top:10px;font-size:14px;font-style:normal;color:#999}.related-articles{margin-top:50px;padding-top:30px;border-top:2px solid #eee}.related-articles h3{margin-bottom:20px;font-size:24px}.article-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px}.article-card{background:#f8f9fa;border-radius:8px;overflow:hidden;transition:transform .2s,box-shadow .2s;cursor:pointer}.article-card:hover{transform:translateY(-4px);box-shadow:0 4px 12px #0000001a}.article-thumbnail{aspect-ratio:16/9;background:#ddd;display:flex;align-items:center;justify-content:center;font-size:32px}.article-card h4{padding:15px 15px 5px;font-size:16px;color:#2c3e50}.article-card p{padding:0 15px 15px;font-size:14px;color:#666}.comments-section{margin-top:50px;padding-top:30px;border-top:2px solid #eee}.comments-section h3{margin-bottom:20px;font-size:24px}.comment{padding:20px;margin-bottom:15px;background:#f8f9fa;border-radius:8px}.comment strong{display:block;margin-bottom:5px;color:#007bff}.comment p{margin:0;color:#333}.editorial-footer{background:#1a1a1a;color:#fff;padding:30px;text-align:center;margin-top:50px}.footer-links{display:flex;justify-content:center;gap:30px;margin-bottom:20px}.footer-links a{color:#aaa;font-size:14px}.footer-links a:hover{color:#fff}.editorial-footer p{color:#666;font-size:14px}@media(max-width:1200px){.editorial-main{grid-template-columns:1fr}.editorial-sidebar,.editorial-content{grid-column:1}}@media(max-width:768px){.grid-content{grid-template-columns:1fr}.grid-header{flex-direction:column;gap:15px;align-items:flex-start}.editorial-header{flex-direction:column;gap:15px}.editorial-nav{flex-wrap:wrap;gap:15px}.embedded-player{max-width:100%}.article-grid{grid-template-columns:1fr}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;line-height:1.6;color:#333}a{text-decoration:none;color:#007bff;transition:color .2s}a:hover{color:#0056b3}#root{width:100%;height:100%}