diff --git "a/dist/main.bundle.js" "b/dist/main.bundle.js" new file mode 100644--- /dev/null +++ "b/dist/main.bundle.js" @@ -0,0 +1,1998 @@ +/******/ (() => { // webpackBootstrap +/******/ "use strict"; +/******/ var __webpack_modules__ = ({ + +/***/ 56: +/***/ ((module, __unused_webpack_exports, __webpack_require__) => { + + + +/* istanbul ignore next */ +function setAttributesWithoutAttributes(styleElement) { + var nonce = true ? __webpack_require__.nc : 0; + if (nonce) { + styleElement.setAttribute("nonce", nonce); + } +} +module.exports = setAttributesWithoutAttributes; + +/***/ }), + +/***/ 72: +/***/ ((module) => { + + + +var stylesInDOM = []; +function getIndexByIdentifier(identifier) { + var result = -1; + for (var i = 0; i < stylesInDOM.length; i++) { + if (stylesInDOM[i].identifier === identifier) { + result = i; + break; + } + } + return result; +} +function modulesToDom(list, options) { + var idCountMap = {}; + var identifiers = []; + for (var i = 0; i < list.length; i++) { + var item = list[i]; + var id = options.base ? item[0] + options.base : item[0]; + var count = idCountMap[id] || 0; + var identifier = "".concat(id, " ").concat(count); + idCountMap[id] = count + 1; + var indexByIdentifier = getIndexByIdentifier(identifier); + var obj = { + css: item[1], + media: item[2], + sourceMap: item[3], + supports: item[4], + layer: item[5] + }; + if (indexByIdentifier !== -1) { + stylesInDOM[indexByIdentifier].references++; + stylesInDOM[indexByIdentifier].updater(obj); + } else { + var updater = addElementStyle(obj, options); + options.byIndex = i; + stylesInDOM.splice(i, 0, { + identifier: identifier, + updater: updater, + references: 1 + }); + } + identifiers.push(identifier); + } + return identifiers; +} +function addElementStyle(obj, options) { + var api = options.domAPI(options); + api.update(obj); + var updater = function updater(newObj) { + if (newObj) { + if (newObj.css === obj.css && newObj.media === obj.media && newObj.sourceMap === obj.sourceMap && newObj.supports === obj.supports && newObj.layer === obj.layer) { + return; + } + api.update(obj = newObj); + } else { + api.remove(); + } + }; + return updater; +} +module.exports = function (list, options) { + options = options || {}; + list = list || []; + var lastIdentifiers = modulesToDom(list, options); + return function update(newList) { + newList = newList || []; + for (var i = 0; i < lastIdentifiers.length; i++) { + var identifier = lastIdentifiers[i]; + var index = getIndexByIdentifier(identifier); + stylesInDOM[index].references--; + } + var newLastIdentifiers = modulesToDom(newList, options); + for (var _i = 0; _i < lastIdentifiers.length; _i++) { + var _identifier = lastIdentifiers[_i]; + var _index = getIndexByIdentifier(_identifier); + if (stylesInDOM[_index].references === 0) { + stylesInDOM[_index].updater(); + stylesInDOM.splice(_index, 1); + } + } + lastIdentifiers = newLastIdentifiers; + }; +}; + +/***/ }), + +/***/ 113: +/***/ ((module) => { + + + +/* istanbul ignore next */ +function styleTagTransform(css, styleElement) { + if (styleElement.styleSheet) { + styleElement.styleSheet.cssText = css; + } else { + while (styleElement.firstChild) { + styleElement.removeChild(styleElement.firstChild); + } + styleElement.appendChild(document.createTextNode(css)); + } +} +module.exports = styleTagTransform; + +/***/ }), + +/***/ 208: +/***/ ((module, __webpack_exports__, __webpack_require__) => { + +/* harmony export */ __webpack_require__.d(__webpack_exports__, { +/* harmony export */ A: () => (__WEBPACK_DEFAULT_EXPORT__) +/* harmony export */ }); +/* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(354); +/* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__); +/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(314); +/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__); +/* harmony import */ var _node_modules_css_loader_dist_cjs_js_transformers_custom_css__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(995); +// Imports + + + +var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default())); +___CSS_LOADER_EXPORT___.i(_node_modules_css_loader_dist_cjs_js_transformers_custom_css__WEBPACK_IMPORTED_MODULE_2__/* ["default"] */ .A); +// Module +___CSS_LOADER_EXPORT___.push([module.id, `/* style.css - Transformers Playthrough */ + +/* Import ultrascale-playbook base styles and add transformers-specific styling */ +/* Define colors */ +:root { + --distill-gray: rgb(107, 114, 128); + --distill-gray-light: rgb(185, 185, 185); + --distill-gray-lighter: rgb(228, 228, 228); + --distill-gray-lightest: rgb(245, 245, 245); + --distill-blue: #007BFF; +} + +/* Container for the controls */ +[id^="plot-"] { + display: flex; + flex-direction: column; + align-items: center; + gap: 15px; /* Adjust the gap between controls as needed */ +} +[id^="plot-"] figure { + margin-bottom: 0px; + margin-top: 0px; + padding: 0px; +} +.plotly_caption { + font-style: italic; + margin-top: 10px; +} + +.plotly_controls { + display: flex; + flex-wrap: wrap; + flex-direction: row; + justify-content: center; + align-items: flex-start; + gap: 30px; +} + + +.plotly_input_container { + display: flex; + align-items: center; + flex-direction: column; + gap: 10px; +} + +/* Style for the select dropdown */ +.plotly_input_container > select { + padding: 2px 4px; + /* border: 1px solid #ccc; */ + line-height: 1.5em; + text-align: center; + border-radius: 4px; + font-size: 12px; + background-color: var(--distill-gray-lightest); + outline: none; +} + +/* Style for the range input */ + +.plotly_slider { + display: flex; + align-items: center; + gap: 10px; +} + +.plotly_slider > input[type="range"] { + -webkit-appearance: none; + height: 2px; + background: var(--distill-gray-light); + border-radius: 5px; + outline: none; +} + +.plotly_slider > span { + font-size: 14px; + line-height: 1.6em; + min-width: 16px; +} + +.plotly_slider > input[type="range"]::-webkit-slider-thumb { + -webkit-appearance: none; + appearance: none; + width: 18px; + height: 18px; + border-radius: 50%; + background: var(--distill-blue); + cursor: pointer; +} + +.plotly_slider > input[type="range"]::-moz-range-thumb { + width: 18px; + height: 18px; + border-radius: 50%; + background: var(--distill-blue); + cursor: pointer; +} + +/* Style for the labels */ +.plotly_input_container > label { + font-size: 14px; + font-weight: bold; +} + +.main-plot-container { + margin-top: 21px; + margin-bottom: 35px; +} + +.main-plot-container > figure { + display: block !important; + /* Let this be handled by graph-container */ + margin-bottom: 0px; + margin-top: 0px; +} +.main-plot-container > div { + display: none !important; +} + + +@media (min-width: 768px) { + .main-plot-container > figure { + display: none !important; + } + .main-plot-container > div { + display: flex !important; + } +} + +d-byline .byline { + grid-template-columns: 1fr; + grid-column: text; + font-size: 0.9rem; + line-height: 1.8em; +} + +@media (min-width: 768px) { + d-byline .byline { + grid-template-columns: 5fr 1fr 1fr; + } +} + +#title-plot { + margin-top: 0px; + margin-bottom: 0px; +} + +d-contents > nav a.active { + text-decoration: underline; +} + +@media (max-width: 1199px) { + d-contents { + display: none; + background: white; + justify-self: start; + align-self: start; + padding-bottom: 0.5em; + margin-bottom: 1em; + padding-left: 0.25em; + border-bottom: 1px solid rgba(0, 0, 0, 0.1); + border-bottom-width: 1px; + border-bottom-style: solid; + border-bottom-color: rgba(0, 0, 0, 0.1); + overflow-y: scroll; + height: calc(100vh - 40px); + scrollbar-width: none; + z-index: -100; + } +} + +d-contents a:hover { + border-bottom: none; +} + +toc-title { + font-weight: bold; + font-size: 1.2em; + color: #333; +} + +toggle-icon { + transition: transform 0.3s; +} + +toggle-icon.collapsed { + transform: rotate(90deg); +} + +.toc-content { + margin-top: 15px; + overflow: hidden; + /* max-height: 1000px; */ + transition: max-height 0.3s ease-out; +} + +.toc-content.collapsed { + max-height: 0; + margin-top: 0; +} + +@media (min-width: 1200px) { + d-article { + /* Ensure d-article does not prevent sticky positioning */ + overflow: visible; + } + + d-contents { + align-self: start; + background: white; + grid-column-start: 1 !important; + grid-column-end: 4 !important; + grid-row: auto / span 6; + justify-self: end; + margin-top: 0em; + padding-right: 3em; + padding-left: 2em; + /* border-right: 1px solid rgba(0, 0, 0, 0.1); + border-right-width: 1px; + border-right-style: solid; + border-right-color: rgba(0, 0, 0, 0.1); */ + position: -webkit-sticky; /* For Safari */ + position: sticky; + top: 10px; /* Adjust this value if needed */ + overflow-y: auto; + height: calc(100vh - 40px); + scrollbar-width: none; + transition: max-height 0.3s ease-out; + z-index: -100; + } +} + +d-contents nav h3 { + margin-top: 0; + margin-bottom: 1em; +} + +d-contents nav div div { + color: rgba(0, 0, 0, 0.8); + font-weight: bold; +} + +d-contents nav a { + color: rgba(0, 0, 0, 0.8); + border-bottom: none; + text-decoration: none; +} + +d-contents li { + list-style-type: none; +} + +d-contents ul, d-article d-contents ul { + padding-left: 1em; +} + +d-contents nav ul li { + margin-bottom: .25em; +} + +d-contents nav a:hover { + text-decoration: underline solid rgba(0, 0, 0, 0.6); +} + +d-contents nav ul { + margin-top: 0; + margin-bottom: 6px; +} + + +d-contents nav > div { + display: block; + outline: none; + margin-bottom: 0.5em; +} + +d-contents nav > div > a { + font-size: 13px; + font-weight: 600; +} + +d-article aside { + margin-bottom: 1em; +} + +d-article img { + max-width: 100%; +} + +@media (min-width: 768px) { + d-article aside { + margin-bottom: 0; + } +} + +d-contents nav > div > a:hover, +d-contents nav > ul > li > a:hover { + text-decoration: none; +} + +.note-box { + background-color: #f6f8fa; + border-left: 4px solid #444444; + padding: 1rem; + margin: 1rem 0; /* Keep this modest margin */ + border-radius: 6px; + /* Add this to ensure the box only takes up needed space */ + display: inline-block; +} + +.note-box-title { + margin: 0; + color: #444444; + font-weight: 600; + font-size: 1em; +} + +.note-box-content { + margin-top: 0.5rem; + margin-bottom: 0; /* Ensure no bottom margin */ + color: #24292f; + font-size: 0.9em; + line-height: 1.5em; +} + +/* For dark mode support */ +@media (prefers-color-scheme: dark) { + .note-box { + background-color: #1c1c1c; + border-left-color: #888888; + } + .note-box-title { + color: #888888; + } + .note-box-content { + color: #d4d4d4; + } +} + +d-article { + font-size: 1.0em; +} + +.figure-legend { + font-size: 0.9em; + font-style: italic; + color: var(--distill-gray); + line-height: 1.5em; +} + +d-code { + font-size: 12px; +} + +.large-image-background { + width: 100vw; + padding-top: 10px; + padding-bottom: 10px; + margin-left: calc(-50vw + 50%); + margin-right: calc(-50vw + 50%); + background: white; + height: fit-content; /* This will make it match the image height */ + display: flex; + justify-content: center; /* This will center your image */ +} + +.large-image-background-transparent { + /* width: 100vw; */ + padding-top: 10px; + padding-bottom: 10px; + /* margin-left: calc(-50vw + 50%); */ + margin-left:-100px; + margin-right: -100px; + /* margin-right: calc(-50vw + 50%); */ + /* background: white; */ + height: fit-content; /* This will make it match the image height */ + display: flex; + justify-content: center; /* This will center your image */ +} + +.boxed-image { + padding: 0.5rem; + background: white; + border-radius: 12px; + border: 1px solid #e5e7eb; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); +} + +d-article li { + margin-bottom: 0.0em; +} + +d-article ul ul { + margin-bottom: 0.0em; +} + +d-article ol ol { + margin-bottom: 0.0em; +} + +d-article hr { + grid-column: text; +} + +/* Memory visualization */ +#graph-all { + min-width: 500px; + margin-right: 10px; + margin-bottom: 2rem; + padding: 0.5rem; + background: #f9fafb; + border-radius: 12px; + border: 1px solid #e5e7eb; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); +} + + +/* Main container styles */ +#controls { + max-width: 1200px; + /* margin: 2rem auto; */ + margin-bottom: 2rem; + margin-left: 10px; + padding: 0.6rem; + background: #f9fafb; + border-radius: 12px; + border: 1px solid #e5e7eb; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); +} + +/* Grid layout */ +#controls { + display: grid; + grid-template-columns: 1fr 1fr; + /* gap: 2rem; */ +} + +/* Cell styles */ +.cell { + margin-bottom: 0.2rem; +} + +/* Label styles */ +label { + display: block; + /* margin-bottom: 0.5rem; */ + font-size: 0.8rem; + font-weight: 500; + color: #374151; +} + +/* Input container for range + number combination */ +.input-container { + display: flex; + gap: 1rem; + align-items: center; +} + +/* Range input styling */ +input[type="range"] { + flex: 1; + height: 6px; + background: #e5e7eb; + border-radius: 3px; + appearance: none; + outline: none; +} + +input[type="range"]::-webkit-slider-thumb { + appearance: none; + width: 16px; + height: 16px; + background: #3b82f6; + border-radius: 50%; + cursor: pointer; + transition: background 0.15s ease; +} + +input[type="range"]::-webkit-slider-thumb:hover { + background: #2563eb; +} + +/* Number input styling */ +input[type="number"] { + width: 80px; + padding: 0.5rem; + border: 1px solid #e5e7eb; + border-radius: 6px; + font-size: 0.9rem; + color: #374151; +} + +/* Select styling */ +select { + width: 100%; + padding: 0.5rem; + border: 1px solid #e5e7eb; + border-radius: 6px; + background: white; + font-size: 0.9rem; + color: #374151; + cursor: pointer; +} + +/* Checkbox styling */ +input[type="checkbox"] { + width: 1.2rem; + height: 1.2rem; + margin-right: 0.5rem; + border: 2px solid #e5e7eb; + border-radius: 4px; + cursor: pointer; +} + +/* Column specific styles */ +.column-1 { + padding-right: 0.5rem; +} + +.column-2 { + padding-left: 0.5rem; +} + +/* Checkbox container */ +.checkbox-container { + display: flex; + align-items: center; + margin-bottom: 1rem; +} + +/* Memory visualization styles */ +.memory-block { + background: #fff; + border-radius: 8px; + padding: 1rem; + margin-bottom: 1rem; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); +} + +.memory-title { + font-size: 1.1rem; + font-weight: 500; + color: #374151; + margin-bottom: 0.5rem; +} + +.memory-value { + font-size: 1.5rem; + font-weight: 600; + color: #3b82f6; +} + +/* Responsive adjustments */ +@media (max-width: 768px) { + #controls { + grid-template-columns: 1fr; + padding: 1rem; + } + + .column-1, .column-2 { + padding: 0; + } +} + +/* Hover states and transitions */ +input:hover, select:hover { + border-color: #3b82f6; +} + +input:focus, select:focus { + border-color: #2563eb; + outline: none; + box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1); +} + +/* Add smooth transitions */ +input, select, button { + transition: all 0.15s ease; +} + +/* Preset dropdown special styling */ +select[name="presets"] { + background-color: #f3f4f6; + font-weight: 500; +} + +/* Memory graph enhancements */ +.activation-memory { + background: #dbeafe; + padding: 1rem; + border-radius: 8px; + margin-bottom: 1rem; +} + +.gradient-memory { + background: #ede9fe; + padding: 1rem; + border-radius: 8px; +} + +.order-button-second { + background: linear-gradient(135deg, #6DB4C4, #D4A5B8); + color: white; + font-size: 18px; + font-weight: 600; + padding: 20px 20px; + border: none; + border-radius: 12px; + cursor: pointer; + text-transform: uppercase; + letter-spacing: 1px; + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); + transition: all 0.3s ease; + position: relative; + overflow: hidden; + } +.order-button-second:hover { + transform: translateY(-2px); + box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25); +} + +.order-button:active { + transform: translateY(0); + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); +} + +.order-button-second::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0)); + transition: left 0.5s ease; +} + +.order-button-second:hover::before { + left: 100%; +} + +.order-button { + background: linear-gradient(135deg, #6DB4C4, #D4A5B8); + color: white; + font-size: 18px; + font-weight: 600; + padding: 16px 32px; + border: none; + border-radius: 12px; + cursor: pointer; + text-transform: uppercase; + letter-spacing: 1px; + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); + transition: all 0.3s ease; + position: relative; + overflow: hidden; + } + +.order-button:hover { + transform: translateY(-2px); + box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25); +} + +.order-button:active { + transform: translateY(0); + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); +} + +.order-button::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0)); + transition: left 0.5s ease; +} + +.order-button:hover::before { + left: 100%; +} +.order-button-container-second { + /* display: flex; */ + justify-content: center; + margin: 0px 0; +} + +.order-button-container { + display: flex; + justify-content: center; + margin: 0px 0 40px 0; +} + +d-article img { + width: 100%!important; +} + + +iframe, .js-plotly-plot { + width: 100%!important; + margin-bottom: 20px; +} + +.modebar-container { + display: none; +} + +#graph-container { + display: grid; grid-template-columns: 1fr 1fr; align-items: center; +} + +@media (max-width: 768px) { + #graph-container { + grid-template-columns: 1fr; + } +} + +@media (max-width: 1024px) { + #graph-container { + grid-template-columns: 1fr; + } + #graph-all { + margin-right: 0px; + } + #controls { + margin-left: 0px; + } +} + +.main-plot-container svg { + background: transparent !important; +} + +.large-image-background-transparent { + margin-left: 0px; + margin-right: 0px; +} + +/* Import transformers-specific styles */`, "",{"version":3,"sources":["webpack://./src/style.css"],"names":[],"mappings":"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","sourcesContent":["/* style.css - Transformers Playthrough */\n\n/* Import ultrascale-playbook base styles and add transformers-specific styling */\n/* Define colors */\n:root {\n --distill-gray: rgb(107, 114, 128);\n --distill-gray-light: rgb(185, 185, 185);\n --distill-gray-lighter: rgb(228, 228, 228);\n --distill-gray-lightest: rgb(245, 245, 245);\n --distill-blue: #007BFF;\n}\n\n/* Container for the controls */\n[id^=\"plot-\"] {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 15px; /* Adjust the gap between controls as needed */\n}\n[id^=\"plot-\"] figure {\n margin-bottom: 0px;\n margin-top: 0px;\n padding: 0px;\n}\n.plotly_caption {\n font-style: italic;\n margin-top: 10px;\n}\n\n.plotly_controls {\n display: flex;\n flex-wrap: wrap;\n flex-direction: row;\n justify-content: center;\n align-items: flex-start;\n gap: 30px;\n}\n\n\n.plotly_input_container {\n display: flex;\n align-items: center;\n flex-direction: column;\n gap: 10px;\n}\n\n/* Style for the select dropdown */\n.plotly_input_container > select {\n padding: 2px 4px;\n /* border: 1px solid #ccc; */\n line-height: 1.5em;\n text-align: center;\n border-radius: 4px;\n font-size: 12px;\n background-color: var(--distill-gray-lightest);\n outline: none;\n}\n\n/* Style for the range input */\n\n.plotly_slider {\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.plotly_slider > input[type=\"range\"] {\n -webkit-appearance: none;\n height: 2px;\n background: var(--distill-gray-light);\n border-radius: 5px;\n outline: none;\n}\n\n.plotly_slider > span {\n font-size: 14px;\n line-height: 1.6em;\n min-width: 16px;\n}\n\n.plotly_slider > input[type=\"range\"]::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 18px;\n height: 18px;\n border-radius: 50%;\n background: var(--distill-blue);\n cursor: pointer;\n}\n\n.plotly_slider > input[type=\"range\"]::-moz-range-thumb {\n width: 18px;\n height: 18px;\n border-radius: 50%;\n background: var(--distill-blue);\n cursor: pointer;\n}\n\n/* Style for the labels */\n.plotly_input_container > label {\n font-size: 14px;\n font-weight: bold;\n}\n\n.main-plot-container {\n margin-top: 21px;\n margin-bottom: 35px;\n}\n\n.main-plot-container > figure {\n display: block !important;\n /* Let this be handled by graph-container */\n margin-bottom: 0px;\n margin-top: 0px;\n}\n.main-plot-container > div {\n display: none !important;\n}\n\n\n@media (min-width: 768px) {\n .main-plot-container > figure {\n display: none !important;\n }\n .main-plot-container > div {\n display: flex !important;\n }\n}\n\nd-byline .byline {\n grid-template-columns: 1fr;\n grid-column: text;\n font-size: 0.9rem;\n line-height: 1.8em;\n}\n\n@media (min-width: 768px) {\n d-byline .byline {\n grid-template-columns: 5fr 1fr 1fr;\n }\n}\n\n#title-plot {\n margin-top: 0px;\n margin-bottom: 0px;\n}\n\nd-contents > nav a.active {\n text-decoration: underline;\n}\n\n@media (max-width: 1199px) {\n d-contents {\n display: none;\n background: white;\n justify-self: start;\n align-self: start;\n padding-bottom: 0.5em;\n margin-bottom: 1em;\n padding-left: 0.25em;\n border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n border-bottom-width: 1px;\n border-bottom-style: solid;\n border-bottom-color: rgba(0, 0, 0, 0.1);\n overflow-y: scroll;\n height: calc(100vh - 40px);\n scrollbar-width: none;\n z-index: -100;\n }\n}\n\nd-contents a:hover {\n border-bottom: none;\n}\n\ntoc-title {\n font-weight: bold;\n font-size: 1.2em;\n color: #333;\n}\n\ntoggle-icon {\n transition: transform 0.3s;\n}\n\ntoggle-icon.collapsed {\n transform: rotate(90deg);\n}\n\n.toc-content {\n margin-top: 15px;\n overflow: hidden;\n /* max-height: 1000px; */\n transition: max-height 0.3s ease-out;\n}\n\n.toc-content.collapsed {\n max-height: 0;\n margin-top: 0;\n}\n\n@media (min-width: 1200px) {\n d-article {\n /* Ensure d-article does not prevent sticky positioning */\n overflow: visible;\n }\n\n d-contents {\n align-self: start;\n background: white;\n grid-column-start: 1 !important;\n grid-column-end: 4 !important;\n grid-row: auto / span 6;\n justify-self: end;\n margin-top: 0em;\n padding-right: 3em;\n padding-left: 2em;\n /* border-right: 1px solid rgba(0, 0, 0, 0.1);\n border-right-width: 1px;\n border-right-style: solid;\n border-right-color: rgba(0, 0, 0, 0.1); */\n position: -webkit-sticky; /* For Safari */\n position: sticky;\n top: 10px; /* Adjust this value if needed */\n overflow-y: auto;\n height: calc(100vh - 40px);\n scrollbar-width: none;\n transition: max-height 0.3s ease-out;\n z-index: -100;\n }\n}\n\nd-contents nav h3 {\n margin-top: 0;\n margin-bottom: 1em;\n}\n\nd-contents nav div div {\n color: rgba(0, 0, 0, 0.8);\n font-weight: bold;\n}\n\nd-contents nav a {\n color: rgba(0, 0, 0, 0.8);\n border-bottom: none;\n text-decoration: none;\n}\n\nd-contents li {\n list-style-type: none;\n}\n\nd-contents ul, d-article d-contents ul {\n padding-left: 1em;\n}\n\nd-contents nav ul li {\n margin-bottom: .25em;\n}\n\nd-contents nav a:hover {\n text-decoration: underline solid rgba(0, 0, 0, 0.6);\n}\n\nd-contents nav ul {\n margin-top: 0;\n margin-bottom: 6px;\n}\n\n\nd-contents nav > div {\n display: block;\n outline: none;\n margin-bottom: 0.5em;\n}\n\nd-contents nav > div > a {\n font-size: 13px;\n font-weight: 600;\n}\n\nd-article aside {\n margin-bottom: 1em;\n}\n\nd-article img {\n max-width: 100%;\n}\n\n@media (min-width: 768px) {\n d-article aside {\n margin-bottom: 0;\n }\n}\n\nd-contents nav > div > a:hover,\nd-contents nav > ul > li > a:hover {\n text-decoration: none;\n}\n\n.note-box {\n background-color: #f6f8fa;\n border-left: 4px solid #444444;\n padding: 1rem;\n margin: 1rem 0; /* Keep this modest margin */\n border-radius: 6px;\n /* Add this to ensure the box only takes up needed space */\n display: inline-block;\n}\n\n.note-box-title {\n margin: 0;\n color: #444444;\n font-weight: 600;\n font-size: 1em;\n}\n\n.note-box-content {\n margin-top: 0.5rem;\n margin-bottom: 0; /* Ensure no bottom margin */\n color: #24292f;\n font-size: 0.9em;\n line-height: 1.5em;\n}\n\n/* For dark mode support */\n@media (prefers-color-scheme: dark) {\n .note-box {\n background-color: #1c1c1c;\n border-left-color: #888888;\n }\n .note-box-title {\n color: #888888;\n }\n .note-box-content {\n color: #d4d4d4;\n }\n}\n\nd-article {\n font-size: 1.0em;\n}\n\n.figure-legend {\n font-size: 0.9em;\n font-style: italic;\n color: var(--distill-gray);\n line-height: 1.5em;\n}\n\nd-code {\n font-size: 12px;\n}\n\n.large-image-background {\n width: 100vw;\n padding-top: 10px;\n padding-bottom: 10px;\n margin-left: calc(-50vw + 50%);\n margin-right: calc(-50vw + 50%);\n background: white;\n height: fit-content; /* This will make it match the image height */\n display: flex;\n justify-content: center; /* This will center your image */\n}\n\n.large-image-background-transparent {\n /* width: 100vw; */\n padding-top: 10px;\n padding-bottom: 10px;\n /* margin-left: calc(-50vw + 50%); */\n margin-left:-100px;\n margin-right: -100px;\n /* margin-right: calc(-50vw + 50%); */\n /* background: white; */\n height: fit-content; /* This will make it match the image height */\n display: flex;\n justify-content: center; /* This will center your image */\n}\n\n.boxed-image {\n padding: 0.5rem;\n background: white;\n border-radius: 12px;\n border: 1px solid #e5e7eb;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n}\n\nd-article li {\n margin-bottom: 0.0em;\n}\n\nd-article ul ul {\n margin-bottom: 0.0em;\n}\n\nd-article ol ol {\n margin-bottom: 0.0em;\n}\n\nd-article hr {\n grid-column: text;\n}\n\n/* Memory visualization */\n#graph-all {\n min-width: 500px;\n margin-right: 10px;\n margin-bottom: 2rem;\n padding: 0.5rem;\n background: #f9fafb;\n border-radius: 12px;\n border: 1px solid #e5e7eb;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n}\n\n\n/* Main container styles */\n#controls {\n max-width: 1200px;\n /* margin: 2rem auto; */\n margin-bottom: 2rem;\n margin-left: 10px;\n padding: 0.6rem;\n background: #f9fafb;\n border-radius: 12px;\n border: 1px solid #e5e7eb;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n}\n\n/* Grid layout */\n#controls {\n display: grid;\n grid-template-columns: 1fr 1fr;\n /* gap: 2rem; */\n}\n\n/* Cell styles */\n.cell {\n margin-bottom: 0.2rem;\n}\n\n/* Label styles */\nlabel {\n display: block;\n /* margin-bottom: 0.5rem; */\n font-size: 0.8rem;\n font-weight: 500;\n color: #374151;\n}\n\n/* Input container for range + number combination */\n.input-container {\n display: flex;\n gap: 1rem;\n align-items: center;\n}\n\n/* Range input styling */\ninput[type=\"range\"] {\n flex: 1;\n height: 6px;\n background: #e5e7eb;\n border-radius: 3px;\n appearance: none;\n outline: none;\n}\n\ninput[type=\"range\"]::-webkit-slider-thumb {\n appearance: none;\n width: 16px;\n height: 16px;\n background: #3b82f6;\n border-radius: 50%;\n cursor: pointer;\n transition: background 0.15s ease;\n}\n\ninput[type=\"range\"]::-webkit-slider-thumb:hover {\n background: #2563eb;\n}\n\n/* Number input styling */\ninput[type=\"number\"] {\n width: 80px;\n padding: 0.5rem;\n border: 1px solid #e5e7eb;\n border-radius: 6px;\n font-size: 0.9rem;\n color: #374151;\n}\n\n/* Select styling */\nselect {\n width: 100%;\n padding: 0.5rem;\n border: 1px solid #e5e7eb;\n border-radius: 6px;\n background: white;\n font-size: 0.9rem;\n color: #374151;\n cursor: pointer;\n}\n\n/* Checkbox styling */\ninput[type=\"checkbox\"] {\n width: 1.2rem;\n height: 1.2rem;\n margin-right: 0.5rem;\n border: 2px solid #e5e7eb;\n border-radius: 4px;\n cursor: pointer;\n}\n\n/* Column specific styles */\n.column-1 {\n padding-right: 0.5rem;\n}\n\n.column-2 {\n padding-left: 0.5rem;\n}\n\n/* Checkbox container */\n.checkbox-container {\n display: flex;\n align-items: center;\n margin-bottom: 1rem;\n}\n\n/* Memory visualization styles */\n.memory-block {\n background: #fff;\n border-radius: 8px;\n padding: 1rem;\n margin-bottom: 1rem;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);\n}\n\n.memory-title {\n font-size: 1.1rem;\n font-weight: 500;\n color: #374151;\n margin-bottom: 0.5rem;\n}\n\n.memory-value {\n font-size: 1.5rem;\n font-weight: 600;\n color: #3b82f6;\n}\n\n/* Responsive adjustments */\n@media (max-width: 768px) {\n #controls {\n grid-template-columns: 1fr;\n padding: 1rem;\n }\n\n .column-1, .column-2 {\n padding: 0;\n }\n}\n\n/* Hover states and transitions */\ninput:hover, select:hover {\n border-color: #3b82f6;\n}\n\ninput:focus, select:focus {\n border-color: #2563eb;\n outline: none;\n box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);\n}\n\n/* Add smooth transitions */\ninput, select, button {\n transition: all 0.15s ease;\n}\n\n/* Preset dropdown special styling */\nselect[name=\"presets\"] {\n background-color: #f3f4f6;\n font-weight: 500;\n}\n\n/* Memory graph enhancements */\n.activation-memory {\n background: #dbeafe;\n padding: 1rem;\n border-radius: 8px;\n margin-bottom: 1rem;\n}\n\n.gradient-memory {\n background: #ede9fe;\n padding: 1rem;\n border-radius: 8px;\n}\n\n.order-button-second {\n background: linear-gradient(135deg, #6DB4C4, #D4A5B8);\n color: white;\n font-size: 18px;\n font-weight: 600;\n padding: 20px 20px;\n border: none;\n border-radius: 12px;\n cursor: pointer;\n text-transform: uppercase;\n letter-spacing: 1px;\n box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);\n transition: all 0.3s ease;\n position: relative;\n overflow: hidden;\n }\n.order-button-second:hover {\n transform: translateY(-2px);\n box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);\n}\n\n.order-button:active {\n transform: translateY(0);\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);\n}\n\n.order-button-second::before {\n content: '';\n position: absolute;\n top: 0;\n left: -100%;\n width: 100%;\n height: 100%;\n background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));\n transition: left 0.5s ease;\n}\n\n.order-button-second:hover::before {\n left: 100%;\n}\n\n.order-button {\n background: linear-gradient(135deg, #6DB4C4, #D4A5B8);\n color: white;\n font-size: 18px;\n font-weight: 600;\n padding: 16px 32px;\n border: none;\n border-radius: 12px;\n cursor: pointer;\n text-transform: uppercase;\n letter-spacing: 1px;\n box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);\n transition: all 0.3s ease;\n position: relative;\n overflow: hidden;\n }\n\n.order-button:hover {\n transform: translateY(-2px);\n box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);\n}\n\n.order-button:active {\n transform: translateY(0);\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);\n}\n\n.order-button::before {\n content: '';\n position: absolute;\n top: 0;\n left: -100%;\n width: 100%;\n height: 100%;\n background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));\n transition: left 0.5s ease;\n}\n\n.order-button:hover::before {\n left: 100%;\n}\n.order-button-container-second {\n /* display: flex; */\n justify-content: center;\n margin: 0px 0;\n}\n\n.order-button-container {\n display: flex;\n justify-content: center;\n margin: 0px 0 40px 0;\n}\n\nd-article img {\n width: 100%!important;\n}\n\n\niframe, .js-plotly-plot {\n width: 100%!important;\n margin-bottom: 20px;\n}\n\n.modebar-container {\n display: none;\n}\n\n#graph-container {\n display: grid; grid-template-columns: 1fr 1fr; align-items: center;\n}\n\n@media (max-width: 768px) {\n #graph-container {\n grid-template-columns: 1fr;\n }\n}\n\n@media (max-width: 1024px) {\n #graph-container {\n grid-template-columns: 1fr;\n }\n #graph-all {\n margin-right: 0px;\n }\n #controls {\n margin-left: 0px;\n }\n}\n\n.main-plot-container svg {\n background: transparent !important;\n}\n\n.large-image-background-transparent {\n margin-left: 0px;\n margin-right: 0px;\n}\n\n/* Import transformers-specific styles */\n@import url('./transformers-custom.css');"],"sourceRoot":""}]); +// Exports +/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___); + + +/***/ }), + +/***/ 314: +/***/ ((module) => { + + + +/* + MIT License http://www.opensource.org/licenses/mit-license.php + Author Tobias Koppers @sokra +*/ +module.exports = function (cssWithMappingToString) { + var list = []; + + // return the list of modules as css string + list.toString = function toString() { + return this.map(function (item) { + var content = ""; + var needLayer = typeof item[5] !== "undefined"; + if (item[4]) { + content += "@supports (".concat(item[4], ") {"); + } + if (item[2]) { + content += "@media ".concat(item[2], " {"); + } + if (needLayer) { + content += "@layer".concat(item[5].length > 0 ? " ".concat(item[5]) : "", " {"); + } + content += cssWithMappingToString(item); + if (needLayer) { + content += "}"; + } + if (item[2]) { + content += "}"; + } + if (item[4]) { + content += "}"; + } + return content; + }).join(""); + }; + + // import a list of modules into the list + list.i = function i(modules, media, dedupe, supports, layer) { + if (typeof modules === "string") { + modules = [[null, modules, undefined]]; + } + var alreadyImportedModules = {}; + if (dedupe) { + for (var k = 0; k < this.length; k++) { + var id = this[k][0]; + if (id != null) { + alreadyImportedModules[id] = true; + } + } + } + for (var _k = 0; _k < modules.length; _k++) { + var item = [].concat(modules[_k]); + if (dedupe && alreadyImportedModules[item[0]]) { + continue; + } + if (typeof layer !== "undefined") { + if (typeof item[5] === "undefined") { + item[5] = layer; + } else { + item[1] = "@layer".concat(item[5].length > 0 ? " ".concat(item[5]) : "", " {").concat(item[1], "}"); + item[5] = layer; + } + } + if (media) { + if (!item[2]) { + item[2] = media; + } else { + item[1] = "@media ".concat(item[2], " {").concat(item[1], "}"); + item[2] = media; + } + } + if (supports) { + if (!item[4]) { + item[4] = "".concat(supports); + } else { + item[1] = "@supports (".concat(item[4], ") {").concat(item[1], "}"); + item[4] = supports; + } + } + list.push(item); + } + }; + return list; +}; + +/***/ }), + +/***/ 354: +/***/ ((module) => { + + + +module.exports = function (item) { + var content = item[1]; + var cssMapping = item[3]; + if (!cssMapping) { + return content; + } + if (typeof btoa === "function") { + var base64 = btoa(unescape(encodeURIComponent(JSON.stringify(cssMapping)))); + var data = "sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(base64); + var sourceMapping = "/*# ".concat(data, " */"); + return [content].concat([sourceMapping]).join("\n"); + } + return [content].join("\n"); +}; + +/***/ }), + +/***/ 540: +/***/ ((module) => { + + + +/* istanbul ignore next */ +function insertStyleElement(options) { + var element = document.createElement("style"); + options.setAttributes(element, options.attributes); + options.insert(element, options.options); + return element; +} +module.exports = insertStyleElement; + +/***/ }), + +/***/ 659: +/***/ ((module) => { + + + +var memo = {}; + +/* istanbul ignore next */ +function getTarget(target) { + if (typeof memo[target] === "undefined") { + var styleTarget = document.querySelector(target); + + // Special case to return head of iframe instead of iframe itself + if (window.HTMLIFrameElement && styleTarget instanceof window.HTMLIFrameElement) { + try { + // This will throw an exception if access to iframe is blocked + // due to cross-origin restrictions + styleTarget = styleTarget.contentDocument.head; + } catch (e) { + // istanbul ignore next + styleTarget = null; + } + } + memo[target] = styleTarget; + } + return memo[target]; +} + +/* istanbul ignore next */ +function insertBySelector(insert, style) { + var target = getTarget(insert); + if (!target) { + throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid."); + } + target.appendChild(style); +} +module.exports = insertBySelector; + +/***/ }), + +/***/ 825: +/***/ ((module) => { + + + +/* istanbul ignore next */ +function apply(styleElement, options, obj) { + var css = ""; + if (obj.supports) { + css += "@supports (".concat(obj.supports, ") {"); + } + if (obj.media) { + css += "@media ".concat(obj.media, " {"); + } + var needLayer = typeof obj.layer !== "undefined"; + if (needLayer) { + css += "@layer".concat(obj.layer.length > 0 ? " ".concat(obj.layer) : "", " {"); + } + css += obj.css; + if (needLayer) { + css += "}"; + } + if (obj.media) { + css += "}"; + } + if (obj.supports) { + css += "}"; + } + var sourceMap = obj.sourceMap; + if (sourceMap && typeof btoa !== "undefined") { + css += "\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))), " */"); + } + + // For old IE + /* istanbul ignore if */ + options.styleTagTransform(css, styleElement, options.options); +} +function removeStyleElement(styleElement) { + // istanbul ignore if + if (styleElement.parentNode === null) { + return false; + } + styleElement.parentNode.removeChild(styleElement); +} + +/* istanbul ignore next */ +function domAPI(options) { + if (typeof document === "undefined") { + return { + update: function update() {}, + remove: function remove() {} + }; + } + var styleElement = options.insertStyleElement(options); + return { + update: function update(obj) { + apply(styleElement, options, obj); + }, + remove: function remove() { + removeStyleElement(styleElement); + } + }; +} +module.exports = domAPI; + +/***/ }), + +/***/ 995: +/***/ ((module, __webpack_exports__, __webpack_require__) => { + +/* harmony export */ __webpack_require__.d(__webpack_exports__, { +/* harmony export */ A: () => (__WEBPACK_DEFAULT_EXPORT__) +/* harmony export */ }); +/* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(354); +/* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__); +/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(314); +/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__); +// Imports + + +var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default())); +// Module +___CSS_LOADER_EXPORT___.push([module.id, `/* Transformers-specific styling additions */ + +/* Code comparison layout */ +.code-compare { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 1.5rem; + margin: 2rem 0; + align-items: start; +} + +.code-compare .code-column { + background: #ffffff; + border: 1px solid #e2e8f0; + border-radius: 8px; + overflow: hidden; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); +} + +.code-compare .code-header { + background: #f8f9fa; + padding: 0.75rem 1rem; + font-weight: 600; + color: #495057; + border-bottom: 1px solid #e2e8f0; + font-size: 0.9em; +} + +.code-compare pre { + margin: 0; + padding: 1rem; + background: #ffffff; + overflow-x: auto; + font-size: 0.85em; + line-height: 1.4; +} + +.code-compare pre code { + color: #374151; +} + +/* Mobile responsiveness for code comparison */ +@media (max-width: 768px) { + .code-compare { + grid-template-columns: 1fr; + gap: 1rem; + } +} + +/* Tenet styling - special highlighting for design principles */ +.tenet-list { + margin: 3rem 0; +} + +.tenet-list ol { + counter-reset: tenet-counter -1; /* Start from 0 */ + list-style: none; + padding-left: 0; + display: flex; + flex-direction: column; + gap: 2rem; +} + +.tenet-list li.tenet { + counter-increment: tenet-counter; + background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%); + border: 2px solid transparent; + border-radius: 16px; + padding: 2rem 2rem 2rem 4rem; + margin: 0; + position: relative; + box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08); + transition: all 0.3s ease; + cursor: pointer; +} + +.tenet-list li.tenet:hover { + transform: translateY(-8px) scale(1.02); + box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25); + border-color: rgba(0, 123, 255, 0.5); + background: linear-gradient(135deg, #ffffff 0%, #f0f8ff 100%); +} + +/* Colorful numbering system */ +.tenet-list li.tenet:nth-child(1):before { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } +.tenet-list li.tenet:nth-child(2):before { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); } +.tenet-list li.tenet:nth-child(3):before { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); } +.tenet-list li.tenet:nth-child(4):before { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); } +.tenet-list li.tenet:nth-child(5):before { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); } +.tenet-list li.tenet:nth-child(6):before { background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%); } +.tenet-list li.tenet:nth-child(7):before { background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%); } +.tenet-list li.tenet:nth-child(8):before { background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%); } +.tenet-list li.tenet:nth-child(9):before { background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%); } + +.tenet-list li.tenet:before { + content: counter(tenet-counter); + position: absolute; + top: -12px; + left: -12px; + color: white; + width: 48px; + height: 48px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.2em; + font-weight: bold; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); + border: 3px solid white; +} + +.tenet-list li.tenet strong { + color: #1a202c; + font-size: 1.1em; + display: block; + margin-bottom: 0.5rem; +} + +.tenet-list li.tenet em { + color: #4a5568; + font-size: 0.95em; + font-style: italic; + display: block; + margin-top: 0.75rem; + padding: 1rem; + background: rgba(0, 0, 0, 0.03); + border-radius: 8px; + border-left: 3px solid #e2e8f0; +} + +.tenet-list li.tenet p { + color: #2d3748; + line-height: 1.6; + margin: 0.5rem 0; +} + +/* Add a subtle pulse animation for the numbers */ +@keyframes pulse-glow { + 0% { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } + 50% { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25); } + 100% { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } +} + +.tenet-list li.tenet:hover:before { + animation: pulse-glow 2s ease-in-out infinite; +} + +/* Interactive component styling */ +.interactive-demo { + border: 1px solid #e2e8f0; + border-radius: 12px; + background: #ffffff; + margin: 2rem 0; + overflow: hidden; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07); +} + +.interactive-demo .demo-header { + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + color: white; + padding: 1rem 1.5rem; + font-weight: 600; +} + +.interactive-demo .demo-content { + padding: 1.5rem; +} + +.interactive-demo .demo-footer { + background: #f8f9fa; + padding: 1rem 1.5rem; + border-top: 1px solid #e2e8f0; + color: #6c757d; + font-size: 0.9em; +} + +/* Button styling for interactive elements */ +.btn-primary { + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + border: none; + color: white; + padding: 0.75rem 1.5rem; + border-radius: 6px; + font-weight: 500; + cursor: pointer; + transition: transform 0.2s, box-shadow 0.2s; +} + +.btn-primary:hover { + transform: translateY(-1px); + box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3); +} + +.btn-primary:disabled { + opacity: 0.6; + cursor: not-allowed; + transform: none; + box-shadow: none; +} + +/* Terminal styling */ +.terminal-container { + background: #1a202c; + border-radius: 8px; + padding: 1rem; + color: #e2e8f0; + font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; + font-size: 0.9em; +} + +.terminal-input { + background: #2d3748; + border: 1px solid #4a5568; + color: #e2e8f0; + padding: 0.5rem; + border-radius: 4px; + width: 100%; + font-family: inherit; +} + +.terminal-output { + background: #0a0e1a; + padding: 1rem; + border-radius: 4px; + white-space: pre-wrap; + word-break: break-all; + min-height: 100px; + max-height: 300px; + overflow-y: auto; +} + +/* Attention visualization styling */ +.attention-matrix { + font-family: monospace; + font-size: 0.8em; + border-collapse: collapse; + margin: 1rem 0; +} + +.attention-matrix td { + border: 1px solid #ddd; + padding: 4px 8px; + text-align: center; + min-width: 50px; +} + +/* Memory chart styling */ +.memory-chart-container { + background: #f8f9fa; + border: 2px solid #e9ecef; + border-radius: 8px; + padding: 1rem; + margin: 1rem 0; +} + +/* Image styling improvements */ +img { + max-width: 100%; + height: auto; + border-radius: 8px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); + margin: 1.5rem 0; +} + +/* Table of contents styling - Fixed positioning like ultrascale */ +@media (min-width: 1200px) { + d-article { + overflow: visible !important; + } + + d-contents { + align-self: start !important; + background: white !important; + grid-column-start: 1 !important; + grid-column-end: 4 !important; + grid-row: auto / span 6 !important; + justify-self: end !important; + margin-top: 0em !important; + padding-right: 3em !important; + padding-left: 2em !important; + position: -webkit-sticky !important; /* For Safari */ + position: sticky !important; + top: 10px !important; + overflow-y: auto !important; + height: calc(100vh - 40px) !important; + scrollbar-width: none !important; + transition: max-height 0.3s ease-out !important; + z-index: -100 !important; + display: block !important; + visibility: visible !important; + } +} + +@media (max-width: 1199px) { + d-contents { + display: none !important; + background: white !important; + justify-self: start !important; + align-self: start !important; + padding-bottom: 0.5em !important; + margin-bottom: 1em !important; + padding-left: 0.25em !important; + border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important; + overflow-y: scroll !important; + height: calc(100vh - 40px) !important; + scrollbar-width: none !important; + z-index: -100 !important; + } +} + +/* Force TOC to be visible and override distill defaults */ +d-contents { + display: block !important; + visibility: visible !important; + opacity: 1 !important; +} + +/* TOC Navigation styling */ +d-contents .toc-header { + margin-bottom: 1.5rem; + border-bottom: 2px solid #007bff; + padding-bottom: 0.5rem; +} + +d-contents .toc-title { + font-weight: bold; + font-size: 1.2em; + color: #333; +} + +d-contents nav a { + color: rgba(0, 0, 0, 0.7); + text-decoration: none; + border-bottom: none; + display: block; + padding: 0.3rem 0; + font-size: 0.9em; + line-height: 1.4; + transition: color 0.2s ease; +} + +d-contents nav a:hover { + color: #007bff; + text-decoration: none; +} + +d-contents nav a.active { + color: #007bff; + font-weight: 600; +} + +d-contents nav div { + margin-bottom: 0.2rem; +} + +/* Smooth scrollbar */ +d-contents { + scrollbar-width: thin; + scrollbar-color: rgba(0, 123, 255, 0.3) transparent; +} + +d-contents::-webkit-scrollbar { + width: 6px; +} + +d-contents::-webkit-scrollbar-track { + background: transparent; +} + +d-contents::-webkit-scrollbar-thumb { + background: rgba(0, 123, 255, 0.3); + border-radius: 3px; +} + +d-contents::-webkit-scrollbar-thumb:hover { + background: rgba(0, 123, 255, 0.5); +} + +/* Custom tooltip styling for tenet links */ +d-contents nav a[title] { + position: relative; + cursor: help; +} + +d-contents nav a[title]:hover { + color: #667eea; +} + +/* Enhanced tooltip using CSS (fallback for title attribute) */ +d-contents nav a[title]:after { + content: attr(title); + position: absolute; + left: 100%; + top: 50%; + transform: translateY(-50%); + background: #1a202c; + color: white; + padding: 0.75rem 1rem; + border-radius: 8px; + font-size: 0.85em; + white-space: normal; + width: 300px; + line-height: 1.4; + z-index: 1001; + opacity: 0; + visibility: hidden; + transition: opacity 0.3s ease, visibility 0.3s ease; + pointer-events: none; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); +} + +d-contents nav a[title]:before { + content: ''; + position: absolute; + left: 100%; + top: 50%; + transform: translate(-8px, -50%); + border: 8px solid transparent; + border-right-color: #1a202c; + z-index: 1002; + opacity: 0; + visibility: hidden; + transition: opacity 0.3s ease, visibility 0.3s ease; +} + +d-contents nav a[title]:hover:after, +d-contents nav a[title]:hover:before { + opacity: 1; + visibility: visible; +} + +/* Adjust for smaller screens */ +@media (max-width: 1400px) { + d-contents nav a[title]:after { + left: auto; + right: 100%; + margin-right: 1rem; + width: 250px; + } + + d-contents nav a[title]:before { + left: auto; + right: 100%; + transform: translate(8px, -50%); + border-right-color: transparent; + border-left-color: #1a202c; + } +} + +/* Improve code syntax highlighting with Prism */ +pre[class*="language-"] { + background: #f8f9fa !important; + border: 1px solid #e9ecef !important; + border-radius: 8px !important; + padding: 1.5rem !important; + margin: 1.5rem 0 !important; + overflow-x: auto !important; + font-size: 0.9em !important; + line-height: 1.5 !important; +} + +code[class*="language-"] { + background: none !important; + font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Courier New', monospace !important; + color: #383a42 !important; +} + +/* Inline code */ +p code, li code { + background: #f1f3f4 !important; + padding: 0.2em 0.4em !important; + border-radius: 3px !important; + font-size: 0.9em !important; + color: #d73a49 !important; +} + +/* Distill article improvements */ +d-article { + max-width: none; + font-size: 18px; /* Increased from default ~16px */ + line-height: 1.7; +} + +d-article > * { + max-width: 1100px; /* Increased from 900px for more space */ + margin-left: auto; + margin-right: auto; +} + +/* Make content even wider on large screens when TOC is present */ +@media (min-width: 1400px) { + d-article > * { + max-width: 1300px; + } +} + +/* Improve paragraph readability */ +d-article p { + font-size: 18px; + line-height: 1.8; + margin-bottom: 1.5rem; + color: #2d3748; +} + +/* Improve heading sizes */ +d-article h1 { + font-size: 3rem; + line-height: 1.2; + margin: 3rem 0 2rem 0; + color: #1a202c; + font-weight: 700; +} + +d-article h2 { + font-size: 2.5rem; + line-height: 1.3; + margin: 2.5rem 0 1.5rem 0; + color: #1a202c; + font-weight: 650; +} + +d-article h3 { + font-size: 2rem; + line-height: 1.4; + margin: 2rem 0 1rem 0; + color: #1a202c; + font-weight: 600; +} + +d-article h4 { + font-size: 1.5rem; + line-height: 1.4; + margin: 1.5rem 0 1rem 0; + color: #2d3748; + font-weight: 600; +} + +/* Improve list readability */ +d-article ul li, +d-article ol li { + font-size: 18px; + line-height: 1.7; + margin-bottom: 0.5rem; +} + +/* Enhanced tenet reference styling with tooltips */ +a[href^="#source-of-truth"], +a[href^="#one-model-one-file"], +a[href^="#code-is-product"], +a[href^="#standardize-dont-abstract"], +a[href^="#do-repeat-yourself"], +a[href^="#minimal-user-api"], +a[href^="#backwards-compatibility"], +a[href^="#consistent-public-surface"], +a[href^="#modular-toolbox"] { + position: relative; + color: #667eea; + font-weight: 600; + text-decoration: underline; + text-decoration-color: rgba(102, 126, 234, 0.3); + transition: all 0.3s ease; + cursor: help; +} + +a[href^="#source-of-truth"]:hover, +a[href^="#one-model-one-file"]:hover, +a[href^="#code-is-product"]:hover, +a[href^="#standardize-dont-abstract"]:hover, +a[href^="#do-repeat-yourself"]:hover, +a[href^="#minimal-user-api"]:hover, +a[href^="#backwards-compatibility"]:hover, +a[href^="#consistent-public-surface"]:hover, +a[href^="#modular-toolbox"]:hover { + color: #4c51bf; + text-decoration-color: #4c51bf; + background: rgba(102, 126, 234, 0.1); + padding: 2px 4px; + border-radius: 4px; +} + +/* Tooltip content for each tenet */ +a[href^="#source-of-truth"]:after { content: "We should be a source of truth for all model definitions. Model implementations should be reliable, reproducible, and faithful to the original performances."; } +a[href^="#one-model-one-file"]:after { content: "All inference (and most of training, loss is separate, not a part of model) logic visible, top‑to‑bottom."; } +a[href^="#code-is-product"]:after { content: "Optimize for reading, diffing, and tweaking, our users are power users. Variables can be explicit, full words, even several words, readability is primordial."; } +a[href^="#standardize-dont-abstract"]:after { content: "If it's model behavior, keep it in the file; abstractions only for generic infra."; } +a[href^="#do-repeat-yourself"]:after { content: "Copy when it helps users; keep successors in sync without centralizing behavior."; } +a[href^="#minimal-user-api"]:after { content: "Config, model, preprocessing; from_pretrained, save_pretrained, push_to_hub. We want the least amount of codepaths."; } +a[href^="#backwards-compatibility"]:after { content: "Evolve by additive standardization, never break public APIs."; } +a[href^="#consistent-public-surface"]:after { content: "Same argument names, same outputs, hidden states and attentions exposed."; } +a[href^="#modular-toolbox"]:after { content: "Provide tools and utilities, but don't force users into a rigid framework."; } + +/* Universal tooltip styling for tenet references */ +a[href^="#source-of-truth"]:after, +a[href^="#one-model-one-file"]:after, +a[href^="#code-is-product"]:after, +a[href^="#standardize-dont-abstract"]:after, +a[href^="#do-repeat-yourself"]:after, +a[href^="#minimal-user-api"]:after, +a[href^="#backwards-compatibility"]:after, +a[href^="#consistent-public-surface"]:after, +a[href^="#modular-toolbox"]:after { + position: absolute; + bottom: 100%; + left: 50%; + transform: translateX(-50%); + background: #1a202c; + color: white; + padding: 0.75rem 1rem; + border-radius: 8px; + font-size: 0.85em; + font-weight: 400; + white-space: normal; + width: 320px; + line-height: 1.4; + z-index: 1001; + opacity: 0; + visibility: hidden; + transition: opacity 0.3s ease, visibility 0.3s ease; + pointer-events: none; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); + margin-bottom: 8px; +} + +/* Tooltip arrows */ +a[href^="#source-of-truth"]:before, +a[href^="#one-model-one-file"]:before, +a[href^="#code-is-product"]:before, +a[href^="#standardize-dont-abstract"]:before, +a[href^="#do-repeat-yourself"]:before, +a[href^="#minimal-user-api"]:before, +a[href^="#backwards-compatibility"]:before, +a[href^="#consistent-public-surface"]:before, +a[href^="#modular-toolbox"]:before { + content: ''; + position: absolute; + bottom: 100%; + left: 50%; + transform: translateX(-50%); + border: 8px solid transparent; + border-top-color: #1a202c; + z-index: 1002; + opacity: 0; + visibility: hidden; + transition: opacity 0.3s ease, visibility 0.3s ease; +} + +/* Show tooltips on hover */ +a[href^="#source-of-truth"]:hover:after, +a[href^="#one-model-one-file"]:hover:after, +a[href^="#code-is-product"]:hover:after, +a[href^="#standardize-dont-abstract"]:hover:after, +a[href^="#do-repeat-yourself"]:hover:after, +a[href^="#minimal-user-api"]:hover:after, +a[href^="#backwards-compatibility"]:hover:after, +a[href^="#consistent-public-surface"]:hover:after, +a[href^="#modular-toolbox"]:hover:after, +a[href^="#source-of-truth"]:hover:before, +a[href^="#one-model-one-file"]:hover:before, +a[href^="#code-is-product"]:hover:before, +a[href^="#standardize-dont-abstract"]:hover:before, +a[href^="#do-repeat-yourself"]:hover:before, +a[href^="#minimal-user-api"]:hover:before, +a[href^="#backwards-compatibility"]:hover:before, +a[href^="#consistent-public-surface"]:hover:before, +a[href^="#modular-toolbox"]:hover:before { + opacity: 1; + visibility: visible; +} + +/* Improve blockquote styling */ +d-article blockquote { + font-size: 19px; + line-height: 1.8; + padding: 1.5rem 2rem; + margin: 2rem 0; + border-left: 4px solid #667eea; + background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 50%); + border-radius: 0 8px 8px 0; + font-style: italic; + color: #4a5568; +} + +/* Full width elements */ +d-article .code-compare, +d-article .interactive-demo, +d-article .memory-chart-container { + max-width: none; + width: 100%; + margin-left: 0; + margin-right: 0; +} + +/* Responsive design improvements */ +@media (max-width: 1200px) { + d-article .code-compare, + d-article .interactive-demo { + max-width: 95%; + margin-left: auto; + margin-right: auto; + } +} + +@media (max-width: 768px) { + .tenet-list li.tenet { + padding: 1rem; + } + + .interactive-demo .demo-content { + padding: 1rem; + } +}`, "",{"version":3,"sources":["webpack://./src/transformers-custom.css"],"names":[],"mappings":"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","sourcesContent":["/* Transformers-specific styling additions */\n\n/* Code comparison layout */\n.code-compare {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 1.5rem;\n margin: 2rem 0;\n align-items: start;\n}\n\n.code-compare .code-column {\n background: #ffffff;\n border: 1px solid #e2e8f0;\n border-radius: 8px;\n overflow: hidden;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n.code-compare .code-header {\n background: #f8f9fa;\n padding: 0.75rem 1rem;\n font-weight: 600;\n color: #495057;\n border-bottom: 1px solid #e2e8f0;\n font-size: 0.9em;\n}\n\n.code-compare pre {\n margin: 0;\n padding: 1rem;\n background: #ffffff;\n overflow-x: auto;\n font-size: 0.85em;\n line-height: 1.4;\n}\n\n.code-compare pre code {\n color: #374151;\n}\n\n/* Mobile responsiveness for code comparison */\n@media (max-width: 768px) {\n .code-compare {\n grid-template-columns: 1fr;\n gap: 1rem;\n }\n}\n\n/* Tenet styling - special highlighting for design principles */\n.tenet-list {\n margin: 3rem 0;\n}\n\n.tenet-list ol {\n counter-reset: tenet-counter -1; /* Start from 0 */\n list-style: none;\n padding-left: 0;\n display: flex;\n flex-direction: column;\n gap: 2rem;\n}\n\n.tenet-list li.tenet {\n counter-increment: tenet-counter;\n background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);\n border: 2px solid transparent;\n border-radius: 16px;\n padding: 2rem 2rem 2rem 4rem;\n margin: 0;\n position: relative;\n box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);\n transition: all 0.3s ease;\n cursor: pointer;\n}\n\n.tenet-list li.tenet:hover {\n transform: translateY(-8px) scale(1.02);\n box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);\n border-color: rgba(0, 123, 255, 0.5);\n background: linear-gradient(135deg, #ffffff 0%, #f0f8ff 100%);\n}\n\n/* Colorful numbering system */\n.tenet-list li.tenet:nth-child(1):before { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }\n.tenet-list li.tenet:nth-child(2):before { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }\n.tenet-list li.tenet:nth-child(3):before { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }\n.tenet-list li.tenet:nth-child(4):before { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); }\n.tenet-list li.tenet:nth-child(5):before { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); }\n.tenet-list li.tenet:nth-child(6):before { background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%); }\n.tenet-list li.tenet:nth-child(7):before { background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%); }\n.tenet-list li.tenet:nth-child(8):before { background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%); }\n.tenet-list li.tenet:nth-child(9):before { background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%); }\n\n.tenet-list li.tenet:before {\n content: counter(tenet-counter);\n position: absolute;\n top: -12px;\n left: -12px;\n color: white;\n width: 48px;\n height: 48px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 1.2em;\n font-weight: bold;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);\n border: 3px solid white;\n}\n\n.tenet-list li.tenet strong {\n color: #1a202c;\n font-size: 1.1em;\n display: block;\n margin-bottom: 0.5rem;\n}\n\n.tenet-list li.tenet em {\n color: #4a5568;\n font-size: 0.95em;\n font-style: italic;\n display: block;\n margin-top: 0.75rem;\n padding: 1rem;\n background: rgba(0, 0, 0, 0.03);\n border-radius: 8px;\n border-left: 3px solid #e2e8f0;\n}\n\n.tenet-list li.tenet p {\n color: #2d3748;\n line-height: 1.6;\n margin: 0.5rem 0;\n}\n\n/* Add a subtle pulse animation for the numbers */\n@keyframes pulse-glow {\n 0% { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); }\n 50% { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25); }\n 100% { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); }\n}\n\n.tenet-list li.tenet:hover:before {\n animation: pulse-glow 2s ease-in-out infinite;\n}\n\n/* Interactive component styling */\n.interactive-demo {\n border: 1px solid #e2e8f0;\n border-radius: 12px;\n background: #ffffff;\n margin: 2rem 0;\n overflow: hidden;\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);\n}\n\n.interactive-demo .demo-header {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n color: white;\n padding: 1rem 1.5rem;\n font-weight: 600;\n}\n\n.interactive-demo .demo-content {\n padding: 1.5rem;\n}\n\n.interactive-demo .demo-footer {\n background: #f8f9fa;\n padding: 1rem 1.5rem;\n border-top: 1px solid #e2e8f0;\n color: #6c757d;\n font-size: 0.9em;\n}\n\n/* Button styling for interactive elements */\n.btn-primary {\n background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n border: none;\n color: white;\n padding: 0.75rem 1.5rem;\n border-radius: 6px;\n font-weight: 500;\n cursor: pointer;\n transition: transform 0.2s, box-shadow 0.2s;\n}\n\n.btn-primary:hover {\n transform: translateY(-1px);\n box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);\n}\n\n.btn-primary:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n transform: none;\n box-shadow: none;\n}\n\n/* Terminal styling */\n.terminal-container {\n background: #1a202c;\n border-radius: 8px;\n padding: 1rem;\n color: #e2e8f0;\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n font-size: 0.9em;\n}\n\n.terminal-input {\n background: #2d3748;\n border: 1px solid #4a5568;\n color: #e2e8f0;\n padding: 0.5rem;\n border-radius: 4px;\n width: 100%;\n font-family: inherit;\n}\n\n.terminal-output {\n background: #0a0e1a;\n padding: 1rem;\n border-radius: 4px;\n white-space: pre-wrap;\n word-break: break-all;\n min-height: 100px;\n max-height: 300px;\n overflow-y: auto;\n}\n\n/* Attention visualization styling */\n.attention-matrix {\n font-family: monospace;\n font-size: 0.8em;\n border-collapse: collapse;\n margin: 1rem 0;\n}\n\n.attention-matrix td {\n border: 1px solid #ddd;\n padding: 4px 8px;\n text-align: center;\n min-width: 50px;\n}\n\n/* Memory chart styling */\n.memory-chart-container {\n background: #f8f9fa;\n border: 2px solid #e9ecef;\n border-radius: 8px;\n padding: 1rem;\n margin: 1rem 0;\n}\n\n/* Image styling improvements */\nimg {\n max-width: 100%;\n height: auto;\n border-radius: 8px;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n margin: 1.5rem 0;\n}\n\n/* Table of contents styling - Fixed positioning like ultrascale */\n@media (min-width: 1200px) {\n d-article {\n overflow: visible !important;\n }\n \n d-contents {\n align-self: start !important;\n background: white !important;\n grid-column-start: 1 !important;\n grid-column-end: 4 !important;\n grid-row: auto / span 6 !important;\n justify-self: end !important;\n margin-top: 0em !important;\n padding-right: 3em !important;\n padding-left: 2em !important;\n position: -webkit-sticky !important; /* For Safari */\n position: sticky !important;\n top: 10px !important;\n overflow-y: auto !important;\n height: calc(100vh - 40px) !important;\n scrollbar-width: none !important;\n transition: max-height 0.3s ease-out !important;\n z-index: -100 !important;\n display: block !important;\n visibility: visible !important;\n }\n}\n\n@media (max-width: 1199px) {\n d-contents {\n display: none !important;\n background: white !important;\n justify-self: start !important;\n align-self: start !important;\n padding-bottom: 0.5em !important;\n margin-bottom: 1em !important;\n padding-left: 0.25em !important;\n border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;\n overflow-y: scroll !important;\n height: calc(100vh - 40px) !important;\n scrollbar-width: none !important;\n z-index: -100 !important;\n }\n}\n\n/* Force TOC to be visible and override distill defaults */\nd-contents {\n display: block !important;\n visibility: visible !important;\n opacity: 1 !important;\n}\n\n/* TOC Navigation styling */\nd-contents .toc-header {\n margin-bottom: 1.5rem;\n border-bottom: 2px solid #007bff;\n padding-bottom: 0.5rem;\n}\n\nd-contents .toc-title {\n font-weight: bold;\n font-size: 1.2em;\n color: #333;\n}\n\nd-contents nav a {\n color: rgba(0, 0, 0, 0.7);\n text-decoration: none;\n border-bottom: none;\n display: block;\n padding: 0.3rem 0;\n font-size: 0.9em;\n line-height: 1.4;\n transition: color 0.2s ease;\n}\n\nd-contents nav a:hover {\n color: #007bff;\n text-decoration: none;\n}\n\nd-contents nav a.active {\n color: #007bff;\n font-weight: 600;\n}\n\nd-contents nav div {\n margin-bottom: 0.2rem;\n}\n\n/* Smooth scrollbar */\nd-contents {\n scrollbar-width: thin;\n scrollbar-color: rgba(0, 123, 255, 0.3) transparent;\n}\n\nd-contents::-webkit-scrollbar {\n width: 6px;\n}\n\nd-contents::-webkit-scrollbar-track {\n background: transparent;\n}\n\nd-contents::-webkit-scrollbar-thumb {\n background: rgba(0, 123, 255, 0.3);\n border-radius: 3px;\n}\n\nd-contents::-webkit-scrollbar-thumb:hover {\n background: rgba(0, 123, 255, 0.5);\n}\n\n/* Custom tooltip styling for tenet links */\nd-contents nav a[title] {\n position: relative;\n cursor: help;\n}\n\nd-contents nav a[title]:hover {\n color: #667eea;\n}\n\n/* Enhanced tooltip using CSS (fallback for title attribute) */\nd-contents nav a[title]:after {\n content: attr(title);\n position: absolute;\n left: 100%;\n top: 50%;\n transform: translateY(-50%);\n background: #1a202c;\n color: white;\n padding: 0.75rem 1rem;\n border-radius: 8px;\n font-size: 0.85em;\n white-space: normal;\n width: 300px;\n line-height: 1.4;\n z-index: 1001;\n opacity: 0;\n visibility: hidden;\n transition: opacity 0.3s ease, visibility 0.3s ease;\n pointer-events: none;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);\n}\n\nd-contents nav a[title]:before {\n content: '';\n position: absolute;\n left: 100%;\n top: 50%;\n transform: translate(-8px, -50%);\n border: 8px solid transparent;\n border-right-color: #1a202c;\n z-index: 1002;\n opacity: 0;\n visibility: hidden;\n transition: opacity 0.3s ease, visibility 0.3s ease;\n}\n\nd-contents nav a[title]:hover:after,\nd-contents nav a[title]:hover:before {\n opacity: 1;\n visibility: visible;\n}\n\n/* Adjust for smaller screens */\n@media (max-width: 1400px) {\n d-contents nav a[title]:after {\n left: auto;\n right: 100%;\n margin-right: 1rem;\n width: 250px;\n }\n \n d-contents nav a[title]:before {\n left: auto;\n right: 100%;\n transform: translate(8px, -50%);\n border-right-color: transparent;\n border-left-color: #1a202c;\n }\n}\n\n/* Improve code syntax highlighting with Prism */\npre[class*=\"language-\"] {\n background: #f8f9fa !important;\n border: 1px solid #e9ecef !important;\n border-radius: 8px !important;\n padding: 1.5rem !important;\n margin: 1.5rem 0 !important;\n overflow-x: auto !important;\n font-size: 0.9em !important;\n line-height: 1.5 !important;\n}\n\ncode[class*=\"language-\"] {\n background: none !important;\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Courier New', monospace !important;\n color: #383a42 !important;\n}\n\n/* Inline code */\np code, li code {\n background: #f1f3f4 !important;\n padding: 0.2em 0.4em !important;\n border-radius: 3px !important;\n font-size: 0.9em !important;\n color: #d73a49 !important;\n}\n\n/* Distill article improvements */\nd-article {\n max-width: none;\n font-size: 18px; /* Increased from default ~16px */\n line-height: 1.7;\n}\n\nd-article > * {\n max-width: 1100px; /* Increased from 900px for more space */\n margin-left: auto;\n margin-right: auto;\n}\n\n/* Make content even wider on large screens when TOC is present */\n@media (min-width: 1400px) {\n d-article > * {\n max-width: 1300px;\n }\n}\n\n/* Improve paragraph readability */\nd-article p {\n font-size: 18px;\n line-height: 1.8;\n margin-bottom: 1.5rem;\n color: #2d3748;\n}\n\n/* Improve heading sizes */\nd-article h1 {\n font-size: 3rem;\n line-height: 1.2;\n margin: 3rem 0 2rem 0;\n color: #1a202c;\n font-weight: 700;\n}\n\nd-article h2 {\n font-size: 2.5rem;\n line-height: 1.3;\n margin: 2.5rem 0 1.5rem 0;\n color: #1a202c;\n font-weight: 650;\n}\n\nd-article h3 {\n font-size: 2rem;\n line-height: 1.4;\n margin: 2rem 0 1rem 0;\n color: #1a202c;\n font-weight: 600;\n}\n\nd-article h4 {\n font-size: 1.5rem;\n line-height: 1.4;\n margin: 1.5rem 0 1rem 0;\n color: #2d3748;\n font-weight: 600;\n}\n\n/* Improve list readability */\nd-article ul li,\nd-article ol li {\n font-size: 18px;\n line-height: 1.7;\n margin-bottom: 0.5rem;\n}\n\n/* Enhanced tenet reference styling with tooltips */\na[href^=\"#source-of-truth\"],\na[href^=\"#one-model-one-file\"],\na[href^=\"#code-is-product\"],\na[href^=\"#standardize-dont-abstract\"],\na[href^=\"#do-repeat-yourself\"],\na[href^=\"#minimal-user-api\"],\na[href^=\"#backwards-compatibility\"],\na[href^=\"#consistent-public-surface\"],\na[href^=\"#modular-toolbox\"] {\n position: relative;\n color: #667eea;\n font-weight: 600;\n text-decoration: underline;\n text-decoration-color: rgba(102, 126, 234, 0.3);\n transition: all 0.3s ease;\n cursor: help;\n}\n\na[href^=\"#source-of-truth\"]:hover,\na[href^=\"#one-model-one-file\"]:hover,\na[href^=\"#code-is-product\"]:hover,\na[href^=\"#standardize-dont-abstract\"]:hover,\na[href^=\"#do-repeat-yourself\"]:hover,\na[href^=\"#minimal-user-api\"]:hover,\na[href^=\"#backwards-compatibility\"]:hover,\na[href^=\"#consistent-public-surface\"]:hover,\na[href^=\"#modular-toolbox\"]:hover {\n color: #4c51bf;\n text-decoration-color: #4c51bf;\n background: rgba(102, 126, 234, 0.1);\n padding: 2px 4px;\n border-radius: 4px;\n}\n\n/* Tooltip content for each tenet */\na[href^=\"#source-of-truth\"]:after { content: \"We should be a source of truth for all model definitions. Model implementations should be reliable, reproducible, and faithful to the original performances.\"; }\na[href^=\"#one-model-one-file\"]:after { content: \"All inference (and most of training, loss is separate, not a part of model) logic visible, top‑to‑bottom.\"; }\na[href^=\"#code-is-product\"]:after { content: \"Optimize for reading, diffing, and tweaking, our users are power users. Variables can be explicit, full words, even several words, readability is primordial.\"; }\na[href^=\"#standardize-dont-abstract\"]:after { content: \"If it's model behavior, keep it in the file; abstractions only for generic infra.\"; }\na[href^=\"#do-repeat-yourself\"]:after { content: \"Copy when it helps users; keep successors in sync without centralizing behavior.\"; }\na[href^=\"#minimal-user-api\"]:after { content: \"Config, model, preprocessing; from_pretrained, save_pretrained, push_to_hub. We want the least amount of codepaths.\"; }\na[href^=\"#backwards-compatibility\"]:after { content: \"Evolve by additive standardization, never break public APIs.\"; }\na[href^=\"#consistent-public-surface\"]:after { content: \"Same argument names, same outputs, hidden states and attentions exposed.\"; }\na[href^=\"#modular-toolbox\"]:after { content: \"Provide tools and utilities, but don't force users into a rigid framework.\"; }\n\n/* Universal tooltip styling for tenet references */\na[href^=\"#source-of-truth\"]:after,\na[href^=\"#one-model-one-file\"]:after,\na[href^=\"#code-is-product\"]:after,\na[href^=\"#standardize-dont-abstract\"]:after,\na[href^=\"#do-repeat-yourself\"]:after,\na[href^=\"#minimal-user-api\"]:after,\na[href^=\"#backwards-compatibility\"]:after,\na[href^=\"#consistent-public-surface\"]:after,\na[href^=\"#modular-toolbox\"]:after {\n position: absolute;\n bottom: 100%;\n left: 50%;\n transform: translateX(-50%);\n background: #1a202c;\n color: white;\n padding: 0.75rem 1rem;\n border-radius: 8px;\n font-size: 0.85em;\n font-weight: 400;\n white-space: normal;\n width: 320px;\n line-height: 1.4;\n z-index: 1001;\n opacity: 0;\n visibility: hidden;\n transition: opacity 0.3s ease, visibility 0.3s ease;\n pointer-events: none;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);\n margin-bottom: 8px;\n}\n\n/* Tooltip arrows */\na[href^=\"#source-of-truth\"]:before,\na[href^=\"#one-model-one-file\"]:before,\na[href^=\"#code-is-product\"]:before,\na[href^=\"#standardize-dont-abstract\"]:before,\na[href^=\"#do-repeat-yourself\"]:before,\na[href^=\"#minimal-user-api\"]:before,\na[href^=\"#backwards-compatibility\"]:before,\na[href^=\"#consistent-public-surface\"]:before,\na[href^=\"#modular-toolbox\"]:before {\n content: '';\n position: absolute;\n bottom: 100%;\n left: 50%;\n transform: translateX(-50%);\n border: 8px solid transparent;\n border-top-color: #1a202c;\n z-index: 1002;\n opacity: 0;\n visibility: hidden;\n transition: opacity 0.3s ease, visibility 0.3s ease;\n}\n\n/* Show tooltips on hover */\na[href^=\"#source-of-truth\"]:hover:after,\na[href^=\"#one-model-one-file\"]:hover:after,\na[href^=\"#code-is-product\"]:hover:after,\na[href^=\"#standardize-dont-abstract\"]:hover:after,\na[href^=\"#do-repeat-yourself\"]:hover:after,\na[href^=\"#minimal-user-api\"]:hover:after,\na[href^=\"#backwards-compatibility\"]:hover:after,\na[href^=\"#consistent-public-surface\"]:hover:after,\na[href^=\"#modular-toolbox\"]:hover:after,\na[href^=\"#source-of-truth\"]:hover:before,\na[href^=\"#one-model-one-file\"]:hover:before,\na[href^=\"#code-is-product\"]:hover:before,\na[href^=\"#standardize-dont-abstract\"]:hover:before,\na[href^=\"#do-repeat-yourself\"]:hover:before,\na[href^=\"#minimal-user-api\"]:hover:before,\na[href^=\"#backwards-compatibility\"]:hover:before,\na[href^=\"#consistent-public-surface\"]:hover:before,\na[href^=\"#modular-toolbox\"]:hover:before {\n opacity: 1;\n visibility: visible;\n}\n\n/* Improve blockquote styling */\nd-article blockquote {\n font-size: 19px;\n line-height: 1.8;\n padding: 1.5rem 2rem;\n margin: 2rem 0;\n border-left: 4px solid #667eea;\n background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 50%);\n border-radius: 0 8px 8px 0;\n font-style: italic;\n color: #4a5568;\n}\n\n/* Full width elements */\nd-article .code-compare,\nd-article .interactive-demo,\nd-article .memory-chart-container {\n max-width: none;\n width: 100%;\n margin-left: 0;\n margin-right: 0;\n}\n\n/* Responsive design improvements */\n@media (max-width: 1200px) {\n d-article .code-compare,\n d-article .interactive-demo {\n max-width: 95%;\n margin-left: auto;\n margin-right: auto;\n }\n}\n\n@media (max-width: 768px) {\n .tenet-list li.tenet {\n padding: 1rem;\n }\n \n .interactive-demo .demo-content {\n padding: 1rem;\n }\n}"],"sourceRoot":""}]); +// Exports +/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___); + + +/***/ }) + +/******/ }); +/************************************************************************/ +/******/ // The module cache +/******/ var __webpack_module_cache__ = {}; +/******/ +/******/ // The require function +/******/ function __webpack_require__(moduleId) { +/******/ // Check if module is in cache +/******/ var cachedModule = __webpack_module_cache__[moduleId]; +/******/ if (cachedModule !== undefined) { +/******/ return cachedModule.exports; +/******/ } +/******/ // Create a new module (and put it into the cache) +/******/ var module = __webpack_module_cache__[moduleId] = { +/******/ id: moduleId, +/******/ // no module.loaded needed +/******/ exports: {} +/******/ }; +/******/ +/******/ // Execute the module function +/******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__); +/******/ +/******/ // Return the exports of the module +/******/ return module.exports; +/******/ } +/******/ +/************************************************************************/ +/******/ /* webpack/runtime/compat get default export */ +/******/ (() => { +/******/ // getDefaultExport function for compatibility with non-harmony modules +/******/ __webpack_require__.n = (module) => { +/******/ var getter = module && module.__esModule ? +/******/ () => (module['default']) : +/******/ () => (module); +/******/ __webpack_require__.d(getter, { a: getter }); +/******/ return getter; +/******/ }; +/******/ })(); +/******/ +/******/ /* webpack/runtime/define property getters */ +/******/ (() => { +/******/ // define getter functions for harmony exports +/******/ __webpack_require__.d = (exports, definition) => { +/******/ for(var key in definition) { +/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) { +/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] }); +/******/ } +/******/ } +/******/ }; +/******/ })(); +/******/ +/******/ /* webpack/runtime/hasOwnProperty shorthand */ +/******/ (() => { +/******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop)) +/******/ })(); +/******/ +/******/ /* webpack/runtime/nonce */ +/******/ (() => { +/******/ __webpack_require__.nc = undefined; +/******/ })(); +/******/ +/************************************************************************/ +var __webpack_exports__ = {}; + +// EXTERNAL MODULE: ./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js +var injectStylesIntoStyleTag = __webpack_require__(72); +var injectStylesIntoStyleTag_default = /*#__PURE__*/__webpack_require__.n(injectStylesIntoStyleTag); +// EXTERNAL MODULE: ./node_modules/style-loader/dist/runtime/styleDomAPI.js +var styleDomAPI = __webpack_require__(825); +var styleDomAPI_default = /*#__PURE__*/__webpack_require__.n(styleDomAPI); +// EXTERNAL MODULE: ./node_modules/style-loader/dist/runtime/insertBySelector.js +var insertBySelector = __webpack_require__(659); +var insertBySelector_default = /*#__PURE__*/__webpack_require__.n(insertBySelector); +// EXTERNAL MODULE: ./node_modules/style-loader/dist/runtime/setAttributesWithoutAttributes.js +var setAttributesWithoutAttributes = __webpack_require__(56); +var setAttributesWithoutAttributes_default = /*#__PURE__*/__webpack_require__.n(setAttributesWithoutAttributes); +// EXTERNAL MODULE: ./node_modules/style-loader/dist/runtime/insertStyleElement.js +var insertStyleElement = __webpack_require__(540); +var insertStyleElement_default = /*#__PURE__*/__webpack_require__.n(insertStyleElement); +// EXTERNAL MODULE: ./node_modules/style-loader/dist/runtime/styleTagTransform.js +var styleTagTransform = __webpack_require__(113); +var styleTagTransform_default = /*#__PURE__*/__webpack_require__.n(styleTagTransform); +// EXTERNAL MODULE: ./node_modules/css-loader/dist/cjs.js!./src/style.css +var style = __webpack_require__(208); +;// ./src/style.css + + + + + + + + + + + +var options = {}; + +options.styleTagTransform = (styleTagTransform_default()); +options.setAttributes = (setAttributesWithoutAttributes_default()); +options.insert = insertBySelector_default().bind(null, "head"); +options.domAPI = (styleDomAPI_default()); +options.insertStyleElement = (insertStyleElement_default()); + +var update = injectStylesIntoStyleTag_default()(style/* default */.A, options); + + + + + /* harmony default export */ const src_style = (style/* default */.A && style/* default */.A.locals ? style/* default */.A.locals : undefined); + +;// ./src/index.js +// Main JavaScript file for transformers playthrough + + +// Import any additional functionality +console.log('Transformers Playthrough loaded'); + +// Add any custom JavaScript functionality here +document.addEventListener('DOMContentLoaded', function () { + // Initialize syntax highlighting for code blocks + if (window.hljs) { + hljs.highlightAll(); + } + + // Initialize any interactive components + initializeInteractiveComponents(); +}); +function initializeInteractiveComponents() { + // This will be expanded as we add interactive components + console.log('Interactive components initialized'); +} +/******/ })() +; +//# sourceMappingURL=main.bundle.js.map \ No newline at end of file