<!DOCTYPE html>

<html class="light" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Chinese Education Suite - Text Study</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&amp;family=JetBrains+Mono:wght@400&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script id="tailwind-config">
        tailwind.config = {
            darkMode: "class",
            theme: {
                extend: {
                    "colors": {
                        "surface-container-highest": "#e4e2e2",
                        "error-container": "#ffdad6",
                        "primary-fixed": "#d4e3ff",
                        "primary": "#005dac",
                        "secondary-fixed-dim": "#ffb786",
                        "primary-fixed-dim": "#a5c8ff",
                        "secondary": "#964900",
                        "primary-container": "#1976d2",
                        "surface-container-low": "#f5f3f3",
                        "on-tertiary-fixed": "#002204",
                        "on-surface-variant": "#414752",
                        "on-surface": "#1b1c1c",
                        "tertiary": "#0d6c1e",
                        "on-primary-fixed-variant": "#004786",
                        "inverse-surface": "#303031",
                        "secondary-container": "#fc820c",
                        "on-secondary-fixed-variant": "#723600",
                        "surface": "#fbf9f8",
                        "error": "#ba1a1a",
                        "background": "#fbf9f8",
                        "on-primary-fixed": "#001c3a",
                        "on-secondary-fixed": "#311300",
                        "on-primary-container": "#fffdff",
                        "outline-variant": "#c1c6d4",
                        "on-tertiary": "#ffffff",
                        "tertiary-fixed": "#9df898",
                        "on-error-container": "#93000a",
                        "surface-variant": "#e4e2e2",
                        "tertiary-container": "#2f8635",
                        "surface-container-lowest": "#ffffff",
                        "on-tertiary-fixed-variant": "#005312",
                        "surface-tint": "#005faf",
                        "on-background": "#1b1c1c",
                        "surface-bright": "#fbf9f8",
                        "outline": "#717783",
                        "on-tertiary-container": "#fdfff7",
                        "inverse-primary": "#a5c8ff",
                        "on-secondary-container": "#5e2c00",
                        "on-secondary": "#ffffff",
                        "surface-dim": "#dbdad9",
                        "surface-container": "#efeded",
                        "secondary-fixed": "#ffdcc6",
                        "on-primary": "#ffffff",
                        "on-error": "#ffffff",
                        "tertiary-fixed-dim": "#82db7e",
                        "surface-container-high": "#e9e8e7",
                        "inverse-on-surface": "#f2f0f0"
                    },
                    "borderRadius": {
                        "DEFAULT": "0.125rem",
                        "lg": "0.25rem",
                        "xl": "0.5rem",
                        "full": "0.75rem"
                    },
                    "spacing": {
                        "xl": "32px",
                        "sidebar_width": "80px",
                        "sidebar_width_hover": "280px",
                        "grid_columns": "12",
                        "gutter": "24px",
                        "2xl": "48px",
                        "xs": "8px",
                        "md": "16px",
                        "lg": "24px",
                        "sm": "12px",
                        "base": "4px"
                    },
                    "fontFamily": {
                        "title-lg": ["Inter"],
                        "display-lg": ["Inter"],
                        "code-md": ["JetBrains Mono"],
                        "body-lg": ["Inter"],
                        "headline-lg-mobile": ["Inter"],
                        "headline-md": ["Inter"],
                        "label-md": ["Inter"],
                        "headline-lg": ["Inter"],
                        "title-md": ["Inter"],
                        "body-md": ["Inter"]
                    },
                    "fontSize": {
                        "title-lg": ["20px", { "lineHeight": "28px", "fontWeight": "600" }],
                        "display-lg": ["48px", { "lineHeight": "56px", "letterSpacing": "-0.02em", "fontWeight": "700" }],
                        "code-md": ["14px", { "lineHeight": "20px", "fontWeight": "400" }],
                        "body-lg": ["16px", { "lineHeight": "26px", "fontWeight": "400" }],
                        "headline-lg-mobile": ["24px", { "lineHeight": "32px", "fontWeight": "600" }],
                        "headline-md": ["24px", { "lineHeight": "32px", "fontWeight": "600" }],
                        "label-md": ["12px", { "lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500" }],
                        "headline-lg": ["32px", { "lineHeight": "40px", "letterSpacing": "-0.01em", "fontWeight": "600" }],
                        "title-md": ["16px", { "lineHeight": "24px", "fontWeight": "600" }],
                        "body-md": ["14px", { "lineHeight": "22px", "fontWeight": "400" }]
                    }
                }
            }
        }
    </script>
<style>
        .text-reading-chinese {
            font-family: "KaiTi", "STKaiti", serif;
            line-height: 2.2;
            letter-spacing: 0.05em;
        }
        .annotation-highlight-yellow {
            background-color: rgba(252, 130, 12, 0.2);
            border-bottom: 2px dashed #fc820c;
            transition: all 0.2s ease;
        }
        .annotation-highlight-yellow.active {
            background-color: rgba(252, 130, 12, 0.4);
            box-shadow: 0 0 0 2px rgba(252, 130, 12, 0.5);
        }
        .annotation-highlight-green {
            background-color: rgba(47, 134, 53, 0.15);
            border-bottom: 2px dashed #2f8635;
            transition: all 0.2s ease;
        }
        .annotation-highlight-green.active {
            background-color: rgba(47, 134, 53, 0.3);
            box-shadow: 0 0 0 2px rgba(47, 134, 53, 0.5);
        }
        .floating-toolbar {
            box-shadow: 0px 4px 12px rgba(0,0,0,0.08);
            backdrop-filter: blur(8px);
        }
        .node-canvas-bg {
            background-image: radial-gradient(var(--tw-colors-outline-variant) 1px, transparent 1px);
            background-size: 24px 24px;
            background-position: -12px -12px;
        }
        
        .sidebar-collapsed {
            width: 80px;
            transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .sidebar-collapsed:hover {
            width: 280px;
        }
        .sidebar-collapsed .sidebar-text {
            opacity: 0;
            transform: translateX(-10px);
            transition: opacity 0.2s ease, transform 0.2s ease;
            white-space: nowrap;
        }
        .sidebar-collapsed:hover .sidebar-text {
            opacity: 1;
            transform: translateX(0);
            transition-delay: 0.1s;
        }
        .sidebar-collapsed .sidebar-header-compact {
            display: flex;
            transition: opacity 0.2s ease;
        }
        .sidebar-collapsed:hover .sidebar-header-compact {
            display: none;
            opacity: 0;
        }
        .sidebar-collapsed .sidebar-header-full {
            display: none;
            opacity: 0;
            transition: opacity 0.2s ease;
        }
        .sidebar-collapsed:hover .sidebar-header-full {
            display: flex;
            opacity: 1;
            transition-delay: 0.1s;
        }

        .connection-line {
            stroke-dasharray: 6 6;
            animation: dash 20s linear infinite;
        }
        @keyframes dash {
            to {
                stroke-dashoffset: -100;
            }
        }
    </style>
</head>
<body class="bg-background text-on-background antialiased font-body-md overflow-hidden flex">
<!-- SideNavBar (Shared Component) - Collapsed by Default -->
<nav class="bg-surface-container-low border-r border-outline-variant fixed left-0 top-0 h-full sidebar-collapsed flex flex-col z-40 overflow-hidden shadow-[4px_0_12px_rgba(0,0,0,0.05)]">
<!-- Header Profile/Brand Area -->
<div class="p-lg border-b border-outline-variant min-h-[140px] flex flex-col justify-center">
<!-- Compact Header (Icon only) -->
<div class="sidebar-header-compact justify-center items-center h-full">
<img class="w-10 h-10 rounded-full object-cover" data-alt="A small, professional portrait avatar of an elementary school teacher, wearing a neat blouse, softly lit with a friendly expression. The background is a clean, bright, out-of-focus classroom setting. Light, optimistic, modern educational aesthetic." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCPm6ajyPls5KuN3NyxyIsYDJjwr4nGreE-xX_wJmhJXxEoloRJliDYKXVHc7pGX7V0JzgMspJ1gypOgUa9gsueX9F6-v1Nyq-yoOajjl5IkVUK-EcPVN1I_QOnZDkoyS-bKMM6bqTmwvjNT-Qeg3ZCLwAbQIVkGSlqmQcXG5XlZ3oHBtVYgcYOZpbEMegS75pxILeSysUPGRhfOxl3LerA0SoAsTgOTo6nIq7AcBzAmmGN_Qjst-6n5EeWdIni83vKOeYjHpOPyuc"/>
</div>
<!-- Full Header -->
<div class="sidebar-header-full flex-col gap-sm">
<div class="flex items-center gap-sm">
<img class="w-10 h-10 rounded-full object-cover shrink-0" data-alt="A small, professional portrait avatar of an elementary school teacher, wearing a neat blouse, softly lit with a friendly expression. The background is a clean, bright, out-of-focus classroom setting. Light, optimistic, modern educational aesthetic." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCPm6ajyPls5KuN3NyxyIsYDJjwr4nGreE-xX_wJmhJXxEoloRJliDYKXVHc7pGX7V0JzgMspJ1gypOgUa9gsueX9F6-v1Nyq-yoOajjl5IkVUK-EcPVN1I_QOnZDkoyS-bKMM6bqTmwvjNT-Qeg3ZCLwAbQIVkGSlqmQcXG5XlZ3oHBtVYgcYOZpbEMegS75pxILeSysUPGRhfOxl3LerA0SoAsTgOTo6nIq7AcBzAmmGN_Qjst-6n5EeWdIni83vKOeYjHpOPyuc"/>
<div class="sidebar-text">
<h2 class="font-headline-md text-headline-md font-bold text-primary">Lesson Planner</h2>
<p class="font-body-md text-body-md text-on-surface-variant">Primary Chinese</p>
</div>
</div>
<button class="mt-md bg-primary-container text-on-primary-container font-label-md text-label-md py-sm px-md rounded-lg flex items-center justify-center gap-xs hover:opacity-90 transition-opacity sidebar-text w-full">
<span class="material-symbols-outlined text-[18px]">add</span>
                New Lesson Plan
            </button>
</div>
</div>
<!-- Navigation Links -->
<div class="flex-1 overflow-y-auto py-md">
<ul class="flex flex-col gap-base px-sm">
<!-- Text Study (ACTIVE) -->
<li>
<a class="flex items-center gap-sm px-md py-sm rounded-lg text-primary font-bold border-l-4 border-primary bg-primary-container/10 transition-transform duration-150" href="#">
<span class="material-symbols-outlined shrink-0" style="font-variation-settings: 'FILL' 1;">book</span>
<span class="font-title-md text-title-md sidebar-text">Text Study</span>
</a>
</li>
<!-- Objectives (INACTIVE) -->
<li>
<a class="flex items-center gap-sm px-md py-sm rounded-lg text-on-surface-variant hover:bg-surface-container-highest transition-colors" href="#">
<span class="material-symbols-outlined shrink-0">target</span>
<span class="font-title-md text-title-md sidebar-text">Objectives</span>
</a>
</li>
<!-- Teaching Process (INACTIVE) -->
<li>
<a class="flex items-center gap-sm px-md py-sm rounded-lg text-on-surface-variant hover:bg-surface-container-highest transition-colors" href="#">
<span class="material-symbols-outlined shrink-0">school</span>
<span class="font-title-md text-title-md sidebar-text">Teaching Process</span>
</a>
</li>
<!-- Blackboard Design (INACTIVE) -->
<li>
<a class="flex items-center gap-sm px-md py-sm rounded-lg text-on-surface-variant hover:bg-surface-container-highest transition-colors" href="#">
<span class="material-symbols-outlined shrink-0">draw</span>
<span class="font-title-md text-title-md sidebar-text">Blackboard Design</span>
</a>
</li>
<!-- Resources (INACTIVE) -->
<li>
<a class="flex items-center gap-sm px-md py-sm rounded-lg text-on-surface-variant hover:bg-surface-container-highest transition-colors" href="#">
<span class="material-symbols-outlined shrink-0">folder_open</span>
<span class="font-title-md text-title-md sidebar-text">Resources</span>
</a>
</li>
<!-- Homework (INACTIVE) -->
<li>
<a class="flex items-center gap-sm px-md py-sm rounded-lg text-on-surface-variant hover:bg-surface-container-highest transition-colors" href="#">
<span class="material-symbols-outlined shrink-0">assignment</span>
<span class="font-title-md text-title-md sidebar-text">Homework</span>
</a>
</li>
<!-- Preview (INACTIVE) -->
<li>
<a class="flex items-center gap-sm px-md py-sm rounded-lg text-on-surface-variant hover:bg-surface-container-highest transition-colors" href="#">
<span class="material-symbols-outlined shrink-0">visibility</span>
<span class="font-title-md text-title-md sidebar-text">Preview</span>
</a>
</li>
</ul>
</div>
</nav>
<!-- Main Content Wrapper -->
<div class="ml-[80px] flex-1 flex flex-col h-screen overflow-hidden bg-background">
<!-- TopNavBar (Shared Component) -->
<header class="bg-surface border-b border-outline-variant flex justify-between items-center h-16 px-lg shrink-0 z-10 relative">
<!-- Left: Brand/Context -->
<div class="flex items-center gap-md">
<h1 class="font-title-lg text-title-lg font-black text-primary">Chinese Education Suite</h1>
<div class="h-6 w-px bg-outline-variant mx-sm"></div>
<div class="flex items-center gap-xs">
<span class="font-title-md text-title-md text-on-surface">《秋天》 (Autumn)</span>
<span class="bg-surface-container-high text-on-surface-variant font-label-md text-label-md px-2 py-1 rounded">Grade 1</span>
</div>
</div>
<!-- Center: Nav Links -->
<nav class="hidden lg:flex gap-lg h-full absolute left-1/2 -translate-x-1/2">
<a class="flex items-center h-full font-body-md text-body-md text-on-surface-variant hover:text-primary border-b-2 border-transparent transition-colors" href="#">Curriculum</a>
<a class="flex items-center h-full font-body-md text-body-md text-on-surface-variant hover:text-primary border-b-2 border-transparent transition-colors" href="#">Standards</a>
<a class="flex items-center h-full font-body-md text-body-md text-on-surface-variant hover:text-primary border-b-2 border-transparent transition-colors" href="#">Analytics</a>
</nav>
<!-- Right: Actions -->
<div class="flex items-center gap-md ml-auto">
<div class="relative">
<span class="material-symbols-outlined absolute left-sm top-1/2 -translate-y-1/2 text-outline text-[20px]">search</span>
<input class="pl-xl pr-sm py-1.5 bg-surface-container-low border border-outline-variant rounded-full font-body-md text-body-md focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/10 transition-all w-48" placeholder="Search..." type="text"/>
</div>
<button class="bg-secondary-container text-on-secondary-container font-label-md text-label-md py-1.5 px-md rounded-full border border-secondary-container hover:bg-transparent transition-colors flex items-center gap-xs">
<span class="material-symbols-outlined text-[16px]">smart_toy</span>
                    AI Assistant
                </button>
<button class="text-primary font-label-md text-label-md hover:opacity-80 transition-opacity">Export Plan</button>
<div class="flex items-center gap-xs text-on-surface-variant">
<button class="p-xs rounded-full hover:bg-surface-container-highest transition-colors"><span class="material-symbols-outlined text-[20px]">notifications</span></button>
<button class="p-xs rounded-full hover:bg-surface-container-highest transition-colors"><span class="material-symbols-outlined text-[20px]">settings</span></button>
</div>
<img class="w-8 h-8 rounded-full border border-outline-variant" data-alt="A small circular avatar of a user, standard blank profile icon style, subtle grey tones on a white background." src="https://lh3.googleusercontent.com/aida-public/AB6AXuAoTWwwvka05iqtq0cMgF0dpJUpK_48qzYYStPnxDXFahYje8tyCmqaSyBF3jwLqLg6BmaRQJYOnQ40GhsX4wZWX5tHGYz7gRT_E_rPjuD9kzSG5A9wXmc1bbSwiuQ1GAGmL-C7lP5P3fuO5jGFNyQdLwxROqRD5LOpj0zGvcVpEKC7w8XAywqptBTED0cyde1nOpxiCtuap-NzXBMuj-smrxOzXEaGlY4Z98u_OqHKFk6xgSRW4BoqmDk5-tlmDuv-6qyz_4S-Vqc"/>
</div>
</header>
<!-- Workspace Layout - Integrated Canvas -->
<main class="flex-1 flex overflow-hidden relative bg-surface-container-low node-canvas-bg cursor-grab active:cursor-grabbing">
<!-- Dynamic Connecting Lines (SVG Layer) -->
<svg class="absolute inset-0 pointer-events-none w-full h-full" style="z-index: 10;">
<path class="connection-line" d="M 580 320 C 650 320, 700 250, 750 250" fill="none" opacity="1" stroke="#fc820c" stroke-dasharray="6 6" stroke-width="2"></path>
<path class="connection-line" d="M 520 450 C 600 450, 700 390, 750 390" fill="none" opacity="0.2" stroke="#2f8635" stroke-dasharray="6 6" stroke-width="2"></path>
</svg>
<!-- Integrated Document Container -->
<div class="absolute left-12 top-12 bottom-12 w-[600px] bg-surface-container-lowest border border-outline-variant rounded-xl shadow-md overflow-y-auto z-20 cursor-text">
<!-- Floating Toolbar (Attached to document) -->
<div class="sticky top-6 left-1/2 -translate-x-1/2 w-max floating-toolbar bg-surface/95 border border-outline-variant rounded-full px-md py-sm flex items-center gap-sm z-30 mb-8 mt-6 mx-auto">
<button class="p-xs text-primary rounded hover:bg-primary/10 transition-colors tooltip-trigger" title="Highlight">
<span class="material-symbols-outlined text-[20px]">format_ink_highlighter</span>
</button>
<button class="p-xs text-on-surface-variant rounded hover:bg-surface-container-highest transition-colors tooltip-trigger" title="Underline">
<span class="material-symbols-outlined text-[20px]">format_underlined</span>
</button>
<button class="p-xs text-on-surface-variant rounded hover:bg-surface-container-highest transition-colors tooltip-trigger" title="Add Note">
<span class="material-symbols-outlined text-[20px]">add_comment</span>
</button>
<div class="w-px h-5 bg-outline-variant mx-xs"></div>
<button class="w-5 h-5 rounded-full bg-secondary-container border border-outline-variant hover:scale-110 transition-transform ring-2 ring-offset-1 ring-secondary-container"></button>
<button class="w-5 h-5 rounded-full bg-tertiary-container border border-outline-variant hover:scale-110 transition-transform"></button>
<button class="w-5 h-5 rounded-full bg-primary border border-outline-variant hover:scale-110 transition-transform"></button>
</div>
<!-- Text Document -->
<div class="px-2xl pb-2xl">
<h2 class="text-center font-headline-lg text-headline-lg mb-xl text-on-surface">《秋天》</h2>
<div class="text-reading-chinese text-[28px] text-on-surface">
<p class="mb-lg indent-8">
                            天气凉了，树叶黄了，一片片叶子从树上落下来。
                            <span class="relative inline-block cursor-pointer group">
<span class="annotation-highlight-yellow active px-1 rounded" id="highlight-1">天空那么蓝，那么高。</span>
<!-- Connection Anchor -->
</span></p><div class="absolute -right-2 top-1/2 w-2 h-2 rounded-full bg-secondary-container opacity-100"></div>
<p></p>
<p class="mb-lg indent-8">
                            一群大雁往南飞，一会儿排成个“人”字，一会儿排成个“一”字。
                            <span class="relative inline-block cursor-pointer group">
<span class="annotation-highlight-green px-1 rounded" id="highlight-2">啊！秋天来了！</span>
<!-- Connection Anchor -->
</span></p><div class="absolute -right-2 top-1/2 w-2 h-2 rounded-full bg-tertiary-container opacity-0 group-hover:opacity-100 transition-opacity"></div>
<p></p>
</div>
<!-- UI Hint for Interaction -->
<div class="mt-2xl pt-lg border-t border-outline-variant/30 flex items-center justify-center gap-sm text-on-surface-variant/70 font-label-md text-sm">
<span class="material-symbols-outlined text-[18px]">lightbulb</span>
<span>Select text and hold <kbd class="bg-surface-container px-1.5 py-0.5 rounded border border-outline-variant font-code-md text-xs">Shift</kbd> to create a new node</span>
</div>
</div>
</div>
<!-- Nodes on Canvas (Positioned to the right) -->
<div class="absolute top-[200px] left-[750px] w-[280px] bg-surface rounded-lg border-2 border-secondary-container shadow-md transition-shadow cursor-pointer group z-20" id="node-1">
<div class="bg-secondary-fixed-dim/30 px-3 py-2 rounded-t-sm border-b border-secondary-container/50 flex justify-between items-center">
<span class="text-on-secondary-fixed-variant font-label-md text-label-md font-bold">Language Feature</span>
<button class="text-on-secondary-fixed-variant hover:text-on-surface transition-colors"><span class="material-symbols-outlined text-[16px]">more_horiz</span></button>
</div>
<div class="p-4 relative">
<!-- Connection Anchor -->
<div class="absolute -left-2 top-[30px] w-4 h-4 rounded-full bg-surface border-2 border-secondary-container"></div>
<p class="font-body-md text-on-surface text-sm italic mb-3">"天空那么蓝，那么高。"</p>
<div class="text-xs text-on-surface-variant border-t border-outline-variant/30 pt-2">
<span class="font-bold text-on-surface">Note:</span> Focus on repetition of "那么".
            </div>
</div>
</div>
<div class="absolute top-[350px] left-[750px] w-[280px] bg-surface rounded-lg border border-tertiary-container/50 shadow-sm transition-all hover:shadow-md hover:border-tertiary-container cursor-pointer group z-20 opacity-80 hover:opacity-100" id="node-2">
<div class="bg-tertiary-fixed-dim/20 px-3 py-2 rounded-t-sm border-b border-outline-variant flex justify-between items-center">
<span class="text-on-tertiary-fixed-variant font-label-md text-label-md">Action Suggestion</span>
<button class="text-outline hover:text-on-surface transition-colors"><span class="material-symbols-outlined text-[16px]">more_horiz</span></button>
</div>
<div class="p-4 relative">
<!-- Connection Anchor -->
<div class="absolute -left-2 top-[30px] w-4 h-4 rounded-full bg-surface border-2 border-outline-variant group-hover:border-tertiary-container transition-colors"></div>
<p class="font-body-md text-on-surface text-sm italic">"啊！秋天来了！"</p>
</div>
</div>
<!-- Floating Detail/Parameter Panel (Right side) -->
<div class="absolute top-md right-md w-[320px] bg-surface/90 backdrop-blur-md rounded-2xl p-lg shadow-[0_8px_32px_rgba(0,0,0,0.08)] border border-outline-variant/50 flex flex-col gap-md z-30">
<div class="flex justify-between items-start">
<span class="bg-secondary-fixed-dim/40 text-on-secondary-fixed-variant font-label-md text-label-md px-2 py-1 rounded-sm border border-secondary-container/20">Language Feature</span>
<button class="text-outline hover:text-on-surface transition-colors"><span class="material-symbols-outlined text-[18px]">close</span></button>
</div>
<div class="bg-surface-container-lowest p-3 rounded-lg border border-outline-variant/50">
<p class="font-body-md text-body-md text-on-surface italic">"天空那么蓝，那么高。"</p>
</div>
<div class="flex flex-col gap-xs">
<label class="font-label-md text-label-md text-on-surface-variant uppercase tracking-wider">Instructional Notes</label>
<p class="font-body-md text-body-md text-on-surface">Focus on the repetition of "那么" (so) to emphasize the vastness of the autumn sky. Guide students to read with a prolonged, airy tone.</p>
</div>
<div class="flex flex-col gap-xs mt-auto pt-sm border-t border-outline-variant/30">
<label class="font-label-md text-label-md text-on-surface-variant uppercase tracking-wider">Tags</label>
<div class="flex gap-xs flex-wrap">
<span class="bg-surface-container border border-outline-variant text-on-surface-variant font-label-md text-[10px] px-2 py-1 rounded-full">朗读指导</span>
<button class="bg-transparent border border-dashed border-outline-variant text-on-surface-variant hover:text-primary hover:border-primary font-label-md text-[10px] px-2 py-1 rounded-full transition-colors flex items-center gap-1">
<span class="material-symbols-outlined text-[12px]">add</span> Add Tag
                    </button>
</div>
</div>
</div>
</main>
</div>
</body></html>