dist/main.bundle.js

/******/ (() => { // 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":"AAAA,yCAAyC;;AAEzC,iFAAiF;AACjF,kBAAkB;AAClB;IACI,kCAAkC;IAClC,wCAAwC;IACxC,0CAA0C;IAC1C,2CAA2C;IAC3C,uBAAuB;AAC3B;;AAEA,+BAA+B;AAC/B;IACI,aAAa;IACb,sBAAsB;IACtB,mBAAmB;IACnB,SAAS,EAAE,8CAA8C;AAC7D;AACA;IACI,kBAAkB;IAClB,eAAe;IACf,YAAY;AAChB;AACA;IACI,kBAAkB;IAClB,gBAAgB;AACpB;;AAEA;IACI,aAAa;IACb,eAAe;IACf,mBAAmB;IACnB,uBAAuB;IACvB,uBAAuB;IACvB,SAAS;AACb;;;AAGA;IACI,aAAa;IACb,mBAAmB;IACnB,sBAAsB;IACtB,SAAS;AACb;;AAEA,kCAAkC;AAClC;IACI,gBAAgB;IAChB,4BAA4B;IAC5B,kBAAkB;IAClB,kBAAkB;IAClB,kBAAkB;IAClB,eAAe;IACf,8CAA8C;IAC9C,aAAa;AACjB;;AAEA,8BAA8B;;AAE9B;IACI,aAAa;IACb,mBAAmB;IACnB,SAAS;AACb;;AAEA;IACI,wBAAwB;IACxB,WAAW;IACX,qCAAqC;IACrC,kBAAkB;IAClB,aAAa;AACjB;;AAEA;IACI,eAAe;IACf,kBAAkB;IAClB,eAAe;AACnB;;AAEA;IACI,wBAAwB;IACxB,gBAAgB;IAChB,WAAW;IACX,YAAY;IACZ,kBAAkB;IAClB,+BAA+B;IAC/B,eAAe;AACnB;;AAEA;IACI,WAAW;IACX,YAAY;IACZ,kBAAkB;IAClB,+BAA+B;IAC/B,eAAe;AACnB;;AAEA,yBAAyB;AACzB;IACI,eAAe;IACf,iBAAiB;AACrB;;AAEA;IACI,gBAAgB;IAChB,mBAAmB;AACvB;;AAEA;IACI,yBAAyB;IACzB,2CAA2C;IAC3C,kBAAkB;IAClB,eAAe;AACnB;AACA;IACI,wBAAwB;AAC5B;;;AAGA;IACI;QACI,wBAAwB;IAC5B;IACA;QACI,wBAAwB;IAC5B;AACJ;;AAEA;EACE,0BAA0B;EAC1B,iBAAiB;EACjB,iBAAiB;EACjB,kBAAkB;AACpB;;AAEA;EACE;IACE,kCAAkC;EACpC;AACF;;AAEA;IACI,eAAe;IACf,kBAAkB;AACtB;;AAEA;IACI,0BAA0B;AAC9B;;AAEA;IACI;QACI,aAAa;QACb,iBAAiB;QACjB,mBAAmB;QACnB,iBAAiB;QACjB,qBAAqB;QACrB,kBAAkB;QAClB,oBAAoB;QACpB,2CAA2C;QAC3C,wBAAwB;QACxB,0BAA0B;QAC1B,uCAAuC;QACvC,kBAAkB;QAClB,0BAA0B;QAC1B,qBAAqB;QACrB,aAAa;IACjB;AACJ;;AAEA;IACI,mBAAmB;AACvB;;AAEA;IACI,iBAAiB;IACjB,gBAAgB;IAChB,WAAW;AACf;;AAEA;IACI,0BAA0B;AAC9B;;AAEA;IACI,wBAAwB;AAC5B;;AAEA;IACI,gBAAgB;IAChB,gBAAgB;IAChB,wBAAwB;IACxB,oCAAoC;AACxC;;AAEA;IACI,aAAa;IACb,aAAa;AACjB;;AAEA;IACI;QACI,yDAAyD;QACzD,iBAAiB;IACrB;;IAEA;QACI,iBAAiB;QACjB,iBAAiB;QACjB,+BAA+B;QAC/B,6BAA6B;QAC7B,uBAAuB;QACvB,iBAAiB;QACjB,eAAe;QACf,kBAAkB;QAClB,iBAAiB;QACjB;;;iDAGyC;QACzC,wBAAwB,EAAE,eAAe;QACzC,gBAAgB;QAChB,SAAS,EAAE,gCAAgC;QAC3C,gBAAgB;QAChB,0BAA0B;QAC1B,qBAAqB;QACrB,oCAAoC;QACpC,aAAa;IACjB;AACJ;;AAEA;IACI,aAAa;IACb,kBAAkB;AACtB;;AAEA;IACI,yBAAyB;IACzB,iBAAiB;AACrB;;AAEA;IACI,yBAAyB;IACzB,mBAAmB;IACnB,qBAAqB;AACzB;;AAEA;IACI,qBAAqB;AACzB;;AAEA;IACI,iBAAiB;AACrB;;AAEA;IACI,oBAAoB;AACxB;;AAEA;IACI,mDAAmD;AACvD;;AAEA;IACI,aAAa;IACb,kBAAkB;AACtB;;;AAGA;IACI,cAAc;IACd,aAAa;IACb,oBAAoB;AACxB;;AAEA;IACI,eAAe;IACf,gBAAgB;AACpB;;AAEA;IACI,kBAAkB;AACtB;;AAEA;IACI,eAAe;AACnB;;AAEA;IACI;QACI,gBAAgB;IACpB;AACJ;;AAEA;;IAEI,qBAAqB;AACzB;;AAEA;IACI,yBAAyB;IACzB,8BAA8B;IAC9B,aAAa;IACb,cAAc,GAAG,4BAA4B;IAC7C,kBAAkB;IAClB,0DAA0D;IAC1D,qBAAqB;AACzB;;AAEA;IACI,SAAS;IACT,cAAc;IACd,gBAAgB;IAChB,cAAc;AAClB;;AAEA;IACI,kBAAkB;IAClB,gBAAgB,GAAG,4BAA4B;IAC/C,cAAc;IACd,gBAAgB;IAChB,kBAAkB;AACtB;;AAEA,0BAA0B;AAC1B;IACI;QACI,yBAAyB;QACzB,0BAA0B;IAC9B;IACA;QACI,cAAc;IAClB;IACA;QACI,cAAc;IAClB;AACJ;;AAEA;IACI,gBAAgB;AACpB;;AAEA;IACI,gBAAgB;IAChB,kBAAkB;IAClB,0BAA0B;IAC1B,kBAAkB;AACtB;;AAEA;IACI,eAAe;AACnB;;AAEA;QACQ,YAAY;QACZ,iBAAiB;QACjB,oBAAoB;QACpB,8BAA8B;QAC9B,+BAA+B;QAC/B,iBAAiB;QACjB,mBAAmB,EAAE,6CAA6C;QAClE,aAAa;QACb,uBAAuB,EAAE,gCAAgC;AACjE;;AAEA;IACI,kBAAkB;IAClB,iBAAiB;IACjB,oBAAoB;IACpB,oCAAoC;IACpC,kBAAkB;IAClB,oBAAoB;IACpB,qCAAqC;IACrC,uBAAuB;IACvB,mBAAmB,EAAE,6CAA6C;IAClE,aAAa;IACb,uBAAuB,EAAE,gCAAgC;AAC7D;;AAEA;IACI,eAAe;IACf,iBAAiB;IACjB,mBAAmB;IACnB,yBAAyB;IACzB,wCAAwC;AAC5C;;AAEA;IACI,oBAAoB;AACxB;;AAEA;IACI,oBAAoB;AACxB;;AAEA;IACI,oBAAoB;AACxB;;AAEA;IACI,iBAAiB;AACrB;;AAEA,yBAAyB;AACzB;IACI,gBAAgB;IAChB,kBAAkB;IAClB,mBAAmB;IACnB,eAAe;IACf,mBAAmB;IACnB,mBAAmB;IACnB,yBAAyB;IACzB,wCAAwC;AAC5C;;;AAGA,0BAA0B;AAC1B;IACI,iBAAiB;IACjB,uBAAuB;IACvB,mBAAmB;IACnB,iBAAiB;IACjB,eAAe;IACf,mBAAmB;IACnB,mBAAmB;IACnB,yBAAyB;IACzB,wCAAwC;AAC5C;;AAEA,gBAAgB;AAChB;IACI,aAAa;IACb,8BAA8B;IAC9B,eAAe;AACnB;;AAEA,gBAAgB;AAChB;IACI,qBAAqB;AACzB;;AAEA,iBAAiB;AACjB;IACI,cAAc;IACd,2BAA2B;IAC3B,iBAAiB;IACjB,gBAAgB;IAChB,cAAc;AAClB;;AAEA,mDAAmD;AACnD;IACI,aAAa;IACb,SAAS;IACT,mBAAmB;AACvB;;AAEA,wBAAwB;AACxB;IACI,OAAO;IACP,WAAW;IACX,mBAAmB;IACnB,kBAAkB;IAClB,gBAAgB;IAChB,aAAa;AACjB;;AAEA;IACI,gBAAgB;IAChB,WAAW;IACX,YAAY;IACZ,mBAAmB;IACnB,kBAAkB;IAClB,eAAe;IACf,iCAAiC;AACrC;;AAEA;IACI,mBAAmB;AACvB;;AAEA,yBAAyB;AACzB;IACI,WAAW;IACX,eAAe;IACf,yBAAyB;IACzB,kBAAkB;IAClB,iBAAiB;IACjB,cAAc;AAClB;;AAEA,mBAAmB;AACnB;IACI,WAAW;IACX,eAAe;IACf,yBAAyB;IACzB,kBAAkB;IAClB,iBAAiB;IACjB,iBAAiB;IACjB,cAAc;IACd,eAAe;AACnB;;AAEA,qBAAqB;AACrB;IACI,aAAa;IACb,cAAc;IACd,oBAAoB;IACpB,yBAAyB;IACzB,kBAAkB;IAClB,eAAe;AACnB;;AAEA,2BAA2B;AAC3B;IACI,qBAAqB;AACzB;;AAEA;IACI,oBAAoB;AACxB;;AAEA,uBAAuB;AACvB;IACI,aAAa;IACb,mBAAmB;IACnB,mBAAmB;AACvB;;AAEA,gCAAgC;AAChC;IACI,gBAAgB;IAChB,kBAAkB;IAClB,aAAa;IACb,mBAAmB;IACnB,yCAAyC;AAC7C;;AAEA;IACI,iBAAiB;IACjB,gBAAgB;IAChB,cAAc;IACd,qBAAqB;AACzB;;AAEA;IACI,iBAAiB;IACjB,gBAAgB;IAChB,cAAc;AAClB;;AAEA,2BAA2B;AAC3B;IACI;QACI,0BAA0B;QAC1B,aAAa;IACjB;;IAEA;QACI,UAAU;IACd;AACJ;;AAEA,iCAAiC;AACjC;IACI,qBAAqB;AACzB;;AAEA;IACI,qBAAqB;IACrB,aAAa;IACb,6CAA6C;AACjD;;AAEA,2BAA2B;AAC3B;IACI,0BAA0B;AAC9B;;AAEA,oCAAoC;AACpC;IACI,yBAAyB;IACzB,gBAAgB;AACpB;;AAEA,8BAA8B;AAC9B;IACI,mBAAmB;IACnB,aAAa;IACb,kBAAkB;IAClB,mBAAmB;AACvB;;AAEA;IACI,mBAAmB;IACnB,aAAa;IACb,kBAAkB;AACtB;;AAEA;YACY,qDAAqD;YACrD,YAAY;YACZ,eAAe;YACf,gBAAgB;YAChB,kBAAkB;YAClB,YAAY;YACZ,mBAAmB;YACnB,eAAe;YACf,yBAAyB;YACzB,mBAAmB;YACnB,yCAAyC;YACzC,yBAAyB;YACzB,kBAAkB;YAClB,gBAAgB;QACpB;AACR;IACI,2BAA2B;IAC3B,0CAA0C;AAC9C;;AAEA;IACI,wBAAwB;IACxB,yCAAyC;AAC7C;;AAEA;IACI,WAAW;IACX,kBAAkB;IAClB,MAAM;IACN,WAAW;IACX,WAAW;IACX,YAAY;IACZ,qFAAqF;IACrF,0BAA0B;AAC9B;;AAEA;IACI,UAAU;AACd;;AAEA;YACY,qDAAqD;YACrD,YAAY;YACZ,eAAe;YACf,gBAAgB;YAChB,kBAAkB;YAClB,YAAY;YACZ,mBAAmB;YACnB,eAAe;YACf,yBAAyB;YACzB,mBAAmB;YACnB,yCAAyC;YACzC,yBAAyB;YACzB,kBAAkB;YAClB,gBAAgB;QACpB;;AAER;IACI,2BAA2B;IAC3B,0CAA0C;AAC9C;;AAEA;IACI,wBAAwB;IACxB,yCAAyC;AAC7C;;AAEA;IACI,WAAW;IACX,kBAAkB;IAClB,MAAM;IACN,WAAW;IACX,WAAW;IACX,YAAY;IACZ,qFAAqF;IACrF,0BAA0B;AAC9B;;AAEA;IACI,UAAU;AACd;AACA;IACI,mBAAmB;IACnB,uBAAuB;IACvB,aAAa;AACjB;;AAEA;IACI,aAAa;IACb,uBAAuB;IACvB,oBAAoB;AACxB;;AAEA;IACI,qBAAqB;AACzB;;;AAGA;IACI,qBAAqB;IACrB,mBAAmB;AACvB;;AAEA;IACI,aAAa;AACjB;;AAEA;IACI,aAAa,EAAE,8BAA8B,EAAE,mBAAmB;AACtE;;AAEA;IACI;QACI,0BAA0B;IAC9B;AACJ;;AAEA;IACI;QACI,0BAA0B;IAC9B;IACA;QACI,iBAAiB;IACrB;IACA;QACI,gBAAgB;IACpB;AACJ;;AAEA;IACI,kCAAkC;AACtC;;AAEA;IACI,gBAAgB;IAChB,iBAAiB;AACrB;;AAEA,wCAAwC","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: 900px;
    margin-left: auto;
    margin-right: auto;
}

/* 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;
}

/* 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: 900px;\n    margin-left: auto;\n    margin-right: auto;\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/* 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