:root{
    --condLeft: 20%;/*左排菱形 left*/
    --LineLL: 11.6%;/*中排橫線與菱形間距*/
    --LineRL: 20%;  /*中排與左排橫線與間距*/
    --t1: 8%;       /*程式碼方塊做頂點*/
    --dy: 1.8%;     /*程式碼方塊垂直間距*/
    --dy1: 20%;     /*左排菱形垂直間距*/
    --vLine: 16.5%; /*左排橫線長*/
    --LineL: 20%;   /*左排直線左距*/
    --LineH: 5%;   /*左排直線長*/
    --LineT: 0%;    /*左排直線 top */
    --LineDy: 20%;   /*左排直線間距 */
    --LineRL: 40%;  /*右排橫線 left*/
}
/* 輸入/輸出方塊 - 矩形 */
.IOBlock {
    padding: 12px 24px;
    background: rgba(15, 23, 42, 0.95);
    border: 2px solid rgba(56, 189, 248, 0.85);
    border-radius: 6px;
    box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.35);
    transform: none;
    width: auto;
    height: auto;
    min-width: 100px;
}
/* 處理方塊 - 矩形 */
.processBlock {
    padding: 12px 24px;
    background: var(--bg-background);
    border: 2px solid var(--bg-borderColor);
    border-radius: 6px;
    box-shadow: 0 0 4px rgba(125, 211, 252, 0.5);
    transform: none;
    width: auto;
    height: auto;
    min-width: 100px;
}
/* 線條基礎設定 */
.lineStatus {
    position: absolute;
    background: var(--text-main);
}
/* 箭頭 - 向下 */
.lineStatus::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -7px;
    transform: translateX(-50%);
    border-width: 10px 8px 0 8px;
    border-style: solid;
    border-color: var(--text-main) transparent transparent transparent;
}
/* 移除水平線的垂直箭頭（但保留左右箭頭） */
.lineStatus.horizontal:not(.arrow-left):not(.arrow-right)::after {
    display: none;
}
/* 箭頭 - 向左 */
.lineStatus.arrow-left::after {
    content: "";
    position: absolute;
    left: -7px;
    top: 50%;
    transform: translateY(-50%);
    border-width: 8px 10px 8px 0;
    border-style: solid;
    border-color: transparent var(--text-main) transparent transparent;
}
/* 箭頭 - 向右 */
.lineStatus.arrow-right::after {
    content: "";
    position: absolute;
    /* 只用右邊＋垂直置中，避免吃到共用的 left / bottom */
    top: 50%;
    right: -7px;
    left: auto;
    bottom: auto;
    transform: translateY(-50%);
    border-width: 8px 0 8px 10px;
    border-style: solid;
    border-color: transparent transparent transparent var(--text-main);
}
#xZero-cond1,#cond1-Yes-A1,#A1-B1,#xZero-cond1, 
#xZero-cond2,#cond2-Yes-A2,#xZero-cond2,
#xZero-cond3,#cond3_1-Yes-cond3_2,#cond3_2-Yes-A3,#A3-B3,#B3-F3,#cond3_1-No-v-C3,#C3-cond3_3,#cond3_3-Yes-D3,#cond3_3-No-v-E3,#D3-F3,#E3-F3-v,#cond3_2-No-v-B3,
#cond4_1-No-cond4_2,#cond4_2-No-cond4_3,#cond4_3-No-v-D4,#xZero-cond4,#A4-v-E4
{
    width: 2px;
}
#cond1-No-h1-B1,#cond1-No-h2-B1, 
#cond2-No-h1-B2,#cond1-No-h2-B2,#B2-C2-h,
#cond3_1-No-h1-C3,#cond3_2-No-h1-B3,#cond3_2-No-h2-C3,#cond3_3-No-h-E3,#E3-F3-h,#cond3_2-No-h2-B3,
#cond4_1-Yes-A4,#cond4_2-Yes-B4,#cond4_3-Yes-C4,#cond4_1-No-h-D4,#A4-h1-E4,#B4-E4,#C4-E4,#D4-E4,#cond4_3-No-h-D4,#A4-h2-E4
{
    height: 2px;
}
/* 垂直線條 */
.lineStatus.vertical {width: 2px;}
/* 水平線條 */
.lineStatus.horizontal {height: 2px;}
#condition1,#cond1-Yes-A1,#A1-B1,#xZero-cond1
{
    left: 50%;
}
#condition2,#A2-C2,#xZero-cond2,#cond2-Yes-A2
{
    left: 30%;
}
#cond2-No-v-B2,#B2-C2-v
{
    left: 70%;
}


#cond1-No-h1-B1::after,#cond1-No-v-B1::after,
#B2-C2-v::after,
#E3-F3-v::after,#cond3_2-No-v-B3::after,
#cond4_3-No-v-D4::after,#A4-h-E4::after,#A4-v-E4::after {
    display: none;
}

/**************************/
/*** 1. 單一條件判斷(if) ***/
/**************************/
.fc-nested2-1 {
    position: relative;
    width: 400px;
    height: 500px;
    margin: 0 auto;
}
#xZero-cond1 {
    top: 0%;
    height: 7%;
}
#condition1{
    top: 12%;
    transform: translateX(-50%) rotate(45deg);
}
#code1A,#code1B {
    top: 48%;
    left: 37%;
}
#code1B {
    top: 74%;
}
#cond1-Yes-A1{
    top: 31.6%;
    height: 14.6%;
}
#cond1-No-h1-B1 {
    top: 19.6%;
    left: 64.2%;
    width: 17.6%;
}
/* x++ 往上回到 condition1 的垂直線 */
#cond1-No-v-B1 {
    top: 19.6%;
    left: 81.3%;
    height: 59.2%;
}
/* x++ 往右回到 condition1 的水平線段 2 - 向右箭頭 */
#cond1-No-h2-B1 {
    top: 78.4%;
    left: 65.2%;
    width: 16.4%;
}
#A1-B1{
    top: 60.2%;
    height: 11.8%;
}
#condition1-Yes,#condition2-Yes,
#condition3_1-Yes,#condition3_2-Yes,#condition3_3-Yes,
#condition4_1-Yes,#condition4_2-Yes,#condition4_3-Yes
{
    top: 90%;
    left: 116%;
}
#condition1-No, #condition2-No,
#condition3_1-No,#condition3_2-No,#condition3_3-No,
#condition4_1-No,#condition4_2-No,#condition4_3-No
{
    top: -60%;
    left: 156%;
}
/*********************************/
/*** 2. 條件判斷是與否(if-else) ***/
/*********************************/
.fc-nested2-2 {
    position: relative;
    width: 400px;
    height: 500px;
    margin: 0 auto;
}
#xZero-cond2 {
    top: 0%;
    height: 7%;
}
#condition2{
    top: 12%;
    transform: translateX(-50%) rotate(45deg);
}
#code2A,#code2B {
    top: 46%;
    left: 57%;
}
#code2A,#code2C {
    left: 17%;
}
#code2C {
    top: 74%;
}
#cond2-Yes-A2{
    top: 31.6%;
    height: 12.4%;
}
#cond2-No-h1-B2 {
    top: 19.8%;
    left: 44.4%;
    width: 25.6%;
}
#cond2-No-v-B2 {
    top: 19.8%;
    left: 69.8%;
    height: 24%;
}
#cond2-No-h2-B2 {
    top: 78.4%;
    left: 65.2%;
    width: 16.4%;
}
#A2-C2{
    top: 56.2%;
    height: 15.8%;
}
#B2-C2-h{
    top: 65%;
    width: 38.3%;
    left: 32%;
}
#B2-C2-v{
    top: 56%;
    height: 9.2%;
}

/************************/
/*** 3. 巢狀(套疊)判斷 ***/
/************************/
.fc-nested2-3 {
    position: relative;
    width: 500px;
    height: 800px;
    margin: 0 auto;
}
#xZero-cond3,#cond3_1-Yes-cond3_2,#cond3_2-Yes-A3,#condition3_1,
#condition3_2,#A3-B3,#B3-F3{left: 16%;}
#code3A,#code3B,#code3F{left: 6%;}
#cond3_1-No-v-C3,#C3-cond3_3,#cond3_3-Yes-D3,#D3-F3,#condition3_3{
    left: 53.4%;
}
#code3C,#code3D{left: 43%;}
#cond3_3-No-v-E3,#E3-F3-v {left: 89%;}
#xZero-cond3 {
    top: 0%;
    height: 4.6%;
}
#condition3_1,#condition3_2,#condition3_3{
    top: 8%;
    transform: translateX(-50%) rotate(45deg);
}
#condition3_2 {top: 29%;}
#condition3_3 {top: 63%;}
#code3A,#code3C {top: 49%;}
#code3B {top: 65%;}
#code3D,#code3E {top: 80%;}
#code3E {left: 78%;}
#code3F {top: 95%;}
#cond3_1-Yes-cond3_2{
    top: 20.4%;
    height: 5.4%;
}
#cond3_2-Yes-A3{
    top: 41.2%;
    height: 6.4%;
}
#cond3_1-No-h1-C3{
    top: 12.8%;
    left: 27.5%;
    width: 26%;
}
#cond3_1-No-v-C3{
    top: 12.8%;
    height: 35%;
}
#A3-B3,#C3-cond3_3{
    top: 55.4%;
    height: 8.2%;
}
#C3-cond3_3{height:4.4%;}
#cond3_3-Yes-D3{
    top:75.4%;
    height: 3.5%;
}
#D3-F3,#E3-F3-v{
    top: 86.6%;
    height: 3%;
}
#E3-F3-v{height: 4%;}
#E3-F3-h{
    top: 90.6%;
    left: 18%;
    width: 71.4%;
}
#cond3_2-No-h1-B3{
    top:33.9%;
    left:27.5%;
    width: 7%;
}
#cond3_2-No-v-B3{
    top:33.9%;
    left:34.4%;
    height: 34.2%;
}
#cond3_2-No-h2-B3,#cond3_3-No-h-E3{
    top:67.8%;
    left:28.6%;
    width: 6.2%;
}
#cond3_3-No-h-E3{
    left:65%;
    width: 24.4%;
}
#cond3_3-No-v-E3{
    top:68%;
    height:10.8%;
}
#B3-F3{
    top: 71.4%;
    height: 22.4%;
}

/**********************/
/*** 4. 多重條件判斷 ***/
/**********************/
.fc-nested2-4 {
    position: relative;
    width: 500px;
    height: 800px;
    margin: 0 auto;
}

/* ===== 輸入/輸出方塊的傾斜效果 ===== */
.Input,.Output {
    transform: skewX(-16deg);
}
.Input > span,.Output > span {
    display: inline-block;
    transform: skewX(16deg);
}
#condition4_1,#condition4_2,#condition4_3{
    left: var(--condLeft);
    transform: translateX(-50%) rotate(45deg);
}
#cond4_1-No-cond4_2,#cond4_2-No-cond4_3,#cond4_3-No-v-D4,
#xZero-cond4,#cond4_3-No-h-D4
{
    left: var(--LineL);
}
#condition4_1 {
    top: var(--t1);
}
#code4A{
    top: calc(var(--t1) + var(--dy));
}
#condition4_2 {
    top: calc(var(--t1) + var(--dy1));
}
#code4B{
    top: calc(var(--t1) + var(--dy1) + var(--dy));
}
#condition4_3 {
    top: calc(var(--t1) + var(--dy1) * 2);
}
#code4C{
    top: calc(var(--t1) + var(--dy1) * 2 + var(--dy));
}
#code4A,#code4B,#code4C,#code4D,#code4E{
    left: 50%;
}
#code4D{
    top: calc(var(--t1) + var(--dy1) * 3 + var(--dy));
}
#code4E{
    top: calc(var(--t1) + var(--dy1) * 4 + var(--dy));
}
#cond4_1-Yes-A4,#cond4_2-Yes-B4,#cond4_3-Yes-C4,#A4-h1-E4,
#B4-E4,#C4-E4,#D4-E4,#A4-h2-E4 {
    top: calc(var(--t1) + 5%);
    left: calc(var(--condLeft) + var(--LineLL));
    width: var(--vLine);
}
#cond4_2-Yes-B4,#B4-E4 {
    top: calc(var(--t1) + 5% + var(--dy1));
}
#cond4_3-Yes-C4,#C4-E4 {
    top: calc(var(--t1) + 5% + var(--dy1) * 2);
}
#xZero-cond4,#cond4_1-No-cond4_2,#cond4_2-No-cond4_3
{
    top: var(--LineT);
    height: var(--LineH);
}
#cond4_1-No-cond4_2{
    top: calc(var(--LineT) + var(--LineDy));
}
#cond4_2-No-cond4_3{
    top: calc(var(--LineT) + var(--LineDy) *2);
}
#cond4_3-No-v-D4{
    top: calc(var(--LineT) + var(--LineDy) * 3);
}
#cond4_3-No-v-D4{
    height: 13%;
}
#A4-h1-E4,#B4-E4,#C4-E4,#D4-E4,#A4-h2-E4 {
    left: calc(var(--condLeft) + var(--LineLL) + var(--LineRL));
}
#cond4_3-No-h-D4,#D4-E4{
    top: calc(var(--t1) + 5% + var(--dy1) * 3);
}
#cond4_3-No-h-D4{
    width: 28%;
}
#A4-v-E4 {
    top: calc(var(--t1) + 5%);
    left: 90%;
    height: 80%;
}
#A4-h1-E4,#A4-h2-E4{
    width: calc(var(--vLine) + 2%);
}
#A4-h2-E4{
    top: calc(var(--t1) + 5% + var(--dy1) * 4);
    left: calc(var(--condLeft) + var(--LineLL) + var(--LineRL) + 1%);
    width: calc(var(--vLine) + 1.3%);
}