{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Sound 🌊\n",
    "\n",
    "<style>\n",
    "/* ╭━━━☆━━━╮  FLOAT FRAMES (Figure / Seealso) */\n",
    ".float-frame {\n",
    "    border: 1px solid #ccc;\n",
    "    background-color: #f9f9f9;\n",
    "    position: relative;\n",
    "    padding: 10px 14px;\n",
    "    margin: 15px;\n",
    "    font-family: sans-serif;\n",
    "    font-size: 14px;\n",
    "    line-height: 1.5;\n",
    "}\n",
    "\n",
    "/* Floated figure (image/code block) */\n",
    ".float-frame.figure-style {\n",
    "    float: right;\n",
    "    width: 35%;\n",
    "    text-align: center;\n",
    "}\n",
    "\n",
    "/* Floated seealso (text-only callout) */\n",
    ".float-frame.seealso-style {\n",
    "    float: right;\n",
    "    width: 45%;\n",
    "    max-width: 400px;\n",
    "    min-width: 200px;\n",
    "    text-align: left;\n",
    "    white-space: normal;\n",
    "    box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n",
    "}\n",
    "\n",
    "/* Responsive override */\n",
    "@media (max-width: 768px) {\n",
    "    .float-frame {\n",
    "        float: none !important;\n",
    "        display: block;\n",
    "        width: 95vw !important;\n",
    "        max-width: 95vw !important;\n",
    "        margin: 10px auto;\n",
    "    }\n",
    "}\n",
    "\n",
    "/* ╭━━━☆━━━╮  BLOCKQUOTES */\n",
    "blockquote {\n",
    "    border-left: 2px solid #999;\n",
    "    padding-left: 1em;\n",
    "    margin-left: 0;\n",
    "    margin-right: 0;\n",
    "    color: #444;\n",
    "    font-style: italic;\n",
    "    background: none;\n",
    "}\n",
    "\n",
    "blockquote a {\n",
    "    text-decoration: none;\n",
    "    font-style: normal;\n",
    "    color: #333;\n",
    "    border-bottom: 1px dotted #aaa;\n",
    "}\n",
    "\n",
    "blockquote a:hover {\n",
    "    color: #000;\n",
    "    border-bottom: 1px solid #555;\n",
    "}\n",
    "\n",
    "/* ╭━━━☆━━━╮  COLLAPSIBLE <details> BLOCKS */\n",
    ".custom-details summary {\n",
    "    list-style: none;\n",
    "    cursor: pointer;\n",
    "    font-weight: normal;\n",
    "    display: inline-block;\n",
    "    padding: 5px 15px;\n",
    "    border: 2px dotted black;\n",
    "    border-radius: 20px;\n",
    "    text-align: center;\n",
    "    transition: color 0.3s ease-in-out;\n",
    "}\n",
    "\n",
    ".custom-details summary:hover {\n",
    "    color: lightgray;\n",
    "}\n",
    "\n",
    ".custom-details summary::-webkit-details-marker {\n",
    "    display: none;\n",
    "}\n",
    "\n",
    "/* ╭━━━☆━━━╮  NESTED QUOTES INSIDE DETAILS */\n",
    ".quote-content {\n",
    "    border-left: 4px solid #ccc;\n",
    "    padding-left: 10px;\n",
    "    color: #555;\n",
    "    font-style: italic;\n",
    "    margin-top: 15px;\n",
    "}\n",
    "\n",
    ".quote-content details {\n",
    "    margin-top: 10px;\n",
    "}\n",
    "\n",
    ".quote-content summary {\n",
    "    font-weight: bold;\n",
    "    cursor: pointer;\n",
    "}\n",
    "\n",
    "/* so-so- def Container that floats right with image and caption */\n",
    ".float-right {\n",
    "    float: right;\n",
    "    width: 35%;\n",
    "    height: auto;\n",
    "    margin-left: 15px;\n",
    "    border: 1px solid #ccc;\n",
    "    padding: 5px;\n",
    "    text-align: center;\n",
    "    font-size: 12px;\n",
    "    background-color: #f9f9f9;\n",
    "    position: relative;\n",
    "}\n",
    "\n",
    "/* Image itself */\n",
    ".float-right img {\n",
    "    width: 100%;\n",
    "    height: auto;\n",
    "    display: block;\n",
    "}\n",
    "\n",
    "/* Magnify icon overlay */\n",
    ".image-bubble.layered-icon {\n",
    "    position: absolute;\n",
    "    bottom: 8px;\n",
    "    right: 8px;\n",
    "    width: 12px;\n",
    "    height: 10px;\n",
    "    background: none;\n",
    "    padding: 0;\n",
    "    cursor: pointer;\n",
    "    z-index: 5;\n",
    "}\n",
    "\n",
    "/* Larger screen rectangle */\n",
    ".large-icon {\n",
    "    position: absolute;\n",
    "    width: 100%;\n",
    "    height: 100%;\n",
    "    background-color: #ddd;\n",
    "    border: 1px solid #888;\n",
    "    border-radius: 2px;\n",
    "}\n",
    "\n",
    "/* Smaller screen at 7 o'clock */\n",
    ".small-icon {\n",
    "    position: absolute;\n",
    "    width: 50%;\n",
    "    height: 50%;\n",
    "    background-color: #aaa;\n",
    "    border: 1px solid #666;\n",
    "    border-radius: 2px;\n",
    "    bottom: -1px;\n",
    "    left: -1px;\n",
    "}\n",
    "\n",
    ".image-bubble.layered-icon:hover .large-icon {\n",
    "    background-color: #007BFF;\n",
    "    border-color: #0056b3;\n",
    "}\n",
    "\n",
    ".image-bubble.layered-icon:hover .small-icon {\n",
    "    background-color: white;\n",
    "    border-color: #007BFF;\n",
    "}\n",
    "\n",
    "/* Scoped variant for seealso boxes */\n",
    ".float-frame.seealso-style {\n",
    "    float: right; \n",
    "    display: inline-block;\n",
    "    width: 190px;\n",
    "    max-width: 190px;\n",
    "    min-width: 100px;\n",
    "    height: auto;\n",
    "    border: 1px solid #ccc;\n",
    "    padding: 6px 10px;\n",
    "    font-size: 13px;\n",
    "    background-color: #f9f9f9;\n",
    "    position: relative;\n",
    "    text-align: center;\n",
    "    margin: 15px;\n",
    "    white-space: nowrap;\n",
    "}\n",
    "\n",
    "/* Responsive fallback */\n",
    "@media (max-width: 768px) {\n",
    "    .float-frame.seealso-style {\n",
    "        float: none !important;\n",
    "        display: block;\n",
    "        width: 95vw !important;\n",
    "        max-width: 95vw !important;\n",
    "        margin: 10px auto;\n",
    "        white-space: normal;\n",
    "    }\n",
    "}\n",
    "\n",
    "@media (prefers-color-scheme: dark) {\n",
    "  .float-frame,\n",
    "  .float-right,\n",
    "  .float-frame.figure-style,\n",
    "  .float-frame.left-style,\n",
    "  .float-frame.seealso-style {\n",
    "    background-color: #1e1e1e !important;\n",
    "    border-color: #444 !important;\n",
    "    color: #ddd;\n",
    "  }\n",
    "\n",
    "  .float-frame a,\n",
    "  .float-frame p,\n",
    "  .float-frame span {\n",
    "    color: #ccc;\n",
    "  }\n",
    "\n",
    "  blockquote {\n",
    "    color: #bbb;\n",
    "    border-left: 2px solid #555;\n",
    "  }\n",
    "\n",
    "  .quote-content {\n",
    "    border-left: 4px solid #444;\n",
    "    color: #aaa;\n",
    "  }\n",
    "}\n",
    "</style>\n",
    "\n",
    "<details class=\"custom-details\">\n",
    "  <summary>+ Expand</summary>\n",
    "\n",
    "  <iframe src=\"https://generalmatter.com/\" width=\"100%\" height=\"1000px\" style=\"border:none\"></iframe>\n",
    "\n",
    "  <blockquote class=\"quote-content\">\n",
    "    <details>\n",
    "      <summary>World AI</summary>\n",
    "      <p>Reality or Simulation</p>\n",
    "    </details>\n",
    "    <p>-- <a href=\"https://www.gutenberg.org/files/174/174-h/174-h.htm\">Imitative 🎭</a></p>\n",
    "  </blockquote>\n",
    "</details>\n",
    "\n",
    "<script>\n",
    "  document.addEventListener(\"DOMContentLoaded\", function() {\n",
    "    const details = document.querySelector(\".custom-details\");\n",
    "    const summary = details.querySelector(\"summary\");\n",
    "\n",
    "    details.addEventListener(\"toggle\", function() {\n",
    "      summary.textContent = details.open ? \"- Collapse\" : \"+ Expand\";\n",
    "    });\n",
    "  });\n",
    "</script>\n",
    "\n",
    "<p></p>\n",
    "<p></p> \n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<iframe \n",
    "    src=\"myhtml/part1.html\" \n",
    "    style=\"border: none; width: 100%; height: 100vh; overflow: hidden;\" \n",
    "    title=\"Act 1: Idols and Realities\">\n",
    "    Your browser does not support iframes. Please visit <a href=\"myhtml/part1.html\">this link</a>.\n",
    "</iframe>"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.11.11"
  },
  "widgets": {
   "application/vnd.jupyter.widget-state+json": {
    "state": {},
    "version_major": 2,
    "version_minor": 0
   }
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}