.xss-examples{margin-top:1.5rem;padding-top:1.5rem;border-top:1px solid var(--border)}.xss-examples__header{margin-bottom:1rem}.xss-examples__title{font-size:1.125rem;font-weight:600;letter-spacing:-.015em;color:var(--text);margin-bottom:.5rem}.xss-examples__hint{font-size:.875rem;line-height:1.65;color:var(--text-muted)}.xss-examples__hint strong{color:var(--text);font-weight:600}.xss-examples__list{list-style:none;padding:0;margin:0;display:grid;gap:.75rem}@media (min-width: 560px){.xss-examples__list{grid-template-columns:repeat(2,1fr)}}@media (min-width: 900px){.xss-examples__list{grid-template-columns:repeat(3,1fr)}}.xss-examples__card{display:flex;flex-direction:column;padding:1rem;background-color:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-card);gap:.5rem;box-shadow:none}.xss-examples__card-top{display:flex;flex-direction:column;gap:.35rem}.xss-examples__badge{font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);align-self:flex-start}.xss-examples__card-title{font-size:.95rem;font-weight:600;letter-spacing:-.01em;color:var(--text);line-height:1.3}.xss-examples__card-desc{font-size:.8125rem;line-height:1.5;color:var(--text-muted)}.xss-examples__explain{display:flex;flex-direction:column;gap:.65rem;flex:1;font-size:.78rem;line-height:1.5;color:var(--text-muted)}.xss-examples__explain-block{margin:0}.xss-examples__explain-block--risk{padding:.55rem .65rem;border-radius:var(--radius-control);border:1px solid var(--banner-insecure-border);border-left-width:3px;background-color:var(--banner-insecure-bg);color:var(--banner-insecure-text)}.xss-examples__explain-label{display:block;font-size:.65rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin-bottom:.3rem}.xss-examples__explain-block--risk .xss-examples__explain-label{color:var(--banner-insecure-text);opacity:.9}.xss-examples__btn{margin-top:auto;padding:.5rem .75rem;font-size:.85rem;font-weight:500;letter-spacing:.01em;color:var(--text);background-color:var(--contained-bg);border:1px solid var(--contained-border);border-radius:var(--radius-control);cursor:pointer;transition:background-color .18s ease,border-color .18s ease}.xss-examples__btn:hover{background-color:var(--contained-bg-hover);border-color:var(--contained-border-hover)}.xss-examples__btn:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}@media (max-width: 600px){.xss-examples__btn{width:100%}}.todo-app{width:100%}.warning-banner{padding:1.25rem 1.5rem;border-radius:var(--radius-control);margin-bottom:1.75rem;border:1px solid var(--border);box-shadow:none}.warning-banner.insecure{background-color:var(--banner-insecure-bg);border-color:var(--banner-insecure-border);color:var(--banner-insecure-text)}.warning-banner.secure{background-color:var(--banner-secure-bg);border-color:var(--banner-secure-border);color:var(--banner-secure-text)}.warning-banner h2{font-size:1.125rem;font-weight:600;letter-spacing:-.015em;margin-bottom:.5rem;color:inherit}.warning-banner p{font-size:.9375rem;line-height:1.65;opacity:.95}.todo-section{background-color:var(--bg-elevated);padding:1.5rem;border-radius:var(--radius-card);border:1px solid var(--border);box-shadow:none;margin-bottom:2rem}.todo-section h3{font-size:1.35rem;font-weight:600;letter-spacing:-.02em;line-height:1.25;margin-bottom:1rem;color:var(--text)}.input-container{display:flex;gap:.5rem;margin-bottom:1.5rem}.todo-input{flex:1;padding:.5625rem .75rem;font-size:1rem;background-color:var(--bg-input);color:var(--text);border:1px solid var(--border);border-radius:var(--radius-control);transition:border-color .18s ease}.todo-input::placeholder{color:var(--text-muted)}.todo-input:hover{border-color:var(--border-hover)}.todo-input:focus{outline:none;border-color:var(--focus-ring)}.add-button{padding:.5625rem 1.125rem;font-size:1rem;font-weight:500;letter-spacing:.01em;color:var(--text);background-color:var(--contained-bg);border:1px solid var(--contained-border);border-radius:var(--radius-control);cursor:pointer;transition:background-color .18s ease,border-color .18s ease;box-shadow:none}.add-button:hover{background-color:var(--contained-bg-hover);border-color:var(--contained-border-hover)}.add-button:active{transform:scale(.99)}.add-button:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.todo-list{list-style:none;padding:0}.todo-item{padding:1rem;margin-bottom:.5rem;background-color:var(--bg-surface-hover);border-radius:var(--radius-control);border:1px solid var(--border);border-left:3px solid var(--contained-border);transition:background-color .18s ease;color:var(--text)}.todo-item:hover{background-color:var(--bg-todo-hover)}@media (max-width: 768px){.input-container{flex-direction:column}.add-button{width:100%}}.portfolio-header{position:sticky;top:0;z-index:var(--z-app-chrome);background-color:#0a0a0aeb;border:1px solid var(--border)}.portfolio-header__inner{max-width:var(--layout-max-width);margin:0 auto;padding:0 1.5rem;min-height:56px;display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:.5rem}@media (min-width: 600px){.portfolio-header__inner{min-height:64px}}@media (max-width: 400px){.portfolio-header__inner{padding-left:1rem;padding-right:1rem}}.portfolio-header__left{display:flex;align-items:center;gap:.5rem;min-width:0;flex:1}.portfolio-header__logo-link{display:inline-flex;align-items:center;flex-shrink:0;border-radius:8px;line-height:0}.portfolio-header__logo-link:hover{opacity:.9}.portfolio-header__brand{display:none;font-size:.875rem;font-weight:500;letter-spacing:-.02em;color:var(--text);text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media (min-width: 640px){.portfolio-header__brand{display:block}}.portfolio-header__brand:hover{opacity:.85}.portfolio-header__social{display:flex;align-items:center;gap:.5rem;margin-left:.125rem;flex-shrink:0}.portfolio-header__icon-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:1px solid var(--border);border-radius:var(--radius-control);background:transparent;color:var(--text-muted);cursor:pointer;text-decoration:none;transition:background-color .18s ease,border-color .18s ease,color .18s ease}.portfolio-header__icon-btn:hover{background-color:var(--hover-overlay);border-color:var(--border-hover);color:var(--text)}.portfolio-header__social-icon{display:block}.portfolio-header__nav-desktop{display:none;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:.125rem}.portfolio-header__nav-link{padding:.5rem .875rem;font-size:.8125rem;font-weight:400;color:var(--text-muted);text-decoration:none;border-radius:var(--radius-control);transition:background-color .18s ease,color .18s ease}.portfolio-header__nav-link:hover{color:var(--text);background-color:var(--hover-overlay)}.portfolio-header__menu-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:1px solid var(--border);border-radius:var(--radius-control);background:transparent;color:var(--text-muted);cursor:pointer;flex-shrink:0;transition:background-color .18s ease,border-color .18s ease,color .18s ease}.portfolio-header__menu-btn:hover{background-color:var(--hover-overlay);color:var(--text);border-color:var(--border-hover)}@media (min-width: 960px){.portfolio-header__nav-desktop{display:flex}.portfolio-header__menu-btn{display:none}}.portfolio-header__backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--z-menu-backdrop);border:none;padding:0;margin:0;background:#00000080;cursor:pointer;opacity:0;pointer-events:none;transition:opacity 225ms cubic-bezier(0,0,.2,1)}.portfolio-header__backdrop--open{opacity:1;pointer-events:auto}.portfolio-header__drawer{position:fixed;top:0;right:0;z-index:var(--z-menu-panel);width:min(88vw,360px);height:100%;max-height:100dvh;background-color:var(--bg-elevated);border:1px solid var(--border);box-shadow:var(--menu-shadow);display:flex;flex-direction:column;padding:18px;overflow:auto;transform:translate(100%);transition:transform 225ms cubic-bezier(0,0,.2,1);will-change:transform}.portfolio-header__drawer--open{transform:translate(0)}@media (prefers-reduced-motion: reduce){.portfolio-header__backdrop,.portfolio-header__drawer{transition-duration:.01ms}}.portfolio-header__drawer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}.portfolio-header__drawer-title{font-size:.875rem;color:var(--text-muted)}.portfolio-header__drawer-list{list-style:none;margin:0;padding:.5rem .125rem}.portfolio-header__drawer-list li{margin:0}.portfolio-header__drawer-link{display:block;padding:.9625rem .625rem;font-size:1rem;font-weight:400;color:var(--text);text-decoration:none;border-radius:var(--radius-control);transition:background-color .18s ease}.portfolio-header__drawer-link:hover{background-color:var(--hover-overlay)}.app{min-height:100vh;display:flex;flex-direction:column;background-color:var(--bg-page)}.app-body{flex:1;display:flex;flex-direction:column;width:100%;max-width:var(--layout-max-width);margin-left:auto;margin-right:auto;padding-left:1.5rem;padding-right:1.5rem;box-sizing:border-box}.app-header{background-color:var(--bg-page);color:var(--text);padding:2rem 0 2.25rem;text-align:center;border-bottom:1px solid var(--border)}.app-header__source{font-size:.875rem;line-height:1.5;margin-bottom:1rem;color:var(--text-muted)}.app-header__source a{color:var(--text-muted);font-weight:500;text-decoration:underline;padding:.25rem 0;border-radius:var(--radius-control);transition:color .18s ease,text-decoration-color .18s ease}.app-header__source a:hover{color:var(--text);text-decoration-color:var(--accent)}.app-header__source a:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.app-header__source-hint{font-weight:400;opacity:.9}@media (max-width: 600px){.app-header{padding:1.25rem 0 1.5rem}}.app-header h1{font-size:clamp(1.5rem,4vw,2.25rem);margin-bottom:.625rem;font-weight:600;letter-spacing:-.03em;line-height:1.12}.subtitle{font-size:1.0625rem;line-height:1.65;color:var(--text-muted);max-width:36rem;margin-left:auto;margin-right:auto}.navigation{display:flex;justify-content:center;gap:.75rem;flex-wrap:wrap;padding:1rem 0;background-color:#0a0a0aeb;border-bottom:1px solid var(--border)}.navigation a{padding:.5rem 1.125rem;text-decoration:none;color:var(--text);font-weight:500;font-size:.9375rem;letter-spacing:.01em;border-radius:var(--radius-control);transition:background-color .18s ease,border-color .18s ease,color .18s ease;border:1px solid var(--border);background-color:transparent}.navigation a:hover{background-color:var(--hover-overlay);border-color:var(--border-hover);color:var(--text)}.navigation a.active{background-color:var(--contained-bg);color:var(--text);border-color:var(--contained-border)}.navigation a.active:hover{background-color:var(--contained-bg-hover);border-color:var(--contained-border-hover)}.app-main{flex:1;padding:2rem 0;width:100%;margin:0;background-color:var(--bg-page)}@media (max-width: 768px){.navigation{flex-direction:column;align-items:stretch}.navigation a{text-align:center}.app-body{padding-left:1rem;padding-right:1rem}.app-main{padding:1.25rem 0}}*{margin:0;padding:0;box-sizing:border-box}:root{color-scheme:dark;--bg-page: #0a0a0a;--bg-elevated: #111111;--bg-surface-hover: #161616;--bg-input: #161616;--bg-todo-hover: #1a1a1a;--border: rgba(255, 255, 255, .08);--border-hover: rgba(255, 255, 255, .12);--text: #ededed;--text-muted: rgba(237, 237, 237, .52);--accent: #8b93a3;--accent-hover: rgba(139, 147, 163, .9);--contained-bg: rgba(139, 147, 163, .22);--contained-bg-hover: rgba(139, 147, 163, .3);--contained-border: rgba(139, 147, 163, .25);--contained-border-hover: rgba(139, 147, 163, .35);--focus-ring: rgba(139, 147, 163, .45);--hover-overlay: rgba(255, 255, 255, .04);--selected-overlay: rgba(255, 255, 255, .06);--menu-shadow: 0 8px 24px rgba(0, 0, 0, .45);--banner-insecure-bg: rgba(232, 160, 160, .1);--banner-insecure-border: rgba(232, 160, 160, .35);--banner-insecure-text: rgba(232, 160, 160, .95);--banner-secure-bg: rgba(134, 239, 172, .08);--banner-secure-border: rgba(134, 239, 172, .28);--banner-secure-text: rgba(187, 247, 208, .95);--radius-card: 12px;--radius-control: 8px;--layout-max-width: 1200px;--z-app-chrome: 10000;--z-menu-backdrop: 10001;--z-menu-panel: 10002}html{background-color:var(--bg-page)}body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--bg-page);color:var(--text)}#root{min-height:100vh}