:root{--color-bg: #f7f4ef;--color-bg-card: #ffffff;--color-bg-subtle: #f0ece4;--color-accent: #d97757;--color-accent-dark: #c4623f;--color-accent-muted: rgba(217, 119, 87, .12);--color-text: #1a1a18;--color-text-muted: #6b6860;--color-border: #e4dfd6;--color-border-strong:#cec8be;--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;--text-xs: clamp(.75rem, .7rem + .25vw, .875rem);--text-sm: clamp(.875rem, .82rem + .28vw, 1rem);--text-base: clamp(1rem, .95rem + .25vw, 1.125rem);--text-lg: clamp(1.125rem, 1rem + .6vw, 1.375rem);--text-xl: clamp(1.25rem, 1.1rem + .75vw, 1.75rem);--text-2xl: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);--text-3xl: clamp(2rem, 1.5rem + 2.5vw, 3.25rem);--text-hero: clamp(2.5rem, 1.8rem + 3.5vw, 4.5rem);--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-6: 1.5rem;--space-8: 2rem;--space-12: 3rem;--space-16: 4rem;--space-24: 6rem;--max-width: 1100px;--radius-sm: 6px;--radius-md: 12px;--radius-lg: 18px;--shadow-card: 0 1px 3px rgba(26,26,24,.06), 0 4px 12px rgba(26,26,24,.04);--shadow-hover:0 4px 16px rgba(26,26,24,.1)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:var(--font-sans);font-size:var(--text-base);line-height:1.65;color:var(--color-text);background-color:var(--color-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}img,svg{display:block;max-width:100%}.container{width:100%;max-width:var(--max-width);margin-inline:auto;padding-inline:var(--space-6)}.section{padding-block:var(--space-24)}.section--alt{background-color:var(--color-bg-subtle)}.label{font-size:var(--text-xs);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--color-accent)}.section-title{font-size:var(--text-2xl);font-weight:700;line-height:1.2;color:var(--color-text);margin-block:var(--space-3) var(--space-4)}.section-subtitle{font-size:var(--text-lg);color:var(--color-text-muted);max-width:58ch;line-height:1.6}.card{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-6);box-shadow:var(--shadow-card);transition:box-shadow .2s ease,transform .2s ease}.card:hover{box-shadow:var(--shadow-hover);transform:translateY(-2px)}.badge{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-1) var(--space-3);background:var(--color-accent-muted);color:var(--color-accent-dark);border-radius:999px;font-size:var(--text-xs);font-weight:600;letter-spacing:.04em}.divider{width:40px;height:3px;background:var(--color-accent);border-radius:2px;margin-block:var(--space-4)}.site-header{position:sticky;top:0;z-index:100;background:#f7f4efe0;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--color-border)}.site-header__inner{display:flex;align-items:center;justify-content:space-between;height:64px}.site-header__wordmark{display:flex;align-items:baseline;gap:var(--space-2);text-decoration:none;color:var(--color-text)}.site-header__course{font-size:var(--text-lg);font-weight:700;letter-spacing:-.02em}.site-header__year{font-size:var(--text-sm);color:var(--color-text-muted)}.site-header__nav{display:flex;align-items:center;gap:var(--space-6)}.site-header__link{font-size:var(--text-sm);color:var(--color-text-muted);text-decoration:none;transition:color .15s ease}.site-header__link:hover{color:var(--color-accent)}.hero{border-bottom:1px solid var(--color-border);padding-block:var(--space-24) var(--space-16)}.hero__title{font-size:var(--text-hero);font-weight:800;line-height:1.1;letter-spacing:-.03em;margin-block:0 var(--space-6)}.hero__title--accent{color:var(--color-accent)}.hero__subtitle{font-size:var(--text-xl);color:var(--color-text-muted);max-width:52ch;line-height:1.55;margin-bottom:var(--space-8)}.hero__meta{display:flex;gap:var(--space-3);flex-wrap:wrap}.section-header{max-width:65ch;margin-bottom:var(--space-12)}.sensor-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--space-6);margin-bottom:var(--space-12)}.sensor-card__icon{width:2.5rem;height:2.5rem;display:flex;align-items:center;color:var(--color-text-muted);margin-bottom:var(--space-4)}.sensor-card__name{font-size:var(--text-xl);font-weight:700;margin-bottom:var(--space-1)}.sensor-card__type{font-size:var(--text-xs);color:var(--color-text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--space-4)}.sensor-card__row{display:flex;flex-direction:column;gap:var(--space-1);margin-bottom:var(--space-4);font-size:var(--text-sm)}.sensor-card__row-label{font-size:var(--text-xs);font-weight:600;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em}.sensor-card__weakness{display:flex;gap:var(--space-2);align-items:flex-start;padding:var(--space-3);background:#d9775712;border-left:3px solid var(--color-accent);border-radius:0 var(--radius-sm) var(--radius-sm) 0;font-size:var(--text-sm);color:var(--color-text-muted)}.sensor-card__weakness-icon{color:var(--color-accent);flex-shrink:0;display:flex;align-items:center;margin-top:2px}.callout{background:var(--color-accent-muted);border:1px solid rgba(217,119,87,.25);border-radius:var(--radius-md);padding:var(--space-6) var(--space-8)}.callout__text{font-size:var(--text-lg);line-height:1.6;color:var(--color-text)}.callout__highlight{color:var(--color-accent-dark);font-weight:700}.mcu-intro-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--space-6);margin-bottom:var(--space-12)}.mcu-card__badge{display:inline-block;font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:.07em;padding:2px var(--space-3);border-radius:999px;margin-bottom:var(--space-4);background:var(--color-accent-muted);color:var(--color-accent-dark)}.mcu-card__title{font-size:var(--text-2xl);font-weight:800;letter-spacing:-.03em;margin-bottom:var(--space-1)}.mcu-card__subtitle{font-size:var(--text-xs);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:var(--space-4)}.mcu-card__features{list-style:none;display:flex;flex-direction:column;gap:var(--space-2)}.mcu-card__features li{font-size:var(--text-sm);padding-left:var(--space-4);position:relative;color:var(--color-text-muted)}.mcu-card__features li:before{content:"—";position:absolute;left:0;color:var(--color-accent)}.compare-block{margin-bottom:var(--space-12)}.compare-block__title{font-size:var(--text-xl);font-weight:700;margin-bottom:var(--space-6)}.compare-table-wrap{overflow-x:auto;border-radius:var(--radius-md);border:1px solid var(--color-border)}.compare-table{width:100%;border-collapse:collapse;background:var(--color-bg-card);font-size:var(--text-sm)}.compare-table thead{background:var(--color-bg-subtle)}.compare-table th{padding:var(--space-4) var(--space-6);text-align:left;font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--color-text-muted);border-bottom:1px solid var(--color-border)}.compare-table td{padding:var(--space-4) var(--space-6);border-bottom:1px solid var(--color-border);vertical-align:top;line-height:1.5}.compare-table tbody tr:last-child td{border-bottom:none}.compare-table tbody tr:hover{background:var(--color-bg-subtle)}.compare-table__dimension{font-weight:600;color:var(--color-text)}.compare-table__winner{color:var(--color-accent-dark);font-weight:600}.pipeline-block{margin-bottom:var(--space-12)}.pipeline-block__title{font-size:var(--text-xl);font-weight:700;margin-bottom:var(--space-6)}.pipeline{display:flex;align-items:center;gap:var(--space-4);overflow-x:auto;padding-bottom:var(--space-4);flex-wrap:wrap}.pipeline__node{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-4) var(--space-6);min-width:130px;text-align:center;flex-shrink:0;transition:box-shadow .2s ease}.pipeline__node:hover{box-shadow:var(--shadow-hover)}.pipeline__node--esp32{border-color:var(--color-accent)}.pipeline__node--mqtt{border-color:var(--color-border-strong)}.pipeline__icon{width:1.75rem;height:1.75rem;display:flex;align-items:center;justify-content:center;color:var(--color-text-muted)}.pipeline__label{font-size:var(--text-sm);font-weight:700}.pipeline__desc{font-size:var(--text-xs);color:var(--color-text-muted);line-height:1.4}.pipeline__arrow{font-size:var(--text-xl);color:var(--color-accent);font-weight:700;flex-shrink:0}.board-viewer{width:100%;height:180px;border-radius:var(--radius-sm);overflow:hidden;margin-bottom:var(--space-4);background:#1a1e2a}.board-viewer__placeholder{width:100%;height:180px;border-radius:var(--radius-sm);background:var(--color-bg-subtle);margin-bottom:var(--space-4)}.gpio-block{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-8)}.gpio-block__title{font-size:var(--text-xl);font-weight:700;margin-bottom:var(--space-4)}.gpio-block__body{font-size:var(--text-base);color:var(--color-text-muted);line-height:1.7;margin-bottom:var(--space-4)}.three-wire{display:flex;flex-direction:column;gap:var(--space-4);margin:var(--space-6) 0;padding-left:var(--space-4)}.three-wire__item{display:flex;align-items:flex-start;gap:var(--space-4)}.three-wire__dot{width:14px;height:14px;border-radius:50%;flex-shrink:0;margin-top:5px}.three-wire__name{font-size:var(--text-base);display:block;margin-bottom:var(--space-1)}.three-wire__desc{font-size:var(--text-sm);color:var(--color-text-muted)}.gpio-block__footer{font-size:var(--text-base);line-height:1.7;padding-top:var(--space-4);border-top:1px solid var(--color-border);color:var(--color-text)}.site-footer{border-top:1px solid var(--color-border);background:var(--color-bg-subtle);padding-block:var(--space-12)}.site-footer__inner{display:flex;flex-direction:column;gap:var(--space-3)}.site-footer__brand{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}.site-footer__name{font-weight:700;font-size:var(--text-base)}.site-footer__divider{color:var(--color-border-strong)}.site-footer__week{font-size:var(--text-sm);color:var(--color-text-muted)}.site-footer__copy{font-size:var(--text-xs);color:var(--color-text-muted)}@media(max-width:640px){.site-header__nav .site-header__link{display:none}.pipeline{flex-direction:column;align-items:stretch}.pipeline__arrow{transform:rotate(90deg);align-self:center}.pipeline__node{min-width:unset;width:100%}}