*{margin:0;padding:0;box-sizing:border-box;}body{background:#fef9e7;font-family:'Segoe UI','PingFang SC',Roboto,'Helvetica Neue',sans-serif;display:flex;justify-content:center;align-items:center;min-height:100vh;padding:30px 20px;}.double-border-wrapper{max-width:1300px;width:100%;background:#ffffffdd;border:6px solid #f7d794;outline:4px solid #6ab04c;outline-offset:-8px;border-radius:48px 12px 48px 12px;padding:28px 30px 20px 30px;backdrop-filter:blur(2px);box-shadow:0 20px 40px rgba(0,0,0,0.08),0 8px 16px rgba(0,0,0,0.04);transition:all 0.2s ease;}.inner-card{background:#ffffff;border-radius:32px 8px 32px 8px;padding:30px 35px 20px 35px;box-shadow:inset 0 0 0 2px #f1c40f,0 10px 20px rgba(0,0,0,0.02);}.header-title{display:flex;align-items:baseline;justify-content:space-between;border-bottom:4px dashed #f39c12;padding-bottom:12px;margin-bottom:28px;flex-wrap:wrap;}.header-title h1{font-size:2.4rem;font-weight:700;color:#2c3e50;letter-spacing:2px;background:linear-gradient(145deg,#e67e22,#f1c40f);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:2px 2px 0 #fef9e7;}.header-title .sub{font-size:1.1rem;color:#2d3436;background:#ffeaa7;padding:6px 18px;border-radius:40px;font-weight:600;border:2px solid #fdcb6e;}.table-wrap{overflow-x:auto;margin:25px 0 30px 0;border-radius:24px;background:#fef9e7;padding:6px;}table{width:100%;border-collapse:collapse;background:white;border-radius:20px;font-size:0.95rem;box-shadow:0 4px 12px rgba(0,0,0,0.03);}th{background:#f1c40f;color:#1e272e;font-weight:700;padding:16px 12px;text-align:center;border:2px solid #f39c12;font-size:1rem;}td{padding:14px 12px;border:2px solid #ffeaa7;vertical-align:top;background:#fffef7;}td:first-child{font-weight:600;background:#fef3d4;}.highlight-yellow{background:#fef9e7;}.ratio-list{display:flex;flex-wrap:wrap;gap:20px 30px;margin:20px 0 25px 0;padding:0;list-style:none;}.ratio-list li{background:#fff5d6;border-radius:60px;padding:10px 28px;font-weight:600;border:3px solid #f7d794;color:#2d3436;box-shadow:0 4px 0 #e1b12c;font-size:1.1rem;display:inline-flex;align-items:center;}.ratio-list li span{background:#f39c12;color:white;border-radius:30px;padding:0 14px;margin-left:12px;font-size:0.9rem;}.svg-container{display:flex;flex-wrap:wrap;justify-content:center;gap:30px 40px;margin:30px 0 20px 0;}.svg-card{background:#fcf6e8;border-radius:40px 12px 40px 12px;padding:18px 15px 10px 15px;border:3px solid #f7d794;flex:1 1 280px;min-width:260px;box-shadow:0 6px 0 #e1b12c;}.svg-card h3{text-align:center;color:#1e272e;font-weight:700;margin-bottom:6px;font-size:1.2rem;border-bottom:2px dotted #f1c40f;padding-bottom:6px;}.svg-card svg{display:block;margin:0 auto;width:100%;height:auto;max-width:260px;}.arch-section{margin:30px 0 20px 0;background:#fef7e9;border-radius:40px 8px 40px 8px;padding:20px 15px 10px 15px;border:3px solid #f1c40f;}.arch-section h3{font-size:1.4rem;font-weight:700;color:#2c3e50;margin-bottom:12px;display:flex;align-items:center;gap:10px;}.arch-section h3:before{content:"🧩";font-size:1.8rem;}.arch-svg-wrapper{display:flex;justify-content:center;padding:10px 0;}pre{background:#2d3436;color:#f1c40f;padding:18px 22px;border-radius:28px 6px 28px 6px;font-size:0.9rem;overflow-x:auto;border:3px solid #f39c12;box-shadow:inset 0 0 0 2px #ffeaa7;margin:20px 0 10px 0;white-space:pre-wrap;word-break:break-word;}pre code{font-family:'JetBrains Mono','Fira Code',monospace;color:#fdcb6e;}.footer-note{margin-top:35px;text-align:center;font-size:1rem;font-weight:600;color:#2c3e50;border-top:3px double #f1c40f;padding-top:18px;letter-spacing:2px;background:#fff9e6;border-radius:0 0 20px 20px;}.footer-note span{background:#f1c40f;padding:4px 24px;border-radius:40px;color:#1e272e;}@media (max-width:700px){.double-border-wrapper{padding:15px;}.inner-card{padding:20px 15px;}.header-title h1{font-size:1.8rem;}}