:root {
    --color-aws-dark: #232F3E;
    --color-aws-orange: #dc7600;
    --color-aws-orange-original: #FF9900;
    --color-aws-orange-hover: #EC7211;
    --color-text-primary: #374151;
    --color-text-secondary: #6B7280;
    --color-text-tertiary: #6f7682;
    --color-text-white: #FFFFFF;
    --color-bg-light: #F9FAFB;
    --color-bg-white: #FFFFFF;
    --color-bg-gradient-start: #232F3E;
    --color-bg-gradient-end: #374151;
    --color-border: #909296;
    --color-border-light: #E5E7EB;
    --color-success: #10B981;
    --color-warning: #F59E0B;
    --color-error: #EF4444;
    --color-info: #3B82F6;
    --spacing-xs: 5px;
    --spacing-sm: 10px;
    --spacing-md: 15px;
    --spacing-base: 20px;
    --spacing-lg: 25px;
    --spacing-xl: 30px;
    --spacing-2xl: 40px;
    --spacing-3xl: 60px;
    --spacing-4xl: 80px;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-base: 10px;
    --radius-lg: 15px;
    --radius-xl: 20px;
    --radius-full: 50%;
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.1);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
    --shadow-lg: 0 10px 40px rgba(0,0,0,0.2);
    --shadow-orange: 0 4px 12px rgba(255,153,0,0.4);
    --shadow-orange-hover: 0 6px 20px rgba(255,153,0,0.6);
    --header-height: 60px;
    --container-max-width: 1200px;
    --z-scroll-top: 1000;
    --z-progress-bar: 1001;
    --z-header: 1002;
    --transition-base: 0.3s ease;
}

/* Container */
.container{max-width:var(--container-max-width);margin:0 auto;padding:var(--spacing-2xl);background:var(--color-bg-white);border-radius:16px;box-shadow:var(--shadow-lg)}

/* Hero */
.hero{background:linear-gradient(135deg,#232F3E 0%,#37475A 50%,#485769 100%);color:#fff;padding:var(--spacing-3xl) var(--spacing-2xl);border-radius:var(--radius-xl);margin-bottom:var(--spacing-2xl);position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:-50%;right:-20%;width:500px;height:500px;background:radial-gradient(circle,rgba(255,153,0,.15),transparent 70%);border-radius:var(--radius-full)}
.hero-badge{display:inline-block;background:rgba(255,153,0,.2);color:var(--color-aws-orange-original);padding:6px 16px;border-radius:20px;font-size:.85em;font-weight:var(--font-weight-semibold);margin-bottom:var(--spacing-md);border:1px solid rgba(255,153,0,.3)}
.hero h1{font-size:2.2em;font-weight:var(--font-weight-bold);margin:0 0 var(--spacing-md);color:#fff;line-height:var(--line-height-tight);position:relative}
.hero-subtitle{font-size:1.05em;color:rgba(255,255,255,.85);margin-bottom:var(--spacing-xl);line-height:var(--line-height-relaxed)}
.takeaway-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--spacing-md);position:relative}
.takeaway-card{background:rgba(255,255,255,.1);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-base);padding:var(--spacing-md) var(--spacing-base);display:flex;align-items:flex-start;gap:var(--spacing-sm)}
.takeaway-icon{font-size:1.4em;flex-shrink:0;margin-top:2px}
.takeaway-text{font-size:.88em;line-height:var(--line-height-normal);color:rgba(255,255,255,.95)}
.takeaway-text strong{color:var(--color-aws-orange-original)}

/* TOC */
.toc{background:#fff;border-radius:var(--radius-lg);padding:var(--spacing-xl);margin-bottom:var(--spacing-2xl);box-shadow:var(--shadow-sm);border:1px solid var(--color-border-light)}
.toc-title{font-size:1.1em;font-weight:var(--font-weight-bold);margin-bottom:var(--spacing-md);display:flex;align-items:center;gap:var(--spacing-sm)}
.toc-list{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--spacing-xs) var(--spacing-xl);list-style:none;padding:0;margin:0}
.toc-list li{padding:var(--spacing-xs) 0}
.toc-list a{color:var(--color-text-secondary);text-decoration:none;font-size:.9em;transition:color var(--transition-base);display:flex;align-items:center;gap:6px}
.toc-list a:hover{color:var(--color-aws-orange)}
.toc-number{color:var(--color-aws-orange);font-weight:var(--font-weight-bold);font-size:.85em;min-width:28px}

/* Section */
.section{margin-bottom:var(--spacing-2xl);padding:var(--spacing-xl);background:var(--color-bg-light);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
.section-title{font-size:1.6em;font-weight:var(--font-weight-bold);margin:0 0 var(--spacing-lg);padding-bottom:var(--spacing-sm);border-bottom:3px solid var(--color-aws-orange);display:flex;align-items:center;gap:var(--spacing-sm)}

/* SVG container */
.svg-container{width:100%;overflow-x:auto;margin:var(--spacing-base) 0}
.svg-container svg{display:block;margin:0 auto;max-width:100%;height:auto}

/* Analogy */
.analogy-intro{background:linear-gradient(135deg,#FFF7ED,#FFFBF5);border:2px solid #FDBA74;border-radius:var(--radius-lg);padding:var(--spacing-xl);margin-bottom:var(--spacing-xl);text-align:center}
.analogy-intro-title{font-size:1.3em;font-weight:var(--font-weight-bold);color:var(--color-aws-orange);margin-bottom:var(--spacing-sm)}
.analogy-intro-text{font-size:1em;color:var(--color-text-primary);line-height:var(--line-height-relaxed)}

/* Table */
.analogy-table{width:100%;border-collapse:collapse;font-size:.95em}
.analogy-table th{background:var(--color-aws-dark);color:#fff;padding:var(--spacing-md) var(--spacing-base);text-align:left;font-weight:var(--font-weight-semibold)}
.analogy-table th:first-child{border-radius:var(--radius-md) 0 0 0}
.analogy-table th:last-child{border-radius:0 var(--radius-md) 0 0}
.analogy-table td{padding:var(--spacing-md) var(--spacing-base);border-bottom:1px solid var(--color-border-light);vertical-align:top}
.analogy-table tr:nth-child(even){background:rgba(249,250,251,.5)}
.analogy-table tr:hover{background:rgba(255,153,0,.05)}

/* Cards */
.card-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--spacing-base)}
.card-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--spacing-base)}
.info-card{background:#fff;border-radius:var(--radius-base);padding:var(--spacing-base);border-left:4px solid var(--color-aws-orange);box-shadow:var(--shadow-xs);transition:all var(--transition-base)}
.info-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.info-card-header{display:flex;align-items:center;gap:var(--spacing-sm);margin-bottom:var(--spacing-sm)}
.info-card-icon{font-size:1.5em}
.info-card-title{font-size:1.05em;font-weight:var(--font-weight-bold)}
.info-card-body{font-size:.9em;color:var(--color-text-secondary);line-height:var(--line-height-relaxed)}
.info-card-blue{border-left-color:var(--color-info)}
.info-card-green{border-left-color:var(--color-success)}
.info-card-red{border-left-color:var(--color-error)}
.info-card-purple{border-left-color:#8B5CF6}

/* Permission Grid */
.permission-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--spacing-xl)}
.permission-column{background:#fff;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm)}
.permission-header{padding:var(--spacing-base);font-size:1.1em;font-weight:var(--font-weight-bold);text-align:center;color:#fff}
.permission-header-owner{background:linear-gradient(135deg,#1E40AF,#3B82F6)}
.permission-header-shared{background:linear-gradient(135deg,#065F46,#10B981)}
.permission-body{padding:var(--spacing-base)}
.permission-item{display:flex;align-items:flex-start;gap:var(--spacing-sm);padding:var(--spacing-sm) 0;font-size:.9em;border-bottom:1px solid var(--color-border-light)}
.permission-item:last-child{border-bottom:none}
.perm-yes{color:var(--color-success);font-weight:var(--font-weight-bold);flex-shrink:0}
.perm-no{color:var(--color-error);font-weight:var(--font-weight-bold);flex-shrink:0}
.perm-limited{color:var(--color-warning);font-weight:var(--font-weight-bold);flex-shrink:0}

/* Optimization */
.optim-card{background:#fff;border-radius:var(--radius-lg);padding:var(--spacing-xl);box-shadow:var(--shadow-sm);margin-bottom:var(--spacing-base);border-top:4px solid var(--color-aws-orange)}
.optim-header{display:flex;align-items:center;gap:var(--spacing-sm);margin-bottom:var(--spacing-md)}
.optim-number{background:var(--color-aws-orange);color:#fff;width:36px;height:36px;border-radius:var(--radius-full);display:flex;align-items:center;justify-content:center;font-weight:var(--font-weight-bold);flex-shrink:0}
.optim-title{font-size:1.15em;font-weight:var(--font-weight-bold)}
.optim-body{font-size:.9em;color:var(--color-text-secondary);line-height:var(--line-height-relaxed);margin-bottom:var(--spacing-md)}
.optim-points{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--spacing-sm)}
.optim-point{background:var(--color-bg-light);border-radius:var(--radius-sm);padding:var(--spacing-sm) var(--spacing-md);font-size:.85em;display:flex;align-items:center;gap:6px}

/* Code */
.code-tabs{display:flex;gap:0;border-bottom:2px solid var(--color-border-light)}
.code-tab{padding:var(--spacing-sm) var(--spacing-base);background:transparent;border:none;font-size:.9em;font-weight:var(--font-weight-medium);color:var(--color-text-secondary);cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px;transition:all var(--transition-base);font-family:inherit}
.code-tab:hover{color:var(--color-aws-orange)}
.code-tab.active{color:var(--color-aws-orange);border-bottom-color:var(--color-aws-orange);font-weight:var(--font-weight-bold)}
.code-panel{display:none;background:#1E293B;border-radius:0 0 var(--radius-base) var(--radius-base);padding:var(--spacing-base);overflow-x:auto}
.code-panel.active{display:block}
.code-panel pre{margin:0;color:#E2E8F0;font-family:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace;font-size:.82em;line-height:1.6;white-space:pre}
.code-comment{color:#6B7280}
.code-keyword{color:#60A5FA}
.code-string{color:#34D399}
.code-value{color:#FBBF24}

/* BP */
.bp-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--spacing-xl)}
.bp-column{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm)}
.bp-header{padding:var(--spacing-md) var(--spacing-base);font-weight:var(--font-weight-bold);font-size:1.05em;text-align:center;color:#fff}
.bp-header-good{background:linear-gradient(135deg,#065F46,#10B981)}
.bp-header-bad{background:linear-gradient(135deg,#991B1B,#EF4444)}
.bp-body{background:#fff;padding:var(--spacing-base)}
.bp-item{display:flex;align-items:flex-start;gap:var(--spacing-sm);padding:var(--spacing-sm) 0;font-size:.9em;line-height:var(--line-height-normal);border-bottom:1px solid var(--color-border-light)}
.bp-item:last-child{border-bottom:none}
.bp-icon{flex-shrink:0;font-size:1.1em;margin-top:2px}

/* Trouble */
.trouble-card{background:#fff;border-radius:var(--radius-base);padding:var(--spacing-base);margin-bottom:var(--spacing-md);border:1px solid var(--color-border-light)}
.trouble-symptom{font-weight:var(--font-weight-bold);color:var(--color-error);margin-bottom:var(--spacing-xs);display:flex;align-items:center;gap:6px}
.trouble-cause{font-size:.9em;color:var(--color-text-secondary);margin-bottom:var(--spacing-sm);padding-left:var(--spacing-base)}
.trouble-fix{background:#ECFDF5;border-radius:var(--radius-sm);padding:var(--spacing-sm) var(--spacing-md);font-size:.9em;color:#065F46;display:flex;align-items:flex-start;gap:6px}

/* Exam */
.exam-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--spacing-base)}
.exam-card{background:#fff;border-radius:var(--radius-base);padding:var(--spacing-base);border-left:4px solid;box-shadow:var(--shadow-xs)}
.exam-card-ans{border-left-color:#3B82F6}
.exam-card-sap{border-left-color:#8B5CF6}
.exam-badge{display:inline-block;padding:3px 10px;border-radius:12px;font-size:.78em;font-weight:var(--font-weight-bold);margin-bottom:var(--spacing-sm)}
.exam-badge-ans{background:#EFF6FF;color:#1D4ED8}
.exam-badge-sap{background:#F5F3FF;color:#6D28D9}
.exam-card-title{font-weight:var(--font-weight-bold);font-size:.95em;margin-bottom:var(--spacing-xs)}
.exam-card-body{font-size:.88em;color:var(--color-text-secondary);line-height:var(--line-height-normal)}

/* FAQ */
.faq-item{background:#fff;border-radius:var(--radius-base);margin-bottom:var(--spacing-sm);overflow:hidden;box-shadow:var(--shadow-xs);border:1px solid var(--color-border-light)}
.faq-question{width:100%;text-align:left;padding:var(--spacing-md) var(--spacing-base);background:none;border:none;font-size:.95em;font-weight:var(--font-weight-semibold);color:var(--color-text-primary);cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-family:inherit;transition:background var(--transition-base)}
.faq-question:hover{background:var(--color-bg-light)}
.faq-arrow{transition:transform var(--transition-base);font-size:.9em;color:var(--color-aws-orange)}
.faq-item.open .faq-arrow{transform:rotate(180deg)}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .4s ease}
.faq-answer-inner{padding:0 var(--spacing-base) var(--spacing-base);font-size:.9em;color:var(--color-text-secondary);line-height:var(--line-height-relaxed)}

/* Cheat */
.cheat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--spacing-base)}
.cheat-card{background:#fff;border-radius:var(--radius-base);padding:var(--spacing-md);box-shadow:var(--shadow-xs);border-top:3px solid var(--color-aws-orange)}
.cheat-label{font-size:.82em;color:var(--color-text-tertiary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:var(--spacing-xs);font-weight:var(--font-weight-semibold)}
.cheat-value{font-size:.95em;font-weight:var(--font-weight-medium);line-height:var(--line-height-normal)}

/* Glossary */
.glossary-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--spacing-sm)}
.glossary-item{background:#fff;border-radius:var(--radius-sm);padding:var(--spacing-sm) var(--spacing-md);border-left:3px solid var(--color-aws-orange)}
.glossary-term{font-weight:var(--font-weight-bold);font-size:.9em}
.glossary-def{font-size:.85em;color:var(--color-text-secondary)}

/* Callout */
.callout{border-radius:var(--radius-base);padding:var(--spacing-base);margin:var(--spacing-base) 0;display:flex;align-items:flex-start;gap:var(--spacing-sm)}
.callout-info{background:#EFF6FF;border:1px solid #BFDBFE}
.callout-warning{background:#FFFBEB;border:1px solid #FDE68A}
.callout-icon{font-size:1.3em;flex-shrink:0}
.callout-text{font-size:.9em;line-height:var(--line-height-normal)}

/* Focus */
a:focus,button:focus{outline:3px solid var(--color-aws-orange-original);outline-offset:2px}

/* Responsive */
@media(max-width:768px){
    .container{padding:var(--spacing-base)}
    .hero{padding:var(--spacing-xl) var(--spacing-base)}
    .hero h1{font-size:1.6em}
    .takeaway-grid,.card-grid-2,.card-grid-3,.permission-grid,.bp-grid,.exam-grid,.cheat-grid,.glossary-grid,.optim-points,.toc-list{grid-template-columns:1fr}
}