From 84985a04db7edc48103754c1a1f1a7401d750180 Mon Sep 17 00:00:00 2001 From: missytake Date: Fri, 18 Oct 2024 09:52:28 +0200 Subject: [PATCH] added scenario 4: email --- internet.html | 361 +++++++++++++++++++++++++++++++++++++------------- internet.md | 244 +++++++++++++++++++++++++++++++++- 2 files changed, 511 insertions(+), 94 deletions(-) diff --git a/internet.html b/internet.html index 9848302..d41ba97 100644 --- a/internet.html +++ b/internet.html @@ -8,12 +8,12 @@ * @size 16:9 1280px 720px * @size 4:3 960px 720px */div#\:\$p > svg > foreignObject > section{--base-size-4:calc(var(--marpit-root-font-size, 1rem) * 0.25);--base-size-8:calc(var(--marpit-root-font-size, 1rem) * 0.5);--base-size-16:calc(var(--marpit-root-font-size, 1rem) * 1);--base-text-weight-normal:400;--base-text-weight-medium:500;--base-text-weight-semibold:600;--fontStack-monospace:ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;}div#\:\$p > svg > foreignObject > section [data-theme=light],div#\:\$p > svg > foreignObject > section{color-scheme:light;--focus-outlineColor:#0969da;--fgColor-default:#1f2328;--fgColor-muted:#636c76;--fgColor-accent:#0969da;--fgColor-success:#1a7f37;--fgColor-attention:#9a6700;--fgColor-danger:#d1242f;--fgColor-done:#8250df;--bgColor-default:#fff;--bgColor-muted:#f6f8fa;--bgColor-neutral-muted:#afb8c133;--bgColor-attention-muted:#fff8c5;--borderColor-default:#d0d7de;--borderColor-muted:#d0d7deb3;--borderColor-neutral-muted:#afb8c133;--borderColor-accent-emphasis:#0969da;--borderColor-success-emphasis:#1a7f37;--borderColor-attention-emphasis:#bf8700;--borderColor-danger-emphasis:#cf222e;--borderColor-done-emphasis:#8250df;--color-prettylights-syntax-comment:#57606a;--color-prettylights-syntax-constant:#0550ae;--color-prettylights-syntax-constant-other-reference-link:#0a3069;--color-prettylights-syntax-entity:#6639ba;--color-prettylights-syntax-storage-modifier-import:#24292f;--color-prettylights-syntax-entity-tag:#0550ae;--color-prettylights-syntax-keyword:#cf222e;--color-prettylights-syntax-string:#0a3069;--color-prettylights-syntax-variable:#953800;--color-prettylights-syntax-brackethighlighter-unmatched:#82071e;--color-prettylights-syntax-brackethighlighter-angle:#57606a;--color-prettylights-syntax-invalid-illegal-text:#f6f8fa;--color-prettylights-syntax-invalid-illegal-bg:#82071e;--color-prettylights-syntax-carriage-return-text:#f6f8fa;--color-prettylights-syntax-carriage-return-bg:#cf222e;--color-prettylights-syntax-string-regexp:#116329;--color-prettylights-syntax-markup-list:#3b2300;--color-prettylights-syntax-markup-heading:#0550ae;--color-prettylights-syntax-markup-italic:#24292f;--color-prettylights-syntax-markup-bold:#24292f;--color-prettylights-syntax-markup-deleted-text:#82071e;--color-prettylights-syntax-markup-deleted-bg:#ffebe9;--color-prettylights-syntax-markup-inserted-text:#116329;--color-prettylights-syntax-markup-inserted-bg:#dafbe1;--color-prettylights-syntax-markup-changed-text:#953800;--color-prettylights-syntax-markup-changed-bg:#ffd8b5;--color-prettylights-syntax-markup-ignored-text:#eaeef2;--color-prettylights-syntax-markup-ignored-bg:#0550ae;--color-prettylights-syntax-meta-diff-range:#8250df;--color-prettylights-syntax-sublimelinter-gutter-mark:#8c959f;}div#\:\$p > svg > foreignObject > section [data-theme=dark],div#\:\$p > svg > foreignObject > section:where(.invert){color-scheme:dark;--focus-outlineColor:#1f6feb;--fgColor-default:#e6edf3;--fgColor-muted:#8d96a0;--fgColor-accent:#4493f8;--fgColor-success:#3fb950;--fgColor-attention:#d29922;--fgColor-danger:#f85149;--fgColor-done:#ab7df8;--bgColor-default:#0d1117;--bgColor-muted:#161b22;--bgColor-neutral-muted:#6e768166;--bgColor-attention-muted:#bb800926;--borderColor-default:#30363d;--borderColor-muted:#30363db3;--borderColor-neutral-muted:#6e768166;--borderColor-accent-emphasis:#1f6feb;--borderColor-success-emphasis:#238636;--borderColor-attention-emphasis:#9e6a03;--borderColor-danger-emphasis:#da3633;--borderColor-done-emphasis:#8957e5;--color-prettylights-syntax-comment:#8b949e;--color-prettylights-syntax-constant:#79c0ff;--color-prettylights-syntax-constant-other-reference-link:#a5d6ff;--color-prettylights-syntax-entity:#d2a8ff;--color-prettylights-syntax-storage-modifier-import:#c9d1d9;--color-prettylights-syntax-entity-tag:#7ee787;--color-prettylights-syntax-keyword:#ff7b72;--color-prettylights-syntax-string:#a5d6ff;--color-prettylights-syntax-variable:#ffa657;--color-prettylights-syntax-brackethighlighter-unmatched:#f85149;--color-prettylights-syntax-brackethighlighter-angle:#8b949e;--color-prettylights-syntax-invalid-illegal-text:#f0f6fc;--color-prettylights-syntax-invalid-illegal-bg:#8e1519;--color-prettylights-syntax-carriage-return-text:#f0f6fc;--color-prettylights-syntax-carriage-return-bg:#b62324;--color-prettylights-syntax-string-regexp:#7ee787;--color-prettylights-syntax-markup-list:#f2cc60;--color-prettylights-syntax-markup-heading:#1f6feb;--color-prettylights-syntax-markup-italic:#c9d1d9;--color-prettylights-syntax-markup-bold:#c9d1d9;--color-prettylights-syntax-markup-deleted-text:#ffdcd7;--color-prettylights-syntax-markup-deleted-bg:#67060c;--color-prettylights-syntax-markup-inserted-text:#aff5b4;--color-prettylights-syntax-markup-inserted-bg:#033a16;--color-prettylights-syntax-markup-changed-text:#ffdfb6;--color-prettylights-syntax-markup-changed-bg:#5a1e02;--color-prettylights-syntax-markup-ignored-text:#c9d1d9;--color-prettylights-syntax-markup-ignored-bg:#1158c7;--color-prettylights-syntax-meta-diff-range:#d2a8ff;--color-prettylights-syntax-sublimelinter-gutter-mark:#484f58;}div#\:\$p > svg > foreignObject > section{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;background-color:var(--bgColor-default);color:var(--fgColor-default);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Noto Sans,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;font-size:16px;line-height:1.5;margin:0;word-wrap:break-word;scroll-behavior:auto}div#\:\$p > svg > foreignObject > section{--marpit-root-font-size:16px;}div#\:\$p > svg > foreignObject > section :is(h1, marp-h1):hover .anchor .octicon-link:before,div#\:\$p > svg > foreignObject > section :is(h2, marp-h2):hover .anchor .octicon-link:before,div#\:\$p > svg > foreignObject > section :is(h3, marp-h3):hover .anchor .octicon-link:before,div#\:\$p > svg > foreignObject > section :is(h4, marp-h4):hover .anchor .octicon-link:before,div#\:\$p > svg > foreignObject > section :is(h5, marp-h5):hover .anchor .octicon-link:before,div#\:\$p > svg > foreignObject > section :is(h6, marp-h6):hover .anchor .octicon-link:before{background-color:currentColor;content:" ";display:inline-block;height:16px;-webkit-mask-image:url('data:image/svg+xml;charset=utf-8,');mask-image:url('data:image/svg+xml;charset=utf-8,');width:16px}div#\:\$p > svg > foreignObject > section details,div#\:\$p > svg > foreignObject > section figcaption,div#\:\$p > svg > foreignObject > section figure{display:block}div#\:\$p > svg > foreignObject > section summary{display:list-item}div#\:\$p > svg > foreignObject > section [hidden]{display:none!important}div#\:\$p > svg > foreignObject > section a{background-color:transparent;color:var(--fgColor-accent);text-decoration:none}div#\:\$p > svg > foreignObject > section abbr[title]{border-bottom:none;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}div#\:\$p > svg > foreignObject > section b,div#\:\$p > svg > foreignObject > section strong{font-weight:var(--base-text-weight-semibold, 600)}div#\:\$p > svg > foreignObject > section dfn{font-style:italic}div#\:\$p > svg > foreignObject > section :is(h1, marp-h1){border-bottom:1px solid var(--borderColor-muted);font-size:2em;font-weight:var(--base-text-weight-semibold, 600);margin:.67em 0;padding-bottom:.3em}div#\:\$p > svg > foreignObject > section mark{background-color:var(--bgColor-attention-muted);color:var(--fgColor-default)}div#\:\$p > svg > foreignObject > section small{font-size:90%}div#\:\$p > svg > foreignObject > section sub,div#\:\$p > svg > foreignObject > section sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}div#\:\$p > svg > foreignObject > section sub{bottom:-.25em}div#\:\$p > svg > foreignObject > section sup{top:-.5em}div#\:\$p > svg > foreignObject > section img{background-color:var(--bgColor-default);border-style:none;box-sizing:content-box;max-width:100%}div#\:\$p > svg > foreignObject > section code,div#\:\$p > svg > foreignObject > section kbd,div#\:\$p > svg > foreignObject > section :is(pre, marp-pre),div#\:\$p > svg > foreignObject > section samp{font-family:monospace;font-size:1em}div#\:\$p > svg > foreignObject > section figure{margin:1em 40px}div#\:\$p > svg > foreignObject > section hr{background:transparent;background-color:var(--borderColor-default);border:0;box-sizing:content-box;height:.25em;margin:24px 0;overflow:hidden;padding:0}div#\:\$p > svg > foreignObject > section input{font:inherit;font-family:inherit;font-size:inherit;line-height:inherit;margin:0;overflow:visible}div#\:\$p > svg > foreignObject > section [type=button],div#\:\$p > svg > foreignObject > section [type=reset],div#\:\$p > svg > foreignObject > section [type=submit]{-webkit-appearance:button;-moz-appearance:button;appearance:button}div#\:\$p > svg > foreignObject > section [type=checkbox],div#\:\$p > svg > foreignObject > section [type=radio]{box-sizing:border-box;padding:0}div#\:\$p > svg > foreignObject > section [type=number]::-webkit-inner-spin-button,div#\:\$p > svg > foreignObject > section [type=number]::-webkit-outer-spin-button{height:auto}div#\:\$p > svg > foreignObject > section [type=search]::-webkit-search-cancel-button,div#\:\$p > svg > foreignObject > section [type=search]::-webkit-search-decoration{-webkit-appearance:none;appearance:none}div#\:\$p > svg > foreignObject > section ::-webkit-input-placeholder{color:inherit;opacity:.54}div#\:\$p > svg > foreignObject > section ::-webkit-file-upload-button{-webkit-appearance:button;appearance:button;font:inherit}div#\:\$p > svg > foreignObject > section a:hover{text-decoration:underline}div#\:\$p > svg > foreignObject > section ::-moz-placeholder{color:var(--fgColor-muted);opacity:1}div#\:\$p > svg > foreignObject > section ::placeholder{color:var(--fgColor-muted);opacity:1}div#\:\$p > svg > foreignObject > section hr:after,div#\:\$p > svg > foreignObject > section hr:before{content:"";display:table}div#\:\$p > svg > foreignObject > section hr:after{clear:both}div#\:\$p > svg > foreignObject > section table{border-collapse:collapse;border-spacing:0;display:block;max-width:100%;overflow:auto;width:-moz-max-content;width:max-content}div#\:\$p > svg > foreignObject > section td,div#\:\$p > svg > foreignObject > section th{padding:0}div#\:\$p > svg > foreignObject > section details summary{cursor:pointer}div#\:\$p > svg > foreignObject > section details:not([open])>:not(summary){display:none}div#\:\$p > svg > foreignObject > section [role=button]:focus,div#\:\$p > svg > foreignObject > section a:focus,div#\:\$p > svg > foreignObject > section input[type=checkbox]:focus,div#\:\$p > svg > foreignObject > section input[type=radio]:focus{box-shadow:none;outline:2px solid var(--focus-outlineColor);outline-offset:-2px}div#\:\$p > svg > foreignObject > section [role=button]:focus:not(:focus-visible),div#\:\$p > svg > foreignObject > section a:focus:not(:focus-visible),div#\:\$p > svg > foreignObject > section input[type=checkbox]:focus:not(:focus-visible),div#\:\$p > svg > foreignObject > section input[type=radio]:focus:not(:focus-visible){outline:1px solid transparent}div#\:\$p > svg > foreignObject > section [role=button]:focus-visible,div#\:\$p > svg > foreignObject > section a:focus-visible,div#\:\$p > svg > foreignObject > section input[type=checkbox]:focus-visible,div#\:\$p > svg > foreignObject > section input[type=radio]:focus-visible{box-shadow:none;outline:2px solid var(--focus-outlineColor);outline-offset:-2px}div#\:\$p > svg > foreignObject > section a:not([class]):focus,div#\:\$p > svg > foreignObject > section a:not([class]):focus-visible,div#\:\$p > svg > foreignObject > section input[type=checkbox]:focus,div#\:\$p > svg > foreignObject > section input[type=checkbox]:focus-visible,div#\:\$p > svg > foreignObject > section input[type=radio]:focus,div#\:\$p > svg > foreignObject > section input[type=radio]:focus-visible{outline-offset:0}div#\:\$p > svg > foreignObject > section kbd{background-color:var(--bgColor-muted);border-bottom-color:var(--borderColor-neutral-muted);border:1px solid var(--borderColor-neutral-muted);border-radius:6px;box-shadow:inset 0 -1px 0 var(--borderColor-neutral-muted);color:var(--fgColor-default);display:inline-block;font:11px var(--fontStack-monospace, ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace);line-height:10px;padding:3px 5px;vertical-align:middle}div#\:\$p > svg > foreignObject > section :is(h1, marp-h1),div#\:\$p > svg > foreignObject > section :is(h2, marp-h2),div#\:\$p > svg > foreignObject > section :is(h3, marp-h3),div#\:\$p > svg > foreignObject > section :is(h4, marp-h4),div#\:\$p > svg > foreignObject > section :is(h5, marp-h5),div#\:\$p > svg > foreignObject > section :is(h6, marp-h6){font-weight:var(--base-text-weight-semibold, 600);line-height:1.25;margin-bottom:16px;margin-top:24px}div#\:\$p > svg > foreignObject > section :is(h2, marp-h2){border-bottom:1px solid var(--borderColor-muted);font-size:1.5em;padding-bottom:.3em}div#\:\$p > svg > foreignObject > section :is(h2, marp-h2),div#\:\$p > svg > foreignObject > section :is(h3, marp-h3){font-weight:var(--base-text-weight-semibold, 600)}div#\:\$p > svg > foreignObject > section :is(h3, marp-h3){font-size:1.25em}div#\:\$p > svg > foreignObject > section :is(h4, marp-h4){font-size:1em}div#\:\$p > svg > foreignObject > section :is(h4, marp-h4),div#\:\$p > svg > foreignObject > section :is(h5, marp-h5){font-weight:var(--base-text-weight-semibold, 600)}div#\:\$p > svg > foreignObject > section :is(h5, marp-h5){font-size:.875em}div#\:\$p > svg > foreignObject > section :is(h6, marp-h6){color:var(--fgColor-muted);font-size:.85em;font-weight:var(--base-text-weight-semibold, 600)}div#\:\$p > svg > foreignObject > section p{margin-bottom:10px;margin-top:0}div#\:\$p > svg > foreignObject > section blockquote{border-left:.25em solid var(--borderColor-default);color:var(--fgColor-muted);margin:0;padding:0 1em}div#\:\$p > svg > foreignObject > section ol,div#\:\$p > svg > foreignObject > section ul{margin-bottom:0;margin-top:0;padding-left:2em}div#\:\$p > svg > foreignObject > section ol ol,div#\:\$p > svg > foreignObject > section ul ol{list-style-type:lower-roman}div#\:\$p > svg > foreignObject > section ol ol ol,div#\:\$p > svg > foreignObject > section ol ul ol,div#\:\$p > svg > foreignObject > section ul ol ol,div#\:\$p > svg > foreignObject > section ul ul ol{list-style-type:lower-alpha}div#\:\$p > svg > foreignObject > section dd{margin-left:0}div#\:\$p > svg > foreignObject > section code,div#\:\$p > svg > foreignObject > section :is(pre, marp-pre),div#\:\$p > svg > foreignObject > section samp,div#\:\$p > svg > foreignObject > section tt{font-family:var(--fontStack-monospace, ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace);font-size:12px}div#\:\$p > svg > foreignObject > section :is(pre, marp-pre){margin-bottom:0;margin-top:0;word-wrap:normal}div#\:\$p > svg > foreignObject > section .octicon{display:inline-block;overflow:visible!important;vertical-align:text-bottom;fill:currentColor}div#\:\$p > svg > foreignObject > section input::-webkit-inner-spin-button,div#\:\$p > svg > foreignObject > section input::-webkit-outer-spin-button{-webkit-appearance:none;appearance:none;margin:0}div#\:\$p > svg > foreignObject > section .mr-2{margin-right:var(--base-size-8, 8px)!important}div#\:\$p > svg > foreignObject > section:after,div#\:\$p > svg > foreignObject > section:before{display:table}div#\:\$p > svg > foreignObject > section:after{clear:both}div#\:\$p > svg > foreignObject > section>:first-child{margin-top:0!important}div#\:\$p > svg > foreignObject > section>:last-child{margin-bottom:0!important}div#\:\$p > svg > foreignObject > section a:not([href]){color:inherit;text-decoration:none}div#\:\$p > svg > foreignObject > section .absent{color:var(--fgColor-danger)}div#\:\$p > svg > foreignObject > section .anchor{float:left;line-height:1;margin-left:-20px;padding-right:4px}div#\:\$p > svg > foreignObject > section .anchor:focus{outline:none}div#\:\$p > svg > foreignObject > section blockquote,div#\:\$p > svg > foreignObject > section details,div#\:\$p > svg > foreignObject > section dl,div#\:\$p > svg > foreignObject > section ol,div#\:\$p > svg > foreignObject > section p,div#\:\$p > svg > foreignObject > section :is(pre, marp-pre),div#\:\$p > svg > foreignObject > section table,div#\:\$p > svg > foreignObject > section ul{margin-bottom:16px;margin-top:0}div#\:\$p > svg > foreignObject > section blockquote>:first-child{margin-top:0}div#\:\$p > svg > foreignObject > section blockquote>:last-child{margin-bottom:0}div#\:\$p > svg > foreignObject > section :is(h1, marp-h1) .octicon-link,div#\:\$p > svg > foreignObject > section :is(h2, marp-h2) .octicon-link,div#\:\$p > svg > foreignObject > section :is(h3, marp-h3) .octicon-link,div#\:\$p > svg > foreignObject > section :is(h4, marp-h4) .octicon-link,div#\:\$p > svg > foreignObject > section :is(h5, marp-h5) .octicon-link,div#\:\$p > svg > foreignObject > section :is(h6, marp-h6) .octicon-link{color:var(--fgColor-default);vertical-align:middle;visibility:hidden}div#\:\$p > svg > foreignObject > section :is(h1, marp-h1):hover .anchor,div#\:\$p > svg > foreignObject > section :is(h2, marp-h2):hover .anchor,div#\:\$p > svg > foreignObject > section :is(h3, marp-h3):hover .anchor,div#\:\$p > svg > foreignObject > section :is(h4, marp-h4):hover .anchor,div#\:\$p > svg > foreignObject > section :is(h5, marp-h5):hover .anchor,div#\:\$p > svg > foreignObject > section :is(h6, marp-h6):hover .anchor{text-decoration:none}div#\:\$p > svg > foreignObject > section :is(h1, marp-h1):hover .anchor .octicon-link,div#\:\$p > svg > foreignObject > section :is(h2, marp-h2):hover .anchor .octicon-link,div#\:\$p > svg > foreignObject > section :is(h3, marp-h3):hover .anchor .octicon-link,div#\:\$p > svg > foreignObject > section :is(h4, marp-h4):hover .anchor .octicon-link,div#\:\$p > svg > foreignObject > section :is(h5, marp-h5):hover .anchor .octicon-link,div#\:\$p > svg > foreignObject > section :is(h6, marp-h6):hover .anchor .octicon-link{visibility:visible}div#\:\$p > svg > foreignObject > section :is(h1, marp-h1) code,div#\:\$p > svg > foreignObject > section :is(h1, marp-h1) tt,div#\:\$p > svg > foreignObject > section :is(h2, marp-h2) code,div#\:\$p > svg > foreignObject > section :is(h2, marp-h2) tt,div#\:\$p > svg > foreignObject > section :is(h3, marp-h3) code,div#\:\$p > svg > foreignObject > section :is(h3, marp-h3) tt,div#\:\$p > svg > foreignObject > section :is(h4, marp-h4) code,div#\:\$p > svg > foreignObject > section :is(h4, marp-h4) tt,div#\:\$p > svg > foreignObject > section :is(h5, marp-h5) code,div#\:\$p > svg > foreignObject > section :is(h5, marp-h5) tt,div#\:\$p > svg > foreignObject > section :is(h6, marp-h6) code,div#\:\$p > svg > foreignObject > section :is(h6, marp-h6) tt{font-size:inherit;padding:0 .2em}div#\:\$p > svg > foreignObject > section summary :is(h1, marp-h1),div#\:\$p > svg > foreignObject > section summary :is(h2, marp-h2),div#\:\$p > svg > foreignObject > section summary :is(h3, marp-h3),div#\:\$p > svg > foreignObject > section summary :is(h4, marp-h4),div#\:\$p > svg > foreignObject > section summary :is(h5, marp-h5),div#\:\$p > svg > foreignObject > section summary :is(h6, marp-h6){display:inline-block}div#\:\$p > svg > foreignObject > section summary :is(h1, marp-h1) .anchor,div#\:\$p > svg > foreignObject > section summary :is(h2, marp-h2) .anchor,div#\:\$p > svg > foreignObject > section summary :is(h3, marp-h3) .anchor,div#\:\$p > svg > foreignObject > section summary :is(h4, marp-h4) .anchor,div#\:\$p > svg > foreignObject > section summary :is(h5, marp-h5) .anchor,div#\:\$p > svg > foreignObject > section summary :is(h6, marp-h6) .anchor{margin-left:-40px}div#\:\$p > svg > foreignObject > section summary :is(h1, marp-h1),div#\:\$p > svg > foreignObject > section summary :is(h2, marp-h2){border-bottom:0;padding-bottom:0}div#\:\$p > svg > foreignObject > section ol.no-list,div#\:\$p > svg > foreignObject > section ul.no-list{list-style-type:none;padding:0}div#\:\$p > svg > foreignObject > section ol[type="a s"]{list-style-type:lower-alpha}div#\:\$p > svg > foreignObject > section ol[type="A s"]{list-style-type:upper-alpha}div#\:\$p > svg > foreignObject > section ol[type="i s"]{list-style-type:lower-roman}div#\:\$p > svg > foreignObject > section ol[type="I s"]{list-style-type:upper-roman}div#\:\$p > svg > foreignObject > section div>ol:not([type]),div#\:\$p > svg > foreignObject > section ol[type="1"]{list-style-type:decimal}div#\:\$p > svg > foreignObject > section ol ol,div#\:\$p > svg > foreignObject > section ol ul,div#\:\$p > svg > foreignObject > section ul ol,div#\:\$p > svg > foreignObject > section ul ul{margin-bottom:0;margin-top:0}div#\:\$p > svg > foreignObject > section li>p{margin-top:16px}div#\:\$p > svg > foreignObject > section li+li{margin-top:.25em}div#\:\$p > svg > foreignObject > section dl{padding:0}div#\:\$p > svg > foreignObject > section dl dt{font-size:1em;font-style:italic;font-weight:var(--base-text-weight-semibold, 600);margin-top:16px;padding:0}div#\:\$p > svg > foreignObject > section dl dd{margin-bottom:16px;padding:0 16px}div#\:\$p > svg > foreignObject > section table th{font-weight:var(--base-text-weight-semibold, 600)}div#\:\$p > svg > foreignObject > section table td,div#\:\$p > svg > foreignObject > section table th{border:1px solid var(--borderColor-default);padding:6px 13px}div#\:\$p > svg > foreignObject > section table td>:last-child{margin-bottom:0}div#\:\$p > svg > foreignObject > section table tr{background-color:var(--bgColor-default);border-top:1px solid var(--borderColor-muted)}div#\:\$p > svg > foreignObject > section table tr:nth-child(2n){background-color:var(--bgColor-muted)}div#\:\$p > svg > foreignObject > section table img{background-color:transparent}div#\:\$p > svg > foreignObject > section img[align=right]{padding-left:20px}div#\:\$p > svg > foreignObject > section img[align=left]{padding-right:20px}div#\:\$p > svg > foreignObject > section .emoji{background-color:transparent;max-width:none;vertical-align:text-top}div#\:\$p > svg > foreignObject > section :is(span, marp-span).frame,div#\:\$p > svg > foreignObject > section :is(span, marp-span).frame>:is(span, marp-span){display:block;overflow:hidden}div#\:\$p > svg > foreignObject > section :is(span, marp-span).frame>:is(span, marp-span){border:1px solid var(--borderColor-default);float:left;margin:13px 0 0;padding:7px;width:auto}div#\:\$p > svg > foreignObject > section :is(span, marp-span).frame :is(span, marp-span) img{display:block;float:left}div#\:\$p > svg > foreignObject > section :is(span, marp-span).frame :is(span, marp-span) :is(span, marp-span){clear:both;color:var(--fgColor-default);display:block;padding:5px 0 0}div#\:\$p > svg > foreignObject > section :is(span, marp-span).align-center{clear:both;display:block;overflow:hidden}div#\:\$p > svg > foreignObject > section :is(span, marp-span).align-center>:is(span, marp-span){display:block;margin:13px auto 0;overflow:hidden;text-align:center}div#\:\$p > svg > foreignObject > section :is(span, marp-span).align-center :is(span, marp-span) img{margin:0 auto;text-align:center}div#\:\$p > svg > foreignObject > section :is(span, marp-span).align-right{clear:both;display:block;overflow:hidden}div#\:\$p > svg > foreignObject > section :is(span, marp-span).align-right>:is(span, marp-span){display:block;margin:13px 0 0;overflow:hidden;text-align:right}div#\:\$p > svg > foreignObject > section :is(span, marp-span).align-right :is(span, marp-span) img{margin:0;text-align:right}div#\:\$p > svg > foreignObject > section :is(span, marp-span).float-left{display:block;float:left;margin-right:13px;overflow:hidden}div#\:\$p > svg > foreignObject > section :is(span, marp-span).float-left :is(span, marp-span){margin:13px 0 0}div#\:\$p > svg > foreignObject > section :is(span, marp-span).float-right{display:block;float:right;margin-left:13px;overflow:hidden}div#\:\$p > svg > foreignObject > section :is(span, marp-span).float-right>:is(span, marp-span){display:block;margin:13px auto 0;overflow:hidden;text-align:right}div#\:\$p > svg > foreignObject > section code,div#\:\$p > svg > foreignObject > section tt{background-color:var(--bgColor-neutral-muted);border-radius:6px;font-size:85%;margin:0;padding:.2em .4em;white-space:break-spaces}div#\:\$p > svg > foreignObject > section code br,div#\:\$p > svg > foreignObject > section tt br{display:none}div#\:\$p > svg > foreignObject > section del code{text-decoration:inherit}div#\:\$p > svg > foreignObject > section samp{font-size:85%}div#\:\$p > svg > foreignObject > section :is(pre, marp-pre) code{font-size:100%}div#\:\$p > svg > foreignObject > section :is(pre, marp-pre)>code{background:transparent;border:0;margin:0;padding:0;white-space:pre;word-break:normal}div#\:\$p > svg > foreignObject > section .highlight{margin-bottom:16px}div#\:\$p > svg > foreignObject > section .highlight :is(pre, marp-pre){margin-bottom:0;word-break:normal}div#\:\$p > svg > foreignObject > section :is(pre, marp-pre){background-color:var(--bgColor-muted);border-radius:6px;color:var(--fgColor-default);font-size:85%;line-height:1.45;overflow:auto;padding:16px}div#\:\$p > svg > foreignObject > section :is(pre, marp-pre) code,div#\:\$p > svg > foreignObject > section :is(pre, marp-pre) tt{display:inline;line-height:inherit;margin:0;max-width:auto;overflow:visible;padding:0;word-wrap:normal;background-color:transparent;border:0}div#\:\$p > svg > foreignObject > section .csv-data td,div#\:\$p > svg > foreignObject > section .csv-data th{font-size:12px;line-height:1;overflow:hidden;padding:5px;text-align:left;white-space:nowrap}div#\:\$p > svg > foreignObject > section .csv-data .blob-num{background:var(--bgColor-default);border:0;padding:10px 8px 9px;text-align:right}div#\:\$p > svg > foreignObject > section .csv-data tr{border-top:0}div#\:\$p > svg > foreignObject > section .csv-data th{background:var(--bgColor-muted);border-top:0;font-weight:var(--base-text-weight-semibold, 600)}div#\:\$p > svg > foreignObject > section [data-footnote-ref]:before{content:"["}div#\:\$p > svg > foreignObject > section [data-footnote-ref]:after{content:"]"}div#\:\$p > svg > foreignObject > section .footnotes{border-top:1px solid var(--borderColor-default);color:var(--fgColor-muted);font-size:12px}div#\:\$p > svg > foreignObject > section div#\:\$p > svg > foreignObject > section section.footnotes{--marpit-root-font-size:12px;}div#\:\$p > svg > foreignObject > section .footnotes ol{padding-left:16px}div#\:\$p > svg > foreignObject > section .footnotes ol ul{display:inline-block;margin-top:16px;padding-left:16px}div#\:\$p > svg > foreignObject > section .footnotes li{position:relative}div#\:\$p > svg > foreignObject > section .footnotes li:target:before{border:2px solid var(--borderColor-accent-emphasis);border-radius:6px;bottom:-8px;content:"";left:-24px;pointer-events:none;position:absolute;right:-8px;top:-8px}div#\:\$p > svg > foreignObject > section .footnotes li:target{color:var(--fgColor-default)}div#\:\$p > svg > foreignObject > section .footnotes .data-footnote-backref g-emoji{font-family:monospace}div#\:\$p > svg > foreignObject > section .pl-c{color:var(--color-prettylights-syntax-comment)}div#\:\$p > svg > foreignObject > section .pl-c1,div#\:\$p > svg > foreignObject > section .pl-s .pl-v{color:var(--color-prettylights-syntax-constant)}div#\:\$p > svg > foreignObject > section .pl-e,div#\:\$p > svg > foreignObject > section .pl-en{color:var(--color-prettylights-syntax-entity)}div#\:\$p > svg > foreignObject > section .pl-s .pl-s1,div#\:\$p > svg > foreignObject > section .pl-smi{color:var(--color-prettylights-syntax-storage-modifier-import)}div#\:\$p > svg > foreignObject > section .pl-ent{color:var(--color-prettylights-syntax-entity-tag)}div#\:\$p > svg > foreignObject > section .pl-k{color:var(--color-prettylights-syntax-keyword)}div#\:\$p > svg > foreignObject > section .pl-pds,div#\:\$p > svg > foreignObject > section .pl-s,div#\:\$p > svg > foreignObject > section .pl-s .pl-pse .pl-s1,div#\:\$p > svg > foreignObject > section .pl-sr,div#\:\$p > svg > foreignObject > section .pl-sr .pl-cce,div#\:\$p > svg > foreignObject > section .pl-sr .pl-sra,div#\:\$p > svg > foreignObject > section .pl-sr .pl-sre{color:var(--color-prettylights-syntax-string)}div#\:\$p > svg > foreignObject > section .pl-smw,div#\:\$p > svg > foreignObject > section .pl-v{color:var(--color-prettylights-syntax-variable)}div#\:\$p > svg > foreignObject > section .pl-bu{color:var(--color-prettylights-syntax-brackethighlighter-unmatched)}div#\:\$p > svg > foreignObject > section .pl-ii{background-color:var(--color-prettylights-syntax-invalid-illegal-bg);color:var(--color-prettylights-syntax-invalid-illegal-text)}div#\:\$p > svg > foreignObject > section .pl-c2{background-color:var(--color-prettylights-syntax-carriage-return-bg);color:var(--color-prettylights-syntax-carriage-return-text)}div#\:\$p > svg > foreignObject > section .pl-sr .pl-cce{color:var(--color-prettylights-syntax-string-regexp);font-weight:700}div#\:\$p > svg > foreignObject > section .pl-ml{color:var(--color-prettylights-syntax-markup-list)}div#\:\$p > svg > foreignObject > section .pl-mh,div#\:\$p > svg > foreignObject > section .pl-mh .pl-en,div#\:\$p > svg > foreignObject > section .pl-ms{color:var(--color-prettylights-syntax-markup-heading);font-weight:700}div#\:\$p > svg > foreignObject > section .pl-mi{color:var(--color-prettylights-syntax-markup-italic);font-style:italic}div#\:\$p > svg > foreignObject > section .pl-mb{color:var(--color-prettylights-syntax-markup-bold);font-weight:700}div#\:\$p > svg > foreignObject > section .pl-md{background-color:var(--color-prettylights-syntax-markup-deleted-bg);color:var(--color-prettylights-syntax-markup-deleted-text)}div#\:\$p > svg > foreignObject > section .pl-mi1{background-color:var(--color-prettylights-syntax-markup-inserted-bg);color:var(--color-prettylights-syntax-markup-inserted-text)}div#\:\$p > svg > foreignObject > section .pl-mc{background-color:var(--color-prettylights-syntax-markup-changed-bg);color:var(--color-prettylights-syntax-markup-changed-text)}div#\:\$p > svg > foreignObject > section .pl-mi2{background-color:var(--color-prettylights-syntax-markup-ignored-bg);color:var(--color-prettylights-syntax-markup-ignored-text)}div#\:\$p > svg > foreignObject > section .pl-mdr{color:var(--color-prettylights-syntax-meta-diff-range);font-weight:700}div#\:\$p > svg > foreignObject > section .pl-ba{color:var(--color-prettylights-syntax-brackethighlighter-angle)}div#\:\$p > svg > foreignObject > section .pl-sg{color:var(--color-prettylights-syntax-sublimelinter-gutter-mark)}div#\:\$p > svg > foreignObject > section .pl-corl{color:var(--color-prettylights-syntax-constant-other-reference-link);text-decoration:underline}div#\:\$p > svg > foreignObject > section [role=button]:focus:not(:focus-visible),div#\:\$p > svg > foreignObject > section [role=tabpanel][tabindex="0"]:focus:not(:focus-visible),div#\:\$p > svg > foreignObject > section a:focus:not(:focus-visible),div#\:\$p > svg > foreignObject > section button:focus:not(:focus-visible),div#\:\$p > svg > foreignObject > section summary:focus:not(:focus-visible){box-shadow:none;outline:none}div#\:\$p > svg > foreignObject > section [tabindex="0"]:focus:not(:focus-visible),div#\:\$p > svg > foreignObject > section details-dialog:focus:not(:focus-visible){outline:none}div#\:\$p > svg > foreignObject > section g-emoji{display:inline-block;font-family:Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;font-size:1em;font-style:normal!important;font-weight:var(--base-text-weight-normal, 400);line-height:1;min-width:1ch;vertical-align:-.075em}div#\:\$p > svg > foreignObject > section g-emoji img{height:1em;width:1em}div#\:\$p > svg > foreignObject > section .task-list-item{list-style-type:none}div#\:\$p > svg > foreignObject > section .task-list-item label{font-weight:var(--base-text-weight-normal, 400)}div#\:\$p > svg > foreignObject > section .task-list-item.enabled label{cursor:pointer}div#\:\$p > svg > foreignObject > section .task-list-item+.task-list-item{margin-top:var(--base-size-4)}div#\:\$p > svg > foreignObject > section .task-list-item .handle{display:none}div#\:\$p > svg > foreignObject > section .task-list-item-checkbox{margin:0 .2em .25em -1.4em;vertical-align:middle}div#\:\$p > svg > foreignObject > section .contains-task-list:dir(rtl) .task-list-item-checkbox{margin:0 -1.6em .25em .2em}div#\:\$p > svg > foreignObject > section .contains-task-list{position:relative}div#\:\$p > svg > foreignObject > section .contains-task-list:focus-within .task-list-item-convert-container,div#\:\$p > svg > foreignObject > section .contains-task-list:hover .task-list-item-convert-container{display:block;height:24px;overflow:visible;width:auto;clip:auto}div#\:\$p > svg > foreignObject > section ::-webkit-calendar-picker-indicator{filter:invert(50%)}div#\:\$p > svg > foreignObject > section .markdown-alert{border-left:.25em solid var(--borderColor-default);color:inherit;margin-bottom:var(--base-size-16);padding:var(--base-size-8) var(--base-size-16)}div#\:\$p > svg > foreignObject > section .markdown-alert>:first-child{margin-top:0}div#\:\$p > svg > foreignObject > section .markdown-alert>:last-child{margin-bottom:0}div#\:\$p > svg > foreignObject > section .markdown-alert .markdown-alert-title{align-items:center;display:flex;font-weight:var(--base-text-weight-medium, 500);line-height:1}div#\:\$p > svg > foreignObject > section .markdown-alert.markdown-alert-note{border-left-color:var(--borderColor-accent-emphasis)}div#\:\$p > svg > foreignObject > section .markdown-alert.markdown-alert-note .markdown-alert-title{color:var(--fgColor-accent)}div#\:\$p > svg > foreignObject > section .markdown-alert.markdown-alert-important{border-left-color:var(--borderColor-done-emphasis)}div#\:\$p > svg > foreignObject > section .markdown-alert.markdown-alert-important .markdown-alert-title{color:var(--fgColor-done)}div#\:\$p > svg > foreignObject > section .markdown-alert.markdown-alert-warning{border-left-color:var(--borderColor-attention-emphasis)}div#\:\$p > svg > foreignObject > section .markdown-alert.markdown-alert-warning .markdown-alert-title{color:var(--fgColor-attention)}div#\:\$p > svg > foreignObject > section .markdown-alert.markdown-alert-tip{border-left-color:var(--borderColor-success-emphasis)}div#\:\$p > svg > foreignObject > section .markdown-alert.markdown-alert-tip .markdown-alert-title{color:var(--fgColor-success)}div#\:\$p > svg > foreignObject > section .markdown-alert.markdown-alert-caution{border-left-color:var(--borderColor-danger-emphasis)}div#\:\$p > svg > foreignObject > section .markdown-alert.markdown-alert-caution .markdown-alert-title{color:var(--fgColor-danger)}div#\:\$p > svg > foreignObject > section>:first-child>.heading-element:first-child{margin-top:0!important}div#\:\$p > svg > foreignObject > section :is(h1, marp-h1){color:var(--h1-color);font-size:1.6em}div#\:\$p > svg > foreignObject > section :is(h1, marp-h1),div#\:\$p > svg > foreignObject > section :is(h2, marp-h2){border-bottom:none}div#\:\$p > svg > foreignObject > section :is(h2, marp-h2){font-size:1.3em}div#\:\$p > svg > foreignObject > section :is(h3, marp-h3){font-size:1.1em}div#\:\$p > svg > foreignObject > section :is(h4, marp-h4){font-size:1.05em}div#\:\$p > svg > foreignObject > section :is(h5, marp-h5){font-size:1em}div#\:\$p > svg > foreignObject > section :is(h6, marp-h6){font-size:.9em}div#\:\$p > svg > foreignObject > section :is(h1, marp-h1) strong,div#\:\$p > svg > foreignObject > section :is(h2, marp-h2) strong,div#\:\$p > svg > foreignObject > section :is(h3, marp-h3) strong,div#\:\$p > svg > foreignObject > section :is(h4, marp-h4) strong,div#\:\$p > svg > foreignObject > section :is(h5, marp-h5) strong,div#\:\$p > svg > foreignObject > section :is(h6, marp-h6) strong{color:var(--heading-strong-color);font-weight:inherit}div#\:\$p > svg > foreignObject > section :is(h1, marp-h1)::part(auto-scaling),div#\:\$p > svg > foreignObject > section :is(h2, marp-h2)::part(auto-scaling),div#\:\$p > svg > foreignObject > section :is(h3, marp-h3)::part(auto-scaling),div#\:\$p > svg > foreignObject > section :is(h4, marp-h4)::part(auto-scaling),div#\:\$p > svg > foreignObject > section :is(h5, marp-h5)::part(auto-scaling),div#\:\$p > svg > foreignObject > section :is(h6, marp-h6)::part(auto-scaling){max-height:563px}div#\:\$p > svg > foreignObject > section hr{height:0;padding-top:.25em}div#\:\$p > svg > foreignObject > section img{background-color:transparent}div#\:\$p > svg > foreignObject > section :is(pre, marp-pre){border:1px solid var(--borderColor-default);line-height:1.15;overflow:visible}div#\:\$p > svg > foreignObject > section :is(pre, marp-pre)::part(auto-scaling){max-height:529px}div#\:\$p > svg > foreignObject > section :is(pre, marp-pre) :where(.hljs){color:var(--color-prettylights-syntax-storage-modifier-import)}div#\:\$p > svg > foreignObject > section :is(pre, marp-pre) :where(.hljs-doctag),div#\:\$p > svg > foreignObject > section :is(pre, marp-pre) :where(.hljs-keyword),div#\:\$p > svg > foreignObject > section :is(pre, marp-pre) :where(.hljs-meta .hljs-keyword),div#\:\$p > svg > foreignObject > section :is(pre, marp-pre) :where(.hljs-template-tag),div#\:\$p > svg > foreignObject > section :is(pre, marp-pre) :where(.hljs-template-variable),div#\:\$p > svg > foreignObject > section :is(pre, marp-pre) :where(.hljs-type),div#\:\$p > svg > foreignObject > section :is(pre, marp-pre) :where(.hljs-variable.language_){color:var(--color-prettylights-syntax-keyword)}div#\:\$p > svg > foreignObject > section :is(pre, marp-pre) :where(.hljs-title),div#\:\$p > svg > foreignObject > section :is(pre, marp-pre) :where(.hljs-title.class_),div#\:\$p > svg > foreignObject > section :is(pre, marp-pre) :where(.hljs-title.class_.inherited__),div#\:\$p > svg > foreignObject > section :is(pre, marp-pre) :where(.hljs-title.function_){color:var(--color-prettylights-syntax-entity)}div#\:\$p > svg > foreignObject > section :is(pre, marp-pre) :where(.hljs-attr),div#\:\$p > svg > foreignObject > section :is(pre, marp-pre) :where(.hljs-attribute),div#\:\$p > svg > foreignObject > section :is(pre, marp-pre) :where(.hljs-literal),div#\:\$p > svg > foreignObject > section :is(pre, marp-pre) :where(.hljs-meta),div#\:\$p > svg > foreignObject > section :is(pre, marp-pre) :where(.hljs-number),div#\:\$p > svg > foreignObject > section :is(pre, marp-pre) :where(.hljs-operator),div#\:\$p > svg > foreignObject > section :is(pre, marp-pre) :where(.hljs-selector-attr),div#\:\$p > svg > foreignObject > section :is(pre, marp-pre) :where(.hljs-selector-class),div#\:\$p > svg > foreignObject > section :is(pre, marp-pre) :where(.hljs-selector-id),div#\:\$p > svg > foreignObject > section :is(pre, marp-pre) :where(.hljs-variable){color:var(--color-prettylights-syntax-constant)}div#\:\$p > svg > foreignObject > section :is(pre, marp-pre) :where(.hljs-meta .hljs-string),div#\:\$p > svg > foreignObject > section :is(pre, marp-pre) :where(.hljs-regexp),div#\:\$p > svg > foreignObject > section :is(pre, marp-pre) :where(.hljs-string){color:var(--color-prettylights-syntax-string)}div#\:\$p > svg > foreignObject > section :is(pre, marp-pre) :where(.hljs-built_in),div#\:\$p > svg > foreignObject > section :is(pre, marp-pre) :where(.hljs-symbol){color:var(--color-prettylights-syntax-variable)}div#\:\$p > svg > foreignObject > section :is(pre, marp-pre) :where(.hljs-code),div#\:\$p > svg > foreignObject > section :is(pre, marp-pre) :where(.hljs-comment),div#\:\$p > svg > foreignObject > section :is(pre, marp-pre) :where(.hljs-formula){color:var(--color-prettylights-syntax-comment)}div#\:\$p > svg > foreignObject > section :is(pre, marp-pre) :where(.hljs-name),div#\:\$p > svg > foreignObject > section :is(pre, marp-pre) :where(.hljs-quote),div#\:\$p > svg > foreignObject > section :is(pre, marp-pre) :where(.hljs-selector-pseudo),div#\:\$p > svg > foreignObject > section :is(pre, marp-pre) :where(.hljs-selector-tag){color:var(--color-prettylights-syntax-entity-tag)}div#\:\$p > svg > foreignObject > section :is(pre, marp-pre) :where(.hljs-subst){color:var(--color-prettylights-syntax-storage-modifier-import)}div#\:\$p > svg > foreignObject > section :is(pre, marp-pre) :where(.hljs-section){color:var(--color-prettylights-syntax-markup-heading);font-weight:700}div#\:\$p > svg > foreignObject > section :is(pre, marp-pre) :where(.hljs-bullet){color:var(--color-prettylights-syntax-markup-list)}div#\:\$p > svg > foreignObject > section :is(pre, marp-pre) :where(.hljs-emphasis){color:var(--color-prettylights-syntax-markup-italic);font-style:italic}div#\:\$p > svg > foreignObject > section :is(pre, marp-pre) :where(.hljs-strong){color:var(--color-prettylights-syntax-markup-bold);font-weight:700}div#\:\$p > svg > foreignObject > section :is(pre, marp-pre) :where(.hljs-addition){background-color:var(--color-prettylights-syntax-markup-inserted-bg);color:var(--color-prettylights-syntax-markup-inserted-text)}div#\:\$p > svg > foreignObject > section :is(pre, marp-pre) :where(.hljs-deletion){background-color:var(--color-prettylights-syntax-markup-deleted-bg);color:var(--color-prettylights-syntax-markup-deleted-text)}div#\:\$p > svg > foreignObject > section footer,div#\:\$p > svg > foreignObject > section header{color:var(--header-footer-color);font-size:18px;left:30px;margin:0;position:absolute}div#\:\$p > svg > foreignObject > section header{top:21px}div#\:\$p > svg > foreignObject > section footer{bottom:21px}div#\:\$p > svg > foreignObject > section{--h1-color:#246;--header-footer-color:hsla(0,0%,40%,.75);--heading-strong-color:#48c;--paginate-color:#777;align-items:stretch;display:block;flex-flow:column nowrap;font-size:29px;height:720px;padding:78.5px;place-content:safe center center;width:1280px}div#\:\$p > svg > foreignObject > section{--marpit-root-font-size:29px;}div#\:\$p > svg > foreignObject > section:where(.invert){--h1-color:#cee7ff;--header-footer-color:hsla(0,0%,60%,.75);--heading-strong-color:#7bf;--paginate-color:#999;}div#\:\$p > svg > foreignObject > section>:last-child,div#\:\$p > svg > foreignObject > section[data-footer]>:nth-last-child(2){margin-bottom:0}div#\:\$p > svg > foreignObject > section>:first-child,div#\:\$p > svg > foreignObject > section>header:first-child+*{margin-top:0}div#\:\$p > svg > foreignObject > section:after{bottom:21px;color:var(--paginate-color);font-size:24px;padding:0;position:absolute;right:30px}div#\:\$p > svg > foreignObject > section:after{--marpit-root-font-size:24px;}div#\:\$p > svg > foreignObject > section[data-color] :is(h1, marp-h1),div#\:\$p > svg > foreignObject > section[data-color] :is(h2, marp-h2),div#\:\$p > svg > foreignObject > section[data-color] :is(h3, marp-h3),div#\:\$p > svg > foreignObject > section[data-color] :is(h4, marp-h4),div#\:\$p > svg > foreignObject > section[data-color] :is(h5, marp-h5),div#\:\$p > svg > foreignObject > section[data-color] :is(h6, marp-h6){color:currentcolor}div#\:\$p > svg > foreignObject > section[data-marpit-advanced-background="background"]{columns:initial!important;display:block!important;padding:0!important}div#\:\$p > svg > foreignObject > section[data-marpit-advanced-background="background"]::before, div#\:\$p > svg > foreignObject > section[data-marpit-advanced-background="background"]::after, div#\:\$p > svg > foreignObject > section[data-marpit-advanced-background="content"]::before, div#\:\$p > svg > foreignObject > section[data-marpit-advanced-background="content"]::after{display:none!important}div#\:\$p > svg > foreignObject > section[data-marpit-advanced-background="background"] > div[data-marpit-advanced-background-container]{all:initial;display:flex;flex-direction:row;height:100%;overflow:hidden;width:100%}div#\:\$p > svg > foreignObject > section[data-marpit-advanced-background="background"] > div[data-marpit-advanced-background-container][data-marpit-advanced-background-direction="vertical"]{flex-direction:column}div#\:\$p > svg > foreignObject > section[data-marpit-advanced-background="background"][data-marpit-advanced-background-split] > div[data-marpit-advanced-background-container]{width:var(--marpit-advanced-background-split, 50%)}div#\:\$p > svg > foreignObject > section[data-marpit-advanced-background="background"][data-marpit-advanced-background-split="right"] > div[data-marpit-advanced-background-container]{margin-left:calc(100% - var(--marpit-advanced-background-split, 50%))}div#\:\$p > svg > foreignObject > section[data-marpit-advanced-background="background"] > div[data-marpit-advanced-background-container] > figure{all:initial;background-position:center;background-repeat:no-repeat;background-size:cover;flex:auto;margin:0}div#\:\$p > svg > foreignObject > section[data-marpit-advanced-background="background"] > div[data-marpit-advanced-background-container] > figure > figcaption{position:absolute;border:0;clip:rect(0, 0, 0, 0);height:1px;margin:-1px;overflow:hidden;padding:0;white-space:nowrap;width:1px}div#\:\$p > svg > foreignObject > section[data-marpit-advanced-background="content"], div#\:\$p > svg > foreignObject > section[data-marpit-advanced-background="pseudo"]{background:transparent!important}div#\:\$p > svg > foreignObject > section[data-marpit-advanced-background="pseudo"], div#\:\$p > svg[data-marpit-svg] > foreignObject[data-marpit-advanced-background="pseudo"]{pointer-events:none!important}div#\:\$p > svg > foreignObject > section[data-marpit-advanced-background-split]{width:100%;height:100%} -
+

Wie funktioniert das Internet?

ein Rollen-Spiel

Wie funktioniert das Internet?
-
+

Szenario 1: Alice will ins W-Lan

Starring:

    @@ -23,63 +23,63 @@
Wie funktioniert das Internet?
-
+

1&1-Gateway: 72.0.0.1

Schickt Alice einen Brief mit Zugangsdaten

Wie funktioniert das Internet?
-
+

ISP (Internet Service Provider)

Ein Unternehmen (manchmal Verein), der Netzwerk-Infrastruktur (Router und die Kabel dazwischen) bereitstellt, meistens gegen Geld.

z.B. Vodafone, 1&1, Telekom, aber auch viele Freifunk-Vereine sind quasi ISPs.

Wie funktioniert das Internet?
-
+

Router

Ein kleiner Computer ohne Bildschirm, der sich darum kümmert, Datenpakete weiterzuleiten (zu routen). Das Internet ist ein Netzwerk aus Routern, über die Server und Endgeräte miteinander sprechen/Daten austauschen können.

Alice hat zuhause einen Wifi-Router, über den sie sich ins Internet einwählen kann. Der Wifi-Router leitet ihre Anfragen an einen Router von 1&1 weiter, ihrem Internet Service Provider (ISP).

Wie funktioniert das Internet?
-
+

WG-Lan: 192.0.0.1

Start-Code: 6876-2131-1312
Zugangs-Code: 1und1/osfhm8fe8joq@online.de
Passwort: 7982369878

Wie funktioniert das Internet?
-
+

1&1-Gateway: 72.0.0.1

Deine IP ist: 72.132.28.123
Ich kann routen: x.x.x.x
Ich empfehle diesen DNS-Server: 72.1.0.1

Wie funktioniert das Internet?
-
+

Alice

87:67:12:F3:1A:89
WiFi?

Wie funktioniert das Internet?
-
+

WG-Lan: 192.0.0.1

SSID: WG-Lan
WPA2-gesichert

Wie funktioniert das Internet?
-
+

Alice

SSID: WG-Lan
Passwort: supersich3r

Wie funktioniert das Internet?
-
+

WG-Lan: 192.0.0.1

Deine IP ist: 192.0.0.5
Ich kann routen: x.x.x.x
Ich kann auch DNS-Anfragen machen.

Wie funktioniert das Internet?
-
+

Szenario 2: Alice googled nach "Mr. Robot kostenloser Stream"

natürlich nicht mit google, sondern duckduckgo.

Starring:

@@ -91,38 +91,38 @@ Ich kann auch DNS-Anfragen machen.

Wie funktioniert das Internet?
-
+

IP-Adresse (Internet Protocol Adresse)

Eine Internet-Adresse, die Router nutzen um Daten an das richtige Gerät weiterzuleiten. Alle Server, Endgeräte, und Router brauchen eine IP-Adresse.

IPv4-Adressen sehen z.B. so aus: 40.114.177.156

Wie funktioniert das Internet?
-
+

Domain

Ein Name, der idR auf eine IP-Adresse zeigt. IP-Adressen können Menschen sich schlecht merken; wenn eine IP-Adresse die Koordinaten sind, ist eine Domain die Post-Adresse.

z.B. riseup.net, google.com, wikipedia.org.

Wie funktioniert das Internet?
-
+

Alice: 192.0.0.5

Anfrage von 192.0.0.5
DNS-Anfrage an 192.0.0.1
IP-Adresse (A) von duckduckgo.com

Wie funktioniert das Internet?
-
+

WG-Lan: 72.132.28.123

Anfrage von 72.132.28.123
DNS-Anfrage an 72.1.0.1
IP-Adresse (A) von duckduckgo.com

Wie funktioniert das Internet?
-
+

1&1-Gateway: 72.0.0.1

gibt die Anfrage an 72.1.0.1 weiter

Wie funktioniert das Internet?
-
+

DNS-Eintrag (Domain Name System-Eintrag)

Inhaber einer Domain können DNS-Einträge ausstellen, also z.B. auf IP-Adressen zeigen oder angeben welcher Mail-Server für ihre Domain Mails empfangen darf.

    @@ -131,13 +131,13 @@ IP-Adresse (A) von duckduckgo.com

Wie funktioniert das Internet?
-
+

1&1-DNS: 72.1.0.1

Antwort an 72.132.28.123
A von duckduckgo: 40.114.177.156

Wie funktioniert das Internet?
-
+

A new player joins the game

Neue Rollen:

    @@ -146,12 +146,12 @@ A von duckduckgo: 40.114.177.156

Wie funktioniert das Internet?
-
+

Endgerät

Überbegriff für Laptops, Smartphones, und Desktop-PCs - quasi das Gerät das direkt vom Menschen benutzt wird um mit dem Internet zu interagieren.

Wie funktioniert das Internet?
-
+

Server

Ein Computer ohne Bildschirm, der über das Internet erreichbar ist, und der Anfragen (Requests) bearbeitet.

Beispiele:

@@ -159,30 +159,38 @@ A von duckduckgo: 40.114.177.156

  • Bob der Anwalt mietet sich einen Web-Server, um die Webseite seiner Kanzlei zu betreiben (zu hosten).
  • riseup.net betreiben sowohl Web-Server als auch Mail-Server, also Server die die Protokolle HTTP oder SMTP/IMAP (E-Mail) sprechen.
    • +

    Client

    +
      +
    • Clients ist ein Überbegriff für alle Programme, über die man mit Servern interagieren kann. Während Server von "to serve" kommt, sind Clients die "Kund*innen", die bedient werden. +
        +
      • Ein Browser ist z.B. ein Web-Client, Thunderbird oder Delta Chat sind Mail-Clients.
        • +
      +
      • +
    Wie funktioniert das Internet?
    -
    +

    Alice: 192.0.0.5

    Anfrage von 192.0.0.5
    Anfrage an 40.114.177.156
    http://duckduckgo.com/?q=mr.+robot+kostenloser+stream

    Wie funktioniert das Internet?
    -
    +

    WG-Lan: 72.132.28.123

    Anfrage von 72.132.28.123
    Anfrage an 40.114.177.156
    http://duckduckgo.com/?q=mr.+robot+kostenloser+stream

    Wie funktioniert das Internet?
    -
    +

    1&1-Gateway: 72.0.0.1

    hm, 40.irgendwas, dafür ist MSN verantwortlich.

    MSN-Gateway: 40.0.0.1

    40.114.177.156 ist doch Kunde bei mir! Ich hab denen die IP-Adresse gegeben, ich weiß welches Kabel dieses Paket lang muss.

    Wie funktioniert das Internet?
    -
    +

    duckduckgo.com: 40.114.177.156

    Antwort an 72.132.28.123

    <html> @@ -191,79 +199,55 @@ http://bs.to/serie/Mr-Robot </html>
    Wie funktioniert das Internet?
    -
    +

    Szenario 3: Alice will Mr. Robot gucken

    duckduckgo kann sich setzen ;)

    Neue Rollen:

      -
    • -

      notice.cuii.info: 72.190.63.222

      -
      • -
    • -

      quad9: 9.9.9.9

      -
      • -
    • -

      DNS-Root-Server: 40.36.148.17

      -
      • -
    • -

      tonic.to: 40.28.204.240

      -
      • -
    • -

      bs.to: 40.115.31.20

      -
      • -
    • -

      voe.sx: 72.2.163.208

      -
      • -
    • -

      Alice: 192.0.0.5

      -
      • -
    • -

      WG-Lan: 72.132.28.123, 192.0.0.1

      -
      • -
    • -

      1&1-Gateway 72.0.0.1

      -
      • -
    • -

      1&1-DNS 72.1.0.1

      -
      • +
    • notice.cuii.info: 72.190.63.222
      • +
    • quad9: 9.9.9.9
      • +
    • DNS-Root-Server: 40.36.148.17
      • +
    • tonic.to: 40.28.204.240
      • +
    • bs.to: 40.115.31.20
      • +
    • voe.sx: 72.2.163.208
    Wie funktioniert das Internet?
    -
    +

    Alice: 192.0.0.5

    Anfrage von 192.0.0.5
    DNS-Anfrage an 192.0.0.1
    IP-Adresse (A) von bs.to

    Wie funktioniert das Internet?
    -
    +

    WG-Lan: 72.132.28.123

    Anfrage von 72.132.28.123
    DNS-Anfrage an 72.1.0.1
    IP-Adresse (A) von bs.to

    Wie funktioniert das Internet?
    -
    +

    1&1-DNS: 72.1.0.1

    Antwort an 72.132.28.123
    A von bs.to: 72.190.63.222

    Wie funktioniert das Internet?
    -
    +

    Alice: 192.0.0.5

    Anfrage von 192.0.0.5
    Anfrage an 72.190.63.222
    http://bs.to/serie/Mr-Robot

    Wie funktioniert das Internet?
    -
    +

    WG-Lan: 72.132.28.123

    Anfrage von 72.132.28.123
    Anfrage an 72.190.63.222
    http://bs.to/serie/Mr-Robot

    Wie funktioniert das Internet?
    -
    +

    notice.cuii.info: 72.190.63.222

    Antwort an 72.132.28.123

    <html> @@ -271,7 +255,7 @@ Diese Webseite ist aus urheberrechtlichen Gründen nicht verfügbar. </html>
    Wie funktioniert das Internet?
    -
    +

    WG-Lan: 192.0.0.1

    Antwort an 192.0.0.5

    <html> @@ -279,28 +263,28 @@ Diese Webseite ist aus urheberrechtlichen Gründen nicht verfügbar. </html>
    Wie funktioniert das Internet?
    -
    +

    Alice: 192.0.0.5

    Anfrage von 192.0.0.5
    DNS-Anfrage an 9.9.9.9
    IP-Adresse (A) von bs.to

    Wie funktioniert das Internet?
    -
    +

    WG-Lan: 72.132.28.123

    Anfrage von 72.132.28.123
    DNS-Anfrage an 9.9.9.9
    IP-Adresse (A) von bs.to

    Wie funktioniert das Internet?
    -
    +

    quad9: 9.9.9.9

    Anfrage von 9.9.9.9
    DNS-Anfrage an 40.36.148.17
    NS-Server (NS) von .to

    Wie funktioniert das Internet?
    -
    +

    TLD (Top-Level-Domain)

    Domains sind hierarchisch gegliedert; Top-Level-Domains sind die höchste Ebene der Hierarchie, der Teil ganz rechts in der Domain.

    z.B. .org, .de, .net, .com

    @@ -309,52 +293,52 @@ NS-Server (NS) von .to

    z.B. mail.riseup.net, www.riseup.net, staging.bots.delta.chat

    Wie funktioniert das Internet?
    -
    +

    DNS-Root-Server: 40.36.148.17

    Antwort an 9.9.9.9
    NS von .to: 40.28.204.240

    Wie funktioniert das Internet?
    -
    +

    quad9: 9.9.9.9

    Anfrage von 9.9.9.9
    DNS-Anfrage an 40.36.148.17
    IP-Adresse (A) von bs.to

    Wie funktioniert das Internet?
    -
    +

    tonic.to: 40.28.204.240

    Antwort an 9.9.9.9
    A von bs.to: 40.115.31.20

    Wie funktioniert das Internet?
    -
    +

    quad9: 9.9.9.9

    Antwort an 72.132.28.123
    A von bs.to: 40.115.31.20

    Wie funktioniert das Internet?
    -
    +

    WG-Lan: 192.0.0.1

    Antwort an 192.0.0.5
    A von bs.to: 40.115.31.20

    Wie funktioniert das Internet?
    -
    +

    Alice: 192.0.0.5

    Anfrage von 192.0.0.5
    Anfrage an 40.115.31.20
    http://bs.to/serie/Mr-Robot

    Wie funktioniert das Internet?
    -
    +

    WG-Lan: 72.132.28.123

    Anfrage von 72.132.28.123
    Anfrage an 40.115.31.20
    http://bs.to/serie/Mr-Robot

    Wie funktioniert das Internet?
    -
    +

    bs.to: 40.115.31.20

    Antwort an 72.132.28.123

    <html> @@ -362,7 +346,7 @@ Link zum Stream: https://voe.sx/rvaw00e9ibxl </html>
    Wie funktioniert das Internet?
    -
    +

    WG-Lan: 192.0.0.1

    Antwort an 192.0.0.5

    <html> @@ -370,53 +354,53 @@ Link zum Stream: https://voe.sx/rvaw00e9ibxl </html>
    Wie funktioniert das Internet?
    -
    +

    Alice: 192.0.0.5

    Anfrage von 192.0.0.5
    DNS-Anfrage an 9.9.9.9
    IP-Adresse (A) von voe.sx

    Wie funktioniert das Internet?
    -
    +

    WG-Lan: 72.132.28.123

    Anfrage von 72.132.28.123
    DNS-Anfrage an 9.9.9.9
    IP-Adresse (A) von voe.sx

    Wie funktioniert das Internet?
    -
    +

    quad9: 9.9.9.9

    Antwort an 72.132.28.123
    A von voe.sx: 72.2.163.208

    Wie funktioniert das Internet?
    -
    +

    WG-Lan: 192.0.0.1

    Antwort an 192.0.0.5
    A von voe.sx: 72.2.163.208

    Wie funktioniert das Internet?
    -
    +

    Alice: 192.0.0.5

    Anfrage von 192.0.0.5
    Anfrage an 72.2.163.208
    HTTPS-Zertifikat von voe.sx

    Wie funktioniert das Internet?
    -
    +

    WG-Lan: 72.132.28.123

    Anfrage von 72.132.28.123
    Anfrage an 72.2.163.208
    HTTPS-Zertifikat von voe.sx

    Wie funktioniert das Internet?
    -
    +

    voe.sx: 72.2.163.208

    Antwort an 72.132.28.123
    HTTPS-Zertifikat

    Wie funktioniert das Internet?
    -
    +

    Alice: 192.0.0.5

    Anfrage von 192.0.0.5
    Anfrage an 72.2.163.208

    @@ -424,7 +408,7 @@ Anfrage an 72.2.163.208

    https://voe.sx/rvaw00e9ibxl

    Wie funktioniert das Internet?
    -
    +

    WG-Lan: 72.132.28.123

    Anfrage von 72.132.28.123
    Anfrage an 72.2.163.208

    @@ -432,7 +416,7 @@ Anfrage an 72.2.163.208

    https://voe.sx/rvaw00e9ibxl

    Wie funktioniert das Internet?
    -
    +

    voe.sx: 72.2.163.208

    Antwort an 72.132.28.123

    Inhalt überklebt mit leerem DIN-A4-Papier:

    @@ -442,7 +426,7 @@ Mr. Robot Staffel 1, Folge 1.mp4
    Wie funktioniert das Internet?
    -
    +

    WG-Lan: 72.132.28.123

    Antwort an 192.0.0.5

    Inhalt überklebt mit leerem DIN-A4-Papier:

    @@ -452,10 +436,209 @@ Mr. Robot Staffel 1, Folge 1.mp4
    Wie funktioniert das Internet?
    -
    +

    Screenshot of Mr. Robot

    Wie funktioniert das Internet?
    +
    +

    Szenario 4: Alice schreibt eine E-Mail an einen Anwalt, mit der roten Hilfe in CC

    +

    Rollen:

    +
      +
    • Alice: 192.0.0.5
      • +
    • WG-Lan: 72.132.28.123, 192.0.0.1
      • +
    • 1&1-Gateway: 72.0.0.1
      • +
    • 1&1-DNS: 72.1.0.1
      • +
    • mail.riseup.net: 40.252.153.70
      • +
    • quad9: 9.9.9.9
      • +
    • MSN-Gateway: 40.0.0.1
      • +
    • gmail.com: 40.17.203.229
      • +
    • Bob der Anwalt: 72.13.12.23
      • +
    • Rote Hilfe: 72.28.55.2
      • +
    +
    Wie funktioniert das Internet?
    +
    +
    +

    Alice: 192.0.0.5

    +

    Anfrage von 192.0.0.5

    +

    WG-Lan: 72.132.28.123

    +

    Anfrage von 72.132.28.123
    +DNS-Anfrage an 9.9.9.9
    +IP-Adresse (A) von mail.riseup.net

    +
    Wie funktioniert das Internet?
    +
    +
    +

    quad9: 9.9.9.9

    +

    Antwort an 72.132.28.123
    +A von mail.riseup.net: 40.252.153.70

    +
    Wie funktioniert das Internet?
    +
    +
    +

    Alice: 192.0.0.5

    +

    Anfrage von 192.0.0.5

    +

    WG-Lan: 72.132.28.123

    +

    Anfrage von 72.132.28.123
    +Anfrage an 40.252.153.70
    +HTTPS-Zertifikat von mail.riseup.net

    +
    Wie funktioniert das Internet?
    +
    +
    +

    mail.riseup.net: 40.252.153.70

    +

    Antwort an 72.132.28.123
    +HTTPS-Zertifikat

    +
    Wie funktioniert das Internet?
    +
    +
    +

    Alice: 192.0.0.5

    +

    Anfrage von 192.0.0.5

    +

    WG-Lan: 72.132.28.123

    +

    Anfrage von 72.132.28.123
    +Anfrage an 40.252.153.70

    +

    Inhalt überklebt mit DIN-A4-Papier: https://mail.riseup.net

    +

    Login: alice@riseup.net
    +Password: s3cr3t!!

    +
    Wie funktioniert das Internet?
    +
    +
    +

    mail.riseup.net: 40.252.153.70

    +

    Antwort an 72.132.28.123

    +<html>Keine ungelesenen Nachrichten.</html> +
    Wie funktioniert das Internet?
    +
    +
    +

    Alice: 192.0.0.5

    +

    Anfrage von 192.0.0.5

    +

    WG-Lan: 72.132.28.123

    +

    Anfrage von 72.132.28.123
    +Anfrage an 40.252.153.70

    +

    Inhalt überklebt mit DIN-A4-Papier: https://mail.riseup.net

    +

    From: alice@riseup.net
    +To: bob-der-anwalt@gmail.com
    +CC: rote-hilfe-sdh@riseup.net
    +Subject: Hilfe!

    +
    Wie funktioniert das Internet?
    +
    +
    +

    SMTP (Simple Mail Transfer Protocol)

    +
      +
    • Ein Protokoll, mit dem man E-Mails versenden kann. SMTP wird zwischen Servern verwendet, um E-Mails von riseup.net zu gmail.com zu schicken, aber kann auch von Clients benutzt werden, um bei ihrem Mail-Server eine E-Mail einzureichen.
      • +
    +

    IMAP

    +
      +
    • Ein Protokoll, mit dem Mail-Clients E-Mails von ihrem Mail-Server herunterladen können. Wird von fast allen E-Mail-Providern unterstützt (außer von manchen kommerziellen Providern, weil sie einem dann keine Werbung anzeigen können).
      • +
    +

    Protokoll

    +
      +
    • Überbegriff für Standards, über die unterschiedliche Server- und Client-Programme Daten austauschen können. Protokolle werden idR von NGOs wie der IETF standardisiert, und von Programmen eingebaut (implementiert). +
        +
      • Thunderbird und Delta Chat sind z.B. SMTP/IMAP-Clients, Browser sind HTTP/HTTPS-Clients, Element ist ein Matrix-Client.
        • +
      +
      • +
    +
    Wie funktioniert das Internet?
    +
    +
    +

    Was passiert nun mit der E-Mail?

    +
      +
    • riseup.net speichert sie in Alices Gesendet-Ordner.
      • +
    • riseup.net speichert sie in der Mailbox von rote-hilfe@riseup.net, wo sie per IMAP abgeholt werden kann.
      • +
    • riseup.net schickt sie per SMTP an gmail.com, weil die für Mails an bob-der-anwalt@gmail.com verantwortlich sind.
      • +
    +
    Wie funktioniert das Internet?
    +
    +
    +

    mail.riseup.net: 40.252.153.70

    +

    Anfrage von 40.252.153.70
    +DNS-Anfrage an 9.9.9.9
    +Mail-Verantwortlicher Server (MX) für @gmail.com

    +
    Wie funktioniert das Internet?
    +
    +
    +

    quad9: 9.9.9.9

    +

    Antwort an 40.252.153.70
    +MX für @gmail.com: m1.gmail.com

    +
    Wie funktioniert das Internet?
    +
    +
    +

    mail.riseup.net: 40.252.153.70

    +

    Anfrage von 40.252.153.70
    +DNS-Anfrage an 9.9.9.9
    +IP-Adresse (A) von m1.gmail.com

    +
    Wie funktioniert das Internet?
    +
    +
    +

    quad9: 9.9.9.9

    +

    Antwort an 40.252.153.70
    +A von m1.gmail.com: 40.17.203.229

    +
    Wie funktioniert das Internet?
    +
    +
    +

    mail.riseup.net: 40.252.153.70

    +

    Anfrage von 40.252.153.70
    +Anfrage an 40.17.203.229

    +

    TLS-Zertifikat für m1.gmail.com

    +
    Wie funktioniert das Internet?
    +
    +
    +

    m1.gmail.com: 40.17.203.229

    +

    Antwort an 40.252.153.70
    +TLS-Zertifikat

    +
    Wie funktioniert das Internet?
    +
    +
    +

    mail.riseup.net: 40.252.153.70

    +

    Anfrage von 40.252.153.70
    +SMTP-Mail an 40.17.203.229

    +

    mit weißem Papier überklebt:

    +

    From: alice@riseup.net
    +To: bob-der-anwalt@gmail.com
    +CC: rote-hilfe-sdh@riseup.net
    +Subject: Hilfe!

    +
    Wie funktioniert das Internet?
    +
    +
    +

    Bob der Anwalt: 72.13.12.23

    +

    Anfrage von 72.13.12.23
    +DNS-Anfrage an 72.1.0.1
    +IP-Adresse (A) von m1.gmail.com

    +
    Wie funktioniert das Internet?
    +
    +
    +

    1&1-DNS: 72.1.0.1

    +

    Antwort an 72.13.12.23
    +A von m1.gmail.com: 40.17.203.229

    +
    Wie funktioniert das Internet?
    +
    +
    +

    Bob der Anwalt: 72.13.12.23

    +

    Anfrage von 72.13.12.23
    +Anfrage an 40.17.203.229
    +TLS-Zertifikat für m1.gmail.com

    +
    Wie funktioniert das Internet?
    +
    +
    +

    m1.gmail.com: 40.17.203.229

    +

    Antwort an 72.13.12.23
    +TLS-Zertifikat

    +
    Wie funktioniert das Internet?
    +
    +
    +

    Bob der Anwalt: 72.13.12.23

    +

    Anfrage von 72.13.12.23
    +Anfrage an 40.17.203.229

    +

    mit weißem Papier überklebt

    +

    IMAP fetch

    +
    Wie funktioniert das Internet?
    +
    +
    +

    m1.gmail.com: 40.17.203.229

    +

    Antwort an 72.13.12.23

    +

    mit weißem Papier überklebt:

    +

    From: alice@riseup.net
    +To: bob-der-anwalt@gmail.com
    +CC: rote-hilfe-sdh@riseup.net
    +Subject: Hilfe!

    +
    Wie funktioniert das Internet?
    +
     \ No newline at end of file diff --git a/internet.md b/internet.md index 99ec3b8..7f1222c 100644 --- a/internet.md +++ b/internet.md @@ -175,6 +175,11 @@ Beispiele: - Bob der Anwalt mietet sich einen Web-Server, um die Webseite seiner Kanzlei zu betreiben (zu hosten). - riseup.net betreiben sowohl Web-Server als auch Mail-Server, also Server die die Protokolle HTTP oder SMTP/IMAP (E-Mail) sprechen. +#### Client + +- Clients ist ein Überbegriff für alle Programme, über die man mit Servern interagieren kann. Während Server von "to serve" kommt, sind Clients die "Kund\*innen", die bedient werden. + - Ein Browser ist z.B. ein Web-Client, Thunderbird oder Delta Chat sind Mail-Clients. + --- ### Alice: 192.0.0.5 @@ -225,11 +230,6 @@ Neue Rollen: - bs.to: 40.115.31.20 - voe.sx: 72.2.163.208 -- Alice: 192.0.0.5 -- WG-Lan: 72.132.28.123, 192.0.0.1 -- 1&1-Gateway 72.0.0.1 -- 1&1-DNS 72.1.0.1 - --- ### Alice: 192.0.0.5 @@ -505,3 +505,237 @@ Mr. Robot Staffel 1, Folge 1.mp4 --- [![Screenshot of Mr. Robot](images/mr.robot.png)](https://voe.sx/rvaw00e9ibxl) + +--- + +## Szenario 4: Alice schreibt eine E-Mail an einen Anwalt, mit der roten Hilfe in CC + +Rollen: +- Alice: 192.0.0.5 +- WG-Lan: 72.132.28.123, 192.0.0.1 +- 1&1-Gateway: 72.0.0.1 +- 1&1-DNS: 72.1.0.1 +- mail.riseup.net: 40.252.153.70 +- quad9: 9.9.9.9 +- MSN-Gateway: 40.0.0.1 +- gmail.com: 40.17.203.229 +- Bob der Anwalt: 72.13.12.23 +- Rote Hilfe: 72.28.55.2 + +--- + +### Alice: 192.0.0.5 + +Anfrage von 192.0.0.5 + +### WG-Lan: 72.132.28.123 + +Anfrage von 72.132.28.123 +DNS-Anfrage an 9.9.9.9 +IP-Adresse (A) von mail.riseup.net + +--- + +### quad9: 9.9.9.9 + +Antwort an 72.132.28.123 +A von mail.riseup.net: 40.252.153.70 + +--- + +### Alice: 192.0.0.5 + +Anfrage von 192.0.0.5 + +### WG-Lan: 72.132.28.123 + +Anfrage von 72.132.28.123 +Anfrage an 40.252.153.70 +HTTPS-Zertifikat von mail.riseup.net + +--- + +### mail.riseup.net: 40.252.153.70 + +Antwort an 72.132.28.123 +HTTPS-Zertifikat + +--- + +### Alice: 192.0.0.5 + +Anfrage von 192.0.0.5 + +### WG-Lan: 72.132.28.123 + +Anfrage von 72.132.28.123 +Anfrage an 40.252.153.70 + +*Inhalt überklebt mit DIN-A4-Papier: https://mail.riseup.net* + +Login: alice@riseup.net +Password: s3cr3t!! + +--- + +### mail.riseup.net: 40.252.153.70 + +Antwort an 72.132.28.123 + +Keine ungelesenen Nachrichten. + +--- + +### Alice: 192.0.0.5 + +Anfrage von 192.0.0.5 + +### WG-Lan: 72.132.28.123 + +Anfrage von 72.132.28.123 +Anfrage an 40.252.153.70 + +*Inhalt überklebt mit DIN-A4-Papier: https://mail.riseup.net* + +From: alice@riseup.net +To: bob-der-anwalt@gmail.com +CC: rote-hilfe-sdh@riseup.net +Subject: Hilfe! + +--- + +#### SMTP (Simple Mail Transfer Protocol) + +- Ein Protokoll, mit dem man E-Mails versenden kann. SMTP wird zwischen Servern verwendet, um E-Mails von riseup.net zu gmail.com zu schicken, aber kann auch von Clients benutzt werden, um bei ihrem Mail-Server eine E-Mail einzureichen. + +#### IMAP + +- Ein Protokoll, mit dem Mail-Clients E-Mails von ihrem Mail-Server herunterladen können. Wird von fast allen E-Mail-Providern unterstützt (außer von manchen kommerziellen Providern, weil sie einem dann keine Werbung anzeigen können). + +#### Protokoll + +- Überbegriff für Standards, über die unterschiedliche Server- und Client-Programme Daten austauschen können. Protokolle werden idR von NGOs wie der IETF standardisiert, und von Programmen eingebaut (implementiert). + - Thunderbird und Delta Chat sind z.B. SMTP/IMAP-Clients, Browser sind HTTP/HTTPS-Clients, Element ist ein Matrix-Client. + +--- + +### Was passiert nun mit der E-Mail? + +- riseup.net speichert sie in Alices Gesendet-Ordner. +- riseup.net speichert sie in der Mailbox von rote-hilfe@riseup.net, wo sie per IMAP abgeholt werden kann. +- riseup.net schickt sie per SMTP an gmail.com, weil die für Mails an bob-der-anwalt@gmail.com verantwortlich sind. + +--- + +### mail.riseup.net: 40.252.153.70 + +Anfrage von 40.252.153.70 +DNS-Anfrage an 9.9.9.9 +Mail-Verantwortlicher Server (MX) für @gmail.com + +--- + +### quad9: 9.9.9.9 + +Antwort an 40.252.153.70 +MX für @gmail.com: m1.gmail.com + +--- + +### mail.riseup.net: 40.252.153.70 + +Anfrage von 40.252.153.70 +DNS-Anfrage an 9.9.9.9 +IP-Adresse (A) von m1.gmail.com + +--- + +### quad9: 9.9.9.9 + +Antwort an 40.252.153.70 +A von m1.gmail.com: 40.17.203.229 + +--- + +### mail.riseup.net: 40.252.153.70 + +Anfrage von 40.252.153.70 +Anfrage an 40.17.203.229 + +TLS-Zertifikat für m1.gmail.com + +--- + +### m1.gmail.com: 40.17.203.229 + +Antwort an 40.252.153.70 +TLS-Zertifikat + +--- + +### mail.riseup.net: 40.252.153.70 + +Anfrage von 40.252.153.70 +SMTP-Mail an 40.17.203.229 + +*mit weißem Papier überklebt:* + +From: alice@riseup.net +To: bob-der-anwalt@gmail.com +CC: rote-hilfe-sdh@riseup.net +Subject: Hilfe! + +--- + +### Bob der Anwalt: 72.13.12.23 + +Anfrage von 72.13.12.23 +DNS-Anfrage an 72.1.0.1 +IP-Adresse (A) von m1.gmail.com + +--- + +### 1&1-DNS: 72.1.0.1 + +Antwort an 72.13.12.23 +A von m1.gmail.com: 40.17.203.229 + +--- + +### Bob der Anwalt: 72.13.12.23 + +Anfrage von 72.13.12.23 +Anfrage an 40.17.203.229 +TLS-Zertifikat für m1.gmail.com + +--- + +### m1.gmail.com: 40.17.203.229 + +Antwort an 72.13.12.23 +TLS-Zertifikat + +--- + +### Bob der Anwalt: 72.13.12.23 + +Anfrage von 72.13.12.23 +Anfrage an 40.17.203.229 + +*mit weißem Papier überklebt* + +IMAP fetch + +--- + +### m1.gmail.com: 40.17.203.229 + +Antwort an 72.13.12.23 + +*mit weißem Papier überklebt:* + +From: alice@riseup.net +To: bob-der-anwalt@gmail.com +CC: rote-hilfe-sdh@riseup.net +Subject: Hilfe! +