:root,
:host {
  --w-e-textarea-bg-color: #fff;
  --w-e-textarea-color: #333;
  --w-e-textarea-border-color: #ccc;
  --w-e-textarea-slight-border-color: #e8e8e8;
  --w-e-textarea-slight-color: #d4d4d4;
  --w-e-textarea-slight-bg-color: #f5f2f0;
  --w-e-textarea-selected-border-color: #B4D5FF;
  --w-e-textarea-handler-bg-color: #4290f7;
  --w-e-toolbar-color: #595959;
  --w-e-toolbar-bg-color: #fff;
  --w-e-toolbar-active-color: #333;
  --w-e-toolbar-active-bg-color: #f1f1f1;
  --w-e-toolbar-disabled-color: #999;
  --w-e-toolbar-border-color: #e8e8e8;
  --w-e-modal-button-bg-color: #fafafa;
  --w-e-modal-button-border-color: #d9d9d9;
}

.w-e-text-container *,.w-e-toolbar *{box-sizing:border-box;margin:0;outline:none;padding:0}.w-e-text-container blockquote,.w-e-text-container li,.w-e-text-container p,.w-e-text-container td,.w-e-text-container th,.w-e-toolbar *{line-height:1.5}.w-e-text-container{background-color:var(--w-e-textarea-bg-color);color:var(--w-e-textarea-color);height:100%;position:relative}.w-e-text-container .w-e-scroll{-webkit-overflow-scrolling:touch;height:100%}.w-e-text-container [data-slate-editor]{word-wrap:break-word;border-top:1px solid transparent;min-height:100%;outline:0;padding:0 10px;white-space:pre-wrap}.w-e-text-container [data-slate-editor] p{margin:15px 0}.w-e-text-container [data-slate-editor] h1,.w-e-text-container [data-slate-editor] h2,.w-e-text-container [data-slate-editor] h3,.w-e-text-container [data-slate-editor] h4,.w-e-text-container [data-slate-editor] h5{margin:20px 0}.w-e-text-container [data-slate-editor] img{cursor:default;display:inline!important;max-width:100%;min-height:20px;min-width:20px}.w-e-text-container [data-slate-editor] span{text-indent:0}.w-e-text-container [data-slate-editor] [data-selected=true]{box-shadow:0 0 0 2px var(--w-e-textarea-selected-border-color)}.w-e-text-placeholder{font-style:italic;left:10px;top:17px;width:90%}.w-e-max-length-info,.w-e-text-placeholder{color:var(--w-e-textarea-slight-color);pointer-events:none;position:absolute;-webkit-user-select:none;-moz-user-select:none;user-select:none}.w-e-max-length-info{bottom:.5em;right:1em}.w-e-bar{background-color:var(--w-e-toolbar-bg-color);color:var(--w-e-toolbar-color);font-size:14px;padding:0 5px}.w-e-bar svg{fill:var(--w-e-toolbar-color);height:14px;width:14px}.w-e-bar-show{display:flex}.w-e-bar-hidden{display:none}.w-e-hover-bar{border:1px solid var(--w-e-toolbar-border-color);border-radius:3px;box-shadow:0 2px 5px #0000001f;position:absolute}.w-e-toolbar{flex-wrap:wrap;position:relative}.w-e-bar-divider{background-color:var(--w-e-toolbar-border-color);display:inline-flex;height:40px;margin:0 5px;width:1px}.w-e-bar-item{display:flex;height:40px;padding:4px;position:relative;text-align:center}.w-e-bar-item,.w-e-bar-item button{align-items:center;justify-content:center}.w-e-bar-item button{background:transparent;border:none;color:var(--w-e-toolbar-color);cursor:pointer;display:inline-flex;height:32px;overflow:hidden;padding:0 8px;white-space:nowrap}.w-e-bar-item button:hover{background-color:var(--w-e-toolbar-active-bg-color);color:var(--w-e-toolbar-active-color)}.w-e-bar-item button .title{margin-left:5px}.w-e-bar-item .active{background-color:var(--w-e-toolbar-active-bg-color);color:var(--w-e-toolbar-active-color)}.w-e-bar-item .disabled{color:var(--w-e-toolbar-disabled-color);cursor:not-allowed}.w-e-bar-item .disabled svg{fill:var(--w-e-toolbar-disabled-color)}.w-e-bar-item .disabled:hover{background-color:var(--w-e-toolbar-bg-color);color:var(--w-e-toolbar-disabled-color)}.w-e-bar-item .disabled:hover svg{fill:var(--w-e-toolbar-disabled-color)}.w-e-menu-tooltip-v5:before{background-color:var(--w-e-toolbar-active-color);border-radius:5px;color:var(--w-e-toolbar-bg-color);content:attr(data-tooltip);font-size:.75em;opacity:0;padding:5px 10px;position:absolute;text-align:center;top:40px;transition:opacity .6s;visibility:hidden;white-space:pre;z-index:1}.w-e-menu-tooltip-v5:after{border:5px solid transparent;border-bottom:5px solid var(--w-e-toolbar-active-color);content:"";opacity:0;position:absolute;top:30px;transition:opacity .6s;visibility:hidden}.w-e-menu-tooltip-v5:hover:after,.w-e-menu-tooltip-v5:hover:before{opacity:1;visibility:visible}.w-e-menu-tooltip-v5.tooltip-right:before{left:100%;top:10px}.w-e-menu-tooltip-v5.tooltip-right:after{border-bottom-color:transparent;border-left-color:transparent;border-right-color:var(--w-e-toolbar-active-color);border-top-color:transparent;left:100%;margin-left:-10px;top:16px}.w-e-bar-item-group .w-e-bar-item-menus-container{background-color:var(--w-e-toolbar-bg-color);border:1px solid var(--w-e-toolbar-border-color);border-radius:3px;box-shadow:0 2px 10px #0000001f;display:none;left:0;margin-top:40px;position:absolute;top:0;z-index:1}.w-e-bar-item-group:hover .w-e-bar-item-menus-container{display:block}.w-e-select-list{background-color:var(--w-e-toolbar-bg-color);border:1px solid var(--w-e-toolbar-border-color);border-radius:3px;box-shadow:0 2px 10px #0000001f;left:0;margin-top:40px;max-height:350px;min-width:100px;overflow-y:auto;position:absolute;top:0;z-index:1}.w-e-select-list ul{line-height:1;list-style:none}.w-e-select-list ul .selected{background-color:var(--w-e-toolbar-active-bg-color)}.w-e-select-list ul li{cursor:pointer;padding:7px 0 7px 25px;position:relative;text-align:left;white-space:nowrap}.w-e-select-list ul li:hover{background-color:var(--w-e-toolbar-active-bg-color)}.w-e-select-list ul li svg{left:0;margin-left:5px;margin-top:-7px;position:absolute;top:50%}.w-e-bar-bottom .w-e-select-list{bottom:0;margin-bottom:40px;margin-top:0;top:inherit}.w-e-drop-panel{background-color:var(--w-e-toolbar-bg-color);border:1px solid var(--w-e-toolbar-border-color);border-radius:3px;box-shadow:0 2px 10px #0000001f;margin-top:40px;min-width:200px;padding:10px;position:absolute;top:0;z-index:1}.w-e-bar-bottom .w-e-drop-panel{bottom:0;margin-bottom:40px;margin-top:0;top:inherit}.w-e-modal{background-color:var(--w-e-toolbar-bg-color);border:1px solid var(--w-e-toolbar-border-color);border-radius:3px;box-shadow:0 2px 10px #0000001f;color:var(--w-e-toolbar-color);font-size:14px;min-height:40px;min-width:100px;padding:20px 15px 0;position:absolute;text-align:left;z-index:1}.w-e-modal .btn-close{cursor:pointer;line-height:1;padding:5px;position:absolute;right:8px;top:7px}.w-e-modal .btn-close svg{fill:var(--w-e-toolbar-color);height:10px;width:10px}.w-e-modal .babel-container{display:block;margin-bottom:15px}.w-e-modal .babel-container span{display:block;margin-bottom:10px}.w-e-modal .button-container{margin-bottom:15px}.w-e-modal button{background-color:var(--w-e-modal-button-bg-color);border:1px solid var(--w-e-modal-button-border-color);border-radius:4px;color:var(--w-e-toolbar-color);cursor:pointer;font-weight:400;height:32px;padding:4.5px 15px;text-align:center;touch-action:manipulation;transition:all .3s cubic-bezier(.645,.045,.355,1);-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap}.w-e-modal input[type=number],.w-e-modal input[type=text],.w-e-modal textarea{font-feature-settings:"tnum";background-color:var(--w-e-toolbar-bg-color);border:1px solid var(--w-e-modal-button-border-color);border-radius:4px;color:var(--w-e-toolbar-color);font-variant:tabular-nums;padding:4.5px 11px;transition:all .3s;width:100%}.w-e-modal textarea{min-height:60px}body .w-e-modal,body .w-e-modal *{box-sizing:border-box}.w-e-progress-bar{background-color:var(--w-e-textarea-handler-bg-color);height:1px;position:absolute;transition:width .3s;width:0}.w-e-full-screen-container{bottom:0!important;display:flex!important;flex-direction:column!important;height:100%!important;left:0!important;margin:0!important;padding:0!important;position:fixed;right:0!important;top:0!important;width:100%!important}.w-e-full-screen-container [data-w-e-textarea=true]{flex:1!important}
.w-e-text-container [data-slate-editor] code{background-color:var(--w-e-textarea-slight-bg-color);border-radius:3px;font-family:monospace;padding:3px}.w-e-panel-content-color{list-style:none;text-align:left;width:230px}.w-e-panel-content-color li{border:1px solid var(--w-e-toolbar-bg-color);border-radius:3px 3px;cursor:pointer;display:inline-block;padding:2px}.w-e-panel-content-color li:hover{border-color:var(--w-e-toolbar-color)}.w-e-panel-content-color li .color-block{border:1px solid var(--w-e-toolbar-border-color);border-radius:3px 3px;height:17px;width:17px}.w-e-panel-content-color .active{border-color:var(--w-e-toolbar-color)}.w-e-panel-content-color .clear{line-height:1.5;margin-bottom:5px;width:100%}.w-e-panel-content-color .clear svg{height:16px;margin-bottom:-4px;width:16px}.w-e-text-container [data-slate-editor] blockquote{background-color:var(--w-e-textarea-slight-bg-color);border-left:8px solid var(--w-e-textarea-selected-border-color);display:block;font-size:100%;line-height:1.5;margin:10px 0;padding:10px}.w-e-panel-content-emotion{font-size:20px;list-style:none;text-align:left;width:300px}.w-e-panel-content-emotion li{border-radius:3px 3px;cursor:pointer;display:inline-block;padding:0 5px}.w-e-panel-content-emotion li:hover{background-color:var(--w-e-textarea-slight-bg-color)}.w-e-textarea-divider{border-radius:3px;margin:20px auto;padding:20px}.w-e-textarea-divider hr{background-color:var(--w-e-textarea-border-color);border:0;display:block;height:1px}.w-e-text-container [data-slate-editor] pre>code{background-color:var(--w-e-textarea-slight-bg-color);border:1px solid var(--w-e-textarea-slight-border-color);border-radius:4px 4px;display:block;font-size:14px;padding:10px;text-indent:0}.w-e-text-container [data-slate-editor] .w-e-image-container{display:inline-block;margin:0 3px}.w-e-text-container [data-slate-editor] .w-e-image-container:hover{box-shadow:0 0 0 2px var(--w-e-textarea-selected-border-color)}.w-e-text-container [data-slate-editor] .w-e-selected-image-container{overflow:hidden;position:relative}.w-e-text-container [data-slate-editor] .w-e-selected-image-container .w-e-image-dragger{background-color:var(--w-e-textarea-handler-bg-color);height:7px;position:absolute;width:7px}.w-e-text-container [data-slate-editor] .w-e-selected-image-container .left-top{cursor:nwse-resize;left:0;top:0}.w-e-text-container [data-slate-editor] .w-e-selected-image-container .right-top{cursor:nesw-resize;right:0;top:0}.w-e-text-container [data-slate-editor] .w-e-selected-image-container .left-bottom{bottom:0;cursor:nesw-resize;left:0}.w-e-text-container [data-slate-editor] .w-e-selected-image-container .right-bottom{bottom:0;cursor:nwse-resize;right:0}.w-e-text-container [data-slate-editor] .w-e-selected-image-container:hover{box-shadow:none}.w-e-text-container [contenteditable=false] .w-e-image-container:hover{box-shadow:none}

.w-e-text-container [data-slate-editor] .table-container{border:1px dashed var(--w-e-textarea-border-color);border-radius:5px;margin-top:10px;overflow-x:auto;padding:10px;width:100%}.w-e-text-container [data-slate-editor] table{border-collapse:collapse}.w-e-text-container [data-slate-editor] table td,.w-e-text-container [data-slate-editor] table th{border:1px solid var(--w-e-textarea-border-color);line-height:1.5;min-width:30px;padding:3px 5px;text-align:left}.w-e-text-container [data-slate-editor] table th{background-color:var(--w-e-textarea-slight-bg-color);font-weight:700;text-align:center}.w-e-panel-content-table{background-color:var(--w-e-toolbar-bg-color)}.w-e-panel-content-table table{border-collapse:collapse}.w-e-panel-content-table td{border:1px solid var(--w-e-toolbar-border-color);cursor:pointer;height:15px;padding:3px 5px;width:20px}.w-e-panel-content-table td.active{background-color:var(--w-e-toolbar-active-bg-color)}
.w-e-textarea-video-container{background-image:linear-gradient(45deg,#eee 25%,transparent 0,transparent 75%,#eee 0,#eee),linear-gradient(45deg,#eee 25%,#fff 0,#fff 75%,#eee 0,#eee);background-position:0 0,10px 10px;background-size:20px 20px;border:1px dashed var(--w-e-textarea-border-color);border-radius:5px;margin:10px auto 0;padding:10px 0;text-align:center}

.w-e-text-container [data-slate-editor] pre>code{word-wrap:normal;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;hyphens:none;line-height:1.5;margin:.5em 0;overflow:auto;padding:1em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;text-align:left;text-shadow:0 1px #fff;white-space:pre;word-break:normal;word-spacing:normal}.w-e-text-container [data-slate-editor] pre>code .token.cdata,.w-e-text-container [data-slate-editor] pre>code .token.comment,.w-e-text-container [data-slate-editor] pre>code .token.doctype,.w-e-text-container [data-slate-editor] pre>code .token.prolog{color:#708090}.w-e-text-container [data-slate-editor] pre>code .token.punctuation{color:#999}.w-e-text-container [data-slate-editor] pre>code .token.namespace{opacity:.7}.w-e-text-container [data-slate-editor] pre>code .token.boolean,.w-e-text-container [data-slate-editor] pre>code .token.constant,.w-e-text-container [data-slate-editor] pre>code .token.deleted,.w-e-text-container [data-slate-editor] pre>code .token.number,.w-e-text-container [data-slate-editor] pre>code .token.property,.w-e-text-container [data-slate-editor] pre>code .token.symbol,.w-e-text-container [data-slate-editor] pre>code .token.tag{color:#905}.w-e-text-container [data-slate-editor] pre>code .token.attr-name,.w-e-text-container [data-slate-editor] pre>code .token.builtin,.w-e-text-container [data-slate-editor] pre>code .token.char,.w-e-text-container [data-slate-editor] pre>code .token.inserted,.w-e-text-container [data-slate-editor] pre>code .token.selector,.w-e-text-container [data-slate-editor] pre>code .token.string{color:#690}.w-e-text-container [data-slate-editor] pre>code .language-css .token.string,.w-e-text-container [data-slate-editor] pre>code .style .token.string,.w-e-text-container [data-slate-editor] pre>code .token.entity,.w-e-text-container [data-slate-editor] pre>code .token.operator,.w-e-text-container [data-slate-editor] pre>code .token.url{color:#9a6e3a}.w-e-text-container [data-slate-editor] pre>code .token.atrule,.w-e-text-container [data-slate-editor] pre>code .token.attr-value,.w-e-text-container [data-slate-editor] pre>code .token.keyword{color:#07a}.w-e-text-container [data-slate-editor] pre>code .token.class-name,.w-e-text-container [data-slate-editor] pre>code .token.function{color:#dd4a68}.w-e-text-container [data-slate-editor] pre>code .token.important,.w-e-text-container [data-slate-editor] pre>code .token.regex,.w-e-text-container [data-slate-editor] pre>code .token.variable{color:#e90}.w-e-text-container [data-slate-editor] pre>code .token.bold,.w-e-text-container [data-slate-editor] pre>code .token.important{font-weight:700}.w-e-text-container [data-slate-editor] pre>code .token.italic{font-style:italic}.w-e-text-container [data-slate-editor] pre>code .token.entity{cursor:help}/* === 2026-05-09，frontend-design skill：精致编辑权威感美学重构 === */
/* === 2026-04-28，基于 Notion DESIGN.md 全面升级设计系统 === */
/* === 2026-03-28，全面重构UI设计系统，深蓝导航+卡片阴影+专业配色 === */
*, ::before, ::after {
  --tw-border-spacing-x:        0;
  --tw-border-spacing-y:        0;
  --tw-translate-x:        0;
  --tw-translate-y:        0;
  --tw-rotate:        0;
  --tw-skew-x:        0;
  --tw-skew-y:        0;
  --tw-scale-x:        1;
  --tw-scale-y:        1;
  --tw-pan-x:         ;
  --tw-pan-y:         ;
  --tw-pinch-zoom:         ;
  --tw-scroll-snap-strictness:        proximity;
  --tw-gradient-from-position:         ;
  --tw-gradient-via-position:         ;
  --tw-gradient-to-position:         ;
  --tw-ordinal:         ;
  --tw-slashed-zero:         ;
  --tw-numeric-figure:         ;
  --tw-numeric-spacing:         ;
  --tw-numeric-fraction:         ;
  --tw-ring-inset:         ;
  --tw-ring-offset-width:        0px;
  --tw-ring-offset-color:        #fff;
  --tw-ring-color:        rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow:        0 0 #0000;
  --tw-ring-shadow:        0 0 #0000;
  --tw-shadow:        0 0 #0000;
  --tw-shadow-colored:        0 0 #0000;
  --tw-blur:         ;
  --tw-brightness:         ;
  --tw-contrast:         ;
  --tw-grayscale:         ;
  --tw-hue-rotate:         ;
  --tw-invert:         ;
  --tw-saturate:         ;
  --tw-sepia:         ;
  --tw-drop-shadow:         ;
  --tw-backdrop-blur:         ;
  --tw-backdrop-brightness:         ;
  --tw-backdrop-contrast:         ;
  --tw-backdrop-grayscale:         ;
  --tw-backdrop-hue-rotate:         ;
  --tw-backdrop-invert:         ;
  --tw-backdrop-opacity:         ;
  --tw-backdrop-saturate:         ;
  --tw-backdrop-sepia:         ;
  --tw-contain-size:         ;
  --tw-contain-layout:         ;
  --tw-contain-paint:         ;
  --tw-contain-style:         ;
}
::backdrop {
  --tw-border-spacing-x:        0;
  --tw-border-spacing-y:        0;
  --tw-translate-x:        0;
  --tw-translate-y:        0;
  --tw-rotate:        0;
  --tw-skew-x:        0;
  --tw-skew-y:        0;
  --tw-scale-x:        1;
  --tw-scale-y:        1;
  --tw-pan-x:         ;
  --tw-pan-y:         ;
  --tw-pinch-zoom:         ;
  --tw-scroll-snap-strictness:        proximity;
  --tw-gradient-from-position:         ;
  --tw-gradient-via-position:         ;
  --tw-gradient-to-position:         ;
  --tw-ordinal:         ;
  --tw-slashed-zero:         ;
  --tw-numeric-figure:         ;
  --tw-numeric-spacing:         ;
  --tw-numeric-fraction:         ;
  --tw-ring-inset:         ;
  --tw-ring-offset-width:        0px;
  --tw-ring-offset-color:        #fff;
  --tw-ring-color:        rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow:        0 0 #0000;
  --tw-ring-shadow:        0 0 #0000;
  --tw-shadow:        0 0 #0000;
  --tw-shadow-colored:        0 0 #0000;
  --tw-blur:         ;
  --tw-brightness:         ;
  --tw-contrast:         ;
  --tw-grayscale:         ;
  --tw-hue-rotate:         ;
  --tw-invert:         ;
  --tw-saturate:         ;
  --tw-sepia:         ;
  --tw-drop-shadow:         ;
  --tw-backdrop-blur:         ;
  --tw-backdrop-brightness:         ;
  --tw-backdrop-contrast:         ;
  --tw-backdrop-grayscale:         ;
  --tw-backdrop-hue-rotate:         ;
  --tw-backdrop-invert:         ;
  --tw-backdrop-opacity:         ;
  --tw-backdrop-saturate:         ;
  --tw-backdrop-sepia:         ;
  --tw-contain-size:         ;
  --tw-contain-layout:         ;
  --tw-contain-paint:         ;
  --tw-contain-style:         ;
}
.\!container {
  width:        100% !important;
}
.container {
  width:        100%;
}
@media (min-width: 640px) {
  .\!container {
    max-width:        640px !important;
  }
  .container {
    max-width:        640px;
  }
}
@media (min-width: 768px) {
  .\!container {
    max-width:        768px !important;
  }
  .container {
    max-width:        768px;
  }
}
@media (min-width: 1024px) {
  .\!container {
    max-width:        1024px !important;
  }
  .container {
    max-width:        1024px;
  }
}
@media (min-width: 1280px) {
  .\!container {
    max-width:        1280px !important;
  }
  .container {
    max-width:        1280px;
  }
}
@media (min-width: 1536px) {
  .\!container {
    max-width:        1536px !important;
  }
  .container {
    max-width:        1536px;
  }
}
.visible {
  visibility:        visible;
}
.collapse {
  visibility:        collapse;
}
.fixed {
  position:        fixed;
}
.absolute {
  position:        absolute;
}
.relative {
  position:        relative;
}
.sticky {
  position:        sticky;
}
.mb-2 {
  margin-bottom:        0.5rem;
}
.mb-3 {
  margin-bottom:        0.75rem;
}
.mb-4 {
  margin-bottom:        1rem;
}
.mb-5 {
  margin-bottom:        1.25rem;
}
.mb-6 {
  margin-bottom:        1.5rem;
}
.ml-1 {
  margin-left:        0.25rem;
}
.ml-2 {
  margin-left:        0.5rem;
}
.mr-1 {
  margin-right:        0.25rem;
}
.mt-1 {
  margin-top:        0.25rem;
}
.mt-2 {
  margin-top:        0.5rem;
}
.mt-3 {
  margin-top:        0.75rem;
}
.mt-4 {
  margin-top:        1rem;
}
.mt-8 {
  margin-top:        2rem;
}
.block {
  display:        block;
}
.inline-block {
  display:        inline-block;
}
.inline {
  display:        inline;
}
.flex {
  display:        flex;
}
.inline-flex {
  display:        inline-flex;
}
.table {
  display:        table;
}
.grid {
  display:        grid;
}
.hidden {
  display:        none;
}
.min-h-screen {
  min-height:        100vh;
}
.min-w-0 {
  min-width:        0px;
}
.max-w-none {
  max-width:        none;
}
.flex-1 {
  flex:        1 1 0%;
}
.transform {
  transform:        translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.resize {
  resize:        both;
}
.flex-col {
  flex-direction:        column;
}
.flex-wrap {
  flex-wrap:        wrap;
}
.items-start {
  align-items:        flex-start;
}
.items-center {
  align-items:        center;
}
.justify-between {
  justify-content:        space-between;
}
.gap-2 {
  gap:        0.5rem;
}
.gap-3 {
  gap:        0.75rem;
}
.gap-4 {
  gap:        1rem;
}
.gap-6 {
  gap:        1.5rem;
}
.self-center {
  align-self:        center;
}
.whitespace-pre-wrap {
  white-space:        pre-wrap;
}
.break-all {
  word-break:        break-all;
}
.rounded {
  border-radius:        0.25rem;
}
.border {
  border-width:        1px;
}
.bg-white {
  --tw-bg-opacity:        1;
  background-color:        rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.p-3 {
  padding:        0.75rem;
}
.p-6 {
  padding:        1.5rem;
}
.py-10 {
  padding-top:        2.5rem;
  padding-bottom:        2.5rem;
}
.py-2 {
  padding-top:        0.5rem;
  padding-bottom:        0.5rem;
}
.py-20 {
  padding-top:        5rem;
  padding-bottom:        5rem;
}
.py-6 {
  padding-top:        1.5rem;
  padding-bottom:        1.5rem;
}
.py-8 {
  padding-top:        2rem;
  padding-bottom:        2rem;
}
.pr-8 {
  padding-right:        2rem;
}
.text-center {
  text-align:        center;
}
.text-2xl {
  font-size:        1.5rem;
  line-height:        2rem;
}
.text-base {
  font-size:        1rem;
  line-height:        1.5rem;
}
.text-sm {
  font-size:        0.875rem;
  line-height:        1.25rem;
}
.text-xl {
  font-size:        1.25rem;
  line-height:        1.75rem;
}
.text-xs {
  font-size:        0.75rem;
  line-height:        1rem;
}
.font-bold {
  font-weight:        700;
}
.font-semibold {
  font-weight:        600;
}
.uppercase {
  text-transform:        uppercase;
}
.leading-6 {
  line-height:        1.5rem;
}
.leading-8 {
  line-height:        2rem;
}
.text-gray-400 {
  --tw-text-opacity:        1;
  color:        rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.text-gray-500 {
  --tw-text-opacity:        1;
  color:        rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.text-gray-600 {
  --tw-text-opacity:        1;
  color:        rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.text-gray-700 {
  --tw-text-opacity:        1;
  color:        rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.underline {
  text-decoration-line:        underline;
}
.outline {
  outline-style:        solid;
}
.blur {
  --tw-blur:        blur(8px);
  filter:        var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter {
  filter:        var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.transition {
  transition-property:        color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function:        cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration:        150ms;
}

/* ══════════════════════════════════════════════
   Design Tokens — Editorial Authority
══════════════════════════════════════════════ */
:root {
  /* Core Palette */
  --clr-navy:        #1B2A4A;
  --clr-navy-mid:    #243563;
  --clr-blue:        #3B6EBF;
  --clr-blue-light:  #EDF3FB;
  --clr-gold:        #C4922A;
  --clr-gold-light:  #F5E6C4;
  --clr-gold-pale:   #FBF5E8;
  --clr-ivory:       #F8F6F1;
  --clr-white:       #FFFFFF;
  --clr-ink:         #1C1F2A;
  --clr-ink-mid:     #3C3F52;
  --clr-ink-light:   #72748A;
  --clr-red:         #C8343C;
  --clr-border:      rgba(0,0,0,0.08);
  --clr-border-mid:  rgba(0,0,0,0.12);

  /* Legacy compat */
  --notion-black: rgba(0,0,0,0.95);
  --notion-white: #ffffff;
  --notion-blue: #3B6EBF;
  --notion-blue-active: #1B2A4A;
  --notion-blue-focus: #3B6EBF;
  --notion-warm-white: #F8F6F1;
  --notion-warm-dark: #1B2A4A;
  --notion-warm-gray-500: #72748A;
  --notion-warm-gray-300: #B0B2C8;
  --notion-badge-bg: #EDF3FB;
  --notion-badge-text: #3B6EBF;

  /* Shadows */
  --shadow-card: 0 2px 12px rgba(0,0,0,0.05), 0 1px 3px rgba(0,0,0,0.04);
  --shadow-deep: 0 8px 32px rgba(0,0,0,0.1), 0 2px 8px rgba(0,0,0,0.06);
  --shadow-gold: 0 8px 32px rgba(196,146,42,0.18), 0 2px 8px rgba(196,146,42,0.1);
  --border-whisper: 1px solid rgba(0,0,0,0.08);

  /* Typography */
  --font-display: 'Noto Serif SC', 'SimSun', 'STSong', Georgia, serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', 'Segoe UI', sans-serif;
}

/* ══════════════════════════════════════════════
   Animation Keyframes
══════════════════════════════════════════════ */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes goldSlide {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes shimmerGold {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

.mk-fade-up   { animation: fadeInUp 0.55s cubic-bezier(0.4,0,0.2,1) both; }
.mk-fade-up-1 { animation: fadeInUp 0.55s cubic-bezier(0.4,0,0.2,1) 0.08s both; }
.mk-fade-up-2 { animation: fadeInUp 0.55s cubic-bezier(0.4,0,0.2,1) 0.16s both; }
.mk-fade-up-3 { animation: fadeInUp 0.55s cubic-bezier(0.4,0,0.2,1) 0.24s both; }
.mk-fade-up-4 { animation: fadeInUp 0.55s cubic-bezier(0.4,0,0.2,1) 0.32s both; }

/* ══════════════════════════════════════════════
   Base
══════════════════════════════════════════════ */
body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--clr-ivory);
  color: var(--clr-ink);
  font-size: 15px;
  line-height: 1.65;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--clr-blue); }

/* ══════════════════════════════════════════════
   Layout
══════════════════════════════════════════════ */
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* ══════════════════════════════════════════════
   Header & Navigation
══════════════════════════════════════════════ */
.site-header {
  background: var(--clr-navy);
  border-bottom: var(--border-whisper);
  position: sticky;
  top: 0;
  z-index: 200;
}

.site-nav { background: var(--clr-blue); border-bottom: none; }
.site-nav a {
  color: rgba(255,255,255,0.85);
  padding: 12px 18px;
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  font-weight: 400;
  transition: color 0.2s, background 0.2s;
  white-space: nowrap;
}
.site-nav a:hover { color: #fff; background: rgba(255,255,255,0.1); }
.site-nav a.active { color: #fff; font-weight: 600; background: rgba(255,255,255,0.15); }

/* ══════════════════════════════════════════════
   Breadcrumb
══════════════════════════════════════════════ */
.breadcrumb-bar { background: var(--clr-white); border-bottom: var(--border-whisper); padding: 8px 0; }
.breadcrumb-bar .ant-breadcrumb { font-size: 13px; }
.breadcrumb-bar .ant-breadcrumb a { color: var(--clr-ink-light); }
.breadcrumb-bar .ant-breadcrumb a:hover { color: var(--clr-blue); }

/* ══════════════════════════════════════════════
   Cards
══════════════════════════════════════════════ */
.notion-card {
  background: var(--clr-white);
  border: var(--border-whisper);
  border-radius: 12px;
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.25s ease, transform 0.2s ease;
}
.notion-card:hover {
  box-shadow: var(--shadow-deep);
  transform: translateY(-3px);
}

.course-card {
  background: var(--clr-white);
  border: var(--border-whisper);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 12px;
  transition: box-shadow 0.25s ease, transform 0.2s ease;
  box-shadow: var(--shadow-card);
}
.course-card:hover {
  box-shadow: var(--shadow-deep);
  transform: translateY(-3px);
}
.course-card .price { color: var(--clr-red); font-weight: 700; font-size: 16px; }

/* ══════════════════════════════════════════════
   Buttons
══════════════════════════════════════════════ */
.btn-notion-primary {
  background: var(--clr-blue);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
}
.btn-notion-primary:hover {
  background: var(--clr-navy);
  box-shadow: 0 4px 12px rgba(59,110,191,0.3);
}
.btn-notion-primary:active { transform: scale(0.97); }

/* Pill Badge */
.notion-badge {
  display: inline-flex;
  align-items: center;
  background: var(--clr-blue-light);
  color: var(--clr-blue);
  border-radius: 9999px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1px;
}

/* ══════════════════════════════════════════════
   Section Headers — Editorial Style
══════════════════════════════════════════════ */
.section-title {
  font-size: 22px;
  font-weight: 700;
  font-family: var(--font-display);
  letter-spacing: 0.02em;
  padding: 0 0 16px;
  border-bottom: var(--border-whisper);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--clr-ink);
}
.section-title > span:first-child {
  position: relative;
  padding-left: 14px;
}
.section-title > span:first-child::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 18px;
  background: var(--clr-gold);
  border-radius: 2px;
}

/* ══════════════════════════════════════════════
   Category Sidebar
══════════════════════════════════════════════ */
.category-sidebar {
  background: var(--clr-white);
  border: var(--border-whisper);
  border-radius: 8px 0 0 8px;
  overflow: hidden;
}
.category-item {
  padding: 11px 16px;
  border-bottom: var(--border-whisper);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  position: relative;
  font-size: 14px;
  color: var(--clr-ink-light);
}
.category-item:hover { background: var(--clr-blue-light); color: var(--clr-blue); }
.category-item.active { background: var(--clr-blue); color: #fff; }

/* Flyout panel */
.subcategory-flyout {
  position: absolute;
  left: 100%;
  top: 0;
  width: 480px;
  min-height: 200px;
  background: var(--clr-white);
  color: var(--notion-warm-gray-500);
  padding: 10px 16px;
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  transition: color 0.15s;
  white-space: nowrap;
}
.site-nav a:hover { color: var(--notion-black); }
.site-nav a.active { color: var(--notion-blue); font-weight: 600; }

/* ══════════════════════════════════════════════
   Breadcrumb
══════════════════════════════════════════════ */
.breadcrumb-bar { background: var(--notion-white); border-bottom: var(--border-whisper); padding: 8px 0; }
.breadcrumb-bar .ant-breadcrumb { font-size: 13px; }
.breadcrumb-bar .ant-breadcrumb a { color: var(--notion-warm-gray-500); }
.breadcrumb-bar .ant-breadcrumb a:hover { color: var(--notion-blue); }

/* ══════════════════════════════════════════════
   Cards — Notion Card Style
══════════════════════════════════════════════ */
.notion-card {
  background: var(--notion-white);
  border: var(--border-whisper);
  border-radius: 12px;
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.2s, transform 0.15s;
}
.notion-card:hover {
  box-shadow: var(--shadow-deep);
  transform: translateY(-2px);
}

.course-card {
  background: var(--notion-white);
  border: var(--border-whisper);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 12px;
  transition: box-shadow 0.2s, transform 0.15s;
  box-shadow: var(--shadow-card);
}
.course-card:hover {
  box-shadow: var(--shadow-deep);
  transform: translateY(-2px);
}
.course-card .price { color: #e63a0a; font-weight: 700; font-size: 16px; }

/* ══════════════════════════════════════════════
   Buttons — Notion Style
══════════════════════════════════════════════ */
.btn-notion-primary {
  background: var(--notion-blue);
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.btn-notion-primary:hover { background: var(--notion-blue-active); }
.btn-notion-primary:active { transform: scale(0.97); }

/* Pill Badge */
.notion-badge {
  display: inline-flex;
  align-items: center;
  background: var(--notion-badge-bg);
  color: var(--notion-badge-text);
  border-radius: 9999px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.125px;
}

/* ══════════════════════════════════════════════
   Section Headers
══════════════════════════════════════════════ */
.section-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.25px;
  padding: 0 0 16px;
  border-bottom: var(--border-whisper);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--notion-black);
}
.section-title > span:first-child {
  position: relative;
  padding-left: 14px;
}
.section-title > span:first-child::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 18px;
  background: var(--notion-blue);
  border-radius: 2px;
}

/* ══════════════════════════════════════════════
   Category Sidebar
══════════════════════════════════════════════ */
.category-sidebar {
  background: var(--notion-white);
  border: var(--border-whisper);
  border-radius: 8px 0 0 8px;
  overflow: hidden;
}
.category-item {
  padding: 11px 16px;
  border-bottom: var(--border-whisper);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  position: relative;
  font-size: 14px;
  color: var(--notion-warm-gray-500);
}
.category-item:hover { background: var(--notion-badge-bg); color: var(--notion-blue); }
.category-item.active { background: var(--notion-blue); color: #fff; }

/* Flyout panel */
.subcategory-flyout {
  position: absolute;
  left: 100%;
  top: 0;
  width: 480px;
  min-height: 200px;
  background: var(--notion-white);
  border: var(--border-whisper);
  border-radius: 0 8px 8px 0;
  padding: 20px;
  box-shadow: var(--shadow-deep);
  z-index: 100;
}

/* ══════════════════════════════════════════════
   Carousel Dots
══════════════════════════════════════════════ */
.carousel-dots-custom li { margin: 0 3px !important; }
.carousel-dots-custom li button { width: 8px !important; height: 8px !important; border-radius: 50% !important; background: rgba(255,255,255,0.45) !important; transition: all 0.3s !important; }
.carousel-dots-custom li.slick-active button { background: #fff !important; width: 24px !important; height: 8px !important; border-radius: 4px !important; }

/* ══════════════════════════════════════════════
   Price Tag
══════════════════════════════════════════════ */
.price { color: #e63a0a; font-weight: 700; font-size: 16px; }
/* ══════════════════════════════════════════════
   Keyword Tags
══════════════════════════════════════════════ */
.keyword-tag {
  display: inline-block;
  padding: 4px 12px;
  margin: 3px;
  background: var(--notion-warm-white);
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.125px;
  cursor: pointer;
  transition: all 0.15s;
  color: var(--notion-warm-gray-500);
  border: var(--border-whisper);
}
.keyword-tag:hover { background: var(--notion-blue); color: #fff; border-color: transparent; }

/* ══════════════════════════════════════════════
   Footer — Notion warm dark style
══════════════════════════════════════════════ */
.site-footer {
  background: var(--notion-warm-dark);
  color: var(--notion-warm-gray-300);
  padding: 48px 0 24px;
}
.site-footer h4 { color: #e8e5e0; font-size: 15px; font-weight: 600; margin-bottom: 14px; }
.site-footer a { color: var(--notion-warm-gray-300); }
.site-footer a:hover { color: #fff; }

/* ══════════════════════════════════════════════
   AI Chat
══════════════════════════════════════════════ */
.ai-chat-btn {
  position: fixed; bottom: 30px; right: 30px; z-index: 1000;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--notion-blue);
  color: #fff; border: none; font-size: 22px; cursor: pointer;
  box-shadow: 0 4px 20px rgba(0,117,222,0.4);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.2s, box-shadow 0.2s;
}
.ai-chat-btn:hover { transform: scale(1.1); box-shadow: 0 6px 24px rgba(0,117,222,0.55); }
.ai-chat-panel {
  position: fixed; bottom: 96px; right: 30px; z-index: 1000;
  width: 380px; max-height: 520px;
  background: var(--notion-white); border-radius: 16px;
  box-shadow: var(--shadow-deep);
  display: flex; flex-direction: column; overflow: hidden;
}
.ai-chat-header { background: var(--notion-blue); color: #fff; padding: 14px 18px; font-weight: 600; font-size: 15px; }
.ai-chat-body { flex: 1; overflow-y: auto; padding: 16px; min-height: 250px; max-height: 360px; background: var(--notion-warm-white); }
.ai-chat-input { border-top: var(--border-whisper); padding: 12px; display: flex; gap: 8px; background: var(--notion-white); }
.ai-msg { margin-bottom: 14px; }
.ai-msg.user { text-align: right; }
.ai-msg .bubble { display: inline-block; max-width: 85%; padding: 8px 14px; border-radius: 12px; font-size: 14px; line-height: 1.5; text-align: left; }
.ai-msg.user .bubble { background: var(--notion-blue); color: #fff; border-radius: 12px 12px 0 12px; }
.ai-msg.bot .bubble { background: var(--notion-white); color: var(--notion-black); border: var(--border-whisper); border-radius: 12px 12px 12px 0; }
.ai-recommendation { background: #f0f9ff; border: 1px solid rgba(0,117,222,0.2); border-radius: 4px; padding: 8px; margin-top: 6px; font-size: 13px; }
.ai-recommendation a { color: var(--notion-blue); font-weight: 500; }