<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Holonica Studio — Editor</title>
<link rel="stylesheet" href="assets/holonica.css" />
<style>
  html, body { height: 100%; overflow: hidden; background: var(--ink-50); }
  body { font-size: 13px; line-height: 1.5; color: var(--ink-900); font-family: var(--font-sans); }

  :root {
    --rail-w: 348px;
    --rail-w-right: 260px;
    --rail-w-narrow: 56px;
    --header-h: 52px;
    --footer-h: 40px;
    --panel-bg: #ffffff;
    --panel-border: var(--ink-200);
    --selected: var(--accent);
    --selected-ink: #B8941F;
    --canvas-bg: #F2EFE9;
  }

  html[data-theme="dark"] {
    --background: #0E0E10;
    --foreground: #EDEDEE;
    --ink-0: #0E0E10;
    --ink-50: #161618;
    --ink-100: #1C1C1F;
    --ink-200: #2A2A2E;
    --ink-300: #3A3A3F;
    --ink-400: #6E6E76;
    --ink-500: #8E8E96;
    --ink-600: #A8A8B0;
    --ink-700: #CACAD0;
    --ink-800: #E0E0E4;
    --ink-900: #EDEDEE;
    --panel-bg: #161618;
    --panel-border: #2A2A2E;
    --canvas-bg: #1A1A1D;
  }
  html[data-theme="dark"] body { background: #0E0E10; color: #EDEDEE; }
  html[data-theme="dark"] { --logo-filter: invert(1); }

  button { font-family: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
  input, textarea, select { font-family: inherit; color: inherit; }

  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-thumb { background: var(--ink-200); border-radius: 100px; border: 2px solid var(--panel-bg); }
  ::-webkit-scrollbar-thumb:hover { background: var(--ink-300); }
  ::-webkit-scrollbar-track { background: transparent; }

  #root { height: 100vh; width: 100vw; overflow: hidden; }

  /* halo for chrome accents — softer than marketing site */
  .editor-halo {
    position: relative;
    isolation: isolate;
  }
  .editor-halo::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(244,208,63,.45) 0%, rgba(244,208,63,0) 60%);
    transform: translate(-50%,-50%);
    filter: blur(20px);
    z-index: -1;
    pointer-events: none;
  }
</style>

<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
</head>
<body>

<div id="root"></div>

<!--
  Entry bundle. `src/bundle.jsx` is the single-file concatenation of every
  component (icons / data / atoms / canvas / rails / ai-panel / editor / app)
  and ends with ReactDOM.createRoot(...).render(<App />).
  The dev-only tweaks-panel.jsx / design-canvas.jsx scaffolding is intentionally
  omitted here — App falls back to single "atelier" view without them.
-->
<script type="text/babel" src="src/bundle.jsx"></script>

</body>
</html>
