*{box-sizing: border-box; margin: 0; padding: 0}body{font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif; color: #333; background-color: #f8f9fa; font-size: 15px; line-height: 1.6; font-weight: 400}.container{max-width: 1200px; margin: 0 auto; background: white; padding: 1.5rem; border-radius: 8px; box-shadow: 0 2px 15px rgba(0,0,0,0.05)}hr{border: none; height: 2px; background: linear-gradient(90deg, transparent, #E7E0EC 20%, #E7E0EC 80%, transparent); margin: 32px 0; opacity: 0.8; border-radius: 1px;}hr.primary{height: 3px; background: linear-gradient(90deg, transparent, #6750A4, transparent); background-size: 200% 100%; animation: divider-pulse 6s ease infinite; margin: 40px 0;}@keyframes divider-pulse{0%{background-position: 100% 50%;} 50%{background-position: 0% 50%;} 100%{background-position: 100% 50%;}}.card-divider{height: 1.5px; background: linear-gradient(to right, transparent 0%, rgba(103, 80, 164, 0.2) 50%, transparent 100%); margin: 24px -1.5rem; position: relative;}.card-divider::after{content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 60px; height: 100%; background: #6750A4; opacity: 0.3;}.vertical-divider{width: 1.5px; height: 100%; background: linear-gradient(to bottom, transparent 0%, #E7E0EC 20%, #E7E0EC 80%, transparent 100%); margin: 0 16px; position: relative;}a{color: #6750A4; text-decoration: none; transition: all 0.2s cubic-bezier(0.4,0,0.2,1); position: relative; display: inline-block; padding: 0 2px; margin: 0 -2px; font-weight: 500; border-radius: 4px}a:hover{background: rgba(103,80,164,0.08); text-decoration: underline; text-decoration-color: #6750A4; text-underline-offset: 4px; text-decoration-thickness: 2px}a:active{background: rgba(103,80,164,0.12); text-decoration-thickness: 3px}a:focus-visible{outline: none; box-shadow: 0 0 0 3px rgba(103,80,164,0.3)}a::after{content: ""; position: absolute; bottom: -2px; left: 0; width: 100%; height: 2px; background: #6750A4; transform: scaleX(0); transition: transform 0.2s cubic-bezier(0.4,0,0.2,1); transform-origin: left}a:hover::after{transform: scaleX(1)}h1,h2,h3,h4,h5,h6{margin: 1em 0 0.8em; color: #2c3e50; line-height: 1.3; font-family: system-ui,-apple-system,sans-serif; font-weight: 600}h1{font-size: 1.9rem; padding-bottom: 0; border-bottom: none; font-weight: 650; font-variation-settings: "wght" 650}h2{font-size: 1.6rem}h3{font-size: 1.3rem}h4{font-size: 1.1rem}h5{font-size: 0.8rem}h6{font-size: 0.85rem; color: #777}p{margin: 0.8em 0; word-wrap: break-word; color: #444}em,i,*[style*="font-style:italic"],*[style*="font-style:italic"]{font-style: italic; font-weight: inherit; color: #5a4d9a}strong,b,*[style*="font-weight:bold"],*[style*="font-weight:bold"]{font-weight: 700 !important; color: #444; position: relative; display: inline-block; padding: 0 0.1em}strong em,em strong,strong i,i strong,b em,em b,b i,i b,*[style*="font-weight:bold"][style*="font-style:italic"],*[style*="font-weight:bold"][style*="font-style:italic"]{font-weight: 700 !important; font-style: italic !important; color: #333; padding: 0 0.1em}strong::after,b::after,*[style*="font-weight:bold"]::after,*[style*="font-weight:bold"]::after{content: ''; position: absolute; bottom: -0.1em; left: 0; width: 100%; height: 2px; opacity: 0.3; transform: scaleX(0.95)}li strong,li b{font-weight: 600}details >:not(summary) strong{font-weight: 650; font-size: 1.05em; color: #1D1B20}ul,ol{margin: 0.8rem 0; padding-left: 1.8rem}li{margin: 0.4rem 0; font-weight: 400}blockquote{border-left: 3px solid #ebf6ff; margin: 1.2rem 0; padding: 0.5rem 1rem; color: #555; background-color: #ebf6ff; font-size: 0.95em; font-weight: 400}.table-container{width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1.5rem 0; border-radius: 12px; position: relative; background: #F3EDF7; border: 1px solid #E8DEF8}table{width: 100%; min-width: 100%; border-collapse: separate; border-spacing: 0; margin: 0; background: white; border-radius: 12px; overflow: hidden}th,td{padding: 14px 16px; text-align: left; border-bottom: 1px solid #E7E0EC; transition: background-color 0.2s ease}th{background-color: #F3EDF7; font-weight: 500; color: #1D1B20; white-space: nowrap; position: sticky; top: 0}tr:hover td{background-color: rgba(103,80,164,0.04)}tr:nth-child(even){background-color: #F9F9F9}tr:last-child td{border-bottom: none}tr:first-child th:first-child{border-top-left-radius: 12px}tr:first-child th:last-child{border-top-right-radius: 12px}tr:last-child td:first-child{border-bottom-left-radius: 12px}tr:last-child td:last-child{border-bottom-right-radius: 12px}.code-wrapper{position: relative; border-radius: 12px; contain: layout; overflow: hidden; padding-top: 40px}pre{background-color: #F3EDF7; padding: 1rem; border-radius: 12px; margin: 0; overflow-x: auto; line-height: 1.6; font-family: 'Roboto Mono',monospace; font-size: 0.875rem; border: 1px solid #E8DEF8; max-height: 400px}code{font-family: 'Roboto Mono',monospace; font-size: 0.875rem; padding: 0.2em 0.4em; border-radius: 6px; line-height: 1.6; background-color: transparent; color: inherit; border: none}details{margin: 1rem 0; border: 1px solid #E7E0EC; border-radius: 12px; padding: 0; overflow: hidden; transition: all 0.2s ease}summary{cursor: pointer; padding: 1rem 3rem 1rem 1.5rem; font-weight: 500; color: #1D1B20; list-style: none; position: relative; background-color: #F8F5FC; transition: background-color 0.2s ease; min-height: 20px; display: flex; align-items: center}summary:hover{background-color: #F3EDF7}details[open] > summary{background-color: #6750A4; color: white}details[open] > summary::after{color: white}summary::-webkit-details-marker{display: none}summary::after{content: 'expand_more'; font-family: 'Material Icons'; font-size: 1.5rem; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); color: #6750A4; transition: transform 0.2s; line-height: 1; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center}details[open] > summary::after{transform: translateY(-50%) rotate(180deg)}details >:not(summary){padding-left: 1.5rem; padding-right: 1.5rem; background-color: #f8f9fa}img{max-width: 100%; height: auto; display: block; margin: 1rem auto; border-radius: 6px; box-sizing: border-box}p img,li img,td img{max-width: 90%; max-height: 300px}:not(p):not(li):not(td) > img{max-width: 80%; max-height: 500px}a img{max-width: 200px}a:hover img{transform: scale(1.05); transition: transform 0.3s ease}.copy-btn{background: #6750A4; color: white; border: none; position: absolute; right: 12px; top: 12px; padding: 8px 12px; border-radius: 16px; cursor: pointer; font-size: 0.75rem; font-weight: 500; transition: all 0.2s; display: flex; align-items: center; gap: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); z-index: 1; margin-right: 16px}.copy-btn:hover{background: #7965AF; box-shadow: 0 2px 4px rgba(0,0,0,0.15)}.copy-btn:active{background: #5A4D9A}.copy-btn::before{content: 'content_copy'; font-family: 'Material Icons'; font-size: 16px}.copy-alert{position: fixed; top: 24px; right: 24px; background: #6750A4; color: white; padding: 12px 24px; border-radius: 16px; display: none; box-shadow: 0 2px 6px rgba(0,0,0,0.2); font-size: 0.875rem; font-weight: 500; z-index: 1000; animation: fadeIn 0.3s ease}@keyframes fadeIn{from{opacity: 0; transform: translateY(-10px)} to{opacity: 1; transform: translateY(0)}}@media (max-width:768px){.container{padding: 1rem; margin: 0 10px} h1{font-size: 1.8rem} h2{font-size: 1.5rem} table{display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch} hr{margin: 24px 0} .card-divider{margin: 20px -1rem}}@media (max-width:480px){.container{padding: 0.5rem} ul,ol{padding-left: 1.5rem} th,td{padding: 10px 12px; font-size: 13px} .copy-btn{padding: 6px 10px; font-size: 0.65rem; right: 8px; top: 8px} hr.primary{margin: 32px 0}}