*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Arial,sans-serif;background:#eeeeee;color:#2f3344}body{padding:32px 20px}main{max-width:1080px;margin:auto}header{text-align:center;padding:8px 0 20px}header h1{margin:0;color:#535C91;font-size:clamp(44px,7vw,76px);font-weight:700}header p{margin:10px 0 0;color:#6f7487}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:18px}.card{display:flex;flex-direction:column;gap:10px;padding:20px;border-radius:12px;color:#535C91;text-decoration:none;background:var(--card-color,#F5E8DD);box-shadow:0 4px 8px rgba(0,0,0,.08);transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}.card:hover{transform:translateY(-2px);filter:brightness(1.03);box-shadow:0 7px 14px rgba(0,0,0,.13)}.card strong{font-size:1.2rem}.card span{color:#4d5265;line-height:1.35}.card small{color:#73798c}.experiment-page{padding:0;overflow:hidden;background:#0a0e1a}.back{position:fixed;z-index:20;top:18px;left:18px;color:#535C91;text-decoration:none;background:#eeeeeedf;padding:8px 11px;border-radius:9px;box-shadow:0 3px 8px rgba(0,0,0,.16)}#notes-toggle{position:fixed;z-index:21;top:18px;left:90px;width:38px;height:38px;border:none;border-radius:9px;background:#eeeeeedf;color:#535C91;font-size:16px;cursor:pointer;box-shadow:0 3px 8px rgba(0,0,0,.16)}#notes-toggle:hover{background:#ffffff}#experiment-container{position:fixed;inset:0;display:flex}#notes-panel{flex:0 0 360px;max-width:42vw;overflow:auto;background:#eeeeee;color:#2f3344;padding:64px 22px 22px;box-sizing:border-box;transition:flex-basis .22s ease,padding .22s ease}#notes-panel h1,#notes-panel h2,#notes-panel h3{color:#535C91}#notes-content{min-width:300px;line-height:1.55}#notes-content pre{background:#2f3344;color:#eeeeee;padding:12px 14px;border-radius:8px;overflow:auto}#notes-content code{background:#dfe3ea;padding:.15em .4em;border-radius:4px;font-size:.9em}#notes-content pre code{background:none;padding:0}#notes-content img{max-width:100%}#experiment-root{position:relative;flex:1;min-width:0;overflow:hidden}#experiment-container.notes-hidden #notes-panel{flex-basis:0;max-width:0;padding-left:0;padding-right:0;overflow:hidden}#experiment-error{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);max-width:720px;padding:20px;background:#2b1010;color:white;border:1px solid #a44;border-radius:12px;white-space:pre-wrap;z-index:50}@media(max-width:700px){body{padding:22px 14px}.grid{grid-template-columns:1fr}#notes-panel{position:fixed;inset:0;flex-basis:100%;max-width:100%;z-index:19}#experiment-container.notes-hidden #notes-panel{flex-basis:0}}