あなたは工業製品ブランドのアートディレクター兼フロントエンド実装者です。単一のHTMLファイル（CSS内包、外部ビルド不要）で、「触感的ブルータリズム（Tactile Brutalism）」のプロダクトLPを作ってください。

【題材】
- 実在ブランドは使わず、道具・素材・製造業のいずれかの架空ブランドを1つ設定する
- 実績値・顧客名・受賞歴は捏造しない。仕様と製法だけで語る

【視覚方向（必ず守る）】
- 影を一切使わない（box-shadow / text-shadow / drop-shadow を禁止）
- 角丸を使わない（border-radius: 0 のみ）
- グラデーションを使わない
- 構造は 1px の単色ボーダーだけで区切る。罫線を主要な表現手段にする
- 配色は3色以内：生成りまたはチャコールの地色 + 黒インク + 高彩度アクセント1色（ライム / シアン / マゼンタから1つ）。アクセントは hover と1箇所の強調のみに使う
- 質感は SVG の feTurbulence によるノイズを background に薄く重ねて紙の粒子を出す（画像ファイルは使わない）
- 書体は等幅（ラベル・数値・ナビ）と日本語ゴシック（本文・見出し）の2種のみ。ラベルは全て大文字＋letter-spacing 0.14em以上

【レイアウト】
- ヘッダーは台帳のように、セル同士をボーダーで割った grid にする
- ヒーローは写真を使わず、巨大見出し（clamp で 44px〜132px、line-height 0.92）と仕様テーブルの2カラム
- 製品グリッドは同じ幅のカードを並べない。span 5 / span 3 / span 4 のように意図的に不均等にする
- 図版は fill:none / stroke-width:1.25 の直線的なSVG線画で描く。写真とアイコンフォントは使わない

【技術要件】
- セマンティックHTML、キーボード操作可、focus-visible を視認できる形で実装
- 900px以下では罫線の向きを組み替えて縦積みにし、横スクロールを発生させない
- prefers-reduced-motion で transition を無効化
- コメントは「なぜその判断をしたか」だけを日本語で数行

【禁止】
紫グラデーション、ピル型ボタン、浮くカード、絵文字アイコン、ガラス効果、Inter/Roboto の惰性使用。

あなたはエディトリアル出身のWebデザイナーです。単一HTMLで、「タイポグラフィそのものが構造になる」建築設計事務所のサイトを作ってください。写真は1枚も使いません。

【視覚方向】
- 見出しは可変フォント（Google Fonts の Anybody、Instrument Sans など wght と wdth 両軸を持つもの）を使い、font-variation-settings で制御する
- ヒーローの見出しは font-size: clamp(56px, 15.4vw, 260px)、line-height 0.82、letter-spacing -0.035em。文字が画面の左端から右端まで届くこと
- 3行構成にし、行ごとに太さと幅を変える（例：1行目 wght700/wdth112、2行目 wght280/wdth78 で右揃え、3行目 wght900/wdth140）
- 本文は明朝（Shippori Mincho など）。見出しの可変サンセリフと明確に対比させる
- 配色は無彩色2色＋インク1色まで。色で目立たせず、文字の太さと幅だけで階層を作る
- 導入段落の1文字目はドロップキャップにし、可変フォントの最も太い設定を当てる

【動き】
- scroll 位置を font-variation-settings に写像する。scrollY / (innerHeight*0.9) を 0→1 に正規化し、行ごとに逆方向へ wght ±240、wdth ∓34 動かす
- requestAnimationFrame でスロットリングし、addEventListener は passive:true
- 作品リストの見出しは hover / focus-within で wght 560→880、wdth 100→138 に 0.35s で変化させる
- prefers-reduced-motion では変化を止め、固定値で読みやすい太さにする

【構成】
1. sticky ヘッダー（等幅の小さなラベル、backdrop-filter で薄く）
2. ヒーロー：3行の巨大タイポ＋事務所メタ情報4項目
3. 本文：33em幅の読み物パラグラフ2つ。仕事の考え方を具体的な行動で書く（抽象的な理念を書かない）
4. 作品リスト：番号 / 巨大タイトル / 所在地・規模・種別 の3カラム grid。カードにしない、罫線1本で区切る

【技術要件】
- overflow-x を絶対に発生させない（760px以下で右揃えを解除、3カラムを縦積み）
- font-variation-settings の変更対象に will-change を指定
- リンクは keyboard focus で outline を必ず表示
- 架空の事務所名・作品名でよい。受賞歴や取引実績を捏造しない

単一HTMLで、香りブランド（または瞑想プロダクト）のLPを作ってください。テーマは「グラデーションを背景ではなく光源として扱う」です。

【視覚方向】
- 背景は暗いニュートラル（#0b0f14 前後）。その上に position:fixed の光を3つ置く
- 各光は border-radius:50%、filter:blur(90px)、mix-blend-mode:screen、opacity 0.4〜0.55、サイズ 54〜70vmax
- 3色は「時間帯」として選ぶ（例：夜明けの橙 #ff9d6e、冷えた海の青 #4fb0c6、夜の紫 #6a5acd）。ブランド色として均等に使わず、光の温度差として配置する
- 光は 34〜52秒の異なる周期で translate + scale をゆっくり往復させる（animation-delay を負の値でずらし、同期させない）
- のっぺりした階調を避けるため、SVG feTurbulence の粒子を opacity 0.22 で全面に固定で重ねる
- タイポは光と競わせない。見出しはセリフ（Cormorant など）の Light、本文は日本語ゴシックの Light、line-height 1.9

【UI】
- ボタンは border 1px の半透明＋backdrop-filter:blur(8px) のみ。塗りは主CTA 1つだけ
- カードは #0b0f1499 + backdrop-filter で「光の中の面」に見せる。1px の隙間を grid gap で作り、線を描かない
- 中央寄せの1カラム。max-width 22〜26em に抑え、余白で静けさを作る

【禁止】
- 白地に紫グラデーションの定番配色
- ページ全体を覆うガラス効果の多用（面は最大2箇所）
- グラデーションを文字色に使う（背景の光だけで表現する）

【技術要件】
- prefers-reduced-motion で animation を完全停止（静止状態でも構図が成立すること）
- 光のレイヤーは pointer-events:none、aria-hidden="true"
- 720px以下でカードを縦積み、光のサイズは vmax 基準なので追加調整不要か確認する
- 本文は具体的な体験の説明にする（「上質な時間」のような空語を書かない）

単一HTMLで、工芸（陶器・染織・木工のいずれか）の工房サイトを作ってください。テーマは「自然を蒸留した色（Nature Distilled）」。写真は使わず、色と余白と工程で信頼を作ります。

【配色】
- 地色は粘土・砂・生成りのミュートトーン（#e5ded2 / #d8cfbe 前後）。彩度を上げない
- インクは黒でなく焦茶（#2f2a22）。補助色は灰（#8c8a83）と土（#6b5b45）
- アクセントは窯変の一色だけ（例：#a8542f）。リンクの hover と釉薬見本のみに使う
- 上部に radial-gradient で薄い光を1つ落とし、feTurbulence のグレー粒子を opacity 0.13 で重ねる

【タイポと余白】
- 見出しは日本語明朝（Shippori Mincho B1 など）の Regular、letter-spacing 0.04em、line-height 1.5
- 本文は日本語ゴシックの Light、line-height 2.0、font-feature-settings:"palt" 1
- セクション間は clamp(34px, 6vh, 62px) 以上空け、区切りは 1px の極薄ボーダー（透明度 0.15 前後）のみ

【要素】
1. ヒーロー：明朝の2行見出し ＋ 素材の由来を語る本文 ＋ 器の断面を描いた線画SVG（fill:none, stroke-width:1, opacity 0.7、寸法線は stroke-dasharray）
2. 釉薬の色見本：4種の grid。ただし均等に並べず、1つ目だけ span 2 にして主従をつける。各見本は aspect-ratio と inset shadow で焼き物の質感を出す
3. 工程表：日数（DAY 1 / 4 / 12 / 20 / 24）と作業内容の2カラム。1行ごとに極薄ボーダー。所要時間と失敗する条件を具体的に書く

【禁止】
- 写真のプレースホルダ、絵文字、ピル型ボタン、影の強いカード
- 「ぬくもり」「こだわり」のような抽象語だけの説明（材料の産地、温度、日数など事実で書く）

【技術要件】
- 820px以下で2カラムを縦積み、色見本は2列に
- リンクは border-bottom で示し、hover / focus-visible で色と線を変える
- 実在の工房名は使わず架空にする。売上や受賞は書かない

あなたは開発者向けツールのプロダクトデザイナーです。単一HTMLで、オブザーバビリティSaaSのダッシュボードを「Raw Aesthetics（構造を隠さない）」で作ってください。

【原則】
- ロジックを隠さず露出させる。丸めた表現より生の値・生のログ・クエリ文字列を見せる
- 全文字を等幅フォント（JetBrains Mono など）にする。日本語も等幅系で統一
- 背景に 56px 角のグリッド線を linear-gradient で常時表示し、レイアウトの骨組みを見せる

【配色】
- 地 #0c0d0c / パネル #121412 / 罫線 #22261f・#2f3529
- 文字 #d6dccd、弱 #7c8577
- 状態色は3つだけ：acid green #a8e05f（正常・強調）、amber #e0b45f（警告）、red #e0685f（異常）
- 色を装飾に使わない。状態を示すときだけ使う

【画面構成】
1. 左サイドバー 216px：ナビはURLパス表記そのまま（/traces, /logs, /metrics, /alerts）。件数を右端に並べる。現在地は左端 inset box-shadow 2px の acid ライン
2. 上部バー：パンくず、クエリ入力（placeholder は実際のクエリ構文 例 `service:checkout-api status>=500 dur>800ms`）、LIVE インジケータ（6px の四角が steps(2,end) で点滅）
3. 統計4枚：数値は font-size 26px、tabular-nums。数値の下に div を並べただけの生スパークライン（flex + 高さ%）を置く。前期比は増減で色を変える
4. 表：slowest endpoints。route / status / p95 / rps / share。status は border 1px のタグ、share は 6px の細いバー
5. ログパネル：tail -f 風。`12:41:08.221 ERROR commit_order tx=9f21ac retries=3 err="pool timeout"` のように整形しすぎず、white-space:pre-wrap で生のまま出す。level ごとに色分け
6. empty 状態を1つ必ず含める（「この30分で他に閾値を超えた route はありません」）

【禁止】
- 影・角丸の多用（border-radius は 0、影は使わない）
- 円グラフ、3D、装飾アイコン、グラデーション
- 意味のないベントグリッド

【技術要件】
- テーブルは th に scope 相当の意味を持たせ、数値セルは text-align:right + tabular-nums
- ログ領域は tabindex="0" でキーボードスクロール可、aria-label を付ける
- 900px以下でサイドバーを隠し、テーブルの white-space を normal に戻す
- 数値はダミーであることをフッターに明記する（実測値と誤認させない）

単一HTMLで、深夜の実験音楽イベントの告知ページを「リソグラフ／スクリーン印刷の版ズレ」で作ってください。紙に刷ったものを撮ったように見せます。

【印刷の再現】
- インクは2色だけ：蛍光ピンク #ff2f6d と青 #1f4fff。加えて黒 #1b1a17 を「墨版」として使う
- 地色は生成りの紙 #f4efe2。SVG feTurbulence のグレー粒子を opacity 0.2 で全面に重ねて紙の繊維を出す
- 主見出しは同じ文字列を3回重ねる：ピンク版を translate(-4px,-3px)、青版を translate(5px,4px)、墨版を原位置。すべて mix-blend-mode:multiply。重なった部分が濁って見えることが正解
- 日本語見出しは ::before で attr(content) を複製し、-3px ずらしたピンクを z-index:-1 に置く
- 書体は極太のコンデンス系（Archivo Black）＋日本語は Zen Maru Gothic の 900

【レイアウト】
- A3ポスターの版下として組む。max-width 1040px、上下を 2px の黒罫線で締める
- 出演3組は 2px の黒地 gap で区切った3カラム。ブロックごとに見出しの版の色を替える（ピンク／青／墨）
- 各ブロックの隅に border 10〜14px の円・四角・帯を ::after で置き、multiply で紙に刷られた図形にする（opacity 0.22）
- チケット部はミシン目（border-left: 2px dashed）で切り離せる形にし、右側にバーコード風のSVG矩形を並べる

【動き】
- 上部に無限スクロールのティッカー（22秒 linear）を1つだけ。それ以外はアニメーションしない
- ボタンの hover は transform: translate(-3px,-3px) と 5px 5px 0 のベタ影（ぼかしゼロ）。transition は steps(2,end) でカクつかせ、印刷物らしくする

【技術要件】
- 重ねた装飾用の見出しは aria-hidden="true" にし、スクリーンリーダーが3回読まないようにする
- 760px以下で3カラムとチケットを縦積み、ミシン目を border-top に切り替える
- prefers-reduced-motion でティッカーと transition を停止
- 架空のイベント名・出演者名にする。実在アーティストは使わない

単一HTMLで、架空の炭酸飲料ブランドのLPを「ドーパミン配色 × Y2Kリバイバル」で作ってください。派手さを我慢しませんが、主役を必ず1つに絞ります。

【配色】
- 5色を衝突させる：ライム #d6ff3f、シアン #00e5ff、マゼンタ #ff3ea5、オレンジ #ff7a18、パープル #7b2bff
- 地色は 45度の反復ストライプ（22px幅、シアンの2階調）
- インクは黒に近い赤紫 #12060f。白は生成り #fff8e7 にして真っ白を避ける
- ヒーローはライム地に 3px の黒枠 + 8px 8px 0 のベタ影（ぼかしゼロ）

【造形ルール】
- 主役はCSSだけで作った缶（border-radius 26px/40px、conic/linear-gradient で3面、3px黒枠、6px6px0の影）。4.6秒周期で上下に bob させる
- ヒーロー右上に conic-gradient の円を blur 2px / opacity 0.5 で置き、26秒で回転させる。ただし主見出しより手前に出さない
- フレーバーカードは同形状で並べない。1枚ごとに rotate を -1.4deg / 1deg / -0.6deg / 1.6deg と変え、hover で rotate 0 + translateY(-6px) に戻す
- 書体は太いグロテスク（Bricolage Grotesque 800）＋日本語は丸ゴシック（Zen Maru Gothic）
- ボタンは黒地ライム文字のピル。hover は scale(1.06) rotate(-1.5deg) を cubic-bezier(.34,1.6,.64,1) で弾ませる

【規律（これがないと崩れる）】
- 彩度の高い面は最大3つまで同時に見せる。残りは生成りで受ける
- 文字の上に模様を重ねない。装飾は必ず主見出しの背面
- 情報は具体的に書く（果汁%、ガス圧、設計温度など）。「最高の味」のような空語を書かない

【技術要件】
- 上部の無限ティッカーは aria-hidden="true"
- prefers-reduced-motion で ticker / 回転 / bob / transition をすべて停止（静止時も成立する構図にする）
- 860px以下でカード2列、640px以下でヒーローを1カラムにし缶を上に出す
- コントラストは AA を満たす（ライム地の文字は黒、マゼンタ地の文字は生成り）

単一HTMLで、架空のハードウェア製品（ノブ型の入力デバイス）のLPを作ってください。テーマは「ハイパーリアル3D」。ライブラリを使わず、CSSだけで金属とガラスの質感を作ります。

【物体の作り方】
- 親に perspective: 1200px、物体に transform-style: preserve-3d
- 金属面：conic-gradient で明暗を8箇所以上切り替える（#ffffff → #9aa4b2 → #3a4149 → #e8edf3 → #6f7885 → #20242a → #cfd7e0 → #ffffff）。これが削り出しアルミの反射になる
- 中央の凹み：radial-gradient(circle at 32% 26%, ...) ＋ inset 0 2px 10px の白と inset 0 -14px 30px の黒で深さを出す
- ガラス：inset 26% に translateZ(38px)、linear-gradient の半透明、border 1px #ffffff40、backdrop-filter: blur(3px)、inset 0 1px 12px #ffffff66。さらに ::before で楕円のハイライトを blur(2px) で1つ置く
- インジケータ：translateZ(60px) の 12px 円に box-shadow 0 0 14px 4px のアンバー発光
- 接地影は 0 40px 80px #000000aa。物体の下に落ちる影だけは濃く許可する

【動き】
- pointermove で rotateX / rotateY を追従させる（rotateX = 14 - y*12、rotateY = -18 + x*20、単位deg）。passive:true
- 7秒周期で translate 0 -16px の float を重ねる
- ボタンの hover は translateY(-2px) を cubic-bezier(.34,1.45,.64,1) で

【ページ構成】
- ダークな地（radial-gradient で上部を明るく）、2カラムのヒーロー（左に見出しと価格CTA、右に物体）
- 見出しは background-clip:text で白→灰のグラデーションを当てる（ただし本文には使わない）
- 仕様は3枚。1枚目だけ span を広くし、中に同じ質感で作った小さなノブを置く
- 数値は手触りの話にする（クリック数、質量、接続方式）。性能を誇張しない

【禁止】
- Three.js / model-viewer / 3Dモデルファイル
- 全面ガラスモーフィズム（ガラスは物体と最大3面まで）
- 紫グラデーション

【技術要件】
- prefers-reduced-motion で pointer追従と float を停止
- 880px以下で1カラム、物体は width min(340px, 72vw)
- 物体の装飾レイヤーは aria-hidden、外枠に aria-label で製品名
- 架空製品であることをフッターに明記

単一HTMLで、架空の現代美術館のサイトを作ってください。テーマは「空間的な奥行き（Spatial Depth）を、装飾ではなく情報階層の説明に使う」です。

【原則】
- z軸の位置に意味を持たせる。奥＝背景情報、手前＝いま読ませたいもの。ただ浮かせるだけのカードは作らない

【ヒーローの層構成】
- .scene に perspective 900px、perspective-origin 50% 40%、min-height 100svh
- 層1（最奥・data-d="0.10"）：等高線を描いた横長SVG（fill:none, stroke #39424f, stroke-width 1）を4本、opacity 0.3
- 層2（data-d="0.24"）：clip-path: polygon で山の稜線を作った暗い面
- 層3（data-d="0.4"）：radial-gradient を filter:blur(20px) した霧
- 最前面（data-d="-0.12"）：見出しと導入文。scroll と逆方向に動かして手前に感じさせる
- scroll ハンドラで data-d を translate3d(0, scrollY*d, 0) に写す。requestAnimationFrame でスロットリング、passive:true

【展示セクション】
- 4つの階層（Level -1 / 1 / 2 / 3）を上下に積んだ構成として説明する
- 各項目の図版は「3枚の面を translateZ(0 / 34px / 68px) でずらした層」にし、親を rotateX(48deg) rotateZ(-32deg)。hover / focus-within で rotateX(34deg) rotateZ(-22deg) に 0.6s で起こす
- 中間の面だけアクセント色（金 #c9a86a）を薄く当て、層の順序が分かるようにする
- 偶数番目は図版を order:-1 にして左右を入れ替える

【配色とタイポ】
- 地 #07080c、面 #0f1319、文字 #e7eaf0、弱 #8e97a6、アクセント 金 #c9a86a のみ
- 見出しは明朝（Shippori Mincho）の Regular、本文は軽量サンセリフ（Outfit 300）、line-height 1.85
- 色数を増やさない。奥行きだけで階層を作る

【技術要件】
- prefers-reduced-motion で transform を一切当てない（!important で無効化し、静止時も構図が成立すること）
- 層はすべて aria-hidden="true"、pointer-events を持たせない
- 820px以下で2カラムを1カラムにし order をリセット、stack の角度を穏やかにする
- 100svh を使い、モバイルのURLバーで高さが破綻しないようにする
- 架空の館名・展示内容にする。実在美術館の情報を書かない

あなたは会計SaaSのプロダクトデザイナーです。単一HTMLで、AIが仕訳を提案する業務画面を「穏やかで、根拠を見せるAI協働UI」として作ってください。派手さより、信頼できることを設計します。

【絶対に守る原則】
1. AIは提案しかしない。帳簿への書き込みは、必ずユーザーがボタンを押したときだけ起きる
2. AIが入れた値は見た目で区別する（1px dashed の枠＋専用色＋小さな丸）。確定済みは実線なしの通常テキスト
3. すべてのAI提案に「根拠」ボタンを付け、押すと過去件数・日付・例外条件を箇条書きで開く
4. 判断が割れているものは確定させない。警告色にして「あなたの判断を待っています」と明示する
5. 参照範囲とデータの扱い（学習に使わない／履歴30日で削除／外部送信なし）を画面上に書く
6. 確定後は必ず取り消し方法を添える

【レイアウト】
- 左：作業領域（表）／ 右：372px の固定サイドパネル。AIは右に留まり、左の内容を勝手に書き換えない
- 表は 日付 / 摘要 / 勘定科目 / 金額 / 状態。金額は tabular-nums で右揃え
- 根拠は表の下に折りたたみ行（hidden 属性の tr）として開く。別モーダルにしない
- 右パネルは「ヘッダー（提案のみ・自動適用なし と明記）／ 会話 ／ 質問入力」の3段 grid

【提案カード】
- 見出し・説明・確信度メーター（4px の細いバー＋%）・操作3つ（実行 / 1件ずつ見る / あとで）
- 「まとめて確定」は何件・どの条件で一致したかを必ず書く
- 実行後はボタンを disabled にし、取り消せる期間を状態テキストに出す

【配色とモーション】
- ダークファースト。地 #111315 / 面 #171a1d・#1d2125 / 罫線 #282d32 / 文字 #e6e9ec / 弱 #98a1aa
- AI専用色は1色だけ（#7fd3c1）。AIの発話・提案・確信度にしか使わない。人間の操作結果には使わない
- 状態色は成功 #8fd07a、注意 #e2b866
- アニメーションは transition 0.15s の色変化まで。スピナー、パルス、タイプライター演出を使わない

【技術要件】
- 操作結果は role="status" のライブリージョンに日本語で通知する
- 折りたたみは button + hidden 属性で実装し、ボタンのラベルを「根拠 ⇄ 閉じる」で切り替える
- 質問フォームは submit で preventDefault し、入力値を必ずサニタイズしてから表示する
- 1000px以下でサイドパネルを下に回し、sticky を解除する
- 架空の法人名・ダミー数値を使い、実在企業の会計データを書かない