/* =========================
   Reset
========================= */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

@font-face{
  font-family:"GoogleSansFlex";
  src:url("fonts/GoogleSansFlex_24pt-Regular.woff") format("woff");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

/* =========================
   Tokens
========================= */
:root{
  --left-width:310px;
  --gap:8px;
  --block-tools-gap:16px;
  --block-tools-top:80px;

  --info-top:60px;
  --info-left:44px;
  --info-right:36px;

  --font-main:"GoogleSansFlex","Microsoft YaHei","PingFang SC",-apple-system,BlinkMacSystemFont,sans-serif;
  --side-padding:10%;

  /* 馃敟 鍏抽敭锛氶槻姝㈤甯ц烦鍔?*/
  --tabs-h:88px;
}

/* =========================
   Base
========================= */
body{
  font-family:var(--font-main);
  font-weight:400;
  font-size:14px;
  line-height:1.5;

  background:#232324;
  color:#ececec;
}

/* =========================
   Layout
========================= */
.left{
  position:fixed;
  top:0;
  left:0;
  width:var(--left-width);
  height:100vh;
  overflow:hidden;
}

.left-wrap{
  transform:translateX(0);
  opacity:1;
  transition:
    transform 0.35s cubic-bezier(0.22,1,0.36,1),
    opacity 0.35s cubic-bezier(0.22,1,0.36,1);
  will-change:transform;
}

.left-hidden .left-wrap{
  transform:translateX(-100%);
  opacity:0;
}

.right{
  width:calc(100% - var(--left-width));
  transform:translateX(var(--left-width));
  transition:
    transform 0.35s cubic-bezier(0.22,1,0.36,1),
    width 0.35s cubic-bezier(0.22,1,0.36,1);
}

.left-hidden .right{
  width:100%;
  transform:translateX(0);
}

/* =========================
   Responsive
========================= */
@media (max-width:1000px){
  .left{
    transform:translateX(-100%);
    opacity:0;
    pointer-events:none;
  }
  .right{
    width:100%;
    transform:translateX(0);
  }
}

/* =========================
   Left Panel
========================= */
.left-inner{
  height:100%;
  padding:var(--info-top) var(--info-right) var(--info-top) var(--info-left);
  display:flex;
  flex-direction:column;
}

.pro{
  display:flex;
  flex-direction:column;
  gap:48px;
}

.icp-record{
  margin-top:auto;
  color:#6f6f6f;
  font-size:12px;
  line-height:1.4;
  text-decoration:none;
}

.icp-record:hover{
  color:#d6d6d6;
}

.pro-header{
  display:flex;
  flex-direction:column;
  gap:15px;
}

.avatar img{
  width:72px;
  height:72px;
  display:block;
}

.name-row{
  display:flex;
  align-items:center;
  gap:10px;
  height:24px;
}

.name{
  font-size:20px;
  line-height:24px;
}

.age{
  width:32px;
  height:21px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  line-height:1;
  color:#fff;
  background:#7055cf;
  border-radius:6px;
}

.logo{
  display:flex;
  gap:9px;
}

.icon{
  width:28px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.icon img{
  max-width:100%;
  max-height:100%;
  display:block;
}

/* =========================
   Text System锛堟仮澶嶏級
========================= */
.pro-section{
  display:flex;
  flex-direction:column;
  gap:10px;
  color:#8a8a8a;
}

.text-title{
  font-size:12px;
  color:#d6d6d6;
}

.text-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.text1{
  font-size:14px;
}

.text2{
  font-size:12px;
}

.pair3{
  display:flex;
  flex-direction:column;
  gap:24px;
}

.pair2{
  display:flex;
  align-items:center;
  gap:11px;
}

.pair1 img{
  width:21px;
  height:21px;
  display:block;
}

.pair{
  display:flex;
  flex-direction:column;
  gap:6px;
}

/* =========================
   Tabs
========================= */
.tabs{
  position:sticky;
  top:0;
  z-index:10;

  height:var(--tabs-h);
  padding:0 var(--side-padding);

  display:flex;
  align-items:center;

  background:rgba(35,35,36,0.65);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);

  transition:height 0.25s ease;
}

.tabs-inner{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:flex-end;
  position:relative;
  padding-bottom:2px;
}

.tabs-track{
  position:relative;
  z-index:1;

  display:flex;
  gap:36px;
  align-items:flex-end;

  height:32px;
}

.tab{
  height:32px;
  padding:0 6px;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:14px;
  color:#888;
  cursor:pointer;
  white-space:nowrap;
}

.tab.active{color:#fff;}

/* =========================
   Indicator锛堟渶缁堢ǔ瀹氱増锛?
========================= */
.tab-indicator{
  position:absolute;
  bottom:0;
  z-index:2;

  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg,#fff,#979797);

  opacity:0;
  pointer-events:none;
}

.tab-indicator.ready{
  opacity:1;

  transition:
    left 0.3s cubic-bezier(0.22,1,0.36,1),
    width 0.3s cubic-bezier(0.22,1,0.36,1),
    opacity 0.2s ease;
}

/* =========================
   Content
========================= */
.content{
  padding:0 var(--side-padding) var(--gap);
}

.tools{
  display:none;
  gap:20px;

  margin:80px 0 12px;
  transform:translateX(2px);
}

.tools.active{display:flex;}

.tools2{
  font-size:12px;
  font-weight:400;
  color:#fff;
  opacity:0.4;
  letter-spacing:0.5px;
}

.block-tools{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--block-tools-gap);
  margin:var(--block-tools-top) 0 12px;
  transform:translateX(2px);
}

.gallery{
  display:flex;
  flex-direction:column;
  gap:var(--gap);
}

.tab-content{display:none;}

.tab-content.active{
  display:flex;
  flex-direction:column;
}

/* =========================
   Grid
========================= */
.row{
  display:grid;
  gap:var(--gap);
}

.row > *{
  border-radius:6px;
  overflow:hidden;
}

.row img,
.row video{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

.col1{grid-template-columns:1fr;}
.col2{grid-template-columns:repeat(2,1fr);}
.col3{grid-template-columns:repeat(3,1fr);}
.col4{grid-template-columns:repeat(4,1fr);}

.visual-grid > *{
  aspect-ratio:360 / 820;
}

.recorder-rive-card{
  --design-w:360;
  --design-h:820;
  container-type:inline-size;
  isolation:isolate;
  position:relative;
  overflow:hidden;
  width:100%;
  height:100%;
  box-sizing:border-box;
  background:#fff;
  cursor:pointer;
}

.photoai-rive-card{
  position:relative;
  background:#131519;
}

.photoai-logo-card{
  position:relative;
  background:#000;
}

.photoai-logo-rive{
  position:absolute;
  z-index:1;
  height:auto;
}

.photoai-rive-card > img{
  position:absolute;
  inset:0;
  z-index:2;
  width:100%;
  height:100%;
  object-fit:cover;
}

.photoai-rive-layer{
  position:absolute;
  z-index:1;
  height:auto;
}

.photoai-rive-card > .photoai-rive-layer{
  height:auto;
}

/* 360x820 design stack mechanism.
   All layer variables are 1X visual coordinates in a 360x820 frame.
   Background assets may be any pixel size; they map to this design frame.
   For scaled Rive layers, set the visual w/h and --layer-scale. */
.design-stack{
  --design-w:360;
  --design-h:820;
  position:relative;
  overflow:hidden;
  aspect-ratio:var(--design-w) / var(--design-h);
}

.design-stack-bg{
  position:absolute;
  inset:0;
  z-index:1;
  width:100%;
  height:100%;
  object-fit:cover;
}

.design-stack-layer{
  --layer-scale:1;
  position:absolute;
  left:calc((var(--layer-x) + ((var(--layer-w) - (var(--layer-w) / var(--layer-scale))) / 2)) / var(--design-w) * 100%);
  top:calc(var(--layer-y) / var(--design-h) * 100%);
  width:calc((var(--layer-w) / var(--layer-scale)) / var(--design-w) * 100%);
  height:calc((var(--layer-h) / var(--layer-scale)) / var(--design-h) * 100%);
  transform:scale(var(--layer-scale));
  transform-origin:center top;
}

.design-layer{
  left:calc(var(--layer-x) / var(--design-w) * 100%);
  top:calc(var(--layer-y) / var(--design-h) * 100%);
  width:calc(var(--layer-w) / var(--design-w) * 100%);
  aspect-ratio:var(--layer-w) / var(--layer-h);
}

.rive-canvas.design-layer{
  width:calc(var(--layer-w) / var(--design-w) * 100%);
  height:auto;
}

.dashboard-grid > *{
  aspect-ratio:auto;
}

.flowos-stack{
  --design-w:360;
  --design-h:820;
  --rive-scale:2;
  position:relative;
  overflow:hidden;
  background:#050506;
  aspect-ratio:var(--design-w) / var(--design-h);
}

.flowos-stack > .flowos-stack-bg{
  position:absolute;
  inset:0;
  z-index:1;
  width:100%;
  height:100%;
  object-fit:cover;
}

.flowos-stack > .flowos-stack-rive{
  position:absolute;
  z-index:2;
  left:calc(98 / var(--design-w) * 100%);
  top:calc(102 / var(--design-h) * 100%);
  width:calc(164 / var(--design-w) * 100%);
  height:calc(77 / var(--design-h) * 100%);
  transform:scale(var(--rive-scale));
  transform-origin:center top;
}

.flowos-stack > .flowos-stack-top{
  position:absolute;
  z-index:3;
  left:calc(56.5 / var(--design-w) * 100%);
  top:calc(124.5 / var(--design-h) * 100%);
  width:calc(247 / var(--design-w) * 100%);
  height:calc(109 / var(--design-h) * 100%);
  object-fit:contain;
  pointer-events:none;
}
.flowai-rive{
  position:relative;
  overflow:hidden;
  background:#303033;
}

.flowai-stretch{
  width:100%;
  height:100%;
  object-fit:fill;
}

.flowai-helper{
  position:relative;
  overflow:hidden;
  background:#000;
  cursor:pointer;
}

.flowai-helper-bg{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:fill;
}

.flowai-helper > .flowai-helper-rive{
  position:absolute;
  inset:0;
  z-index:1;
  width:100%;
  height:100%;
}

.flowai-helper > .flowai-helper-rive[data-rive-defer="true"],
.flowai-rive > .rive-canvas[data-rive-defer="true"]{
  opacity:0;
  visibility:hidden;
}

.flowai-helper > .flowai-helper-rive[data-rive-visible="true"],
.flowai-rive > .rive-canvas[data-rive-visible="true"]{
  opacity:1;
  visibility:visible;
}

.flowai-marquee{
  position:relative;
  display:flex;
  align-items:center;
  min-height:124px;
  overflow:hidden;
  border-radius:6px;
  background:#f0f1f3;
}

.flowai-marquee::before,
.flowai-marquee::after{
  position:absolute;
  top:0;
  bottom:0;
  z-index:2;
  width:3%;
  pointer-events:none;
  content:"";
}

.flowai-marquee::before{
  left:0;
  background:linear-gradient(90deg,#f0f1f3 0%,rgba(240,241,243,0) 100%);
}

.flowai-marquee::after{
  right:0;
  background:linear-gradient(90deg,rgba(240,241,243,0) 0%,#f0f1f3 100%);
}

.flowai-marquee-track{
  display:flex;
  align-items:center;
  width:max-content;
  gap:36px;
  padding:0 36px;
  animation:flowai-marquee 272s linear infinite;
  will-change:transform;
}

.flowai-marquee img{
  width:auto;
  height:auto;
  max-width:none;
  flex:0 0 auto;
  object-fit:contain;
  aspect-ratio:auto;
  border-radius:0;
  zoom:0.5;
}

.flowai-marquee img[src*="C23"],
.flowai-marquee img[src*="C24"],
.flowai-marquee img[src*="C25"],
.flowai-marquee img[src*="C26"]{
  width:auto;
  height:auto;
  object-fit:contain;
  aspect-ratio:auto;
}

.flowai-marquee img[src*="C00Group"]{
  width:72px;
  height:72px;
  zoom:1;
}

@keyframes flowai-marquee{
  from{
    transform:translateX(0);
  }
  to{
    transform:translateX(-50%);
  }
}

.rive-canvas{
  width:100%;
  height:100%;
  display:block;
}

.rive-canvas[data-rive-click-cycle]{
  cursor:pointer;
}

.recorder-rive-card > .recorder-rive-layer{
  position:absolute;
  z-index:0;
  left:0;
  bottom:calc(285 / var(--design-h) * 100%);
  width:100%;
  height:calc(250 / var(--design-h) * 100%);
}

.recorder-rive-card > .recorder-standard-layer{
  position:absolute;
  left:calc(24 / var(--design-w) * 100%);
  top:calc(52 / var(--design-h) * 100%);
  z-index:2;
  width:calc(114 / var(--design-w) * 100%);
  height:auto;
  object-fit:contain;
}

.recorder-rive-card > .recorder-timer{
  position:absolute;
  left:0;
  top:calc(144 / var(--design-h) * 100%);
  z-index:2;
  width:100%;
  color:#BCBCBC;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:"GoogleSansFlex",var(--font-main);
  font-size:calc(50 / var(--design-w) * 100cqw);
  font-weight:300;
  line-height:1;
  letter-spacing:0;
  text-align:center;
  white-space:nowrap;
  pointer-events:none;
}

.recorder-timer .timer-char{
  flex:0 0 auto;
  color:#BCBCBC;
  display:block;
  text-align:center;
}

.recorder-timer .timer-number{
  width:0.62em;
}

.recorder-timer .timer-separator{
  width:0.3em;
}

.recorder-timer .timer-colon{
  display:block;
  transform:translateY(calc(-3 / var(--design-w) * 100cqw));
}

.recorder-timer .timer-char.is-active{
  color:#000;
}

.recorder-rive-card > .recorder-tick-track{
  position:absolute;
  left:50%;
  bottom:calc((285 + 250) / var(--design-h) * 100%);
  z-index:2;
  width:0;
  height:calc(8 / var(--design-w) * 100cqw);
  pointer-events:none;
}

.recorder-tick-track > span{
  position:absolute;
  left:0;
  bottom:0;
  width:calc(1 / var(--design-w) * 100cqw);
  height:calc(4 / var(--design-w) * 100cqw);
  background:#CCCCCC;
  transform:translateX(calc(var(--tick-x, 0) / var(--design-w) * 100cqw)) translateX(-50%);
}

.recorder-tick-track > span.is-major{
  height:calc(8 / var(--design-w) * 100cqw);
  background:#ADADAD;
}

.recorder-rive-card > .recorder-mini-time-track{
  position:absolute;
  left:50%;
  top:calc(265 / var(--design-h) * 100%);
  z-index:2;
  width:0;
  height:calc(12 / var(--design-w) * 100cqw);
  color:#ADADAD;
  font-family:"GoogleSansFlex",var(--font-main);
  font-size:calc(12 / var(--design-w) * 100cqw);
  font-weight:300;
  line-height:1;
  letter-spacing:0;
  white-space:nowrap;
  pointer-events:none;
  will-change:transform;
}

.recorder-mini-time-track > span{
  position:absolute;
  left:0;
  top:0;
  min-width:calc(38 / var(--design-w) * 100cqw);
  color:#ADADAD;
  text-align:center;
  transform:translateX(calc(var(--time-x, 0) / var(--design-w) * 100cqw)) translateX(-50%);
}

.recorder-rive-card > .recorder-launch-layer{
  position:absolute;
  left:calc(112 / var(--design-w) * 100%);
  bottom:0;
  z-index:2;
  width:calc(136 / var(--design-w) * 100%);
  height:auto;
  object-fit:contain;
}

.visual-placeholder{
  min-height:0;
  background:
    linear-gradient(135deg,rgba(255,255,255,0.16),rgba(255,255,255,0.02)),
    #303033;
  border:1px solid rgba(255,255,255,0.08);
}