@needle-tools/gltf-progressive 2.1.6-next.c9b2e8b → 2.1.6

package/examples/react-three-fiber/src/App.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+/* eslint-disable */
+import * as React from 'react'
+import { Canvas, useThree } from '@react-three/fiber'
+
+import { useNeedleProgressive } from '@needle-tools/gltf-progressive'
+import { Environment, OrbitControls, useGLTF } from '@react-three/drei'
+
+function MyModel() {
+  const { gl } = useThree()
+  const url = 'https://engine.needle.tools/demos/gltf-progressive/assets/church/model.glb'
+  const { scene } = useGLTF(url, false, false, (loader) => {
+    useNeedleProgressive(url, gl, loader as any)
+  })
+  return <primitive object={scene} />
+}
+
+
+export default function App() {
+  return (
+    <Canvas
+      frameloop="demand"
+      camera={{ position: [25, 15, 25] }}>
+      <OrbitControls target={[0 , 10, 0]} />
+      <ambientLight intensity={1} />
+      <spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} />
+      <pointLight position={[-10, -10, -10]} />
+      <Environment
+        files="https://dl.polyhaven.org/file/ph-assets/HDRIs/hdr/2k/evening_road_01_2k.hdr"
+      // ground={{ height: 5, radius: 40, scale: 10 }}
+      />
+      <MyModel />
+    </Canvas>
+  )
+}
+
+

package/examples/react-three-fiber/src/index.tsx

@@ -0,0 +1,12 @@
+//@ts-ignore
+import { createRoot } from 'react-dom/client'
+import * as React from 'react'
+import './styles.css'
+import App from './App'
+
+
+createRoot(document.getElementById('root')).render(
+    <>
+        <App />
+    </>
+)

package/examples/react-three-fiber/src/styles.css

@@ -0,0 +1,16 @@
+* {
+  box-sizing: border-box;
+}
+
+html,
+body,
+#root {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  background: #f0f0f0;
+}

package/examples/react-three-fiber/tsconfig.json

@@ -0,0 +1,22 @@
+{
+    "compilerOptions": {
+      "jsx": "react",
+      "target": "ESNext",
+      "useDefineForClassFields": true,
+      "module": "ESNext",
+      "lib": ["ESNext", "DOM"],
+      "moduleResolution": "Node",
+      "strict": true,
+      "sourceMap": true,
+      "resolveJsonModule": true,
+      "esModuleInterop": true,
+      "noEmit": true,
+      "noUnusedLocals": false,
+      "noUnusedParameters": true,
+      "noImplicitReturns": true,
+      "noImplicitAny": false,
+      "experimentalDecorators": true,
+      "skipLibCheck": true
+    },
+    "include": ["./src"]
+  }

package/{dist/lib → lib}/version.js

@@ -1,4 +1,4 @@
 // replaced at build time
-export const version = "2.1.6-next.c9b2e8b";
+export const version = "2.1.6";
 globalThis["GLTF_PROGRESSIVE_VERSION"] = version;
 console.debug(`[gltf-progressive] version ${version || "-"}`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@needle-tools/gltf-progressive",
-  "version": "2.1.6-next.c9b2e8b",
+  "version": "2.1.6",
   "description": "three.js support for loading glTF or GLB files that contain progressive loading data",
   "homepage": "https://needle.tools",
   "author": {
@@ -25,23 +25,23 @@
     "optimization"
   ],
   "type": "module",
-  "main": "./src/index.ts",
+  "main": "./lib/index.js",
   "exports": {
     ".": {
-      "import": "./src/index.js",
+      "import": "./lib/index.js",
       "require": "./gltf-progressive.js"
     }
   },
-  "scripts": {
-    "dev": "npm-watch build:lib",
-    "prepublishOnly": "node tools/build.mjs",
-    "build": "node tools/build.mjs --dry-run",
-    "build:dist": "vite build",
-    "build:lib": "tsc --rootDir ./src --outDir ./dist/lib --noEmit false --declaration --incremental false --sourceMap false && node tools/compile.mjs",
-    "test:tsc": "tsc --noEmit",
-    "lint": "eslint --ext .ts src",
-    "lint:fix": "eslint --ext .ts src --fix"
-  },
+  "files": [
+    "lib",
+    "examples",
+    "package.json",
+    "README.md",
+    "CHANGELOG.md",
+    "gltf-progressive.js",
+    "gltf-progressive.min.js",
+    "gltf-progressive.umd.cjs"
+  ],
   "watch": {
     "build:lib": {
       "patterns": [
@@ -71,8 +71,5 @@
     "three": ">= 0.160.0",
     "vite": "<= 4.3.9"
   },
-  "publishConfig": {
-    "access": "public",
-    "registry": "https://registry.npmjs.org"
-  }
-}
+  "types": "./lib/index.d.ts"
+}

package/.github/workflows/publish.yml

@@ -1,47 +0,0 @@
-name: Release Workflow
-on:
-  push:
-    branches:
-      - 'release/next'
-      - 'release/stable'
-      - 'release/experimental'
-
-jobs:
-  run-release-script:
-    runs-on: ubuntu-latest
-    timeout-minutes: 5
-    defaults:
-      run:
-        working-directory: .
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
-        # with:
-        #   submodules: false
-        #   token: ${{ secrets.GH_RELEASE_TOKEN }} 
-      # - name: Initialize specific submodules
-      #   run: |
-      #     git config --global url."https://x-access-token:${{ secrets.GH_RELEASE_TOKEN }}@github.com/".insteadOf "https://github.com/"
-      #     git submodule update --init modules/gltf-progressive
-      #     git submodule update --init modules/needle-engine-modules
-        # working-directory: ./
-      
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: '22'
-          cache: 'npm'
-          cache-dependency-path: './package.json'
-          
-      - name: Install dependencies
-        run: npm install
-                
-      - name: Publish to npm (stable branch)
-        if: startsWith(github.ref_name, 'release/stable')
-        run: npx --yes needle-publish-helper@next publish "." --webhook "${{ secrets.DISCORD_WEBHOOK }}" --access-token "${{ secrets.NPM_TOKEN }}" --tag "stable" --create-tag "release/" --llm-api-key "${{ secrets.LLM_API_KEY }}"
-
-      - name: Publish to npm (next and experimental branches)
-        if: ${{ !startsWith(github.ref_name, 'release/stable') }}
-        run: npx --yes needle-publish-helper@next publish "." --webhook "${{ secrets.DISCORD_WEBHOOK }}" --access-token "${{ secrets.NPM_TOKEN }}" --tag "${{ github.ref_name }}" --version+tag --version+hash --create-tag "release/" --llm-api-key "${{ secrets.LLM_API_KEY }}"
-
-

package/dist/CHANGELOG.md

@@ -1,211 +0,0 @@
-# Changelog
-All notable changes to this package will be documented in this file.
-
-The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
-and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
-
-## [2.1.4] - 2025-04-13
-- Fix: Don't minify internal exports (e.g. class names of three.js)
-
-## [2.1.3] - 2025-03-19
-- Fix: DracoLoader cache busting due to range request
-
-## [2.1.2] - 2025-03-10
-- Chore: Update examples
-
-## [2.1.1] - 2025-02-20
-- Fix: Handle failed progressive texture loading due to e.g. offline or missing files 
-- Fix: Regression causing custom KTX2Transcoder location not working for e.g. offline usage
-
-## [2.1.0] - 2025-02-13
-- Bump version
-
-## [2.1.0-alpha.6] - 2025-02-12
-- Fix: `?debugprogressive` now also switches texture LODs
-
-## [2.1.0-alpha.5] - 2025-01-30
-- Add: initial support for Orthographic cameras
-
-## [2.1.0-alpha.4] - 2025-01-29
-- Fix: LOD not loading if the max texture resolution is too small
-
-## [2.1.0-alpha.3] - 2025-01-21
-- Change: Load Draco and KTX loaders as soon as possible
-- Fix: Make `GET` request to draco endpoint with 1 byte range instead of HEAD request. The HEAD request did return the whole draco loader.
-
-## [2.1.0-alpha.2] - 2025-01-17
-- Add: expose methods in globalThis/window at `Needle.gltfProgressive`
-
-## [2.1.0-alpha.1] - 2025-01-15
-- Fix: issue where `getMeshLOD` for multi-material meshes would not return the correct index if called multiple times at the same time 
-
-## [2.1.0-alpha] - 2025-01-14
-- Bump three types to r169
-
-## [2.0.0-alpha.3] - 2025-01-02
-- Change: Load higher texture resolution by default
-
-## [2.0.0-alpha.1] - 2024-12-09
-- Add: `Accept` header options for Needle Cloud requests
-
-## [1.2.15] - 2024-10-21
-- Fix: internal window parameter access causing issue with SSR
-
-## [1.2.13] - 2024-10-06
-- Update README
-
-## [1.2.12] - 2024-09-23
-- Add: `assignTextureLOD` now also accepts mesh as parameter
-- Change: improved `assignTextureLOD` typing
-
-## [1.2.11] - 2024-09-11
-- Fix: draco and KTX decoder path handling when gstatic can not be reached and user set path
-
-## [1.2.10] - 2024-09-10
-- Fix: loading and assigning texture LOD for ShaderMaterial and RawShaderMaterial
-
-## [1.2.9] - 2024-07-29
-- Fix: server side rendering fixes
-
-## [1.2.8] - 2023-07-19
-- Add: repository url
-
-## [1.2.7] - 2023-07-18
-- Fix: include `type: module`
-
-## [1.2.5] - 2023-07-16
-- Remove: Frustum cull check because we're already operating on the latest renderlist
-
-## [1.2.5-beta] - 2023-07-09
-- Change: Update skinned mesh bounding box every 30 frames using the lowres mesh version
-
-## [1.2.4-beta.1] - 2023-07-09
-- Add: LODsManager `manual` property which can be used to manually update the LODs in the scene by calling `LODsManager.update(scene, camera)`
-- Fix: updating LODs in WebXR
-
-## [1.2.4-beta] - 2023-07-05
-- Change: `createLoaders` now returns created loaders and decoders to be re-used
-
-## [1.2.3-beta] - 2023-07-04
-- Add: support for transmissive objects
-
-## [1.2.3-alpha.3] - 2023-07-01
-- Add: prevent loading highres textures when user has enabled data-save mode
-
-## [1.2.3-alpha.2] - 2023-06-27
-- Fix: error caused by parser associations containing `undefined` value
-
-## [1.2.3-alpha.1] - 2023-06-25
-- Internal: rename `setRaycastMesh` to `registerRaycastMesh`
-
-## [1.2.3-alpha] - 2023-06-24
-- Change: automatically change LOD update interval based on framerate
-
-## [1.2.2-alpha.4] - 2023-06-20
-- Add: Register version in global "GLTF_PROGRESSIVE_VERSION" variable
-- Add: `<model-viewer>` elements added document at any time are now properly registered 
-- Fix: LOD updates for multiple `<model-viewer>` elements
-- Fix: Initial render tick for a few frames for `<model-viewer>` to trigger LOD updates when the model-viewer element is not animated or interacted with
-- Change: `<model-viewer>` elements will fetch a slightly higher texture LOD
-
-## [1.2.1-alpha.4] - 2023-06-19
-- Fix: SkinnedMesh bounds calculation
-
-## [1.2.1-alpha.3] - 2023-06-15
-- update the README
-
-## [1.2.1-alpha.2] - 2023-06-15
-- fix: Ortographic camera causing LODs being falsely updated
-- fix: regression introduced in 1.2.1-alpha
-- fix: error when trying to load a LOD glTF directly 
-- fix: issues caused by instanceof in local development environments
-
-## [1.2.0-alpha.9] - 2023-06-13
-- fix: issue where skinned mesh matrix was falsely applied to calculate screen size
-- fix: use bounding box from SkinnedMesh object
-
-## [1.2.0-alpha.6] - 2023-06-12
-- fix: minor bug where opened glTF has `NEEDLE_progressive` extension but no lods array because the glTF is a LOD variant
-
-## [1.2.0-alpha.5] - 2023-06-10
-- fix: safeguard when `registerMesh` or `registerTexture` are being called with invalid data
-- examples: update vanilla threejs example
-
-## [1.2.0-alpha.4] - 2023-06-07
-- add: `useRaycastMeshes` method:
-  ```ts
-    // call to enable raycasting with low poly raycast meshes
-    // this can be done once in your project
-    useRaycastMeshes(true);
-    
-    // then use the raycaster as usual
-    const raycaster = new Raycaster();
-    raycaster.setFromCamera(mouse, camera);
-    const intersects = raycaster.intersectObjects(scene.children, true);
-    
-    // call to disable raycasting with low polwy meshes
-    useRaycastMeshes(false);
-  ```
-
-## [1.2.0-alpha.3] - 2023-06-06
-- add: automatically load the highest LOD first to show a slightly better quality level as soon as possible
-- fix: improve Texture LOD selection by taking LOD level height into account
-- fix: correctly assign LOD level information to initially loaded texture
-
-## [1.1.0-alpha.2] - 2023-06-05
-- fix: register LOD information for meshes that don't have associations
-
-## [1.1.0-alpha] - 2023-06-03
-- add: loading of multiple texture LOD levels
-- fix: issue where material LODs where not updated when the material was cloned
-- change: clamp screen coverage when near plane intersects with the object bounds
-- change: skip CubeCamera setup
-- change: handle cases where an object has only texture LODs
-
-## [1.0.0-alpha.19] - 2023-05-31
-- add `LODsManager.plugins` getter 
-
-## [1.0.0-alpha.18] - 2023-05-30
-- update README
-
-## [1.0.0-alpha.16] - 2023-05-29
-- fix: LODs manager now clamps to LOD 0 if the near plane is inside the bounds
-- change: Ignore certain material in lods update loop 
-
-## [1.0.0-alpha.15] - 2023-05-25
-- add: `getRaycastMesh` method
-- add: LODsManager does now expose `targetTriangleDensity`. The target triangle density is the desired max amount of triangles on screen when the mesh is filling the screen. 
-- change: create LODsManager via `LODsManager.get(renderer)`
-
-## [1.0.0-alpha.13] - 2023-05-24
-- fix: modelviewer error when trying to access undefined texture extensions
-
-## [1.0.0-alpha.13] - 2023-05-24
-- add: vanilla three.js example
-- fix: texture LODs losing filter setting
-
-## [1.0.0-alpha.12] - 2023-05-19
-- fix: update LODs when using postprocessing
-
-## [1.0.0-alpha.11] - 2023-05-17
-- add: expose `setDracoDecoderLocation` and `setKTX2TranscoderLocation`
-- fix: allow using draco decoder and ktx2 transcoder from local filepath
-
-## [1.0.0-alpha.10] - 2023-05-07
-- fix: progressive assets are now only updated during the main canvas render call and not e.g. when rendering to a texture
-
-## [1.0.0-alpha.9] - 2023-05-03
-- fix: handle loading of ShaderMaterial for VRM progressive textures
-
-## [1.0.0-alpha.8] - 2023-05-03
-- fix: handle transparent materials
-
-## [1.0.0-alpha.7] - 2023-05-01
-- fix: Handle modelviewer `src` set as property but not as attribute
-- change: Remove sourcemap
-
-## [1.0.0-alpha.6] - 2023-05-01
-- fix: LOD mesh assignment for multi-material meshes (meshes with multiple primitives)
-
-## [1.0.0-alpha.5] - 2023-04-30
-- initial version

package/dist/README.md

@@ -1,129 +0,0 @@
-# glTF progressive
-
-LODs on steroids for glTF, GLB or VRM files with density based loading for meshes or texture for any three.js based project.
-
-## Features
-- One line integration in any three.js based engine/project
-- Mesh LOD support
-- Texture LOD support
-- LOD levels are loaded on demand based on mesh screen density
-- Low poly LOD meshes can easily be used for raycasting for smooth interactions with high-poly meshes
-- Cloud generation and loading support via [cloud.needle.tools](https://cloud.needle.tools) for glTF, GLB & VRM assets
-
-## Examples
-
-Examples are in the `/examples` directory. Live versions can be found in the links below.  
-
-- [Vanilla three.js](https://engine.needle.tools/demos/gltf-progressive/threejs/) - multiple models and animations
-- [React Three Fiber](https://engine.needle.tools/demos/gltf-progressive/r3f/)
-- \<model-viewer\> 
-  - [single \<model-viewer> element](https://engine.needle.tools/demos/gltf-progressive/modelviewer) 
-  - [multiple \<model-viewer> elements](https://engine.needle.tools/demos/gltf-progressive/modelviewer-multiple)
-- [Needle Engine](https://stackblitz.com/edit/needle-engine-gltf-progressive?file=src%2Fmain.ts)
-- [Needle Cloud](https://cloud.needle.tools/view?file=Z23hmXBZN45qJ-ZN45qJ-world)
-
-**Interactive Examples**:
-- [Stackblitz](https://stackblitz.com/@marwie/collections/gltf-progressive)
-- [Codesandbox](https://codesandbox.io/dashboard/sandboxes/gltf-progressive)
-
-
-<br/>
-<video width="320" controls autoplay src="https://engine.needle.tools/demos/gltf-progressive/video.mp4">
-    <source src="https://engine.needle.tools/demos/gltf-progressive/video.mp4" type="video/mp4">
-</video>
-
-
-## Usage
-
-### react three fiber
-
-Full example in `examples/react-three-fiber`
-
-```ts
-function MyModel() {
-  const { gl } = useThree()
-  const url = 'https://cloud.needle.tools/-/assets/Z23hmXBZN45qJ-ZN45qJ-world/file'
-  const { scene } = useGLTF(url, false, false, (loader) => {
-    useNeedleProgressive(url, gl, loader as any)
-  })
-  return <primitive object={scene} />
-}
-```
-
-### threejs (CDN, no bundler)
-
-The full example can be found at `examples/threejs`
-
-```html
-<head>
-    <!-- Add the threejs import map to your HTML head section -->
-    <script type="importmap">
-    {
-        "imports": {
-            "three": "https://cdn.jsdelivr.net/npm/three@latest/build/three.module.js",
-            "three/addons/": "https://cdn.jsdelivr.net/npm/three@latest/examples/jsm/",
-            "three/examples/": "https://cdn.jsdelivr.net/npm/three@latest/examples/",
-            "@needle-tools/gltf-progressive": "https://cdn.jsdelivr.net/npm/@needle-tools/gltf-progressive/gltf-progressive.min.js"
-        }
-    }
-    </script>
-</head>
-```
-
-In your script:
-```ts
-const gltfLoader = new GLTFLoader();
-
-const url = "https://cloud.needle.tools/-/assets/Z23hmXBZN45qJ-ZN45qJ-world/file";
-
-// register the progressive loader plugin
-useNeedleProgressive(url, renderer, gltfLoader)
-
-// just call the load method as usual
-gltfLoader.load(url, gltf => {
-    scene.add(gltf.scene)
-})
-```
-
-
-### \<model-viewer\>
-
-The example can be found in `examples/modelviewer.html`
-
-```html
-<head>
-    <!-- Include threejs import map -->
-    <script type="importmap">
-        {
-            "imports": {
-                "three": "https://unpkg.com/three/build/three.module.js",
-                "three/": "https://unpkg.com/three/"
-            }
-        }
-    </script>
-    <!-- Include gltf-progressive -->
-    <script type="module" src="https://cdn.jsdelivr.net/npm/@needle-tools/gltf-progressive/gltf-progressive.min.js"></script>
-    <!-- Include model-viewer -->
-    <script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.4.0/model-viewer.min.js"></script>
-</head>
-<body>
-
-    <model-viewer src="https://cloud.needle.tools/-/assets/Z23hmXBZN45qJ-ZN45qJ-world/file" camera-controls auto-rotate></model-viewer>
-    
-</body>
-```
-
-### Needle Engine
-
-[Needle Engine](https://needle.tools) natively supports progressive loading of these glTF files! See [docs.needle.tools](https://docs.needle.tools) for more information. 
-
-
-Use [cloud.needle.tools](https://cloud.needle.tools) to generate LODs for your assets now.
-
-
-# Contact ✒️
-<b>[🌵 needle — tools for creators](https://needle.tools)</b> • 
-[Twitter](https://twitter.com/NeedleTools) • 
-[Discord](https://discord.needle.tools) • 
-[Forum](https://forum.needle.tools)
-

package/dist/examples/modelviewer-multiple.html

@@ -1,126 +0,0 @@
-<html>
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>gltf-progressive & model-viewer</title>
-
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap"
-        rel="stylesheet">
-
-    <script type="importmap">
-        {
-            "imports": {
-                "three": "https://unpkg.com/three/build/three.module.js",
-                "three/": "https://unpkg.com/three/"
-            }
-        }
-    </script>
-    <script type="module"
-        src="https://cdn.jsdelivr.net/npm/@needle-tools/gltf-progressive/gltf-progressive.min.js"></script>
-    <script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.4.0/model-viewer.min.js"></script>
-</head>
-
-<div class="layout">
-    <div class="card">
-        <h1>glTF Progressive</h1>
-        <h3><a href="https://www.npmjs.com/package/@needle-tools/gltf-progressive"
-                target="_blank">@needle-tools/gltf-progressive</a></h3>
-        <p>Load high quality assets in model-viewer without having to worry about loading times, bandwidth or
-            performance.</p>
-        <p>Get started now at <a href="https://cloud.needle.tools">cloud.needle.tools</a></p>
-    </div>
-    <model-viewer src="https://api.cloud.needle.tools/v1/public/9162350/2b4509376/" ar auto-rotate shadow-intensity=".5"
-        camera-controls touch-action="pan-y" autoplay></model-viewer>
-
-
-    <model-viewer src="https://engine.needle.tools/demos/gltf-progressive/assets/vase/model.glb" ar
-        shadow-intensity=".5" camera-controls touch-action="pan-y"></model-viewer>
-
-    <model-viewer src="https://api.cloud.needle.tools/v1/public/908aa03/29b3b3743/" ar auto-rotate shadow-intensity=".5"
-        camera-controls touch-action="pan-y" autoplay></model-viewer>
-
-    <model-viewer src="https://engine.needle.tools/demos/gltf-progressive/assets/church/model.glb" ar auto-rotate
-        shadow-intensity="1" camera-controls touch-action="pan-y" auto-rotate autoplay field-of-view="10deg"
-        max-camera-orbit="auto 90deg auto"></model-viewer>
-
-    <model-viewer src="https://engine.needle.tools/demos/gltf-progressive/assets/putti gruppe/model.glb" ar auto-rotate
-        shadow-intensity="1" camera-controls touch-action="pan-y" auto-rotate autoplay
-        max-camera-orbit="auto 90deg auto"></model-viewer>
-
-    <model-viewer src="https://engine.needle.tools/demos/gltf-progressive/assets/jupiter_und_ganymed/model.glb" ar
-        auto-rotate shadow-intensity=".5" camera-controls touch-action="pan-y"></model-viewer>
-
-    <model-viewer src="https://engine.needle.tools/demos/gltf-progressive/assets/cyberpunk/model.glb" ar auto-rotate
-        shadow-intensity=".5" camera-controls touch-action="pan-y" autoplay rotation-per-second="60deg"></model-viewer>
-
-</div>
-
-<script>
-    // Example if a model is loaded after the page has loaded
-    document.addEventListener('DOMContentLoaded', () => {
-        setTimeout(() => {
-            const element = document.createElement('model-viewer');
-            element.src = "https://api.cloud.needle.tools/v1/public/9191068/261b4395b/";
-            element.setAttribute("camera-controls", "");
-            const layout = document.querySelector('.layout');
-            layout.appendChild(element);
-        }, 2000)
-    });
-
-</script>
-
-<style>
-    body {
-        margin: 0;
-        background-color: rgba(245, 245, 245, 1);
-        font-family: "Open Sans", sans-serif;
-        font-optical-sizing: auto;
-    }
-
-    * {
-        box-sizing: border-box;
-    }
-
-    a {
-        text-decoration: none;
-        color: #cb0000;
-    }
-
-    .layout {
-        position: relative;
-        width: 100%;
-        min-height: 100%;
-
-        display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(460px, 2fr));
-        gap: 1rem;
-        padding: 1rem;
-    }
-
-    .layout>* {
-        width: 100%;
-        height: auto;
-        aspect-ratio: 1;
-        flex: 1;
-        background: white;
-        border-radius: .3rem;
-        box-shadow: 0 0 1rem rgba(0, 0, 0, .1);
-        outline: 1px solid white;
-    }
-
-    .card {
-        padding: 1rem;
-        max-width: calc(100vw - 2rem);
-    }
-
-    @media screen and (max-width: 800px) {
-        .layout {
-            grid-template-columns: 1fr;
-        }
-    }
-</style>
-
-</html>