Reflect Mine – \u00c1 handil<\/title>\n <style>\n :root {\n color-scheme: dark;\n background: #050505;\n }\n\n html {\n scroll-behavior: smooth;\n }\n\n body {\n margin: 0;\n min-height: 100vh;\n background:\n radial-gradient(circle at 14% 7%, rgba(11, 106, 154, 0.28), transparent 27rem),\n radial-gradient(circle at 88% 12%, rgba(255, 37, 37, 0.12), transparent 22rem),\n linear-gradient(180deg, #050505 0%, #111111 52%, #050505 100%);\n color: #f5f1e7;\n }\n\n #reflectMinePage {\n --bg: #050505;\n --panel: #c6c6c6;\n --panel-dark: #808080;\n --panel-darker: #404040;\n --panel-light: #ffffff;\n --text: #111111;\n --red: #ff2525;\n --blue: #071f7a;\n --cyan: #0b6a9a;\n --cream: #f5f1e7;\n --muted: #bdbdbd;\n --green: #008000;\n --yellow: #f7d94a;\n\n position: relative;\n left: 50%;\n transform: translateX(-50%);\n width: min(1600px, calc(100vw - 24px));\n max-width: none;\n margin: 0;\n background:\n linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),\n linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px),\n var(--bg);\n background-size: 22px 22px;\n color: var(--cream);\n font-family: Georgia, \"Times New Roman\", serif;\n padding: clamp(20px, 3vw, 42px) clamp(12px, 2.4vw, 26px) clamp(46px, 6vw, 72px);\n box-sizing: border-box;\n overflow: hidden;\n isolation: isolate;\n }\n\n #reflectMinePage::before {\n content: \"\";\n position: fixed;\n inset: 0;\n z-index: -1;\n pointer-events: none;\n background:\n linear-gradient(rgba(255,255,255,0.04) 50%, transparent 50%),\n radial-gradient(circle at 50% 0%, rgba(255,255,255,0.08), transparent 34rem);\n background-size: 100% 4px, auto;\n opacity: 0.32;\n mix-blend-mode: screen;\n }\n\n #reflectMinePage,\n #reflectMinePage * {\n box-sizing: border-box;\n }\n\n #reflectMinePage button {\n font: inherit;\n }\n\n #reflectMinePage .inner {\n max-width: 1420px;\n margin: 0 auto;\n }\n\n #reflectMinePage .mine-window,\n #reflectMinePage .hero-window,\n #reflectMinePage .figure-window {\n background: var(--panel);\n color: var(--text);\n border-style: solid;\n border-width: 4px;\n border-color: var(--panel-light) var(--panel-darker) var(--panel-darker) var(--panel-light);\n padding: 10px;\n box-shadow:\n 10px 10px 0 #000000,\n 18px 18px 0 rgba(255,255,255,0.06);\n margin: 0 0 38px;\n }\n\n #reflectMinePage .hero-window {\n margin-bottom: 42px;\n }\n\n #reflectMinePage .mine-topbar,\n #reflectMinePage .hero-topbar {\n background: linear-gradient(90deg, var(--blue), var(--cyan));\n color: #ffffff;\n padding: 8px 10px;\n font-family: Arial, Helvetica, sans-serif;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n font-weight: 900;\n letter-spacing: 0.04em;\n text-transform: uppercase;\n }\n\n #reflectMinePage .mine-title {\n display: flex;\n align-items: center;\n gap: 8px;\n min-width: 0;\n }\n\n #reflectMinePage .mine-title span:last-child {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n #reflectMinePage .mine-icon {\n width: 16px;\n height: 16px;\n flex: 0 0 16px;\n display: inline-block;\n background:\n linear-gradient(45deg, transparent 0 34%, #000 34% 46%, transparent 46% 100%),\n #d71920;\n border: 2px solid #ffffff;\n box-shadow: inset -2px -2px 0 #7a0000;\n }\n\n #reflectMinePage .mine-buttons {\n display: flex;\n gap: 5px;\n flex-shrink: 0;\n }\n\n #reflectMinePage .mine-btn {\n width: 22px;\n height: 22px;\n background: var(--panel);\n border-style: solid;\n border-width: 2px;\n border-color: var(--panel-light) var(--panel-darker) var(--panel-darker) var(--panel-light);\n display: grid;\n place-items: center;\n font-size: 13px;\n color: #111111;\n line-height: 1;\n }\n\n #reflectMinePage .mine-status,\n #reflectMinePage .hero-status {\n margin: 10px 0;\n padding: 10px;\n background: var(--panel);\n border-style: solid;\n border-width: 3px;\n border-color: var(--panel-darker) var(--panel-light) var(--panel-light) var(--panel-darker);\n display: grid;\n grid-template-columns: 1fr auto 1fr;\n align-items: center;\n gap: 12px;\n font-family: \"Courier New\", Courier, monospace;\n }\n\n #reflectMinePage .hero-status {\n grid-template-columns: auto minmax(0, 1fr) auto;\n }\n\n #reflectMinePage .counter {\n background: #070707;\n color: var(--red);\n padding: 7px 10px;\n font-size: clamp(19px, 2vw, 30px);\n font-weight: 900;\n letter-spacing: 0.1em;\n min-width: 94px;\n text-align: center;\n border: 2px inset #444444;\n text-shadow:\n 0 0 3px var(--red),\n 2px 2px 0 #560000;\n font-variant-numeric: tabular-nums;\n }\n\n #reflectMinePage .smiley,\n #reflectMinePage .quirk-button,\n #reflectMinePage .flag-button {\n background: #f7d94a;\n border-style: solid;\n border-width: 3px;\n border-color: var(--panel-light) var(--panel-darker) var(--panel-darker) var(--panel-light);\n color: #111111;\n cursor: pointer;\n display: grid;\n place-items: center;\n line-height: 1;\n }\n\n #reflectMinePage .smiley {\n width: 48px;\n height: 48px;\n border-radius: 0;\n font-size: 26px;\n }\n\n #reflectMinePage .smiley:active,\n #reflectMinePage .quirk-button:active,\n #reflectMinePage .flag-button:active,\n #reflectMinePage .quirk-tile:active {\n border-color: var(--panel-darker) var(--panel-light) var(--panel-light) var(--panel-darker);\n transform: translate(1px, 1px);\n }\n\n #reflectMinePage .status-center {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 8px;\n min-width: 0;\n }\n\n #reflectMinePage .status-message {\n min-height: 48px;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 8px 12px;\n background: #111111;\n border: 2px inset #444444;\n color: #d8ffe9;\n font-size: clamp(13px, 1.25vw, 16px);\n line-height: 1.35;\n text-align: center;\n }\n\n #reflectMinePage .quirk-button {\n width: 42px;\n height: 42px;\n background: var(--panel);\n font-family: Arial, Helvetica, sans-serif;\n font-size: 20px;\n font-weight: 900;\n }\n\n #reflectMinePage .hero-body {\n display: grid;\n grid-template-columns: minmax(0, 1fr) minmax(290px, 0.48fr);\n gap: 18px;\n padding: clamp(18px, 2.5vw, 30px);\n background: #111111;\n color: #f5f1e7;\n border-style: solid;\n border-width: 4px;\n border-color: var(--panel-darker) var(--panel-light) var(--panel-light) var(--panel-darker);\n }\n\n #reflectMinePage h1 {\n margin: 0 0 12px;\n font-family: Arial, Helvetica, sans-serif;\n font-size: clamp(36px, 6vw, 86px);\n line-height: 0.93;\n color: #ffffff;\n text-transform: uppercase;\n letter-spacing: 0;\n text-shadow:\n 4px 4px 0 #071f7a,\n 8px 8px 0 #000000;\n }\n\n #reflectMinePage .subline {\n max-width: 860px;\n margin: 0;\n font-family: \"Courier New\", Courier, monospace;\n color: #d8ffe9;\n font-size: clamp(15px, 1.4vw, 18px);\n line-height: 1.45;\n }\n\n #reflectMinePage .stamp {\n min-height: 100%;\n display: grid;\n grid-template-rows: 1fr auto;\n gap: 12px;\n }\n\n #reflectMinePage .stamp-mark {\n min-height: 150px;\n background: var(--panel);\n color: #111111;\n border-style: solid;\n border-width: 4px;\n border-color: var(--panel-light) var(--panel-darker) var(--panel-darker) var(--panel-light);\n display: grid;\n place-items: center;\n font-family: Arial, Helvetica, sans-serif;\n font-size: clamp(56px, 8vw, 110px);\n font-weight: 900;\n box-shadow: 7px 7px 0 #000000;\n }\n\n #reflectMinePage .quirk-board {\n display: grid;\n grid-template-columns: repeat(10, minmax(0, 1fr));\n gap: 0;\n background: var(--panel-dark);\n border-style: solid;\n border-width: 4px;\n border-color: var(--panel-darker) var(--panel-light) var(--panel-light) var(--panel-darker);\n align-self: end;\n }\n\n #reflectMinePage .quirk-tile {\n appearance: none;\n aspect-ratio: 1 \/ 1;\n min-height: 38px;\n border-style: solid;\n border-width: 3px;\n border-color: var(--panel-light) var(--panel-darker) var(--panel-darker) var(--panel-light);\n background: var(--panel);\n color: #111111;\n font-family: Arial, Helvetica, sans-serif;\n font-size: clamp(14px, 1.7vw, 22px);\n font-weight: 900;\n cursor: pointer;\n display: grid;\n place-items: center;\n }\n\n #reflectMinePage .quirk-tile[data-color=\"blue\"] { color: #0000cc; }\n #reflectMinePage .quirk-tile[data-color=\"green\"] { color: #008000; }\n #reflectMinePage .quirk-tile[data-color=\"red\"] { color: #cc0000; }\n #reflectMinePage .quirk-tile.is-popped {\n background: #bdbdbd;\n border-width: 1px;\n border-color: #8b8b8b;\n }\n\n #reflectMinePage .intro-card,\n #reflectMinePage .reflect-card,\n #reflectMinePage .tools-card,\n #reflectMinePage .principles-copy {\n position: relative;\n background: #111111;\n border: 1px solid rgba(255,255,255,0.16);\n padding: clamp(20px, 3vw, 34px);\n }\n\n #reflectMinePage .intro-card {\n margin: 34px 0;\n }\n\n #reflectMinePage h2 {\n margin: 0 0 14px;\n font-family: Arial, Helvetica, sans-serif;\n font-size: clamp(24px, 2.6vw, 38px);\n line-height: 1.08;\n color: #ffffff;\n text-transform: uppercase;\n letter-spacing: 0.02em;\n }\n\n #reflectMinePage p {\n font-size: clamp(17px, 1.35vw, 20px);\n line-height: 1.65;\n margin: 0 0 16px;\n }\n\n #reflectMinePage p:last-child {\n margin-bottom: 0;\n }\n\n #reflectMinePage .flag-button {\n position: absolute;\n top: -16px;\n right: 10px;\n width: 34px;\n height: 34px;\n background: var(--panel);\n font-family: Arial, Helvetica, sans-serif;\n font-size: 18px;\n font-weight: 900;\n z-index: 3;\n }\n\n #reflectMinePage .content-beacon.is-flagged .flag-button {\n background: #ffdddd;\n color: #cc0000;\n }\n\n #reflectMinePage .content-beacon {\n position: relative;\n scroll-margin-top: 54px;\n }\n\n #reflectMinePage .content-beacon::after {\n content: attr(data-beacon);\n position: absolute;\n bottom: calc(100% - 2px);\n left: 14px;\n z-index: 4;\n background: #111111;\n color: var(--yellow);\n border: 2px solid var(--yellow);\n padding: 4px 8px;\n font-family: \"Courier New\", Courier, monospace;\n font-size: 12px;\n font-weight: 900;\n opacity: 0;\n transform: translateY(7px);\n transition:\n opacity 0.22s ease,\n transform 0.22s ease;\n pointer-events: none;\n }\n\n #reflectMinePage .content-beacon.is-seen::after,\n #reflectMinePage .content-beacon.is-scanned::after {\n opacity: 1;\n transform: translateY(0);\n }\n\n #reflectMinePage .content-beacon.is-scanned {\n animation: scanFlash 0.85s steps(2, end) 2;\n }\n\n @keyframes scanFlash {\n 50% {\n filter: brightness(1.34) saturate(1.25);\n }\n }\n\n #reflectMinePage .mine-video-frame {\n padding: 10px;\n background:\n linear-gradient(90deg, rgba(0,0,0,0.12) 1px, transparent 1px),\n linear-gradient(rgba(0,0,0,0.12) 1px, transparent 1px),\n #9f9f9f;\n background-size: 28px 28px;\n border-style: solid;\n border-width: 4px;\n border-color: var(--panel-darker) var(--panel-light) var(--panel-light) var(--panel-darker);\n }\n\n #reflectMinePage .video-ratio {\n position: relative;\n width: 100%;\n aspect-ratio: 16 \/ 9;\n background: #000000;\n overflow: hidden;\n }\n\n #reflectMinePage iframe {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n border: 0;\n }\n\n #reflectMinePage .mine-caption {\n margin: 12px 4px 2px;\n font-family: Arial, Helvetica, sans-serif;\n font-size: 14px;\n color: #222222;\n line-height: 1.45;\n }\n\n #reflectMinePage .figure-window {\n position: relative;\n margin: 38px 0;\n box-shadow: 8px 8px 0 #000000;\n }\n\n #reflectMinePage .figure-topbar {\n background: linear-gradient(90deg, #111111, #555555);\n color: #ffffff;\n padding: 7px 10px;\n font-family: Arial, Helvetica, sans-serif;\n font-size: 14px;\n font-weight: 900;\n text-transform: uppercase;\n letter-spacing: 0.04em;\n }\n\n #reflectMinePage .figure-body {\n margin-top: 10px;\n padding: 12px;\n background: #000000;\n border-style: solid;\n border-width: 4px;\n border-color: var(--panel-darker) var(--panel-light) var(--panel-light) var(--panel-darker);\n }\n\n #reflectMinePage .figure-body img {\n display: block;\n width: 100%;\n height: auto;\n background: #000000;\n }\n\n #reflectMinePage .figcaption {\n margin: 12px 4px 0;\n color: #222222;\n font-family: Arial, Helvetica, sans-serif;\n font-size: 15px;\n line-height: 1.45;\n }\n\n #reflectMinePage .principles-window {\n margin: 42px 0;\n }\n\n #reflectMinePage .principles-layout {\n display: grid;\n grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr);\n gap: 24px;\n align-items: start;\n }\n\n #reflectMinePage .principles-copy strong,\n #reflectMinePage .tools-card strong {\n color: #ffffff;\n }\n\n #reflectMinePage .principles-image-card {\n background: var(--panel);\n color: #111111;\n border-style: solid;\n border-width: 4px;\n border-color: var(--panel-light) var(--panel-darker) var(--panel-darker) var(--panel-light);\n padding: 10px;\n box-shadow: 8px 8px 0 #000000;\n }\n\n #reflectMinePage .principles-image-inner {\n background: #000000;\n padding: 10px;\n border-style: solid;\n border-width: 4px;\n border-color: var(--panel-darker) var(--panel-light) var(--panel-light) var(--panel-darker);\n }\n\n #reflectMinePage .principles-image-inner img {\n display: block;\n width: 100%;\n height: auto;\n }\n\n #reflectMinePage .tools-card {\n margin: 38px 0;\n }\n\n #reflectMinePage .tools-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 14px;\n margin-top: 20px;\n }\n\n #reflectMinePage .tool-tile {\n background: var(--panel);\n color: #111111;\n padding: 16px 14px;\n font-family: Arial, Helvetica, sans-serif;\n border-style: solid;\n border-width: 3px;\n border-color: var(--panel-light) var(--panel-darker) var(--panel-darker) var(--panel-light);\n }\n\n #reflectMinePage .tool-tile h3 {\n margin: 0 0 8px;\n font-size: 18px;\n text-transform: uppercase;\n }\n\n #reflectMinePage .tool-tile p {\n margin: 0;\n font-family: Arial, Helvetica, sans-serif;\n font-size: 15px;\n line-height: 1.45;\n }\n\n #reflectMinePage .reflect-grid {\n display: grid;\n grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);\n gap: 24px;\n margin-top: 40px;\n }\n\n #reflectMinePage .side-card {\n background: var(--panel);\n color: #111111;\n font-family: Arial, Helvetica, sans-serif;\n border-style: solid;\n border-width: 4px;\n border-color: var(--panel-light) var(--panel-darker) var(--panel-darker) var(--panel-light);\n padding: clamp(18px, 2.4vw, 30px);\n box-shadow: 8px 8px 0 #000000;\n }\n\n #reflectMinePage .side-card h3 {\n margin: 0 0 14px;\n font-size: 23px;\n line-height: 1.1;\n text-transform: uppercase;\n }\n\n #reflectMinePage .side-card ul {\n padding-left: 20px;\n margin: 0;\n }\n\n #reflectMinePage .side-card li {\n margin-bottom: 11px;\n line-height: 1.45;\n font-size: 16px;\n }\n\n #reflectMinePage .mini-blocks {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 10px;\n margin: 24px 0 0;\n }\n\n #reflectMinePage .mini-block {\n background: var(--panel);\n color: #111111;\n padding: 14px 12px;\n font-family: Arial, Helvetica, sans-serif;\n font-weight: 900;\n text-align: center;\n border-style: solid;\n border-width: 3px;\n border-color: var(--panel-light) var(--panel-darker) var(--panel-darker) var(--panel-light);\n }\n\n #reflectMinePage .mine-strip {\n display: grid;\n grid-template-columns: repeat(12, 1fr);\n margin: 34px 0 0;\n border-style: solid;\n border-width: 4px;\n border-color: var(--panel-darker) var(--panel-light) var(--panel-light) var(--panel-darker);\n background: var(--panel-dark);\n }\n\n #reflectMinePage .mine-strip span {\n aspect-ratio: 1 \/ 1;\n min-height: 28px;\n display: grid;\n place-items: center;\n background: var(--panel);\n color: #111111;\n font-family: Arial, Helvetica, sans-serif;\n font-size: 13px;\n font-weight: 900;\n border-style: solid;\n border-width: 2px;\n border-color: var(--panel-light) var(--panel-darker) var(--panel-darker) var(--panel-light);\n }\n\n #reflectMinePage .mine-strip span:nth-child(3n),\n #reflectMinePage .mini-block:nth-child(1) {\n color: #0000cc;\n }\n\n #reflectMinePage .mine-strip span:nth-child(4n),\n #reflectMinePage .mini-block:nth-child(2) {\n color: #008000;\n }\n\n #reflectMinePage .mine-strip span:nth-child(7n),\n #reflectMinePage .mini-block:nth-child(3) {\n color: #cc0000;\n }\n\n #reflectMinePage .pixel-toast {\n position: fixed;\n left: 50%;\n top: 18px;\n z-index: 20;\n transform: translate(-50%, -160%);\n background: #111111;\n color: #ffffff;\n border-style: solid;\n border-width: 4px;\n border-color: var(--panel-light) var(--panel-darker) var(--panel-darker) var(--panel-light);\n padding: 12px 18px;\n font-family: Arial, Helvetica, sans-serif;\n font-weight: 900;\n text-transform: uppercase;\n letter-spacing: 0.03em;\n box-shadow: 8px 8px 0 #000000;\n transition: transform 0.28s steps(5, end);\n }\n\n #reflectMinePage .pixel-toast.is-visible {\n transform: translate(-50%, 0);\n }\n\n #reflectMinePage.is-glitch .hero-window,\n #reflectMinePage.is-glitch .mine-window,\n #reflectMinePage.is-glitch .figure-window,\n #reflectMinePage.is-glitch .principles-image-card,\n #reflectMinePage.is-glitch .side-card {\n animation: tinyGlitch 0.18s steps(2, end) 4;\n }\n\n @keyframes tinyGlitch {\n 50% {\n transform: translate(2px, -1px);\n filter: hue-rotate(22deg);\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n html {\n scroll-behavior: auto;\n }\n\n #reflectMinePage *,\n #reflectMinePage *::before,\n #reflectMinePage *::after {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n scroll-behavior: auto !important;\n transition-duration: 0.01ms !important;\n }\n }\n\n @media (max-width: 1050px) {\n #reflectMinePage .hero-body {\n grid-template-columns: 1fr;\n }\n\n #reflectMinePage .stamp-mark {\n min-height: 110px;\n }\n }\n\n @media (max-width: 900px) {\n #reflectMinePage .principles-layout,\n #reflectMinePage .reflect-grid,\n #reflectMinePage .tools-grid {\n grid-template-columns: 1fr;\n }\n\n #reflectMinePage .mini-blocks {\n grid-template-columns: 1fr;\n }\n }\n\n @media (max-width: 720px) {\n #reflectMinePage .hero-status {\n grid-template-columns: 1fr;\n }\n\n #reflectMinePage .status-center {\n order: -1;\n }\n\n #reflectMinePage .counter {\n width: 100%;\n }\n\n #reflectMinePage .quirk-board {\n grid-template-columns: repeat(5, 1fr);\n }\n }\n\n @media (max-width: 640px) {\n #reflectMinePage {\n width: calc(100vw - 12px);\n padding: 18px 8px 42px;\n }\n\n #reflectMinePage .mine-window,\n #reflectMinePage .hero-window,\n #reflectMinePage .figure-window,\n #reflectMinePage .principles-image-card,\n #reflectMinePage .side-card {\n box-shadow: 5px 5px 0 #000000;\n }\n\n #reflectMinePage .mine-status {\n gap: 8px;\n padding: 8px;\n }\n\n #reflectMinePage .counter {\n min-width: 62px;\n padding: 6px;\n font-size: 20px;\n letter-spacing: 0.04em;\n }\n\n #reflectMinePage .smiley {\n width: 42px;\n height: 42px;\n font-size: 23px;\n }\n\n #reflectMinePage .mine-video-frame,\n #reflectMinePage .figure-body,\n #reflectMinePage .principles-image-inner {\n padding: 6px;\n }\n\n #reflectMinePage .mine-strip {\n grid-template-columns: repeat(6, 1fr);\n }\n\n #reflectMinePage .mine-strip span {\n min-height: 24px;\n font-size: 12px;\n }\n }\n <\/style>\n<\/head>\n<body>\n <section id=\"reflectMinePage\">\n <div class=\"pixel-toast\" data-toast aria-live=\"polite\">Reflect mode<\/div>\n\n <div class=\"inner\">\n <header class=\"hero-window\">\n <div class=\"hero-topbar\">\n <div class=\"mine-title\">\n <span class=\"mine-icon\" aria-hidden=\"true\"><\/span>\n <span>reflect_page.exe<\/span>\n <\/div>\n\n <div class=\"mine-buttons\" aria-hidden=\"true\">\n <span class=\"mine-btn\">_<\/span>\n <span class=\"mine-btn\">\u25a1<\/span>\n <span class=\"mine-btn\">\u00d7<\/span>\n <\/div>\n <\/div>\n\n <div class=\"hero-status\">\n <div class=\"counter\" data-flag-count>000<\/div>\n\n <div class=\"status-center\">\n <button class=\"smiley\" type=\"button\" data-action=\"mood\" aria-label=\"Skift hum\u00f8r\" title=\"Skift hum\u00f8r\">\ud83d\ude42<\/button>\n <button class=\"quirk-button\" type=\"button\" data-action=\"scan\" aria-label=\"Scan r\u00f8d tr\u00e5d\" title=\"Scan r\u00f8d tr\u00e5d\">?<\/button>\n <button class=\"quirk-button\" type=\"button\" data-action=\"glitch\" aria-label=\"Pixel glitch\" title=\"Pixel glitch\">\u2739<\/button>\n <\/div>\n\n <div class=\"counter\" data-scroll-count>000<\/div>\n <\/div>\n\n <div class=\"hero-body\">\n <div>\n <h1>Reflect Mine<\/h1>\n <p class=\"subline\">\u00c1 handil-projektet som en Minesweeper-inspireret reflect-side. Formen passer til processen: Jeg afd\u00e6kker \u00e9t felt ad gangen, markerer vigtige spor og bruger den r\u00f8de tr\u00e5d til at forbinde empiri, designprincipper, prototypefamilie og n\u00e6ste iteration.<\/p>\n <\/div>\n\n <div class=\"stamp\" aria-label=\"Temafelter\">\n <div class=\"stamp-mark\" aria-hidden=\"true\">\u00c1<\/div>\n <div class=\"quirk-board\">\n <button class=\"quirk-tile\" type=\"button\" data-target=\"video-window\" data-note=\"Video-sporet er \u00e5bnet.\" data-color=\"blue\">1<\/button>\n <button class=\"quirk-tile\" type=\"button\" data-target=\"intro-card\" data-note=\"Kort om filmen er markeret.\"> <\/button>\n <button class=\"quirk-tile\" type=\"button\" data-target=\"movement-figure\" data-note=\"Projektbev\u00e6gelsen blinker.\" data-color=\"green\">2<\/button>\n <button class=\"quirk-tile\" type=\"button\" data-target=\"principles-window\" data-note=\"Designprincipperne er flagged.\" data-color=\"red\">\u2691<\/button>\n <button class=\"quirk-tile\" type=\"button\" data-target=\"tools-card\" data-note=\"V\u00e6rkt\u00f8jerne er fundet.\"> <\/button>\n <button class=\"quirk-tile\" type=\"button\" data-target=\"reflect-card\" data-note=\"Tilbage til indgangen.\" data-color=\"blue\">1<\/button>\n <button class=\"quirk-tile\" type=\"button\" data-action-tile=\"glitch\" data-note=\"Bare en visuel mine. Ingen eksplosion.\" data-color=\"red\">\u2739<\/button>\n <button class=\"quirk-tile\" type=\"button\" data-target=\"iteration-card\" data-note=\"N\u00e6ste iteration venter.\"> <\/button>\n <button class=\"quirk-tile\" type=\"button\" data-target=\"movement-figure\" data-note=\"Den r\u00f8de tr\u00e5d g\u00e5r gennem figuren.\" data-color=\"green\">3<\/button>\n <button class=\"quirk-tile\" type=\"button\" data-target=\"video-window\" data-note=\"Reflect-videoen ligger stadig \u00f8verst.\">\u2691<\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/header>\n\n <div class=\"mine-window content-beacon\" id=\"video-window\" data-beacon=\"film\">\n <button class=\"flag-button\" type=\"button\" aria-label=\"Flag videoen\" title=\"Flag videoen\">\u2691<\/button>\n <div class=\"mine-topbar\">\n <div class=\"mine-title\">\n <span class=\"mine-icon\" aria-hidden=\"true\"><\/span>\n <span>reflect_video.exe<\/span>\n <\/div>\n\n <div class=\"mine-buttons\" aria-hidden=\"true\">\n <span class=\"mine-btn\">_<\/span>\n <span class=\"mine-btn\">\u25a1<\/span>\n <span class=\"mine-btn\">\u00d7<\/span>\n <\/div>\n <\/div>\n\n <div class=\"mine-status\">\n <div class=\"counter\">001<\/div>\n <div class=\"smiley\" aria-hidden=\"true\">\ud83d\ude42<\/div>\n <div class=\"counter\">999<\/div>\n <\/div>\n\n <div class=\"mine-video-frame\">\n <div class=\"video-ratio\">\n <iframe\n src=\"https:\/\/www.youtube.com\/embed\/uBbl610ZLB0?rel=0\"\n title=\"Reflect-video om designprojektet ved \u00c1 handil\"\n loading=\"lazy\"\n allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\n allowfullscreen>\n <\/iframe>\n <\/div>\n <\/div>\n\n <p class=\"mine-caption\">\n Videoen er en kort reflect-fort\u00e6lling om projektets bev\u00e6gelse fra et bredt problemfelt til en mere sk\u00e6rpet designretning.\n <\/p>\n <\/div>\n\n\n <p class=\"mine-caption\">\n Videoen er en kort reflect-fort\u00e6lling om projektets bev\u00e6gelse fra et bredt problemfelt til en mere sk\u00e6rpet designretning.\n <\/p>\n <\/div>\n\n <div class=\"intro-card content-beacon\" id=\"intro-card\" data-beacon=\"intro\">\n <button class=\"flag-button\" type=\"button\" aria-label=\"Flag kort om filmen\" title=\"Flag kort om filmen\">\u2691<\/button>\n <h2>Reflect som tilbageblik og ny retning<\/h2>\n <p>\n Reflect-fasen samler ikke projektet ved bare at vise, hvad jeg endte med at lave. Den viser, hvordan designprocessen har flyttet sig, og hvordan empirien har \u00e6ndret min forst\u00e5else af problemet.\n <\/p>\n <p>\n I begyndelsen var projektet \u00e5bent og rettet mod teknologi i butikker. Undervejs viste observationer, interviews, go-alongs og mockup-afpr\u00f8vning, at den vigtigste udfordring ved \u00c1 handil ikke l\u00e5 i mere digital information, men i ankomsten: hvorn\u00e5r bes\u00f8gende bliver i tvivl, og hvorn\u00e5r stedet begynder at give mening.\n <\/p>\n <p>\n Figuren nedenfor samler denne bev\u00e6gelse fra bredt problemfelt til sk\u00e6rpet designretning. Resten af siden bruger jeg til at genbes\u00f8ge designprincipperne, fordi de fungerer som bro mellem empiri, prototypefamilie og n\u00e6ste iteration.\n <\/p>\n <p>\nS\u00e6rligt designprincip 8 peger projektet tilbage til den f\u00f8rste observation: Indgangen er ikke kun en d\u00f8r, men et socialt overgangsrum. Derfor handler n\u00e6ste iteration ikke kun om at teste skilte og QR-plakat, men ogs\u00e5 om at bevare den lokale m\u00e5de, man tr\u00e6der ind i \u00c1 handil p\u00e5.\n <\/p>\n <\/div>\n\n <figure class=\"figure-window content-beacon\" id=\"movement-figure\" data-beacon=\"bev\u00e6gelse\">\n <button class=\"flag-button\" type=\"button\" aria-label=\"Flag figuren\" title=\"Flag figuren\">\u2691<\/button>\n <div class=\"figure-topbar\">project_movement.bmp<\/div>\n <div class=\"figure-body\">\n <img decoding=\"async\"\n src=\"https:\/\/itdd.au.dk\/single-user-mode\/wp-content\/uploads\/sites\/103\/2026\/05\/image-7.png\"\n alt=\"Projektets bev\u00e6gelse fra bredt problemfelt til sk\u00e6rpet designretning\"\n loading=\"lazy\">\n <\/div>\n <figcaption class=\"figcaption\">\n Figur 1. Projektets bev\u00e6gelse fra et bredt problemfelt til en sk\u00e6rpet designretning.\n <\/figcaption>\n <\/figure>\n\n <section class=\"principles-window content-beacon\" id=\"principles-window\" aria-labelledby=\"designprincipper-heading\" data-beacon=\"principper\">\n <div class=\"principles-layout\">\n <div class=\"principles-copy\">\n <button class=\"flag-button\" type=\"button\" aria-label=\"Flag designprincipper\" title=\"Flag designprincipper\">\u2691<\/button>\n <h2 id=\"designprincipper-heading\">Genbes\u00f8g af designprincipper<\/h2>\n <p>\n Designprincipperne fungerer som broen mellem projektets empiri og de konkrete designvalg. De er ikke \u201cfundet p\u00e5\u201d som en l\u00f8s id\u00e9, men er udviklet gennem observationer, interviews, go-alongs, mockup-afpr\u00f8vning og sprogtjek.\n <\/p>\n <p>\n I opgaven bruger jeg derfor designprincipperne som retningsgivende guidelines: De hj\u00e6lper med at forklare, hvorfor l\u00f8sningen ender med to fysiske \u00c1-tegn og en QR-plakat som sekund\u00e6rt digitalt supplement.\n <\/p>\n <p>\n Det vigtigste i Reflect-fasen er, at principperne ikke bare gentages. De genbes\u00f8ges og sk\u00e6rpes. S\u00e6rligt designprincip 8 peger tilbage p\u00e5 den f\u00f8rste empiri, hvor indgangen viste sig som mere end en d\u00f8r: et socialt overgangsrum.\n <\/p>\n <\/div>\n\n <figure class=\"principles-image-card\">\n <div class=\"mine-topbar\">\n <div class=\"mine-title\">\n <span class=\"mine-icon\" aria-hidden=\"true\"><\/span>\n <span>designprincipper.png<\/span>\n <\/div>\n <div class=\"mine-buttons\" aria-hidden=\"true\">\n <span class=\"mine-btn\">_<\/span>\n <span class=\"mine-btn\">\u25a1<\/span>\n <span class=\"mine-btn\">\u00d7<\/span>\n <\/div>\n <\/div>\n\n <div class=\"principles-image-inner\">\n <img decoding=\"async\"\n src=\"https:\/\/itdd.au.dk\/single-user-mode\/wp-content\/uploads\/sites\/103\/2026\/05\/ChatGPT-Image-May-17-2026-10_28_45-PM.png\"\n alt=\"Designprincipper for projektet\"\n loading=\"lazy\">\n <\/div>\n\n <figcaption class=\"figcaption\">\n Figur 2. Designprincipperne samler forbindelsen mellem empiri, designvalg og n\u00e6ste iteration.\n <\/figcaption>\n <\/figure>\n <\/div>\n <\/section>\n\n <section class=\"tools-card content-beacon\" id=\"tools-card\" data-beacon=\"v\u00e6rkt\u00f8jer\">\n <button class=\"flag-button\" type=\"button\" aria-label=\"Flag designv\u00e6rkt\u00f8jer\" title=\"Flag designv\u00e6rkt\u00f8jer\">\u2691<\/button>\n <h2>Designv\u00e6rkt\u00f8jer i processen<\/h2>\n <p>\n Projektet er ogs\u00e5 formet af de digitale og analoge designv\u00e6rkt\u00f8jer, jeg har brugt undervejs. Nogle v\u00e6rkt\u00f8jer har st\u00f8ttet analyse og skrivning, mens andre har gjort det muligt at visualisere, afpr\u00f8ve og formidle projektets bev\u00e6gelse fra bred id\u00e9 til sk\u00e6rpet designretning.\n <\/p>\n\n <div class=\"tools-grid\">\n <div class=\"tool-tile\">\n <h3>Analyse og overblik<\/h3>\n <p>\n OpenQDA, Outline og Obsidian blev brugt til at skabe overblik over empiri, noter, temaer og forbindelser mellem teori og designprincipper.\n <\/p>\n <\/div>\n\n <div class=\"tool-tile\">\n <h3>Id\u00e9 og visualisering<\/h3>\n <p>\n Draw.io, id\u00e9kort, figurer og infoboard blev brugt til at visualisere projektets bev\u00e6gelse og udvikle enkle low-fi mockups. Miro havde en mindre rolle som f\u00e6lles visuelt st\u00f8ttev\u00e6rkt\u00f8j i undervisnings- og feedbacksammenh\u00e6nge.\n <\/p>\n <\/div>\n\n <div class=\"tool-tile\">\n <h3>Prototype og AI<\/h3>\n <p>\n Low-fi mockups, HTML-prototype og generativ AI blev brugt som creativity support tools, men altid vurderet op imod empiri og brugernes respons.\n <\/p>\n <\/div>\n <\/div>\n <\/section>\n\n <div class=\"reflect-grid\">\n <div class=\"reflect-card content-beacon\" id=\"reflect-card\" data-beacon=\"indgang\">\n <button class=\"flag-button\" type=\"button\" aria-label=\"Flag reflect-afsnit\" title=\"Flag reflect-afsnit\">\u2691<\/button>\n <h2>Reflect: tilbage til indgangen<\/h2>\n\n <p>\n Reflect-fasen viser, at projektet ikke kun handler om at hj\u00e6lpe bes\u00f8gende med at finde vej til \u00c1 handil. Det handler ogs\u00e5 om, hvad der sker, n\u00e5r de kommer frem.\n <\/p>\n\n <p>\n Den f\u00f8rste observation viste, at indgangen ikke bare er en praktisk adgang til butikken. Den fungerer ogs\u00e5 som et socialt overgangsrum, hvor kunder stopper op, hilser, taler sammen, ser p\u00e5 varer og bev\u00e6ger sig ind i butikkens lokale hverdagspraksis.\n <\/p>\n\n <p>\n Senere blev projektet sk\u00e6rpet mod ankomst og fysisk orientering, fordi go-alongs viste, at tvivlen opst\u00e5r f\u00f8r butikken er synlig. Men designprincip 8 peger tilbage p\u00e5 den f\u00f8rste empiri: N\u00e5r bes\u00f8gende har fundet frem, skal de ogs\u00e5 kunne tr\u00e6de ind i stedet p\u00e5 en m\u00e5de, der passer til \u00c1 handils lokale karakter.\n <\/p>\n\n <p>\n N\u00e6ste iteration b\u00f8r derfor ikke kun teste skiltenes placering, st\u00f8rrelse og synlighed. Den b\u00f8r ogs\u00e5 unders\u00f8ge, hvordan QR-plakaten, sm\u00e5 orienteringsgreb og butikkens eksisterende lokale praksis kan spille sammen uden at g\u00f8re stedet generisk eller turistet.\n <\/p>\n\n <div class=\"mini-blocks\">\n <div class=\"mini-block\">2 fysiske \u00c1-tegn<\/div>\n <div class=\"mini-block\">1 QR-plakat<\/div>\n <div class=\"mini-block\">Indgangen som overgang<\/div>\n <\/div>\n\n <div class=\"mine-strip\" aria-hidden=\"true\">\n <span>1<\/span>\n <span><\/span>\n <span>2<\/span>\n <span>\u2691<\/span>\n <span><\/span>\n <span>1<\/span>\n <span>\u2739<\/span>\n <span><\/span>\n <span>3<\/span>\n <span><\/span>\n <span>\u2691<\/span>\n <span>2<\/span>\n <\/div>\n <\/div>\n\n <aside class=\"side-card content-beacon\" id=\"iteration-card\" data-beacon=\"iteration\">\n <button class=\"flag-button\" type=\"button\" aria-label=\"Flag n\u00e6ste iteration\" title=\"Flag n\u00e6ste iteration\">\u2691<\/button>\n <h3>N\u00e6ste iteration<\/h3>\n <ul>\n <li>Afpr\u00f8ve f\u00f8rste skilt ved den brede vej f\u00f8r broen.<\/li>\n <li>Afpr\u00f8ve sekund\u00e6rt \u00c1-tegn inde p\u00e5 omr\u00e5det.<\/li>\n <li>Placere QR-plakaten d\u00e9r, hvor den ikke forstyrrer ankomsten.<\/li>\n <li>Unders\u00f8ge om indgangen stadig f\u00f8les lokal, social og im\u00f8dekommende.<\/li>\n <li>Bruge designprincipperne som vurderingsramme for n\u00e6ste test.<\/li>\n <\/ul>\n <\/aside>\n <\/div>\n\n <\/div>\n <\/section>\n\n <script>\n (() => {\n const root = document.querySelector(\"#reflectMinePage\");\n const flagCount = root.querySelector(\"[data-flag-count]\");\n const scrollCount = root.querySelector(\"[data-scroll-count]\");\n const toast = root.querySelector(\"[data-toast]\");\n const moodButton = root.querySelector(\"[data-action='mood']\");\n const moodFaces = [\"\ud83d\ude42\", \"\ud83d\ude0e\", \"\ud83e\udd14\", \"\ud83d\ude42\"];\n let moodIndex = 0;\n let toastTimer = 0;\n\n function pad(number) {\n return String(Math.max(0, Math.min(999, number))).padStart(3, \"0\");\n }\n\n function showToast(message) {\n toast.textContent = message;\n toast.classList.add(\"is-visible\");\n window.clearTimeout(toastTimer);\n toastTimer = window.setTimeout(() => {\n toast.classList.remove(\"is-visible\");\n }, 1300);\n }\n\n function updateFlags() {\n const count = root.querySelectorAll(\".content-beacon.is-flagged\").length;\n flagCount.textContent = pad(count);\n }\n\n function updateScrollCounter() {\n const doc = document.documentElement;\n const max = Math.max(1, doc.scrollHeight - window.innerHeight);\n const progress = Math.round((window.scrollY \/ max) * 999);\n scrollCount.textContent = pad(progress);\n }\n\n function scanSection() {\n const sections = Array.from(root.querySelectorAll(\".content-beacon\"));\n const unscanned = sections.filter((section) => !section.classList.contains(\"is-scanned\"));\n const pick = (unscanned.length ? unscanned : sections)[Math.floor(Math.random() * (unscanned.length || sections.length))];\n if (!pick) return;\n root.querySelectorAll(\".content-beacon.is-scanned\").forEach((section) => section.classList.remove(\"is-scanned\"));\n pick.classList.add(\"is-scanned\", \"is-seen\");\n pick.scrollIntoView({ behavior: \"smooth\", block: \"center\" });\n showToast(`${pick.dataset.beacon || \"spor\"} fundet`);\n }\n\n root.querySelectorAll(\".flag-button\").forEach((button) => {\n button.addEventListener(\"click\", () => {\n const card = button.closest(\".content-beacon\");\n card.classList.toggle(\"is-flagged\");\n button.textContent = card.classList.contains(\"is-flagged\") ? \"\u2713\" : \"\u2691\";\n updateFlags();\n showToast(card.classList.contains(\"is-flagged\") ? \"Flag sat\" : \"Flag fjernet\");\n });\n });\n\n root.querySelectorAll(\".quirk-tile\").forEach((tile) => {\n tile.addEventListener(\"click\", () => {\n tile.classList.add(\"is-popped\");\n showToast(tile.dataset.note || \"Spor fundet\");\n\n if (tile.dataset.actionTile === \"glitch\") {\n root.classList.add(\"is-glitch\");\n window.setTimeout(() => root.classList.remove(\"is-glitch\"), 820);\n return;\n }\n\n const target = document.getElementById(tile.dataset.target);\n if (target) {\n target.classList.add(\"is-scanned\", \"is-seen\");\n target.scrollIntoView({ behavior: \"smooth\", block: \"center\" });\n }\n });\n });\n\n moodButton.addEventListener(\"click\", () => {\n moodIndex = (moodIndex + 1) % moodFaces.length;\n moodButton.textContent = moodFaces[moodIndex];\n showToast(\"Hum\u00f8r opdateret\");\n });\n\n root.querySelector(\"[data-action='scan']\").addEventListener(\"click\", scanSection);\n root.querySelector(\"[data-action='glitch']\").addEventListener(\"click\", () => {\n root.classList.add(\"is-glitch\");\n showToast(\"Pixelst\u00f8j\");\n window.setTimeout(() => root.classList.remove(\"is-glitch\"), 820);\n });\n\n if (\"IntersectionObserver\" in window) {\n const observer = new IntersectionObserver((entries) => {\n entries.forEach((entry) => {\n if (entry.isIntersecting) {\n entry.target.classList.add(\"is-seen\");\n }\n });\n }, { threshold: 0.35 });\n\n root.querySelectorAll(\".content-beacon\").forEach((section) => observer.observe(section));\n } else {\n root.querySelectorAll(\".content-beacon\").forEach((section) => section.classList.add(\"is-seen\"));\n }\n\n window.addEventListener(\"scroll\", updateScrollCounter, { passive: true });\n updateFlags();\n updateScrollCounter();\n })();\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<script>\n (function () {\n var path = window.location.pathname.replace(\/\\\/+$\/, '');\n if (path === '\/single-user-mode\/reflect') {\n document.body.classList.add('sum-reflect-page');\n }\n })();\n<\/script>\n\n<style>\n \/* Comment block styling only for \/single-user-mode\/reflect\/ *\/\n\n body.sum-reflect-page .wp-block-comments {\n position: relative;\n margin-top: 0 !important;\n padding: 26px !important;\n background:\n linear-gradient(45deg, rgba(255,255,255,0.04) 25%, transparent 25%),\n linear-gradient(-45deg, rgba(0,0,0,0.18) 25%, transparent 25%),\n linear-gradient(#3f7d20 0 22%, #8b5a2b 22% 100%);\n background-size: 18px 18px, 18px 18px, 100% 100%;\n border: 4px solid #1f1f1f !important;\n box-shadow:\n 0 0 0 4px #5b3518,\n 8px 8px 0 #000,\n inset 0 0 0 3px rgba(255,255,255,0.18);\n color: #fff;\n image-rendering: pixelated;\n }\n\n body.sum-reflect-page .wp-block-comments::before {\n content: \"COMMENT CRAFTING TABLE\";\n display: block;\n margin: -10px 0 22px;\n padding: 10px 12px;\n background: #c49a6c;\n color: #1d1208;\n border: 3px solid #1f1f1f;\n box-shadow:\n inset 3px 3px 0 rgba(255,255,255,0.35),\n inset -3px -3px 0 rgba(0,0,0,0.25),\n 4px 4px 0 #000;\n font-family: \"Courier New\", monospace;\n font-size: 15px;\n font-weight: 900;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n }\n\n body.sum-reflect-page .wp-block-comments-title {\n margin-top: 0 !important;\n margin-bottom: 18px !important;\n color: #fff !important;\n font-family: \"Courier New\", monospace;\n font-weight: 900;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n text-shadow:\n 3px 3px 0 #000,\n 0 0 12px rgba(91, 255, 84, 0.35);\n }\n\n body.sum-reflect-page .wp-block-comments .wp-block-comment-template {\n margin: 0 !important;\n padding: 0 !important;\n }\n\n body.sum-reflect-page .wp-block-comments li.comment {\n margin: 0 0 18px !important;\n padding: 16px !important;\n list-style: none;\n background:\n linear-gradient(45deg, rgba(255,255,255,0.05) 25%, transparent 25%),\n #2f2f2f;\n background-size: 16px 16px;\n border: 3px solid #111;\n box-shadow:\n inset 3px 3px 0 rgba(255,255,255,0.14),\n inset -3px -3px 0 rgba(0,0,0,0.4),\n 5px 5px 0 #000;\n }\n\n body.sum-reflect-page .wp-block-comment-author-name,\n body.sum-reflect-page .wp-block-comment-date,\n body.sum-reflect-page .wp-block-comment-edit-link,\n body.sum-reflect-page .wp-block-comment-reply-link {\n font-family: \"Courier New\", monospace;\n }\n\n body.sum-reflect-page .wp-block-comment-author-name {\n font-weight: 900;\n color: #7cff5b !important;\n text-transform: uppercase;\n text-shadow: 2px 2px 0 #000;\n }\n\n body.sum-reflect-page .wp-block-comment-date,\n body.sum-reflect-page .wp-block-comment-edit-link,\n body.sum-reflect-page .wp-block-comment-reply-link {\n color: #d9d9d9 !important;\n font-size: 13px;\n }\n\n body.sum-reflect-page .wp-block-comment-content {\n position: relative;\n margin-top: 12px;\n padding: 14px 14px 14px 18px;\n background: rgba(0, 0, 0, 0.42);\n border-left: 6px solid #7cff5b;\n box-shadow: inset 4px 0 0 #2f8f45;\n color: #f5f5f5;\n }\n\n body.sum-reflect-page .wp-block-comment-content::before {\n content: \"\u25c6\";\n position: absolute;\n left: -15px;\n top: 12px;\n color: #7cff5b;\n font-size: 16px;\n text-shadow: 2px 2px 0 #000;\n }\n\n body.sum-reflect-page .wp-block-comment-content p {\n margin-bottom: 12px;\n line-height: 1.6;\n }\n\n body.sum-reflect-page .wp-block-post-comments-form {\n margin-top: 24px;\n padding: 20px !important;\n background:\n linear-gradient(45deg, rgba(255,255,255,0.05) 25%, transparent 25%),\n #4a2b15;\n background-size: 18px 18px;\n border: 4px solid #111;\n box-shadow:\n inset 4px 4px 0 rgba(255,255,255,0.16),\n inset -4px -4px 0 rgba(0,0,0,0.36),\n 7px 7px 0 #000;\n }\n\n body.sum-reflect-page .wp-block-post-comments-form label {\n color: #fff !important;\n font-family: \"Courier New\", monospace;\n font-weight: 900;\n text-transform: uppercase;\n text-shadow: 2px 2px 0 #000;\n }\n\n body.sum-reflect-page .wp-block-post-comments-form input:not([type=\"submit\"]),\n body.sum-reflect-page .wp-block-post-comments-form textarea {\n box-sizing: border-box;\n width: 100%;\n max-width: 100%;\n background: #111 !important;\n color: #fff !important;\n border: 3px solid #000 !important;\n border-radius: 0 !important;\n padding: 12px !important;\n font-family: \"Courier New\", monospace;\n box-shadow:\n inset 3px 3px 0 rgba(0,0,0,0.7),\n inset -3px -3px 0 rgba(255,255,255,0.08);\n }\n\n body.sum-reflect-page .wp-block-post-comments-form input:not([type=\"submit\"]):focus,\n body.sum-reflect-page .wp-block-post-comments-form textarea:focus {\n outline: none !important;\n border-color: #7cff5b !important;\n box-shadow:\n 0 0 0 3px #2f8f45,\n inset 3px 3px 0 rgba(0,0,0,0.7);\n }\n\n body.sum-reflect-page .wp-block-post-comments-form input#submit.wp-block-button__link.wp-element-button {\n background: #39a935 !important;\n color: #fff !important;\n border: 4px solid #111 !important;\n border-radius: 0 !important;\n padding: 13px 22px !important;\n font-family: \"Courier New\", monospace;\n font-weight: 900;\n letter-spacing: 0.06em;\n text-transform: uppercase;\n text-shadow: 2px 2px 0 #000;\n box-shadow:\n inset 3px 3px 0 rgba(255,255,255,0.28),\n inset -3px -3px 0 rgba(0,0,0,0.35),\n 5px 5px 0 #000;\n cursor: pointer;\n }\n\n body.sum-reflect-page .wp-block-post-comments-form input#submit.wp-block-button__link.wp-element-button:hover {\n background: #46c93f !important;\n transform: translate(-1px, -1px);\n box-shadow:\n inset 3px 3px 0 rgba(255,255,255,0.28),\n inset -3px -3px 0 rgba(0,0,0,0.35),\n 7px 7px 0 #000;\n }\n\n body.sum-reflect-page .wp-block-post-comments-form input#submit.wp-block-button__link.wp-element-button:active {\n transform: translate(3px, 3px);\n box-shadow:\n inset -3px -3px 0 rgba(255,255,255,0.16),\n inset 3px 3px 0 rgba(0,0,0,0.45),\n 2px 2px 0 #000;\n }\n\n @media (max-width: 640px) {\n body.sum-reflect-page .wp-block-comments {\n padding: 18px !important;\n box-shadow:\n 0 0 0 3px #5b3518,\n 5px 5px 0 #000,\n inset 0 0 0 2px rgba(255,255,255,0.18);\n }\n\n body.sum-reflect-page .wp-block-comments::before {\n font-size: 12px;\n }\n\n body.sum-reflect-page .wp-block-comments li.comment,\n body.sum-reflect-page .wp-block-post-comments-form {\n box-shadow:\n inset 3px 3px 0 rgba(255,255,255,0.14),\n inset -3px -3px 0 rgba(0,0,0,0.4),\n 4px 4px 0 #000;\n }\n }\n<\/style>\n","protected":false},"excerpt":{"rendered":"<p>Reflect Mine – \u00c1 handil Reflect mode reflect_page.exe _ \u25a1 \u00d7 000 \ud83d\ude42 ? \u2739 000 Reflect Mine \u00c1 handil-projektet som en Minesweeper-inspireret reflect-side. Formen passer til processen: Jeg afd\u00e6kker \u00e9t felt ad gangen, markerer vigtige spor og bruger den r\u00f8de tr\u00e5d til at forbinde empiri, designprincipper, prototypefamilie og n\u00e6ste iteration. \u00c1 1 2 \u2691 […]<\/p>\n","protected":false},"author":85,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-727","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/itdd.au.dk\/single-user-mode\/wp-json\/wp\/v2\/pages\/727","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/itdd.au.dk\/single-user-mode\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/itdd.au.dk\/single-user-mode\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/itdd.au.dk\/single-user-mode\/wp-json\/wp\/v2\/users\/85"}],"replies":[{"embeddable":true,"href":"https:\/\/itdd.au.dk\/single-user-mode\/wp-json\/wp\/v2\/comments?post=727"}],"version-history":[{"count":19,"href":"https:\/\/itdd.au.dk\/single-user-mode\/wp-json\/wp\/v2\/pages\/727\/revisions"}],"predecessor-version":[{"id":1579,"href":"https:\/\/itdd.au.dk\/single-user-mode\/wp-json\/wp\/v2\/pages\/727\/revisions\/1579"}],"wp:attachment":[{"href":"https:\/\/itdd.au.dk\/single-user-mode\/wp-json\/wp\/v2\/media?parent=727"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":727,"date":"2026-04-06T12:40:53","date_gmt":"2026-04-06T12:40:53","guid":{"rendered":"https:\/\/itdd.au.dk\/single-user-mode\/?page_id=727"},"modified":"2026-05-23T20:41:09","modified_gmt":"2026-05-23T20:41:09","slug":"reflect","status":"publish","type":"page","link":"https:\/\/itdd.au.dk\/single-user-mode\/reflect\/","title":{"rendered":"Reflect"},"content":{"rendered":"\n\n\n\n \n \n Reflect Mine – \u00c1 handil<\/title>\n <style>\n :root {\n color-scheme: dark;\n background: #050505;\n }\n\n html {\n scroll-behavior: smooth;\n }\n\n body {\n margin: 0;\n min-height: 100vh;\n background:\n radial-gradient(circle at 14% 7%, rgba(11, 106, 154, 0.28), transparent 27rem),\n radial-gradient(circle at 88% 12%, rgba(255, 37, 37, 0.12), transparent 22rem),\n linear-gradient(180deg, #050505 0%, #111111 52%, #050505 100%);\n color: #f5f1e7;\n }\n\n #reflectMinePage {\n --bg: #050505;\n --panel: #c6c6c6;\n --panel-dark: #808080;\n --panel-darker: #404040;\n --panel-light: #ffffff;\n --text: #111111;\n --red: #ff2525;\n --blue: #071f7a;\n --cyan: #0b6a9a;\n --cream: #f5f1e7;\n --muted: #bdbdbd;\n --green: #008000;\n --yellow: #f7d94a;\n\n position: relative;\n left: 50%;\n transform: translateX(-50%);\n width: min(1600px, calc(100vw - 24px));\n max-width: none;\n margin: 0;\n background:\n linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),\n linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px),\n var(--bg);\n background-size: 22px 22px;\n color: var(--cream);\n font-family: Georgia, \"Times New Roman\", serif;\n padding: clamp(20px, 3vw, 42px) clamp(12px, 2.4vw, 26px) clamp(46px, 6vw, 72px);\n box-sizing: border-box;\n overflow: hidden;\n isolation: isolate;\n }\n\n #reflectMinePage::before {\n content: \"\";\n position: fixed;\n inset: 0;\n z-index: -1;\n pointer-events: none;\n background:\n linear-gradient(rgba(255,255,255,0.04) 50%, transparent 50%),\n radial-gradient(circle at 50% 0%, rgba(255,255,255,0.08), transparent 34rem);\n background-size: 100% 4px, auto;\n opacity: 0.32;\n mix-blend-mode: screen;\n }\n\n #reflectMinePage,\n #reflectMinePage * {\n box-sizing: border-box;\n }\n\n #reflectMinePage button {\n font: inherit;\n }\n\n #reflectMinePage .inner {\n max-width: 1420px;\n margin: 0 auto;\n }\n\n #reflectMinePage .mine-window,\n #reflectMinePage .hero-window,\n #reflectMinePage .figure-window {\n background: var(--panel);\n color: var(--text);\n border-style: solid;\n border-width: 4px;\n border-color: var(--panel-light) var(--panel-darker) var(--panel-darker) var(--panel-light);\n padding: 10px;\n box-shadow:\n 10px 10px 0 #000000,\n 18px 18px 0 rgba(255,255,255,0.06);\n margin: 0 0 38px;\n }\n\n #reflectMinePage .hero-window {\n margin-bottom: 42px;\n }\n\n #reflectMinePage .mine-topbar,\n #reflectMinePage .hero-topbar {\n background: linear-gradient(90deg, var(--blue), var(--cyan));\n color: #ffffff;\n padding: 8px 10px;\n font-family: Arial, Helvetica, sans-serif;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n font-weight: 900;\n letter-spacing: 0.04em;\n text-transform: uppercase;\n }\n\n #reflectMinePage .mine-title {\n display: flex;\n align-items: center;\n gap: 8px;\n min-width: 0;\n }\n\n #reflectMinePage .mine-title span:last-child {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n #reflectMinePage .mine-icon {\n width: 16px;\n height: 16px;\n flex: 0 0 16px;\n display: inline-block;\n background:\n linear-gradient(45deg, transparent 0 34%, #000 34% 46%, transparent 46% 100%),\n #d71920;\n border: 2px solid #ffffff;\n box-shadow: inset -2px -2px 0 #7a0000;\n }\n\n #reflectMinePage .mine-buttons {\n display: flex;\n gap: 5px;\n flex-shrink: 0;\n }\n\n #reflectMinePage .mine-btn {\n width: 22px;\n height: 22px;\n background: var(--panel);\n border-style: solid;\n border-width: 2px;\n border-color: var(--panel-light) var(--panel-darker) var(--panel-darker) var(--panel-light);\n display: grid;\n place-items: center;\n font-size: 13px;\n color: #111111;\n line-height: 1;\n }\n\n #reflectMinePage .mine-status,\n #reflectMinePage .hero-status {\n margin: 10px 0;\n padding: 10px;\n background: var(--panel);\n border-style: solid;\n border-width: 3px;\n border-color: var(--panel-darker) var(--panel-light) var(--panel-light) var(--panel-darker);\n display: grid;\n grid-template-columns: 1fr auto 1fr;\n align-items: center;\n gap: 12px;\n font-family: \"Courier New\", Courier, monospace;\n }\n\n #reflectMinePage .hero-status {\n grid-template-columns: auto minmax(0, 1fr) auto;\n }\n\n #reflectMinePage .counter {\n background: #070707;\n color: var(--red);\n padding: 7px 10px;\n font-size: clamp(19px, 2vw, 30px);\n font-weight: 900;\n letter-spacing: 0.1em;\n min-width: 94px;\n text-align: center;\n border: 2px inset #444444;\n text-shadow:\n 0 0 3px var(--red),\n 2px 2px 0 #560000;\n font-variant-numeric: tabular-nums;\n }\n\n #reflectMinePage .smiley,\n #reflectMinePage .quirk-button,\n #reflectMinePage .flag-button {\n background: #f7d94a;\n border-style: solid;\n border-width: 3px;\n border-color: var(--panel-light) var(--panel-darker) var(--panel-darker) var(--panel-light);\n color: #111111;\n cursor: pointer;\n display: grid;\n place-items: center;\n line-height: 1;\n }\n\n #reflectMinePage .smiley {\n width: 48px;\n height: 48px;\n border-radius: 0;\n font-size: 26px;\n }\n\n #reflectMinePage .smiley:active,\n #reflectMinePage .quirk-button:active,\n #reflectMinePage .flag-button:active,\n #reflectMinePage .quirk-tile:active {\n border-color: var(--panel-darker) var(--panel-light) var(--panel-light) var(--panel-darker);\n transform: translate(1px, 1px);\n }\n\n #reflectMinePage .status-center {\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 8px;\n min-width: 0;\n }\n\n #reflectMinePage .status-message {\n min-height: 48px;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 8px 12px;\n background: #111111;\n border: 2px inset #444444;\n color: #d8ffe9;\n font-size: clamp(13px, 1.25vw, 16px);\n line-height: 1.35;\n text-align: center;\n }\n\n #reflectMinePage .quirk-button {\n width: 42px;\n height: 42px;\n background: var(--panel);\n font-family: Arial, Helvetica, sans-serif;\n font-size: 20px;\n font-weight: 900;\n }\n\n #reflectMinePage .hero-body {\n display: grid;\n grid-template-columns: minmax(0, 1fr) minmax(290px, 0.48fr);\n gap: 18px;\n padding: clamp(18px, 2.5vw, 30px);\n background: #111111;\n color: #f5f1e7;\n border-style: solid;\n border-width: 4px;\n border-color: var(--panel-darker) var(--panel-light) var(--panel-light) var(--panel-darker);\n }\n\n #reflectMinePage h1 {\n margin: 0 0 12px;\n font-family: Arial, Helvetica, sans-serif;\n font-size: clamp(36px, 6vw, 86px);\n line-height: 0.93;\n color: #ffffff;\n text-transform: uppercase;\n letter-spacing: 0;\n text-shadow:\n 4px 4px 0 #071f7a,\n 8px 8px 0 #000000;\n }\n\n #reflectMinePage .subline {\n max-width: 860px;\n margin: 0;\n font-family: \"Courier New\", Courier, monospace;\n color: #d8ffe9;\n font-size: clamp(15px, 1.4vw, 18px);\n line-height: 1.45;\n }\n\n #reflectMinePage .stamp {\n min-height: 100%;\n display: grid;\n grid-template-rows: 1fr auto;\n gap: 12px;\n }\n\n #reflectMinePage .stamp-mark {\n min-height: 150px;\n background: var(--panel);\n color: #111111;\n border-style: solid;\n border-width: 4px;\n border-color: var(--panel-light) var(--panel-darker) var(--panel-darker) var(--panel-light);\n display: grid;\n place-items: center;\n font-family: Arial, Helvetica, sans-serif;\n font-size: clamp(56px, 8vw, 110px);\n font-weight: 900;\n box-shadow: 7px 7px 0 #000000;\n }\n\n #reflectMinePage .quirk-board {\n display: grid;\n grid-template-columns: repeat(10, minmax(0, 1fr));\n gap: 0;\n background: var(--panel-dark);\n border-style: solid;\n border-width: 4px;\n border-color: var(--panel-darker) var(--panel-light) var(--panel-light) var(--panel-darker);\n align-self: end;\n }\n\n #reflectMinePage .quirk-tile {\n appearance: none;\n aspect-ratio: 1 \/ 1;\n min-height: 38px;\n border-style: solid;\n border-width: 3px;\n border-color: var(--panel-light) var(--panel-darker) var(--panel-darker) var(--panel-light);\n background: var(--panel);\n color: #111111;\n font-family: Arial, Helvetica, sans-serif;\n font-size: clamp(14px, 1.7vw, 22px);\n font-weight: 900;\n cursor: pointer;\n display: grid;\n place-items: center;\n }\n\n #reflectMinePage .quirk-tile[data-color=\"blue\"] { color: #0000cc; }\n #reflectMinePage .quirk-tile[data-color=\"green\"] { color: #008000; }\n #reflectMinePage .quirk-tile[data-color=\"red\"] { color: #cc0000; }\n #reflectMinePage .quirk-tile.is-popped {\n background: #bdbdbd;\n border-width: 1px;\n border-color: #8b8b8b;\n }\n\n #reflectMinePage .intro-card,\n #reflectMinePage .reflect-card,\n #reflectMinePage .tools-card,\n #reflectMinePage .principles-copy {\n position: relative;\n background: #111111;\n border: 1px solid rgba(255,255,255,0.16);\n padding: clamp(20px, 3vw, 34px);\n }\n\n #reflectMinePage .intro-card {\n margin: 34px 0;\n }\n\n #reflectMinePage h2 {\n margin: 0 0 14px;\n font-family: Arial, Helvetica, sans-serif;\n font-size: clamp(24px, 2.6vw, 38px);\n line-height: 1.08;\n color: #ffffff;\n text-transform: uppercase;\n letter-spacing: 0.02em;\n }\n\n #reflectMinePage p {\n font-size: clamp(17px, 1.35vw, 20px);\n line-height: 1.65;\n margin: 0 0 16px;\n }\n\n #reflectMinePage p:last-child {\n margin-bottom: 0;\n }\n\n #reflectMinePage .flag-button {\n position: absolute;\n top: -16px;\n right: 10px;\n width: 34px;\n height: 34px;\n background: var(--panel);\n font-family: Arial, Helvetica, sans-serif;\n font-size: 18px;\n font-weight: 900;\n z-index: 3;\n }\n\n #reflectMinePage .content-beacon.is-flagged .flag-button {\n background: #ffdddd;\n color: #cc0000;\n }\n\n #reflectMinePage .content-beacon {\n position: relative;\n scroll-margin-top: 54px;\n }\n\n #reflectMinePage .content-beacon::after {\n content: attr(data-beacon);\n position: absolute;\n bottom: calc(100% - 2px);\n left: 14px;\n z-index: 4;\n background: #111111;\n color: var(--yellow);\n border: 2px solid var(--yellow);\n padding: 4px 8px;\n font-family: \"Courier New\", Courier, monospace;\n font-size: 12px;\n font-weight: 900;\n opacity: 0;\n transform: translateY(7px);\n transition:\n opacity 0.22s ease,\n transform 0.22s ease;\n pointer-events: none;\n }\n\n #reflectMinePage .content-beacon.is-seen::after,\n #reflectMinePage .content-beacon.is-scanned::after {\n opacity: 1;\n transform: translateY(0);\n }\n\n #reflectMinePage .content-beacon.is-scanned {\n animation: scanFlash 0.85s steps(2, end) 2;\n }\n\n @keyframes scanFlash {\n 50% {\n filter: brightness(1.34) saturate(1.25);\n }\n }\n\n #reflectMinePage .mine-video-frame {\n padding: 10px;\n background:\n linear-gradient(90deg, rgba(0,0,0,0.12) 1px, transparent 1px),\n linear-gradient(rgba(0,0,0,0.12) 1px, transparent 1px),\n #9f9f9f;\n background-size: 28px 28px;\n border-style: solid;\n border-width: 4px;\n border-color: var(--panel-darker) var(--panel-light) var(--panel-light) var(--panel-darker);\n }\n\n #reflectMinePage .video-ratio {\n position: relative;\n width: 100%;\n aspect-ratio: 16 \/ 9;\n background: #000000;\n overflow: hidden;\n }\n\n #reflectMinePage iframe {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n border: 0;\n }\n\n #reflectMinePage .mine-caption {\n margin: 12px 4px 2px;\n font-family: Arial, Helvetica, sans-serif;\n font-size: 14px;\n color: #222222;\n line-height: 1.45;\n }\n\n #reflectMinePage .figure-window {\n position: relative;\n margin: 38px 0;\n box-shadow: 8px 8px 0 #000000;\n }\n\n #reflectMinePage .figure-topbar {\n background: linear-gradient(90deg, #111111, #555555);\n color: #ffffff;\n padding: 7px 10px;\n font-family: Arial, Helvetica, sans-serif;\n font-size: 14px;\n font-weight: 900;\n text-transform: uppercase;\n letter-spacing: 0.04em;\n }\n\n #reflectMinePage .figure-body {\n margin-top: 10px;\n padding: 12px;\n background: #000000;\n border-style: solid;\n border-width: 4px;\n border-color: var(--panel-darker) var(--panel-light) var(--panel-light) var(--panel-darker);\n }\n\n #reflectMinePage .figure-body img {\n display: block;\n width: 100%;\n height: auto;\n background: #000000;\n }\n\n #reflectMinePage .figcaption {\n margin: 12px 4px 0;\n color: #222222;\n font-family: Arial, Helvetica, sans-serif;\n font-size: 15px;\n line-height: 1.45;\n }\n\n #reflectMinePage .principles-window {\n margin: 42px 0;\n }\n\n #reflectMinePage .principles-layout {\n display: grid;\n grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr);\n gap: 24px;\n align-items: start;\n }\n\n #reflectMinePage .principles-copy strong,\n #reflectMinePage .tools-card strong {\n color: #ffffff;\n }\n\n #reflectMinePage .principles-image-card {\n background: var(--panel);\n color: #111111;\n border-style: solid;\n border-width: 4px;\n border-color: var(--panel-light) var(--panel-darker) var(--panel-darker) var(--panel-light);\n padding: 10px;\n box-shadow: 8px 8px 0 #000000;\n }\n\n #reflectMinePage .principles-image-inner {\n background: #000000;\n padding: 10px;\n border-style: solid;\n border-width: 4px;\n border-color: var(--panel-darker) var(--panel-light) var(--panel-light) var(--panel-darker);\n }\n\n #reflectMinePage .principles-image-inner img {\n display: block;\n width: 100%;\n height: auto;\n }\n\n #reflectMinePage .tools-card {\n margin: 38px 0;\n }\n\n #reflectMinePage .tools-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 14px;\n margin-top: 20px;\n }\n\n #reflectMinePage .tool-tile {\n background: var(--panel);\n color: #111111;\n padding: 16px 14px;\n font-family: Arial, Helvetica, sans-serif;\n border-style: solid;\n border-width: 3px;\n border-color: var(--panel-light) var(--panel-darker) var(--panel-darker) var(--panel-light);\n }\n\n #reflectMinePage .tool-tile h3 {\n margin: 0 0 8px;\n font-size: 18px;\n text-transform: uppercase;\n }\n\n #reflectMinePage .tool-tile p {\n margin: 0;\n font-family: Arial, Helvetica, sans-serif;\n font-size: 15px;\n line-height: 1.45;\n }\n\n #reflectMinePage .reflect-grid {\n display: grid;\n grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);\n gap: 24px;\n margin-top: 40px;\n }\n\n #reflectMinePage .side-card {\n background: var(--panel);\n color: #111111;\n font-family: Arial, Helvetica, sans-serif;\n border-style: solid;\n border-width: 4px;\n border-color: var(--panel-light) var(--panel-darker) var(--panel-darker) var(--panel-light);\n padding: clamp(18px, 2.4vw, 30px);\n box-shadow: 8px 8px 0 #000000;\n }\n\n #reflectMinePage .side-card h3 {\n margin: 0 0 14px;\n font-size: 23px;\n line-height: 1.1;\n text-transform: uppercase;\n }\n\n #reflectMinePage .side-card ul {\n padding-left: 20px;\n margin: 0;\n }\n\n #reflectMinePage .side-card li {\n margin-bottom: 11px;\n line-height: 1.45;\n font-size: 16px;\n }\n\n #reflectMinePage .mini-blocks {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 10px;\n margin: 24px 0 0;\n }\n\n #reflectMinePage .mini-block {\n background: var(--panel);\n color: #111111;\n padding: 14px 12px;\n font-family: Arial, Helvetica, sans-serif;\n font-weight: 900;\n text-align: center;\n border-style: solid;\n border-width: 3px;\n border-color: var(--panel-light) var(--panel-darker) var(--panel-darker) var(--panel-light);\n }\n\n #reflectMinePage .mine-strip {\n display: grid;\n grid-template-columns: repeat(12, 1fr);\n margin: 34px 0 0;\n border-style: solid;\n border-width: 4px;\n border-color: var(--panel-darker) var(--panel-light) var(--panel-light) var(--panel-darker);\n background: var(--panel-dark);\n }\n\n #reflectMinePage .mine-strip span {\n aspect-ratio: 1 \/ 1;\n min-height: 28px;\n display: grid;\n place-items: center;\n background: var(--panel);\n color: #111111;\n font-family: Arial, Helvetica, sans-serif;\n font-size: 13px;\n font-weight: 900;\n border-style: solid;\n border-width: 2px;\n border-color: var(--panel-light) var(--panel-darker) var(--panel-darker) var(--panel-light);\n }\n\n #reflectMinePage .mine-strip span:nth-child(3n),\n #reflectMinePage .mini-block:nth-child(1) {\n color: #0000cc;\n }\n\n #reflectMinePage .mine-strip span:nth-child(4n),\n #reflectMinePage .mini-block:nth-child(2) {\n color: #008000;\n }\n\n #reflectMinePage .mine-strip span:nth-child(7n),\n #reflectMinePage .mini-block:nth-child(3) {\n color: #cc0000;\n }\n\n #reflectMinePage .pixel-toast {\n position: fixed;\n left: 50%;\n top: 18px;\n z-index: 20;\n transform: translate(-50%, -160%);\n background: #111111;\n color: #ffffff;\n border-style: solid;\n border-width: 4px;\n border-color: var(--panel-light) var(--panel-darker) var(--panel-darker) var(--panel-light);\n padding: 12px 18px;\n font-family: Arial, Helvetica, sans-serif;\n font-weight: 900;\n text-transform: uppercase;\n letter-spacing: 0.03em;\n box-shadow: 8px 8px 0 #000000;\n transition: transform 0.28s steps(5, end);\n }\n\n #reflectMinePage .pixel-toast.is-visible {\n transform: translate(-50%, 0);\n }\n\n #reflectMinePage.is-glitch .hero-window,\n #reflectMinePage.is-glitch .mine-window,\n #reflectMinePage.is-glitch .figure-window,\n #reflectMinePage.is-glitch .principles-image-card,\n #reflectMinePage.is-glitch .side-card {\n animation: tinyGlitch 0.18s steps(2, end) 4;\n }\n\n @keyframes tinyGlitch {\n 50% {\n transform: translate(2px, -1px);\n filter: hue-rotate(22deg);\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n html {\n scroll-behavior: auto;\n }\n\n #reflectMinePage *,\n #reflectMinePage *::before,\n #reflectMinePage *::after {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n scroll-behavior: auto !important;\n transition-duration: 0.01ms !important;\n }\n }\n\n @media (max-width: 1050px) {\n #reflectMinePage .hero-body {\n grid-template-columns: 1fr;\n }\n\n #reflectMinePage .stamp-mark {\n min-height: 110px;\n }\n }\n\n @media (max-width: 900px) {\n #reflectMinePage .principles-layout,\n #reflectMinePage .reflect-grid,\n #reflectMinePage .tools-grid {\n grid-template-columns: 1fr;\n }\n\n #reflectMinePage .mini-blocks {\n grid-template-columns: 1fr;\n }\n }\n\n @media (max-width: 720px) {\n #reflectMinePage .hero-status {\n grid-template-columns: 1fr;\n }\n\n #reflectMinePage .status-center {\n order: -1;\n }\n\n #reflectMinePage .counter {\n width: 100%;\n }\n\n #reflectMinePage .quirk-board {\n grid-template-columns: repeat(5, 1fr);\n }\n }\n\n @media (max-width: 640px) {\n #reflectMinePage {\n width: calc(100vw - 12px);\n padding: 18px 8px 42px;\n }\n\n #reflectMinePage .mine-window,\n #reflectMinePage .hero-window,\n #reflectMinePage .figure-window,\n #reflectMinePage .principles-image-card,\n #reflectMinePage .side-card {\n box-shadow: 5px 5px 0 #000000;\n }\n\n #reflectMinePage .mine-status {\n gap: 8px;\n padding: 8px;\n }\n\n #reflectMinePage .counter {\n min-width: 62px;\n padding: 6px;\n font-size: 20px;\n letter-spacing: 0.04em;\n }\n\n #reflectMinePage .smiley {\n width: 42px;\n height: 42px;\n font-size: 23px;\n }\n\n #reflectMinePage .mine-video-frame,\n #reflectMinePage .figure-body,\n #reflectMinePage .principles-image-inner {\n padding: 6px;\n }\n\n #reflectMinePage .mine-strip {\n grid-template-columns: repeat(6, 1fr);\n }\n\n #reflectMinePage .mine-strip span {\n min-height: 24px;\n font-size: 12px;\n }\n }\n <\/style>\n<\/head>\n<body>\n <section id=\"reflectMinePage\">\n <div class=\"pixel-toast\" data-toast aria-live=\"polite\">Reflect mode<\/div>\n\n <div class=\"inner\">\n <header class=\"hero-window\">\n <div class=\"hero-topbar\">\n <div class=\"mine-title\">\n <span class=\"mine-icon\" aria-hidden=\"true\"><\/span>\n <span>reflect_page.exe<\/span>\n <\/div>\n\n <div class=\"mine-buttons\" aria-hidden=\"true\">\n <span class=\"mine-btn\">_<\/span>\n <span class=\"mine-btn\">\u25a1<\/span>\n <span class=\"mine-btn\">\u00d7<\/span>\n <\/div>\n <\/div>\n\n <div class=\"hero-status\">\n <div class=\"counter\" data-flag-count>000<\/div>\n\n <div class=\"status-center\">\n <button class=\"smiley\" type=\"button\" data-action=\"mood\" aria-label=\"Skift hum\u00f8r\" title=\"Skift hum\u00f8r\">\ud83d\ude42<\/button>\n <button class=\"quirk-button\" type=\"button\" data-action=\"scan\" aria-label=\"Scan r\u00f8d tr\u00e5d\" title=\"Scan r\u00f8d tr\u00e5d\">?<\/button>\n <button class=\"quirk-button\" type=\"button\" data-action=\"glitch\" aria-label=\"Pixel glitch\" title=\"Pixel glitch\">\u2739<\/button>\n <\/div>\n\n <div class=\"counter\" data-scroll-count>000<\/div>\n <\/div>\n\n <div class=\"hero-body\">\n <div>\n <h1>Reflect Mine<\/h1>\n <p class=\"subline\">\u00c1 handil-projektet som en Minesweeper-inspireret reflect-side. Formen passer til processen: Jeg afd\u00e6kker \u00e9t felt ad gangen, markerer vigtige spor og bruger den r\u00f8de tr\u00e5d til at forbinde empiri, designprincipper, prototypefamilie og n\u00e6ste iteration.<\/p>\n <\/div>\n\n <div class=\"stamp\" aria-label=\"Temafelter\">\n <div class=\"stamp-mark\" aria-hidden=\"true\">\u00c1<\/div>\n <div class=\"quirk-board\">\n <button class=\"quirk-tile\" type=\"button\" data-target=\"video-window\" data-note=\"Video-sporet er \u00e5bnet.\" data-color=\"blue\">1<\/button>\n <button class=\"quirk-tile\" type=\"button\" data-target=\"intro-card\" data-note=\"Kort om filmen er markeret.\"> <\/button>\n <button class=\"quirk-tile\" type=\"button\" data-target=\"movement-figure\" data-note=\"Projektbev\u00e6gelsen blinker.\" data-color=\"green\">2<\/button>\n <button class=\"quirk-tile\" type=\"button\" data-target=\"principles-window\" data-note=\"Designprincipperne er flagged.\" data-color=\"red\">\u2691<\/button>\n <button class=\"quirk-tile\" type=\"button\" data-target=\"tools-card\" data-note=\"V\u00e6rkt\u00f8jerne er fundet.\"> <\/button>\n <button class=\"quirk-tile\" type=\"button\" data-target=\"reflect-card\" data-note=\"Tilbage til indgangen.\" data-color=\"blue\">1<\/button>\n <button class=\"quirk-tile\" type=\"button\" data-action-tile=\"glitch\" data-note=\"Bare en visuel mine. Ingen eksplosion.\" data-color=\"red\">\u2739<\/button>\n <button class=\"quirk-tile\" type=\"button\" data-target=\"iteration-card\" data-note=\"N\u00e6ste iteration venter.\"> <\/button>\n <button class=\"quirk-tile\" type=\"button\" data-target=\"movement-figure\" data-note=\"Den r\u00f8de tr\u00e5d g\u00e5r gennem figuren.\" data-color=\"green\">3<\/button>\n <button class=\"quirk-tile\" type=\"button\" data-target=\"video-window\" data-note=\"Reflect-videoen ligger stadig \u00f8verst.\">\u2691<\/button>\n <\/div>\n <\/div>\n <\/div>\n <\/header>\n\n <div class=\"mine-window content-beacon\" id=\"video-window\" data-beacon=\"film\">\n <button class=\"flag-button\" type=\"button\" aria-label=\"Flag videoen\" title=\"Flag videoen\">\u2691<\/button>\n <div class=\"mine-topbar\">\n <div class=\"mine-title\">\n <span class=\"mine-icon\" aria-hidden=\"true\"><\/span>\n <span>reflect_video.exe<\/span>\n <\/div>\n\n <div class=\"mine-buttons\" aria-hidden=\"true\">\n <span class=\"mine-btn\">_<\/span>\n <span class=\"mine-btn\">\u25a1<\/span>\n <span class=\"mine-btn\">\u00d7<\/span>\n <\/div>\n <\/div>\n\n <div class=\"mine-status\">\n <div class=\"counter\">001<\/div>\n <div class=\"smiley\" aria-hidden=\"true\">\ud83d\ude42<\/div>\n <div class=\"counter\">999<\/div>\n <\/div>\n\n <div class=\"mine-video-frame\">\n <div class=\"video-ratio\">\n <iframe\n src=\"https:\/\/www.youtube.com\/embed\/uBbl610ZLB0?rel=0\"\n title=\"Reflect-video om designprojektet ved \u00c1 handil\"\n loading=\"lazy\"\n allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\"\n allowfullscreen>\n <\/iframe>\n <\/div>\n <\/div>\n\n <p class=\"mine-caption\">\n Videoen er en kort reflect-fort\u00e6lling om projektets bev\u00e6gelse fra et bredt problemfelt til en mere sk\u00e6rpet designretning.\n <\/p>\n <\/div>\n\n\n <p class=\"mine-caption\">\n Videoen er en kort reflect-fort\u00e6lling om projektets bev\u00e6gelse fra et bredt problemfelt til en mere sk\u00e6rpet designretning.\n <\/p>\n <\/div>\n\n <div class=\"intro-card content-beacon\" id=\"intro-card\" data-beacon=\"intro\">\n <button class=\"flag-button\" type=\"button\" aria-label=\"Flag kort om filmen\" title=\"Flag kort om filmen\">\u2691<\/button>\n <h2>Reflect som tilbageblik og ny retning<\/h2>\n <p>\n Reflect-fasen samler ikke projektet ved bare at vise, hvad jeg endte med at lave. Den viser, hvordan designprocessen har flyttet sig, og hvordan empirien har \u00e6ndret min forst\u00e5else af problemet.\n <\/p>\n <p>\n I begyndelsen var projektet \u00e5bent og rettet mod teknologi i butikker. Undervejs viste observationer, interviews, go-alongs og mockup-afpr\u00f8vning, at den vigtigste udfordring ved \u00c1 handil ikke l\u00e5 i mere digital information, men i ankomsten: hvorn\u00e5r bes\u00f8gende bliver i tvivl, og hvorn\u00e5r stedet begynder at give mening.\n <\/p>\n <p>\n Figuren nedenfor samler denne bev\u00e6gelse fra bredt problemfelt til sk\u00e6rpet designretning. Resten af siden bruger jeg til at genbes\u00f8ge designprincipperne, fordi de fungerer som bro mellem empiri, prototypefamilie og n\u00e6ste iteration.\n <\/p>\n <p>\nS\u00e6rligt designprincip 8 peger projektet tilbage til den f\u00f8rste observation: Indgangen er ikke kun en d\u00f8r, men et socialt overgangsrum. Derfor handler n\u00e6ste iteration ikke kun om at teste skilte og QR-plakat, men ogs\u00e5 om at bevare den lokale m\u00e5de, man tr\u00e6der ind i \u00c1 handil p\u00e5.\n <\/p>\n <\/div>\n\n <figure class=\"figure-window content-beacon\" id=\"movement-figure\" data-beacon=\"bev\u00e6gelse\">\n <button class=\"flag-button\" type=\"button\" aria-label=\"Flag figuren\" title=\"Flag figuren\">\u2691<\/button>\n <div class=\"figure-topbar\">project_movement.bmp<\/div>\n <div class=\"figure-body\">\n <img decoding=\"async\"\n src=\"https:\/\/itdd.au.dk\/single-user-mode\/wp-content\/uploads\/sites\/103\/2026\/05\/image-7.png\"\n alt=\"Projektets bev\u00e6gelse fra bredt problemfelt til sk\u00e6rpet designretning\"\n loading=\"lazy\">\n <\/div>\n <figcaption class=\"figcaption\">\n Figur 1. Projektets bev\u00e6gelse fra et bredt problemfelt til en sk\u00e6rpet designretning.\n <\/figcaption>\n <\/figure>\n\n <section class=\"principles-window content-beacon\" id=\"principles-window\" aria-labelledby=\"designprincipper-heading\" data-beacon=\"principper\">\n <div class=\"principles-layout\">\n <div class=\"principles-copy\">\n <button class=\"flag-button\" type=\"button\" aria-label=\"Flag designprincipper\" title=\"Flag designprincipper\">\u2691<\/button>\n <h2 id=\"designprincipper-heading\">Genbes\u00f8g af designprincipper<\/h2>\n <p>\n Designprincipperne fungerer som broen mellem projektets empiri og de konkrete designvalg. De er ikke \u201cfundet p\u00e5\u201d som en l\u00f8s id\u00e9, men er udviklet gennem observationer, interviews, go-alongs, mockup-afpr\u00f8vning og sprogtjek.\n <\/p>\n <p>\n I opgaven bruger jeg derfor designprincipperne som retningsgivende guidelines: De hj\u00e6lper med at forklare, hvorfor l\u00f8sningen ender med to fysiske \u00c1-tegn og en QR-plakat som sekund\u00e6rt digitalt supplement.\n <\/p>\n <p>\n Det vigtigste i Reflect-fasen er, at principperne ikke bare gentages. De genbes\u00f8ges og sk\u00e6rpes. S\u00e6rligt designprincip 8 peger tilbage p\u00e5 den f\u00f8rste empiri, hvor indgangen viste sig som mere end en d\u00f8r: et socialt overgangsrum.\n <\/p>\n <\/div>\n\n <figure class=\"principles-image-card\">\n <div class=\"mine-topbar\">\n <div class=\"mine-title\">\n <span class=\"mine-icon\" aria-hidden=\"true\"><\/span>\n <span>designprincipper.png<\/span>\n <\/div>\n <div class=\"mine-buttons\" aria-hidden=\"true\">\n <span class=\"mine-btn\">_<\/span>\n <span class=\"mine-btn\">\u25a1<\/span>\n <span class=\"mine-btn\">\u00d7<\/span>\n <\/div>\n <\/div>\n\n <div class=\"principles-image-inner\">\n <img decoding=\"async\"\n src=\"https:\/\/itdd.au.dk\/single-user-mode\/wp-content\/uploads\/sites\/103\/2026\/05\/ChatGPT-Image-May-17-2026-10_28_45-PM.png\"\n alt=\"Designprincipper for projektet\"\n loading=\"lazy\">\n <\/div>\n\n <figcaption class=\"figcaption\">\n Figur 2. Designprincipperne samler forbindelsen mellem empiri, designvalg og n\u00e6ste iteration.\n <\/figcaption>\n <\/figure>\n <\/div>\n <\/section>\n\n <section class=\"tools-card content-beacon\" id=\"tools-card\" data-beacon=\"v\u00e6rkt\u00f8jer\">\n <button class=\"flag-button\" type=\"button\" aria-label=\"Flag designv\u00e6rkt\u00f8jer\" title=\"Flag designv\u00e6rkt\u00f8jer\">\u2691<\/button>\n <h2>Designv\u00e6rkt\u00f8jer i processen<\/h2>\n <p>\n Projektet er ogs\u00e5 formet af de digitale og analoge designv\u00e6rkt\u00f8jer, jeg har brugt undervejs. Nogle v\u00e6rkt\u00f8jer har st\u00f8ttet analyse og skrivning, mens andre har gjort det muligt at visualisere, afpr\u00f8ve og formidle projektets bev\u00e6gelse fra bred id\u00e9 til sk\u00e6rpet designretning.\n <\/p>\n\n <div class=\"tools-grid\">\n <div class=\"tool-tile\">\n <h3>Analyse og overblik<\/h3>\n <p>\n OpenQDA, Outline og Obsidian blev brugt til at skabe overblik over empiri, noter, temaer og forbindelser mellem teori og designprincipper.\n <\/p>\n <\/div>\n\n <div class=\"tool-tile\">\n <h3>Id\u00e9 og visualisering<\/h3>\n <p>\n Draw.io, id\u00e9kort, figurer og infoboard blev brugt til at visualisere projektets bev\u00e6gelse og udvikle enkle low-fi mockups. Miro havde en mindre rolle som f\u00e6lles visuelt st\u00f8ttev\u00e6rkt\u00f8j i undervisnings- og feedbacksammenh\u00e6nge.\n <\/p>\n <\/div>\n\n <div class=\"tool-tile\">\n <h3>Prototype og AI<\/h3>\n <p>\n Low-fi mockups, HTML-prototype og generativ AI blev brugt som creativity support tools, men altid vurderet op imod empiri og brugernes respons.\n <\/p>\n <\/div>\n <\/div>\n <\/section>\n\n <div class=\"reflect-grid\">\n <div class=\"reflect-card content-beacon\" id=\"reflect-card\" data-beacon=\"indgang\">\n <button class=\"flag-button\" type=\"button\" aria-label=\"Flag reflect-afsnit\" title=\"Flag reflect-afsnit\">\u2691<\/button>\n <h2>Reflect: tilbage til indgangen<\/h2>\n\n <p>\n Reflect-fasen viser, at projektet ikke kun handler om at hj\u00e6lpe bes\u00f8gende med at finde vej til \u00c1 handil. Det handler ogs\u00e5 om, hvad der sker, n\u00e5r de kommer frem.\n <\/p>\n\n <p>\n Den f\u00f8rste observation viste, at indgangen ikke bare er en praktisk adgang til butikken. Den fungerer ogs\u00e5 som et socialt overgangsrum, hvor kunder stopper op, hilser, taler sammen, ser p\u00e5 varer og bev\u00e6ger sig ind i butikkens lokale hverdagspraksis.\n <\/p>\n\n <p>\n Senere blev projektet sk\u00e6rpet mod ankomst og fysisk orientering, fordi go-alongs viste, at tvivlen opst\u00e5r f\u00f8r butikken er synlig. Men designprincip 8 peger tilbage p\u00e5 den f\u00f8rste empiri: N\u00e5r bes\u00f8gende har fundet frem, skal de ogs\u00e5 kunne tr\u00e6de ind i stedet p\u00e5 en m\u00e5de, der passer til \u00c1 handils lokale karakter.\n <\/p>\n\n <p>\n N\u00e6ste iteration b\u00f8r derfor ikke kun teste skiltenes placering, st\u00f8rrelse og synlighed. Den b\u00f8r ogs\u00e5 unders\u00f8ge, hvordan QR-plakaten, sm\u00e5 orienteringsgreb og butikkens eksisterende lokale praksis kan spille sammen uden at g\u00f8re stedet generisk eller turistet.\n <\/p>\n\n <div class=\"mini-blocks\">\n <div class=\"mini-block\">2 fysiske \u00c1-tegn<\/div>\n <div class=\"mini-block\">1 QR-plakat<\/div>\n <div class=\"mini-block\">Indgangen som overgang<\/div>\n <\/div>\n\n <div class=\"mine-strip\" aria-hidden=\"true\">\n <span>1<\/span>\n <span><\/span>\n <span>2<\/span>\n <span>\u2691<\/span>\n <span><\/span>\n <span>1<\/span>\n <span>\u2739<\/span>\n <span><\/span>\n <span>3<\/span>\n <span><\/span>\n <span>\u2691<\/span>\n <span>2<\/span>\n <\/div>\n <\/div>\n\n <aside class=\"side-card content-beacon\" id=\"iteration-card\" data-beacon=\"iteration\">\n <button class=\"flag-button\" type=\"button\" aria-label=\"Flag n\u00e6ste iteration\" title=\"Flag n\u00e6ste iteration\">\u2691<\/button>\n <h3>N\u00e6ste iteration<\/h3>\n <ul>\n <li>Afpr\u00f8ve f\u00f8rste skilt ved den brede vej f\u00f8r broen.<\/li>\n <li>Afpr\u00f8ve sekund\u00e6rt \u00c1-tegn inde p\u00e5 omr\u00e5det.<\/li>\n <li>Placere QR-plakaten d\u00e9r, hvor den ikke forstyrrer ankomsten.<\/li>\n <li>Unders\u00f8ge om indgangen stadig f\u00f8les lokal, social og im\u00f8dekommende.<\/li>\n <li>Bruge designprincipperne som vurderingsramme for n\u00e6ste test.<\/li>\n <\/ul>\n <\/aside>\n <\/div>\n\n <\/div>\n <\/section>\n\n <script>\n (() => {\n const root = document.querySelector(\"#reflectMinePage\");\n const flagCount = root.querySelector(\"[data-flag-count]\");\n const scrollCount = root.querySelector(\"[data-scroll-count]\");\n const toast = root.querySelector(\"[data-toast]\");\n const moodButton = root.querySelector(\"[data-action='mood']\");\n const moodFaces = [\"\ud83d\ude42\", \"\ud83d\ude0e\", \"\ud83e\udd14\", \"\ud83d\ude42\"];\n let moodIndex = 0;\n let toastTimer = 0;\n\n function pad(number) {\n return String(Math.max(0, Math.min(999, number))).padStart(3, \"0\");\n }\n\n function showToast(message) {\n toast.textContent = message;\n toast.classList.add(\"is-visible\");\n window.clearTimeout(toastTimer);\n toastTimer = window.setTimeout(() => {\n toast.classList.remove(\"is-visible\");\n }, 1300);\n }\n\n function updateFlags() {\n const count = root.querySelectorAll(\".content-beacon.is-flagged\").length;\n flagCount.textContent = pad(count);\n }\n\n function updateScrollCounter() {\n const doc = document.documentElement;\n const max = Math.max(1, doc.scrollHeight - window.innerHeight);\n const progress = Math.round((window.scrollY \/ max) * 999);\n scrollCount.textContent = pad(progress);\n }\n\n function scanSection() {\n const sections = Array.from(root.querySelectorAll(\".content-beacon\"));\n const unscanned = sections.filter((section) => !section.classList.contains(\"is-scanned\"));\n const pick = (unscanned.length ? unscanned : sections)[Math.floor(Math.random() * (unscanned.length || sections.length))];\n if (!pick) return;\n root.querySelectorAll(\".content-beacon.is-scanned\").forEach((section) => section.classList.remove(\"is-scanned\"));\n pick.classList.add(\"is-scanned\", \"is-seen\");\n pick.scrollIntoView({ behavior: \"smooth\", block: \"center\" });\n showToast(`${pick.dataset.beacon || \"spor\"} fundet`);\n }\n\n root.querySelectorAll(\".flag-button\").forEach((button) => {\n button.addEventListener(\"click\", () => {\n const card = button.closest(\".content-beacon\");\n card.classList.toggle(\"is-flagged\");\n button.textContent = card.classList.contains(\"is-flagged\") ? \"\u2713\" : \"\u2691\";\n updateFlags();\n showToast(card.classList.contains(\"is-flagged\") ? \"Flag sat\" : \"Flag fjernet\");\n });\n });\n\n root.querySelectorAll(\".quirk-tile\").forEach((tile) => {\n tile.addEventListener(\"click\", () => {\n tile.classList.add(\"is-popped\");\n showToast(tile.dataset.note || \"Spor fundet\");\n\n if (tile.dataset.actionTile === \"glitch\") {\n root.classList.add(\"is-glitch\");\n window.setTimeout(() => root.classList.remove(\"is-glitch\"), 820);\n return;\n }\n\n const target = document.getElementById(tile.dataset.target);\n if (target) {\n target.classList.add(\"is-scanned\", \"is-seen\");\n target.scrollIntoView({ behavior: \"smooth\", block: \"center\" });\n }\n });\n });\n\n moodButton.addEventListener(\"click\", () => {\n moodIndex = (moodIndex + 1) % moodFaces.length;\n moodButton.textContent = moodFaces[moodIndex];\n showToast(\"Hum\u00f8r opdateret\");\n });\n\n root.querySelector(\"[data-action='scan']\").addEventListener(\"click\", scanSection);\n root.querySelector(\"[data-action='glitch']\").addEventListener(\"click\", () => {\n root.classList.add(\"is-glitch\");\n showToast(\"Pixelst\u00f8j\");\n window.setTimeout(() => root.classList.remove(\"is-glitch\"), 820);\n });\n\n if (\"IntersectionObserver\" in window) {\n const observer = new IntersectionObserver((entries) => {\n entries.forEach((entry) => {\n if (entry.isIntersecting) {\n entry.target.classList.add(\"is-seen\");\n }\n });\n }, { threshold: 0.35 });\n\n root.querySelectorAll(\".content-beacon\").forEach((section) => observer.observe(section));\n } else {\n root.querySelectorAll(\".content-beacon\").forEach((section) => section.classList.add(\"is-seen\"));\n }\n\n window.addEventListener(\"scroll\", updateScrollCounter, { passive: true });\n updateFlags();\n updateScrollCounter();\n })();\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<script>\n (function () {\n var path = window.location.pathname.replace(\/\\\/+$\/, '');\n if (path === '\/single-user-mode\/reflect') {\n document.body.classList.add('sum-reflect-page');\n }\n })();\n<\/script>\n\n<style>\n \/* Comment block styling only for \/single-user-mode\/reflect\/ *\/\n\n body.sum-reflect-page .wp-block-comments {\n position: relative;\n margin-top: 0 !important;\n padding: 26px !important;\n background:\n linear-gradient(45deg, rgba(255,255,255,0.04) 25%, transparent 25%),\n linear-gradient(-45deg, rgba(0,0,0,0.18) 25%, transparent 25%),\n linear-gradient(#3f7d20 0 22%, #8b5a2b 22% 100%);\n background-size: 18px 18px, 18px 18px, 100% 100%;\n border: 4px solid #1f1f1f !important;\n box-shadow:\n 0 0 0 4px #5b3518,\n 8px 8px 0 #000,\n inset 0 0 0 3px rgba(255,255,255,0.18);\n color: #fff;\n image-rendering: pixelated;\n }\n\n body.sum-reflect-page .wp-block-comments::before {\n content: \"COMMENT CRAFTING TABLE\";\n display: block;\n margin: -10px 0 22px;\n padding: 10px 12px;\n background: #c49a6c;\n color: #1d1208;\n border: 3px solid #1f1f1f;\n box-shadow:\n inset 3px 3px 0 rgba(255,255,255,0.35),\n inset -3px -3px 0 rgba(0,0,0,0.25),\n 4px 4px 0 #000;\n font-family: \"Courier New\", monospace;\n font-size: 15px;\n font-weight: 900;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n }\n\n body.sum-reflect-page .wp-block-comments-title {\n margin-top: 0 !important;\n margin-bottom: 18px !important;\n color: #fff !important;\n font-family: \"Courier New\", monospace;\n font-weight: 900;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n text-shadow:\n 3px 3px 0 #000,\n 0 0 12px rgba(91, 255, 84, 0.35);\n }\n\n body.sum-reflect-page .wp-block-comments .wp-block-comment-template {\n margin: 0 !important;\n padding: 0 !important;\n }\n\n body.sum-reflect-page .wp-block-comments li.comment {\n margin: 0 0 18px !important;\n padding: 16px !important;\n list-style: none;\n background:\n linear-gradient(45deg, rgba(255,255,255,0.05) 25%, transparent 25%),\n #2f2f2f;\n background-size: 16px 16px;\n border: 3px solid #111;\n box-shadow:\n inset 3px 3px 0 rgba(255,255,255,0.14),\n inset -3px -3px 0 rgba(0,0,0,0.4),\n 5px 5px 0 #000;\n }\n\n body.sum-reflect-page .wp-block-comment-author-name,\n body.sum-reflect-page .wp-block-comment-date,\n body.sum-reflect-page .wp-block-comment-edit-link,\n body.sum-reflect-page .wp-block-comment-reply-link {\n font-family: \"Courier New\", monospace;\n }\n\n body.sum-reflect-page .wp-block-comment-author-name {\n font-weight: 900;\n color: #7cff5b !important;\n text-transform: uppercase;\n text-shadow: 2px 2px 0 #000;\n }\n\n body.sum-reflect-page .wp-block-comment-date,\n body.sum-reflect-page .wp-block-comment-edit-link,\n body.sum-reflect-page .wp-block-comment-reply-link {\n color: #d9d9d9 !important;\n font-size: 13px;\n }\n\n body.sum-reflect-page .wp-block-comment-content {\n position: relative;\n margin-top: 12px;\n padding: 14px 14px 14px 18px;\n background: rgba(0, 0, 0, 0.42);\n border-left: 6px solid #7cff5b;\n box-shadow: inset 4px 0 0 #2f8f45;\n color: #f5f5f5;\n }\n\n body.sum-reflect-page .wp-block-comment-content::before {\n content: \"\u25c6\";\n position: absolute;\n left: -15px;\n top: 12px;\n color: #7cff5b;\n font-size: 16px;\n text-shadow: 2px 2px 0 #000;\n }\n\n body.sum-reflect-page .wp-block-comment-content p {\n margin-bottom: 12px;\n line-height: 1.6;\n }\n\n body.sum-reflect-page .wp-block-post-comments-form {\n margin-top: 24px;\n padding: 20px !important;\n background:\n linear-gradient(45deg, rgba(255,255,255,0.05) 25%, transparent 25%),\n #4a2b15;\n background-size: 18px 18px;\n border: 4px solid #111;\n box-shadow:\n inset 4px 4px 0 rgba(255,255,255,0.16),\n inset -4px -4px 0 rgba(0,0,0,0.36),\n 7px 7px 0 #000;\n }\n\n body.sum-reflect-page .wp-block-post-comments-form label {\n color: #fff !important;\n font-family: \"Courier New\", monospace;\n font-weight: 900;\n text-transform: uppercase;\n text-shadow: 2px 2px 0 #000;\n }\n\n body.sum-reflect-page .wp-block-post-comments-form input:not([type=\"submit\"]),\n body.sum-reflect-page .wp-block-post-comments-form textarea {\n box-sizing: border-box;\n width: 100%;\n max-width: 100%;\n background: #111 !important;\n color: #fff !important;\n border: 3px solid #000 !important;\n border-radius: 0 !important;\n padding: 12px !important;\n font-family: \"Courier New\", monospace;\n box-shadow:\n inset 3px 3px 0 rgba(0,0,0,0.7),\n inset -3px -3px 0 rgba(255,255,255,0.08);\n }\n\n body.sum-reflect-page .wp-block-post-comments-form input:not([type=\"submit\"]):focus,\n body.sum-reflect-page .wp-block-post-comments-form textarea:focus {\n outline: none !important;\n border-color: #7cff5b !important;\n box-shadow:\n 0 0 0 3px #2f8f45,\n inset 3px 3px 0 rgba(0,0,0,0.7);\n }\n\n body.sum-reflect-page .wp-block-post-comments-form input#submit.wp-block-button__link.wp-element-button {\n background: #39a935 !important;\n color: #fff !important;\n border: 4px solid #111 !important;\n border-radius: 0 !important;\n padding: 13px 22px !important;\n font-family: \"Courier New\", monospace;\n font-weight: 900;\n letter-spacing: 0.06em;\n text-transform: uppercase;\n text-shadow: 2px 2px 0 #000;\n box-shadow:\n inset 3px 3px 0 rgba(255,255,255,0.28),\n inset -3px -3px 0 rgba(0,0,0,0.35),\n 5px 5px 0 #000;\n cursor: pointer;\n }\n\n body.sum-reflect-page .wp-block-post-comments-form input#submit.wp-block-button__link.wp-element-button:hover {\n background: #46c93f !important;\n transform: translate(-1px, -1px);\n box-shadow:\n inset 3px 3px 0 rgba(255,255,255,0.28),\n inset -3px -3px 0 rgba(0,0,0,0.35),\n 7px 7px 0 #000;\n }\n\n body.sum-reflect-page .wp-block-post-comments-form input#submit.wp-block-button__link.wp-element-button:active {\n transform: translate(3px, 3px);\n box-shadow:\n inset -3px -3px 0 rgba(255,255,255,0.16),\n inset 3px 3px 0 rgba(0,0,0,0.45),\n 2px 2px 0 #000;\n }\n\n @media (max-width: 640px) {\n body.sum-reflect-page .wp-block-comments {\n padding: 18px !important;\n box-shadow:\n 0 0 0 3px #5b3518,\n 5px 5px 0 #000,\n inset 0 0 0 2px rgba(255,255,255,0.18);\n }\n\n body.sum-reflect-page .wp-block-comments::before {\n font-size: 12px;\n }\n\n body.sum-reflect-page .wp-block-comments li.comment,\n body.sum-reflect-page .wp-block-post-comments-form {\n box-shadow:\n inset 3px 3px 0 rgba(255,255,255,0.14),\n inset -3px -3px 0 rgba(0,0,0,0.4),\n 4px 4px 0 #000;\n }\n }\n<\/style>\n","protected":false},"excerpt":{"rendered":"<p>Reflect Mine – \u00c1 handil Reflect mode reflect_page.exe _ \u25a1 \u00d7 000 \ud83d\ude42 ? \u2739 000 Reflect Mine \u00c1 handil-projektet som en Minesweeper-inspireret reflect-side. Formen passer til processen: Jeg afd\u00e6kker \u00e9t felt ad gangen, markerer vigtige spor og bruger den r\u00f8de tr\u00e5d til at forbinde empiri, designprincipper, prototypefamilie og n\u00e6ste iteration. \u00c1 1 2 \u2691 […]<\/p>\n","protected":false},"author":85,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-727","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/itdd.au.dk\/single-user-mode\/wp-json\/wp\/v2\/pages\/727","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/itdd.au.dk\/single-user-mode\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/itdd.au.dk\/single-user-mode\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/itdd.au.dk\/single-user-mode\/wp-json\/wp\/v2\/users\/85"}],"replies":[{"embeddable":true,"href":"https:\/\/itdd.au.dk\/single-user-mode\/wp-json\/wp\/v2\/comments?post=727"}],"version-history":[{"count":19,"href":"https:\/\/itdd.au.dk\/single-user-mode\/wp-json\/wp\/v2\/pages\/727\/revisions"}],"predecessor-version":[{"id":1579,"href":"https:\/\/itdd.au.dk\/single-user-mode\/wp-json\/wp\/v2\/pages\/727\/revisions\/1579"}],"wp:attachment":[{"href":"https:\/\/itdd.au.dk\/single-user-mode\/wp-json\/wp\/v2\/media?parent=727"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}