apptify 0.2.0 → 0.5.1

package/templates/playground/playground/style.css

@@ -0,0 +1,228 @@
+html, body { background-color: var(--app-page-bg, #f5f5f7); }
+body { margin: 0; }
+button, a, input { -webkit-tap-highlight-color: transparent; }
+button { font: inherit; }
+#app > .apple-provider { min-height: 100dvh; }
+.apple-auto-size__inner { position: relative; }
+.route-page { display: contents; }
+.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--apple-text); text-decoration: none; font-weight: 650; font-size: 20px; }
+.brand-symbol { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--apple-text); color: var(--apple-surface); font-weight: 600; font-size: 24px; line-height: 1; padding-bottom: 4px; font-family: Georgia,serif; }
+.user-trigger { width: 38px; height: 38px; border: 1px solid var(--apple-border); border-radius: 50%; display: grid; place-items: center; background: var(--apple-surface); color: var(--apple-text); transition: background var(--apple-fast); }
+.user-trigger:hover:where(:not([data-apple-touch] *)),.user-trigger[aria-expanded=true] { background: var(--apple-selected); }
+.user-popup.apple-popover { padding: 8px; }
+.user-summary { display: flex; align-items: center; gap: 12px; padding: 14px 10px 20px; }
+.user-summary > div { min-width: 0; }
+.user-summary strong { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; }
+.user-summary strong small { padding: 2px 5px; border-radius: 4px; background: var(--apple-surface-alt); font-size: 9px; font-weight: 400; color: var(--apple-secondary); }
+.user-summary > div > span { display: block; color: var(--apple-secondary); font-size: 11px; margin-top: 4px; overflow-wrap: anywhere; }
+.user-menu-list { border-top: 1px solid var(--apple-border); padding: 6px 0; }
+.user-menu-list > :is(button,a) { display: flex; align-items: center; gap: 11px; width: 100%; padding: 12px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--apple-text); font-size: 13px; text-align: left; text-decoration: none; }
+.user-menu-list > :is(button,a):hover:where(:not([data-apple-touch] *)) { background: var(--apple-hover); }
+.user-menu-list > :is(button,a):active { background: var(--apple-pressed); }
+.user-menu-list span { flex: 1; }
+.user-menu-list svg,.user-menu-list small { color: var(--apple-secondary); }
+.user-menu-list small { margin-left: 5px; font-size: 11px; }
+.user-menu-list em { color: var(--apple-secondary); font-size: 10px; font-style: normal; }
+.auth-hint { font-size: 13px; color: var(--apple-secondary); margin: 0 0 24px; }
+.main-content { min-width: 0; width: 100%; max-width: 1280px; margin-inline: auto; padding: 48px 48px 0; min-height: calc(100dvh - 64px); }
+.page-kicker { color: var(--apple-secondary); font-size: 10px; font-weight: 500; margin-bottom: 20px; }
+.page-heading { margin-bottom: 32px; }
+.page-heading h1 { font-size: 38px; line-height: 1.2; font-weight: 650; margin: 0; }
+.page-heading h1 > span { color: var(--apple-secondary); }
+.page-heading p { font-size: 13px; line-height: 1.7; color: var(--apple-secondary); margin: 14px 0 0; }
+.home-intro { padding: 24px 0 58px; }
+.home-intro h1 { font-size: clamp(38px, 4.3vw, 62px); font-weight: 650; line-height: 1.24; margin: 0; }
+.home-intro h1 > span { color: var(--apple-secondary); }
+.home-intro p { font-size: 14px; color: var(--apple-secondary); line-height: 1.9; margin: 22px 0 26px; }
+.home-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; }
+.primary-link,.text-link { display: inline-flex; align-items: center; justify-content: center; gap: 9px; text-decoration: none; font-size: 13px; font-weight: 500; }
+.primary-link { background: var(--apple-text); color: var(--apple-surface); padding: 12px 20px; min-height: 44px; border-radius: 24px; }
+.primary-link:hover { opacity: .85; }
+.text-link { color: var(--apple-text); min-height: 40px; }
+.text-link:hover { color: var(--apple-accent); }
+.mobile-break { display: none; }
+.section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-top: 26px; border-top: 1px solid var(--apple-border); margin-bottom: 22px; }
+.section-heading h2 { font-size: 19px; font-weight: 600; margin: 0; }
+.section-heading > span { font-size: 11px; color: var(--apple-secondary); }
+.more-components { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 38px 0; }
+.more-components h2 { margin: 0 0 8px; font-size: 19px; font-weight: 600; }
+.more-components span { font-size: 12px; color: var(--apple-secondary); }
+.page-footer { padding: 24px 0; border-top: 1px solid var(--apple-border); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 11px; color: var(--apple-secondary); margin-top: 16px; }
+.specimen-grid { display: grid; grid-template-columns: 1.04fr 1fr 1fr; gap: 18px; }
+.specimen { min-width: 0; padding: 21px 24px 22px; border-radius: 8px; background: var(--apple-surface); box-shadow: 0 2px 10px rgb(0 0 0 / .025); position: relative; display: flex; flex-direction: column; }
+.specimen-caption { display: flex; align-items: center; justify-content: space-between; color: var(--apple-secondary); font-size: 9px; margin-bottom: 22px; }
+.specimen h2 { font-size: 21px; font-weight: 600; line-height: 1.3; margin: 0 0 25px; }
+.button-specimens { display: flex; align-items: center; flex-direction: column; gap: 15px; padding: 9px 0 22px; }
+.button-specimens > .apple-button { min-width: 144px; font-size: 13px; min-height: 40px; }
+.icon-button-row { display: flex; gap: 12px; margin-top: 4px; }
+.icon-button-row .apple-button { width: 38px; height: 38px; min-height: 38px; }
+.specimen-foot { margin-top: auto; padding-top: 15px; display: flex; gap: 10px; justify-content: space-between; align-items: center; color: var(--apple-secondary); font-size: 10px; }
+.specimen-foot code { font-size: 10px; }
+.preference-demo { display: flex; flex-direction: column; gap: 14px; }
+.preference-demo .apple-field__label { display: none; }
+.preference-demo .apple-slider .apple-field__label { display: block; }
+.setting-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid color-mix(in srgb,var(--apple-border) 55%,transparent); padding: 3px 0 13px; }
+.setting-line > div:first-child { min-width: 0; }
+.setting-line strong { display: block; font-size: 12px; font-weight: 500; }
+.setting-line small { display: block; font-size: 10px; color: var(--apple-secondary); margin-top: 4px; }
+.setting-line .apple-field { flex-shrink: 0; }
+.check-row { padding-top: 5px; }
+.check-row .apple-choice__label { font-size: 11px; }
+.form-specimen .apple-form { display: flex; flex-direction: column; gap: 13px; }
+.form-specimen .apple-form .apple-field { margin-bottom: 10px; }
+.form-specimen .apple-form .apple-button { margin-top: 9px; align-self: flex-start; font-size: 12px; min-height: 36px; }
+.specimen .apple-field__label { font-size: 11px; }
+.specimen input { font-size: 12px; }
+.media-specimen .apple-image { flex: 1; min-height: 184px; }
+.feedback-specimen .apple-alert { font-size: 11px; padding: 12px; }
+.progress-demo { margin: 25px 0; }
+.progress-demo > div:first-child { display: flex; justify-content: space-between; font-size: 11px; color: var(--apple-secondary); margin-bottom: 10px; }
+.feedback-actions { margin-top: auto; display: flex; flex-wrap: wrap; gap: 3px; padding-top: 25px; }
+.feedback-actions .apple-button { font-size: 11px; }
+
+.specimen > .apple-search { margin-bottom: 12px; }
+.sidebar { width: 232px; position: fixed; top: 64px; bottom: 0; left: 0; z-index: 40; padding: 30px 14px 24px; border-right: 1px solid color-mix(in srgb,var(--apple-border) 55%,transparent); background: var(--apple-surface); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
+.sidebar-heading { display: flex; flex-direction: column; gap: 7px; padding: 0 14px; margin-bottom: 24px; }
+.sidebar-heading strong { font-size: 13px; font-weight: 600; }
+.sidebar-heading > span { font-size: 10px; color: var(--apple-secondary); }
+.component-index a { text-decoration: none; color: var(--apple-secondary); font-size: 12px; }
+.index-group { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 6px; }
+.index-group span { flex: 1; }
+.index-group small { font-size: 10px; font-variant-numeric: tabular-nums; color: var(--apple-secondary); }
+.index-group.active { color: var(--apple-text); font-weight: 600; }
+.index-items { margin: 3px 0 12px 21px; padding-left: 12px; border-left: 1px solid var(--apple-border); }
+.index-items a { display: block; border-radius: 5px; padding: 7px 10px; }
+.component-index a:hover:where(:not([data-apple-touch] *)) { color: var(--apple-text); background: var(--apple-hover); }
+.index-items a.active { background: var(--apple-selected); color: var(--apple-text); font-weight: 500; }
+.components-page { margin-left: 232px; width: calc(100% - 232px); max-width: none; padding: 42px 48px 0; }
+.components-page > * { max-width: 1000px; margin-inline: auto; }
+.feed-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--apple-border); }
+.feed-count { font-size: 12px; font-weight: 500; }
+.feed-count small { margin-left: 7px; color: var(--apple-secondary); font-size: 10px; font-variant-numeric: tabular-nums; }
+.preview-controls { display: flex; gap: 4px; }
+.mobile-index-toggle { display: none; }
+.feed-group { padding-bottom: 16px; }
+.feed-group-heading { display: flex; align-items: baseline; gap: 12px; padding: 32px 0 20px; }
+.feed-group-heading > span { color: var(--apple-secondary); font-size: 11px; font-variant-numeric: tabular-nums; }
+.feed-group-heading h2 { margin: 0; font-size: 20px; font-weight: 600; }
+.feed-group-heading small { margin-left: auto; font-size: 11px; color: var(--apple-secondary); }
+.component-card { min-width: 0; background: var(--apple-surface); border: 1px solid color-mix(in srgb,var(--apple-border) 40%,transparent); border-radius: 10px; margin-bottom: 20px; }
+.component-card-heading { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 12px; padding: 24px 28px 0; }
+.component-card-heading h3 { font-size: 16px; font-weight: 600; margin: 0; }
+.component-card-heading h3 a { display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; }
+.component-card-heading h3 svg { color: var(--apple-secondary); opacity: 0; }
+.component-card-heading h3 a:hover svg,.component-card-heading h3 a:focus-visible svg { opacity: 1; }
+.component-card-heading p { font-size: 12px; color: var(--apple-secondary); margin: 6px 0 0; }
+.component-card-heading > code { font-size: 10px; color: var(--apple-secondary); padding-top: 3px; overflow-wrap: anywhere; }
+.detail-preview { min-width: 0; padding: 34px 28px; min-height: 186px; display: flex; align-items: center; justify-content: center; width: 100%; }
+.detail-preview .component-demo { width: 100%; max-width: 720px; min-width: 0; margin-inline: auto; }
+.detail-preview .component-demo--compact { max-width: 420px; }
+.detail-preview .component-demo--media { max-width: 560px; }
+.detail-preview.mobile-preview { max-width: 390px; margin-inline: auto; }
+.component-card > .component-source { border-radius: 0 0 9px 9px; }
+.component-source { border-top: 1px solid color-mix(in srgb,var(--apple-border) 45%,transparent); }
+.code-view { padding: 4px 28px 20px; min-width: 0; }
+.code-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--apple-secondary); font-size: 12px; }
+.code-view h4 { font-size: 13px; margin: 22px 0 0; }
+pre { padding: 18px; overflow: auto; background: var(--apple-surface-alt); border-radius: 6px; line-height: 1.8; font-size: 12px; tab-size: 2; }
+.api-line { overflow-wrap: anywhere; font-size: 12px; line-height: 1.9; color: var(--apple-secondary); }
+.component-demo > .apple-stack > .apple-button,
+.component-demo .apple-form__fields > .apple-button,
+.component-demo > .apple-stack > .apple-provider > .apple-stack > .apple-button { align-self: flex-start; }
+.component-demo .apple-form__fields { gap: 20px; }
+.component-demo .apple-form__fields > .apple-button { justify-self: start; }
+.component-demo .apple-grid { align-items: start; }
+.demo-layout-tile { display: flex; flex-direction: column; justify-content: center; gap: 12px; min-height: 112px; padding: 20px; border: 1px solid var(--apple-border); border-radius: 10px; background: var(--apple-surface-alt); }
+.demo-layout-tile > span { color: var(--apple-secondary); font-size: 12px; font-variant-numeric: tabular-nums; }
+.demo-layout-tile > strong { font-size: 16px; font-weight: 550; }
+.component-demo > .apple-stack > .apple-provider { border-radius: 10px; }
+.component-demo[data-component="AppleSpinner"] .apple-spinner { align-self: flex-start; }
+.component-demo[data-component="AppleDivider"] .apple-divider:not(.apple-divider--vertical) { width: 100%; }
+.component-demo[data-component="AppleSkeleton"] .apple-skeleton { width: 100%; }
+.component-demo[data-component="ApplePopover"] p { margin: 0 0 16px; }
+.component-demo > .apple-field { max-width: 420px; }
+.component-demo > .apple-form { max-width: 420px; }
+.component-demo .apple-form .apple-field { margin-bottom: 0; }
+.component-demo > .apple-image { max-width: 560px; }
+.demo-image { max-width: 560px; }
+.demo-product { max-width: 330px; margin-inline: auto; }
+.demo-product .apple-image { margin-top: 10px; }
+.demo-copy { margin: 0; padding: 8px 0; color: var(--apple-secondary); }
+.demo-slide { display: block; width: 100%; aspect-ratio: 16/10; object-fit: cover; }
+
+.demo-floating-preview { padding: 24px; border-radius: 8px; }
+.demo-floating-preview .apple-floating-group { position: relative; inset: auto; flex-direction: row; justify-content: center; padding: 12px 0; z-index: auto; }
+.settings-page { max-width: 980px; }
+.settings-section { background: var(--apple-surface); border: 1px solid color-mix(in srgb,var(--apple-border) 40%,transparent); border-radius: 12px; padding: 28px; margin-bottom: 22px; }
+.settings-section-heading { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 26px; }
+.settings-section-heading > svg { margin-top: 3px; color: var(--apple-secondary); }
+.settings-section h2 { font-size: 19px; font-weight: 600; margin: 0; }
+.settings-section-heading p { font-size: 12px; line-height: 1.7; color: var(--apple-secondary); margin: 6px 0 0; }
+.theme-options { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 12px; }
+.theme-options button { display: flex; flex-direction: column; gap: 12px; min-width: 0; border: 1px solid var(--apple-border); border-radius: 8px; padding: 7px; background: transparent; color: var(--apple-text); }
+.theme-options button.selected { border-color: var(--apple-accent); outline: 1px solid var(--apple-accent); }
+.theme-swatch { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 7px; width: 100%; height: 78px; border-radius: 5px; padding: 16px; }
+.theme-swatch i { display: block; width: 58%; height: 5px; border-radius: 3px; background: currentColor; opacity: .4; }
+.theme-swatch i:first-child { width: 80%; opacity: .85; }
+.theme-swatch i:last-child { width: 35%; }
+.theme-label { display: flex; align-items: center; justify-content: space-between; gap: 4px; width: 100%; min-height: 20px; font-size: 12px; padding: 0 2px 3px; }
+.theme-label svg { color: var(--apple-accent); flex-shrink: 0; }
+.settings-section > .apple-segmented { max-width: 440px; }
+.settings-note { color: var(--apple-secondary); font-size: 12px; line-height: 1.8; min-height: 22px; margin: 14px 0 24px; }
+.motion-preview { background: var(--apple-surface-alt); border-radius: 8px; padding: 14px 20px 22px; }
+.motion-preview-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 12px; color: var(--apple-secondary); margin-bottom: 14px; }
+.motion-preview-content p { margin: 18px 0 0; font-size: 13px; color: var(--apple-secondary); line-height: 1.8; }
+.settings-reset { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--apple-secondary); font-size: 12px; margin: 26px 0 48px; }
+.not-found-page { max-width: 740px; }
+@media (min-width: 1600px) { .main-content.home-page { max-width: 1420px; } .specimen-grid { gap: 24px; } .specimen { padding: 26px 30px; } }
+@media (max-width: 1100px) { .main-content { padding-inline: 28px; } .components-page { padding-inline: 32px; } .sidebar { width: 210px; } .components-page { margin-left: 210px; width: calc(100% - 210px); } .specimen-grid { grid-template-columns: 1fr 1fr; } }
+@media (max-width: 800px) {
+  .sidebar { display: none; }
+  .components-page { margin-left: 0; width: 100%; }
+  .mobile-index-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0; border: 0; background: transparent; color: var(--apple-text); font-size: 12px; }
+  .feed-count { display: none; }
+  .theme-options { gap: 8px; }
+}
+@media (max-width: 640px) {
+  .site-nav.is-collapsed .apple-navibar__bar { grid-template-columns: minmax(0,1fr) 40px 38px; gap: 6px; padding-inline: 18px; }
+  .site-nav .apple-navibar__brand { order: 1; }
+  .site-nav .apple-navibar__toggle { order: 2; width: 40px; }
+  .site-nav .apple-navibar__actions { order: 3; }
+  .site-nav .apple-navibar__menu { order: 4; }
+  .brand { font-size: 19px; }
+  .brand-symbol { width: 26px; height: 26px; }
+  .main-content { padding: 30px 18px 0; min-height: calc(100dvh - 58px); }
+  .home-intro { padding: 16px 0 36px; }
+  .home-intro p { font-size: 13px; margin: 20px 0; }
+  .home-actions { gap: 12px 20px; }
+  .mobile-break { display: block; }
+  .section-heading { align-items: flex-start; flex-direction: column; gap: 7px; padding-top: 22px; }
+  .specimen-grid { grid-template-columns: 1fr; gap: 16px; }
+  .specimen { padding: 24px; }
+  .specimen h2 { font-size: 23px; }
+  .specimen-caption { font-size: 10px; }
+  .button-specimens > .apple-button { min-height: 44px; }
+  .icon-button-row .apple-button { width: 44px; height: 44px; }
+  .setting-line strong { font-size: 14px; }
+  .setting-line small { font-size: 11px; }
+  .check-row .apple-choice__label { font-size: 13px; }
+  .specimen .apple-field__label { font-size: 12px; }
+  .specimen input { font-size: 16px; }
+  .more-components { align-items: flex-start; flex-direction: column; gap: 10px; padding-block: 28px; }
+  .page-heading h1 { font-size: 32px; }
+  .page-heading p { font-size: 12px; }
+  .page-kicker { margin-bottom: 16px; }
+  .feed-group-heading { padding-top: 26px; }
+  .component-card-heading { padding: 20px 18px 0; gap: 8px; }
+  .component-card-heading > code { font-size: 9px; }
+  .detail-preview { padding: 28px 16px; }
+  .code-view { padding-inline: 16px; }
+  pre { padding: 14px; font-size: 11px; }
+  .settings-section { padding: 22px 18px; }
+  .theme-options { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
+  .theme-swatch { height: 68px; padding: 12px; }
+  .theme-label { font-size: 11px; }
+  .settings-section-heading p { font-size: 11px; }
+  .motion-preview { padding-inline: 14px; }
+  .settings-reset { font-size: 11px; }
+}

package/templates/playground/playground/views/[...all].vue

@@ -0,0 +1,68 @@
+<template>
+  <main class="main-content not-found-page paper-404-page">
+    <apple-card class="paper-404-card" shadow="none" zoom="none">
+      <template #title>
+        <div class="paper-404-heading">
+          <p class="paper-404-number" aria-hidden="true">404</p>
+          <h1>页面不存在</h1>
+        </div>
+      </template>
+      <p class="paper-404-copy">有些东西，悄悄溜走了。<br />就像松鼠的橡果，这一页也不知漂去了哪里。</p>
+      <div class="paper-404-actions">
+        <router-link v-slot="{ href, navigate }" :to="homePath" custom>
+          <apple-button :href="href" @click="navigate">返回首页</apple-button>
+        </router-link>
+        <apple-button variant="ghost" @click="goBack"><ArrowLeft :size="16" aria-hidden="true" /> 返回上一页</apple-button>
+      </div>
+    </apple-card>
+    <NotFoundPaperScene class="paper-404-illustration" />
+  </main>
+</template>
+
+<script setup lang="ts">
+import { ArrowLeft } from 'lucide-vue-next'
+import { useRouter } from 'vue-router'
+import NotFoundPaperScene from '../components/not-found-paper-scene.vue'
+
+const router = useRouter()
+const homePath = router.getRoutes().some(page => page.path === '/') ? '/' : '/settings'
+function goBack() {
+  // A direct visit has no in-app predecessor; keep its escape route useful.
+  if (typeof router.options.history.state.back === 'string') router.back()
+  else void router.push(homePath)
+}
+</script>
+
+<style scoped>
+.paper-404-page { max-width: 1360px; display: grid; grid-template-columns: minmax(260px, .78fr) minmax(0, 1.65fr); align-content: center; align-items: center; column-gap: 16px; padding-top: 38px; padding-bottom: calc(38px + 64px); }
+.paper-404-card { background: transparent; border: 0; overflow: visible; }
+.paper-404-card :deep(.apple-card__body) { padding: 0 0 0 8px; }
+.paper-404-card :deep(.apple-card__heading) { margin: 0; }
+.paper-404-heading { width: 100%; }
+.paper-404-kicker { color: var(--apple-secondary); font-size: 10px; letter-spacing: .1em; margin: 0 0 40px; }
+.paper-404-number { display: flex; align-items: center; gap: 18px; color: var(--apple-text); font-family: Georgia, 'Times New Roman', serif; font-size: clamp(78px, 8.2vw, 118px); line-height: .9; letter-spacing: -.075em; margin: 0 0 28px; font-weight: 400; }
+.paper-404-number span { writing-mode: vertical-rl; font-family: -apple-system, BlinkMacSystemFont, sans-serif; font-size: 10px; letter-spacing: .22em; color: var(--apple-secondary); padding-top: 8px; }
+.paper-404-heading h1 { font-size: clamp(26px, 2.7vw, 35px); line-height: 1.35; letter-spacing: -.035em; font-weight: 600; margin: 0 0 17px; }
+.paper-404-copy { font-size: 13px; line-height: 1.95; color: var(--apple-secondary); margin: 0; text-wrap: pretty; }
+.paper-404-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 27px; }
+.paper-404-actions .apple-button--ghost { font-size: 12px; padding-inline: 8px; color: var(--apple-secondary); }
+.paper-404-illustration { min-width: 0; }
+.paper-404-footnote { grid-column: 1 / -1; text-align: center; font-size: 10px; letter-spacing: .09em; color: var(--apple-secondary); margin: 48px 0 0; }
+@media (max-width: 880px) {
+  .paper-404-page { grid-template-columns: minmax(0, 1fr); max-width: 680px; padding-top: 18px; }
+  .paper-404-illustration { grid-row: 1; }
+  .paper-404-card { margin-top: 26px; }
+  .paper-404-card :deep(.apple-card__body) { padding: 0; text-align: center; }
+  .paper-404-kicker { display: none; }
+  .paper-404-number { justify-content: center; font-size: 70px; margin-bottom: 18px; }
+  .paper-404-number span { font-size: 9px; }
+  .paper-404-heading h1 { font-size: 26px; margin-bottom: 12px; }
+  .paper-404-actions { justify-content: center; margin-top: 18px; }
+  .paper-404-footnote { margin-top: 32px; }
+}
+@media (max-width: 420px) {
+  .paper-404-page { padding-inline: 18px; padding-top: 12px; }
+  .paper-404-copy { font-size: 12px; }
+  .paper-404-card { margin-top: 22px; }
+}
+</style>

package/templates/playground/playground/views/components.vue

@@ -0,0 +1,126 @@
+<template>
+  <apple-aside class="sidebar" aria-label="组件目录">
+    <div class="sidebar-heading"><strong>组件目录</strong><span>点击定位，直接预览</span></div>
+    <div class="directory-search"><apple-search v-model="directorySearch" label="搜索组件目录" placeholder="名称、标签或描述" /></div>
+    <ComponentIndex :active-group="activeGroup" :active-id="activeId" :search="directorySearch" />
+  </apple-aside>
+  <main class="main-content components-page">
+    <header class="page-heading"><div><div class="page-kicker">COMPONENTS</div><h1>组件<span>。</span></h1><p>{{ catalog.length }} 个组件，完整呈现。向下浏览，直接体验。</p></div></header>
+    <div class="feed-toolbar">
+      <apple-button class="mobile-index-toggle" variant="ghost" size="small" :icon="PanelLeft" @click="mobileIndex = true">组件目录</apple-button>
+      <span class="feed-count">全部组件 <small>{{ catalog.length }}</small></span>
+      <div class="preview-controls" role="group" aria-label="预览尺寸">
+        <apple-button variant="ghost" size="small" icon-only :icon="Monitor" :class="{ active: previewMode === 'desktop' }" :aria-pressed="previewMode === 'desktop'" label="桌面预览" @click="previewMode = 'desktop'" />
+        <apple-button variant="ghost" size="small" icon-only :icon="Smartphone" :class="{ active: previewMode === 'mobile' }" :aria-pressed="previewMode === 'mobile'" label="手机预览" @click="previewMode = 'mobile'" />
+      </div>
+    </div>
+    <div ref="feed" class="component-feed">
+      <section v-for="(section, index) in sections" :id="section.id" :key="section.id" class="feed-group feed-anchor" :data-group="section.id" :aria-labelledby="`${section.id}-heading`">
+        <header class="feed-group-heading"><span>0{{ index + 1 }}</span><h2 :id="`${section.id}-heading`">{{ section.label }}</h2><small>{{ section.items.length }} 个组件</small></header>
+        <article v-for="item in section.items" :id="componentId(item.name)" :key="item.name" class="component-card feed-anchor" :data-group="section.id" :aria-labelledby="`${componentId(item.name)}-heading`">
+          <header class="component-card-heading"><div><h3 :id="`${componentId(item.name)}-heading`"><router-link :to="`#${componentId(item.name)}`">{{ item.label }}<Hash :size="14" /></router-link></h3><p>{{ item.description }}</p></div><code>{{ componentId(item.name) }}</code></header>
+          <section class="detail-preview" :class="{ 'mobile-preview': previewMode === 'mobile' }" :aria-label="`${item.label}预览`"><ComponentDemo :name="item.name" @navigate="navigateGroup" /></section>
+          <apple-accordion class="component-source" :items="sourceSections">
+            <template #item>
+              <div class="code-view"><div class="code-toolbar"><span>使用示例</span><apple-button variant="ghost" size="small" @click="copy(item.code)">复制代码</apple-button></div><pre><code>{{ item.code }}</code></pre><h4>接口</h4><p class="api-line">{{ item.api }}</p></div>
+            </template>
+          </apple-accordion>
+        </article>
+      </section>
+    </div>
+    <PageFooter />
+  </main>
+  <apple-drawer v-model="mobileIndex" title="组件目录" placement="left" width="290px">
+    <div class="directory-search"><apple-search v-model="directorySearch" label="搜索组件目录" placeholder="名称、标签或描述" /></div>
+    <ComponentIndex :active-group="activeGroup" :active-id="activeId" :search="directorySearch" @navigate="mobileIndex = false" />
+  </apple-drawer>
+</template>
+
+<script setup lang="ts">
+import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { Hash, Monitor, PanelLeft, Smartphone } from 'lucide-vue-next'
+import { useApple } from 'apptify'
+import { catalog, sections, componentId } from '../catalog'
+import ComponentDemo from '../ComponentDemo.vue'
+import ComponentIndex from '../components/ComponentIndex.vue'
+import PageFooter from '../components/PageFooter.vue'
+
+const route = useRoute()
+const router = useRouter()
+const apple = useApple()
+const feed = ref<HTMLElement>()
+const activeGroup = ref(sections[0].id)
+const activeId = ref('')
+const previewMode = ref('desktop')
+const mobileIndex = ref(false)
+const directorySearch = ref('')
+const sourceSections = [{ label: '代码与 API', value: 'source' }]
+let anchors: HTMLElement[] = []
+let frame = 0
+let observer: ResizeObserver | undefined
+
+function updatePosition() {
+  frame = 0
+  let current: HTMLElement | undefined
+  for (const anchor of anchors) {
+    if (anchor.getBoundingClientRect().top > 128) break
+    if (!current || Math.abs(anchor.getBoundingClientRect().top - current.getBoundingClientRect().top) > 1) current = anchor
+    else if (anchor.id === route.hash.slice(1) || (current.id !== route.hash.slice(1) && anchor.id === activeId.value)) current = anchor
+  }
+  activeId.value = current?.id ?? ''
+  activeGroup.value = current?.dataset.group ?? sections[0].id
+}
+function schedulePosition() {
+  if (!frame) frame = requestAnimationFrame(updatePosition)
+}
+function navigateGroup(label: string) {
+  const section = sections.find(section => section.label === label)
+  void router.push(section ? `/components#${section.id}` : '/components')
+}
+async function copy(value: string) {
+  try { await navigator.clipboard.writeText(value); apple.notify('已复制', { tone: 'success' }) }
+  catch { apple.notify('无法访问剪贴板，请手动选择代码复制', { tone: 'warning' }) }
+}
+watch(() => route.hash, () => { mobileIndex.value = false; schedulePosition() })
+watch(activeId, async () => {
+  await nextTick()
+  const sidebar = document.querySelector<HTMLElement>('.sidebar')
+  const current = sidebar?.querySelector<HTMLElement>('[aria-current="location"]')
+  if (!sidebar || !current) return
+  const item = current.getBoundingClientRect(), bounds = sidebar.getBoundingClientRect()
+  if (item.top < bounds.top + 16) sidebar.scrollTop -= bounds.top + 16 - item.top
+  else if (item.bottom > bounds.bottom - 16) sidebar.scrollTop += item.bottom - bounds.bottom + 16
+})
+onMounted(() => {
+  anchors = Array.from(feed.value!.querySelectorAll<HTMLElement>('.feed-anchor'))
+  window.addEventListener('scroll', schedulePosition, { passive: true })
+  window.addEventListener('resize', schedulePosition)
+  observer = new ResizeObserver(schedulePosition)
+  observer.observe(feed.value!)
+  schedulePosition()
+})
+onBeforeUnmount(() => {
+  window.removeEventListener('scroll', schedulePosition)
+  window.removeEventListener('resize', schedulePosition)
+  observer?.disconnect()
+  cancelAnimationFrame(frame)
+})
+</script>
+
+<style scoped>
+.directory-search { min-width: 0; margin: 0 4px 16px; }
+.directory-search :deep(.apple-field__label) { font-size: 11px; }
+.directory-search :deep(input) { min-width: 0; font-size: 12px; }
+.components-page > * { max-width: none; }
+.feed-group { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: 20px; align-items: start; }
+.feed-group-heading { grid-column: 1 / -1; padding-bottom: 0; }
+.component-card { margin-bottom: 0; }
+.component-source :deep(.apple-accordion__item) { border: 0; }
+.component-source :deep(.apple-accordion__item > h3) { font-size: 11px; font-weight: 400; }
+.component-source :deep(.apple-accordion__item > h3 > button) { min-height: 44px; gap: 8px; padding: 13px 28px; color: var(--apple-secondary); }
+.component-source :deep(.apple-accordion__content) { padding: 0; }
+@media (max-width: 800px) {
+  .component-source :deep(.apple-accordion__item > h3 > button) { padding-inline: 18px; }
+}
+</style>

package/templates/playground/playground/views/index.vue

@@ -0,0 +1,75 @@
+<template>
+  <main class="main-content home-page">
+    <section class="home-intro">
+      <div class="page-kicker">APPTIFY / 界面与交互</div>
+      <h1>让界面自然，<br /><span>让细节动人。</span></h1>
+      <p>从一个按钮，到完整体验。<br class="mobile-break" /> 简洁的组件，恰到好处的交互。</p>
+      <div class="home-actions">
+        <router-link v-slot="{ href, navigate }" to="/components" custom>
+          <apple-button :href="href" @click="navigate">浏览全部组件 <ArrowRight :size="17" aria-hidden="true" /></apple-button>
+        </router-link>
+        <router-link v-slot="{ href, navigate }" to="/settings" custom>
+          <apple-link :href="href" class="home-link" @click="navigate">调整外观与动效 <ArrowUpRight :size="16" aria-hidden="true" /></apple-link>
+        </router-link>
+      </div>
+    </section>
+    <section aria-label="精选交互示例">
+      <div class="section-heading"><h2>细节，即刻体验。</h2><span>精选交互示例 · 直接试一试</span></div>
+          <div class="specimen-grid">
+            <section class="specimen"><div class="specimen-caption"><span>01 / 导航</span></div><h2>内容，各归其位。</h2><apple-search v-model="settingQuery" placeholder="搜索设置" label="搜索设置" /><apple-list v-model="setting" :items="filteredSettings" selectable label="设置导航示例" /><p v-if="!filteredSettings.length" class="search-empty" role="status">没有匹配的设置，试试其他关键词。</p></section>
+            <section class="specimen"><div class="specimen-caption"><span>02 / 控制</span></div><h2>点到，即止。</h2><div class="button-specimens"><apple-button :icon="arrowIcon" @click="$apple.notify('操作已完成',{tone:'success'})">继续探索</apple-button><apple-button variant="secondary" @click="$apple.notify('已加入收藏')">加入收藏</apple-button><apple-button variant="outline" @click="$router.push('/components#apple-button')">了解更多</apple-button><div class="icon-button-row"><apple-button variant="secondary" :icon="plusIcon" icon-only label="添加" @click="$apple.notify('已添加')" /><apple-button :variant="liked?'primary':'secondary'" :icon="heartIcon" icon-only :label="liked ? '取消收藏' : '收藏'" :aria-pressed="liked" @click="liked=!liked" /><apple-button variant="secondary" :icon="downloadIcon" icon-only label="浏览组件示例" @click="$router.push('/components')" /></div></div><div class="specimen-foot"><code>apple-button</code><span>5 种样式</span></div></section>
+            <section class="specimen"><div class="specimen-caption"><span>03 / 偏好</span></div><h2>恰好，是你的。</h2><div class="preference-demo"><apple-segmented-control v-model="period" :items="periods" label="统计周期" /><div class="setting-line"><div><strong>消息通知</strong><small>不错过重要的事</small></div><apple-switch v-model="notices" aria-label="消息通知" /></div><div class="setting-line"><div><strong>自动同步</strong><small>在所有设备上保持一致</small></div><apple-switch v-model="sync" aria-label="自动同步" /></div><apple-slider v-model="volume" label="音量" /><div class="check-row"><apple-checkbox v-model="agreed" label="记住我的偏好" /></div></div></section>
+            <section class="specimen form-specimen"><div class="specimen-caption"><span>04 / 输入</span></div><h2>开始一段对话。</h2><apple-form @submit="$apple.notify(`你好，${name || '新朋友'}！`,{tone:'success'})"><apple-input v-model="name" label="你的名字" placeholder="怎么称呼你" autocomplete="name" clearable required /><apple-input v-model="email" label="电子邮箱" type="email" placeholder="name@example.com" autocomplete="email" required /><apple-button type="submit">加入我们<ArrowRight :size="15" /></apple-button></apple-form></section>
+            <section class="specimen media-specimen"><div class="specimen-caption"><span>05 / 媒体</span></div><h2>靠近一点，再一点。</h2><apple-image :gallery="[{ src: '/images/lake.jpg', alt: '山间湖泊和木屋' }, { src: '/images/airpods-max-orange.jpg', alt: '橙色耳机' }]" aspect-ratio="4/3" /><div class="specimen-foot"><code>apple-image</code><span>山间的一刻</span></div></section>
+            <section class="specimen feedback-specimen"><div class="specimen-caption"><span>06 / 反馈</span></div><h2>每一步，都有回应。</h2><apple-alert title="所有更改已保存" tone="success" /><div class="progress-demo"><div><span>正在同步</span><span>{{progress}}%</span></div><apple-progress :model-value="progress" label="正在同步" /></div><apple-avatar-group :items="[{name:'林初'},{name:'Alex'},{name:'Taylor'},{name:'Quinn'}]" /><div class="feedback-actions"><apple-button variant="secondary" size="small" @click="openDemoDialog">打开对话框</apple-button><apple-button variant="ghost" size="small" @click="$apple.notify('所有更改已保存',{tone:'success'});progress=Math.min(100,progress+10)">显示提示</apple-button></div></section>
+          </div>
+    </section>
+    <section class="more-components">
+      <div><h2>更多组件，同样顺手。</h2><span>{{ catalog.length }} 个组件，预览与交互都在一页之中。</span></div>
+      <router-link v-slot="{ href, navigate }" to="/components" custom>
+        <apple-link :href="href" class="home-link" @click="navigate">查看全部组件 <ArrowRight :size="16" aria-hidden="true" /></apple-link>
+      </router-link>
+    </section>
+    <PageFooter />
+  </main>
+</template>
+
+<script lang="ts">
+import { defineComponent, markRaw } from 'vue'
+import { ArrowRight, ArrowUpRight, Download, Heart, Plus } from 'lucide-vue-next'
+import { catalog } from '../catalog'
+import PageFooter from '../components/PageFooter.vue'
+
+export default defineComponent({
+  components: { ArrowRight, ArrowUpRight, PageFooter },
+  data() { return {
+    catalog, arrowIcon: markRaw(ArrowRight), plusIcon: markRaw(Plus), heartIcon: markRaw(Heart), downloadIcon: markRaw(Download),
+    period: 'month', periods: [{label:'日',value:'day'},{label:'周',value:'week'},{label:'月',value:'month'}],
+    notices: true, sync: false, agreed: true, volume: 64, progress: 68, name: '', email: '', liked: false,
+    settingQuery: '', setting: 'profile', overviewSettings: [
+      {label:'个人资料',value:'profile',description:'姓名、头像和联系方式'},
+      {label:'通知',value:'notices',description:'推送和邮件偏好'},
+      {label:'隐私与安全',value:'privacy',description:'管理你的账户安全设置'},
+    ],
+  } },
+  computed: {
+    filteredSettings() {
+      const query = this.settingQuery.trim()
+      return this.overviewSettings.filter(item => item.label.includes(query) || item.description.includes(query))
+    },
+  },
+  methods: {
+    openDemoDialog() { this.$apple.dialog({title:'一切，就从这里开始。',message:'试试这些组件，找到适合你的交互。',confirmText:'好的',cancelText:'稍后'}) },
+  },
+})
+</script>
+
+<style scoped>
+.home-link { min-height: 44px; gap: 9px; font-size: 13px; font-weight: 500; }
+.search-empty { margin: 12px 0 0; color: var(--apple-secondary); font-size: 12px; line-height: 1.7; }
+/* Keep the library's control sizes in the compact specimens. */
+.button-specimens > .apple-button { min-height: 44px; font-size: inherit; }
+.icon-button-row .apple-button { width: 44px; height: 44px; min-height: 44px; }
+.form-specimen .apple-form .apple-button { min-height: 44px; font-size: inherit; }
+.feedback-actions .apple-button { font-size: 13px; }
+</style>

package/templates/playground/playground/views/settings.vue

@@ -0,0 +1,98 @@
+<template>
+  <main class="main-content settings-page">
+    <header class="page-heading"><div style="padding: 0 16px"><h1>设置</h1></div></header>
+    <section class="settings-section" aria-labelledby="theme-heading">
+      <div class="settings-section-heading"><Palette :size="21" aria-hidden="true" /><div><h2 id="theme-heading">主题</h2><p>应用于所有页面，并保存在这台设备上。</p></div></div>
+      <div class="theme-picker" role="group" aria-label="选择主题">
+        <apple-button v-for="theme in themes" variant="ghost" class="theme-choice" :key="theme.value" type="button" :aria-pressed="apple.theme.value.name === theme.value" :class="{ selected: apple.theme.value.name === theme.value }" @click="apple.theme.value.set(theme.value)">
+          <span aria-hidden="true" class="theme-swatch" :style="{ background: theme.background, color: theme.accent }"><i /><i /><i /></span>
+          <span class="theme-label">{{ theme.label }}<Check v-if="apple.theme.value.name === theme.value" :size="15" aria-hidden="true" /></span>
+        </apple-button>
+      </div>
+    </section>
+    <section class="settings-section" aria-labelledby="glass-heading">
+      <div class="settings-section-heading"><Layers :size="21" aria-hidden="true" /><div><h2 id="glass-heading">玻璃效果</h2><p>调整下拉浮层的底色与模糊程度，并保存在这台设备上。</p></div></div>
+      <div class="glass-controls">
+        <apple-slider :model-value="apple.glass.value.opacity" label="玻璃不透明度" :min="0" :max="100" :step="0.1" :format-value="formatOpacity" hint="0% 完全透明，100% 完全不透明。" @update:model-value="setGlassOpacity" />
+        <apple-slider :model-value="apple.glass.value.blur" label="玻璃模糊" :min="2" :max="22" :step="1" :format-value="formatBlur" hint="范围 2–22px，默认 12px。" @update:model-value="setGlassBlur" />
+      </div>
+      <div class="glass-preview" aria-label="玻璃效果实时预览">
+        <div class="glass-preview-backdrop" :style="{ backgroundImage: glassPreviewPattern }" aria-hidden="true" />
+        <apple-list class="glass-preview-panel" :items="glassPreviewItems" label="玻璃预览内容" />
+      </div>
+      <p class="glass-preview-note">细碎图案便于观察模糊程度，预览随滑块实时变化。账号菜单和登录对话框保持实底。</p>
+      <div class="glass-preview-select"><apple-select v-model="glassPreviewChoice" label="打开下拉查看实际效果" :items="glassPreviewItems" /></div>
+    </section>
+    <section class="settings-section" aria-labelledby="motion-heading">
+      <div class="settings-section-heading"><Waves :size="21" aria-hidden="true" /><div><h2 id="motion-heading">动效</h2><p>为页面切换和组件交互选择动效强度。</p></div></div>
+      <apple-segmented-control :model-value="apple.motion.value.mode" :items="motionOptions" label="全局动效" @update:model-value="setMotion" />
+      <p class="settings-note">{{ motionDescriptions[apple.motion.value.mode] }}<template v-if="apple.motion.value.reduced"> 系统已开启减少动态效果。</template></p>
+      <div class="motion-preview">
+        <div class="motion-preview-heading"><span>试试当前效果</span><apple-button variant="ghost" size="small" @click="expanded = !expanded">{{ expanded ? '收起预览' : '展开预览' }}</apple-button></div>
+        <apple-auto-size><div class="motion-preview-content"><apple-button @click="apple.notify('这就是当前的交互效果', { tone: 'success' })">轻点一下</apple-button><p v-if="expanded">舒适的颜色，自然的变化。每一个细节，都跟随你的偏好。</p></div></apple-auto-size>
+      </div>
+    </section>
+    <PageFooter />
+  </main>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Check, Layers, Palette, Waves } from 'lucide-vue-next'
+import { builtInThemes, useApple, type Motion } from 'apptify'
+import PageFooter from '../components/PageFooter.vue'
+
+const apple = useApple()
+const expanded = ref(false)
+const glassPreviewPattern = `url("data:image/svg+xml,${encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="176" height="144" viewBox="0 0 176 144"><g fill="none" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><g stroke="#7196ad"><path d="M12 12h15v10H12zM12 12l7.5 6 7.5-6"/><circle cx="64" cy="17" r="8"/><path d="M64 12v5l4 2M110 9l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1zM148 10h12v15h-12zM152 14h5M152 18h5M152 22h3"/></g><g stroke="#bd856b"><path d="M12 48h12v11a5 5 0 0 1-5 5h-2a5 5 0 0 1-5-5zM24 50h3a4 4 0 0 1 0 8h-3M15 43v2M20 42v3M57 46l7-3 7 3v16l-7-3-7 3zM64 43v16M105 47l7-4 7 4v8l-7 4-7-4zM105 47l7 4 7-4M112 51v8M146 48h15v12h-15zM149 45v6M158 45v6M146 53h15M150 56h2M156 56h2"/></g><g stroke="#719281"><path d="M12 84c13-6 18 0 11 9-9 4-15 0-11-9zM12 94l12-11M62 80l-6 9 6 9 6-9zM61 89h3M105 82h13v13h-13zM108 85h7M108 88h7M108 91h4M147 83a7 7 0 0 1 14 0v6M147 85h3v7h-3zM158 85h3v7h-3z"/></g><g stroke="#a58cbb"><path d="M12 118l10-6 4 6-10 6zM12 118l-1 7 5-1M57 119c0-10 14-10 14 0M57 119v6h4v-6zM67 119v6h4v-6zM105 113h13v13h-13zM109 113v13M106 117h12M151 113h7v5l4 5-3 4h-9l-3-4 4-5zM151 118h7"/></g></g></svg>')}")`
+const glassPreviewChoice = ref('profile')
+const glassPreviewItems = [
+  { label: '个人资料', value: 'profile', description: '姓名、头像和联系方式' },
+  { label: '通知', value: 'notices', description: '推送和邮件偏好' },
+  { label: '隐私与安全', value: 'privacy', description: '管理你的账户安全设置' },
+]
+function formatOpacity(value: number) { return `${Number(value.toFixed(1))}%` }
+function formatBlur(value: number) { return `${value}px` }
+function setGlassOpacity(opacity: number) { apple.glass.value.set({ opacity }) }
+function setGlassBlur(blur: number) { apple.glass.value.set({ blur }) }
+const themes = [
+  { label: '跟随系统', value: 'system', background: 'linear-gradient(125deg, #f5f5f7 50%, #242426 50%)', accent: '#8a8a90' },
+  { label: '浅色', value: 'light', background: '#f5f5f7', accent: builtInThemes.light.tokens.accent },
+  { label: '深色', value: 'dark', background: '#242426', accent: builtInThemes.dark.tokens.accent },
+  { label: '石墨', value: 'graphite', background: '#253334', accent: '#a6ceca' },
+  { label: '玫瑰', value: 'rose', background: '#fff1f5', accent: '#a83b65' },
+]
+const motionOptions = [{ label: '自动', value: 'auto' }, { label: '完整', value: 'full' }, { label: '减弱', value: 'reduced' }, { label: '关闭', value: 'none' }]
+const motionDescriptions: Record<string, string> = {
+  auto: '跟随系统的动态效果偏好，自动调整。',
+  full: '呈现完整的过渡与交互动效，同时尊重系统的减少动态效果设置。',
+  reduced: '缩短过渡、减少位移，保留必要的反馈。',
+  none: '立即呈现每次变化，关闭过渡动画。',
+}
+function setMotion(value: Motion) { apple.motion.value.set(value) }
+function reset() {
+  apple.theme.value.set('light')
+  apple.motion.value.set('auto')
+  apple.glass.value.reset()
+  apple.notify('已恢复默认设置', { tone: 'success' })
+}
+</script>
+
+<style scoped>
+.theme-picker { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
+.theme-choice { min-width: 0; padding: 7px; border: 1px solid var(--apple-border); border-radius: 8px; }
+.theme-choice.selected { border-color: var(--apple-accent); outline: 1px solid var(--apple-accent); }
+.theme-choice:focus-visible { outline: 3px solid color-mix(in srgb, var(--apple-accent) 65%, transparent); outline-offset: 3px; }
+.theme-choice :deep(.apple-button__content) { flex-direction: column; width: 100%; gap: 12px; }
+.theme-label { color: var(--apple-text); }
+.glass-controls { display: grid; gap: 20px; margin-bottom: 24px; }
+.glass-controls :deep(.apple-slider__value) { min-width: 58px; }
+.glass-preview { position: relative; isolation: isolate; display: grid; place-items: center; min-height: 274px; padding: 24px; border-radius: 8px; background: var(--apple-surface-alt); }
+.glass-preview-backdrop { position: absolute; inset: 0; z-index: -1; border-radius: inherit; background-color: var(--apple-surface-alt); background-size: 176px 144px; }
+.glass-preview-panel { width: 100%; max-width: 340px; padding: 12px; border: 1px solid var(--apple-border); border-radius: 10px; background: rgb(var(--apple-glass-rgb, 255 255 255) / var(--apple-glass-opacity, 0.31372549)); -webkit-backdrop-filter: blur(var(--apple-glass-blur, 12px)) saturate(2); backdrop-filter: blur(var(--apple-glass-blur, 12px)) saturate(2); box-shadow: var(--apple-shadow); }
+.glass-preview-note { font-size: 12px; line-height: 1.8; color: var(--apple-secondary); margin: 14px 0 20px; }
+.glass-preview-select { max-width: 440px; }
+@media (max-width: 600px) {
+  .theme-picker { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+}
+</style>